@lowdefy/blocks-antd 5.6.0 → 6.1.0

package/dist/blocks/DateRangeSelector/gallery.yaml

@@ -0,0 +1,858 @@
+# Copyright 2020-2026 Lowdefy, Inc
+
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+
+#     http://www.apache.org/licenses/LICENSE-2.0
+
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+- title: Sizes
+  blocks:
+    - id: drs_size_small
+      type: DateRangeSelector
+      properties:
+        title: Small
+        size: small
+    - id: drs_size_default
+      type: DateRangeSelector
+      properties:
+        title: Default
+    - id: drs_size_large
+      type: DateRangeSelector
+      properties:
+        title: Large
+        size: large
+
+- title: Variants
+  blocks:
+    - id: drs_variant_outlined
+      type: DateRangeSelector
+      properties:
+        title: Outlined (default)
+        variant: outlined
+        label:
+          disabled: true
+    - id: drs_variant_filled
+      type: DateRangeSelector
+      properties:
+        title: Filled
+        variant: filled
+        label:
+          disabled: true
+    - id: drs_variant_borderless
+      type: DateRangeSelector
+      properties:
+        title: Borderless
+        variant: borderless
+        label:
+          disabled: true
+
+- title: Format Variations
+  blocks:
+    - id: drs_format_iso
+      type: DateRangeSelector
+      properties:
+        title: YYYY-MM-DD (ISO)
+        format: YYYY-MM-DD
+        label:
+          disabled: true
+    - id: drs_format_slash
+      type: DateRangeSelector
+      properties:
+        title: DD/MM/YYYY
+        format: DD/MM/YYYY
+        label:
+          disabled: true
+    - id: drs_format_us
+      type: DateRangeSelector
+      properties:
+        title: MM/DD/YYYY (US)
+        format: MM/DD/YYYY
+        label:
+          disabled: true
+    - id: drs_format_long
+      type: DateRangeSelector
+      properties:
+        title: DD MMMM YYYY
+        format: DD MMMM YYYY
+        label:
+          disabled: true
+    - id: drs_format_dot
+      type: DateRangeSelector
+      properties:
+        title: DD.MM.YYYY
+        format: DD.MM.YYYY
+        label:
+          disabled: true
+
+- title: Placeholder Options
+  blocks:
+    - id: drs_ph_default
+      type: DateRangeSelector
+      properties:
+        title: Default Placeholders
+        label:
+          disabled: true
+    - id: drs_ph_custom
+      type: DateRangeSelector
+      properties:
+        title: Custom Placeholders
+        placeholder:
+          - From
+          - To
+        label:
+          disabled: true
+    - id: drs_ph_hotel
+      type: DateRangeSelector
+      properties:
+        title: Hotel Booking
+        placeholder:
+          - Check-in date
+          - Check-out date
+        label:
+          disabled: true
+    - id: drs_ph_project
+      type: DateRangeSelector
+      properties:
+        title: Project Timeline
+        placeholder:
+          - Start date
+          - End date
+        label:
+          disabled: true
+    - id: drs_ph_report
+      type: DateRangeSelector
+      properties:
+        title: Report Period
+        placeholder:
+          - Period start
+          - Period end
+        label:
+          disabled: true
+
+- title: Custom Separator
+  blocks:
+    - id: drs_sep_tilde
+      type: DateRangeSelector
+      properties:
+        title: Tilde (default)
+        separator: '~'
+        label:
+          disabled: true
+    - id: drs_sep_dash
+      type: DateRangeSelector
+      properties:
+        title: Dash
+        separator: '-'
+        label:
+          disabled: true
+    - id: drs_sep_to
+      type: DateRangeSelector
+      properties:
+        title: Text "to"
+        separator: to
+        label:
+          disabled: true
+    - id: drs_sep_arrow
+      type: DateRangeSelector
+      properties:
+        title: Arrow
+        separator: '→'
+        label:
+          disabled: true
+    - id: drs_sep_pipe
+      type: DateRangeSelector
+      properties:
+        title: Pipe
+        separator: '|'
+        label:
+          disabled: true
+
+- title: Suffix Icon
+  blocks:
+    - id: drs_icon_default
+      type: DateRangeSelector
+      properties:
+        title: Default Calendar Icon
+        label:
+          disabled: true
+    - id: drs_icon_clock
+      type: DateRangeSelector
+      properties:
+        title: Clock Icon
+        suffixIcon: AiOutlineClockCircle
+        label:
+          disabled: true
+    - id: drs_icon_schedule
+      type: DateRangeSelector
+      properties:
+        title: Schedule Icon
+        suffixIcon: AiOutlineSchedule
+        label:
+          disabled: true
+    - id: drs_icon_custom_color
+      type: DateRangeSelector
+      properties:
+        title: Custom Color Icon
+        suffixIcon:
+          name: AiOutlineCalendar
+          color: '#1677ff'
+        label:
+          disabled: true
+    - id: drs_icon_heart
+      type: DateRangeSelector
+      properties:
+        title: Heart Icon
+        suffixIcon:
+          name: AiOutlineHeart
+          color: '#ff4d4f'
+        label:
+          disabled: true
+
+- title: Disabled State
+  blocks:
+    - id: drs_dis_default
+      type: DateRangeSelector
+      properties:
+        title: Disabled
+        disabled: true
+        label:
+          disabled: true
+    - id: drs_dis_outlined
+      type: DateRangeSelector
+      properties:
+        title: Disabled Outlined
+        disabled: true
+        variant: outlined
+        label:
+          disabled: true
+    - id: drs_dis_filled
+      type: DateRangeSelector
+      properties:
+        title: Disabled Filled
+        disabled: true
+        variant: filled
+        label:
+          disabled: true
+    - id: drs_dis_borderless
+      type: DateRangeSelector
+      properties:
+        title: Disabled Borderless
+        disabled: true
+        variant: borderless
+        label:
+          disabled: true
+
+- title: Disabled Dates
+  blocks:
+    - id: drs_dd_min
+      type: DateRangeSelector
+      properties:
+        title: Min Date (2024-01-01)
+        disabledDates:
+          min: '2024-01-01'
+        label:
+          disabled: true
+    - id: drs_dd_range
+      type: DateRangeSelector
+      properties:
+        title: Min & Max (2024 only)
+        disabledDates:
+          min: '2024-01-01'
+          max: '2024-12-31'
+        label:
+          disabled: true
+    - id: drs_dd_specific
+      type: DateRangeSelector
+      properties:
+        title: Specific Dates Disabled
+        disabledDates:
+          dates:
+            - '2026-03-15'
+            - '2026-03-20'
+            - '2026-03-25'
+        label:
+          disabled: true
+    - id: drs_dd_ranges
+      type: DateRangeSelector
+      properties:
+        title: Date Ranges Disabled
+        disabledDates:
+          ranges:
+            - ['2026-03-10', '2026-03-14']
+            - ['2026-03-20', '2026-03-24']
+        label:
+          disabled: true
+
+- title: Preset Ranges
+  # The popup is wider than a gallery column, and the card clips what overflows it.
+  overflowVisible: true
+  blocks:
+    - id: drs_presets_relative
+      type: DateRangeSelector
+      properties:
+        title: Relative Ranges
+        label:
+          extra: Shortcuts are listed to the left of the calendar.
+        presets:
+          - label: Last 7 Days
+            value:
+              - _dayjs:
+                  - now
+                  - subtract: [7, days]
+                  - format: YYYY-MM-DD
+              - _dayjs:
+                  - now
+                  - format: YYYY-MM-DD
+          - label: Last 14 Days
+            value:
+              - _dayjs:
+                  - now
+                  - subtract: [14, days]
+                  - format: YYYY-MM-DD
+              - _dayjs:
+                  - now
+                  - format: YYYY-MM-DD
+          - label: Last 30 Days
+            value:
+              - _dayjs:
+                  - now
+                  - subtract: [30, days]
+                  - format: YYYY-MM-DD
+              - _dayjs:
+                  - now
+                  - format: YYYY-MM-DD
+          - label: Last 90 Days
+            value:
+              - _dayjs:
+                  - now
+                  - subtract: [90, days]
+                  - format: YYYY-MM-DD
+              - _dayjs:
+                  - now
+                  - format: YYYY-MM-DD
+    - id: drs_presets_to_date
+      type: DateRangeSelector
+      properties:
+        title: Period To Date
+        label:
+          disabled: true
+        presets:
+          - label: Week to date
+            value:
+              - _dayjs:
+                  - now
+                  - startOf: week
+                  - format: YYYY-MM-DD
+              - _dayjs:
+                  - now
+                  - format: YYYY-MM-DD
+          - label: Month to date
+            value:
+              - _dayjs:
+                  - now
+                  - startOf: month
+                  - format: YYYY-MM-DD
+              - _dayjs:
+                  - now
+                  - format: YYYY-MM-DD
+          - label: Year to date
+            value:
+              - _dayjs:
+                  - now
+                  - startOf: year
+                  - format: YYYY-MM-DD
+              - _dayjs:
+                  - now
+                  - format: YYYY-MM-DD
+    - id: drs_presets_fixed
+      type: DateRangeSelector
+      properties:
+        title: Fixed Ranges
+        label:
+          disabled: true
+        presets:
+          - label: 2026 Q1
+            value: ['2026-01-01', '2026-03-31']
+          - label: 2026 Q2
+            value: ['2026-04-01', '2026-06-30']
+          - label: 2026 Q3
+            value: ['2026-07-01', '2026-09-30']
+          - label: 2026 Q4
+            value: ['2026-10-01', '2026-12-31']
+    - id: drs_presets_html_label
+      type: DateRangeSelector
+      properties:
+        title: Html Labels
+        label:
+          disabled: true
+        presets:
+          - label: '<b>Today</b>'
+            value:
+              - _dayjs:
+                  - now
+                  - format: YYYY-MM-DD
+              - _dayjs:
+                  - now
+                  - format: YYYY-MM-DD
+          - label: '<span style="color: #1677ff">This month</span>'
+            value:
+              - _dayjs:
+                  - now
+                  - startOf: month
+                  - format: YYYY-MM-DD
+              - _dayjs:
+                  - now
+                  - endOf: month
+                  - format: YYYY-MM-DD
+    - id: drs_presets_disabled_dates
+      type: DateRangeSelector
+      properties:
+        title: Presets And Disabled Dates
+        label:
+          extra: >-
+            Future dates are disabled. "Last 7 days" selects the allowed part of the range, and
+            "Next 7 days" has nothing to select, so it is listed as disabled.
+        disabledDates:
+          min: '2026-01-01'
+          max:
+            _dayjs:
+              - now
+              - format: YYYY-MM-DD
+        presets:
+          - label: Last 7 days
+            value:
+              - _dayjs:
+                  - now
+                  - subtract: [7, days]
+                  - format: YYYY-MM-DD
+              - _dayjs:
+                  - now
+                  - add: [7, days]
+                  - format: YYYY-MM-DD
+          - label: Next 7 days
+            value:
+              - _dayjs:
+                  - now
+                  - add: [1, day]
+                  - format: YYYY-MM-DD
+              - _dayjs:
+                  - now
+                  - add: [7, days]
+                  - format: YYYY-MM-DD
+
+- title: Label Options
+  blocks:
+    - id: drs_label_default
+      type: DateRangeSelector
+      properties:
+        title: Default Label
+    - id: drs_label_colon_off
+      type: DateRangeSelector
+      properties:
+        title: No Colon
+        label:
+          colon: false
+    - id: drs_label_right
+      type: DateRangeSelector
+      properties:
+        title: Align Right
+        label:
+          align: right
+    - id: drs_label_inline
+      type: DateRangeSelector
+      properties:
+        title: Inline Label
+        label:
+          inline: true
+          span: 8
+    - id: drs_label_extra
+      type: DateRangeSelector
+      properties:
+        title: Travel Dates
+        label:
+          extra: Select your departure and return dates.
+        placeholder:
+          - Departure
+          - Return
+    - id: drs_label_extra_html
+      type: DateRangeSelector
+      properties:
+        title: Contract Period
+        label:
+          extra: 'Choose the <b>start</b> and <b>end</b> dates for the contract.'
+        placeholder:
+          - Contract start
+          - Contract end
+    - id: drs_label_hidden
+      type: DateRangeSelector
+      properties:
+        title: Hidden Label
+        label:
+          disabled: true
+        placeholder:
+          - Start
+          - End
+    - id: drs_label_allow_clear
+      type: DateRangeSelector
+      properties:
+        title: No Clear Button
+        allowClear: false
+
+- title: Label Inline with Span
+  blocks:
+    - id: drs_label_inline_4
+      type: DateRangeSelector
+      properties:
+        title: Span 4
+        label:
+          inline: true
+          span: 4
+    - id: drs_label_inline_8
+      type: DateRangeSelector
+      properties:
+        title: Span 8
+        label:
+          inline: true
+          span: 8
+    - id: drs_label_inline_12
+      type: DateRangeSelector
+      properties:
+        title: Span 12
+        label:
+          inline: true
+          span: 12
+
+- title: HTML Title
+  blocks:
+    - id: drs_html_bold
+      type: DateRangeSelector
+      properties:
+        title: '<b>Bold</b> date range selector'
+        label:
+          disabled: true
+    - id: drs_html_color
+      type: DateRangeSelector
+      properties:
+        title: '<span style="color: #1677ff">Blue</span> date range selector'
+        label:
+          disabled: true
+    - id: drs_html_italic
+      type: DateRangeSelector
+      properties:
+        title: '<i>Italic</i> date range selector'
+        label:
+          disabled: true
+
+- title: Custom Style
+  blocks:
+    - id: drs_style_width
+      type: DateRangeSelector
+      style:
+        width: 500
+      properties:
+        title: Fixed Width (500px)
+        label:
+          disabled: true
+    - id: drs_style_narrow
+      type: DateRangeSelector
+      style:
+        width: 350
+      properties:
+        title: Narrow Width (350px)
+        label:
+          disabled: true
+    - id: drs_style_element
+      type: DateRangeSelector
+      style:
+        .element:
+      properties:
+        title: Custom Background
+        label:
+          disabled: true
+    - id: drs_style_label
+      type: DateRangeSelector
+      style:
+        .label:
+          color: '#531dab'
+          fontWeight: bold
+      properties:
+        title: Styled Label
+
+- title: Custom CSS Class
+  blocks:
+    - id: drs_class_rounded
+      type: DateRangeSelector
+      class: rounded-lg shadow-sm
+      properties:
+        title: Rounded with Shadow
+        label:
+          disabled: true
+    - id: drs_class_border
+      type: DateRangeSelector
+      class: border-2 border-border
+      properties:
+        title: Blue Border
+        label:
+          disabled: true
+    - id: drs_class_shadow
+      type: DateRangeSelector
+      class: shadow-md
+      properties:
+        title: Medium Shadow
+        label:
+          disabled: true
+
+- title: Theme Token Overrides
+  blocks:
+    - id: drs_theme_primary
+      type: DateRangeSelector
+      properties:
+        title: Custom Primary Color
+        label:
+          disabled: true
+        theme:
+          colorPrimary: '#722ed1'
+    - id: drs_theme_radius
+      type: DateRangeSelector
+      properties:
+        title: Large Border Radius
+        label:
+          disabled: true
+        theme:
+          borderRadius: 16
+    - id: drs_theme_bg
+      type: DateRangeSelector
+      properties:
+        title: Custom Background
+        variant: filled
+        label:
+          disabled: true
+    - id: drs_theme_brand
+      type: DateRangeSelector
+      properties:
+        title: Brand Purple
+        label:
+          disabled: true
+        theme:
+          colorPrimary: '#722ed1'
+          colorBorder: '#d3adf7'
+    - id: drs_theme_cell_range
+      type: DateRangeSelector
+      properties:
+        title: Green Range Background
+        label:
+          disabled: true
+        theme:
+          colorPrimary: '#52c41a'
+
+- title: Combined Features
+  blocks:
+    - id: drs_combo_hotel
+      type: DateRangeSelector
+      properties:
+        title: Hotel Booking
+        placeholder:
+          - Check-in date
+          - Check-out date
+        format: DD MMMM YYYY
+        size: large
+        separator: '→'
+        suffixIcon: AiOutlineSchedule
+        allowClear: true
+        label:
+          extra: Select your check-in and check-out dates.
+          colon: false
+    - id: drs_combo_minimal
+      type: DateRangeSelector
+      properties:
+        title: Date Range
+        variant: borderless
+        size: small
+        allowClear: false
+        format: DD/MM/YYYY
+        separator: '-'
+        placeholder:
+          - From
+          - To
+        label:
+          disabled: true
+    - id: drs_combo_restricted
+      type: DateRangeSelector
+      properties:
+        title: Event Registration
+        placeholder:
+          - Event start
+          - Event end
+        format: DD MMM YYYY
+        suffixIcon:
+          name: AiOutlineCalendar
+          color: '#1677ff'
+        disabledDates:
+          min: '2026-01-01'
+          max: '2026-12-31'
+        label:
+          extra: Only dates in 2026 are available.
+    - id: drs_combo_themed
+      type: DateRangeSelector
+      properties:
+        title: Themed Picker
+        variant: filled
+        size: large
+        format: DD MMMM YYYY
+        separator: '→'
+        placeholder:
+          - Start date
+          - End date
+        suffixIcon:
+          name: AiOutlineHeart
+          color: '#eb2f96'
+        label:
+          disabled: true
+        theme:
+          colorPrimary: '#eb2f96'
+          borderRadius: 20
+          controlHeightLG: 48
+          fontSize: 16
+    - id: drs_combo_contract
+      type: DateRangeSelector
+      properties:
+        title: Contract Period
+        placeholder:
+          - Contract start
+          - Contract end
+        format: DD MMM YYYY
+        separator: to
+        variant: outlined
+        size: large
+        suffixIcon:
+          name: AiOutlineFlag
+          color: '#722ed1'
+        label:
+          extra: 'Specify the <b>full duration</b> of the contract.'
+          inline: true
+          span: 6
+        theme:
+          colorPrimary: '#722ed1'
+          borderRadius: 8
+          activeShadow: '0 0 0 3px rgba(114, 46, 209, 0.12)'
+
+- title: DateRangeSelector in Report Generator
+  blocks:
+    - id: applied2_report_card
+      type: Card
+      properties:
+        title: Generate Report
+      blocks:
+        - id: applied2_report_date_range
+          type: DateRangeSelector
+          properties:
+            title: Report Period
+            placeholder:
+              - Start date
+              - End date
+            format: DD MMM YYYY
+            separator: '→'
+            size: large
+            label:
+              extra: Select the date range for your report.
+        - id: applied2_report_type
+          type: Selector
+          properties:
+            title: Report Type
+            placeholder: Select report type...
+            options:
+              - label: Financial Summary
+                value: financial
+              - label: Sales Overview
+                value: sales
+              - label: Inventory Report
+                value: inventory
+              - label: Employee Performance
+                value: performance
+        - id: applied2_report_format
+          type: Selector
+          properties:
+            title: Output Format
+            placeholder: Select format...
+            options:
+              - label: PDF
+                value: pdf
+              - label: Excel
+                value: xlsx
+              - label: CSV
+                value: csv
+        - id: applied2_report_generate_btn
+          type: Button
+          properties:
+            title: Generate Report
+            icon: AiOutlineFileText
+            type: primary
+            size: large
+            block: true
+          events:
+            onClick:
+              - id: generate_report_action
+                type: DisplayMessage
+                params:
+                  content: Report generation started. You will be notified when it is ready.
+                  duration: 3
+
+- title: DateRangeSelector in Vacation Request
+  blocks:
+    - id: applied3_vacation_card
+      type: Card
+      properties:
+        title: Request Vacation
+      blocks:
+        - id: applied3_vacation_dates
+          type: DateRangeSelector
+          properties:
+            title: Vacation Dates
+            placeholder:
+              - Leave date
+              - Return date
+            format: DD MMM YYYY
+            separator: '→'
+            size: large
+            disabledDates:
+              min: '2026-03-14'
+            label:
+              extra: Select the first and last day of your vacation.
+          events:
+            onChange:
+              - id: vacation_dates_changed
+                type: DisplayMessage
+                params:
+                  content: Vacation dates updated.
+                  duration: 2
+        - id: applied3_vacation_notes
+          type: TextArea
+          properties:
+            title: Notes
+            placeholder: Any additional details for your manager...
+            rows: 3
+        - id: applied3_vacation_submit_btn
+          type: Button
+          properties:
+            title: Submit Request
+            icon: AiOutlineSend
+            type: primary
+            size: large
+            block: true
+          events:
+            onClick:
+              - id: vacation_validate_action
+                type: Validate
+                params: applied3_vacation_dates
+              - id: vacation_submit_message
+                type: DisplayMessage
+                params:
+                  content: Vacation request submitted for approval.
+                  duration: 3