@knitify/vue 0.0.3 → 0.0.4

package/dist/index.es.js

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

package/dist/types/components/Badge/KBadge.vue.d.ts

@@ -0,0 +1,14 @@
+import { KBadgeProps } from './types';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<KBadgeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<KBadgeProps> & 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/Badge/types.d.ts

@@ -0,0 +1,7 @@
+import { Size, Variant } from '../../types';
+export type KBadgeProps = {
+    pill?: boolean;
+    size?: Size;
+    subtle?: boolean;
+    variant?: Variant;
+};

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

@@ -1,12 +1,16 @@
+import { ClassValue } from 'vue';
 import { RouteLocationRaw } from 'vue-router';
 export type MenuItem = {
     text: string;
     badge?: number | string;
+    badgeClass?: ClassValue;
     children?: MenuItem[];
     hidden?: boolean;
     icon?: string;
+    iconClass?: ClassValue;
     onClick?: () => void;
     route?: RouteLocationRaw;
+    textClass?: ClassValue;
 };
 export type KNavbarProps = {
     items: MenuItem[];

package/dist/types/types.d.ts

@@ -0,0 +1,2 @@
+export type Size = '5xs' | '4xs' | '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
+export type Variant = 'brand' | 'success' | 'info' | 'attention' | 'danger';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knitify/vue",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "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.3"
+    "@knitify/core": "1.0.5"
   },
   "peerDependencies": {
     "@knitify/core": "^1.0.1",