@melt-js/comps-vben 0.0.0-stage → 2026.11.8-2

package/src/form-ui/form-render/form-group.vue

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import type { FormGroupSchema } from '../types';
+
+import { computed, ref, watch } from 'vue';
+
+import { ChevronsDown } from '@melt-js/libs-vben/core-icons';
+import { VbenCollapsible, VbenRenderContent } from '@melt-js/comps-vben/shadcn-ui';
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { injectRenderFormProps } from './context';
+
+interface Props {
+  /** 分组内容区（字段栅格）的样式 */
+  contentClass?: string;
+  /** 表单折叠按钮收起时是否隐藏当前分组 */
+  hidden?: boolean;
+  schema: FormGroupSchema;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  contentClass: '',
+  hidden: false,
+});
+
+const formRenderProps = injectRenderFormProps();
+
+const collapseOpen = ref(
+  props.schema.collapsible === false || !props.schema.defaultCollapsed,
+);
+
+const shouldCollapsible = computed(() => {
+  return props.schema.collapsible !== false;
+});
+
+// 组内任一字段校验失败时自动展开，避免错误提示被折叠区域遮住
+const hasInvalidField = computed(() => {
+  const errors = formRenderProps.form?.errors ?? {};
+  return props.schema.children.some(({ fieldName }) =>
+    Object.entries(errors).some(
+      ([errorFieldName, error]) =>
+        Boolean(error) &&
+        (errorFieldName === fieldName ||
+          errorFieldName.startsWith(`${fieldName}.`) ||
+          errorFieldName.startsWith(`${fieldName}[`)),
+    ),
+  );
+});
+
+watch(hasInvalidField, (invalid) => {
+  if (invalid && !collapseOpen.value) {
+    collapseOpen.value = true;
+  }
+});
+
+function toggleCollapsed() {
+  if (!shouldCollapsible.value) {
+    return;
+  }
+  collapseOpen.value = !collapseOpen.value;
+}
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'form-group col-span-full flex w-full flex-col',
+        { hidden: props.hidden },
+        props.schema.formItemClass,
+      )
+    "
+  >
+    <VbenCollapsible v-model:open="collapseOpen" :show-trigger="false">
+      <template #label>
+        <div
+          class="form-group-header mb-2 flex min-h-7 flex-1 items-center gap-2"
+        >
+          <component
+            :is="shouldCollapsible ? 'button' : 'div'"
+            :aria-expanded="shouldCollapsible ? collapseOpen : undefined"
+            :class="
+              cn('flex min-w-0 flex-1 items-center gap-2 text-left', {
+                'focus-visible:ring-ring cursor-pointer select-none rounded-sm outline-none focus-visible:ring-2':
+                  shouldCollapsible,
+              })
+            "
+            :type="shouldCollapsible ? 'button' : undefined"
+            class="form-group-trigger"
+            @click="toggleCollapsed"
+          >
+            <span
+              class="bg-primary h-3.5 w-[3px] flex-none rounded-full"
+            ></span>
+            <span
+              v-if="props.schema.title"
+              class="form-group-title text-sm font-medium leading-6"
+            >
+              <VbenRenderContent :content="props.schema.title" />
+            </span>
+            <ChevronsDown
+              v-if="shouldCollapsible"
+              aria-hidden="true"
+              :size="16"
+              :class="
+                cn(
+                  'text-muted-foreground ml-auto flex-none transition-transform',
+                  {
+                    'rotate-180': collapseOpen,
+                  },
+                )
+              "
+            />
+          </component>
+          <div v-if="props.schema.extra" class="flex-none">
+            <VbenRenderContent :content="props.schema.extra" />
+          </div>
+        </div>
+      </template>
+      <template #collapsibleContent>
+        <div :class="props.contentClass">
+          <slot></slot>
+        </div>
+      </template>
+    </VbenCollapsible>
+  </div>
+</template>

package/src/form-ui/form-render/form-label.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { CustomRenderType } from '../types';
+
+import { useForwardExpose } from '@melt-js/libs-vben/composables';
+import {
+  FormLabel,
+  VbenHelpTooltip,
+  VbenRenderContent,
+} from '@melt-js/comps-vben/shadcn-ui';
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+interface Props {
+  class?: string;
+  colon?: boolean;
+  help?: CustomRenderType;
+  label?: CustomRenderType;
+  required?: boolean;
+}
+
+const props = defineProps<Props>();
+
+const { forwardRef } = useForwardExpose();
+</script>
+
+<template>
+  <FormLabel :ref="forwardRef" :class="cn('flex items-center', props.class)">
+    <span v-if="required" class="mr-0.5 text-destructive">*</span>
+    <slot></slot>
+    <VbenHelpTooltip v-if="help" trigger-class="size-3.5 ml-1">
+      <VbenRenderContent :content="help" />
+    </VbenHelpTooltip>
+    <slot name="extra"></slot>
+    <span v-if="colon && label" class="ml-0.5">:</span>
+  </FormLabel>
+</template>

