@knitify/vue 0.0.2 → 0.0.3

package/dist/index.es.js

@@ -1,124 +1,167 @@
-import { defineComponent as d, openBlock as e, createElementBlock as a, createElementVNode as s, resolveComponent as m, Fragment as k, renderList as C, createBlock as p, unref as g, withCtx as y, normalizeClass as c, createVNode as u, toDisplayString as I, createCommentVNode as l, useSlots as M, renderSlot as _ } from "vue";
-import { RouterLink as x } from "vue-router";
-const S = {
+import { defineComponent as f, openBlock as o, createElementBlock as s, normalizeClass as l, renderSlot as i, createElementVNode as n, resolveComponent as K, Fragment as C, renderList as $, createVNode as d, unref as y, withCtx as k, toDisplayString as x, createCommentVNode as p, createBlock as M, useModel as I, useSlots as B, mergeModels as h } from "vue";
+import { RouterLink as S } from "vue-router";
+const L = /* @__PURE__ */ f({
+  __name: "KContainer",
+  props: {
+    glassy: { type: Boolean }
+  },
+  setup(t) {
+    return (a, r) => (o(), s("div", {
+      class: l(["KContainer", t.glassy && "KContainer--glassy"])
+    }, [
+      i(a.$slots, "default")
+    ], 2));
+  }
+}), V = {
   class: "KIcon",
   title: "icon",
   role: "img"
-}, B = ["href"], V = /* @__PURE__ */ d({
+}, j = ["href"], z = /* @__PURE__ */ f({
   __name: "KIcon",
   props: {
     href: { default: "" }
   },
   setup(t) {
-    return (o, r) => (e(), a("svg", S, [
-      s("use", {
+    return (a, r) => (o(), s("svg", V, [
+      n("use", {
         href: `#${t.href.replace(/^#/, "")}`
-      }, null, 8, B)
+      }, null, 8, j)
     ]));
   }
-}), j = { class: "KNavbar-menu" }, z = ["href", "onClick"], E = { class: "KNavbar-icon" }, L = {
-  class: /* @__PURE__ */ c(["KNavbar-text"])
-}, O = {
+}), E = { class: "KNavbar-menu" }, O = ["href", "onClick"], w = { class: "KNavbar-icon" }, D = {
+  class: /* @__PURE__ */ l(["KNavbar-text"])
+}, F = {
   key: 0,
-  class: /* @__PURE__ */ c(["KNavbar-caret", "KCollapse-toggle"]),
+  class: /* @__PURE__ */ l(["KNavbar-caret", "KCollapse-toggle"]),
   "data-collapse-toggle": ""
-}, K = /* @__PURE__ */ d({
+}, g = /* @__PURE__ */ f({
   __name: "KNavbarMenu",
   props: {
     items: { default: () => [] }
   },
   setup(t) {
-    return (o, r) => {
-      const i = m("KIcon"), b = m("KNavbarMenu", !0);
-      return e(), a("ul", j, [
-        (e(!0), a(k, null, C(t.items, (n, h) => (e(), p(g(x), {
-          key: `navbar-menu-item-${h}`,
-          to: n.route,
-          custom: ""
-        }, {
-          default: y(({ isActive: f, href: N, navigate: $ }) => [
-            s("li", {
-              class: c([
-                "KNavbar-item",
-                "KCollapse is-collapsed",
-                f && "KNavbar-item-is-active"
-              ]),
-              "data-collapse": ""
-            }, [
-              s("a", {
-                class: c(["KNavbar-link"]),
-                href: N,
-                onClick: $
-              }, [
-                s("span", E, [
-                  u(i, {
-                    href: n.icon
-                  }, null, 8, ["href"])
+    return (a, r) => {
+      const u = K("KIcon"), _ = K("KNavbarMenu", !0);
+      return o(), s("ul", E, [
+        (o(!0), s(C, null, $(t.items, (e, c) => i(a.$slots, "item", {
+          key: `navbar-menu-item-${c}`,
+          item: e
+        }, () => [
+          d(y(S), {
+            to: e.route ?? "/",
+            custom: ""
+          }, {
+            default: k(({ isActive: b, href: m, navigate: v }) => [
+              n("li", {
+                class: l([
+                  "KNavbar-item",
+                  "KCollapse is-collapsed",
+                  b && "KNavbar-item-is-active"
                 ]),
-                s("span", L, I(n.text), 1),
-                n.children ? (e(), a("span", O, [
-                  u(i, { href: "#caretUp" })
-                ])) : l("", !0)
-              ], 8, z),
-              n.children ? (e(), p(b, {
-                key: 0,
-                items: n.children,
-                class: "KCollapse-content",
-                "data-collapse-content": ""
-              }, null, 8, ["items"])) : l("", !0)
-            ], 2)
-          ]),
-          _: 2
-        }, 1032, ["to"]))), 128))
+                "data-collapse": ""
+              }, [
+                n("a", {
+                  class: l(["KNavbar-link"]),
+                  href: e.route ? m : void 0,
+                  onClick: (A) => e.route ? v() : e.onClick?.()
+                }, [
+                  n("span", w, [
+                    d(u, {
+                      href: e.icon
+                    }, null, 8, ["href"])
+                  ]),
+                  n("span", D, x(e.text), 1),
+                  e.children ? (o(), s("span", F, [
+                    d(u, { href: "#caretUp" })
+                  ])) : p("", !0)
+                ], 8, O),
+                e.children ? (o(), M(_, {
+                  key: 0,
+                  items: e.children,
+                  class: "KCollapse-content",
+                  "data-collapse-content": ""
+                }, null, 8, ["items"])) : p("", !0)
+              ], 2)
+            ]),
+            _: 2
+          }, 1032, ["to"])
+        ])), 128))
       ]);
     };
   }
-}), w = { class: "KNavbar" }, D = { class: "KNavbar-inner" }, F = {
+}), P = { class: "KNavbar-inner" }, R = {
   key: 0,
   class: "KNavbar-brand"
-}, P = { class: "KNavbar-body" }, R = {
+}, T = { class: "KNavbar-body" }, U = {
   key: 1,
   class: "KNavbar-footer"
-}, T = /* @__PURE__ */ d({
+}, q = /* @__PURE__ */ f({
   __name: "KNavbar",
-  props: {
-    items: {}
-  },
-  setup(t) {
-    const o = M();
-    return (r, i) => (e(), a("aside", w, [
-      s("div", D, [
-        o.brand ? (e(), a("div", F, [
-          _(r.$slots, "brand")
-        ])) : l("", !0),
-        s("nav", P, [
-          _(r.$slots, "default", {}, () => [
-            u(K, { items: t.items }, null, 8, ["items"])
-          ])
+  props: /* @__PURE__ */ h({
+    items: {},
+    fixed: { type: Boolean, default: !1 }
+  }, {
+    expanded: { type: Boolean, default: !1 },
+    expandedModifiers: {}
+  }),
+  emits: /* @__PURE__ */ h(["toggle"], ["update:expanded"]),
+  setup(t, { emit: a }) {
+    const r = I(t, "expanded"), u = a, _ = B(), e = () => {
+      r.value = !r.value, u("toggle", r.value);
+    };
+    return (c, b) => {
+      const m = K("KIcon");
+      return o(), s("aside", {
+        class: l([
+          "KNavbar",
+          r.value && "KNavbar-is-expanded",
+          t.fixed && "KNavbar-is-fixed"
+        ])
+      }, [
+        n("div", P, [
+          _.brand ? (o(), s("div", R, [
+            i(c.$slots, "brand")
+          ])) : p("", !0),
+          n("nav", T, [
+            i(c.$slots, "default", {}, () => [
+              d(g, {
+                items: t.items.filter(({ hidden: v }) => !v)
+              }, null, 8, ["items"])
+            ])
+          ]),
+          _.footer ? (o(), s("div", U, [
+            i(c.$slots, "footer")
+          ])) : p("", !0)
         ]),
-        o.footer ? (e(), a("div", R, [
-          _(r.$slots, "footer")
-        ])) : l("", !0)
-      ])
-    ]));
+        n("button", {
+          type: "button",
+          class: "KNavbar-toggle",
+          onClick: e
+        }, [
+          d(m, { href: "#caretLeft" })
+        ])
+      ], 2);
+    };
   }
-}), v = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), N = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  KIcon: V,
-  KNavbar: T,
-  KNavbarMenu: K
-}, Symbol.toStringTag, { value: "Module" })), A = {
+  KContainer: L,
+  KIcon: z,
+  KNavbar: q,
+  KNavbarMenu: g
+}, Symbol.toStringTag, { value: "Module" })), J = {
   install(t) {
-    for (const o in v)
+    for (const a in N)
       t.component(
-        o,
-        v[o]
+        a,
+        N[a]
       );
   }
 };
 export {
-  V as KIcon,
-  T as KNavbar,
-  K as KNavbarMenu,
-  A as default
+  L as KContainer,
+  z as KIcon,
+  q as KNavbar,
+  g as KNavbarMenu,
+  J as default
 };

package/dist/index.umd.js

@@ -1 +1 @@
-(function(t,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):(t=typeof globalThis<"u"?globalThis:t||self,e(t["knitify-vue"]={},t.Vue,t.vueRouter))})(this,(function(t,e,m){"use strict";const _={class:"KIcon",title:"icon",role:"img"},p=["href"],l=e.defineComponent({__name:"KIcon",props:{href:{default:""}},setup(o){return(n,r)=>(e.openBlock(),e.createElementBlock("svg",_,[e.createElementVNode("use",{href:`#${o.href.replace(/^#/,"")}`},null,8,p)]))}}),f={class:"KNavbar-menu"},N=["href","onClick"],h={class:"KNavbar-icon"},b={class:e.normalizeClass(["KNavbar-text"])},K={key:0,class:e.normalizeClass(["KNavbar-caret","KCollapse-toggle"]),"data-collapse-toggle":""},s=e.defineComponent({__name:"KNavbarMenu",props:{items:{default:()=>[]}},setup(o){return(n,r)=>{const c=e.resolveComponent("KIcon"),$=e.resolveComponent("KNavbarMenu",!0);return e.openBlock(),e.createElementBlock("ul",f,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.items,(a,y)=>(e.openBlock(),e.createBlock(e.unref(m.RouterLink),{key:`navbar-menu-item-${y}`,to:a.route,custom:""},{default:e.withCtx(({isActive:g,href:S,navigate:M})=>[e.createElementVNode("li",{class:e.normalizeClass(["KNavbar-item","KCollapse is-collapsed",g&&"KNavbar-item-is-active"]),"data-collapse":""},[e.createElementVNode("a",{class:e.normalizeClass(["KNavbar-link"]),href:S,onClick:M},[e.createElementVNode("span",h,[e.createVNode(c,{href:a.icon},null,8,["href"])]),e.createElementVNode("span",b,e.toDisplayString(a.text),1),a.children?(e.openBlock(),e.createElementBlock("span",K,[e.createVNode(c,{href:"#caretUp"})])):e.createCommentVNode("",!0)],8,N),a.children?(e.openBlock(),e.createBlock($,{key:0,items:a.children,class:"KCollapse-content","data-collapse-content":""},null,8,["items"])):e.createCommentVNode("",!0)],2)]),_:2},1032,["to"]))),128))])}}}),k={class:"KNavbar"},C={class:"KNavbar-inner"},u={key:0,class:"KNavbar-brand"},B={class:"KNavbar-body"},V={key:1,class:"KNavbar-footer"},i=e.defineComponent({__name:"KNavbar",props:{items:{}},setup(o){const n=e.useSlots();return(r,c)=>(e.openBlock(),e.createElementBlock("aside",k,[e.createElementVNode("div",C,[n.brand?(e.openBlock(),e.createElementBlock("div",u,[e.renderSlot(r.$slots,"brand")])):e.createCommentVNode("",!0),e.createElementVNode("nav",B,[e.renderSlot(r.$slots,"default",{},()=>[e.createVNode(s,{items:o.items},null,8,["items"])])]),n.footer?(e.openBlock(),e.createElementBlock("div",V,[e.renderSlot(r.$slots,"footer")])):e.createCommentVNode("",!0)])]))}}),d=Object.freeze(Object.defineProperty({__proto__:null,KIcon:l,KNavbar:i,KNavbarMenu:s},Symbol.toStringTag,{value:"Module"})),E={install(o){for(const n in d)o.component(n,d[n])}};t.KIcon=l,t.KNavbar=i,t.KNavbarMenu=s,t.default=E,Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
+(function(t,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):(t=typeof globalThis<"u"?globalThis:t||self,e(t["knitify-vue"]={},t.Vue,t.vueRouter))})(this,(function(t,e,b){"use strict";const p=e.defineComponent({__name:"KContainer",props:{glassy:{type:Boolean}},setup(n){return(a,s)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["KContainer",n.glassy&&"KContainer--glassy"])},[e.renderSlot(a.$slots,"default")],2))}}),h={class:"KIcon",title:"icon",role:"img"},C=["href"],f=e.defineComponent({__name:"KIcon",props:{href:{default:""}},setup(n){return(a,s)=>(e.openBlock(),e.createElementBlock("svg",h,[e.createElementVNode("use",{href:`#${n.href.replace(/^#/,"")}`},null,8,C)]))}}),k={class:"KNavbar-menu"},g=["href","onClick"],u={class:"KNavbar-icon"},B={class:e.normalizeClass(["KNavbar-text"])},y={key:0,class:e.normalizeClass(["KNavbar-caret","KCollapse-toggle"]),"data-collapse-toggle":""},d=e.defineComponent({__name:"KNavbarMenu",props:{items:{default:()=>[]}},setup(n){return(a,s)=>{const r=e.resolveComponent("KIcon"),c=e.resolveComponent("KNavbarMenu",!0);return e.openBlock(),e.createElementBlock("ul",k,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.items,(o,l)=>e.renderSlot(a.$slots,"item",{key:`navbar-menu-item-${l}`,item:o},()=>[e.createVNode(e.unref(b.RouterLink),{to:o.route??"/",custom:""},{default:e.withCtx(({isActive:K,href:i,navigate:m})=>[e.createElementVNode("li",{class:e.normalizeClass(["KNavbar-item","KCollapse is-collapsed",K&&"KNavbar-item-is-active"]),"data-collapse":""},[e.createElementVNode("a",{class:e.normalizeClass(["KNavbar-link"]),href:o.route?i:void 0,onClick:x=>o.route?m():o.onClick?.()},[e.createElementVNode("span",u,[e.createVNode(r,{href:o.icon},null,8,["href"])]),e.createElementVNode("span",B,e.toDisplayString(o.text),1),o.children?(e.openBlock(),e.createElementBlock("span",y,[e.createVNode(r,{href:"#caretUp"})])):e.createCommentVNode("",!0)],8,g),o.children?(e.openBlock(),e.createBlock(c,{key:0,items:o.children,class:"KCollapse-content","data-collapse-content":""},null,8,["items"])):e.createCommentVNode("",!0)],2)]),_:2},1032,["to"])])),128))])}}}),V={class:"KNavbar-inner"},$={key:0,class:"KNavbar-brand"},E={class:"KNavbar-body"},M={key:1,class:"KNavbar-footer"},_=e.defineComponent({__name:"KNavbar",props:e.mergeModels({items:{},fixed:{type:Boolean,default:!1}},{expanded:{type:Boolean,default:!1},expandedModifiers:{}}),emits:e.mergeModels(["toggle"],["update:expanded"]),setup(n,{emit:a}){const s=e.useModel(n,"expanded"),r=a,c=e.useSlots(),o=()=>{s.value=!s.value,r("toggle",s.value)};return(l,K)=>{const i=e.resolveComponent("KIcon");return e.openBlock(),e.createElementBlock("aside",{class:e.normalizeClass(["KNavbar",s.value&&"KNavbar-is-expanded",n.fixed&&"KNavbar-is-fixed"])},[e.createElementVNode("div",V,[c.brand?(e.openBlock(),e.createElementBlock("div",$,[e.renderSlot(l.$slots,"brand")])):e.createCommentVNode("",!0),e.createElementVNode("nav",E,[e.renderSlot(l.$slots,"default",{},()=>[e.createVNode(d,{items:n.items.filter(({hidden:m})=>!m)},null,8,["items"])])]),c.footer?(e.openBlock(),e.createElementBlock("div",M,[e.renderSlot(l.$slots,"footer")])):e.createCommentVNode("",!0)]),e.createElementVNode("button",{type:"button",class:"KNavbar-toggle",onClick:o},[e.createVNode(i,{href:"#caretLeft"})])],2)}}}),N=Object.freeze(Object.defineProperty({__proto__:null,KContainer:p,KIcon:f,KNavbar:_,KNavbarMenu:d},Symbol.toStringTag,{value:"Module"})),S={install(n){for(const a in N)n.component(a,N[a])}};t.KContainer=p,t.KIcon=f,t.KNavbar=_,t.KNavbarMenu=d,t.default=S,Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/dist/types/components/Container/KContainer.vue.d.ts

