@volverjs/ui-vue 0.0.6-beta.2 → 0.0.6-beta.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.
Files changed (39) hide show
  1. package/README.md +2 -1
  2. package/dist/components/VvAvatarGroup/VvAvatarGroup.es.js +4 -2
  3. package/dist/components/VvAvatarGroup/VvAvatarGroup.umd.js +1 -1
  4. package/dist/components/VvNav/VvNav.es.js +450 -0
  5. package/dist/components/VvNav/VvNav.umd.js +1 -0
  6. package/dist/components/VvNav/VvNav.vue.d.ts +47 -0
  7. package/dist/components/VvNav/index.d.ts +32 -0
  8. package/dist/components/VvNavItemTitle/VvNavItemTitle.es.js +19 -0
  9. package/dist/components/VvNavItemTitle/VvNavItemTitle.umd.js +1 -0
  10. package/dist/components/VvNavItemTitle/VvNavItemTitle.vue.d.ts +6 -0
  11. package/dist/components/VvNavSeparator/VvNavSeparator.d.ts +2 -0
  12. package/dist/components/VvTab/VvTab.es.js +505 -0
  13. package/dist/components/VvTab/VvTab.umd.js +1 -0
  14. package/dist/components/VvTab/VvTab.vue.d.ts +52 -0
  15. package/dist/components/VvTab/index.d.ts +23 -0
  16. package/dist/icons.es.js +3 -3
  17. package/dist/icons.umd.js +1 -1
  18. package/dist/stories/Nav/Nav.settings.d.ts +33 -0
  19. package/dist/stories/Nav/Nav.test.d.ts +2 -0
  20. package/dist/stories/Tab/Tab.settings.d.ts +37 -0
  21. package/dist/stories/Tab/Tab.test.d.ts +2 -0
  22. package/package.json +25 -1
  23. package/src/assets/icons/detailed.json +1 -1
  24. package/src/assets/icons/normal.json +1 -1
  25. package/src/assets/icons/simple.json +1 -1
  26. package/src/components/VvAvatarGroup/VvAvatarGroup.vue +2 -2
  27. package/src/components/VvNav/VvNav.vue +66 -0
  28. package/src/components/VvNav/index.ts +21 -0
  29. package/src/components/VvNavItemTitle/VvNavItemTitle.vue +11 -0
  30. package/src/components/VvNavSeparator/VvNavSeparator.ts +8 -0
  31. package/src/components/VvTab/VvTab.vue +53 -0
  32. package/src/components/VvTab/index.ts +13 -0
  33. package/src/stories/Nav/Nav.settings.ts +34 -0
  34. package/src/stories/Nav/Nav.stories.mdx +28 -0
  35. package/src/stories/Nav/Nav.test.ts +32 -0
  36. package/src/stories/Nav/NavModifiers.stories.mdx +48 -0
  37. package/src/stories/Tab/Tab.settings.ts +41 -0
  38. package/src/stories/Tab/Tab.stories.mdx +65 -0
  39. package/src/stories/Tab/Tab.test.ts +37 -0
