@knitify/vue 0.0.4 → 0.0.6
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/index.es.js +140 -107
- package/dist/index.umd.js +1 -1
- package/dist/types/components/Navbar/types.d.ts +6 -0
- package/package.json +2 -2
package/dist/index.es.js
CHANGED
|
@@ -1,98 +1,120 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { RouterLink as
|
|
3
|
-
const
|
|
1
|
+
import { defineComponent as b, openBlock as n, createElementBlock as l, normalizeClass as t, renderSlot as c, createElementVNode as r, resolveComponent as p, Fragment as k, renderList as $, createVNode as u, unref as x, withCtx as y, withModifiers as M, createBlock as C, createTextVNode as S, toDisplayString as N, createCommentVNode as i, useModel as I, useSlots as j, mergeModels as h } from "vue";
|
|
2
|
+
import { RouterLink as O } from "vue-router";
|
|
3
|
+
const z = /* @__PURE__ */ b({
|
|
4
4
|
__name: "KContainer",
|
|
5
5
|
props: {
|
|
6
6
|
glassy: { type: Boolean }
|
|
7
7
|
},
|
|
8
|
-
setup(
|
|
9
|
-
return (s,
|
|
10
|
-
class:
|
|
8
|
+
setup(e) {
|
|
9
|
+
return (s, o) => (n(), l("div", {
|
|
10
|
+
class: t(["KContainer", e.glassy && "KContainer--glassy"])
|
|
11
11
|
}, [
|
|
12
12
|
c(s.$slots, "default")
|
|
13
13
|
], 2));
|
|
14
14
|
}
|
|
15
|
-
}),
|
|
15
|
+
}), A = {
|
|
16
16
|
class: "KIcon",
|
|
17
17
|
title: "icon",
|
|
18
18
|
role: "img"
|
|
19
|
-
},
|
|
19
|
+
}, T = ["href"], V = /* @__PURE__ */ b({
|
|
20
20
|
__name: "KIcon",
|
|
21
21
|
props: {
|
|
22
22
|
href: { default: "" }
|
|
23
23
|
},
|
|
24
|
-
setup(
|
|
25
|
-
return (s,
|
|
26
|
-
|
|
27
|
-
href: `#${
|
|
28
|
-
}, null, 8,
|
|
24
|
+
setup(e) {
|
|
25
|
+
return (s, o) => (n(), l("svg", A, [
|
|
26
|
+
r("use", {
|
|
27
|
+
href: `#${e.href.replace(/^#/, "")}`
|
|
28
|
+
}, null, 8, T)
|
|
29
29
|
]));
|
|
30
30
|
}
|
|
31
|
-
}),
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
},
|
|
31
|
+
}), L = /* @__PURE__ */ b({
|
|
32
|
+
__name: "KBadge",
|
|
33
|
+
props: {
|
|
34
|
+
pill: { type: Boolean },
|
|
35
|
+
size: {},
|
|
36
|
+
subtle: { type: Boolean },
|
|
37
|
+
variant: {}
|
|
38
|
+
},
|
|
39
|
+
setup(e) {
|
|
40
|
+
return (s, o) => (n(), l("div", {
|
|
41
|
+
class: t([
|
|
42
|
+
"KBadge",
|
|
43
|
+
e.pill && "KBadge--pill",
|
|
44
|
+
e.size && `KBadge--${e.size}`,
|
|
45
|
+
e.subtle && "KBadge--subtle",
|
|
46
|
+
e.variant && `KBadge--${e.variant}`
|
|
47
|
+
])
|
|
48
|
+
}, [
|
|
49
|
+
c(s.$slots, "default")
|
|
50
|
+
], 2));
|
|
51
|
+
}
|
|
52
|
+
}), w = { class: "KNavbar-menu" }, E = ["href", "onClick"], D = {
|
|
53
|
+
key: 0,
|
|
54
|
+
class: /* @__PURE__ */ t(["KNavbar-caret", "KCollapse-toggle"]),
|
|
55
|
+
"data-kt-collapse-toggle": ""
|
|
56
|
+
}, _ = /* @__PURE__ */ b({
|
|
36
57
|
__name: "KNavbarMenu",
|
|
37
58
|
props: {
|
|
38
59
|
items: { default: () => [] }
|
|
39
60
|
},
|
|
40
|
-
setup(
|
|
41
|
-
return (s,
|
|
42
|
-
const
|
|
43
|
-
return
|
|
44
|
-
(
|
|
45
|
-
key: `navbar-menu-item-${
|
|
46
|
-
item:
|
|
61
|
+
setup(e) {
|
|
62
|
+
return (s, o) => {
|
|
63
|
+
const f = p("KIcon"), g = p("KNavbarMenu", !0);
|
|
64
|
+
return n(), l("ul", w, [
|
|
65
|
+
(n(!0), l(k, null, $(e.items, (a, d) => c(s.$slots, "item", {
|
|
66
|
+
key: `navbar-menu-item-${d}`,
|
|
67
|
+
item: a
|
|
47
68
|
}, () => [
|
|
48
|
-
|
|
49
|
-
to:
|
|
69
|
+
u(x(O), {
|
|
70
|
+
to: a.route ?? "/",
|
|
50
71
|
custom: ""
|
|
51
72
|
}, {
|
|
52
|
-
default:
|
|
53
|
-
|
|
54
|
-
class:
|
|
73
|
+
default: y(({ isActive: m, href: v, navigate: K }) => [
|
|
74
|
+
r("li", {
|
|
75
|
+
class: t([
|
|
55
76
|
"KNavbar-item",
|
|
56
77
|
"KCollapse is-collapsed",
|
|
57
|
-
|
|
78
|
+
m && "KNavbar-item-is-active"
|
|
58
79
|
]),
|
|
59
|
-
"data-collapse": ""
|
|
80
|
+
"data-kt-collapse": ""
|
|
60
81
|
}, [
|
|
61
|
-
|
|
62
|
-
class:
|
|
63
|
-
href:
|
|
64
|
-
onClick:
|
|
82
|
+
r("a", {
|
|
83
|
+
class: t(["KNavbar-link"]),
|
|
84
|
+
href: a.route ? v : void 0,
|
|
85
|
+
onClick: M((P) => a.route ? K() : a.onClick?.(), ["prevent"])
|
|
65
86
|
}, [
|
|
66
|
-
|
|
67
|
-
class:
|
|
87
|
+
r("span", {
|
|
88
|
+
class: t(["KNavbar-icon", a.iconClass])
|
|
68
89
|
}, [
|
|
69
|
-
|
|
70
|
-
href:
|
|
90
|
+
u(f, {
|
|
91
|
+
href: a.icon
|
|
71
92
|
}, null, 8, ["href"])
|
|
72
93
|
], 2),
|
|
73
|
-
|
|
94
|
+
a.badge ? (n(), C(L, {
|
|
74
95
|
key: 0,
|
|
75
|
-
class:
|
|
96
|
+
class: t(["KNavbar-badge", a.badgeClass]),
|
|
97
|
+
pill: "",
|
|
76
98
|
size: "sm",
|
|
77
99
|
variant: "danger"
|
|
78
100
|
}, {
|
|
79
|
-
default:
|
|
80
|
-
S(
|
|
101
|
+
default: y(() => [
|
|
102
|
+
S(N(a.badge), 1)
|
|
81
103
|
]),
|
|
82
104
|
_: 2
|
|
83
105
|
}, 1032, ["class"])) : i("", !0),
|
|
84
|
-
|
|
85
|
-
class:
|
|
86
|
-
},
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
]
|
|
91
|
-
|
|
92
|
-
key:
|
|
93
|
-
items:
|
|
106
|
+
r("span", {
|
|
107
|
+
class: t(["KNavbar-text", a.textClass])
|
|
108
|
+
}, N(a.text), 3)
|
|
109
|
+
], 8, E),
|
|
110
|
+
a.children ? (n(), l("span", D, [
|
|
111
|
+
u(f, { href: "#caretUp" })
|
|
112
|
+
])) : i("", !0),
|
|
113
|
+
a.children ? (n(), C(g, {
|
|
114
|
+
key: 1,
|
|
115
|
+
items: a.children,
|
|
94
116
|
class: "KCollapse-content",
|
|
95
|
-
"data-collapse-content": ""
|
|
117
|
+
"data-kt-collapse-content": ""
|
|
96
118
|
}, null, 8, ["items"])) : i("", !0)
|
|
97
119
|
], 2)
|
|
98
120
|
]),
|
|
@@ -102,79 +124,90 @@ const j = /* @__PURE__ */ f({
|
|
|
102
124
|
]);
|
|
103
125
|
};
|
|
104
126
|
}
|
|
105
|
-
}),
|
|
106
|
-
key: 0,
|
|
107
|
-
class: "KNavbar-brand"
|
|
108
|
-
}, U = { class: "KNavbar-body" }, q = {
|
|
109
|
-
key: 1,
|
|
110
|
-
class: "KNavbar-footer"
|
|
111
|
-
}, A = /* @__PURE__ */ f({
|
|
127
|
+
}), F = /* @__PURE__ */ b({
|
|
112
128
|
__name: "KNavbar",
|
|
113
|
-
props: /* @__PURE__ */
|
|
129
|
+
props: /* @__PURE__ */ h({
|
|
114
130
|
items: {},
|
|
115
|
-
|
|
131
|
+
bodyClass: { type: [Boolean, null, String, Object, Array] },
|
|
132
|
+
brandClass: { type: [Boolean, null, String, Object, Array] },
|
|
133
|
+
fixed: { type: Boolean, default: !1 },
|
|
134
|
+
footerClass: { type: [Boolean, null, String, Object, Array] },
|
|
135
|
+
hideToggle: { type: Boolean },
|
|
136
|
+
innerClass: { type: [Boolean, null, String, Object, Array] },
|
|
137
|
+
toggleClass: { type: [Boolean, null, String, Object, Array] }
|
|
116
138
|
}, {
|
|
117
139
|
expanded: { type: Boolean, default: !1 },
|
|
118
140
|
expandedModifiers: {}
|
|
119
141
|
}),
|
|
120
|
-
emits: /* @__PURE__ */
|
|
121
|
-
setup(
|
|
122
|
-
const
|
|
123
|
-
|
|
142
|
+
emits: /* @__PURE__ */ h(["toggle"], ["update:expanded"]),
|
|
143
|
+
setup(e, { emit: s }) {
|
|
144
|
+
const o = I(e, "expanded"), f = s, g = j(), a = () => {
|
|
145
|
+
o.value = !o.value, f("toggle", o.value);
|
|
124
146
|
};
|
|
125
|
-
return (
|
|
126
|
-
const
|
|
127
|
-
return
|
|
128
|
-
class:
|
|
147
|
+
return (d, m) => {
|
|
148
|
+
const v = p("KIcon");
|
|
149
|
+
return n(), l("aside", {
|
|
150
|
+
class: t([
|
|
129
151
|
"KNavbar",
|
|
130
|
-
|
|
131
|
-
|
|
152
|
+
o.value && "KNavbar-is-expanded",
|
|
153
|
+
e.fixed && "KNavbar-is-fixed"
|
|
132
154
|
])
|
|
133
155
|
}, [
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
156
|
+
r("div", {
|
|
157
|
+
class: t(["KNavbar-inner", e.innerClass])
|
|
158
|
+
}, [
|
|
159
|
+
g.brand ? (n(), l("div", {
|
|
160
|
+
key: 0,
|
|
161
|
+
class: t(["KNavbar-brand", e.brandClass])
|
|
162
|
+
}, [
|
|
163
|
+
c(d.$slots, "brand")
|
|
164
|
+
], 2)) : i("", !0),
|
|
165
|
+
r("nav", {
|
|
166
|
+
class: t(["KNavbar-body", e.bodyClass])
|
|
167
|
+
}, [
|
|
168
|
+
c(d.$slots, "default", {}, () => [
|
|
169
|
+
u(_, {
|
|
170
|
+
items: e.items.filter(({ hidden: K }) => !K)
|
|
142
171
|
}, null, 8, ["items"])
|
|
143
172
|
])
|
|
144
|
-
]),
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
173
|
+
], 2),
|
|
174
|
+
g.footer ? (n(), l("div", {
|
|
175
|
+
key: 1,
|
|
176
|
+
class: t(["KNavbar-footer", e.footerClass])
|
|
177
|
+
}, [
|
|
178
|
+
c(d.$slots, "footer")
|
|
179
|
+
], 2)) : i("", !0)
|
|
180
|
+
], 2),
|
|
181
|
+
e.hideToggle ? i("", !0) : (n(), l("button", {
|
|
182
|
+
key: 0,
|
|
150
183
|
type: "button",
|
|
151
|
-
class: "KNavbar-toggle",
|
|
152
|
-
onClick:
|
|
184
|
+
class: t(["KNavbar-toggle", e.toggleClass]),
|
|
185
|
+
onClick: a
|
|
153
186
|
}, [
|
|
154
|
-
|
|
155
|
-
])
|
|
187
|
+
u(v, { href: "#caretLeft" })
|
|
188
|
+
], 2))
|
|
156
189
|
], 2);
|
|
157
190
|
};
|
|
158
191
|
}
|
|
159
|
-
}),
|
|
192
|
+
}), B = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
160
193
|
__proto__: null,
|
|
161
|
-
KContainer:
|
|
162
|
-
KIcon:
|
|
163
|
-
KNavbar:
|
|
164
|
-
KNavbarMenu:
|
|
165
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
166
|
-
install(
|
|
167
|
-
for (const s in
|
|
168
|
-
|
|
194
|
+
KContainer: z,
|
|
195
|
+
KIcon: V,
|
|
196
|
+
KNavbar: F,
|
|
197
|
+
KNavbarMenu: _
|
|
198
|
+
}, Symbol.toStringTag, { value: "Module" })), q = {
|
|
199
|
+
install(e) {
|
|
200
|
+
for (const s in B)
|
|
201
|
+
e.component(
|
|
169
202
|
s,
|
|
170
|
-
|
|
203
|
+
B[s]
|
|
171
204
|
);
|
|
172
205
|
}
|
|
173
206
|
};
|
|
174
207
|
export {
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
208
|
+
z as KContainer,
|
|
209
|
+
V as KIcon,
|
|
210
|
+
F as KNavbar,
|
|
211
|
+
_ as KNavbarMenu,
|
|
212
|
+
q as default
|
|
180
213
|
};
|
package/dist/index.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(n,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("vue-router")):typeof define=="function"&&define.amd?define(["exports","vue","vue-router"],e):(n=typeof globalThis<"u"?globalThis:n||self,e(n["knitify-vue"]={},n.Vue,n.vueRouter))})(this,(function(n,e,K){"use strict";const f=e.defineComponent({__name:"KContainer",props:{glassy:{type:Boolean}},setup(t){return(o,l)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["KContainer",t.glassy&&"KContainer--glassy"])},[e.renderSlot(o.$slots,"default")],2))}}),N={class:"KIcon",title:"icon",role:"img"},k=["href"],p=e.defineComponent({__name:"KIcon",props:{href:{default:""}},setup(t){return(o,l)=>(e.openBlock(),e.createElementBlock("svg",N,[e.createElementVNode("use",{href:`#${t.href.replace(/^#/,"")}`},null,8,k)]))}}),B=e.defineComponent({__name:"KBadge",props:{pill:{type:Boolean},size:{},subtle:{type:Boolean},variant:{}},setup(t){return(o,l)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["KBadge",t.pill&&"KBadge--pill",t.size&&`KBadge--${t.size}`,t.subtle&&"KBadge--subtle",t.variant&&`KBadge--${t.variant}`])},[e.renderSlot(o.$slots,"default")],2))}}),y={class:"KNavbar-menu"},h=["href","onClick"],_={key:0,class:e.normalizeClass(["KNavbar-caret","KCollapse-toggle"]),"data-kt-collapse-toggle":""},i=e.defineComponent({__name:"KNavbarMenu",props:{items:{default:()=>[]}},setup(t){return(o,l)=>{const r=e.resolveComponent("KIcon"),c=e.resolveComponent("KNavbarMenu",!0);return e.openBlock(),e.createElementBlock("ul",y,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.items,(a,s)=>e.renderSlot(o.$slots,"item",{key:`navbar-menu-item-${s}`,item:a},()=>[e.createVNode(e.unref(K.RouterLink),{to:a.route??"/",custom:""},{default:e.withCtx(({isActive:g,href:d,navigate:m})=>[e.createElementVNode("li",{class:e.normalizeClass(["KNavbar-item","KCollapse is-collapsed",g&&"KNavbar-item-is-active"]),"data-kt-collapse":""},[e.createElementVNode("a",{class:e.normalizeClass(["KNavbar-link"]),href:a.route?d:void 0,onClick:e.withModifiers(z=>a.route?m():a.onClick?.(),["prevent"])},[e.createElementVNode("span",{class:e.normalizeClass(["KNavbar-icon",a.iconClass])},[e.createVNode(r,{href:a.icon},null,8,["href"])],2),a.badge?(e.openBlock(),e.createBlock(B,{key:0,class:e.normalizeClass(["KNavbar-badge",a.badgeClass]),pill:"",size:"sm",variant:"danger"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(a.badge),1)]),_:2},1032,["class"])):e.createCommentVNode("",!0),e.createElementVNode("span",{class:e.normalizeClass(["KNavbar-text",a.textClass])},e.toDisplayString(a.text),3)],8,h),a.children?(e.openBlock(),e.createElementBlock("span",_,[e.createVNode(r,{href:"#caretUp"})])):e.createCommentVNode("",!0),a.children?(e.openBlock(),e.createBlock(c,{key:1,items:a.children,class:"KCollapse-content","data-kt-collapse-content":""},null,8,["items"])):e.createCommentVNode("",!0)],2)]),_:2},1032,["to"])])),128))])}}}),C=e.defineComponent({__name:"KNavbar",props:e.mergeModels({items:{},bodyClass:{type:[Boolean,null,String,Object,Array]},brandClass:{type:[Boolean,null,String,Object,Array]},fixed:{type:Boolean,default:!1},footerClass:{type:[Boolean,null,String,Object,Array]},hideToggle:{type:Boolean},innerClass:{type:[Boolean,null,String,Object,Array]},toggleClass:{type:[Boolean,null,String,Object,Array]}},{expanded:{type:Boolean,default:!1},expandedModifiers:{}}),emits:e.mergeModels(["toggle"],["update:expanded"]),setup(t,{emit:o}){const l=e.useModel(t,"expanded"),r=o,c=e.useSlots(),a=()=>{l.value=!l.value,r("toggle",l.value)};return(s,g)=>{const d=e.resolveComponent("KIcon");return e.openBlock(),e.createElementBlock("aside",{class:e.normalizeClass(["KNavbar",l.value&&"KNavbar-is-expanded",t.fixed&&"KNavbar-is-fixed"])},[e.createElementVNode("div",{class:e.normalizeClass(["KNavbar-inner",t.innerClass])},[c.brand?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["KNavbar-brand",t.brandClass])},[e.renderSlot(s.$slots,"brand")],2)):e.createCommentVNode("",!0),e.createElementVNode("nav",{class:e.normalizeClass(["KNavbar-body",t.bodyClass])},[e.renderSlot(s.$slots,"default",{},()=>[e.createVNode(i,{items:t.items.filter(({hidden:m})=>!m)},null,8,["items"])])],2),c.footer?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(["KNavbar-footer",t.footerClass])},[e.renderSlot(s.$slots,"footer")],2)):e.createCommentVNode("",!0)],2),t.hideToggle?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:e.normalizeClass(["KNavbar-toggle",t.toggleClass]),onClick:a},[e.createVNode(d,{href:"#caretLeft"})],2))],2)}}}),b=Object.freeze(Object.defineProperty({__proto__:null,KContainer:f,KIcon:p,KNavbar:C,KNavbarMenu:i},Symbol.toStringTag,{value:"Module"})),V={install(t){for(const o in b)t.component(o,b[o])}};n.KContainer=f,n.KIcon=p,n.KNavbar=C,n.KNavbarMenu=i,n.default=V,Object.defineProperties(n,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
|
|
@@ -14,7 +14,13 @@ export type MenuItem = {
|
|
|
14
14
|
};
|
|
15
15
|
export type KNavbarProps = {
|
|
16
16
|
items: MenuItem[];
|
|
17
|
+
bodyClass?: ClassValue;
|
|
18
|
+
brandClass?: ClassValue;
|
|
17
19
|
fixed?: boolean;
|
|
20
|
+
footerClass?: ClassValue;
|
|
21
|
+
hideToggle?: boolean;
|
|
22
|
+
innerClass?: ClassValue;
|
|
23
|
+
toggleClass?: ClassValue;
|
|
18
24
|
};
|
|
19
25
|
export type KNavbarEmits = {
|
|
20
26
|
(event: 'toggle', value: boolean): void;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@knitify/vue",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.6",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "",
|
|
6
6
|
"license": "ISC",
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
"vue": "^3.5.12",
|
|
19
19
|
"vue-router": "^4.0.3",
|
|
20
20
|
"vue-tsc": "^3.2.5",
|
|
21
|
-
"@knitify/core": "1.0.
|
|
21
|
+
"@knitify/core": "1.0.8"
|
|
22
22
|
},
|
|
23
23
|
"peerDependencies": {
|
|
24
24
|
"@knitify/core": "^1.0.1",
|