jky-component-lib 0.0.80 → 0.0.88

package/dist/lib/modal/Modal.vue.js

@@ -0,0 +1,224 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const ElementPlus = require("element-plus");
+const Footer_vue_vue_type_script_setup_true_lang = require("./Footer.vue.js");
+const Header_vue_vue_type_script_setup_true_lang = require("./Header.vue.js");
+const _sfc_main = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValues({}, {
+  name: "JkyModal",
+  inheritAttrs: false
+}), {
+  __name: "Modal",
+  props: /* @__PURE__ */ vue.mergeModels({
+    title: { default: "" },
+    dialogProps: {},
+    drawerProps: {},
+    confirmText: { default: "确认" },
+    cancelText: { default: "取消" }
+  }, {
+    "modelValue": __spreadValues({ type: Boolean }, {
+      default: false
+    }),
+    "modelModifiers": {},
+    "mode": {
+      default: "drawer"
+    },
+    "modeModifiers": {},
+    "fullscreen": __spreadValues({ type: Boolean }, {
+      default: false
+    }),
+    "fullscreenModifiers": {},
+    "direction": {
+      default: "rtl"
+    },
+    "directionModifiers": {}
+  }),
+  emits: /* @__PURE__ */ vue.mergeModels(["update:modelValue", "open", "opened", "close", "closed", "typeChange", "confirm", "cancel"], ["update:modelValue", "update:mode", "update:fullscreen", "update:direction"]),
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const attrs = vue.useAttrs();
+    const modelValue = vue.useModel(__props, "modelValue");
+    const mode = vue.useModel(__props, "mode");
+    const fullscreen = vue.useModel(__props, "fullscreen");
+    const direction = vue.useModel(__props, "direction");
+    function handleTypeChange() {
+      if (fullscreen.value) {
+        fullscreen.value = false;
+        setTimeout(() => {
+          mode.value = mode.value === "drawer" ? "dialog" : "drawer";
+        }, 150);
+      } else {
+        mode.value = mode.value === "drawer" ? "dialog" : "drawer";
+      }
+    }
+    function toggleFullscreen() {
+      fullscreen.value = !fullscreen.value;
+    }
+    function toggleDirection() {
+      const directions = ["rtl", "ltr", "ttb", "btt"];
+      const currentIndex = directions.indexOf(direction.value);
+      const nextIndex = (currentIndex + 1) % directions.length;
+      direction.value = directions[nextIndex];
+    }
+    function handleClose() {
+      modelValue.value = false;
+    }
+    function handleConfirm() {
+      handleClose();
+      emit("confirm");
+    }
+    function handleCancel() {
+      handleClose();
+      emit("cancel");
+    }
+    const footerClass = vue.computed(
+      () => {
+        return [
+          "p-0 pt-0! sticky bottom-0 bg-white border-t border-solid border-t-black/15",
+          attrs.footerClass || attrs["footer-class"]
+        ].filter(Boolean).join(" ");
+      }
+    );
+    const bodyClass = vue.computed(() => {
+      return [
+        "px-4!",
+        attrs.bodyClass || attrs["body-class"]
+      ].filter(Boolean).join(" ");
+    });
+    const headerClass = vue.computed(() => {
+      return [
+        "p-0 mb-0!",
+        attrs.headerClass || attrs["header-class"]
+      ].filter(Boolean).join(" ");
+    });
+    return (_ctx, _cache) => {
+      var _a, _b, _c;
+      return mode.value === "dialog" ? (vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElDialog), vue.mergeProps({
+        key: 0,
+        modelValue: modelValue.value,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
+        title: __props.title,
+        width: typeof ((_a = props.dialogProps) == null ? void 0 : _a.width) === "number" ? `${props.dialogProps.width}px` : (_b = props.dialogProps) == null ? void 0 : _b.width,
+        class: "p-0! jky-modal",
+        "body-class": bodyClass.value,
+        "footer-class": footerClass.value,
+        "header-class": headerClass.value
+      }, props.dialogProps, {
+        "show-close": false,
+        fullscreen: fullscreen.value,
+        style: { "--el-dialog-padding-primary": 0 },
+        onOpened: _cache[1] || (_cache[1] = ($event) => emit("opened")),
+        onClosed: _cache[2] || (_cache[2] = ($event) => emit("closed"))
+      }), {
+        header: vue.withCtx(() => [
+          _ctx.$slots.header ? vue.renderSlot(_ctx.$slots, "header", {
+            key: 0,
+            fullscreen: fullscreen.value,
+            close: handleClose,
+            toggleFullscreen,
+            toggleType: handleTypeChange
+          }) : (vue.openBlock(), vue.createBlock(Header_vue_vue_type_script_setup_true_lang.default, {
+            key: 1,
+            fullscreen: fullscreen.value,
+            mode: mode.value,
+            title: __props.title,
+            onFullscreen: toggleFullscreen,
+            onClose: handleClose,
+            onToggle: handleTypeChange
+          }, null, 8, ["fullscreen", "mode", "title"]))
+        ]),
+        footer: vue.withCtx(() => [
+          _ctx.$slots.footer ? vue.renderSlot(_ctx.$slots, "footer", { key: 0 }) : (vue.openBlock(), vue.createBlock(Footer_vue_vue_type_script_setup_true_lang.default, {
+            key: 1,
+            "confirm-text": __props.confirmText,
+            "cancel-text": __props.cancelText,
+            onConfirm: handleConfirm,
+            onCancel: handleCancel
+          }, null, 8, ["confirm-text", "cancel-text"]))
+        ]),
+        default: vue.withCtx(() => [
+          vue.createVNode(vue.unref(ElementPlus.ElScrollbar), {
+            "max-height": fullscreen.value ? "100%" : "60vh"
+          }, {
+            default: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "default")
+            ]),
+            _: 3
+          }, 8, ["max-height"])
+        ]),
+        _: 3
+      }, 16, ["modelValue", "title", "width", "body-class", "footer-class", "header-class", "fullscreen"])) : (vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElDrawer), vue.mergeProps({
+        key: 1,
+        modelValue: modelValue.value,
+        "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => modelValue.value = $event),
+        title: __props.title,
+        direction: direction.value,
+        class: "p-0! jky-modal jky-modal--drawer",
+        "body-class": bodyClass.value,
+        "footer-class": footerClass.value,
+        "header-class": headerClass.value
+      }, props.drawerProps, {
+        "show-close": false,
+        size: fullscreen.value ? "100%" : (_c = props.drawerProps) == null ? void 0 : _c.size,
+        style: { "--el-drawer-padding-primary": 0 },
+        onOpened: _cache[4] || (_cache[4] = ($event) => emit("opened")),
+        onClosed: _cache[5] || (_cache[5] = ($event) => emit("closed"))
+      }), {
+        header: vue.withCtx(() => [
+          _ctx.$slots.header ? vue.renderSlot(_ctx.$slots, "header", {
+            key: 0,
+            fullscreen: fullscreen.value,
+            close: handleClose,
+            toggleFullscreen,
+            toggleType: handleTypeChange,
+            toggleDirection
+          }) : (vue.openBlock(), vue.createBlock(Header_vue_vue_type_script_setup_true_lang.default, {
+            key: 1,
+            fullscreen: fullscreen.value,
+            mode: mode.value,
+            "drawer-direction": direction.value,
+            title: __props.title,
+            onFullscreen: toggleFullscreen,
+            onClose: handleClose,
+            onToggle: handleTypeChange,
+            onToggleDirection: toggleDirection
+          }, null, 8, ["fullscreen", "mode", "drawer-direction", "title"]))
+        ]),
+        footer: vue.withCtx(() => [
+          _ctx.$slots.footer ? vue.renderSlot(_ctx.$slots, "footer", { key: 0 }) : (vue.openBlock(), vue.createBlock(Footer_vue_vue_type_script_setup_true_lang.default, {
+            key: 1,
+            "confirm-text": __props.confirmText,
+            "cancel-text": __props.cancelText,
+            onConfirm: handleConfirm,
+            onCancel: handleCancel
+          }, null, 8, ["confirm-text", "cancel-text"]))
+        ]),
+        default: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16, ["modelValue", "title", "direction", "body-class", "footer-class", "header-class", "size"]));
+    };
+  }
+}));
+exports.default = _sfc_main;

