@ptlm-azulejo/tabs 0.0.1-alpha.35
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/CHANGELOG.md +4 -0
- package/README.md +168 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +113 -0
- package/dist/index.umd.cjs +1 -0
- package/dist/src/index.stories.d.ts +14 -0
- package/dist/src/index.stories.d.ts.map +1 -0
- package/dist/src/index.vue.d.ts +136 -0
- package/dist/src/index.vue.d.ts.map +1 -0
- package/dist/style.css +1 -0
- package/package.json +48 -0
package/CHANGELOG.md
ADDED
package/README.md
ADDED
|
@@ -0,0 +1,168 @@
|
|
|
1
|
+
# Tabs
|
|
2
|
+
|
|
3
|
+
The `Tabs` component organizes related content into multiple sections, allowing users to switch between views without leaving the current page. Tabs can display labels, icons, and notification badges, making them ideal for dashboards, settings pages, product management, and other interfaces with grouped content.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @ptlm-azulejo/tabs @ptlm-azulejo/themes
|
|
9
|
+
# or
|
|
10
|
+
yarn add @ptlm-azulejo/tabs @ptlm-azulejo/themes
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Styles & theming
|
|
14
|
+
|
|
15
|
+
The component reads theme CSS variables, so it needs `@ptlm-azulejo/themes`. Import a
|
|
16
|
+
brand preset (it bundles the base tokens) and the component styles, then set the
|
|
17
|
+
brand class on the root element:
|
|
18
|
+
|
|
19
|
+
```js
|
|
20
|
+
import '@ptlm-azulejo/themes/presets/leroy-merlin.css' // or /presets/adeo.css
|
|
21
|
+
import '@ptlm-azulejo/tabs/style.css'
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
```html
|
|
25
|
+
<html class="preset-lm" data-theme="dark">
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
> Without a preset **and** the `.preset-*` class, the component renders uncolored.
|
|
29
|
+
> See the [themes package](../themes/README.md) for brand switching, dark mode,
|
|
30
|
+
> and custom brands.
|
|
31
|
+
|
|
32
|
+
## Props
|
|
33
|
+
|
|
34
|
+
| Name | Type | Default | Description |
|
|
35
|
+
| --- | --- | --- | --- |
|
|
36
|
+
| `tabs` | `Tab[]` | — | Array of tab definitions. Each tab supports `label`, `id`, `icon`, `badge`, and `disabled`. |
|
|
37
|
+
| `modelValue` | `string \| number` | `0` | Controls the currently selected tab. When a string is used, it must match a tab's `id`. |
|
|
38
|
+
| `description` | `string` | — | Accessible description for the tab list (`aria-label`). |
|
|
39
|
+
| `size` | `'s' \| 'm'` | `'m'` | Controls the size of the tabs. |
|
|
40
|
+
| `divider` | `boolean` | `true` | Displays a divider below the tabs. |
|
|
41
|
+
| `centered` | `boolean` | `false` | Centers the tabs within the available width. |
|
|
42
|
+
|
|
43
|
+
### Tab object
|
|
44
|
+
|
|
45
|
+
| Property | Type | Description |
|
|
46
|
+
| --- | --- | --- |
|
|
47
|
+
| `label` | `string` | Text displayed in the tab. |
|
|
48
|
+
| `id` | `string` | Unique identifier used when `modelValue` is a string. |
|
|
49
|
+
| `icon` | `Component` | Optional icon displayed before the label. |
|
|
50
|
+
| `badge` | `number` | Optional numeric badge displayed after the label. |
|
|
51
|
+
| `disabled` | `boolean` | Disables the tab. |
|
|
52
|
+
|
|
53
|
+
## Events
|
|
54
|
+
|
|
55
|
+
| Name | Payload | Description |
|
|
56
|
+
| --- | --- | --- |
|
|
57
|
+
| `update:modelValue` | `string \| number` | Emitted when the selected tab changes. |
|
|
58
|
+
|
|
59
|
+
## Slots
|
|
60
|
+
|
|
61
|
+
This component does not expose any slots.
|
|
62
|
+
|
|
63
|
+
## Basic Usage
|
|
64
|
+
|
|
65
|
+
```vue
|
|
66
|
+
<script setup>
|
|
67
|
+
import { ref } from 'vue'
|
|
68
|
+
import { AzTabs } from '@ptlm-azulejo/tabs'
|
|
69
|
+
|
|
70
|
+
const selectedTab = ref(0)
|
|
71
|
+
|
|
72
|
+
const tabs = [
|
|
73
|
+
{ label: 'Overview' },
|
|
74
|
+
{ label: 'Orders' },
|
|
75
|
+
{ label: 'Settings' },
|
|
76
|
+
]
|
|
77
|
+
</script>
|
|
78
|
+
|
|
79
|
+
<template>
|
|
80
|
+
<AzTabs
|
|
81
|
+
v-model="selectedTab"
|
|
82
|
+
:tabs="tabs"
|
|
83
|
+
/>
|
|
84
|
+
</template>
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
## Using string identifiers
|
|
88
|
+
|
|
89
|
+
```vue
|
|
90
|
+
<script setup>
|
|
91
|
+
import { ref } from 'vue'
|
|
92
|
+
|
|
93
|
+
const selectedTab = ref('orders')
|
|
94
|
+
|
|
95
|
+
const tabs = [
|
|
96
|
+
{ id: 'overview', label: 'Overview' },
|
|
97
|
+
{ id: 'orders', label: 'Orders' },
|
|
98
|
+
{ id: 'settings', label: 'Settings' },
|
|
99
|
+
]
|
|
100
|
+
</script>
|
|
101
|
+
|
|
102
|
+
<template>
|
|
103
|
+
<AzTabs
|
|
104
|
+
v-model="selectedTab"
|
|
105
|
+
:tabs="tabs"
|
|
106
|
+
/>
|
|
107
|
+
</template>
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
## Tabs with icons and badges
|
|
111
|
+
|
|
112
|
+
```vue
|
|
113
|
+
<script setup>
|
|
114
|
+
import { ref } from 'vue'
|
|
115
|
+
import { AzTabs } from '@ptlm-azulejo/tabs'
|
|
116
|
+
import { HomeIcon, BellIcon } from '@mozaic-ds/icons-vue'
|
|
117
|
+
|
|
118
|
+
const selectedTab = ref(0)
|
|
119
|
+
|
|
120
|
+
const tabs = [
|
|
121
|
+
{
|
|
122
|
+
label: 'Home',
|
|
123
|
+
icon: HomeIcon,
|
|
124
|
+
},
|
|
125
|
+
{
|
|
126
|
+
label: 'Notifications',
|
|
127
|
+
icon: BellIcon,
|
|
128
|
+
badge: 8,
|
|
129
|
+
},
|
|
130
|
+
{
|
|
131
|
+
label: 'Disabled',
|
|
132
|
+
disabled: true,
|
|
133
|
+
},
|
|
134
|
+
]
|
|
135
|
+
</script>
|
|
136
|
+
|
|
137
|
+
<template>
|
|
138
|
+
<AzTabs
|
|
139
|
+
v-model="selectedTab"
|
|
140
|
+
:tabs="tabs"
|
|
141
|
+
/>
|
|
142
|
+
</template>
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
## Centered tabs
|
|
146
|
+
|
|
147
|
+
```vue
|
|
148
|
+
<template>
|
|
149
|
+
<AzTabs
|
|
150
|
+
centered
|
|
151
|
+
:tabs="[
|
|
152
|
+
{ label: 'Products' },
|
|
153
|
+
{ label: 'Services' },
|
|
154
|
+
{ label: 'Support' },
|
|
155
|
+
]"
|
|
156
|
+
/>
|
|
157
|
+
</template>
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
## Accessibility
|
|
161
|
+
|
|
162
|
+
- Uses the WAI-ARIA `tablist` and `tab` roles.
|
|
163
|
+
- Supports keyboard navigation using:
|
|
164
|
+
- `ArrowLeft` / `ArrowRight` to move between enabled tabs.
|
|
165
|
+
- `Home` to focus the first enabled tab.
|
|
166
|
+
- `End` to focus the last enabled tab.
|
|
167
|
+
- Disabled tabs are skipped during keyboard navigation.
|
|
168
|
+
- Use the `description` prop to provide an accessible label for the tab list.
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAA"}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
import { defineComponent as C, computed as d, useTemplateRef as D, openBlock as u, createElementBlock as c, normalizeClass as z, createElementVNode as b, Fragment as B, renderList as I, createBlock as h, resolveDynamicComponent as E, createCommentVNode as p, toDisplayString as N, createVNode as R, unref as V, nextTick as K } from "vue";
|
|
2
|
+
import { AzDivider as L } from "@ptlm-azulejo/divider";
|
|
3
|
+
import { AzNumberBadge as O } from "@ptlm-azulejo/number-badge";
|
|
4
|
+
const $ = ["aria-label"], H = ["aria-selected", "aria-disabled", "disabled", "tabindex", "onClick", "onKeydown"], S = { class: "az-tabs__label" }, j = {
|
|
5
|
+
key: 1,
|
|
6
|
+
class: "az-tabs__badge"
|
|
7
|
+
}, F = /* @__PURE__ */ C({
|
|
8
|
+
__name: "index",
|
|
9
|
+
props: {
|
|
10
|
+
description: {},
|
|
11
|
+
size: { default: "m" },
|
|
12
|
+
divider: { type: Boolean, default: !0 },
|
|
13
|
+
centered: { type: Boolean },
|
|
14
|
+
modelValue: { default: 0 },
|
|
15
|
+
tabs: {}
|
|
16
|
+
},
|
|
17
|
+
emits: ["update:modelValue"],
|
|
18
|
+
setup(i, { emit: f }) {
|
|
19
|
+
const a = i, m = d(() => ({
|
|
20
|
+
"az-tabs--centered": a.centered,
|
|
21
|
+
[`az-tabs--${a.size}`]: a.size !== "m"
|
|
22
|
+
})), s = d({
|
|
23
|
+
get() {
|
|
24
|
+
return a.modelValue;
|
|
25
|
+
},
|
|
26
|
+
set(e) {
|
|
27
|
+
A("update:modelValue", e);
|
|
28
|
+
}
|
|
29
|
+
}), n = d(() => a.tabs.map((e, r) => r).filter((e) => !a.tabs[e].disabled)), _ = d(() => typeof s.value == "string" ? a.tabs.findIndex((e) => e.id === s.value) : typeof s.value == "number" && s.value >= 0 && s.value < a.tabs.length ? s.value : -1), x = d(() => n.value.length === 0 ? -1 : n.value.includes(_.value) ? _.value : n.value[0]), T = D("tab"), v = (e, r) => {
|
|
30
|
+
const t = typeof a.modelValue == "string" ? a.tabs.find((o) => o.id === r) : a.tabs[e], l = typeof a.modelValue == "string" ? r : e;
|
|
31
|
+
t != null && t.disabled || l !== s.value && (s.value = l);
|
|
32
|
+
}, y = (e, r) => {
|
|
33
|
+
const t = typeof a.modelValue == "string" ? r : e;
|
|
34
|
+
return s.value === t;
|
|
35
|
+
};
|
|
36
|
+
function w(e, r) {
|
|
37
|
+
if (e.key !== "ArrowRight" && e.key !== "ArrowLeft" && e.key !== "Home" && e.key !== "End" || n.value.length === 0)
|
|
38
|
+
return;
|
|
39
|
+
const t = n.value.indexOf(r);
|
|
40
|
+
let l = null;
|
|
41
|
+
if (e.key === "ArrowRight") {
|
|
42
|
+
if (e.preventDefault(), t < 0) return;
|
|
43
|
+
l = (t + 1) % n.value.length;
|
|
44
|
+
} else if (e.key === "ArrowLeft") {
|
|
45
|
+
if (e.preventDefault(), t < 0) return;
|
|
46
|
+
l = (t - 1 + n.value.length) % n.value.length;
|
|
47
|
+
} else e.key === "Home" ? (e.preventDefault(), l = 0) : e.key === "End" && (e.preventDefault(), l = n.value.length - 1);
|
|
48
|
+
if (l !== null) {
|
|
49
|
+
const o = n.value[l];
|
|
50
|
+
v(o, a.tabs[o].id), K(() => {
|
|
51
|
+
var g, k;
|
|
52
|
+
(k = (g = T.value) == null ? void 0 : g[o]) == null || k.focus();
|
|
53
|
+
});
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
const A = f;
|
|
57
|
+
return (e, r) => (u(), c("nav", {
|
|
58
|
+
class: z(["az-tabs", m.value])
|
|
59
|
+
}, [
|
|
60
|
+
b("ul", {
|
|
61
|
+
role: "tablist",
|
|
62
|
+
class: "az-tabs__list",
|
|
63
|
+
"aria-label": i.description
|
|
64
|
+
}, [
|
|
65
|
+
(u(!0), c(B, null, I(i.tabs, (t, l) => (u(), c("li", {
|
|
66
|
+
key: `tab-${l}`,
|
|
67
|
+
role: "presentation",
|
|
68
|
+
class: "az-tabs__item"
|
|
69
|
+
}, [
|
|
70
|
+
b("button", {
|
|
71
|
+
ref_for: !0,
|
|
72
|
+
ref: "tab",
|
|
73
|
+
role: "tab",
|
|
74
|
+
class: z(["az-tabs__tab", {
|
|
75
|
+
"az-tabs__tab--selected": y(l, t.id),
|
|
76
|
+
"az-tabs__tab--disabled": t.disabled
|
|
77
|
+
}]),
|
|
78
|
+
"aria-selected": y(l, t.id),
|
|
79
|
+
"aria-disabled": t.disabled || void 0,
|
|
80
|
+
disabled: t.disabled,
|
|
81
|
+
tabindex: l === x.value ? 0 : -1,
|
|
82
|
+
type: "button",
|
|
83
|
+
onClick: (o) => v(l, t.id),
|
|
84
|
+
onKeydown: (o) => w(o, l)
|
|
85
|
+
}, [
|
|
86
|
+
t.icon ? (u(), h(E(t.icon), {
|
|
87
|
+
key: 0,
|
|
88
|
+
class: "az-tabs__icon",
|
|
89
|
+
"aria-hidden": "true"
|
|
90
|
+
})) : p("", !0),
|
|
91
|
+
b("div", S, [
|
|
92
|
+
b("span", null, N(t.label), 1)
|
|
93
|
+
]),
|
|
94
|
+
t.badge ? (u(), c("span", j, [
|
|
95
|
+
R(V(O), {
|
|
96
|
+
label: t.badge
|
|
97
|
+
}, null, 8, ["label"])
|
|
98
|
+
])) : p("", !0)
|
|
99
|
+
], 42, H)
|
|
100
|
+
]))), 128))
|
|
101
|
+
], 8, $),
|
|
102
|
+
i.divider ? (u(), h(V(L), { key: 0 })) : p("", !0)
|
|
103
|
+
], 2));
|
|
104
|
+
}
|
|
105
|
+
}), P = (i, f) => {
|
|
106
|
+
const a = i.__vccOpts || i;
|
|
107
|
+
for (const [m, s] of f)
|
|
108
|
+
a[m] = s;
|
|
109
|
+
return a;
|
|
110
|
+
}, M = /* @__PURE__ */ P(F, [["__scopeId", "data-v-91787911"]]);
|
|
111
|
+
export {
|
|
112
|
+
M as AzTabs
|
|
113
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
(function(s,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue"),require("@ptlm-azulejo/divider"),require("@ptlm-azulejo/number-badge")):typeof define=="function"&&define.amd?define(["exports","vue","@ptlm-azulejo/divider","@ptlm-azulejo/number-badge"],e):(s=typeof globalThis!="undefined"?globalThis:s||self,e(s.tabs={},s.Vue,s.divider,s["number-badge"]))})(this,function(s,e,k,g){"use strict";const z=["aria-label"],h=["aria-selected","aria-disabled","disabled","tabindex","onClick","onKeydown"],V={class:"az-tabs__label"},B={key:1,class:"az-tabs__badge"},x=((c,u)=>{const l=c.__vccOpts||c;for(const[f,o]of u)l[f]=o;return l})(e.defineComponent({__name:"index",props:{description:{},size:{default:"m"},divider:{type:Boolean,default:!0},centered:{type:Boolean},modelValue:{default:0},tabs:{}},emits:["update:modelValue"],setup(c,{emit:u}){const l=c,f=e.computed(()=>({"az-tabs--centered":l.centered,[`az-tabs--${l.size}`]:l.size!=="m"})),o=e.computed({get(){return l.modelValue},set(t){N("update:modelValue",t)}}),r=e.computed(()=>l.tabs.map((t,i)=>i).filter(t=>!l.tabs[t].disabled)),b=e.computed(()=>typeof o.value=="string"?l.tabs.findIndex(t=>t.id===o.value):typeof o.value=="number"&&o.value>=0&&o.value<l.tabs.length?o.value:-1),T=e.computed(()=>r.value.length===0?-1:r.value.includes(b.value)?b.value:r.value[0]),C=e.useTemplateRef("tab"),m=(t,i)=>{const a=typeof l.modelValue=="string"?l.tabs.find(d=>d.id===i):l.tabs[t],n=typeof l.modelValue=="string"?i:t;a!=null&&a.disabled||n!==o.value&&(o.value=n)},p=(t,i)=>{const a=typeof l.modelValue=="string"?i:t;return o.value===a};function E(t,i){if(t.key!=="ArrowRight"&&t.key!=="ArrowLeft"&&t.key!=="Home"&&t.key!=="End"||r.value.length===0)return;const a=r.value.indexOf(i);let n=null;if(t.key==="ArrowRight"){if(t.preventDefault(),a<0)return;n=(a+1)%r.value.length}else if(t.key==="ArrowLeft"){if(t.preventDefault(),a<0)return;n=(a-1+r.value.length)%r.value.length}else t.key==="Home"?(t.preventDefault(),n=0):t.key==="End"&&(t.preventDefault(),n=r.value.length-1);if(n!==null){const d=r.value[n];m(d,l.tabs[d].id),e.nextTick(()=>{var _,y;(y=(_=C.value)==null?void 0:_[d])==null||y.focus()})}}const N=u;return(t,i)=>(e.openBlock(),e.createElementBlock("nav",{class:e.normalizeClass(["az-tabs",f.value])},[e.createElementVNode("ul",{role:"tablist",class:"az-tabs__list","aria-label":c.description},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(c.tabs,(a,n)=>(e.openBlock(),e.createElementBlock("li",{key:`tab-${n}`,role:"presentation",class:"az-tabs__item"},[e.createElementVNode("button",{ref_for:!0,ref:"tab",role:"tab",class:e.normalizeClass(["az-tabs__tab",{"az-tabs__tab--selected":p(n,a.id),"az-tabs__tab--disabled":a.disabled}]),"aria-selected":p(n,a.id),"aria-disabled":a.disabled||void 0,disabled:a.disabled,tabindex:n===T.value?0:-1,type:"button",onClick:d=>m(n,a.id),onKeydown:d=>E(d,n)},[a.icon?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(a.icon),{key:0,class:"az-tabs__icon","aria-hidden":"true"})):e.createCommentVNode("",!0),e.createElementVNode("div",V,[e.createElementVNode("span",null,e.toDisplayString(a.label),1)]),a.badge?(e.openBlock(),e.createElementBlock("span",B,[e.createVNode(e.unref(g.AzNumberBadge),{label:a.badge},null,8,["label"])])):e.createCommentVNode("",!0)],42,h)]))),128))],8,z),c.divider?(e.openBlock(),e.createBlock(e.unref(k.AzDivider),{key:0})):e.createCommentVNode("",!0)],2))}}),[["__scopeId","data-v-91787911"]]);s.AzTabs=x,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/vue3';
|
|
2
|
+
import { default as Tabs } from './index.vue';
|
|
3
|
+
|
|
4
|
+
declare const meta: Meta<typeof Tabs>;
|
|
5
|
+
export default meta;
|
|
6
|
+
type Story = StoryObj<typeof Tabs>;
|
|
7
|
+
export declare const Default: Story;
|
|
8
|
+
export declare const Small: Story;
|
|
9
|
+
export declare const Icons: Story;
|
|
10
|
+
export declare const Centered: Story;
|
|
11
|
+
export declare const NoDivider: Story;
|
|
12
|
+
export declare const Disabled: Story;
|
|
13
|
+
export declare const WithBadges: Story;
|
|
14
|
+
//# sourceMappingURL=index.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.stories.d.ts","sourceRoot":"","sources":["../../src/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAErD,OAAO,+BAA+B,CAAA;AACtC,OAAO,IAAI,MAAM,aAAa,CAAA;AAE9B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CA8C3B,CAAC;AACF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,KAAK,EAAE,KA0BnB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAyBnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAEvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAuBtB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAwBxB,CAAC"}
|
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
import { Component } from 'vue';
|
|
2
|
+
|
|
3
|
+
declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
4
|
+
/**
|
|
5
|
+
* A description indicating the purpose of the set of tabs. Useful for improving the accessibility of the component.
|
|
6
|
+
*/
|
|
7
|
+
description?: string;
|
|
8
|
+
/**
|
|
9
|
+
* Defines the size of the tab.
|
|
10
|
+
*/
|
|
11
|
+
size?: "s" | "m";
|
|
12
|
+
/**
|
|
13
|
+
* If `true`, the divider will appear.
|
|
14
|
+
*/
|
|
15
|
+
divider?: boolean;
|
|
16
|
+
/**
|
|
17
|
+
* If `true`, the tabs of the component will be centered.
|
|
18
|
+
*/
|
|
19
|
+
centered?: boolean;
|
|
20
|
+
/**
|
|
21
|
+
* Defines the currently active tab.
|
|
22
|
+
*
|
|
23
|
+
* - If a `number` is provided, it represents the index of the tab.
|
|
24
|
+
* - If a `string` is provided, it must match the `id` of one of the tabs.
|
|
25
|
+
*/
|
|
26
|
+
modelValue?: string | number;
|
|
27
|
+
/**
|
|
28
|
+
* An array of objects that allows you to provide all the data needed to generate the content for each tab.
|
|
29
|
+
*/
|
|
30
|
+
tabs: Array<{
|
|
31
|
+
/**
|
|
32
|
+
* Unique identifier for the tab.
|
|
33
|
+
*/
|
|
34
|
+
id?: string;
|
|
35
|
+
/**
|
|
36
|
+
* The icon displayed for the tab from Mozaic-icon-vue.
|
|
37
|
+
*/
|
|
38
|
+
icon?: Component;
|
|
39
|
+
/**
|
|
40
|
+
* The number badge displayed for the tab.
|
|
41
|
+
*/
|
|
42
|
+
badge?: number;
|
|
43
|
+
/**
|
|
44
|
+
* The label displayed for the tab.
|
|
45
|
+
*/
|
|
46
|
+
label: string;
|
|
47
|
+
/**
|
|
48
|
+
* If `true`, the tab will be disabled.
|
|
49
|
+
*/
|
|
50
|
+
disabled?: boolean;
|
|
51
|
+
}>;
|
|
52
|
+
}>, {
|
|
53
|
+
modelValue: number;
|
|
54
|
+
size: string;
|
|
55
|
+
divider: boolean;
|
|
56
|
+
}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
57
|
+
"update:modelValue": (value?: string | number | undefined) => void;
|
|
58
|
+
}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
59
|
+
/**
|
|
60
|
+
* A description indicating the purpose of the set of tabs. Useful for improving the accessibility of the component.
|
|
61
|
+
*/
|
|
62
|
+
description?: string;
|
|
63
|
+
/**
|
|
64
|
+
* Defines the size of the tab.
|
|
65
|
+
*/
|
|
66
|
+
size?: "s" | "m";
|
|
67
|
+
/**
|
|
68
|
+
* If `true`, the divider will appear.
|
|
69
|
+
*/
|
|
70
|
+
divider?: boolean;
|
|
71
|
+
/**
|
|
72
|
+
* If `true`, the tabs of the component will be centered.
|
|
73
|
+
*/
|
|
74
|
+
centered?: boolean;
|
|
75
|
+
/**
|
|
76
|
+
* Defines the currently active tab.
|
|
77
|
+
*
|
|
78
|
+
* - If a `number` is provided, it represents the index of the tab.
|
|
79
|
+
* - If a `string` is provided, it must match the `id` of one of the tabs.
|
|
80
|
+
*/
|
|
81
|
+
modelValue?: string | number;
|
|
82
|
+
/**
|
|
83
|
+
* An array of objects that allows you to provide all the data needed to generate the content for each tab.
|
|
84
|
+
*/
|
|
85
|
+
tabs: Array<{
|
|
86
|
+
/**
|
|
87
|
+
* Unique identifier for the tab.
|
|
88
|
+
*/
|
|
89
|
+
id?: string;
|
|
90
|
+
/**
|
|
91
|
+
* The icon displayed for the tab from Mozaic-icon-vue.
|
|
92
|
+
*/
|
|
93
|
+
icon?: Component;
|
|
94
|
+
/**
|
|
95
|
+
* The number badge displayed for the tab.
|
|
96
|
+
*/
|
|
97
|
+
badge?: number;
|
|
98
|
+
/**
|
|
99
|
+
* The label displayed for the tab.
|
|
100
|
+
*/
|
|
101
|
+
label: string;
|
|
102
|
+
/**
|
|
103
|
+
* If `true`, the tab will be disabled.
|
|
104
|
+
*/
|
|
105
|
+
disabled?: boolean;
|
|
106
|
+
}>;
|
|
107
|
+
}>, {
|
|
108
|
+
modelValue: number;
|
|
109
|
+
size: string;
|
|
110
|
+
divider: boolean;
|
|
111
|
+
}>>> & Readonly<{
|
|
112
|
+
"onUpdate:modelValue"?: ((value?: string | number | undefined) => any) | undefined;
|
|
113
|
+
}>, {
|
|
114
|
+
size: "s" | "m";
|
|
115
|
+
divider: boolean;
|
|
116
|
+
modelValue: string | number;
|
|
117
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
118
|
+
export default _default;
|
|
119
|
+
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
120
|
+
type __VLS_TypePropsToRuntimeProps<T> = {
|
|
121
|
+
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
122
|
+
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
123
|
+
} : {
|
|
124
|
+
type: import('vue').PropType<T[K]>;
|
|
125
|
+
required: true;
|
|
126
|
+
};
|
|
127
|
+
};
|
|
128
|
+
type __VLS_WithDefaults<P, D> = {
|
|
129
|
+
[K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
|
|
130
|
+
default: D[K];
|
|
131
|
+
}> : P[K];
|
|
132
|
+
};
|
|
133
|
+
type __VLS_Prettify<T> = {
|
|
134
|
+
[K in keyof T]: T[K];
|
|
135
|
+
} & {};
|
|
136
|
+
//# sourceMappingURL=index.vue.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.vue.d.ts","sourceRoot":"","sources":["../../src/index.vue"],"names":[],"mappings":"AAEA,OAAO,EAAsC,KAAK,SAAS,EAAE,MAAM,KAAK,CAAC;;IA0crE;;OAEG;kBACW,MAAM;IACpB;;OAEG;WACI,GAAG,GAAG,GAAG;IAChB;;OAEG;cACO,OAAO;IACjB;;OAEG;eACQ,OAAO;IAClB;;;;;OAKG;iBACU,MAAM,GAAG,MAAM;IAC5B;;OAEG;UACG,KAAK,CAAC;QACV;;WAEG;QACH,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ;;WAEG;QACH,IAAI,CAAC,EAAE,SAAS,CAAC;QACjB;;WAEG;QACH,KAAK,CAAC,EAAE,MAAM,CAAC;QACf;;WAEG;QACH,KAAK,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,CAAC;;;;;;;;IA/CF;;OAEG;kBACW,MAAM;IACpB;;OAEG;WACI,GAAG,GAAG,GAAG;IAChB;;OAEG;cACO,OAAO;IACjB;;OAEG;eACQ,OAAO;IAClB;;;;;OAKG;iBACU,MAAM,GAAG,MAAM;IAC5B;;OAEG;UACG,KAAK,CAAC;QACV;;WAEG;QACH,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ;;WAEG;QACH,IAAI,CAAC,EAAE,SAAS,CAAC;QACjB;;WAEG;QACH,KAAK,CAAC,EAAE,MAAM,CAAC;QACf;;WAEG;QACH,KAAK,EAAE,MAAM,CAAC;QACd;;WAEG;QACH,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,CAAC;;;;;;;;UAxCK,GAAG,GAAG,GAAG;aAIN,OAAO;gBAWJ,MAAM,GAAG,MAAM;;AA5BhC,wBAwDG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
|
package/dist/style.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){[data-v-91787911],[data-v-91787911]:before,[data-v-91787911]:after,[data-v-91787911]::backdrop{--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-font-weight:initial}}}.az-tabs[data-v-91787911]{background-color:var(--tabs-color-background-default);width:100%;position:relative}.az-tabs__list[data-v-91787911]{margin:calc(var(--spacing,.25rem) * 0);padding:calc(var(--spacing,.25rem) * 0);gap:var(--spacing-100);padding:var(--tabs-list-padding,var(--spacing-100) var(--spacing-050));list-style-type:none;display:flex;overflow-x:auto}.az-tabs--centered .az-tabs__list[data-v-91787911]{justify-content:center}@media screen and (min-width:769px){.az-tabs__list[data-v-91787911]{overflow:hidden}}.az-tabs__tab[data-v-91787911]{cursor:pointer;--tw-border-style:none;--tw-outline-style:none;border-radius:var(--border-radius-s);color:var(--tabs-color-text-default);justify-content:center;align-items:center;gap:var(--spacing-050);background-color:#0000;border-style:none;outline-style:none;text-decoration-line:none;display:flex}.az-tabs__tab[data-v-91787911]:hover{background-color:var(--tabs-color-background-hover)}.az-tabs__tab[data-v-91787911]:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color:var(--color-blue-500,oklch(62.3% .214 259.815));--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.az-tabs__tab--selected[data-v-91787911]{background-color:var(--tabs-color-background-selected);--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);color:var(--tabs-color-text-selected)}.az-tabs__tab--selected[data-v-91787911]:hover{background-color:var(--tabs-color-background-selected-hover)}.az-tabs__tab--disabled[data-v-91787911]{cursor:not-allowed;color:var(--tabs-color-text-disabled)}.az-tabs__tab--disabled[data-v-91787911]:hover{background-color:#0000}.az-tabs__label[data-v-91787911]{pointer-events:none;white-space:nowrap}.az-tabs__icon[data-v-91787911]{fill:currentColor}.az-tabs--s[data-v-91787911]{height:var(--spacing-500)}.az-tabs--m[data-v-91787911]{height:var(--spacing-700)}.az-tabs--s .az-tabs__tab[data-v-91787911],.az-tabs__tab--s[data-v-91787911]{font-size:var(--font-size-04);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));height:var(--spacing-300);padding-left:var(--spacing-100);padding-right:var(--spacing-100)}.az-tabs--s .az-tabs__icon[data-v-91787911],.az-tabs__tab--s .az-tabs__icon[data-v-91787911]{width:var(--spacing-250);height:var(--spacing-250)}.az-tabs--m .az-tabs__tab[data-v-91787911],.az-tabs__tab--m[data-v-91787911]{font-size:var(--font-size-05);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));height:var(--spacing-500);padding-left:var(--spacing-150);padding-right:var(--spacing-150)}.az-tabs--m .az-tabs__icon[data-v-91787911],.az-tabs__tab--m .az-tabs__icon[data-v-91787911]{width:var(--spacing-300);height:var(--spacing-300)}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-font-weight{syntax:"*";inherits:false}
|
package/package.json
ADDED
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@ptlm-azulejo/tabs",
|
|
3
|
+
"version": "0.0.1-alpha.35",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"main": "./dist/index.umd.cjs",
|
|
6
|
+
"module": "./dist/index.js",
|
|
7
|
+
"types": "./dist/index.d.ts",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"types": "./dist/index.d.ts",
|
|
11
|
+
"import": "./dist/index.js",
|
|
12
|
+
"require": "./dist/index.umd.cjs"
|
|
13
|
+
},
|
|
14
|
+
"./style.css": "./dist/style.css"
|
|
15
|
+
},
|
|
16
|
+
"scripts": {
|
|
17
|
+
"build": "vite build",
|
|
18
|
+
"test": "vitest --run --passWithNoTests",
|
|
19
|
+
"storybook": "storybook dev -p 6006",
|
|
20
|
+
"build-storybook": "storybook build"
|
|
21
|
+
},
|
|
22
|
+
"publishConfig": {
|
|
23
|
+
"access": "public",
|
|
24
|
+
"registry": "https://registry.npmjs.org"
|
|
25
|
+
},
|
|
26
|
+
"files": [
|
|
27
|
+
"dist/*"
|
|
28
|
+
],
|
|
29
|
+
"devDependencies": {
|
|
30
|
+
"@ptlm-azulejo/themes": "*",
|
|
31
|
+
"@storybook/addon-essentials": "^7.0.0",
|
|
32
|
+
"@storybook/addon-interactions": "^7.0.0",
|
|
33
|
+
"@storybook/vue3": "^7.0.0",
|
|
34
|
+
"@storybook/vue3-vite": "^7.0.0",
|
|
35
|
+
"@tailwindcss/vite": "^4.0.0",
|
|
36
|
+
"storybook": "^7.0.0",
|
|
37
|
+
"tailwindcss": "^4.0.0",
|
|
38
|
+
"vue": "^3.3.4"
|
|
39
|
+
},
|
|
40
|
+
"peerDependencies": {
|
|
41
|
+
"vue": ">=3.0.0"
|
|
42
|
+
},
|
|
43
|
+
"dependencies": {
|
|
44
|
+
"@ptlm-azulejo/divider": "^0.0.1-alpha.32",
|
|
45
|
+
"@ptlm-azulejo/number-badge": "^0.0.1-alpha.33",
|
|
46
|
+
"@ptlm-azulejo/themes": "^1.1.0"
|
|
47
|
+
}
|
|
48
|
+
}
|