jky-component-lib 0.0.65 → 0.0.67

package/dist/es/tabs/useTabsStore.js

@@ -0,0 +1,208 @@
+var __defProp = Object.defineProperty;
+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;
+};
+import { defineStore } from "pinia";
+import { ref, shallowRef, computed, inject } from "vue";
+const PERSIST_KEY_SYMBOL = Symbol("jky-tabs-persist-key");
+const DEFAULT_PERSIST_KEY = "jky-tabs-state";
+function getPersistConfig(persist, persistKey) {
+  const injectedPersistKey = inject(PERSIST_KEY_SYMBOL, void 0);
+  const finalPersistKey = injectedPersistKey || persistKey || DEFAULT_PERSIST_KEY;
+  return {
+    enabled: persist !== void 0 ? persist : false,
+    key: finalPersistKey
+  };
+}
+function loadFromStorage(key) {
+  try {
+    const stored = localStorage.getItem(key);
+    if (stored) {
+      return JSON.parse(stored);
+    }
+  } catch (error) {
+    console.warn("Failed to load tabs from storage:", error);
+  }
+  return null;
+}
+function saveToStorage(key, data) {
+  try {
+    localStorage.setItem(key, JSON.stringify(data));
+  } catch (error) {
+    console.warn("Failed to save tabs to storage:", error);
+  }
+}
+function createTabsStore(persist, persistKey) {
+  const persistConfig = getPersistConfig(persist, persistKey);
+  const initialData = persistConfig.enabled ? loadFromStorage(persistConfig.key) : null;
+  const store = defineStore("jky-tabs", () => {
+    const tabList = ref((initialData == null ? void 0 : initialData.tabList) || []);
+    const activeTab = ref((initialData == null ? void 0 : initialData.activeTab) || "");
+    const cacheTabs = shallowRef((initialData == null ? void 0 : initialData.cacheTabs) || []);
+    const closedTabs = shallowRef((initialData == null ? void 0 : initialData.closedTabs) || []);
+    const cacheSet = computed(() => new Set(cacheTabs.value));
+    const closedSet = computed(() => new Set(closedTabs.value));
+    function persistState() {
+      if (!persistConfig.enabled)
+        return;
+      saveToStorage(persistConfig.key, {
+        tabList: tabList.value,
+        activeTab: activeTab.value,
+        cacheTabs: cacheTabs.value,
+        closedTabs: closedTabs.value
+      });
+    }
+    function addTab(tab) {
+      const index = tabList.value.findIndex((t) => t.name === tab.name);
+      if (index !== -1) {
+        tabList.value[index] = __spreadValues(__spreadValues({}, tabList.value[index]), tab);
+      } else {
+        tabList.value.push(tab);
+      }
+      persistState();
+    }
+    function updateTab(name, tab) {
+      const index = tabList.value.findIndex((t) => t.name === name);
+      if (index !== -1) {
+        tabList.value[index] = __spreadValues(__spreadValues({}, tabList.value[index]), tab);
+        persistState();
+      }
+    }
+    function removeTab(name) {
+      const index = tabList.value.findIndex((t) => t.name === name);
+      if (index !== -1) {
+        tabList.value.splice(index, 1);
+        removeCache(name);
+        if (activeTab.value === name && tabList.value.length > 0) {
+          const nextTab = tabList.value[index] || tabList.value[index - 1];
+          if (nextTab) {
+            activeTab.value = nextTab.name;
+          }
+        }
+        persistState();
+      }
+    }
+    function setActiveTab(name) {
+      activeTab.value = name;
+      persistState();
+    }
+    function addCache(name) {
+      if (!cacheSet.value.has(name)) {
+        cacheTabs.value = [...cacheTabs.value, name];
+        persistState();
+      }
+    }
+    function removeCache(name) {
+      cacheTabs.value = cacheTabs.value.filter((t) => t !== name);
+      persistState();
+    }
+    function bulkRemove(names) {
+      tabList.value = tabList.value.filter((tab) => !names.includes(tab.name));
+      names.forEach((name) => removeCache(name));
+      persistState();
+    }
+    function closeLeft(name) {
+      const index = tabList.value.findIndex((t) => t.name === name);
+      if (index > 0) {
+        const leftTabs = tabList.value.slice(0, index);
+        const removableTabs = leftTabs.filter((tab) => !tab.affix);
+        bulkRemove(removableTabs.map((tab) => tab.name));
+      }
+    }
+    function closeRight(name) {
+      const index = tabList.value.findIndex((t) => t.name === name);
+      if (index >= 0 && index < tabList.value.length - 1) {
+        const rightTabs = tabList.value.slice(index + 1);
+        const removableTabs = rightTabs.filter((tab) => !tab.affix);
+        bulkRemove(removableTabs.map((tab) => tab.name));
+      }
+    }
+    function closeOther(name) {
+      const removableTabs = tabList.value.filter(
+        (tab) => tab.name !== name && !tab.affix
+      );
+      bulkRemove(removableTabs.map((tab) => tab.name));
+    }
+    function closeAll() {
+      const removableTabs = tabList.value.filter((tab) => !tab.affix);
+      bulkRemove(removableTabs.map((tab) => tab.name));
+    }
+    function refresh(name) {
+      removeCache(name);
+      setTimeout(() => {
+        addCache(name);
+      }, 0);
+    }
+    function getTabList() {
+      return [...tabList.value];
+    }
+    function getCacheTabs() {
+      return [...cacheTabs.value];
+    }
+    function isClosed(name) {
+      return closedSet.value.has(name);
+    }
+    function isCached(name) {
+      return cacheSet.value.has(name);
+    }
+    function reset() {
+      tabList.value = [];
+      activeTab.value = "";
+      cacheTabs.value = [];
+      closedTabs.value = [];
+      persistState();
+    }
+    return {
+      tabList,
+      activeTab,
+      cacheTabs,
+      closedTabs,
+      addTab,
+      updateTab,
+      removeTab,
+      setActiveTab,
+      addCache,
+      removeCache,
+      bulkRemove,
+      closeLeft,
+      closeRight,
+      closeOther,
+      closeAll,
+      refresh,
+      getTabList,
+      getCacheTabs,
+      isClosed,
+      isCached,
+      reset
+    };
+  });
+  return store();
+}
+const storeInstances = /* @__PURE__ */ new Map();
+function useTabsStore(persist, persistKey) {
+  const key = persistKey || DEFAULT_PERSIST_KEY;
+  if (!storeInstances.has(key)) {
+    storeInstances.set(key, () => createTabsStore(persist, persistKey));
+  }
+  return storeInstances.get(key)();
+}
+function resetTabsStore() {
+  storeInstances.clear();
+}
+export {
+  createTabsStore,
+  resetTabsStore,
+  useTabsStore
+};

