jky-component-lib 0.0.61 → 0.0.65

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

@@ -9,6 +9,7 @@ import { JkyCodeMirrorEditor } from "./code-mirror-editor/index.js";
 import { JkyForm } from "./form/index.js";
 import { JkyMenu } from "./menu/index.js";
 import { JkyPageHeader } from "./page-header/index.js";
+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";
@@ -24,6 +25,7 @@ export {
   JkyForm,
   JkyMenu,
   JkyPageHeader,
+  JkyPageLayout,
   JkyPageTable,
   JkyRichEditor,
   JkySayHello,

package/dist/es/package.json.js

@@ -1,4 +1,4 @@
-const version = "0.0.61";
+const version = "0.0.65";
 export {
   version
 };

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

@@ -0,0 +1,36 @@
+import { PageLayoutProps } from './types';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        menuHeader?(_: {}): any;
+        aside?(_: {}): any;
+        aside?(_: {}): any;
+        navigationHeader?(_: {}): any;
+        navigation?(_: {}): any;
+        navigation?(_: {}): any;
+        header?(_: {}): any;
+        tabs?(_: {}): any;
+        dashboard?(_: {}): any;
+        dashboard?(_: {}): any;
+        default?(_: {}): any;
+        default?(_: {
+            height: any;
+        }): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<PageLayoutProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<PageLayoutProps> & Readonly<{}>, {
+    asideWithScrollbar: boolean;
+    mainWithScrollbar: boolean;
+    navigationWithScrollbar: boolean;
+    showNavigation: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,152 @@
+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));
+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",
+  style: { "--el-menu-border-color": "transparent" }
+};
+const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, {
+  name: "JkyPageLayout"
+}), {
+  __name: "PageLayout",
+  props: {
+    asideClass: {},
+    asideWithScrollbar: { type: Boolean, default: true },
+    mainClass: {},
+    mainWithCard: { type: Boolean },
+    mainWithScrollbar: { type: Boolean, default: false },
+    contentClass: {},
+    navigationClass: {},
+    navigationWithScrollbar: { type: Boolean, default: true },
+    showNavigation: { type: Boolean, default: true },
+    headerClass: {},
+    tabsClass: {},
+    showDashboard: { type: Boolean },
+    dashboardWithScrollbar: { type: Boolean },
+    dashboardClass: {},
+    className: {}
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      const _component_ElAutoResizer = resolveComponent("ElAutoResizer");
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(unref(ElCard), {
+          class: normalizeClass(["jky-page-layout__aside shrink-0 overflow-hidden p-0", props.asideClass]),
+          style: { "--el-card-padding": 0 }
+        }, createSlots({
+          default: withCtx(() => [
+            props.asideWithScrollbar ? (openBlock(), createBlock(unref(ElScrollbar), { key: 0 }, {
+              default: withCtx(() => [
+                renderSlot(_ctx.$slots, "aside")
+              ]),
+              _: 3
+            })) : renderSlot(_ctx.$slots, "aside", { key: 1 })
+          ]),
+          _: 2
+        }, [
+          _ctx.$slots.menuHeader ? {
+            name: "header",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "menuHeader")
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["class"]),
+        __props.showNavigation ? (openBlock(), createBlock(unref(ElCard), {
+          key: 0,
+          class: normalizeClass(["jky-page-layout__navigation shrink-0 overflow-hidden p-0", props.navigationClass]),
+          style: { "--el-card-padding": 0 }
+        }, createSlots({
+          default: withCtx(() => [
+            props.navigationWithScrollbar ? (openBlock(), createBlock(unref(ElScrollbar), { key: 0 }, {
+              default: withCtx(() => [
+                renderSlot(_ctx.$slots, "navigation")
+              ]),
+              _: 3
+            })) : renderSlot(_ctx.$slots, "navigation", { key: 1 })
+          ]),
+          _: 2
+        }, [
+          _ctx.$slots.navigationHeader ? {
+            name: "header",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, "navigationHeader")
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["class"])) : createCommentVNode("", true),
+        createElementVNode("div", {
+          class: normalizeClass(["jky-page-layout__main flex-1 flex flex-col min-w-0 overflow-hidden p-0 gap-y-4", props.mainClass])
+        }, [
+          _ctx.$slots.header ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass(["jky-page-layout__header shrink-0 flex items-center overflow-hidden px-4", props.headerClass])
+          }, [
+            renderSlot(_ctx.$slots, "header")
+          ], 2)) : createCommentVNode("", true),
+          _ctx.$slots.tabs ? (openBlock(), createElementBlock("div", {
+            key: 1,
+            class: normalizeClass(["jky-page-layout__tabs shrink-0 overflow-hidden", props.tabsClass])
+          }, [
+            renderSlot(_ctx.$slots, "tabs")
+          ], 2)) : createCommentVNode("", true),
+          _ctx.$slots.dashboard ? (openBlock(), createBlock(unref(ElCard), {
+            key: 2,
+            class: normalizeClass(["jky-page-layout__dashboard shrink-0 overflow-hidden", props.dashboardClass])
+          }, {
+            default: withCtx(() => [
+              props.dashboardWithScrollbar ? (openBlock(), createBlock(unref(ElScrollbar), { key: 0 }, {
+                default: withCtx(() => [
+                  renderSlot(_ctx.$slots, "dashboard")
+                ]),
+                _: 3
+              })) : renderSlot(_ctx.$slots, "dashboard", { key: 1 })
+            ]),
+            _: 3
+          }, 8, ["class"])) : createCommentVNode("", true),
+          (openBlock(), createBlock(resolveDynamicComponent(props.mainWithCard ? unref(ElCard) : "div"), {
+            "body-class": props.mainWithScrollbar ? "" : "pb-0!",
+            class: normalizeClass(["jky-page-layout__content flex-1 min-h-0 overflow-hidden", props.contentClass])
+          }, {
+            default: withCtx(() => [
+              props.mainWithScrollbar ? (openBlock(), createBlock(unref(ElScrollbar), { key: 0 }, {
+                default: withCtx(() => [
+                  renderSlot(_ctx.$slots, "default")
+                ]),
+                _: 3
+              })) : (openBlock(), createBlock(_component_ElAutoResizer, { key: 1 }, {
+                default: withCtx(({ height }) => [
+                  renderSlot(_ctx.$slots, "default", { height })
+                ]),
+                _: 3
+              }))
+            ]),
+            _: 3
+          }, 8, ["body-class", "class"]))
+        ], 2)
+      ]);
+    };
+  }
+}));
+export {
+  _sfc_main as default
+};

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

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

package/dist/es/page-layout/index.d.ts

@@ -0,0 +1,4 @@
+import { InstallWithSFC } from '../utils';
+import { default as PageLayout } from './PageLayout.vue';
+export declare const JkyPageLayout: InstallWithSFC<typeof PageLayout>;
+export default JkyPageLayout;

package/dist/es/page-layout/index.js

@@ -0,0 +1,8 @@
+import _sfc_main from "./PageLayout.vue.js";
+/* empty css                */
+import { installWithSFC } from "../utils/with-install.js";
+const JkyPageLayout = installWithSFC(_sfc_main);
+export {
+  JkyPageLayout,
+  JkyPageLayout as default
+};

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

@@ -0,0 +1,10 @@
+: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;
+}
+}