fix(button): Replace @nextui-org/theme to @heroui/theme

hotdogc1017 · hotdogc1017 · commit 7791465e333e · 2025-02-28T15:53:06.000+08:00
diff --git a/packages/components/button/src/Button.vue b/packages/components/button/src/Button.vue
@@ -1,90 +1,103 @@
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
-import { button } from '@nextui-org/theme'
-import { useRipple } from '@vue-nextui/shared'
+import { computed, ref } from "vue";
+import { button } from "@heroui/theme";
+import { useRipple } from "@vue-nextui/shared";
 
 interface Button {
-  /**
-   * 按钮的变体样式
-   */
-  variant: 'solid' | 'bordered' | 'light' | 'flat' | 'faded' | 'shadow' | 'ghost'
-
-  /**
-   * 按钮的尺寸
-   */
-  size: 'sm' | 'md' | 'lg'
-
-  /**
-   * 按钮的颜色
-   */
-  color: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger'
-
-  /**
-   * 按钮的圆角样式
-   */
-  radius: 'none' | 'sm' | 'md' | 'lg' | 'full'
-
-  /**
-   * 是否占满父容器宽度
-   */
-  fullWidth: boolean
-
-  /**
-   * 是否禁用按钮
-   */
-  isDisabled: boolean
-
-  /**
-   * 是否在按钮组中
-   */
-  isInGroup: boolean
-
-  /**
-   * 是否仅为图标按钮
-   */
-  isIconOnly: boolean
-
-  /**
-   * 是否禁用动画效果
-   */
-  disableAnimation: boolean
+    /**
+     * 按钮的变体样式
+     */
+    variant:
+        | "solid"
+        | "bordered"
+        | "light"
+        | "flat"
+        | "faded"
+        | "shadow"
+        | "ghost";
+
+    /**
+     * 按钮的尺寸
+     */
+    size: "sm" | "md" | "lg";
+
+    /**
+     * 按钮的颜色
+     */
+    color:
+        | "default"
+        | "primary"
+        | "secondary"
+        | "success"
+        | "warning"
+        | "danger";
+
+    /**
+     * 按钮的圆角样式
+     */
+    radius: "none" | "sm" | "md" | "lg" | "full";
+
+    /**
+     * 是否占满父容器宽度
+     */
+    fullWidth: boolean;
+
+    /**
+     * 是否禁用按钮
+     */
+    isDisabled: boolean;
+
+    /**
+     * 是否在按钮组中
+     */
+    isInGroup: boolean;
+
+    /**
+     * 是否仅为图标按钮
+     */
+    isIconOnly: boolean;
+
+    /**
+     * 是否禁用动画效果
+     */
+    disableAnimation: boolean;
 }
 
-type ButtonState = "pressed" | "hover"
+type ButtonState = "pressed" | "hover";
 
-type ButtonProps = Partial<Button>
+type ButtonProps = Partial<Button>;
 
-const props = defineProps<ButtonProps>()
+const props = defineProps<ButtonProps>();
 
 const buttonState = ref<ButtonState | undefined>();
 
-const buttonRef = ref<HTMLButtonElement>()
-useRipple(buttonRef)
+const buttonRef = ref<HTMLButtonElement>();
+useRipple(buttonRef);
 
 const className = computed(() => {
-  return button({ ...props })
-})
+    return button({ ...props });
+});
 
 function setButtonState(): () => void;
 function setButtonState(state: ButtonState): () => void;
 function setButtonState(state?: ButtonState) {
-  return () => {
-    buttonState.value = state
-  }
+    return () => {
+        buttonState.value = state;
+    };
 }
 </script>
 
 <template>
-  <button
-    ref="buttonRef"
-    :data-pressed="buttonState === 'pressed'"
-    :data-hover="buttonState === 'hover'"
-    :class="className"
-    @mouseup="setButtonState()"
-    @mousedown="setButtonState('pressed')"
-    @mouseenter="setButtonState('hover')"
-    @mouseleave="setButtonState()"
-  >
-    <slot />
-  </button>
+    <button
+        ref="buttonRef"
+        :data-pressed="buttonState === 'pressed'"
+        :data-hover="buttonState === 'hover'"
+        :class="className"
+        @mouseup="setButtonState()"
+        @mousedown="setButtonState('pressed')"
+        @mouseenter="setButtonState('hover')"
+        @mouseleave="setButtonState()"
+    >
+        <slot />
+    </button>
 </template>
