jky-component-lib 0.0.37 → 0.0.45

package/dist/umd/index.js

@@ -1,6 +1,6 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("vue"), require("element-plus")) : typeof define === "function" && define.amd ? define(["exports", "vue", "element-plus"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.JkyComponentLib = {}, global.Vue, global.ElementPlus));
-})(this, (function(exports2, vue, ElementPlus) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("vue"), require("element-plus"), require("element-plus/es"), require("element-plus/es/components/base/style/css"), require("element-plus/es/components/aside/style/css"), require("element-plus/es/components/scrollbar/style/css")) : typeof define === "function" && define.amd ? define(["exports", "vue", "element-plus", "element-plus/es", "element-plus/es/components/base/style/css", "element-plus/es/components/aside/style/css", "element-plus/es/components/scrollbar/style/css"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.JkyComponentLib = {}, global.Vue, global.ElementPlus, global.es));
+})(this, (function(exports2, vue, ElementPlus, es) {
   "use strict";var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
@@ -20,6 +20,26 @@ var __spreadValues = (a, b) => {
   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());
+  });
+};
 
   var __vite_style__ = document.createElement("style");
   __vite_style__.textContent = `
@@ -243,6 +263,34 @@ to {
 .jky-button-nav-dropdown {
   /* 不覆盖任何样式，保持 el-dropdown-menu 默认样式 */
 }
+/* Form 组件样式 */
+.jky-form {
+  /* 表单容器样式 */
+}
+.jky-form__title {
+  /* 表单标题样式 */
+}
+/* FormItem 组件样式 */
+.jky-form-item {
+  /* 表单项容器样式 */
+}
+.jky-form-item__title {
+  /* 表单项标题样式（无 label 时） */
+}
+/* Form 组件样式 */
+.jky-form {
+  /* 表单容器样式 */
+}
+.jky-form__title {
+  /* 表单标题样式 */
+}
+/* FormItem 组件样式 */
+.jky-form-item {
+  /* 表单项容器样式 */
+}
+.jky-form-item__title {
+  /* 表单项标题样式（无 label 时） */
+}
 /* Menu 组件样式 - 使用 CSS 变量实现主题化 */
 
 /* 1. 定义 CSS 变量 */
@@ -500,6 +548,19 @@ img {
       --tw-border-style: solid;
       --tw-font-weight: initial;
       --tw-outline-style: solid;
+      --tw-blur: initial;
+      --tw-brightness: initial;
+      --tw-contrast: initial;
+      --tw-grayscale: initial;
+      --tw-hue-rotate: initial;
+      --tw-invert: initial;
+      --tw-opacity: initial;
+      --tw-saturate: initial;
+      --tw-sepia: initial;
+      --tw-drop-shadow: initial;
+      --tw-drop-shadow-color: initial;
+      --tw-drop-shadow-alpha: 100%;
+      --tw-drop-shadow-size: initial;
     }
   }
 }
@@ -512,9 +573,11 @@ img {
       "Courier New", monospace;
     --color-red-500: oklch(63.7% .237 25.331);
     --color-green-500: oklch(72.3% .219 149.579);
+    --color-blue-500: oklch(62.3% .214 259.815);
     --color-blue-600: oklch(54.6% .245 262.881);
     --color-purple-500: oklch(62.7% .265 303.9);
     --color-gray-100: oklch(96.7% .003 264.542);
+    --color-gray-300: oklch(87.2% .01 258.338);
     --color-gray-600: oklch(44.6% .03 256.802);
     --color-white: #fff;
     --spacing: .25rem;
@@ -528,7 +591,9 @@ img {
     --text-xl--line-height: calc(1.75 / 1.25);
     --text-2xl: 1.5rem;
     --text-2xl--line-height: calc(2 / 1.5);
+    --font-weight-medium: 500;
     --font-weight-semibold: 600;
+    --radius-md: .375rem;
     --default-transition-duration: .15s;
     --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
     --default-font-family: var(--font-sans);
@@ -790,6 +855,10 @@ img {
     visibility: collapse;
   }
 
+  .fixed {
+    position: fixed;
+  }
+
   .sticky {
     position: sticky;
   }
@@ -798,10 +867,26 @@ img {
     inset-inline-start: var(--spacing);
   }
 
+  .top-0 {
+    top: calc(var(--spacing) * 0);
+  }
+
   .top-2 {
     top: calc(var(--spacing) * 2);
   }
 
+  .left-0 {
+    left: calc(var(--spacing) * 0);
+  }
+
+  .z-999 {
+    z-index: 999;
+  }
+
+  .mt-4 {
+    margin-top: calc(var(--spacing) * 4);
+  }
+
   .mr-2 {
     margin-right: calc(var(--spacing) * 2);
   }
@@ -1370,6 +1455,10 @@ img {
     width: calc(var(--spacing) * 20);
   }
 
+  .w-fit {
+    width: fit-content;
+  }
+
   .w-fit\\! {
     width: fit-content !important;
   }
@@ -1378,6 +1467,10 @@ img {
     width: 100%;
   }
 
+  .flex-1 {
+    flex: 1;
+  }
+
   .transform {
     transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
   }
@@ -1406,6 +1499,10 @@ img {
     justify-content: space-around;
   }
 
+  .justify-end {
+    justify-content: flex-end;
+  }
+
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
@@ -1426,10 +1523,18 @@ img {
     margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
   }
 
+  .rounded {
+    border-radius: .25rem;
+  }
+
   .rounded-full {
     border-radius: 3.40282e38px;
   }
 
+  .rounded-md {
+    border-radius: var(--radius-md);
+  }
+
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -1439,10 +1544,22 @@ img {
     background-color: var(--my-var);
   }
 
+  .bg-blue-500 {
+    background-color: var(--color-blue-500);
+  }
+
+  .bg-gray-100 {
+    background-color: var(--color-gray-100);
+  }
+
   .bg-gray-100\\! {
     background-color: var(--color-gray-100) !important;
   }
 
+  .bg-gray-300 {
+    background-color: var(--color-gray-300);
+  }
+
   .bg-green-500\\! {
     background-color: var(--color-green-500) !important;
   }
@@ -1455,6 +1572,10 @@ img {
     background-color: var(--color-red-500) !important;
   }
 
+  .bg-white {
+    background-color: var(--color-white);
+  }
+
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
@@ -1463,6 +1584,22 @@ img {
     padding: calc(var(--spacing) * 4);
   }
 
+  .px-4 {
+    padding-inline: calc(var(--spacing) * 4);
+  }
+
+  .py-2 {
+    padding-block: calc(var(--spacing) * 2);
+  }
+
+  .pr-0 {
+    padding-right: calc(var(--spacing) * 0);
+  }
+
+  .pb-0 {
+    padding-bottom: calc(var(--spacing) * 0);
+  }
+
   .text-center {
     text-align: center;
   }
@@ -1492,6 +1629,11 @@ img {
     line-height: var(--tw-leading, var(--text-xl--line-height));
   }
 
+  .font-medium {
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+  }
+
   .font-semibold {
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
@@ -1534,6 +1676,11 @@ img {
     outline-width: 1px;
   }
 
+  .blur {
+    --tw-blur: blur(8px);
+    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
+  }
+
   .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1608,9 +1755,75 @@ img {
   inherits: false;
   initial-value: solid;
 }
+
+@property --tw-blur {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-brightness {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-contrast {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-grayscale {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-hue-rotate {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-invert {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-opacity {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-saturate {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-sepia {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-drop-shadow {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-drop-shadow-color {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-drop-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+
+@property --tw-drop-shadow-size {
+  syntax: "*";
+  inherits: false
+}
 /*$vite$:1*/`;
   document.head.appendChild(__vite_style__);
