@movk/nuxt 1.1.2 → 1.3.0

package/dist/runtime/components/SearchForm.vue

@@ -0,0 +1,274 @@
+<script setup>
+import { UButton, UCollapsible, UForm } from "#components";
+import { computed, onMounted, ref, toRaw, unref, useAttrs, useTemplateRef, watch } from "vue";
+import { deepClone, isFunction } from "@movk/core";
+import { useAutoFormProvider } from "../domains/auto-form/provider";
+import { extractPureSchema, introspectSchema } from "../domains/auto-form/schema";
+import { applyFieldDefaults } from "../domains/auto-form/fields";
+import { DEFAULT_CONTROLS } from "../domains/auto-form/controls";
+import { DEFAULT_SEARCH_ACTIONS } from "../domains/auto-form/actions";
+import AutoFormRendererField from "../domains/auto-form/components/Field.vue";
+import { useAppConfig } from "#imports";
+import theme from "#build/movk-ui/search-form";
+import { useExtendedTv } from "../utils/extend-theme";
+const props = defineProps({
+  cols: { type: [Number, Object], required: false, default: 3 },
+  visibleRows: { type: Number, required: false, default: 1 },
+  actions: { type: Array, required: false },
+  loading: { type: Boolean, required: false },
+  collapseButtonProps: { type: Object, required: false },
+  icon: { type: null, required: false, default: "i-lucide-chevron-down" },
+  expandText: { type: String, required: false, default: "\u5C55\u5F00" },
+  collapseText: { type: String, required: false, default: "\u6536\u8D77" },
+  expanded: { type: Boolean, required: false },
+  defaultExpanded: { type: Boolean, required: false, default: false },
+  schema: { type: null, required: true },
+  controls: { type: Object, required: false },
+  globalMeta: { type: Object, 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 }
+});
+const modelValue = defineModel({ type: Object, ...{ default: () => ({}) } });
+const expandedModel = defineModel("expanded", { type: Boolean });
+const emits = defineEmits(["reset", "clear", "expand", "update:expanded", "error"]);
+const slots = defineSlots();
+defineOptions({ inheritAttrs: false });
+const attrs = useAttrs();
+let baseline = deepClone(toRaw(modelValue.value));
+const appConfig = useAppConfig();
+const formRef = useTemplateRef("formRef");
+const internalExpanded = ref(props.defaultExpanded ?? false);
+const expanded = computed({
+  get: () => expandedModel.value ?? internalExpanded.value,
+  set: (val) => {
+    internalExpanded.value = val;
+    if (expandedModel.value !== void 0) {
+      expandedModel.value = val;
+    }
+  }
+});
+const { baseUi, extraUi } = useExtendedTv(
+  { slots: { base: "" } },
+  theme,
+  () => appConfig.movk?.searchForm,
+  () => ({
+    ui: {
+      ...props.ui,
+      root: [props.ui?.root, props.class]
+    }
+  })
+);
+function maxCols(cols) {
+  if (typeof cols === "number") return cols;
+  if (!cols) return 1;
+  return Math.max(cols.sm ?? 1, cols.md ?? 1, cols.lg ?? 1, cols.xl ?? 1);
+}
+const gridStyle = computed(() => {
+  const c = props.cols;
+  const vars = {};
+  if (typeof c === "number") {
+    vars["--m-search-cols"] = String(c);
+  } else if (c) {
+    const base = c.sm ?? c.md ?? c.lg ?? c.xl ?? 1;
+    vars["--m-search-cols"] = String(base);
+    if (c.sm !== void 0) vars["--m-search-cols-sm"] = String(c.sm);
+    if (c.md !== void 0) vars["--m-search-cols-md"] = String(c.md);
+    if (c.lg !== void 0) vars["--m-search-cols-lg"] = String(c.lg);
+    if (c.xl !== void 0) vars["--m-search-cols-xl"] = String(c.xl);
+  }
+  return vars;
+});
+useAutoFormProvider(modelValue, slots);
+const resolvedButtonSize = computed(() => {
+  const size = props.globalMeta?.size;
+  if (size === void 0 || isFunction(size)) return void 0;
+  return unref(size);
+});
+const pureSchema = computed(() => extractPureSchema(props.schema));
+const controlsMapping = computed(() => ({ ...DEFAULT_CONTROLS, ...props.controls }));
+const fields = computed(() => introspectSchema(props.schema, controlsMapping.value, "", props.globalMeta));
+const actionsBag = { toggle, search: submit, reset, clear };
+function buildSlotProps(errors, loading) {
+  return {
+    ...actionsBag,
+    expanded: expanded.value,
+    loading: props.loading || loading,
+    state: modelValue.value,
+    errors
+  };
+}
+function resolveActions(slotCtx) {
+  const list = props.actions ?? DEFAULT_SEARCH_ACTIONS;
+  return list.filter((action) => {
+    if (action.visible === void 0) return true;
+    if (typeof action.visible === "function") {
+      return action.visible(slotCtx);
+    }
+    return action.visible;
+  });
+}
+const showActionsCell = computed(() => {
+  const list = props.actions ?? DEFAULT_SEARCH_ACTIONS;
+  return list.length > 0 || !!slots.actions || !!slots.extraActions;
+});
+const visibleCount = computed(() => {
+  const total = maxCols(props.cols) * props.visibleRows;
+  if (!showActionsCell.value) return total;
+  if (maxCols(props.cols) <= 1) return total;
+  return Math.max(0, total - 1);
+});
+const visibleFields = computed(() => fields.value.slice(0, visibleCount.value));
+const collapsedFields = computed(() => fields.value.slice(visibleCount.value));
+const needsCollapse = computed(() => collapsedFields.value.length > 0);
+function toggle() {
+  const next = !expanded.value;
+  expanded.value = next;
+  emits("expand", next);
+  emits("update:expanded", next);
+}
+function submit() {
+  formRef.value?.submit();
+}
+function clear() {
+  modelValue.value = {};
+  formRef.value?.clear();
+  emits("clear");
+}
+function reset() {
+  modelValue.value = deepClone(baseline);
+  applyFieldDefaults(fields.value, modelValue.value);
+  formRef.value?.clear();
+  emits("reset");
+}
+function setBaseline(value) {
+  baseline = deepClone(toRaw(value ?? modelValue.value));
+}
+function handleAction(action, ctx) {
+  if (action.onClick) {
+    action.onClick(ctx);
+    return;
+  }
+  if (action.type === "submit") return;
+  if (action.key === "reset") reset();
+  else if (action.key === "search") submit();
+}
+function actionLoading(action, ctx) {
+  if (action.key === "search" || action.type === "submit") return ctx.loading;
+  return false;
+}
+watch(() => fields.value, () => {
+  applyFieldDefaults(fields.value, modelValue.value);
+}, { flush: "post" });
+watch(() => props.schema, () => {
+  formRef.value?.clear();
+});
+onMounted(() => {
+  applyFieldDefaults(fields.value, modelValue.value);
+  setBaseline();
+});
+defineExpose({
+  formRef,
+  submit,
+  reset,
+  clear,
+  setBaseline,
+  expanded,
+  toggle
+});
+</script>
+
+<template>
+  <div :class="extraUi.root" data-slot="root">
+    <UForm
+      ref="formRef"
+      :state="modelValue"
+      :schema="pureSchema"
+      :loading-auto="props.loadingAuto"
+      :validate-on="props.validateOn"
+      :ui="baseUi"
+      data-slot="form"
+      v-bind="attrs"
+      @error="emits('error', $event)"
+    >
+      <template #default="{ errors, loading }">
+        <div v-if="$slots.header" :class="extraUi.header" data-slot="header">
+          <slot name="header" v-bind="buildSlotProps(errors, loading)" />
+        </div>
+
+        <div :class="extraUi.visible" data-slot="visible">
+          <div :class="extraUi.grid" :style="gridStyle" data-slot="grid">
+            <AutoFormRendererField
+              v-for="field in visibleFields"
+              :key="field.path"
+              :field="field"
+              :schema="props.schema"
+              :extra-props="{ errors, loading, state: modelValue }"
+            />
+
+            <slot
+              v-if="showActionsCell"
+              name="actions"
+              v-bind="buildSlotProps(errors, loading)"
+            >
+              <div :class="extraUi.actions" data-slot="actions">
+                <template v-for="action in resolveActions(buildSlotProps(errors, loading))" :key="action.key">
+                  <UButton
+                    :label="action.label"
+                    :type="action.type"
+                    :icon="action.icon"
+                    :color="action.color"
+                    :variant="action.variant"
+                    :loading="actionLoading(action, buildSlotProps(errors, loading))"
+                    :size="resolvedButtonSize"
+                    v-bind="action"
+                    @click="handleAction(action, buildSlotProps(errors, loading))"
+                  />
+                </template>
+                <slot name="extraActions" v-bind="buildSlotProps(errors, loading)" />
+              </div>
+            </slot>
+          </div>
+        </div>
+
+        <UCollapsible v-if="needsCollapse" v-model:open="expanded">
+          <template #content>
+            <div :class="[extraUi.grid, extraUi.collapsed]" :style="gridStyle" data-slot="collapsed">
+              <AutoFormRendererField
+                v-for="field in collapsedFields"
+                :key="field.path"
+                :field="field"
+                :schema="props.schema"
+                :extra-props="{ errors, loading, state: modelValue }"
+              />
+            </div>
+          </template>
+        </UCollapsible>
+
+        <div v-if="needsCollapse" :class="extraUi.toggleWrapper" data-slot="toggle-wrapper">
+          <UButton
+            :icon="icon"
+            color="neutral"
+            :size="resolvedButtonSize"
+            variant="ghost"
+            :data-state="expanded ? 'open' : 'closed'"
+            :label="expanded ? collapseText : expandText"
+            tabindex="-1"
+            :class="extraUi.toggle"
+            v-bind="collapseButtonProps"
+            :ui="{
+  ...collapseButtonProps?.ui ?? {},
+  leadingIcon: [collapseButtonProps?.ui?.leadingIcon, extraUi.toggleIcon].filter(Boolean).join(' ')
+}"
+            @click="toggle"
+          />
+        </div>
+
+        <div v-if="$slots.footer" :class="extraUi.footer" data-slot="footer">
+          <slot name="footer" v-bind="buildSlotProps(errors, loading)" />
+        </div>
+      </template>
+    </UForm>
+  </div>
+</template>

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

