@movk/nuxt 1.1.2 → 1.3.0

package/dist/runtime/components/SlideVerify.vue

@@ -1,57 +1,114 @@
 <script setup>
 import { UIcon } from "#components";
+import { useAppConfig } from "#imports";
 import { useElementSize } from "@vueuse/core";
-import { Motion } from "motion-v";
 import { computed, ref, useTemplateRef } from "vue";
-defineOptions({ inheritAttrs: false });
+import theme from "#build/movk-ui/slide-verify";
+import { useExtendedTv } from "../utils/extend-theme";
+import { useFieldControl } from "../utils/form-control";
 const props = defineProps({
-  sliderWidth: { type: Number, required: false, default: 50 },
-  height: { type: Number, required: false, default: 44 },
-  disabled: { type: Boolean, required: false, default: false },
+  id: { type: String, required: false },
+  name: { type: String, required: false },
+  size: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
   text: { type: String, required: false, default: "\u8BF7\u5411\u53F3\u6ED1\u52A8\u9A8C\u8BC1" },
   successText: { type: String, required: false, default: "\u9A8C\u8BC1\u6210\u529F" },
-  icon: { type: String, required: false, default: "i-lucide-chevrons-right" },
-  successIcon: { type: String, required: false, default: "i-lucide-check" },
+  icon: { type: null, required: false, default: "i-lucide-chevrons-right" },
+  successIcon: { type: null, required: false, default: "i-lucide-check" },
   threshold: { type: Number, required: false, default: 0.9 },
-  trackClass: { type: [Array, String, null, Number, Boolean], required: false, skipCheck: true },
-  sliderClass: { type: [Array, String, null, Number, Boolean], required: false, skipCheck: true },
-  textClass: { type: [Array, String, null, Number, Boolean], required: false, skipCheck: true },
-  class: { type: [Array, String, null, Number, Boolean], required: false, skipCheck: true }
+  class: { type: null, required: false },
+  ui: { type: Object, required: false }
 });
-const emit = defineEmits(["success", "dragStart", "dragEnd"]);
+const emits = defineEmits(["success", "dragStart", "dragEnd"]);
+defineSlots();
+defineOptions({ inheritAttrs: false });
 const isVerified = defineModel({ type: Boolean, ...{ default: false } });
-const trackRef = useTemplateRef("track");
-const { width: trackWidth } = useElementSize(trackRef);
+const {
+  id,
+  name,
+  size: effectiveSize,
+  disabled: effectiveDisabled,
+  fieldGroupOrientation,
+  ariaAttrs,
+  emitFormBlur,
+  emitFormChange,
+  emitFormFocus,
+  emitFormInput
+} = useFieldControl(props);
+const rootRef = useTemplateRef("root");
+const sliderRef = useTemplateRef("slider");
+const { width: rootWidth } = useElementSize(rootRef);
+const { width: sliderWidth } = useElementSize(sliderRef);
 const isDragging = ref(false);
 const dragX = ref(0);
+const pointerStartX = ref(0);
+const dragStartX = ref(0);
+const appConfig = useAppConfig();
+const { extendUi } = useExtendedTv(
+  { slots: {} },
+  theme,
+  () => appConfig.movk?.slideVerify,
+  () => ({
+    ui: {
+      ...props.ui,
+      root: [props.ui?.root, props.class]
+    },
+    variants: {
+      disabled: effectiveDisabled.value,
+      verified: isVerified.value,
+      size: effectiveSize.value,
+      fieldGroup: fieldGroupOrientation.value
+    }
+  })
+);
+const rootPaddingX = computed(() => {
+  void effectiveSize.value;
+  const root = rootRef.value;
+  if (!root) return 0;
+  const style = getComputedStyle(root);
+  return (Number.parseFloat(style.paddingLeft) || 0) + (Number.parseFloat(style.paddingRight) || 0);
+});
+const sliderOuterWidth = computed(
+  () => sliderWidth.value ? sliderRef.value?.offsetWidth || sliderWidth.value : 0
+);
 const maxDragDistance = computed(
-  () => trackWidth.value ? Math.max(0, trackWidth.value - props.sliderWidth - 8) : 200
+  () => rootWidth.value ? Math.max(0, (rootRef.value?.clientWidth || 0) - rootPaddingX.value - sliderOuterWidth.value) : 0
 );
 const progress = computed(
   () => isVerified.value ? 1 : maxDragDistance.value ? Math.min(dragX.value / maxDragDistance.value, 1) : 0
 );
