jky-component-lib 0.0.64 → 0.0.67

package/dist/lib/form/SelectTable.vue.d.ts

@@ -0,0 +1,38 @@
+import { SelectTableProps } from './types';
+declare const _default: import('vue').DefineComponent<globalThis.ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<SelectTableProps>, {
+    multiple: boolean;
+    labelField: string;
+    idField: string;
+    readonly: boolean;
+    disabled: boolean;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number | (string | number)[]) => any;
+    change: (value: string | number | (string | number)[], selectedData: any[]) => any;
+}, string, import('vue').PublicProps, Readonly<globalThis.ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<SelectTableProps>, {
+    multiple: boolean;
+    labelField: string;
+    idField: string;
+    readonly: boolean;
+    disabled: boolean;
+}>>> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number | (string | number)[]) => any) | undefined;
+    onChange?: ((value: string | number | (string | number)[], selectedData: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/lib/form/SelectTable.vue.js

@@ -0,0 +1,217 @@
+"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));
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const ElementPlus = require("element-plus");
+const index = require("../page-table/index.js");
+const _hoisted_1 = { class: "jky-select-table" };
+const _hoisted_2 = { class: "jky-select-table__tags" };
+const _hoisted_3 = { class: "jky-select-table__dropdown" };
+const __default__ = {
+  name: "JkySelectTable"
+};
+const _sfc_main = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValues(__spreadValues({}, __default__), {
+  name: "JkySelectTable",
+  inheritAttrs: false
+}), {
+  props: {
+    modelValue: {},
+    multiple: { type: Boolean, default: false },
+    labelField: { default: "label" },
+    idField: { default: "id" },
+    detailApi: {},
+    tableProps: {},
+    filterItems: {},
+    dataSource: {},
+    responseProps: {},
+    pagination: { type: Boolean },
+    readonly: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const showTable = vue.ref(false);
+    const selectedData = vue.ref([]);
+    const selectedRows = vue.ref([]);
+    const selectedValue = vue.computed({
+      get: () => props.modelValue,
+      set: (val) => {
+        emit("update:modelValue", val);
+      }
+    });
+    function initSelectedData() {
+      return __async(this, null, function* () {
+        const ids = getIdsFromModelValue(props.modelValue);
+        if (!ids || ids.length === 0) {
+          selectedData.value = [];
+          selectedRows.value = [];
+          return;
+        }
+        if (props.detailApi) {
+          try {
+            const result = yield props.detailApi({ ids: ids.join(",") });
+            selectedData.value = Array.isArray(result) ? result : [result];
+            selectedRows.value = [...selectedData.value];
+          } catch (error) {
+            console.error("加载已选数据失败:", error);
+            selectedData.value = [];
+            selectedRows.value = [];
+          }
+        } else {
+          selectedData.value = ids.map((id) => ({
+            [props.idField]: id,
+            [props.labelField]: id
+          }));
+          selectedRows.value = [...selectedData.value];
+        }
+      });
+    }
+    function getIdsFromModelValue(modelValue) {
+      if (!modelValue)
+        return [];
+      if (Array.isArray(modelValue))
+        return modelValue;
+      return [modelValue];
+    }
+    function removeTag(item) {
+      if (props.disabled || props.readonly)
+        return;
+      const id = item[props.idField];
+      if (props.multiple) {
+        const currentIds = getIdsFromModelValue(props.modelValue);
+        const newIds = currentIds.filter((v) => v !== id);
+        selectedValue.value = newIds;
+      } else {
+        selectedValue.value = "";
+      }
+      selectedData.value = selectedData.value.filter((v) => v[props.idField] !== id);
+      selectedRows.value = selectedRows.value.filter((v) => v[props.idField] !== id);
+      emit("change", selectedValue.value, selectedData.value);
+    }
+    function handleSelectionChange(selection) {
+      selectedRows.value = selection;
+      if (props.multiple) {
+        const ids = selection.map((item) => item[props.idField]);
+        selectedValue.value = ids;
+        selectedData.value = selection;
+      } else {
+        if (selection.length > 0) {
+          const item = selection[0];
+          selectedValue.value = item[props.idField];
+          selectedData.value = [item];
+        } else {
+          selectedValue.value = "";
+          selectedData.value = [];
+        }
+      }
+      emit("change", selectedValue.value, selectedData.value);
+    }
+    vue.watch(
+      () => props.modelValue,
+      (newVal) => {
+        if (newVal && (Array.isArray(newVal) ? newVal.length > 0 : newVal)) {
+          initSelectedData();
+        }
+      },
+      { immediate: true }
+    );
+    function toggleTable() {
+      if (props.disabled || props.readonly)
+        return;
+      showTable.value = !showTable.value;
+    }
+    const pageTableProps = vue.computed(() => {
+      var _a, _b, _c;
+      const dataSource = ((_a = props.tableProps) == null ? void 0 : _a.dataSource) || props.dataSource;
+      const filterItems = ((_b = props.tableProps) == null ? void 0 : _b.filterItems) || props.filterItems;
+      const columns = ((_c = props.tableProps) == null ? void 0 : _c.columns) || [];
+      return __spreadProps(__spreadValues({}, props.tableProps), {
+        columns,
+        dataSource,
+        filterItems,
+        selection: true,
+        selectedRows: selectedRows.value
+      });
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        vue.createElementVNode("div", _hoisted_2, [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(selectedData.value, (item) => {
+            return vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElTag), {
+              key: item[__props.idField],
+              closable: "",
+              "disable-transitions": false,
+              onClose: ($event) => removeTag(item)
+            }, {
+              default: vue.withCtx(() => [
+                vue.createTextVNode(vue.toDisplayString(item[__props.labelField]), 1)
+              ]),
+              _: 2
+            }, 1032, ["onClose"]);
+          }), 128)),
+          !__props.readonly && !__props.disabled ? (vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElButton), {
+            key: 0,
+            text: "",
+            type: "primary",
+            onClick: toggleTable
+          }, {
+            default: vue.withCtx(() => [
+              vue.createTextVNode(vue.toDisplayString(selectedData.value.length > 0 ? "更换" : "选择"), 1)
+            ]),
+            _: 1
+          })) : vue.createCommentVNode("", true)
+        ]),
+        vue.withDirectives(vue.createElementVNode("div", _hoisted_3, [
+          vue.createVNode(vue.unref(index.JkyPageTable), vue.mergeProps(pageTableProps.value, {
+            selection: true,
+            "selected-rows": selectedRows.value,
+            onSelectionChange: handleSelectionChange
+          }), null, 16, ["selected-rows"])
+        ], 512), [
+          [vue.vShow, showTable.value]
+        ])
+      ]);
+    };
+  }
+}));
+exports.default = _sfc_main;

