@yh-ui/components 0.1.0

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

@@ -0,0 +1,143 @@
+import type { FormRule } from './form';
+import type { ValidateStatus } from './form-item';
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    label?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    readonly prop: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly label: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly labelWidth: {
+        readonly type: import("vue").PropType<string | number>;
+        readonly default: "";
+    };
+    readonly required: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly rules: {
+        readonly type: import("vue").PropType<FormRule | FormRule[]>;
+        readonly default: () => never[];
+    };
+    readonly showMessage: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly size: {
+        readonly type: import("vue").PropType<"large" | "default" | "small">;
+        readonly default: "";
+    };
+    readonly validateTrigger: {
+        readonly type: import("vue").PropType<string | string[]>;
+        readonly default: "";
+    };
+    readonly errorPosition: {
+        readonly type: import("vue").PropType<"left" | "center" | "right">;
+        readonly default: "left";
+    };
+    readonly disabled: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly validateStatus: {
+        readonly type: import("vue").PropType<ValidateStatus>;
+        readonly default: "";
+    };
+    readonly error: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly themeOverrides: {
+        readonly type: import("vue").PropType<import("@yh-ui/theme").ComponentThemeVars>;
+        readonly default: undefined;
+    };
+}>, {
+    validate: (trigger?: string, callback?: (isValid: boolean) => void) => Promise<boolean>;
+    resetField: () => void;
+    clearValidate: () => void;
+    validateStatus: import("vue").ComputedRef<ValidateStatus>;
+    validateMessage: import("vue").ComputedRef<string>;
+    size: import("vue").ComputedRef<"small" | "default" | "large">;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly prop: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly label: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly labelWidth: {
+        readonly type: import("vue").PropType<string | number>;
+        readonly default: "";
+    };
+    readonly required: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly rules: {
+        readonly type: import("vue").PropType<FormRule | FormRule[]>;
+        readonly default: () => never[];
+    };
+    readonly showMessage: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly size: {
+        readonly type: import("vue").PropType<"large" | "default" | "small">;
+        readonly default: "";
+    };
+    readonly validateTrigger: {
+        readonly type: import("vue").PropType<string | string[]>;
+        readonly default: "";
+    };
+    readonly errorPosition: {
+        readonly type: import("vue").PropType<"left" | "center" | "right">;
+        readonly default: "left";
+    };
+    readonly disabled: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly validateStatus: {
+        readonly type: import("vue").PropType<ValidateStatus>;
+        readonly default: "";
+    };
+    readonly error: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly themeOverrides: {
+        readonly type: import("vue").PropType<import("@yh-ui/theme").ComponentThemeVars>;
+        readonly default: undefined;
+    };
+}>> & Readonly<{}>, {
+    readonly disabled: boolean;
+    readonly themeOverrides: import("@yh-ui/theme").ComponentThemeVars;
+    readonly size: "small" | "default" | "large";
+    readonly label: string;
+    readonly error: string;
+    readonly required: boolean;
+    readonly rules: FormRule | FormRule[];
+    readonly labelWidth: string | number;
+    readonly showMessage: boolean;
+    readonly prop: string;
+    readonly validateTrigger: string | string[];
+    readonly errorPosition: "left" | "center" | "right";
+    readonly validateStatus: ValidateStatus;
+}, {}, {}, {}, 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-schema.cjs

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formSchemaProps = void 0;
+const formSchemaProps = exports.formSchemaProps = {
+  /**
+   * 表单数据对象 (v-model)
+   */
+  modelValue: {
+    type: Object,
+    required: true
+  },
+  /**
+   * 表单配置列表
+   */
+  schema: {
+    type: Array,
+    required: true,
+    default: () => []
+  },
+  /**
+   * 透传给 YhForm 的属性
+   */
+  formProps: {
+    type: Object,
+    default: () => ({})
+  },
+  /**
+   * 栅格间隔
+   */
+  gutter: {
+    type: Number,
+    default: 20
+  }
+};

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

