refactor(deps): migrate to nuxt v4

2026-02-10 00:31:04 +08:00
parent f1b9cea060
commit 880b85f75d
88 changed files with 80 additions and 60 deletions
--- a/app/components/uni/Toggle/index.vue
+++ b/app/components/uni/Toggle/index.vue
@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+
+const emit = defineEmits(['input', 'change', 'update:modelValue'])
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: false,
+  },
+  size: {
+    type: String as PropType<'sm' | 'md' | 'lg'>,
+    required: false,
+    default: 'md',
+  },
+  value: {
+    type: Boolean,
+    required: false,
+  },
+  onIcon: {
+    type: String,
+    required: false,
+  },
+  offIcon: {
+    type: String,
+    required: false,
+  },
+})
+
+const checked = ref(false)
+
+const buttonSizeClass = computed(() => {
+  switch (props.size) {
+    case 'sm':
+      return 'h-6 w-10'
+    case 'md':
+      return 'h-8 w-14'
+    case 'lg':
+      return 'h-10 w-[calc(2.5rem/0.54)]'
+  }
+})
+
+const buttonPaddingClass = computed(() => {
+  switch (props.size) {
+    case 'sm':
+      return 'p-1'
+    case 'md':
+      return 'p-1'
+    case 'lg':
+      return 'p-1.5'
+  }
+})
+
+const bulletSizeClass = computed(() => {
+  switch (props.size) {
+    case 'sm':
+      return 'h-4'
+    case 'md':
+      return 'h-6'
+    case 'lg':
+      return 'h-7'
+  }
+})
+
+const bulletTranslateClass = computed(() => {
+  switch (props.size) {
+    case 'sm':
+      return 'translate-x-4'
+    case 'md':
+      return 'translate-x-6'
+    case 'lg':
+      return 'translate-x-8'
+  }
+})
+
+const handleCheck = () => {
+  checked.value = !checked.value
+  emit('update:modelValue', checked.value)
+  emit('change', checked.value)
+  emit('input', checked.value)
+}
+
+onMounted(() => {
+  if (props.modelValue) {
+    checked.value = props.modelValue
+  } else if (props.value) {
+    checked.value = props.value
+  }
+})
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    checked.value = value
+  }
+)
+</script>
+
+<template>
+  <button
+    class="relative flex items-center rounded-lg bg-neutral-100 dark:bg-neutral-800 shadow-inner transition ease-in-out group outline-none"
+    :class="{
+      '!bg-green-400 dark:!bg-green-400/50': checked,
+      [buttonSizeClass]: buttonSizeClass,
+      [buttonPaddingClass]: buttonPaddingClass,
+    }"
+    @click="handleCheck"
+  >
+    <span
+      class="aspect-[1/1] translate-x-0 transition ease-in-out bg-white dark:bg-black rounded-md shadow duration-300 group-active:scale-90"
+      :class="{
+        '!shadow-lg': checked,
+        'group-active:translate-x-3 group-active:duration-500': !checked,
+        [bulletSizeClass]: bulletSizeClass,
+        [bulletTranslateClass]: checked,
+      }"
+    >
+      <span
+        v-if="onIcon || offIcon"
+        class="absolute inset-0 flex items-center justify-center text-neutral-400"
+      >
+        <Transition
+          name="icon"
+          mode="out-in"
+        >
+          <slot
+            v-if="checked"
+            name="on-icon"
+          />
+          <slot
+            v-else
+            name="off-icon"
+          />
+        </Transition>
+      </span>
+    </span>
+  </button>
+</template>
+
+<style scoped>
+.icon-enter-active,
+.icon-leave-active {
+  transition: all 0.1s ease;
+}
+
+.icon-enter-from,
+.icon-leave-to {
+  opacity: 0;
+  transform: scale(0.5);
+}
+</style>