docs: update select

apps/www/.vitepress/theme/layout/MainLayout.vue

@@ -57,7 +57,7 @@ const links = [
 
 <template>
   <div class="flex min-h-screen flex-col bg-background">
-    <header class="sticky z-40 top-0 bg-background border-b border-border">
+    <header class="sticky z-40 top-0 border-b border-border">
       <div
         class="max-w-8xl flex h-[58px] items-center justify-between p-4 mx-auto"
       >
@@ -140,7 +140,7 @@ const links = [
       </main>
     </div>
 
-    <footer class="bg-background z-40 border-t border-border text-foreground">
+    <footer class="z-40 border-t border-border text-foreground">
       <div class="max-w-8xl h-20 flex items-center justify-between p-4 mx-auto">
         <div class="flex justify-center items-center">
           <span class="text-sm">

apps/www/src/content/docs/components/select.md

@@ -0,0 +1,64 @@
+---
+title: Select
+description: Displays a list of options for the user to pick from—triggered by a button.
+source: https://github.com/radix-vue/shadcn-vue/tree/main/apps/www/src/lib/registry/default/ui/popover 
+primitive: https://www.radix-vue.com/components/popover.html
+---
+
+
+<ComponentPreview name="SelectDemo" >
+
+<<< ../../../lib/registry/default/examples/SelectDemo.vue
+
+</ComponentPreview>
+
+
+
+## Installation
+
+```bash
+npx shadcn-vue@latest add select
+```
+
+<ManualInstall>
+
+1. Install `radix-vue`:
+
+```bash
+npm install radix-vue
+```
+
+2. Copy and paste the component source files linked at the top of this page into your project.
+</ManualInstall>
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from '@/lib/registry/default/ui/select'
+</script>
+
+<template>
+  <Select>
+    <SelectTrigger>
+      <SelectValue placeholder="Select a fruit" />
+    </SelectTrigger>
+    <SelectContent>
+      <SelectGroup>
+        <SelectLabel>Fruits</SelectLabel>
+        <SelectItem value="apple">
+          Apple
+        </SelectItem>
+      </SelectGroup>
+    </SelectContent>
+  </Select>
+</template>
+```

apps/www/src/lib/registry/default/ui/input/Input.vue

@@ -2,7 +2,7 @@
 import { cn } from '@/lib/utils'
 
 defineProps<{
-  defaultValue: string | number
+  defaultValue?: string | number
 }>()
 </script>
 

apps/www/src/lib/registry/default/ui/select/SelectContent.vue

@@ -1,43 +1,44 @@
 <script setup lang="ts">
 import {
   SelectContent,
+  type SelectContentEmits,
   type SelectContentProps,
   SelectPortal,
   SelectViewport,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { cn, useEmitAsProps } from '@/lib/utils'
 
 const props = withDefaults(
-  defineProps<SelectContentProps & { class?: string }>(),
+  defineProps<SelectContentProps & { class?: string }>(), {
-  {
     position: 'popper',
     sideOffset: 4,
   },
 )
+const emits = defineEmits<SelectContentEmits>()
+const emitsAsProps = useEmitAsProps(emits)
 </script>
 
 <template>
   <SelectPortal>
     <SelectContent
-      v-bind="props"
+      v-bind="{ ...props, ...emitsAsProps, ...$attrs }"
       :class="
         cn(
           'relative z-50 min-w-[10rem] overflow-hidden rounded-md bg-background border border-border text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          position === 'popper'
+            && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
           props.class,
         )
       "
     >
       <SelectViewport
-        class="h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        :class="
+          cn('p-1',
+             position === 'popper'
+               && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]')"
       >
         <slot />
       </SelectViewport>
     </SelectContent>
   </SelectPortal>
 </template>
-
-<style>
-[data-radix-popper-content-wrapper] {
-  z-index: 9999 !important;
-}
-</style>

apps/www/src/lib/registry/default/ui/select/SelectItem.vue

@@ -3,6 +3,7 @@ import {
   SelectItem,
   SelectItemIndicator,
   type SelectItemProps,
+  SelectItemText,
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
 import RadixIconsCheck from '~icons/radix-icons/check'
@@ -11,22 +12,23 @@ const props = defineProps<SelectItemProps & { class?: string }>()
 </script>
 
 <template>
-  <div class="flex justify-between items-center">
+  <SelectItem
-    <SelectItem
+    v-bind="props"
-      v-bind="props"
+    :class="
-      :class="
+      cn(
-        cn(
+        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-          'flex w-full relative cursor-default select-none items-center rounded-sm py-1.5 px-2 text-sm outline-none focus:bg-outline-hover focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        props.class,
-          props.class,
+      )
-        )
+    "
-      "
+  >
-    >
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <div class="h-4 absolute right-2 w-4 items-center justify-center">
+      <SelectItemIndicator>
-        <SelectItemIndicator>
+        <RadixIconsCheck class="h-4 w-4" />
-          <RadixIconsCheck />
+      </SelectItemIndicator>
-        </SelectItemIndicator>
+    </span>
-      </div>
+
+    <SelectItemText>
       <slot />
-    </SelectItem>
+    </SelectItemText>
-  </div>
+  </SelectItem>
 </template>

apps/www/src/lib/registry/default/ui/select/SelectLabel.vue

@@ -6,9 +6,7 @@ const props = defineProps<SelectLabelProps & { class?: string }>()
 </script>
 
 <template>
-  <div class="px-2 py-1">
+  <SelectLabel :class="cn('py-1.5 pl-8 pr-2 text-sm font-semibold', props.class)">
-    <SelectLabel :class="cn('text-[13px] text-muted font-medium', props.class)">
+    <slot />
-      <slot />
+  </SelectLabel>
-    </SelectLabel>
-  </div>
 </template>

apps/www/src/lib/registry/default/ui/select/SelectSeparator.vue

@@ -6,5 +6,5 @@ const props = defineProps<SelectSeparatorProps & { class?: string }>()
 </script>
 
 <template>
-  <SelectSeparator :class="cn('-mx-1 my-1 h-px bg-secondary', props.class)" />
+  <SelectSeparator :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
 </template>

apps/www/src/lib/registry/default/ui/select/SelectTrigger.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { SelectTrigger, type SelectTriggerProps } from 'radix-vue'
+import { SelectIcon, SelectTrigger, type SelectTriggerProps } from 'radix-vue'
 import { ChevronDown } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
@@ -17,7 +17,7 @@ const props = withDefaults(
     v-bind="props"
     :class="[
       cn(
-        'flex h-9 w-full text-foreground hover:bg-outline-hover transition-colors ease-in-out duration-300 items-center justify-between rounded-md border shadow-sm border-border bg-transparent px-3 py-2 text-sm placeholder:text-muted focus:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+        'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
         props.class,
       ),
       props.invalid
@@ -26,6 +26,8 @@ const props = withDefaults(
     ]"
   >
     <slot />
-    <ChevronDown class="w-4 h-4 opacity-50" />
+    <SelectIcon as-child>
+      <ChevronDown class="w-4 h-4 opacity-50" />
+    </SelectIcon>
   </SelectTrigger>
 </template>