@xto/form 1.6.8 → 1.7.0

package/es/DatePicker/types.d.ts

@@ -0,0 +1,112 @@
+import { ComponentSize } from '@xto/core';
+/**
+ * DatePicker 类型
+ */
+export type DatePickerType = 'date' | 'daterange' | 'month' | 'year';
+/**
+ * DatePicker Props
+ */
+export interface DatePickerProps {
+    /**
+     * 绑定值
+     */
+    modelValue?: Date | string | number | [Date | string | number, Date | string | number] | null;
+    /**
+     * 绑定值（备用）
+     */
+    value?: Date | string | number | [Date | string | number, Date | string | number] | null;
+    /**
+     * 选择器类型
+     * @default 'date'
+     */
+    type?: DatePickerType;
+    /**
+     * 占位符
+     * @default '请选择日期'
+     */
+    placeholder?: string;
+    /**
+     * 开始日期占位符
+     * @default '开始日期'
+     */
+    startPlaceholder?: string;
+    /**
+     * 结束日期占位符
+     * @default '结束日期'
+     */
+    endPlaceholder?: string;
+    /**
+     * 是否禁用
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 是否只读
+     * @default false
+     */
+    readonly?: boolean;
+    /**
+     * 是否可清空
+     * @default false
+     */
+    clearable?: boolean;
+    /**
+     * 选择器尺寸
+     * @default 'default'
+     */
+    size?: ComponentSize;
+    /**
+     * 显示格式
+     * @default 'YYYY-MM-DD'
+     */
+    format?: string;
+    /**
+     * 值格式
+     */
+    valueFormat?: string;
+    /**
+     * 禁用日期函数
+     */
+    disabledDate?: (date: Date) => boolean;
+    /**
+     * 最小日期
+     */
+    minDate?: Date | string | null;
+    /**
+     * 最大日期
+     */
+    maxDate?: Date | string | null;
+    /**
+     * 是否显示时间选择
+     * @default false
+     */
+    showTime?: boolean;
+}
+/**
+ * DatePicker Emits
+ */
+export interface DatePickerEmits {
+    (e: 'update:modelValue', value: Date | string | number | [Date | string | number, Date | string | number] | null): void;
+    (e: 'update:value', value: Date | string | number | [Date | string | number, Date | string | number] | null): void;
+    (e: 'change', value: Date | string | number | [Date | string | number, Date | string | number] | null): void;
+    (e: 'focus', event: FocusEvent): void;
+    (e: 'blur', event: FocusEvent): void;
+    (e: 'clear'): void;
+}
+/**
+ * DatePicker Expose
+ */
+export interface DatePickerExpose {
+    /**
+     * 获取焦点
+     */
+    focus: () => void;
+    /**
+     * 失去焦点
+     */
+    blur: () => void;
+}
+/**
+ * DatePicker 组件实例类型
+ */
+export type DatePickerInstance = InstanceType<typeof import('./index.vue').default>;

package/es/DatePicker/utils.d.ts

@@ -0,0 +1,21 @@
+export declare function getDaysInMonth(year: number, month: number): number;
+export declare function getFirstDayOfMonth(year: number, month: number): number;
+export declare function isSameDay(date1: Date, date2: Date): boolean;
+export declare function isSameMonth(date1: Date, date2: Date): boolean;
+export declare function isSameYear(date1: Date, date2: Date): boolean;
+export declare function isDateInRange(date: Date, startDate: Date | null, endDate: Date | null): boolean;
+export declare function getWeekDays(date: Date, firstDayOfWeek?: number): Date[];
+export declare function getMonthWeeks(year: number, month: number, firstDayOfWeek?: number): Date[][];
+export declare function formatDate(date: Date | null | undefined, format?: string): string;
+export declare function parseDate(value: string | Date | number | null | undefined | unknown): Date | null;
+export declare function getPrevMonth(date: Date): Date;
+export declare function getNextMonth(date: Date): Date;
+export declare function getPrevYear(date: Date): Date;
+export declare function getNextYear(date: Date): Date;
+export declare function getDecadeRange(year: number): [number, number];
+export declare function cloneDate(date: Date): Date;
+export declare function clearTime(date: Date): Date;
+export declare function isDateDisabled(date: Date, disabledDate?: (date: Date) => boolean, minDate?: Date | null, maxDate?: Date | null): boolean;
+export declare const monthNames: string[];
+export declare const weekNames: string[];
+export declare const weekNamesShort: string[];

