@liexx/form 0.0.1

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),n=require("element-plus"),d=(e,{model:o,setField:a})=>({modelValue:o[e.prop],"onUpdate:modelValue":c=>a(e.prop,c)}),B=(e,{model:o,setField:a})=>({fileList:o[e.prop],"onUpdate:fileList":c=>a(e.prop,c)}),b=e=>({disabled:e.disabled,...e.extends}),h=(e,o="输入")=>({placeholder:e.placeholder??`请${o}${e.label}`,...b(e)}),_=e=>e.options??[],C={input:(e,o)=>t.h(n.ElInput,{...d(e,o),...h(e)}),textarea:(e,o)=>t.h(n.ElInput,{...d(e,o),...h(e),type:"textarea"}),number:(e,o)=>t.h(n.ElInputNumber,{...d(e,o),...h(e)}),select:(e,o)=>t.h(n.ElSelect,{...d(e,o),clearable:!0,...h(e,"选择"),options:_(e)}),radio:(e,o)=>t.h(n.ElRadioGroup,{...d(e,o),...h(e),options:_(e)}),checkbox:(e,o)=>t.h(n.ElCheckboxGroup,{...d(e,o),...h(e),options:_(e)}),date:(e,o)=>t.h(n.ElDatePicker,{...d(e,o),...h(e,"选择日期"),type:"date"}),daterange:(e,o)=>t.h(n.ElDatePicker,{...d(e,o),...b(e),type:"daterange",startPlaceholder:"开始日期",endPlaceholder:"结束日期"}),time:(e,o)=>t.h(n.ElTimePicker,{...d(e,o),...h(e,"选择时间")}),cascader:(e,o)=>t.h(n.ElCascader,{...d(e,o),...h(e,"选择"),options:_(e)}),tree:(e,o)=>t.h(n.ElTreeSelect,{...d(e,o),...h(e,"选择"),data:_(e)}),rate:(e,o)=>t.h(n.ElRate,{...d(e,o),...b(e)}),switch:(e,o)=>t.h(n.ElSwitch,{...d(e,o),...b(e)}),file:(e,o)=>t.h(n.ElUpload,{...b(e),...B(e,o)},()=>t.h(n.ElButton,null,()=>"上传文件")),image:(e,o)=>t.h(n.ElUpload,{listType:"picture-card",...b(e),...B(e,o)})},j=t.defineComponent({props:{item:{type:Object,required:!0},model:{type:Object,required:!0},setField:{type:Function,required:!0}},setup(e){return()=>{var o;return((o=C[e.item.type])==null?void 0:o.call(C,e.item,e))??null}}}),L=e=>{const o=t.reactive(structuredClone(e??{}));return{model:o,setField:(l,r)=>{o[l]=r},getValue:()=>({...o}),setValue:l=>{Object.assign(o,l)}}},U=new Set(["select","date","daterange","time","cascader","tree","radio","checkbox"]),D={checkbox:"array",daterange:"array",file:"array",image:"array",number:"number",rate:"number",switch:"boolean"},I=e=>{const o=l=>l.map(r=>{var u;return JSON.stringify([r.prop,r.label,r.type,r.required??!1,(u=r.rules)==null?void 0:u.map(({regExp:i,message:m})=>[String(i),m])])}).join("|");let a="",c={};return{rules:t.computed(()=>{const l=e(),r=o(l);if(r===a)return c;const u={};return l.forEach(i=>{var E;const m=[],k=U.has(i.type)?"选择":"输入";i.required&&m.push({required:!0,type:D[i.type],message:`请${k}${i.label}`,trigger:["blur","change"]}),(E=i.rules)==null||E.forEach(({regExp:g,message:P})=>{m.push({validator:(V,v,y)=>g(v)?y():y(new Error(P)),trigger:["blur","change"]})}),m.length&&(u[i.prop]=m)}),a=r,c=u,u})}},$=e=>{const o=t.reactive({});return{items:t.computed(()=>e().map(s=>{const l=o[s.prop];if(!l)return s;const{extends:r,...u}=l;return{...s,...u,...r?{extends:{...s.extends,...r}}:{}}})),setProps:(s,l)=>{const r=o[s],{extends:u,...i}=l;o[s]={...r,...i,...u?{extends:{...r==null?void 0:r.extends,...u}}:{}}}}},G={key:0,class:"pro-form__required"},M={class:"form-item-tip"},W=t.defineComponent({__name:"index",props:{template:{default:()=>[]},gutter:{default:20},labelWidth:{default:"auto"},labelPosition:{default:"right"},scrollToError:{type:Boolean,default:!1},defaultValue:{default:()=>({})},tipPosition:{default:"bottom"}},emits:["change","init"],setup(e,{expose:o,emit:a}){const c=a,s=e,{model:l,setField:r,getValue:u,setValue:i}=L(s.defaultValue),{items:m,setProps:k}=$(()=>s.template),{rules:E}=I(()=>m.value),g=t.ref(),P=async()=>{var f;try{return await((f=g.value)==null?void 0:f.validate()),!0}catch{return!1}},V=()=>{var f;return(f=g.value)==null?void 0:f.resetFields()},v=()=>{var f;return(f=g.value)==null?void 0:f.clearValidate()},y=(f,x)=>{c("change",f,x)};return t.onMounted(()=>{c("init")}),o({model:l,getValue:u,setValue:i,setProps:k,validate:P,reset:V,clearValidate:v}),(f,x)=>{const w=t.resolveComponent("el-tooltip"),q=t.resolveComponent("el-form-item"),N=t.resolveComponent("el-col"),T=t.resolveComponent("el-row"),O=t.resolveComponent("el-form");return t.openBlock(),t.createBlock(O,{ref_key:"formRef",ref:g,class:"form","label-width":e.labelWidth,"label-position":e.labelPosition,model:t.unref(l),rules:t.unref(E),"scroll-to-error":e.scrollToError},{default:t.withCtx(()=>[t.createVNode(T,{gutter:e.gutter},{default:t.withCtx(()=>[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(t.unref(m),p=>(t.openBlock(),t.createBlock(N,{key:p.prop,span:p.span||24},{default:t.withCtx(()=>[t.createVNode(q,{"hide-required-asterisk":!0,prop:p.prop},{label:t.withCtx(()=>[p.required?(t.openBlock(),t.createElementBlock("span",G,"*")):t.createCommentVNode("",!0),t.createElementVNode("span",null,t.toDisplayString(p.label),1),p.tip&&e.tipPosition==="left"?(t.openBlock(),t.createBlock(w,{key:1,content:p.tip,placement:"top"},{default:t.withCtx(()=>[...x[0]||(x[0]=[t.createElementVNode("i",{class:"ri-question-fill",style:{"font-size":"16px",color:"#f56c6c"}},null,-1)])]),_:1},8,["content"])):t.createCommentVNode("",!0)]),default:t.withCtx(()=>[t.createVNode(t.unref(j),{item:p,model:t.unref(l),"set-field":t.unref(r),onChange:R=>y(R,p)},null,8,["item","model","set-field","onChange"]),p.tip&&e.tipPosition==="bottom"?(t.openBlock(),t.createBlock(w,{key:0,class:"box-item",effect:"dark",content:p.tip,placement:"top-start"},{default:t.withCtx(()=>[t.createElementVNode("div",M,t.toDisplayString(p.tip),1)]),_:2},1032,["content"])):t.createCommentVNode("",!0)]),_:2},1032,["prop"])]),_:2},1032,["span"]))),128))]),_:1},8,["gutter"])]),_:1},8,["label-width","label-position","model","rules","scroll-to-error"])}}}),Y=(e,o)=>{const a=e.__vccOpts||e;for(const[c,s]of o)a[c]=s;return a},F=Y(W,[["__scopeId","data-v-121a6606"]]);function z(e){e.component("ProForm",F)}const S=Object.assign(F,{install:z});exports.ProForm=S;exports.default=S;

