@retailcrm/embed-ui-v1-components 0.9.21 → 0.9.22-alpha.2

package/docs/profiles/{UiSlider.yml → components/UiSlider.yml}

@@ -2,13 +2,97 @@ component: UiSlider
 summary: >
   UiSlider is a range-selection control for single values or ranges on a numeric track.
   It supports single-handle and range-handle modes.
-usage: https://retailcrm.github.io/embed-ui/v1-components/0.9.18/?path=/docs/components-uislider--docs
 
 public_import:
   from: '@retailcrm/embed-ui-v1-components/remote'
   named:
     - UiSlider
 
+examples:
+  - title: Basic slider
+    code: |
+      <template>
+        <UiSlider v-model:value="value" />
+      </template>
+
+      <script lang="ts" setup>
+      import { ref } from 'vue'
+      import { UiSlider } from '@retailcrm/embed-ui-v1-components/remote'
+
+      const value = ref(20)
+      </script>
+  - title: Range slider
+    code: |
+      <template>
+        <UiSlider
+          v-model:value="value"
+          type="range"
+        />
+      </template>
+
+      <script lang="ts" setup>
+      import { ref } from 'vue'
+      import { UiSlider } from '@retailcrm/embed-ui-v1-components/remote'
+
+      const value = ref<number[]>([20, 80])
+      </script>
+  - title: Bounded range slider
+    code: |
+      <template>
+        <UiSlider
+          v-model:value="value"
+          type="range"
+          :min="10"
+          :max="60"
+        />
+      </template>
+
+      <script lang="ts" setup>
+      import { ref } from 'vue'
+      import { UiSlider } from '@retailcrm/embed-ui-v1-components/remote'
+
+      const value = ref<number[]>([20, 80])
+      </script>
+  - title: Labelled range slider
+    code: |
+      <template>
+        <UiSlider
+          v-model:value="value"
+          type="range"
+          labelled
+        >
+          <template #label="{ boundary }">
+            {{ boundary }}%
+          </template>
+
+          <template #handle="{ boundary }">
+            {{ boundary }}%
+          </template>
+        </UiSlider>
+      </template>
+
+      <script lang="ts" setup>
+      import { ref } from 'vue'
+      import { UiSlider } from '@retailcrm/embed-ui-v1-components/remote'
+
+      const value = ref<number[]>([20, 80])
+      </script>
+  - title: Controlled slider
+    code: |
+      <template>
+        <UiSlider
+          :value="value"
+          @update:value="value = $event"
+        />
+
+      </template>
+
+      <script lang="ts" setup>
+      import { ref } from 'vue'
+      import { UiSlider } from '@retailcrm/embed-ui-v1-components/remote'
+
+      const value = ref(20)
+      </script>
 use_when:
   - You need compact ranged numeric selection.
   - You need one or two draggable handles on a track.
@@ -73,6 +157,5 @@ styling:
   notes:
     - Use documented props and slots as the primary styling API.
     - Internal .ui-v1-* classes are descriptive implementation details for reasoning and debugging unless a profile marks them as public theme hooks.
-    - Use Storybook from the usage link to verify visual variants before generating custom layout around the component.
   root_classes:
     - .ui-v1-slider

package/docs/profiles/{UiSwitch.yml → components/UiSwitch.yml}

@@ -2,13 +2,62 @@ component: UiSwitch
 summary: >
   UiSwitch is a compact boolean toggle control. It is the most concise choice for on or off state
   when checkbox semantics would feel visually heavy.
-usage: https://retailcrm.github.io/embed-ui/v1-components/0.9.18/?path=/docs/components-uiswitch--docs
 
 public_import:
   from: '@retailcrm/embed-ui-v1-components/remote'
   named:
     - UiSwitch
 
+examples:
+  - title: Basic switch
+    code: |
+      <template>
+        <UiSwitch v-model:value="enabled" />
+      </template>
+
+      <script lang="ts" setup>
+      import { ref } from 'vue'
+      import { UiSwitch } from '@retailcrm/embed-ui-v1-components/remote'
+
+      const enabled = ref(false)
+      </script>
+  - title: Controlled switch
+    code: |
+      <template>
+        <UiSwitch
+          :value="enabled"
+          @update:value="enabled = $event"
+        />
+      </template>
+
+      <script lang="ts" setup>
+      import { ref } from 'vue'
+      import { UiSwitch } from '@retailcrm/embed-ui-v1-components/remote'
+
+      const enabled = ref(false)
+      </script>
+  - title: Disabled
+    code: |
+      <template>
+        <UiSwitch :value="true" disabled />
+      </template>
+
+      <script lang="ts" setup>
+      import { UiSwitch } from '@retailcrm/embed-ui-v1-components/remote'
+      </script>
+  - title: Square
+    code: |
+      <template>
+        <UiSwitch v-model:value="enabled" square />
+
+      </template>
+
+      <script lang="ts" setup>
+      import { ref } from 'vue'
+      import { UiSwitch } from '@retailcrm/embed-ui-v1-components/remote'
+
+      const enabled = ref(false)
+      </script>
 use_when:
   - You need a compact on or off toggle.
 
@@ -70,6 +119,5 @@ styling:
   notes:
     - Use documented props and slots as the primary styling API.
     - Internal .ui-v1-* classes are descriptive implementation details for reasoning and debugging unless a profile marks them as public theme hooks.
