@knitify/vue 0.0.0

package/dist/index.es.js

@@ -0,0 +1,259 @@
+import { defineComponent as b, openBlock as i, createElementBlock as v, createElementVNode as u, reactive as j, inject as C, computed as f, h as B, unref as _, getCurrentInstance as q, watchEffect as z, resolveComponent as V, Fragment as F, renderList as U, createBlock as x, withCtx as G, normalizeClass as h, createVNode as O, toDisplayString as H, createCommentVNode as g, useSlots as J, renderSlot as E } from "vue";
+const Q = {
+  class: "KIcon",
+  title: "icon",
+  role: "img"
+}, W = ["href"], X = /* @__PURE__ */ b({
+  __name: "KIcon",
+  props: {
+    href: { default: "" }
+  },
+  setup(e) {
+    return (t, n) => (i(), v("svg", Q, [
+      u("use", {
+        href: `#${e.href.replace(/^#/, "")}`
+      }, null, 8, W)
+    ]));
+  }
+});
+const Y = typeof document < "u", Z = () => {
+}, N = Array.isArray;
+process.env.NODE_ENV;
+process.env.NODE_ENV;
+process.env.NODE_ENV;
+const P = /* @__PURE__ */ Symbol(process.env.NODE_ENV !== "production" ? "router" : ""), ee = /* @__PURE__ */ Symbol(process.env.NODE_ENV !== "production" ? "route location" : "");
+process.env.NODE_ENV;
+function S(e) {
+  const t = Array.from(arguments).slice(1);
+  console.warn.apply(console, ["[Vue Router warn]: " + e].concat(t));
+}
+function $(e, t) {
+  return (e.aliasOf || e) === (t.aliasOf || t);
+}
+function te(e, t) {
+  if (Object.keys(e).length !== Object.keys(t).length) return !1;
+  for (var n in e) if (!ne(e[n], t[n])) return !1;
+  return !0;
+}
+function ne(e, t) {
+  return N(e) ? I(e, t) : N(t) ? I(t, e) : (e && e.valueOf()) === (t && t.valueOf());
+}
+function I(e, t) {
+  return N(t) ? e.length === t.length && e.every((n, a) => n === t[a]) : e.length === 1 && e[0] === t;
+}
+function w(e) {
+  return typeof e == "string" || e && typeof e == "object";
+}
+function D(e) {
+  const t = C(P), n = C(ee);
+  let a = !1, c = null;
+  const o = f(() => {
+    const r = _(e.to);
+    return process.env.NODE_ENV !== "production" && (!a || r !== c) && (w(r) || (a ? S(`Invalid value for prop "to" in useLink()
+- to:`, r, `
+- previous to:`, c, `
+- props:`, e) : S(`Invalid value for prop "to" in useLink()
+- to:`, r, `
+- props:`, e)), c = r, a = !0), t.resolve(r);
+  }), l = f(() => {
+    const { matched: r } = o.value, { length: s } = r, K = r[s - 1], m = n.matched;
+    if (!K || !m.length) return -1;
+    const k = m.findIndex($.bind(null, K));
+    if (k > -1) return k;
+    const A = L(r[s - 2]);
+    return s > 1 && L(K) === A && m[m.length - 1].path !== A ? m.findIndex($.bind(null, r[s - 2])) : k;
+  }), d = f(() => l.value > -1 && ce(n.params, o.value.params)), p = f(() => l.value > -1 && l.value === n.matched.length - 1 && te(n.params, o.value.params));
+  function y(r = {}) {
+    if (se(r)) {
+      const s = t[_(e.replace) ? "replace" : "push"](_(e.to)).catch(Z);
+      return e.viewTransition && typeof document < "u" && "startViewTransition" in document && document.startViewTransition(() => s), s;
+    }
+    return Promise.resolve();
+  }
+  if (process.env.NODE_ENV !== "production" && Y) {
+    const r = q();
+    if (r) {
+      const s = {
+        route: o.value,
+        isActive: d.value,
+        isExactActive: p.value,
+        error: null
+      };
+      r.__vrl_devtools = r.__vrl_devtools || [], r.__vrl_devtools.push(s), z(() => {
+        s.route = o.value, s.isActive = d.value, s.isExactActive = p.value, s.error = w(_(e.to)) ? null : 'Invalid "to" value';
+      }, { flush: "post" });
+    }
+  }
+  return {
+    route: o,
+    href: f(() => o.value.href),
+    isActive: d,
+    isExactActive: p,
+    navigate: y
+  };
+}
+function oe(e) {
+  return e.length === 1 ? e[0] : e;
+}
+const re = /* @__PURE__ */ b({
+  name: "RouterLink",
+  compatConfig: { MODE: 3 },
+  props: {
+    to: {
+      type: [String, Object],
+      required: !0
+    },
+    replace: Boolean,
+    activeClass: String,
+    exactActiveClass: String,
+    custom: Boolean,
+    ariaCurrentValue: {
+      type: String,
+      default: "page"
+    },
+    viewTransition: Boolean
+  },
+  useLink: D,
+  setup(e, { slots: t }) {
+    const n = j(D(e)), { options: a } = C(P), c = f(() => ({
+      [R(e.activeClass, a.linkActiveClass, "router-link-active")]: n.isActive,
+      [R(e.exactActiveClass, a.linkExactActiveClass, "router-link-exact-active")]: n.isExactActive
+    }));
+    return () => {
+      const o = t.default && oe(t.default(n));
+      return e.custom ? o : B("a", {
+        "aria-current": n.isExactActive ? e.ariaCurrentValue : null,
+        href: n.href,
+        onClick: n.navigate,
+        class: c.value
+      }, o);
+    };
+  }
+}), ae = re;
+function se(e) {
+  if (!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) && !e.defaultPrevented && !(e.button !== void 0 && e.button !== 0)) {
+    if (e.currentTarget && e.currentTarget.getAttribute) {
+      const t = e.currentTarget.getAttribute("target");
+      if (/\b_blank\b/i.test(t)) return;
+    }
+    return e.preventDefault && e.preventDefault(), !0;
+  }
+}
+function ce(e, t) {
+  for (const n in t) {
+    const a = t[n], c = e[n];
+    if (typeof a == "string") {
+      if (a !== c) return !1;
+    } else if (!N(c) || c.length !== a.length || a.some((o, l) => o.valueOf() !== c[l].valueOf())) return !1;
+  }
+  return !0;
+}
+function L(e) {
+  return e ? e.aliasOf ? e.aliasOf.path : e.path : "";
+}
+const R = (e, t, n) => e ?? t ?? n, ie = { class: "KNavbar-menu" }, le = ["href", "onClick"], ue = { class: "KNavbar-icon" }, ve = {
+  class: /* @__PURE__ */ h(["KNavbar-text"])
+}, fe = {
+  key: 0,
+  class: /* @__PURE__ */ h(["KNavbar-caret", "KCollapse-toggle"]),
+  "data-collapse-toggle": ""
+}, T = /* @__PURE__ */ b({
+  __name: "KNavbarMenu",
+  props: {
+    items: { default: () => [] }
+  },
+  setup(e) {
+    return (t, n) => {
+      const a = V("KIcon"), c = V("KNavbarMenu", !0);
+      return i(), v("ul", ie, [
+        (i(!0), v(F, null, U(e.items, (o, l) => (i(), x(_(ae), {
+          key: `navbar-menu-item-${l}`,
+          to: o.route,
+          custom: ""
+        }, {
+          default: G(({ isActive: d, href: p, navigate: y }) => [
+            u("li", {
+              class: h([
+                "KNavbar-item",
+                "KCollapse is-collapsed",
+                d && "KNavbar-item-is-active"
+              ]),
+              "data-collapse": ""
+            }, [
+              u("a", {
+                class: h(["KNavbar-link"]),
+                href: p,
+                onClick: y
+              }, [
+                u("span", ue, [
+                  O(a, {
+                    href: o.icon
+                  }, null, 8, ["href"])
+                ]),
+                u("span", ve, H(o.text), 1),
+                o.children ? (i(), v("span", fe, [
+                  O(a, { href: "#caretUp" })
+                ])) : g("", !0)
+              ], 8, le),
+              o.children ? (i(), x(c, {
+                key: 0,
+                items: o.children,
+                class: "KCollapse-content",
+                "data-collapse-content": ""
+              }, null, 8, ["items"])) : g("", !0)
+            ], 2)
+          ]),
+          _: 2
+        }, 1032, ["to"]))), 128))
+      ]);
+    };
+  }
+}), de = { class: "KNavbar" }, pe = { class: "KNavbar-inner" }, me = {
+  key: 0,
+  class: "KNavbar-brand"
+}, _e = { class: "KNavbar-body" }, he = {
+  key: 1,
+  class: "KNavbar-footer"
+}, ge = /* @__PURE__ */ b({
+  __name: "KNavbar",
+  props: {
+    items: {}
+  },
+  setup(e) {
+    const t = J();
+    return (n, a) => (i(), v("aside", de, [
+      u("div", pe, [
+        t.brand ? (i(), v("div", me, [
+          E(n.$slots, "brand")
+        ])) : g("", !0),
+        u("nav", _e, [
+          E(n.$slots, "default", {}, () => [
+            O(T, { items: e.items }, null, 8, ["items"])
+          ])
+        ]),
+        t.footer ? (i(), v("div", he, [
+          E(n.$slots, "footer")
+        ])) : g("", !0)
+      ])
+    ]));
+  }
+}), M = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  KIcon: X,
+  KNavbar: ge,
+  KNavbarMenu: T
+}, Symbol.toStringTag, { value: "Module" })), be = {
+  install(e) {
+    for (const t in M)
+      e.component(
+        t,
+        M[t]
+      );
+  }
+};
+export {
+  X as KIcon,
+  ge as KNavbar,
+  T as KNavbarMenu,
+  be as default
+};

