refactor: update to vue 3.5

Signed-off-by: ZTL-UwU <[email protected]>

app.vue

@@ -1,35 +1,30 @@
 <template>
   <NuxtLoadingIndicator :color="false" class="z-100 bg-primary/80" />
-  <ConfigProvider :use-id="useIdFunction">
-    <LayoutHeader />
+  <LayoutHeader />
 
-    <div v-if="$route.path !== '/'" class="min-h-screen border-b">
-      <div
-        class="flex-1 items-start px-4 md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 md:px-8 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10"
-        :class="[config.main.padded && 'container']"
-      >
-        <aside class="fixed top-[102px] z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 overflow-y-auto md:sticky md:top-[60px] md:block">
-          <LayoutAside :is-mobile="false" />
-        </aside>
-        <NuxtPage />
-      </div>
+  <div v-if="$route.path !== '/'" class="min-h-screen border-b">
+    <div
+      class="flex-1 items-start px-4 md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 md:px-8 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10"
+      :class="[config.main.padded && 'container']"
+    >
+      <aside class="fixed top-[102px] z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 overflow-y-auto md:sticky md:top-[60px] md:block">
+        <LayoutAside :is-mobile="false" />
+      </aside>
+      <NuxtPage />
     </div>
-    <NuxtPage v-else />
+  </div>
+  <NuxtPage v-else />
 
-    <Toaster />
-    <LayoutFooter />
-  </ConfigProvider>
+  <Toaster />
+  <LayoutFooter />
 </template>
 
 <script setup lang="ts">
-import { ConfigProvider } from 'radix-vue';
 import Toaster from '@/components/ui/toast/Toaster.vue';
 
 const config = useConfig();
 const { themeClass, radius } = useThemes();
 
