@300codes/design-system 1.2.2 → 1.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@300codes/design-system",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "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

@@ -24,7 +24,7 @@ const props = withDefaults(defineProps<TabsListProps>(), {
 
 const model = defineModel<string>({ default: '' });
 
-const listRef = ref<HTMLUListElement | null>(null);
+const listRef = ref<HTMLDivElement | null>(null);
 const focusedIndex = ref<number>(-1);
 
 const activeIndex = computed<number>(() => {
@@ -71,50 +71,45 @@ watch(model, () => {
 </script>
 
 <template>
-  <ul
+  <div
     ref="listRef"
     role="tablist"
     :class="[
       'tabsList',
       `tabsList--${size}`,
       { 'tabsList--vertical': vertical },
-      'flex flex-nowrap items-center overflow-x-auto list-none m-0 p-0',
+      'flex flex-nowrap items-center overflow-x-auto m-0 p-0',
     ]"
     @focusout="handleFocusOut"
   >
-    <li
+    <button
       v-for="(item, index) in items"
       :key="item.value"
-      role="presentation"
-      class="shrink-0"
+      role="tab"
+      :class="[
+        'tabsList__tab',
+        {
+          'tabsList__tab--active': model === item.value,
+          'tabsList__tab--disabled': item.disabled,
+        },
+        'shrink-0 inline-flex items-center justify-center whitespace-nowrap cursor-pointer border-0',
+      ]"
+      :tabindex="getTabIndex(index)"
+      :aria-selected="model === item.value"
+      :disabled="item.disabled"
+      @click="model = item.value"
+      @keydown="handleKeydown($event, index)"
     >
-      <button
-        role="tab"
-        :class="[
-          'tabsList__tab',
-          {
-            'tabsList__tab--active': model === item.value,
-            'tabsList__tab--disabled': item.disabled,
-          },
-          'inline-flex items-center justify-center whitespace-nowrap cursor-pointer border-0',
-        ]"
-        :tabindex="getTabIndex(index)"
-        :aria-selected="model === item.value"
-        :disabled="item.disabled"
-        @click="model = item.value"
-        @keydown="handleKeydown($event, index)"
-      >
-        {{ item.label }}
-
-        <BaseIcon
-          v-if="item.icon"
-          :name="item.icon"
-          :icon-path="iconPath"
-          size="md"
-        />
-      </button>
-    </li>
-  </ul>
+      {{ item.label }}
+
+      <BaseIcon
+        v-if="item.icon"
+        :name="item.icon"
+        :icon-path="iconPath"
+        size="md"
+      />
+    </button>
+  </div>
 </template>
 
 <style scoped>
@@ -157,18 +152,14 @@ watch(model, () => {
   @apply cursor-not-allowed pointer-events-none opacity-50;
 }
 
-/* ── vertical (md breakpoint and up) ── */
-
 .tabsList--vertical {
   @apply md:flex-col;
 }
-.tabsList--vertical > li,
+
 .tabsList--vertical .tabsList__tab {
-  @apply md:w-full;
+  @apply md:w-full md:justify-between;
 }
 
-/* ── lg ── */
-
 .tabsList--lg {
   gap: var(--tabsList-lg-gap, 1rem);
 }