@@ -0,0 +1,505 @@
1
+ import { inject, defineComponent, ref, watch, computed, openBlock, createBlock, resolveDynamicComponent, unref, mergeProps, withCtx, renderSlot, createTextVNode, toDisplayString, toRefs, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, createVNode, toHandlers } from "vue";
2
+ var Side = /* @__PURE__ */ ((Side2) => {
3
+ Side2["left"] = "left";
4
+ Side2["right"] = "right";
5
+ Side2["top"] = "top";
6
+ Side2["bottom"] = "bottom";
7
+ return Side2;
8
+ })(Side || {});
9
+ var Placement = /* @__PURE__ */ ((Placement2) => {
10
+ Placement2["topStart"] = "top-start";
11
+ Placement2["topEnd"] = "top-end";
12
+ Placement2["bottomStart"] = "bottom-start";
13
+ Placement2["bottomEnd"] = "bottom-end";
14
+ Placement2["leftStart"] = "left-start";
15
+ Placement2["leftEnd"] = "left-end";
16
+ Placement2["rightStart"] = "right-start";
17
+ Placement2["rightEnd"] = "right-end";
18
+ return Placement2;
19
+ })(Placement || {});
20
+ var Position = /* @__PURE__ */ ((Position2) => {
21
+ Position2["before"] = "before";
22
+ Position2["after"] = "after";
23
+ return Position2;
24
+ })(Position || {});
25
+ var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
26
+ ButtonType2["button"] = "button";
27
+ ButtonType2["submit"] = "submit";
28
+ ButtonType2["reset"] = "reset";
29
+ return ButtonType2;
30
+ })(ButtonType || {});
31
+ var ActionTag = /* @__PURE__ */ ((ActionTag2) => {
32
+ ActionTag2["nuxtLink"] = "nuxt-link";
33
+ ActionTag2["routerLink"] = "router-link";
34
+ ActionTag2["a"] = "a";
35
+ ActionTag2["button"] = "button";
36
+ return ActionTag2;
37
+ })(ActionTag || {});
38
+ var AnchorTarget = /* @__PURE__ */ ((AnchorTarget2) => {
39
+ AnchorTarget2["_blank"] = "_blank";
40
+ AnchorTarget2["_self"] = "_self";
41
+ AnchorTarget2["_parent"] = "_parent";
42
+ AnchorTarget2["_top"] = "_top";
43
+ return AnchorTarget2;
44
+ })(AnchorTarget || {});
45
+ const INJECTION_KEY_VOLVER = Symbol.for("volver");
46
+ const INJECTION_KEY_DROPDOWN_TRIGGER = Symbol.for("dropdownTrigger");
47
+ const INJECTION_KEY_DROPDOWN_ACTION = Symbol.for("dropdownAction");
48
+ const LinkProps = {
49
+ /**
50
+ * The router-link/nuxt-link property, if it is defined the button is rendered as a ruouter-link or nuxt-link.
51
+ * @see Documentation of [router-link](https://router.vuejs.org/api/#router-link) and [nuxt-link](https://nuxtjs.org/api/components-nuxt-link/)
52
+ */
53
+ to: {
54
+ type: [String, Object]
55
+ },
56
+ /**
57
+ * Anchor href
58
+ */
59
+ href: String,
60
+ /**
61
+ * Anchor target
62
+ */
63
+ target: {
64
+ type: String,
65
+ validator: (value) => Object.values(AnchorTarget).includes(value)
66
+ },
67
+ /**
68
+ * Anchor rel
69
+ */
70
+ rel: {
71
+ type: String,
72
+ default: "noopener noreferrer"
73
+ }
74
+ };
75
+ const DisabledProps = {
76
+ /**
77
+ * Whether the form control is disabled
78
+ */
79
+ disabled: Boolean
80
+ };
81
+ const ActiveProps = {
82
+ /**
83
+ * Whether the item is active
84
+ */
85
+ active: Boolean
86
+ };
87
+ const PressedProps = {
88
+ /**
89
+ * Whether the item is pressed
90
+ */
91
+ pressed: Boolean
92
+ };
93
+ const LabelProps = {
94
+ /**
95
+ * The item label
96
+ */
97
+ label: [String, Number]
98
+ };
99
+ const ModifiersProps = {
100
+ /**
101
+ * Component BEM modifiers
102
+ */
103
+ modifiers: [String, Array]
104
+ };
105
+ ({
106
+ /**
107
+ * VvIcon name or props
108
+ * @see VVIcon
109
+ */
110
+ icon: { type: [String, Object] },
111
+ /**
112
+ * VvIcon position
113
+ */
114
+ iconPosition: {
115
+ type: String,
116
+ default: Position.before,
117
+ validation: (value) => Object.values(Position).includes(value)
118
+ }
119
+ });
120
+ ({
121
+ /**
122
+ * Dropdown placement
123
+ */
124
+ placement: {
125
+ type: String,
126
+ default: Side.bottom,
127
+ validator: (value) => {
128
+ return Object.values(Side).includes(value) || Object.values(Placement).includes(value);
129
+ }
130
+ },
131
+ /**
132
+ * Dropdown strategy
133
+ */
134
+ strategy: {
135
+ type: String,
136
+ default: "absolute",
137
+ validator: (value) => {
138
+ return ["fixed", "absolute"].includes(value);
139
+ }
140
+ },
141
+ /**
142
+ * Dropdown show / hide transition name
143
+ */
144
+ transitionName: {
145
+ type: String
146
+ },
147
+ /**
148
+ * Offset of the dropdown from the trigger
149
+ * @see https://floating-ui.com/docs/offset
150
+ */
151
+ offset: {
152
+ type: [Number, String, Object],
153
+ default: 0
154
+ },
155
+ /**
156
+ * Move dropdown to the side if there is no space in the default position
157
+ * @see https://floating-ui.com/docs/shift
158
+ */
159
+ shift: {
160
+ type: [Boolean, Object],
161
+ default: false
162
+ },
163
+ /**
164
+ * Flip dropdown position if there is no space in the default position
165
+ * @see https://floating-ui.com/docs/flip
166
+ */
167
+ flip: {
168
+ type: [Boolean, Object],
169
+ default: true
170
+ },
171
+ /**
172
+ * Size of the dropdown
173
+ * @see https://floating-ui.com/docs/size
174
+ */
175
+ size: {
176
+ type: [Boolean, Object],
177
+ default: () => ({ padding: 10 })
178
+ },
179
+ /**
180
+ * Automatically change the position of the dropdown
181
+ * @see https://floating-ui.com/docs/autoPlacement
182
+ */
183
+ autoPlacement: {
184
+ type: [Boolean, Object],
185
+ default: false
186
+ },
187
+ /**
188
+ * Add arrow to the dropdown
189
+ * @see https://floating-ui.com/docs/arrow
190
+ */
191
+ arrow: {
192
+ type: Boolean,
193
+ default: false
194
+ },
195
+ /**
196
+ * Close dropdown on click outside
197
+ */
198
+ autoClose: {
199
+ type: Boolean,
200
+ default: true
201
+ },
202
+ /**
203
+ * Autofocus first item on dropdown open
204
+ */
205
+ autofocusFirst: {
206
+ type: Boolean,
207
+ default: true
208
+ },
209
+ /**
210
+ * Set dropdown width to the same as the trigger
211
+ */
212
+ triggerWidth: {
213
+ type: Boolean
214
+ }
215
+ });
216
+ const ActionProps = {
217
+ ...DisabledProps,
218
+ ...LabelProps,
219
+ ...PressedProps,
220
+ ...ActiveProps,
221
+ ...LinkProps,
222
+ /**
223
+ * Button type
224
+ */
225
+ type: {
226
+ type: String,
227
+ default: ButtonType.button,
228
+ validator: (value) => Object.values(ButtonType).includes(value)
229
+ }
230
+ };
231
+ const VvTabProps = {
232
+ ...ModifiersProps,
233
+ items: {
234
+ type: Array,
235
+ required: true,
236
+ default: () => []
237
+ }
238
+ };
239
+ const VvTabEvents = ["click"];
240
+ const VvNavProps = {
241
+ ...ModifiersProps,
242
+ items: {
243
+ type: Array,
244
+ required: true,
245
+ default: () => []
246
+ }
247
+ };
248
+ const VvNavEvents = ["click"];
249
+ const VvActionEvents = ["click", "mouseover", "mouseleave"];
250
+ const VvActionProps = ActionProps;
251
+ function useVolver() {
252
+ return inject(INJECTION_KEY_VOLVER);
253
+ }
254
+ function useInjectedDropdownTrigger() {
255
+ return inject(INJECTION_KEY_DROPDOWN_TRIGGER, {});
256
+ }
257
+ function useInjectedDropdownAction() {
258
+ return inject(INJECTION_KEY_DROPDOWN_ACTION, {});
259
+ }
260
+ const __default__ = {
261
+ name: "VvAction"
262
+ };
263
+ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
264
+ ...__default__,
265
+ props: VvActionProps,
266
+ emits: VvActionEvents,
267
+ setup(__props, { expose, emit }) {
268
+ const props = __props;
269
+ const volver = useVolver();
270
+ const element = ref(null);
271
+ expose({ $el: element });
272
+ const {
273
+ reference: dropdownTriggerReference,
274
+ bus: dropdownEventBus,
275
+ aria: dropdownAria,
276
+ expanded: dropdownExpanded
277
+ } = useInjectedDropdownTrigger();
278
+ watch(
279
+ () => element.value,
280
+ (newValue) => {
281
+ if (dropdownTriggerReference) {
282
+ dropdownTriggerReference.value = newValue;
283
+ }
284
+ }
285
+ );
286
+ const pressed = computed(() => {
287
+ return props.pressed || (dropdownExpanded == null ? void 0 : dropdownExpanded.value);
288
+ });
289
+ const { role } = useInjectedDropdownAction();
290
+ const hasTag = computed(() => {
291
+ switch (true) {
292
+ case props.disabled:
293
+ return ActionTag.button;
294
+ case props.to !== void 0:
295
+ return (volver == null ? void 0 : volver.nuxt) ? ActionTag.nuxtLink : ActionTag.routerLink;
296
+ case props.href !== void 0:
297
+ return ActionTag.a;
298
+ default:
299
+ return ActionTag.button;
300
+ }
301
+ });
302
+ const hasProps = computed(() => {
303
+ const toReturn = {
304
+ ...dropdownAria == null ? void 0 : dropdownAria.value,
305
+ "aria-pressed": pressed.value ? true : void 0,
306
+ role
307
+ };
308
+ switch (hasTag.value) {
309
+ case ActionTag.a:
310
+ return {
311
+ ...toReturn,
312
+ href: props.href,
313
+ target: props.target,
314
+ rel: props.rel
315
+ };
316
+ case ActionTag.routerLink:
317
+ case ActionTag.nuxtLink:
318
+ return {
319
+ ...toReturn,
320
+ to: props.to,
321
+ target: props.target
322
+ };
323
+ default:
324
+ return {
325
+ ...toReturn,
326
+ type: props.type,
327
+ disabled: props.disabled
328
+ };
329
+ }
330
+ });
331
+ const onClick = (e) => {
332
+ if (props.disabled) {
333
+ e.preventDefault();
334
+ return;
335
+ }
336
+ dropdownEventBus == null ? void 0 : dropdownEventBus.emit("click", e);
337
+ emit("click", e);
338
+ };
339
+ const onMouseover = (e) => {
340
+ dropdownEventBus == null ? void 0 : dropdownEventBus.emit("mouseover", e);
341
+ emit("mouseover", e);
342
+ };
343
+ const onMouseleave = (e) => {
344
+ dropdownEventBus == null ? void 0 : dropdownEventBus.emit("mouseleave", e);
345
+ emit("mouseleave", e);
346
+ };
347
+ return (_ctx, _cache) => {
348
+ return openBlock(), createBlock(resolveDynamicComponent(unref(hasTag)), mergeProps(unref(hasProps), {
349
+ ref_key: "element",
350
+ ref: element,
351
+ class: {
352
+ active: _ctx.active,
353
+ pressed: unref(pressed),
354
+ disabled: _ctx.disabled
355
+ },
356
+ onClickPassive: onClick,
357
+ onMouseoverPassive: onMouseover,
358
+ onMouseleavePassive: onMouseleave
359
+ }), {
360
+ default: withCtx(() => [
361
+ renderSlot(_ctx.$slots, "default", {}, () => [
362
+ createTextVNode(toDisplayString(_ctx.label), 1)
363
+ ])
364
+ ]),
365
+ _: 3
366
+ }, 16, ["class"]);
367
+ };
368
+ }
369
+ });
370
+ function useModifiers(prefix, modifiers, others) {
371
+ return computed(() => {
372
+ const toReturn = {
373
+ [prefix]: true
374
+ };
375
+ const modifiersArray = typeof (modifiers == null ? void 0 : modifiers.value) === "string" ? modifiers.value.split(" ") : modifiers == null ? void 0 : modifiers.value;
376
+ if (modifiersArray) {
377
+ if (Array.isArray(modifiersArray)) {
378
+ modifiersArray.forEach((modifier) => {
379
+ if (modifier) {
380
+ toReturn[`${prefix}--${modifier}`] = true;
381
+ }
382
+ });
383
+ }
384
+ }
385
+ if (others) {
386
+ Object.keys(others.value).forEach((key) => {
387
+ toReturn[`${prefix}--${key}`] = unref(others.value[key]);
388
+ });
389
+ }
390
+ return toReturn;
391
+ });
392
+ }
393
+ const _hoisted_1$1 = {
394
+ class: "vv-nav__menu",
395
+ role: "menu",
396
+ "aria-busy": "true"
397
+ };
398
+ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
399
+ __name: "VvNav",
400
+ props: VvNavProps,
401
+ emits: VvNavEvents,
402
+ setup(__props, { emit }) {
403
+ const props = __props;
404
+ const { modifiers, items } = toRefs(props);
405
+ const activeItem = ref(null);
406
+ const bemCssClasses = useModifiers("vv-nav", modifiers);
407
+ const localItems = computed(() => {
408
+ return items.value.map((item, index) => {
409
+ return {
410
+ ...item,
411
+ id: item.id || `nav-item_${index}`
412
+ };
413
+ });
414
+ });
415
+ function onClick(item) {
416
+ if (!item.disabled) {
417
+ emit("click", item);
418
+ activeItem.value = item.id;
419
+ }
420
+ }
421
+ return (_ctx, _cache) => {
422
+ return openBlock(), createElementBlock("nav", {
423
+ class: normalizeClass(unref(bemCssClasses))
424
+ }, [
425
+ createElementVNode("ul", _hoisted_1$1, [
426
+ (openBlock(true), createElementBlock(Fragment, null, renderList(unref(localItems), (navItem) => {
427
+ return openBlock(), createElementBlock("li", {
428
+ key: navItem.id,
429
+ class: "vv-nav__item",
430
+ role: "presentation"
431
+ }, [
432
+ createVNode(_sfc_main$2, mergeProps({
433
+ disabled: navItem.disabled,
434
+ to: navItem.to,
435
+ href: navItem.href,
436
+ tabindex: 0
437
+ }, {
438
+ class: [{
439
+ current: unref(activeItem) == navItem.id,
440
+ disabled: navItem.disabled
441
+ }, "vv-nav__item-label"]
442
+ }, toHandlers(navItem.on || {}), {
443
+ onClick: ($event) => onClick(navItem)
444
+ }), {
445
+ default: withCtx(() => [
446
+ createTextVNode(toDisplayString(navItem.title), 1)
447
+ ]),
448
+ _: 2
449
+ }, 1040, ["class", "onClick"])
450
+ ]);
451
+ }), 128))
452
+ ])
453
+ ], 2);
454
+ };
455
+ }
456
+ });
457
+ const _hoisted_1 = ["id"];
458
+ const _sfc_main = /* @__PURE__ */ defineComponent({
459
+ __name: "VvTab",
460
+ props: VvTabProps,
461
+ emits: VvTabEvents,
462
+ setup(__props, { emit }) {
463
+ const props = __props;
464
+ const { modifiers, items } = toRefs(props);
465
+ const activeTab = ref(null);
466
+ const bemCssClasses = useModifiers("vv-tab", modifiers);
467
+ const localItems = computed(() => {
468
+ return items.value.map((item, index) => {
469
+ return {
470
+ ...item,
471
+ id: item.id || `tab-item_${index}`
472
+ };
473
+ });
474
+ });
475
+ function onClick(item) {
476
+ if (!item.disabled) {
477
+ emit("click", item);
478
+ activeTab.value = item.id;
479
+ }
480
+ }
481
+ return (_ctx, _cache) => {
482
+ return openBlock(), createElementBlock("div", {
483
+ class: normalizeClass(unref(bemCssClasses))
484
+ }, [
485
+ createVNode(_sfc_main$1, {
486
+ items: unref(localItems),
487
+ modifiers: "tabs full",
488
+ onClick
489
+ }, null, 8, ["items"]),
490
+ (openBlock(true), createElementBlock(Fragment, null, renderList(unref(localItems), (item) => {
491
+ return openBlock(), createElementBlock("article", {
492
+ id: item.id,
493
+ key: item.id,
494
+ class: normalizeClass([{ target: unref(activeTab) === item.id }, "vv-tab__panel"])
495
+ }, [
496
+ renderSlot(_ctx.$slots, `${item.id}`)
497
+ ], 10, _hoisted_1);
498
+ }), 128))
499
+ ], 2);
500
+ };
501
+ }
502
+ });
503
+ export {
504
+ _sfc_main as default
505
+ };
@@ -0,0 +1 @@
1
+ !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define(["vue"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).VvTab=t(e.vue)}(this,(function(e){"use strict";var t=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(t||{}),o=(e=>(e.before="before",e.after="after",e))(o||{}),n=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(n||{}),r=(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(r||{}),l=(e=>(e._blank="_blank",e._self="_self",e._parent="_parent",e._top="_top",e))(l||{});const a=Symbol.for("volver"),i=Symbol.for("dropdownTrigger"),s=Symbol.for("dropdownAction"),u={to:{type:[String,Object]},href:String,target:{type:String,validator:e=>Object.values(l).includes(e)},rel:{type:String,default:"noopener noreferrer"}},d={disabled:Boolean},c={active:Boolean},f={pressed:Boolean},m={label:[String,Number]},v={modifiers:[String,Array]};o.before,t.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean;const p={...d,...m,...f,...c,...u,type:{type:String,default:n.button,validator:e=>Object.values(n).includes(e)}},b={...v,items:{type:Array,required:!0,default:()=>[]}},k={...v,items:{type:Array,required:!0,default:()=>[]}},y=p;const g=e.defineComponent({name:"VvAction",props:y,emits:["click","mouseover","mouseleave"],setup(t,{expose:o,emit:n}){const l=t,u=e.inject(a),d=e.ref(null);o({$el:d});const{reference:c,bus:f,aria:m,expanded:v}=e.inject(i,{});e.watch((()=>d.value),(e=>{c&&(c.value=e)}));const p=e.computed((()=>l.pressed||(null==v?void 0:v.value))),{role:b}=e.inject(s,{}),k=e.computed((()=>{switch(!0){case l.disabled:return r.button;case void 0!==l.to:return(null==u?void 0:u.nuxt)?r.nuxtLink:r.routerLink;case void 0!==l.href:return r.a;default:return r.button}})),y=e.computed((()=>{const e={...null==m?void 0:m.value,"aria-pressed":!!p.value||void 0,role:b};switch(k.value){case r.a:return{...e,href:l.href,target:l.target,rel:l.rel};case r.routerLink:case r.nuxtLink:return{...e,to:l.to,target:l.target};default:return{...e,type:l.type,disabled:l.disabled}}})),g=e=>{l.disabled?e.preventDefault():(null==f||f.emit("click",e),n("click",e))},B=e=>{null==f||f.emit("mouseover",e),n("mouseover",e)},_=e=>{null==f||f.emit("mouseleave",e),n("mouseleave",e)};return(t,o)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(k)),e.mergeProps(e.unref(y),{ref_key:"element",ref:d,class:{active:t.active,pressed:e.unref(p),disabled:t.disabled},onClickPassive:g,onMouseoverPassive:B,onMouseleavePassive:_}),{default:e.withCtx((()=>[e.renderSlot(t.$slots,"default",{},(()=>[e.createTextVNode(e.toDisplayString(t.label),1)]))])),_:3},16,["class"]))}});function B(t,o,n){return e.computed((()=>{const r={[t]:!0},l="string"==typeof(null==o?void 0:o.value)?o.value.split(" "):null==o?void 0:o.value;return l&&Array.isArray(l)&&l.forEach((e=>{e&&(r[`${t}--${e}`]=!0)})),n&&Object.keys(n.value).forEach((o=>{r[`${t}--${o}`]=e.unref(n.value[o])})),r}))}const _={class:"vv-nav__menu",role:"menu","aria-busy":"true"},h=e.defineComponent({__name:"VvNav",props:k,emits:["click"],setup(t,{emit:o}){const n=t,{modifiers:r,items:l}=e.toRefs(n),a=e.ref(null),i=B("vv-nav",r),s=e.computed((()=>l.value.map(((e,t)=>({...e,id:e.id||`nav-item_${t}`})))));return(t,n)=>(e.openBlock(),e.createElementBlock("nav",{class:e.normalizeClass(e.unref(i))},[e.createElementVNode("ul",_,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(s),(t=>(e.openBlock(),e.createElementBlock("li",{key:t.id,class:"vv-nav__item",role:"presentation"},[e.createVNode(g,e.mergeProps({disabled:t.disabled,to:t.to,href:t.href,tabindex:0},{class:[{current:e.unref(a)==t.id,disabled:t.disabled},"vv-nav__item-label"]},e.toHandlers(t.on||{}),{onClick:e=>{var n;(n=t).disabled||(o("click",n),a.value=n.id)}}),{default:e.withCtx((()=>[e.createTextVNode(e.toDisplayString(t.title),1)])),_:2},1040,["class","onClick"])])))),128))])],2))}}),x=["id"];return e.defineComponent({__name:"VvTab",props:b,emits:["click"],setup(t,{emit:o}){const n=t,{modifiers:r,items:l}=e.toRefs(n),a=e.ref(null),i=B("vv-tab",r),s=e.computed((()=>l.value.map(((e,t)=>({...e,id:e.id||`tab-item_${t}`})))));function u(e){e.disabled||(o("click",e),a.value=e.id)}return(t,o)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(i))},[e.createVNode(h,{items:e.unref(s),modifiers:"tabs full",onClick:u},null,8,["items"]),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(s),(o=>(e.openBlock(),e.createElementBlock("article",{id:o.id,key:o.id,class:e.normalizeClass([{target:e.unref(a)===o.id},"vv-tab__panel"])},[e.renderSlot(t.$slots,`${o.id}`)],10,x)))),128))],2))}})}));
@@ -0,0 +1,52 @@
1
+ import type { NavItem } from '@/components/VvNav';
2
+ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
3
+ items: {
4
+ type: {
5
+ (arrayLength: number): NavItem[];
6
+ (...items: NavItem[]): NavItem[];
7
+ new (arrayLength: number): NavItem[];
8
+ new (...items: NavItem[]): NavItem[];
9
+ isArray(arg: any): arg is any[];
10
+ readonly prototype: any[];
11
+ from<T>(arrayLike: ArrayLike<T>): T[];
12
+ from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
13
+ from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
14
+ from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
15
+ of<T_4>(...items: T_4[]): T_4[];
16
+ readonly [Symbol.species]: ArrayConstructor;
17
+ };
18
+ required: boolean;
19
+ default: () => never[];
20
+ };
21
+ modifiers: globalThis.PropType<string | string[]>;
22
+ }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
23
+ items: {
24
+ type: {
25
+ (arrayLength: number): NavItem[];
26
+ (...items: NavItem[]): NavItem[];
27
+ new (arrayLength: number): NavItem[];
28
+ new (...items: NavItem[]): NavItem[];
29
+ isArray(arg: any): arg is any[];
30
+ readonly prototype: any[];
31
+ from<T>(arrayLike: ArrayLike<T>): T[];
32
+ from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
33
+ from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
34
+ from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
35
+ of<T_4>(...items: T_4[]): T_4[];
36
+ readonly [Symbol.species]: ArrayConstructor;
37
+ };
38
+ required: boolean;
39
+ default: () => never[];
40
+ };
41
+ modifiers: globalThis.PropType<string | string[]>;
42
+ }>> & {
43
+ [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
44
+ }, {
45
+ items: NavItem[];
46
+ }>, Record<string, (_: {}) => any>>;
47
+ export default _default;
48
+ type __VLS_WithTemplateSlots<T, S> = T & {
49
+ new (): {
50
+ $slots: S;
51
+ };
52
+ };
@@ -0,0 +1,23 @@
1
+ import type { NavItem } from '../VvNav';
2
+ export declare const VvTabProps: {
3
+ items: {
4
+ type: {
5
+ (arrayLength: number): NavItem[];
6
+ (...items: NavItem[]): NavItem[];
7
+ new (arrayLength: number): NavItem[];
8
+ new (...items: NavItem[]): NavItem[];
9
+ isArray(arg: any): arg is any[];
10
+ readonly prototype: any[];
11
+ from<T>(arrayLike: ArrayLike<T>): T[];
12
+ from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
13
+ from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
14
+ from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
15
+ of<T_4>(...items: T_4[]): T_4[];
16
+ readonly [Symbol.species]: ArrayConstructor;
17
+ };
18
+ required: boolean;
19
+ default: () => never[];
20
+ };
21
+ modifiers: globalThis.PropType<string | string[]>;
22
+ };
23
+ export declare const VvTabEvents: string[];
package/dist/icons.es.js CHANGED
@@ -1,5 +1,5 @@
1
1
  const prefix$2 = "normal";
2
- const lastModified$2 = 1680170037;
2
+ const lastModified$2 = 1680271524;
3
3
  const icons$3 = {
4
4
  add: {
5
5
  body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M4 12h16m-8-8v16"/>'
@@ -614,7 +614,7 @@ const normal = {
614
614
  height: height$1
615
615
  };
616
616
  const prefix$1 = "detailed";
617
- const lastModified$1 = 1680170037;
617
+ const lastModified$1 = 1680271524;
618
618
  const icons$2 = {
619
619
  add: {
620
620
  body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M4 15.999h24m-12-12v24"/>'
@@ -1227,7 +1227,7 @@ const detailed = {
1227
1227
  height
1228
1228
  };
1229
1229
  const prefix = "simple";
1230
- const lastModified = 1680170037;
1230
+ const lastModified = 1680271524;
1231
1231
  const icons$1 = {
1232
1232
  add: {
1233
1233
  body: '<path fill="none" stroke="currentColor" stroke-linecap="round" d="M.5 8h15M8 .5v15"/>'