-const useIdFunction = () => useId();
-
 useSeoMeta({
   description: config.value.site.description,
   ogDescription: config.value.site.description,

components/content/AccordionItem.vue

@@ -12,6 +12,8 @@
 </template>
 
 <script setup lang="ts">
+import { useId } from 'radix-vue';
+
 defineProps<{
   value?: string;
   title?: string;

components/content/ProseImg.vue

@@ -9,8 +9,8 @@
 </template>
 
 <script setup lang="ts">
-import { joinURL, withLeadingSlash, withTrailingSlash } from 'ufo';
 import { computed, useRuntimeConfig } from '#imports';
+import { joinURL, withLeadingSlash, withTrailingSlash } from 'ufo';
 
 const props = defineProps({
   src: {

components/ui/accordion/AccordionContent.vue

@@ -10,9 +10,9 @@
 </template>
 
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue';
-import { AccordionContent, type AccordionContentProps } from 'radix-vue';
 import { cn } from '@/lib/utils';
+import { AccordionContent, type AccordionContentProps } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
 
 const props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>();
 

components/ui/accordion/AccordionItem.vue

@@ -8,9 +8,9 @@
 </template>
 
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue';
-import { AccordionItem, type AccordionItemProps, useForwardProps } from 'radix-vue';
 import { cn } from '@/lib/utils';
+import { AccordionItem, type AccordionItemProps, useForwardProps } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
 
 const props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>();
 

components/ui/accordion/AccordionTrigger.vue

@@ -21,13 +21,13 @@
 </template>
 
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue';
+import { cn } from '@/lib/utils';
 import {
   AccordionHeader,
   AccordionTrigger,
   type AccordionTriggerProps,
 } from 'radix-vue';
-import { cn } from '@/lib/utils';
+import { computed, type HTMLAttributes } from 'vue';
 
 const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>();
 

components/ui/alert/Alert.vue

@@ -5,9 +5,9 @@
 </template>
 
 <script setup lang="ts">
+import { cn } from '@/lib/utils';
 import type { HTMLAttributes } from 'vue';
 import { type AlertVariants, alertVariants } from '.';
-import { cn } from '@/lib/utils';
 
 const props = defineProps<{
   class?: HTMLAttributes['class'];

components/ui/alert/AlertDescription.vue

@@ -5,8 +5,8 @@
 </template>
 
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue';
 import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
 
 const props = defineProps<{
   class?: HTMLAttributes['class'];

components/ui/alert/AlertTitle.vue

@@ -5,8 +5,8 @@
 </template>
 
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue';
 import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
 
 const props = defineProps<{
   class?: HTMLAttributes['class'];

components/ui/alert/index.ts

@@ -1,8 +1,8 @@
-import { type VariantProps, cva } from 'class-variance-authority';
+import { cva, type VariantProps } from 'class-variance-authority';
 
 export { default as Alert } from './Alert.vue';
-export { default as AlertTitle } from './AlertTitle.vue';
 export { default as AlertDescription } from './AlertDescription.vue';
+export { default as AlertTitle } from './AlertTitle.vue';
 
 export const alertVariants = cva(
   'relative w-full rounded-lg border p-4 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',

components/ui/badge/Badge.vue

@@ -5,9 +5,9 @@
 </template>
 
 <script setup lang="ts">
+import { cn } from '@/lib/utils';
 import type { HTMLAttributes } from 'vue';
 import { type BadgeVariants, badgeVariants } from '.';
-import { cn } from '@/lib/utils';
 
 const props = defineProps<{
   variant?: BadgeVariants['variant'];

components/ui/badge/index.ts

@@ -1,4 +1,4 @@
-import { type VariantProps, cva } from 'class-variance-authority';
+import { cva, type VariantProps } from 'class-variance-authority';
 
 export { default as Badge } from './Badge.vue';
 

components/ui/breadcrumb/BreadcrumbItem.vue

@@ -7,8 +7,8 @@
 </template>
 
 <script lang="ts" setup>
-import type { HTMLAttributes } from 'vue';
 import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
 
 const props = defineProps<{
   class?: HTMLAttributes['class'];

components/ui/breadcrumb/BreadcrumbLink.vue

@@ -9,9 +9,9 @@
 </template>
 
 <script lang="ts" setup>
-import type { HTMLAttributes } from 'vue';
-import { Primitive, type PrimitiveProps } from 'radix-vue';
 import { cn } from '@/lib/utils';
+import { Primitive, type PrimitiveProps } from 'radix-vue';
+import type { HTMLAttributes } from 'vue';
 
 const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {
   as: 'a',

components/ui/breadcrumb/BreadcrumbList.vue

@@ -7,8 +7,8 @@
 </template>
 
 <script lang="ts" setup>
-import type { HTMLAttributes } from 'vue';
 import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
 
 const props = defineProps<{
   class?: HTMLAttributes['class'];

components/ui/breadcrumb/BreadcrumbPage.vue

@@ -10,8 +10,8 @@
 </template>
 
 <script lang="ts" setup>
-import type { HTMLAttributes } from 'vue';
 import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
 
 const props = defineProps<{
   class?: HTMLAttributes['class'];

components/ui/breadcrumb/BreadcrumbSeparator.vue

@@ -11,8 +11,8 @@
 </template>
 
 <script lang="ts" setup>
-import type { HTMLAttributes } from 'vue';
 import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
 
 const props = defineProps<{
   class?: HTMLAttributes['class'];

components/ui/button/Button.vue

@@ -9,10 +9,10 @@
 </template>
 
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
 import { Primitive, type PrimitiveProps } from 'radix-vue';
+import type { HTMLAttributes } from 'vue';
 import { type ButtonVariants, buttonVariants } from '.';
-import { cn } from '@/lib/utils';
 
 interface Props extends PrimitiveProps {
   variant?: ButtonVariants['variant'];

components/ui/button/index.ts

@@ -1,4 +1,4 @@
-import { type VariantProps, cva } from 'class-variance-authority';
+import { cva, type VariantProps } from 'class-variance-authority';
 
 export { default as Button } from './Button.vue';
 

components/ui/card/Card.vue

@@ -12,8 +12,8 @@
 </template>
 
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue';
 import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
 
 const props = defineProps<{
   class?: HTMLAttributes['class'];

components/ui/card/CardContent.vue

@@ -5,8 +5,8 @@
 </template>
 
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue';
 import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
 
 const props = defineProps<{
   class?: HTMLAttributes['class'];

components/ui/card/CardDescription.vue

@@ -5,8 +5,8 @@
 </template>
 
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue';
 import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
 
 const props = defineProps<{
   class?: HTMLAttributes['class'];

components/ui/card/CardFooter.vue

@@ -5,8 +5,8 @@
 </template>
 
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue';
 import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
 
 const props = defineProps<{
   class?: HTMLAttributes['class'];

components/ui/card/CardHeader.vue

@@ -5,8 +5,8 @@
 </template>
 
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue';
 import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
 
 const props = defineProps<{
   class?: HTMLAttributes['class'];

components/ui/card/CardTitle.vue

@@ -9,8 +9,8 @@
 </template>
 
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue';
 import { cn } from '@/lib/utils';
+import type { HTMLAttributes } from 'vue';
 
 const props = defineProps<{
   class?: HTMLAttributes['class'];

components/ui/card/index.ts

@@ -1,6 +1,6 @@
 export { default as Card } from './Card.vue';
-export { default as CardHeader } from './CardHeader.vue';
-export { default as CardTitle } from './CardTitle.vue';
-export { default as CardDescription } from './CardDescription.vue';
 export { default as CardContent } from './CardContent.vue';
+export { default as CardDescription } from './CardDescription.vue';
 export { default as CardFooter } from './CardFooter.vue';
+export { default as CardHeader } from './CardHeader.vue';
+export { default as CardTitle } from './CardTitle.vue';

components/ui/collapsible/index.ts

@@ -1,3 +1,3 @@
 export { default as Collapsible } from './Collapsible.vue';
-export { default as CollapsibleTrigger } from './CollapsibleTrigger.vue';
 export { default as CollapsibleContent } from './CollapsibleContent.vue';
+export { default as CollapsibleTrigger } from './CollapsibleTrigger.vue';

components/ui/command/Command.vue

@@ -8,10 +8,10 @@
 </template>
 
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue';
-import type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue';
-import { ComboboxRoot, useForwardPropsEmits } from 'radix-vue';
 import { cn } from '@/lib/utils';
+import { ComboboxRoot, useForwardPropsEmits } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+import type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue';
 
 const props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {
   open: true,

components/ui/command/CommandGroup.vue

@@ -11,10 +11,10 @@
 </template>
 
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue';
-import type { ComboboxGroupProps } from 'radix-vue';
-import { ComboboxGroup, ComboboxLabel } from 'radix-vue';
 import { cn } from '@/lib/utils';
+import { ComboboxGroup, ComboboxLabel } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+import type { ComboboxGroupProps } from 'radix-vue';
 
 const props = defineProps<ComboboxGroupProps & {
   class?: HTMLAttributes['class'];

components/ui/command/CommandInput.vue

@@ -11,9 +11,9 @@
 </template>
 
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue';
-import { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'radix-vue';
 import { cn } from '@/lib/utils';
+import { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
 
 defineOptions({
   inheritAttrs: false,

components/ui/command/CommandItem.vue

@@ -8,10 +8,10 @@
 </template>
 
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue';
-import type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue';
-import { ComboboxItem, useForwardPropsEmits } from 'radix-vue';
 import { cn } from '@/lib/utils';
+import { ComboboxItem, useForwardPropsEmits } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+import type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue';
 
 const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>();
 const emits = defineEmits<ComboboxItemEmits>();

components/ui/command/CommandList.vue

@@ -7,10 +7,10 @@
 </template>
 
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue';
-import type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue';
-import { ComboboxContent, useForwardPropsEmits } from 'radix-vue';
 import { cn } from '@/lib/utils';
+import { ComboboxContent, useForwardPropsEmits } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+import type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue';
 
 const props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {
   dismissable: false,

components/ui/command/CommandSeparator.vue

@@ -8,10 +8,10 @@
 </template>
 
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue';
-import type { ComboboxSeparatorProps } from 'radix-vue';
-import { ComboboxSeparator } from 'radix-vue';
 import { cn } from '@/lib/utils';
+import { ComboboxSeparator } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+import type { ComboboxSeparatorProps } from 'radix-vue';
 
 const props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>();