-  const version$1 = "0.0.37";
+  const version$1 = "0.0.45";
   const INSTALLED_KEY = Symbol("INSTALLED_KEY");
   function createInstaller(components2 = []) {
     const install2 = (app, options) => {
@@ -1636,20 +1849,20 @@ img {
     });
     return main;
   }
-  const _hoisted_1$3 = ["disabled"];
-  const _hoisted_2$2 = {
+  const _hoisted_1$5 = ["disabled"];
+  const _hoisted_2$3 = {
     key: 0,
     class: "jky-button__loading"
   };
-  const _hoisted_3$2 = {
+  const _hoisted_3$3 = {
     key: 0,
     class: "jky-button__icon"
   };
-  const _hoisted_4$2 = {
+  const _hoisted_4$3 = {
     key: 1,
     class: "jky-button__icon"
   };
-  const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValues({}, {
+  const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValues({}, {
     name: "JkyButton"
   }), {
     __name: "Button",
@@ -1682,7 +1895,7 @@ img {
           disabled: __props.disabled || __props.loading,
           onClick: handleClick
         }, [
-          __props.loading ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$2, [..._cache[0] || (_cache[0] = [
+          __props.loading ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$3, [..._cache[0] || (_cache[0] = [
             vue.createElementVNode("svg", {
               class: "loading-spinner",
               viewBox: "0 0 50 50"
@@ -1708,7 +1921,7 @@ img {
               ])
             ], -1)
           ])])) : __props.icon ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-            __props.iconPosition === "prefix" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$2, [
+            __props.iconPosition === "prefix" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$3, [
               vue.renderSlot(_ctx.$slots, "icon", {}, () => [
                 vue.createElementVNode("span", {
                   class: vue.normalizeClass(__props.icon)
@@ -1716,7 +1929,7 @@ img {
               ])
             ])) : vue.createCommentVNode("", true),
             vue.renderSlot(_ctx.$slots, "default"),
-            __props.iconPosition === "suffix" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$2, [
+            __props.iconPosition === "suffix" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$3, [
               vue.renderSlot(_ctx.$slots, "icon", {}, () => [
                 vue.createElementVNode("span", {
                   class: vue.normalizeClass(__props.icon)
@@ -1727,13 +1940,13 @@ img {
             vue.renderSlot(_ctx.$slots, "icon"),
             vue.renderSlot(_ctx.$slots, "default")
           ], 64))
-        ], 10, _hoisted_1$3);
+        ], 10, _hoisted_1$5);
       };
     }
   }));
-  const JkyButton = installWithSFC(_sfc_main$5);
-  const _hoisted_1$2 = { class: "jky-button-nav flex flex-wrap items-center gap-2" };
-  const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValues({}, {
+  const JkyButton = installWithSFC(_sfc_main$8);
+  const _hoisted_1$4 = { class: "jky-button-nav flex flex-wrap items-center gap-2" };
+  const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValues({}, {
     name: "JkyButtonNav"
   }), {
     __name: "ButtonNav",
@@ -1774,7 +1987,7 @@ img {
         }
       }
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(visibleItems.value, (item) => {
             return vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElButton), {
               key: item.value,
@@ -1854,15 +2067,390 @@ img {
       };
     }
   }));
-  const JkyButtonNav = installWithSFC(_sfc_main$4);
-  const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValues({}, {
-    name: "JkyMenu",
+  const JkyButtonNav = installWithSFC(_sfc_main$7);
+  const _hoisted_1$3 = {
+    key: 0,
+    class: "jky-form-item__title mb-2 text-base font-medium"
+  };
+  const _hoisted_2$2 = {
+    key: 0,
+    class: "flex items-center"
+  };
+  const _hoisted_3$2 = {
+    key: 0,
+    class: "mr-2"
+  };
+  const _hoisted_4$2 = {
+    key: 1,
+    class: "ml-2"
+  };
+  const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValues({}, {
+    name: "JkyFormItem",
     inheritAttrs: false
+  }), {
+    __name: "FormItem",
+    props: {
+      field: {},
+      config: {},
+      model: {},
+      readonly: { type: Boolean, default: false },
+      disabled: { type: Boolean, default: false },
+      label: {},
+      labelWidth: {},
+      labelPosition: {},
+      prop: {},
+      required: { type: Boolean },
+      rules: {},
+      error: {},
+      validateStatus: {},
+      for: {},
+      inlineMessage: { type: Boolean },
+      showMessage: { type: Boolean },
+      size: {}
+    },
+    setup(__props) {
+      const props = __props;
+      const componentProps = vue.computed(() => {
+        const configProps = props.config.componentProps;
+        if (!configProps) {
+          return {};
+        }
+        if (typeof configProps === "function") {
+          return configProps({
+            model: props.model,
+            field: props.field,
+            $form: props.model
+          });
+        }
+        return configProps;
+      });
+      const modelValue = vue.computed({
+        get: () => props.model[props.field],
+        set: (_val) => {
+        }
+      });
+      const isHidden = vue.computed(() => {
+        if (typeof props.config.hidden === "function") {
+          return props.config.hidden({
+            model: props.model,
+            field: props.field,
+            $form: props.model
+          });
+        }
+        return props.config.hidden || false;
+      });
+      const spanClass = vue.computed(() => {
+        const span = props.config.span || 12;
+        return `col-span-${span}`;
+      });
+      function renderComponent(type) {
+        var _a, _b, _c;
+        const commonProps = __spreadValues({
+          "modelValue": modelValue.value,
+          "onUpdate:modelValue": (_val) => {
+          },
+          "placeholder": props.config.placeholder,
+          "disabled": props.disabled || props.config.disabled || props.readonly,
+          "clearable": (_a = props.config.clearable) != null ? _a : true
+        }, componentProps.value);
+        switch (type) {
+          case "input":
+            return vue.h(ElementPlus.ElInput, __spreadProps(__spreadValues({}, commonProps), {
+              prefixIcon: props.config.prefixIcon,
+              suffixIcon: props.config.suffixIcon
+            }));
+          case "textarea":
+            return vue.h(ElementPlus.ElInput, __spreadProps(__spreadValues({}, commonProps), {
+              type: "textarea",
+              rows: 4
+            }));
+          case "select": {
+            const options = props.config.options || [];
+            return vue.h(
+              ElementPlus.ElSelect,
+              __spreadProps(__spreadValues({}, commonProps), {
+                multiple: props.config.multiple,
+                filterable: props.config.filterable
+              }),
+              {
+                default: () => options.map(
+                  (option) => vue.h(ElementPlus.ElOption, {
+                    key: option.value,
+                    label: option.label,
+                    value: option.value,
+                    disabled: option.disabled
+                  })
+                )
+              }
+            );
+          }
+          case "datepicker":
+            return vue.h(ElementPlus.ElDatePicker, __spreadProps(__spreadValues({}, commonProps), {
+              type: "date"
+            }));
+          case "datetime-picker":
+            return vue.h(ElementPlus.ElDatePicker, __spreadProps(__spreadValues({}, commonProps), {
+              type: "datetime"
+            }));
+          case "time-picker":
+            return vue.h(ElementPlus.ElTimePicker, __spreadValues({}, commonProps));
+          case "time-select":
+            return vue.h(ElementPlus.ElTimeSelect, __spreadValues({}, commonProps));
+          case "radio-group": {
+            const options = props.config.options || [];
+            return vue.h(
+              ElementPlus.ElRadioGroup,
+              __spreadValues({}, commonProps),
+              {
+                default: () => options.map(
+                  (option) => vue.h(ElementPlus.ElRadio, {
+                    key: option.value,
+                    label: option.value,
+                    disabled: option.disabled
+                  }, {
+                    default: () => option.label
+                  })
+                )
+              }
+            );
+          }
+          case "checkbox-group": {
+            const options = props.config.options || [];
+            return vue.h(
+              ElementPlus.ElCheckboxGroup,
+              __spreadValues({}, commonProps),
+              {
+                default: () => options.map(
+                  (option) => vue.h(ElementPlus.ElCheckbox, {
+                    key: option.value,
+                    label: option.value,
+                    disabled: option.disabled
+                  }, {
+                    default: () => option.label
+                  })
+                )
+              }
+            );
+          }
+          case "switch":
+            return vue.h(ElementPlus.ElSwitch, __spreadValues({}, commonProps));
+          case "slider":
+            return vue.h(ElementPlus.ElSlider, __spreadValues({}, commonProps));
+          case "cascader":
+            return vue.h(ElementPlus.ElCascader, __spreadProps(__spreadValues({}, commonProps), {
+              options: props.config.options
+            }));
+          case "color-picker":
+            return vue.h(ElementPlus.ElColorPicker, __spreadValues({}, commonProps));
+          case "rate":
+            return vue.h(ElementPlus.ElRate, __spreadValues({}, commonProps));
+          case "input-number":
+            return vue.h(ElementPlus.ElInputNumber, __spreadValues({}, commonProps));
+          case "custom":
+            return (_c = (_b = props.config).render) == null ? void 0 : _c.call(_b, commonProps);
+          default:
+            return vue.h(ElementPlus.ElInput, commonProps);
+        }
+      }
+      return (_ctx, _cache) => {
+        var _a, _b, _c, _d, _e;
+        return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+          class: vue.normalizeClass([[
+            __props.config.className,
+            spanClass.value,
+            ((_a = __props.config.responsiveSpan) == null ? void 0 : _a.xs) ? `xs:col-span-${__props.config.responsiveSpan.xs}` : "",
+            ((_b = __props.config.responsiveSpan) == null ? void 0 : _b.sm) ? `sm:col-span-${__props.config.responsiveSpan.sm}` : "",
+            ((_c = __props.config.responsiveSpan) == null ? void 0 : _c.md) ? `md:col-span-${__props.config.responsiveSpan.md}` : "",
+            ((_d = __props.config.responsiveSpan) == null ? void 0 : _d.lg) ? `lg:col-span-${__props.config.responsiveSpan.lg}` : "",
+            ((_e = __props.config.responsiveSpan) == null ? void 0 : _e.xl) ? `xl:col-span-${__props.config.responsiveSpan.xl}` : ""
+          ], "jky-form-item"])
+        }, [
+          __props.config.title && !__props.config.label ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, vue.toDisplayString(__props.config.title), 1)) : (vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElFormItem), vue.mergeProps({
+            key: 1,
+            label: __props.config.label,
+            prop: __props.field,
+            rules: __props.config.rules,
+            required: __props.config.required
+          }, _ctx.$attrs), {
+            default: vue.withCtx(() => [
+              __props.config.prepend || __props.config.append ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$2, [
+                __props.config.prepend ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$2, vue.toDisplayString(__props.config.prepend), 1)) : vue.createCommentVNode("", true),
+                (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(renderComponent(__props.config.type || "input")))),
+                __props.config.append ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$2, vue.toDisplayString(__props.config.append), 1)) : vue.createCommentVNode("", true)
+              ])) : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(renderComponent(__props.config.type || "input")), { key: 1 }))
+            ]),
+            _: 1
+          }, 16, ["label", "prop", "rules", "required"]))
+        ], 2)), [
+          [vue.vShow, !isHidden.value]
+        ]);
+      };
+    }
+  }));
+  const _hoisted_1$2 = {
+    key: 0,
+    class: "jky-form__title mb-4 text-xl font-semibold"
+  };
+  const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValues({}, {
+    name: "JkyForm"
+  }), {
+    __name: "Form",
+    props: /* @__PURE__ */ vue.mergeModels({
+      modelValue: {},
+      items: {},
+      showTitle: { type: Boolean, default: false },
+      title: {},
+      gutter: { default: 0 },
+      defaultSpan: { default: 24 },
+      responsive: { type: Boolean, default: true },
+      className: {},
+      readonly: { type: Boolean },
+      disabled: { type: Boolean },
+      watchDeep: { type: Boolean, default: true },
+      onValidate: {},
+      model: {},
+      rules: {},
+      labelPosition: { default: "right" },
+      requireAsteriskPosition: {},
+      labelWidth: { default: "100" },
+      labelSuffix: {},
+      inline: { type: Boolean },
+      inlineMessage: { type: Boolean },
+      statusIcon: { type: Boolean },
+      showMessage: { type: Boolean },
+      validateOnRuleChange: { type: Boolean },
+      hideRequiredAsterisk: { type: Boolean },
+      scrollToError: { type: Boolean },
+      scrollIntoViewOptions: { type: Boolean },
+      size: { default: "default" }
+    }, {
+      "modelValue": { required: true, default: () => ({}) },
+      "modelModifiers": {}
+    }),
+    emits: /* @__PURE__ */ vue.mergeModels(["change", "validate"], ["update:modelValue"]),
+    setup(__props, { expose: __expose, emit: __emit }) {
+      const props = __props;
+      const emit = __emit;
+      const modelValue = vue.useModel(__props, "modelValue");
+      const formRef = vue.ref();
+      const formClass = vue.computed(() => {
+        return [
+          "jky-form",
+          props.className
+        ].filter(Boolean).join(" ");
+      });
+      vue.watch(
+        () => props.modelValue,
+        (newVal, oldVal) => {
+          if (newVal !== oldVal) {
+            emit("change", __spreadValues({}, newVal));
+          }
+        },
+        { deep: props.watchDeep }
+      );
+      function validate(callback) {
+        return __async(this, null, function* () {
+          var _a;
+          try {
+            yield (_a = formRef.value) == null ? void 0 : _a.validate();
+            emit("validate", { valid: true });
+            callback == null ? void 0 : callback(true, void 0);
+            return true;
+          } catch (error) {
+            emit("validate", { valid: false, fields: error.fields });
+            callback == null ? void 0 : callback(false, error.fields);
+            return false;
+          }
+        });
+      }
+      function resetFields() {
+        var _a;
+        (_a = formRef.value) == null ? void 0 : _a.resetFields();
+      }
+      function clearValidate(props2) {
+        var _a;
+        (_a = formRef.value) == null ? void 0 : _a.clearValidate(props2);
+      }
+      function getFormInstance() {
+        return formRef.value;
+      }
+      __expose({
+        validate,
+        resetFields,
+        clearValidate,
+        getFormInstance
+      });
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", {
+          class: vue.normalizeClass(formClass.value)
+        }, [
+          __props.showTitle && __props.title ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, vue.toDisplayString(__props.title), 1)) : vue.createCommentVNode("", true),
+          vue.createVNode(vue.unref(ElementPlus.ElForm), vue.mergeProps({
+            ref_key: "formRef",
+            ref: formRef,
+            model: modelValue.value,
+            "label-width": __props.labelWidth,
+            "label-position": __props.labelPosition,
+            size: __props.size
+          }, _ctx.$attrs), {
+            default: vue.withCtx(() => [
+              vue.createElementVNode("div", {
+                class: "grid",
+                style: vue.normalizeStyle({
+                  gridTemplateColumns: "repeat(12, minmax(0, 1fr))",
+                  gap: `${__props.gutter}px`
+                })
+              }, [
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.items, (item) => {
+                  return vue.openBlock(), vue.createBlock(_sfc_main$6, {
+                    key: item.field,
+                    field: item.field,
+                    config: item,
+                    model: modelValue.value,
+                    readonly: __props.readonly,
+                    disabled: __props.disabled
+                  }, null, 8, ["field", "config", "model", "readonly", "disabled"]);
+                }), 128))
+              ], 4)
+            ]),
+            _: 1
+          }, 16, ["model", "label-width", "label-position", "size"])
+        ], 2);
+      };
+    }
+  }));
+  const JkyForm = installWithSFC(_sfc_main$5);
+  const _export_sfc = (sfc, props) => {
+    const target = sfc.__vccOpts || sfc;
+    for (const [key, val] of props) {
+      target[key] = val;
+    }
+    return target;
+  };
+  const _sfc_main$4 = {};
+  function _sfc_render(_ctx, _cache) {
+    const _component_el_scrollbar = es.ElScrollbar;
+    const _component_el_aside = es.ElAside;
+    return vue.openBlock(), vue.createBlock(_component_el_aside, { class: "w-fit pr-0 pb-0 h-full" }, {
+      default: vue.withCtx(() => [
+        vue.createVNode(_component_el_scrollbar, { class: "bg-white rounded-md" }, {
+          default: vue.withCtx(() => [
+            vue.renderSlot(_ctx.$slots, "default")
+          ]),
+          _: 3
+        })
+      ]),
+      _: 3
+    });
+  }
+  const Aside = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render]]);
+  const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValues({}, {
+    name: "JkyMenu"
   }), {
     __name: "Menu",
     props: {
+      aside: { type: Boolean, default: false },
       menuData: { default: () => [] },
-      modelValue: {},
       mode: {},
       defaultActive: {},
       defaultOpeneds: {},
@@ -1886,6 +2474,7 @@ img {
       persistent: { type: Boolean }
     },
     setup(__props) {
+      const props = __props;
       function renderMenuItem(item) {
         var _a;
         return vue.h(
@@ -1929,16 +2518,33 @@ img {
         return renderMenuItem(item);
       }
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElMenu), vue.mergeProps({ class: "jky-menu" }, _ctx.$attrs), {
+        return __props.aside ? (vue.openBlock(), vue.createBlock(Aside, { key: 0 }, {
+          default: vue.withCtx(() => [
+            vue.createVNode(vue.unref(ElementPlus.ElMenu), vue.mergeProps({ class: "jky-menu" }, __spreadValues(__spreadValues({}, props), _ctx.$attrs)), {
+              default: vue.withCtx(() => [
+                __props.menuData && __props.menuData.length > 0 ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(__props.menuData, (item) => {
+                  return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(renderMenuNode(item)), {
+                    key: item.index || item.id
+                  });
+                }), 128)) : vue.renderSlot(_ctx.$slots, "default", { key: 1 })
+              ]),
+              _: 3
+            }, 16)
+          ]),
+          _: 3
+        })) : (vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElMenu), vue.mergeProps({
+          key: 1,
+          class: "jky-menu"
+        }, __spreadValues(__spreadValues({}, props), _ctx.$attrs)), {
           default: vue.withCtx(() => [
             __props.menuData && __props.menuData.length > 0 ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(__props.menuData, (item) => {
               return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(renderMenuNode(item)), {
-                key: item.index
+                key: item.index || item.id
               });
             }), 128)) : vue.renderSlot(_ctx.$slots, "default", { key: 1 })
           ]),
           _: 3