package/dist/index.umd.js

@@ -0,0 +1,6 @@
+(function(i,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(i=typeof globalThis<"u"?globalThis:i||self,e(i["knitify-vue"]={},i.Vue))})(this,(function(i,e){"use strict";const x={class:"KIcon",title:"icon",role:"img"},I=["href"],k=e.defineComponent({__name:"KIcon",props:{href:{default:""}},setup(t){return(n,o)=>(e.openBlock(),e.createElementBlock("svg",x,[e.createElementVNode("use",{href:`#${t.href.replace(/^#/,"")}`},null,8,I)]))}});const $=typeof document<"u",w=()=>{},p=Array.isArray;process.env.NODE_ENV,process.env.NODE_ENV,process.env.NODE_ENV;const v=Symbol(process.env.NODE_ENV!=="production"?"router":""),D=Symbol(process.env.NODE_ENV!=="production"?"route location":"");process.env.NODE_ENV;function y(t){const n=Array.from(arguments).slice(1);console.warn.apply(console,["[Vue Router warn]: "+t].concat(n))}function E(t,n){return(t.aliasOf||t)===(n.aliasOf||n)}function L(t,n){if(Object.keys(t).length!==Object.keys(n).length)return!1;for(var o in t)if(!R(t[o],n[o]))return!1;return!0}function R(t,n){return p(t)?b(t,n):p(n)?b(n,t):(t&&t.valueOf())===(n&&n.valueOf())}function b(t,n){return p(n)?t.length===n.length&&t.every((o,c)=>o===n[c]):t.length===1&&t[0]===n}function K(t){return typeof t=="string"||t&&typeof t=="object"}function C(t){const n=e.inject(v),o=e.inject(D);let c=!1,l=null;const r=e.computed(()=>{const a=e.unref(t.to);return process.env.NODE_ENV!=="production"&&(!c||a!==l)&&(K(a)||(c?y(`Invalid value for prop "to" in useLink()
+- to:`,a,`
+- previous to:`,l,`
+- props:`,t):y(`Invalid value for prop "to" in useLink()
+- to:`,a,`
+- props:`,t)),l=a,c=!0),n.resolve(a)}),u=e.computed(()=>{const{matched:a}=r.value,{length:s}=a,N=a[s-1],m=o.matched;if(!N||!m.length)return-1;const g=m.findIndex(E.bind(null,N));if(g>-1)return g;const A=V(a[s-2]);return s>1&&V(N)===A&&m[m.length-1].path!==A?m.findIndex(E.bind(null,a[s-2])):g}),d=e.computed(()=>u.value>-1&&P(o.params,r.value.params)),f=e.computed(()=>u.value>-1&&u.value===o.matched.length-1&&L(o.params,r.value.params));function h(a={}){if(M(a)){const s=n[e.unref(t.replace)?"replace":"push"](e.unref(t.to)).catch(w);return t.viewTransition&&typeof document<"u"&&"startViewTransition"in document&&document.startViewTransition(()=>s),s}return Promise.resolve()}if(process.env.NODE_ENV!=="production"&&$){const a=e.getCurrentInstance();if(a){const s={route:r.value,isActive:d.value,isExactActive:f.value,error:null};a.__vrl_devtools=a.__vrl_devtools||[],a.__vrl_devtools.push(s),e.watchEffect(()=>{s.route=r.value,s.isActive=d.value,s.isExactActive=f.value,s.error=K(e.unref(t.to))?null:'Invalid "to" value'},{flush:"post"})}}return{route:r,href:e.computed(()=>r.value.href),isActive:d,isExactActive:f,navigate:h}}function T(t){return t.length===1?t[0]:t}const j=e.defineComponent({name:"RouterLink",compatConfig:{MODE:3},props:{to:{type:[String,Object],required:!0},replace:Boolean,activeClass:String,exactActiveClass:String,custom:Boolean,ariaCurrentValue:{type:String,default:"page"},viewTransition:Boolean},useLink:C,setup(t,{slots:n}){const o=e.reactive(C(t)),{options:c}=e.inject(v),l=e.computed(()=>({[O(t.activeClass,c.linkActiveClass,"router-link-active")]:o.isActive,[O(t.exactActiveClass,c.linkExactActiveClass,"router-link-exact-active")]:o.isExactActive}));return()=>{const r=n.default&&T(n.default(o));return t.custom?r:e.h("a",{"aria-current":o.isExactActive?t.ariaCurrentValue:null,href:o.href,onClick:o.navigate,class:l.value},r)}}});function M(t){if(!(t.metaKey||t.altKey||t.ctrlKey||t.shiftKey)&&!t.defaultPrevented&&!(t.button!==void 0&&t.button!==0)){if(t.currentTarget&&t.currentTarget.getAttribute){const n=t.currentTarget.getAttribute("target");if(/\b_blank\b/i.test(n))return}return t.preventDefault&&t.preventDefault(),!0}}function P(t,n){for(const o in n){const c=n[o],l=t[o];if(typeof c=="string"){if(c!==l)return!1}else if(!p(l)||l.length!==c.length||c.some((r,u)=>r.valueOf()!==l[u].valueOf()))return!1}return!0}function V(t){return t?t.aliasOf?t.aliasOf.path:t.path:""}const O=(t,n,o)=>t??n??o,z={class:"KNavbar-menu"},q=["href","onClick"],F={class:"KNavbar-icon"},U={class:e.normalizeClass(["KNavbar-text"])},G={key:0,class:e.normalizeClass(["KNavbar-caret","KCollapse-toggle"]),"data-collapse-toggle":""},_=e.defineComponent({__name:"KNavbarMenu",props:{items:{default:()=>[]}},setup(t){return(n,o)=>{const c=e.resolveComponent("KIcon"),l=e.resolveComponent("KNavbarMenu",!0);return e.openBlock(),e.createElementBlock("ul",z,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.items,(r,u)=>(e.openBlock(),e.createBlock(e.unref(j),{key:`navbar-menu-item-${u}`,to:r.route,custom:""},{default:e.withCtx(({isActive:d,href:f,navigate:h})=>[e.createElementVNode("li",{class:e.normalizeClass(["KNavbar-item","KCollapse is-collapsed",d&&"KNavbar-item-is-active"]),"data-collapse":""},[e.createElementVNode("a",{class:e.normalizeClass(["KNavbar-link"]),href:f,onClick:h},[e.createElementVNode("span",F,[e.createVNode(c,{href:r.icon},null,8,["href"])]),e.createElementVNode("span",U,e.toDisplayString(r.text),1),r.children?(e.openBlock(),e.createElementBlock("span",G,[e.createVNode(c,{href:"#caretUp"})])):e.createCommentVNode("",!0)],8,q),r.children?(e.openBlock(),e.createBlock(l,{key:0,items:r.children,class:"KCollapse-content","data-collapse-content":""},null,8,["items"])):e.createCommentVNode("",!0)],2)]),_:2},1032,["to"]))),128))])}}}),H={class:"KNavbar"},J={class:"KNavbar-inner"},Q={key:0,class:"KNavbar-brand"},W={class:"KNavbar-body"},X={key:1,class:"KNavbar-footer"},S=e.defineComponent({__name:"KNavbar",props:{items:{}},setup(t){const n=e.useSlots();return(o,c)=>(e.openBlock(),e.createElementBlock("aside",H,[e.createElementVNode("div",J,[n.brand?(e.openBlock(),e.createElementBlock("div",Q,[e.renderSlot(o.$slots,"brand")])):e.createCommentVNode("",!0),e.createElementVNode("nav",W,[e.renderSlot(o.$slots,"default",{},()=>[e.createVNode(_,{items:t.items},null,8,["items"])])]),n.footer?(e.openBlock(),e.createElementBlock("div",X,[e.renderSlot(o.$slots,"footer")])):e.createCommentVNode("",!0)])]))}}),B=Object.freeze(Object.defineProperty({__proto__:null,KIcon:k,KNavbar:S,KNavbarMenu:_},Symbol.toStringTag,{value:"Module"})),Y={install(t){for(const n in B)t.component(n,B[n])}};i.KIcon=k,i.KNavbar=S,i.KNavbarMenu=_,i.default=Y,Object.defineProperties(i,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/dist/types/components/Icon/KIcon.vue.d.ts

@@ -0,0 +1,4 @@
+import { KIconProps } from './types';
+declare const __VLS_export: import("vue").DefineComponent<KIconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<KIconProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,3 @@
+export type KIconProps = {
+    href: string;
+};

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

@@ -0,0 +1,11 @@
+import { KNavbarProps, KNavbarSlots } from './types';
+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>;
+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/KNavbarMenu.vue.d.ts

@@ -0,0 +1,4 @@
+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 const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,18 @@
+import { RouteLocationRaw } from 'vue-router';
+export type MenuItem = {
+    text: string;
+    route: RouteLocationRaw;
+    children?: MenuItem[];
+    icon?: string;
+};
+export type KNavbarProps = {
+    items: MenuItem[];
+};
+export type KNavbarSlots = {
+    brand?(): any;
+    default?(): any;
+    footer?(): any;
+};
+export type KNavbarMenuProps = {
+    items: MenuItem[];
+};

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

@@ -0,0 +1,3 @@
+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

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

package/dist/types/index.d.ts

@@ -0,0 +1,7 @@
+import { App } from 'vue';
+export * from './components/types';
+export * from './components';
+declare const _default: {
+    install(app: App): void;
+};
+export default _default;

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@knitify/vue",
+  "version": "0.0.0",
+  "description": "",
+  "author": "",
+  "license": "ISC",
+  "keywords": [],
+  "main": "dist/index.umd.js",
+  "module": "dist/index.es.js",
+  "types": "dist/types/index.d.ts",
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.4",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
+    "vue": "^3.5.30",
+    "vue-tsc": "^3.2.5",
+    "@knitify/core": "1.0.2"
+  },
+  "peerDependencies": {
+    "@knitify/core": "^1.0.1",
+    "vue": "^3.5.30",
+    "vue-router": "^5.0.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vite --mode development",
+    "build": "vite build",
+    "compile": "vite build && vue-tsc --declaration --emitDeclarationOnly"
+  }
+}