package/dist/lib/modal/Modal.vue3.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const Modal_vue_vue_type_script_setup_true_lang = require("./Modal.vue.js");
+;/* empty css            */
+exports.default = Modal_vue_vue_type_script_setup_true_lang.default;

package/dist/lib/modal/index.d.ts

@@ -0,0 +1,5 @@
+import { InstallWithSFC } from '../utils/types';
+import { default as Modal } from './Modal.vue';
+export type { ModalEmits, ModalProps, ModalSlots, ModalType, } from './types';
+export declare const JkyModal: InstallWithSFC<typeof Modal>;
+export default JkyModal;

package/dist/lib/modal/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const withInstall = require("../utils/with-install.js");
+const Modal_vue_vue_type_script_setup_true_lang = require("./Modal.vue.js");
+;/* empty css            */
+const JkyModal = withInstall.installWithSFC(Modal_vue_vue_type_script_setup_true_lang.default);
+exports.JkyModal = JkyModal;
+exports.default = JkyModal;

package/dist/lib/modal/style.css

@@ -0,0 +1,8 @@
+/* Modal 模态框组件样式 */
+.jky-modal {
+/* 对话框内容区域 padding 为 0 */
+}
+/* Dialog 模式特定样式 */
+.el-dialog.jky-modal {
+ /* 对话框标题样式 */
+}

