@lowdefy/docs-content 0.0.0-experimental-20260928120643 → 6.1.0

package/content/input-blocks/daterangeselector.md

@@ -41,13 +41,6 @@ Date range picker for selecting start and end dates.
     variant: borderless
     label:
       disabled: true
-- id: drs_variant_underlined
-  type: DateRangeSelector
-  properties:
-    title: Underlined
-    variant: underlined
-    label:
-      disabled: true
 ```
 
 ```yaml
@@ -182,14 +175,14 @@ Date range picker for selecting start and end dates.
   type: DateRangeSelector
   properties:
     title: Clock Icon
-    suffixIcon: clock
+    suffixIcon: AiOutlineClockCircle
     label:
       disabled: true
 - id: drs_icon_schedule
   type: DateRangeSelector
   properties:
     title: Schedule Icon
-    suffixIcon: CalendarDays
+    suffixIcon: AiOutlineSchedule
     label:
       disabled: true
 - id: drs_icon_custom_color
@@ -197,7 +190,7 @@ Date range picker for selecting start and end dates.
   properties:
     title: Custom Color Icon
     suffixIcon:
-      name: calendar
+      name: AiOutlineCalendar
       color: "#1677ff"
     label:
       disabled: true
@@ -206,72 +199,12 @@ Date range picker for selecting start and end dates.
   properties:
     title: Heart Icon
     suffixIcon:
-      name: heart
+      name: AiOutlineHeart
       color: "#ff4d4f"
     label:
       disabled: true
 ```
 
-```yaml
-- id: drs_prefix_icon
-  type: DateRangeSelector
-  properties:
-    title: Prefix Icon
-    prefixIcon: clock
-    suffixIcon:
-      name: calendar
-      color: "#8c8c8c"
-- id: drs_prefix_text
-  type: DateRangeSelector
-  properties:
-    title: Prefix Text
-    prefix: "From:"
-- id: drs_placement
-  type: DateRangeSelector
-  properties:
-    title: Popup Opens Top Right
-    placement: topRight
-- id: drs_read_only
-  type: DateRangeSelector
-  properties:
-    title: Pick From Calendar Only
-    inputReadOnly: true
-    label:
-      extra: The input is read-only, so touch devices do not open the keyboard.
-```
-
-```yaml
-- id: drs_open_end
-  type: DateRangeSelector
-  properties:
-    title: Start Date, Optional End
-    allowEmpty:
-      - false
-      - true
-    label:
-      extra: Leave the end date empty for an ongoing range.
-- id: drs_fixed_start
-  type: DateRangeSelector
-  properties:
-    title: Fixed Start Date
-    disabled:
-      - true
-      - false
-  events:
-    onMount:
-      - id: set_default
-        type: SetState
-        params:
-          drs_fixed_start:
-            - _date: 2026-01-01
-            - _date: 2026-01-31
-- id: drs_show_week
-  type: DateRangeSelector
-  properties:
-    title: Show Week Numbers
-    showWeek: true
-```
-
 ```yaml
 - id: drs_dis_default
   type: DateRangeSelector
@@ -651,8 +584,7 @@ Date range picker for selecting start and end dates.
 - id: drs_style_element
   type: DateRangeSelector
   style:
-    .element:
-      backgroundColor: var(--ant-color-primary-bg)
+    .element: null
   properties:
     title: Custom Background
     label:
@@ -745,7 +677,7 @@ Date range picker for selecting start and end dates.
     format: DD MMMM YYYY
     size: large
     separator: →
-    suffixIcon: CalendarDays
+    suffixIcon: AiOutlineSchedule
     allowClear: true
     label:
       extra: Select your check-in and check-out dates.
@@ -773,7 +705,7 @@ Date range picker for selecting start and end dates.
       - Event end
     format: DD MMM YYYY
     suffixIcon:
-      name: calendar
+      name: AiOutlineCalendar
       color: "#1677ff"
     disabledDates:
       min: 2026-01-01
@@ -792,7 +724,7 @@ Date range picker for selecting start and end dates.
       - Start date
       - End date
     suffixIcon:
-      name: heart
+      name: AiOutlineHeart
       color: "#eb2f96"
     label:
       disabled: true
@@ -813,7 +745,7 @@ Date range picker for selecting start and end dates.
     variant: outlined
     size: large
     suffixIcon:
-      name: Flag
+      name: AiOutlineFlag
       color: "#722ed1"
     label:
       extra: Specify the <b>full duration</b> of the contract.
