@movk/nuxt 1.2.0 → 1.3.0

package/dist/runtime/components/AutoForm.vue

@@ -1,85 +1,46 @@
 <script setup>
 import { UForm } from "#components";
-import { computed, onMounted, ref, useTemplateRef } from "vue";
-import { useAutoFormProvider } from "../auto-form/provider";
-import { getPath, setPath } from "@movk/core";
-import { classifyFields } from "../auto-form/field-utils";
-import { extractPureSchema, introspectSchema } from "../auto-form/schema-introspector";
-import { useAutoForm } from "../composables/useAutoForm";
-import AutoFormRendererChildren from "./auto-form-renderer/AutoFormRendererChildren.vue";
-import AutoFormRendererField from "./auto-form-renderer/AutoFormRendererField.vue";
-const {
-  schema,
-  controls,
-  globalMeta,
-  submitButton = true,
-  submitButtonProps,
-  addButtonProps,
-  state: _state,
-  loadingAuto = true,
-  ...restProps
-} = defineProps({
-  submitButton: { type: Boolean, required: false },
+import { computed, onMounted, ref, toRaw, unref, useAttrs, useTemplateRef } from "vue";
+import { deepClone, isFunction } from "@movk/core";
+import { useAutoFormProvider } from "../domains/auto-form/provider";
+import { applyFieldDefaults, classifyFields } from "../domains/auto-form/fields";
+import { extractPureSchema, introspectSchema } from "../domains/auto-form/schema";
+import { DEFAULT_CONTROLS } from "../domains/auto-form/controls";
+import AutoFormRendererChildren from "../domains/auto-form/components/Children.vue";
+import AutoFormRendererField from "../domains/auto-form/components/Field.vue";
+import { useExtendedTv } from "../utils/extend-theme";
+import theme from "#build/movk-ui/auto-form";
+import { useAppConfig } from "#imports";
+const props = defineProps({
+  state: { type: null, required: false },
+  submit: { type: Boolean, required: false, default: true },
   submitButtonProps: { type: Object, required: false },
+  addButtonProps: { type: Object, required: false },
+  schema: { type: null, required: true },
   controls: { type: Object, required: false },
   globalMeta: { type: Object, required: false },
-  addButtonProps: { type: Object, required: false },
-  loadingAuto: { type: Boolean, required: false },
-  id: { type: [String, Number], required: false },
-  schema: { type: null, required: false },
-  state: { type: null, required: false },
-  validate: { type: Function, required: false },
-  validateOn: { type: Array, required: false },
-  disabled: { type: Boolean, required: false },
-  name: { type: null, required: false },
-  validateOnInputDelay: { type: Number, required: false },
-  transform: { type: null, required: false },
-  nested: { type: Boolean, required: false },
+  loadingAuto: { type: Boolean, required: false, default: true },
+  validateOn: { type: Array, required: false, default: () => [] },
   class: { type: null, required: false },
-  ui: { type: Object, required: false },
-  onSubmit: { type: Function, required: false }
+  ui: { type: Object, required: false }
 });
-defineEmits(["submit", "error"]);
-const _slots = defineSlots();
+const emits = defineEmits(["error"]);
+const slots = defineSlots();
 defineOptions({ inheritAttrs: false });
-const state = ref(_state || {});
+const attrs = useAttrs();
+const appConfig = useAppConfig();
+const initialState = deepClone(toRaw(props.state ?? {}));
+const stateModel = ref(props.state ?? {});
 const formRef = useTemplateRef("formRef");
-const { DEFAULT_CONTROLS } = useAutoForm();
-const { resolveFieldProp } = useAutoFormProvider(state, _slots);
-const pureSchema = computed(() => schema ? extractPureSchema(schema) : schema);
-const controlsMapping = computed(() => ({
-  ...DEFAULT_CONTROLS,
-  ...controls
-}));
-const fields = computed(() => {
-  if (!schema)
-    return [];
-  return introspectSchema(schema, controlsMapping.value, "", globalMeta);
+const { resolveFieldProp } = useAutoFormProvider(stateModel, slots);
+const resolvedButtonSize = computed(() => {
+  const size = props.globalMeta?.size;
+  if (size === void 0 || isFunction(size)) return void 0;
+  return unref(size);
 });
-function resolveDefaultValue(fields2, stateValue) {
-  if (!fields2.length)
-    return;
-  const updates = [];
-  function collectDefaultValues(fieldList) {
-    for (const field of fieldList) {
-      if (field?.decorators?.defaultValue !== void 0 && getPath(stateValue, field.path) === void 0) {
-        updates.push({
-          path: field.path,
-          value: field.decorators.defaultValue
-        });
-      }
-      if (field?.children && Array.isArray(field.children) && field.children.length > 0) {
-        collectDefaultValues(field.children);
-      }
-    }
-  }
-  collectDefaultValues(fields2);
-  if (updates.length > 0) {
-    for (const { path, value } of updates) {
-      setPath(stateValue, path, value);
-    }
-  }
-}
+const pureSchema = computed(() => props.schema ? extractPureSchema(props.schema) : props.schema);
+const controlsMapping = computed(() => ({ ...DEFAULT_CONTROLS, ...props.controls }));
+const fields = computed(() => props.schema ? introspectSchema(props.schema, controlsMapping.value, "", props.globalMeta) : []);
 const visibleFields = computed(
   () => fields.value.filter(
     (field) => field && (field.meta?.if === void 0 || resolveFieldProp(field, "if") === true)
@@ -94,25 +55,32 @@ const renderData = computed(() => {
     allFields: visibleFields.value
   };
 });
-onMounted(() => {
-  resolveDefaultValue(fields.value, state.value);
-});
+const { extendUi } = useExtendedTv(
+  { slots: {} },
+  theme,
+  () => appConfig.movk?.autoForm,
+  () => ({
+    ui: {
+      ...props.ui,
+      root: [props.ui?.root, props.class]
+    }
+  })
+);
 function reset() {
-  Object.keys(state.value).forEach((key) => {
-    delete state.value[key];
-  });
-  if (_state) {
-    Object.assign(state.value, _state);
-  }
-  resolveDefaultValue(fields.value, state.value);
+  const target = stateModel.value;
+  for (const key of Object.keys(target)) Reflect.deleteProperty(target, key);
+  Object.assign(target, deepClone(initialState));
+  applyFieldDefaults(fields.value, target);
   formRef.value?.clear();
 }
 function clear() {
-  Object.keys(state.value).forEach((key) => {
-    delete state.value[key];
-  });
+  const target = stateModel.value;
+  for (const key of Object.keys(target)) Reflect.deleteProperty(target, key);
   formRef.value?.clear();
 }
+onMounted(() => {
+  applyFieldDefaults(fields.value, stateModel.value);
+});
 defineExpose({
   formRef,
   reset,
@@ -121,48 +89,69 @@ defineExpose({
 </script>
 
 <template>
-  <UForm
-    v-if="renderData"
-    ref="formRef"
-    :state="state"
-    :schema="pureSchema"
-    :loading-auto="loadingAuto"
-    v-bind="restProps"
-  >
-    <template #default="{ errors, loading }">
-      <slot name="header" v-bind="{ errors, loading, fields: visibleFields, state }" />
+  <div :class="extendUi.root" data-slot="root">
+    <UTheme
+      :ui="{
+  collapsible: { content: extendUi.collapsible }
+}"
+    >
+      <UForm
+        v-if="renderData"
+        ref="formRef"
+        :state="stateModel"
+        :schema="pureSchema"
+        :loading-auto="props.loadingAuto"
+        :validate-on="props.validateOn"
+        data-slot="form"
+        v-bind="attrs"
+        :ui="{
+  base: extendUi.base
+}"
+        @error="emits('error', $event)"
+      >
+        <template #default="{ errors, loading }">
+          <div v-if="$slots.header" :class="extendUi.header" data-slot="header">
+            <slot name="header" v-bind="{ errors, loading, fields: visibleFields, state: stateModel }" />
+          </div>
 
-      <template v-if="renderData.hasComplexFields">
-        <AutoFormRendererChildren
-          :fields="renderData.allFields"
-          :schema="schema"
-          :extra-props="{ errors, loading }"
-        />
-      </template>
+          <template v-if="renderData.hasComplexFields">
+            <AutoFormRendererChildren
+              :fields="renderData.allFields"
+              :schema="schema"
+              :extra-props="{ errors, loading }"
+            />
+          </template>
 
-      <template v-else>
-        <AutoFormRendererField
-          v-for="field in renderData.flatFields"
-          :key="field.path"
-          :field="field"
-          :schema="schema"
-          :extra-props="{ errors, loading }"
-        />
-      </template>
+          <template v-else>
+            <AutoFormRendererField
+              v-for="field in renderData.flatFields"
+              :key="field.path"
+              :field="field"
+              :schema="schema"
+              :extra-props="{ errors, loading }"
+            />
+          </template>
 
-      <slot name="footer" v-bind="{ errors, loading, fields: visibleFields, state }" />
+          <div v-if="$slots.footer" :class="extendUi.footer" data-slot="footer">
+            <slot name="footer" v-bind="{ errors, loading, fields: visibleFields, state: stateModel }" />
+          </div>
 
-      <slot name="submit" v-bind="{ errors, loading, fields: visibleFields, state }">
-        <UButton
-          v-if="submitButton"
-          type="submit"
-          :loading="loading"
-          label="提交"
-          loading-auto
-          block
-          v-bind="submitButtonProps"
-        />
-      </slot>
-    </template>
-  </UForm>
+          <div v-if="props.submit" :class="extendUi.actions" data-slot="submit">
+            <slot name="submit" v-bind="{ errors, loading, fields: visibleFields, state: stateModel }">
+              <UButton
+                type="submit"
+                label="提交"
+                block
+                :loading="loading"
+                :loading-auto="props.loadingAuto"
+                :size="resolvedButtonSize"
+                :disabled="attrs.disabled"
+                v-bind="props.submitButtonProps"
+              />
+            </slot>
+          </div>
+        </template>
+      </UForm>
+    </UTheme>
+  </div>
 </template>

package/dist/runtime/components/AutoForm.vue.d.ts

@@ -1,44 +1,24 @@
-import type { ButtonProps, FormEmits, FormProps, InferInput } from '@nuxt/ui';
+import type { ComponentConfig, InferInput } from '@nuxt/ui';
 import type { z } from 'zod';
-import type { ZodAutoFormFieldMeta } from '../types/zod.js';
-import type { AutoFormControls, AutoFormSlotProps, DynamicFormSlots } from '../types/auto-form.js';
-export interface AutoFormProps<S extends z.ZodObject, T extends boolean = true, N extends boolean = false> extends FormProps<S, T, N> {
-    /**
-     * 是否显示默认提交按钮
-     * @defaultValue true
-     */
-    submitButton?: boolean;
-    /** 提交按钮属性 */
-    submitButtonProps?: ButtonProps;
-    /** 自定义控件映射 */
-    controls?: AutoFormControls;
-    /** 全局字段元数据配置 */
-    globalMeta?: ZodAutoFormFieldMeta;
-    /** 数组字段添加按钮属性 */
-    addButtonProps?: ButtonProps;
-    loadingAuto?: boolean;
-}
-export interface AutoFormEmits<S extends z.ZodObject, T extends boolean = true> extends FormEmits<S, T> {
-}
-export type AutoFormSlots<T extends object> = {
-    header: (props: AutoFormSlotProps<T>) => any;
-    footer: (props: AutoFormSlotProps<T>) => any;
-    submit: (props: AutoFormSlotProps<T>) => any;
-} & DynamicFormSlots<T>;
+import type { AutoFormProps, AutoFormSlots } from '../types/auto-form/component';
+import theme from '#build/movk-ui/auto-form';
+import type { AppConfig } from 'nuxt/schema';
 declare const __VLS_export: <S extends z.ZodObject, T extends boolean = true, N extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import("vue").PublicProps & __VLS_PrettifyLocal<AutoFormProps<S, T, N> & {
-        [x: `on${Capitalize<string>}`]: ((...args: any) => any) | undefined;
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(AutoFormProps<S, T, N> & {
+        ui?: ComponentConfig<typeof theme, AppConfig, "autoForm">["slots"];
+    }) & {
+        onError?: ((args_0: import("@nuxt/ui").FormErrorEvent) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
-        formRef: any;
+        formRef: Readonly<import("vue").ShallowRef<any, any>>;
         reset: () => void;
         clear: () => void;
     }>) => void;
     attrs: any;
     slots: AutoFormSlots<N extends false ? Partial<InferInput<S>> : never>;
-    emit: any;
+    emit: (evt: "error", args_0: import("@nuxt/ui").FormErrorEvent) => void;
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/ColorChooser.d.vue.ts

@@ -1,30 +1,29 @@
-import type { ButtonProps, ColorPickerProps, PopoverProps } from '@nuxt/ui';
-export interface ColorChooserProps<P extends 'click' | 'hover' = 'click'> extends /** @vue-ignore */ ColorPickerProps {
-    /** 弹出层组件属性 */
-    popoverProps?: PopoverProps<P>;
-    /** 按钮组件属性 */
-    buttonProps?: ButtonProps;
-}
-declare const __VLS_export: <P extends "click" | "hover" = "click">(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import("vue").PublicProps & __VLS_PrettifyLocal<(ColorChooserProps<P> & {
+import type { ComponentConfig } from '@nuxt/ui';
+import type { AppConfig } from 'nuxt/schema';
+import theme from '#build/movk-ui/color-chooser';
+import popoverTheme from '#build/ui/popover';
+import type { ColorChooserProps, ColorChooserSlots, ColorFormat } from '../types/components/color-chooser';
+declare const __VLS_export: <M extends "click" | "hover">(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(ColorChooserProps<M> & {
+        size?: ComponentConfig<typeof popoverTheme & typeof theme, AppConfig, "colorChooser">["variants"]["size"];
+        trigger?: ComponentConfig<typeof popoverTheme & typeof theme, AppConfig, "colorChooser">["variants"]["trigger"];
+        ui?: ComponentConfig<typeof popoverTheme & typeof theme, AppConfig, "colorChooser">["slots"];
+    } & {
         modelValue?: string;
     }) & {
-        [x: `on${Capitalize<string>}`]: ((...args: any) => any) | undefined;
+        onClear?: (() => any) | undefined;
+        onChange?: ((value: string | undefined) => any) | undefined;
+        onCopy?: ((value: string) => any) | undefined;
+        "onUpdate:open"?: ((open: boolean) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+        "onFormat-change"?: ((format: ColorFormat) => any) | undefined;
     }> & (typeof globalThis extends {
-        __VLS_PROPS_FALLBACK: infer P_1;
-    } ? P_1 : {});
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
-    slots: {
-        default?: (props: any) => any;
-    } & {
-        leading?: (props: any) => any;
-    } & {
-        trailing?: (props: any) => any;
-    } & {
-        anchor?: (props: any) => any;
-    };
-    emit: any & ((event: "update:modelValue", value: string | undefined) => void);
+    slots: ColorChooserSlots;
+    emit: (((evt: "clear") => void) & ((evt: "change", value: string | undefined) => void) & ((evt: "copy", value: string) => void) & ((evt: "update:open", open: boolean) => void) & ((evt: "update:modelValue", value: string | undefined) => void) & ((evt: "format-change", format: ColorFormat) => void)) & ((event: "update:modelValue", value: string | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };