Upgrade to shadcn-vue v4 (#232)

* switch to shadcn-vue v4

* change component style to v4

* migrate to InputOTP component

Author: geisi

components.json

@@ -1,6 +1,6 @@
 {
     "$schema": "https://shadcn-vue.com/schema.json",
-    "style": "default",
+    "style": "new-york-v4",
     "tailwind": {
         "config": "tailwind.config.js",
         "css": "resources/css/app.css",

package-lock.json

@@ -36,11 +36,12 @@
         "clsx": "^2.1.1",
         "laravel-vite-plugin": "^2.0.0",
         "lucide-vue-next": "^0.468.0",
-        "reka-ui": "^2.4.1",
+        "reka-ui": "^2.6.1",
         "tailwind-merge": "^3.2.0",
         "tailwindcss": "^4.1.1",
         "tw-animate-css": "^1.2.5",
-        "vue": "^3.5.13"
+        "vue": "^3.5.13",
+        "vue-input-otp": "^0.3.2"
     },
     "optionalDependencies": {
         "@rollup/rollup-linux-x64-gnu": "4.9.5",

package.json

@@ -2,7 +2,6 @@
 import AlertError from '@/components/AlertError.vue';
 import InputError from '@/components/InputError.vue';
 import { Button } from '@/components/ui/button';
-import { Spinner } from '@/components/ui/spinner';
 import {
     Dialog,
     DialogContent,
@@ -11,10 +10,11 @@ import {
     DialogTitle,
 } from '@/components/ui/dialog';
 import {
-    PinInput,
-    PinInputGroup,
-    PinInputSlot,
-} from '@/components/ui/pin-input';
+    InputOTP,
+    InputOTPGroup,
+    InputOTPSlot,
+} from '@/components/ui/input-otp';
+import { Spinner } from '@/components/ui/spinner';
 import { useTwoFactorAuth } from '@/composables/useTwoFactorAuth';
 import { confirm } from '@/routes/two-factor';
 import { Form } from '@inertiajs/vue3';
@@ -35,8 +35,7 @@ const { qrCodeSvg, manualSetupKey, clearSetupData, fetchSetupData, errors } =
     useTwoFactorAuth();
 
 const showVerificationStep = ref(false);
-const code = ref<number[]>([]);
-const codeValue = computed<string>(() => code.value.join(''));
+const code = ref<string>('');
 
 const pinInputContainerRef = useTemplateRef('pinInputContainerRef');
 
@@ -91,7 +90,7 @@ const resetModalState = () => {
     }
 
     showVerificationStep.value = false;
-    code.value = [];
+    code.value = '';
 };
 
 watch(
@@ -234,35 +233,32 @@ watch(
                     <Form
                         v-bind="confirm.form()"
                         reset-on-error
-                        @finish="code = []"
+                        @finish="code = ''"
                         @success="isOpen = false"
                         v-slot="{ errors, processing }"
                     >
-                        <input type="hidden" name="code" :value="codeValue" />
+                        <input type="hidden" name="code" :value="code" />
                         <div
                             ref="pinInputContainerRef"
                             class="relative w-full space-y-3"
                         >
                             <div
                                 class="flex w-full flex-col items-center justify-center space-y-3 py-2"
                             >
-                                <PinInput
+                                <InputOTP
                                     id="otp"
-                                    placeholder="○"
                                     v-model="code"
-                                    type="number"
-                                    otp
+                                    :maxlength="6"
+                                    :disabled="processing"
                                 >
-                                    <PinInputGroup>
-                                        <PinInputSlot
-                                            autofocus
-                                            v-for="(id, index) in 6"
-                                            :key="id"
-                                            :index="index"
-                                            :disabled="processing"
+                                    <InputOTPGroup>
+                                        <InputOTPSlot
+                                            v-for="index in 6"
+                                            :key="index"
+                                            :index="index - 1"
                                         />
-                                    </PinInputGroup>
-                                </PinInput>
+                                    </InputOTPGroup>
+                                </InputOTP>
                                 <InputError
                                     :message="
                                         errors?.confirmTwoFactorAuthentication
@@ -284,9 +280,7 @@ watch(
                                 <Button
                                     type="submit"
                                     class="w-auto flex-1"
-                                    :disabled="
-                                        processing || codeValue.length < 6
-                                    "
+                                    :disabled="processing || code.length < 6"
                                 >
                                     Confirm
                                 </Button>

resources/js/components/TwoFactorSetupModal.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
-import { AvatarRoot } from 'reka-ui'
+import type { HTMLAttributes } from "vue"
+import { AvatarRoot } from "reka-ui"
+import { cn } from "@/lib/utils"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 

resources/js/components/ui/avatar/Avatar.vue

@@ -1,15 +1,13 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils'
-import { AvatarFallback, type AvatarFallbackProps } from 'reka-ui'
-import { computed, type HTMLAttributes } from 'vue'
+import type { AvatarFallbackProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { AvatarFallback } from "reka-ui"
+import { cn } from "@/lib/utils"
 
-const props = defineProps<AvatarFallbackProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<AvatarFallbackProps & { class?: HTMLAttributes["class"] }>()
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
+const delegatedProps = reactiveOmit(props, "class")
 </script>
 
 <template>

resources/js/components/ui/avatar/AvatarFallback.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { AvatarImageProps } from 'reka-ui'
-import { AvatarImage } from 'reka-ui'
+import type { AvatarImageProps } from "reka-ui"
+import { AvatarImage } from "reka-ui"
 
 const props = defineProps<AvatarImageProps>()
 </script>

resources/js/components/ui/avatar/AvatarImage.vue

@@ -1,3 +1,3 @@
-export { default as Avatar } from './Avatar.vue'
-export { default as AvatarFallback } from './AvatarFallback.vue'
-export { default as AvatarImage } from './AvatarImage.vue'
+export { default as Avatar } from "./Avatar.vue"
+export { default as AvatarFallback } from "./AvatarFallback.vue"
+export { default as AvatarImage } from "./AvatarImage.vue"

resources/js/components/ui/avatar/index.ts

@@ -4,7 +4,7 @@ import { cva } from "class-variance-authority"
 export { default as Badge } from "./Badge.vue"
 
 export const badgeVariants = cva(
-  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
   {
     variants: {
       variant: {

resources/js/components/ui/badge/index.ts

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from 'vue'
+import type { HTMLAttributes } from "vue"
 
 const props = defineProps<{
-  class?: HTMLAttributes['class']
+  class?: HTMLAttributes["class"]
 }>()
 </script>