-    - Use Storybook from the usage link to verify visual variants before generating custom layout around the component.
   root_classes:
     - .ui-v1-switch

package/docs/profiles/{UiTab.yml → components/UiTab.yml}

@@ -3,7 +3,6 @@ summary: >
   UiTab is a declarative child node for UiTabGroup. It does not render meaningful
   standalone UI by itself; instead, UiTabGroup consumes its props and slots to build
   tab buttons, overflow menu items, and optional tab panel content.
-usage: https://retailcrm.github.io/embed-ui/v1-components/0.9.18/?path=/docs/components-uitab--docs
 
 public_import:
   from: '@retailcrm/embed-ui-v1-components/remote'
@@ -14,6 +13,132 @@ public_import:
 related_components:
   - UiTabGroup
 
+examples:
+  - title: Tabs through `items`
+    code: |
+      <template>
+        <UiTabGroup
+          v-model:active-id="activeId"
+          :items="items"
+          overflowing
+        />
+      </template>
+
+      <script lang="ts" setup>
+      import { ref } from 'vue'
+      import { UiTabGroup } from '@retailcrm/embed-ui-v1-components/remote'
+
+      const activeId = ref('overview')
+
+      const items = [
+        { id: 'overview', label: 'Overview', counter: '8' },
+        { id: 'orders', label: 'Orders', counter: '12' },
+        { id: 'files', label: 'Files', counter: '3' },
+      ]
+      </script>
+  - title: Tabs through `UiTab`, slot icons, and panel content
+    code: |
+      <template>
+        <UiTabGroup
+          v-model:active-id="activeId"
+          overflowing
+        >
+          <UiTab
+            v-for="item in items"
+            :key="item.id"
+            :id="item.id"
+            :label="item.label"
+            :counter="item.counter"
+            :disabled="item.disabled"
+          >
+            <template #icon>
+              <IconStar />
+            </template>
+
+            <template #content>
+              <section>
+                <h4>{{ item.label }}</h4>
+                <p>Active panel content for the tab {{ item.label }}</p>
+              </section>
+            </template>
+          </UiTab>
+        </UiTabGroup>
+      </template>
+
+      <script lang="ts" setup>
+      import { ref } from 'vue'
+      import IconStar from '@retailcrm/embed-ui-v1-components/assets/sprites/actions/star.svg'
+      import {
+        UiTab,
+        UiTabGroup,
+      } from '@retailcrm/embed-ui-v1-components/remote'
+
+      const activeId = ref('overview')
+
+      const items = [
+        { id: 'overview', label: 'Overview', counter: '8' },
+        { id: 'orders', label: 'Orders', counter: '12' },
+        { id: 'files', label: 'Files', counter: '3' },
+      ]
+      </script>
+  - title: Filled tabs
+    code: |
+      <template>
+        <UiTabGroup
+          v-model:active-id="activeId"
+          appearance="filled"
+        >
+          <UiTab
+            v-for="item in items"
+            :key="item.id"
+            :id="item.id"
+            :label="item.label"
+            :counter="item.counter"
+          >
+            <template #icon>
+              <IconStar />
+            </template>
+          </UiTab>
+        </UiTabGroup>
+      </template>
+
+      <script lang="ts" setup>
+      import { ref } from 'vue'
+      import IconStar from '@retailcrm/embed-ui-v1-components/assets/sprites/actions/star.svg'
+      import { UiTab, UiTabGroup } from '@retailcrm/embed-ui-v1-components/remote'
+
+      const activeId = ref('overview')
+
+      const items = [
+        { id: 'overview', label: 'Overview', counter: '8' },
+        { id: 'orders', label: 'Orders', counter: '12' },
+        { id: 'files', label: 'Files', counter: '3' },
+      ]
+      </script>
+  - title: Overflow menu
+    code: |
+      <template>
+        <div style="width: 320px;">
+          <UiTabGroup
+            v-model:active-id="activeId"
+            :items="items"
+            overflowing
+          />
+        </div>
+      </template>
+
+      <script lang="ts" setup>
+      import { ref } from 'vue'
+      import { UiTabGroup } from '@retailcrm/embed-ui-v1-components/remote'
+
+      const activeId = ref('overview')
+
+      const items = [
+        { id: 'overview', label: 'Overview', counter: '8' },
+        { id: 'orders', label: 'Orders', counter: '12' },
+        { id: 'files', label: 'Files', counter: '3' },
+      ]
+      </script>
 use_when:
   - You need custom icon, label, counter, or content inside UiTabGroup.
   - You want each tab declaration to keep its header and panel content together.
@@ -107,4 +232,3 @@ styling:
   notes:
     - Use documented props and slots as the primary styling API.
     - Internal .ui-v1-* classes are descriptive implementation details for reasoning and debugging unless a profile marks them as public theme hooks.
-    - Use Storybook from the usage link to verify visual variants before generating custom layout around the component.

package/docs/profiles/{UiTabGroup.yml → components/UiTabGroup.yml}

@@ -3,7 +3,6 @@ summary: >
   UiTabGroup is the navigation container for UiTab children or simple tab items.
   It manages active tab selection by string id, keyboard navigation, optional overflow
   into a dropdown menu, and optional tabpanel rendering from the active UiTab content slot.
-usage: https://retailcrm.github.io/embed-ui/v1-components/0.9.18/?path=/docs/components-uitab--docs
 
 public_import:
   from: '@retailcrm/embed-ui-v1-components/remote'