package/es/DynamicFields/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DynamicFields } from './index.vue';
+export type { DynamicField, DynamicFieldsProps, DynamicFieldsEmits } from './types';

package/es/DynamicFields/index.vue.d.ts

@@ -0,0 +1,52 @@
+export interface DynamicField {
+    id: string;
+    name: string;
+    label: string;
+    type: 'input' | 'textarea' | 'select' | 'number' | 'switch' | 'date' | 'file';
+    required?: boolean;
+    defaultValue?: any;
+    placeholder?: string;
+    options?: Array<{
+        label: string;
+        value: any;
+    }>;
+    order?: number;
+}
+export interface DynamicFieldsProps {
+    /** 字段列表 */
+    fields?: DynamicField[];
+    /** 是否可编辑 */
+    editable?: boolean;
+    /** 是否显示排序按钮 */
+    showSort?: boolean;
+    /** 最大字段数 */
+    maxFields?: number;
+    /** 可用的字段类型 */
+    availableTypes?: Array<{
+        label: string;
+        value: string;
+    }>;
+}
+declare const _default: import('vue').DefineComponent<DynamicFieldsProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    sort: (fields: DynamicField[]) => any;
+    add: (field: DynamicField) => any;
+    remove: (fieldId: string) => any;
+    "update:fields": (fields: DynamicField[]) => any;
+    update: (fieldId: string, field: DynamicField) => any;
+}, string, import('vue').PublicProps, Readonly<DynamicFieldsProps> & Readonly<{
+    onSort?: ((fields: DynamicField[]) => any) | undefined;
+    onAdd?: ((field: DynamicField) => any) | undefined;
+    onRemove?: ((fieldId: string) => any) | undefined;
+    "onUpdate:fields"?: ((fields: DynamicField[]) => any) | undefined;
+    onUpdate?: ((fieldId: string, field: DynamicField) => any) | undefined;
+}>, {
+    fields: DynamicField[];
+    editable: boolean;
+    showSort: boolean;
+    maxFields: number;
+    availableTypes: Array<{
+        label: string;
+        value: string;
+    }>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/es/DynamicFields/types.d.ts

@@ -0,0 +1,36 @@
+export interface DynamicField {
+    id: string;
+    name: string;
+    label: string;
+    type: 'input' | 'textarea' | 'select' | 'number' | 'switch' | 'date' | 'file';
+    required?: boolean;
+    defaultValue?: any;
+    placeholder?: string;
+    options?: Array<{
+        label: string;
+        value: any;
+    }>;
+    order?: number;
+}
+export interface DynamicFieldsProps {
+    /** 字段列表 */
+    fields?: DynamicField[];
+    /** 是否可编辑 */
+    editable?: boolean;
+    /** 是否显示排序按钮 */
+    showSort?: boolean;
+    /** 最大字段数 */
+    maxFields?: number;
+    /** 可用的字段类型 */
+    availableTypes?: Array<{
+        label: string;
+        value: string;
+    }>;
+}
+export interface DynamicFieldsEmits {
+    'update:fields': [fields: DynamicField[]];
+    'add': [field: DynamicField];
+    'remove': [fieldId: string];
+    'sort': [fields: DynamicField[]];
+    'update': [fieldId: string, field: DynamicField];
+}

package/es/Form/index.d.ts

@@ -0,0 +1,77 @@
+import { ExtractPropTypes, PropType } from 'vue';
+export interface FormRule {
+    required?: boolean;
+    message?: string;
+    trigger?: 'blur' | 'change';
+    min?: number;
+    max?: number;
+    pattern?: RegExp;
+    validator?: (rule: FormRule, value: any, callback: (error?: Error) => void) => void;
+}
+export interface FormItemContext {
+    prop: string;
+    validate: (trigger?: string) => Promise<boolean>;
+    resetField: () => void;
+    clearValidate: () => void;
+}
+export declare const formProps: {
+    readonly model: {
+        readonly type: PropType<Record<string, any>>;
+        readonly default: () => {};
+    };
+    readonly rules: {
+        readonly type: PropType<Record<string, FormRule[]>>;
+        readonly default: () => {};
+    };
+    readonly labelWidth: {
+        readonly type: PropType<string | number>;
+        readonly default: "100px";
+    };
+    readonly labelPosition: {
+        readonly type: PropType<"left" | "right" | "top">;
+        readonly default: "right";
+    };
+    readonly inline: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly disabled: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly size: {
+        readonly type: PropType<"large" | "default" | "small">;
+        readonly default: "default";
+    };
+};
+export declare const formItemProps: {
+    readonly prop: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    readonly label: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    readonly labelWidth: {
+        readonly type: PropType<string | number>;
+        readonly default: undefined;
+    };
+    readonly required: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly rules: {
+        readonly type: PropType<FormRule[]>;
+        readonly default: undefined;
+    };
+    readonly showMessage: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+};
+export type FormProps = ExtractPropTypes<typeof formProps>;
+export type FormItemProps = ExtractPropTypes<typeof formItemProps>;
+export { default as Form } from './index.vue';
+export { default as FormItem } from './item.vue';
+export * from './validators';

package/es/Form/index.vue.d.ts

@@ -0,0 +1,64 @@
+export interface FormRule {
+    required?: boolean;
+    message?: string;
+    trigger?: 'blur' | 'change';
+    min?: number;
+    max?: number;
+    pattern?: RegExp;
+    validator?: (rule: FormRule, value: any, callback: (error?: Error) => void) => void;
+}
+export interface FormItemContext {
+    prop: string;
+    validate: (trigger?: string) => Promise<boolean>;
+    resetField: () => void;
+    clearValidate: () => void;
+}
+type __VLS_Props = {
+    model?: Record<string, any>;
+    rules?: Record<string, FormRule[]>;
+    labelWidth?: string | number;
+    labelPosition?: 'left' | 'right' | 'top';
+    layout?: 'inline' | 'horizontal' | 'vertical';
+    inline?: boolean;
+    disabled?: boolean;
+    size?: 'large' | 'default' | 'small';
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLFormElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {
+    validate: () => Promise<boolean>;
+    validateField: (props: string | string[]) => Promise<boolean>;
+    resetFields: () => void;
+    clearValidate: (props?: string | string[]) => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    reset: () => any;
+    submit: () => any;
+    validate: (prop: string, valid: boolean, message: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onReset?: (() => any) | undefined;
+    onSubmit?: (() => any) | undefined;
+    onValidate?: ((prop: string, valid: boolean, message: string) => any) | undefined;
+}>, {
+    size: "large" | "default" | "small";
+    disabled: boolean;
+    inline: boolean;
+    model: Record<string, any>;
+    rules: Record<string, FormRule[]>;
+    labelWidth: string | number;
+    labelPosition: "left" | "right" | "top";
+    layout: "inline" | "horizontal" | "vertical";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLFormElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/Form/item.vue.d.ts

@@ -0,0 +1,31 @@
+import { FormRule } from './index.vue';
+type __VLS_Props = {
+    prop?: string;
+    label?: string;
+    labelWidth?: string | number;
+    required?: boolean;
+    rules?: FormRule[];
+    showMessage?: boolean;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        label?(_: {}): any;
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {
+    validate: (trigger?: string) => Promise<boolean>;
+    resetField: () => void;
+    clearValidate: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/Form/types.d.ts

@@ -0,0 +1,239 @@
+import { Ref, ComponentSize } from 'vue';
+/**
+ * 表单验证规则
+ */
+export interface FormRule {
+    /**
+     * 是否必填
+     */
+    required?: boolean;
+    /**
+     * 错误提示信息
+     */
+    message?: string;
+    /**
+     * 触发方式
+     */
+    trigger?: 'blur' | 'change';
+    /**
+     * 最小长度
+     */
+    min?: number;
+    /**
+     * 最大长度
+     */
+    max?: number;
+    /**
+     * 正则表达式
+     */
+    pattern?: RegExp;
+    /**
+     * 自定义验证函数
+     */
+    validator?: (rule: FormRule, value: any, callback: (error?: Error) => void) => void;
+}
+/**
+ * 表单规则映射
+ */
+export type FormRules = Record<string, FormRule[]>;
+/**
+ * 表单项上下文
+ */
+export interface FormItemContext {
+    /**
+     * 字段名
+     */
+    prop: string;
+    /**
+     * 验证方法
+     */
+    validate: (trigger?: string) => Promise<boolean>;
+    /**
+     * 重置字段
+     */
+    resetField: () => void;
+    /**
+     * 清除验证
+     */
+    clearValidate: () => void;
+}
+/**
+ * 表单上下文（注入到子组件）
+ */
+export interface FormContext {
+    /**
+     * 表单数据模型
+     */
+    model: Ref<Record<string, any>>;
+    /**
+     * 验证规则
+     */
+    rules: FormRules;
+    /**
+     * 标签宽度
+     */
+    labelWidth: string | number;
+    /**
+     * 标签位置
+     */
+    labelPosition: string;
+    /**
+     * 是否禁用
+     */
+    disabled: boolean;
+    /**
+     * 组件尺寸
+     */
+    size: string;
+    /**
+     * 标签样式
+     */
+    labelStyle: Ref<Record<string, string>>;
+    /**
+     * 添加字段
+     */
+    addField: (field: FormItemContext) => void;
+    /**
+     * 移除字段
+     */
+    removeField: (field: FormItemContext) => void;
+    /**
+     * 触发事件
+     */
+    emit: (event: string, prop: string, valid: boolean, message: string) => void;
+}
+/**
+ * Form Props
+ */
+export interface FormProps {
+    /**
+     * 表单数据对象
+     */
+    model?: Record<string, any>;
+    /**
+     * 表单验证规则
+     */
+    rules?: FormRules;
+    /**
+     * 标签宽度
+     * @default '100px'
+     */
+    labelWidth?: string | number;
+    /**
+     * 标签位置
+     * @default 'right'
+     */
+    labelPosition?: 'left' | 'right' | 'top';
+    /**
+     * 表单布局
+     * @default 'horizontal'
+     */
+    layout?: 'inline' | 'horizontal' | 'vertical';
+    /**
+     * 是否内联表单
+     * @default false
+     */
+    inline?: boolean;
+    /**
+     * 是否禁用所有表单项
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 组件尺寸
+     * @default 'default'
+     */
+    size?: ComponentSize;
+}
+/**
+ * Form Emits
+ */
+export interface FormEmits {
+    /**
+     * 验证事件
+     */
+    (e: 'validate', prop: string, valid: boolean, message: string): void;
+    /**
+     * 提交事件
+     */
+    (e: 'submit'): void;
+    /**
+     * 重置事件
+     */
+    (e: 'reset'): void;
+}
+/**
+ * Form Expose
+ */
+export interface FormExpose {
+    /**
+     * 验证整个表单
+     */
+    validate: () => Promise<boolean>;
+    /**
+     * 验证指定字段
+     */
+    validateField: (props: string | string[]) => Promise<boolean>;
+    /**
+     * 重置表单
+     */
+    resetFields: () => void;
+    /**
+     * 清除验证
+     */
+    clearValidate: (props?: string | string[]) => void;
+}
+/**
+ * Form 组件实例类型
+ */
+export type FormInstance = InstanceType<typeof import('./index.vue').default>;
+/**
+ * FormItem Props
+ */
+export interface FormItemProps {
+    /**
+     * 字段名
+     */
+    prop?: string;
+    /**
+     * 标签文本
+     */
+    label?: string;
+    /**
+     * 标签宽度
+     */
+    labelWidth?: string | number;
+    /**
+     * 是否必填
+     */
+    required?: boolean;
+    /**
+     * 验证规则
+     */
+    rules?: FormRule[];
+    /**
+     * 是否显示错误信息
+     */
+    showMessage?: boolean;
+}
+/**
+ * FormItem Expose
+ */
+export interface FormItemExpose {
+    /**
+     * 验证方法
+     */
+    validate: (trigger?: string) => Promise<boolean>;
+    /**
+     * 重置字段
+     */
+    resetField: () => void;
+    /**
+     * 清除验证
+     */
+    clearValidate: () => void;
+}
+/**
+ * FormItem 组件实例类型
+ */
+export type FormItemInstance = InstanceType<typeof import('./item.vue').default>;

package/es/Form/validators.d.ts

@@ -0,0 +1,60 @@
+/**
+ * 内置验证规则
+ * 提供常用的表单验证规则
+ */
+export type ValidatorRule = {
+    required?: boolean;
+    message?: string;
+    trigger?: 'blur' | 'change';
+    min?: number;
+    max?: number;
+    pattern?: RegExp;
+    validator?: (rule: any, value: any, callback: (error?: Error) => void) => void;
+};
+export declare const required: (message?: string) => ValidatorRule;
+export declare const email: (message?: string) => ValidatorRule;
+export declare const phone: (message?: string) => ValidatorRule;
+export declare const idCard: (message?: string) => ValidatorRule;
+export declare const url: (message?: string) => ValidatorRule;
+export declare const number: (message?: string) => ValidatorRule;
+export declare const integer: (message?: string) => ValidatorRule;
+export declare const positiveInteger: (message?: string) => ValidatorRule;
+export declare const letter: (message?: string) => ValidatorRule;
+export declare const alphanumeric: (message?: string) => ValidatorRule;
+export declare const chinese: (message?: string) => ValidatorRule;
+export declare const range: (min: number, max: number, message?: string) => ValidatorRule;
+export declare const minLength: (min: number, message?: string) => ValidatorRule;
+export declare const maxLength: (max: number, message?: string) => ValidatorRule;
+export declare const password: (message?: string) => ValidatorRule;
+export declare const strongPassword: (message?: string) => ValidatorRule;
+export declare const ip: (message?: string) => ValidatorRule;
+export declare const port: (message?: string) => ValidatorRule;
+export declare const bankCard: (message?: string) => ValidatorRule;
+export declare const carNumber: (message?: string) => ValidatorRule;
+export declare const pattern: (regexp: RegExp, message: string) => ValidatorRule;
+export declare const validator: (validateFn: (value: any) => boolean | string | Promise<boolean | string>, message?: string) => ValidatorRule;
+export declare const validators: {
+    required: (message?: string) => ValidatorRule;
+    email: (message?: string) => ValidatorRule;
+    phone: (message?: string) => ValidatorRule;
+    idCard: (message?: string) => ValidatorRule;
+    url: (message?: string) => ValidatorRule;
+    number: (message?: string) => ValidatorRule;
+    integer: (message?: string) => ValidatorRule;
+    positiveInteger: (message?: string) => ValidatorRule;
+    letter: (message?: string) => ValidatorRule;
+    alphanumeric: (message?: string) => ValidatorRule;
+    chinese: (message?: string) => ValidatorRule;
+    range: (min: number, max: number, message?: string) => ValidatorRule;
+    minLength: (min: number, message?: string) => ValidatorRule;
+    maxLength: (max: number, message?: string) => ValidatorRule;
+    password: (message?: string) => ValidatorRule;
+    strongPassword: (message?: string) => ValidatorRule;
+    ip: (message?: string) => ValidatorRule;
+    port: (message?: string) => ValidatorRule;
+    bankCard: (message?: string) => ValidatorRule;
+    carNumber: (message?: string) => ValidatorRule;
+    pattern: (regexp: RegExp, message: string) => ValidatorRule;
+    validator: (validateFn: (value: any) => boolean | string | Promise<boolean | string>, message?: string) => ValidatorRule;
+};
+export default validators;