lkt-tabs 1.3.2 → 2.0.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/build.css ADDED
@@ -0,0 +1 @@
1
+ .lkt-tabs{max-width:100%}.lkt-tab--content{padding:var(--lkt-tab--content--padding)}
@@ -0,0 +1,4 @@
1
+ export { ie as default };
2
+ declare namespace ie {
3
+ function install(e: any, o: any): void;
4
+ }
package/dist/build.js ADDED
@@ -0,0 +1,187 @@
1
+ import { defineComponent as T, createElementBlock as f, openBlock as l, unref as w, renderSlot as E, Fragment as S, renderList as O, createBlock as C, resolveDynamicComponent as x, mergeProps as h, mergeDefaults as A, ref as V, watch as b, computed as v, onMounted as D, resolveComponent as P, normalizeClass as K, createVNode as R, createElementVNode as I, createCommentVNode as N, withCtx as F } from "vue";
2
+ import { generateRandomString as B, trim as _ } from "lkt-string-tools";
3
+ import { secondsToMilliseconds as M } from "lkt-date-tools";
4
+ import { MenuEntryType as k, ButtonType as U, MenuType as G, getDefaultValues as j, Tabs as q } from "lkt-vue-kernel";
5
+ const z = ["id"], H = /* @__PURE__ */ T({
6
+ __name: "LktTab",
7
+ props: {
8
+ tab: {},
9
+ isActive: { type: Boolean },
10
+ identifier: {}
11
+ },
12
+ setup(e) {
13
+ const o = B(8);
14
+ return (s, i) => (l(), f("section", {
15
+ class: "lkt-tab--content",
16
+ role: "tabpanel",
17
+ id: `lkt-tabs-${w(o)}-${e.tab.key}`
18
+ }, [
19
+ (l(!0), f(S, null, O(e.tab.content, (a) => (l(), C(x(a.tag), h({
20
+ class: a.class
21
+ }, { ref_for: !0 }, a.props), null, 16, ["class"]))), 256)),
22
+ E(s.$slots, "default")
23
+ ], 8, z));
24
+ }
25
+ });
26
+ class J {
27
+ constructor(o) {
28
+ o || (o = !0), this.value = o;
29
+ }
30
+ enabled() {
31
+ return this.value;
32
+ }
33
+ }
34
+ class c {
35
+ }
36
+ c.SUPPORTS_LOCAL_STORAGE = !1;
37
+ c.SUPPORTS_SESSION_STORAGE = !1;
38
+ c.COOKIE_FALLBACK = new J();
39
+ const Y = (e, o, s) => {
40
+ const i = /* @__PURE__ */ new Date(), a = i.getTime() + M(s);
41
+ i.setTime(a);
42
+ const r = `expires=${i.toUTCString()}`;
43
+ document.cookie = `${e}=${o}, ${r}`;
44
+ }, Q = (e) => {
45
+ const o = `${e}=`, s = document.cookie.split(","), i = document.cookie.split("expires="), a = _(i[1]);
46
+ let r = new Date(a);
47
+ if (a && (r = new Date(a)) && r < /* @__PURE__ */ new Date()) {
48
+ $(e);
49
+ return;
50
+ }
51
+ for (let u = 0; u < s.length; u++) {
52
+ const d = _(s[u]);
53
+ if (d.indexOf(o) == 0)
54
+ return d.substring(o.length, d.length);
55
+ }
56
+ return "";
57
+ }, $ = (e) => {
58
+ Y(e, "", -1);
59
+ }, W = (e) => {
60
+ if (!c.SUPPORTS_SESSION_STORAGE) {
61
+ if (!c.COOKIE_FALLBACK.enabled())
62
+ throw new Error("Browser doesn't support sessionStorage and cookies fallback is disabled");
63
+ return Q(e);
64
+ }
65
+ const o = JSON.parse(sessionStorage.getItem(e));
66
+ if (!o)
67
+ return;
68
+ const s = typeof o.expires == "string" && o.expires.length > 0;
69
+ let i;
70
+ if (s && (i = new Date(o.expires)) && i < /* @__PURE__ */ new Date()) {
71
+ X(e);
72
+ return;
73
+ }
74
+ return o.value;
75
+ }, X = (e) => {
76
+ if (!c.SUPPORTS_SESSION_STORAGE) {
77
+ if (!c.COOKIE_FALLBACK.enabled())
78
+ throw new Error("Browser doesn't support sessionStorage and cookies fallback is disabled");
79
+ return $(e);
80
+ }
81
+ return sessionStorage.removeItem(e);
82
+ }, Z = (e) => `lkt-tabs.${window.location.host}${window.location.pathname}.${e}`, ee = (e) => W(Z(e)), te = { class: "lkt-tabs--content" }, se = /* @__PURE__ */ T({
83
+ __name: "LktTabs",
84
+ props: /* @__PURE__ */ A({
85
+ modelValue: {},
86
+ id: {},
87
+ class: {},
88
+ useSession: { type: Boolean },
89
+ cacheLifetime: {},
90
+ tabs: {},
91
+ navStartButtons: {},
92
+ navEndButtons: {}
93
+ }, j(q)),
94
+ emits: [
95
+ "update:modelValue"
96
+ ],
97
+ setup(e, { emit: o }) {
98
+ const s = e, i = o, a = B(8), r = V("");
99
+ if (s.useSession) {
100
+ s.id || console.warn("[LKT Tabs] You're trying to use session provided tabs without the required id. Please, add id attr");
101
+ let n = ee(s.id);
102
+ n && (r.value = n);
103
+ }
104
+ b(() => s.modelValue, (n, p) => {
105
+ typeof n == "string" && (r.value = n);
106
+ }), b(r, (n, p) => {
107
+ i("update:modelValue");
108
+ });
109
+ const u = v(() => {
110
+ let n = [];
111
+ return s.class && n.push(s.class), n.join(" ");
112
+ }), d = v(() => {
113
+ var p, m;
114
+ let n = [];
115
+ return (p = s.navStartButtons) == null || p.forEach((t) => {
116
+ n.push({
117
+ type: k.Button,
118
+ button: t
119
+ });
120
+ }), s.tabs.map((t) => ({
121
+ key: t.key,
122
+ type: k.Button,
123
+ button: {
124
+ ...t.button,
125
+ type: U.Tab,
126
+ text: t.button.text ?? t.key,
127
+ anchor: {
128
+ to: t.hash ? `#${t.hash}` : void 0
129
+ },
130
+ aria: {
131
+ controls: `lkt-tabs-${a}-${t.key}`,
132
+ selected: r.value === t.key
133
+ },
134
+ events: {
135
+ click: (L) => {
136
+ var g, y;
137
+ typeof ((g = t.button.events) == null ? void 0 : g.click) == "function" && ((y = t.button.events) == null || y.click(L)), r.value = t.key;
138
+ }
139
+ }
140
+ }
141
+ })).forEach((t) => n.push(t)), (m = s.navEndButtons) == null || m.forEach((t) => {
142
+ n.push({
143
+ type: k.Button,
144
+ button: t
145
+ });
146
+ }), {
147
+ menuKey: `tabs-menu-${s.id}`,
148
+ type: G.TabList,
149
+ modelValue: n
150
+ };
151
+ });
152
+ return D(() => {
153
+ !r.value && s.tabs.length > 0 && (r.value = s.tabs[0].key);
154
+ }), (n, p) => {
155
+ const m = P("lkt-menu");
156
+ return l(), f("div", {
157
+ class: K(["lkt-tabs", u.value])
158
+ }, [
159
+ R(m, h(d.value, { class: "lkt-tabs--list" }), null, 16),
160
+ I("div", te, [
161
+ (l(!0), f(S, null, O(e.tabs, (t) => (l(), f(S, null, [
162
+ r.value === t.key ? (l(), C(H, h({
163
+ key: 0,
164
+ ref_for: !0
165
+ }, {
166
+ tab: t,
167
+ isActive: r.value === t.key,
168
+ identifier: w(a)
169
+ }), {
170
+ default: F(() => [
171
+ E(n.$slots, "tab-" + t.key)
172
+ ]),
173
+ _: 2
174
+ }, 1040)) : N("", !0)
175
+ ], 64))), 256))
176
+ ])
177
+ ], 2);
178
+ };
179
+ }
180
+ }), ie = {
181
+ install: (e, o) => {
182
+ e.component("lkt-tabs", se);
183
+ }
184
+ };
185
+ export {
186
+ ie as default
187
+ };
@@ -0,0 +1,18 @@
1
+ import { TabConfig } from "lkt-vue-kernel";
2
+ type __VLS_Props = {
3
+ tab: TabConfig;
4
+ isActive: boolean;
5
+ identifier: string;
6
+ };
7
+ declare var __VLS_5: {};
8
+ type __VLS_Slots = {} & {
9
+ default?: (props: typeof __VLS_5) => any;
10
+ };
11
+ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
12
+ declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
13
+ export default _default;
14
+ type __VLS_WithSlots<T, S> = T & {
15
+ new (): {
16
+ $slots: S;
17
+ };
18
+ };
@@ -0,0 +1,25 @@
1
+ import { TabConfig, TabsConfig, ValidTabKey } from "lkt-vue-kernel";
2
+ declare var __VLS_9: string, __VLS_10: {};
3
+ type __VLS_Slots = {} & {
4
+ [K in NonNullable<typeof __VLS_9>]?: (props: typeof __VLS_10) => any;
5
+ };
6
+ declare const __VLS_component: import("vue").DefineComponent<TabsConfig, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
7
+ "update:modelValue": (...args: any[]) => void;
8
+ }, string, import("vue").PublicProps, Readonly<TabsConfig> & Readonly<{
9
+ "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
10
+ }>, {
11
+ id: string;
12
+ modelValue: ValidTabKey;
13
+ navStartButtons: Array<import("lkt-vue-kernel").ButtonConfig>;
14
+ navEndButtons: Array<import("lkt-vue-kernel").ButtonConfig>;
15
+ useSession: boolean;
16
+ cacheLifetime: number;
17
+ tabs: Array<TabConfig>;
18
+ }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
19
+ declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
20
+ export default _default;
21
+ type __VLS_WithSlots<T, S> = T & {
22
+ new (): {
23
+ $slots: S;
24
+ };
25
+ };
package/package.json CHANGED
@@ -1,33 +1,27 @@
1
1
  {
2
2
  "name": "lkt-tabs",
3
- "version": "1.3.2",
3
+ "type": "module",
4
+ "version": "2.0.0",
4
5
  "description": "",
5
- "main": "src/index.ts",
6
- "module": "src/index.ts",
7
- "files": [
8
- "dist/*",
9
- "src/**/*.vue",
10
- "theme/**/*.css"
11
- ],
12
6
  "sideEffects": false,
7
+ "module": "./dist/build.js",
13
8
  "exports": {
14
9
  ".": {
15
- "import": "./dist/lkt-tabs.es.js",
16
- "require": "./dist/lkt-tabs.umd.js"
10
+ "import": "./dist/build.js"
17
11
  },
18
- "./styles": "./dist/lkt-tabs.css",
19
- "./dist/style.css": "./dist/lkt-tabs.css",
12
+ "./styles": "./dist/build.css",
20
13
  "./theme": "./theme/default.css",
21
14
  "./theme/default": "./theme/default.css"
22
15
  },
23
- "types": "./dist/types/index.d.ts",
16
+ "types": "./dist/build.d.ts",
17
+ "files": [
18
+ "dist/*",
19
+ "src/**/*.vue",
20
+ "theme/**/*.css"
21
+ ],
24
22
  "scripts": {
25
- "serve": "vite",
26
- "build": "vite build && vue-tsc --emitDeclarationOnly --project tsconfig.json && mv dist/src dist/types && rm dist/README.md.d.ts && rm dist/vite.config.d.ts",
27
- "build2": "vite build",
28
- "preview": "vite preview",
29
- "test": "vitest",
30
- "test-coverage": "vitest run --coverage"
23
+ "build": "vue-tsc --declaration --emitDeclarationOnly; vite build; tsc --project tsconfig.build.json; cp build/* dist/",
24
+ "rebuild": "rm -rf dist/*; vue-tsc --declaration --emitDeclarationOnly; vite build; tsc --project tsconfig.build.json; cp build/* dist/"
31
25
  },
32
26
  "author": "Antonio Ibáñez",
33
27
  "engines": {
@@ -37,17 +31,16 @@
37
31
  "@babel/types": "^7.23.6",
38
32
  "@types/node": "^20.11.19",
39
33
  "@types/rollup": "^0.54.0",
40
- "@vitejs/plugin-vue": "^5.0.4",
34
+ "@vitejs/plugin-vue": "^5.2.1",
41
35
  "rollup": "^4.34.8",
42
36
  "typescript": "^5.7.3",
43
37
  "vite": "^6.1.1",
44
- "vue": "^3.3.0",
45
38
  "vue-tsc": "^2.2.0"
46
39
  },
47
40
  "peerDependencies": {
48
41
  "lkt-session": "^1.0.6",
49
42
  "lkt-string-tools": "^1.1.0",
50
- "lkt-vue-kernel": "^1.0.51",
43
+ "lkt-vue-kernel": "^1.1.4",
51
44
  "vue": "^3.0.5"
52
45
  }
53
46
  }
