orion-design 0.1.6 → 0.1.7

package/dist/components/Form/index.js

@@ -1,18 +1,18 @@
 import { isString as G, isDate as P } from "lodash-es";
-import { defineComponent as v, mergeModels as j, useModel as H, useTemplateRef as E, provide as I, openBlock as m, createBlock as f, unref as e, withCtx as t, createVNode as h, renderSlot as D, toRef as g, computed as B, createElementBlock as z, Fragment as F, renderList as k, createTextVNode as L, toDisplayString as N, ref as A, onMounted as K, normalizeStyle as J } from "vue";
-import { withInstall as Q } from "../_util/vue/install.js";
-import { ElForm as X, ElRow as Z, ElCol as c, ElFormItem as q, ElInput as C, ElSelect as $, ElOption as U, ElRadioGroup as x, ElRadio as _, ElCheckboxGroup as ee, ElCheckbox as T, ElSwitch as le, dayjs as O, ElTimePicker as ae, ElDatePicker as oe } from "element-plus";
-import { formContextKey as re } from "./Form.js";
-import { useFormSpan as y, useFormRules as S, useFormContext as w, useFormDisabled as Y, useFormCode as W } from "./hooks/useForm.js";
+import { defineComponent as y, mergeModels as j, useModel as I, useTemplateRef as $, provide as H, reactive as L, toRef as v, openBlock as m, createBlock as f, unref as e, withCtx as d, createVNode as h, renderSlot as M, computed as O, createElementBlock as C, Fragment as z, renderList as F, createTextVNode as N, toDisplayString as A, ref as K, onMounted as J, normalizeStyle as Q } from "vue";
+import { withInstall as X } from "../_util/vue/install.js";
+import { ElForm as Z, ElRow as x, ElCol as c, ElFormItem as w, ElInput as B, ElSelect as E, ElOption as U, ElRadioGroup as _, ElRadio as ee, ElCheckboxGroup as le, ElCheckbox as T, ElSwitch as ae, dayjs as R, ElTimePicker as oe, ElDatePicker as re } from "element-plus";
+import { formContextKey as te } from "./Form.js";
+import { useFormSpan as g, useFormRules as V, useFormContext as S, useFormDisabled as Y, useFormCode as W } from "./hooks/useForm.js";
 import { getSingleCodeContent as ne, getMultiCodeContent as de } from "./utils/index.js";