package/dist/lib/package.json.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const version = "0.0.80";
+const version = "0.0.88";
 exports.version = version;

package/dist/lib/page-layout/PageLayout.vue.d.ts

@@ -13,5 +13,6 @@ declare const _default: import('vue').DefineComponent<PageLayoutProps, {}, {}, {
     cardPadding: string;
     topMenuTrigger: "hover" | "click";
     topMenuSingleLevel: boolean;
+    sideMenuWithParent: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/lib/page-layout/PageLayout.vue.js

@@ -66,12 +66,14 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValu
     topLevels: {},
     sideLevels: {},
     topMenuTrigger: { default: "click" },
-    topMenuSingleLevel: { type: Boolean, default: true }
+    topMenuSingleLevel: { type: Boolean, default: true },
+    sideMenuWithParent: { type: Boolean, default: true }
   },
   setup(__props) {
     const props = __props;
     const router = vueRouter.useRouter();
     const route = vueRouter.useRoute();
+    const attrs = vue.useAttrs();
     const { useTabsStore: useTabsStore$1 } = useTabsStore.createTabsStore({
       enableCache: props.cachable
     });
@@ -132,7 +134,6 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValu
     });
     const displayedSideMenu = vue.computed(() => {
       if (menuData.value.length === 0) {
-        console.warn("displayedSideMenu: menuData is empty");
         return [];
       }
       const topMenuItem = route.matched[0];
@@ -146,6 +147,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValu
         return [];
       }
       if ((found == null ? void 0 : found.children) && found.children.length > 0) {
+        if (props.sideMenuWithParent || attrs["side-menu-with-parent"]) {
+          return [found];
+        }
         return found.children;
       }
       return [];
@@ -165,7 +169,6 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValu
           return (_a = r.meta) == null ? void 0 : _a.title;
         });
         if (matchedMenus.length === 0) {
-          console.warn("No matching menu item found for route:", routePath);
           return;
         }
         activeSideMenu.value = routePath;
@@ -174,15 +177,10 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValu
         } else {
           activeTopMenu.value = matchedMenus[0].path;
         }
-        console.warn("Updated menu:", {
-          activeTopMenu: activeTopMenu.value,
-          activeSideMenu: activeSideMenu.value
-        });
       },
       { immediate: true }
     );
-    function handleMenuOpen(index) {
-      console.warn("handleMenuOpen called with index:", index);
+    function handleMenuOpen(_index) {
     }
     function handleMenuSelect(index) {
       router.push(index);
@@ -232,6 +230,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValu
                         mode: "vertical",
                         "default-active": activeSideMenu.value,
                         "menu-data": displayedSideMenu.value,
+                        class: "jky-page-layout__side-menu",
                         onSelect: handleMenuSelect
                       }, null, 8, ["default-active", "menu-data"])
                     ]),
@@ -241,6 +240,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValu
                     mode: "vertical",
                     "default-active": activeSideMenu.value,
                     "menu-data": displayedSideMenu.value,