@@ -873,7 +805,7 @@ Date range picker for selecting start and end dates.
       type: Button
       properties:
         title: Generate Report
-        icon: document
+        icon: AiOutlineFileText
         type: primary
         size: large
         block: true
@@ -923,7 +855,7 @@ Date range picker for selecting start and end dates.
       type: Button
       properties:
         title: Submit Request
-        icon: send
+        icon: AiOutlineSend
         type: primary
         size: large
         block: true
@@ -942,11 +874,10 @@ Date range picker for selecting start and end dates.
 | Property | Type | Default | Description |
 | --- | --- | --- | --- |
 | `allowClear` | boolean | `true` | Allow the user to clear their input. |
-| `allowEmpty` | array | `[false,false]` | Allow the start or the end date to be left empty, for an open-ended range. An empty date is null in the block value. |
 | `autoFocus` | boolean | `false` | Autofocus to the block on page load. |
 | `bordered` | boolean | `true` | Deprecated - use variant: 'borderless'. Whether or not the input has a border style. |
-| `disabled` | boolean \| array | - | Disable the block if true. An array of two booleans disables only the start or the end input, eg. [true, false] to fix the start date. A disabled input needs a value, or allowEmpty for that input. |
-| `variant` | string | `"outlined"` | Variant style of the input. Use 'borderless' instead of bordered: false. Enum: `outlined`, `filled`, `borderless`, `underlined`. |
+| `disabled` | boolean | `false` | Disable the block if true. |
+| `variant` | string | `"outlined"` | Variant style of the input. Use 'borderless' instead of bordered: false. Enum: `outlined`, `filled`, `borderless`. |
 | `disabledDates` | object | - | Disable specific dates so that they can not be chosen. |
 | `disabledDates.min` | string \| object | - | Disable all dates less than the minimum date. Can be a date string or a _date object. |
 | `disabledDates.max` | string \| object | - | Disable all dates greater than the maximum date. Can be a date string or a _date object. |
@@ -955,113 +886,63 @@ Date range picker for selecting start and end dates.
 | `disabledDates.ranges.$.from` | string \| object | - | Start of the disabled range. |
 | `disabledDates.ranges.$.to` | string \| object | - | End of the disabled range. |
 | `format` | string | - | Format in which to parse the date value, eg. "DD MMMM YYYY" will parse a date value of 1999-12-31 as "31 December 1999". The format has to conform to dayjs formats. Defaults to the active locale's date format, or "YYYY-MM-DD" when no locale is configured. |
-| `inputReadOnly` | boolean | `false` | Make the text input read-only, so a date can only be chosen from the calendar. This also stops the on-screen keyboard opening on touch devices. |
 | `label` | object | - | Label properties. |
-| `label.xs` | object | - | Label width on extra small screens (below 576px) when the label is not inline. |
-| `label.xs.span` | number | - | Label width in columns, out of 24. The content takes the remaining columns. |
-| `label.sm` | object | - | Label width on small screens (576px and up) when the label is not inline. Also applies below 576px unless `xs` is set. |
-| `label.sm.span` | number | - | Label width in columns, out of 24. The content takes the remaining columns. |
-| `label.md` | object | - | Label width on medium screens (768px and up) when the label is not inline. Overrides `span`. |
-| `label.md.span` | number | - | Label width in columns, out of 24. The content takes the remaining columns. |
-| `label.lg` | object | - | Label width on large screens (992px and up) when the label is not inline. |
-| `label.lg.span` | number | - | Label width in columns, out of 24. The content takes the remaining columns. |
-| `label.xl` | object | - | Label width on extra large screens (1200px and up) when the label is not inline. |
-| `label.xl.span` | number | - | Label width in columns, out of 24. The content takes the remaining columns. |
-| `label.xxl` | object | - | Label width on extra extra large screens (1600px and up) when the label is not inline. |
-| `label.xxl.span` | number | - | Label width in columns, out of 24. The content takes the remaining columns. |
 | `label.align` | string | `"left"` | Align label left or right when inline. Enum: `left`, `right`. |
 | `label.colon` | boolean | `true` | Append label with colon. |
 | `label.extra` | string | - | Extra text to display beneath the content - supports html. |
 | `label.title` | string | - | Label title - supports html. |
 | `label.tooltip` | string \| object | - | Help tooltip shown via an icon beside the label. A string sets the tooltip text (supports html), or an object to also customize the icon and color. Use the block's onTooltipClick event to respond to clicks on the icon. |
 | `label.tooltip.title` | string | - | Tooltip text shown on hover - supports html. |