package/src/form-ui/form-render/form.vue

@@ -0,0 +1,205 @@
+<script setup lang="ts">
+import type { ZodType } from 'zod';
+
+import type {
+  FormCommonConfig,
+  FormFieldSchema,
+  FormGroupSchema,
+  FormRenderProps,
+  FormShape,
+} from '../types';
+import type { NormalizedFormFieldSchema } from './schema';
+
+import { computed, reactive, toRaw, toRefs } from 'vue';
+
+import { cn, isString } from '@melt-js/libs-vben/shared/utils';
+
+import { provideFormRenderProps } from './context';
+import { useExpandable } from './expandable';
+import FormField from './form-field.vue';
+import FormGroup from './form-group.vue';
+import { getBaseRules, getDefaultValueInZodStack } from './helper';
+import {
+  createFormFieldSchema,
+  getFormFieldSchemas,
+  isFormGroupSchema,
+} from './schema';
+import { useFormLabelWidth } from './utils';
+
+interface NormalizedFormGroupSchema extends FormGroupSchema {
+  fields: NormalizedFormFieldSchema[];
+  hidden: boolean;
+  key: string;
+}
+
+interface Props extends FormRenderProps {}
+
+const props = withDefaults(
+  defineProps<Props & { globalCommonConfig?: FormCommonConfig }>(),
+  {
+    collapsedRows: 1,
+    commonConfig: () => ({}),
+    globalCommonConfig: () => ({}),
+    showCollapseButton: false,
+    wrapperClass: 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3',
+  },
+);
+
+const emits = defineEmits<{
+  submit: [event: any];
+}>();
+
+function getWrapperClass(gridClass?: string) {
+  const cls = ['flex'];
+  if (props.layout === 'inline') {
+    cls.push('flex-wrap gap-x-2');
+  } else {
+    cls.push(props.compact ? 'gap-x-2' : 'gap-x-4', 'flex-col grid');
+  }
+  return cn(...cls, gridClass);
+}
+
+const wrapperClass = computed(() => getWrapperClass(props.wrapperClass));
+
+provideFormRenderProps(reactive({ ...toRefs(props), ...useFormLabelWidth() }));
+
+const { isCalculated, keepFormItemIndex, wrapperRef } = useExpandable(props);
+
+const formFieldSchemas = computed(() => {
+  return getFormFieldSchemas(props.schema ?? []);
+});
+
+const shapes = computed(() => {
+  const resultShapes: FormShape[] = [];
+  formFieldSchemas.value.forEach((schema) => {
+    const { fieldName } = schema;
+    const rules = toRaw(schema.rules) as ZodType;
+
+    const baseRules = getBaseRules(rules) as ZodType;
+
+    resultShapes.push({
+      default: getDefaultValueInZodStack(rules),
+      fieldName,
+      required: Boolean(rules && !isString(rules) && !rules.isOptional()),
+      rules: baseRules,
+    });
+  });
+  return resultShapes;
+});
+
+const formComponent = 'form';
+
+const formComponentProps = computed(() => {
+  return props.form
+    ? {
+        onSubmit: props.form.handleSubmit(() => emits('submit', undefined)),
+      }
+    : {
+        onSubmit: (event: Event) => {
+          event.preventDefault();
+          emits('submit', event);
+        },
+      };
+});
+
+const formCollapsed = computed(() => {
+  return props.collapsed && isCalculated.value;
+});
+
+function normalizeFieldSchema(schema: FormFieldSchema, hidden = false) {
+  return createFormFieldSchema(schema as never, {
+    commonConfig: props.commonConfig,
+    globalCommonConfig: props.globalCommonConfig,
+    hidden,
+  });
+}
+
+const computedSchema = computed(
+  (): Array<NormalizedFormFieldSchema | NormalizedFormGroupSchema> => {
+    const keepIndex = keepFormItemIndex.value;
+    const result: Array<NormalizedFormFieldSchema | NormalizedFormGroupSchema> =
+      [];
+
+    (props.schema ?? []).forEach((schema, index) => {
+      const hidden =
+        // 折叠状态 & 显示折叠按钮 & 当前索引大于保留索引（分组按一个顶层项计算）
+        props.showCollapseButton && !!formCollapsed.value && keepIndex
+          ? keepIndex <= index
+          : false;
+
+      if (isFormGroupSchema(schema)) {
+        if (schema.hide || schema.children.length === 0) {
+          return;
+        }
+        result.push({
+          ...schema,
+          fields: schema.children.map((field) => normalizeFieldSchema(field)),
+          hidden,
+          key: schema.name ?? `group-${index}`,
+        });
+        return;
+      }
+
+      result.push(normalizeFieldSchema(schema, hidden));
+    });
+
+    return result;
+  },
+);
+
+function isNormalizedFormGroupSchema(
+  schema: NormalizedFormFieldSchema | NormalizedFormGroupSchema,
+): schema is NormalizedFormGroupSchema {
+  return isFormGroupSchema(schema);
+}
+
+function getGroupWrapperClass(schema: NormalizedFormGroupSchema) {
+  return getWrapperClass(schema.wrapperClass ?? props.wrapperClass);
+}
+</script>
+
+<template>
+  <component :is="formComponent" v-bind="formComponentProps">
+    <div ref="wrapperRef" :class="wrapperClass">
+      <template
+        v-for="cSchema in computedSchema"
+        :key="
+          isNormalizedFormGroupSchema(cSchema) ? cSchema.key : cSchema.fieldName
+        "
+      >
+        <FormGroup
+          v-if="isNormalizedFormGroupSchema(cSchema)"
+          :content-class="getGroupWrapperClass(cSchema)"
+          :hidden="cSchema.hidden"
+          :schema="cSchema"
+        >
+          <FormField
+            v-for="fieldSchema in cSchema.fields"
+            :key="fieldSchema.fieldName"
+            v-bind="fieldSchema"
+            :class="fieldSchema.formItemClass"
+            :rules="fieldSchema.rules"
+          >
+            <template #default="slotProps">
+              <slot v-bind="slotProps" :name="fieldSchema.fieldName"></slot>
+            </template>
+          </FormField>
+        </FormGroup>
+        <!-- <div v-if="$slots[cSchema.fieldName]" :class="cSchema.formItemClass">
+          <slot :definition="cSchema" :name="cSchema.fieldName"> </slot>
+        </div> -->
+        <FormField
+          v-else
+          v-bind="cSchema"
+          :class="cSchema.formItemClass"
+          :rules="cSchema.rules"
+        >
+          <template #default="slotProps">
+            <slot v-bind="slotProps" :name="cSchema.fieldName"> </slot>
+          </template>
+        </FormField>
+      </template>
+      <slot :shapes="shapes"></slot>
+    </div>
+  </component>
+</template>