@@ -1,47 +1,29 @@
1
1
  <script lang="ts" setup>
2
- import {computed, ref, watch} from "vue";
3
- import {generateRandomString, isString} from "lkt-string-tools";
2
+ import {TabConfig} from "lkt-vue-kernel";
3
+ import {generateRandomString} from "lkt-string-tools";
4
4
 
5
- const props = defineProps({
6
- id: {type: String, default: ''},
7
- name: {type: String, required: true},
8
- hash: {type: String, default: ''},
9
- activeHash: {type: String, default: ''},
10
- isDisabled: {type: Boolean, default: false},
11
- });
5
+ const props = withDefaults(defineProps<{
6
+ tab: TabConfig
7
+ isActive: boolean
8
+ identifier: string
9
+ }>(), {})
12
10
 
13
- const emit = defineEmits(['is-active']);
14
-
15
- const isActive = ref(false),
16
- uniqueId = ref(generateRandomString(8));
17
-
18
-
19
- const computedId = computed(() => {
20
- if (props.id) return props.id;
21
- if (isString(props.name) && props.name.length > 0) {
22
- return props.name.toLowerCase().replace(/ /g, '-');
23
- }
24
- return uniqueId.value;
25
- })
26
-
27
- const checkIsActive = () => {
28
- isActive.value = props.activeHash === props.hash;
29
- emit('is-active', isActive.value);
30
- }
31
-
32
- watch(() => props.activeHash, checkIsActive);
33
-
34
- checkIsActive();
35
11
 
