@lowdefy/blocks-antd 5.6.0 → 6.1.0

package/dist/blocks/DateSelector/tests/DateSelector.e2e.yaml

@@ -0,0 +1,229 @@
+# 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.
+
+id: dateselector
+type: Box
+
+events:
+  onInit:
+    - id: set_defaults
+      type: SetState
+      params:
+        ds_with_value:
+          _date: '2024-06-15'
+        ds_clearable:
+          _date: '2024-01-01'
+
+blocks:
+  # ============================================
+  # BASIC RENDERING
+  # ============================================
+
+  - id: ds_basic
+    type: DateSelector
+    properties:
+      title: Basic Date
+
+  - id: ds_with_value
+    type: DateSelector
+    properties:
+      title: With Value
+
+  # ============================================
+  # PROPERTY TESTS
+  # ============================================
+
+  - id: ds_disabled
+    type: DateSelector
+    properties:
+      title: Disabled
+      disabled: true
+
+  - id: ds_small
+    type: DateSelector
+    properties:
+      title: Small Size
+      size: small
+
+  - id: ds_large
+    type: DateSelector
+    properties:
+      title: Large Size
+      size: large
+
+  - id: ds_placeholder
+    type: DateSelector
+    properties:
+      title: Custom Placeholder
+      placeholder: Pick a date...
+
+  - id: ds_borderless
+    type: DateSelector
+    properties:
+      title: Borderless
+      bordered: false
+
+  - id: ds_no_allowclear
+    type: DateSelector
+    properties:
+      title: No Allow Clear
+      allowClear: false
+
+  - id: ds_with_title
+    type: DateSelector
+    properties:
+      title: Date with Title
+
+  - id: ds_with_label
+    type: DateSelector
+    properties:
+      title: Date Label
+      label:
+        extra: Select a date from the calendar
+
+  # ============================================
+  # DISABLED DATES TESTS
+  # ============================================
+
+  - id: ds_disabled_dates_min_max
+    type: DateSelector
+    properties:
+      title: Min/Max Range
+      disabledDates:
+        min:
+          _date: '2024-06-01'
+        max:
+          _date: '2024-06-30'
+
+  - id: ds_disabled_specific_dates
+    type: DateSelector
+    properties:
+      title: Specific Disabled Dates
+      disabledDates:
+        dates:
+          - _date: '2024-06-10'
+          - _date: '2024-06-20'
+
+  # ============================================
+  # EVENT TESTS
+  # ============================================
+
+  - id: ds_onchange
+    type: DateSelector
+    properties:
+      title: OnChange Test
+    events:
+      onChange:
+        - id: set_onchange
+          type: SetState
+          params:
+            ds_onchange_value:
+              _event: value
+
+  - id: ds_onchange_display
+    type: Span
+    properties:
+      content:
+        _if:
+          test:
+            _ne:
+              - _state: ds_onchange_value
+              - null
+          then: Date selected
+          else: ''
+
+  # ============================================
+  # INTERACTION TESTS
+  # ============================================
+
+  - id: ds_interaction
+    type: DateSelector
+    properties:
+      title: Interaction Test
+
+  - id: ds_clearable
+    type: DateSelector
+    properties:
+      title: Clearable
+      allowClear: true
+
+  # ============================================
+  # PRESETS
+  # ============================================
+
+  - id: ds_presets
+    type: DateSelector
+    properties:
+      title: Presets
+      format: YYYY-MM-DD
+      presets:
+        - label: New Year 2024
+          value: '2024-01-01'
+        - label: Mid 2024
+          value:
+            _date: '2024-06-15'
+
+  # The recommended idiom for a relative shortcut: a local time chain ending in a format step, so
+  # the preset selects the calendar date the browser shows as today rather than the UTC date.
+  - id: ds_presets_today
+    type: DateSelector
+    properties:
+      title: Presets Today
+      format: YYYY-MM-DD
+      presets:
+        - label: Today
+          value:
+            _dayjs:
+              - now
+              - format: YYYY-MM-DD
+
+  - id: ds_presets_min_now
+    type: DateSelector
+    properties:
+      title: Presets with a minimum date
+      format: YYYY-MM-DD
+      disabledDates:
+        min:
+          _dayjs: [now, { format: YYYY-MM-DD }]
+      presets:
+        - label: A Week Ago
+          value:
+            _dayjs: [now, { subtract: [7, days] }, { format: YYYY-MM-DD }]
+        - label: Today
+          value:
+            _dayjs: [now, { format: YYYY-MM-DD }]
+
+  - id: ds_disabled_ranges_from_to
+    type: DateSelector
+    properties:
+      title: Disabled ranges as from and to
+      format: YYYY-MM-DD
+      disabledDates:
+        ranges:
+          - from: '2026-03-10'
+            to: '2026-03-14'
+      presets:
+        - label: In the disabled range
+          value: '2026-03-12'
+        - label: Outside the disabled range
+          value: '2026-03-17'
+
+  - id: ds_disabled_ranges_array
+    type: DateSelector
+    properties:
+      title: Disabled ranges as an array
+      format: YYYY-MM-DD
+      disabledDates:
+        ranges:
+          - ['2026-03-10', '2026-03-14']

