From e41b20b32ee5764c0f116f4cb55beb4a1a98d634 Mon Sep 17 00:00:00 2001
From: Saeid Zareie <saeid.za98@gmail.com>
Date: Wed, 13 Mar 2024 10:28:56 +0330
Subject: [PATCH] refactor: using primitive instead of computed

---
 .../default/ui/breadcrumb/BreadcrumbLink.vue  | 23 +++++++++++--------
 .../new-york/ui/breadcrumb/BreadcrumbLink.vue | 23 +++++++++++--------
 .../registry/styles/default/breadcrumb.json   |  2 +-
 .../registry/styles/new-york/breadcrumb.json  |  2 +-
 4 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbLink.vue b/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbLink.vue
index f25365d5..073dac4c 100644
--- a/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbLink.vue
+++ b/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbLink.vue
@@ -1,18 +1,23 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { Slot } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import type { PrimitiveProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<{
+interface Props extends PrimitiveProps {
+  as?: string
   class?: HTMLAttributes['class']
-  asChild?: boolean
-}>()
-
-const Comp = computed(() => props.asChild ? Slot : 'a')
+}
+const props = withDefaults(defineProps<Props>(), {
+  as: 'a',
+})
 </script>
 
 <template>
-  <Comp :class="cn('transition-colors hover:text-foreground', props.class)">
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :class="cn('transition-colors hover:text-foreground', props.class)"
+  >
     <slot />
-  </Comp>
+  </Primitive>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbLink.vue b/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbLink.vue
index f25365d5..073dac4c 100644
--- a/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbLink.vue
+++ b/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbLink.vue
@@ -1,18 +1,23 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { Slot } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import type { PrimitiveProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<{
+interface Props extends PrimitiveProps {
+  as?: string
   class?: HTMLAttributes['class']
-  asChild?: boolean
-}>()
-
-const Comp = computed(() => props.asChild ? Slot : 'a')
+}
+const props = withDefaults(defineProps<Props>(), {
+  as: 'a',
+})
 </script>
 
 <template>
-  <Comp :class="cn('transition-colors hover:text-foreground', props.class)">
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :class="cn('transition-colors hover:text-foreground', props.class)"
+  >
     <slot />
-  </Comp>
+  </Primitive>
 </template>
diff --git a/apps/www/src/public/registry/styles/default/breadcrumb.json b/apps/www/src/public/registry/styles/default/breadcrumb.json
index c08be585..b0eacc42 100644
--- a/apps/www/src/public/registry/styles/default/breadcrumb.json
+++ b/apps/www/src/public/registry/styles/default/breadcrumb.json
@@ -19,7 +19,7 @@
     },
     {
       "name": "BreadcrumbLink.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { Slot } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n  asChild?: boolean\n}>()\n\nconst Comp = computed(() => props.asChild ? Slot : 'a')\n</script>\n\n<template>\n  <Comp :class=\"cn('transition-colors hover:text-foreground', props.class)\">\n    <slot />\n  </Comp>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport type { PrimitiveProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\ninterface Props extends PrimitiveProps {\n  as?: string\n  class?: HTMLAttributes['class']\n}\nconst props = withDefaults(defineProps<Props>(), {\n  as: 'a',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn('transition-colors hover:text-foreground', props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
     },
     {
       "name": "BreadcrumbList.vue",
diff --git a/apps/www/src/public/registry/styles/new-york/breadcrumb.json b/apps/www/src/public/registry/styles/new-york/breadcrumb.json
index a5c242c9..1e099dd5 100644
--- a/apps/www/src/public/registry/styles/new-york/breadcrumb.json
+++ b/apps/www/src/public/registry/styles/new-york/breadcrumb.json
@@ -19,7 +19,7 @@
     },
     {
       "name": "BreadcrumbLink.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { Slot } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n  asChild?: boolean\n}>()\n\nconst Comp = computed(() => props.asChild ? Slot : 'a')\n</script>\n\n<template>\n  <Comp :class=\"cn('transition-colors hover:text-foreground', props.class)\">\n    <slot />\n  </Comp>\n</template>\n"
+      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport type { PrimitiveProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\ninterface Props extends PrimitiveProps {\n  as?: string\n  class?: HTMLAttributes['class']\n}\nconst props = withDefaults(defineProps<Props>(), {\n  as: 'a',\n})\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn('transition-colors hover:text-foreground', props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
     },
     {
       "name": "BreadcrumbList.vue",