12
+ const identifier = generateRandomString(8);
36
13
  </script>
37
14
 
38
15
  <template>
39
16
  <section
40
- data-lkt="tab-content"
41
- v-if="isActive"
42
- v-bind:id="computedId"
17
+ class="lkt-tab--content"
43
18
  role="tabpanel"
19
+ :id="`lkt-tabs-${identifier}-${tab.key}`"
44
20
  >
21
+ <component
22
+ v-for="element in tab.content"
23
+ :is="element.tag"
24
+ :class="element.class"
25
+ v-bind="element.props"
26
+ />
45
27
  <slot/>
46
28
  </section>
47
29
  </template>
@@ -1,12 +1,21 @@
1
1
  <script lang="ts" setup>
2
2
  import LktTab from "../components/LktTab.vue";
3
- import {computed, getCurrentInstance, nextTick, ref, useSlots, watch} from 'vue';
4
- import {loadSelectedTabFromSession, setSelectedTabFromSession} from "../functions/functions";
5
- import {getDefaultValues, LktObject, Tabs, TabsConfig} from "lkt-vue-kernel";
6
-
7
- const {ctx: _this}: any = getCurrentInstance();
8
-
9
- const slots = useSlots();
3
+ import {computed, onMounted, ref, watch} from 'vue';
4
+ import {loadSelectedTabFromSession} from "../functions/functions";
5
+ import {
6
+ ButtonType,
7
+ ClickEventArgs,
8
+ getDefaultValues,
9
+ MenuConfig,
10
+ MenuEntryConfig,
11
+ MenuEntryType,
12
+ MenuType,
13
+ TabConfig,
14
+ Tabs,
15
+ TabsConfig,
16
+ ValidTabKey
17
+ } from "lkt-vue-kernel";
18
+ import {generateRandomString} from "lkt-string-tools";
10
19
 
