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

package/content/input-blocks/datetimeselector.md

@@ -41,13 +41,6 @@ Combined date and time picker.
     variant: borderless
     label:
       disabled: true
-- id: dts_variant_underlined
-  type: DateTimeSelector
-  properties:
-    title: Underlined
-    variant: underlined
-    label:
-      disabled: true
 ```
 
 ```yaml
@@ -258,55 +251,6 @@ Combined date and time picker.
       disabled: true
 ```
 
-```yaml
-- id: dts_prefix_icon
-  type: DateTimeSelector
-  properties:
-    title: Prefix Icon
-    prefixIcon: clock
-    suffixIcon:
-      name: calendar
-      color: "#8c8c8c"
-- id: dts_prefix_text
-  type: DateTimeSelector
-  properties:
-    title: Prefix Text
-    prefix: "From:"
-- id: dts_placement
-  type: DateTimeSelector
-  properties:
-    title: Popup Opens Top Right
-    placement: topRight
-- id: dts_read_only
-  type: DateTimeSelector
-  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: dts_no_confirm
-  type: DateTimeSelector
-  properties:
-    title: No OK Button
-    needConfirm: false
-    label:
-      extra: No OK button, the selection is saved when the popup closes.
-- id: dts_twelve_hour
-  type: DateTimeSelector
-  properties:
-    title: 12 Hour Clock
-    format: YYYY-MM-DD hh:mm a
-    timeFormat: hh:mm a
-- id: dts_show_week
-  type: DateTimeSelector
-  properties:
-    title: Show Week Numbers
-    showWeek: true
-```
-
 ```yaml
 - id: dts_dis_outlined
   type: DateTimeSelector
@@ -350,14 +294,14 @@ Combined date and time picker.
   type: DateTimeSelector
   properties:
     title: Clock Icon
-    suffixIcon: clock
+    suffixIcon: AiOutlineClockCircle
     label:
       disabled: true
 - id: dts_icon_schedule
   type: DateTimeSelector
   properties:
     title: Schedule Icon
-    suffixIcon: CalendarDays
+    suffixIcon: AiOutlineSchedule
     label:
       disabled: true
 - id: dts_icon_custom_color
@@ -365,7 +309,7 @@ Combined date and time picker.
   properties:
     title: Custom Color Icon
     suffixIcon:
-      name: calendar
+      name: AiOutlineCalendar
       color: "#1677ff"
     label:
       disabled: true
@@ -374,7 +318,7 @@ Combined date and time picker.
   properties:
     title: Heart Icon
     suffixIcon:
-      name: heart
+      name: AiOutlineHeart
       color: "#ff4d4f"
     label:
       disabled: true
@@ -566,8 +510,7 @@ Combined date and time picker.
 - id: dts_style_element
   type: DateTimeSelector
   style:
-    .element:
-      backgroundColor: var(--ant-color-primary-bg)
+    .element: null
   properties:
     title: Custom Background
     label:
@@ -652,7 +595,7 @@ Combined date and time picker.
     placeholder: Select appointment date & time
     format: DD MMMM YYYY HH:mm
     size: large
-    suffixIcon: CalendarDays
+    suffixIcon: AiOutlineSchedule
     showToday: true
     showNow: true
     allowClear: true
@@ -682,7 +625,7 @@ Combined date and time picker.
     minuteStep: 30
     hourStep: 1
     suffixIcon:
-      name: calendar
+      name: AiOutlineCalendar
       color: "#1677ff"
     disabledDates:
       min: 2026-01-01
@@ -697,7 +640,7 @@ Combined date and time picker.
     selectUTC: true
     size: large
     variant: filled
-    suffixIcon: clock
+    suffixIcon: AiOutlineClockCircle
     label:
       extra: Time is recorded in UTC.
 - id: dts_combo_themed
@@ -710,7 +653,7 @@ Combined date and time picker.
     placeholder: Choose a special date & time...
     minuteStep: 15
     suffixIcon:
-      name: heart
+      name: AiOutlineHeart
       color: "#eb2f96"
     label:
       disabled: true
@@ -735,7 +678,7 @@ Combined date and time picker.
         format: DD MMMM YYYY HH:mm
         minuteStep: 15
         size: large
-        suffixIcon: CalendarDays
+        suffixIcon: AiOutlineSchedule
         label:
           extra: Appointments are available in 15-minute slots.
         disabledDates:
@@ -765,7 +708,7 @@ Combined date and time picker.
       type: Button
       properties:
         title: Book Appointment
-        icon: calendar
+        icon: AiOutlineCalendar
         type: primary
         size: large
         block: true
@@ -796,7 +739,7 @@ Combined date and time picker.
         placeholder: Select meeting date and time
         format: DD MMMM YYYY HH:mm
         minuteStep: 15
