@yh-ui/components 0.1.0

package/dist/form/src/form.d.ts

@@ -0,0 +1,137 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import { FormContextKey } from '@yh-ui/hooks';
+export type { FormContext } from '@yh-ui/hooks';
+export { FormContextKey };
+/**
+ * 表单布局模式
+ */
+export type FormLayout = 'horizontal' | 'vertical' | 'inline';
+/**
+ * 标签位置
+ */
+export type LabelPosition = 'left' | 'right' | 'top';
+/**
+ * 校验触发时机
+ */
+export type FormValidateTrigger = 'blur' | 'change';
+/**
+ * 表单组件尺寸
+ */
+export type ComponentSize = 'large' | 'default' | 'small';
+/**
+ * 校验规则接口
+ */
+export interface FormRule {
+    required?: boolean;
+    message?: string;
+    trigger?: FormValidateTrigger | FormValidateTrigger[];
+    min?: number;
+    max?: number;
+    len?: number;
+    pattern?: RegExp;
+    validator?: (rule: FormRule, value: unknown, callback: (error?: string | Error) => void) => void | Promise<void>;
+    type?: string;
+}
+export type FormRules = Record<string, FormRule | FormRule[]>;
+/**
+ * Form Props 定义
+ */
+export declare const formProps: {
+    /**
+     * 表单数据对象
+     */
+    readonly model: {
+        readonly type: PropType<Record<string, unknown>>;
+        readonly required: true;
+    };
+    /**
+     * 表单验证规则
+     */
+    readonly rules: {
+        readonly type: PropType<FormRules>;
+        readonly default: () => {};
+    };
+    /**
+     * 标签宽度
+     */
+    readonly labelWidth: {
+        readonly type: PropType<string | number>;
+        readonly default: "";
+    };
+    /**
+     * 标签位置
+     */
+    readonly labelPosition: {
+        readonly type: PropType<LabelPosition>;
+        readonly default: "right";
+    };
+    /**
+     * 标签后缀
+     */
+    readonly labelSuffix: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    /**
+     * 是否显示校验错误信息
+     */
+    readonly showMessage: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    /**
+     * 校验由于失败滚动到第一个错误表单项
+     */
+    readonly scrollToError: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    /**
+     * 滚动到错误表单项的配置
+     */
+    readonly scrollIntoViewOptions: {
+        readonly type: PropType<boolean | ScrollIntoViewOptions>;
+        readonly default: false;
+    };
+    /**
+     * 是否禁用该表单内所有组件
+     */
+    readonly disabled: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    /**
+     * 是否显示必填星号
+     */
+    readonly hideRequiredAsterisk: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    /**
+     * 表单内组件的尺寸
+     */
+    readonly size: {
+        readonly type: PropType<ComponentSize>;
+        readonly default: "default";
+    };
+    /**
+     * 是否显示校验图标
+     */
+    readonly statusIcon: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    /**
+     * 布局模式
+     */
+    readonly layout: {
+        readonly type: PropType<FormLayout>;
+        readonly default: "horizontal";
+    };
+    /** 主题覆盖变量 */
+    readonly themeOverrides: {
+        readonly type: PropType<import("@yh-ui/theme").ComponentThemeVars>;
+        readonly default: undefined;
+    };
+};
+export type FormProps = ExtractPropTypes<typeof formProps>;

package/dist/form/src/form.d.vue.ts

