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

package/src/form-ui/components/form-field-array.vue

@@ -0,0 +1,234 @@
+<script setup lang="ts">
+// oxlint-disable unicorn/no-nested-ternary
+import type { FormCommonConfig, FormFieldSchema } from '../types';
+
+import { computed } from 'vue';
+
+import { Plus, X } from '@melt-js/libs-vben/core-icons';
+import {
+  VbenButton,
+  VbenIconButton,
+  VbenRenderContent,
+} from '@melt-js/comps-vben/shadcn-ui';
+import { cn, get, set } from '@melt-js/libs-vben/shared/utils';
+
+import { injectRenderFormProps } from '../form-render/context';
+import FormField from '../form-render/form-field.vue';
+import { createArrayChildSchema } from '../form-render/schema';
+
+defineOptions({ name: 'VbenFormFieldArray', inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    /** 操作列表头文案 */
+    actionText?: string;
+    /** 「添加」按钮文案 */
+    addButtonText?: string;
+    /** 子字段通用配置 */
+    commonConfig?: FormCommonConfig;
+    /**
+     * 新增一行时生成的默认数据；缺省时按 schema 的 fieldName 生成空对象
+     */
+    createRow?: () => Record<string, any>;
+    disabled?: boolean;
+    /** 空数据文案 */
+    emptyText?: string;
+    /** 子字段全局通用配置 */
+    globalCommonConfig?: FormCommonConfig;
+    /** 最多行数 */
+    max?: number;
+    /** 最少行数 */
+    min?: number;
+    /** 字段路径，由外层 FormField 通过 componentField 透传 */
+    name?: string;
+    /**
+     * 列定义，每一列就是一个子字段（复用 FormFieldSchema）
+     */
+    schema?: FormFieldSchema[];
+    /** 是否显示序号列 */
+    showIndex?: boolean;
+  }>(),
+  {
+    actionText: '操作',
+    addButtonText: '添加一行',
+    createRow: undefined,
+    disabled: false,
+    emptyText: '暂无数据',
+    commonConfig: () => ({}),
+    globalCommonConfig: () => ({}),
+    max: Number.POSITIVE_INFINITY,
+    min: 0,
+    name: '',
+    schema: () => [],
+    showIndex: true,
+  },
+);
+
+const arrayPath = computed(() => props.name);
+const formRenderProps = injectRenderFormProps();
+const form = formRenderProps.form;
+if (!form) {
+  throw new Error('Form api is required in <VbenFormFieldArray />');
+}
+const formActions = form;
+const arrayLength = formActions.useSelector((state) => {
+  const value = get(state.values, props.name);
+  return Array.isArray(value) ? value.length : 0;
+});
+const rowIndexes = computed(() =>
+  Array.from({ length: arrayLength.value }, (_, index) => index),
+);
+
+const canAdd = computed(() => arrayLength.value < props.max);
+const canRemove = computed(() => arrayLength.value > props.min);
+const gridStyle = computed(() => {
+  const columns = [
+    ...(props.showIndex ? ['3rem'] : []),
+    ...props.schema.map(() => 'minmax(0, 1fr)'),
+    '4rem',
+  ];
+  return {
+    gridTemplateColumns: columns.join(' '),
+  };
+});
+
+function buildDefaultRow(): Record<string, any> {
+  if (props.createRow) {
+    return props.createRow();
+  }
+
+  const row: Record<string, any> = {};
+  props.schema.forEach((col) => {
+    let value: any = null;
+    if (Reflect.has(col, 'defaultValue') && col.defaultValue !== undefined) {
+      value = col.defaultValue;
+    } else if ('type' in col && col.type === 'array') {
+      value = [];
+    }
+    set(row, col.fieldName, value);
+  });
+  return row;
+}
+
+function addRow() {
+  if (props.disabled || !canAdd.value) {
+    return;
+  }
+  formActions.pushFieldValue(arrayPath.value, buildDefaultRow());
+}
+
+function removeRow(index: number) {
+  if (props.disabled || !canRemove.value) {
+    return;
+  }
+  void formActions.removeFieldValue(arrayPath.value, index);
+}
+
+function rowSchemas(index: number) {
+  return props.schema.map((col) =>
+    createArrayChildSchema(col as never, {
+      arrayField: arrayPath.value,
+      commonConfig: props.commonConfig,
+      disabled: props.disabled,
+      globalCommonConfig: props.globalCommonConfig,
+      index,
+    }),
+  );
+}
+
+const normalizedRowSchemas = computed(() =>
+  Array.from({ length: arrayLength.value }, (_, index) => rowSchemas(index)),
+);
+</script>
+
+<template>
+  <div :class="cn('w-full', $attrs.class as string)">
+    <div class="border-border/70 overflow-hidden rounded-md border">
+      <div
+        class="bg-muted/30 border-border hidden border-b px-2 sm:grid"
+        :style="gridStyle"
+      >
+        <div
+          v-if="showIndex"
+          class="text-muted-foreground px-2 py-2 text-left text-sm font-normal"
+        >
+          #
+        </div>
+        <div
+          v-for="col in schema"
+          :key="col.fieldName"
+          class="text-muted-foreground px-2 py-2 text-left text-sm font-normal"
+        >
+          <VbenRenderContent :content="col.label" />
+        </div>
+        <div
+          class="text-muted-foreground px-2 py-2 text-left text-sm font-normal"
+        >
+          {{ actionText }}
+        </div>
+      </div>
+
+      <div
+        v-for="index in rowIndexes"
+        :key="`${arrayPath}-${index}`"
+        class="border-border/60 border-b p-3 last:border-b-0 sm:grid sm:p-0"
+        :style="gridStyle"
+      >
+        <div
+          v-if="showIndex"
+          class="text-muted-foreground mb-2 text-sm sm:mb-0 sm:px-4 sm:py-3"
+        >
+          <span class="sm:hidden">#</span>
+          {{ index + 1 }}
+        </div>
+
+        <template
+          v-for="(childSchema, childIndex) in normalizedRowSchemas[index]"
+          :key="childSchema.fieldName"
+        >
+          <div class="min-w-0 py-2 sm:px-2">
+            <div
+              class="text-muted-foreground mb-1 text-xs font-medium sm:hidden"
+            >
+              <VbenRenderContent :content="schema?.[childIndex]?.label" />
+            </div>
+            <FormField
+              v-bind="childSchema"
+              :class="childSchema.formItemClass"
+            />
+          </div>
+        </template>
+
+        <div class="flex justify-end pt-1 sm:block sm:px-2 sm:py-3">
+          <VbenIconButton
+            type="button"
+            :disabled="disabled || !canRemove"
+            :on-click="() => removeRow(index)"
+            class="text-muted-foreground hover:text-destructive"
+          >
+            <X class="size-4" />
+          </VbenIconButton>
+        </div>
+      </div>
+
+      <div
+        v-if="arrayLength === 0"
+        class="text-muted-foreground py-6 text-center text-sm"
+      >
+        {{ emptyText }}
+      </div>
+    </div>
+
+    <VbenButton
+      variant="outline"
+      size="sm"
+      type="button"
+      :disabled="disabled || !canAdd"
+      class="mt-3 w-full border-dashed"
+      @click="addRow"
+    >
+      <Plus class="mr-1 size-4" />
+      {{ addButtonText }}
+    </VbenButton>
+  </div>
+</template>

