slint/internal/compiler/widgets/fluent/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 "../common/layout.slint";
import { Button } from "./button.slint";
import { FluentPalette, FluentFontSettings, Icons } from "styling.slint";
import { MenuBorder } from "./components.slint";
import { StandardButton } from "../common/standardbutton.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(date: Date);

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

    background-layer := MenuBorder {
        width: dialog.width;
        height: dialog.height;
    }

    dialog := Dialog {
        padding: 8px;

        base := DatePickerBase {
            title: root.title;
            style: {
                  border-brush: FluentPalette.border,
                  vertical-spacing: 8px,
                  horizontal-spacing: 4px,
                  calendar-style: {
                      spacing: 8px,
                      delegate-style: {
                          font-size: FluentFontSettings.body-strong.font-size,
                          font-weight: FluentFontSettings.body-strong.font-weight,
                          foreground: FluentPalette.foreground,
                          state-brush: FluentPalette.state,
                          background-selected: FluentPalette.accent-background,
                          foreground-selected: FluentPalette.accent-foreground,
                          state-brush-selected: FluentPalette.state-secondary,
                          border-color-today: FluentPalette.accent-background,
                          foreground-today: FluentPalette.accent-background,
                          state-brush-today: FluentPalette.state,
                      }
                  },
                  icon-button-style: {
                      foreground: FluentPalette.foreground,
                      state-brush: FluentPalette.state,
                      icon-size: 12px,
                  },
                  current-day-style: {
                      font-size: FluentFontSettings.title.font-size,
                      font-weight: FluentFontSettings.title.font-weight,
                      foreground: FluentPalette.foreground,
                  },
                  title-style: {
                      font-size: FluentFontSettings.body.font-size,
                      font-weight: FluentFontSettings.body.font-weight,
                      foreground: FluentPalette.foreground,
                  },
                  previous-icon: Icons.arrow-back,
                  next-icon: Icons.arrow-forward,
                  drop-down-icon: Icons.dropdown,
                  input-icon: Icons.edit,
                  calendar-icon: Icons.calendar,
                  selection-button-style: {
                      foreground: FluentPalette.foreground,
                      state-brush: FluentPalette.state,
                      icon-size: 8px,
                      font-size: FluentFontSettings.body.font-size,
                      font-weight: FluentFontSettings.body.font-weight
                  }
            };
        }

        StandardButton {
            kind: cancel;

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

        StandardButton {
            enabled: base.ok-enabled();
            kind: ok;

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