+                    class: "jky-page-layout__side-menu",
                     onSelect: handleMenuSelect
                   }, null, 8, ["default-active", "menu-data"])
                 ]),

package/dist/lib/style.css

@@ -11,6 +11,7 @@
       --tw-skew-x: initial;
       --tw-skew-y: initial;
       --tw-space-y-reverse: 0;
+      --tw-space-x-reverse: 0;
       --tw-divide-y-reverse: 0;
       --tw-border-style: solid;
       --tw-gradient-position: initial;
@@ -132,6 +133,7 @@
     --color-gray-700: oklch(37.3% .034 259.733);
     --color-gray-800: oklch(27.8% .033 256.848);
     --color-gray-900: oklch(21% .034 264.665);
+    --color-black: #000;
     --color-white: #fff;
     --spacing: .25rem;
     --container-2xl: 42rem;
@@ -604,6 +606,10 @@
     margin-right: calc(var(--spacing) * 4);
   }
 
+  .mb-0\! {
+    margin-bottom: calc(var(--spacing) * 0) !important;
+  }
+
   .mb-1 {
     margin-bottom: calc(var(--spacing) * 1);
   }
@@ -1404,6 +1410,38 @@
     mask-repeat: no-repeat;
   }
 
+  .icon-\[mi--switch\] {
+    width: 1em;
+    height: 1em;
+    -webkit-mask-image: var(--svg);
+    -webkit-mask-image: var(--svg);
+    -webkit-mask-image: var(--svg);
+    mask-image: var(--svg);
+    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M14.293 2.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414L16.586 8H5a1 1 0 0 1 0-2h11.586l-2.293-2.293a1 1 0 0 1 0-1.414m-4.586 10a1 1 0 0 1 0 1.414L7.414 16H19a1 1 0 1 1 0 2H7.414l2.293 2.293a1 1 0 0 1-1.414 1.414l-4-4a1 1 0 0 1 0-1.414l4-4a1 1 0 0 1 1.414 0'/%3E%3C/svg%3E");
+    background-color: currentColor;
+    display: inline-block;
+    -webkit-mask-size: 100% 100%;
+    mask-size: 100% 100%;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+  }
+
+  .icon-\[radix-icons--exit-full-screen\] {
+    width: 1em;
+    height: 1em;
+    -webkit-mask-image: var(--svg);
+    -webkit-mask-image: var(--svg);
+    -webkit-mask-image: var(--svg);
+    mask-image: var(--svg);
+    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' width='15' height='15'%3E%3Cpath fill='black' d='M5.5 9a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0V10H2.5a.5.5 0 0 1 0-1zm7 0a.5.5 0 0 1 0 1H10v2.5a.5.5 0 0 1-1 0v-3a.5.5 0 0 1 .5-.5zm-7-7a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1 0-1H5V2.5a.5.5 0 0 1 .5-.5m4 0a.5.5 0 0 1 .5.5V5h2.5a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 .5-.5'/%3E%3C/svg%3E");
+    background-color: currentColor;
+    display: inline-block;
+    -webkit-mask-size: 100% 100%;
+    mask-size: 100% 100%;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+  }
+
   .icon-\[ri--logout-circle-line\] {
     width: 1em;
     height: 1em;
@@ -1420,6 +1458,22 @@
     mask-repeat: no-repeat;
   }
 
+  .icon-\[streamline-ultimate--direction-button-2\] {
+    width: 1em;
+    height: 1em;
+    -webkit-mask-image: var(--svg);
+    -webkit-mask-image: var(--svg);
+    -webkit-mask-image: var(--svg);
+    mask-image: var(--svg);
+    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M9 11.998a3 3 0 1 0 6 0a3 3 0 0 0-6 0m-7.974-.629a.853.853 0 0 0 0 1.257l3.118 2.858A.66.66 0 0 0 5.25 15V9a.66.66 0 0 0-1.106-.486zm21.947 1.257a.85.85 0 0 0 0-1.257l-3.117-2.858A.66.66 0 0 0 18.75 9v6a.659.659 0 0 0 1.105.486zM11.372 22.971a.85.85 0 0 0 1.256 0l2.858-3.118A.659.659 0 0 0 15 18.748H9a.66.66 0 0 0-.487 1.105zm1.256-21.947a.85.85 0 0 0-1.256 0L8.514 4.142A.66.66 0 0 0 9 5.248h6a.66.66 0 0 0 .486-1.106z'/%3E%3C/svg%3E");
+    background-color: currentColor;
+    display: inline-block;
+    -webkit-mask-size: 100% 100%;
+    mask-size: 100% 100%;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+  }
+
   .block {
     display: block;
   }