package/playground/App.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted } from 'vue'
+import '@knitify/core/main.css'
+import Knitify from '@knitify/core'
+
+onMounted(() => {
+  Knitify.init()
+})
+
+onUnmounted(() => {
+  Knitify.destroy()
+})
+</script>
+
+<template>
+  <div>
+    <RouterView />
+  </div>
+</template>
+
+<style>
+html {
+  box-sizing: border-box;
+}
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+</style>

package/playground/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Playground</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/main.ts"></script>
+  </body>
+</html>

package/playground/main.ts

@@ -0,0 +1,23 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import knitifyVue from '../src'
+import { createRouter, createWebHashHistory } from 'vue-router'
+
+const app = createApp(App)
+
+app.use(knitifyVue)
+
+const router = createRouter({
+  history: createWebHashHistory('/'),
+  routes: [
+    {
+      name: 'main',
+      path: '',
+      component: () => import('./views/MainView.vue'),
+    },
+  ],
+})
+
+app.use(router)
+
+app.mount('#app')

package/playground/views/MainView.vue

@@ -0,0 +1,13 @@
+<template>
+  <KNavbar
+    :items="[
+      {
+        text: 'HR Hub',
+        icon: '#moduleHrhubColored',
+        route: '/',
+        children: [{ text: 'Child', icon: '#moduleWeavesColored', route: '/' }],
+      },
+      { text: 'Weaves', icon: '#moduleWeavesColored', route: '/' },
+    ]"
+  />
+</template>

