element-plus-suite 0.0.2 → 0.0.4

package/README.md

@@ -45,6 +45,7 @@ import { createApp } from 'vue'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import ElementPlusSuite from 'element-plus-suite'
+import 'element-plus-suite/dist/index.css'
 import App from './App.vue'
 
 const app = createApp(App)
@@ -125,4 +126,89 @@ const requestUsers: TableProRequest<User> = async ({
 
 ## License
 
-MIT
+MIT
+## ElFormPro
+
+`ElFormPro` 是基于 schema 的 Element Plus 表单组件：
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElFormPro, type FormProSchemaItem } from 'element-plus-suite'
+
+const formData = ref({
+  keyword: '',
+  status: '',
+})
+
+const schema: FormProSchemaItem[] = [
+  { key: 'keyword', label: '关键词', type: 'input', col: { span: 8 } },
+  {
+    key: 'status',
+    label: '状态',
+    type: 'select',
+    col: { span: 8 },
+    fieldProps: {
+      options: [
+        { name: '启用', id: 'active' },
+        { name: '停用', id: 'disabled' },
+      ],
+      props: {
+        label: 'name',
+        value: 'id',
+      },
+    },
+  },
+]
+</script>
+
+<template>
+  <ElFormPro v-model="formData" :schema="schema" />
+</template>
+```
+
+## 高级筛选
+
+`ElTablePro` 可以通过 `filter` 组合 `ElFormPro`：
+
+```vue
+<ElTablePro
+  :columns="columns"
+  :request="requestUsers"
+  :filter="{
+    schema: filterSchema,
+    model: filters,
+    formConfig: {
+      showCollapseButton: true,
+      collapseRows: 1,
+    },
+  }"
+  row-key="id"
+/>
+```
+
+筛选草稿与已应用条件分离。点击查询后才应用条件并回到第一页；切换分页时继续使用已应用条件。
+
+`request` 会收到统一参数：
+
+```ts
+const requestUsers: TableProRequest<User, UserQuery> = async ({
+  page,
+  pageSize,
+  query,
+  signal,
+}) => {
+  const params = new URLSearchParams({
+    page: String(page ?? 1),
+    pageSize: String(pageSize ?? 20),
+    keyword: query.keyword,
+  })
+  const response = await fetch(`/api/users?${params}`, { signal })
+  const payload = await response.json()
+
+  return {
+    data: payload.list,
+    total: payload.total,
+  }
+}
+```

package/dist/form-pro/component-map.d.ts

@@ -0,0 +1,32 @@
+import { FormProCol, FormProColProps, FormProSchemaItem } from './types';
+export declare const formProComponentMap: Record<string, any>;
+export declare function resolveFormProComponent(item: FormProSchemaItem): any;
+export declare const formProRootProps: string[];
+export declare function getFormProFieldProps(item: FormProSchemaItem): Record<string, any>;
+export declare function normalizeColumnProps(col?: FormProCol): FormProColProps;
+export declare function resolveColumnProps(item: FormProSchemaItem, formConfig: {
+    col?: FormProCol;
+}): {
+    span: number;
+    offset?: number;
+    xs?: number | {
+        span?: number;
+        offset?: number;
+    };
+    sm?: number | {
+        span?: number;
+        offset?: number;
+    };
+    md?: number | {
+        span?: number;
+        offset?: number;
+    };
+    lg?: number | {
+        span?: number;
+        offset?: number;
+    };
+    xl?: number | {
+        span?: number;
+        offset?: number;
+    };
+};

package/dist/form-pro/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ElFormPro } from './index.vue';
+export type { FormProButtonConfig, FormProButtonOptions, FormProButtons, FormProCol, FormProColProps, FormProConfig, FormProFieldType, FormProInstance, FormProOption, FormProOwnConfig, FormProProps, FormProSchemaItem, FormProValue, } from './types';

package/dist/form-pro/index.vue.d.ts

@@ -0,0 +1,70 @@
+import { PropType } from 'vue';
+import { FormProInternalConfig, FormProSchemaItem, FormProValue } from './types';
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    schema: {
+        type: PropType<FormProSchemaItem[]>;
+        default: () => never[];
+    };
+    modelValue: {
+        type: PropType<FormProValue>;
+        default: undefined;
+    };
+    formConfig: {
+        type: PropType<FormProInternalConfig>;
+        default: () => {};
+    };
+    /** 仅供 TablePro 的筛选表单开启折叠。 */
+    collapsible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 搜索模式将默认提交文案改为“查询”，仅由 TablePro 使用。 */
+    searchMode: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    'update:modelValue': (_value: FormProValue) => true;
+    submit: (_value: FormProValue) => true;
+    reset: (_value: FormProValue) => true;
+    cancel: () => true;
+    change: (_value: FormProValue) => true;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    schema: {
+        type: PropType<FormProSchemaItem[]>;
+        default: () => never[];
+    };
+    modelValue: {
+        type: PropType<FormProValue>;
+        default: undefined;
+    };
+    formConfig: {
+        type: PropType<FormProInternalConfig>;
+        default: () => {};
+    };
+    /** 仅供 TablePro 的筛选表单开启折叠。 */
+    collapsible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 搜索模式将默认提交文案改为“查询”，仅由 TablePro 使用。 */
+    searchMode: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((_value: FormProValue) => any) | undefined;
+    onChange?: ((_value: FormProValue) => any) | undefined;
+    onCancel?: (() => any) | undefined;
+    onReset?: ((_value: FormProValue) => any) | undefined;
+    onSubmit?: ((_value: FormProValue) => any) | undefined;
+}>, {
+    schema: FormProSchemaItem[];
+    modelValue: FormProValue;
+    formConfig: FormProInternalConfig;
+    collapsible: boolean;
+    searchMode: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/form-pro/types.d.ts

@@ -0,0 +1,123 @@
+import { FormInstance, FormProps } from 'element-plus';
+import { Component, VNode, VNodeChild } from 'vue';
+export type FormProValue = Record<string, any>;
+export interface FormProColProps {
+    span?: number;
+    offset?: number;
+    xs?: number | {
+        span?: number;
+        offset?: number;
+    };
+    sm?: number | {
+        span?: number;
+        offset?: number;
+    };
+    md?: number | {
+        span?: number;
+        offset?: number;
+    };
+    lg?: number | {
+        span?: number;
+        offset?: number;
+    };
+    xl?: number | {
+        span?: number;
+        offset?: number;
+    };
+    [key: string]: any;
+}
+export type FormProCol = number | FormProColProps;
+export type FormProFieldType = 'input' | 'password' | 'number' | 'select' | 'selectV2' | 'radio' | 'checkbox' | 'date' | 'time' | 'timeSelect' | 'autocomplete' | 'cascader' | 'inputTag' | 'rate' | 'slider' | 'switch' | 'tree' | 'transfer' | 'upload' | 'mention';
+export interface FormProOption {
+    label: string;
+    value: string | number | boolean;
+    disabled?: boolean;
+    [key: string]: any;
+}
+export interface FormProSchemaItem {
+    /** 组合字段容器可以省略 key，由 children 保存实际字段值。 */
+    key?: string;
+    label?: string | (() => VNodeChild);
+    type?: FormProFieldType | Component | VNode | string;
+    col?: FormProCol;
+    labelWidth?: string | number;
+    rules?: any;
+    hidden?: boolean;
+    defaultValue?: any;
+    style?: Record<string, any>;
+    /** 透传给 ElFormItem 的属性 */
+    formItemProps?: Record<string, any>;
+    /** 透传给字段组件的属性，包括控件内部插槽 fieldProps.slots */
+    fieldProps?: Record<string, any>;
+    /** 替换整个字段控件的插槽名，默认使用 key */
+    slot?: string;
+    /** 同一表单项内的子字段，用于日期与时间等组合控件 */
+    children?: FormProSchemaItem[];
+    /** 子字段之间的分隔符，默认空字符串 */
+    separator?: string;
+    [key: string]: any;
+}
+export interface FormProButtonOptions {
+    text?: string;
+    type?: string;
+    plain?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    [key: string]: any;
+}
+export type FormProButtonConfig = false | FormProButtonOptions;
+export interface FormProButtons {
+    submit?: FormProButtonConfig;
+    reset?: FormProButtonConfig;
+    cancel?: FormProButtonConfig;
+}
+export interface FormProOwnConfig {
+    /** 按钮区域水平对齐方式，默认 `right` */
+    buttonAlign?: 'start' | 'center' | 'right';
+    /** 提交、重置、取消按钮配置 */
+    buttons?: FormProButtons;
+    /** 透传给 ElRow 的属性 */
+    row?: Record<string, any>;
+    /** 所有字段默认的 ElCol 配置，数字表示 span，可被单个 schema 项的 col 覆盖 */
+    col?: FormProCol;
+    /** 操作按钮所在列的 ElCol 配置，数字表示 span */
+    actionCol?: FormProCol;
+    /** 响应式标签位置，扩展了 ElForm 的 labelPosition */
+    labelPosition?: FormProps['labelPosition'] | {
+        base?: FormProps['labelPosition'];
+        xs?: FormProps['labelPosition'];
+        sm?: FormProps['labelPosition'];
+        md?: FormProps['labelPosition'];
+        lg?: FormProps['labelPosition'];
+        xl?: FormProps['labelPosition'];
+    };
+    /** 标签宽度，支持 ElForm 默认值以及各表单项继承 */
+    labelWidth?: FormProps['labelWidth'];
+}
+/** ElFormPro 配置：FormPro 自有配置和透传给 ElForm 的属性。 */
+export type FormProConfig = FormProOwnConfig & Omit<FormProps, 'labelPosition' | 'labelWidth'> & {
+    /** 渲染在表单根节点上的 class */
+    class?: any;
+};
+/** 仅供 ElFormPro 内部和 TablePro 使用的扩展配置。 */
+export type FormProInternalConfig = FormProConfig & {
+    showCollapseButton?: boolean;
+    collapseRows?: number;
+    collapseCount?: number;
+    collapsed?: boolean;
+};
+export interface FormProProps {
+    schema?: FormProSchemaItem[];
+    modelValue?: FormProValue;
+    formConfig?: FormProConfig;
+    [key: string]: any;
+}
+export interface FormProInstance {
+    validate: FormInstance['validate'];
+    validateField: FormInstance['validateField'];
+    resetFields: FormInstance['resetFields'];
+    clearValidate: FormInstance['clearValidate'];
+    scrollToError: () => Promise<void>;
+    setState: (options: FormProConfig) => void;
+    getValues: () => FormProValue;
+}

package/dist/form-pro/utils.d.ts

@@ -0,0 +1,5 @@
+import { FormProSchemaItem, FormProValue } from './types';
+/** 根据 schema 生成表单初始值。 */
+export declare function getSchemaDefaults(schema: FormProSchemaItem[]): FormProValue;
+/** 判断当前是否由外部传入 model。 */
+export declare function hasModelValue(value: unknown): value is FormProValue;

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("vue"),b=require("element-plus");function M(e,t){return e.flatMap(r=>{if(r.visible===!1)return[];const{visible:l,slot:c,headerSlot:s,render:u,headerRender:n,autoMerge:a,children:d,...m}=r,p={...m},g={},h=c?t[c]:void 0,y=s?t[s]:void 0;if(h?g.default=h:u&&(g.default=f=>u({row:f.row,column:f.column,$index:f.$index})),y?g.header=y:n&&(g.header=f=>n({column:f.column,$index:f.$index,store:f.store,_self:f._self})),d?.length){const f={default:()=>M(d,t)};return g.header&&(f.header=g.header),[o.h(b.ElTableColumn,p,f)]}return[o.h(b.ElTableColumn,p,Object.keys(g).length?g:void 0)]})}function z(e){return e.prop??e.property}function x(e,t){if(e===null||typeof e!="object")return;const r=e;if(Object.prototype.hasOwnProperty.call(r,t))return r[t];if(!t.includes("."))return;let l=r;for(const c of t.split(".")){if(l===null||typeof l!="object")return;l=l[c]}return l}function q(e){return e.flatMap(t=>t.visible===!1?[]:t.children?.length?q(t.children):[t])}function C(e,t=[]){const r=q(e),l=new Map;for(const n of r){const a=z(n);a&&!l.has(a)&&l.set(a,n)}const c=new Set,s=[],u=n=>{!n||c.has(n)||!l.has(n)||(c.add(n),s.push({key:n,getValue:a=>x(a,n)}))};return t.forEach(u),r.forEach(n=>{n.autoMerge&&u(z(n))}),s}function D(e,t){const r=e.length,l=new Map(t.map(u=>[u.key,Array.from({length:r},()=>1)]));if(!r||!t.length)return l;const c=e.map(u=>t.map(n=>n.getValue(u))),s=t.map(()=>0);for(let u=1;u<=r;u+=1){let n=!0;for(let a=0;a<t.length;a+=1){const d=u<r&&n&&c[u][a]===c[u-1][a];if(!d){const m=l.get(t[a].key),p=s[a],g=u-p;m[p]=g;for(let h=p+1;h<u;h+=1)m[h]=0;s[a]=u}n=d}}return l}function I(e,t="children"){return e.some(r=>{if(r===null||typeof r!="object")return!1;const l=r[t];return Array.isArray(l)&&l.length>0})}function L(e){const t=o.computed(()=>C(e.columns(),e.mergeFields())),r=o.computed(()=>t.value.length?e.tableRef.value?.store?.states?.data?.value??e.data.value:e.data.value),l=o.computed(()=>{if(!t.value.length||e.lazy())return new Map;const s=e.treeProps()?.children??"children",u=r.value;return I(u,s)?new Map:D(u,t.value)});return{spanMethod:o.computed(()=>{const s=e.userSpanMethod();return t.value.length?u=>{const n=s?.(u);if(n!==void 0)return n;const a=u.column.property,d=a?l.value.get(a)?.[u.rowIndex]:void 0;if(!(d===void 0||d===1))return{rowspan:d,colspan:1}}:s}),spanMap:l}}const T={page:1,pageSize:20,pageSizes:[10,20,50,100],layout:"total, sizes, prev, pager, next, jumper",background:!0};function _(e){return e===!1?null:{...T,...e===!0?{}:e??{}}}function O(e){const t=o.computed(()=>_(e())),r=o.shallowRef(t.value?.page??1),l=o.shallowRef(t.value?.pageSize??20);o.watch(()=>t.value?.page,n=>{n!==void 0&&(r.value=n)}),o.watch(()=>t.value?.pageSize,n=>{n!==void 0&&(l.value=n)});const c=o.computed(()=>t.value?r.value:null),s=o.computed(()=>t.value?l.value:null);function u(n){l.value=n,r.value=1}return{enabled:o.computed(()=>t.value!=null),config:t,currentPage:r,pageSize:l,requestPage:c,requestPageSize:s,setPageSize:u}}function j(e){const t=o.shallowRef(!1);let r=null,l=0;async function c(){const u=e.request();if(!u)return;r?.abort(),r=new AbortController;const n=++l,a=r;t.value=!0;try{const d=await u({page:e.page(),pageSize:e.pageSize(),signal:a.signal});if(a.signal.aborted||n!==l)return;e.onData?.(d),e.onLoaded?.(d)}catch(d){if(a.signal.aborted||n!==l)return;e.onError?.(d)}finally{n===l&&(t.value=!1)}}function s(){r?.abort(),l+=1,t.value=!1}return o.onBeforeUnmount(s),{loading:t,load:c,cancel:s}}const A=o.defineComponent({name:"ElTablePro",inheritAttrs:!1,props:{columns:{type:Array,default:()=>[]},request:{type:Function,default:void 0},pagination:{type:[Boolean,Object],default:!0},mergeFields:{type:Array,default:()=>[]},data:{type:Array,default:()=>[]},rowKey:{type:[String,Function],required:!0}},emits:{loaded:e=>!0,error:e=>!0},setup(e,{attrs:t,emit:r,expose:l}){const c=o.useSlots(),s=o.shallowRef(null),u=o.shallowRef([]),n=o.shallowRef(0),a=O(()=>e.pagination),d=o.computed(()=>{const i=e.rowKey;return typeof i=="function"?v=>String(i(v)):i}),{loading:m,load:p,cancel:g}=j({request:()=>e.request,page:()=>a.requestPage.value,pageSize:()=>a.requestPageSize.value,onData:i=>{u.value=i.data,n.value=i.total},onLoaded:i=>r("loaded",i),onError:i=>r("error",i)}),h=o.computed(()=>m.value),y=o.computed(()=>{if(e.request)return u.value;if(!e.data)return[];if(!a.config.value)return e.data;const i=(a.currentPage.value-1)*a.pageSize.value;return e.data.slice(i,i+a.pageSize.value)}),f=o.computed(()=>e.request?n.value:e.data?.length??0),{spanMethod:R}=L({tableRef:s,columns:()=>e.columns,data:y,mergeFields:()=>e.mergeFields,userSpanMethod:()=>t.spanMethod,treeProps:()=>t.treeProps,lazy:()=>!!t.lazy});async function S(i){i?.page!==void 0&&(a.currentPage.value=i.page),await p()}o.watch(()=>e.request,i=>{u.value=[],n.value=0,i?S():g()}),o.watch(()=>[a.requestPage.value,a.requestPageSize.value],()=>{e.request&&S()});const F=new Proxy({},{get(i,v){if(v==="reload")return S;const P=s.value;if(!P)return;const w=P[v];return typeof w=="function"?w.bind(P):w},has(i,v){return v==="reload"?!0:s.value!=null&&v in s.value}});return l(F),o.onMounted(()=>{e.request&&S()}),()=>{const i=o.h(b.ElTable,{...t,ref:s,data:y.value,rowKey:d.value,spanMethod:R.value},{default:()=>M(e.columns,c),empty:c.empty,append:c.append});return[o.withDirectives(i,[[b.vLoading,h.value]]),a.enabled.value?o.h(b.ElPagination,{currentPage:a.currentPage.value,pageSize:a.pageSize.value,total:f.value,pageSizes:[...a.config.value?.pageSizes??[]],layout:a.config.value?.layout,background:a.config.value?.background,"onUpdate:currentPage":v=>{a.currentPage.value=v},"onUpdate:pageSize":v=>{a.setPageSize(v)}}):null]}}}),k=[A];function E(e){k.forEach(t=>{const r=t.name;r&&e.component(r,t)})}const B={install:E};exports.ElTablePro=A;exports.TABLE_PRO_DEFAULT_PAGINATION=T;exports.default=B;exports.install=E;exports.normalizePagination=_;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("vue"),i=require("element-plus");function Fe(t){return typeof t=="function"?t():t??[]}function Y(t,l){return(r,{slots:u={}})=>{const{options:p,props:v={},slots:s={},...a}=r,f=v.label??"label",g=v.value??"value",b=v.disabled??"disabled";return n.h(t,a,{...u,default:u.default??(()=>Fe(p).map(c=>n.h(l,{label:c[f],value:c[g],disabled:c[b]},typeof c.slots=="function"?c.slots:s[c.slots])))})}}function Me(t,{slots:l}){return n.h(i.ElInput,{...t,type:"password"},l)}function je(t,{slots:l}){const{modelValue:r,"onUpdate:modelValue":u,...p}=t;return n.h(i.ElUpload,{...p,fileList:r,"onUpdate:fileList":u},{...l,default:l.default??(()=>n.h(i.ElButton,{type:"primary",plain:!0},()=>"选择文件"))})}const Te={input:i.ElInput,password:Me,number:i.ElInputNumber,select:Y(i.ElSelect,i.ElOption),selectV2:i.ElSelectV2,radio:Y(i.ElRadioGroup,i.ElRadio),checkbox:Y(i.ElCheckboxGroup,i.ElCheckbox),date:i.ElDatePicker,time:i.ElTimePicker,timeSelect:i.ElTimeSelect,autocomplete:i.ElAutocomplete,cascader:i.ElCascader,inputTag:i.ElInputTag,rate:i.ElRate,slider:i.ElSlider,switch:i.ElSwitch,tree:i.ElTreeSelect,transfer:i.ElTransfer,upload:je,mention:i.ElMention};function qe(t){return t.type&&typeof t.type!="string"?t.type:Te[t.type||"input"]??i.ElInput}const xe=["key","label","type","style","rules","col","hidden","labelWidth","slot","defaultValue","formItemProps","fieldProps","children","separator"];function ze(t){["select","selectV2","cascader","autocomplete","tree"].includes(t.type);const l=new Set(xe);return{clearable:!0,...Object.fromEntries(Object.entries(t).filter(([u])=>!l.has(u))),...t.fieldProps??{}}}function D(t){return typeof t=="number"?{span:t}:t??{}}function oe(t,l){return{span:24,...D(l.col),...D(t.col)}}function A(t){const l=t.flatMap(r=>{const u=r.key&&!r.children?.length?[[r.key,r.defaultValue]]:[],p=A(r.children??[]);return[...u,...Object.entries(p)]});return Object.fromEntries(l)}function Ae(t){return t!=null&&typeof t=="object"}const ae={form:{submitText:"提交"},search:{submitText:"查询"}},Ve={submit:!0,reset:!0,cancel:!1};function re(t,l){return Object.fromEntries(Object.entries(t).filter(([r])=>!l.includes(r)))}const H=n.defineComponent({name:"ElFormPro",props:{schema:{type:Array,default:()=>[]},modelValue:{type:Object,default:void 0},formConfig:{type:Object,default:()=>({})},collapsible:{type:Boolean,default:!1},searchMode:{type:Boolean,default:!1}},emits:{"update:modelValue":t=>!0,submit:t=>!0,reset:t=>!0,cancel:()=>!0,change:t=>!0},setup(t,{emit:l,expose:r,slots:u}){const p=n.shallowRef(),v=n.shallowRef(typeof window>"u"?0:window.innerWidth),s=n.shallowRef(t.collapsible&&!(t.formConfig?.collapsed??!0)),a=n.reactive({...t.formConfig});n.watch(()=>t.formConfig,e=>{Object.assign(a,e)},{deep:!0}),n.watch(()=>t.formConfig?.collapsed,e=>{t.collapsible&&(s.value=!(e??!0))});const f=n.reactive(A(t.schema)),g=n.computed(()=>Ae(t.modelValue)),b=n.computed({get:()=>g.value?t.modelValue:f,set:e=>{if(g.value){l("update:modelValue",e);return}for(const o of Object.keys(f))delete f[o];Object.assign(f,e),l("update:modelValue",e)}});n.watch(()=>t.schema,e=>{if(!g.value){for(const o of Object.keys(f))delete f[o];Object.assign(f,A(e))}},{deep:!0});const c=n.computed(()=>t.schema.filter(e=>!e.hidden)),w=[{key:"sm",min:768},{key:"md",min:992},{key:"lg",min:1200},{key:"xl",min:1920}],C=(e,o)=>{let h=e.base||e.xs||"top";if(o<768)return e.xs||h;for(const m of w){if(o<m.min)break;h=e[m.key]||h}return h},_=n.computed(()=>{const e=a.labelPosition;return typeof e=="string"?e:C(e||{base:"top",md:"right"},v.value)}),P=e=>typeof e=="number"?e:e?.span,R=(e,o)=>{let h=P(e.span)??24;for(const m of w){if(o<m.min)break;const E=P(e[m.key]);E!==void 0&&(h=E)}return Math.min(24,h)},V=e=>R(oe(e,a),v.value),q=(e,o)=>{const h=e%24;return h&&24-h<o&&(e+=24-h),e+o},I=n.computed(()=>!!u.buttons||a.buttons?.submit!==!1||a.buttons?.reset!==!1||a.buttons?.cancel!==void 0&&a.buttons.cancel!==!1),B=e=>{if(a.actionCol!==void 0)return R(D(a.actionCol),v.value);const o=e?24-e:0;return o>=4?o:24},U=e=>{const o=e*24;let h=0,m=0;for(const E of c.value){const k=q(h,V(E));if(k>o)break;const T=I.value?q(k,B(k)):k;if(m>0&&T>o)break;h=k,m+=1}return Math.max(1,m)},F=n.computed(()=>!t.collapsible||!a.showCollapseButton?c.value.length:a.collapseCount!==void 0?a.collapseCount:U(a.collapseRows??1)),x=n.computed(()=>s.value?c.value:c.value.slice(0,F.value)),M=n.computed(()=>{let e=0;for(const o of x.value)e=q(e,V(o));return e%24}),W=n.computed(()=>B(M.value)),N=n.computed(()=>M.value>0&&M.value+W.value<=24),d=n.computed(()=>_.value==="top"&&N.value),y=n.computed(()=>{if(a.actionCol!==void 0)return{span:24,...D(a.actionCol)};const e=M.value,o=e?24-e:0;return{span:o>=4?o:24}}),S=n.computed(()=>{const e={submit:{type:"primary",text:t.searchMode?ae.search.submitText:ae.form.submitText,disabled:!1,loading:!1},reset:{plain:!0,text:"重置",disabled:!1},cancel:{plain:!0,text:"取消",disabled:!1}},o=h=>{const m=a.buttons?.[h];return m===!1||m===void 0&&!Ve[h]?null:{...e[h],...m??{}}};return{submit:o("submit"),reset:o("reset"),cancel:o("cancel")}}),j=n.computed(()=>Object.values(S.value).some(Boolean)),ve=n.computed(()=>{const e=a.buttonAlign??"right";return e==="start"?"is-start":e==="center"?"is-center":"is-end"}),he=e=>oe(e,a),ge=(e,o)=>{const h={...b.value,[e]:o};b.value=h,l("change",h)},be=e=>Array.isArray(e)?e:e?[e]:[],me=e=>{const o=[],h=m=>{for(const E of m)E.hidden||(E.children?.length?h(E.children):o.push(E))};return h(e.children??[]),o},ye=e=>be(e).some(o=>o?.required),we=e=>me(e).some(o=>ye(o.rules)),K=(e,o)=>e?n.h(i.ElButton,{...re(e,["text"]),onClick:o},()=>e.text):null,$=e=>{const o=u[e.slot??e.key??""];if(o)return o({item:e,model:b.value});const h=qe(e);if(n.isVNode(h))return h;const{slots:m,...E}=ze(e),k=Object.fromEntries(Object.entries(m??{}).flatMap(([T,z])=>{const O=typeof z=="function"?z:u[String(z)];return O?[[T,(L={})=>O({...L,item:e,model:b.value})]]:[]}));return n.h(h,{...E,modelValue:e.key==null?void 0:b.value[e.key],"onUpdate:modelValue":T=>{e.key!=null&&ge(e.key,T)}},k)},J=e=>typeof e.label=="function"?e.label():e.label,Pe=e=>{const o=_.value;return n.h("div",{class:["el-form-item",`el-form-item--label-${o}`,"el-form-pro__group",{"is-required":e.formItemProps?.required??we(e)}],style:e.style},[e.label?n.h("div",{class:"el-form-item__label",style:o==="top"?void 0:{width:e.labelWidth??a.labelWidth}},[J(e)]):null,n.h("div",{class:"el-form-item__content"},[X(e)])])},Se=e=>e.children?.length?X(e):n.h(i.ElFormItem,{...e.formItemProps??{},prop:e.key,rules:e.rules,labelWidth:e.labelWidth??a.labelWidth,class:[e.formItemProps?.class,"el-form-pro__child"],style:e.style},{default:()=>$(e)}),X=e=>e.children?.length?n.h("div",{class:"el-form-pro__children"},e.children.filter(o=>!o.hidden).flatMap((o,h)=>{const m=n.h("div",{class:"el-form-pro__child-wrapper",key:o.key},[Se(o)]);return h===0?[m]:[n.h("span",{class:"el-form-pro__separator"},e.separator??""),m]})):$(e),Z=async()=>{t.collapsible&&(s.value=!0),await n.nextTick(),p.value?.$el?.querySelector(".is-error")?.scrollIntoView({behavior:"smooth",block:"center"})},ee=(...e)=>p.value?.validate(...e),Ee=(...e)=>p.value?.validateField(...e),te=async()=>{try{await ee(),l("submit",b.value)}catch{Z()}},Ce=e=>{const o=A(t.schema),h=e==null?null:new Set(Array.isArray(e)?e:[e]),m={},E=(k,T=!1,z=!1)=>{for(const O of k){const L=T||h===null||h.has(O.key);O.children?.length?E(O.children,L,!0):z&&L&&O.key!=null&&(m[O.key]=o[O.key])}};return E(t.schema),m},ne=(...e)=>{p.value?.resetFields(...e);const o=Ce(e[0]);return Object.keys(o).length&&(b.value={...b.value,...o}),{...b.value,...o}},ke=()=>{const e=ne();l("reset",e)},Oe=()=>l("cancel"),_e=e=>{Object.assign(a,e)},Re=()=>b.value,G=()=>{p.value?.$el,typeof window<"u"&&(v.value=window.innerWidth)},Q=typeof ResizeObserver>"u"?null:new ResizeObserver(G);n.watch(()=>p.value?.$el,e=>{Q?.disconnect(),e&&Q?.observe(e),G()},{flush:"post"});const le=()=>{typeof window<"u"&&(v.value=window.innerWidth),G()};return typeof window<"u"&&window.addEventListener("resize",le),n.onBeforeUnmount(()=>{Q?.disconnect(),typeof window<"u"&&window.removeEventListener("resize",le)}),r({validate:(...e)=>ee(...e),validateField:(...e)=>Ee(...e),resetFields:(...e)=>{ne(...e)},clearValidate:(...e)=>{p.value?.clearValidate(...e)},scrollToError:Z,setState:_e,getValues:Re}),()=>{const e={...re(a,["buttonAlign","buttons","row","col","showCollapseButton","collapseRows","collapseCount","collapsed","actionCol"])};return n.h(i.ElForm,{...e,class:["el-form-pro",e.class].filter(Boolean),labelPosition:_.value,ref:p,model:b.value,onSubmit:o=>{o.preventDefault(),te()}},{default:()=>[n.h(i.ElRow,{gutter:18,...a.row??{}},{default:()=>[...x.value.map(o=>n.h(i.ElCol,{...he(o),key:o.key??o.children?.[0]?.key},{default:()=>o.children?.length?Pe(o):n.h(i.ElFormItem,{...o.formItemProps??{},label:typeof o.label=="function"?void 0:o.label,labelWidth:o.labelWidth??a.labelWidth,prop:o.key,rules:o.rules,class:o.formItemProps?.class,style:o.style},{...typeof o.label=="function"?{label:()=>J(o)}:{},default:()=>$(o)})})),j.value&&c.value.length?n.h(i.ElCol,y.value,{default:()=>n.h(i.ElFormItem,null,{...d.value?{label:()=>n.h("label",{class:"el-form-pro__actions-label"})}:{},default:()=>n.h("div",{class:["el-form-pro__actions",ve.value]},[u.buttons?u.buttons():[K(S.value.submit,()=>{te()}),K(S.value.reset,ke),K(S.value.cancel,Oe)],t.collapsible&&a.showCollapseButton&&c.value.length>F.value?n.h(i.ElButton,{type:"primary",link:!0,onClick:()=>{s.value=!s.value}},()=>s.value?"收起":"展开"):null])})}):null]})]})}}});function se(t,l){return t.flatMap(r=>{if(r.visible===!1)return[];const{visible:u,slot:p,headerSlot:v,render:s,headerRender:a,autoMerge:f,children:g,...b}=r,c={...b},w={},C=p?l[p]:void 0,_=v?l[v]:void 0;if(C?w.default=C:s&&(w.default=P=>s({row:P.row,column:P.column,$index:P.$index})),_?w.header=_:a&&(w.header=P=>a({column:P.column,$index:P.$index,store:P.store,_self:P._self})),g?.length){const P={default:()=>se(g,l)};return w.header&&(P.header=w.header),[n.h(i.ElTableColumn,c,P)]}return[n.h(i.ElTableColumn,c,Object.keys(w).length?w:void 0)]})}function ue(t){return t.prop??t.property}function Ie(t,l){if(t===null||typeof t!="object")return;const r=t;if(Object.prototype.hasOwnProperty.call(r,l))return r[l];if(!l.includes("."))return;let u=r;for(const p of l.split(".")){if(u===null||typeof u!="object")return;u=u[p]}return u}function ce(t){return t.flatMap(l=>l.visible===!1?[]:l.children?.length?ce(l.children):[l])}function Be(t,l=[]){const r=ce(t),u=new Map;for(const a of r){const f=ue(a);f&&!u.has(f)&&u.set(f,a)}const p=new Set,v=[],s=a=>{!a||p.has(a)||!u.has(a)||(p.add(a),v.push({key:a,getValue:f=>Ie(f,a)}))};return l.forEach(s),r.forEach(a=>{a.autoMerge&&s(ue(a))}),v}function Le(t,l){const r=t.length,u=new Map(l.map(s=>[s.key,Array.from({length:r},()=>1)]));if(!r||!l.length)return u;const p=t.map(s=>l.map(a=>a.getValue(s))),v=l.map(()=>0);for(let s=1;s<=r;s+=1){let a=!0;for(let f=0;f<l.length;f+=1){const g=s<r&&a&&p[s][f]===p[s-1][f];if(!g){const b=u.get(l[f].key),c=v[f],w=s-c;b[c]=w;for(let C=c+1;C<s;C+=1)b[C]=0;v[f]=s}a=g}}return u}function De(t,l="children"){return t.some(r=>{if(r===null||typeof r!="object")return!1;const u=r[l];return Array.isArray(u)&&u.length>0})}function Ue(t){const l=n.computed(()=>Be(t.columns(),t.mergeFields())),r=n.computed(()=>l.value.length?t.tableRef.value?.store?.states?.data?.value??t.data.value:t.data.value),u=n.computed(()=>{if(!l.value.length||t.lazy())return new Map;const v=t.treeProps()?.children??"children",s=r.value;return De(s,v)?new Map:Le(s,l.value)});return{spanMethod:n.computed(()=>{const v=t.userSpanMethod();return l.value.length?s=>{const a=v?.(s);if(a!==void 0)return a;const f=s.column.property,g=f?u.value.get(f)?.[s.rowIndex]:void 0;if(!(g===void 0||g===1))return{rowspan:g,colspan:1}}:v}),spanMap:u}}const ie={page:1,pageSize:20,pageSizes:[10,20,50,100],pagerCount:5,layout:"total, sizes, prev, pager, next, jumper",background:!0};function de(t){return t===!1?null:{...ie,...t===!0?{}:t??{}}}function We(t){const l=n.computed(()=>de(t())),r=n.shallowRef(l.value?.page??1),u=n.shallowRef(l.value?.pageSize??20);n.watch(()=>l.value?.page,a=>{a!==void 0&&(r.value=a)}),n.watch(()=>l.value?.pageSize,a=>{a!==void 0&&(u.value=a)});const p=n.computed(()=>l.value?r.value:null),v=n.computed(()=>l.value?u.value:null);function s(a){u.value=a,r.value=1}return{enabled:n.computed(()=>l.value!=null),config:l,currentPage:r,pageSize:u,requestPage:p,requestPageSize:v,setPageSize:s}}function Ne(t){const l=n.shallowRef(!1);let r=null,u=0;async function p(){const s=t.request();if(!s)return;r?.abort(),r=new AbortController;const a=++u,f=r;l.value=!0;try{const g=await s({page:t.page(),pageSize:t.pageSize(),query:t.query(),signal:f.signal});if(f.signal.aborted||a!==u)return;t.onData?.(g),t.onLoaded?.(g)}catch(g){if(f.signal.aborted||a!==u)return;t.onError?.(g)}finally{a===u&&(l.value=!1)}}function v(){r?.abort(),u+=1,l.value=!1}return n.onBeforeUnmount(v),{loading:l,load:p,cancel:v}}const fe=n.defineComponent({name:"ElTablePro",inheritAttrs:!1,props:{columns:{type:Array,default:()=>[]},request:{type:Function,default:void 0},pagination:{type:[Boolean,Object],default:!0},mergeFields:{type:Array,default:()=>[]},query:{type:Object,default:void 0},filter:{type:Object,default:void 0},data:{type:Array,default:()=>[]},rowKey:{type:[String,Function],required:!0}},emits:{loaded:t=>!0,error:t=>!0},setup(t,{attrs:l,emit:r,expose:u}){const p=n.useSlots(),v=n.shallowRef(null),s=n.shallowRef([]),a=n.shallowRef(0),f=n.computed(()=>({...A(t.filter?.schema??[]),...t.filter?.defaultValue??{},...t.filter?.model??{}})),g=n.reactive({...f.value}),b=n.shallowRef({...f.value,...t.query??{}});n.watch(()=>t.query,d=>{b.value={...f.value,...d??{}},t.request&&R()},{deep:!0}),n.watch(()=>t.filter?.model,d=>{for(const y of Object.keys(g))delete g[y];Object.assign(g,f.value,d??{})},{deep:!0});const c=We(()=>t.pagination);let w=!1;function C(d){d!==c.currentPage.value&&(c.enabled.value&&(w=!0),c.currentPage.value=d)}const _=n.computed(()=>{const d=t.rowKey;return typeof d=="function"?y=>String(d(y)):d}),{loading:P,load:R,cancel:V}=Ne({request:()=>t.request,page:()=>c.requestPage.value,pageSize:()=>c.requestPageSize.value,query:()=>b.value,onData:d=>{s.value=d.data,a.value=d.total},onLoaded:d=>r("loaded",d),onError:d=>r("error",d)}),q=n.computed(()=>P.value),I=n.computed(()=>{if(t.request)return s.value;if(!t.data)return[];if(!c.config.value)return t.data;const d=(c.currentPage.value-1)*c.pageSize.value;return t.data.slice(d,d+c.pageSize.value)}),B=n.computed(()=>t.request?a.value:t.data?.length??0),{spanMethod:U}=Ue({tableRef:v,columns:()=>t.columns,data:I,mergeFields:()=>t.mergeFields,userSpanMethod:()=>l.spanMethod,treeProps:()=>l.treeProps,lazy:()=>!!l.lazy});async function F(d){d?.page!==void 0&&C(d.page),await R()}async function x(){b.value={...g},C(1),await R()}async function M(){const d={...f.value};for(const y of Object.keys(g))delete g[y];Object.assign(g,d),b.value={...d},C(1),await R()}n.watch(()=>t.request,d=>{s.value=[],a.value=0,d?F():V()}),n.watch(()=>[c.requestPage.value,c.requestPageSize.value],()=>{if(w){w=!1;return}t.request&&F()});const W=new Proxy({},{get(d,y){if(y==="reload")return F;if(y==="search")return x;if(y==="resetFilter")return M;const S=v.value;if(!S)return;const j=S[y];return typeof j=="function"?j.bind(S):j},has(d,y){return y==="reload"||y==="search"||y==="resetFilter"?!0:v.value!=null&&y in v.value}});u(W),n.onMounted(()=>{t.request&&F()});const N=()=>Object.fromEntries(Object.entries(p).filter(([d])=>d.startsWith("filter-")).map(([d,y])=>[d.slice(7),y]));return()=>{const d=t.filter?n.h(H,{schema:t.filter.schema,modelValue:g,collapsible:!0,searchMode:!0,formConfig:{...t.filter.formConfig?.showCollapseButton?{collapseRows:1}:{},...t.filter.formConfig??{}},"onUpdate:modelValue":S=>{for(const j of Object.keys(g))delete g[j];Object.assign(g,S)},onSubmit:()=>{x()},onReset:()=>{M()}},N()):null,y=n.h(i.ElTable,{...l,ref:v,data:I.value,rowKey:_.value,spanMethod:U.value},{default:()=>se(t.columns,p),empty:p.empty,append:p.append});return n.h("div",{class:"el-table-pro"},[d,n.withDirectives(y,[[i.vLoading,q.value]]),c.enabled.value?n.h(i.ElPagination,{currentPage:c.currentPage.value,pageSize:c.pageSize.value,total:B.value,pageSizes:[...c.config.value?.pageSizes??[]],pagerCount:c.config.value?.pagerCount,layout:c.config.value?.layout,background:c.config.value?.background,"onUpdate:currentPage":S=>{c.currentPage.value=S},"onUpdate:pageSize":S=>{c.setPageSize(S)}}):null])}}}),Ke=[H,fe];function pe(t){Ke.forEach(l=>{const r=l.name;r&&t.component(r,l)})}const $e={install:pe};exports.ElFormPro=H;exports.ElTablePro=fe;exports.TABLE_PRO_DEFAULT_PAGINATION=ie;exports.default=$e;exports.install=pe;exports.normalizePagination=de;

package/dist/index.css

@@ -0,0 +1 @@
+.el-form-pro__group{gap:4px}.el-form-pro__actions-label:after{display:inline-block;content:" "}.el-form-pro__actions{display:flex;flex-wrap:nowrap;width:100%}.el-form-pro__actions.is-start{justify-content:flex-start}.el-form-pro__actions.is-center{justify-content:center}.el-form-pro__actions.is-end{justify-content:flex-end}.el-form-pro__children{display:flex;align-items:flex-start;width:100%}.el-form-pro__child-wrapper{flex:1;min-width:0}.el-form-pro__child{margin-bottom:0}.el-form-pro__separator{flex:none;padding:0 8px;color:var(--el-text-color-secondary)}.el-table-pro{min-width:0}.el-table-pro .el-pagination{margin-top:16px}.el-table-pro .el-pagination .btn-prev{margin-left:auto}

package/dist/index.d.ts

@@ -1,7 +1,9 @@
 import { App } from 'vue';
+import { ElFormPro } from './form-pro';
 import { ElTablePro } from './table-pro';
+export * from './form-pro';
 export * from './table-pro';
-export { ElTablePro };
+export { ElFormPro, ElTablePro };
 export declare function install(app: App): void;
 declare const _default: {
     install: typeof install;