ai-front-base 0.2.3 → 0.2.6

package/dist/components/AiDatePicker/index.vue.mjs

@@ -1,15 +1,68 @@
-import { defineComponent as r, resolveComponent as n, openBlock as o, createBlock as a, normalizeProps as c, guardReactiveProps as p } from "vue";
-const l = /* @__PURE__ */ r({
-  name: "AiDatePicker",
-  inheritAttrs: !0,
+import { defineComponent as s, computed as m, resolveComponent as u, openBlock as i, createBlock as c, mergeProps as y } from "vue";
+const b = /* @__PURE__ */ s({
   __name: "index",
-  setup(i) {
-    return (e, s) => {
-      const t = n("el-date-picker");
-      return o(), a(t, c(p(e.$attrs)), null, 16);
+  props: {
+    modelValue: {},
+    type: {},
+    showNow: { type: Boolean },
+    showConfirm: { type: Boolean },
+    showFooter: { type: Boolean },
+    showWeekNumber: { type: Boolean },
+    ariaLabel: {},
+    emptyValues: {},
+    valueOnClear: {},
+    disabledDate: {},
+    cellClassName: {},
+    shortcuts: {},
+    arrowControl: { type: Boolean },
+    tabindex: {},
+    validateEvent: { type: Boolean },
+    unlinkPanels: { type: Boolean },
+    placement: {},
+    fallbackPlacements: {},
+    disabledHours: {},
+    disabledMinutes: {},
+    disabledSeconds: {},
+    automaticDropdown: { type: Boolean },
+    id: {},
+    name: {},
+    popperClass: {},
+    popperStyle: {},
+    format: {},
+    valueFormat: {},
+    dateFormat: {},
+    timeFormat: {},
+    clearable: { type: Boolean },
+    clearIcon: {},
+    editable: { type: Boolean },
+    prefixIcon: {},
+    size: {},
+    readonly: { type: Boolean },
+    disabled: { type: Boolean },
+    placeholder: {},
+    popperOptions: {},
+    rangeSeparator: {},
+    startPlaceholder: {},
+    endPlaceholder: {},
+    defaultValue: {},
+    defaultTime: {},
+    isRange: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(l, { emit: t }) {
+    const n = l, p = t, o = m({
+      get: () => n.modelValue ?? void 0,
+      set: (e) => p("update:modelValue", e ?? null)
+    });
+    return (e, a) => {
+      const r = u("el-date-picker");
+      return i(), c(r, y({
+        modelValue: o.value,
+        "onUpdate:modelValue": a[0] || (a[0] = (d) => o.value = d)
+      }, e.$attrs), null, 16, ["modelValue"]);
     };
   }
 });
 export {
-  l as default
+  b as default
 };

package/dist/components/AiDatePicker/types.ts

@@ -1,17 +1,14 @@
 /**
  * AiDatePicker - 日期选择器
- * 基于 Element Plus DatePicker 封装
- *
- * @example
- * <AiDatePicker v-model="date" type="date" placeholder="选择日期" />
+ * 基于Element Plus el-date-picker封装
  */
 
-export interface AiDatePickerProps {
-  modelValue?: Date | string | number
-  type?: 'year' | 'month' | 'date' | 'dates' | 'datetime' | 'week' | 'datetimerange' | 'daterange' | 'monthrange'
-  placeholder?: string
-  disabled?: boolean
-  clearable?: boolean
-  format?: string
-  valueFormat?: string
+import type { DatePickerProps } from 'element-plus'
+
+export interface IAiDatePickerProps extends Partial<DatePickerProps> {
+  modelValue?: Date | string | number | null
+}
+
+export interface IAiDatePickerEmits {
+  (e: 'update:modelValue', value: Date | string | number | null): void
 }

package/dist/components/AiDateRangePicker/index.mjs

@@ -0,0 +1,7 @@
+import o from "./index.vue.mjs";
+/* empty css            */
+import t from "../_virtual/_plugin-vue_export-helper.mjs";
+const i = /* @__PURE__ */ t(o, [["__scopeId", "data-v-d6029d37"]]);
+export {
+  i as default
+};

package/dist/components/AiDateRangePicker/index.vue.mjs

@@ -0,0 +1,33 @@
+import { defineComponent as f, useAttrs as V, computed as r, openBlock as g, createElementBlock as P, createVNode as s, mergeProps as u, createElementVNode as b } from "vue";
+import m from "../AiDatePicker/index.vue.mjs";
+const h = { class: "ai-date-range-picker" }, E = /* @__PURE__ */ f({
+  __name: "index",
+  emits: ["update:startDate", "update:endDate"],
+  setup(T, { emit: i }) {
+    const a = V(), o = i, l = r({
+      get: () => a.startDate,
+      set: (e) => o("update:startDate", e ?? null)
+    }), d = r({
+      get: () => a.endDate,
+      set: (e) => o("update:endDate", e ?? null)
+    }), p = r(() => a.startPlaceholder), c = r(() => a.endPlaceholder), D = (e) => d.value ? e.getTime() > new Date(d.value).getTime() : !1, v = (e) => l.value ? e.getTime() < new Date(l.value).getTime() : !1;
+    return (e, t) => (g(), P("div", h, [
+      s(m, u(e.$attrs, {
+        modelValue: l.value,
+        "onUpdate:modelValue": t[0] || (t[0] = (n) => l.value = n),
+        placeholder: p.value || "开始日期",
+        "disabled-date": D
+      }), null, 16, ["modelValue", "placeholder"]),
+      t[2] || (t[2] = b("span", { class: "separator" }, "至", -1)),
+      s(m, u(e.$attrs, {
+        modelValue: d.value,
+        "onUpdate:modelValue": t[1] || (t[1] = (n) => d.value = n),
+        placeholder: c.value || "结束日期",
+        "disabled-date": v
+      }), null, 16, ["modelValue", "placeholder"])
+    ]));
+  }
+});
+export {
+  E as default
+};

package/dist/components/AiDateRangePicker/types.ts

@@ -0,0 +1,33 @@
+/**
+ * AiDateRangePicker - 日期范围选择器
+ * 开始和结束时间分开选择，支持独立字段绑定
+ *
+ * 用法1：直接使用（通过 v-model）
+ * <AiDateRangePicker
+ *   v-model:startDate="form.startDate"
+ *   v-model:endDate="form.endDate"
+ *   value-format="YYYY-MM-DD"
+ * />
+ *
+ * 用法2：在AiForm中配置使用
+ * {
+ *   prop: 'dateRange',
+ *   label: '时间范围',
+ *   type: 'AiDateRangePicker',
+ *   col: 12,
+ *   attrs: {
+ *     startField: 'startDate',    // 指定开始日期字段名
+ *     endField: 'endDate',        // 指定结束日期字段名
+ *     valueFormat: 'YYYY-MM-DD'   // 必须指定格式，否则无法回显
+ *   }
+ * }
+ *
+ * 注意：
+ * - 必须配置 valueFormat 才能正确回显日期
+ * - startField 和 endField 用于指定 formData 中的字段名
+ */
+
+export interface IAiDateRangePickerEmits {
+  (e: 'update:startDate', value: string | number | Date | null): void
+  (e: 'update:endDate', value: string | number | Date | null): void
+}

package/dist/components/AiForm/README.md

@@ -0,0 +1,35 @@
+# 动态表单组件
+**基于Elementplus的el-form封装**
+## 入参
+```js
+// 组件props
+export interface IAiFormProps {
+  config: IFormItem[]                    // 表单配置数组
+  modelValue: Record<string, any>        // 表单数据对象
+  rules?: []  //单个表单项的校验规则
+  ... //其他需覆盖el-form属性的属性
+}
+// 表单项类型
+export interface IFormItem {
+  visible?: boolean //该表单项是否显示，需为响应式
+  prop: string              // 字段名
+  label?: string             // 标签文本
+  type: ''  // 表单项类型
+  placeholder?: string      // 占位符
+  required?: boolean        // 是否必填,默认为false
+  attrs?: Record<string, any>  // 透传到控件的属性
+  ... //其他需覆盖el-from-item属性的属性
+}
+```
+## 解释
+1. 表单项的visible属性，如果没传，默认为true，即显示。如果传入了，需根据传入的值响应式的控制表单项的显隐，使用v-if
+2. 表单项类型，我期望根据传入的值来动态判断，先去匹配当前组件库中是否存在，如果存在则使用，如果不存在则再匹配Elementplus中是否存在，如果还不存在则使用内置的错误组件，再页面上展示控件匹配错误。另外内置几种特殊的表单项
+    - "slot": 表示该表单项采用插槽方式
+    - "empty"：表示空的表单项，配合col用来占位，实现灵活布局
+    - "slotLabel"：表示该表单项的label采用插槽自定义
+    - "slotBoth": 表示该表单项的label和内容去都需要使用插槽，组件内部完成插槽名称转换，label插槽名称采用prop+"Label",内容区采用prop+"Content"
+3. 表单value发生变化，自动触发change事件，并回传当前变化的prop、value、fromValues
+4. 对于校验规则，使用传入的表单整体的rules，配置方式同el-form的rules。如果没有传入任何rules，则不校验。
+5. 表单项采用elementplus的栅栏布局，默认每个表单项col: 6，优先使用外部传入
+
+

package/dist/components/AiForm/index.mjs

@@ -1,4 +1,7 @@
-import f from "./index.vue.mjs";
+import o from "./index.vue.mjs";
+/* empty css            */
+import r from "../_virtual/_plugin-vue_export-helper.mjs";
+const f = /* @__PURE__ */ r(o, [["__scopeId", "data-v-a24f22b8"]]);
 export {
   f as default
 };

package/dist/components/AiForm/index.vue.mjs

@@ -1,45 +1,154 @@
-import { defineComponent as f, computed as h, openBlock as o, createElementBlock as t, withModifiers as V, Fragment as p, renderList as d, createElementVNode as _, toDisplayString as c, withDirectives as s, vModelText as b, vModelSelect as y, createCommentVNode as k } from "vue";
-const g = ["onUpdate:modelValue", "placeholder"], x = ["onUpdate:modelValue"], S = ["value"], M = /* @__PURE__ */ f({
+import { defineComponent as M, useSlots as O, ref as T, computed as S, resolveComponent as d, openBlock as a, createBlock as n, mergeProps as y, withCtx as c, createVNode as z, createElementBlock as g, Fragment as w, renderList as W, createSlots as j, renderSlot as R, resolveDynamicComponent as h, createCommentVNode as U, createTextVNode as G, toDisplayString as H, h as x } from "vue";
+const J = { key: 0 }, Q = /* @__PURE__ */ M({
   __name: "index",
   props: {
     config: {},
-    modelValue: {}
+    modelValue: {},
+    rules: {},
+    model: {},
+    labelPosition: {},
+    requireAsteriskPosition: {},
+    labelWidth: {},
+    labelSuffix: {},
+    inline: { type: Boolean },
+    inlineMessage: { type: Boolean },
+    statusIcon: { type: Boolean },
+    showMessage: { type: Boolean },
+    validateOnRuleChange: { type: Boolean },
+    hideRequiredAsterisk: { type: Boolean },
+    scrollToError: { type: Boolean },
+    scrollIntoViewOptions: { type: Boolean },
+    size: {},
+    disabled: { type: Boolean }
   },
-  emits: ["update:modelValue", "submit"],
-  setup(n, { emit: i }) {
-    const m = n, u = i, a = h({
+  emits: ["update:modelValue", "change"],
+  setup(k, { expose: A, emit: L }) {
+    const m = k, D = L, s = O(), f = T(), r = S({
       get: () => m.modelValue,
-      set: (r) => u("update:modelValue", r)
-    }), v = () => u("submit", a.value);
-    return (r, U) => (o(), t("form", {
-      onSubmit: V(v, ["prevent"])
-    }, [
-      (o(!0), t(p, null, d(n.config, (e) => (o(), t("div", {
-        key: e.prop,
-        class: "form-item"
-      }, [
-        _("label", null, c(e.label), 1),
-        e.type === "input" ? s((o(), t("input", {
-          key: 0,
-          "onUpdate:modelValue": (l) => a.value[e.prop] = l,
-          placeholder: e.placeholder
-        }, null, 8, g)), [
-          [b, a.value[e.prop]]
-        ]) : e.type === "select" ? s((o(), t("select", {
-          key: 1,
-          "onUpdate:modelValue": (l) => a.value[e.prop] = l
-        }, [
-          (o(!0), t(p, null, d(e.options, (l) => (o(), t("option", {
-            key: l.value,
-            value: l.value
-          }, c(l.label), 9, S))), 128))
-        ], 8, x)), [
-          [y, a.value[e.prop]]
-        ]) : k("", !0)
-      ]))), 128))
-    ], 32));
+      set: (t) => D("update:modelValue", t)
+    }), $ = S(() => {
+      const { config: t, modelValue: o, ...l } = m;
+      return l;
+    }), q = (t) => {
+      const { visible: o, prop: l, label: v, type: V, placeholder: C, required: e, col: b, attrs: _, ...i } = t;
+      return { label: v, ...i };
+    }, B = (t) => {
+      if (t === "slot" || t === "slotLabel" || t === "slotBoth" || t === "empty")
+        return "div";
+      try {
+        return d(t);
+      } catch {
+        try {
+          return d("el-" + t.replace(/^Ai/, "").toLowerCase());
+        } catch {
+          return "div";
+        }
+      }
+    }, I = (t) => {
+      var l;
+      const o = (l = s[t]) == null ? void 0 : l.call(s);
+      return o && o[0] ? () => o[0] : () => x("div");
+    }, N = (t) => {
+      var l;
+      const o = (l = s[t]) == null ? void 0 : l.call(s);
+      return o && o[1] ? () => o[1] : () => x("div");
+    }, E = (t) => {
+      D("change", t, r.value[t], r.value);
+    };
+    return A({
+      validate: () => {
+        var t;
+        return (t = f.value) == null ? void 0 : t.validate();
+      },
+      resetFields: () => {
+        var t;
+        return (t = f.value) == null ? void 0 : t.resetFields();
+      },
+      clearValidate: () => {
+        var t;
+        return (t = f.value) == null ? void 0 : t.clearValidate();
+      }
+    }), (t, o) => {
+      const l = d("el-form-item"), v = d("el-col"), V = d("el-row"), C = d("el-form");
+      return a(), n(C, y({
+        ref_key: "formRef",
+        ref: f,
+        model: r.value
+      }, $.value), {
+        default: c(() => [
+          z(V, { gutter: 16 }, {
+            default: c(() => [
+              (a(!0), g(w, null, W(k.config, (e, b) => (a(), g(w, {
+                key: e.prop || `empty-${b}`
+              }, [
+                e.visible !== !1 ? (a(), n(v, {
+                  key: 0,
+                  span: e.col || 6
+                }, {
+                  default: c(() => [
+                    e.type === "empty" ? (a(), g("div", J)) : (a(), n(l, y({
+                      key: 1,
+                      prop: e.prop
+                    }, { ref_for: !0 }, q(e)), j({
+                      default: c(() => {
+                        var _, i, P, F;
+                        return [
+                          e.type === "slot" && e.prop ? R(t.$slots, e.prop, { key: 0 }, void 0, !0) : e.type === "slotBoth" && e.prop ? (a(), n(h(N(e.prop)), { key: 1 })) : e.prop && e.type !== "AiDateRangePicker" ? (a(), n(h(B(e.type)), y({
+                            key: 2,
+                            modelValue: r.value[e.prop],
+                            "onUpdate:modelValue": (p) => r.value[e.prop] = p,
+                            placeholder: e.placeholder
+                          }, { ref_for: !0 }, e.attrs, {
+                            onChange: (p) => E(e.prop)
+                          }), null, 16, ["modelValue", "onUpdate:modelValue", "placeholder", "onChange"])) : e.type === "AiDateRangePicker" ? (a(), n(h(B(e.type)), y({
+                            key: 3,
+                            startDate: r.value[((_ = e.attrs) == null ? void 0 : _.startField) || "startDate"],
+                            "onUpdate:startDate": (p) => {
+                              var u;
+                              return r.value[((u = e.attrs) == null ? void 0 : u.startField) || "startDate"] = p;
+                            },
+                            endDate: r.value[((i = e.attrs) == null ? void 0 : i.endField) || "endDate"],
+                            "onUpdate:endDate": (p) => {
+                              var u;
+                              return r.value[((u = e.attrs) == null ? void 0 : u.endField) || "endDate"] = p;
+                            },
+                            startPlaceholder: (P = e.attrs) == null ? void 0 : P.startPlaceholder,
+                            endPlaceholder: (F = e.attrs) == null ? void 0 : F.endPlaceholder
+                          }, { ref_for: !0 }, e.attrs), null, 16, ["startDate", "onUpdate:startDate", "endDate", "onUpdate:endDate", "startPlaceholder", "endPlaceholder"])) : U("", !0)
+                        ];
+                      }),
+                      _: 2
+                    }, [
+                      e.type === "slotLabel" ? {
+                        name: "label",
+                        fn: c(() => [
+                          R(t.$slots, e.prop, {}, () => [
+                            G(H(e.label), 1)
+                          ], !0)
+                        ]),
+                        key: "0"
+                      } : void 0,
+                      e.type === "slotBoth" && e.prop ? {
+                        name: "label",
+                        fn: c(() => [
+                          (a(), n(h(I(e.prop))))
+                        ]),
+                        key: "1"
+                      } : void 0
+                    ]), 1040, ["prop"]))
+                  ]),
+                  _: 2
+                }, 1032, ["span"])) : U("", !0)
+              ], 64))), 128))
+            ]),
+            _: 3
+          })
+        ]),
+        _: 3
+      }, 16, ["model"]);
+    };
   }
 });
 export {
-  M as default
+  Q as default
 };