@destyler/tabs 0.0.2 → 0.0.3
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/dist/index.cjs +41 -59
- package/dist/index.mjs +41 -59
- package/package.json +8 -7
package/dist/index.cjs
CHANGED
|
@@ -85,9 +85,7 @@ const DestylerTabsRoot = vue.defineComponent({
|
|
|
85
85
|
"asChild": this.$props.asChild,
|
|
86
86
|
"dir": this.dir,
|
|
87
87
|
"data-orientation": this.orientation
|
|
88
|
-
},
|
|
89
|
-
default: () => this.$slots.default?.()
|
|
90
|
-
});
|
|
88
|
+
}, () => this.$slots.default?.());
|
|
91
89
|
}
|
|
92
90
|
});
|
|
93
91
|
|
|
@@ -155,13 +153,9 @@ const DestylerTabsContent = vue.defineComponent({
|
|
|
155
153
|
"style": {
|
|
156
154
|
animationDuration: this.isMountAnimationPreventedRef ? "0s" : void 0
|
|
157
155
|
}
|
|
158
|
-
},
|
|
159
|
-
default
|
|
160
|
-
|
|
161
|
-
this.$props.forceMount || this.isSelected ? this.$slots.default?.() : null
|
|
162
|
-
];
|
|
163
|
-
}
|
|
164
|
-
}), [
|
|
156
|
+
}, () => [
|
|
157
|
+
this.$props.forceMount || this.isSelected ? this.$slots.default?.() : null
|
|
158
|
+
]), [
|
|
165
159
|
[directives.BindOnceDirective, { id: this.contentId }]
|
|
166
160
|
])
|
|
167
161
|
];
|
|
@@ -224,9 +218,7 @@ const DestylerTabsIndicator = vue.defineComponent({
|
|
|
224
218
|
"--destyler_tabs_indicator_size": `${this.indicatorStyle.size}px`,
|
|
225
219
|
"--destyler_tabs_indicator_position": `${this.indicatorStyle.position}px`
|
|
226
220
|
}
|
|
227
|
-
}),
|
|
228
|
-
default: () => this.$slots.default?.()
|
|
229
|
-
}) : null
|
|
221
|
+
}), () => this.$slots.default?.()) : null
|
|
230
222
|
];
|
|
231
223
|
}
|
|
232
224
|
});
|
|
@@ -268,19 +260,15 @@ const DestylerTabsList = vue.defineComponent({
|
|
|
268
260
|
loop: this.loop,
|
|
269
261
|
dir: this.context.dir.value,
|
|
270
262
|
orientation: this.context.orientation.value
|
|
263
|
+
}, () => vue.h(primitive.DestylerPrimitive, {
|
|
264
|
+
"ref": (el) => this.forwardRef(el),
|
|
265
|
+
"role": "tablist",
|
|
266
|
+
"asChild": this.$props.asChild,
|
|
267
|
+
"as": this.$props.as,
|
|
268
|
+
"aria-orientation": this.context.orientation.value
|
|
271
269
|
}, {
|
|
272
|
-
default: () =>
|
|
273
|
-
|
|
274
|
-
"ref": (el) => this.forwardRef(el),
|
|
275
|
-
"role": "tablist",
|
|
276
|
-
"asChild": this.$props.asChild,
|
|
277
|
-
"as": this.$props.as,
|
|
278
|
-
"aria-orientation": this.context.orientation.value
|
|
279
|
-
}, {
|
|
280
|
-
default: () => this.$slots.default?.()
|
|
281
|
-
});
|
|
282
|
-
}
|
|
283
|
-
});
|
|
270
|
+
default: () => this.$slots.default?.()
|
|
271
|
+
}));
|
|
284
272
|
}
|
|
285
273
|
});
|
|
286
274
|
|
|
@@ -326,41 +314,35 @@ const DestylerTabsTrigger = vue.defineComponent({
|
|
|
326
314
|
asChild: true,
|
|
327
315
|
focusable: !this.$props.disabled,
|
|
328
316
|
active: this.isSelected
|
|
329
|
-
}, {
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
if (!this.isSelected && !this.$props.disabled && isAutomaticActivation)
|
|
355
|
-
this.rootContext.changeModelValue(this.$props.value);
|
|
356
|
-
}
|
|
357
|
-
}, {
|
|
358
|
-
default: () => this.$slots.default?.()
|
|
359
|
-
}), [
|
|
360
|
-
[directives.BindOnceDirective, { id: this.triggerId }]
|
|
361
|
-
]);
|
|
317
|
+
}, () => vue.withDirectives(vue.h(primitive.DestylerPrimitive, {
|
|
318
|
+
"ref": (el) => this.forwardRef(el),
|
|
319
|
+
"role": "tab",
|
|
320
|
+
"type": this.$props.as === "button" ? "button" : void 0,
|
|
321
|
+
"as": this.$props.as,
|
|
322
|
+
"asChild": this.$props.asChild,
|
|
323
|
+
"aria-selected": this.isSelected ? "true" : "false",
|
|
324
|
+
"aria-controls": this.contentId,
|
|
325
|
+
"data-state": this.isSelected ? "active" : "inactive",
|
|
326
|
+
"disabled": this.$props.disabled,
|
|
327
|
+
"data-disabled": this.$props.disabled ? "" : void 0,
|
|
328
|
+
"data-orientation": this.rootContext.orientation.value,
|
|
329
|
+
"onMousedown": vue.withModifiers((event) => {
|
|
330
|
+
if (!this.$props.disabled && event.ctrlKey === false)
|
|
331
|
+
this.rootContext.changeModelValue(this.$props.value);
|
|
332
|
+
else
|
|
333
|
+
event.preventDefault();
|
|
334
|
+
}, ["left"]),
|
|
335
|
+
"onKeydown": vue.withModifiers(() => {
|
|
336
|
+
this.rootContext.changeModelValue(this.$props.value);
|
|
337
|
+
}, ["enter", "space"]),
|
|
338
|
+
"onFocus": () => {
|
|
339
|
+
const isAutomaticActivation = this.rootContext.activationMode !== "manual";
|
|
340
|
+
if (!this.isSelected && !this.$props.disabled && isAutomaticActivation)
|
|
341
|
+
this.rootContext.changeModelValue(this.$props.value);
|
|
362
342
|
}
|
|
363
|
-
})
|
|
343
|
+
}, () => this.$slots.default?.()), [
|
|
344
|
+
[directives.BindOnceDirective, { id: this.triggerId }]
|
|
345
|
+
]));
|
|
364
346
|
}
|
|
365
347
|
});
|
|
366
348
|
|
package/dist/index.mjs
CHANGED
|
@@ -83,9 +83,7 @@ const DestylerTabsRoot = defineComponent({
|
|
|
83
83
|
"asChild": this.$props.asChild,
|
|
84
84
|
"dir": this.dir,
|
|
85
85
|
"data-orientation": this.orientation
|
|
86
|
-
},
|
|
87
|
-
default: () => this.$slots.default?.()
|
|
88
|
-
});
|
|
86
|
+
}, () => this.$slots.default?.());
|
|
89
87
|
}
|
|
90
88
|
});
|
|
91
89
|
|
|
@@ -153,13 +151,9 @@ const DestylerTabsContent = defineComponent({
|
|
|
153
151
|
"style": {
|
|
154
152
|
animationDuration: this.isMountAnimationPreventedRef ? "0s" : void 0
|
|
155
153
|
}
|
|
156
|
-
},
|
|
157
|
-
default
|
|
158
|
-
|
|
159
|
-
this.$props.forceMount || this.isSelected ? this.$slots.default?.() : null
|
|
160
|
-
];
|
|
161
|
-
}
|
|
162
|
-
}), [
|
|
154
|
+
}, () => [
|
|
155
|
+
this.$props.forceMount || this.isSelected ? this.$slots.default?.() : null
|
|
156
|
+
]), [
|
|
163
157
|
[BindOnceDirective, { id: this.contentId }]
|
|
164
158
|
])
|
|
165
159
|
];
|
|
@@ -222,9 +216,7 @@ const DestylerTabsIndicator = defineComponent({
|
|
|
222
216
|
"--destyler_tabs_indicator_size": `${this.indicatorStyle.size}px`,
|
|
223
217
|
"--destyler_tabs_indicator_position": `${this.indicatorStyle.position}px`
|
|
224
218
|
}
|
|
225
|
-
}),
|
|
226
|
-
default: () => this.$slots.default?.()
|
|
227
|
-
}) : null
|
|
219
|
+
}), () => this.$slots.default?.()) : null
|
|
228
220
|
];
|
|
229
221
|
}
|
|
230
222
|
});
|
|
@@ -266,19 +258,15 @@ const DestylerTabsList = defineComponent({
|
|
|
266
258
|
loop: this.loop,
|
|
267
259
|
dir: this.context.dir.value,
|
|
268
260
|
orientation: this.context.orientation.value
|
|
261
|
+
}, () => h(DestylerPrimitive, {
|
|
262
|
+
"ref": (el) => this.forwardRef(el),
|
|
263
|
+
"role": "tablist",
|
|
264
|
+
"asChild": this.$props.asChild,
|
|
265
|
+
"as": this.$props.as,
|
|
266
|
+
"aria-orientation": this.context.orientation.value
|
|
269
267
|
}, {
|
|
270
|
-
default: () =>
|
|
271
|
-
|
|
272
|
-
"ref": (el) => this.forwardRef(el),
|
|
273
|
-
"role": "tablist",
|
|
274
|
-
"asChild": this.$props.asChild,
|
|
275
|
-
"as": this.$props.as,
|
|
276
|
-
"aria-orientation": this.context.orientation.value
|
|
277
|
-
}, {
|
|
278
|
-
default: () => this.$slots.default?.()
|
|
279
|
-
});
|
|
280
|
-
}
|
|
281
|
-
});
|
|
268
|
+
default: () => this.$slots.default?.()
|
|
269
|
+
}));
|
|
282
270
|
}
|
|
283
271
|
});
|
|
284
272
|
|
|
@@ -324,41 +312,35 @@ const DestylerTabsTrigger = defineComponent({
|
|
|
324
312
|
asChild: true,
|
|
325
313
|
focusable: !this.$props.disabled,
|
|
326
314
|
active: this.isSelected
|
|
327
|
-
}, {
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
if (!this.isSelected && !this.$props.disabled && isAutomaticActivation)
|
|
353
|
-
this.rootContext.changeModelValue(this.$props.value);
|
|
354
|
-
}
|
|
355
|
-
}, {
|
|
356
|
-
default: () => this.$slots.default?.()
|
|
357
|
-
}), [
|
|
358
|
-
[BindOnceDirective, { id: this.triggerId }]
|
|
359
|
-
]);
|
|
315
|
+
}, () => withDirectives(h(DestylerPrimitive, {
|
|
316
|
+
"ref": (el) => this.forwardRef(el),
|
|
317
|
+
"role": "tab",
|
|
318
|
+
"type": this.$props.as === "button" ? "button" : void 0,
|
|
319
|
+
"as": this.$props.as,
|
|
320
|
+
"asChild": this.$props.asChild,
|
|
321
|
+
"aria-selected": this.isSelected ? "true" : "false",
|
|
322
|
+
"aria-controls": this.contentId,
|
|
323
|
+
"data-state": this.isSelected ? "active" : "inactive",
|
|
324
|
+
"disabled": this.$props.disabled,
|
|
325
|
+
"data-disabled": this.$props.disabled ? "" : void 0,
|
|
326
|
+
"data-orientation": this.rootContext.orientation.value,
|
|
327
|
+
"onMousedown": withModifiers((event) => {
|
|
328
|
+
if (!this.$props.disabled && event.ctrlKey === false)
|
|
329
|
+
this.rootContext.changeModelValue(this.$props.value);
|
|
330
|
+
else
|
|
331
|
+
event.preventDefault();
|
|
332
|
+
}, ["left"]),
|
|
333
|
+
"onKeydown": withModifiers(() => {
|
|
334
|
+
this.rootContext.changeModelValue(this.$props.value);
|
|
335
|
+
}, ["enter", "space"]),
|
|
336
|
+
"onFocus": () => {
|
|
337
|
+
const isAutomaticActivation = this.rootContext.activationMode !== "manual";
|
|
338
|
+
if (!this.isSelected && !this.$props.disabled && isAutomaticActivation)
|
|
339
|
+
this.rootContext.changeModelValue(this.$props.value);
|
|
360
340
|
}
|
|
361
|
-
})
|
|
341
|
+
}, () => this.$slots.default?.()), [
|
|
342
|
+
[BindOnceDirective, { id: this.triggerId }]
|
|
343
|
+
]));
|
|
362
344
|
}
|
|
363
345
|
});
|
|
364
346
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@destyler/tabs",
|
|
3
|
-
"
|
|
3
|
+
"type": "module",
|
|
4
|
+
"version": "0.0.3",
|
|
4
5
|
"description": "unstyled tabs component for vue",
|
|
5
6
|
"author": "Elone Hoo <elonehoo@gmail.com>",
|
|
6
7
|
"license": "MIT",
|
|
@@ -33,12 +34,12 @@
|
|
|
33
34
|
"vue": ">=3.3.4"
|
|
34
35
|
},
|
|
35
36
|
"dependencies": {
|
|
36
|
-
"@destyler/composition": "0.0.
|
|
37
|
-
"@destyler/directives": "0.0.
|
|
38
|
-
"@destyler/
|
|
39
|
-
"@destyler/
|
|
40
|
-
"@destyler/
|
|
41
|
-
"@destyler/
|
|
37
|
+
"@destyler/composition": "0.0.3",
|
|
38
|
+
"@destyler/directives": "0.0.3",
|
|
39
|
+
"@destyler/shared": "0.0.3",
|
|
40
|
+
"@destyler/roving-focus": "0.0.3",
|
|
41
|
+
"@destyler/primitive": "0.0.3",
|
|
42
|
+
"@destyler/presence": "0.0.3"
|
|
42
43
|
},
|
|
43
44
|
"scripts": {
|
|
44
45
|
"clear": "rimraf ./dist",
|