jky-component-lib 0.0.64 → 0.0.67

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

@@ -0,0 +1,217 @@
+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());
+  });
+};
+import { defineComponent, ref, computed, watch, openBlock, createElementBlock, createElementVNode, Fragment, renderList, createBlock, unref, withCtx, createTextVNode, toDisplayString, createCommentVNode, withDirectives, createVNode, mergeProps, vShow } from "vue";
+import { ElTag, ElButton } from "element-plus";
+import { JkyPageTable } from "../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__ */ 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 = ref(false);
+    const selectedData = ref([]);
+    const selectedRows = ref([]);
+    const selectedValue = 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);
+    }
+    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 = 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 openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(selectedData.value, (item) => {
+            return openBlock(), createBlock(unref(ElTag), {
+              key: item[__props.idField],
+              closable: "",
+              "disable-transitions": false,
+              onClose: ($event) => removeTag(item)
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(item[__props.labelField]), 1)
+              ]),
+              _: 2
+            }, 1032, ["onClose"]);
+          }), 128)),
+          !__props.readonly && !__props.disabled ? (openBlock(), createBlock(unref(ElButton), {
+            key: 0,
+            text: "",
+            type: "primary",
+            onClick: toggleTable
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(selectedData.value.length > 0 ? "更换" : "选择"), 1)
+            ]),
+            _: 1
+          })) : createCommentVNode("", true)
+        ]),
+        withDirectives(createElementVNode("div", _hoisted_3, [
+          createVNode(unref(JkyPageTable), mergeProps(pageTableProps.value, {
+            selection: true,
+            "selected-rows": selectedRows.value,
+            onSelectionChange: handleSelectionChange
+          }), null, 16, ["selected-rows"])
+        ], 512), [
+          [vShow, showTable.value]
+        ])
+      ]);
+    };
+  }
+}));
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,5 @@
+import _sfc_main from "./SelectTable.vue.js";
+/* empty css                 */
+export {
+  _sfc_main as default
+};

package/dist/es/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/es/index.js

@@ -2,6 +2,8 @@ import { components } from "./components.js";
 import { createInstaller } from "./utils/installer.js";
 /* empty css           */
 import { JkyComponentLibResolver } from "./resolver.js";
+import { default as default2 } from "./tabs/TabContent.vue.js";
+/* empty css                     */
 import { JkyAddInput } from "./add-input/index.js";
 import { JkyButton } from "./button/index.js";
 import { JkyButtonNav } from "./button-nav/index.js";
@@ -13,6 +15,10 @@ import { JkyPageLayout } from "./page-layout/index.js";
 import { JkyPageTable } from "./page-table/index.js";
 import { JkyRichEditor } from "./rich-editor/index.js";
 import { JkySayHello } from "./say-hello/index.js";
+import { JkyTabs } from "./tabs/index.js";
+import { clearRouteListeners, emitRouteChange, onRouteChange } from "./tabs/routeListener.js";
+import { createTabsStore, resetTabsStore, useTabsStore } from "./tabs/useTabsStore.js";
+import { useTabs } from "./tabs/useTabs.js";
 const installer = createInstaller(components);
 const install = installer.install;
 const version = installer.version;
@@ -29,8 +35,17 @@ export {
   JkyPageTable,
   JkyRichEditor,
   JkySayHello,
+  default2 as JkyTabContent,
+  JkyTabs,
+  clearRouteListeners,
   components,
+  createTabsStore,
   installer as default,
+  emitRouteChange,
   install,
+  onRouteChange,
+  resetTabsStore,
+  useTabs,
+  useTabsStore,
   version
 };

package/dist/es/package.json.js

@@ -1,4 +1,4 @@
-const version = "0.0.64";
+const version = "0.0.67";
 export {
   version
 };

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

@@ -17,7 +17,7 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { defineComponent, openBlock, createElementBlock, normalizeStyle, unref, createElementVNode, createBlock, normalizeProps, mergeProps, createCommentVNode, toDisplayString, renderSlot, Fragment, renderList, normalizeClass, withCtx, resolveDynamicComponent, createVNode, createTextVNode } from "vue";
+import { defineComponent, computed, openBlock, createElementBlock, normalizeStyle, createElementVNode, createBlock, normalizeProps, mergeProps, createCommentVNode, toDisplayString, renderSlot, Fragment, renderList, normalizeClass, unref, withCtx, resolveDynamicComponent, createVNode, createTextVNode } from "vue";
 import { ElIcon, ElDropdown, ElDropdownMenu, ElDropdownItem } from "element-plus";
 import _sfc_main$1 from "./PopoverMenu.vue.js";
 const _hoisted_1 = { class: "jky-page-header__container" };
@@ -96,7 +96,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
       var _a, _b, _c, _d;
       return openBlock(), createElementBlock("header", {
         class: "jky-page-header",
-        style: normalizeStyle([unref(backgroundStyle), { height: unref(heightValue) }])
+        style: normalizeStyle([backgroundStyle.value, { height: heightValue.value }])
       }, [
         createElementVNode("div", _hoisted_1, [
           __props.showPopover && ((_b = (_a = __props.popover) == null ? void 0 : _a.menus) == null ? void 0 : _b.length) ? (openBlock(), createBlock(_sfc_main$1, normalizeProps(mergeProps({ key: 0 }, __props.popover)), null, 16)) : createCommentVNode("", true),

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

@@ -1,4 +1,4 @@
-import { defineComponent, openBlock, createElementBlock, createVNode, unref, withCtx, createElementVNode, Fragment, renderList, createBlock, normalizeClass, createCommentVNode, toDisplayString } from "vue";
+import { defineComponent, ref, openBlock, createElementBlock, createVNode, unref, withCtx, createElementVNode, Fragment, renderList, createBlock, normalizeClass, createCommentVNode, toDisplayString } from "vue";
 import { ElPopover, ElButton } from "element-plus";
 const _hoisted_1 = {
   key: 0,
@@ -59,7 +59,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   key: item.value,
                   disabled: item.disabled,
                   class: normalizeClass(["w-fit! h-fit! ml-0!", [__props.elButtonClass, item.elButtonClass]]),
-                  type: unref(popoverIndex) === item.value ? "primary" : __props.elButtonType || "default",
+                  type: popoverIndex.value === item.value ? "primary" : __props.elButtonType || "default",
                   onClick: ($event) => onPopoverButtonClick(item)
                 }, {
                   default: withCtx(() => [

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

@@ -20,7 +20,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { defineComponent, resolveComponent, openBlock, createElementBlock, createVNode, unref, normalizeClass, createSlots, withCtx, createBlock, renderSlot, createCommentVNode, createElementVNode, resolveDynamicComponent } from "vue";
 import { ElCard, ElScrollbar } from "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__ */ defineComponent(__spreadProps(__spreadValues({}, {

package/dist/es/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;
 }