-const canInteract = computed(() => !props.disabled && !isVerified.value);
-const springTransition = { type: "spring", stiffness: 400, damping: 30 };
-function handleDragStart() {
+const canInteract = computed(() => !effectiveDisabled.value && !isVerified.value && rootWidth.value > 0);
+const currentTranslateX = computed(
+  () => isVerified.value ? maxDragDistance.value : dragX.value
+);
+function handlePointerDown(e) {
   if (!canInteract.value) return;
+  pointerStartX.value = e.clientX;
+  dragStartX.value = dragX.value;
   isDragging.value = true;
-  emit("dragStart");
+  e.currentTarget.setPointerCapture(e.pointerId);
+  emits("dragStart");
 }
-function handleDrag(_event, info) {
-  if (!canInteract.value) return;
-  dragX.value = Math.max(0, Math.min(info.offset.x, maxDragDistance.value));
+function handlePointerMove(e) {
+  if (!isDragging.value || !canInteract.value) return;
+  dragX.value = Math.max(0, Math.min(
+    dragStartX.value + (e.clientX - pointerStartX.value),
+    maxDragDistance.value
+  ));
 }
-function handleDragEnd() {
-  if (!canInteract.value) return;
+function handlePointerUp() {
+  if (!isDragging.value) return;
   isDragging.value = false;
   const success = progress.value >= props.threshold;
   if (success) {
     isVerified.value = true;
-    emit("success");
+    emits("success");
+    emitFormInput();
+    emitFormChange();
   } else {
     dragX.value = 0;
   }
-  emit("dragEnd", success);
+  emits("dragEnd", success);
 }
 function reset() {
   isVerified.value = false;
@@ -62,86 +119,56 @@ defineExpose({ reset });
 
 <template>
   <div
-    :class="[
-  'relative select-none overflow-hidden rounded-lg border transition-colors duration-300',
-  props.class,
-  disabled ? 'opacity-50 cursor-not-allowed' : '',
-  isVerified ? 'bg-success border-transparent' : 'bg-elevated border-default'
-]"
-    :style="{ height: `${height}px` }"
+    :id="id"
+    ref="root"
+    :name="name"
+    :class="extendUi.root"
     role="slider"
     :aria-label="text"
     :aria-valuenow="Math.round(progress * 100)"
     aria-valuemin="0"
     aria-valuemax="100"
-    :aria-disabled="disabled"
+    :aria-disabled="effectiveDisabled"
+    :tabindex="canInteract ? 0 : -1"
+    v-bind="ariaAttrs"
+    @blur="emitFormBlur"
+    @focus="emitFormFocus"
   >
-    <div ref="track" class="absolute inset-0" :class="trackClass">
-      <Motion
+    <div ref="track" :class="extendUi.track">
+      <div
         v-if="!isVerified"
-        as="div"
-        class="absolute inset-y-0 left-0 bg-primary/20"
-        :animate="{ width: `${progress * 100}%`, opacity: 0.6 }"
-        :transition="springTransition"
+        :class="[extendUi.fill, isDragging ? 'transition-none' : 'transition-[width] duration-300']"
+        :style="{ width: `${progress * 100}%` }"
       />
 
-      <div
-        class="absolute inset-0 flex items-center justify-center text-sm font-medium pointer-events-none"
-        :class="textClass"
-      >
-        <Motion
+      <div :class="extendUi.text">
+        <span
           v-if="!isVerified"
-          as="span"
-          class="relative inline-block bg-size-[200%_100%] bg-clip-text text-transparent bg-no-repeat"
+          class="animate-[shimmer_2s_linear_infinite] [background-size:200%_100%] bg-clip-text text-transparent bg-no-repeat select-none"
           :style="{
-  backgroundImage: 'radial-gradient(circle at center, var(--color-gray-500), transparent), linear-gradient(var(--color-neutral-400), var(--color-neutral-400))',
+  backgroundImage: 'linear-gradient(90deg, var(--ui-text-dimmed) 0%, var(--ui-text-muted) 50%, var(--ui-text-dimmed) 100%)',
   opacity: 1 - progress * 0.5
 }"
-          :animate="{ backgroundPosition: '-200% 50%, 0 0' }"
-          :initial="{ backgroundPosition: '200% 50%, 0 0' }"
-          :transition="{
-  repeat: Infinity,
-  duration: 2,
-  ease: 'linear'
-}"
-        >
-          {{ text }}
-        </Motion>
-        <span v-else class="text-inverted font-medium">{{ successText }}</span>
+        >{{ text }}</span>
+        <span v-else class="font-medium text-inverted">{{ successText }}</span>
       </div>
     </div>
 
-    <Motion
-      as="div"
-      class="absolute inset-1"
-      :style="{ width: `${sliderWidth}px` }"
-      :initial="{ x: 0 }"
-      :animate="{ x: isVerified ? maxDragDistance : isDragging ? dragX : 0 }"
-      :transition="isDragging ? { duration: 0 } : springTransition"
-      :while-hover="canInteract ? { scale: 1.02 } : void 0"
-      :while-tap="canInteract ? { scale: 0.98 } : void 0"
-      :drag="canInteract ? 'x' : false"
-      :drag-constraints="{ left: 0, right: maxDragDistance }"
-      :drag-elastic="0"
-      :drag-momentum="false"
-      @drag-start="handleDragStart"
-      @drag="handleDrag"
-      @drag-end="handleDragEnd"
-    >
-      <div
-        class="size-full flex items-center justify-center rounded-md shadow-sm transition-colors"
-        :class="[
-  sliderClass,
-  isVerified ? 'bg-white/90' : 'bg-default cursor-grab active:cursor-grabbing ring-1 ring-default'
+    <div
+      ref="slider"
+      :class="[
+  extendUi.slider,
+  isDragging ? 'transition-none' : 'transition-transform duration-300 ease-out',
+  canInteract ? 'hover:scale-[1.02] active:scale-[0.98]' : ''
 ]"
