lkt-tabs 1.1.0 → 1.3.0
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/lkt-tabs.css +1 -1
- package/dist/lkt-tabs.es.js +133 -98
- package/dist/lkt-tabs.umd.js +1 -1
- package/dist/src/lib-components/LktTabs.vue.d.ts +5 -13
- package/package.json +3 -3
- package/src/lib-components/LktTabs.vue +3 -17
- package/theme/default.css +26 -29
- package/dist/src/constants.d.ts +0 -1
package/dist/lkt-tabs.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.lkt-tabs{max-width:100%}.lkt-tabs__list{gap:var(--lkt-tab
|
|
1
|
+
.lkt-tabs{max-width:100%}.lkt-tabs__list{gap:var(--lkt-tab--gap);border-bottom:var(--lkt-tab--border-width) var(--lkt-tab--border-style) var(--lkt-tab--border-color);padding:var(--lkt-tab--padding);display:var(--lkt-tab--list--display);overflow-x:auto}.lkt-tab{background:var(--lkt-tab--background);color:var(--lkt-tab--color);border:var(--lkt-tab--border-width) var(--lkt-tab--border-style) var(--lkt-tab--border-color);border-radius:var(--lkt-tab--border-radius);font-size:var(--lkt-tab--font-size);line-height:var(--lkt-tab--line-height);transition:var(--lkt-tab--transition);display:var(--lkt-tab--display);align-items:var(--lkt-tab--align-items);justify-content:var(--lkt-tab--justify-content);cursor:pointer}.lkt-tab.is-active{background:var(--lkt-tab--active--background);color:var(--lkt-tab--active--color)}.lkt-tab:hover{background:var(--lkt-tab--hover--background);color:var(--lkt-tab--hover-color)}.lkt-tab a{color:inherit;padding:var(--lkt-tab--padding)}
|
package/dist/lkt-tabs.es.js
CHANGED
|
@@ -1,16 +1,17 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
var $ = Object.defineProperty;
|
|
2
|
+
var H = (e, a, r) => a in e ? $(e, a, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[a] = r;
|
|
3
|
+
var i = (e, a, r) => H(e, typeof a != "symbol" ? a + "" : a, r);
|
|
4
|
+
import { defineComponent as D, ref as y, computed as h, watch as L, createElementBlock as m, createCommentVNode as R, openBlock as d, renderSlot as v, mergeDefaults as z, getCurrentInstance as O, useSlots as F, nextTick as U, normalizeClass as T, withDirectives as q, createElementVNode as I, Fragment as k, renderList as w, withModifiers as A, vShow as j, normalizeStyle as K, createBlock as Q, withCtx as Y } from "vue";
|
|
5
|
+
import { getSessionStorage as G, setSessionStorage as J } from "lkt-session";
|
|
6
|
+
function W(e = 10) {
|
|
7
|
+
let a = "", r = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789", s = r.length;
|
|
8
|
+
for (let n = 0; n < e; n++) a += r.charAt(Math.floor(Math.random() * s));
|
|
9
|
+
return a;
|
|
9
10
|
}
|
|
10
|
-
function
|
|
11
|
-
return typeof
|
|
11
|
+
function X(e) {
|
|
12
|
+
return typeof e == "string";
|
|
12
13
|
}
|
|
13
|
-
const
|
|
14
|
+
const Z = ["id"], ee = /* @__PURE__ */ D({
|
|
14
15
|
__name: "LktTab",
|
|
15
16
|
props: {
|
|
16
17
|
id: { type: String, default: "" },
|
|
@@ -20,129 +21,163 @@ const G = ["id"], J = /* @__PURE__ */ H({
|
|
|
20
21
|
isDisabled: { type: Boolean, default: !1 }
|
|
21
22
|
},
|
|
22
23
|
emits: ["is-active"],
|
|
23
|
-
setup(
|
|
24
|
-
const
|
|
25
|
-
|
|
24
|
+
setup(e, { emit: a }) {
|
|
25
|
+
const r = e, s = a, n = y(!1), b = y(W(8)), u = h(() => r.id ? r.id : X(r.name) && r.name.length > 0 ? r.name.toLowerCase().replace(/ /g, "-") : b.value), f = () => {
|
|
26
|
+
n.value = r.activeHash === r.hash, s("is-active", n.value);
|
|
26
27
|
};
|
|
27
|
-
return
|
|
28
|
+
return L(() => r.activeHash, f), f(), (g, p) => n.value ? (d(), m("section", {
|
|
28
29
|
key: 0,
|
|
29
30
|
"data-lkt": "tab-content",
|
|
30
|
-
id:
|
|
31
|
+
id: u.value,
|
|
31
32
|
role: "tabpanel"
|
|
32
33
|
}, [
|
|
33
|
-
v(
|
|
34
|
-
], 8,
|
|
34
|
+
v(g.$slots, "default")
|
|
35
|
+
], 8, Z)) : R("", !0);
|
|
36
|
+
}
|
|
37
|
+
}), _ = (e) => `lkt-tabs.${window.location.host}${window.location.pathname}.${e}`, te = (e) => G(_(e)), ae = (e, a, r) => {
|
|
38
|
+
J(_(e), a, r * 60);
|
|
39
|
+
};
|
|
40
|
+
var re = ((e) => (e.Button = "button", e.Submit = "submit", e.Reset = "reset", e.Anchor = "anchor", e.Content = "content", e.Switch = "switch", e.HiddenSwitch = "hidden-switch", e.Split = "split", e.SplitLazy = "split-lazy", e.SplitEver = "split-ever", e.Tooltip = "tooltip", e.TooltipLazy = "tooltip-lazy", e.TooltipEver = "tooltip-ever", e.FileUpload = "file-upload", e.ImageUpload = "image-upload", e))(re || {}), ne = ((e) => (e.Text = "text", e.Email = "email", e.Tel = "tel", e.Password = "password", e.Search = "search", e.Number = "number", e.Color = "color", e.Range = "range", e.Textarea = "textarea", e.Html = "html", e.Date = "date", e.File = "file", e.Image = "image", e.Select = "select", e.Check = "check", e.Switch = "switch", e.Calc = "calc", e.Card = "card", e.Elements = "elements", e))(ne || {}), le = ["lktDateProps", "lktStrictItem", "lktExcludedProps"], c, oe = (c = class {
|
|
41
|
+
constructor(a) {
|
|
42
|
+
}
|
|
43
|
+
feed(a = {}, r = this) {
|
|
44
|
+
if (typeof a == "object") for (let [s, n] of Object.entries(a)) r.assignProp(s, n);
|
|
45
|
+
}
|
|
46
|
+
assignProp(a, r) {
|
|
47
|
+
if (!(le.includes(a) || c.lktExcludedProps.includes(a))) {
|
|
48
|
+
if (c.lktDateProps.includes(a)) {
|
|
49
|
+
this[a] = new Date(r);
|
|
50
|
+
return;
|
|
51
|
+
}
|
|
52
|
+
this[a] = r;
|
|
53
|
+
}
|
|
35
54
|
}
|
|
36
|
-
}),
|
|
37
|
-
|
|
38
|
-
|
|
55
|
+
}, i(c, "lktAllowUndefinedProps", []), i(c, "lktExcludedProps", []), i(c, "lktDateProps", []), i(c, "lktStrictItem", !1), i(c, "lktDefaultValues", []), c), se = ((e) => (e.Auto = "auto", e.Always = "always", e.Lazy = "lazy", e.Ever = "ever", e))(se || {}), ie = ((e) => (e.Transform = "transform", e.Height = "height", e.Display = "display", e))(ie || {}), ce = ((e) => (e.Href = "href", e.RouterLink = "router-link", e.RouterLinkBack = "router-link-back", e.Mail = "mail", e.Tel = "tel", e.Tab = "tab", e.Download = "download", e.Action = "action", e.Legacy = "", e))(ce || {}), ue = ((e) => (e.None = "", e.Field = "field", e.Button = "button", e.Anchor = "anchor", e))(ue || {}), de = ((e) => (e.List = "list", e.Inline = "inline", e.Count = "count", e))(de || {}), me = ((e) => (e.MinStringLength = "min-str", e.MinNumber = "min-num", e.MaxStringLength = "max-str", e.MaxNumber = "max-num", e.Email = "email", e.Empty = "empty", e.EqualTo = "equal-to", e.MinNumbers = "min-numbers", e.MaxNumbers = "max-numbers", e.MinChars = "min-chars", e.MaxChars = "max-chars", e.MinUpperChars = "min-upper-chars", e.MaxUpperChars = "max-upper-chars", e.MinLowerChars = "min-lower-chars", e.MaxLowerChars = "max-lower-chars", e.MinSpecialChars = "min-special-chars", e.MaxSpecialChars = "max-special-chars", e))(me || {}), he = ((e) => (e.Ok = "ok", e.Ko = "ko", e.Info = "info", e))(he || {}), pe = ((e) => (e.NotDefined = "", e.Button = "button", e))(pe || {}), fe = ((e) => (e.Start = "start", e.End = "end", e))(fe || {}), ve = ((e) => (e.Create = "create", e.Update = "update", e.Read = "read", e))(ve || {}), be = ((e) => (e.Inline = "inline", e.Modal = "modal", e))(be || {}), ge = ((e) => (e.Top = "top", e.Bottom = "bottom", e))(ge || {}), Ce = ((e) => (e.Changed = "changed", e.Always = "always", e.Never = "never", e))(Ce || {}), Se = ((e) => (e.Manual = "manual", e.Auto = "auto", e.Delay = "delay", e))(Se || {}), ke = ((e) => (e.Toast = "toast", e.Inline = "inline", e))(ke || {}), we = ((e) => (e.Anchor = "anchor", e.Button = "button", e.Entry = "entry", e))(we || {}), xe = ((e) => (e.Modal = "modal", e.Confirm = "confirm", e))(xe || {}), ye = ((e) => (e.Pages = "pages", e.PrevNext = "prev-next", e.PagesPrevNext = "pages-prev-next", e.PagesPrevNextFirstLast = "pages-prev-next-first-last", e.LoadMore = "load-more", e.Infinite = "infinite", e))(ye || {}), Le = ((e) => (e.None = "", e.Incremental = "incremental", e.Decremental = "decremental", e))(Le || {}), Me = ((e) => (e.NotDefined = "", e.Hidden = "hidden", e.Integer = "integer", e.Decimal = "decimal", e.Auto = "auto", e))(Me || {}), Pe = ((e) => (e.Table = "table", e.Item = "item", e.Ul = "ul", e.Ol = "ol", e.Carousel = "carousel", e))(Pe || {}), Te = ((e) => (e[e.Auto = 0] = "Auto", e[e.PreferItem = 1] = "PreferItem", e[e.PreferCustomItem = 2] = "PreferCustomItem", e[e.PreferColumns = 3] = "PreferColumns", e))(Te || {}), x, Ie = (x = class extends oe {
|
|
56
|
+
constructor(a = {}) {
|
|
57
|
+
super();
|
|
58
|
+
i(this, "modelValue", "");
|
|
59
|
+
i(this, "id", "");
|
|
60
|
+
i(this, "useSession", !1);
|
|
61
|
+
i(this, "cacheLifetime", 5);
|
|
62
|
+
i(this, "contentPad");
|
|
63
|
+
i(this, "titles");
|
|
64
|
+
this.feed(a);
|
|
65
|
+
}
|
|
66
|
+
}, i(x, "lktDefaultValues", ["modelValue", "id", "useSession", "cacheLifetime", "contentPad", "titles"]), x), Ae = ((e) => (e.NotDefined = "", e.ActionIcon = "action-icon", e))(Ae || {}), De = ((e) => (e.Message = "message", e.Button = "button", e))(De || {}), _e = ((e) => (e.Left = "left", e.Center = "center", e.Right = "right", e))(_e || {}), Ee = ((e) => (e.Fixed = "fixed", e.Absolute = "absolute", e))(Ee || {}), Ne = ((e) => (e.Top = "top", e.Bottom = "bottom", e.Center = "center", e.ReferrerCenter = "referrer-center", e))(Ne || {}), Ve = ((e) => (e.Left = "left", e.Right = "right", e.Center = "center", e.LeftCorner = "left-corner", e.RightCorner = "right-corner", e))(Ve || {}), Be = ((e) => (e.None = "", e.Focus = "focus", e.Blur = "blur", e.Always = "always", e))(Be || {}), $e = ((e) => (e.Auto = "auto", e.Local = "local", e.Remote = "remote", e))($e || {}), He = ((e) => (e.Refresh = "refresh", e.Close = "close", e.ReOpen = "reOpen", e.Exec = "exec", e.Open = "open", e))(He || {}), Re = ((e) => (e.Asc = "asc", e.Desc = "desc", e))(Re || {}), ze = ((e) => (e.Create = "create", e.Update = "update", e.Edit = "edit", e.Drop = "drop", e.Sort = "sort", e.SwitchEditMode = "switch-edit-mode", e.InlineEdit = "inline-edit", e.InlineCreate = "inline-create", e.ModalCreate = "modal-create", e.InlineCreateEver = "inline-create-ever", e))(ze || {}), Oe = ((e) => (e.Lazy = "lazy", e.Ever = "ever", e))(Oe || {}), Fe = ((e) => (e.Quick = "quick", e.Full = "full", e))(Fe || {});
|
|
67
|
+
function Ue(e) {
|
|
68
|
+
let a = new e(), r = {};
|
|
69
|
+
if (!Array.isArray(e.lktDefaultValues)) throw new Error("lktDefaultValues must be a keys array.");
|
|
70
|
+
for (let s of e.lktDefaultValues) s in a && (r[s] = a[s]);
|
|
71
|
+
return r;
|
|
72
|
+
}
|
|
73
|
+
const qe = { class: "lkt-tabs__list" }, je = ["href", "onClick"], Ke = ["innerHTML", "onClick", "href"], Qe = { "data-lkt": "tab" }, Ye = /* @__PURE__ */ D({
|
|
39
74
|
__name: "LktTabs",
|
|
40
|
-
props: {
|
|
41
|
-
modelValue: {
|
|
42
|
-
id: {
|
|
43
|
-
useSession: { type: Boolean
|
|
44
|
-
cacheLifetime: {
|
|
45
|
-
contentPad: {
|
|
46
|
-
titles: {
|
|
47
|
-
},
|
|
75
|
+
props: /* @__PURE__ */ z({
|
|
76
|
+
modelValue: {},
|
|
77
|
+
id: {},
|
|
78
|
+
useSession: { type: Boolean },
|
|
79
|
+
cacheLifetime: {},
|
|
80
|
+
contentPad: {},
|
|
81
|
+
titles: {}
|
|
82
|
+
}, Ue(Ie)),
|
|
48
83
|
emits: [
|
|
49
84
|
"update:modelValue"
|
|
50
85
|
],
|
|
51
|
-
setup(
|
|
52
|
-
const { ctx:
|
|
53
|
-
if (
|
|
54
|
-
|
|
55
|
-
let
|
|
56
|
-
|
|
86
|
+
setup(e, { emit: a }) {
|
|
87
|
+
const { ctx: r } = O(), s = F(), n = e, b = a, u = y("");
|
|
88
|
+
if (n.useSession) {
|
|
89
|
+
n.id || console.warn("[LKT Tabs] You're trying to use session provided tabs without the required id. Please, add id attr");
|
|
90
|
+
let t = te(n.id);
|
|
91
|
+
t && (u.value = t);
|
|
57
92
|
}
|
|
58
|
-
|
|
59
|
-
typeof
|
|
60
|
-
}),
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
}),
|
|
93
|
+
L(() => n.modelValue, (t, o) => {
|
|
94
|
+
typeof t == "string" && (u.value = t);
|
|
95
|
+
}), L(u, (t, o) => {
|
|
96
|
+
b("update:modelValue"), U(() => {
|
|
97
|
+
r.$forceUpdate();
|
|
98
|
+
}), n.useSession && ae(r.id, t, n.cacheLifetime);
|
|
64
99
|
});
|
|
65
|
-
const
|
|
66
|
-
let
|
|
67
|
-
return
|
|
68
|
-
}),
|
|
69
|
-
let
|
|
70
|
-
for (let
|
|
71
|
-
return
|
|
72
|
-
}),
|
|
73
|
-
let
|
|
74
|
-
for (let
|
|
75
|
-
return
|
|
76
|
-
}),
|
|
77
|
-
let
|
|
78
|
-
for (let
|
|
79
|
-
return
|
|
80
|
-
}),
|
|
81
|
-
let
|
|
82
|
-
for (let
|
|
83
|
-
|
|
84
|
-
return
|
|
85
|
-
}),
|
|
86
|
-
|
|
100
|
+
const f = h(() => [].join(" ")), g = h(() => {
|
|
101
|
+
let t = [];
|
|
102
|
+
return n.contentPad && t.push(`padding: ${n.contentPad}`), t.join(";");
|
|
103
|
+
}), p = h(() => {
|
|
104
|
+
let t = [];
|
|
105
|
+
for (let o in s) o.indexOf("tab-") !== -1 && t.push(o);
|
|
106
|
+
return t;
|
|
107
|
+
}), E = h(() => {
|
|
108
|
+
let t = [];
|
|
109
|
+
for (let o in s) o.indexOf("title-") !== -1 && t.push(o);
|
|
110
|
+
return t;
|
|
111
|
+
}), N = h(() => {
|
|
112
|
+
let t = [];
|
|
113
|
+
for (let o in s) o.indexOf("li-") !== -1 && t.push(o);
|
|
114
|
+
return t;
|
|
115
|
+
}), C = h(() => {
|
|
116
|
+
let t = {};
|
|
117
|
+
for (let o in r.$refs)
|
|
118
|
+
t[o] = r.$refs[o].hash;
|
|
119
|
+
return t;
|
|
120
|
+
}), V = h(() => Object.keys(p.value).length > 1), M = (t = "") => C.value.length > 0 && C.value[t] ? "#" + C.value[t] : "#", P = (t = "") => n.titles && n.titles[t] ? n.titles[t] : t, B = () => {
|
|
121
|
+
r.$forceUpdate();
|
|
87
122
|
};
|
|
88
|
-
for (let
|
|
89
|
-
|
|
90
|
-
return (
|
|
91
|
-
class:
|
|
123
|
+
for (let t in p.value)
|
|
124
|
+
u.value === "" && (u.value = t);
|
|
125
|
+
return (t, o) => (d(), m("div", {
|
|
126
|
+
class: T(["lkt-tabs", f.value])
|
|
92
127
|
}, [
|
|
93
|
-
|
|
94
|
-
(
|
|
95
|
-
key:
|
|
96
|
-
class:
|
|
128
|
+
q(I("ul", qe, [
|
|
129
|
+
(d(!0), m(k, null, w(p.value, (l) => (d(), m("li", {
|
|
130
|
+
key: l,
|
|
131
|
+
class: T(["lkt-tab", { "is-active": l === u.value }]),
|
|
97
132
|
role: "presentation"
|
|
98
133
|
}, [
|
|
99
|
-
|
|
134
|
+
E.value.includes(l) ? (d(), m("a", {
|
|
100
135
|
key: 0,
|
|
101
|
-
href:
|
|
102
|
-
onClick:
|
|
136
|
+
href: M(l),
|
|
137
|
+
onClick: A((S) => u.value = l, ["prevent"]),
|
|
103
138
|
role: "tab"
|
|
104
139
|
}, [
|
|
105
|
-
v(
|
|
106
|
-
], 8,
|
|
140
|
+
v(t.$slots, "title-" + l)
|
|
141
|
+
], 8, je)) : (d(), m("a", {
|
|
107
142
|
key: 1,
|
|
108
|
-
innerHTML:
|
|
109
|
-
onClick:
|
|
110
|
-
href:
|
|
143
|
+
innerHTML: P(l),
|
|
144
|
+
onClick: A((S) => u.value = l, ["prevent"]),
|
|
145
|
+
href: M(l),
|
|
111
146
|
role: "tab"
|
|
112
|
-
}, null, 8,
|
|
147
|
+
}, null, 8, Ke))
|
|
113
148
|
], 2))), 128)),
|
|
114
|
-
(
|
|
115
|
-
v(
|
|
149
|
+
(d(!0), m(k, null, w(N.value, (l, S) => (d(), m("li", Qe, [
|
|
150
|
+
v(t.$slots, "li-" + S)
|
|
116
151
|
]))), 256))
|
|
117
152
|
], 512), [
|
|
118
|
-
[
|
|
153
|
+
[j, V.value]
|
|
119
154
|
]),
|
|
120
|
-
|
|
155
|
+
I("div", {
|
|
121
156
|
class: "lkt-tabs__content",
|
|
122
|
-
style:
|
|
157
|
+
style: K(g.value)
|
|
123
158
|
}, [
|
|
124
|
-
(
|
|
159
|
+
(d(!0), m(k, null, w(p.value, (l) => (d(), Q(ee, {
|
|
125
160
|
ref_for: !0,
|
|
126
|
-
ref:
|
|
127
|
-
hash:
|
|
128
|
-
id:
|
|
129
|
-
name:
|
|
130
|
-
"active-hash":
|
|
131
|
-
onIsActive:
|
|
161
|
+
ref: l,
|
|
162
|
+
hash: l,
|
|
163
|
+
id: l,
|
|
164
|
+
name: P(l),
|
|
165
|
+
"active-hash": u.value,
|
|
166
|
+
onIsActive: B
|
|
132
167
|
}, {
|
|
133
|
-
default:
|
|
134
|
-
v(
|
|
168
|
+
default: Y(() => [
|
|
169
|
+
v(t.$slots, "tab-" + l)
|
|
135
170
|
]),
|
|
136
171
|
_: 2
|
|
137
172
|
}, 1032, ["hash", "id", "name", "active-hash"]))), 256))
|
|
138
173
|
], 4)
|
|
139
174
|
], 2));
|
|
140
175
|
}
|
|
141
|
-
}),
|
|
142
|
-
install: (
|
|
143
|
-
|
|
176
|
+
}), Xe = {
|
|
177
|
+
install: (e, a) => {
|
|
178
|
+
e.component("lkt-tabs", Ye);
|
|
144
179
|
}
|
|
145
180
|
};
|
|
146
181
|
export {
|
|
147
|
-
|
|
182
|
+
Xe as default
|
|
148
183
|
};
|
package/dist/lkt-tabs.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(t,s){typeof exports=="object"&&typeof module<"u"?module.exports=s(require("vue"),require("lkt-session")):typeof define=="function"&&define.amd?define(["vue","lkt-session"],s):(t=typeof globalThis<"u"?globalThis:t||self,t.LktTabs=s(t.Vue,t.LktSession))})(this,function(t,s){"use strict";var ye=Object.defineProperty;var Be=(t,s,p)=>s in t?ye(t,s,{enumerable:!0,configurable:!0,writable:!0,value:p}):t[s]=p;var d=(t,s,p)=>Be(t,typeof s!="symbol"?s+"":s,p);var u,k;function p(e=10){let n="",r="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",c=r.length;for(let o=0;o<e;o++)n+=r.charAt(Math.floor(Math.random()*c));return n}function L(e){return typeof e=="string"}const y=["id"],B=t.defineComponent({__name:"LktTab",props:{id:{type:String,default:""},name:{type:String,required:!0},hash:{type:String,default:""},activeHash:{type:String,default:""},isDisabled:{type:Boolean,default:!1}},emits:["is-active"],setup(e,{emit:n}){const r=e,c=n,o=t.ref(!1),b=t.ref(p(8)),m=t.computed(()=>r.id?r.id:L(r.name)&&r.name.length>0?r.name.toLowerCase().replace(/ /g,"-"):b.value),f=()=>{o.value=r.activeHash===r.hash,c("is-active",o.value)};return t.watch(()=>r.activeHash,f),f(),(g,h)=>o.value?(t.openBlock(),t.createElementBlock("section",{key:0,"data-lkt":"tab-content",id:m.value,role:"tabpanel"},[t.renderSlot(g.$slots,"default")],8,y)):t.createCommentVNode("",!0)}}),v=e=>`lkt-tabs.${window.location.host}${window.location.pathname}.${e}`,E=e=>s.getSessionStorage(v(e)),T=(e,n,r)=>{s.setSessionStorage(v(e),n,r*60)};var M=(e=>(e.Button="button",e.Submit="submit",e.Reset="reset",e.Anchor="anchor",e.Content="content",e.Switch="switch",e.HiddenSwitch="hidden-switch",e.Split="split",e.SplitLazy="split-lazy",e.SplitEver="split-ever",e.Tooltip="tooltip",e.TooltipLazy="tooltip-lazy",e.TooltipEver="tooltip-ever",e.FileUpload="file-upload",e.ImageUpload="image-upload",e))(M||{}),P=(e=>(e.Text="text",e.Email="email",e.Tel="tel",e.Password="password",e.Search="search",e.Number="number",e.Color="color",e.Range="range",e.Textarea="textarea",e.Html="html",e.Date="date",e.File="file",e.Image="image",e.Select="select",e.Check="check",e.Switch="switch",e.Calc="calc",e.Card="card",e.Elements="elements",e))(P||{}),I=["lktDateProps","lktStrictItem","lktExcludedProps"],A=(u=class{constructor(n){}feed(n={},r=this){if(typeof n=="object")for(let[c,o]of Object.entries(n))r.assignProp(c,o)}assignProp(n,r){if(!(I.includes(n)||u.lktExcludedProps.includes(n))){if(u.lktDateProps.includes(n)){this[n]=new Date(r);return}this[n]=r}}},d(u,"lktAllowUndefinedProps",[]),d(u,"lktExcludedProps",[]),d(u,"lktDateProps",[]),d(u,"lktStrictItem",!1),d(u,"lktDefaultValues",[]),u),D=(e=>(e.Auto="auto",e.Always="always",e.Lazy="lazy",e.Ever="ever",e))(D||{}),_=(e=>(e.Transform="transform",e.Height="height",e.Display="display",e))(_||{}),V=(e=>(e.Href="href",e.RouterLink="router-link",e.RouterLinkBack="router-link-back",e.Mail="mail",e.Tel="tel",e.Tab="tab",e.Download="download",e.Action="action",e.Legacy="",e))(V||{}),N=(e=>(e.None="",e.Field="field",e.Button="button",e.Anchor="anchor",e))(N||{}),$=(e=>(e.List="list",e.Inline="inline",e.Count="count",e))($||{}),H=(e=>(e.MinStringLength="min-str",e.MinNumber="min-num",e.MaxStringLength="max-str",e.MaxNumber="max-num",e.Email="email",e.Empty="empty",e.EqualTo="equal-to",e.MinNumbers="min-numbers",e.MaxNumbers="max-numbers",e.MinChars="min-chars",e.MaxChars="max-chars",e.MinUpperChars="min-upper-chars",e.MaxUpperChars="max-upper-chars",e.MinLowerChars="min-lower-chars",e.MaxLowerChars="max-lower-chars",e.MinSpecialChars="min-special-chars",e.MaxSpecialChars="max-special-chars",e))(H||{}),z=(e=>(e.Ok="ok",e.Ko="ko",e.Info="info",e))(z||{}),F=(e=>(e.NotDefined="",e.Button="button",e))(F||{}),R=(e=>(e.Start="start",e.End="end",e))(R||{}),O=(e=>(e.Create="create",e.Update="update",e.Read="read",e))(O||{}),U=(e=>(e.Inline="inline",e.Modal="modal",e))(U||{}),q=(e=>(e.Top="top",e.Bottom="bottom",e))(q||{}),j=(e=>(e.Changed="changed",e.Always="always",e.Never="never",e))(j||{}),K=(e=>(e.Manual="manual",e.Auto="auto",e.Delay="delay",e))(K||{}),Q=(e=>(e.Toast="toast",e.Inline="inline",e))(Q||{}),Y=(e=>(e.Anchor="anchor",e.Button="button",e.Entry="entry",e))(Y||{}),G=(e=>(e.Modal="modal",e.Confirm="confirm",e))(G||{}),J=(e=>(e.Pages="pages",e.PrevNext="prev-next",e.PagesPrevNext="pages-prev-next",e.PagesPrevNextFirstLast="pages-prev-next-first-last",e.LoadMore="load-more",e.Infinite="infinite",e))(J||{}),W=(e=>(e.None="",e.Incremental="incremental",e.Decremental="decremental",e))(W||{}),X=(e=>(e.NotDefined="",e.Hidden="hidden",e.Integer="integer",e.Decimal="decimal",e.Auto="auto",e))(X||{}),Z=(e=>(e.Table="table",e.Item="item",e.Ul="ul",e.Ol="ol",e.Carousel="carousel",e))(Z||{}),ee=(e=>(e[e.Auto=0]="Auto",e[e.PreferItem=1]="PreferItem",e[e.PreferCustomItem=2]="PreferCustomItem",e[e.PreferColumns=3]="PreferColumns",e))(ee||{}),te=(k=class extends A{constructor(n={}){super();d(this,"modelValue","");d(this,"id","");d(this,"useSession",!1);d(this,"cacheLifetime",5);d(this,"contentPad");d(this,"titles");this.feed(n)}},d(k,"lktDefaultValues",["modelValue","id","useSession","cacheLifetime","contentPad","titles"]),k),ae=(e=>(e.NotDefined="",e.ActionIcon="action-icon",e))(ae||{}),re=(e=>(e.Message="message",e.Button="button",e))(re||{}),ne=(e=>(e.Left="left",e.Center="center",e.Right="right",e))(ne||{}),oe=(e=>(e.Fixed="fixed",e.Absolute="absolute",e))(oe||{}),le=(e=>(e.Top="top",e.Bottom="bottom",e.Center="center",e.ReferrerCenter="referrer-center",e))(le||{}),se=(e=>(e.Left="left",e.Right="right",e.Center="center",e.LeftCorner="left-corner",e.RightCorner="right-corner",e))(se||{}),ie=(e=>(e.None="",e.Focus="focus",e.Blur="blur",e.Always="always",e))(ie||{}),ce=(e=>(e.Auto="auto",e.Local="local",e.Remote="remote",e))(ce||{}),de=(e=>(e.Refresh="refresh",e.Close="close",e.ReOpen="reOpen",e.Exec="exec",e.Open="open",e))(de||{}),ue=(e=>(e.Asc="asc",e.Desc="desc",e))(ue||{}),me=(e=>(e.Create="create",e.Update="update",e.Edit="edit",e.Drop="drop",e.Sort="sort",e.SwitchEditMode="switch-edit-mode",e.InlineEdit="inline-edit",e.InlineCreate="inline-create",e.ModalCreate="modal-create",e.InlineCreateEver="inline-create-ever",e))(me||{}),pe=(e=>(e.Lazy="lazy",e.Ever="ever",e))(pe||{}),he=(e=>(e.Quick="quick",e.Full="full",e))(he||{});function fe(e){let n=new e,r={};if(!Array.isArray(e.lktDefaultValues))throw new Error("lktDefaultValues must be a keys array.");for(let c of e.lktDefaultValues)c in n&&(r[c]=n[c]);return r}const ke={class:"lkt-tabs__list"},be=["href","onClick"],ge=["innerHTML","onClick","href"],Ce={"data-lkt":"tab"},Se=t.defineComponent({__name:"LktTabs",props:t.mergeDefaults({modelValue:{},id:{},useSession:{type:Boolean},cacheLifetime:{},contentPad:{},titles:{}},fe(te)),emits:["update:modelValue"],setup(e,{emit:n}){const{ctx:r}=t.getCurrentInstance(),c=t.useSlots(),o=e,b=n,m=t.ref("");if(o.useSession){o.id||console.warn("[LKT Tabs] You're trying to use session provided tabs without the required id. Please, add id attr");let a=E(o.id);a&&(m.value=a)}t.watch(()=>o.modelValue,(a,i)=>{typeof a=="string"&&(m.value=a)}),t.watch(m,(a,i)=>{b("update:modelValue"),t.nextTick(()=>{r.$forceUpdate()}),o.useSession&&T(r.id,a,o.cacheLifetime)});const f=t.computed(()=>[].join(" ")),g=t.computed(()=>{let a=[];return o.contentPad&&a.push(`padding: ${o.contentPad}`),a.join(";")}),h=t.computed(()=>{let a=[];for(let i in c)i.indexOf("tab-")!==-1&&a.push(i);return a}),ve=t.computed(()=>{let a=[];for(let i in c)i.indexOf("title-")!==-1&&a.push(i);return a}),we=t.computed(()=>{let a=[];for(let i in c)i.indexOf("li-")!==-1&&a.push(i);return a}),C=t.computed(()=>{let a={};for(let i in r.$refs)a[i]=r.$refs[i].hash;return a}),xe=t.computed(()=>Object.keys(h.value).length>1),w=(a="")=>C.value.length>0&&C.value[a]?"#"+C.value[a]:"#",x=(a="")=>o.titles&&o.titles[a]?o.titles[a]:a,Le=()=>{r.$forceUpdate()};for(let a in h.value)m.value===""&&(m.value=a);return(a,i)=>(t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["lkt-tabs",f.value])},[t.withDirectives(t.createElementVNode("ul",ke,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(h.value,l=>(t.openBlock(),t.createElementBlock("li",{key:l,class:t.normalizeClass(["lkt-tab",{"is-active":l===m.value}]),role:"presentation"},[ve.value.includes(l)?(t.openBlock(),t.createElementBlock("a",{key:0,href:w(l),onClick:t.withModifiers(S=>m.value=l,["prevent"]),role:"tab"},[t.renderSlot(a.$slots,"title-"+l)],8,be)):(t.openBlock(),t.createElementBlock("a",{key:1,innerHTML:x(l),onClick:t.withModifiers(S=>m.value=l,["prevent"]),href:w(l),role:"tab"},null,8,ge))],2))),128)),(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(we.value,(l,S)=>(t.openBlock(),t.createElementBlock("li",Ce,[t.renderSlot(a.$slots,"li-"+S)]))),256))],512),[[t.vShow,xe.value]]),t.createElementVNode("div",{class:"lkt-tabs__content",style:t.normalizeStyle(g.value)},[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(h.value,l=>(t.openBlock(),t.createBlock(B,{ref_for:!0,ref:l,hash:l,id:l,name:x(l),"active-hash":m.value,onIsActive:Le},{default:t.withCtx(()=>[t.renderSlot(a.$slots,"tab-"+l)]),_:2},1032,["hash","id","name","active-hash"]))),256))],4)],2))}});return{install:(e,n)=>{e.component("lkt-tabs",Se)}}});
|
|
@@ -1,13 +1,5 @@
|
|
|
1
1
|
import LktTab from "../components/LktTab.vue";
|
|
2
|
-
import { LktObject } from "lkt-vue-kernel";
|
|
3
|
-
type __VLS_Props = {
|
|
4
|
-
modelValue: string | number;
|
|
5
|
-
id?: string;
|
|
6
|
-
useSession?: boolean;
|
|
7
|
-
cacheLifetime?: number;
|
|
8
|
-
contentPad?: string;
|
|
9
|
-
titles?: LktObject;
|
|
10
|
-
};
|
|
2
|
+
import { LktObject, TabsConfig } from "lkt-vue-kernel";
|
|
11
3
|
declare const Value: import("vue").Ref<string, string>;
|
|
12
4
|
declare const classes: import("vue").ComputedRef<string>;
|
|
13
5
|
declare const contentStyles: import("vue").ComputedRef<string>;
|
|
@@ -27,7 +19,7 @@ type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$
|
|
|
27
19
|
} & {
|
|
28
20
|
[K in NonNullable<typeof __VLS_17>]?: (props: typeof __VLS_18) => any;
|
|
29
21
|
}>;
|
|
30
|
-
declare const __VLS_self: import("vue").DefineComponent<
|
|
22
|
+
declare const __VLS_self: import("vue").DefineComponent<TabsConfig, {
|
|
31
23
|
LktTab: typeof LktTab;
|
|
32
24
|
Value: typeof Value;
|
|
33
25
|
classes: typeof classes;
|
|
@@ -41,7 +33,7 @@ declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
|
|
|
41
33
|
refresh: typeof refresh;
|
|
42
34
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
43
35
|
"update:modelValue": (...args: any[]) => void;
|
|
44
|
-
}, string, import("vue").PublicProps, Readonly<
|
|
36
|
+
}, string, import("vue").PublicProps, Readonly<TabsConfig> & Readonly<{
|
|
45
37
|
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
46
38
|
}>, {
|
|
47
39
|
id: string;
|
|
@@ -51,9 +43,9 @@ declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
|
|
|
51
43
|
contentPad: string;
|
|
52
44
|
titles: LktObject;
|
|
53
45
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
54
|
-
declare const __VLS_component: import("vue").DefineComponent<
|
|
46
|
+
declare const __VLS_component: import("vue").DefineComponent<TabsConfig, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
55
47
|
"update:modelValue": (...args: any[]) => void;
|
|
56
|
-
}, string, import("vue").PublicProps, Readonly<
|
|
48
|
+
}, string, import("vue").PublicProps, Readonly<TabsConfig> & Readonly<{
|
|
57
49
|
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
58
50
|
}>, {
|
|
59
51
|
id: string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "lkt-tabs",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.3.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "src/index.ts",
|
|
6
6
|
"module": "src/index.ts",
|
|
@@ -45,8 +45,8 @@
|
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|
|
47
47
|
"lkt-session": "^1.0.6",
|
|
48
|
-
"lkt-string-tools": "^1.0
|
|
49
|
-
"lkt-vue-kernel": "^1.0.
|
|
48
|
+
"lkt-string-tools": "^1.1.0",
|
|
49
|
+
"lkt-vue-kernel": "^1.0.51",
|
|
50
50
|
"vue": "^3.0.5"
|
|
51
51
|
}
|
|
52
52
|
}
|
|
@@ -2,27 +2,13 @@
|
|
|
2
2
|
import LktTab from "../components/LktTab.vue";
|
|
3
3
|
import {computed, getCurrentInstance, nextTick, ref, useSlots, watch} from 'vue';
|
|
4
4
|
import {loadSelectedTabFromSession, setSelectedTabFromSession} from "../functions/functions";
|
|
5
|
-
import {LktObject} from "lkt-vue-kernel";
|
|
5
|
+
import {getDefaultValues, LktObject, Tabs, TabsConfig} from "lkt-vue-kernel";
|
|
6
6
|
|
|
7
7
|
const {ctx: _this}: any = getCurrentInstance();
|
|
8
8
|
|
|
9
9
|
const slots = useSlots();
|
|
10
10
|
|
|
11
|
-
const props = withDefaults(defineProps<
|
|
12
|
-
modelValue: string|number
|
|
13
|
-
id?: string
|
|
14
|
-
useSession?: boolean
|
|
15
|
-
cacheLifetime?: number
|
|
16
|
-
contentPad?: string
|
|
17
|
-
titles?: LktObject
|
|
18
|
-
}>(), {
|
|
19
|
-
modelValue: '',
|
|
20
|
-
id: '',
|
|
21
|
-
useSession: false,
|
|
22
|
-
cacheLifetime: 5,
|
|
23
|
-
contentPad: '',
|
|
24
|
-
titles: () => ({}),
|
|
25
|
-
});
|
|
11
|
+
const props = withDefaults(defineProps<TabsConfig>(), getDefaultValues(Tabs));
|
|
26
12
|
|
|
27
13
|
const emit = defineEmits([
|
|
28
14
|
'update:modelValue'
|
|
@@ -146,7 +132,7 @@ for (let k in tabsSlots.value) {
|
|
|
146
132
|
</template>
|
|
147
133
|
</li>
|
|
148
134
|
<li v-for="(_, key) in liSlots" data-lkt="tab">
|
|
149
|
-
<slot v-bind:name="'li-' + key"
|
|
135
|
+
<slot v-bind:name="'li-' + key"/>
|
|
150
136
|
</li>
|
|
151
137
|
</ul>
|
|
152
138
|
<div class="lkt-tabs__content" v-bind:style="contentStyles">
|
package/theme/default.css
CHANGED
|
@@ -1,36 +1,33 @@
|
|
|
1
1
|
:root {
|
|
2
|
-
|
|
3
|
-
--lkt-tab-
|
|
4
|
-
--lkt-tab-
|
|
5
|
-
--lkt-tab
|
|
6
|
-
--lkt-tab-
|
|
7
|
-
--lkt-tab-
|
|
2
|
+
--lkt-tab--display: inline-flex;
|
|
3
|
+
--lkt-tab--align-items: center;
|
|
4
|
+
--lkt-tab--justify-content: center;
|
|
5
|
+
--lkt-tab--font-family: system-ui, Helvetica;
|
|
6
|
+
--lkt-tab--font-size: 16px;
|
|
7
|
+
--lkt-tab--font-weight: 300;
|
|
8
|
+
--lkt-tab--line-height: 1.425;
|
|
9
|
+
--lkt-tab--text-align: left;
|
|
10
|
+
--lkt-tab--min-width: 100%;
|
|
11
|
+
--lkt-tab--min-height: 35px;
|
|
12
|
+
--lkt-tab--padding: 7px 15px;
|
|
13
|
+
--lkt-tab--gap: 15px;
|
|
14
|
+
--lkt-tab--border-radius: 5px;
|
|
15
|
+
--lkt-tab--border-width: 1px;
|
|
16
|
+
--lkt-tab--border-style: solid;
|
|
17
|
+
--lkt-tab--color: #444444;
|
|
18
|
+
--lkt-tab--background: #e1e1e1;
|
|
19
|
+
--lkt-tab--border-color: #ddd;
|
|
20
|
+
--lkt-tab--shadow: none;
|
|
21
|
+
--lkt-tab--transition: all linear 100ms;
|
|
8
22
|
|
|
9
|
-
/**
|
|
10
|
-
--lkt-tab
|
|
11
|
-
--lkt-tab-min-height: 35px;
|
|
12
|
-
--lkt-tab-padding: 7px 15px;
|
|
13
|
-
--lkt-tab-gap: 15px;
|
|
14
|
-
|
|
15
|
-
/** Border */
|
|
16
|
-
--lkt-tab-border-radius: 5px;
|
|
17
|
-
--lkt-tab-border-width: 1px;
|
|
18
|
-
--lkt-tab-border-style: solid;
|
|
19
|
-
|
|
20
|
-
/** Colors */
|
|
21
|
-
--lkt-tab-color: #444444;
|
|
22
|
-
--lkt-tab-bg: #e1e1e1;
|
|
23
|
-
--lkt-tab-border-color: #ddd;
|
|
24
|
-
|
|
25
|
-
/** Effects */
|
|
26
|
-
--lkt-tab-shadow: none;
|
|
27
|
-
--lkt-tab-transition: all linear 100ms;
|
|
23
|
+
/** Element: List */
|
|
24
|
+
--lkt-tab--list--display: flex;
|
|
28
25
|
|
|
29
26
|
/** State: Active */
|
|
30
|
-
--lkt-tab
|
|
31
|
-
--lkt-tab
|
|
27
|
+
--lkt-tab--active--background: #444444;
|
|
28
|
+
--lkt-tab--active--color: #e1e1e1;
|
|
32
29
|
|
|
33
30
|
/** State: Hover */
|
|
34
|
-
--lkt-tab
|
|
35
|
-
--lkt-tab-color
|
|
31
|
+
--lkt-tab--hover--background: #444444;
|
|
32
|
+
--lkt-tab--hover-color: #e1e1e1;
|
|
36
33
|
}
|
package/dist/src/constants.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
declare const SESSION_STORAGE_KEY = "lkt-tabs.cache";
|