jky-component-lib 0.0.46 → 0.0.48

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"), 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) {
+  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) {
   "use strict";var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
@@ -20,6 +20,18 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
@@ -263,6 +275,12 @@ to {
 .jky-button-nav-dropdown {
   /* 不覆盖任何样式，保持 el-dropdown-menu 默认样式 */
 }
+:root {
+  /* 表单组件间距 */
+  /* --jky-form-item-gap: 12px; */
+}
+
+
 /* Form 组件样式 */
 .jky-form {
   /* 表单容器样式 */
@@ -270,6 +288,8 @@ to {
 .jky-form__title {
   /* 表单标题样式 */
 }
+
+
 /* FormItem 组件样式 */
 .jky-form-item {
   /* 表单项容器样式 */
@@ -277,6 +297,12 @@ to {
 .jky-form-item__title {
   /* 表单项标题样式（无 label 时） */
 }
+:root {
+  /* 表单组件间距 */
+  /* --jky-form-item-gap: 12px; */
+}
+
+
 /* Form 组件样式 */
 .jky-form {
   /* 表单容器样式 */
@@ -284,6 +310,8 @@ to {
 .jky-form__title {
   /* 表单标题样式 */
 }
+
+
 /* FormItem 组件样式 */
 .jky-form-item {
   /* 表单项容器样式 */
@@ -539,6 +567,9 @@ img {
 @layer properties {
   @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
     *, :before, :after, ::backdrop {
+      --tw-translate-x: 0;
+      --tw-translate-y: 0;
+      --tw-translate-z: 0;
       --tw-rotate-x: initial;
       --tw-rotate-y: initial;
       --tw-rotate-z: initial;
@@ -561,6 +592,20 @@ img {
       --tw-drop-shadow-color: initial;
       --tw-drop-shadow-alpha: 100%;
       --tw-drop-shadow-size: initial;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
     }
   }
 }
@@ -572,12 +617,28 @@ img {
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
     --color-red-500: oklch(63.7% .237 25.331);
+    --color-yellow-50: oklch(98.7% .026 102.212);
+    --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-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);
+    --color-blue-50: oklch(97% .014 254.604);
     --color-blue-500: oklch(62.3% .214 259.815);
     --color-blue-600: oklch(54.6% .245 262.881);
+    --color-blue-800: oklch(42.4% .199 265.638);
+    --color-indigo-50: oklch(96.2% .018 272.314);
+    --color-indigo-600: oklch(51.1% .262 276.966);
+    --color-indigo-800: oklch(39.8% .195 277.366);
+    --color-purple-50: oklch(97.7% .014 308.299);
     --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-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-white: #fff;
     --spacing: .25rem;
@@ -593,7 +654,9 @@ img {
     --text-2xl--line-height: calc(2 / 1.5);
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
+    --font-weight-bold: 700;
     --radius-md: .375rem;
+    --radius-lg: .5rem;
     --default-transition-duration: .15s;
     --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
     --default-font-family: var(--font-sans);
@@ -855,10 +918,18 @@ img {
     visibility: collapse;
   }
 
+  .absolute {
+    position: absolute;
+  }
+
   .fixed {
     position: fixed;
   }
 
+  .relative {
+    position: relative;
+  }
+
   .sticky {
     position: sticky;
   }
@@ -871,10 +942,18 @@ img {
     top: calc(var(--spacing) * 0);
   }
 
+  .top-1\\/2 {
+    top: 50%;
+  }
+
   .top-2 {
     top: calc(var(--spacing) * 2);
   }
 
+  .right-3 {
+    right: calc(var(--spacing) * 3);
+  }
+
   .left-0 {
     left: calc(var(--spacing) * 0);
   }
@@ -883,10 +962,42 @@ img {
     z-index: 999;
   }
 
+  .col-span-4 {
+    grid-column: span 4 / span 4;
+  }
+
+  .col-span-6 {
+    grid-column: span 6 / span 6;
+  }
+
+  .col-span-8 {
+    grid-column: span 8 / span 8;
+  }
+
+  .col-span-12 {
+    grid-column: span 12 / span 12;
+  }
+
+  .col-span-24 {
+    grid-column: span 24 / span 24;
+  }
+
+  .mt-1 {
+    margin-top: calc(var(--spacing) * 1);
+  }
+
+  .mt-2 {
+    margin-top: calc(var(--spacing) * 2);
+  }
+
   .mt-4 {
     margin-top: calc(var(--spacing) * 4);
   }
 
+  .mt-6 {
+    margin-top: calc(var(--spacing) * 6);
+  }
+
   .mr-2 {
     margin-right: calc(var(--spacing) * 2);
   }
@@ -1471,6 +1582,11 @@ img {
     flex: 1;
   }
 
+  .-translate-y-1\\/2 {
+    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
   .transform {
     transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
   }
@@ -1479,6 +1595,14 @@ img {
     cursor: pointer;
   }
 
+  .list-inside {
+    list-style-position: inside;
+  }
+
+  .list-disc {
+    list-style-type: disc;
+  }
+
   .grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
@@ -1523,14 +1647,18 @@ img {
     margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
   }
 
-  .rounded {
-    border-radius: .25rem;
+  .self-center {
+    align-self: center;
   }
 
   .rounded-full {
     border-radius: 3.40282e38px;
   }
 
+  .rounded-lg {
+    border-radius: var(--radius-lg);
+  }
+
   .rounded-md {
     border-radius: var(--radius-md);
   }
@@ -1540,12 +1668,16 @@ img {
     border-width: 1px;
   }
 
+  .border-gray-300 {
+    border-color: var(--color-gray-300);
+  }
+
   .bg-\\(--my-var\\), .bg-\\[var\\(--my-var\\)\\] {
     background-color: var(--my-var);
   }
 
-  .bg-blue-500 {
-    background-color: var(--color-blue-500);
+  .bg-blue-50 {
+    background-color: var(--color-blue-50);
   }
 
   .bg-gray-100 {
@@ -1556,14 +1688,22 @@ img {
     background-color: var(--color-gray-100) !important;
   }
 
-  .bg-gray-300 {
-    background-color: var(--color-gray-300);
+  .bg-green-50 {
+    background-color: var(--color-green-50);
   }
 
   .bg-green-500\\! {
     background-color: var(--color-green-500) !important;
   }
 
+  .bg-indigo-50 {
+    background-color: var(--color-indigo-50);
+  }
+
+  .bg-purple-50 {
+    background-color: var(--color-purple-50);
+  }
+
   .bg-purple-500\\! {
     background-color: var(--color-purple-500) !important;
   }
@@ -1576,6 +1716,10 @@ img {
     background-color: var(--color-white);
   }
 
+  .bg-yellow-50 {
+    background-color: var(--color-yellow-50);
+  }
+
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
@@ -1629,6 +1773,11 @@ img {
     line-height: var(--tw-leading, var(--text-xl--line-height));
   }
 
+  .font-bold {
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
+
   .font-medium {
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
@@ -1643,10 +1792,26 @@ img {
     color: #fff;
   }
 
+  .text-blue-500 {
+    color: var(--color-blue-500);
+  }
+
   .text-blue-600 {
     color: var(--color-blue-600);
   }
 
+  .text-blue-800 {
+    color: var(--color-blue-800);
+  }
+
+  .text-gray-400 {
+    color: var(--color-gray-400);
+  }
+
+  .text-gray-500 {
+    color: var(--color-gray-500);
+  }
+
   .text-gray-600 {
     color: var(--color-gray-600);
   }
@@ -1655,6 +1820,30 @@ img {
     color: var(--color-gray-600) !important;
   }
 
+  .text-green-600 {
+    color: var(--color-green-600);
+  }
+
+  .text-green-800 {
+    color: var(--color-green-800);
+  }
+
+  .text-indigo-600 {
+    color: var(--color-indigo-600);
+  }
+
+  .text-indigo-800 {
+    color: var(--color-indigo-800);
+  }
+
+  .text-purple-600 {
+    color: var(--color-purple-600);
+  }
+
+  .text-purple-800 {
+    color: var(--color-purple-800);
+  }
+
   .text-red-500 {
     color: var(--color-red-500);
   }
@@ -1667,6 +1856,14 @@ img {
     color: var(--color-white) !important;
   }
 
+  .text-yellow-600 {
+    color: var(--color-yellow-600);
+  }
+
+  .text-yellow-800 {
+    color: var(--color-yellow-800);
+  }
+
   .lowercase {
     text-transform: lowercase;
   }
@@ -1693,7 +1890,32 @@ img {
     }
   }
 
+  .focus\\:border-transparent:focus {
+    border-color: #0000;
+  }
+
+  .focus\\:ring-2:focus {
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .focus\\:ring-blue-500:focus {
+    --tw-ring-color: var(--color-blue-500);
+  }
+
   @media (min-width: 48rem) {
+    .md\\:col-span-6 {
+      grid-column: span 6 / span 6;
+    }
+
+    .md\\:col-span-8 {
+      grid-column: span 8 / span 8;
+    }
+
+    .md\\:col-span-12 {
+      grid-column: span 12 / span 12;
+    }
+
     .md\\:block {
       display: block;
     }
@@ -1706,6 +1928,38 @@ img {
       display: none;
     }
   }
+
+  @media (min-width: 64rem) {
+    .lg\\:col-span-4 {
+      grid-column: span 4 / span 4;
+    }
+
+    .lg\\:col-span-6 {
+      grid-column: span 6 / span 6;
+    }
+
+    .lg\\:col-span-8 {
+      grid-column: span 8 / span 8;
+    }
+  }
+}
+
+@property --tw-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --tw-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --tw-translate-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
 }
 
 @property --tw-rotate-x {
@@ -1821,9 +2075,88 @@ img {
   syntax: "*";
   inherits: false
 }
+
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
 /*$vite$:1*/`;
   document.head.appendChild(__vite_style__);
-  const version$1 = "0.0.46";
+  const version$1 = "0.0.48";
   const INSTALLED_KEY = Symbol("INSTALLED_KEY");
   function createInstaller(components2 = []) {
     const install2 = (app, options) => {
@@ -1850,7 +2183,7 @@ img {
     return main;
   }
   const _hoisted_1$5 = ["disabled"];
-  const _hoisted_2$3 = {
+  const _hoisted_2$4 = {
     key: 0,
     class: "jky-button__loading"
   };
@@ -1895,7 +2228,7 @@ img {
           disabled: __props.disabled || __props.loading,
           onClick: handleClick
         }, [
-          __props.loading ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$3, [..._cache[0] || (_cache[0] = [
+          __props.loading ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$4, [..._cache[0] || (_cache[0] = [
             vue.createElementVNode("svg", {
               class: "loading-spinner",
               viewBox: "0 0 50 50"
@@ -2070,17 +2403,18 @@ img {
   const JkyButtonNav = installWithSFC(_sfc_main$7);
   const _hoisted_1$3 = {
     key: 0,
-    class: "jky-form-item__title mb-2 text-base font-medium"
+    style: { "display": "none" }
   };
-  const _hoisted_2$2 = {
+  const _hoisted_2$3 = { class: "jky-form-item__title mb-2 text-base font-medium" };
+  const _hoisted_3$2 = {
     key: 0,
     class: "flex items-center"
   };
-  const _hoisted_3$2 = {
+  const _hoisted_4$2 = {
     key: 0,
     class: "mr-2"
   };
-  const _hoisted_4$2 = {
+  const _hoisted_5$2 = {
     key: 1,
     class: "ml-2"
   };
@@ -2126,7 +2460,8 @@ img {
       });
       const modelValue = vue.computed({
         get: () => props.model[props.field],
-        set: (_val) => {
+        set: (val) => {
+          props.model[props.field] = val;
         }
       });
       const isHidden = vue.computed(() => {
@@ -2139,20 +2474,71 @@ img {
         }
         return props.config.hidden || false;
       });
-      const spanClass = vue.computed(() => {
-        const span = props.config.span || 12;
-        return `col-span-${span}`;
+      const formItemProps = vue.computed(() => {
+        const config = props.config;
+        const _a = config, {
+          field,
+          type,
+          title,
+          placeholder,
+          componentProps: componentProps2,
+          hidden,
+          className,
+          customStyle,
+          children,
+          render,
+          prepend,
+          append,
+          prefixIcon,
+          suffixIcon,
+          clearable,
+          filterable,
+          multiple,
+          options,
+          formatValue,
+          formatModel,
+          noLabelMargin,
+          titleRender
+        } = _a, rest = __objRest(_a, [
+          "field",
+          "type",
+          "title",
+          "placeholder",
+          "componentProps",
+          "hidden",
+          "className",
+          "customStyle",
+          "children",
+          "render",
+          "prepend",
+          "append",
+          "prefixIcon",
+          "suffixIcon",
+          "clearable",
+          "filterable",
+          "multiple",
+          "options",
+          "formatValue",
+          "formatModel",
+          "noLabelMargin",
+          "titleRender"
+        ]);
+        return rest;
       });
       function renderComponent(type) {
         var _a, _b, _c;
         const commonProps = __spreadValues({
           "modelValue": modelValue.value,
-          "onUpdate:modelValue": (_val) => {
+          "onUpdate:modelValue": (val) => {
+            props.model[props.field] = val;
           },
           "placeholder": props.config.placeholder,
-          "disabled": props.disabled || props.config.disabled || props.readonly,
+          "disabled": props.disabled,
           "clearable": (_a = props.config.clearable) != null ? _a : true
         }, componentProps.value);
+        const inputNumberProps = type === "input-number" ? __spreadProps(__spreadValues({}, commonProps), {
+          modelValue: commonProps.modelValue === "" ? null : commonProps.modelValue
+        }) : commonProps;
         switch (type) {
           case "input":
             return vue.h(ElementPlus.ElInput, __spreadProps(__spreadValues({}, commonProps), {
@@ -2205,7 +2591,7 @@ img {
                 default: () => options.map(
                   (option) => vue.h(ElementPlus.ElRadio, {
                     key: option.value,
-                    label: option.value,
+                    value: option.value,
                     disabled: option.disabled
                   }, {
                     default: () => option.label
@@ -2216,14 +2602,17 @@ img {
           }
           case "checkbox-group": {
             const options = props.config.options || [];
+            const arrayModelValue = Array.isArray(modelValue.value) ? modelValue.value : [];
             return vue.h(
               ElementPlus.ElCheckboxGroup,
-              __spreadValues({}, commonProps),
+              __spreadProps(__spreadValues({}, commonProps), {
+                modelValue: arrayModelValue
+              }),
               {
                 default: () => options.map(
                   (option) => vue.h(ElementPlus.ElCheckbox, {
                     key: option.value,
-                    label: option.value,
+                    value: option.value,
                     disabled: option.disabled
                   }, {
                     default: () => option.label
@@ -2245,7 +2634,7 @@ img {
           case "rate":
             return vue.h(ElementPlus.ElRate, __spreadValues({}, commonProps));
           case "input-number":
-            return vue.h(ElementPlus.ElInputNumber, __spreadValues({}, commonProps));
+            return vue.h(ElementPlus.ElInputNumber, inputNumberProps);
           case "custom":
             return (_c = (_b = props.config).render) == null ? void 0 : _c.call(_b, commonProps);
           default:
@@ -2253,37 +2642,38 @@ img {
         }
       }
       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 }))
+        return isHidden.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3)) : __props.config.title && !__props.config.label ? (vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElFormItem), vue.mergeProps({
+          key: 1,
+          prop: __props.field
+        }, __spreadValues(__spreadValues({}, formItemProps.value), _ctx.$attrs), {
+          class: ["jky-form-item", [__props.config.className]],
+          style: [__props.config.customStyle]
+        }), {
+          default: vue.withCtx(() => [
+            vue.createElementVNode("div", _hoisted_2$3, [
+              __props.config.titleRender ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(__props.config.titleRender({ model: modelValue.value, field: __props.field })), { key: 0 })) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+                vue.createTextVNode(vue.toDisplayString(__props.config.title), 1)
+              ], 64))
             ]),
-            _: 1
-          }, 16, ["label", "prop", "rules", "required"]))
-        ], 2)), [
-          [vue.vShow, !isHidden.value]
-        ]);
+            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(renderComponent(__props.config.type || "input"))))
+          ]),
+          _: 1
+        }, 16, ["prop", "class", "style"])) : (vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElFormItem), vue.mergeProps({
+          key: 2,
+          label: __props.config.label,
+          prop: __props.field
+        }, __spreadValues(__spreadValues({}, formItemProps.value), _ctx.$attrs), {
+          class: ["jky-form-item", [__props.config.className]]
+        }), {
+          default: vue.withCtx(() => [
+            __props.config.prepend || __props.config.append ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$2, [
+              __props.config.prepend ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$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_5$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", "class"]));
       };
     }
   }));
@@ -2291,6 +2681,10 @@ img {
     key: 0,
     class: "jky-form__title mb-4 text-xl font-semibold"
   };
+  const _hoisted_2$2 = {
+    key: 1,
+    class: "jky-form__footer mt-6 flex justify-end gap-2"
+  };
   const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValues({}, {
     name: "JkyForm"
   }), {
@@ -2307,7 +2701,14 @@ img {
       readonly: { type: Boolean },
       disabled: { type: Boolean },
       watchDeep: { type: Boolean, default: true },
+      showFooter: { type: Boolean, default: false },
+      submitText: { default: "提交" },
+      cancelText: { default: "取消" },
+      submitDisabled: { type: Boolean },
+      cancelDisabled: { type: Boolean },
       onValidate: {},
+      onSubmit: {},
+      onReset: {},
       model: {},
       rules: {},
       labelPosition: { default: "right" },
@@ -2327,7 +2728,7 @@ img {
       "modelValue": { required: true, default: () => ({}) },
       "modelModifiers": {}
     }),
-    emits: /* @__PURE__ */ vue.mergeModels(["change", "validate"], ["update:modelValue"]),
+    emits: /* @__PURE__ */ vue.mergeModels(["change", "validate", "submit", "reset"], ["update:modelValue"]),
     setup(__props, { expose: __expose, emit: __emit }) {
       const props = __props;
       const emit = __emit;
@@ -2364,8 +2765,10 @@ img {
         });
       }
       function resetFields() {
-        var _a;
+        var _a, _b;
         (_a = formRef.value) == null ? void 0 : _a.resetFields();
+        emit("reset");
+        (_b = props.onReset) == null ? void 0 : _b.call(props);
       }
       function clearValidate(props2) {
         var _a;
@@ -2374,11 +2777,27 @@ img {
       function getFormInstance() {
         return formRef.value;
       }
+      function handleSubmit() {
+        return __async(this, null, function* () {
+          var _a, _b;
+          try {
+            yield (_a = formRef.value) == null ? void 0 : _a.validate();
+            emit("submit", __spreadValues({}, modelValue.value));
+            (_b = props.onSubmit) == null ? void 0 : _b.call(props, __spreadValues({}, modelValue.value));
+          } catch (error) {
+            emit("validate", { valid: false, fields: error.fields });
+          }
+        });
+      }
+      function handleCancel() {
+        resetFields();
+      }
       __expose({
         validate,
         resetFields,
         clearValidate,
-        getFormInstance
+        getFormInstance,
+        formRef
       });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
@@ -2394,56 +2813,66 @@ img {
             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)
+              (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))
             ]),
             _: 1
-          }, 16, ["model", "label-width", "label-position", "size"])
+          }, 16, ["model", "label-width", "label-position", "size"]),
+          props.showFooter ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$2, [
+            vue.createVNode(vue.unref(ElementPlus.ElButton), {
+              disabled: __props.cancelDisabled || __props.disabled,
+              onClick: handleCancel
+            }, {
+              default: vue.withCtx(() => [
+                vue.createTextVNode(vue.toDisplayString(__props.cancelText), 1)
+              ]),
+              _: 1
+            }, 8, ["disabled"]),
+            vue.createVNode(vue.unref(ElementPlus.ElButton), {
+              type: "primary",
+              disabled: __props.submitDisabled || __props.disabled,
+              loading: false,
+              onClick: handleSubmit
+            }, {
+              default: vue.withCtx(() => [
+                vue.createTextVNode(vue.toDisplayString(__props.submitText), 1)
+              ]),
+              _: 1
+            }, 8, ["disabled"])
+          ])) : vue.createCommentVNode("", true)
         ], 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" }, {
+  const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValues({}, {
+    name: "JkyAside"
+  }), {
+    __name: "Aside",
+    setup(__props) {
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElAside), { class: "w-fit pr-0 pb-0 h-full" }, {
           default: vue.withCtx(() => [
-            vue.renderSlot(_ctx.$slots, "default")
+            vue.createVNode(vue.unref(ElementPlus.ElScrollbar), { class: "bg-white rounded-md" }, {
+              default: vue.withCtx(() => [
+                vue.renderSlot(_ctx.$slots, "default")
+              ]),
+              _: 3
+            })
           ]),
           _: 3
-        })
-      ]),
-      _: 3
-    });
-  }
-  const Aside = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render]]);
+        });
+      };
+    }
+  }));
   const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValues({}, {
     name: "JkyMenu"
   }), {
@@ -2518,11 +2947,11 @@ img {
         return renderMenuItem(item);
       }
       return (_ctx, _cache) => {
-        return __props.aside ? (vue.openBlock(), vue.createBlock(Aside, { key: 0 }, {
+        return props.aside ? (vue.openBlock(), vue.createBlock(_sfc_main$4, { 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) => {
+                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
                   });
@@ -2537,7 +2966,7 @@ img {
           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) => {
+            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
               });