@@ -0,0 +1,83 @@
+import type { ExtractPropTypes, PropType, Component } from 'vue';
+import type { FormProps } from './form';
+import type { FormItemProps } from './form-item';
+import type { FormRule } from './form';
+/**
+ * FormSchema 单项配置
+ */
+export interface FormSchemaItem {
+    /** 字段名 */
+    field: string;
+    /** 标签名 */
+    label?: string;
+    /** 组件名，支持 yh-input 等字符串或原生组件对象 */
+    component: string | Component;
+    /** 绑定到组件的 props */
+    props?: Record<string, unknown> | ((model: Record<string, unknown>) => Record<string, unknown>);
+    /** 绑定到 form-item 的 props */
+    formItemProps?: Partial<FormItemProps>;
+    /** 校验规则 */
+    rules?: FormRule[];
+    /** 是否必填 */
+    required?: boolean;
+    /** 是否隐藏 */
+    hidden?: boolean | ((model: Record<string, unknown>) => boolean);
+    /** 插槽配置 */
+    slots?: Record<string, unknown>;
+    /** 栅格占位 (1-24) */
+    col?: number;
+    /** 自定义渲染函数 */
+    render?: (model: Record<string, unknown>) => Component;
+    /** 异步加载选项配置 */
+    asyncOptions?: () => Promise<Record<string, unknown>[]>;
+    /** 接收选项数据的属性名，默认 options */
+    optionProp?: string;
+}
+/**
+ * FormSchema 分组配置
+ */
+export interface FormSchemaGroup {
+    /** 分组标题 */
+    title?: string;
+    /** 分组内的表单项 */
+    items: FormSchemaItem[];
+    /** 分组绑定的额外属性 */
+    props?: Record<string, unknown>;
+    /** 是否可折叠 */
+    collapsible?: boolean;
+    /** 默认是否折叠 */
+    collapsed?: boolean;
+}
+export type FormSchema = (FormSchemaItem | FormSchemaGroup)[];
+export declare const formSchemaProps: {
+    /**
+     * 表单数据对象 (v-model)
+     */
+    readonly modelValue: {
+        readonly type: PropType<Record<string, unknown>>;
+        readonly required: true;
+    };
+    /**
+     * 表单配置列表
+     */
+    readonly schema: {
+        readonly type: PropType<FormSchema>;
+        readonly required: true;
+        readonly default: () => never[];
+    };
+    /**
+     * 透传给 YhForm 的属性
+     */
+    readonly formProps: {
+        readonly type: PropType<Partial<FormProps>>;
+        readonly default: () => {};
+    };
+    /**
+     * 栅格间隔
+     */
+    readonly gutter: {
+        readonly type: NumberConstructor;
+        readonly default: 20;
+    };
+};
+export type FormSchemaProps = ExtractPropTypes<typeof formSchemaProps>;

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

@@ -0,0 +1,66 @@
+import type { FormSchema } from './form-schema';
+declare var __VLS_10: any, __VLS_11: {
+    model: any;
+    item: any;
+}, __VLS_18: any, __VLS_19: {
+    model: any;
+    item: any;
+    handleUpdate: any;
+}, __VLS_41: any, __VLS_42: {
+    model: any;
+    item: any;
+}, __VLS_49: any, __VLS_50: {
+    model: any;
+    item: any;
+    handleUpdate: any;
+}, __VLS_68: {
+    model: any;
+    formRef: any;
+};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_10>]?: (props: typeof __VLS_11) => any;
+} & {
+    [K in NonNullable<typeof __VLS_18>]?: (props: typeof __VLS_19) => any;
+} & {
+    [K in NonNullable<typeof __VLS_41>]?: (props: typeof __VLS_42) => any;
+} & {
+    [K in NonNullable<typeof __VLS_49>]?: (props: typeof __VLS_50) => any;
+} & {
+    footer?: (props: typeof __VLS_68) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    readonly modelValue: {
+        readonly type: import("vue").PropType<Record<string, unknown>>;
+        readonly required: true;
+    };
+    readonly schema: {
+        readonly type: import("vue").PropType<FormSchema>;
+        readonly required: true;
+        readonly default: () => never[];
+    };
+    readonly formProps: {
+        readonly type: import("vue").PropType<Partial<import("./form").FormProps>>;
+        readonly default: () => {};
+    };
+    readonly gutter: {
+        readonly type: NumberConstructor;
+        readonly default: 20;
+    };
+}>, {
+    validate: (props?: string | string[], callback?: (isValid: boolean) => void) => any;
+    resetFields: (props?: string | string[]) => any;
+    clearValidate: (props?: string | string[]) => any;
+    scrollToField: (prop: string) => any;
+    formRef: import("vue").Ref<any, any>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
+    readonly gutter: number;
+    readonly schema: FormSchema;
+    readonly formProps: Partial<import("./form").FormProps>;
+}, {}, {}, {}, 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-schema.mjs