@@ -0,0 +1,43 @@
+import type { ComponentConfig, InferInput } from '@nuxt/ui';
+import type { z } from 'zod';
+import type { AppConfig } from 'nuxt/schema';
+import theme from '#build/movk-ui/search-form';
+import type { SearchFormProps, SearchFormSlots } from '../types/auto-form/search-form';
+declare const __VLS_export: <S extends z.ZodObject>(__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<(SearchFormProps<S> & {
+        ui?: ComponentConfig<typeof theme, AppConfig, "searchForm">["slots"];
+    } & {
+        modelValue?: Partial<InferInput<S>>;
+        expanded?: boolean;
+    }) & {
+        onError?: ((event: import("@nuxt/ui").FormErrorEvent) => any) | undefined;
+        onClear?: (() => any) | undefined;
+        onReset?: (() => any) | undefined;
+        "onUpdate:modelValue"?: ((value: Partial<InferInput<S>>) => any) | undefined;
+        onExpand?: ((expanded: boolean) => any) | undefined;
+        "onUpdate:expanded"?: ((value: boolean | undefined) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        formRef: Readonly<import("vue").ShallowRef<any, any>>;
+        submit: () => void;
+        reset: () => void;
+        clear: () => void;
+        setBaseline: (value?: Partial<InferInput<S>>) => void;
+        expanded: import("vue").WritableComputedRef<boolean, boolean>;
+        toggle: () => void;
+    }>) => void;
+    attrs: any;
+    slots: SearchFormSlots<S>;
+    emit: (((evt: "error", event: import("@nuxt/ui").FormErrorEvent) => void) & ((evt: "clear") => void) & ((evt: "reset") => void) & ((evt: "expand", expanded: boolean) => void) & ((evt: "update:expanded", expanded: boolean) => void)) & (((event: "update:modelValue", value: Partial<InferInput<S>>) => void) & ((event: "update:expanded", value: boolean | undefined) => void));
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

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

@@ -1,100 +1,34 @@
-import type { ClassNameValue } from 'tailwind-merge';
-export interface SlideVerifyProps {
-    /**
-     * 滑块宽度
-     * @defaultValue 50
-     */
-    sliderWidth?: number;
-    /**
-     * 滑块高度
-     * @defaultValue 44
-     */
-    height?: number;
-    /**
-     * 是否禁用
-     * @defaultValue false
-     */
-    disabled?: boolean;
-    /**
-     * 待滑动时的提示文本
-     * @defaultValue '请向右滑动验证'
-     */
-    text?: string;
-    /**
-     * 验证成功时的提示文本
-     * @defaultValue '验证成功'
-     */
-    successText?: string;
-    /**
-     * 滑块图标
-     * @defaultValue 'i-lucide-chevrons-right'
-     */
-    icon?: string;
-    /**
-     * 验证成功时的图标
-     * @defaultValue 'i-lucide-check'
-     */
-    successIcon?: string;
-    /**
-     * 完成验证所需的阈值百分比（0-1）
-     * @defaultValue 0.9
-     */
-    threshold?: number;
-    /**
-     * 自定义轨道样式
-     */
-    trackClass?: ClassNameValue;
-    /**
-     * 自定义滑块样式
-     */
-    sliderClass?: ClassNameValue;
-    /**
-     * 自定义文本样式
-     */
-    textClass?: ClassNameValue;
-    /**
-     * 自定义根元素样式
-     */
-    class?: ClassNameValue;
-}
-export interface SlideVerifyEmits {
-    success: [];
-    dragStart: [];
-    dragEnd: [success: boolean];
-}
-type __VLS_Props = SlideVerifyProps;
+import theme from '#build/movk-ui/slide-verify';
+import type { ComponentConfig } from '@nuxt/ui';
+import type { AppConfig } from 'nuxt/schema';
+import type { SlideVerifyProps, SlideVerifySlots } from '../types/components/slide-verify';
+type __VLS_Props = SlideVerifyProps & {
+    size?: ComponentConfig<typeof theme, AppConfig, 'slideVerify'>['variants']['size'];
+    ui?: ComponentConfig<typeof theme, AppConfig, 'slideVerify'>['slots'];
+};
+type __VLS_Slots = SlideVerifySlots;
 declare function reset(): void;
 type __VLS_ModelProps = {
     modelValue?: boolean;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_22: {
-    verified: boolean;
-    progress: number;
-};
-type __VLS_Slots = {} & {
-    slider?: (props: typeof __VLS_22) => any;
-};
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     reset: typeof reset;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: boolean) => any;
     success: () => any;
+    "update:modelValue": (value: boolean) => any;
     dragStart: () => any;
     dragEnd: (success: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     onSuccess?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     onDragStart?: (() => any) | undefined;
     onDragEnd?: ((success: boolean) => any) | undefined;
 }>, {
-    disabled: boolean;
-    icon: string;
+    icon: import("@nuxt/ui").IconProps["name"];
     text: string;
-    height: number;
-    sliderWidth: number;
     successText: string;
-    successIcon: string;
+    successIcon: import("@nuxt/ui").IconProps["name"];
     threshold: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;