package/dist/lib/form/SelectTable.vue3.js

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

package/dist/lib/form/style.css

@@ -4,6 +4,15 @@
   --jky-form-item-border-width: 4px;
   --jky-form-item-border-color: var(--el-color-primary);
   --jky-form-item-bg-color: rgba(var(--el-color-primary-rgb), 0.5);
+  
+  /* Grid 布局默认列数（可通过响应式变量覆盖） */
+  --jky-form-grid-cols-xs: 1;
+  --jky-form-grid-cols-sm: 2;
+  --jky-form-grid-cols-md: 2;
+  --jky-form-grid-cols-lg: 3;
+  --jky-form-grid-cols-xl: 3;
+  --jky-form-grid-cols-2xl: 4;
+  --jky-form-grid-cols-3xl: 4;
 }
 
 
@@ -11,6 +20,53 @@
 .jky-form {
   /* 表单容器样式 */
 }
+
+
+/* Grid 布局模式 */
+.jky-form--grid {
+  display: grid;
+  grid-template-columns: repeat(var(--jky-form-grid-cols-xs), minmax(0, 1fr));
+  gap: var(--el-form-item-gutter, 16px);
+}
+.el-form--inline.jky-form--grid .el-form-item {
+  margin-right: 0;
+.el-form-item__content {
+    align-items: flex-start;
+}
+}
+
+
+/* 响应式断点 */
+@media (min-width: 640px) {
+.jky-form--grid {
+    grid-template-columns: repeat(var(--jky-form-grid-cols-sm, var(--jky-form-grid-cols-xs)), minmax(0, 1fr));
+}
+}
+@media (min-width: 768px) {
+.jky-form--grid {
+    grid-template-columns: repeat(var(--jky-form-grid-cols-md, var(--jky-form-grid-cols-sm)), minmax(0, 1fr));
+}
+}
+@media (min-width: 1024px) {
+.jky-form--grid {
+    grid-template-columns: repeat(var(--jky-form-grid-cols-lg, var(--jky-form-grid-cols-md)), minmax(0, 1fr));
+}
+}
+@media (min-width: 1280px) {
+.jky-form--grid {
+    grid-template-columns: repeat(var(--jky-form-grid-cols-xl, var(--jky-form-grid-cols-lg)), minmax(0, 1fr));
+}
+}
+@media (min-width: 1536px) {
+.jky-form--grid {
+    grid-template-columns: repeat(var(--jky-form-grid-cols-2xl, var(--jky-form-grid-cols-xl)), minmax(0, 1fr));
+}
+}
+@media (min-width: 1920px) {
+.jky-form--grid {
+    grid-template-columns: repeat(var(--jky-form-grid-cols-3xl, var(--jky-form-grid-cols-2xl)), minmax(0, 1fr));
+}
+}
 .jky-form__title {
   /* 表单标题样式 */
 }

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.64";
+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/page-layout/PageLayout.vue.js

@@ -22,7 +22,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const vue = require("vue");
 const ElementPlus = require("element-plus");
 const _hoisted_1 = {
-  class: "jky-page-layout flex h-full w-full overflow-hidden gap-x-4",
+  class: "jky-page-layout flex h-full w-full overflow-hidden",
   style: { "--el-menu-border-color": "transparent" }
 };
 const _sfc_main = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValues({}, {

package/dist/lib/page-layout/style.css

@@ -1,7 +1,9 @@
 :root {
   /* PageLayout 布局组件 CSS 变量 */
+  --jky-page-layout-gap: 5;
 }
 .jky-page-layout {
+  column-gap: calc(var(--spacing) * var(--jky-page-layout-gap));
 .el-menu {
     border-right: none;
 }