package/dist/blocks/DateSelector/tests.yaml

@@ -0,0 +1,117 @@
+# 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.
+
+- id: default
+  type: DateSelector
+- id: properties.title
+  type: DateSelector
+  properties:
+    title: DateSelector title
+- id: 'properties.allowClear: false'
+  type: DateSelector
+  properties:
+    allowClear: false
+- id: 'properties.autoFocus: true'
+  type: DateSelector
+  properties:
+    autoFocus: true
+- id: 'properties.bordered: false'
+  type: DateSelector
+  properties:
+    bordered: false
+- id: 'properties.disabled: true'
+  type: DateSelector
+  properties:
+    disabled: true
+- id: 'properties.disabledDates.min'
+  type: DateSelector
+  properties:
+    disabledDates:
+      min: 2020-10-20
+- id: 'properties.disabledDates.max'
+  type: DateSelector
+  properties:
+    disabledDates:
+      max: 2020-10-15
+- id: 'properties.disabledDates.dates'
+  type: DateSelector
+  properties:
+    disabledDates:
+      dates:
+        - _date: 2020-10-26
+        - 2020-10-29
+        - 2020-11-02
+- id: 'properties.disabledDates.ranges'
+  type: DateSelector
+  properties:
+    disabledDates:
+      ranges:
+        - ['2020-10-26', '2020-10-29']
+        - - 2020-11-01
+          - 2020-11-02
+- id: 'properties.format: YYYY-MMMM-DD'
+  type: DateSelector
+  properties:
+    format: YYYY-MMMM-DD
+- id: 'properties.inputStyle: CSS style applied'
+  type: DateSelector
+  properties:
+    inputStyle:
+      border: 1px solid red
+- id: 'properties.placeholder: - Select this Date'
+  type: DateSelector
+  properties:
+    placeholder: Select this Date
+- id: 'properties.showToday: true'
+  type: DateSelector
+  properties:
+    showToday: true
+- id: 'properties.size: small'
+  type: DateSelector
+  properties:
+    size: small
+- id: 'properties.suffixIcon: CalendarTwoTone'
+  type: DateSelector
+  properties:
+    suffixIcon: CalendarTwoTone
+- id: 'properties.label span: 12'
+  type: DateSelector
+  properties:
+    label:
+      span: 12
+- id: 'properties.label align: right'
+  type: DateSelector
+  properties:
+    label:
+      align: right
+- id: 'properties.label inline: true'
+  type: DateSelector
+  properties:
+    label:
+      inline: true
+- id: 'properties.label disabled: true'
+  type: DateSelector
+  properties:
+    label:
+      disabled: true
+- id: 'properties.label colon: true'
+  type: DateSelector
+  properties:
+    label:
+      colon: true
+- id: 'properties.label extra: extra text added'
+  type: DateSelector
+  properties:
+    label:
+      extra: extra text added

package/dist/blocks/DateTimeSelector/DateTimeSelector.js

@@ -21,6 +21,7 @@ import { withBlockDefaults } from '@lowdefy/block-utils';
 import Label from '../Label/Label.js';
 import withTheme from '../withTheme.js';
 import disabledDate from '../../disabledDate.js';