package/src/form-ui/config.ts

@@ -0,0 +1,117 @@
+import type { Component } from 'vue';
+
+import type {
+  BaseFormComponentType,
+  FormCommonConfig,
+  VbenFormAdapterOptions,
+} from './types';
+
+import { h } from 'vue';
+
+import {
+  VbenButton,
+  VbenCheckbox,
+  Input as VbenInput,
+  VbenInputPassword,
+  VbenPinInput,
+  VbenSelect,
+} from '@melt-js/comps-vben/shadcn-ui';
+import { globalShareState } from '@melt-js/libs-vben/shared/global-state';
+
+import VbenFormFieldArray from './components/form-field-array.vue';
+import { warnDeprecatedOnce } from './deprecation';
+import { registerFormRules } from './rule-registry';
+
+const DEFAULT_MODEL_PROP_NAME = 'modelValue';
+
+export const DEFAULT_FORM_COMMON_CONFIG: FormCommonConfig = {};
+
+const BUILT_IN_COMPONENT_MAP: Record<BaseFormComponentType, Component> = {
+  DefaultButton: h(VbenButton, { size: 'sm', variant: 'outline' }),
+  PrimaryButton: h(VbenButton, { size: 'sm', variant: 'default' }),
+  VbenCheckbox,
+  VbenFormFieldArray,
+  VbenInput,
+  VbenInputPassword,
+  VbenPinInput,
+  VbenSelect,
+};
+
+const BUILT_IN_COMPONENT_BIND_EVENT_MAP: Partial<
+  Record<BaseFormComponentType, string>
+> = {
+  VbenCheckbox: 'checked',
+};
+
+export const COMPONENT_MAP: Record<BaseFormComponentType, Component> = {
+  ...BUILT_IN_COMPONENT_MAP,
+};
+
+export const COMPONENT_BIND_EVENT_MAP: Partial<
+  Record<BaseFormComponentType, string>
+> = {
+  ...BUILT_IN_COMPONENT_BIND_EVENT_MAP,
+};
+
+function replaceRecord<T extends object>(target: T, source: T) {
+  for (const key of Object.keys(target)) {
+    Reflect.deleteProperty(target, key);
+  }
+  Object.assign(target, source);
+}
+
+export function setupVbenForm<
+  T extends BaseFormComponentType = BaseFormComponentType,
+>(options: VbenFormAdapterOptions<T>) {
+  const { config, defineRules, rules } = options;
+
+  const { changeEventFallback = false, emptyStateValue } = (config ||
+    {}) as FormCommonConfig;
+
+  Object.assign(DEFAULT_FORM_COMMON_CONFIG, {
+    changeEventFallback,
+    emptyStateValue,
+  });
+
+  if (defineRules) {
+    warnDeprecatedOnce(
+      'setup-vben-form-define-rules',
+      '[Vben Form] `setupVbenForm({ defineRules })` is deprecated. Use `setupVbenForm({ rules })` instead.',
+    );
+    registerFormRules(defineRules);
+  }
+  if (rules) {
+    registerFormRules(rules);
+  }
+
+  const baseModelPropName =
+    config?.baseModelPropName ?? DEFAULT_MODEL_PROP_NAME;
+  const modelPropNameMap = config?.modelPropNameMap as
+    | Record<BaseFormComponentType, string>
+    | undefined;
+
+  const components = globalShareState.getComponents();
+  const nextComponentMap = {
+    ...BUILT_IN_COMPONENT_MAP,
+    ...components,
+  } as Record<BaseFormComponentType, Component>;
+  const nextBindEventMap = {
+    ...BUILT_IN_COMPONENT_BIND_EVENT_MAP,
+  } as Partial<Record<BaseFormComponentType, string>>;
+
+  for (const component of Object.keys(components)) {
+    const key = component;
+
+    if (baseModelPropName !== DEFAULT_MODEL_PROP_NAME) {
+      nextBindEventMap[key] = baseModelPropName;
+    }
+
+    // 覆盖特殊组件的modelPropName
+    if (modelPropNameMap && modelPropNameMap[key]) {
+      nextBindEventMap[key] = modelPropNameMap[key];
+    }
+  }
+
+  replaceRecord(COMPONENT_MAP, nextComponentMap);
+  replaceRecord(COMPONENT_BIND_EVENT_MAP, nextBindEventMap);
+}