@@ -0,0 +1,149 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    readonly model: {
+        readonly type: import("vue").PropType<Record<string, unknown>>;
+        readonly required: true;
+    };
+    readonly rules: {
+        readonly type: import("vue").PropType<import("./form").FormRules>;
+        readonly default: () => {};
+    };
+    readonly labelWidth: {
+        readonly type: import("vue").PropType<string | number>;
+        readonly default: "";
+    };
+    readonly labelPosition: {
+        readonly type: import("vue").PropType<import("./form").LabelPosition>;
+        readonly default: "right";
+    };
+    readonly labelSuffix: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly showMessage: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly scrollToError: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly scrollIntoViewOptions: {
+        readonly type: import("vue").PropType<boolean | ScrollIntoViewOptions>;
+        readonly default: false;
+    };
+    readonly disabled: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly hideRequiredAsterisk: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly size: {
+        readonly type: import("vue").PropType<import("./form").ComponentSize>;
+        readonly default: "default";
+    };
+    readonly statusIcon: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly layout: {
+        readonly type: import("vue").PropType<import("./form").FormLayout>;
+        readonly default: "horizontal";
+    };
+    readonly themeOverrides: {
+        readonly type: import("vue").PropType<import("@yh-ui/theme").ComponentThemeVars>;
+        readonly default: undefined;
+    };
+}>, {
+    validate: (propsToValidateOrCb?: string | string[] | ((isValid: boolean, invalidFields?: Record<string, unknown>) => void), callback?: (isValid: boolean, invalidFields?: Record<string, unknown>) => void) => Promise<boolean>;
+    resetFields: (props?: string | string[]) => void;
+    clearValidate: (props?: string | string[]) => void;
+    scrollToField: (prop: string) => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    validate: (isValid: boolean, invalidFields?: Record<string, unknown> | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly model: {
+        readonly type: import("vue").PropType<Record<string, unknown>>;
+        readonly required: true;
+    };
+    readonly rules: {
+        readonly type: import("vue").PropType<import("./form").FormRules>;
+        readonly default: () => {};
+    };
+    readonly labelWidth: {
+        readonly type: import("vue").PropType<string | number>;
+        readonly default: "";
+    };
+    readonly labelPosition: {
+        readonly type: import("vue").PropType<import("./form").LabelPosition>;
+        readonly default: "right";
+    };
+    readonly labelSuffix: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly showMessage: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly scrollToError: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly scrollIntoViewOptions: {
+        readonly type: import("vue").PropType<boolean | ScrollIntoViewOptions>;
+        readonly default: false;
+    };
+    readonly disabled: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly hideRequiredAsterisk: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly size: {
+        readonly type: import("vue").PropType<import("./form").ComponentSize>;
+        readonly default: "default";
+    };
+    readonly statusIcon: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly layout: {
+        readonly type: import("vue").PropType<import("./form").FormLayout>;
+        readonly default: "horizontal";
+    };
+    readonly themeOverrides: {
+        readonly type: import("vue").PropType<import("@yh-ui/theme").ComponentThemeVars>;
+        readonly default: undefined;
+    };
+}>> & Readonly<{
+    onValidate?: ((isValid: boolean, invalidFields?: Record<string, unknown> | undefined) => any) | undefined;
+}>, {
+    readonly disabled: boolean;
+    readonly themeOverrides: import("@yh-ui/theme").ComponentThemeVars;
+    readonly layout: import("./form").FormLayout;
+    readonly size: import("./form").ComponentSize;
+    readonly rules: import("./form").FormRules;
+    readonly labelWidth: string | number;
+    readonly labelPosition: import("./form").LabelPosition;
+    readonly labelSuffix: string;
+    readonly showMessage: boolean;
+    readonly scrollToError: boolean;
+    readonly scrollIntoViewOptions: boolean | ScrollIntoViewOptions;
+    readonly hideRequiredAsterisk: boolean;
+    readonly statusIcon: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/form/src/form.mjs

@@ -0,0 +1,100 @@
+import { FormContextKey } from "@yh-ui/hooks";
+export { FormContextKey };
+export const formProps = {
+  /**
+   * 表单数据对象
+   */
+  model: {
+    type: Object,
+    required: true
+  },
+  /**
+   * 表单验证规则
+   */
+  rules: {
+    type: Object,
+    default: () => ({})
+  },
+  /**
+   * 标签宽度
+   */
+  labelWidth: {
+    type: [String, Number],
+    default: ""
+  },
+  /**
+   * 标签位置
+   */
+  labelPosition: {
+    type: String,
+    default: "right"
+  },
+  /**
+   * 标签后缀
+   */
+  labelSuffix: {
+    type: String,
+    default: ""
+  },
+  /**
+   * 是否显示校验错误信息
+   */
+  showMessage: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * 校验由于失败滚动到第一个错误表单项
+   */
+  scrollToError: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 滚动到错误表单项的配置
+   */
+  scrollIntoViewOptions: {
+    type: [Object, Boolean],
+    default: false
+  },
+  /**
+   * 是否禁用该表单内所有组件
+   */
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 是否显示必填星号
+   */
+  hideRequiredAsterisk: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 表单内组件的尺寸
+   */
+  size: {
+    type: String,
+    default: "default"
+  },
+  /**
+   * 是否显示校验图标
+   */
+  statusIcon: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 布局模式
+   */
+  layout: {
+    type: String,
+    default: "horizontal"
+  },
+  /** 主题覆盖变量 */
+  themeOverrides: {
+    type: Object,
+    default: void 0
+  }
+};