@dxtmisha/wiki 0.39.1 → 0.39.2

package/src/media/descriptions/wikiDescriptionsArrow.ts

@@ -185,30 +185,9 @@ export const wikiDescriptionsArrow: StorybookComponentsDescriptionItem = {
 </div>
     `,
     description: `
-Arrow is a functional component that renders a triangular pointer connecting a container (like a tooltip, popover, or dropdown) to a target element.
-It is designed to automatically blend with the parent container's styles (background, border) to create a seamless speech-bubble effect.
-
-**Key Features:**
-1. **Target Linking:** Points to a specific DOM element defined by \`elementTarget\` (selector or HTMLElement).
-2. **Auto-Positioning:** Automatically calculates the correct placement (top, bottom, left, right) relative to the container and the target.
-3. **Style Inheritance:** Inherits \`background-color\`, \`border-color\`, and \`border-width\` from the parent element to match the container's visual style perfectly.
-4. **Reactive Updates:** Updates its position when the target or container moves (often used within \`Window\` or floating UI components).
-
-**When to use:**
-- Inside **Tooltips** to point to the hovered element.
-- Inside **Popovers** or **Dropdowns** to indicate the trigger source.
-- For any floating UI that needs a directional indicator.
-
-**Usage Examples:**
-
-- **Basic Tooltip Arrow:**
-  \`<div class="tooltip">
-     Message
-     <Arrow element-target="#button-id" />
-   </div>\`
-
-- **With Auto Positioning:**
-  \`<Arrow position="auto" element-target=".target-element" />\`
+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.
     `
   }
 }

package/src/media/descriptions/wikiDescriptionsBadge.ts

@@ -142,40 +142,9 @@ export const wikiDescriptionsBadge: StorybookComponentsDescriptionItem = {
 </div>
     `,
     description: `
-Badge is a small visual indicator used to display status, counts, or short labels (tags).
-It is typically positioned over the corner of another element (like an icon or avatar) or used inline.
-
-**Key Features:**
-1. **Content Handling:**
-   - **Numeric:** Displays numbers via \`label\`. Use \`labelMax\` to cap the value (e.g., "99+").
-   - **Text:** Displays short text strings.
-   - **Icon:** Can display an icon via the \`icon\` prop.
-   - **Dot:** If \`dot\` is true, renders as a small circle without text (status indicator).
-
-2. **Positioning (\`overlap\`):**
-   - \`static\`: Renders inline (default flow).
-   - \`rectangular\`: Positioned absolutely over a rectangular parent.
-   - \`circular\`: Positioned absolutely over a circular parent (adjusts coordinates).
-   - **Alignment:** Controlled by \`vertical\` (top/bottom) and \`horizontal\` (right/left).
-
-3. **Styling:**
-   - Supports variants: \`primary\`, \`secondary\`, \`outline\`.
-   - \`hide\`: Toggles visibility.
-   - \`dot\`: Switches to dot mode.
-
-**Usage Examples:**
-
-- **Notification Count:**
-  \`<div class="relative-container">
-     <Icon name="notifications" />
-     <Badge label="5" overlap="circular" vertical="top" horizontal="right" />
-   </div>\`
-
-- **Status Dot:**
-  \`<Badge dot primary />\`
-
-- **Inline Tag:**
-  \`<Badge label="New" overlap="static" />\`
+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.
     `
   }
 }

package/src/media/descriptions/wikiDescriptionsBars.ts

@@ -74,25 +74,29 @@ export const wikiDescriptionsBars: StorybookComponentsDescriptionItem = {
       }
       `,
       template: `
-        <button class="wiki-storybook-button" @click="isAction = !isAction">Toggle action ({{ isAction ? 'on' : 'off' }})</button>
-        <DesignComponent
-          v-model:action="isAction"
-          label="Page Title"
-          description="A concise description for this example"
-          :bars="[
-            { icon: 'search' },
-            { icon: 'refresh' },
-            { icon: 'more_vert' }
-          ]"
-          action-label="2 selected"
-          action-description="Choose an action to apply"
-          :action-bars="[
-            { icon: 'share' },
-            { icon: 'edit' },
-            { icon: 'delete' }
-          ]"
-          style="margin-top: 8px;"
-        />
+        <div class="wiki-storybook-flex-column">
+          <div class="wiki-storybook-flex">
+            <button class="wiki-storybook-button" @click="isAction = !isAction">Toggle action ({{ isAction ? 'on' : 'off' }})</button>
+          </div>
+          <DesignComponent
+            v-model:action="isAction"
+            label="Page Title"
+            description="A concise description for this example"
+            :bars="[
+              { icon: 'search' },
+              { icon: 'refresh' },
+              { icon: 'more_vert' }
+            ]"
+            action-label="2 selected"
+            action-description="Choose an action to apply"
+            :action-bars="[
+              { icon: 'share' },
+              { icon: 'edit' },
+              { icon: 'delete' }
+            ]"
+            style="margin-top: 8px;"
+          />
+        </div>
       `
     },
     {
@@ -116,6 +120,31 @@ export const wikiDescriptionsBars: StorybookComponentsDescriptionItem = {
           />
         </DesignSkeleton>
       `