package/src/components/Icon/KIcon.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { KIconProps } from './types'
+
+const { href = '' } = defineProps<KIconProps>()
+</script>
+
+<template>
+  <svg class="KIcon" title="icon" role="img">
+    <use :href="`#${href.replace(/^#/, '')}`"></use>
+  </svg>
+</template>

package/src/components/Icon/types.ts

@@ -0,0 +1,3 @@
+export type KIconProps = {
+  href: string
+}

package/src/components/Navbar/KNavbar.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { KNavbarProps, KNavbarSlots } from './types'
+import KNavbarMenu from './KNavbarMenu.vue'
+
+const { items } = defineProps<KNavbarProps>()
+const slots = defineSlots<KNavbarSlots>()
+</script>
+
+<template>
+  <aside class="KNavbar">
+    <div class="KNavbar-inner">
+      <div v-if="slots.brand" class="KNavbar-brand">
+        <slot name="brand"></slot>
+      </div>
+      <nav class="KNavbar-body">
+        <slot>
+          <KNavbarMenu :items="items" />
+        </slot>
+      </nav>
+      <div v-if="slots.footer" class="KNavbar-footer">
+        <slot name="footer"></slot>
+      </div>
+    </div>
+  </aside>
+</template>

package/src/components/Navbar/KNavbarMenu.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { KNavbarMenuProps } from './types'
+import { RouterLink } from 'vue-router'
+
+const { items = [] } = defineProps<KNavbarMenuProps>()
+</script>
+
+<template>
+  <ul class="KNavbar-menu">
+    <RouterLink
+      v-for="(item, index) in items"
+      :key="`navbar-menu-item-${index}`"
+      :to="item.route"
+      custom
+      v-slot="{ isActive, href, navigate }"
+    >
+      <li
+        :class="[
+          'KNavbar-item',
+          'KCollapse is-collapsed',
+          isActive && 'KNavbar-item-is-active',
+        ]"
+        data-collapse
+      >
+        <a :class="['KNavbar-link']" :href="href" @click="navigate">
+          <span class="KNavbar-icon">
+            <KIcon :href="item.icon" />
+          </span>
+          <span :class="['KNavbar-text']">{{ item.text }}</span>
+          <span
+            v-if="item.children"
+            :class="['KNavbar-caret', 'KCollapse-toggle']"
+            data-collapse-toggle
+          >
+            <KIcon href="#caretUp" />
+          </span>
+        </a>
+        <KNavbarMenu
+          v-if="item.children"
+          :items="item.children"
+          class="KCollapse-content"
+          data-collapse-content
+        />
+      </li>
+    </RouterLink>
+  </ul>
+</template>