-import R from "../../error/OrionError.js";
-import { S as te } from "../../index-BbsXWo7C.js";
-const ue = /* @__PURE__ */ v({
+import D from "../../error/OrionError.js";
+import { S as ue } from "../../index-BbsXWo7C.js";
+const ie = /* @__PURE__ */ y({
   name: "OForm",
   __name: "Form",
   props: /* @__PURE__ */ j({
     rules: {},
-    itemSpan: { default: 8 },
+    itemSpan: { default: 6 },
     itemLabelWidth: { default: "auto" },
     disabled: { type: Boolean, default: !1 }
   }, {
@@ -21,27 +21,31 @@ const ue = /* @__PURE__ */ v({
   }),
   emits: ["update:modelValue"],
   setup(o, { expose: p }) {
-    const s = H(o, "modelValue"), u = E("formRef");
+    const i = I(o, "modelValue"), t = $("formRef");
     return p({
-      validate: async () => await u.value.validate()
-    }), I(re, {
-      model: s.value,
-      rules: o.rules,
-      itemSpan: o.itemSpan
-    }), (l, d) => (m(), f(e(X), {
+      validate: async () => await t.value.validate()
+    }), H(
+      te,
+      L({
+        model: i.value,
+        rules: v(() => o.rules),
+        itemSpan: v(() => o.itemSpan),
+        disabled: v(() => o.disabled)
+      })
+    ), (l, u) => (m(), f(e(Z), {
       ref_key: "formRef",
-      ref: u,
-      modelValue: s.value,
-      "onUpdate:modelValue": d[0] || (d[0] = (a) => s.value = a),
-      model: s.value,
+      ref: t,
+      modelValue: i.value,
+      "onUpdate:modelValue": u[0] || (u[0] = (a) => i.value = a),
+      model: i.value,
       rules: l.rules,
-      "label-width": o.itemLabelWidth,
+      "label-width": l.itemLabelWidth,
       disabled: l.disabled
     }, {
-      default: t(() => [
-        h(e(Z), { gutter: 16 }, {
-          default: t(() => [
-            D(l.$slots, "default")
+      default: d(() => [
+        h(e(x), { gutter: 16 }, {
+          default: d(() => [
+            M(l.$slots, "default")
           ]),
           _: 3
         })
@@ -49,8 +53,9 @@ const ue = /* @__PURE__ */ v({
       _: 3
     }, 8, ["modelValue", "model", "rules", "label-width", "disabled"]));
   }
-}), ie = /* @__PURE__ */ v({
+}), se = /* @__PURE__ */ y({
   name: "OFormString",
+  extendOptions: { trigger: "blur" },
   __name: "StringInput",
   props: {
     name: {},
@@ -65,20 +70,20 @@ const ue = /* @__PURE__ */ v({
     readonly: { type: Boolean }
   },
   setup(o) {
-    const p = y(), s = S(), u = w(), n = g(u.model, o.name);
-    return (l, d) => (m(), f(e(c), { span: e(p) }, {
-      default: t(() => [
-        h(e(q), {
+    const p = g(), i = V(), t = S(), r = v(t.model, o.name);
+    return (l, u) => (m(), f(e(c), { span: e(p) }, {
+      default: d(() => [
+        h(e(w), {
           prop: l.name,
           label: l.label,
           "label-width": l.labelWidth,
           required: l.required,
-          rules: e(s)
+          rules: e(i)
         }, {
-          default: t(() => [
-            h(e(C), {
-              modelValue: n.value,
-              "onUpdate:modelValue": d[0] || (d[0] = (a) => n.value = a),
+          default: d(() => [
+            h(e(B), {
+              modelValue: r.value,
+              "onUpdate:modelValue": u[0] || (u[0] = (a) => r.value = a),
               maxlength: l.maxlength,
               placeholder: l.placeholder,
               disabled: l.disabled,
@@ -91,8 +96,9 @@ const ue = /* @__PURE__ */ v({
       _: 1
     }, 8, ["span"]));
   }
-}), se = /* @__PURE__ */ v({
+}), me = /* @__PURE__ */ y({
   name: "OFormPassword",
+  extendOptions: { trigger: "blur" },
   __name: "PasswordInput",
   props: {
     name: {},
@@ -107,20 +113,20 @@ const ue = /* @__PURE__ */ v({
     readonly: { type: Boolean }
   },
   setup(o) {
-    const p = y(), s = S(), u = w(), n = g(u.model, o.name);
-    return (l, d) => (m(), f(e(c), { span: e(p) }, {
-      default: t(() => [
-        h(e(q), {
+    const p = g(), i = V(), t = S(), r = v(t.model, o.name);
+    return (l, u) => (m(), f(e(c), { span: e(p) }, {
+      default: d(() => [
+        h(e(w), {
           prop: l.name,
           label: l.label,
           "label-width": l.labelWidth,
           required: l.required,
-          rules: e(s)
+          rules: e(i)
         }, {
-          default: t(() => [
-            h(e(C), {
-              modelValue: n.value,
-              "onUpdate:modelValue": d[0] || (d[0] = (a) => n.value = a),
+          default: d(() => [
+            h(e(B), {
+              modelValue: r.value,
+              "onUpdate:modelValue": u[0] || (u[0] = (a) => r.value = a),
               maxlength: l.maxlength,
               placeholder: l.placeholder,
               disabled: l.disabled,
@@ -134,8 +140,9 @@ const ue = /* @__PURE__ */ v({
       _: 1
     }, 8, ["span"]));
   }
-}), me = /* @__PURE__ */ v({
+}), pe = /* @__PURE__ */ y({
   name: "OFormTextarea",
+  extendOptions: { trigger: "blur" },
   __name: "Textarea",
   props: {
     name: {},
@@ -151,20 +158,20 @@ const ue = /* @__PURE__ */ v({
     rows: {}
   },
   setup(o) {
-    const p = y(), s = S(), u = w(), n = g(u.model, o.name);
-    return (l, d) => (m(), f(e(c), { span: e(p) }, {
-      default: t(() => [
-        h(e(q), {
+    const p = g(), i = V(), t = S(), r = v(t.model, o.name);
+    return (l, u) => (m(), f(e(c), { span: e(p) }, {
+      default: d(() => [
+        h(e(w), {
           prop: l.name,
           label: l.label,
           "label-width": l.labelWidth,
           required: l.required,
-          rules: e(s)
+          rules: e(i)
         }, {
-          default: t(() => [
-            h(e(C), {
-              modelValue: n.value,
-              "onUpdate:modelValue": d[0] || (d[0] = (a) => n.value = a),
+          default: d(() => [
+            h(e(B), {
+              modelValue: r.value,
+              "onUpdate:modelValue": u[0] || (u[0] = (a) => r.value = a),
               maxlength: l.maxlength,
               placeholder: l.placeholder,
               disabled: l.disabled,
@@ -180,8 +187,9 @@ const ue = /* @__PURE__ */ v({
       _: 1
     }, 8, ["span"]));
   }
-}), pe = /* @__PURE__ */ v({
+}), be = /* @__PURE__ */ y({
   name: "OFormSingleselect",
+  extendOptions: {},
   __name: "SingleSelect",
   props: {
     name: {},
@@ -197,36 +205,36 @@ const ue = /* @__PURE__ */ v({
     filterable: { type: Boolean }
   },
   setup(o) {
-    const p = y(), s = S(), u = Y(), n = W(), l = B(() => ne(n.value, a.value)), d = w(), a = g(d.model, o.name);
-    return (i, b) => (m(), f(e(c), { span: e(p) }, {
-      default: t(() => [
-        h(e(q), {
-          prop: i.name,
-          label: i.label,
-          "label-width": i.labelWidth,
-          required: i.required,
-          rules: e(s)
+    const p = g(), i = V(), t = Y(), r = W(), l = O(() => ne(r.value, a.value)), u = S(), a = v(u.model, o.name);
+    return (s, b) => (m(), f(e(c), { span: e(p) }, {
+      default: d(() => [
+        h(e(w), {
+          prop: s.name,
+          label: s.label,
+          "label-width": s.labelWidth,
+          required: s.required,
+          rules: e(i)
         }, {
-          default: t(() => [
-            e(u) ? (m(), f(e(C), {
+          default: d(() => [
+            e(t) ? (m(), f(e(B), {
               key: 0,
               "model-value": l.value,
-              placeholder: i.placeholder,
+              placeholder: s.placeholder,
               disabled: !0,
               readonly: !0
-            }, null, 8, ["model-value", "placeholder"])) : (m(), f(e($), {
+            }, null, 8, ["model-value", "placeholder"])) : (m(), f(e(E), {
               key: 1,
               modelValue: a.value,
-              "onUpdate:modelValue": b[0] || (b[0] = (r) => a.value = r),
-              placeholder: i.placeholder,
-              clearable: i.clearable,
-              filterable: i.filterable
+              "onUpdate:modelValue": b[0] || (b[0] = (n) => a.value = n),
+              placeholder: s.placeholder,
+              clearable: s.clearable,
+              filterable: s.filterable
             }, {
-              default: t(() => [
-                (m(!0), z(F, null, k(e(n), (r) => (m(), f(e(U), {
-                  key: r.value,
-                  label: r.content,
-                  value: r.value
+              default: d(() => [
+                (m(!0), C(z, null, F(e(r), (n) => (m(), f(e(U), {
+                  key: n.value,
+                  label: n.content,
+                  value: n.value
                 }, null, 8, ["label", "value"]))), 128))
               ]),
               _: 1
@@ -238,8 +246,9 @@ const ue = /* @__PURE__ */ v({
       _: 1
     }, 8, ["span"]));
   }
-}), be = /* @__PURE__ */ v({
+}), fe = /* @__PURE__ */ y({
   name: "OFormMultiselect",
+  extendOptions: {},
   __name: "MultiSelect",
   props: {
     name: {},
@@ -253,40 +262,40 @@ const ue = /* @__PURE__ */ v({
     code: {}
   },
   setup(o) {
-    const p = y(), s = S(), u = Y(), n = W(), l = B(() => de(n.value, a.value)), d = w(), a = g(d.model, o.name), i = B({
+    const p = g(), i = V(), t = Y(), r = W(), l = O(() => de(r.value, a.value)), u = S(), a = v(u.model, o.name), s = O({
       get: () => a.value ? a.value.split(",") : [],
       set: (b) => {
         b ? a.value = b.join(",") : a.value = "";
       }
     });
-    return (b, r) => (m(), f(e(c), { span: e(p) }, {
-      default: t(() => [
-        h(e(q), {
+    return (b, n) => (m(), f(e(c), { span: e(p) }, {
+      default: d(() => [
+        h(e(w), {
           prop: b.name,
           label: b.label,
           "label-width": b.labelWidth,
           required: b.required,
-          rules: e(s)
+          rules: e(i)
         }, {
-          default: t(() => [
-            e(u) ? (m(), f(e(C), {
+          default: d(() => [
+            e(t) ? (m(), f(e(B), {
               key: 0,
               "model-value": l.value,
               placeholder: b.placeholder,
               disabled: !0,
               readonly: !0
-            }, null, 8, ["model-value", "placeholder"])) : (m(), f(e($), {
+            }, null, 8, ["model-value", "placeholder"])) : (m(), f(e(E), {
               key: 1,
-              modelValue: i.value,
-              "onUpdate:modelValue": r[0] || (r[0] = (V) => i.value = V),
+              modelValue: s.value,
+              "onUpdate:modelValue": n[0] || (n[0] = (q) => s.value = q),
               placeholder: b.placeholder,
               multiple: ""
             }, {
-              default: t(() => [
-                (m(!0), z(F, null, k(e(n), (V) => (m(), f(e(U), {
-                  key: V.value,
-                  label: V.content,
-                  value: V.value
+              default: d(() => [
+                (m(!0), C(z, null, F(e(r), (q) => (m(), f(e(U), {
+                  key: q.value,
+                  label: q.content,
+                  value: q.value
                 }, null, 8, ["label", "value"]))), 128))
               ]),
               _: 1
@@ -298,8 +307,9 @@ const ue = /* @__PURE__ */ v({
       _: 1
     }, 8, ["span"]));
   }
-}), fe = /* @__PURE__ */ v({
+}), he = /* @__PURE__ */ y({
   name: "OFormRadiogroup",
+  extendOptions: {},
   __name: "RadioGroup",
   props: {
     name: {},
@@ -312,29 +322,29 @@ const ue = /* @__PURE__ */ v({
     code: {}
   },
   setup(o) {
-    const p = y(), s = S(), u = W(), n = w(), l = g(n.model, o.name);
-    return (d, a) => (m(), f(e(c), { span: e(p) }, {
-      default: t(() => [
-        h(e(q), {
-          prop: d.name,
-          label: d.label,
-          "label-width": d.labelWidth,
-          required: d.required,
-          rules: e(s)
+    const p = g(), i = V(), t = W(), r = S(), l = v(r.model, o.name);
+    return (u, a) => (m(), f(e(c), { span: e(p) }, {
+      default: d(() => [
+        h(e(w), {
+          prop: u.name,
+          label: u.label,
+          "label-width": u.labelWidth,
+          required: u.required,
+          rules: e(i)
         }, {
-          default: t(() => [
-            h(e(x), {
+          default: d(() => [
+            h(e(_), {
               modelValue: l.value,
-              "onUpdate:modelValue": a[0] || (a[0] = (i) => l.value = i),
-              disabled: d.disabled
+              "onUpdate:modelValue": a[0] || (a[0] = (s) => l.value = s),
+              disabled: u.disabled
             }, {
-              default: t(() => [
-                (m(!0), z(F, null, k(e(u), (i) => (m(), f(e(_), {
-                  key: i.value,
-                  value: i.value
+              default: d(() => [
+                (m(!0), C(z, null, F(e(t), (s) => (m(), f(e(ee), {
+                  key: s.value,
+                  value: s.value
                 }, {
-                  default: t(() => [
-                    L(N(i.content), 1)
+                  default: d(() => [
+                    N(A(s.content), 1)
                   ]),
                   _: 2
                 }, 1032, ["value"]))), 128))
@@ -348,8 +358,9 @@ const ue = /* @__PURE__ */ v({
       _: 1
     }, 8, ["span"]));
   }
-}), he = /* @__PURE__ */ v({
+}), ve = /* @__PURE__ */ y({
   name: "OFormCheckboxgroup",
+  extendOptions: {},
   __name: "CheckboxGroup",
   props: {
     name: {},
@@ -362,29 +373,29 @@ const ue = /* @__PURE__ */ v({
     code: {}
   },
   setup(o) {
-    const p = y(), s = S(), u = W(), n = w(), l = g(n.model, o.name), d = B({
+    const p = g(), i = V(), t = W(), r = S(), l = v(r.model, o.name), u = O({
       get: () => l.value ? l.value.split(",") : [],
       set: (a) => {
         a ? l.value = a.join(",") : l.value = "";
       }
     });
-    return (a, i) => (m(), f(e(c), { span: e(p) }, {
-      default: t(() => [
-        h(e(q), {
+    return (a, s) => (m(), f(e(c), { span: e(p) }, {
+      default: d(() => [
+        h(e(w), {
           prop: a.name,
           label: a.label,
           "label-width": a.labelWidth,
           required: a.required,
-          rules: e(s)
+          rules: e(i)
         }, {
-          default: t(() => [
-            h(e(ee), {
-              modelValue: d.value,
-              "onUpdate:modelValue": i[0] || (i[0] = (b) => d.value = b),
+          default: d(() => [
+            h(e(le), {
+              modelValue: u.value,
+              "onUpdate:modelValue": s[0] || (s[0] = (b) => u.value = b),
               disabled: a.disabled
             }, {
-              default: t(() => [
-                (m(!0), z(F, null, k(e(u), (b) => (m(), f(e(T), {
+              default: d(() => [
+                (m(!0), C(z, null, F(e(t), (b) => (m(), f(e(T), {
                   key: b.value,
                   label: b.content,
                   value: b.value
@@ -399,84 +410,83 @@ const ue = /* @__PURE__ */ v({
       _: 1
     }, 8, ["span"]));
   }
-}), ve = /* @__PURE__ */ v({
+}), ye = /* @__PURE__ */ y({
   name: "OFormCheckbox",
+  extendOptions: {},
   __name: "Checkbox",
   props: {
     name: {},
     label: {},
     span: {},
     labelWidth: {},
-    required: { type: Boolean },
     rules: {},
     disabled: { type: Boolean }
   },
   setup(o) {
-    const p = y(), s = S(), u = w(), n = g(u.model, o.name);
-    return (l, d) => (m(), f(e(c), { span: e(p) }, {
-      default: t(() => [
-        h(e(q), {
-          prop: l.name,
-          label: l.label,
-          "label-width": l.labelWidth,
-          required: l.required,
-          rules: e(s)
+    const p = g(), i = S(), t = v(i.model, o.name);
+    return (r, l) => (m(), f(e(c), { span: e(p) }, {
+      default: d(() => [
+        h(e(w), {
+          prop: r.name,
+          label: r.label,
+          "label-width": r.labelWidth,
+          rules: r.rules
         }, {
-          default: t(() => [
+          default: d(() => [
             h(e(T), {
-              modelValue: n.value,
-              "onUpdate:modelValue": d[0] || (d[0] = (a) => n.value = a),
-              disabled: l.disabled,
+              modelValue: t.value,
+              "onUpdate:modelValue": l[0] || (l[0] = (u) => t.value = u),
+              disabled: r.disabled,
               "true-value": "1",
               "false-value": "0"
             }, null, 8, ["modelValue", "disabled"])
           ]),
           _: 1
-        }, 8, ["prop", "label", "label-width", "required", "rules"])
+        }, 8, ["prop", "label", "label-width", "rules"])
       ]),
       _: 1
     }, 8, ["span"]));
   }
-}), ce = /* @__PURE__ */ v({
+}), ce = /* @__PURE__ */ y({
   name: "OFormSwitch",
+  extendOptions: {},
   __name: "Switch",
   props: {
     name: {},
     label: {},
     span: {},
     labelWidth: {},
-    required: { type: Boolean },
     rules: {},
     disabled: { type: Boolean }
   },
   setup(o) {
-    const p = y(), s = S(), u = w(), n = g(u.model, o.name);
-    return (l, d) => (m(), f(e(c), { span: e(p) }, {
-      default: t(() => [
-        h(e(q), {
-          prop: l.name,
-          label: l.label,
-          "label-width": l.labelWidth,
-          required: l.required,
-          rules: e(s)
+    const p = g(), i = S(), t = v(i.model, o.name);
+    return (r, l) => (m(), f(e(c), { span: e(p) }, {
+      default: d(() => [
+        h(e(w), {
+          prop: r.name,
+          label: r.label,
+          "label-width": r.labelWidth,
+          rules: r.rules
         }, {
-          default: t(() => [
-            h(e(le), {
-              modelValue: n.value,
-              "onUpdate:modelValue": d[0] || (d[0] = (a) => n.value = a),
-              disabled: l.disabled,
+          default: d(() => [
+            h(e(ae), {
+              modelValue: t.value,
+              "onUpdate:modelValue": l[0] || (l[0] = (u) => t.value = u),
+              disabled: r.disabled,
               "active-value": "1",
               "inactive-value": "0"
             }, null, 8, ["modelValue", "disabled"])
           ]),
           _: 1
-        }, 8, ["prop", "label", "label-width", "required", "rules"])
+        }, 8, ["prop", "label", "label-width", "rules"])
       ]),
       _: 1
     }, 8, ["span"]));
   }
-}), ye = /* @__PURE__ */ v({
+}), ge = /* @__PURE__ */ y({
   name: "OFormDate",
+  extendOptions: { trigger: "blur" },
   __name: "DateInput",
   props: {
     name: {},
@@ -495,66 +505,68 @@ const ue = /* @__PURE__ */ v({
     sourceFormat: {}
   },
   setup(o) {
-    const p = y(), s = S(), u = B(
+    const p = g(), i = V(), t = O(
       () => o.format.startsWith("H") || o.format.startsWith("h") || o.format.startsWith("m") || o.format.startsWith("s")
-    ), n = B(() => o.sourceFormat ? o.sourceFormat : u.value ? "HH:mm:ss" : "YYYY-MM-DD"), l = B(() => {
-      let r = "date";
-      return (o.format.indexOf("y") > -1 || o.format.indexOf("Y") > -1) && (r = "year"), o.format.indexOf("M") > -1 && (r = "month"), (o.format.indexOf("d") > -1 || o.format.indexOf("D") > -1) && (r = "date"), (o.format.indexOf("H") > -1 || o.format.indexOf("h") > -1 || o.format.indexOf("k") > -1 || o.format.indexOf("m") > -1 || o.format.indexOf("s") > -1 || o.format.indexOf("S") > -1) && (r = "datetime"), r;
-    }), d = w(), a = g(d.model, o.name), i = B(() => {
+    ), r = O(() => o.sourceFormat ? o.sourceFormat : t.value ? "HH:mm:ss" : "YYYY-MM-DD"), l = O(() => {
+      let n = "date";
+      return (o.format.indexOf("y") > -1 || o.format.indexOf("Y") > -1) && (n = "year"), o.format.indexOf("M") > -1 && (n = "month"), (o.format.indexOf("d") > -1 || o.format.indexOf("D") > -1) && (n = "date"), (o.format.indexOf("H") > -1 || o.format.indexOf("h") > -1 || o.format.indexOf("k") > -1 || o.format.indexOf("m") > -1 || o.format.indexOf("s") > -1 || o.format.indexOf("S") > -1) && (n = "datetime"), n;
+    }), u = S(), a = v(u.model, o.name), s = O(() => {
       if (G(a.value))
         return "string";
       if (P(a.value))
         return "date";
-      throw new R("日期输入框的值只能为字符串或日期类型");
-    }), b = B({
+      throw new D("日期输入框的值只能为字符串或日期类型");
+    }), b = O({
       get: () => {
         if (a.value) {
-          if (i.value == "date")
+          if (s.value == "date")
             return a.value;
           {
-            const r = O(a.value, n.value, !0);
-            if (!r.isValid())
-              throw new R(`日期输入框的值无效，不符合${n.value}格式`);
-            return r.toDate();
+            const n = R(a.value, r.value, !0);
+            if (!n.isValid())
+              throw new D(`日期输入框的值无效，不符合${r.value}格式`);
+            return n.toDate();
           }
         }
       },
-      set: (r) => {
-        i.value == "date" ? r ? a.value = r : a.value = void 0 : r ? a.value = O(r).format(n.value) : a.value = "";
+      set: (n) => {
+        s.value == "date" ? n ? a.value = n : a.value = void 0 : n ? a.value = R(n).format(r.value) : a.value = "";
       }
     });
-    return (r, V) => (m(), f(e(c), { span: e(p) }, {
-      default: t(() => [
-        h(e(q), {
-          prop: r.name,
-          label: r.label,
-          "label-width": r.labelWidth,
-          required: r.required,
-          rules: e(s)
+    return (n, q) => (m(), f(e(c), { span: e(p) }, {
+      default: d(() => [
+        h(e(w), {
+          prop: n.name,
+          label: n.label,
+          "label-width": n.labelWidth,
+          required: n.required,
+          rules: e(i)
         }, {
-          default: t(() => [
-            u.value ? (m(), f(e(ae), {
+          default: d(() => [
+            t.value ? (m(), f(e(oe), {
               key: 0,
               modelValue: b.value,
-              "onUpdate:modelValue": V[0] || (V[0] = (M) => b.value = M),
-              placeholder: r.placeholder,
-              disabled: r.disabled,
-              readonly: r.readonly,
-              editable: r.editable,
-              clearable: r.clearable,
-              format: n.value,
-              "arrow-control": ""
-            }, null, 8, ["modelValue", "placeholder", "disabled", "readonly", "editable", "clearable", "format"])) : (m(), f(e(oe), {
+              "onUpdate:modelValue": q[0] || (q[0] = (k) => b.value = k),
+              placeholder: n.placeholder,
+              disabled: n.disabled,
+              readonly: n.readonly,
+              editable: n.editable,
+              clearable: n.clearable,
+              format: r.value,
+              "arrow-control": "",
+              style: { width: "100%" }
+            }, null, 8, ["modelValue", "placeholder", "disabled", "readonly", "editable", "clearable", "format"])) : (m(), f(e(re), {
               key: 1,
               modelValue: b.value,
-              "onUpdate:modelValue": V[1] || (V[1] = (M) => b.value = M),
-              placeholder: r.placeholder,
-              disabled: r.disabled,
-              readonly: r.readonly,
-              editable: r.editable,
-              clearable: r.clearable,
+              "onUpdate:modelValue": q[1] || (q[1] = (k) => b.value = k),
+              placeholder: n.placeholder,
+              disabled: n.disabled,
+              readonly: n.readonly,
+              editable: n.editable,
+              clearable: n.clearable,
               type: l.value,
-              format: n.value
+              format: r.value,
+              style: { width: "100%" }
             }, null, 8, ["modelValue", "placeholder", "disabled", "readonly", "editable", "clearable", "type", "format"]))
           ]),
           _: 1
@@ -563,8 +575,9 @@ const ue = /* @__PURE__ */ v({
       _: 1
     }, 8, ["span"]));
   }
-}), ge = /* @__PURE__ */ v({
+}), we = /* @__PURE__ */ y({
   name: "OFormFile",
+  extendOptions: {},
   __name: "FileInput",
   props: {
     name: {},
@@ -576,29 +589,29 @@ const ue = /* @__PURE__ */ v({
     disabled: { type: Boolean }
   },
   setup(o) {
-    const p = y(), s = S(), u = A(""), n = E("fileRef");
-    K(() => {
-      n.value.input.onchange = (a) => {
-        var i;
-        d.value = (i = a == null ? void 0 : a.target) == null ? void 0 : i.files[0];
+    const p = g(), i = V(), t = K(""), r = $("fileRef");
+    J(() => {
+      r.value.input.onchange = (a) => {
+        var s;
+        u.value = (s = a == null ? void 0 : a.target) == null ? void 0 : s.files[0];
       };
     });
-    const l = w(), d = g(l.model, o.name);
-    return (a, i) => (m(), f(e(c), { span: e(p) }, {
-      default: t(() => [
-        h(e(q), {
+    const l = S(), u = v(l.model, o.name);
+    return (a, s) => (m(), f(e(c), { span: e(p) }, {
+      default: d(() => [
+        h(e(w), {
           prop: a.name,
           label: a.label,
           "label-width": a.labelWidth,
           required: a.required,
-          rules: e(s)
+          rules: e(i)
         }, {
-          default: t(() => [
-            h(e(C), {
+          default: d(() => [
+            h(e(B), {
               ref_key: "fileRef",
-              ref: n,
-              modelValue: u.value,
-              "onUpdate:modelValue": i[0] || (i[0] = (b) => u.value = b),
+              ref: r,
+              modelValue: t.value,
+              "onUpdate:modelValue": s[0] || (s[0] = (b) => t.value = b),
               disabled: a.disabled,
               type: "file"
             }, null, 8, ["modelValue", "disabled"])
@@ -609,7 +622,7 @@ const ue = /* @__PURE__ */ v({
       _: 1
     }, 8, ["span"]));
   }
-}), qe = /* @__PURE__ */ v({
+}), Se = /* @__PURE__ */ y({
   name: "OFormButtongroup",
   __name: "ButtonGroup",
   props: {
@@ -618,20 +631,20 @@ const ue = /* @__PURE__ */ v({
     align: { default: "right" }
   },
   setup(o) {
-    const p = B(() => ({
+    const p = O(() => ({
       textAlign: o.align
-    })), s = y();
-    return (u, n) => (m(), f(e(c), {
-      span: e(s),
-      style: J(p.value)
+    })), i = g();
+    return (t, r) => (m(), f(e(c), {
+      span: e(i),
+      style: Q(p.value)
     }, {
-      default: t(() => [
-        h(e(te), {
-          gutter: u.gutter,
+      default: d(() => [
+        h(e(ue), {
+          gutter: t.gutter,
           style: { "margin-bottom": "18px" }
         }, {
-          default: t(() => [
-            D(u.$slots, "default")
+          default: d(() => [
+            M(t.$slots, "default")
           ]),
           _: 3
         }, 8, ["gutter"])
@@ -639,22 +652,55 @@ const ue = /* @__PURE__ */ v({
       _: 3
     }, 8, ["span", "style"]));
   }
-}), Me = Q(ue, {
-  StringInput: ie,
-  PasswordInput: se,
-  Textarea: me,
-  SingleSelect: pe,
-  MultiSelect: be,
-  RadioGroup: fe,
-  CheckboxGroup: he,
-  Checkbox: ve,
+}), qe = /* @__PURE__ */ y({
+  name: "OFormDiy",
+  extendOptions: {},
+  __name: "DiyItem",
+  props: {
+    name: {},
+    label: {},
+    span: {},
+    labelWidth: {},
+    required: { type: Boolean },
+    rules: {}
+  },
+  setup(o) {
+    const p = g(), i = V();
+    return (t, r) => (m(), f(e(c), { span: e(p) }, {
+      default: d(() => [
+        h(e(w), {
+          prop: t.name,
+          label: t.label,
+          "label-width": t.labelWidth,
+          required: t.required,
+          rules: e(i)
+        }, {
+          default: d(() => [
+            M(t.$slots, "default")
+          ]),
+          _: 3
+        }, 8, ["prop", "label", "label-width", "required", "rules"])
+      ]),
+      _: 3
+    }, 8, ["span"]));
+  }
+}), Re = X(ie, {
+  StringInput: se,
+  PasswordInput: me,
+  Textarea: pe,
+  SingleSelect: be,
+  MultiSelect: fe,
+  RadioGroup: he,
+  CheckboxGroup: ve,
+  Checkbox: ye,
   Switch: ce,
-  DateInput: ye,
-  FileInput: ge,
-  ButtonGroup: qe
+  DateInput: ge,
+  FileInput: we,
+  ButtonGroup: Se,
+  DiyItem: qe
 });
 export {
-  Me as default,
-  re as formContextKey
+  Re as default,
+  te as formContextKey
 };
 //# sourceMappingURL=index.js.map