+    },
+    {
+      id: 'BarsSlots',
+      name: {
+        en: 'Slots usage',
+        ru: 'Использование слотов'
+      },
+      setup: `
+      return {
+        isAction: ref(false)
+      }
+      `,
+      template: `
+        <div class="wiki-storybook-flex-column">
+          <div class="wiki-storybook-flex">
+            <button class="wiki-storybook-button" @click="isAction = !isAction">Toggle action ({{ isAction ? 'on' : 'off' }})</button>
+          </div>
+          <DesignComponent v-model:action="isAction">
+            <template #default>Custom Label slot</template>
+            <template #description>Custom Description slot</template>
+            <template #bars>Custom Bars Slot</template>
+            <template #actionBars>Custom ActionBars Slot</template>
+          </DesignComponent>
+        </div>
+      `
     }
   ],
   documentation: {
@@ -132,6 +161,7 @@ export const wikiDescriptionsBars: StorybookComponentsDescriptionItem = {
 <StorybookDescriptions componentName={'Event'} type={'click'}/>
     `,
     slots: `
+<Canvas of={Component.BarsSlots}/>
 <StorybookDescriptions componentName={'Bars'} type={'slots'}/>
 <StorybookDescriptions componentName={'Slot'} type={'default'}/>
 <StorybookDescriptions componentName={'Slot'} type={'description'}/>
@@ -139,35 +169,9 @@ export const wikiDescriptionsBars: StorybookComponentsDescriptionItem = {
   },
   ai: {
     description: `
-Bars is a structural component used as a header, toolbar, or action bar.
-It typically sits at the top of a page, card, or window to provide context (title) and actions.
-
-**Key Features:**
-1. **Content Structure:**
-   - \`label\`: The main title (e.g., page name).
-   - \`description\`: Subtitle or additional context.
-   - \`backButton\`: Configuration for the navigation button on the left (e.g., arrow back, menu).
-
-2. **Action Buttons (\`bars\`):**
-   - Accepts an array of button configurations (props for \`Button\` component).
-   - Rendered on the right side.
-   - Useful for primary page actions (Search, Filter, Settings).
-
-3. **Action Mode (Contextual State):**
-   - Activated via \`action\` prop (boolean).
-   - Switches the UI to a specific state (e.g., when items are selected in a list).
-   - **Overrides:**
-     - \`label\` -> \`actionLabel\`
-     - \`description\` -> \`actionDescription\`
-     - \`bars\` -> \`actionBars\`
-   - The back button usually transforms into a "Close" or "Cancel" action in this mode.
-
-**Usage Examples:**
-
-- **Standard Header:** \`<Bars label="Dashboard" :bars="[{ icon: 'notifications' }]" />\`
-- **With Back Button:** \`<Bars label="Settings" :back-button="{ icon: 'arrow_back' }" />\`
-- **Contextual Action Bar:**
-  \`<Bars :action="selectedCount > 0" :action-label="\`\${selectedCount} selected\`" :action-bars="[{ icon: 'delete' }]" />\`
-      `
+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.
+    `
   }
 }

package/src/media/descriptions/wikiDescriptionsBlock.ts

@@ -50,20 +50,13 @@ export const wikiDescriptionsBlock: StorybookComponentsDescriptionItem = {
         ru: 'Базовые'
       },
       template: `
-        <div class="wiki-storybook-flex-column">
-          <DesignComponent>
-            Simple content wrapper
-          </DesignComponent>
-          <DesignComponent label="User Profile" description="Manage your personal information">
-            <button class="wiki-storybook-button">Edit Profile</button>
-          </DesignComponent>
-          <DesignComponent headline="Notifications" label="Settings">
-            <label><input type="checkbox" checked> Email Notifications</label>
-          </DesignComponent>
-          <DesignComponent icon="home" label="Dashboard">
-            <p>Welcome to your dashboard overview.</p>
-          </DesignComponent>
-        </div>
+        <DesignComponent
+          headline="Account Settings"
+          label="Profile Information"
+          description="Manage your personal details and public profile presence."
+        >
+          <p>Welcome to your profile overview. Here you can update your name, bio, and contact information.</p>
+        </DesignComponent>
       `
     },
     {
@@ -88,6 +81,8 @@ export const wikiDescriptionsBlock: StorybookComponentsDescriptionItem = {
     body: `
 <StorybookDescriptions componentName={'Block'} type={'block'}/>
 <Canvas of={Component.BlockBasic}/>
+
+<StorybookDescriptions componentName={'Block'} type={'differences'}/>
 `,
     slots: `
 <Canvas of={Component.BlockSlots}/>
@@ -112,48 +107,9 @@ export const wikiDescriptionsBlock: StorybookComponentsDescriptionItem = {
 </div>
     `,
     description: `
-Block is a versatile structural component used to organize content with a standardized layout.
-It acts as a container that automatically arranges headers, labels, descriptions, icons, and body content.
-
-**Key Features:**
-1. **Layout Structure:**
-   - **Headline:** Top-most text area (prop \`headline\` or slot \`#headline\`).
-   - **Header Area:** Contains the icon, label, caption, and trailing actions.
-   - **Description:** Text block below the header.
-   - **Content:** The \`#default\` slot allows placing custom content inside the block.
-
-2. **Content Props:**
-   - \`label\`: Main title.
-   - \`caption\`: Auxiliary text next to or below the label.
-   - \`description\`: Detailed text description.
-   - \`icon\`: Visual indicator (icon name).
-   - \`headline\`: Section heading above the main header.
-
-3. **Customization:**
-   - \`tag\`: Changes the root HTML element (e.g., \`section\`, \`article\`, \`div\`).
-   - \`#trailing\`: Slot for actions or content on the right side of the header.
-
-**When to use:**
-- **Cards:** To structure the header and content of a card.
-- **List Items:** For complex list items with icons and text.
-- **Sections:** To define titled sections within a page or modal.
-
-**Usage Examples:**
-
-- **Simple Card Header:**
-  \`<Block label="Card Title" description="Subtitle text" icon="info" />\`
-
-- **Section with Content:**
-  \`<Block headline="Section 1" label="Details">
-     <p>Custom content...</p>
-   </Block>\`
-
-- **List Item with Action:**
-  \`<Block label="Item Name" caption="Status: Active">
-     <template #trailing>
-       <button>Edit</button>
-     </template>
-   </Block>\`
+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.
     `
   }
 }

package/src/media/descriptions/wikiDescriptionsButton.ts

@@ -192,34 +192,9 @@ export const wikiDescriptionsButton: StorybookComponentsDescriptionItem = {
   },
   ai: {
     description: `
-Button is a fundamental interactive component used for user actions, navigation, and submitting forms.
-It supports various visual styles, states, and content configurations.
-
-**Key Features:**
-1. **Content:**
-   - \`label\`: The text displayed inside the button.
-   - \`icon\`: Name of the icon to display *before* the label (Material Symbols).
-   - \`iconTrailing\`: Name of the icon to display *after* the label.
-
-2. **States:**
-   - \`disabled\`: Prevents user interaction and visually grays out the button.
-   - \`selected\`: Indicates an active or toggled state.
-   - \`loading\`: Replaces content or adds a spinner to indicate processing.
-
-3. **Navigation:**
-   - \`to\`: Vue Router path. Renders as an \`<a>\` tag or uses router push.
-   - \`href\`: External URL. Renders as an \`<a>\` tag.
-
-4. **Sizing & Layout:**
-   - \`adaptive\`: Makes the button fill the container width or adapt to specific breakpoints.
-
-**Usage Examples:**
-
-- **Main Action:** \`<Button label="Confirm" primary icon="check" />\`
-- **Secondary Action:** \`<Button label="Cancel" secondary />\`
-- **Navigation:** \`<Button label="Read More" to="/details" text iconTrailing="arrow_forward" />\`
-- **Icon Only:** \`<Button icon="menu" text />\` (Ensure aria-label is provided for accessibility)
-- **Loading:** \`<Button label="Saving..." primary loading />\`
+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.
     `
   }
 }

package/src/media/descriptions/wikiDescriptionsCell.ts

@@ -113,26 +113,9 @@ export const wikiDescriptionsCell: StorybookComponentsDescriptionItem = {
   },
   ai: {
     description: `
-Cell is a universal list item component used for building menus, settings panels, and data lists.
-It provides a structured layout with slots for icons, text content, and actions.
-
-**Structure:**
-1. **Icon (Left):** Defined by \`icon\` prop.
-2. **Context (Center):**
-   - **Label:** Main text/title (prop \`label\`).
-   - **Caption:** Small text above/below the label (prop \`caption\`).
-   - **Description:** Secondary text below the label (prop \`description\`).
-3. **Trailing (Right):** Slot \`#trailing\` for actions (switch, checkbox, button) or meta-info.
-4. **Body:** Slot \`#body\` for additional content below the main row.
-
-**Key Features:**
-- **Interactive:** Supports \`to\`, \`href\`, and click events with Ripple effect.
-- **States:** Handles \`disabled\`, \`selected\`, and \`loading\` (skeleton) states.
-
-**When to use:**
-- **List Items:** For navigation menus or settings.
-- **Data Rows:** To display structured data entities.
-- **Action Items:** Clickable rows with icons and text.
+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.
     `
   }
 }

package/src/media/descriptions/wikiDescriptionsCheckbox.ts

@@ -0,0 +1,134 @@
+import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
+
+/**
+ * Descriptions for Checkbox component
+ *
+ * Описания свойств компонента Checkbox
+ */
+export const wikiDescriptionsCheckbox: StorybookComponentsDescriptionItem = {
+  name: 'Checkbox',
+  description: {
+    en: 'Interactive checkbox component for binary or indeterminate state selection',
+    ru: 'Интерактивный компонент чекбокса для выбора бинарного или неопределённого состояния'
+  },
+  possibilities: {
+    en: [
+      'checked, unchecked, and indeterminate states',
+      'built-in validation support with custom messages',
+      'label and description text support',
+      'customizable icons for checked and indeterminate states',
+      'disabled and loading states',
+      'ripple effect on interaction',
+      'skeleton state for loading placeholders',
+      'adaptive layout options',
+      'form integration with name and value attributes'
+    ],
+    ru: [
+      'состояния: отмечен, не отмечен и неопределённое',
+      'встроенная поддержка валидации с пользовательскими сообщениями',
+      'поддержка текста метки и описания',
+      'настраиваемые иконки для состояний отмечен и неопределённое',
+      'состояния отключения и загрузки',
+      'эффект волны при взаимодействии',
+      'состояние скелетона для заполнителей загрузки',
+      'опции адаптивной разметки',
+      'интеграция с формами через атрибуты name и value'
+    ]
+  },
+  import: [
+    'import { ref } from \'vue\''
+  ],
+  stories: [
+    {
+      id: 'CheckboxVModel',
+      name: {
+        en: 'Two-way binding (v-model)',
+        ru: 'Двусторонняя привязка (v-model)'
+      },
+      setup: `
+      return {
+        checkboxValue: ref(false),
+        indeterminateValue: ref(null)
+      }
+      `,
+      template: `
+        <div class="wiki-storybook-flex-column">
+          <div class="wiki-storybook-flex">
+            <button class="wiki-storybook-button" @click="checkboxValue = !checkboxValue">Check {{ checkboxValue }}</button>
+          </div>
+          <DesignComponent
+            v-model="checkboxValue"
+            label="Checkbox with v-model"
+          />
+        </div>
+      `
+    },
+    {
+      id: 'CheckboxSkeleton',
+      name: {
+        en: 'Skeleton',
+        ru: 'Скелетон'
+      },
+      components: ['Skeleton'],
+      template: `
+        <DesignSkeleton :active="true">
+          <div class="wiki-storybook-flex-column">
+            <DesignComponent isSkeleton label="Loading checkbox" />
+            <DesignComponent isSkeleton label="Another loading checkbox" />
+          </div>
+        </DesignSkeleton>
+      `
+    },
+    {
+      id: 'CheckboxSlots',
+      name: {
+        en: 'Slots usage',
+        ru: 'Использование слотов'
+      },
+      template: `
+        <DesignComponent>
+          <template #default>
+            <strong>Custom label slot</strong>
+          </template>
+          <template #description>
+            <em>Custom description slot</em>
+          </template>
+        </DesignComponent>
+      `
+    }
+  ],
+  documentation: {
+    body: `
+<StorybookDescriptions componentName={'Checkbox'} type={'checkbox'}/>
+
+<StorybookDescriptions componentName={'Checkbox'} type={'value'}/>
+<StorybookDescriptions componentName={'Checkbox'} type={'indeterminate'}/>
+<StorybookDescriptions componentName={'Value'} type={'v-model'}/>
+<Canvas of={Component.CheckboxVModel}/>
+
+<StorybookDescriptions componentName={'Style'} type={'isSkeleton'}/>
+<Canvas of={Component.CheckboxSkeleton}/>
+    `,
+    events: `
+<StorybookDescriptions componentName={'Event'} type={'input'}/>
+<StorybookDescriptions componentName={'Event'} type={'change'}/>
+    `,
+    expose: `
+<StorybookDescriptions componentName={'Expose'} type={'value'}/>
+<StorybookDescriptions componentName={'Expose'} type={'checkValidity'}/>
+<StorybookDescriptions componentName={'Expose'} type={'validationMessage'}/>
+    `,
+    slots: `
+<Canvas of={Component.CheckboxSlots}/>
+<StorybookDescriptions componentName={'Slot'} type={'label'}/>
+<StorybookDescriptions componentName={'Slot'} type={'description'}/>
+    `
+  },
+  ai: {
+    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).
+    `
+  }
+}