11
20
  const props = withDefaults(defineProps<TabsConfig>(), getDefaultValues(Tabs));
12
21
 
@@ -14,7 +23,9 @@ const emit = defineEmits([
14
23
  'update:modelValue'
15
24
  ])
16
25
 
17
- const Value = ref('');
26
+ const identifier = generateRandomString(8);
27
+
28
+ const Value = ref(<ValidTabKey>'');
18
29
 
19
30
  if (props.useSession) {
20
31
  if (!props.id) {
@@ -33,120 +44,92 @@ watch(() => props.modelValue, (newVal, oldVal) => {
33
44
 
34
45
  watch(Value, (newVal, oldVal) => {
35
46
  emit('update:modelValue');
36
- nextTick(() => {
37
- _this.$forceUpdate()
38
- });
39
- if (props.useSession) {
40
- setSelectedTabFromSession(_this.id, newVal, props.cacheLifetime);
41
- }
42
47
  })
43
48
 
44
49
  const classes = computed(() => {
45
50
  let r: Array<string> = [];
51
+ if (props.class) r.push(props.class);
46
52
  return r.join(' ');
47
53
  });
48
54
 
49
- const contentStyles = computed(() => {
50
- let r = [];
51
- if (!!props.contentPad) r.push(`padding: ${props.contentPad}`);
52
- return r.join(';');
53
- });
55
+ const computedMenuConfig = computed(() => {
54
56
 
55
- const tabsSlots = computed(() => {
56
- let r: string[] = [];
57
- for (let k in slots) if (k.indexOf('tab-') !== -1) r.push(k);
58
- return r;
59
- });
57
+ let modelValue: Array<MenuEntryConfig> = [];
60
58
 
61
- const titlesSlots = computed(() => {
62
- let r: string[] = [];
63
- for (let k in slots) if (k.indexOf('title-') !== -1) r.push(k);
64
- return r;
65
- });
66
-
67
- const liSlots = computed(() => {
68
- let r: string[] = [];
69
- for (let k in slots) if (k.indexOf('li-') !== -1) r.push(k);
70
- return r;
71
- });
72
-
73
- const tabsHref = computed(() => {
74
- let r: LktObject = {};
75
- for (let k in _this.$refs) {
76
- r[k] = _this.$refs[k].hash;
77
- }
59
+ props.navStartButtons?.forEach(button => {
60
+ modelValue.push({
61
+ type: MenuEntryType.Button,
62
+ button,
63
+ })
64
+ });
78
65
 
79
- return r;
80
- });
66
+ props.tabs.map((tab: TabConfig) => {
67
+ return <MenuEntryConfig>{
68
+ key: tab.key,
69
+ type: MenuEntryType.Button,
70
+ button: {
71
+ ...tab.button,
72
+ type: ButtonType.Tab,
73
+ text: tab.button.text ?? tab.key,
74
+ anchor: {
75
+ to: tab.hash ? `#${tab.hash}` : undefined
76
+ },
77
+ aria: {
78
+ controls: `lkt-tabs-${identifier}-${tab.key}`,
79
+ selected: Value.value === tab.key,
80
+ },
81
+ events: {
82
+ click: (args: ClickEventArgs) => {
83
+ if (typeof tab.button.events?.click === 'function') {
84
+ tab.button.events?.click(args);
85
+ }
86
+
87
+ Value.value = tab.key
88
+ }
89
+ }
90
+ }
91
+ }
92
+ }).forEach(entry => modelValue.push(entry));
93
+
94
+ props.navEndButtons?.forEach(button => {
95
+ modelValue.push({
96
+ type: MenuEntryType.Button,
97
+ button,
98
+ })
99
+ });
81
100
 
82
- const displayButtons = computed(() => {
83
- return Object.keys(tabsSlots.value).length > 1;
84
- });
85
101
 
86
- const getTabHref = (key: string|number = '') => {
87
- if (tabsHref.value.length > 0 && tabsHref.value[key]) {
88
- return '#' + tabsHref.value[key];
102
+ return <MenuConfig>{
103
+ menuKey: `tabs-menu-${props.id}`,
104
+ type: MenuType.TabList,
105
+ modelValue,
89
106
  }
90
- return '#';
91
- }
92
-
93
- const getTabTitle = (key: string|number = '') => {
94
- if (props.titles && props.titles[key]) return props.titles[key];
95
- return key;
96
- }
97
-
98
- const refresh = () => {
99
- _this.$forceUpdate();
100
- }
107
+ })
101
108
 
102
- for (let k in tabsSlots.value) {
103
- if (Value.value === '') Value.value = k;
104
- }
109
+ onMounted(() => {
110
+ if (!Value.value && props.tabs.length > 0) {
111
+ Value.value = props.tabs[0].key;
112
+ }
113
+ })
105
114
  </script>
106
115
 
107
116
 
108
117
  <template>
109
118
  <div class="lkt-tabs" v-bind:class="classes">
110
- <ul class="lkt-tabs__list" v-show="displayButtons">
111
- <li
112
- v-for="key in tabsSlots"
113
- v-bind:key="key"
114
- class="lkt-tab"
115
- v-bind:class="{'is-active': key === Value}"
116
- role="presentation"
117
- >
118
- <template v-if="titlesSlots.includes(key)">
119
- <a v-bind:href="getTabHref(key)"
120
- v-on:click.prevent="Value = key"
121
- role="tab"
122
- >
123
- <slot v-bind:name="'title-' + key"/>
124
- </a>
125
- </template>
126
- <template v-else>
127
- <a v-html="getTabTitle(key)"
128
- v-on:click.prevent="Value = key"
129
- v-bind:href="getTabHref(key)"
130
- role="tab"
131
- ></a>
132
- </template>
133
- </li>
134
- <li v-for="(_, key) in liSlots" data-lkt="tab">
135
- <slot v-bind:name="'li-' + key"/>
136
- </li>
137
- </ul>
138
- <div class="lkt-tabs__content" v-bind:style="contentStyles">
139
- <lkt-tab
140
- v-for="key in tabsSlots"
141
- v-bind:ref="key"
142
- v-bind:hash="key"
143
- v-bind:id="key"
144
- v-bind:name="getTabTitle(key)"
145
- v-bind:active-hash="Value"
146
- v-on:is-active="refresh"
147
- >
148
- <slot v-bind:name="'tab-' + key"/>
149
- </lkt-tab>
119
+ <lkt-menu v-bind="computedMenuConfig" class="lkt-tabs--list"/>
120
+ <div class="lkt-tabs--content">
121
+ <template v-for="tab in tabs">
122
+ <lkt-tab
123
+ v-if="Value === tab.key"
124
+ v-bind="{
125
+ tab,
126
+ isActive: Value === tab.key,
127
+ identifier
128
+ }"
129
+ >
130
+ <slot v-bind:name="'tab-' + tab.key"/>
131
+ </lkt-tab>
132
+ </template>
150
133
  </div>
151
134
  </div>
152
135
  </template>
package/theme/default.css CHANGED
@@ -1,33 +1,4 @@
1
1
  .lkt-tabs {
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;
22
-
23
- /** Element: List */
24
- --lkt-tab--list--display: flex;
25
-
26
- /** State: Active */
27
- --lkt-tab--active--background: #444444;
28
- --lkt-tab--active--color: #e1e1e1;
29
-
30
- /** State: Hover */
31
- --lkt-tab--hover--background: #444444;
32
- --lkt-tab--hover-color: #e1e1e1;
2
+ /** Element: Content */
3
+ --lkt-tab--content--padding: 0;
33
4
  }
package/dist/lkt-tabs.css DELETED
@@ -1 +0,0 @@
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)}
@@ -1,183 +0,0 @@
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;
10
- }
11
- function X(e) {
12
- return typeof e == "string";
13
- }
14
- const Z = ["id"], ee = /* @__PURE__ */ D({
15
- __name: "LktTab",
16
- props: {
17
- id: { type: String, default: "" },
18
- name: { type: String, required: !0 },
19
- hash: { type: String, default: "" },
20
- activeHash: { type: String, default: "" },
21
- isDisabled: { type: Boolean, default: !1 }
22
- },
23
- emits: ["is-active"],
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);
27
- };
28
- return L(() => r.activeHash, f), f(), (g, p) => n.value ? (d(), m("section", {
29
- key: 0,
30
- "data-lkt": "tab-content",
31
- id: u.value,
32
- role: "tabpanel"
33
- }, [
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
- }
54
- }
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({
74
- __name: "LktTabs",
75
- props: /* @__PURE__ */ z({
76
- modelValue: {},
77
- id: {},
78
- useSession: { type: Boolean },
79
- cacheLifetime: {},
80
- contentPad: {},
81
- titles: {}
82
- }, Ue(Ie)),
83
- emits: [
84
- "update:modelValue"
85
- ],
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);
92
- }
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);
99
- });
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();
122
- };
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])
127
- }, [
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 }]),
132
- role: "presentation"
133
- }, [
134
- E.value.includes(l) ? (d(), m("a", {
135
- key: 0,
136
- href: M(l),
137
- onClick: A((S) => u.value = l, ["prevent"]),
138
- role: "tab"
139
- }, [
140
- v(t.$slots, "title-" + l)
141
- ], 8, je)) : (d(), m("a", {
142
- key: 1,
143
- innerHTML: P(l),
144
- onClick: A((S) => u.value = l, ["prevent"]),
145
- href: M(l),
146
- role: "tab"
147
- }, null, 8, Ke))
148
- ], 2))), 128)),
149
- (d(!0), m(k, null, w(N.value, (l, S) => (d(), m("li", Qe, [
150
- v(t.$slots, "li-" + S)
151
- ]))), 256))
152
- ], 512), [
153
- [j, V.value]
154
- ]),
155
- I("div", {
156
- class: "lkt-tabs__content",
157
- style: K(g.value)
158
- }, [
159
- (d(!0), m(k, null, w(p.value, (l) => (d(), Q(ee, {
160
- ref_for: !0,
161
- ref: l,
162
- hash: l,
163
- id: l,
164
- name: P(l),
165
- "active-hash": u.value,
166
- onIsActive: B
167
- }, {
168
- default: Y(() => [
169
- v(t.$slots, "tab-" + l)
170
- ]),
171
- _: 2
172
- }, 1032, ["hash", "id", "name", "active-hash"]))), 256))
173
- ], 4)
174
- ], 2));
175
- }
176
- }), Xe = {
177
- install: (e, a) => {
178
- e.component("lkt-tabs", Ye);
179
- }
180
- };
181
- export {
182
- Xe as default
183
- };
@@ -1 +0,0 @@
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,121 +0,0 @@
1
- declare const isActive: import("vue").Ref<boolean, boolean>;
2
- declare const computedId: import("vue").ComputedRef<string>;
3
- declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
4
- declare var __VLS_1: {};
5
- type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
6
- default?: (props: typeof __VLS_1) => any;
7
- }>;
8
- declare const __VLS_self: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
9
- id: {
10
- type: StringConstructor;
11
- default: string;
12
- };
13
- name: {
14
- type: StringConstructor;
15
- required: true;
16
- };
17
- hash: {
18
- type: StringConstructor;
19
- default: string;
20
- };
21
- activeHash: {
22
- type: StringConstructor;
23
- default: string;
24
- };
25
- isDisabled: {
26
- type: BooleanConstructor;
27
- default: boolean;
28
- };
29
- }>, {
30
- isActive: typeof isActive;
31
- computedId: typeof computedId;
32
- }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
33
- "is-active": (...args: any[]) => void;
34
- }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
35
- id: {
36
- type: StringConstructor;
37
- default: string;
38
- };
39
- name: {
40
- type: StringConstructor;
41
- required: true;
42
- };
43
- hash: {
44
- type: StringConstructor;
45
- default: string;
46
- };
47
- activeHash: {
48
- type: StringConstructor;
49
- default: string;
50
- };
51
- isDisabled: {
52
- type: BooleanConstructor;
53
- default: boolean;
54
- };
55
- }>> & Readonly<{
56
- "onIs-active"?: ((...args: any[]) => any) | undefined;
57
- }>, {
58
- id: string;
59
- hash: string;
60
- activeHash: string;
61
- isDisabled: boolean;
62
- }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
63
- declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
64
- id: {
65
- type: StringConstructor;
66
- default: string;
67
- };
68
- name: {
69
- type: StringConstructor;
70
- required: true;
71
- };
72
- hash: {
73
- type: StringConstructor;
74
- default: string;
75
- };
76
- activeHash: {
77
- type: StringConstructor;
78
- default: string;
79
- };
80
- isDisabled: {
81
- type: BooleanConstructor;
82
- default: boolean;
83
- };
84
- }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
85
- "is-active": (...args: any[]) => void;
86
- }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
87
- id: {
88
- type: StringConstructor;
89
- default: string;
90
- };
91
- name: {
92
- type: StringConstructor;
93
- required: true;
94
- };
95
- hash: {
96
- type: StringConstructor;
97
- default: string;
98
- };
99
- activeHash: {
100
- type: StringConstructor;
101
- default: string;
102
- };
103
- isDisabled: {
104
- type: BooleanConstructor;
105
- default: boolean;
106
- };
107
- }>> & Readonly<{
108
- "onIs-active"?: ((...args: any[]) => any) | undefined;
109
- }>, {
110
- id: string;
111
- hash: string;
112
- activeHash: string;
113
- isDisabled: boolean;
114
- }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
115
- declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
116
- export default _default;
117
- type __VLS_WithSlots<T, S> = T & {
118
- new (): {
119
- $slots: S;
120
- };
121
- };
@@ -1,64 +0,0 @@
1
- import LktTab from "../components/LktTab.vue";
2
- import { LktObject, TabsConfig } from "lkt-vue-kernel";
3
- declare const Value: import("vue").Ref<string, string>;
4
- declare const classes: import("vue").ComputedRef<string>;
5
- declare const contentStyles: import("vue").ComputedRef<string>;
6
- declare const tabsSlots: import("vue").ComputedRef<string[]>;
7
- declare const titlesSlots: import("vue").ComputedRef<string[]>;
8
- declare const liSlots: import("vue").ComputedRef<string[]>;
9
- declare const displayButtons: import("vue").ComputedRef<boolean>;
10
- declare const getTabHref: (key?: string | number) => string;
11
- declare const getTabTitle: (key?: string | number) => any;
12
- declare const refresh: () => void;
13
- declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
14
- declare var __VLS_2: string, __VLS_3: {}, __VLS_6: string, __VLS_7: {}, __VLS_17: string, __VLS_18: {};
15
- type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
16
- [K in NonNullable<typeof __VLS_2>]?: (props: typeof __VLS_3) => any;
17
- } & {
18
- [K in NonNullable<typeof __VLS_6>]?: (props: typeof __VLS_7) => any;
19
- } & {
20
- [K in NonNullable<typeof __VLS_17>]?: (props: typeof __VLS_18) => any;
21
- }>;
22
- declare const __VLS_self: import("vue").DefineComponent<TabsConfig, {
23
- LktTab: typeof LktTab;
24
- Value: typeof Value;
25
- classes: typeof classes;
26
- contentStyles: typeof contentStyles;
27
- tabsSlots: typeof tabsSlots;
28
- titlesSlots: typeof titlesSlots;
29
- liSlots: typeof liSlots;
30
- displayButtons: typeof displayButtons;
31
- getTabHref: typeof getTabHref;
32
- getTabTitle: typeof getTabTitle;
33
- refresh: typeof refresh;
34
- }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
35
- "update:modelValue": (...args: any[]) => void;
36
- }, string, import("vue").PublicProps, Readonly<TabsConfig> & Readonly<{
37
- "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
38
- }>, {
39
- id: string;
40
- modelValue: string | number;
41
- useSession: boolean;
42
- cacheLifetime: number;
43
- contentPad: string;
44
- titles: LktObject;
45
- }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
46
- declare const __VLS_component: import("vue").DefineComponent<TabsConfig, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
47
- "update:modelValue": (...args: any[]) => void;
48
- }, string, import("vue").PublicProps, Readonly<TabsConfig> & Readonly<{
49
- "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
50
- }>, {
51
- id: string;
52
- modelValue: string | number;
53
- useSession: boolean;
54
- cacheLifetime: number;
55
- contentPad: string;
56
- titles: LktObject;
57
- }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
58
- declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
59
- export default _default;
60
- type __VLS_WithSlots<T, S> = T & {
61
- new (): {
62
- $slots: S;
63
- };
64
- };
@@ -1,38 +0,0 @@
1
- declare namespace _default {
2
- let plugins: import("vite").Plugin<import("@vitejs/plugin-vue").Api>[];
3
- namespace resolve {
4
- let alias: {
5
- '@': string;
6
- '@test': string;
7
- };
8
- }
9
- namespace build {
10
- export namespace lib {
11
- let entry: string;
12
- let name: string;
13
- function fileName(format: any): string;
14
- }
15
- export { outDir };
16
- export let minify: boolean;
17
- export namespace rollupOptions {
18
- let external: string[];
19
- namespace output {
20
- let globals: {
21
- vue: string;
22
- "lkt-tools": string;
23
- "lkt-events": string;
24
- "lkt-session": string;
25
- };
26
- let sourcemapExcludeSources: boolean;
27
- }
28
- }
29
- }
30
- namespace test {
31
- namespace coverage {
32
- let reporter: string[];
33
- }
34
- function resolveSnapshotPath(testPath: any, snapExtension: any): string;
35
- }
36
- }
37
- export default _default;
38
- declare const outDir: string;
package/src/index.ts DELETED
@@ -1,12 +0,0 @@
1
- /* eslint-disable import/prefer-default-export */
2
- import {default as tabs} from "./lib-components/LktTabs.vue";
3
- import {App} from "vue";
4
- import "../style.css";
5
-
6
- const LktTabs = {
7
- install: (app: App, options: any) => {
8
- app.component('lkt-tabs', tabs);
9
- },
10
- };
11
-
12
- export default LktTabs;
File without changes