package/src/components/Navbar/types.ts

@@ -0,0 +1,22 @@
+import { RouteLocationRaw } from 'vue-router'
+
+export type MenuItem = {
+  text: string
+  route: RouteLocationRaw
+  children?: MenuItem[]
+  icon?: string
+}
+
+export type KNavbarProps = {
+  items: MenuItem[]
+}
+
+export type KNavbarSlots = {
+  brand?(): any
+  default?(): any
+  footer?(): any
+}
+
+export type KNavbarMenuProps = {
+  items: MenuItem[]
+}

package/src/components/index.ts

@@ -0,0 +1,3 @@
+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/src/components/types.ts

@@ -0,0 +1,2 @@
+export * from './Icon/types'
+export * from './Navbar/types'

package/src/index.ts

@@ -0,0 +1,16 @@
+import { App } from 'vue'
+import * as Components from './components'
+
+export * from './components/types'
+export * from './components'
+
+export default {
+  install(app: App) {
+    for (const componentName in Components) {
+      app.component(
+        componentName,
+        Components[componentName as keyof typeof Components]
+      )
+    }
+  },
+}

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "declaration": true,
+    "declarationDir": "dist/types",
+    "outDir": "dist",
+    "strict": true,
+    "jsx": "preserve",
+    "esModuleInterop": true,
+    "skipLibCheck": true
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}

package/vite.config.ts

@@ -0,0 +1,25 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import path from 'path'
+
+export default defineConfig(({ mode }) => ({
+  plugins: [vue()],
+
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, 'src/index.ts'),
+      name: 'knitify-vue',
+      fileName: (format, name) => `${name}.${format}.js`,
+    },
+    rollupOptions: {
+      external: ['vue', 'vue-router'],
+      output: {
+        globals: {
+          vue: 'Vue',
+        },
+      },
+    },
+  },
+
+  root: mode === 'development' ? 'playground' : '.',
+}))