@300codes/design-system 1.2.3 → 1.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -24,7 +24,7 @@ const props = withDefaults(defineProps<TabsListProps>(), {
|
|
|
24
24
|
|
|
25
25
|
const model = defineModel<string>({ default: '' });
|
|
26
26
|
|
|
27
|
-
const listRef = ref<
|
|
27
|
+
const listRef = ref<HTMLDivElement | null>(null);
|
|
28
28
|
const focusedIndex = ref<number>(-1);
|
|
29
29
|
|
|
30
30
|
const activeIndex = computed<number>(() => {
|
|
@@ -71,50 +71,45 @@ watch(model, () => {
|
|
|
71
71
|
</script>
|
|
72
72
|
|
|
73
73
|
<template>
|
|
74
|
-
<
|
|
74
|
+
<div
|
|
75
75
|
ref="listRef"
|
|
76
76
|
role="tablist"
|
|
77
77
|
:class="[
|
|
78
78
|
'tabsList',
|
|
79
79
|
`tabsList--${size}`,
|
|
80
80
|
{ 'tabsList--vertical': vertical },
|
|
81
|
-
'flex flex-nowrap items-center overflow-x-auto
|
|
81
|
+
'flex flex-nowrap items-center overflow-x-auto m-0 p-0',
|
|
82
82
|
]"
|
|
83
83
|
@focusout="handleFocusOut"
|
|
84
84
|
>
|
|
85
|
-
<
|
|
85
|
+
<button
|
|
86
86
|
v-for="(item, index) in items"
|
|
87
87
|
:key="item.value"
|
|
88
|
-
role="
|
|
89
|
-
class="
|
|
88
|
+
role="tab"
|
|
89
|
+
:class="[
|
|
90
|
+
'tabsList__tab',
|
|
91
|
+
{
|
|
92
|
+
'tabsList__tab--active': model === item.value,
|
|
93
|
+
'tabsList__tab--disabled': item.disabled,
|
|
94
|
+
},
|
|
95
|
+
'shrink-0 inline-flex items-center justify-center whitespace-nowrap cursor-pointer border-0',
|
|
96
|
+
]"
|
|
97
|
+
:tabindex="getTabIndex(index)"
|
|
98
|
+
:aria-selected="model === item.value"
|
|
99
|
+
:disabled="item.disabled"
|
|
100
|
+
@click="model = item.value"
|
|
101
|
+
@keydown="handleKeydown($event, index)"
|
|
90
102
|
>
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
:tabindex="getTabIndex(index)"
|
|
102
|
-
:aria-selected="model === item.value"
|
|
103
|
-
:disabled="item.disabled"
|
|
104
|
-
@click="model = item.value"
|
|
105
|
-
@keydown="handleKeydown($event, index)"
|
|
106
|
-
>
|
|
107
|
-
{{ item.label }}
|
|
108
|
-
|
|
109
|
-
<BaseIcon
|
|
110
|
-
v-if="item.icon"
|
|
111
|
-
:name="item.icon"
|
|
112
|
-
:icon-path="iconPath"
|
|
113
|
-
size="md"
|
|
114
|
-
/>
|
|
115
|
-
</button>
|
|
116
|
-
</li>
|
|
117
|
-
</ul>
|
|
103
|
+
{{ item.label }}
|
|
104
|
+
|
|
105
|
+
<BaseIcon
|
|
106
|
+
v-if="item.icon"
|
|
107
|
+
:name="item.icon"
|
|
108
|
+
:icon-path="iconPath"
|
|
109
|
+
size="md"
|
|
110
|
+
/>
|
|
111
|
+
</button>
|
|
112
|
+
</div>
|
|
118
113
|
</template>
|
|
119
114
|
|
|
120
115
|
<style scoped>
|
|
@@ -157,22 +152,14 @@ watch(model, () => {
|
|
|
157
152
|
@apply cursor-not-allowed pointer-events-none opacity-50;
|
|
158
153
|
}
|
|
159
154
|
|
|
160
|
-
/* ── vertical (md breakpoint and up) ── */
|
|
161
|
-
|
|
162
155
|
.tabsList--vertical {
|
|
163
156
|
@apply md:flex-col;
|
|
164
157
|
}
|
|
165
158
|
|
|
166
|
-
.tabsList--vertical > li {
|
|
167
|
-
@apply md:w-full;
|
|
168
|
-
}
|
|
169
|
-
|
|
170
159
|
.tabsList--vertical .tabsList__tab {
|
|
171
160
|
@apply md:w-full md:justify-between;
|
|
172
161
|
}
|
|
173
162
|
|
|
174
|
-
/* ── lg ── */
|
|
175
|
-
|
|
176
163
|
.tabsList--lg {
|
|
177
164
|
gap: var(--tabsList-lg-gap, 1rem);
|
|
178
165
|
}
|