-        }, 16);
+        }, 16));
       };
     }
   }));
@@ -1965,7 +2571,8 @@ img {
       elButtonType: {},
       width: { default: 400 },
       trigger: { default: "click" },
-      highlightCurrent: { type: Boolean, default: true }
+      highlightCurrent: { type: Boolean, default: true },
+      placement: { default: "bottom-start" }
     },
     setup(__props) {
       const props = __props;
@@ -1981,8 +2588,7 @@ img {
         var _a;
         return ((_a = __props.menus) == null ? void 0 : _a.length) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
           vue.createVNode(vue.unref(ElementPlus.ElPopover), {
-            title: "菜单",
-            placement: "bottom-start",
+            placement: __props.placement,
             class: "h-full",
             trigger: __props.trigger,
             width: __props.width
@@ -2022,7 +2628,7 @@ img {
               ])
             ]),
             _: 1
-          }, 8, ["trigger", "width"])
+          }, 8, ["placement", "trigger", "width"])
         ])) : vue.createCommentVNode("", true);
       };
     }
@@ -2207,7 +2813,7 @@ img {
                 key: 1,
                 "ref-name": "更多",
                 "ref-icon-class": "icon-[mdi--format-list-bulleted]"
-              }, __props.popover), null, 16)) : vue.createCommentVNode("", true),
+              }, __props.popover, { placement: "bottom" }), null, 16)) : vue.createCommentVNode("", true),
               vue.createVNode(vue.unref(ElementPlus.ElDropdown), {
                 trigger: "hover",
                 onCommand: handleCommand
@@ -2307,7 +2913,8 @@ img {
     JkyButton,
     JkyButtonNav,
     JkyPageHeader,
-    JkyMenu
+    JkyMenu,
+    JkyForm
   ];
   function JkyComponentLibResolver() {
     return {
@@ -2331,6 +2938,7 @@ img {
   exports2.JkyButton = JkyButton;
   exports2.JkyButtonNav = JkyButtonNav;
   exports2.JkyComponentLibResolver = JkyComponentLibResolver;
+  exports2.JkyForm = JkyForm;
   exports2.JkyMenu = JkyMenu;
   exports2.JkyPageHeader = JkyPageHeader;
   exports2.JkySayHello = JkySayHello;