@kiva/kv-components 6.55.2 → 6.56.1
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
.kv-secondary-nav-holder[data-v-
|
|
1
|
+
.kv-secondary-nav-holder[data-v-b0827053]{height:62px}.kv-secondary-nav[data-v-b0827053]{min-height:62px}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import { toRefs as
|
|
2
|
-
import { defaultTheme as
|
|
3
|
-
import { mdiChevronUp as
|
|
4
|
-
import
|
|
5
|
-
import
|
|
1
|
+
import { toRefs as N, ref as _, computed as w, resolveComponent as v, openBlock as o, createBlock as u, withCtx as c, createElementVNode as l, normalizeClass as i, createVNode as p, createElementBlock as f, resolveDynamicComponent as b, createTextVNode as x, toDisplayString as C, createCommentVNode as j, Fragment as O, renderList as S } from "vue";
|
|
2
|
+
import { defaultTheme as A, greenDarkTheme as E } from "@kiva/kv-tokens";
|
|
3
|
+
import { mdiChevronUp as P, mdiChevronDown as D } from "@mdi/js";
|
|
4
|
+
import H from "./KvThemeProvider.js";
|
|
5
|
+
import K from "./KvMaterialIcon.js";
|
|
6
6
|
import T from "./KvPageContainer.js";
|
|
7
7
|
import "./KvSecondaryNav.css";
|
|
8
8
|
import V from "../_virtual/_plugin-vue_export-helper.js";
|
|
9
9
|
const B = {
|
|
10
10
|
name: "KvSecondaryNav",
|
|
11
11
|
components: {
|
|
12
|
-
KvThemeProvider:
|
|
13
|
-
KvMaterialIcon:
|
|
12
|
+
KvThemeProvider: H,
|
|
13
|
+
KvMaterialIcon: K,
|
|
14
14
|
KvPageContainer: T
|
|
15
15
|
},
|
|
16
16
|
props: {
|
|
@@ -18,11 +18,19 @@ const B = {
|
|
|
18
18
|
type: String,
|
|
19
19
|
default: ""
|
|
20
20
|
},
|
|
21
|
+
headingLink: {
|
|
22
|
+
type: Object,
|
|
23
|
+
required: !1,
|
|
24
|
+
default: () => ({}),
|
|
25
|
+
validator(n) {
|
|
26
|
+
return !n || Object.keys(n).length === 0 ? !0 : Object.prototype.hasOwnProperty.call(n, "text") && Object.prototype.hasOwnProperty.call(n, "href");
|
|
27
|
+
}
|
|
28
|
+
},
|
|
21
29
|
links: {
|
|
22
30
|
type: Array,
|
|
23
31
|
default: () => [],
|
|
24
|
-
validator(
|
|
25
|
-
return
|
|
32
|
+
validator(n) {
|
|
33
|
+
return n.every(
|
|
26
34
|
(r) => Object.prototype.hasOwnProperty.call(r, "text") && Object.prototype.hasOwnProperty.call(r, "href")
|
|
27
35
|
);
|
|
28
36
|
}
|
|
@@ -30,99 +38,111 @@ const B = {
|
|
|
30
38
|
linkAlignment: {
|
|
31
39
|
type: String,
|
|
32
40
|
default: "",
|
|
33
|
-
validator(
|
|
34
|
-
return ["left", "right", "center"].includes(
|
|
41
|
+
validator(n) {
|
|
42
|
+
return ["left", "right", "center"].includes(n);
|
|
35
43
|
}
|
|
36
44
|
},
|
|
37
45
|
theme: {
|
|
38
46
|
type: String,
|
|
39
47
|
default: "default",
|
|
40
|
-
validator(
|
|
41
|
-
return ["default", "dark"].includes(
|
|
48
|
+
validator(n) {
|
|
49
|
+
return ["default", "dark"].includes(n);
|
|
42
50
|
}
|
|
43
51
|
}
|
|
44
52
|
},
|
|
45
53
|
emits: [
|
|
46
54
|
"subnavLinkClicked"
|
|
47
55
|
],
|
|
48
|
-
setup(
|
|
56
|
+
setup(n, { emit: r }) {
|
|
49
57
|
const {
|
|
50
|
-
heading:
|
|
58
|
+
heading: t,
|
|
51
59
|
linkAlignment: e,
|
|
52
|
-
theme:
|
|
53
|
-
} =
|
|
54
|
-
default:
|
|
55
|
-
dark:
|
|
56
|
-
})[
|
|
60
|
+
theme: h
|
|
61
|
+
} = N(n), g = _(null), d = _(!1), s = w(() => n.headingLink && n.headingLink.href), m = w(() => e.value === "right" ? t.value && t.value.length > 0 ? "tw-justify-between" : "tw-justify-between md:tw-justify-end" : e.value === "left" ? "tw-justify-between md:tw-justify-start" : e.value === "center" ? "tw-justify-between md:tw-justify-center" : ""), a = w(() => ({
|
|
62
|
+
default: A,
|
|
63
|
+
dark: E
|
|
64
|
+
})[h.value]);
|
|
57
65
|
return {
|
|
58
|
-
|
|
66
|
+
hasHeadingLink: s,
|
|
67
|
+
navAlignmentClass: m,
|
|
59
68
|
toggleSubNavigation: () => {
|
|
60
|
-
|
|
69
|
+
d.value = !d.value;
|
|
61
70
|
},
|
|
62
|
-
subNavigationOpen:
|
|
63
|
-
mdiChevronUp:
|
|
64
|
-
mdiChevronDown:
|
|
71
|
+
subNavigationOpen: d,
|
|
72
|
+
mdiChevronUp: P,
|
|
73
|
+
mdiChevronDown: D,
|
|
65
74
|
subNavigation: g,
|
|
66
|
-
themeStyle:
|
|
67
|
-
handleLinkClick: (
|
|
68
|
-
r("subnavLinkClicked",
|
|
75
|
+
themeStyle: a,
|
|
76
|
+
handleLinkClick: (y) => {
|
|
77
|
+
r("subnavLinkClicked", y);
|
|
69
78
|
}
|
|
70
79
|
};
|
|
71
80
|
}
|
|
72
|
-
}, I = { class: "kv-secondary-
|
|
73
|
-
function
|
|
74
|
-
const
|
|
75
|
-
return
|
|
81
|
+
}, I = { class: "kv-secondary-nav__links tw-flex tw-flex-col md:tw-flex-row tw-items-center tw-gap-3" };
|
|
82
|
+
function M(n, r, t, e, h, g) {
|
|
83
|
+
const d = v("kv-material-icon"), s = v("kv-page-container"), m = v("kv-theme-provider");
|
|
84
|
+
return o(), u(m, {
|
|
76
85
|
theme: e.themeStyle,
|
|
77
86
|
class: "kv-tailwind"
|
|
78
87
|
}, {
|
|
79
|
-
default:
|
|
80
|
-
|
|
81
|
-
class:
|
|
88
|
+
default: c(() => [
|
|
89
|
+
l("div", {
|
|
90
|
+
class: i(["tw-z-1 tw-w-full kv-secondary-nav-holder relative tw-text-primary", t.theme === "default" ? "tw-bg-secondary" : "tw-bg-primary"])
|
|
82
91
|
}, [
|
|
83
|
-
|
|
84
|
-
class:
|
|
92
|
+
l("div", {
|
|
93
|
+
class: i(["tw-w-full tw-overflow-x-auto kv-secondary-nav tw-absolute tw-top-0 tw-left-0 tw-right-0", t.theme === "default" ? "tw-bg-secondary" : "tw-bg-primary"])
|
|
85
94
|
}, [
|
|
86
|
-
|
|
87
|
-
default:
|
|
88
|
-
|
|
95
|
+
p(s, null, {
|
|
96
|
+
default: c(() => [
|
|
97
|
+
l("div", {
|
|
89
98
|
ref: "navInner",
|
|
90
|
-
class:
|
|
99
|
+
class: i(["kv-secondary-nav__inner tw-flex tw-gap-2 md:tw-gap-4 tw-items-center tw-flex-wrap tw-py-2", e.navAlignmentClass])
|
|
91
100
|
}, [
|
|
92
|
-
|
|
101
|
+
t.heading && t.heading.length > 0 ? (o(), f("div", {
|
|
93
102
|
key: 0,
|
|
94
|
-
class:
|
|
103
|
+
class: i(["kv-secondary-nav__heading-container", { "tw-block md:tw-hidden": t.linkAlignment === "left" || t.linkAlignment === "center" }])
|
|
95
104
|
}, [
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
105
|
+
(o(), u(b(e.hasHeadingLink ? t.headingLink.isExternal ? "a" : "router-link" : "div"), {
|
|
106
|
+
to: e.hasHeadingLink ? t.headingLink.isExternal ? void 0 : t.headingLink.href : void 0,
|
|
107
|
+
href: e.hasHeadingLink && t.headingLink.isExternal ? t.headingLink.href : void 0,
|
|
108
|
+
class: i(["kv-secondary-nav__heading tw-text-h3 tw-text-primary tw-bg-transparent tw-border-none tw-no-underline", {
|
|
109
|
+
"tw-cursor-pointer": e.hasHeadingLink
|
|
110
|
+
}])
|
|
111
|
+
}, {
|
|
112
|
+
default: c(() => [
|
|
113
|
+
x(C(t.heading), 1)
|
|
114
|
+
]),
|
|
115
|
+
_: 1
|
|
116
|
+
}, 8, ["to", "href", "class"]))
|
|
117
|
+
], 2)) : j("", !0),
|
|
118
|
+
l("button", {
|
|
99
119
|
class: "kv-secondary-nav__toggle tw-flex md:tw-hidden tw-text-primary tw-bg-transparent tw-border-none tw-cursor-pointer",
|
|
100
|
-
onClick: r[0] || (r[0] = (...
|
|
120
|
+
onClick: r[0] || (r[0] = (...a) => e.toggleSubNavigation && e.toggleSubNavigation(...a))
|
|
101
121
|
}, [
|
|
102
|
-
|
|
122
|
+
p(d, {
|
|
103
123
|
icon: e.subNavigationOpen ? e.mdiChevronUp : e.mdiChevronDown
|
|
104
124
|
}, null, 8, ["icon"])
|
|
105
125
|
]),
|
|
106
|
-
|
|
126
|
+
l("div", {
|
|
107
127
|
ref: "subNavigation",
|
|
108
|
-
class:
|
|
128
|
+
class: i(["kv-secondary-nav__links-container tw-pt-1 md:tw-pt-0 md:tw-block tw-w-full md:tw-w-auto", { "tw-hidden": !e.subNavigationOpen }])
|
|
109
129
|
}, [
|
|
110
|
-
|
|
111
|
-
(
|
|
112
|
-
key:
|
|
130
|
+
l("ul", I, [
|
|
131
|
+
(o(!0), f(O, null, S(t.links, (a, k) => (o(), f("li", {
|
|
132
|
+
key: k,
|
|
113
133
|
class: "kv-secondary-nav__link-item tw-w-full md:tw-w-auto"
|
|
114
134
|
}, [
|
|
115
|
-
(
|
|
116
|
-
to:
|
|
117
|
-
href:
|
|
118
|
-
class:
|
|
119
|
-
"tw-underline":
|
|
120
|
-
"tw-no-underline": !
|
|
121
|
-
}]),
|
|
122
|
-
onClick: (
|
|
135
|
+
(o(), u(b(a.isExternal ? "a" : "router-link"), {
|
|
136
|
+
to: a.isExternal ? void 0 : a.href,
|
|
137
|
+
href: a.isExternal ? a.href : void 0,
|
|
138
|
+
class: i([{
|
|
139
|
+
"tw-underline": a.isActive,
|
|
140
|
+
"tw-no-underline": !a.isActive
|
|
141
|
+
}, "kv-secondary-nav__link tw-py-2 md:tw-py-n tw-text-primary tw-font-medium hover:tw-underline hover:tw-text-primary tw-cursor-pointer"]),
|
|
142
|
+
onClick: (L) => e.handleLinkClick(a)
|
|
123
143
|
}, {
|
|
124
|
-
default:
|
|
125
|
-
|
|
144
|
+
default: c(() => [
|
|
145
|
+
x(C(a.text), 1)
|
|
126
146
|
]),
|
|
127
147
|
_: 2
|
|
128
148
|
}, 1032, ["to", "href", "class", "onClick"]))
|
|
@@ -139,7 +159,7 @@ function z(a, r, n, e, f, g) {
|
|
|
139
159
|
_: 1
|
|
140
160
|
}, 8, ["theme"]);
|
|
141
161
|
}
|
|
142
|
-
const W = /* @__PURE__ */ V(B, [["render",
|
|
162
|
+
const W = /* @__PURE__ */ V(B, [["render", M], ["__scopeId", "data-v-b0827053"]]);
|
|
143
163
|
export {
|
|
144
164
|
W as default
|
|
145
165
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kiva/kv-components",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.56.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -114,5 +114,5 @@
|
|
|
114
114
|
"embla-carousel-fade",
|
|
115
115
|
"popper.js"
|
|
116
116
|
],
|
|
117
|
-
"gitHead": "
|
|
117
|
+
"gitHead": "2f61b45ca5c74f7ce4ce26ee2db566ad70a7fe3e"
|
|
118
118
|
}
|