package/src/form-ui/deprecation.ts

@@ -0,0 +1,18 @@
+const warnedDeprecations = new Set<string>();
+
+export function resetDeprecationWarnings() {
+  warnedDeprecations.clear();
+}
+
+export function warnDeprecatedOnce(
+  key: string,
+  message: string,
+  options: { production?: boolean } = {},
+) {
+  const production = options.production ?? import.meta.env.PROD;
+  if (production || warnedDeprecations.has(key)) {
+    return;
+  }
+  warnedDeprecations.add(key);
+  console.warn(message);
+}

package/src/form-ui/field-name.ts

@@ -0,0 +1,106 @@
+import { get, isObject, set } from '@melt-js/libs-vben/shared/utils';
+
+export function deleteValueByFieldName(
+  values: Record<string, any>,
+  fieldName: string,
+) {
+  const { pathSegments, rawKey } = resolveFieldNamePath(fieldName);
+  if (rawKey) {
+    Reflect.deleteProperty(values, rawKey);
+    return;
+  }
+
+  if (pathSegments.length === 0) {
+    Reflect.deleteProperty(values, fieldName);
+    return;
+  }
+
+  let target: Record<string, any> | undefined = values;
+  for (const segment of pathSegments.slice(0, -1)) {
+    if (!target || !isObject(target)) {
+      return;
+    }
+    target = target[segment];
+  }
+
+  const lastPathSegment = pathSegments.at(-1);
+  if (!target || !isObject(target) || !lastPathSegment) {
+    return;
+  }
+  Reflect.deleteProperty(target, lastPathSegment);
+}
+
+export function getValueByFieldName(
+  values: Record<string, any>,
+  fieldName: string,
+) {
+  const { rawKey } = resolveFieldNamePath(fieldName);
+  return rawKey ? values[rawKey] : get(values, fieldName);
+}
+
+export function resolveChildUpdateFieldName(
+  parentFieldName: string,
+  fieldName: string,
+) {
+  if (fieldName.startsWith(`${parentFieldName}.`)) {
+    return fieldName.slice(parentFieldName.length + 1);
+  }
+
+  const indexedPrefix = `${parentFieldName}[`;
+  if (!fieldName.startsWith(indexedPrefix)) {
+    return undefined;
+  }
+
+  const closeIndex = fieldName.indexOf(']', indexedPrefix.length);
+  if (closeIndex === -1 || fieldName[closeIndex + 1] !== '.') {
+    return undefined;
+  }
+  return fieldName.slice(closeIndex + 2);
+}
+
+export function resolveFieldNamePath(fieldName: string) {
+  if (fieldName.startsWith('[') && fieldName.endsWith(']')) {
+    const rawKey = fieldName.slice(1, -1);
+    return {
+      pathSegments: [rawKey],
+      rawKey,
+    };
+  }
+
+  return {
+    pathSegments: fieldName.match(/[^.[\]]+/g) ?? [],
+    rawKey: undefined,
+  };
+}
+
+export function resolveValueFormatFieldName(
+  fieldName: string,
+  parentPath?: string,
+) {
+  if (!parentPath) {
+    return fieldName;
+  }
+  if (fieldName.startsWith('$root.')) {
+    return fieldName.slice('$root.'.length);
+  }
+  if (fieldName.startsWith('$row.')) {
+    return `${parentPath}.${fieldName.slice('$row.'.length)}`;
+  }
+  if (fieldName === parentPath || fieldName.startsWith(`${parentPath}.`)) {
+    return fieldName;
+  }
+  return `${parentPath}.${fieldName}`;
+}
+
+export function setValueByFieldName(
+  values: Record<string, any>,
+  fieldName: string,
+  value: any,
+) {
+  const { rawKey } = resolveFieldNamePath(fieldName);
+  if (rawKey) {
+    values[rawKey] = value;
+    return;
+  }
+  set(values, fieldName, value);
+}