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 | undefined Enables visual divider between elements
default value: true
auto-close:
boolean | undefined Closes the window/menu when clicking inside the content area
default value: true
click-open:
boolean | undefined 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 | undefined Sets the element to an inactive state
<D1ActionSheet
disabled
/>bars-back-hide:
boolean | undefined 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 | undefined Closes the window/menu when clicking inside the content area
touch-close:
boolean | undefined 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:
sm | md | lg | ySm | yMd | yLg | none Sets internal spacing around the content. If `paddingByIndent` is enabled, the `padding` value is ignored.
<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"
/> <D1Actions
padding="none" paddingByIndent="false"
/>padding-by-indent:
boolean | undefined Applies horizontal padding based on grid indent values
default value: true
wrap:
boolean Controls text wrapping behavior
default value: false
<D1Actions
wrap
/>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
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
inverse:
boolean | undefined Inverts component colors
<D1Arrow
inverse
/>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 | undefined Selected state of the element
<D1Badge
selected
/>Label
icon-palette:
boolean | undefined Sets icon color based on palette class
icon-turn:
boolean | undefined Turns the icon
<D1Badge
icon-turn
/>Label
dot:
boolean | undefined Displays the component as a dot indicator
<D1Badge
dot
/>outline:
boolean | undefined Outline variant of the badge with a transparent background and border
<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 | undefined Primary color variant for the badge with high contrast and emphasis
default value: true
<D1Badge
primary
/>Label
secondary:
boolean | undefined Secondary color variant for the badge with moderate contrast
<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 | undefined Whether to format values before displaying
<D1Badge
formatting label="1234567"
/>1,234,567
horizontal:
right | center | left Sets horizontal alignment of elements
default value: right
<D1Badge
horizontal="right" overlap="rectangular"
/>Label
<D1Badge
horizontal="center" 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 | undefined Enables action mode
<D1Bars
action
/>back-button:
ConstrBind<ButtonProps> | undefined 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 | undefined Applies horizontal padding based on grid indent values
default value: true
is-skeleton:
boolean | undefined Displays the component in skeleton mode
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 | undefined Selected state of the element
<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 | undefined Sets icon color based on palette class
icon-turn:
boolean | undefined Turns the icon
<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 | undefined Sets the element to an inactive state
<D1Button
disabled
/>focus:
boolean | undefined Visual focus state
<D1Button
focus
/>loading:
boolean | ConstrBind<ProgressProps> | undefined Sets the element to a loading state
<D1Button
loading
/>readonly:
boolean | undefined Read-only state of the element
selected:
boolean | undefined Selected state of the element
<D1Button
selected
/>icon-palette:
boolean | undefined Sets icon color based on palette class
icon-trailing:
string | File Value of the trailing icon
<D1Button
icon-trailing="settings"
/>icon-trailing-palette:
boolean | undefined Sets trailing icon color based on palette class
icon-turn:
boolean | undefined Turns the icon
<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 | undefined Indicates whether a minimum width should be applied to the label
default value: true
inverse:
boolean | undefined Inverts component colors
<D1Button
inverse
/>outline:
boolean | undefined Outline button style
<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 | undefined Primary button style
default value: true
<D1Button
primary
/>rounded-full:
boolean | undefined Makes the component fully rounded (circular)
<D1Button
rounded-full
/>secondary:
boolean | undefined Secondary button style
<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 | undefined Text button style
<D1Button
text
/>text-align:
left | center | right Sets text alignment within the element
is-skeleton:
boolean | undefined Displays the component in skeleton mode
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 | undefined Sets the element to an inactive state
<D1Cell
disabled
/>Label
Here is a detailed description of the component
focus:
boolean | undefined Visual focus state
<D1Cell
focus
/>Label
Here is a detailed description of the component
loading:
boolean | ConstrBind<ProgressProps> | undefined Sets the element to a loading state
<D1Cell
loading
/>Label
Here is a detailed description of the component
readonly:
boolean | undefined Read-only state of the element
selected:
boolean | undefined Selected state of the element
<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 | undefined Sets icon color based on palette class
icon-top:
boolean | undefined Aligns icon to the top of the container
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 | undefined Sets trailing icon color based on palette class
icon-turn:
boolean | undefined Turns the icon
<D1Cell
icon-turn
/>Label
Here is a detailed description of the component
divider:
boolean | undefined 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:
sm | md | lg | ySm | yMd | yLg | none Sets internal spacing around the content. If `paddingByIndent` is enabled, the `padding` value is ignored.
default value: none
<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
<D1Cell
padding="none" paddingByIndent="false"
/>Label
Here is a detailed description of the component
padding-by-indent:
boolean | undefined Applies horizontal padding based on grid indent values
default value: true
is-skeleton:
boolean | undefined Displays the component in skeleton mode
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 | undefined Sets the element to an inactive state
<D1Checkbox
disabled
/>focus:
boolean | undefined Visual focus state
<D1Checkbox
focus
/>loading:
boolean | ConstrBind<ProgressProps> | undefined Sets the element to a loading state
<D1Checkbox
loading
/>readonly:
boolean | undefined Read-only state of the element
indeterminate:
boolean | undefined Sets the indeterminate state
<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 | undefined Shows the counter-element
<D1Checkbox
counter-show
/>counter-template:
string Custom display template for the counter-component
<D1Checkbox
counter-template="counter: [c], max: [m]" counterShow
/>required:
boolean | undefined Marks the field as required and shows the required indicator
<D1Checkbox
required
/>adaptive:
rightAlways | rightSm | rightMd | rightLg | rightXl | right2xl Controls adaptive display behavior for different screen sizes and media queries
block:
boolean | undefined 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
is-skeleton:
boolean | undefined Displays the component in skeleton mode
item-center:
boolean | undefined 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 | undefined Sets the element to an inactive state
<D1Chip
disabled
/>focus:
boolean | undefined Visual focus state
<D1Chip
focus
/>loading:
boolean | ConstrBind<ProgressProps> | undefined Sets the element to a loading state
<D1Chip
loading
/>readonly:
boolean | undefined Read-only state of the element
selected:
boolean | undefined Selected state of the element
<D1Chip
selected
/>icon-palette:
boolean | undefined Sets icon color based on palette class
icon-trailing:
string | File Value of the trailing icon
<D1Chip
icon-trailing="settings"
/>icon-trailing-palette:
boolean | undefined Sets trailing icon color based on palette class
icon-turn:
boolean | undefined Turns the icon
<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 | undefined Alternative visual appearance style
<D1Chip
assistive
/>container:
iconSm | iconMd | iconLg | iconXl | icon2xl | fullSm | fullMd | fullLg | fullXl | full2xl Controls container‑based layout behavior with adaptive width constraints
input:
boolean | undefined Input-style visual appearance
default value: true
<D1Chip
input
/>inverse:
boolean | undefined Inverts component colors
<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 | undefined Makes the component fully rounded (circular)
<D1Chip
rounded-full
/>size:
sm | md | lg Sets component size
default value: md
<D1Chip
size="sm"
/> <D1Chip
size="md"
/> <D1Chip
size="lg"
/>text-align:
left | center | right Sets text alignment within the element
is-skeleton:
boolean | undefined Displays the component in skeleton mode
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 | undefined 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 | undefined Array of chip items data. Contains the data for all chips to be rendered in the group.
icon-when-selected:
boolean | undefined Shows the icon only when the element is selected
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 | undefined Sets the element to an inactive state
<D1Dialog
disabled
/>error:
boolean | undefined Sets the element to an error state
<D1Dialog
error
/>success:
boolean | undefined Sets the element to a success state
<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 | undefined Hides the back button in the bars
default value: true
close-button:
boolean | undefined Shows a close button in the header
<D1Dialog
close-button
/>image-position:
top | left 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"
/>width:
sm | md | lg | auto Sets component width
default value: md
<D1Dialog
width="sm"
/> <D1Dialog
width="md"
/> <D1Dialog
width="lg"
/> <D1Dialog
width="auto"
/>auto-close:
boolean | undefined Closes the window/menu when clicking inside the content area
click-ok-and-close:
boolean | undefined Automatically closes the dialog when the OK button is clicked
default value: true
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 | undefined Selected state of the element
<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 | undefined Sets icon color based on palette class
icon-turn:
boolean | undefined Turns the icon
<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 | undefined Selected state of the element
<D1Header
selected
/>Label
caption:
string Caption text for additional information
<D1Header
caption="Caption text"
/>Label
Caption text
icon-palette:
boolean | undefined Sets icon color based on palette class
icon-turn:
boolean | undefined Turns the icon
<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"
/>flush:
boolean | undefined 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 | undefined Sets the icon to an active state
<D1Icon
active
/>disabled:
boolean | undefined Sets the element to an inactive state
<D1Icon
disabled
/>turn:
boolean | undefined Rotates the element by 180 degrees
<D1Icon
turn
/>icon:
string | File Value of the main icon
icon-active:
string | File Value of the active icon
as-palette:
boolean | undefined Sets color based on palette class; otherwise uses default color
circle:
boolean | undefined Makes the element circular
<D1Icon
circle overlay
/>inverse:
boolean | undefined Inverts component colors
<D1Icon
inverse
/>overlay:
boolean | undefined Adds background overlay to the component
<D1Icon
overlay
/>rect:
boolean | undefined Makes the element rectangular
<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 | undefined Makes the element square
default value: true
<D1Icon
square overlay
/>dir:
boolean | undefined Mirrors the component depending on a site direction (RTL/LTR)
is-skeleton:
boolean | undefined Displays the component in skeleton mode
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 | undefined Sets the element to an inactive state
<D1Image
disabled
/>turn:
boolean | undefined Rotates the element by 180 degrees
<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 | undefined Moves the image along the X-axis, accepts a string in % or px format
y:
string | number | undefined Moves the image along the Y-axis, accepts a string in % or px format
tag-img:
boolean | undefined Use the img tag instead of background image for better accessibility and SEO
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 | undefined Sets the element to an inactive state
<D1Input
disabled
/>Label
focus:
boolean | undefined Visual focus state
<D1Input
focus
/>Label
This is a helpful message
loading:
boolean | ConstrBind<ProgressProps> | undefined Sets the element to a loading state
<D1Input
loading
/>Label
This is a helpful message
readonly:
boolean | undefined Read-only state of the element
selected:
boolean | undefined Selected state of the element
<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 | undefined Shows the counter-element
<D1Input
counter-show
/>Label
This is a helpful message
0 / 100icon-palette:
boolean | undefined Sets icon color based on palette class
icon-trailing:
string | File Value of the trailing icon
<D1Input
icon-trailing="settings"
/>Label
This is a helpful message
icon-trailing-palette:
boolean | undefined Sets trailing icon color based on palette class
icon-turn:
boolean | undefined Turns the icon
<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 | undefined Marks the field as required and shows the required indicator
<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 | undefined Hide the currency symbol in the formatted value
<D1Input
currency-hide currency="USD" type="currency"
/>Label
This is a helpful message
is-skeleton:
boolean | undefined Displays the component in skeleton mode
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"}]"
/>Инструменты
Emits type ListEmits
Expose interface ListExpose
Slots interface ListSlots
Props type ListProps
Enumeration of some properties
disabled:
boolean | undefined Sets the element to an inactive state
<D1List
disabled
/>Инструменты
focus:
NumberOrStringOrBoolean | undefined Selected item for focus state. Defines which item should be visually focused in the list.
lite:
boolean | undefined Enable lightweight display mode. Reduces visual complexity by showing simplified item styling with minimal decorative elements.
<D1List
lite liteThreshold="4"
/>Инструменты
selected:
ListSelectedList | undefined 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> | undefined Array of list items data. Contains the data for all items to be rendered in the list.
divider:
boolean | undefined Enables visual divider between elements
filter-mode:
boolean | undefined Enables filter mode for search (hides non-matching items)
lite-threshold:
number | undefined 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.
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 | undefined Sets the element to an inactive state
<D1ListItem
disabled
/>focus:
boolean | undefined Visual focus state
<D1ListItem
focus
/>loading:
boolean | ConstrBind<ProgressProps> | undefined Sets the element to a loading state
<D1ListItem
loading
/>open:
boolean | undefined Visual open state of the list item
readonly:
boolean | undefined Read-only state of the element
selected:
boolean | undefined Selected state of the element
<D1ListItem
selected
/>badge:
string Badge text or value to display
<D1ListItem
badge="123"
/>badge-dot:
boolean | undefined Display badge as a dot indicator
<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 | undefined Sets icon color based on palette class
icon-top:
boolean | undefined Aligns icon to the top of the container
icon-trailing:
string | File Value of the trailing icon
<D1ListItem
icon-trailing="settings"
/>icon-trailing-palette:
boolean | undefined Sets trailing icon color based on palette class
icon-turn:
boolean | undefined Turns the icon
<D1ListItem
icon-turn
/>dense:
boolean | undefined Enables compact display variant
<D1ListItem
dense
/>divider:
boolean | undefined Enables visual divider between elements
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"
/>size:
sm | md | lg Sets component size
default value: md
<D1ListItem
size="sm"
/> <D1ListItem
size="md"
/> <D1ListItem
size="lg"
/>filter-mode:
boolean | undefined Enables filter mode for search (hides non-matching items)
is-skeleton:
boolean | undefined Displays the component in skeleton mode
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 | undefined Sets the element to an inactive state
<D1Menu
disabled
/>selected:
ListSelectedList | undefined 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> | undefined Array of list items data. Contains the data for all items to be rendered in the list.
request:
ApiFetch | undefined Custom request handler configuration for fetching menu data.
bars-back-hide:
boolean | undefined 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
auto-close:
boolean | undefined Closes the window/menu when clicking inside the content area
default value: true
filter-mode:
boolean | undefined Enables filter mode for search (hides non-matching items)
hide-list:
boolean | undefined Hides the internal List part of the Menu; shows only header/toolbar and other slots.
lite-threshold:
number | undefined 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
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 | undefined Sets the element to an inactive state
<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 | undefined Hides the back button in the bars
default value: true
image-position:
top | left 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"
/>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 | undefined Closes the window/menu when clicking inside the content area
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 | undefined Enables height animation
in-dom:
boolean | undefined Indicates whether the window is in the DOM
in-dom-slide:
string[] | undefined 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 | undefined Automatically close on the outside click
default value: true
click-open:
boolean | undefined Enable opening on click
default value: true
in-dom:
boolean | undefined Indicates whether the window is in the DOM
section:
boolean | undefined Enable section styling mode
<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 | undefined Selected state of the element
<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 | undefined Sets icon color based on palette class
icon-turn:
boolean | undefined Turns the icon
<D1Page
icon-turn
/>Label
Here is a detailed description of the component
D1PageArea
Description
The PageArea component serves as a foundational structural unit for application pages.
It helps define the main content zones and ensures consistent layout management across different views.
Typically used as a root-level container within a specific page or sub-section to organize content blocks and handle area-specific logic.
<D1PageArea
description="Here is a detailed description of the component"
label="Label"
icon="home"
/>Label
Here is a detailed description of the component
Emits type PageAreaEmits
Expose interface PageAreaExpose
Slots interface PageAreaSlots
Props type PageAreaProps
Enumeration of some properties
selected:
boolean | undefined Selected state of the element
<D1PageArea
selected
/>Label
Here is a detailed description of the component
caption:
string Caption text for additional information
<D1PageArea
caption="Caption text"
/>Label
Caption text
Here is a detailed description of the component
headline:
string Headline text
<D1PageArea
headline="Headline text"
/>Headline text
Label
Here is a detailed description of the component
icon-palette:
boolean | undefined Sets icon color based on palette class
icon-turn:
boolean | undefined Turns the icon
<D1PageArea
icon-turn
/>Label
Here is a detailed description of the component
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 | undefined Controls the visibility of the progress indicator
circular:
boolean | undefined Enables circular progress indicator display
<D1Progress
circular
/>dense:
boolean | undefined Enables compact display variant
<D1Progress
dense
/>indeterminate:
type1 | type2 | type3 Type of indeterminate progress animation
default value: type1
inverse:
boolean | undefined Inverts component colors
<D1Progress
inverse
/>linear:
boolean | undefined 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 | undefined Adds a point at the end of the progress indicator
<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"
/>D1Ripple
Demo
<div :class="classDemo.item" style="position: relative; width: 64px; height: 48px;" > <D1Ripple v-bind="args"/> </div>
Description
Low-level decorative utility that provides Material Design-style visual feedback on user interactions. Automatically generates a dynamic wave effect at the exact coordinates of a pointerdown event within its parent container.
Features automated animation lifecycle management, including expansion, fade-out, and DOM cleanup. Inherits visual styling directly from the host element via currentColor and requires the parent to have relative positioning and hidden overflow to function correctly.
Primarily integrated within interactive components like Buttons, ListItems, and Cards; should generally not be manually implemented. Controlled via the disabled prop, serving as a subtle but high-polish affordance for touch and click actions.
<D1Ripple
/>Emits type RippleEmits
Expose interface RippleExpose
Slots interface RippleSlots
Props type RippleProps
Enumeration of some properties
disabled:
boolean | undefined Sets the element to an inactive state
<D1Ripple
disabled
/>D1Scrollbar
Demo
<div :class="classDemo.item">
<D1Scrollbar v-bind="args" style="height: 128px">
<h3>Modern Web Interfaces and User Experience Design</h3>
<p>In today's digital landscape, creating high-quality user
interfaces has become a critical aspect of web application development.
User interface components must not only be functional but also provide
intuitive interaction patterns that enhance the overall user experience.
The evolution of web technologies has enabled developers to create more
sophisticated and engaging interfaces.</p>
<p>Scrollbars play a particularly important role in content navigation
and information architecture. They allow users to easily navigate through
large volumes of information while maintaining context and orientation within
the document structure. Modern scrollbars should be adaptive, responsive,
and visually appealing while providing consistent behavior across different
platforms and devices.</p>
<h4>Principles of Effective Design Implementation</h4>
<p>Effective scrollbar design takes into account multiple factors ranging
from performance optimization to accessibility compliance. It's essential
to ensure smooth animations, proper handling of various input devices, and
comprehensive keyboard navigation support. Cross-browser compatibility remains
a top priority, especially when dealing with custom scrollbar implementations
that need to work consistently across different rendering engines.</p>
<p>Users expect scrollbars to work predictably and uniformly throughout
all parts of an application. This requires thorough testing and optimization
for various usage scenarios, including mobile devices, desktop computers,
and touch-enabled interfaces. The component must handle edge cases gracefully
and provide appropriate feedback for user interactions.</p>
</D1Scrollbar>
</div>Description
Structural container that provides custom scrolling behavior and visual status indicators (borders/dividers) based on content overflow. Essential for maintaining spatial context in fixed-height areas like menus, modals, and sidebars.
Features dynamic scroll position detection to show/hide top and bottom dividers based on visibility of content edges. Supports custom border styling, inverse divider logic, and specialized visibility controls for different scroll states.
Controlled via the tag and divider props, requiring a defined height or max-height to enable active scrolling. Use as a base wrapper for any dense content block requiring clear visual cues that more data is available above or below.
<D1Scrollbar
/>Emits type ScrollbarEmits
Expose interface ScrollbarExpose
Slots interface ScrollbarSlots
Props type ScrollbarProps
Enumeration of some properties
divider:
boolean | undefined Show divider lines at top and bottom depending on scroll position
divider-bottom:
boolean | undefined Show the divider line at the bottom
divider-hide:
boolean | undefined Hide divider lines
divider-top:
boolean | undefined Show the divider line at the top
inverse:
boolean | undefined Invert divider line behavior - show lines when the scroll is at beginning/end
standard:
boolean | undefined Use standard browser scrollbar
visible:
boolean | undefined Controls element visibility and scrolling behavior (overflow: visible)
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 | undefined Selected state of the element
<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 | undefined Sets icon color based on palette class
icon-turn:
boolean | undefined Turns the icon
<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"
iconSearch="search"
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 | undefined Sets the element to an inactive state
<D1Select
disabled
/>Label
focus:
boolean | undefined Visual focus state
<D1Select
focus
/>Label
This is a helpful message
loading:
boolean | ConstrBind<ProgressProps> | undefined Sets the element to a loading state
<D1Select
loading
/>Label
This is a helpful message
readonly:
boolean | undefined Read-only state of the element
selected:
boolean | undefined Selected state of the element
<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 | undefined Shows the counter-element
<D1Select
counter-show
/>Label
This is a helpful message
0icon-palette:
boolean | undefined Sets icon color based on palette class
icon-trailing:
string | File Value of the trailing icon
<D1Select
icon-trailing="settings"
/>Label
This is a helpful message
icon-trailing-palette:
boolean | undefined Sets trailing icon color based on palette class
icon-turn:
boolean | undefined Turns the icon
<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 | undefined Allows editing the selected value directly inside the input when not in multiple mode
multiple:
boolean | undefined Enables multiple selection mode
<D1Select
multiple
/>Label
This is a helpful message
required:
boolean | undefined Marks the field as required and shows the required indicator
<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
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 | undefined Enables filter mode for search (hides non-matching items)
hide-list:
boolean | undefined Hides the internal List part of the Menu; shows only header/toolbar and other slots.
is-skeleton:
boolean | undefined Displays the component in skeleton mode
show-search:
boolean | undefined Shows a search/filter field inside the dropdown menu
input-search-attrs:
object | function Additional bindings or attributes for the search input inside the dropdown
D1SelectValue
Description
Specialized display engine used within Select, Combobox, or Autocomplete controls to render selected state. Dynamically switches between a simple text label for single selection and a group of Chips for multiple selection.
Features automated Chip management, including removal event handling and integration with the Select data model. Supports empty state placeholders, custom Chip attributes (icons, outlines), and handles disabled/readonly states to prevent interaction.
Controlled via the multiple and value props, requiring an array of objects even for single selection. Use as a foundational element when building custom selection fields requiring standardized token-based or text-based value representation.
<D1SelectValue
value="[{"label":"JavaScript","value":"js","icon":"code","index":"1"},{"label":"TypeScript","value":"ts","icon":"verified","index":"2","detail":"Recommended"},{"label":"React","value":"react","icon":"favorite","index":"3"},{"label":"Vue.js","value":"vue","icon":"star","index":"4","detail":"Popular framework"}]"
/>JavaScript
Emits type SelectValueEmits
Expose interface SelectValueExpose
Slots interface SelectValueSlots
Props type SelectValueProps
Enumeration of some properties
disabled:
boolean | undefined Sets the element to an inactive state
<D1SelectValue
disabled
/>JavaScript
readonly:
boolean | undefined Read-only state of the element
value:
array Array of selected values to display - each item should contain label, value, and optional index, icon, and detail properties
placeholder:
string Placeholder text shown when the input is empty
<D1SelectValue
placeholder="Placeholder text"
/>JavaScript
multiple:
boolean | undefined Enables multiple selection mode
<D1SelectValue
multiple
/>JavaScriptTypeScriptReactVue.js
icon-show:
boolean | undefined Controls visibility of icons in displayed items
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 | undefined Sets the element to an active state
D1Snackbar
Description
Centralized notification management system (orchestrator) that coordinates the lifecycle and queue of temporary messages. Ideal for global system alerts, user feedback, and asynchronous status updates across the application.
Features an intelligent queue manager with support for priority containers, automatic lifecycle hooks (show/hide), and flexible screen anchoring (vertical/horizontal positioning). Includes programmatic control over message stack, custom auto-hide delays, and teleport-based rendering to ensure overlay priority over all content.
Controlled via an exposed API (add, remove, clear) and configurable global settings like delay and origin. Place a single instance at the root of the application (e.g., App.vue) to manage consistent notification patterns throughout the entire user session.
<D1Snackbar
/>Emits type SnackbarEmits
Expose interface SnackbarExpose
Slots interface SnackbarSlots
Props type SnackbarProps
Enumeration of some properties
horizontal:
right | left | block Sets horizontal alignment of elements
<D1Snackbar
horizontal="right" overlap="rectangular"
/> <D1Snackbar
horizontal="left" overlap="rectangular"
/> <D1Snackbar
horizontal="block" overlap="rectangular"
/>limit:
1 | 2 | 4 | 6 | 8 Limits the number of simultaneously visible items
vertical:
top | bottom Sets vertical alignment of elements
<D1Snackbar
vertical="top" overlap="rectangular"
/> <D1Snackbar
vertical="bottom" overlap="rectangular"
/>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 | undefined Sets the element to an error state
<D1SnackbarItem
error
/>selected:
boolean | undefined Selected state of the element
<D1SnackbarItem
selected
/>success:
boolean | undefined Sets the element to a success state
<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 | undefined Sets icon color based on palette class
icon-trailing:
string | File Value of the trailing icon
<D1SnackbarItem
icon-trailing="settings"
/>icon-trailing-palette:
boolean | undefined Sets trailing icon color based on palette class
icon-turn:
boolean | undefined Turns the icon
<D1SnackbarItem
icon-turn
/>close-button:
boolean | undefined 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"
/>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 | undefined Sets the element to an inactive state
<D1TabItem
disabled
/>focus:
boolean | undefined Visual focus state
<D1TabItem
focus
/>readonly:
boolean | undefined Read-only state of the element
selected:
boolean | undefined Selected state of the element
<D1TabItem
selected
/>badge:
string Badge text or value to display
<D1TabItem
badge="123"
/>badge-dot:
boolean | undefined Display badge as a dot indicator
<D1TabItem
badge-dot
/>icon-palette:
boolean | undefined Sets icon color based on palette class
icon-turn:
boolean | undefined Turns the icon
<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 | undefined Displays the component in skeleton mode
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> | undefined Tabs list or TabsNavigation properties
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 | undefined Sets the element to an inactive state
<D1Textarea
disabled
/>Label
focus:
boolean | undefined Visual focus state
<D1Textarea
focus
/>Label
This is a helpful message
loading:
boolean | ConstrBind<ProgressProps> | undefined Sets the element to a loading state
<D1Textarea
loading
/>Label
This is a helpful message
readonly:
boolean | undefined Read-only state of the element
selected:
boolean | undefined Selected state of the element
<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 | undefined Shows the counter-element
<D1Textarea
counter-show
/>Label
This is a helpful message
0 / 100icon-palette:
boolean | undefined Sets icon color based on palette class
icon-trailing:
string | File Value of the trailing icon
<D1Textarea
icon-trailing="settings"
/>Label
This is a helpful message
icon-trailing-palette:
boolean | undefined Sets trailing icon color based on palette class
icon-turn:
boolean | undefined Turns the icon
<D1Textarea
icon-turn
/>Label
This is a helpful message
required:
boolean | undefined Marks the field as required and shows the required indicator
<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 | undefined 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
is-skeleton:
boolean | undefined Displays the component in skeleton mode
D1TextareaAutosize
Description
Low-level functional engine for multi-line inputs that provides precise, real-time height adjustment based on content. Implements a reliable cloning mechanism to calculate scroll-free container heights while respecting parent padding and font styles.
Features automated height synchronization during content changes, supporting smooth CSS transitions and native textarea attributes via inputAttrs. Operates as a foundational tool for the Textarea component, ensuring character entry never triggers unwanted shift or overflow.
Primarily integrated as a subcomponent; should generally not be manually used for standalone input fields. Controlled via reactive value bindings, serving as the high-performance core for any dynamic data entry element requiring responsive layout scaling.
<D1TextareaAutosize
/>Emits type TextareaAutosizeEmits
Expose interface TextareaAutosizeExpose
Slots interface TextareaAutosizeSlots
Props type TextareaAutosizeProps
Enumeration of some properties
height:
xs | sm | md | lg | xl Sets component height
default value: md
autosize:
boolean | undefined Automatically adjusts the component size based on content
default value: true
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 | undefined Sets the element to an inactive state
<D1Tooltip
disabled
/>delay:
number | undefined Delay before showing the tooltip
default value: 64
delay-hide:
number | undefined Delay before hiding the tooltip
default value: 0
indent:
number | undefined 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 | undefined Displaying the tooltip on top of the element
in-dom:
boolean | undefined Indicates whether the window is in the DOM
interactive:
boolean | undefined Enables interactive mode for the component
default value: true