@phoenix-cg/v-tabs 0.2.0-beta.2 → 0.2.0-beta.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/v-tabs.es.js +21 -22
- package/dist/v-tabs.umd.js +1 -1
- package/package.json +1 -1
- package/src/components/VTabs.vue +2 -2
package/dist/v-tabs.es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { mergeModels as y, useModel as
|
|
1
|
+
import { mergeModels as y, useModel as R, ref as C, useTemplateRef as v, onMounted as x, onBeforeUnmount as z, watch as E, createElementBlock as n, openBlock as s, normalizeClass as b, createElementVNode as L, createCommentVNode as N, Fragment as h, renderList as $, renderSlot as M, toDisplayString as S, createTextVNode as F, normalizeStyle as O, nextTick as q } from "vue";
|
|
2
2
|
const A = { class: "v-tabs_inner" }, D = ["data-id", "onClick"], P = {
|
|
3
3
|
key: 0,
|
|
4
4
|
class: "v-tabs_tab_title"
|
|
@@ -42,13 +42,13 @@ const A = { class: "v-tabs_inner" }, D = ["data-id", "onClick"], P = {
|
|
|
42
42
|
modelModifiers: {}
|
|
43
43
|
}),
|
|
44
44
|
emits: /* @__PURE__ */ y(["update:modelValue"], ["update:modelValue"]),
|
|
45
|
-
setup(a, { emit:
|
|
46
|
-
const e = a, r =
|
|
45
|
+
setup(a, { emit: g }) {
|
|
46
|
+
const e = a, r = R(a, "modelValue"), k = g, u = C({});
|
|
47
47
|
let i = null;
|
|
48
|
-
const B = v("tabs"),
|
|
48
|
+
const B = v("tabs"), f = v("root");
|
|
49
49
|
function w() {
|
|
50
50
|
e.withSlider && (i = new ResizeObserver(() => {
|
|
51
|
-
|
|
51
|
+
d();
|
|
52
52
|
}), B.value.forEach((t) => {
|
|
53
53
|
i.observe(t);
|
|
54
54
|
}));
|
|
@@ -56,40 +56,39 @@ const A = { class: "v-tabs_inner" }, D = ["data-id", "onClick"], P = {
|
|
|
56
56
|
function T() {
|
|
57
57
|
i == null || i.disconnect(), i = null;
|
|
58
58
|
}
|
|
59
|
-
function
|
|
60
|
-
|
|
59
|
+
function c(t) {
|
|
60
|
+
k("update:modelValue", t), d();
|
|
61
61
|
}
|
|
62
|
-
async function
|
|
63
|
-
if (!e.withSlider || !
|
|
62
|
+
async function d() {
|
|
63
|
+
if (!e.withSlider || !f.value)
|
|
64
64
|
return;
|
|
65
|
-
const t =
|
|
65
|
+
const t = f.value;
|
|
66
66
|
await q();
|
|
67
67
|
const { left: o } = t.getBoundingClientRect(), [l] = t.getElementsByClassName("__active");
|
|
68
68
|
if (l) {
|
|
69
69
|
const {
|
|
70
70
|
left: m,
|
|
71
71
|
width: _
|
|
72
|
-
} = l.getBoundingClientRect(),
|
|
73
|
-
|
|
74
|
-
transform: `translateX(${
|
|
72
|
+
} = l.getBoundingClientRect(), p = t.scrollLeft, V = m + p - o;
|
|
73
|
+
u.value = {
|
|
74
|
+
transform: `translateX(${V}px)`,
|
|
75
75
|
width: `${_}px`
|
|
76
76
|
};
|
|
77
77
|
}
|
|
78
78
|
}
|
|
79
79
|
return x(() => {
|
|
80
|
-
if (e.selectFirst && e.list.length && !r.value &&
|
|
80
|
+
if (e.selectFirst && e.list.length && !r.value && c(e.list[0]), e.initialTab && e.list.length && !r.value) {
|
|
81
81
|
const t = e.list.find((o) => o[e.trackBy] === e.initialTab);
|
|
82
|
-
t &&
|
|
82
|
+
t && c(t);
|
|
83
83
|
}
|
|
84
84
|
w();
|
|
85
85
|
}), z(() => {
|
|
86
86
|
T();
|
|
87
87
|
}), E(r, () => {
|
|
88
|
-
e.withSlider &&
|
|
88
|
+
e.withSlider && d();
|
|
89
89
|
}), (t, o) => (s(), n("div", {
|
|
90
90
|
class: b(["v-tabs", [`__${e.direction}`]]),
|
|
91
|
-
|
|
92
|
-
ref: c
|
|
91
|
+
ref: "root"
|
|
93
92
|
}, [
|
|
94
93
|
L("div", A, [
|
|
95
94
|
(s(!0), n(h, null, $(e.list, (l) => (s(), n("div", {
|
|
@@ -101,18 +100,18 @@ const A = { class: "v-tabs_inner" }, D = ["data-id", "onClick"], P = {
|
|
|
101
100
|
_disabled: l && l._disabled
|
|
102
101
|
}]),
|
|
103
102
|
"data-id": l[a.trackBy],
|
|
104
|
-
onClick: (m) =>
|
|
103
|
+
onClick: (m) => c(l)
|
|
105
104
|
}, [
|
|
106
105
|
M(t.$slots, "single-tab", { tab: l }, () => [
|
|
107
|
-
a.wrapTitle ? (s(), n("div", P,
|
|
108
|
-
F(
|
|
106
|
+
a.wrapTitle ? (s(), n("div", P, S(l[a.label] || ""), 1)) : (s(), n(h, { key: 1 }, [
|
|
107
|
+
F(S(l[a.label] || ""), 1)
|
|
109
108
|
], 64))
|
|
110
109
|
])
|
|
111
110
|
], 10, D))), 128))
|
|
112
111
|
]),
|
|
113
112
|
e.withSlider ? (s(), n("div", {
|
|
114
113
|
key: 0,
|
|
115
|
-
style: O(
|
|
114
|
+
style: O(u.value),
|
|
116
115
|
class: "v-tabs_slider"
|
|
117
116
|
}, null, 4)) : N("", !0)
|
|
118
117
|
], 2));
|
package/dist/v-tabs.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(e,
|
|
1
|
+
(function(e,o){typeof exports=="object"&&typeof module<"u"?module.exports=o(require("vue")):typeof define=="function"&&define.amd?define(["vue"],o):(e=typeof globalThis<"u"?globalThis:e||self,e.VTabs=o(e.Vue))})(this,function(e){"use strict";const o={class:"v-tabs_inner"},y=["data-id","onClick"],k={key:0,class:"v-tabs_tab_title"};return{__name:"VTabs",props:e.mergeModels({direction:{type:String,default:"horizontal"},trackBy:{type:String,default:"_id"},label:{type:String,default:"title"},list:{type:Array,required:!0},selectFirst:{type:Boolean,default:!0},withSlider:{type:Boolean,default:!1},initialTab:{type:[Number,String],default:null},wrapTitle:{type:Boolean,default:!1}},{modelValue:{},modelModifiers:{}}),emits:e.mergeModels(["update:modelValue"],["update:modelValue"]),setup(i,{emit:B}){const t=i,s=e.useModel(i,"modelValue"),b=B,f=e.ref({});let a=null;const h=e.useTemplateRef("tabs"),m=e.useTemplateRef("root");function p(){t.withSlider&&(a=new ResizeObserver(()=>{d()}),h.value.forEach(l=>{a.observe(l)}))}function g(){a==null||a.disconnect(),a=null}function c(l){b("update:modelValue",l),d()}async function d(){if(!t.withSlider||!m.value)return;const l=m.value;await e.nextTick();const{left:r}=l.getBoundingClientRect(),[n]=l.getElementsByClassName("__active");if(n){const{left:u,width:S}=n.getBoundingClientRect(),T=l.scrollLeft,w=u+T-r;f.value={transform:`translateX(${w}px)`,width:`${S}px`}}}return e.onMounted(()=>{if(t.selectFirst&&t.list.length&&!s.value&&c(t.list[0]),t.initialTab&&t.list.length&&!s.value){const l=t.list.find(r=>r[t.trackBy]===t.initialTab);l&&c(l)}p()}),e.onBeforeUnmount(()=>{g()}),e.watch(s,()=>{t.withSlider&&d()}),(l,r)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["v-tabs",[`__${t.direction}`]]),ref:"root"},[e.createElementVNode("div",o,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.list,n=>(e.openBlock(),e.createElementBlock("div",{key:n[i.trackBy],ref_for:!0,ref:"tabs",class:e.normalizeClass(["v-tabs_tab",{__active:s.value&&s.value[i.trackBy]===n[i.trackBy],_disabled:n&&n._disabled}]),"data-id":n[i.trackBy],onClick:u=>c(n)},[e.renderSlot(l.$slots,"single-tab",{tab:n},()=>[i.wrapTitle?(e.openBlock(),e.createElementBlock("div",k,e.toDisplayString(n[i.label]||""),1)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode(e.toDisplayString(n[i.label]||""),1)],64))])],10,y))),128))]),t.withSlider?(e.openBlock(),e.createElementBlock("div",{key:0,style:e.normalizeStyle(f.value),class:"v-tabs_slider"},null,4)):e.createCommentVNode("",!0)],2))}}});
|
package/package.json
CHANGED
package/src/components/VTabs.vue
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="v-tabs" :class="[`__${props.direction}`]" ref="
|
|
2
|
+
<div class="v-tabs" :class="[`__${props.direction}`]" ref="root">
|
|
3
3
|
<div class="v-tabs_inner">
|
|
4
4
|
<div
|
|
5
5
|
v-for="tab in props.list"
|
|
@@ -77,7 +77,7 @@ const emit = defineEmits(['update:modelValue'])
|
|
|
77
77
|
const sliderStyle = ref({})
|
|
78
78
|
let resizeObserver = null
|
|
79
79
|
const tabsRefs = useTemplateRef('tabs')
|
|
80
|
-
const elRef = useTemplateRef('
|
|
80
|
+
const elRef = useTemplateRef('root')
|
|
81
81
|
|
|
82
82
|
function createResizeObserver () {
|
|
83
83
|
if (props.withSlider) {
|