package/dist/lib/components.d.ts

@@ -10,5 +10,6 @@ export * from './page-layout';
 export * from './page-table';
 export * from './rich-editor';
 export * from './say-hello';
+export * from './tabs';
 export declare const components: Plugin[];
 export default components;

package/dist/lib/components.js

@@ -11,6 +11,7 @@ const index$7 = require("./page-layout/index.js");
 const index$8 = require("./page-table/index.js");
 const index$9 = require("./rich-editor/index.js");
 const index$a = require("./say-hello/index.js");
+const index$b = require("./tabs/index.js");
 const components = [
   index$a.JkySayHello,
   index$1.JkyButton,
@@ -22,7 +23,8 @@ const components = [
   index.JkyAddInput,
   index$9.JkyRichEditor,
   index$8.JkyPageTable,
-  index$7.JkyPageLayout
+  index$7.JkyPageLayout,
+  index$b.JkyTabs
 ];
 exports.JkyAddInput = index.JkyAddInput;
 exports.JkyButton = index$1.JkyButton;
@@ -35,4 +37,5 @@ exports.JkyPageLayout = index$7.JkyPageLayout;
 exports.JkyPageTable = index$8.JkyPageTable;
 exports.JkyRichEditor = index$9.JkyRichEditor;
 exports.JkySayHello = index$a.JkySayHello;
+exports.JkyTabs = index$b.JkyTabs;
 exports.components = components;

package/dist/lib/index.js

@@ -4,6 +4,8 @@ const components = require("./components.js");
 const installer$1 = require("./utils/installer.js");
 ;/* empty css            */
 const resolver = require("./resolver.js");
+const TabContent_vue_vue_type_script_setup_true_lang = require("./tabs/TabContent.vue.js");
+;/* empty css                      */
 const index = require("./add-input/index.js");
 const index$1 = require("./button/index.js");
 const index$2 = require("./button-nav/index.js");
@@ -15,11 +17,16 @@ const index$7 = require("./page-layout/index.js");
 const index$8 = require("./page-table/index.js");
 const index$9 = require("./rich-editor/index.js");
 const index$a = require("./say-hello/index.js");
+const index$b = require("./tabs/index.js");
+const routeListener = require("./tabs/routeListener.js");
+const useTabsStore = require("./tabs/useTabsStore.js");
+const useTabs = require("./tabs/useTabs.js");
 const installer = installer$1.createInstaller(components.components);
 const install = installer.install;
 const version = installer.version;
 exports.components = components.components;
 exports.JkyComponentLibResolver = resolver.JkyComponentLibResolver;
+exports.JkyTabContent = TabContent_vue_vue_type_script_setup_true_lang.default;
 exports.JkyAddInput = index.JkyAddInput;
 exports.JkyButton = index$1.JkyButton;
 exports.JkyButtonNav = index$2.JkyButtonNav;
@@ -31,6 +38,14 @@ exports.JkyPageLayout = index$7.JkyPageLayout;
 exports.JkyPageTable = index$8.JkyPageTable;
 exports.JkyRichEditor = index$9.JkyRichEditor;
 exports.JkySayHello = index$a.JkySayHello;
+exports.JkyTabs = index$b.JkyTabs;
+exports.clearRouteListeners = routeListener.clearRouteListeners;
+exports.emitRouteChange = routeListener.emitRouteChange;
+exports.onRouteChange = routeListener.onRouteChange;
+exports.createTabsStore = useTabsStore.createTabsStore;
+exports.resetTabsStore = useTabsStore.resetTabsStore;
+exports.useTabsStore = useTabsStore.useTabsStore;
+exports.useTabs = useTabs.useTabs;
 exports.default = installer;
 exports.install = install;
 exports.version = version;

package/dist/lib/package.json.js

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

package/dist/lib/page-header/PageHeader.vue.js

@@ -76,13 +76,13 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValu
     function handleCommand(command) {
       emit("command", command);
     }
-    const heightValue = computed(() => {
+    const heightValue = vue.computed(() => {
       if (typeof props.height === "number") {
         return `${props.height}px`;
       }
       return props.height;
     });
-    const backgroundStyle = computed(() => {
+    const backgroundStyle = vue.computed(() => {
       const style = {};
       if (props.backgroundImage) {
         style.backgroundImage = `url(${props.backgroundImage})`;
@@ -98,7 +98,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValu
       var _a, _b, _c, _d;
       return vue.openBlock(), vue.createElementBlock("header", {
         class: "jky-page-header",
-        style: vue.normalizeStyle([vue.unref(backgroundStyle), { height: vue.unref(heightValue) }])
+        style: vue.normalizeStyle([backgroundStyle.value, { height: heightValue.value }])
       }, [
         vue.createElementVNode("div", _hoisted_1, [
           __props.showPopover && ((_b = (_a = __props.popover) == null ? void 0 : _a.menus) == null ? void 0 : _b.length) ? (vue.openBlock(), vue.createBlock(PopoverMenu_vue_vue_type_script_setup_true_lang.default, vue.normalizeProps(vue.mergeProps({ key: 0 }, __props.popover)), null, 16)) : vue.createCommentVNode("", true),

package/dist/lib/page-header/PopoverMenu.vue.js

@@ -29,7 +29,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const popoverIndex = ref("");
+    const popoverIndex = vue.ref("");
     function onPopoverButtonClick(item) {
       var _a;
       if (props.highlightCurrent) {
@@ -61,7 +61,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                   key: item.value,
                   disabled: item.disabled,
                   class: vue.normalizeClass(["w-fit! h-fit! ml-0!", [__props.elButtonClass, item.elButtonClass]]),
-                  type: vue.unref(popoverIndex) === item.value ? "primary" : __props.elButtonType || "default",
+                  type: popoverIndex.value === item.value ? "primary" : __props.elButtonType || "default",
                   onClick: ($event) => onPopoverButtonClick(item)
                 }, {
                   default: vue.withCtx(() => [

package/dist/lib/style.css

@@ -61,13 +61,21 @@
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
+    --color-red-100: oklch(93.6% .032 17.717);
     --color-red-500: oklch(63.7% .237 25.331);
+    --color-red-700: oklch(50.5% .213 27.518);
+    --color-red-800: oklch(44.4% .177 26.899);
+    --color-orange-100: oklch(95.4% .038 75.164);
     --color-orange-600: oklch(64.6% .222 41.116);
+    --color-orange-800: oklch(47% .157 37.304);
     --color-amber-100: oklch(96.2% .059 95.617);
     --color-yellow-50: oklch(98.7% .026 102.212);
+    --color-yellow-100: oklch(97.3% .071 103.193);
+    --color-yellow-500: oklch(79.5% .184 86.047);
     --color-yellow-600: oklch(68.1% .162 75.834);
     --color-yellow-800: oklch(47.6% .114 61.907);
     --color-green-50: oklch(98.2% .018 155.826);
+    --color-green-100: oklch(96.2% .044 156.743);
     --color-green-500: oklch(72.3% .219 149.579);
     --color-green-600: oklch(62.7% .194 149.214);
     --color-green-800: oklch(44.8% .119 151.328);
@@ -83,12 +91,14 @@
     --color-purple-500: oklch(62.7% .265 303.9);
     --color-purple-600: oklch(55.8% .288 302.321);
     --color-purple-800: oklch(43.8% .218 303.724);
+    --color-gray-50: oklch(98.5% .002 247.839);
     --color-gray-100: oklch(96.7% .003 264.542);
     --color-gray-300: oklch(87.2% .01 258.338);
     --color-gray-400: oklch(70.7% .022 261.325);
     --color-gray-500: oklch(55.1% .027 264.364);
     --color-gray-600: oklch(44.6% .03 256.802);
     --color-gray-700: oklch(37.3% .034 259.733);
+    --color-gray-800: oklch(27.8% .033 256.848);
     --color-white: #fff;
     --spacing: .25rem;
     --text-xs: .75rem;
@@ -499,6 +509,10 @@
     margin-top: calc(var(--spacing) * 4);
   }
 
+  .mt-6 {
+    margin-top: calc(var(--spacing) * 6);
+  }
+
   .mt-8 {
     margin-top: calc(var(--spacing) * 8);
   }
@@ -507,6 +521,14 @@
     margin-right: calc(var(--spacing) * 2);
   }
 
+  .mb-0 {
+    margin-bottom: calc(var(--spacing) * 0);
+  }
+
+  .mb-1 {
+    margin-bottom: calc(var(--spacing) * 1);
+  }
+
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
@@ -519,6 +541,10 @@
     margin-bottom: calc(var(--spacing) * 4);
   }
 
+  .mb-6 {
+    margin-bottom: calc(var(--spacing) * 6);
+  }
+
   .mb-8 {
     margin-bottom: calc(var(--spacing) * 8);
   }
@@ -1067,6 +1093,10 @@
     mask-repeat: no-repeat;
   }
 
+  .block {
+    display: block;
+  }
+
   .contents {
     display: contents;
   }
@@ -1208,6 +1238,10 @@
     list-style-type: disc;
   }
 
+  .grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+
   .grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
@@ -1244,6 +1278,10 @@
     justify-content: flex-end;
   }
 
+  .gap-1 {
+    gap: calc(var(--spacing) * 1);
+  }
+
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
@@ -1252,6 +1290,24 @@
     gap: calc(var(--spacing) * 4);
   }
 
+  :where(.space-y-1 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
+  }
+
+  :where(.space-y-2 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
+  }
+
+  :where(.space-y-3 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
+  }
+
   :where(.space-y-4 > :not(:last-child)) {
     --tw-space-y-reverse: 0;
     margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
@@ -1327,6 +1383,14 @@
     border-color: var(--color-gray-300);
   }
 
+  .border-green-500 {
+    border-color: var(--color-green-500);
+  }
+
+  .border-yellow-500 {
+    border-color: var(--color-yellow-500);
+  }
+
   .border-l-\(--el-color-primary\) {
     border-left-color: var(--el-color-primary);
   }
@@ -1397,6 +1461,10 @@
     background-color: var(--color-blue-500);
   }
 
+  .bg-gray-50 {
+    background-color: var(--color-gray-50);
+  }
+
   .bg-gray-100 {
     background-color: var(--color-gray-100);
   }
@@ -1413,6 +1481,14 @@
     background-color: var(--color-green-50);
   }
 
+  .bg-green-100 {
+    background-color: var(--color-green-100);
+  }
+
+  .bg-green-500 {
+    background-color: var(--color-green-500);
+  }
+
   .bg-green-500\! {
     background-color: var(--color-green-500) !important;
   }
@@ -1421,14 +1497,26 @@
     background-color: var(--color-indigo-50);
   }
 
+  .bg-orange-100 {
+    background-color: var(--color-orange-100);
+  }
+
   .bg-purple-50 {
     background-color: var(--color-purple-50);
   }
 
+  .bg-purple-500 {
+    background-color: var(--color-purple-500);
+  }
+
   .bg-purple-500\! {
     background-color: var(--color-purple-500) !important;
   }
 
+  .bg-red-100 {
+    background-color: var(--color-red-100);
+  }
+
   .bg-red-500\! {
     background-color: var(--color-red-500) !important;
   }
@@ -1445,6 +1533,10 @@
     background-color: var(--color-yellow-50);
   }
 
+  .bg-yellow-100 {
+    background-color: var(--color-yellow-100);
+  }
+
   .bg-linear-to-r {
     --tw-gradient-position: to right;
   }
@@ -1477,6 +1569,10 @@
     padding: calc(var(--spacing) * 2);
   }
 
+  .p-3 {
+    padding: calc(var(--spacing) * 3);
+  }
+
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
@@ -1509,6 +1605,10 @@
     padding-block: calc(var(--spacing) * 2);
   }
 
+  .py-8 {
+    padding-block: calc(var(--spacing) * 8);
+  }
+
   .pr-0 {
     padding-right: calc(var(--spacing) * 0);
   }
@@ -1634,6 +1734,10 @@
     color: var(--color-gray-700);
   }
 
+  .text-gray-800 {
+    color: var(--color-gray-800);
+  }
+
   .text-green-600 {
     color: var(--color-green-600);
   }
@@ -1654,6 +1758,10 @@
     color: var(--color-orange-600);
   }
 
+  .text-orange-800 {
+    color: var(--color-orange-800);
+  }
+
   .text-purple-600 {
     color: var(--color-purple-600);
   }
@@ -1666,6 +1774,10 @@
     color: var(--color-red-500);
   }
 
+  .text-red-800 {
+    color: var(--color-red-800);
+  }
+
   .text-white {
     color: var(--color-white);
   }
@@ -1690,6 +1802,10 @@
     font-style: italic;
   }
 
+  .line-through {
+    text-decoration-line: line-through;
+  }
+
   .underline {
     text-decoration-line: underline;
   }
@@ -1719,7 +1835,33 @@
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
 
+  .transition-colors {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
   @media (hover: hover) {
+    .hover\:bg-blue-600:hover {
+      background-color: var(--color-blue-600);
+    }
+
+    .hover\:bg-gray-50:hover {
+      background-color: var(--color-gray-50);
+    }
+
+    .hover\:bg-green-600:hover {
+      background-color: var(--color-green-600);
+    }
+
+    .hover\:bg-purple-600:hover {
+      background-color: var(--color-purple-600);
+    }
+
+    .hover\:text-red-700:hover {
+      color: var(--color-red-700);
+    }
+
     .hover\:opacity-70:hover {
       opacity: .7;
     }
@@ -1762,6 +1904,10 @@
     .md\:hidden {
       display: none;
     }
+
+    .md\:grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
   }
 
   @media (min-width: 64rem) {