slint/internal/compiler/widgets/material/datepicker.slint

// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0

import { VerticalBox } from "./layouts.slint";
import { TextButton } from "./button.slint";
import { MaterialPalette, MaterialFontSettings, Icons } from "styling.slint";

import { Date, DatePickerBase } from "../common/datepicker_base.slint";
export { Date } 

export component DatePickerPopup inherits PopupWindow {
    in property <string> title: "Select date";
    in property <Date> date <=> base.date;

    callback canceled();
    callback accepted(/* current-date */ Date);

    width: 360px;
    height: 524px;
    close-policy: PopupClosePolicy.no-auto-close;

    background-layer := Rectangle {
        width: dialog.width;
        height: dialog.height;
        background: MaterialPalette.surface-container-high;
        border-radius: 28px;
    }

    dialog := Dialog {    
        padding: 8px;
        
        base := DatePickerBase {
            title: root.title;
            style: {
                border-brush: MaterialPalette.border,
                vertical-spacing: 8px,
                horizontal-spacing: 4px,
                calendar-style: {
                    spacing: 8px,
                    delegate-style: {
                        font-size: MaterialFontSettings.body-large.font-size,
                        font-weight: MaterialFontSettings.body-large.font-weight,
                        foreground: MaterialPalette.foreground,
                        state-brush: MaterialPalette.state-default,
                        background-selected: MaterialPalette.accent-background,
                        foreground-selected: MaterialPalette.accent-foreground,
                        state-brush-selected: MaterialPalette.state-secondary,
                        border-color-today: MaterialPalette.accent-background,
                        foreground-today: MaterialPalette.accent-background,
                        state-brush-today: MaterialPalette.state-tertiary,
                    }
                },
                icon-button-style: {
                    foreground: MaterialPalette.foreground,
                    state-brush: MaterialPalette.state-default,
                    icon-size: 12px,
                },
                current-day-style: {
                    font-size: MaterialFontSettings.headline-large.font-size,
                    font-weight: MaterialFontSettings.headline-large.font-weight,
                    foreground: MaterialPalette.foreground,  
                },
                title-style: {
                    font-size: MaterialFontSettings.label-medium.font-size,
                    font-weight: MaterialFontSettings.label-medium.font-weight,
                    foreground: MaterialPalette.foreground,  
                },
                previous-icon: Icons.arrow-back,
                next-icon: Icons.arrow-forward,
                drop-down-icon: Icons.arrow-drop-down,
                input-icon: Icons.edit,
                calendar-icon: Icons.calendar,
                selection-button-style: {
                    foreground: MaterialPalette.foreground,
                    state-brush: MaterialPalette.state-default,
                    icon-size: 10px,
                    font-size: MaterialFontSettings.label-large.font-size,
                    font-weight: MaterialFontSettings.label-large.font-weight
                } 
            };
        }
        
        TextButton {
            text: @tr("Cancel");
            dialog-button-role: reject;

            clicked => {
                root.close();
                root.canceled();
            }
        }

        TextButton {
            text: @tr("OK");
            enabled: base.ok-enabled();
            dialog-button-role: accept;

            clicked => {
                root.close();
                root.accepted(base.get-current-date());
            }
        }
    }
}