@aspire-ui/element-component-pro 1.0.4 → 1.0.6

package/README.md

@@ -41,7 +41,7 @@ Vue.use(ElementComponentPro)
 
 ```vue
 <script setup lang="ts">
-import { ProTable, ProForm } from 'element-component-pro'
+import { ProTable, ProForm, ProDescriptions } from 'element-component-pro'
 </script>
 
 <template>
@@ -311,8 +311,74 @@ const handleSubmit = (values) => {
 - **dynamicDisabled**: 动态禁用
 - **dynamicRules**: 动态校验规则
 - **labelWidth**: 支持字段级标签宽度，覆盖表单级 `labelWidth`
+- **v-model**: 支持 `modelValue` 双向绑定，`initialValues` 仅补齐缺失字段
+- **useForm + v-model**: 编程式 `setFieldsValue/resetFields` 与受控 `modelValue` 保持同步
 - **componentProps**: 支持函数，可获取 formModel、formActionType
 
+## ProDescriptions
+
+参考 [Vben Admin Description](https://doc.vvbin.cn/components/desc.html#usage)，用于详情页信息展示，支持 `schema` 驱动、响应式列数、折叠以及 `useDescription` 编程式更新。
+
+```vue
+<template>
+  <ProDescriptions
+    title="基础示例"
+    :column="3"
+    :data="detailData"
+    :schema="schema"
+    :use-collapse="true"
+    :collapse-options="{ canExpand: true }"
+  />
+</template>
+
+<script setup lang="ts">
+import { ProDescriptions } from 'element-component-pro'
+import type { DescriptionSchema } from 'element-component-pro'
+
+const detailData = {
+  username: 'test',
+  nickName: 'VB',
+  phone: '15695909xxx',
+  email: '190848757@qq.com',
+}
+
+const schema: DescriptionSchema[] = [
+  { label: '用户名', dataIndex: 'username' },
+  { label: '昵称', dataIndex: 'nickName' },
+  { label: '联系电话', dataIndex: 'phone' },
+  { label: '邮箱', dataIndex: 'email' },
+]
+</script>
+```
+
+### useDescription
+
+```vue
+<template>
+  <ProDescriptions @register="register" />
+</template>
+
+<script setup lang="ts">
+import { ProDescriptions, useDescription } from 'element-component-pro'
+
+const [register, descriptionAction] = useDescription({
+  title: 'useDescription',
+  data: {
+    name: '张三',
+    status: '启用',
+  },
+  schema: [
+    { label: '姓名', dataIndex: 'name' },
+    { label: '状态', dataIndex: 'status' },
+  ],
+})
+
+const updateData = () => {
+  descriptionAction.setData({ status: '禁用' })
+}
+</script>
+```
+
 ## 示例与文档
 
 - **示例**：运行 `npm run dev` 后访问开发预览，包含 ProTable、ProForm、componentSettings 测试等示例

package/dist/ProDescriptions/ProDescriptions.vue.d.ts

@@ -0,0 +1,136 @@
+import { DescriptionActionType, DescriptionColumn, DescriptionProps, DescriptionSchema } from '../types';
+
+declare function __VLS_template(): Partial<Record<string, (_: {
+    value: unknown;
+    record: Record<string, unknown>;
+    schema: DescriptionSchema & {
+        _span: number;
+    };
+}) => any>>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    title?: string;
+    helpMessage?: string | string[];
+    size?: "medium" | "small";
+    bordered?: boolean;
+    column?: DescriptionColumn;
+    schema?: DescriptionSchema[];
+    data?: Record<string, unknown>;
+    emptyText?: string;
+    useCollapse?: boolean;
+    collapseOptions?: {
+        canExpand?: boolean;
+        defaultExpand?: boolean;
+        expandButtonText?: string;
+        collapseButtonText?: string;
+        helpMessage?: string | string[];
+        visibleRows?: number;
+    };
+}>, {
+    size: string;
+    bordered: boolean;
+    column: () => {
+        xxl: number;
+        xl: number;
+        lg: number;
+        md: number;
+        sm: number;
+        xs: number;
+    };
+    schema: () => never[];
+    data: () => {};
+    emptyText: string;
+    useCollapse: boolean;
+    collapseOptions: () => {
+        canExpand: boolean;
+        defaultExpand: boolean;
+        expandButtonText: string;
+        collapseButtonText: string;
+        visibleRows: number;
+    };
+}>, {
+    setProps: (props: Partial<DescriptionProps>) => Promise<void>;
+    setData: (data: Record<string, unknown>) => Promise<void>;
+    getData: () => Record<string, unknown>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    register: (action: DescriptionActionType) => void;
+}, string, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    title?: string;
+    helpMessage?: string | string[];
+    size?: "medium" | "small";
+    bordered?: boolean;
+    column?: DescriptionColumn;
+    schema?: DescriptionSchema[];
+    data?: Record<string, unknown>;
+    emptyText?: string;
+    useCollapse?: boolean;
+    collapseOptions?: {
+        canExpand?: boolean;
+        defaultExpand?: boolean;
+        expandButtonText?: string;
+        collapseButtonText?: string;
+        helpMessage?: string | string[];
+        visibleRows?: number;
+    };
+}>, {
+    size: string;
+    bordered: boolean;
+    column: () => {
+        xxl: number;
+        xl: number;
+        lg: number;
+        md: number;
+        sm: number;
+        xs: number;
+    };
+    schema: () => never[];
+    data: () => {};
+    emptyText: string;
+    useCollapse: boolean;
+    collapseOptions: () => {
+        canExpand: boolean;
+        defaultExpand: boolean;
+        expandButtonText: string;
+        collapseButtonText: string;
+        visibleRows: number;
+    };
+}>>>, {
+    size: "medium" | "small";
+    bordered: boolean;
+    column: DescriptionColumn;
+    schema: DescriptionSchema[];
+    data: Record<string, unknown>;
+    emptyText: string;
+    useCollapse: boolean;
+    collapseOptions: {
+        canExpand?: boolean;
+        defaultExpand?: boolean;
+        expandButtonText?: string;
+        collapseButtonText?: string;
+        helpMessage?: string | string[];
+        visibleRows?: number;
+    };
+}>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $scopedSlots: S;
+    };
+};

package/dist/ProDescriptions/index.d.ts

@@ -0,0 +1,5 @@
+import { default as ProDescriptions } from './ProDescriptions.vue';
+import { useDescription } from './useDescription';
+
+export { ProDescriptions, useDescription };
+export default ProDescriptions;

package/dist/ProDescriptions/useDescription.d.ts

@@ -0,0 +1,9 @@
+import { Ref } from 'vue';
+import { DescriptionActionType, DescriptionProps } from '../types';
+
+export type UseDescriptionPropsReactive = DescriptionProps | Ref<DescriptionProps | undefined>;
+export type UseDescriptionReturn = [
+    (instance: DescriptionActionType) => void,
+    DescriptionActionType
+];
+export declare function useDescription(props?: UseDescriptionPropsReactive): UseDescriptionReturn;

package/dist/ProForm/ProForm.vue.d.ts

@@ -49,6 +49,7 @@ declare function __VLS_template(): Partial<Record<string, (_: {
 };
 declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     schemas?: ProFormSchema[];
+    modelValue?: Record<string, unknown>;
     initialValues?: Record<string, unknown>;
     labelWidth?: string;
     labelPosition?: "left" | "right" | "top";
@@ -123,8 +124,10 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<
     submit: (values: Record<string, unknown>) => void;
     reset: () => void;
     register: (formAction: FormActionType) => void;
+    "update:modelValue": (values: Record<string, unknown>) => void;
 }, string, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     schemas?: ProFormSchema[];
+    modelValue?: Record<string, unknown>;
     initialValues?: Record<string, unknown>;
     labelWidth?: string;
     labelPosition?: "left" | "right" | "top";
@@ -183,6 +186,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<
     };
     submitOnReset: boolean;
 }>>>, {
+    size: "medium" | "small" | "large";
     showActionButtonGroup: boolean;
     showSubmitButton: boolean;
     showResetButton: boolean;
@@ -195,7 +199,6 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<
     labelWidth: string;
     labelPosition: "left" | "right" | "top";
     gutter: number;
-    size: "medium" | "small" | "large";
     baseColProps: ColEx;
     autoSetPlaceholder: boolean;
     autoAdvancedLine: number;

package/dist/ProForm/ProFormItem.vue.d.ts

@@ -14,6 +14,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToRu
     formDisabled?: boolean;
     autoPlaceholder?: boolean;
     formActionType?: import('../types').FormActionType;
+    onFieldChange?: (field: string, value: unknown) => void;
     /** 自定义组件映射（由 ProForm 传入） */
     customComponents?: Record<string, unknown>;
 }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
@@ -22,6 +23,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToRu
     formDisabled?: boolean;
     autoPlaceholder?: boolean;
     formActionType?: import('../types').FormActionType;
+    onFieldChange?: (field: string, value: unknown) => void;
     /** 自定义组件映射（由 ProForm 传入） */
     customComponents?: Record<string, unknown>;
 }>>>, {}>;

package/dist/ProTable/ProTable.vue.d.ts

@@ -372,10 +372,11 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<
     };
     immediate: boolean;
 }>>>, {
-    loading: boolean;
     size: "medium" | "small" | "large";
-    rowKey: string;
     bordered: boolean;
+    loading: boolean;
+    immediate: boolean;
+    rowKey: string;
     striped: boolean;
     ellipsis: boolean;
     showIndexColumn: boolean;
@@ -393,7 +394,6 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<
         fullScreen?: boolean;
     };
     fetchSetting: FetchSetting;
-    immediate: boolean;
 }>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;