@@ -0,0 +1,14 @@
+import { KContainerProps } from './types';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<KContainerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<KContainerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/components/Container/types.d.ts

@@ -0,0 +1,3 @@
+export type KContainerProps = {
+    glassy?: boolean;
+};

package/dist/types/components/Navbar/KNavbar.vue.d.ts

@@ -1,6 +1,18 @@
-import { KNavbarProps, KNavbarSlots } from './types';
+import type { KNavbarProps, KNavbarSlots } from './types';
+type __VLS_Props = KNavbarProps;
 type __VLS_Slots = KNavbarSlots;
-declare const __VLS_base: import("vue").DefineComponent<KNavbarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<KNavbarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+type __VLS_ModelProps = {
+    'expanded'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:expanded": (value: boolean) => any;
+} & {
+    toggle: (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onToggle?: ((value: boolean) => any) | undefined;
+    "onUpdate:expanded"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/types/components/Navbar/KNavbarMenu.vue.d.ts

@@ -1,4 +1,16 @@
 import { KNavbarMenuProps } from './types';
-declare const __VLS_export: import("vue").DefineComponent<KNavbarMenuProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<KNavbarMenuProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare var __VLS_1: {
+    item: import("./types").MenuItem;
+};
+type __VLS_Slots = {} & {
+    item?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<KNavbarMenuProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<KNavbarMenuProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/components/Navbar/types.d.ts

@@ -1,12 +1,19 @@
 import { RouteLocationRaw } from 'vue-router';
 export type MenuItem = {
     text: string;
-    route: RouteLocationRaw;
+    badge?: number | string;
     children?: MenuItem[];
+    hidden?: boolean;
     icon?: string;
+    onClick?: () => void;
+    route?: RouteLocationRaw;
 };
 export type KNavbarProps = {
     items: MenuItem[];
+    fixed?: boolean;
+};
+export type KNavbarEmits = {
+    (event: 'toggle', value: boolean): void;
 };
 export type KNavbarSlots = {
     brand?(): any;

package/dist/types/components/index.d.ts

@@ -1,3 +1,4 @@
+export { default as KContainer } from './Container/KContainer.vue';
 export { default as KIcon } from './Icon/KIcon.vue';
 export { default as KNavbar } from './Navbar/KNavbar.vue';
 export { default as KNavbarMenu } from './Navbar/KNavbarMenu.vue';

package/dist/types/components/types.d.ts

@@ -1,2 +1,3 @@
+export * from './Container/types';
 export * from './Icon/types';
 export * from './Navbar/types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knitify/vue",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "",
   "author": "",
   "license": "ISC",
@@ -18,7 +18,7 @@
     "vue": "^3.5.12",
     "vue-router": "^4.0.3",
     "vue-tsc": "^3.2.5",
-    "@knitify/core": "1.0.2"
+    "@knitify/core": "1.0.3"
   },
   "peerDependencies": {
     "@knitify/core": "^1.0.1",