package/dist/index.d.ts

@@ -0,0 +1,174 @@
+import { AllowedComponentProps } from 'vue';
+import { App } from 'vue';
+import { ComponentCustomProps } from 'vue';
+import { ComponentOptionsBase } from 'vue';
+import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
+import { CreateComponentPublicInstanceWithMixins } from 'vue';
+import { GlobalComponents } from 'vue';
+import { GlobalDirectives } from 'vue';
+import { PublicProps } from 'vue';
+import { VNodeProps } from 'vue';
+
+declare type FormModel_2 = Record<string, any>;
+
+declare type FormProps_2 = {
+    template: FromItems_2; // 表单配置
+    gutter?: number; // 表单间距
+    labelWidth?: number | string; // 表单label宽度
+    labelPosition?: "left" | "right" | "top"; // 表单label位置
+    scrollToError?: boolean; // 校验不通过时滚动到第一个错误字段
+    defaultValue?: FormModel_2; // 表单默认值
+    tipPosition?: "left" | "bottom"; // 表单提示位置
+};
+export { FormProps_2 as FormProps }
+
+declare type FormRule_2 = {
+    regExp: (value: any) => boolean;
+    message: string;
+};
+
+declare type FromItem_2 = {
+    label: string;
+    prop: string;
+    type:
+    | "input"
+    | "select"
+    | "date"
+    | "daterange"
+    | "cascader"
+    | "tree"
+    | "switch"
+    | "radio"
+    | "file"
+    | "image"
+    | "number"
+    | "textarea"
+    | "checkbox"
+    | "rate"
+    | "time"
+    | "file";
+    // 占位
+    span?: number;
+    // 输入框占位文本
+    placeholder?: string;
+    // 提示
+    tip?: string;
+    //是否必填
+    required?: boolean;
+    //自定义校验规则
+    rules?: FormRule_2[];
+    //是否禁用
+    disabled?: boolean;
+    //是否显示到表单
+    isForm?: boolean;
+    // 透传给组件的额外 props（如 select 的 options、daterange 的 type 等）
+    extends?: Record<string, any>;
+    // 字典值
+    dict?: string;
+    // 选项内容
+    options?: OptionItem_2[];
+    //通过api方式获取选择内容
+    optionsApi?: (params?: Record<string, any>) => Promise<Record<string, any>[]>;
+};
+
+declare type FromItems_2 = FromItem_2[];
+export { FromItems_2 as FromItems }
+
+/**
+ * 全局注册 ProForm 组件。
+ * 用法：app.use(ProForm)
+ */
+declare function install(app: App): void;
+
+declare type OptionItem_2 = {
+    label?: string;
+    value?: any;
+    children?: OptionItem_2[];
+    [key: string]: any; // 允许自定义字段，如 cascader 的 deptName/deptId
+};
+
+declare const ProForm: {
+    new (...args: any[]): CreateComponentPublicInstanceWithMixins<Readonly<FormProps_2> & Readonly<{
+    onChange?: ((...args: any[]) => any) | undefined;
+    onInit?: ((...args: any[]) => any) | undefined;
+    }>, {
+    model: FormModel_2;
+    getValue: () => FormModel_2;
+    setValue: (data: FormModel_2) => void;
+    setProps: (prop: string, partial: Partial<FromItem_2>) => void;
+    validate: () => Promise<boolean>;
+    reset: () => void | undefined;
+    clearValidate: () => void | undefined;
+    }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    change: (...args: any[]) => void;
+    init: (...args: any[]) => void;
+    }, PublicProps, {
+    template: FromItems_2;
+    defaultValue: FormModel_2;
+    gutter: number;
+    labelWidth: number | string;
+    labelPosition: "left" | "right" | "top";
+    scrollToError: boolean;
+    tipPosition: "left" | "bottom";
+    }, false, {}, {}, GlobalComponents, GlobalDirectives, string, {
+    formRef: unknown;
+    }, any, ComponentProvideOptions, {
+    P: {};
+    B: {};
+    D: {};
+    C: {};
+    M: {};
+    Defaults: {};
+    }, Readonly<FormProps_2> & Readonly<{
+    onChange?: ((...args: any[]) => any) | undefined;
+    onInit?: ((...args: any[]) => any) | undefined;
+    }>, {
+    model: FormModel_2;
+    getValue: () => FormModel_2;
+    setValue: (data: FormModel_2) => void;
+    setProps: (prop: string, partial: Partial<FromItem_2>) => void;
+    validate: () => Promise<boolean>;
+    reset: () => void | undefined;
+    clearValidate: () => void | undefined;
+    }, {}, {}, {}, {
+    template: FromItems_2;
+    defaultValue: FormModel_2;
+    gutter: number;
+    labelWidth: number | string;
+    labelPosition: "left" | "right" | "top";
+    scrollToError: boolean;
+    tipPosition: "left" | "bottom";
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & ComponentOptionsBase<Readonly<FormProps_2> & Readonly<{
+onChange?: ((...args: any[]) => any) | undefined;
+onInit?: ((...args: any[]) => any) | undefined;
+}>, {
+model: FormModel_2;
+getValue: () => FormModel_2;
+setValue: (data: FormModel_2) => void;
+setProps: (prop: string, partial: Partial<FromItem_2>) => void;
+validate: () => Promise<boolean>;
+reset: () => void | undefined;
+clearValidate: () => void | undefined;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+change: (...args: any[]) => void;
+init: (...args: any[]) => void;
+}, string, {
+template: FromItems_2;
+defaultValue: FormModel_2;
+gutter: number;
+labelWidth: number | string;
+labelPosition: "left" | "right" | "top";
+scrollToError: boolean;
+tipPosition: "left" | "bottom";
+}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & VNodeProps & AllowedComponentProps & ComponentCustomProps & {
+    install: typeof install;
+};
+export { ProForm }
+export default ProForm;
+
+export { }

package/dist/index.js

@@ -0,0 +1,301 @@
+import { defineComponent as D, h as l, reactive as G, computed as W, ref as M, onMounted as Q, resolveComponent as E, openBlock as m, createBlock as V, unref as _, withCtx as h, createVNode as S, createElementBlock as j, Fragment as X, renderList as Z, createElementVNode as q, toDisplayString as B, createCommentVNode as T } from "vue";
+import { ElUpload as N, ElButton as ee, ElSwitch as te, ElRate as oe, ElTreeSelect as re, ElCascader as le, ElTimePicker as ne, ElDatePicker as U, ElCheckboxGroup as se, ElRadioGroup as ae, ElSelect as ce, ElInputNumber as ue, ElInput as $ } from "element-plus";
+const u = (e, { model: t, setField: s }) => ({
+  modelValue: t[e.prop],
+  "onUpdate:modelValue": (a) => s(e.prop, a)
+}), I = (e, { model: t, setField: s }) => ({
+  fileList: t[e.prop],
+  "onUpdate:fileList": (a) => s(e.prop, a)
+}), y = (e) => ({
+  disabled: e.disabled,
+  ...e.extends
+}), f = (e, t = "输入") => ({
+  placeholder: e.placeholder ?? `请${t}${e.label}`,
+  ...y(e)
+}), x = (e) => e.options ?? [], O = {
+  input: (e, t) => l($, { ...u(e, t), ...f(e) }),
+  textarea: (e, t) => l($, {
+    ...u(e, t),
+    ...f(e),
+    type: "textarea"
+  }),
+  number: (e, t) => l(ue, { ...u(e, t), ...f(e) }),
+  select: (e, t) => l(ce, {
+    ...u(e, t),
+    clearable: !0,
+    ...f(e, "选择"),
+    options: x(e)
+  }),
+  radio: (e, t) => l(ae, {
+    ...u(e, t),
+    ...f(e),
+    options: x(e)
+  }),
+  checkbox: (e, t) => l(se, {
+    ...u(e, t),
+    ...f(e),
+    options: x(e)
+  }),
+  date: (e, t) => l(U, {
+    ...u(e, t),
+    ...f(e, "选择日期"),
+    type: "date"
+  }),
+  daterange: (e, t) => l(U, {
+    ...u(e, t),
+    ...y(e),
+    type: "daterange",
+    startPlaceholder: "开始日期",
+    endPlaceholder: "结束日期"
+  }),
+  time: (e, t) => l(ne, {
+    ...u(e, t),
+    ...f(e, "选择时间")
+  }),
+  cascader: (e, t) => l(le, {
+    ...u(e, t),
+    ...f(e, "选择"),
+    options: x(e)
+  }),
+  tree: (e, t) => l(re, {
+    ...u(e, t),
+    ...f(e, "选择"),
+    data: x(e)
+  }),
+  rate: (e, t) => l(oe, { ...u(e, t), ...y(e) }),
+  switch: (e, t) => l(te, { ...u(e, t), ...y(e) }),
+  file: (e, t) => l(
+    N,
+    { ...y(e), ...I(e, t) },
+    () => l(ee, null, () => "上传文件")
+  ),
+  image: (e, t) => l(N, {
+    listType: "picture-card",
+    ...y(e),
+    ...I(e, t)
+  })
+}, de = D({
+  props: {
+    item: { type: Object, required: !0 },
+    model: { type: Object, required: !0 },
+    setField: {
+      type: Function,
+      required: !0
+    }
+  },
+  setup(e) {
+    return () => {
+      var t;
+      return ((t = O[e.item.type]) == null ? void 0 : t.call(O, e.item, e)) ?? null;
+    };
+  }
+}), ie = (e) => {
+  const t = G(structuredClone(e ?? {}));
+  return { model: t, setField: (r, o) => {
+    t[r] = o;
+  }, getValue: () => ({ ...t }), setValue: (r) => {
+    Object.assign(t, r);
+  } };
+}, pe = /* @__PURE__ */ new Set([
+  "select",
+  "date",
+  "daterange",
+  "time",
+  "cascader",
+  "tree",
+  "radio",
+  "checkbox"
+]), fe = {
+  checkbox: "array",
+  daterange: "array",
+  file: "array",
+  image: "array",
+  number: "number",
+  rate: "number",
+  switch: "boolean"
+}, ge = (e) => {
+  const t = (r) => r.map(
+    (o) => {
+      var c;
+      return JSON.stringify([
+        o.prop,
+        o.label,
+        o.type,
+        o.required ?? !1,
+        (c = o.rules) == null ? void 0 : c.map(({ regExp: d, message: g }) => [String(d), g])
+      ]);
+    }
+  ).join("|");
+  let s = "", a = {};
+  return { rules: W(() => {
+    const r = e(), o = t(r);
+    if (o === s) return a;
+    const c = {};
+    return r.forEach((d) => {
+      var P;
+      const g = [], F = pe.has(d.type) ? "选择" : "输入";
+      d.required && g.push({
+        required: !0,
+        type: fe[d.type],
+        message: `请${F}${d.label}`,
+        trigger: ["blur", "change"]
+      }), (P = d.rules) == null || P.forEach(({ regExp: b, message: w }) => {
+        g.push({
+          validator: (R, C, k) => b(C) ? k() : k(new Error(w)),
+          trigger: ["blur", "change"]
+        });
+      }), g.length && (c[d.prop] = g);
+    }), s = o, a = c, c;
+  }) };
+}, he = (e) => {
+  const t = G({});
+  return { items: W(
+    () => e().map((n) => {
+      const r = t[n.prop];
+      if (!r) return n;
+      const { extends: o, ...c } = r;
+      return {
+        ...n,
+        ...c,
+        // extends 单独浅合并，避免整体替换丢掉原有透传 props
+        ...o ? { extends: { ...n.extends, ...o } } : {}
+      };
+    })
+  ), setProps: (n, r) => {
+    const o = t[n], { extends: c, ...d } = r;
+    t[n] = {
+      ...o,
+      ...d,
+      ...c ? { extends: { ...o == null ? void 0 : o.extends, ...c } } : {}
+    };
+  } };
+}, be = {
+  key: 0,
+  class: "pro-form__required"
+}, me = { class: "form-item-tip" }, _e = /* @__PURE__ */ D({
+  __name: "index",
+  props: {
+    template: { default: () => [] },
+    gutter: { default: 20 },
+    labelWidth: { default: "auto" },
+    labelPosition: { default: "right" },
+    scrollToError: { type: Boolean, default: !1 },
+    defaultValue: { default: () => ({}) },
+    tipPosition: { default: "bottom" }
+  },
+  emits: ["change", "init"],
+  setup(e, { expose: t, emit: s }) {
+    const a = s, n = e, { model: r, setField: o, getValue: c, setValue: d } = ie(n.defaultValue), { items: g, setProps: F } = he(() => n.template), { rules: P } = ge(() => g.value), b = M(), w = async () => {
+      var p;
+      try {
+        return await ((p = b.value) == null ? void 0 : p.validate()), !0;
+      } catch {
+        return !1;
+      }
+    }, R = () => {
+      var p;
+      return (p = b.value) == null ? void 0 : p.resetFields();
+    }, C = () => {
+      var p;
+      return (p = b.value) == null ? void 0 : p.clearValidate();
+    }, k = (p, v) => {
+      a("change", p, v);
+    };
+    return Q(() => {
+      a("init");
+    }), t({
+      model: r,
+      getValue: c,
+      setValue: d,
+      setProps: F,
+      validate: w,
+      reset: R,
+      clearValidate: C
+    }), (p, v) => {
+      const L = E("el-tooltip"), z = E("el-form-item"), A = E("el-col"), J = E("el-row"), H = E("el-form");
+      return m(), V(H, {
+        ref_key: "formRef",
+        ref: b,
+        class: "form",
+        "label-width": e.labelWidth,
+        "label-position": e.labelPosition,
+        model: _(r),
+        rules: _(P),
+        "scroll-to-error": e.scrollToError
+      }, {
+        default: h(() => [
+          S(J, { gutter: e.gutter }, {
+            default: h(() => [
+              (m(!0), j(X, null, Z(_(g), (i) => (m(), V(A, {
+                key: i.prop,
+                span: i.span || 24
+              }, {
+                default: h(() => [
+                  S(z, {
+                    "hide-required-asterisk": !0,
+                    prop: i.prop
+                  }, {
+                    label: h(() => [
+                      i.required ? (m(), j("span", be, "*")) : T("", !0),
+                      q("span", null, B(i.label), 1),
+                      i.tip && e.tipPosition === "left" ? (m(), V(L, {
+                        key: 1,
+                        content: i.tip,
+                        placement: "top"
+                      }, {
+                        default: h(() => [...v[0] || (v[0] = [
+                          q("i", {
+                            class: "ri-question-fill",
+                            style: { "font-size": "16px", color: "#f56c6c" }
+                          }, null, -1)
+                        ])]),
+                        _: 1
+                      }, 8, ["content"])) : T("", !0)
+                    ]),
+                    default: h(() => [
+                      S(_(de), {
+                        item: i,
+                        model: _(r),
+                        "set-field": _(o),
+                        onChange: (K) => k(K, i)
+                      }, null, 8, ["item", "model", "set-field", "onChange"]),
+                      i.tip && e.tipPosition === "bottom" ? (m(), V(L, {
+                        key: 0,
+                        class: "box-item",
+                        effect: "dark",
+                        content: i.tip,
+                        placement: "top-start"
+                      }, {
+                        default: h(() => [
+                          q("div", me, B(i.tip), 1)
+                        ]),
+                        _: 2
+                      }, 1032, ["content"])) : T("", !0)
+                    ]),
+                    _: 2
+                  }, 1032, ["prop"])
+                ]),
+                _: 2
+              }, 1032, ["span"]))), 128))
+            ]),
+            _: 1
+          }, 8, ["gutter"])
+        ]),
+        _: 1
+      }, 8, ["label-width", "label-position", "model", "rules", "scroll-to-error"]);
+    };
+  }
+}), ye = (e, t) => {
+  const s = e.__vccOpts || e;
+  for (const [a, n] of t)
+    s[a] = n;
+  return s;
+}, Y = /* @__PURE__ */ ye(_e, [["__scopeId", "data-v-121a6606"]]);
+function Ee(e) {
+  e.component("ProForm", Y);
+}
+const ke = Object.assign(Y, { install: Ee });
+export {
+  ke as ProForm,
+  ke as default
+};

package/dist/style.css

@@ -0,0 +1 @@
+.form-item-tip[data-v-121a6606]{width:100%;margin-top:4px;font-size:12px;line-height:1.5;color:#f56c6c;font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}[data-v-121a6606] .el-form-item__label:before{display:none!important}.pro-form__required[data-v-121a6606]{color:#f56c6c;margin-left:4px;font-size:18px}.pro-form__tip-icon[data-v-121a6606]{margin-left:4px;font-size:14px;color:#909399;cursor:help;vertical-align:middle}[data-v-121a6606] .box-item{color:#f56c6c}[data-v-121a6606] .el-input-number,[data-v-121a6606] .el-cascader{width:100%!important}[data-v-121a6606] .el-select,[data-v-121a6606] .el-cascader,[data-v-121a6606] .el-tree-select,[data-v-121a6606] .el-date-picker,[data-v-121a6606] .el-input{width:100%}[data-v-121a6606] .el-upload{--el-upload-picture-card-size: 100px}[data-v-121a6606] .el-upload .el-upload--picture-card,[data-v-121a6606] .el-upload .el-upload-list--picture-card .el-upload-list__item{border-radius:8px}

package/interface/client.d.ts

@@ -0,0 +1,79 @@
+/**
+ * @liexx/table/interface/client
+ *
+ * 表格类型全局声明。（由 scripts/sync-interface.mjs 从 types/pro-form.ts 自动生成，请勿手工修改）
+ * 在 tsconfig.app.json 的 compilerOptions.types 中添加 "@liexx/table/interface/client"，
+ * 即可无需 import 直接使用这些类型。
+ */
+
+declare type FromItems = FromItem[];
+
+declare type OptionItem = {
+  label?: string;
+  value?: any;
+  children?: OptionItem[];
+  [key: string]: any; // 允许自定义字段，如 cascader 的 deptName/deptId
+};
+
+declare type FormModel = Record<string, any>;
+
+declare type FormRule = {
+  regExp: (value: any) => boolean;
+  message: string;
+};
+
+declare type FormProps = {
+  template: FromItems; // 表单配置
+  gutter?: number; // 表单间距
+  labelWidth?: number | string; // 表单label宽度
+  labelPosition?: "left" | "right" | "top"; // 表单label位置
+  scrollToError?: boolean; // 校验不通过时滚动到第一个错误字段
+  defaultValue?: FormModel; // 表单默认值
+  tipPosition?: "left" | "bottom"; // 表单提示位置
+};
+
+declare type FromItem = {
+  label: string;
+  prop: string;
+  type:
+    | "input"
+    | "select"
+    | "date"
+    | "daterange"
+    | "cascader"
+    | "tree"
+    | "switch"
+    | "radio"
+    | "file"
+    | "image"
+    | "number"
+    | "textarea"
+    | "checkbox"
+    | "rate"
+    | "time"
+    | "file";
+  // 占位
+  span?: number;
+  // 输入框占位文本
+  placeholder?: string;
+  // 提示
+  tip?: string;
+  //是否必填
+  required?: boolean;
+  //自定义校验规则
+  rules?: FormRule[];
+  //是否禁用
+  disabled?: boolean;
+  //是否显示到表单
+  isForm?: boolean;
+  // 透传给组件的额外 props（如 select 的 options、daterange 的 type 等）
+  extends?: Record<string, any>;
+  // 字典值
+  dict?: string;
+  // 选项内容
+  options?: OptionItem[];
+  //通过api方式获取选择内容
+  optionsApi?: (params?: Record<string, any>) => Promise<Record<string, any>[]>;
+};
+
+declare type ProTableProps<T = any> = TableProps

package/interface/form.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @liexx/table/interface/form
+ *
+ * 表格类型全局声明。（由 scripts/sync-interface.mjs 从 types/pro-form.ts 自动生成，请勿手工修改）
+ * 在 tsconfig.app.json 的 compilerOptions.types 中添加 "@liexx/table/interface/form"，
+ * 即可无需 import 直接使用这些类型。
+ */
+
+
+
+declare type FormItems = TableFilter[]

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@liexx/form",
+  "version": "0.0.1",
+  "description": "Enhanced form component for Vue 3 based on Element Plus",
+  "type": "module",
+  "license": "MIT",
+  "author": "ljc",
+  "packageManager": "pnpm@10.26.0",
+  "keywords": [
+    "vue",
+    "vue3",
+    "form",
+    "pro-form",
+    "element-plus"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "interface"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./interface/client": {
+      "types": "./interface/client.d.ts"
+    },
+    "./interface/form": {
+      "types": "./interface/form.d.ts"
+    },
+    "./style.css": "./dist/style.css",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "dev": "vite",
+    "sync:interface": "node scripts/sync-interface.mjs",
+    "build": "npm run sync:interface && vue-tsc --noEmit && vite build",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "vue-tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "element-plus": "^2.13.7",
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "@microsoft/api-extractor": "^7.59.1",
+    "@vitejs/plugin-vue": "^5.2.0",
+    "@vue/test-utils": "^2.4.6",
+    "@vue/tsconfig": "^0.7.0",
+    "element-plus": "^2.14.3",
+    "jsdom": "^25.0.0",
+    "sass-embedded": "^1.100.0",
+    "typescript": "~5.7.0",
+    "vite": "^6.0.0",
+    "vite-plugin-dts": "^4.5.0",
+    "vitest": "^2.1.0",
+    "vue": "^3.5.13",
+    "vue-tsc": "^2.2.0"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "dependencies": {
+    "remixicon": "^4.9.1"
+  }
+}