@@ -0,0 +1,31 @@
+export const formSchemaProps = {
+  /**
+   * 表单数据对象 (v-model)
+   */
+  modelValue: {
+    type: Object,
+    required: true
+  },
+  /**
+   * 表单配置列表
+   */
+  schema: {
+    type: Array,
+    required: true,
+    default: () => []
+  },
+  /**
+   * 透传给 YhForm 的属性
+   */
+  formProps: {
+    type: Object,
+    default: () => ({})
+  },
+  /**
+   * 栅格间隔
+   */
+  gutter: {
+    type: Number,
+    default: 20
+  }
+};

package/dist/form/src/form-schema.vue

@@ -0,0 +1,320 @@
+<script setup>
+import { ref, watch, reactive } from "vue";
+import YhForm from "./form.vue";
+import YhFormItem from "./form-item.vue";
+import { formSchemaProps } from "./form-schema";
+import { useNamespace } from "@yh-ui/hooks";
+import { get, set } from "@yh-ui/utils";
+defineOptions({
+  name: "YhFormSchema"
+});
+const props = defineProps(formSchemaProps);
+const emit = defineEmits(["update:modelValue", "submit", "change"]);
+const ns = useNamespace("form-schema");
+const formRef = ref();
+const localModel = ref({ ...props.modelValue });
+watch(
+  () => props.modelValue,
+  (val) => {
+    localModel.value = { ...val };
+  },
+  { deep: true }
+);
+const isGroup = (item) => {
+  return "items" in item && Array.isArray(item.items);
+};
+const optionMap = reactive({});
+const collapsedMap = reactive({});
+const initAsyncOptions = async () => {
+  const traverse = async (items) => {
+    for (const item of items) {
+      if (isGroup(item)) {
+        await traverse(item.items);
+      } else {
+        const schemaItem = item;
+        if (schemaItem.asyncOptions) {
+          try {
+            if (!optionMap[schemaItem.field]) {
+              optionMap[schemaItem.field] = await schemaItem.asyncOptions();
+            }
+          } catch (e) {
+            console.error(`[YhFormSchema] Failed to load options for ${schemaItem.field}`, e);
+          }
+        }
+      }
+    }
+  };
+  await traverse(props.schema);
+};
+watch(
+  () => props.schema,
+  (val) => {
+    val.forEach((item) => {
+      if (isGroup(item) && item.title) {
+        if (collapsedMap[item.title] === void 0) {
+          collapsedMap[item.title] = item.collapsed ?? false;
+        }
+      }
+    });
+    initAsyncOptions();
+  },
+  { immediate: true, deep: true }
+);
+const toggleCollapse = (title) => {
+  if (title) {
+    collapsedMap[title] = !collapsedMap[title];
+  }
+};
+const resolveProps = (item) => {
+  let finalProps = {};
+  if (typeof item.props === "function") {
+    finalProps = { ...item.props(localModel.value) };
+  } else {
+    finalProps = { ...item.props || {} };
+  }
+  if (item.asyncOptions && optionMap[item.field]) {
+    const propName = item.optionProp || "options";
+    finalProps[propName] = optionMap[item.field];
+  }
+  return finalProps;
+};
+const getComponent = (comp) => {
+  if (typeof comp === "string") {
+    const map = {
+      input: "yh-input",
+      "input-number": "yh-input-number",
+      "input-tag": "yh-input-tag",
+      checkbox: "yh-checkbox",
+      radio: "yh-radio",
+      select: "yh-select",
+      switch: "yh-switch",
+      tag: "yh-tag"
+    };
+    return map[comp] || comp;
+  }
+  return comp;
+};
+const isItemHidden = (item) => {
+  if (isGroup(item)) return false;
+  const schemaItem = item;
+  if (typeof schemaItem.hidden === "function") {
+    return schemaItem.hidden(localModel.value);
+  }
+  return schemaItem.hidden || false;
+};
+const handleUpdate = (field, val) => {
+  set(localModel.value, field, val);
+  emit("update:modelValue", { ...localModel.value });
+  emit("change", field, val);
+};
+const RenderComponent = (item) => {
+  if (item.render) {
+    return item.render(localModel.value);
+  }
+  return null;
+};
+defineExpose({
+  validate: (props2, callback) => formRef.value?.validate(props2, callback),
+  resetFields: (props2) => formRef.value?.resetFields(props2),
+  clearValidate: (props2) => formRef.value?.clearValidate(props2),
+  scrollToField: (prop) => formRef.value?.scrollToField(prop),
+  formRef
+});
+</script>
+
+<template>
+  <yh-form
+    v-bind="formProps"
+    :model="localModel"
+    ref="formRef"
+    :class="[ns.b(), {
+  'yh-form--grid': true
+}]"
+  >
+    <div class="yh-form-schema__body">
+      <template v-for="(item, index) in schema" :key="index">
+        <!-- 分组渲染 -->
+        <fieldset
+          v-if="isGroup(item)"
+          :class="[ns.e('group'), {
+  'is-collapsed': collapsedMap[item.title || '']
+}]"
+          v-bind="item.props"
+        >
+          <legend
+            v-if="item.title"
+            :class="ns.e('group-title')"
+            @click="item.collapsible && toggleCollapse(item.title)"
+          >
+            {{ item.title }}
+            <span v-if="item.collapsible" :class="['yh-form-schema__collapse-icon']">
+              {{ collapsedMap[item.title] ? "\u25BC" : "\u25B2" }}
+            </span>
+          </legend>
+
+          <div v-show="!collapsedMap[item.title || '']" :class="['yh-form--grid']">
+            <template v-for="subItem in item.items" :key="subItem.field">
+              <div
+                v-if="!isItemHidden(subItem)"
+                :class="['yh-form-col', subItem.col ? `yh-form-col--${subItem.col}` : 'yh-form-col--24']"
+              >
+                <yh-form-item
+                  v-bind="subItem.formItemProps"
+                  :label="subItem.label"
+                  :prop="subItem.field"
+                  :required="subItem.required"
+                  :rules="subItem.rules"
+                >
+                  <!-- Label 插槽 -->
+                  <template
+                    #label
+                    v-if="!$slots[`field-${subItem.field}`] && (subItem.slots?.label || $slots[`label-${subItem.field}`])"
+                  >
+                    <slot :name="`label-${subItem.field}`" :model="localModel" :item="subItem">
+                      <component
+                        :is="subItem.slots?.label"
+                        :model="localModel"
+                        :field="subItem.field"
+                      />
+                    </slot>
+                  </template>
+
+                  <!-- 字段插槽: 优先级最高 -->
+                  <template v-if="$slots[`field-${subItem.field}`]">
+                    <slot
+                      :name="`field-${subItem.field}`"
+                      :model="localModel"
+                      :item="subItem"
+                      :handle-update="handleUpdate"
+                    />
+                  </template>
+
+                  <!-- 默认渲染 & Render -->
+                  <template v-else>
+                    <component v-if="subItem.render" :is="RenderComponent(subItem)" />
+                    <component
+                      v-else
+                      :is="getComponent(subItem.component)"
+                      v-bind="resolveProps(subItem)"
+                      :model-value="get(localModel, subItem.field)"
+                      @update:model-value="val => handleUpdate(subItem.field, val)"
+                    >
+                      <template
+                        v-for="(slotContent, slotName) in subItem.slots"
+                        :key="slotName"
+                        #[slotName]="slotProps"
+                      >
+                        <component
+                          v-if="String(slotName) !== 'label'"
+                          :is="slotContent"
+                          v-bind="slotProps"
+                        />
+                      </template>
+                    </component>
+                  </template>
+                </yh-form-item>
+              </div>
+            </template>
+          </div>
+        </fieldset>
+
+        <!-- 普通项渲染 -->
+        <div
+          v-else
+          :class="['yh-form-col', item.col ? `yh-form-col--${item.col}` : 'yh-form-col--24']"
+        >
+          <div v-if="!isItemHidden(item)">
+            <yh-form-item
+              v-bind="item.formItemProps"
+              :label="item.label"
+              :prop="item.field"
+              :required="item.required"
+              :rules="item.rules"
+            >
+              <template
+                #label
+                v-if="!$slots[`field-${item.field}`] && (item.slots?.label || $slots[`label-${item.field}`])"
+              >
+                <slot :name="`label-${item.field}`" :model="localModel" :item="item">
+                  <component :is="item.slots?.label" :model="localModel" :field="item.field" />
+                </slot>
+              </template>
+
+              <template v-if="$slots[`field-${item.field}`]">
+                <slot
+                  :name="`field-${item.field}`"
+                  :model="localModel"
+                  :item="item"
+                  :handle-update="handleUpdate"
+                />
+              </template>
+
+              <template v-else>
+                <component v-if="item.render" :is="RenderComponent(item)" />
+                <component
+                  v-else
+                  :is="getComponent(item.component)"
+                  v-bind="resolveProps(item)"
+                  :model-value="get(localModel, item.field)"
+                  @update:model-value="val => handleUpdate(item.field, val)"
+                >
+                  <template
+                    v-for="(slotContent, slotName) in item.slots"
+                    :key="slotName"
+                    #[slotName]="slotProps"
+                  >
+                    <component
+                      v-if="String(slotName) !== 'label'"
+                      :is="slotContent"
+                      v-bind="slotProps"
+                    />
+                  </template>
+                </component>
+              </template>
+            </yh-form-item>
+          </div>
+        </div>
+      </template>
+    </div>
+
+    <div v-if="$slots.footer" :class="ns.e('footer')">
+      <slot name="footer" :model="localModel" :form-ref="formRef" />
+    </div>
+  </yh-form>
+</template>
+
+<style>
+.yh-form-schema__group {
+  border: 1px solid var(--yh-border-color-light, #ebeef5);
+  border-radius: 8px;
+  padding: 20px;
+  margin-bottom: 24px;
+  background: var(--yh-bg-color-overlay, #fff);
+  transition: all 0.3s;
+}
+.yh-form-schema__group.is-collapsed {
+  padding-bottom: 0;
+  border-bottom: none;
+}
+.yh-form-schema__group-title {
+  font-weight: 600;
+  font-size: 16px;
+  padding: 0 10px;
+  color: var(--yh-text-color-primary, #303133);
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+}
+.yh-form-schema__collapse-icon {
+  margin-left: 8px;
+  font-size: 12px;
+  opacity: 0.6;
+  transition: transform 0.3s;
+}
+.yh-form-schema__footer {
+  padding-top: 12px;
+  border-top: 1px solid var(--yh-border-color-lighter, #f2f6fc);
+  margin-top: 12px;
+}
+</style>