@300codes/design-system 1.2.2 → 1.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@300codes/design-system",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "type": "module",
   "files": [
     "src/components",

package/src/components/TabsList/TabsList.stories.ts

@@ -88,13 +88,23 @@ export const Vertical: Story = {
   parameters: {
     controls: { disable: true },
   },
-  render: () => ({
+  args: {
+    size: 'md',
+    items: [
+      { label: 'Overview', value: 'overview', icon: 'house' },
+      { label: 'Analytics', value: 'analytics', icon: 'chart-bar' },
+      { label: 'Reports', value: 'reports', icon: 'file-text' },
+      { label: 'Settings', value: 'settings', icon: 'gear' },
+    ],
+  },
+  render: (args: TabsListProps) => ({
     components: { TabsList },
     setup() {
       const active = ref('overview');
-      return { active, defaultItems };
+      return { args, active };
     },
-    template: '<div style="width: 200px"><TabsList :items="defaultItems" v-model="active" :vertical="true" /></div>',
+    template:
+      '<div style="width: 200px"><TabsList v-bind="args" v-model="active" :vertical="true" /></div>',
   }),
 };
 

package/src/components/TabsList/TabsList.vue

@@ -162,11 +162,15 @@ watch(model, () => {
 .tabsList--vertical {
   @apply md:flex-col;
 }
-.tabsList--vertical > li,
-.tabsList--vertical .tabsList__tab {
+
+.tabsList--vertical > li {
   @apply md:w-full;
 }
 
+.tabsList--vertical .tabsList__tab {
+  @apply md:w-full md:justify-between;
+}
+
 /* ── lg ── */
 
 .tabsList--lg {