-      >
-        <slot name="slider" :verified="isVerified" :progress="progress">
-          <UIcon
-            :name="isVerified ? successIcon : icon"
-            :class="['size-5', isVerified ? 'text-success' : 'text-primary']"
-          />
-        </slot>
-      </div>
-    </Motion>
+      :style="{ transform: `translateX(${currentTranslateX}px)` }"
+      @pointerdown="handlePointerDown"
+      @pointermove="handlePointerMove"
+      @pointerup="handlePointerUp"
+    >
+      <slot name="slider" :verified="isVerified" :progress="progress">
+        <UIcon :name="isVerified ? successIcon : icon" :class="extendUi.icon" />
+      </slot>
+    </div>
   </div>
 </template>

package/dist/runtime/components/SlideVerify.vue.d.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>;

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

@@ -1,104 +1,47 @@
-import type { ButtonProps } from '@nuxt/ui';
-export interface StarRatingProps {
-    /**
-     * 当前评分值
-     * @defaultValue 0
-     */
+import type { ComponentConfig } from '@nuxt/ui';
+import theme from '#build/movk-ui/star-rating';
+import type { AppConfig } from 'nuxt/schema';
+import type { StarRatingProps } from '../types/components/star-rating';
+type __VLS_Props = StarRatingProps & {
+    ui?: ComponentConfig<typeof theme, AppConfig, 'starRating'>['slots'];
+};
+type __VLS_ModelProps = {
     modelValue?: number;
-    /**
-     * 最大星级数
-     * @defaultValue 5
-     */
-    max?: number;
-    /**
-     * 是否禁用
-     * @defaultValue false
-     */
-    disabled?: boolean;
-    /**
-     * 是否只读
-     * @defaultValue false
-     */
-    readonly?: boolean;
-    /**
-     * 是否显示评分徽章
-     * @defaultValue true
-     */
-    showBadge?: boolean;
-    /**
-     * 自定义星星按钮属性
-     */
-    buttonProps?: Partial<ButtonProps>;
-    /**
-     * 未选中星星的图标
-     * @defaultValue 'i-lucide-star'
-     */
-    emptyIcon?: string;
-    /**
-     * 选中星星的图标
-     * @defaultValue 'i-lucide-star'
-     */
-    filledIcon?: string;
-    /**
-     * 半星图标
-     * @defaultValue 'i-lucide-star-half'
-     */
-    halfIcon?: string;
-    /**
-     * 选中星星的颜色
-     * @defaultValue 'warning'
-     */
-    color?: ButtonProps['color'];
-    /**
-     * 星星大小
-     * @defaultValue 'sm'
-     */
-    size?: ButtonProps['size'];
-    /**
-     * 是否允许半星
-     * @defaultValue false
-     */
-    allowHalf?: boolean;
-    /**
-     * 是否允许清除评分
-     * @defaultValue false
-     */
-    clearable?: boolean;
-}
-export interface StarRatingEmits {
-    'update:modelValue': [value: number];
-    /** 评分改变事件 */
-    'change': [value: number];
-    /** 悬停事件 */
-    'hover': [value: number | null];
-}
-declare var __VLS_1: {
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_7: {
     value: number;
     max: number;
-}, __VLS_13: {
+}, __VLS_19: {
     value: number;
     max: number;
     label: string;
-}, __VLS_20: {
+}, __VLS_26: {
     value: number;
     max: number;
 };
 type __VLS_Slots = {} & {
-    prefix?: (props: typeof __VLS_1) => any;
+    prefix?: (props: typeof __VLS_7) => any;
 } & {
-    badge?: (props: typeof __VLS_13) => any;
+    badge?: (props: typeof __VLS_19) => any;
 } & {
-    suffix?: (props: typeof __VLS_20) => any;
+    suffix?: (props: typeof __VLS_26) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<StarRatingProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (value: number) => any;
     hover: (value: number | null) => any;
     "update:modelValue": (value: number) => any;
-}, string, import("vue").PublicProps, Readonly<StarRatingProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onChange?: ((value: number) => any) | undefined;
     onHover?: ((value: number | null) => any) | undefined;
     "onUpdate:modelValue"?: ((value: number) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    max: number;
+    showBadge: boolean;
+    emptyIcon: import("@nuxt/ui").IconProps["name"];
+    filledIcon: import("@nuxt/ui").IconProps["name"];
+    halfIcon: import("@nuxt/ui").IconProps["name"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;