feat: add modelValue prop to NativeSelect

* feat: add controlled way to NativeSelect component

* chore: update

* chore: build registry

lint

---------

Co-authored-by: Sadegh Barati <sadeghbaratiwork@gmail.com>

Author: sainf

apps/v4/public/r/styles/new-york-v4/native-select.json

@@ -13,7 +13,7 @@
     },
     {
       "path": "registry/new-york-v4/ui/native-select/NativeSelect.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { ChevronDownIcon } from \"lucide-vue-next\"\nimport { cn } from \"@/lib/utils\"\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<{ class?: HTMLAttributes[\"class\"] }>()\nconst delegatedProps = reactiveOmit(props, \"class\")\n</script>\n\n<template>\n  <div\n    class=\"group/native-select relative w-fit has-[select:disabled]:opacity-50\"\n    data-slot=\"native-select-wrapper\"\n  >\n    <select\n      data-slot=\"native-select\"\n      :class=\"cn(\n        'border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed',\n        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',\n        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',\n        props.class,\n      )\"\n      v-bind=\"{ ...$attrs, ...delegatedProps }\"\n    >\n      <slot />\n    </select>\n    <ChevronDownIcon\n      class=\"text-muted-foreground pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 opacity-50 select-none\"\n      aria-hidden=\"true\"\n      data-slot=\"native-select-icon\"\n    />\n  </div>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { AcceptableValue } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport { reactiveOmit, useVModel } from \"@vueuse/core\"\nimport { ChevronDownIcon } from \"lucide-vue-next\"\nimport { cn } from \"@/lib/utils\"\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<{ modelValue?: AcceptableValue | AcceptableValue[], class?: HTMLAttributes[\"class\"] }>()\n\nconst emit = defineEmits<{\n  \"update:modelValue\": AcceptableValue\n}>()\n\nconst modelValue = useVModel(props, \"modelValue\", emit, {\n  passive: true,\n  defaultValue: \"\",\n})\n\nconst delegatedProps = reactiveOmit(props, \"class\")\n</script>\n\n<template>\n  <div\n    class=\"group/native-select relative w-fit has-[select:disabled]:opacity-50\"\n    data-slot=\"native-select-wrapper\"\n  >\n    <select\n      v-bind=\"{ ...$attrs, ...delegatedProps }\"\n      v-model=\"modelValue\"\n      data-slot=\"native-select\"\n      :class=\"cn(\n        'border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed',\n        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',\n        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',\n        props.class,\n      )\"\n    >\n      <slot />\n    </select>\n    <ChevronDownIcon\n      class=\"text-muted-foreground pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 opacity-50 select-none\"\n      aria-hidden=\"true\"\n      data-slot=\"native-select-icon\"\n    />\n  </div>\n</template>\n",
       "type": "registry:ui"
     },
     {

apps/v4/registry/new-york-v4/ui/native-select/NativeSelect.vue

@@ -1,14 +1,25 @@
 <script setup lang="ts">
+import type { AcceptableValue } from "reka-ui"
 import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
+import { reactiveOmit, useVModel } from "@vueuse/core"
 import { ChevronDownIcon } from "lucide-vue-next"
 import { cn } from "@/lib/utils"
 
 defineOptions({
   inheritAttrs: false,
 })
 
-const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+const props = defineProps<{ modelValue?: AcceptableValue | AcceptableValue[], class?: HTMLAttributes["class"] }>()
+
+const emit = defineEmits<{
+  "update:modelValue": AcceptableValue
+}>()
+
+const modelValue = useVModel(props, "modelValue", emit, {
+  passive: true,
+  defaultValue: "",
+})
+
 const delegatedProps = reactiveOmit(props, "class")
 </script>
 
@@ -18,14 +29,15 @@ const delegatedProps = reactiveOmit(props, "class")
     data-slot="native-select-wrapper"
   >
     <select
+      v-bind="{ ...$attrs, ...delegatedProps }"
+      v-model="modelValue"
       data-slot="native-select"
       :class="cn(
         'border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed',
         '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',
         props.class,
       )"
-      v-bind="{ ...$attrs, ...delegatedProps }"
     >
       <slot />
     </select>

apps/v4/registry/registry-blocks.ts

@@ -44,11 +44,11 @@ export const blocks: Registry["items"] = [
         type: "registry:component",
       },
       {
-        path: "blocks/dashboard-01/components/DraggableRow.vue",
+        path: "blocks/dashboard-01/components/DragHandle.vue",
         type: "registry:component",
       },
       {
-        path: "blocks/dashboard-01/components/DragHandle.vue",
+        path: "blocks/dashboard-01/components/DraggableRow.vue",
         type: "registry:component",
       },
       {