@@ -1592,6 +1646,10 @@
     flex: 1;
   }
 
+  .flex-none {
+    flex: none;
+  }
+
   .shrink-0 {
     flex-shrink: 0;
   }
@@ -1705,6 +1763,16 @@
     margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
   }
 
+  .gap-x-2 {
+    column-gap: calc(var(--spacing) * 2);
+  }
+
+  :where(.space-x-4 > :not(:last-child)) {
+    --tw-space-x-reverse: 0;
+    margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
+    margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
+  }
+
   :where(.divide-y > :not(:last-child)) {
     --tw-divide-y-reverse: 0;
     border-bottom-style: var(--tw-border-style);
@@ -1721,6 +1789,12 @@
     align-self: center;
   }
 
+  .truncate {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
   .overflow-hidden {
     overflow: hidden;
   }
@@ -1806,6 +1880,26 @@
     border-color: var(--color-yellow-200);
   }
 
+  .border-t-black\/15 {
+    border-top-color: #00000026;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-t-black\/15 {
+      border-top-color: color-mix(in oklab, var(--color-black) 15%, transparent);
+    }
+  }
+
+  .border-b-black\/15 {
+    border-bottom-color: #00000026;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-b-black\/15 {
+      border-bottom-color: color-mix(in oklab, var(--color-black) 15%, transparent);
+    }
+  }
+
   .border-l-\(--el-color-primary\) {
     border-left-color: var(--el-color-primary);
   }
@@ -2129,6 +2223,10 @@
     padding: calc(var(--spacing) * 0);
   }
 
+  .p-0\! {
+    padding: calc(var(--spacing) * 0) !important;
+  }
+
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
@@ -2165,6 +2263,10 @@
     padding-inline: calc(var(--spacing) * 4);
   }
 
+  .px-4\! {
+    padding-inline: calc(var(--spacing) * 4) !important;
+  }
+
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
@@ -2201,6 +2303,10 @@
     padding-block: calc(var(--spacing) * 16);
   }
 
+  .pt-0\! {
+    padding-top: calc(var(--spacing) * 0) !important;
+  }
+
   .pt-4 {
     padding-top: calc(var(--spacing) * 4);
   }
@@ -2619,6 +2725,10 @@
       background-color: var(--color-yellow-200);
     }
 
+    .hover\:text-\(--el-color-primary\):hover {
+      color: var(--el-color-primary);
+    }
+
     .hover\:text-blue-900:hover {
       color: var(--color-blue-900);
     }
@@ -2762,6 +2872,12 @@
   initial-value: 0;
 }
 
+@property --tw-space-x-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+
 @property --tw-divide-y-reverse {
   syntax: "*";
   inherits: false;

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "jky-component-lib",
   "type": "module",
-  "version": "0.0.80",
+  "version": "0.0.88",
   "publishConfig": {
     "access": "public"
   },
   "packageManager": "bun@1.3.5",
   "workspaces": [
-    "apps/*"
+    "playground/*"
   ],
   "description": "Vue 3 component library starter template, provides VitePress documentation, supports building ESM, CJS and UMD formats. ",
   "author": "Kieran Wang <kieranwme@gmail.com> (https://github.com/kieranwv/)",
@@ -57,7 +57,7 @@
   },
   "scripts": {
     "preinstall": "npx only-allow bun",
-    "prepare": "simple-git-hooks",
+    "prepare": "npx simple-git-hooks",
     "dev": "vite build --watch",
     "dev:all": "bash scripts/dev-all.sh",
     "dev:docs": "bash scripts/docs-dev.sh",
@@ -91,7 +91,8 @@
     "mitt": "^3.0.1",
     "pinia": "^3.0.4",
     "pinia-plugin-persistedstate": "^4.7.1",
-    "vue": "^3.5.32"
+    "vue": "^3.5.32",
+    "vue-router": "^5.0.4"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^4.13.0",