-| `label.tooltip.icon` | string | `"help"` | Icon name to show beside the label: a semantic name like `help`, a Lucide icon name like `CircleQuestionMark`, or a set-qualified name like `tabler:HelpCircle`. |
+| `label.tooltip.icon` | string | `"AiOutlineQuestionCircle"` | Name of the icon to show beside the label. |
 | `label.tooltip.color` | string | - | Color of the tooltip icon. |
-| `label.span` | number | - | Label width in columns, out of 24, on medium screens (768px) and up when the label is not inline. The content takes the remaining columns. |
+| `label.span` | number | - | Label inline span. |
 | `label.disabled` | boolean | `false` | Hide input label. |
 | `label.hasFeedback` | boolean | `true` | Display feedback extra from validation, this does not disable validation. |
 | `label.inline` | boolean | `false` | Render input and label inline. |
-| `label.wrap` | boolean | `false` | Wrap long label text onto multiple lines when the label is inline. Labels above their input always wrap. |
 | `placeholder` | array | - | Placeholder text inside the block before user types input. When unset, antd uses the localized default from ConfigProvider locale. |
-| `placement` | string | `"bottomLeft"` | Position of the calendar popup relative to the input. Enum: `bottomLeft`, `bottomRight`, `topLeft`, `topRight`. |
-| `prefix` | string | - | Prefix text shown before the date in the input, priority over prefixIcon. |
-| `prefixIcon` | string \| object | - | Icon name (a semantic name like `edit`, a Lucide icon name like `Pencil`, or a set-qualified name like `tabler:Pencil`) or properties of an Icon block to customize icon on the left-hand side of the date picker. |
-| `prefixIcon.name` | string | - | Icon name: a semantic name like `edit`, a Lucide icon name like `Pencil`, or a set-qualified name like `tabler:Pencil`. |
-| `prefixIcon.color` | string | - | Icon color. |
-| `prefixIcon.size` | string \| number | - | Size of the icon. Defaults to `theme.icons.size`. |
-| `prefixIcon.rotate` | number | - | Number of degrees to rotate the icon. |
-| `prefixIcon.spin` | boolean | - | Continuously spin the icon with animation. |
-| `prefixIcon.strokeWidth` | number | - | Stroke width of the icon lines, in pixels of the 24px icon grid. Defaults to `theme.icons.strokeWidth` (2). |
-| `prefixIcon.nonScalingStroke` | boolean | - | Keep the stroke width constant at any icon size. Defaults to `theme.icons.nonScalingStroke`. |
-| `prefixIcon.title` | string | - | Icon hover title for accessibility. An empty string marks the icon as decorative. |
-| `prefixIcon.disableLoadingIcon` | boolean | - | While loading after the icon has been clicked, don't render the loading icon. |
 | `presets` | array | - | Shortcuts listed next to the calendar to quickly select a date range. Presets are re-evaluated every time the block config is evaluated, so operator based values like "_date: now" stay current. A preset is offered on the same terms as the calendar cells: a range that starts or ends on a date disabledDates disables is narrowed to the dates it may select, so a "Last 7 days" shortcut still selects the allowed part of the last 7 days. A shortcut with nothing it may select is listed as disabled. |
 | `presets.$.label` | string | - | Text shown for the shortcut - supports html. |
 | `presets.$.value` | array | - | The start and end date of the range. A date string, a timestamp, or a _date object. Dates are read as UTC, the same as the block value, so a fixed date like "2026-01-01" resolves to the same day in every timezone. A date relative to now is an instant, not a calendar date, so end a _dayjs chain with a format step to pin it to the local calendar: "_dayjs: [now, {subtract: [7, days]}, {format: YYYY-MM-DD}]". Without the format step the chain resolves to an instant, which can select the day before or after the current one, depending on the browser timezone and the time of day. |
 | `separator` | string | `"~"` | Separator symbol shown between start and end date inputs. |
-| `showWeek` | boolean | `false` | Show the week number of each row in the calendar. |
 | `size` | string | `"default"` | Size of the block. Enum: `small`, `default`, `large`. |
-| `suffixIcon` | string \| object | `"calendar"` | Icon name (a semantic name like `edit`, a Lucide icon name like `Pencil`, or a set-qualified name like `tabler:Pencil`) or properties of an Icon block to customize icon on right-hand side of the date picker. |
-| `suffixIcon.name` | string | - | Icon name: a semantic name like `edit`, a Lucide icon name like `Pencil`, or a set-qualified name like `tabler:Pencil`. |
-| `suffixIcon.color` | string | - | Icon color. |
-| `suffixIcon.size` | string \| number | - | Size of the icon. Defaults to `theme.icons.size`. |
-| `suffixIcon.rotate` | number | - | Number of degrees to rotate the icon. |
-| `suffixIcon.spin` | boolean | - | Continuously spin the icon with animation. |
-| `suffixIcon.strokeWidth` | number | - | Stroke width of the icon lines, in pixels of the 24px icon grid. Defaults to `theme.icons.strokeWidth` (2). |
-| `suffixIcon.nonScalingStroke` | boolean | - | Keep the stroke width constant at any icon size. Defaults to `theme.icons.nonScalingStroke`. |
-| `suffixIcon.title` | string | - | Icon hover title for accessibility. An empty string marks the icon as decorative. |
-| `suffixIcon.disableLoadingIcon` | boolean | - | While loading after the icon has been clicked, don't render the loading icon. |
+| `suffixIcon` | string \| object | `"AiOutlineCalendar"` | Name of an React-Icon (See all icons) or properties of an Icon block to customize icon on right-hand side of the date picker. |
 | `title` | string | - | Title to describe the input component, if no title is specified the block id is displayed - supports html. |
 | `theme` | object | - | Antd design token overrides for this block. See [antd design tokens](https://ant.design/components/overview#design-token). See [Ant Design date-picker tokens](https://ant.design/components/date-picker#design-token). |
-| `theme.activeBg` | string | `"#ffffff"` | Background color of the input when the picker is active/focused. |
-| `theme.activeBorderColor` | string | - | Border color when the picker is active/focused. |
-| `theme.activeShadow` | string | `"0 0 0 2px rgba(5,145,255,0.1)"` | Shadow effect when the picker is active/focused. |
-| `theme.borderRadius` | number | `6` | Border radius of the picker input. |
-| `theme.borderRadiusLG` | number | `8` | Border radius for the large picker and popup panel. |
-| `theme.borderRadiusSM` | number | `4` | Border radius for the small picker. |
-| `theme.cellActiveWithRangeBg` | string | `"#e6f4ff"` | Background color of cells within the selected range. |
-| `theme.cellBgDisabled` | string | `"rgba(0,0,0,0.04)"` | Background color of disabled cells. |
 | `theme.cellHeight` | number | `24` | Height of a calendar cell. |
-| `theme.cellHoverBg` | string | `"rgba(0, 0, 0, 0.04)"` | Background color of a calendar cell on hover. |
-| `theme.cellHoverWithRangeBg` | string | `"#cbe0fd"` | Background color of cells within range on hover. |
-| `theme.cellRangeBorderColor` | string | `"#82b4f9"` | Border color of range selection cells. |
 | `theme.cellWidth` | number | `36` | Width of a calendar cell. |
-| `theme.colorBgContainer` | string | - | Background color of the picker input. |
-| `theme.colorBorder` | string | - | Border color of the picker input. |
-| `theme.colorPrimary` | string | - | Primary color used for the selected date and active states. |
-| `theme.colorText` | string | - | Text color of the picker input and calendar cells. |
-| `theme.colorTextPlaceholder` | string | - | Color of the placeholder text. |
-| `theme.controlHeight` | number | `32` | Height of the picker input. |
-| `theme.controlHeightLG` | number | `40` | Height of the large picker input. |
-| `theme.controlHeightSM` | number | `24` | Height of the small picker input. |
-| `theme.errorActiveShadow` | string | `"0 0 0 2px rgba(255,38,5,0.06)"` | Shadow effect when the picker has error status and is focused. |
-| `theme.fontSize` | number | `14` | Font size of the picker input. |
-| `theme.fontSizeLG` | number | `16` | Font size for the large picker. |
-| `theme.fontSizeSM` | number | `14` | Font size for the small picker. |
-| `theme.hoverBg` | string | `"#ffffff"` | Background color of the input when hovering over the picker. |
-| `theme.hoverBorderColor` | string | - | Border color when hovering over the picker. |
-| `theme.lineWidth` | number | `1` | Border width of the picker input. |
-| `theme.paddingBlock` | number | `4` | Vertical padding for the default size picker. |
-| `theme.paddingBlockLG` | number | `7` | Vertical padding for the large size picker. |
-| `theme.paddingBlockSM` | number | `0` | Vertical padding for the small size picker. |
-| `theme.paddingInline` | number | `11` | Horizontal padding for the default size picker. |
-| `theme.paddingInlineLG` | number | `11` | Horizontal padding for the large size picker. |
-| `theme.paddingInlineSM` | number | `7` | Horizontal padding for the small size picker. |
-| `theme.presetsMaxWidth` | number | `200` | Maximum width of the presets list next to the calendar. |
-| `theme.presetsWidth` | number | `120` | Width of the presets list next to the calendar. |
-| `theme.timeCellHeight` | number | `28` | Height of a time cell in the time panel. |
-| `theme.timeColumnHeight` | number | `224` | Height of the time panel column. |
+| `theme.cellHoverBg` | string | - | Background color of a calendar cell on hover. |
+| `theme.cellActiveWithRangeBg` | string | - | Background color of cells within the selected range. |
+| `theme.cellHoverWithRangeBg` | string | - | Background color of cells within range on hover. |
+| `theme.cellBgDisabled` | string | - | Background color of disabled cells. |
+| `theme.cellRangeBorderColor` | string | - | Border color of range selection cells. |
 | `theme.timeColumnWidth` | number | `56` | Width of the time panel column. |
-| `theme.warningActiveShadow` | string | `"0 0 0 2px rgba(255,215,5,0.1)"` | Shadow effect when the picker has warning status and is focused. |
-| `theme.withoutTimeCellHeight` | number | `66` | Height of the cells of the month, week, quarter, year and decade panels. |
-| `theme.zIndexPopup` | number | `1050` | Z-index of the picker popup layer. |
+| `theme.timeColumnHeight` | number | `224` | Height of the time panel column. |
+| `theme.timeCellHeight` | number | `28` | Height of a time cell in the time panel. |
+| `theme.addonBg` | string | - | Background color for the addon area. |
+| `theme.hoverBorderColor` | string | - | Border color on hover. |
+| `theme.activeBorderColor` | string | - | Border color when active. |
+| `theme.activeShadow` | string | - | Shadow effect when active. |
+| `theme.paddingBlock` | number | `4` | Vertical padding of the input. |
+| `theme.paddingBlockSM` | number | `0` | Vertical padding for small size. |
+| `theme.paddingBlockLG` | number | `7` | Vertical padding for large size. |
+| `theme.paddingInline` | number | `11` | Horizontal padding of the input. |
+| `theme.paddingInlineSM` | number | `7` | Horizontal padding for small size. |
+| `theme.paddingInlineLG` | number | `11` | Horizontal padding for large size. |
+| `theme.zIndexPopup` | number | `1050` | Z-index of the picker popup. |
+| `theme.borderRadius` | number | `6` | Border radius of the input. |
+| `theme.controlHeight` | number | `32` | Height of the input. |
+| `theme.controlHeightLG` | number | `40` | Height for large size. |
+| `theme.controlHeightSM` | number | `24` | Height for small size. |
+| `theme.fontSize` | number | `14` | Font size. |
+| `theme.lineWidth` | number | `1` | Border width. |
+| `theme.colorPrimary` | string | - | Primary color override. |
+| `theme.colorBgContainer` | string | - | Background color of the input. |
+| `theme.colorText` | string | - | Text color. |
+| `theme.colorBorder` | string | - | Border color. |
+| `theme.colorTextPlaceholder` | string | - | Placeholder text color. |
 
 | Event | Event Data | Description |
 | --- | --- | --- |
-| `onBlur` | `{ range }` | Trigger actions when the picker loses focus. |
-| `onClear` | \- | Trigger actions when the clear button is clicked. |
-| `onFocus` | `{ range }` | Trigger actions when the picker gets focus. |
-| `onOpenChange` | `{ open }` | Trigger actions when the calendar popup opens or closes. |
 | `onChange` | `{ value }` | Trigger actions when selection is changed. |
 | `onTooltipClick` | \- | Trigger actions when the tooltip icon is clicked. |
 
@@ -1073,7 +954,6 @@ Date range picker for selecting start and end dates.
 | `/extra` | The DateRangeSelector extra content. |
 | `/feedback` | The DateRangeSelector validation feedback. |
 | `/popup` | The DateRangeSelector popup. |
-| `/prefixIcon` | The prefix icon in the DateRangeSelector. |
 | `/suffixIcon` | The suffix icon in the DateRangeSelector. |
 
 No slots defined.