package/src/form-ui/form-render/helper.ts

@@ -0,0 +1,65 @@
+import type { ZodType } from 'zod';
+
+import { toRaw } from 'vue';
+
+import { isObject, isString } from '@melt-js/libs-vben/shared/utils';
+
+import { ZodPipe } from 'zod';
+
+type UnwrappableZodType = ZodType & {
+  unwrap?: () => ZodType;
+};
+
+/**
+ * Get the lowest level Zod type.
+ * This will unpack optionals, refinements, etc.
+ */
+export function getBaseRules(schema?: null | string | ZodType): null | ZodType {
+  if (!schema || isString(schema)) return null;
+  const rawSchema = toRaw(schema);
+
+  if (rawSchema instanceof ZodPipe) {
+    return getBaseRules(rawSchema.in as ZodType);
+  }
+
+  // In zod v4, ZodArray also has an unwrap() that returns its element type
+  // (not an outer wrapper). We must not unwrap it, otherwise z.array(T) loses
+  // its array shell and array values fail validation.
+  const defType = (rawSchema as unknown as { _zod?: { def: { type: string } } })
+    ._zod?.def?.type;
+  if (defType === 'array') {
+    return rawSchema;
+  }
+
+  const unwrappedSchema = (rawSchema as UnwrappableZodType).unwrap?.();
+  if (unwrappedSchema && unwrappedSchema !== rawSchema) {
+    return getBaseRules(unwrappedSchema);
+  }
+
+  return rawSchema;
+}
+
+/**
+ * Search for a "ZodDefault" in the Zod stack and return its value.
+ */
+export function getDefaultValueInZodStack(
+  schema?: null | string | ZodType,
+): any {
+  if (!schema || isString(schema)) {
+    return undefined;
+  }
+
+  try {
+    const result = toRaw(schema).safeParse(undefined);
+    return result.success ? result.data : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+export function isEventObjectLike(obj: any) {
+  if (!obj || !isObject(obj)) {
+    return false;
+  }
+  return Reflect.has(obj, 'target') && Reflect.has(obj, 'stopPropagation');
+}

package/src/form-ui/form-render/index.ts

@@ -0,0 +1,3 @@
+export { default as FormField } from './form-field.vue';
+export { default as FormLabel } from './form-label.vue';
+export { default as Form } from './form.vue';