+import getPresets from '../../getPresets.js';
 dayjs.extend(utc);
 const DateTimeSelector = ({ blockId, classNames = {}, components: { Icon }, events, loading, methods, properties, required, styles = {}, validation, value })=>{
     const [elementId] = useState((0 | Math.random() * 9e2) + 1e2);
@@ -75,6 +76,12 @@ const DateTimeSelector = ({ blockId, classNames = {}, components: { Icon }, even
                     format: properties.format ?? getLocaleDateFormat(methods.getLocale?.(), 'datetime') ?? 'YYYY-MM-DD HH:mm',
                     getPopupContainer: ()=>document.getElementById(`${blockId}_${elementId}_popup`),
                     placeholder: properties.placeholder,
+                    presets: getPresets({
+                        disabledDates: properties.disabledDates,
+                        local: !properties.selectUTC,
+                        methods,
+                        presets: properties.presets
+                    }),
                     showNow: properties.showNow,
                     showToday: properties.showToday,
                     size: properties.size,

package/dist/blocks/DateTimeSelector/e2e.js

@@ -16,6 +16,13 @@
 import { expect } from '@playwright/test';
 const locator = (page, blockId)=>page.locator(`.ant-picker:has(#${escapeId(blockId)}_input)`);
 const input = (page, blockId)=>page.locator(`#${escapeId(blockId)}_input`);
+// The block renders the picker popup into a container inside itself, so the dropdown is scoped to
+// the block rather than to every open picker on the page.
+const pickerDropdown = (page, blockId)=>page.locator(`#bl-${escapeId(blockId)} .ant-picker-dropdown`);
+const presets = (page, blockId)=>pickerDropdown(page, blockId).locator('.ant-picker-presets');
+const presetItem = (page, blockId, label)=>presets(page, blockId).locator('li', {
+        hasText: label
+    });
 const monthNames = [
     'Jan',
     'Feb',
@@ -75,7 +82,7 @@ export default createBlockHelper({
             const [datePart, timePart] = dateTimeString.split(' ');
             const [year, month] = datePart.split('-').map(Number);
             await locator(page, blockId).click();
-            const dropdown = page.locator('.ant-picker-dropdown:visible');
+            const dropdown = pickerDropdown(page, blockId);
             await expect(dropdown).toBeVisible();
             await navigateToMonth(dropdown, year, month);
             await dropdown.locator(`.ant-picker-cell-in-view[title="${datePart}"]`).click();
@@ -94,6 +101,13 @@ export default createBlockHelper({
                 await dropdown.locator('.ant-picker-ok button').click();
             }
         },
+        selectPreset: async (page, blockId, label)=>{
+            await locator(page, blockId).click();
+            await expect(pickerDropdown(page, blockId)).toBeVisible();
+            await presets(page, blockId).getByText(label, {
+                exact: true
+            }).click();
+        },
         clear: async (page, blockId)=>{
             await locator(page, blockId).hover();
             await locator(page, blockId).locator('.ant-picker-clear').click();
@@ -101,6 +115,16 @@ export default createBlockHelper({
     },
     expect: {
         value: (page, blockId, val)=>expect(input(page, blockId)).toHaveValue(val),
-        placeholder: (page, blockId, text)=>expect(input(page, blockId)).toHaveAttribute('placeholder', text)
+        placeholder: (page, blockId, text)=>expect(input(page, blockId)).toHaveAttribute('placeholder', text),
+        presetLabels: (page, blockId, labels)=>expect(presets(page, blockId).locator('li')).toHaveText(labels),
+        presetLabelHtml: (page, blockId, { selector, text })=>expect(presets(page, blockId).locator(selector)).toHaveText(text),
+        noPresets: (page, blockId)=>expect(presets(page, blockId)).toHaveCount(0),
+        // A preset the calendar cannot select is disabled through the list item's pointer events, so
+        // asserting on those checks the shortcut is really unclickable and not only styled as such.
+        presetDisabled: (page, blockId, label)=>expect(presetItem(page, blockId, label)).toHaveCSS('pointer-events', 'none'),
+        presetEnabled: (page, blockId, label)=>expect(presetItem(page, blockId, label)).toHaveCSS('pointer-events', 'auto'),
+        // The picker only closes the popup once it accepts the value, so a closed popup is the
+        // signal that a selection was committed rather than just shown in the input.
+        closed: (page, blockId)=>expect(pickerDropdown(page, blockId)).toBeHidden()
     }
 });