24.02.54: wt-tabs wide prop + docs [WTEL-3899]

docs/pages/webitel-ui/components/wt-tabs/Readme.md

@@ -1,20 +1,45 @@
 <script setup>
-import Docs from './wt-tabs-docs.vue';
 import ExampleTabs from './examples/example-tabs.vue';
+import ExampleWideTabs from './examples/example-wide-tabs.vue';
 </script>
 
 # WtTabs
 
 ## Props
-::: raw
-<Docs />
-:::
+
+| Name    | Type     | Default | Description                                   |
+|---------|----------|---------|-----------------------------------------------|
+| current | `Object` | `{}`    | The value of the selected tab                 |
+| tabs    | `Array`  | `[]`    | The list of tabs. Tracked by `value` property |
+
+## Events
+
+| Name   | Params          | Description                          |
+|--------|-----------------|--------------------------------------|
+| change | `tab`: `Object` | Returns tab object from list of tabs |
+
+## Slots
+
+| Name         | Scope              | Description                                                              |
+|--------------|--------------------|--------------------------------------------------------------------------|
+| `:tab-value` | `{ tab, current }` | Override tab contents with passed tab from `tabs` object and `current` tab |
 
 ## Example Tabs
+
 ::: raw
 <ExampleTabs />
 :::
 
 ::: details Code
 <<< ./examples/example-tabs.vue
 :::
+
+## Example Wide Tabs
+
+::: raw
+<ExampleWideTabs />
+:::
+
+::: details Code
+<<< ./examples/example-wide-tabs.vue
+:::

docs/pages/webitel-ui/components/wt-tabs/examples/example-wide-tabs.vue

@@ -0,0 +1,33 @@
+<script setup>
+import  { ref } from 'vue';
+
+const tabs = [
+  {
+    text: 'Tab 1',
+    value: '1',
+  },
+  {
+    text: 'Tab 2',
+    value: '2',
+  },
+  {
+    text: 'Tab 3',
+    value: '3',
+  },
+];
+
+const current = ref(tabs[0]);
+</script>
+
+<template>
+  <wt-tabs
+    :current="current"
+    :tabs="tabs"
+    wide
+    @change="current = $event"
+  />
+</template>
+
+<style scoped lang="scss">
+
+</style>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.2.53",
+  "version": "24.2.54",
   "private": false,
   "scripts": {
     "dev": "vite",

src/components/wt-tabs/wt-tabs.vue

@@ -1,10 +1,15 @@
 <template>
-  <nav class="wt-tabs">
+  <nav
+    class="wt-tabs"
+    :class="{
+      'wt-tabs--wide': wide,
+    }"
+  >
     <button
       v-for="(tab) in tabs"
       :key="tab.value"
       :class="{
-        'wt-tab--highlight': tab.value === current.value
+        'wt-tab--highlight': tab.value === current.value,
       }"
       :value="tab.text"
       class="wt-tab"
@@ -48,6 +53,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    wide: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: [
     'change',
@@ -85,6 +94,13 @@ export default {
   display: flex;
   flex-wrap: nowrap;
   gap: var(--tab-gap);
+
+  &--wide {
+    .wt-tab {
+      display: block;
+      width: 100%;
+    }
+  }
 }
 
 .wt-tab {