jky-component-lib 0.0.48 → 0.0.53

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("@codemirror/lang-css"), require("@codemirror/lang-javascript"), require("@codemirror/lang-json"), require("@codemirror/state"), require("@codemirror/theme-one-dark"), require("@codemirror/view"), require("codemirror")) : typeof define === "function" && define.amd ? define(["exports", "vue", "element-plus", "@codemirror/lang-css", "@codemirror/lang-javascript", "@codemirror/lang-json", "@codemirror/state", "@codemirror/theme-one-dark", "@codemirror/view", "codemirror"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.JkyComponentLib = {}, global.Vue, global.ElementPlus, global.langCss, global.langJavascript, global.langJson, global.state, global.themeOneDark, global.view, global.codemirror));
+})(this, (function(exports2, vue, ElementPlus, langCss, langJavascript, langJson, state, themeOneDark, view, codemirror) {
   "use strict";var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
@@ -275,9 +275,56 @@ to {
 .jky-button-nav-dropdown {
   /* 不覆盖任何样式，保持 el-dropdown-menu 默认样式 */
 }
+:root {
+  /* CodeMirror 编辑器基础样式变量 */
+  --j-code-mirror-border-color: #dcdfe6;
+  --j-code-mirror-border-radius: 4px;
+  --j-code-mirror-height: 400px;
+}
+.j-code-mirror-editor {
+  width: 100%;
+  height: var(--j-code-mirror-height);
+  border: 1px solid var(--j-code-mirror-border-color);
+  border-radius: var(--j-code-mirror-border-radius);
+  overflow: hidden;
+}
+.code-mirror-container {
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+}
+
+/* CodeMirror 基础样式覆盖 */
+.code-mirror-container .cm-editor {
+  height: 100%;
+}
+.code-mirror-container .cm-scroller {
+  overflow: auto;
+  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+  font-size: 14px;
+  line-height: 1.5;
+}
+.code-mirror-container .cm-gutters {
+  background-color: #f5f7fa;
+  border-right: 1px solid #e4e7ed;
+  color: #909399;
+}
+
+/* 暗黑模式支持 */
+html.dark .j-code-mirror-editor {
+  border-color: #4c4d4f;
+}
+html.dark .code-mirror-container .cm-gutters {
+  background-color: #2c2d2d;
+  border-color: #4c4d4f;
+  color: #909399;
+}
 :root {
   /* 表单组件间距 */
   /* --jky-form-item-gap: 12px; */
+  --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);
 }
 
 
@@ -294,12 +341,23 @@ to {
 .jky-form-item {
   /* 表单项容器样式 */
 }
+.jky-form-item--no-label {
+  /* 表单项标题样式（无 label 时） */
+  /* border-left: var(--jky-form-item-border-width) solid var(--jky-form-item-border-color); */
+  /* background-color: var(--jky-form-item-bg-color); */
+  /* padding-left: var(--jky-form-item-border-width); */
+}
 .jky-form-item__title {
   /* 表单项标题样式（无 label 时） */
 }
+.jky-form-item__title--no-label {
+}
 :root {
   /* 表单组件间距 */
   /* --jky-form-item-gap: 12px; */
+  --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);
 }
 
 
@@ -316,9 +374,17 @@ to {
 .jky-form-item {
   /* 表单项容器样式 */
 }
+.jky-form-item--no-label {
+  /* 表单项标题样式（无 label 时） */
+  /* border-left: var(--jky-form-item-border-width) solid var(--jky-form-item-border-color); */
+  /* background-color: var(--jky-form-item-bg-color); */
+  /* padding-left: var(--jky-form-item-border-width); */
+}
 .jky-form-item__title {
   /* 表单项标题样式（无 label 时） */
 }
+.jky-form-item__title--no-label {
+}
 /* Menu 组件样式 - 使用 CSS 变量实现主题化 */
 
 /* 1. 定义 CSS 变量 */
@@ -642,6 +708,8 @@ img {
     --color-gray-600: oklch(44.6% .03 256.802);
     --color-white: #fff;
     --spacing: .25rem;
+    --text-xs: .75rem;
+    --text-xs--line-height: calc(1 / .75);
     --text-sm: .875rem;
     --text-sm--line-height: calc(1.25 / .875);
     --text-base: 1rem;
@@ -930,6 +998,10 @@ img {
     position: relative;
   }
 
+  .static {
+    position: static;
+  }
+
   .sticky {
     position: sticky;
   }
@@ -938,6 +1010,10 @@ img {
     inset-inline-start: var(--spacing);
   }
 
+  .end {
+    inset-inline-end: var(--spacing);
+  }
+
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
@@ -982,6 +1058,40 @@ img {
     grid-column: span 24 / span 24;
   }
 
+  .container {
+    width: 100%;
+  }
+
+  @media (min-width: 40rem) {
+    .container {
+      max-width: 40rem;
+    }
+  }
+
+  @media (min-width: 48rem) {
+    .container {
+      max-width: 48rem;
+    }
+  }
+
+  @media (min-width: 64rem) {
+    .container {
+      max-width: 64rem;
+    }
+  }
+
+  @media (min-width: 80rem) {
+    .container {
+      max-width: 80rem;
+    }
+  }
+
+  @media (min-width: 96rem) {
+    .container {
+      max-width: 96rem;
+    }
+  }
+
   .mt-1 {
     margin-top: calc(var(--spacing) * 1);
   }
@@ -1566,6 +1676,10 @@ img {
     width: calc(var(--spacing) * 20);
   }
 
+  .w-100 {
+    width: calc(var(--spacing) * 100);
+  }
+
   .w-fit {
     width: fit-content;
   }
@@ -1578,6 +1692,10 @@ img {
     width: 100%;
   }
 
+  .w-full\\! {
+    width: 100% !important;
+  }
+
   .flex-1 {
     flex: 1;
   }
@@ -1651,6 +1769,10 @@ img {
     align-self: center;
   }
 
+  .rounded {
+    border-radius: .25rem;
+  }
+
   .rounded-full {
     border-radius: 3.40282e38px;
   }
@@ -1668,10 +1790,74 @@ img {
     border-width: 1px;
   }
 
+  .border-l-4 {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 4px;
+  }
+
+  .border-solid {
+    --tw-border-style: solid;
+    border-style: solid;
+  }
+
   .border-gray-300 {
     border-color: var(--color-gray-300);
   }
 
+  .border-l-\\(--el-color-primary\\) {
+    border-left-color: var(--el-color-primary);
+  }
+
+  .bg-\\(--el-color-error\\)\\/10 {
+    background-color: var(--el-color-error);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-\\(--el-color-error\\)\\/10 {
+      background-color: color-mix(in oklab, var(--el-color-error) 10%, transparent);
+    }
+  }
+
+  .bg-\\(--el-color-info\\)\\/10 {
+    background-color: var(--el-color-info);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-\\(--el-color-info\\)\\/10 {
+      background-color: color-mix(in oklab, var(--el-color-info) 10%, transparent);
+    }
+  }
+
+  .bg-\\(--el-color-primary\\)\\/50 {
+    background-color: var(--el-color-primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-\\(--el-color-primary\\)\\/50 {
+      background-color: color-mix(in oklab, var(--el-color-primary) 50%, transparent);
+    }
+  }
+
+  .bg-\\(--el-color-success\\)\\/10 {
+    background-color: var(--el-color-success);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-\\(--el-color-success\\)\\/10 {
+      background-color: color-mix(in oklab, var(--el-color-success) 10%, transparent);
+    }
+  }
+
+  .bg-\\(--el-color-warning\\)\\/10 {
+    background-color: var(--el-color-warning);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-\\(--el-color-warning\\)\\/10 {
+      background-color: color-mix(in oklab, var(--el-color-warning) 10%, transparent);
+    }
+  }
+
   .bg-\\(--my-var\\), .bg-\\[var\\(--my-var\\)\\] {
     background-color: var(--my-var);
   }
@@ -1728,10 +1914,18 @@ img {
     padding: calc(var(--spacing) * 4);
   }
 
+  .px-2 {
+    padding-inline: calc(var(--spacing) * 2);
+  }
+
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
 
+  .py-1\\.5 {
+    padding-block: calc(var(--spacing) * 1.5);
+  }
+
   .py-2 {
     padding-block: calc(var(--spacing) * 2);
   }
@@ -1744,6 +1938,10 @@ img {
     padding-bottom: calc(var(--spacing) * 0);
   }
 
+  .pl-1\\.5 {
+    padding-left: calc(var(--spacing) * 1.5);
+  }
+
   .text-center {
     text-align: center;
   }
@@ -1773,6 +1971,11 @@ img {
     line-height: var(--tw-leading, var(--text-xl--line-height));
   }
 
+  .text-xs {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
+
   .font-bold {
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
@@ -1788,6 +1991,22 @@ img {
     font-weight: var(--font-weight-semibold);
   }
 
+  .text-\\(--el-color-error\\) {
+    color: var(--el-color-error);
+  }
+
+  .text-\\(--el-color-info\\) {
+    color: var(--el-color-info);
+  }
+
+  .text-\\(--el-color-success\\) {
+    color: var(--el-color-success);
+  }
+
+  .text-\\(--el-color-warning\\) {
+    color: var(--el-color-warning);
+  }
+
   .text-\\[white\\] {
     color: #fff;
   }
@@ -2156,7 +2375,7 @@ img {
 }
 /*$vite$:1*/`;
   document.head.appendChild(__vite_style__);
-  const version$1 = "0.0.48";
+  const version$1 = "0.0.53";
   const INSTALLED_KEY = Symbol("INSTALLED_KEY");
   function createInstaller(components2 = []) {
     const install2 = (app, options) => {
@@ -2195,7 +2414,7 @@ img {
     key: 1,
     class: "jky-button__icon"
   };
-  const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValues({}, {
+  const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValues({}, {
     name: "JkyButton"
   }), {
     __name: "Button",
@@ -2277,9 +2496,9 @@ img {
       };
     }
   }));
-  const JkyButton = installWithSFC(_sfc_main$8);
+  const JkyButton = installWithSFC(_sfc_main$9);
   const _hoisted_1$4 = { class: "jky-button-nav flex flex-wrap items-center gap-2" };
-  const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValues({}, {
+  const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValues({}, {
     name: "JkyButtonNav"
   }), {
     __name: "ButtonNav",
@@ -2400,21 +2619,247 @@ img {
       };
     }
   }));
-  const JkyButtonNav = installWithSFC(_sfc_main$7);
+  const JkyButtonNav = installWithSFC(_sfc_main$8);
+  const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValues({}, {
+    name: "JkyCodeMirrorEditor"
+  }), {
+    __name: "CodeMirrorEditor",
+    props: {
+      modelValue: { default: "" },
+      height: { default: "400px" },
+      disabled: { type: Boolean, default: false },
+      readonly: { type: Boolean, default: false },
+      language: { default: "javascript" },
+      theme: { default: "oneDark" },
+      lineNumbers: { type: Boolean, default: true },
+      lineWrapping: { type: Boolean, default: false }
+    },
+    emits: ["update:modelValue", "change"],
+    setup(__props, { expose: __expose, emit: __emit }) {
+      var _a;
+      const props = __props;
+      const emit = __emit;
+      const editorRef = vue.ref();
+      let editorView = null;
+      let innerValue = (_a = props.modelValue) != null ? _a : "";
+      function getLanguageExtension(language) {
+        switch (language) {
+          case "typescript":
+          case "javascript":
+            return langJavascript.javascript({
+              jsx: true,
+              typescript: language === "typescript"
+            });
+          case "json":
+            return langJson.json();
+          case "css":
+            return langCss.css();
+          default:
+            return langJavascript.javascript();
+        }
+      }
+      function initializeEditor() {
+        if (!editorRef.value)
+          return;
+        const extensions = [
+          codemirror.basicSetup,
+          getLanguageExtension(props.language),
+          view.EditorView.updateListener.of((update) => {
+            if (update.docChanged) {
+              const newValue = update.state.doc.toString();
+              innerValue = newValue;
+              emit("change", newValue);
+              emit("update:modelValue", newValue);
+            }
+          }),
+          view.EditorView.editable.of(!props.disabled && !props.readonly),
+          state.EditorState.readOnly.of(props.readonly)
+        ];
+        if (props.theme === "oneDark") {
+          extensions.push(themeOneDark.oneDark);
+        }
+        if (!props.lineNumbers) {
+          extensions.push(view.lineNumbers());
+        }
+        if (props.lineWrapping) {
+          extensions.push(view.EditorView.lineWrapping);
+        }
+        try {
+          editorView = new view.EditorView({
+            state: state.EditorState.create({
+              doc: innerValue,
+              extensions
+            }),
+            parent: editorRef.value
+          });
+        } catch (error) {
+          console.error("Failed to initialize CodeMirror Editor:", error);
+        }
+      }
+      vue.watch(() => props.modelValue, (newValue) => {
+        if (newValue !== innerValue && editorView) {
+          const currentContent = editorView.state.doc.toString();
+          if (currentContent !== newValue) {
+            editorView.dispatch({
+              changes: {
+                from: 0,
+                to: currentContent.length,
+                insert: newValue
+              }
+            });
+            innerValue = newValue;
+          }
+        }
+      });
+      vue.watch(() => props.language, () => {
+        if (editorView) {
+          const currentValue = editorView.state.doc.toString();
+          editorView.destroy();
+          innerValue = currentValue;
+          initializeEditor();
+        }
+      });
+      vue.watch([() => props.disabled, () => props.readonly], () => {
+        if (editorView) {
+          const currentValue = editorView.state.doc.toString();
+          editorView.destroy();
+          innerValue = currentValue;
+          initializeEditor();
+        }
+      });
+      vue.onMounted(() => {
+        initializeEditor();
+      });
+      vue.onUnmounted(() => {
+        if (editorView) {
+          editorView.destroy();
+          editorView = null;
+        }
+      });
+      __expose({
+        getEditor: () => editorView,
+        getContent: () => {
+          var _a2;
+          return (_a2 = editorView == null ? void 0 : editorView.state.doc.toString()) != null ? _a2 : "";
+        },
+        setContent: (content) => {
+          if (editorView) {
+            editorView.dispatch({
+              changes: {
+                from: 0,
+                to: editorView.state.doc.length,
+                insert: content
+              }
+            });
+          }
+        }
+      });
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", {
+          class: "j-code-mirror-editor",
+          style: vue.normalizeStyle({ height: __props.height })
+        }, [
+          vue.createElementVNode("div", {
+            ref_key: "editorRef",
+            ref: editorRef,
+            class: "code-mirror-container"
+          }, null, 512)
+        ], 4);
+      };
+    }
+  }));
+  const JkyCodeMirrorEditor = installWithSFC(_sfc_main$7);
+  /*! Element Plus Icons Vue v2.3.2 */
+  var _sfc_main48 = /* @__PURE__ */ vue.defineComponent({
+    name: "CircleCheckFilled",
+    __name: "circle-check-filled",
+    setup(__props) {
+      return (_ctx, _cache) => (vue.openBlock(), vue.createElementBlock("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 1024 1024"
+      }, [
+        vue.createElementVNode("path", {
+          fill: "currentColor",
+          d: "M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896m-55.808 536.384-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.27 38.27 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336z"
+        })
+      ]));
+    }
+  }), circle_check_filled_default = _sfc_main48;
+  var _sfc_main50 = /* @__PURE__ */ vue.defineComponent({
+    name: "CircleCloseFilled",
+    __name: "circle-close-filled",
+    setup(__props) {
+      return (_ctx, _cache) => (vue.openBlock(), vue.createElementBlock("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 1024 1024"
+      }, [
+        vue.createElementVNode("path", {
+          fill: "currentColor",
+          d: "M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896m0 393.664L407.936 353.6a38.4 38.4 0 1 0-54.336 54.336L457.664 512 353.6 616.064a38.4 38.4 0 1 0 54.336 54.336L512 566.336 616.064 670.4a38.4 38.4 0 1 0 54.336-54.336L566.336 512 670.4 407.936a38.4 38.4 0 1 0-54.336-54.336z"
+        })
+      ]));
+    }
+  }), circle_close_filled_default = _sfc_main50;
+  var _sfc_main201 = /* @__PURE__ */ vue.defineComponent({
+    name: "Plus",
+    __name: "plus",
+    setup(__props) {
+      return (_ctx, _cache) => (vue.openBlock(), vue.createElementBlock("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 1024 1024"
+      }, [
+        vue.createElementVNode("path", {
+          fill: "currentColor",
+          d: "M480 480V128a32 32 0 0 1 64 0v352h352a32 32 0 1 1 0 64H544v352a32 32 0 1 1-64 0V544H128a32 32 0 0 1 0-64z"
+        })
+      ]));
+    }
+  }), plus_default = _sfc_main201;
+  var _sfc_main211 = /* @__PURE__ */ vue.defineComponent({
+    name: "QuestionFilled",
+    __name: "question-filled",
+    setup(__props) {
+      return (_ctx, _cache) => (vue.openBlock(), vue.createElementBlock("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 1024 1024"
+      }, [
+        vue.createElementVNode("path", {
+          fill: "currentColor",
+          d: "M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896m23.744 191.488c-52.096 0-92.928 14.784-123.2 44.352-30.976 29.568-45.76 70.4-45.76 122.496h80.256c0-29.568 5.632-52.8 17.6-68.992 13.376-19.712 35.2-28.864 66.176-28.864 23.936 0 42.944 6.336 56.32 19.712 12.672 13.376 19.712 31.68 19.712 54.912 0 17.6-6.336 34.496-19.008 49.984l-8.448 9.856c-45.76 40.832-73.216 70.4-82.368 89.408-9.856 19.008-14.08 42.24-14.08 68.992v9.856h80.96v-9.856c0-16.896 3.52-31.68 10.56-45.76 6.336-12.672 15.488-24.64 28.16-35.2 33.792-29.568 54.208-48.576 60.544-55.616 16.896-22.528 26.048-51.392 26.048-86.592q0-64.416-42.24-101.376c-28.16-25.344-65.472-37.312-111.232-37.312m-12.672 406.208a54.27 54.27 0 0 0-38.72 14.784 49.4 49.4 0 0 0-15.488 38.016c0 15.488 4.928 28.16 15.488 38.016A54.85 54.85 0 0 0 523.072 768c15.488 0 28.16-4.928 38.72-14.784a51.52 51.52 0 0 0 16.192-38.72 51.97 51.97 0 0 0-15.488-38.016 55.94 55.94 0 0 0-39.424-14.784"
+        })
+      ]));
+    }
+  }), question_filled_default = _sfc_main211;
+  var _sfc_main287 = /* @__PURE__ */ vue.defineComponent({
+    name: "WarningFilled",
+    __name: "warning-filled",
+    setup(__props) {
+      return (_ctx, _cache) => (vue.openBlock(), vue.createElementBlock("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 1024 1024"
+      }, [
+        vue.createElementVNode("path", {
+          fill: "currentColor",
+          d: "M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896m0 192a58.43 58.43 0 0 0-58.24 63.744l23.36 256.384a35.072 35.072 0 0 0 69.76 0l23.296-256.384A58.43 58.43 0 0 0 512 256m0 512a51.2 51.2 0 1 0 0-102.4 51.2 51.2 0 0 0 0 102.4"
+        })
+      ]));
+    }
+  }), warning_filled_default = _sfc_main287;
   const _hoisted_1$3 = {
     key: 0,
     style: { "display": "none" }
   };
-  const _hoisted_2$3 = { class: "jky-form-item__title mb-2 text-base font-medium" };
-  const _hoisted_3$2 = {
+  const _hoisted_2$3 = { class: "jky-form-item__title text-base font-medium flex items-center" };
+  const _hoisted_3$2 = { class: "flex items-center" };
+  const _hoisted_4$2 = {
     key: 0,
     class: "flex items-center"
   };
-  const _hoisted_4$2 = {
+  const _hoisted_5$2 = {
     key: 0,
     class: "mr-2"
   };
-  const _hoisted_5$2 = {
+  const _hoisted_6$1 = {
     key: 1,
     class: "ml-2"
   };
@@ -2444,20 +2889,43 @@ img {
     },
     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 loading = vue.ref(false);
+      const componentProps = vue.ref({});
+      function loadComponentProps() {
+        return __async(this, null, function* () {
+          const configProps = props.config.componentProps;
+          if (!configProps) {
+            componentProps.value = {};
+            return;
+          }
+          if (typeof configProps === "function") {
+            loading.value = true;
+            try {
+              const result = yield configProps({
+                model: props.model,
+                field: props.field,
+                $form: props.model
+              });
+              componentProps.value = result || {};
+            } catch (error) {
+              console.error("Failed to load component props:", error);
+              componentProps.value = {};
+            } finally {
+              loading.value = false;
+            }
+            return;
+          }
+          componentProps.value = configProps;
+        });
+      }
+      vue.watch(
+        () => props.model,
+        () => {
+          loadComponentProps();
+        },
+        { deep: true }
+      );
+      loadComponentProps();
       const modelValue = vue.computed({
         get: () => props.model[props.field],
         set: (val) => {
@@ -2526,7 +2994,13 @@ img {
         return rest;
       });
       function renderComponent(type) {
-        var _a, _b, _c;
+        var _a, _b;
+        if (type === "divider") {
+          const dividerProps = __spreadValues({}, componentProps.value);
+          return vue.h(ElementPlus.ElDivider, dividerProps, {
+            default: () => props.config.children || null
+          });
+        }
         const commonProps = __spreadValues({
           "modelValue": modelValue.value,
           "onUpdate:modelValue": (val) => {
@@ -2534,11 +3008,8 @@ img {
           },
           "placeholder": props.config.placeholder,
           "disabled": props.disabled,
-          "clearable": (_a = props.config.clearable) != null ? _a : true
+          "clearable": props.config.clearable
         }, 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), {
@@ -2551,111 +3022,202 @@ img {
               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
-                  })
-                )
-              }
-            );
+            const selectProps = __spreadValues(__spreadValues({}, commonProps), componentProps.value);
+            return vue.h(ElementPlus.ElSelect, selectProps);
+          }
+          case "autocomplete": {
+            const autocompleteProps = __spreadValues(__spreadValues({}, commonProps), componentProps.value);
+            return vue.h(ElementPlus.ElAutocomplete, autocompleteProps);
           }
           case "datepicker":
-            return vue.h(ElementPlus.ElDatePicker, __spreadProps(__spreadValues({}, commonProps), {
-              type: "date"
-            }));
+            return vue.h(ElementPlus.ElDatePicker, __spreadValues(__spreadValues({}, commonProps), componentProps.value));
           case "datetime-picker":
-            return vue.h(ElementPlus.ElDatePicker, __spreadProps(__spreadValues({}, commonProps), {
-              type: "datetime"
-            }));
+            return vue.h(ElementPlus.ElDatePicker, __spreadValues(__spreadValues({}, commonProps), componentProps.value));
           case "time-picker":
-            return vue.h(ElementPlus.ElTimePicker, __spreadValues({}, commonProps));
+            return vue.h(ElementPlus.ElTimePicker, __spreadValues(__spreadValues({}, commonProps), componentProps.value));
           case "time-select":
-            return vue.h(ElementPlus.ElTimeSelect, __spreadValues({}, commonProps));
+            return vue.h(ElementPlus.ElTimeSelect, __spreadValues(__spreadValues({}, commonProps), componentProps.value));
           case "radio-group": {
-            const options = props.config.options || [];
+            const radioGroupProps = __spreadValues(__spreadValues({}, commonProps), componentProps.value);
             return vue.h(
               ElementPlus.ElRadioGroup,
-              __spreadValues({}, commonProps),
+              radioGroupProps,
               {
-                default: () => options.map(
-                  (option) => vue.h(ElementPlus.ElRadio, {
-                    key: option.value,
-                    value: option.value,
-                    disabled: option.disabled
-                  }, {
-                    default: () => option.label
-                  })
-                )
+                default: () => {
+                  const options = componentProps.value.options || props.config.options || [];
+                  return options.map(
+                    (option) => vue.h(ElementPlus.ElRadio, {
+                      key: option.value,
+                      value: option.value,
+                      disabled: option.disabled
+                    }, {
+                      default: () => option.label
+                    })
+                  );
+                }
               }
             );
           }
           case "checkbox-group": {
-            const options = props.config.options || [];
             const arrayModelValue = Array.isArray(modelValue.value) ? modelValue.value : [];
+            const checkboxGroupProps = __spreadValues(__spreadProps(__spreadValues({}, commonProps), {
+              modelValue: arrayModelValue
+            }), componentProps.value);
             return vue.h(
               ElementPlus.ElCheckboxGroup,
-              __spreadProps(__spreadValues({}, commonProps), {
-                modelValue: arrayModelValue
-              }),
+              checkboxGroupProps,
               {
-                default: () => options.map(
-                  (option) => vue.h(ElementPlus.ElCheckbox, {
-                    key: option.value,
-                    value: option.value,
-                    disabled: option.disabled
-                  }, {
-                    default: () => option.label
-                  })
-                )
+                default: () => {
+                  const options = componentProps.value.options || props.config.options || [];
+                  return options.map(
+                    (option) => vue.h(ElementPlus.ElCheckbox, {
+                      key: option.value,
+                      value: option.value,
+                      disabled: option.disabled
+                    }, {
+                      default: () => option.label
+                    })
+                  );
+                }
               }
             );
           }
           case "switch":
-            return vue.h(ElementPlus.ElSwitch, __spreadValues({}, commonProps));
+            return vue.h(ElementPlus.ElSwitch, __spreadValues(__spreadValues({}, commonProps), componentProps.value));
           case "slider":
-            return vue.h(ElementPlus.ElSlider, __spreadValues({}, commonProps));
-          case "cascader":
-            return vue.h(ElementPlus.ElCascader, __spreadProps(__spreadValues({}, commonProps), {
-              options: props.config.options
-            }));
+            return vue.h(ElementPlus.ElSlider, __spreadValues(__spreadValues({}, commonProps), componentProps.value));
+          case "cascader": {
+            const cascaderProps = __spreadValues(__spreadValues({}, commonProps), componentProps.value);
+            return vue.h(ElementPlus.ElCascader, cascaderProps);
+          }
+          case "tree-select": {
+            const treeSelectProps = __spreadValues(__spreadValues({}, commonProps), componentProps.value);
+            return vue.h(ElementPlus.ElTreeSelect, treeSelectProps);
+          }
           case "color-picker":
-            return vue.h(ElementPlus.ElColorPicker, __spreadValues({}, commonProps));
+            return vue.h(ElementPlus.ElColorPicker, __spreadValues(__spreadValues({}, commonProps), componentProps.value));
           case "rate":
-            return vue.h(ElementPlus.ElRate, __spreadValues({}, commonProps));
-          case "input-number":
+            return vue.h(ElementPlus.ElRate, __spreadValues(__spreadValues({}, commonProps), componentProps.value));
+          case "input-number": {
+            const numberModelValue = modelValue.value === "" || modelValue.value === null || modelValue.value === void 0 ? null : Number(modelValue.value);
+            const inputNumberProps = __spreadValues(__spreadProps(__spreadValues({}, commonProps), {
+              "modelValue": numberModelValue,
+              "onUpdate:modelValue": (val) => {
+                props.model[props.field] = val;
+              }
+            }), componentProps.value);
             return vue.h(ElementPlus.ElInputNumber, inputNumberProps);
+          }
+          // 图片上传
+          case "image-upload": {
+            const uploadProps = __spreadValues(__spreadProps(__spreadValues({}, commonProps), {
+              "action": componentProps.value.action || "#",
+              "file-list": componentProps.value.fileList || [],
+              "list-type": componentProps.value.listType || "picture-card",
+              "onPreview": componentProps.value.onPreview,
+              "onRemove": componentProps.value.onRemove
+            }), componentProps.value);
+            if (uploadProps["list-type"] === "picture-card") {
+              return vue.h(ElementPlus.ElUpload, uploadProps, {
+                default: () => vue.h("div", { class: "el-upload__picture-card-wrapper" }, [
+                  vue.h(ElementPlus.ElIcon, { size: 24 }, { default: () => vue.h(plus_default) })
+                ])
+              });
+            }
+            if (uploadProps["list-type"] === "picture") {
+              return vue.h(ElementPlus.ElUpload, uploadProps, {
+                default: () => vue.h(ElementPlus.ElButton, { type: "primary" }, { default: () => "点击上传" })
+              });
+            }
+            return vue.h(ElementPlus.ElUpload, uploadProps);
+          }
+          // 文件上传
+          case "file-upload": {
+            const uploadProps = __spreadValues(__spreadProps(__spreadValues({}, commonProps), {
+              "action": componentProps.value.action || "#",
+              "file-list": componentProps.value.fileList || [],
+              "list-type": componentProps.value.listType || "text",
+              "onPreview": componentProps.value.onPreview,
+              "onRemove": componentProps.value.onRemove
+            }), componentProps.value);
+            if (uploadProps["list-type"] === "text") {
+              return vue.h(ElementPlus.ElUpload, uploadProps, {
+                default: () => vue.h(ElementPlus.ElButton, { type: "primary" }, { default: () => "点击上传" })
+              });
+            }
+            return vue.h(ElementPlus.ElUpload, uploadProps);
+          }
           case "custom":
-            return (_c = (_b = props.config).render) == null ? void 0 : _c.call(_b, commonProps);
+            return (_b = (_a = props.config).render) == null ? void 0 : _b.call(_a, commonProps);
           default:
             return vue.h(ElementPlus.ElInput, commonProps);
         }
       }
+      function renderHelpTooltip() {
+        if (!props.config.help)
+          return null;
+        const { help } = props.config;
+        const { text, type = "info", position = "top" } = help;
+        const iconMap = {
+          info: { icon: question_filled_default, color: "var(--el-color-info)" },
+          warning: { icon: warning_filled_default, color: "var(--el-color-warning)" },
+          success: { icon: circle_check_filled_default, color: "var(--el-color-success)" },
+          error: { icon: circle_close_filled_default, color: "var(--el-color-error)" }
+        };
+        const { icon, color } = iconMap[type];
+        return vue.h(
+          ElementPlus.ElTooltip,
+          {
+            content: text,
+            placement: position
+          },
+          {
+            default: () => vue.h(
+              ElementPlus.ElIcon,
+              {
+                style: { color, cursor: "pointer", marginLeft: "4px" },
+                size: 16
+              },
+              { default: () => vue.h(icon) }
+            )
+          }
+        );
+      }
+      function renderHelpText() {
+        if (!props.config.help || props.config.help.tooltip)
+          return null;
+        const { text, type = "info" } = props.config.help;
+        const typeStyles = {
+          info: "bg-(--el-color-info)/10 text-(--el-color-info)",
+          warning: "bg-(--el-color-warning)/10 text-(--el-color-warning)",
+          success: "bg-(--el-color-success)/10 text-(--el-color-success)",
+          error: "bg-(--el-color-error)/10 text-(--el-color-error)"
+        };
+        return vue.h(
+          "div",
+          {
+            class: `jky-form-item__help mt-2 text-xs px-2 py-1.5 rounded ${typeStyles[type]}`
+          },
+          { default: () => text }
+        );
+      }
       return (_ctx, _cache) => {
         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]],
+          class: ["jky-form-item jky-form-item--no-label", [__props.config.useDefaultBorderClass ? "border-l-4 border-solid border-l-(--el-color-primary) bg-(--el-color-primary)/50 pl-1.5" : "", __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))
+              ], 64)),
+              __props.config.help && __props.config.help.tooltip ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(renderHelpTooltip()), { key: 2 })) : vue.createCommentVNode("", true)
             ]),
-            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(renderComponent(__props.config.type || "input"))))
+            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(renderComponent(__props.config.type || "input")))),
+            __props.config.help && !__props.config.help.tooltip ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(renderHelpText()), { key: 0 })) : vue.createCommentVNode("", true)
           ]),
           _: 1
         }, 16, ["prop", "class", "style"])) : (vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElFormItem), vue.mergeProps({
@@ -2664,16 +3226,28 @@ img {
           prop: __props.field
         }, __spreadValues(__spreadValues({}, formItemProps.value), _ctx.$attrs), {
           class: ["jky-form-item", [__props.config.className]]
-        }), {
+        }), vue.createSlots({
           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),
+            __props.config.prepend || __props.config.append ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$2, [
+              __props.config.prepend ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$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 }))
+              __props.config.append ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_6$1, vue.toDisplayString(__props.config.append), 1)) : vue.createCommentVNode("", true)
+            ])) : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(renderComponent(__props.config.type || "input")), { key: 1 })),
+            __props.config.help && !__props.config.help.tooltip ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(renderHelpText()), { key: 2 })) : vue.createCommentVNode("", true)
           ]),
-          _: 1
-        }, 16, ["label", "prop", "class"]));
+          _: 2
+        }, [
+          __props.config.help && __props.config.help.tooltip ? {
+            name: "label",
+            fn: vue.withCtx(() => [
+              vue.createElementVNode("div", _hoisted_3$2, [
+                vue.createElementVNode("span", null, vue.toDisplayString(__props.config.label), 1),
+                (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(renderHelpTooltip())))
+              ])
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1040, ["label", "prop", "class"]));
       };
     }
   }));
@@ -3343,7 +3917,8 @@ img {
     JkyButtonNav,
     JkyPageHeader,
     JkyMenu,
-    JkyForm
+    JkyForm,
+    JkyCodeMirrorEditor
   ];
   function JkyComponentLibResolver() {
     return {
@@ -3366,6 +3941,7 @@ img {
   const version = installer.version;
   exports2.JkyButton = JkyButton;
   exports2.JkyButtonNav = JkyButtonNav;
+  exports2.JkyCodeMirrorEditor = JkyCodeMirrorEditor;
   exports2.JkyComponentLibResolver = JkyComponentLibResolver;
   exports2.JkyForm = JkyForm;
   exports2.JkyMenu = JkyMenu;