List of available UI components
Below is a list of Vue 3 components available in the UI. These components are available immediately and do not need to be imported.
D1Accordion
Demo
<div :class="classDemo.item">
<D1Accordion :open="true" :auto-close="false" v-bind="args">
<div class="wiki-storybook-item--padding">
Hidden content
</div>
</D1Accordion>
</div>Description
Collapsible container for progressive disclosure. Toggles content visibility to manage space and cognitive load. Use for FAQs, grouped settings, hiding secondary info, or compact dashboards.
Header is based on a Cell component and supports label, description, and icon. Features an auto-rotating arrow indicator and smooth height transitions via MotionTransform.
Built-in ARIA support and keyboard navigation (Space/Enter). Controlled primarily via v-model:open. Customizable with divider and header attributes through cellAttrs.
<D1Accordion
description="Here is a detailed description of the component"
label="Label"
icon="home"
/>Label
Here is a detailed description of the component
Hidden content
Emits type AccordionEmits
Expose interface AccordionExpose
Slots interface AccordionSlots
Props type AccordionProps
Enumeration of some properties
divider:
boolean Enables visual divider between elements
default value: true
auto-close:
boolean Closes the window/menu when clicking inside the content area
default value: true
click-open:
boolean Enable opening on click
default value: true
D1ActionSheet
Demo
<div :class="classDemo.item" style="min-width: 800px;">
<D1ActionSheet embedded open v-bind="args">
<template #control="{ binds }">
<button v-bind="binds">Open Menu</button>
</template>
<template #default>Content goes here...</template>
</D1ActionSheet>
</div>Description
Mobile-optimized modal component (Bottom Sheet) that slides up from the bottom for actions, choices, or secondary content. Follows standard mobile interface patterns (iOS/Material).
Features touch-gestures (swipe-down to close), backdrop dismissal, and keyboard accessibility. Includes primary/secondary action lists and automatic height adjustment based on content.
Highly flexible with slots (#control, #title, #default, #footer) and controlled primarily via v-model:open. Use for mobile-focused menus, sharing options, or contextual actions.
<D1ActionSheet
actionsList="[{"icon":"edit","label":"Edit"},{"icon":"delete","label":"Delete"},{"icon":"share","label":"Share"}]"
actionsSecondary="[{"icon":"info","label":"Info"},{"icon":"help","label":"Help"}]"
barsDescription="Welcome to the application!"
barsLabel="Hello friend"
barsList="[{"icon":"home","label":"Home"},{"icon":"search","label":"Search"},{"icon":"settings","label":"Settings"}]"
/>Emits type ActionSheetEmits
Expose interface ActionSheetExpose
Slots interface ActionSheetSlots
Props type ActionSheetProps
Enumeration of some properties
disabled:
boolean Sets the element to an inactive state
default value: false
<D1ActionSheet
disabled
/>bars-back-hide:
boolean Hides the back button in the bars
default value: true
width:
sm | md | lg | auto Sets component width
default value: md
<D1ActionSheet
width="sm"
/> <D1ActionSheet
width="md"
/> <D1ActionSheet
width="lg"
/> <D1ActionSheet
width="auto"
/>auto-close:
boolean Closes the window/menu when clicking inside the content area
default value: false
touch-close:
boolean Enables closing the component by a swipe-down gesture on mobile devices
default value: true
D1Actions
Description
Layout container for action button groups, typically used in dialog footers, cards, or forms. Manages spacing, alignment, and separation between primary (main) and secondary action sets.
Supports multiple alignments (left, center, right, block) and takes arrays of button props (list, listSecondary) to automatically render Button components.
Features both array-based and slot-based rendering for maximum flexibility. Use for standardizing button layouts and ensuring consistent spacing.
<D1Actions
list="[{"label":"Ok"},{"label":"Cancel"}]"
listSecondary="[{"icon":"edit"},{"icon":"photo_camera"},{"icon":"image"},{"icon":"tune"}]"
/>Emits type ActionsEmits
Expose interface ActionsExpose
Slots interface ActionsSlots
Props type ActionsProps
Enumeration of some properties
align:
none | center | left | right | block | auto General alignment depending on component semantics
default value: right
<D1Actions
align="none"
/> <D1Actions
align="center"
/> <D1Actions
align="left"
/> <D1Actions
align="right"
/> <D1Actions
align="block"
/> <D1Actions
align="auto"
/>flexible:
adaptiveSm | adaptiveMd | adaptiveLg | adaptiveXl | adaptive2xl | containerSm | containerMd | containerLg | containerXl | container2xl Enables flexible layout behavior that automatically adapts to available space
padding:
none | sm | md | lg | ySm | yMd | yLg Sets internal spacing around the content. If `paddingByIndent` is enabled, the `padding` value is ignored.
<D1Actions
padding="none" paddingByIndent="false"
/> <D1Actions
padding="sm" paddingByIndent="false"
/> <D1Actions
padding="md" paddingByIndent="false"
/> <D1Actions
padding="lg" paddingByIndent="false"
/> <D1Actions
padding="ySm" paddingByIndent="false"
/> <D1Actions
padding="yMd" paddingByIndent="false"
/> <D1Actions
padding="yLg" paddingByIndent="false"
/>padding-by-indent:
boolean Applies horizontal padding based on grid indent values
default value: true
wrap:
boolean Controls text wrapping behavior
default value: false
<D1Actions
wrap
/>D1Alert
Description
An alert banner/notification block designed to display critical context-sensitive user feedback.
Features modular components including a title/label, description block, custom action links (AlertLink), list action buttons, leading/trailing icons, and a dismiss/close button.
Fires a close event on user dismissal via closeButton.
<D1Alert
description="Here is a detailed description of the component"
label="Label"
actionsList="[{"icon":"edit","label":"Edit"},{"icon":"delete","label":"Delete"},{"icon":"share","label":"Share"}]"
actionsSecondary="[{"icon":"info","label":"Info"},{"icon":"help","label":"Help"}]"
icon="home"
/>Label
Here is a detailed description of the component
Emits type AlertEmits
Expose interface AlertExpose
Slots interface AlertSlots
Props type AlertProps
Enumeration of some properties
selected:
boolean Selected state of the element
default value: false
<D1Alert
selected
/>Label
Here is a detailed description of the component
button:
string | number | ConstrBind<ButtonProps> Close or action button value/label on the trailing side
icon-palette:
boolean Sets icon color based on palette class
default value: false
icon-trailing:
string | File Value of the trailing icon
<D1Alert
icon-trailing="settings"
/>Label
Here is a detailed description of the component
icon-trailing-palette:
boolean Sets trailing icon color based on palette class
default value: false
icon-turn:
boolean Turns the icon
default value: false
<D1Alert
icon-turn
/>Label
Here is a detailed description of the component
close-button:
boolean Shows a close button in the header
default value: false
<D1Alert
close-button
/>Label
Here is a detailed description of the component
palette:
red | orange | amber | yellow | lime | green | emerald | teal | cyan | sky | blue | indigo | violet | purple | fuchsia | pink | rose | slate | gray | zinc | neutral | stone | black | white Sets a color palette for the element
<D1Alert
palette="red"
/>Label
Here is a detailed description of the component
<D1Alert
palette="orange"
/>Label
Here is a detailed description of the component
<D1Alert
palette="amber"
/>Label
Here is a detailed description of the component
<D1Alert
palette="yellow"
/>Label
Here is a detailed description of the component
<D1Alert
palette="lime"
/>Label
Here is a detailed description of the component
<D1Alert
palette="green"
/>Label
Here is a detailed description of the component
<D1Alert
palette="emerald"
/>Label
Here is a detailed description of the component
<D1Alert
palette="teal"
/>Label
Here is a detailed description of the component
<D1Alert
palette="cyan"
/>Label
Here is a detailed description of the component
<D1Alert
palette="sky"
/>Label
Here is a detailed description of the component
<D1Alert
palette="blue"
/>Label
Here is a detailed description of the component
<D1Alert
palette="indigo"
/>Label
Here is a detailed description of the component
<D1Alert
palette="violet"
/>Label
Here is a detailed description of the component
<D1Alert
palette="purple"
/>Label
Here is a detailed description of the component
<D1Alert
palette="fuchsia"
/>Label
Here is a detailed description of the component
<D1Alert
palette="pink"
/>Label
Here is a detailed description of the component
<D1Alert
palette="rose"
/>Label
Here is a detailed description of the component
<D1Alert
palette="slate"
/>Label
Here is a detailed description of the component
<D1Alert
palette="gray"
/>Label
Here is a detailed description of the component
<D1Alert
palette="zinc"
/>Label
Here is a detailed description of the component
<D1Alert
palette="neutral"
/>Label
Here is a detailed description of the component
<D1Alert
palette="stone"
/>Label
Here is a detailed description of the component
<D1Alert
palette="black"
/>Label
Here is a detailed description of the component
<D1Alert
palette="white"
/>Label
Here is a detailed description of the component
primary:
boolean Primary variant of the alert for high visibility notifications
default value: false
<D1Alert
primary
/>Label
Here is a detailed description of the component
secondary:
boolean Secondary variant of the alert for moderate emphasis messages
default value: true
<D1Alert
secondary
/>Label
Here is a detailed description of the component
item-center:
boolean Centers items inside the component
default value: true
<D1Alert
item-center itemCenter="false"
/>Label
Here is a detailed description of the component
D1AlertLink
Description
A highly specialized link component designed to be rendered within alert/notification boxes. It formats text links properly to blend with the alert's color palette, typography, and layout.
Features include optional divider lines to separate adjacent links, integration with click events, and compatibility with custom label styling.
Used as an sub-component inside Alert or standalone for navigation within context-sensitive status notices.
<D1AlertLink
label="Label"
/>Emits type AlertLinkEmits
Expose interface AlertLinkExpose
Slots interface AlertLinkSlots
Props type AlertLinkProps
Enumeration of some properties
divider:
boolean Separator status. If true, displays a visual bullet separator before adjacent alert links
default value: true
<D1AlertLink
divider
/>D1Anchor
Description
Navigation component for creating hyperlinks, internal page anchors, and interactive links. Wraps the native <a> tag with additional support for smooth scrolling and clipboard operations.
Features automated scroll-to-id behavior with custom offsets and a built-in copy-to-clipboard function (isCopy). Supports icon integration for different link types and success feedback.
Controlled primarily through href or name props. Use for table of contents, permalinks, external resource links, or quick-copy action buttons for IDs and URLs.
<D1Anchor
name="name-example"
label="Label"
/>Emits type AnchorEmits
Expose interface AnchorExpose
Slots interface AnchorSlots
Props type AnchorProps
Enumeration of some properties
tooltip-description:
string Tooltip description text
tooltip-label:
string Tooltip label text
is-copy:
boolean Enables copy-to-clipboard functionality
default value: false
<D1Anchor
is-copy
/>D1Area
Description
A utility component that acts as a dynamic slot switcher based on an "area" context.
It retrieves the current area value from the injection context (UI_AREA_VALUE) or uses the 'areaDefault' prop.
It then renders the slot that matches the area name. If no matching slot is found, it falls back to the 'default' slot.
This is particularly useful for building layouts where different components need to render different content depending on where they are placed (e.g., in a header, footer, or side panel).
<D1Area
areaDefault="default"
/>Emits type AreaEmits
Expose interface AreaExpose
Slots interface AreaSlots
Props type AreaProps
Enumeration of some properties
D1Arrow
Demo
<div :class="classDemo.item" style="position: relative; width: 48px; height: 48px; background-color: oklch(93.2% 0.032 255.585);">
<D1Arrow position="top" v-bind="args"/>
</div>Description
Functional directional indicator (pointer) designed to connect floating containers like tooltips, popovers, or menus with their target elements. Automatically calculates positioning and orientation to create a seamless speech-bubble or callout effect.
Features smart auto-positioning logic, support for inverse directions, and automated style inheritance. It inherits background and border properties from its parent container (Window or custom wrapper) to ensure visual consistency without manual configuration.
Ideal for enhanced spatial context in complex UIs. Use within floating components to clearly indicate the source of a message or action. Controlled via position and elementTarget props, with an exposed update method for manual synchronization.
<D1Arrow
elementTarget="#id-arrow-target"
/>Emits type ArrowEmits
Expose interface ArrowExpose
Slots interface ArrowSlots
Props type ArrowProps
Enumeration of some properties
position:
auto | top | bottom | left | right Sets the positioning method for the element
default value: auto
<D1Arrow
position="auto"
/> <D1Arrow
position="top"
/> <D1Arrow
position="bottom"
/> <D1Arrow
position="left"
/> <D1Arrow
position="right"
/>size:
sm | md | lg Sets component size
default value: md
<D1Arrow
size="sm"
/> <D1Arrow
size="md"
/> <D1Arrow
size="lg"
/>D1Badge
Demo
<div :class="classDemo.item" style="min-width: 48px; min-height: 48px;"> <D1Badge overlap="static" v-bind="args"/> </div>
Description
Small visual indicator used to display status, counts, notifications, or short labels (tags). Typically positioned over the corner of another element (like an icon or avatar) or used inline.
Features numeric handling with label-max cap (e.g., "99+"), dot-only mode for status indication, and support for icons. Includes flexible positioning (overlap: rectangular or circular) and various color variants.
Controlled primarily through the label, icon, and dot props. Use for unread counts, online status indicators, or marking items as "New" or "Sale" in e-commerce contexts.
<D1Badge
label="Label"
icon="home"
/>Label
Emits type BadgeEmits
Expose interface BadgeExpose
Slots interface BadgeSlots
Props type BadgeProps
Enumeration of some properties
selected:
boolean Selected state of the element
default value: false
<D1Badge
selected
/>Label
icon-palette:
boolean Sets icon color based on palette class
default value: false
icon-turn:
boolean Turns the icon
default value: false
<D1Badge
icon-turn
/>Label
dot:
boolean Displays the component as a dot indicator
default value: false
<D1Badge
dot
/>outline:
boolean Outline variant of the badge with a transparent background and border
default value: false
<D1Badge
outline
/>Label
palette:
red | orange | amber | yellow | lime | green | emerald | teal | cyan | sky | blue | indigo | violet | purple | fuchsia | pink | rose | slate | gray | zinc | neutral | stone | black | white Sets a color palette for the element
<D1Badge
palette="red"
/>Label
<D1Badge
palette="orange"
/>Label
<D1Badge
palette="amber"
/>Label
<D1Badge
palette="yellow"
/>Label
<D1Badge
palette="lime"
/>Label
<D1Badge
palette="green"
/>Label
<D1Badge
palette="emerald"
/>Label
<D1Badge
palette="teal"
/>Label
<D1Badge
palette="cyan"
/>Label
<D1Badge
palette="sky"
/>Label
<D1Badge
palette="blue"
/>Label
<D1Badge
palette="indigo"
/>Label
<D1Badge
palette="violet"
/>Label
<D1Badge
palette="purple"
/>Label
<D1Badge
palette="fuchsia"
/>Label
<D1Badge
palette="pink"
/>Label
<D1Badge
palette="rose"
/>Label
<D1Badge
palette="slate"
/>Label
<D1Badge
palette="gray"
/>Label
<D1Badge
palette="zinc"
/>Label
<D1Badge
palette="neutral"
/>Label
<D1Badge
palette="stone"
/>Label
<D1Badge
palette="black"
/>Label
<D1Badge
palette="white"
/>Label
primary:
boolean Primary color variant for the badge with high contrast and emphasis
default value: true
<D1Badge
primary
/>Label
secondary:
boolean Secondary color variant for the badge with moderate contrast
default value: false
<D1Badge
secondary
/>Label
size:
sm | md | lg | none Sets component size
default value: md
<D1Badge
size="sm"
/>Label
<D1Badge
size="md"
/>Label
<D1Badge
size="lg"
/>Label
<D1Badge
size="none"
/>Label
formatting:
boolean Whether to format values before displaying
default value: false
<D1Badge
formatting label="1234567"
/>1,234,567
horizontal:
center | right | left Sets horizontal alignment of elements
default value: right
<D1Badge
horizontal="center" overlap="rectangular"
/>Label
<D1Badge
horizontal="right" overlap="rectangular"
/>Label
<D1Badge
horizontal="left" overlap="rectangular"
/>Label
label-max:
number Maximum length of the label text before truncation
<D1Badge
label-max="1000" label="1234567"
/>1000+
overlap:
rectangular | circular | static Defines element positioning relative to other elements
default value: rectangular
<D1Badge
overlap="rectangular"
/>Label
<D1Badge
overlap="circular"
/>Label
<D1Badge
overlap="static"
/>Label
vertical:
top | center | bottom Sets vertical alignment of elements
default value: top
<D1Badge
vertical="top" overlap="rectangular"
/>Label
<D1Badge
vertical="center" overlap="rectangular"
/>Label
<D1Badge
vertical="bottom" overlap="rectangular"
/>Label
D1Bars
Description
Structural header or toolbar component for pages, cards, and windows. Provides a consistent layout for titles, descriptions, and interactive action buttons.
Features a built-in back navigation button, primary action button list (bars), and a specialized "action mode" for contextual states (e.g., selection). Supports skeleton loading and full button customization.
Controlled via label/description props and action boolean for state switching. Use for top-level page headers, modal toolbars, or dynamic action bars that appear after item selection.
<D1Bars
actionBars="[{"icon":"share"},{"icon":"edit"},{"icon":"delete"}]"
bars="[{"icon":"home","label":"Home"},{"icon":"search","label":"Search"},{"icon":"settings","label":"Settings"}]"
actionDescription="Select items to perform actions"
actionLabel="Action"
description="Here is a detailed description of the component"
label="Label"
/>Emits type BarsEmits
Expose interface BarsExpose
Slots interface BarsSlots
Props type BarsProps
Enumeration of some properties
action:
boolean Enables action mode
default value: false
<D1Bars
action
/>back-button:
ConstrBind<ButtonProps> Provides configuration for the back button
padding:
sm | md | lg | ySm | yMd | yLg | none Sets internal spacing around the content. If `paddingByIndent` is enabled, the `padding` value is ignored.
<D1Bars
padding="sm" paddingByIndent="false"
/> <D1Bars
padding="md" paddingByIndent="false"
/> <D1Bars
padding="lg" paddingByIndent="false"
/> <D1Bars
padding="ySm" paddingByIndent="false"
/> <D1Bars
padding="yMd" paddingByIndent="false"
/> <D1Bars
padding="yLg" paddingByIndent="false"
/> <D1Bars
padding="none" paddingByIndent="false"
/>padding-by-indent:
boolean Applies horizontal padding based on grid indent values
default value: true
is-skeleton:
boolean Displays the component in skeleton mode
default value: false
D1Bleed
Demo
<div :class="classDemo.item">
<D1Bleed v-bind="args">
<p>The component allows content to expand beyond the boundaries of the parent container by applying negative horizontal margins.</p>
</D1Bleed>
</div>Description
The Bleed component is used to break elements out of their parent container's horizontal padding. It applies negative horizontal margins equal to the specified margin-x value.
Commonly used in article layouts to make images or breakout sections take up the full width of the viewport or a wider area than the text column.
<D1Bleed
/>The component allows content to expand beyond the boundaries of the parent container by applying negative horizontal margins.
Emits type BleedEmits
Expose interface BleedExpose
Slots interface BleedSlots
Props type BleedProps
Enumeration of some properties
D1Block
Demo
<div :class="classDemo.item">
<D1Block v-bind="args">
Main content goes here.
</D1Block>
</div>Description
Versatile structural container for organizing content with a standardized layout. Automatically arranges headlines, icons, labels, captions, and body content within a unified block element.
Features support for custom HTML tags (e.g., section, article) and flexible slot-based content organization. Includes a dedicated headline area for section titles and a trailing slot for actions.
Controlled primarily through content props (label, headline, description) or various slots (#default, #headline, #trailing). Use for card headers, complex list items, or clearly defined page sections.
<D1Block
description="Here is a detailed description of the component"
label="Label"
icon="home"
/>Label
Here is a detailed description of the component
Emits type BlockEmits
Expose interface BlockExpose
Slots interface BlockSlots
Props type BlockProps
Enumeration of some properties
selected:
boolean Selected state of the element
default value: false
<D1Block
selected
/>Label
Here is a detailed description of the component
caption:
string Caption text for additional information
<D1Block
caption="Caption text"
/>Label
Caption text
Here is a detailed description of the component
headline:
string Headline text
<D1Block
headline="Headline text"
/>Headline text
Label
Here is a detailed description of the component
icon-palette:
boolean Sets icon color based on palette class
default value: false
icon-turn:
boolean Turns the icon
default value: false
<D1Block
icon-turn
/>Label
Here is a detailed description of the component
D1Button
Description
Fundamental interactive component for user actions, navigation, and form submission. Supports various visual styles (primary, secondary, outline, text), states, and content configurations.
Features built-in support for icons (Material Symbols), loading spinners, and disabled/selected states. Includes native-like navigation via "to" (Vue Router) or "href" (external) props and supports skeleton loading.
Highly customizable through design tokens and adaptive layout options. Controlled primarily via click events and various styling props. Use for call-to-actions, navigation links, or icon-only toggle buttons.
<D1Button
label="Label"
icon="home"
/>Emits type ButtonEmits
Expose interface ButtonExpose
Slots interface ButtonSlots
Props type ButtonProps
Enumeration of some properties
disabled:
boolean Sets the element to an inactive state
default value: false
<D1Button
disabled
/>focus:
boolean Visual focus state
default value: false
<D1Button
focus
/>loading:
boolean | ConstrBind<ProgressProps> Sets the element to a loading state
<D1Button
loading
/>readonly:
boolean Read-only state of the element
default value: false
selected:
boolean Selected state of the element
default value: false
<D1Button
selected
/>icon-palette:
boolean Sets icon color based on palette class
default value: false
icon-trailing:
string | File Value of the trailing icon
<D1Button
icon-trailing="settings"
/>icon-trailing-palette:
boolean Sets trailing icon color based on palette class
default value: false
icon-turn:
boolean Turns the icon
default value: false
<D1Button
icon-turn
/>adaptive:
iconAlways | block | auto | iconSm | iconMd | iconLg | iconXl | icon2xl | fullSm | fullMd | fullLg | fullXl | full2xl Controls adaptive display behavior for different screen sizes and media queries
container:
iconSm | iconMd | iconLg | iconXl | icon2xl | fullSm | fullMd | fullLg | fullXl | full2xl Controls container‑based layout behavior with adaptive width constraints
has-label-min-width:
boolean Indicates whether a minimum width should be applied to the label
default value: true
inverse:
boolean Inverts component colors
default value: false
<D1Button
inverse
/>outline:
boolean Outline button style
default value: false
<D1Button
outline
/>palette:
red | orange | amber | yellow | lime | green | emerald | teal | cyan | sky | blue | indigo | violet | purple | fuchsia | pink | rose | slate | gray | zinc | neutral | stone | black | white Sets a color palette for the element
<D1Button
palette="red"
/> <D1Button
palette="orange"
/> <D1Button
palette="amber"
/> <D1Button
palette="yellow"
/> <D1Button
palette="lime"
/> <D1Button
palette="green"
/> <D1Button
palette="emerald"
/> <D1Button
palette="teal"
/> <D1Button
palette="cyan"
/> <D1Button
palette="sky"
/> <D1Button
palette="blue"
/> <D1Button
palette="indigo"
/> <D1Button
palette="violet"
/> <D1Button
palette="purple"
/> <D1Button
palette="fuchsia"
/> <D1Button
palette="pink"
/> <D1Button
palette="rose"
/> <D1Button
palette="slate"
/> <D1Button
palette="gray"
/> <D1Button
palette="zinc"
/> <D1Button
palette="neutral"
/> <D1Button
palette="stone"
/> <D1Button
palette="black"
/> <D1Button
palette="white"
/>primary:
boolean Primary button style
default value: true
<D1Button
primary
/>rounded-full:
boolean Makes the component fully rounded (circular)
default value: false
<D1Button
rounded-full
/>secondary:
boolean Secondary button style
default value: false
<D1Button
secondary
/>size:
xs | sm | md | lg | xl Sets component size
default value: md
<D1Button
size="xs"
/> <D1Button
size="sm"
/> <D1Button
size="md"
/> <D1Button
size="lg"
/> <D1Button
size="xl"
/>text:
boolean Text button style
default value: false
<D1Button
text
/>text-align:
left | center | right Sets text alignment within the element
is-skeleton:
boolean Displays the component in skeleton mode
default value: false
D1ButtonGroup
Description
The ButtonGroup component is used to group several buttons together into a single layout.
It supports both horizontal and vertical orientations and can automatically wrap buttons if they don't fit in a single line.
Buttons can be defined via the 'list' property as an array of button configurations or via the default slot.
The 'buttonAttrs' property allows applying shared attributes (like style, size, etc.) to all buttons in the group at once.
<D1ButtonGroup
list="[{"label":"Home"},{"label":"Search","icon":"search","selected":true},{"label":"Settings","icon":"settings"},{"label":"More","iconTrailing":"more_vert"}]"
/>Emits type ButtonGroupEmits
Expose interface ButtonGroupExpose
Slots interface ButtonGroupSlots
Props type ButtonGroupProps
Enumeration of some properties
wrap:
boolean Controls text wrapping behavior
default value: false
<D1ButtonGroup
wrap
/>orientation:
horizontal | vertical Orientation of the component
default value: horizontal
<D1ButtonGroup
orientation="horizontal"
/> <D1ButtonGroup
orientation="vertical"
/>D1Cell
Description
Universal list item component for building structured interfaces like menus, settings, and data lists. Provides a standardized row layout with dedicated areas for icons, text, and actions.
Features a composable structure with label, description, and caption support. Includes interactive states (hover, focus, selected, loading), built-in Ripple effect, and skeleton loading integration.
Highly flexible via slots (#default, #trailing, #body) and controlled through content props and navigation attributes (to/href). Use for clickable rows, menu items, or complex data entities in lists.
<D1Cell
description="Here is a detailed description of the component"
label="Label"
icon="home"
/>Label
Here is a detailed description of the component
Emits type CellEmits
Expose interface CellExpose
Slots interface CellSlots
Props type CellProps
Enumeration of some properties
disabled:
boolean Sets the element to an inactive state
default value: false
<D1Cell
disabled
/>Label
Here is a detailed description of the component
focus:
boolean Visual focus state
default value: false
<D1Cell
focus
/>Label
Here is a detailed description of the component
loading:
boolean | ConstrBind<ProgressProps> Sets the element to a loading state
<D1Cell
loading
/>Label
Here is a detailed description of the component
readonly:
boolean Read-only state of the element
default value: false
selected:
boolean Selected state of the element
default value: false
<D1Cell
selected
/>Label
Here is a detailed description of the component
caption:
string Caption text for additional information
<D1Cell
caption="Caption text"
/>Label
Caption text
Here is a detailed description of the component
icon-palette:
boolean Sets icon color based on palette class
default value: false
icon-top:
boolean Aligns icon to the top of the container
default value: false
icon-trailing:
string | File Value of the trailing icon
<D1Cell
icon-trailing="settings"
/>Label
Here is a detailed description of the component
icon-trailing-palette:
boolean Sets trailing icon color based on palette class
default value: false
icon-turn:
boolean Turns the icon
default value: false
<D1Cell
icon-turn
/>Label
Here is a detailed description of the component
divider:
boolean Enables visual divider between elements
default value: true
divider-label:
always | none | adaptiveSm | adaptiveMd | adaptiveLg | adaptiveXl | adaptive2xl | containerSm | containerMd | containerLg | containerXl | container2xl Adds divider only under the label
padding:
none | sm | md | lg | ySm | yMd | yLg Sets internal spacing around the content. If `paddingByIndent` is enabled, the `padding` value is ignored.
default value: none
<D1Cell
padding="none" paddingByIndent="false"
/>Label
Here is a detailed description of the component
<D1Cell
padding="sm" paddingByIndent="false"
/>Label
Here is a detailed description of the component
<D1Cell
padding="md" paddingByIndent="false"
/>Label
Here is a detailed description of the component
<D1Cell
padding="lg" paddingByIndent="false"
/>Label
Here is a detailed description of the component
<D1Cell
padding="ySm" paddingByIndent="false"
/>Label
Here is a detailed description of the component
<D1Cell
padding="yMd" paddingByIndent="false"
/>Label
Here is a detailed description of the component
<D1Cell
padding="yLg" paddingByIndent="false"
/>Label
Here is a detailed description of the component
padding-by-indent:
boolean Applies horizontal padding based on grid indent values
default value: true
is-skeleton:
boolean Displays the component in skeleton mode
default value: false
D1Checkbox
Description
Form control component for binary (yes/no) or indeterminate state selection. Allows users to toggle specific options or select multiple items from a list with visual feedback.
Features support for primary label, secondary description, and custom icons for checked/indeterminate states. Includes built-in validation, loading indicators, and adaptive layout options.
Controlled via v-model or value prop and emits @input/@change events. Use for terms agreement, feature toggles, or parent-child coordinated selections (via indeterminate state).
<D1Checkbox
description="Here is a detailed description of the component"
helperMessage="This is a helpful message"
label="Label"
counter="25"
maxlength="100"
name="name"
/>Emits type CheckboxEmits
Expose interface CheckboxExpose
Slots interface CheckboxSlots
Props type CheckboxProps
Enumeration of some properties
disabled:
boolean Sets the element to an inactive state
default value: false
<D1Checkbox
disabled
/>focus:
boolean Visual focus state
default value: false
<D1Checkbox
focus
/>loading:
boolean | ConstrBind<ProgressProps> Sets the element to a loading state
<D1Checkbox
loading
/>readonly:
boolean Read-only state of the element
default value: false
selected:
string The value that determines whether the checkbox is selected (for groups)
indeterminate:
boolean Sets the indeterminate state
default value: false
<D1Checkbox
indeterminate value
/>value:
any Value of the checkbox
<D1Checkbox
value
/>placeholder:
string Placeholder text shown when the input is empty
<D1Checkbox
placeholder="Placeholder text"
/>validation-message:
string Error or validation message text
<D1Checkbox
validation-message="Validation message"
/>counter:
number | string Current character count
counter-show:
boolean Shows the counter-element
default value: false
<D1Checkbox
counter-show
/>counter-template:
string Custom display template for the counter-component
<D1Checkbox
counter-template="counter: [c], max: [m]" counterShow
/>required:
boolean Marks the field as required and shows the required indicator
default value: false
<D1Checkbox
required
/>adaptive:
rightAlways | rightSm | rightMd | rightLg | rightXl | right2xl Controls adaptive display behavior for different screen sizes and media queries
block:
boolean Enables block mode (component expands to full width)
default value: true
container:
rightSm | rightMd | rightLg | rightXl | right2xl Controls container‑based layout behavior with adaptive width constraints
has-html-code:
boolean Whether the message can contain HTML code
default value: false
is-skeleton:
boolean Displays the component in skeleton mode
default value: false
item-center:
boolean Centers items inside the component
default value: true
<D1Checkbox
item-center itemCenter="false"
/>D1Chip
Description
Compact interactive element representing an input, attribute, or action. Used for entering information, making selections, filtering content, or triggering immediate actions in a space-efficient way.
Features multiple functional variants (Action, Input, Assistive, Filter) with support for leading icons and selection states. Includes built-in support for disabled/selected states and adaptive layout options.
Controlled via value/label props and emits @click events with detailed data. Use for filter tags, choice groups (like radio buttons), or representing entities like contacts in input fields.
<D1Chip
label="Label"
icon="home"
/>Emits type ChipEmits
Expose interface ChipExpose
Slots interface ChipSlots
Props type ChipProps
Enumeration of some properties
disabled:
boolean Sets the element to an inactive state
default value: false
<D1Chip
disabled
/>focus:
boolean Visual focus state
default value: false
<D1Chip
focus
/>loading:
boolean | ConstrBind<ProgressProps> Sets the element to a loading state
<D1Chip
loading
/>readonly:
boolean Read-only state of the element
default value: false
selected:
boolean Selected state of the element
default value: false
<D1Chip
selected
/>icon-palette:
boolean Sets icon color based on palette class
default value: false
icon-trailing:
string | File Value of the trailing icon
<D1Chip
icon-trailing="settings"
/>icon-trailing-palette:
boolean Sets trailing icon color based on palette class
default value: false
icon-turn:
boolean Turns the icon
default value: false
<D1Chip
icon-turn
/>adaptive:
iconAlways | block | auto | iconSm | iconMd | iconLg | iconXl | icon2xl | fullSm | fullMd | fullLg | fullXl | full2xl Controls adaptive display behavior for different screen sizes and media queries
assistive:
boolean Alternative visual appearance style
default value: false
<D1Chip
assistive
/>container:
iconSm | iconMd | iconLg | iconXl | icon2xl | fullSm | fullMd | fullLg | fullXl | full2xl Controls container‑based layout behavior with adaptive width constraints
input:
boolean Input-style visual appearance
default value: true
<D1Chip
input
/>inverse:
boolean Inverts component colors
default value: false
<D1Chip
inverse
/>palette:
red | orange | amber | yellow | lime | green | emerald | teal | cyan | sky | blue | indigo | violet | purple | fuchsia | pink | rose | slate | gray | zinc | neutral | stone | black | white Sets a color palette for the element
<D1Chip
palette="red"
/> <D1Chip
palette="orange"
/> <D1Chip
palette="amber"
/> <D1Chip
palette="yellow"
/> <D1Chip
palette="lime"
/> <D1Chip
palette="green"
/> <D1Chip
palette="emerald"
/> <D1Chip
palette="teal"
/> <D1Chip
palette="cyan"
/> <D1Chip
palette="sky"
/> <D1Chip
palette="blue"
/> <D1Chip
palette="indigo"
/> <D1Chip
palette="violet"
/> <D1Chip
palette="purple"
/> <D1Chip
palette="fuchsia"
/> <D1Chip
palette="pink"
/> <D1Chip
palette="rose"
/> <D1Chip
palette="slate"
/> <D1Chip
palette="gray"
/> <D1Chip
palette="zinc"
/> <D1Chip
palette="neutral"
/> <D1Chip
palette="stone"
/> <D1Chip
palette="black"
/> <D1Chip
palette="white"
/>rounded-full:
boolean Makes the component fully rounded (circular)
default value: false
<D1Chip
rounded-full
/>size:
xs | sm | md | lg Sets component size
default value: md
<D1Chip
size="xs"
/> <D1Chip
size="sm"
/> <D1Chip
size="md"
/> <D1Chip
size="lg"
/>text-align:
left | center | right Sets text alignment within the element
is-skeleton:
boolean Displays the component in skeleton mode
default value: false
D1ChipGroup
Description
Wrapper component for managing collections of Chip elements based on an array of data. Streamlines the creation of filter sets, choice groups, and tag lists by automating iteration and selection logic.
Features support for single and multiple selection modes, shared chip attributes (via chipAttrs), and icon visibility control. Includes built-in data binding for selected values and @click event propagation.
Controlled via the list prop for data and v-model:selected for state. Use for dynamic filtering interfaces, selecting multiple categories, or building interactive tag lists from API data.
<D1ChipGroup
list="[{"label":"Apple","value":"apple"},{"label":"Banana","value":"banana"},{"label":"Orange","value":"orange"}]"
/>AppleBananaOrange
Emits type ChipGroupEmits
Expose interface ChipGroupExpose
Slots interface ChipGroupSlots
Props type ChipGroupProps
Enumeration of some properties
readonly:
boolean Read-only state of the element
default value: true
selected:
string | number | boolean | array Currently selected item(s) - can be a single value or an array of values
list:
ChipGroupData Array of chip items data. Contains the data for all chips to be rendered in the group.
icon-when-selected:
boolean Shows the icon only when the element is selected
default value: false
multiple:
boolean Enables multiple selection mode
default value: false
<D1ChipGroup
multiple
/>AppleBananaOrange
D1ClientOnly
Demo
<div :class="classDemo.item">
<D1ClientOnly v-bind="args">
<h4>Client-Side Content</h4>
<p>This block is only visible when the component is mounted in the browser.</p>
<p>Use it for components that depend on window, document, or other browser-specific APIs.</p>
</D1ClientOnly>
</div>Description
The ClientOnly component is a utility designed to ensure that its children are only rendered on the client side.
This is particularly useful in Server-Side Rendering (SSR) or Static Site Generation (SSG) contexts where certain components
(like those relying on browser-only APIs like 'window' or 'document', or complex visualizations) should not be executed or rendered on the server.
It works by waiting until the component is mounted in the browser before rendering its content.
Controlled by the 'clientOnly' boolean property (default is true).
<D1ClientOnly
/>Client-Side Content
This block is only visible when the component is mounted in the browser.
Use it for components that depend on window, document, or other browser-specific APIs.
Emits type ClientOnlyEmits
Expose interface ClientOnlyExpose
Slots interface ClientOnlySlots
Props type ClientOnlyProps
Enumeration of some properties
D1Container
Demo
<div :class="classDemo.item">
<D1Container v-bind="args">
Main content goes here.
</D1Container>
</div>Description
Layout wrapper used to constrain content width and manage horizontal spacing in a predictable way.
Supports alignment options (left, center, right), width tokens, and side margins so page content keeps consistent rhythm across breakpoints.
Use as a foundational container around sections, forms, and text-heavy blocks to improve readability and layout consistency.
<D1Container
/> Main content goes here.
Emits type ContainerEmits
Expose interface ContainerExpose
Slots interface ContainerSlots
Props type ContainerProps
Enumeration of some properties
align:
left | center | right General alignment depending on component semantics
default value: center
<D1Container
align="left"
/> Main content goes here.
<D1Container
align="center"
/> Main content goes here.
<D1Container
align="right"
/> Main content goes here.
D1Dialog
Demo
<div :class="classDemo.item"> <D1Dialog embedded open label="Dialog Title" description="This is a description text." v-bind="args"/> </div>
Description
Specialized modal component for standardized user interactions such as alerts, confirmations, and status messages. Extends the Modal component with a predefined layout for icons, titles, and action buttons.
Features built-in success/error states with automatic icon switching and content styling. Supports flexible positioning of images (top/left) and integrates with Window, Bars, and Actions for a consistent footer.
Controlled via v-model:open and various content props (label, description). Use for critical operations requiring user confirmation, operation success/fail alerts, or informative system messages.
<D1Dialog
description="Here is a detailed description of the component"
label="Label"
actionsSecondary="[{"icon":"info","label":"Info"},{"icon":"help","label":"Help"}]"
barsDescription="Welcome to the application!"
barsLabel="Hello friend"
barsList="[{"icon":"home","label":"Home"},{"icon":"search","label":"Search"},{"icon":"settings","label":"Settings"}]"
icon="home"
/>Emits type DialogEmits
Expose interface DialogExpose
Slots interface DialogSlots
Props type DialogProps
Enumeration of some properties
disabled:
boolean Sets the element to an inactive state
default value: false
<D1Dialog
disabled
/>error:
boolean Sets the element to an error state
default value: false
<D1Dialog
error
/>success:
boolean Sets the element to a success state
default value: false
<D1Dialog
success
/>button-close:
string | ConstrBind<ButtonPropsBasic> | null Close button configuration (string for label or full button props object, null to hide)
<D1Dialog
button-close="is close"
/>button-ok:
string | ConstrBind<ButtonPropsBasic> | null OK button configuration (string for label or full button props object, null to hide)
<D1Dialog
button-ok="Confirm"
/>image:
string | File | ImageProps Specifies the image value for the component
<D1Dialog
image="https://drscdn.500px.org/photo/294267357/q%3D90_m%3D2048/v2?sig=adb52b9add18ad21ab4a86b99695377f2a18821c609d42149b3426dfb99cf924"
/>bars-back-hide:
boolean Hides the back button in the bars
default value: true
close-button:
boolean Shows a close button in the header
default value: false
<D1Dialog
close-button
/>image-position:
top | left | adaptiveSm | adaptiveMd | adaptiveLg | adaptiveXl | adaptive2xl Defines image placement within the window layout
default value: top
<D1Dialog
image-position="top" image="https://drscdn.500px.org/photo/294267357/q%3D90_m%3D2048/v2?sig=adb52b9add18ad21ab4a86b99695377f2a18821c609d42149b3426dfb99cf924"
/> <D1Dialog
image-position="left" image="https://drscdn.500px.org/photo/294267357/q%3D90_m%3D2048/v2?sig=adb52b9add18ad21ab4a86b99695377f2a18821c609d42149b3426dfb99cf924"
/> <D1Dialog
image-position="adaptiveSm" image="https://drscdn.500px.org/photo/294267357/q%3D90_m%3D2048/v2?sig=adb52b9add18ad21ab4a86b99695377f2a18821c609d42149b3426dfb99cf924"
/> <D1Dialog
image-position="adaptiveMd" image="https://drscdn.500px.org/photo/294267357/q%3D90_m%3D2048/v2?sig=adb52b9add18ad21ab4a86b99695377f2a18821c609d42149b3426dfb99cf924"
/> <D1Dialog
image-position="adaptiveLg" image="https://drscdn.500px.org/photo/294267357/q%3D90_m%3D2048/v2?sig=adb52b9add18ad21ab4a86b99695377f2a18821c609d42149b3426dfb99cf924"
/> <D1Dialog
image-position="adaptiveXl" image="https://drscdn.500px.org/photo/294267357/q%3D90_m%3D2048/v2?sig=adb52b9add18ad21ab4a86b99695377f2a18821c609d42149b3426dfb99cf924"
/> <D1Dialog
image-position="adaptive2xl" image="https://drscdn.500px.org/photo/294267357/q%3D90_m%3D2048/v2?sig=adb52b9add18ad21ab4a86b99695377f2a18821c609d42149b3426dfb99cf924"
/>width:
sm | md | lg | auto Sets component width
default value: sm
<D1Dialog
width="sm"
/> <D1Dialog
width="md"
/> <D1Dialog
width="lg"
/> <D1Dialog
width="auto"
/>auto-close:
boolean Closes the window/menu when clicking inside the content area
default value: false
click-ok-and-close:
boolean Automatically closes the dialog when the OK button is clicked
default value: true
D1Divider
Description
A simple horizontal line used to separate content or sections. It helps in organizing information and creating a clear visual structure in the interface.
<D1Divider
/>Emits type DividerEmits
Expose interface DividerExpose
Slots interface DividerSlots
Props type DividerProps
Enumeration of some properties
margin:
sm | md | lg | none Sets the outer spacing around the component
default value: none
<D1Divider
margin="sm"
/> <D1Divider
margin="md"
/> <D1Divider
margin="lg"
/> <D1Divider
margin="none"
/>size:
sm | md | lg Sets component size
default value: sm
<D1Divider
size="sm"
/> <D1Divider
size="md"
/> <D1Divider
size="lg"
/>D1DraggableWrapper
Demo
<div :class="classDemo.item">
<D1DraggableWrapper v-bind="args">
<template #default="{ className, classClick, classPosition }">
<div v-for="item in 5" :key="item" :class="[className, classPosition]" :data-value="item">
<span :class="classClick">☰</span>
Item {{ item }}
</div>
</template>
</D1DraggableWrapper>
</div>Description
A logic wrapper component providing drag-and-drop sorting and reordering capabilities for lists or grid elements. Calculates dynamic layouts, active selections, placeholder spacers, and manages custom transition classes and event dispatches.
<D1DraggableWrapper
/>☰ Item 1
☰ Item 2
☰ Item 3
☰ Item 4
☰ Item 5
Emits type DraggableWrapperEmits
Expose interface DraggableWrapperExpose
Slots interface DraggableWrapperSlots
Props type DraggableWrapperProps
Enumeration of some properties
disabled:
boolean Sets the element to an inactive state
default value: false
<D1DraggableWrapper
disabled
/>☰ Item 1
☰ Item 2
☰ Item 3
☰ Item 4
☰ Item 5
classes-square:
string | string[] Custom classes for the placeholder square element
delay:
number | string Delay before dragging starts in milliseconds
D1Grid
Demo
<div :class="classDemo.item">
<D1Grid v-bind="args">
<div style="grid-column: span 4;">1</div>
<div style="grid-column: span 4;">2</div>
<div style="grid-column: span 4;">3</div>
</D1Grid>
</div>Description
Layout utility designed to manage the arrangement of items in a flexible, column-based system. Provides a standardized way to create responsive multi-column layouts across different screen sizes.
Features a default 12-column grid structure with customizable gaps and responsive breakpoint support. Works in tandem with GridItem to provide precise control over column spans and alignment.
Controlled primarily via CSS variables for columns and gaps. Use as a top-level container for dashboard widgets, form layouts, or any content requiring a structured multi-column arrangement.
<D1Grid
/>1
2
3
Emits type GridEmits
Expose interface GridExpose
Slots interface GridSlots
Props type GridProps
Enumeration of some properties
D1GridItem
Demo
<div :class="classDemo.item" style="min-height: 48px;">
<div style="display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px;">
<D1GridItem v-bind="args">Item</D1GridItem>
</div>
</div>Description
Individual cell unit within a Grid layout, providing granular control over column spanning across various screen resolutions. Enables building complex, responsive layouts with minimal CSS.
Features responsive span settings for all major breakpoints (base, sm, md, lg, xl, 2xl). Allows items to occupy different widths on mobile vs desktop, ensuring optimal use of screen space.
Controlled via the base prop for default span and breakpoint-specific props (e.g., md="6"). Use inside a Grid container to define local widths for UI elements, widgets, or form fields.
<D1GridItem
/>Item
Emits type GridItemEmits
Expose interface GridItemExpose
Slots interface GridItemSlots
Props type GridItemProps
Enumeration of some properties
base:
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 Number of columns to span by default
default value: 1
lg:
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 Number of columns to span on large screens (media: lg)
md:
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 Number of columns to span on medium screens (media: md)
sm:
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 Number of columns to span on small screens (media: sm)
xl:
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 Number of columns to span on extra large screens (media: xl)
xl2:
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 Number of columns to span on 2xl screens (media: 2xl)
D1Group
Demo
<div :class="classDemo.item">
<D1Group v-bind="args">
Content of the group.
</D1Group>
</div>Description
Structural component for organizing related content with a standardized header hierarchy. Acts as a semantic wrapper for subsections or grouping elements within a larger section or card.
Features support for headlines (h4 by default), labels, icons, and descriptions. Inherits all capabilities of the Block component, providing a consistent layout for titles and body content.
Controlled via headline, label, and description props. Use for grouping settings, categorizing information, or breaking down complex forms into logical, titled segments.
<D1Group
description="Here is a detailed description of the component"
label="Label"
icon="home"
/>Label
Here is a detailed description of the component
Emits type GroupEmits
Expose interface GroupExpose
Slots interface GroupSlots
Props type GroupProps
Enumeration of some properties
selected:
boolean Selected state of the element
default value: false
<D1Group
selected
/>Label
Here is a detailed description of the component
caption:
string Caption text for additional information
<D1Group
caption="Caption text"
/>Label
Caption text
Here is a detailed description of the component
headline:
string Headline text
<D1Group
headline="Headline text"
/>Headline text
Label
Here is a detailed description of the component
icon-palette:
boolean Sets icon color based on palette class
default value: false
icon-turn:
boolean Turns the icon
default value: false
<D1Group
icon-turn
/>Label
Here is a detailed description of the component
D1Header
Description
Component for creating structured headers with integrated support for icons and captions.
Allows flexible control over the HTML tag (h1-h6, div) to maintain proper document hierarchy.
Includes automatic area management and support for custom trailing content.
Ideal for section titles, page headers, or grouped content labeling.
<D1Header
label="Label"
icon="home"
/>Label
Emits type HeaderEmits
Expose interface HeaderExpose
Slots interface HeaderSlots
Props type HeaderProps
Enumeration of some properties
selected:
boolean Selected state of the element
default value: false
<D1Header
selected
/>Label
caption:
string Caption text for additional information
<D1Header
caption="Caption text"
/>Label
Caption text
icon-palette:
boolean Sets icon color based on palette class
default value: false
icon-turn:
boolean Turns the icon
default value: false
<D1Header
icon-turn
/>Label
D1HorizontalScroll
Description
Container component that enables horizontal scrolling for large content sets like galleries, item lists, or tab bars. Ensures smooth navigation when the body exceeds the viewport width.
Features automated scroll-to-selected behavior on mount and exposes a programmatic method (toSelected) for navigation. Provides scoped slot bindings to ensure correct item styling and selection tracking.
Controlled via the tag prop for root element customization. Use for product carousels, category filters, or any horizontally-oriented navigation menus in space-constrained layouts.
<D1HorizontalScroll
/>Emits type HorizontalScrollEmits
Expose interface HorizontalScrollExpose
Slots interface HorizontalScrollSlots
Props type HorizontalScrollProps
Enumeration of some properties
align:
block | center | left | right General alignment depending on component semantics
default value: stretch
<D1HorizontalScroll
align="block"
/> <D1HorizontalScroll
align="center"
/> <D1HorizontalScroll
align="left"
/> <D1HorizontalScroll
align="right"
/>bleed:
boolean Removes borders and rounded corners to render the component flush with its container
default value: true
D1Icon
Description
Vector icon component, typically utilizing the Material Symbols library. Supports dynamic state management, automatic mirroring for RTL languages, and deep integration with the design system's palette.
Features toggle-able states (active/inactive) with specific icons for each, built-in skeleton loading (isSkeleton), and directionality adaptation. Customizing via size, palette, and inverse props ensures visual consistency across all themes.
Controlled via the icon and iconActive props and various styling flags. Use for navigation links, action buttons, status indicators, or any UI element requiring concise visual representation.
<D1Icon
icon="visibility"
iconActive="visibility_off"
/>Emits type IconEmits
Expose interface IconExpose
Slots interface IconSlots
Props type IconProps
Enumeration of some properties
active:
boolean Sets the icon to an active state
default value: false
<D1Icon
active
/>disabled:
boolean Sets the element to an inactive state
default value: false
<D1Icon
disabled
/>turn:
boolean Rotates the element by 180 degrees
default value: false
<D1Icon
turn
/>icon:
string | File Value of the main icon
icon-active:
string | File Value of the active icon
as-palette:
boolean Sets color based on palette class; otherwise uses default color
default value: false
circle:
boolean Makes the element circular
default value: false
<D1Icon
circle overlay
/>inverse:
boolean Inverts component colors
default value: false
<D1Icon
inverse
/>overlay:
boolean Adds background overlay to the component
default value: false
<D1Icon
overlay
/>rect:
boolean Makes the element rectangular
default value: false
<D1Icon
rect overlay
/>rounded:
auto | sm | md | lg | xl | full Adds rounded corners to the component
default value: auto
size:
auto | x | xs | sm | md | lg | xl | 2xl | 3xl | 4xl | 5xl | 6xl | 7xl | 8xl | 9xl Sets component size
default value: auto
<D1Icon
size="auto"
/> <D1Icon
size="x"
/> <D1Icon
size="xs"
/> <D1Icon
size="sm"
/> <D1Icon
size="md"
/> <D1Icon
size="lg"
/> <D1Icon
size="xl"
/> <D1Icon
size="2xl"
/> <D1Icon
size="3xl"
/> <D1Icon
size="4xl"
/> <D1Icon
size="5xl"
/> <D1Icon
size="6xl"
/> <D1Icon
size="7xl"
/> <D1Icon
size="8xl"
/> <D1Icon
size="9xl"
/>square:
boolean Makes the element square
default value: true
<D1Icon
square overlay
/>dir:
boolean Mirrors the component depending on a site direction (RTL/LTR)
default value: false
is-skeleton:
boolean Displays the component in skeleton mode
default value: false
D1Image
Demo
<div :class="classDemo.item" style="position: relative; width: 48px; height: 48px;" > <D1Image v-bind="args"/> </div>
Description
Universal component for displaying graphic content, including images, Material icons, and PDF files. Automatically detects the content type based on the value string or File object provided.
Features multiple display modes (contain, cover, auto), adaptive scaling (objectWidth/Height), and standard img tag support for SEO and lazy loading. Includes advanced positioning via coordinator and x/y props.
Controlled via the value prop and various sizing/rendering flags. Use for avatars, product photos, system icons, or embedded PDF documents requiring specific cropping and aspect ratio control.
<D1Image
value="rocket_launch"
/>Emits type ImageEmits
Expose interface ImageExpose
Slots interface ImageSlots
Props type ImageProps
Enumeration of some properties
disabled:
boolean Sets the element to an inactive state
default value: false
<D1Image
disabled
/>turn:
boolean Rotates the element by 180 degrees
default value: false
<D1Image
turn
/>picture:
Record<string, string> | ImagePictureList Sources for different display conditions using the picture tag with media queries
srcset:
string | Record<string, string> Set of image sources for different screen resolutions and pixel densities
coordinator:
number[] Defines the crop area of the image, accepting an array of values for top, right, bottom, and left
size:
auto | contain | cover Sets component size
<D1Image
size="auto"
/> <D1Image
size="contain"
/> <D1Image
size="cover"
/>x:
string | number Moves the image along the X-axis, accepts a string in % or px format
y:
string | number Moves the image along the Y-axis, accepts a string in % or px format
tag-img:
boolean Use the img tag instead of background image for better accessibility and SEO
default value: false
D1Input
Description
Primary component for user data entry, wrapping the native <D1Input> element with enhanced functionality. Supports floating labels, validation, masking, and multiple formatting modes (numeric, currency, password).
Features built-in support for input masks (e.g., phone numbers), automatic currency/number formatting, and password visibility toggles. Includes field affixes (prefix/suffix), leading/trailing icons, and a character counter.
Controlled via v-model and type props, emitting standard input/change events. Use for all text-based data collection, from simple names to complex formatted financial or identification data.
<D1Input
helperMessage="This is a helpful message"
label="Label"
icon="home"
maxlength="100"
name="name"
/>Label
This is a helpful message
Emits type InputEmits
Expose interface InputExpose
Slots interface InputSlots
Props type InputProps
Enumeration of some properties
disabled:
boolean Sets the element to an inactive state
default value: false
<D1Input
disabled
/>Label
focus:
boolean Visual focus state
default value: false
<D1Input
focus
/>Label
This is a helpful message
loading:
boolean | ConstrBind<ProgressProps> Sets the element to a loading state
<D1Input
loading
/>Label
This is a helpful message
readonly:
boolean Read-only state of the element
default value: false
selected:
boolean Selected state of the element
default value: false
<D1Input
selected
/>Label
This is a helpful message
currency:
string Currency code for formatting monetary values
<D1Input
currency="USD" type="currency"
/>Label
This is a helpful message
fraction:
string | number | boolean Fraction configuration for numeric masks (digits count or special mode)
caption:
string Caption text for additional information
<D1Input
caption="Caption text"
/>Label
Caption text
This is a helpful message
placeholder:
string Placeholder text shown when the input is empty
<D1Input
placeholder="Placeholder text"
/>Label
This is a helpful message
prefix:
string Prefix text displayed before the main content
<D1Input
prefix="Prefix text"
/>Label
Prefix text
This is a helpful message
suffix:
string Suffix text displayed after the main content
<D1Input
suffix="Suffix text" value="Value"
/>Label
Suffix text
This is a helpful message
validation-message:
string Error or validation message text
<D1Input
validation-message="Validation message"
/>Label
This is a helpful message
Validation message
counter-show:
boolean Shows the counter-element
default value: false
<D1Input
counter-show
/>Label
This is a helpful message
0 / 100icon-palette:
boolean Sets icon color based on palette class
default value: false
icon-trailing:
string | File Value of the trailing icon
<D1Input
icon-trailing="settings"
/>Label
This is a helpful message
icon-trailing-palette:
boolean Sets trailing icon color based on palette class
default value: false
icon-turn:
boolean Turns the icon
default value: false
<D1Input
icon-turn
/>Label
This is a helpful message
arrow:
auto | none | carousel | stepper Arrow controls type for numeric input (auto, carousel, stepper, none)
default value: auto
<D1Input
arrow="auto"
/>Label
This is a helpful message
<D1Input
arrow="none"
/>Label
This is a helpful message
<D1Input
arrow="carousel"
/>Label
This is a helpful message
<D1Input
arrow="stepper"
/>Label
This is a helpful message
arrow-align:
center | right | left Sets alignment position of arrow buttons within the field
<D1Input
arrow-align="center" arrow="carousel" arrowCarousel
/>Label
This is a helpful message
<D1Input
arrow-align="right" arrow="carousel" arrowCarousel
/>Label
This is a helpful message
<D1Input
arrow-align="left" arrow="carousel" arrowCarousel
/>Label
This is a helpful message
arrow-step:
number | string Step size for input arrows (type="number" only) when using increment/decrement buttons
required:
boolean Marks the field as required and shows the required indicator
default value: false
<D1Input
required
/>Label
This is a helpful message
type:
number | text | search | number-format | currency | email | password | datetime | date | year-month | time | hour-minute | tel | url | checkbox | radio Input type that determines the behavior and validation of the field
default value: text
align:
center | right | left General alignment depending on component semantics
<D1Input
align="center"
/>Label
This is a helpful message
<D1Input
align="right"
/>Label
This is a helpful message
<D1Input
align="left"
/>Label
This is a helpful message
cancel:
auto | always | none Cancel button mode: auto (show only if cancelShow + active, no arrows) or always (force unless disabled/readonly or arrows).
<D1Input
cancel="auto" value="Value"
/>Label
This is a helpful message
<D1Input
cancel="always" value="Value"
/>Label
This is a helpful message
<D1Input
cancel="none" value="Value"
/>Label
This is a helpful message
currency-hide:
boolean Hide the currency symbol in the formatted value
default value: false
<D1Input
currency-hide currency="USD" type="currency"
/>Label
This is a helpful message
has-html-code:
boolean Whether the message can contain HTML code
default value: false
is-skeleton:
boolean Displays the component in skeleton mode
default value: false
D1InputPhone
Description
The InputPhone component is a specialized field for inputting and formatting phone numbers.
It integrates with a country flag/code selector and applies automatic mask formatting based on the selected or detected country.
By default, the country can be dynamically identified from the entered dialing digits, which can be restricted using the countryBlock prop.
It supports two-way v-model binding, error validation states, helper messages, and custom mask settings.
<D1InputPhone
helperMessage="This is a helpful message"
label="Label"
icon="home"
name="name"
/>Label
This is a helpful message
Emits type InputPhoneEmits
Expose interface InputPhoneExpose
Slots interface InputPhoneSlots
Props type InputPhoneProps
Enumeration of some properties
disabled:
boolean Sets the element to an inactive state
default value: false
<D1InputPhone
disabled
/>Label
focus:
boolean Visual focus state
default value: false
<D1InputPhone
focus
/>Label
This is a helpful message
loading:
boolean | ConstrBind<ProgressProps> Sets the element to a loading state
<D1InputPhone
loading
/>Label
This is a helpful message
readonly:
boolean Read-only state of the element
default value: false
selected:
boolean Selected state of the element
default value: false
<D1InputPhone
selected
/>Label
This is a helpful message
country-default:
string Default country code (ISO 3166-1 alpha-2)
placeholder:
string Placeholder text shown when the input is empty
<D1InputPhone
placeholder="Placeholder text"
/>Label
This is a helpful message
prefix:
string Prefix text displayed before the main content
<D1InputPhone
prefix="Prefix text"
/>Label
Prefix text
This is a helpful message
suffix:
string Suffix text displayed after the main content
<D1InputPhone
suffix="Suffix text" value="Value"
/>Label
Suffix text
This is a helpful message
validation-message:
string Error or validation message text
<D1InputPhone
validation-message="Validation message"
/>Label
This is a helpful message
Validation message
icon-palette:
boolean Sets icon color based on palette class
default value: false
icon-trailing:
string | File Value of the trailing icon
<D1InputPhone
icon-trailing="settings"
/>Label
This is a helpful message
icon-trailing-palette:
boolean Sets trailing icon color based on palette class
default value: false
icon-turn:
boolean Turns the icon
default value: false
<D1InputPhone
icon-turn
/>Label
This is a helpful message
required:
boolean Marks the field as required and shows the required indicator
default value: false
<D1InputPhone
required
/>Label
This is a helpful message
align:
center | right | left General alignment depending on component semantics
<D1InputPhone
align="center"
/>Label
This is a helpful message
<D1InputPhone
align="right"
/>Label
This is a helpful message
<D1InputPhone
align="left"
/>Label
This is a helpful message
cancel:
none | auto | always Cancel button mode: auto (show only if cancelShow + active, no arrows) or always (force unless disabled/readonly or arrows).
<D1InputPhone
cancel="none" value="Value"
/>Label
This is a helpful message
<D1InputPhone
cancel="auto" value="Value"
/>Label
This is a helpful message
<D1InputPhone
cancel="always" value="Value"
/>Label
This is a helpful message
country-block:
boolean Flag to disable dynamic country detection by phone number
default value: false
has-html-code:
boolean Whether the message can contain HTML code
default value: false
is-skeleton:
boolean Displays the component in skeleton mode
default value: false
D1InputPhoneDialCode
Demo
<div :class="classDemo.item"> <DesignComponent v-bind="args" /> </div>
Description
The InputPhoneDialCode component is a compact trigger button that opens a MenuCountry popup for selecting a country phone dial code.
It automatically detects the user's current country via Geo.getCountry() as the default value and reactively binds the selection via v-model:selected.
The trigger button can display the selected country's flag icon alongside an optional label — either the phone code (e.g. "+1") or the country name — controlled by the labelType prop ('code' | 'name' | 'none').
The trailing arrow icon reflects the open/close state of the menu. Typically used as a prefix element inside a phone number input field.
<D1InputPhoneDialCode
/>Emits type InputPhoneDialCodeEmits
Expose interface InputPhoneDialCodeExpose
Slots interface InputPhoneDialCodeSlots
Props type InputPhoneDialCodeProps
Enumeration of some properties
disabled:
boolean Sets the element to an inactive state
default value: false
<D1InputPhoneDialCode
disabled
/>label-type:
name | none | code Controls what label is shown in the dial-code trigger: country name, country code, or no label
D1InputSocial
Description
The InputSocial component is a specialized input field designed for social network profiles.
It automatically configures itself (mask, prefix, suffix, and label) based on the provided socialType property.
It supports custom icons mapping via the socialIcons property, allowing for seamless integration with custom icon sets.
The component supports two-way v-model binding, error validation states, and helper messages through its underlying Field integration.
<D1InputSocial
socialType="telegram"
helperMessage="This is a helpful message"
name="name"
/>Telegram
This is a helpful message
Emits type InputSocialEmits
Expose interface InputSocialExpose
Slots interface InputSocialSlots
Props type InputSocialProps
Enumeration of some properties
disabled:
boolean Sets the element to an inactive state
default value: false
<D1InputSocial
disabled
/>Telegram
focus:
boolean Visual focus state
default value: false
<D1InputSocial
focus
/>Telegram
This is a helpful message
loading:
boolean | ConstrBind<ProgressProps> Sets the element to a loading state
<D1InputSocial
loading
/>Telegram
This is a helpful message
readonly:
boolean Read-only state of the element
default value: false
selected:
boolean Selected state of the element
default value: false
<D1InputSocial
selected
/>Telegram
This is a helpful message
currency:
string Currency code for formatting monetary values
<D1InputSocial
currency="USD" type="currency"
/>Telegram
This is a helpful message
fraction:
string | number | boolean Fraction configuration for numeric masks (digits count or special mode)
social-type:
alipay | baidu | dingtalk | discord | douyin | dzen | facebook | github | gitlab | habr | instagram | line | linkedin | medium | messenger | ok | pinterest | qq | reddit | skype | snapchat | telegram | tiktok | tumblr | twitter | viber | vk | wechat | weibo | whatsapp | x | xiaohongshu | youtube | zalo | zhihu | alipay | baidu | dingtalk | discord | douyin | dzen | facebook | github | gitlab | habr | instagram | line | linkedin | medium | messenger | ok | pinterest | qq | reddit | skype | snapchat | telegram | tiktok | tumblr | twitter | viber | vk | wechat | weibo | whatsapp | x | xiaohongshu | youtube | zalo | zhihu Type of social network
caption:
string Caption text for additional information
<D1InputSocial
caption="Caption text"
/>Telegram
Caption text
This is a helpful message
label:
string Text label for the component
placeholder:
string Placeholder text shown when the input is empty
<D1InputSocial
placeholder="Placeholder text"
/>Telegram
This is a helpful message
prefix:
string Prefix text displayed before the main content
<D1InputSocial
prefix="Prefix text"
/>Telegram
Prefix text
This is a helpful message
suffix:
string Suffix text displayed after the main content
<D1InputSocial
suffix="Suffix text" value="Value"
/>Telegram
Suffix text
This is a helpful message
validation-message:
string Error or validation message text
<D1InputSocial
validation-message="Validation message"
/>Telegram
This is a helpful message
Validation message
counter-show:
boolean Shows the counter-element
default value: false
<D1InputSocial
counter-show
/>Telegram
This is a helpful message
0icon:
string | File Value of the main icon
icon-palette:
boolean Sets icon color based on palette class
default value: false
icon-trailing:
string | File Value of the trailing icon
<D1InputSocial
icon-trailing="settings"
/>Telegram
This is a helpful message
icon-trailing-palette:
boolean Sets trailing icon color based on palette class
default value: false
icon-turn:
boolean Turns the icon
default value: false
<D1InputSocial
icon-turn
/>Telegram
This is a helpful message
required:
boolean Marks the field as required and shows the required indicator
default value: false
<D1InputSocial
required
/>Telegram
This is a helpful message
align:
center | right | left General alignment depending on component semantics
<D1InputSocial
align="center"
/>Telegram
This is a helpful message
<D1InputSocial
align="right"
/>Telegram
This is a helpful message
<D1InputSocial
align="left"
/>Telegram
This is a helpful message
cancel:
auto | always | none Cancel button mode: auto (show only if cancelShow + active, no arrows) or always (force unless disabled/readonly or arrows).
<D1InputSocial
cancel="auto" value="Value"
/>Telegram
This is a helpful message
<D1InputSocial
cancel="always" value="Value"
/>Telegram
This is a helpful message
<D1InputSocial
cancel="none" value="Value"
/>Telegram
This is a helpful message
currency-hide:
boolean Hide the currency symbol in the formatted value
default value: false
<D1InputSocial
currency-hide currency="USD" type="currency"
/>Telegram
This is a helpful message
has-html-code:
boolean Whether the message can contain HTML code
default value: false
is-skeleton:
boolean Displays the component in skeleton mode
default value: false
D1List
Description
Core engine for rendering interactive, searchable, and hierarchical lists. Serves as the foundation for complex components like Selects, Dropdowns, and multi-level Navigation Menus.
Features support for multiple item types (group, menu, line, html), real-time search highlighting, and full keyboard navigation. Includes automatic focus management, ARIA accessibility roles, and a "lite" rendering mode for performance optimization with large datasets.
Controlled via the list prop for data and v-model:selected for state tracking. Use as the primary building block for any interface requiring item selection, structured data display, or interactive command menus.
<D1List
list="[{"label":"Запустить проект (Label)","value":"launch-project","icon":"play_arrow"},{"label":"Управление задачами","value":"task-management","icon":"assignment"},{"type":"space"},{"label":"Команда","value":"team","icon":"group","badge":"12"},{"label":"Аналитика и отчеты","value":"analytics","icon":"analytics","description":"Просмотр статистики"},{"type":"subtitle","label":"Инструменты"},{"label":"Настройки системы","value":"settings","icon":"settings","disabled":true},{"label":"Файловый менеджер","value":"file-manager","icon":"folder","suffix":245},{"type":"group","index":"g1","label":"Маркетинг","value":[{"label":"Email рассылки","value":"email-campaigns","icon":"email"},{"label":"Социальные сети","value":"social-media","icon":"share"},{"label":"Реклама","value":"ads","icon":"ads_click"}],"icon":"campaign"},{"type":"group","index":"g2","label":"Разработка","value":[{"label":"Репозиторий кода","value":"repository","icon":"code"},{"label":"Система сборки","value":"build-system","icon":"build"},{"type":"group","index":"g2-1","label":"Тестирование","value":[{"label":"Unit тесты","value":"unit-tests","icon":"science"},{"label":"Интеграционные тесты","value":"integration-tests","icon":"integration_instructions"},{"label":"E2E тесты","value":"e2e-tests","icon":"web"}],"icon":"bug_report"},{"label":"Документация API","value":"api-docs","icon":"description"}],"icon":"developer_mode"},{"type":"menu","index":"m1","label":"Администрирование","value":[{"label":"Управление пользователями","value":"user-management","icon":"people"},{"label":"Права доступа","value":"permissions","icon":"security"},{"type":"menu","index":"m1-1","label":"Системные настройки","value":[{"label":"Конфигурация сервера","value":"server-config","icon":"dns"},{"label":"База данных","value":"database-config","icon":"storage"},{"label":"Резервное копирование","value":"backup","icon":"backup"}],"icon":"tune"},{"label":"Мониторинг системы","value":"monitoring","icon":"monitor_heart"}],"icon":"admin_panel_settings"},{"type":"line"},{"label":"Уведомления","value":"notifications","icon":"notifications","badge":"Новое"},{"label":"Избранное","value":"favorites","icon":"star"}]"
iconSearch="search"
/>Инструменты
Emits type ListEmits
Expose interface ListExpose
Slots interface ListSlots
Props type ListProps
Enumeration of some properties
disabled:
boolean Sets the element to an inactive state
default value: false
<D1List
disabled
/>Инструменты
focus:
NumberOrStringOrBoolean Selected item for focus state. Defines which item should be visually focused in the list.
lite:
boolean Enable lightweight display mode. Reduces visual complexity by showing simplified item styling with minimal decorative elements.
default value: false
<D1List
lite liteThreshold="4"
/>Инструменты
selected:
ListSelectedList List of selected items. Contains all currently selected items in the list for multi-selection scenarios.
<D1List
selected="task-management"
/>Инструменты
highlight:
string Text to highlight within the component content
<D1List
highlight="abe"
/>Инструменты
highlight-length-start:
number Minimum length of highlight value to start highlighting
list:
ListRecord<ListItemProps> Array of list items data. Contains the data for all items to be rendered in the list.
divider:
boolean Enables visual divider between elements
default value: false
selection-style:
checkbox | none | radio | checkmark Selection style
<D1List
selection-style="checkbox" selected="task-management"
/>Инструменты
<D1List
selection-style="none" selected="task-management"
/>Инструменты
<D1List
selection-style="radio" selected="task-management"
/>Инструменты
<D1List
selection-style="checkmark" selected="task-management"
/>Инструменты
filter-mode:
boolean Enables filter mode for search (hides non-matching items)
default value: false
lite-threshold:
number Threshold value that works when lite mode is enabled (lite: true). Defines the maximum number of items before additional optimizations are applied in lite mode.
show-search:
boolean Whether to show the search field
default value: false
D1ListItem
Description
Versatile structural component for rendering items within lists, menus, or navigation bars. Provides a standardized layout with high-density content support for labels, descriptions, and metadata.
Features dedicated slots for prefix (leading), content (central), suffix (trailing metadata), and trailing (action indicators). Includes built-in support for icons, badges, selected states, and interactive feedback like ripple effects.
Controlled via label, description, and href/to props; renders as an <a> tag when navigating. Use for building navigation menus, data-rich list rows, or simple clickable interactive elements.
<D1ListItem
description="Here is a detailed description of the component"
label="Label"
icon="home"
/>Emits type ListItemEmits
Expose interface ListItemExpose
Slots interface ListItemSlots
Props type ListItemProps
Enumeration of some properties
disabled:
boolean Sets the element to an inactive state
default value: false
<D1ListItem
disabled
/>focus:
boolean Visual focus state
default value: false
<D1ListItem
focus
/>loading:
boolean | ConstrBind<ProgressProps> Sets the element to a loading state
<D1ListItem
loading
/>open:
boolean Visual open state of the list item
default value: false
readonly:
boolean Read-only state of the element
default value: false
selected:
boolean Selected state of the element
default value: false
<D1ListItem
selected
/>badge:
string Badge text or value to display
<D1ListItem
badge="123"
/>badge-dot:
boolean Display badge as a dot indicator
default value: false
<D1ListItem
badge-dot
/>highlight:
string Text to highlight within the component content
<D1ListItem
highlight="abe"
/>highlight-length-start:
number Minimum length of highlight value to start highlighting
caption:
string Caption text for additional information
<D1ListItem
caption="Caption text"
/>prefix:
string Prefix text displayed before the main content
<D1ListItem
prefix="Prefix text"
/>suffix:
string Suffix text displayed after the main content
<D1ListItem
suffix="Suffix text" value="Value"
/>icon-align:
center | edge Sets icon alignment within the component
default value: edge
icon-palette:
boolean Sets icon color based on palette class
default value: false
icon-top:
boolean Aligns icon to the top of the container
default value: false
icon-trailing:
string | File Value of the trailing icon
<D1ListItem
icon-trailing="settings"
/>icon-trailing-palette:
boolean Sets trailing icon color based on palette class
default value: false
icon-turn:
boolean Turns the icon
default value: false
<D1ListItem
icon-turn
/>control-position:
start | end | autoSm | autoMd | autoLg | autoXl | auto2xl Position of the control element
default value: end
<D1ListItem
control-position="start"
/> <D1ListItem
control-position="end"
/> <D1ListItem
control-position="autoSm"
/> <D1ListItem
control-position="autoMd"
/> <D1ListItem
control-position="autoLg"
/> <D1ListItem
control-position="autoXl"
/> <D1ListItem
control-position="auto2xl"
/>dense:
boolean Enables compact display variant
default value: false
<D1ListItem
dense
/>divider:
boolean Enables visual divider between elements
default value: false
fill:
custom Sets fill color for the component
<D1ListItem
fill="custom"
/>palette:
red | orange | amber | yellow | lime | green | emerald | teal | cyan | sky | blue | indigo | violet | purple | fuchsia | pink | rose | slate | gray | zinc | neutral | stone | black | white Sets a color palette for the element
<D1ListItem
palette="red"
/> <D1ListItem
palette="orange"
/> <D1ListItem
palette="amber"
/> <D1ListItem
palette="yellow"
/> <D1ListItem
palette="lime"
/> <D1ListItem
palette="green"
/> <D1ListItem
palette="emerald"
/> <D1ListItem
palette="teal"
/> <D1ListItem
palette="cyan"
/> <D1ListItem
palette="sky"
/> <D1ListItem
palette="blue"
/> <D1ListItem
palette="indigo"
/> <D1ListItem
palette="violet"
/> <D1ListItem
palette="purple"
/> <D1ListItem
palette="fuchsia"
/> <D1ListItem
palette="pink"
/> <D1ListItem
palette="rose"
/> <D1ListItem
palette="slate"
/> <D1ListItem
palette="gray"
/> <D1ListItem
palette="zinc"
/> <D1ListItem
palette="neutral"
/> <D1ListItem
palette="stone"
/> <D1ListItem
palette="black"
/> <D1ListItem
palette="white"
/>selection-style:
checkbox | none | radio | checkmark Selection style
default value: none
<D1ListItem
selection-style="checkbox" selected="task-management"
/> <D1ListItem
selection-style="none" selected="task-management"
/> <D1ListItem
selection-style="radio" selected="task-management"
/> <D1ListItem
selection-style="checkmark" selected="task-management"
/>size:
sm | md | lg Sets component size
default value: md
<D1ListItem
size="sm"
/> <D1ListItem
size="md"
/> <D1ListItem
size="lg"
/>filter-mode:
boolean Enables filter mode for search (hides non-matching items)
default value: false
is-skeleton:
boolean Displays the component in skeleton mode
default value: false
D1Menu
Demo
<div :class="classDemo.item">
<D1Menu embedded :window-attrs="{open: true}" v-bind="args">
<template #control="{ binds }">
<button class="wiki-storybook-button" v-bind="binds">
Open Menu
</button>
</template>
</D1Menu>
</div>Description
Comprehensive navigational component that integrates a trigger (Control), a floating container (Window), and a structured dataset (List). Designed for multi-level menus, context-sensitive actions, and complex selection interfaces requiring icons or grouping.
Features support for hierarchical data structures (nested submenus), real-time AJAX loading, and full keyboard accessibility. Includes sophisticated focus management, automatic positioning relative to the trigger, and a lite rendering mode for optimized performance with large lists.
Controlled via the list prop for items and v-model:selected for state tracking. Use for user profile menus, sidebar navigation, or advanced select-like UI patterns where standard dropdowns lack sufficient structural flexibility.
<D1Menu
list="[{"label":"Запустить проект (Label)","value":"launch-project","icon":"play_arrow"},{"label":"Управление задачами","value":"task-management","icon":"assignment"},{"type":"space"},{"label":"Команда","value":"team","icon":"group","badge":"12"},{"label":"Аналитика и отчеты","value":"analytics","icon":"analytics","description":"Просмотр статистики"},{"type":"subtitle","label":"Инструменты"},{"label":"Настройки системы","value":"settings","icon":"settings","disabled":true},{"label":"Файловый менеджер","value":"file-manager","icon":"folder","suffix":245},{"type":"group","index":"g1","label":"Маркетинг","value":[{"label":"Email рассылки","value":"email-campaigns","icon":"email"},{"label":"Социальные сети","value":"social-media","icon":"share"},{"label":"Реклама","value":"ads","icon":"ads_click"}],"icon":"campaign"},{"type":"group","index":"g2","label":"Разработка","value":[{"label":"Репозиторий кода","value":"repository","icon":"code"},{"label":"Система сборки","value":"build-system","icon":"build"},{"type":"group","index":"g2-1","label":"Тестирование","value":[{"label":"Unit тесты","value":"unit-tests","icon":"science"},{"label":"Интеграционные тесты","value":"integration-tests","icon":"integration_instructions"},{"label":"E2E тесты","value":"e2e-tests","icon":"web"}],"icon":"bug_report"},{"label":"Документация API","value":"api-docs","icon":"description"}],"icon":"developer_mode"},{"type":"menu","index":"m1","label":"Администрирование","value":[{"label":"Управление пользователями","value":"user-management","icon":"people"},{"label":"Права доступа","value":"permissions","icon":"security"},{"type":"menu","index":"m1-1","label":"Системные настройки","value":[{"label":"Конфигурация сервера","value":"server-config","icon":"dns"},{"label":"База данных","value":"database-config","icon":"storage"},{"label":"Резервное копирование","value":"backup","icon":"backup"}],"icon":"tune"},{"label":"Мониторинг системы","value":"monitoring","icon":"monitor_heart"}],"icon":"admin_panel_settings"},{"type":"line"},{"label":"Уведомления","value":"notifications","icon":"notifications","badge":"Новое"},{"label":"Избранное","value":"favorites","icon":"star"}]"
barsDescription="Welcome to the application!"
barsLabel="Hello friend"
barsList="[{"icon":"home","label":"Home"},{"icon":"search","label":"Search"},{"icon":"settings","label":"Settings"}]"
/>Emits type MenuEmits
Expose interface MenuExpose
Slots interface MenuSlots
Props type MenuProps
Enumeration of some properties
disabled:
boolean Sets the element to an inactive state
default value: false
<D1Menu
disabled
/>selected:
ListSelectedList List of selected items. Contains all currently selected items in the list for multi-selection scenarios.
<D1Menu
selected="task-management"
/>highlight:
string Text to highlight within the component content
<D1Menu
highlight="abe"
/>highlight-length-start:
number Minimum length of highlight value to start highlighting
list:
ListRecord<ListItemProps> Array of list items data. Contains the data for all items to be rendered in the list.
request:
ApiFetch Custom request handler configuration for fetching menu data.
bars-back-hide:
boolean Hides the back button in the bars
default value: true
bars-adaptive:
showAlways | showSm | showMd | showLg | showXl | show2xl Indicates whether the bars (header toolbar) should be shown
selection-style:
checkbox | none | radio | checkmark Selection style
<D1Menu
selection-style="checkbox" selected="task-management"
/> <D1Menu
selection-style="none" selected="task-management"
/> <D1Menu
selection-style="radio" selected="task-management"
/> <D1Menu
selection-style="checkmark" selected="task-management"
/>auto-close:
boolean Closes the window/menu when clicking inside the content area
default value: true
filter-mode:
boolean Enables filter mode for search (hides non-matching items)
default value: false
hide-list:
boolean Hides the internal List part of the Menu; shows only header/toolbar and other slots.
default value: false
lite-threshold:
number Threshold value that works when lite mode is enabled (lite: true). Defines the maximum number of items before additional optimizations are applied in lite mode.
default value: 40
show-search:
boolean Whether to show the search field
default value: false
D1MenuButton
Demo
<div :class="classDemo.item">
<D1MenuButton :menu-attrs="{windowAttrs: {open: true}, embedded: true}" v-bind="args">
<template #default="{ binds }">
<button class="wiki-storybook-button" v-bind="binds">
Open Menu
</button>
</template>
</D1MenuButton>
</div>Description
Button-based dropdown selector combining a trigger Button and a dropdown Menu. Designed for space-saving select dropdowns where a standard text field outline is undesirable.
Displays selected values with configurable label separators (labelSeparator) and label hiding options (hideLabelValue, hideValueIcon).
Integrated hidden inputs provide standard form data carrying, while optional header search components (showSearch) allow filterable options lists.
<D1MenuButton
option="[{"label":"Home","value":"home","icon":"home"},{"label":"Dashboard","value":"dashboard","icon":"dashboard"},{"label":"Profile","value":"profile","icon":"person"},{"label":"Settings","value":"settings","icon":"settings"},{"label":"Notifications","value":"notifications","icon":"notifications"},{"label":"Messages","value":"messages","icon":"message"},{"label":"Calendar","value":"calendar","icon":"calendar_today"},{"label":"Tasks","value":"tasks","icon":"task"},{"label":"Projects","value":"projects","icon":"work"},{"label":"Team","value":"team","icon":"group"},{"label":"Documents","value":"documents","icon":"description"}]"
label="Label"
icon="home"
name="name"
/>Emits type MenuButtonEmits
Expose interface MenuButtonExpose
Slots interface MenuButtonSlots
Props type MenuButtonProps
Enumeration of some properties
disabled:
boolean Sets the element to an inactive state
default value: false
<D1MenuButton
disabled
/>readonly:
boolean Read-only state of the element
default value: false
option:
array | object | function List of options to display in the dropdown - accepts array, object, or function returning options
label-separator:
string Separator for the displayed labels of the selected values
default value: :
multiple:
boolean Enables multiple selection mode
default value: false
<D1MenuButton
multiple
/>required:
boolean Marks the field as required and shows the required indicator
default value: false
<D1MenuButton
required
/>selection-style:
checkbox | none | radio | checkmark | auto Selection style
<D1MenuButton
selection-style="checkbox" selected="task-management"
/> <D1MenuButton
selection-style="none" selected="task-management"
/> <D1MenuButton
selection-style="radio" selected="task-management"
/> <D1MenuButton
selection-style="checkmark" selected="task-management"
/> <D1MenuButton
selection-style="auto" selected="task-management"
/>filter-mode:
boolean Enables filter mode for search (hides non-matching items)
default value: false
hide-label-value:
boolean Whether to hide the label when a value is selected
default value: true
hide-list:
boolean Hides the internal List part of the Menu; shows only header/toolbar and other slots.
default value: false
hide-value-icon:
boolean Whether to hide the value if an icon is present
default value: true
show-search:
boolean Whether to show the search field
default value: false
D1MenuChip
Demo
<div :class="classDemo.item">
<D1MenuChip :menu-attrs="{windowAttrs: {open: true}, embedded: true}" v-bind="args">
<template #default="{ binds }">
<button class="wiki-storybook-button" v-bind="binds">
Open Menu
</button>
</template>
</D1MenuChip>
</div>Description
Chip-based dropdown selector combining a trigger Chip and a dropdown Menu. Designed for space-saving select dropdowns where a standard text field outline or large button trigger is undesirable.
Displays selected values with configurable label separators (labelSeparator) and label hiding options (hideLabelValue, hideValueIcon).
Integrated hidden inputs provide standard form data carrying, while optional header search components (showSearch) allow filterable options lists.
<D1MenuChip
option="[{"label":"Home","value":"home","icon":"home"},{"label":"Dashboard","value":"dashboard","icon":"dashboard"},{"label":"Profile","value":"profile","icon":"person"},{"label":"Settings","value":"settings","icon":"settings"},{"label":"Notifications","value":"notifications","icon":"notifications"},{"label":"Messages","value":"messages","icon":"message"},{"label":"Calendar","value":"calendar","icon":"calendar_today"},{"label":"Tasks","value":"tasks","icon":"task"},{"label":"Projects","value":"projects","icon":"work"},{"label":"Team","value":"team","icon":"group"},{"label":"Documents","value":"documents","icon":"description"}]"
label="Label"
icon="home"
name="name"
/>Emits type MenuChipEmits
Expose interface MenuChipExpose
Slots interface MenuChipSlots
Props type MenuChipProps
Enumeration of some properties
disabled:
boolean Sets the element to an inactive state
default value: false
<D1MenuChip
disabled
/>readonly:
boolean Read-only state of the element
default value: false
option:
array | object | function List of options to display in the dropdown - accepts array, object, or function returning options
label-separator:
string Separator for the displayed labels of the selected values
default value: :
multiple:
boolean Enables multiple selection mode
default value: false
<D1MenuChip
multiple
/>required:
boolean Marks the field as required and shows the required indicator
default value: false
<D1MenuChip
required
/>selection-style:
checkbox | none | radio | checkmark | auto Selection style
<D1MenuChip
selection-style="checkbox" selected="task-management"
/> <D1MenuChip
selection-style="none" selected="task-management"
/> <D1MenuChip
selection-style="radio" selected="task-management"
/> <D1MenuChip
selection-style="checkmark" selected="task-management"
/> <D1MenuChip
selection-style="auto" selected="task-management"
/>filter-mode:
boolean Enables filter mode for search (hides non-matching items)
default value: false
hide-label-value:
boolean Whether to hide the label when a value is selected
default value: true
hide-list:
boolean Hides the internal List part of the Menu; shows only header/toolbar and other slots.
default value: false
hide-value-icon:
boolean Whether to hide the value if an icon is present
default value: true
show-search:
boolean Whether to show the search field
default value: false
D1MenuCountry
Demo
<div :class="classDemo.item">
<D1MenuCountry v-bind="args">
<template #control="{ binds }">
<button class="wiki-storybook-button" v-bind="binds">
Select Country
</button>
</template>
</D1MenuCountry>
</div>Description
The MenuCountry component is a specialized version of the Menu component, designed specifically for country selection.
It leverages the GeoFlagRef utility to automatically populate the menu with a list of countries, including their flags and localized names.
It supports all the standard Menu functionalities like Window-based popups, custom controls, and sophisticated focus management.
Use the 'countryList' prop to restrict the selection to a specific subset of countries.
<D1MenuCountry
/>Emits type MenuCountryEmits
Expose interface MenuCountryExpose
Slots interface MenuCountrySlots
Props type MenuCountryProps
Enumeration of some properties
disabled:
boolean Sets the element to an inactive state
default value: false
<D1MenuCountry
disabled
/>selected:
string | string[] Selected country code (ISO 3166-1 alpha-2) or an array of selected country codes.
list:
string[] List of country codes (ISO 3166-1 alpha-2) for filtering the country list.
show-phone-code:
boolean Whether to show the phone code
default value: false
D1MenuLanguage
Demo
<div :class="classDemo.item">
<D1MenuLanguage v-bind="args">
<template #control="{ binds }">
<button class="wiki-storybook-button" v-bind="binds">
Select Language
</button>
</template>
</D1MenuLanguage>
</div>Description
The MenuLanguage component is a specialized version of the Menu component, designed specifically for language selection.
It leverages the GeoFlagRef utility to automatically populate the menu with a list of languages, including native language names and country flags where relevant.
It supports all the standard Menu functionalities like Window-based popups, custom controls, and sophisticated focus management.
Use the 'countryList' prop to restrict the selection to a specific subset of language codes.
<D1MenuLanguage
/>Emits type MenuLanguageEmits
Expose interface MenuLanguageExpose
Slots interface MenuLanguageSlots
Props type MenuLanguageProps
Enumeration of some properties
disabled:
boolean Sets the element to an inactive state
default value: false
<D1MenuLanguage
disabled
/>selected:
ListSelectedList Selected state of the element
<D1MenuLanguage
selected
/>list:
string[] List of country/language codes (ISO 3166-1 alpha-2 / ISO 639-1) for filtering the language menu.
show-phone-code:
boolean Whether to show the phone code
default value: false
D1Modal
Demo
<div :class="classDemo.item">
<D1Modal embedded open v-bind="args">
<template #default>
<p>This is a modal dialog.</p>
</template>
</D1Modal>
</div>Description
Simplified wrapper over the Window component pre-configured for centered modal dialogs. Provides a high-level API for typical interaction patterns like confirmation prompts, info alerts, and data entry forms.
Features automatic overlay management, background interaction blocking, and body scroll locking. Includes built-in focus trapping, Esc key dismissal, and responsive layout optimization (adaptive="modal") for consistent mobile and desktop UX.
Controlled via the v-model:open prop and utilizes #control, #title, and #footer slots for modular layout. Use for critical user notifications, blocking confirmation steps, or focused sub-tasks requiring immediate attention.
<D1Modal
actionsList="[{"icon":"edit","label":"Edit"},{"icon":"delete","label":"Delete"},{"icon":"share","label":"Share"}]"
actionsSecondary="[{"icon":"info","label":"Info"},{"icon":"help","label":"Help"}]"
barsDescription="Welcome to the application!"
barsLabel="Hello friend"
barsList="[{"icon":"home","label":"Home"},{"icon":"search","label":"Search"},{"icon":"settings","label":"Settings"}]"
/>Emits type ModalEmits
Expose interface ModalExpose
Slots interface ModalSlots
Props type ModalProps
Enumeration of some properties
disabled:
boolean Sets the element to an inactive state
default value: false
<D1Modal
disabled
/>image:
string | File | ImageProps Specifies the image value for the component
<D1Modal
image="https://drscdn.500px.org/photo/294267357/q%3D90_m%3D2048/v2?sig=adb52b9add18ad21ab4a86b99695377f2a18821c609d42149b3426dfb99cf924"
/>bars-back-hide:
boolean Hides the back button in the bars
default value: true
image-position:
top | left | adaptiveSm | adaptiveMd | adaptiveLg | adaptiveXl | adaptive2xl Defines image placement within the window layout
default value: top
<D1Modal
image-position="top" image="https://drscdn.500px.org/photo/294267357/q%3D90_m%3D2048/v2?sig=adb52b9add18ad21ab4a86b99695377f2a18821c609d42149b3426dfb99cf924"
/> <D1Modal
image-position="left" image="https://drscdn.500px.org/photo/294267357/q%3D90_m%3D2048/v2?sig=adb52b9add18ad21ab4a86b99695377f2a18821c609d42149b3426dfb99cf924"
/> <D1Modal
image-position="adaptiveSm" image="https://drscdn.500px.org/photo/294267357/q%3D90_m%3D2048/v2?sig=adb52b9add18ad21ab4a86b99695377f2a18821c609d42149b3426dfb99cf924"
/> <D1Modal
image-position="adaptiveMd" image="https://drscdn.500px.org/photo/294267357/q%3D90_m%3D2048/v2?sig=adb52b9add18ad21ab4a86b99695377f2a18821c609d42149b3426dfb99cf924"
/> <D1Modal
image-position="adaptiveLg" image="https://drscdn.500px.org/photo/294267357/q%3D90_m%3D2048/v2?sig=adb52b9add18ad21ab4a86b99695377f2a18821c609d42149b3426dfb99cf924"
/> <D1Modal
image-position="adaptiveXl" image="https://drscdn.500px.org/photo/294267357/q%3D90_m%3D2048/v2?sig=adb52b9add18ad21ab4a86b99695377f2a18821c609d42149b3426dfb99cf924"
/> <D1Modal
image-position="adaptive2xl" image="https://drscdn.500px.org/photo/294267357/q%3D90_m%3D2048/v2?sig=adb52b9add18ad21ab4a86b99695377f2a18821c609d42149b3426dfb99cf924"
/>width:
sm | md | lg | xl | auto Sets component width
default value: md
<D1Modal
width="sm"
/> <D1Modal
width="md"
/> <D1Modal
width="lg"
/> <D1Modal
width="xl"
/> <D1Modal
width="auto"
/>auto-close:
boolean Closes the window/menu when clicking inside the content area
default value: false
D1MotionAxis
Description
Low-level layout component for animating transitions between multiple content areas (slides) along X, Y, or Z axes. Ideal for multi-step wizards, tabbed content, and gallery-like interfaces requiring direction-aware motion.
Features automated animation direction detection (next/back), smooth container height transitions, and lazy loading support to manage slide life-cycles in the DOM. Supports horizontal slide, vertical flip, and depth-based transitions with customizable speed and easing.
Controlled via the selected prop or v-model:selected, utilizing numbered slide slots (#slide1, #slide2, etc.) for content distribution. Use when content needs to transition within a fixed or dynamic container while maintaining high visual polish and spatial orientation.
<D1MotionAxis
selected="slide2"
/>Emits type MotionAxisEmits
Expose interface MotionAxisExpose
Slots interface MotionAxisSlots
Props type MotionAxisProps
Enumeration of some properties
selected:
MotionAxisSelectedValue Selected element
animation-height:
boolean Enables height animation
default value: false
in-dom:
boolean Indicates whether the window is in the DOM
default value: false
in-dom-slide:
string[] List of slides that should remain in the DOM
D1MotionTransform
Demo
<div :class="classDemo.item">
<D1MotionTransform :auto-close="false" v-bind="args">
<template #head>
<button class="wiki-storybook-button">Toggle Content</button>
</template>
<template #body>
<div class="wiki-storybook-item--padding">
<p>Expandable content goes here.</p>
</div>
</template>
</D1MotionTransform>
</div>Description
Low-level motion engine designed for complex component transitions like windows, dropdowns, and collapsible sections. Provides a unified system for managing element transforms, off-DOM teleportation, and interaction patterns (click-outside, etc.).
Features dynamic size measurement with automatic CSS variable updates for smooth hardware-accelerated animations. Includes a robust state manager (open/show/teleport), focus trapping, and customizable interaction ignoring areas for triggers.
Controlled via the v-model:open prop and utilizes #head and #body slots for layout. Use as a foundational utility when building custom interactive components requiring sophisticated motion, state transitions, and high-performance DOM manipulation.
<D1MotionTransform
/>Emits type MotionTransformEmits
Expose interface MotionTransformExpose
Slots interface MotionTransformSlots
Props type MotionTransformProps
Enumeration of some properties
adaptive:
planeAlways | planeSm | planeMd | planeLg | planeXl | plane2xl Controls adaptive display behavior for different screen sizes and media queries
default value: planeMd
animation-head-position:
top | toBottom Head behavior during animations
default value: top
auto-close:
boolean Automatically close on the outside click
default value: true
click-open:
boolean Enable opening on click
default value: true
in-dom:
boolean Indicates whether the window is in the DOM
default value: false
section:
boolean Enable section styling mode
default value: false
<D1MotionTransform
section open
/>Expandable content goes here.
D1Page
Demo
<div :class="classDemo.item">
<D1Page v-bind="args">
Main page content.
</D1Page>
</div>Description
Top-level structural container designed to wrap the primary content of a view or document. Serves as a semantic root (typically rendering a <main> tag) and establishes the high-level document hierarchy with standardized headers.
Features a comprehensive header structure inherited from the Block component, including support for headlines (h1), labels (page titles), descriptions, and trailing action areas. Automatically manages spacing and layout consistency for page-level navigation and identity.
Controlled via headline, label, and icon props, with dedicated slots for content and actions (#default, #trailing). Use as the foundational wrapper for any route or unique screen to ensure accessibility and consistent information architecture.
<D1Page
description="Here is a detailed description of the component"
label="Label"
icon="home"
/>Label
Here is a detailed description of the component
Emits type PageEmits
Expose interface PageExpose
Slots interface PageSlots
Props type PageProps
Enumeration of some properties
selected:
boolean Selected state of the element
default value: false
<D1Page
selected
/>Label
Here is a detailed description of the component
caption:
string Caption text for additional information
<D1Page
caption="Caption text"
/>Label
Caption text
Here is a detailed description of the component
headline:
string Headline text
<D1Page
headline="Headline text"
/>Headline text
Label
Here is a detailed description of the component
icon-palette:
boolean Sets icon color based on palette class
default value: false
icon-turn:
boolean Turns the icon
default value: false
<D1Page
icon-turn
/>Label
Here is a detailed description of the component
D1Pagination
Description
Navigation component that manages page rendering, rows limits, and incremental content loaders. Connects with pagination buttons, drop-down menus, and text ranges to deliver premium data layouts.
Features ellipsis separators between middle range and edge pages, first/last quick jumps, and customizable menu option sets (menuRows). Operates with high responsive fidelity and integrates smoothly with standard loaders.
Supports two accumulative loading modes: showMore appends the next page of records below the current list; showMorePrev prepends an earlier page above — used when the user arrives at a non-first offset via deep link or page reload. Both are implemented as separate Pagination instances sharing the same reactive page state.
Controlled by count and v-model bindings: v-model:value for the current active page, and v-model:rows for the rows-per-page limit. Uses native events: more, morePrev, rows, click, and their lite variants.
<D1Pagination
count="100"
menuRows="[10,25,50,100]"
rows="10"
value="3"
ends="1"
hideIfOne
showEnds
showInfo
showMore
visible="3"
/>Emits type PaginationEmits
Expose interface PaginationExpose
Slots interface PaginationSlots
Props type PaginationProps
Enumeration of some properties
count:
number | string Total item count
menu-rows:
number[] Option list for rows count select
rows:
number | string Number of rows per page
value:
number | string Current page number
default value: 1
adaptive:
lineAlways | lineSm | lineMd | lineLg | lineXl | line2xl Controls adaptive display behavior for different screen sizes and media queries
default value: lineMd
adaptive-more:
lineAlways | lineSm | lineMd | lineLg | lineXl | line2xl Whether to enable adaptive mode for show more button
default value: lineLg
adaptive-more-prev:
lineAlways | lineSm | lineMd | lineLg | lineXl | line2xl Whether to enable adaptive mode for show previous button
default value: lineLg
ellipsis:
string Ellipsis text separator
default value: ...
ends:
number Number of buttons for the first and last pages
default value: 1
hide-if-one:
boolean Whether to hide pagination if only one page exists
default value: true
show-arrows:
boolean Whether to show the next and back buttons
default value: true
show-ends:
boolean Whether to show the first and last page buttons as numbers and ellipsis
default value: false
show-first-last:
boolean Whether to show the first and last page buttons
default value: true
show-info:
boolean Whether to show page range information
default value: false
show-more:
boolean Whether to show "Show more" button
default value: false
show-more-prev:
boolean Whether to show "Show previous" button
default value: false
show-pagination:
boolean Whether to show the page navigation buttons
default value: true
show-rows-per-page-label:
boolean Whether to show the text rows per page
default value: true
visible:
number Number of visible page links
default value: 3
D1Progress
Demo
<div :class="classDemo.item" style="position: relative; width: 64px; height: 40px;" > <D1Progress v-bind="args"/> </div>
Description
Status indicator for ongoing processes, supporting both linear and circular visual styles. Capable of representing determinate (known percentage) and indeterminate (loading) states with customizable delays for showing/hiding.
Features horizontal bars (linear) and spinner rings (circular) with multiple indeterminate animation types. Includes advanced positioning (top, bottom, static), dense styling for compact UIs, and a point mode for minimal pulsating indicators.
Controlled via the visible, value, and indeterminate props, with support for custom min/max bounds. Use for page-level loading bars, button action feedback, or inline file upload progress.
<D1Progress
visible
/>Emits type ProgressEmits
Expose interface ProgressExpose
Slots interface ProgressSlots
Props type ProgressProps
Enumeration of some properties
visible:
boolean Controls the visibility of the progress indicator
default value: false
circular:
boolean Enables circular progress indicator display
default value: false
<D1Progress
circular
/>dense:
boolean Enables compact display variant
default value: false
<D1Progress
dense
/>indeterminate:
type1 | type2 | type3 Type of indeterminate progress animation
default value: type1
inverse:
boolean Inverts component colors
default value: false
<D1Progress
inverse
/>linear:
boolean Enables linear progress bar display
default value: true
palette:
red | orange | amber | yellow | lime | green | emerald | teal | cyan | sky | blue | indigo | violet | purple | fuchsia | pink | rose | slate | gray | zinc | neutral | stone | black | white Sets a color palette for the element
<D1Progress
palette="red"
/> <D1Progress
palette="orange"
/> <D1Progress
palette="amber"
/> <D1Progress
palette="yellow"
/> <D1Progress
palette="lime"
/> <D1Progress
palette="green"
/> <D1Progress
palette="emerald"
/> <D1Progress
palette="teal"
/> <D1Progress
palette="cyan"
/> <D1Progress
palette="sky"
/> <D1Progress
palette="blue"
/> <D1Progress
palette="indigo"
/> <D1Progress
palette="violet"
/> <D1Progress
palette="purple"
/> <D1Progress
palette="fuchsia"
/> <D1Progress
palette="pink"
/> <D1Progress
palette="rose"
/> <D1Progress
palette="slate"
/> <D1Progress
palette="gray"
/> <D1Progress
palette="zinc"
/> <D1Progress
palette="neutral"
/> <D1Progress
palette="stone"
/> <D1Progress
palette="black"
/> <D1Progress
palette="white"
/>point:
boolean Adds a point at the end of the progress indicator
default value: false
<D1Progress
point
/>position:
top | bottom | static Position of the progress indicator
default value: top
<D1Progress
position="top"
/> <D1Progress
position="bottom"
/> <D1Progress
position="static"
/>size:
sm | md | lg Sets component size
default value: md
<D1Progress
size="sm"
/> <D1Progress
size="md"
/> <D1Progress
size="lg"
/>D1Radio
Description
Form control component for single choice selection. Allows users to select one option from a mutually exclusive set.
Inherits all features from Checkbox but optimized for radio selection behavior. Includes support for labels, descriptions, validation, and loading states.
Controlled via v-model and emits @input/@change events.
<D1Radio
description="Here is a detailed description of the component"
helperMessage="This is a helpful message"
label="Label"
counter="25"
maxlength="100"
name="name"
/>Emits type RadioEmits
Expose interface RadioExpose
Slots interface RadioSlots
Props type RadioProps
Enumeration of some properties
disabled:
boolean Sets the element to an inactive state
default value: false
<D1Radio
disabled
/>focus:
boolean Visual focus state
default value: false
<D1Radio
focus
/>loading:
boolean | ConstrBind<ProgressProps> Sets the element to a loading state
<D1Radio
loading
/>readonly:
boolean Read-only state of the element
default value: false
selected:
string The value that determines whether the radio is selected (for groups)
indeterminate:
boolean Sets the indeterminate state
default value: false
<D1Radio
indeterminate value
/>value:
any Indicates whether the radio is selected
<D1Radio
value
/>placeholder:
string Placeholder text shown when the input is empty
<D1Radio
placeholder="Placeholder text"
/>validation-message:
string Error or validation message text
<D1Radio
validation-message="Validation message"
/>counter:
number | string Current character count
counter-show:
boolean Shows the counter-element
default value: false
<D1Radio
counter-show
/>counter-template:
string Custom display template for the counter-component
<D1Radio
counter-template="counter: [c], max: [m]" counterShow
/>required:
boolean Marks the field as required and shows the required indicator
default value: false
<D1Radio
required
/>adaptive:
rightAlways | rightSm | rightMd | rightLg | rightXl | right2xl Controls adaptive display behavior for different screen sizes and media queries
block:
boolean Enables block mode (component expands to full width)
default value: true
container:
rightSm | rightMd | rightLg | rightXl | right2xl Controls container‑based layout behavior with adaptive width constraints
has-html-code:
boolean Whether the message can contain HTML code
default value: false
is-skeleton:
boolean Displays the component in skeleton mode
default value: false
item-center:
boolean Centers items inside the component
default value: true
<D1Radio
item-center itemCenter="false"
/>D1Section
Demo
<div :class="classDemo.item">
<D1Section v-bind="args">
Content of the section.
</D1Section>
</div>Description
Structural component used to divide a page into distinct thematic areas, serving as a semantic alias for the Block component. Provides a standardized header structure for grouping related content within a coherent layout.
Features a flexible header with support for icons, labels (titles), captions, and trailing action areas. Inherits all layout and styling capabilities from the Block component, including support for custom semantic tags (defaulting to <D1Section>) and high-level category headlines.
Controlled via headline, label, and icon props, with dedicated slots for primary content and secondary actions. Use to logically organize and category-label information within the flow of a Page or complex Dashboard.
<D1Section
description="Here is a detailed description of the component"
label="Label"
icon="home"
/>Label
Here is a detailed description of the component
Emits type SectionEmits
Expose interface SectionExpose
Slots interface SectionSlots
Props type SectionProps
Enumeration of some properties
selected:
boolean Selected state of the element
default value: false
<D1Section
selected
/>Label
Here is a detailed description of the component
caption:
string Caption text for additional information
<D1Section
caption="Caption text"
/>Label
Caption text
Here is a detailed description of the component
headline:
string Headline text
<D1Section
headline="Headline text"
/>Headline text
Label
Here is a detailed description of the component
icon-palette:
boolean Sets icon color based on palette class
default value: false
icon-turn:
boolean Turns the icon
default value: false
<D1Section
icon-turn
/>Label
Here is a detailed description of the component
D1Select
Description
High-level form control that combines a trigger field, a dropdown menu, and a structured value display (Chips or text). Designed for choosing single or multiple items from static lists or dynamic datasets with built-in search and filtering.
Features support for AJAX data loading with caching, multiple selection with chips, and an editable combobox mode (editValue). Includes integrated validation, keyboard navigation, and full Field component functionality (labels, icons, and state messages).
Controlled via the option prop for data and v-model for state tracking, supporting custom key mapping (keyLabel/keyValue). Use for user selection, category filtering, or complex multi-select interfaces requiring real-time search.
<D1Select
option="[{"label":"Home","value":"home","icon":"home"},{"label":"Dashboard","value":"dashboard","icon":"dashboard"},{"label":"Profile","value":"profile","icon":"person"},{"label":"Settings","value":"settings","icon":"settings"},{"label":"Notifications","value":"notifications","icon":"notifications"},{"label":"Messages","value":"messages","icon":"message"},{"label":"Calendar","value":"calendar","icon":"calendar_today"},{"label":"Tasks","value":"tasks","icon":"task"},{"label":"Projects","value":"projects","icon":"work"},{"label":"Team","value":"team","icon":"group"},{"label":"Documents","value":"documents","icon":"description"}]"
helperMessage="This is a helpful message"
label="Label"
icon="home"
name="name"
/>Label
This is a helpful message
Emits type SelectEmits
Expose interface SelectExpose
Slots interface SelectSlots
Props type SelectProps
Enumeration of some properties
disabled:
boolean Sets the element to an inactive state
default value: false
<D1Select
disabled
/>Label
focus:
boolean Visual focus state
default value: false
<D1Select
focus
/>Label
This is a helpful message
loading:
boolean | ConstrBind<ProgressProps> Sets the element to a loading state
<D1Select
loading
/>Label
This is a helpful message
readonly:
boolean Read-only state of the element
default value: false
selected:
boolean Selected state of the element
default value: false
<D1Select
selected
/>Label
This is a helpful message
option:
array | object | function List of options to display in the dropdown - accepts array, object, or function returning options
caption:
string Caption text for additional information
<D1Select
caption="Caption text"
/>Label
Caption text
This is a helpful message
placeholder:
string Placeholder text shown when the input is empty
<D1Select
placeholder="Placeholder text"
/>Placeholder text
LabelThis is a helpful message
prefix:
string Prefix text displayed before the main content
<D1Select
prefix="Prefix text"
/>Label
Prefix text
This is a helpful message
suffix:
string Suffix text displayed after the main content
<D1Select
suffix="Suffix text" value="Value"
/>Label
Suffix text
This is a helpful message
validation-message:
string Error or validation message text
<D1Select
validation-message="Validation message"
/>Label
This is a helpful message
Validation message
counter-show:
boolean Shows the counter-element
default value: false
<D1Select
counter-show
/>Label
This is a helpful message
0icon-palette:
boolean Sets icon color based on palette class
default value: false
icon-trailing:
string | File Value of the trailing icon
<D1Select
icon-trailing="settings"
/>Label
This is a helpful message
icon-trailing-palette:
boolean Sets trailing icon color based on palette class
default value: false
icon-turn:
boolean Turns the icon
default value: false
<D1Select
icon-turn
/>Label
This is a helpful message
arrow:
none | auto | carousel | stepper Arrow controls type for numeric input (auto, carousel, stepper, none)
<D1Select
arrow="none"
/>Label
This is a helpful message
<D1Select
arrow="auto"
/>Label
This is a helpful message
<D1Select
arrow="carousel"
/>Label
This is a helpful message
<D1Select
arrow="stepper"
/>Label
This is a helpful message
arrow-align:
center | right | left Sets alignment position of arrow buttons within the field
<D1Select
arrow-align="center" arrow="carousel" arrowCarousel
/>Label
This is a helpful message
<D1Select
arrow-align="right" arrow="carousel" arrowCarousel
/>Label
This is a helpful message
<D1Select
arrow-align="left" arrow="carousel" arrowCarousel
/>Label
This is a helpful message
arrow-step:
number | string Step size for input arrows (type="number" only) when using increment/decrement buttons
edit-value:
boolean Allows editing the selected value directly inside the input when not in multiple mode
default value: false
multiple:
boolean Enables multiple selection mode
default value: false
<D1Select
multiple
/>Label
This is a helpful message
required:
boolean Marks the field as required and shows the required indicator
default value: false
<D1Select
required
/>Label
This is a helpful message
align:
center | right | left General alignment depending on component semantics
<D1Select
align="center"
/>Label
This is a helpful message
<D1Select
align="right"
/>Label
This is a helpful message
<D1Select
align="left"
/>Label
This is a helpful message
selection-style:
checkbox | none | radio | auto | checkmark Selection style
<D1Select
selection-style="checkbox" selected="task-management"
/>Label
This is a helpful message
<D1Select
selection-style="none" selected="task-management"
/>Label
This is a helpful message
<D1Select
selection-style="radio" selected="task-management"
/>Label
This is a helpful message
<D1Select
selection-style="auto" selected="task-management"
/>Label
This is a helpful message
<D1Select
selection-style="checkmark" selected="task-management"
/>Label
This is a helpful message
cancel:
none | auto | always Cancel button mode: auto (show only if cancelShow + active, no arrows) or always (force unless disabled/readonly or arrows).
<D1Select
cancel="none" value="Value"
/>Label
This is a helpful message
<D1Select
cancel="auto" value="Value"
/>Label
This is a helpful message
<D1Select
cancel="always" value="Value"
/>Label
This is a helpful message
filter-mode:
boolean Enables filter mode for search (hides non-matching items)
default value: false
has-html-code:
boolean Whether the message can contain HTML code
default value: false
hide-list:
boolean Hides the internal List part of the Menu; shows only header/toolbar and other slots.
default value: false
is-skeleton:
boolean Displays the component in skeleton mode
default value: false
show-search:
boolean Whether to show the search field
default value: false
D1SelectableArea
Demo
<div :class="classDemo.item">
<D1SelectableArea :selected="['1', '2']" v-bind="args">
<template #default="{ className, classClick, onClick }">
<div v-for="item in 5" :key="item" :class="[className, classClick]" :data-value="item" @click="onClick">
Item {{ item }}
</div>
</template>
</D1SelectableArea>
</div>Description
Wrapper component for selecting multiple child elements. Supports lasso selection (drag to select), shift-click for ranges, and meta/ctrl-click for individual toggling.
Elements must be rendered inside the default slot, include the class from `slotProps.className`, bind `@click="slotProps.onClick"`, and define a `data-value` attribute.
Selection state can be tracked via `selected` prop and `@selected` event.
Use `active` prop for continuous selection without modifier keys.
<D1SelectableArea
/> Item 1
Item 2
Item 3
Item 4
Item 5
Emits type SelectableAreaEmits
Expose interface SelectableAreaExpose
Slots interface SelectableAreaSlots
Props type SelectableAreaProps
Enumeration of some properties
active:
boolean Active status for continuous selection
default value: false
<D1SelectableArea
active
/> Item 1
Item 2
Item 3
Item 4
Item 5
disabled:
boolean Sets the element to an inactive state
default value: false
<D1SelectableArea
disabled
/> Item 1
Item 2
Item 3
Item 4
Item 5
selected:
string | string[] Array or string of currently selected values
D1Skeleton
Description
Structural layout utility designed to display animated loading placeholders (ghost versions) for UI elements. Improves perceived performance and prevents Cumulative Layout Shift (CLS) by reserving space for incoming content.
Features a logic-sharing mechanism via provide/inject that allows child components (Field, Image, Chip) to automatically switch to their skeleton states without individual props. Exposes specialized CSS classes through slot props for styling raw HTML elements as text lines, backgrounds, or borders.
Controlled via the active prop to toggle the global loading state and accessibility Busy/Live attributes. Use as a wrapper for sections or entire pages during data fetching to maintain structural integrity and a high-quality user experience.
<D1Skeleton
/>Emits type SkeletonEmits
Expose interface SkeletonExpose
Slots interface SkeletonSlots
Props type SkeletonProps
Enumeration of some properties
active:
boolean Sets the element to an active state
default value: false
D1SnackbarItem
Description
Visual representation element for a single notification message, typically orchestrated by the Snackbar component. Designed for concise informational alerts, success messages, or quick-action prompts.
Features a flexible internal structure with support for labels, detailed descriptions, and material-symbol icons (leading/trailing). Includes integrated action button support, a mandatory close button, and support for rendering custom HTML or Vue components as message bodies.
Controlled via simple content props or an actions-list array for complex button configurations. Use as the base message unit for all system feedback, ensuring high visibility and accessibility through automatic ARIA status role implementation.
<D1SnackbarItem
button="Go"
description="Here is a detailed description of the component"
label="Label"
actionsList="[{"label":"Undo"}]"
actionsSecondary="[{"icon":"edit"}]"
icon="home"
/>Emits type SnackbarItemEmits
Expose interface SnackbarItemExpose
Slots interface SnackbarItemSlots
Props type SnackbarItemProps
Enumeration of some properties
error:
boolean Sets the element to an error state
default value: false
<D1SnackbarItem
error
/>selected:
boolean Selected state of the element
default value: false
<D1SnackbarItem
selected
/>success:
boolean Sets the element to a success state
default value: false
<D1SnackbarItem
success
/>button:
string | number | ConstrBind<ButtonPropsBasic> | null Button configuration (string for label, number, or full button props object)
html:
string HTML content to be rendered
icon-palette:
boolean Sets icon color based on palette class
default value: false
icon-trailing:
string | File Value of the trailing icon
<D1SnackbarItem
icon-trailing="settings"
/>icon-trailing-palette:
boolean Sets trailing icon color based on palette class
default value: false
icon-turn:
boolean Turns the icon
default value: false
<D1SnackbarItem
icon-turn
/>close-button:
boolean Shows a close button in the header
default value: true
<D1SnackbarItem
close-button
/>palette:
red | orange | amber | yellow | lime | green | emerald | teal | cyan | sky | blue | indigo | violet | purple | fuchsia | pink | rose | slate | gray | zinc | neutral | stone | black | white Sets a color palette for the element
<D1SnackbarItem
palette="red"
/> <D1SnackbarItem
palette="orange"
/> <D1SnackbarItem
palette="amber"
/> <D1SnackbarItem
palette="yellow"
/> <D1SnackbarItem
palette="lime"
/> <D1SnackbarItem
palette="green"
/> <D1SnackbarItem
palette="emerald"
/> <D1SnackbarItem
palette="teal"
/> <D1SnackbarItem
palette="cyan"
/> <D1SnackbarItem
palette="sky"
/> <D1SnackbarItem
palette="blue"
/> <D1SnackbarItem
palette="indigo"
/> <D1SnackbarItem
palette="violet"
/> <D1SnackbarItem
palette="purple"
/> <D1SnackbarItem
palette="fuchsia"
/> <D1SnackbarItem
palette="pink"
/> <D1SnackbarItem
palette="rose"
/> <D1SnackbarItem
palette="slate"
/> <D1SnackbarItem
palette="gray"
/> <D1SnackbarItem
palette="zinc"
/> <D1SnackbarItem
palette="neutral"
/> <D1SnackbarItem
palette="stone"
/> <D1SnackbarItem
palette="black"
/> <D1SnackbarItem
palette="white"
/>D1Switch
Description
Form control component representing a physical switch to toggle settings or binary choices on/off.
Inherits behavior and accessibility features from Checkbox but provides a distinct sliding track visual representation.
Supports primary labels, details descriptions, custom track customization, built-in validation states, loading states, and adaptive design layouts.
Controlled via v-model and emits @input/@change events. Use for instant toggles of features or preferences.
<D1Switch
description="Here is a detailed description of the component"
helperMessage="This is a helpful message"
label="Label"
counter="25"
maxlength="100"
name="name"
/>Emits type SwitchEmits
Expose interface SwitchExpose
Slots interface SwitchSlots
Props type SwitchProps
Enumeration of some properties
disabled:
boolean Sets the element to an inactive state
default value: false
<D1Switch
disabled
/>focus:
boolean Visual focus state
default value: false
<D1Switch
focus
/>loading:
boolean | ConstrBind<ProgressPropsBasic> Sets the element to a loading state
<D1Switch
loading
/>readonly:
boolean Read-only state of the element
default value: false
selected:
string The value that determines whether the checkbox is selected (for groups)
indeterminate:
boolean Sets the indeterminate state
default value: false
<D1Switch
indeterminate value
/>value:
any Value of the checkbox
<D1Switch
value
/>placeholder:
string Placeholder text shown when the input is empty
<D1Switch
placeholder="Placeholder text"
/>validation-message:
string Error or validation message text
<D1Switch
validation-message="Validation message"
/>counter:
number | string Current character count
counter-show:
boolean Shows the counter-element
default value: false
<D1Switch
counter-show
/>counter-template:
string Custom display template for the counter-component
<D1Switch
counter-template="counter: [c], max: [m]" counterShow
/>required:
boolean Marks the field as required and shows the required indicator
default value: false
<D1Switch
required
/>adaptive:
rightAlways | rightSm | rightMd | rightLg | rightXl | right2xl Controls adaptive display behavior for different screen sizes and media queries
block:
boolean Enables block mode (component expands to full width)
default value: true
container:
rightSm | rightMd | rightLg | rightXl | right2xl Controls container‑based layout behavior with adaptive width constraints
has-html-code:
boolean Whether the message can contain HTML code
default value: false
is-skeleton:
boolean Displays the component in skeleton mode
default value: false
item-center:
boolean Centers items inside the component
default value: true
<D1Switch
item-center itemCenter="false"
/>D1TabItem
Description
Foundational interactive building block for multi-item navigation structures like tabs, list menus, and sidebars. Encapsulates a label, optional icons, and status indicators (badges) into a single semantic unit with integrated state management.
Features built-in support for selected, disabled, and loading (skeleton) states, along with automated navigation logic for href and router-link. Includes a Material-style ripple effect for high-polish click feedback and flexible tag rendering to support various HTML roles (button, a, li).
Controlled via label, icon, and badge props, with v-model or selected prop integration. Use within Tabs or List components to create cohesive, accessible navigation interfaces with consistent visual affordance and spatial organization.
<D1TabItem
label="Label"
icon="home"
/>Emits type TabItemEmits
Expose interface TabItemExpose
Slots interface TabItemSlots
Props type TabItemProps
Enumeration of some properties
disabled:
boolean Sets the element to an inactive state
default value: false
<D1TabItem
disabled
/>focus:
boolean Visual focus state
default value: false
<D1TabItem
focus
/>readonly:
boolean Read-only state of the element
default value: false
selected:
boolean Selected state of the element
default value: false
<D1TabItem
selected
/>badge:
string Badge text or value to display
<D1TabItem
badge="123"
/>badge-dot:
boolean Display badge as a dot indicator
default value: false
<D1TabItem
badge-dot
/>icon-palette:
boolean Sets icon color based on palette class
default value: false
icon-turn:
boolean Turns the icon
default value: false
<D1TabItem
icon-turn
/>adaptive:
iconAlways | auto | iconSm | iconMd | iconLg | iconXl | icon2xl | fullSm | fullMd | fullLg | fullXl | full2xl Controls adaptive display behavior for different screen sizes and media queries
container:
iconSm | iconMd | iconLg | iconXl | icon2xl | fullSm | fullMd | fullLg | fullXl | full2xl Controls container‑based layout behavior with adaptive width constraints
is-skeleton:
boolean Displays the component in skeleton mode
default value: false
D1Tabs
Description
High-level compound component that integrates TabsNavigation and MotionAxis to provide a complete, animated tabbed interface. Simplifies the creation of multi-view layouts where each section is logically separated and visually transitioned.
Features automated coordination between the navigation bar and the content area, including direction-aware sliding animations and lazy loading. Supports dynamic tab lists, centralized state management via v-model, and modular content distribution through named slots matching tab values.
Controlled via the tabs prop for structure and v-model:selected for active state. Use for main dashboard views, complex settings panels, or any multi-step interface requiring a polished, interactive navigation experience with high performance.
<D1Tabs
selected="home"
tabs="[{"label":"Home","value":"home"},{"label":"Profile","value":"profile"},{"label":"Messages","value":"messages"},{"label":"Settings","value":"settings"},{"label":"Dashboard","value":"dashboard"},{"label":"Notifications","value":"notifications"}]"
/>Emits type TabsEmits
Expose interface TabsExpose
Slots interface TabsSlots
Props type TabsProps
Enumeration of some properties
selected:
string | number Selected value
tabs:
ListRecord<TabItemProps> | ConstrBind<TabsNavigationProps> Tabs list or TabsNavigation properties
D1TextDescription
Description
A utility component for displaying textual descriptions. Supports description slot injection, custom HTML tags via "tag" property (defaults to "span"), and clean semantic output. Integrated with DescriptionInclude for standardized description rendering.
<D1TextDescription
description="Here is a detailed description of the component"
/>Here is a detailed description of the component
Emits type TextDescriptionEmits
Expose interface TextDescriptionExpose
Slots interface TextDescriptionSlots
Props type TextDescriptionProps
Enumeration of some properties
size:
xs | sm | md Sets component size
default value: md
<D1TextDescription
size="xs"
/>Here is a detailed description of the component
<D1TextDescription
size="sm"
/>Here is a detailed description of the component
<D1TextDescription
size="md"
/>Here is a detailed description of the component
D1TextLabel
Description
A utility component for displaying text and labels. Supports slot injection, custom HTML tags via "tag" property (defaults to "span"), and clean semantic output. Integrated with LabelInclude for standardized text rendering.
<D1TextLabel
label="Label"
/>Label
Emits type TextLabelEmits
Expose interface TextLabelExpose
Slots interface TextLabelSlots
Props type TextLabelProps
Enumeration of some properties
size:
xs | sm | md | lg Sets component size
default value: md
<D1TextLabel
size="xs"
/>Label
<D1TextLabel
size="sm"
/>Label
<D1TextLabel
size="md"
/>Label
<D1TextLabel
size="lg"
/>Label
D1Textarea
Description
Versatile multi-line text input control with automated spatial management and comprehensive validation support. Designed for feedback forms, detailed descriptions, and any scenario requiring a flexible, high-volume data entry area.
Features an intelligent autosize engine that grows/shrinks dynamically based on content, along with character counter integration and Material symbol icons (leading/trailing). Inherits full Field component functionality including floating labels, helper messages, and reactive error states.
Controlled via the v-model for content and autosize prop for height behavior. Use for user biographies, multi-row comments, or complex data entry views where standard single-line inputs lack sufficient capacity.
<D1Textarea
helperMessage="This is a helpful message"
label="Label"
icon="home"
maxlength="100"
name="name"
/>Label
This is a helpful message
Emits type TextareaEmits
Expose interface TextareaExpose
Slots interface TextareaSlots
Props type TextareaProps
Enumeration of some properties
disabled:
boolean Sets the element to an inactive state
default value: false
<D1Textarea
disabled
/>Label
focus:
boolean Visual focus state
default value: false
<D1Textarea
focus
/>Label
This is a helpful message
loading:
boolean | ConstrBind<ProgressProps> Sets the element to a loading state
<D1Textarea
loading
/>Label
This is a helpful message
readonly:
boolean Read-only state of the element
default value: false
selected:
boolean Selected state of the element
default value: false
<D1Textarea
selected
/>Label
This is a helpful message
caption:
string Caption text for additional information
<D1Textarea
caption="Caption text"
/>Label
Caption text
This is a helpful message
placeholder:
string Placeholder text shown when the input is empty
<D1Textarea
placeholder="Placeholder text"
/>Label
This is a helpful message
prefix:
string Prefix text displayed before the main content
<D1Textarea
prefix="Prefix text"
/>Label
Prefix text
This is a helpful message
suffix:
string Suffix text displayed after the main content
<D1Textarea
suffix="Suffix text" value="Value"
/>Label
Suffix text
This is a helpful message
validation-message:
string Error or validation message text
<D1Textarea
validation-message="Validation message"
/>Label
This is a helpful message
Validation message
counter-show:
boolean Shows the counter-element
default value: false
<D1Textarea
counter-show
/>Label
This is a helpful message
0 / 100icon-palette:
boolean Sets icon color based on palette class
default value: false
icon-trailing:
string | File Value of the trailing icon
<D1Textarea
icon-trailing="settings"
/>Label
This is a helpful message
icon-trailing-palette:
boolean Sets trailing icon color based on palette class
default value: false
icon-turn:
boolean Turns the icon
default value: false
<D1Textarea
icon-turn
/>Label
This is a helpful message
required:
boolean Marks the field as required and shows the required indicator
default value: false
<D1Textarea
required
/>Label
This is a helpful message
align:
center | right | left General alignment depending on component semantics
<D1Textarea
align="center"
/>Label
This is a helpful message
<D1Textarea
align="right"
/>Label
This is a helpful message
<D1Textarea
align="left"
/>Label
This is a helpful message
autosize:
boolean Automatically adjusts the component size based on content
default value: true
cancel:
auto | always | none Cancel button mode: auto (show only if cancelShow + active, no arrows) or always (force unless disabled/readonly or arrows).
default value: none
<D1Textarea
cancel="auto" value="Value"
/>Label
This is a helpful message
<D1Textarea
cancel="always" value="Value"
/>Label
This is a helpful message
<D1Textarea
cancel="none" value="Value"
/>Label
This is a helpful message
has-html-code:
boolean Whether the message can contain HTML code
default value: false
is-skeleton:
boolean Displays the component in skeleton mode
default value: false
D1Tooltip
Demo
<div :class="classDemo.item">
<D1Tooltip open embedded v-bind="args">
<template #control="{ binds }">
<button v-bind="binds">Hover me</button>
</template>
</D1Tooltip>
</div>Description
Contextual informational overlay that appears when a user interacts with a trigger element via hover or focus. Designed for auxiliary labels, helper text, and secondary descriptive titles that enhance functional awareness without crowding the UI.
Features automated high-precision positioning (top, bottom, left, right) with viewport collision detection and customizable delay/interactive behaviors. Includes a built-in arrow indicator and requires trigger binding via the #control slot's binds object for proper event synchronization.
Controlled via simple content props (label, description) and supports complex HTML structures within the #default slot. Use to provide non-critical supplemental information, keyboard shortcuts, or detailed affordance for icon-only buttons.
<D1Tooltip
description="Here is a detailed description of the component"
label="Label"
/>Emits type TooltipEmits
Expose interface TooltipExpose
Slots interface TooltipSlots
Props type TooltipProps
Enumeration of some properties
disabled:
boolean Sets the element to an inactive state
default value: false
<D1Tooltip
disabled
/>delay:
number Delay before showing the tooltip
default value: 64
delay-hide:
number Delay before hiding the tooltip
default value: 0
indent:
number Indent from the element
default value: 4
max-width:
sm | md | lg Sets the maximum width of the component
default value: md
<D1Tooltip
max-width="sm"
/> <D1Tooltip
max-width="md"
/> <D1Tooltip
max-width="lg"
/>top:
boolean Displaying the tooltip on top of the element
default value: false
in-dom:
boolean Indicates whether the window is in the DOM
default value: false
interactive:
boolean Enables interactive mode for the component
default value: true