-        suffixIcon: clock
+        suffixIcon: AiOutlineClockCircle
         label:
           extra: Meetings are scheduled in 15-minute increments.
         disabledDates:
@@ -811,7 +754,7 @@ Combined date and time picker.
       type: Button
       properties:
         title: Schedule Meeting
-        icon: CalendarDays
+        icon: AiOutlineSchedule
         type: primary
         size: large
         block: true
@@ -830,7 +773,7 @@ Combined date and time picker.
 | `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 | `false` | Disable the block if true. |
-| `variant` | string | `"outlined"` | Variant style of the input. Use 'borderless' instead of bordered: false. Enum: `outlined`, `filled`, `borderless`, `underlined`. |
+| `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. |
@@ -840,119 +783,68 @@ Combined date and time picker.
 | `disabledDates.ranges.$.to` | string \| object | - | End of the disabled range. |
 | `format` | string | - | Format in which to parse the date value, eg. "DD MMMM YYYY HH:mm" will parse a date value of 1999-12-31T15:30 as "31 December 1999 15:30". The format has to conform to dayjs formats. Defaults to the active locale's date-time format, or "YYYY-MM-DD HH:mm" when no locale is configured. |
 | `hourStep` | integer | `1` | Hour intervals to show in the time selector. |
-| `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. |
 | `minuteStep` | integer | `5` | Minute intervals to show in the time selector. |
-| `needConfirm` | boolean | `true` | Require the OK button to confirm the selection. When false, the popup has no OK button and the selection is saved when the popup closes, eg. when the user clicks outside it or presses Enter. |
 | `placeholder` | string | - | Placeholder text inside the block before user types input. |
-| `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 and time. 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 shortcut with nothing it may select is listed as disabled. |
 | `presets.$.label` | string | - | Text shown for the shortcut - supports html. |
 | `presets.$.value` | string \| number \| object | - | A date string, a timestamp, or a _date object. The date is used as the instant it names, so "_date: now" and _dayjs chains need no special handling. With selectUTC the instant is shown on the UTC clock, so a chain that snaps to a calendar boundary needs a utc step to snap to the UTC day, eg. "_dayjs: [now, utc, {startOf: day}]". Without selectUTC the instant is shown on the local clock, so a chain resolves in local time, eg. "_dayjs: [now, {startOf: day}]". |
-| `secondStep` | integer | `30` | Second intervals to show in the time selector. |
+| `secondStep` | integer | `5` | Minute intervals to show in the time selector. |
 | `selectUTC` | boolean | `false` | Shows the user's selection as UTC time, not time-zone based. |
-| `showToday` | boolean | `true` | Deprecated - use showNow. Used for showNow when showNow is not set. |
+| `showToday` | boolean | `true` | Shows a button to easily select the current date if true. |
 | `showNow` | boolean | `true` | Shows a 'Now' button to set current time. |
-| `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. |
-| `timeFormat` | string | `"HH:mm"` | Time format to show in the time selector. HH:mm:ss will show hours, minutes and seconds, HH:mm only hours and minutes and HH only hours. A 12 hour format like "hh:mm a" adds an AM/PM column; use a matching format, eg. "YYYY-MM-DD hh:mm a", to show the time in the input. |
+| `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. |
+| `timeFormat` | string | `"HH:mm"` | Time format to show in the time selector. HH:mm:ss will show hours, minutes and seconds, HH:mm only hours and minutes and HH only hours. |
 | `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` | \- | Trigger actions when the picker loses focus. |
-| `onClear` | \- | Trigger actions when the clear button is clicked. |
-| `onFocus` | \- | 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. |
 
@@ -964,7 +856,6 @@ Combined date and time picker.
 | `/extra` | The DateTimeSelector extra content. |
 | `/feedback` | The DateTimeSelector validation feedback. |
 | `/popup` | The DateTimeSelector popup. |
-| `/prefixIcon` | The prefix icon in the DateTimeSelector. |
 | `/suffixIcon` | The suffix icon in the DateTimeSelector. |
 
 No slots defined.

package/content/input-blocks/inputgallery.md

@@ -14,7 +14,7 @@ A visual reference of every input block available in Lowdefy. Each section shows
   properties:
     label:
       title: With prefix icon
-    prefixIcon: user
+    prefixIcon: AiOutlineUser
     placeholder: Username
 - id: ig_text_count
   type: TextInput
@@ -270,8 +270,8 @@ A visual reference of every input block available in Lowdefy. Each section shows
   properties:
     label:
       title: Switch (with icons)
-    checkedIcon: check
-    uncheckedIcon: close
+    checkedIcon: AiOutlineCheck
+    uncheckedIcon: AiOutlineClose
 - id: ig_checkbox_sw
   type: CheckboxSwitch
   properties: