@movk/nuxt 1.2.0 → 1.3.0

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

@@ -1,75 +1,36 @@
-import type { ClassNameValue } from '../types/index.js';
-export interface SlideVerifyProps {
-    /**
-     * 滑块宽度
-     * @defaultValue 50
-     */
-    sliderWidth?: number;
-    /**
-     * 滑块高度
-     * @defaultValue 32
-     */
-    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];
-}
-declare var __VLS_22: {
-    verified: any;
-    progress: any;
+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 = {} & {
-    slider?: (props: typeof __VLS_22) => any;
+type __VLS_Slots = SlideVerifySlots;
+declare function reset(): void;
+type __VLS_ModelProps = {
+    modelValue?: boolean;
 };
-declare const __VLS_base: any;
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    reset: typeof reset;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    success: () => any;
+    "update:modelValue": (value: boolean) => any;
+    dragStart: () => any;
+    dragEnd: (success: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSuccess?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    onDragStart?: (() => any) | undefined;
+    onDragEnd?: ((success: boolean) => any) | undefined;
+}>, {
+    icon: import("@nuxt/ui").IconProps["name"];
+    text: string;
+    successText: 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>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,96 +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: {
-    value: any;
-    max: any;
-}, __VLS_13: {
-    value: any;
-    max: any;
-    label: any;
-}, __VLS_20: {
-    value: any;
-    max: any;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_7: {
+    value: number;
+    max: number;
+}, __VLS_19: {
+    value: number;
+    max: number;
+    label: string;
+}, __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: any;
+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<__VLS_PublicProps> & Readonly<{
+    onChange?: ((value: number) => any) | undefined;
+    onHover?: ((value: number | null) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {
+    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;

package/dist/runtime/components/StarRating.vue

@@ -1,26 +1,71 @@
 <script setup>
 import { UButton, UBadge } from "#components";
 import { computed, ref } from "vue";
+import { FieldGroupReset } from "@nuxt/ui/composables/useFieldGroup";
+import { useAppConfig } from "#imports";
+import theme from "#build/movk-ui/star-rating";
+import { useExtendedTv } from "../utils/extend-theme";
+import { useFieldControl } from "../utils/form-control";
 const props = defineProps({
-  modelValue: { type: Number, required: false, default: 0 },
+  id: { type: String, required: false },
+  name: { type: String, required: false },
   max: { type: Number, required: false, default: 5 },
-  disabled: { type: Boolean, required: false, default: false },
-  readonly: { type: Boolean, required: false, default: false },
+  disabled: { type: Boolean, required: false },
+  highlight: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
   showBadge: { type: Boolean, required: false, default: true },
   buttonProps: { type: Object, required: false },
-  emptyIcon: { type: String, required: false, default: "i-lucide-star" },
-  filledIcon: { type: String, required: false, default: "i-lucide-star" },
-  halfIcon: { type: String, required: false, default: "i-lucide-star-half" },
-  color: { type: null, required: false, default: "warning" },
-  size: { type: null, required: false, default: "sm" },
-  allowHalf: { type: Boolean, required: false, default: false },
-  clearable: { type: Boolean, required: false, default: false }
+  emptyIcon: { type: null, required: false, default: "i-lucide-star" },
+  filledIcon: { type: null, required: false, default: "i-lucide-star" },
+  halfIcon: { type: null, required: false, default: "i-lucide-star-half" },
+  color: { type: null, required: false },
+  size: { type: null, required: false },
+  allowHalf: { type: Boolean, required: false },
+  clearable: { type: Boolean, required: false },
+  class: { type: null, required: false },
+  ui: { type: Object, required: false }
 });
-const emit = defineEmits(["update:modelValue", "change", "hover"]);
+const modelValue = defineModel({ type: Number, ...{ default: 0 } });
+const emits = defineEmits(["change", "hover"]);
 defineOptions({ inheritAttrs: false });
+const {
+  id,
+  name,
+  size: effectiveSize,
+  color: effectiveColor,
+  disabled: effectiveDisabled,
+  fieldGroupOrientation,
+  ariaAttrs,
+  emitFormBlur,
+  emitFormChange,
+  emitFormFocus,
+  emitFormInput
+} = useFieldControl(props);
 const hoveredStar = ref(null);
 const focusedIndex = ref(0);
-const isInteractive = computed(() => !props.disabled && !props.readonly);
+const isInteractive = computed(() => !effectiveDisabled.value && !props.readonly);
+const appConfig = useAppConfig();
+const { extendUi } = useExtendedTv(
+  { slots: {} },
+  theme,
+  () => appConfig.movk?.starRating,
+  () => ({
+    ui: {
+      ...props.ui,
+      root: [props.ui?.root, props.class]
+    },
+    variants: {
+      interactive: isInteractive.value,
+      disabled: effectiveDisabled.value,
+      readonly: props.readonly && !effectiveDisabled.value,
+      fieldGroup: fieldGroupOrientation.value
+    }
+  })
+);
+function emitFormValueChange() {
+  emitFormInput();
+  emitFormChange();
+}
 function calculateHalfStarValue(index, event) {
   if (!props.allowHalf) return index + 1;
   const target = event.currentTarget;
@@ -30,13 +75,10 @@ function calculateHalfStarValue(index, event) {
   return posX < halfWidth ? index + 0.5 : index + 1;
 }
 function updateValue(newValue) {
-  if (props.clearable && newValue === props.modelValue) {
-    emit("update:modelValue", 0);
-    emit("change", 0);
-    return;
-  }
-  emit("update:modelValue", newValue);
-  emit("change", newValue);
+  const finalValue = props.clearable && newValue === modelValue.value ? 0 : newValue;
+  modelValue.value = finalValue;
+  emits("change", finalValue);
+  emitFormValueChange();
 }
 function handleClick(index, event) {
   if (!isInteractive.value || !event) return;
@@ -47,7 +89,7 @@ function handleMouseEnter(index, event) {
   if (!isInteractive.value || !event) return;
   const hoverValue = calculateHalfStarValue(index, event);
   hoveredStar.value = hoverValue - 1;
-  emit("hover", hoverValue);
+  emits("hover", hoverValue);
 }
 function handleMouseMove(index, event) {
   if (!isInteractive.value || !props.allowHalf) return;
@@ -55,13 +97,13 @@ function handleMouseMove(index, event) {
   const currentHover = hoveredStar.value !== null ? hoveredStar.value + 1 : null;
   if (currentHover !== hoverValue) {
     hoveredStar.value = hoverValue - 1;
-    emit("hover", hoverValue);
+    emits("hover", hoverValue);
   }
 }
 function handleMouseLeave() {
   if (!isInteractive.value) return;
   hoveredStar.value = null;
-  emit("hover", null);
+  emits("hover", null);
 }
 function handleKeyDown(event) {
   if (!isInteractive.value) return;
@@ -70,17 +112,17 @@ function handleKeyDown(event) {
     case "ArrowRight":
     case "ArrowUp":
       event.preventDefault();
-      if (props.modelValue < props.max) {
-        updateValue(Math.min(props.modelValue + step, props.max));
-        focusedIndex.value = Math.min(Math.floor(props.modelValue + step), props.max - 1);
+      if (modelValue.value < props.max) {
+        updateValue(Math.min(modelValue.value + step, props.max));
+        focusedIndex.value = Math.min(Math.floor(modelValue.value + step), props.max - 1);
       }
       break;
     case "ArrowLeft":
     case "ArrowDown":
       event.preventDefault();
-      if (props.modelValue > 0) {
-        updateValue(Math.max(props.modelValue - step, 0));
-        focusedIndex.value = Math.max(Math.floor(props.modelValue - step) - 1, 0);
+      if (modelValue.value > 0) {
+        updateValue(Math.max(modelValue.value - step, 0));
+        focusedIndex.value = Math.max(Math.floor(modelValue.value - step) - 1, 0);
       }
       break;
     case "Home":
@@ -113,7 +155,7 @@ function handleKeyDown(event) {
   }
 }
 function getStarState(index) {
-  const displayValue = hoveredStar.value !== null ? hoveredStar.value + 1 : props.modelValue;
+  const displayValue = hoveredStar.value !== null ? hoveredStar.value + 1 : modelValue.value;
   if (index < Math.floor(displayValue)) {
     return "full";
   }
@@ -130,65 +172,67 @@ function getStarIcon(index) {
 }
 function getStarColor(index) {
   const state = getStarState(index);
-  return state !== "empty" ? props.color : "neutral";
+  return state !== "empty" ? effectiveColor.value : "neutral";
 }
-const badgeLabel = computed(() => `${props.modelValue}/${props.max}`);
+const badgeLabel = computed(() => `${modelValue.value}/${props.max}`);
 </script>
 
 <template>
   <div
-    class="inline-flex items-center gap-1"
+    :id="id"
+    :name="name"
+    :class="extendUi.root"
     role="slider"
-    :aria-label="`\u8BC4\u5206 ${props.modelValue} / ${props.max}`"
-    :aria-valuenow="props.modelValue"
+    :aria-label="`\u8BC4\u5206 ${modelValue} / ${props.max}`"
+    :aria-valuenow="modelValue"
     :aria-valuemin="0"
     :aria-valuemax="props.max"
-    :aria-disabled="props.disabled"
+    :aria-disabled="effectiveDisabled"
     :aria-readonly="props.readonly"
     :tabindex="isInteractive ? 0 : -1"
+    v-bind="ariaAttrs"
+    @blur="emitFormBlur"
+    @focus="emitFormFocus"
     @keydown="handleKeyDown"
   >
-    <slot name="prefix" :value="props.modelValue" :max="props.max" />
-    <div class="flex items-center gap-0.5">
-      <UButton
-        v-for="index in props.max"
-        :key="index"
-        :icon="getStarIcon(index - 1)"
-        :color="getStarColor(index - 1)"
-        variant="ghost"
-        :size="props.size"
-        :disabled="props.disabled"
-        :aria-label="`${index} \u661F`"
-        :tabindex="-1"
-        v-bind="buttonProps"
-        class="transition-all duration-150"
-        :class="{
-  'cursor-pointer hover:scale-110': isInteractive,
-  'cursor-not-allowed opacity-50': props.disabled,
-  'cursor-default': props.readonly && !props.disabled
-}"
-        @click="handleClick(index - 1, $event)"
-        @mouseenter="handleMouseEnter(index - 1, $event)"
-        @mousemove="handleMouseMove(index - 1, $event)"
-        @mouseleave="handleMouseLeave"
-      />
-    </div>
+    <FieldGroupReset>
+      <slot name="prefix" :value="modelValue" :max="props.max" />
+      <div :class="extendUi.stars">
+        <UButton
+          v-for="index in props.max"
+          :key="index"
+          :icon="getStarIcon(index - 1)"
+          :color="getStarColor(index - 1)"
+          variant="ghost"
+          :size="effectiveSize"
+          :disabled="effectiveDisabled"
+          :aria-label="`${index} \u661F`"
+          :tabindex="-1"
+          v-bind="buttonProps"
+          :class="extendUi.star"
+          @click="handleClick(index - 1, $event)"
+          @mouseenter="handleMouseEnter(index - 1, $event)"
+          @mousemove="handleMouseMove(index - 1, $event)"
+          @mouseleave="handleMouseLeave"
+        />
+      </div>
 
-    <slot
-      name="badge"
-      :value="props.modelValue"
-      :max="props.max"
-      :label="badgeLabel"
-    >
-      <UBadge
-        v-if="showBadge && props.modelValue > 0"
+      <slot
+        name="badge"
+        :value="modelValue"
+        :max="props.max"
         :label="badgeLabel"
-        color="primary"
-        variant="subtle"
-        size="xs"
-      />
-    </slot>
+      >
+        <UBadge
+          v-if="showBadge && modelValue > 0"
+          :label="badgeLabel"
+          color="primary"
+          variant="subtle"
+          :size="effectiveSize"
+        />
+      </slot>
 
-    <slot name="suffix" :value="props.modelValue" :max="props.max" />
+      <slot name="suffix" :value="modelValue" :max="props.max" />
+    </FieldGroupReset>
   </div>
 </template>

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

@@ -1,96 +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: {
-    value: any;
-    max: any;
-}, __VLS_13: {
-    value: any;
-    max: any;
-    label: any;
-}, __VLS_20: {
-    value: any;
-    max: any;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_7: {
+    value: number;
+    max: number;
+}, __VLS_19: {
+    value: number;
+    max: number;
+    label: string;
+}, __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: any;
+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<__VLS_PublicProps> & Readonly<{
+    onChange?: ((value: number) => any) | undefined;
+    onHover?: ((value: number | null) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {
+    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;