pdyform 1.1.0 → 2.0.0

package/packages/vue/node_modules/.bin/tsc

@@ -11,7 +11,7 @@ else
   export NODE_PATH="/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/bin/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/typescript@5.9.3/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/bin/tsc" "$@"
+  exec "$basedir/node"  "$basedir/../typescript/bin/tsc" "$@"
 else
-  exec node  "$basedir/../../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/bin/tsc" "$@"
+  exec node  "$basedir/../typescript/bin/tsc" "$@"
 fi

package/packages/vue/node_modules/.bin/tsserver

@@ -11,7 +11,7 @@ else
   export NODE_PATH="/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/bin/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/typescript@5.9.3/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/bin/tsserver" "$@"
+  exec "$basedir/node"  "$basedir/../typescript/bin/tsserver" "$@"
 else
-  exec node  "$basedir/../../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/bin/tsserver" "$@"
+  exec node  "$basedir/../typescript/bin/tsserver" "$@"
 fi

package/packages/vue/node_modules/.bin/vite

@@ -11,7 +11,7 @@ else
   export NODE_PATH="/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/vite@5.4.21_@types+node@20.19.35/node_modules/vite/bin/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/vite@5.4.21_@types+node@20.19.35/node_modules/vite/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/vite@5.4.21_@types+node@20.19.35/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../../../../node_modules/.pnpm/vite@5.4.21_@types+node@20.19.35/node_modules/vite/bin/vite.js" "$@"
+  exec "$basedir/node"  "$basedir/../vite/bin/vite.js" "$@"
 else
-  exec node  "$basedir/../../../../node_modules/.pnpm/vite@5.4.21_@types+node@20.19.35/node_modules/vite/bin/vite.js" "$@"
+  exec node  "$basedir/../vite/bin/vite.js" "$@"
 fi

package/packages/vue/node_modules/.bin/vitest

@@ -11,7 +11,7 @@ else
   export NODE_PATH="/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/vitest@1.6.1_@types+node@20.19.35_jsdom@22.1.0/node_modules/vitest/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/vitest@1.6.1_@types+node@20.19.35_jsdom@22.1.0/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../../../../node_modules/.pnpm/vitest@1.6.1_@types+node@20.19.35_jsdom@22.1.0/node_modules/vitest/vitest.mjs" "$@"
+  exec "$basedir/node"  "$basedir/../vitest/vitest.mjs" "$@"
 else
-  exec node  "$basedir/../../../../node_modules/.pnpm/vitest@1.6.1_@types+node@20.19.35_jsdom@22.1.0/node_modules/vitest/vitest.mjs" "$@"
+  exec node  "$basedir/../vitest/vitest.mjs" "$@"
 fi

package/packages/vue/node_modules/.bin/vue-tsc

@@ -11,7 +11,7 @@ else
   export NODE_PATH="/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/vue-tsc@2.2.12_typescript@5.9.3/node_modules/vue-tsc/bin/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/vue-tsc@2.2.12_typescript@5.9.3/node_modules/vue-tsc/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/vue-tsc@2.2.12_typescript@5.9.3/node_modules:/Users/pidan/Work/Learn/dynamic-form/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../../../../node_modules/.pnpm/vue-tsc@2.2.12_typescript@5.9.3/node_modules/vue-tsc/bin/vue-tsc.js" "$@"
+  exec "$basedir/node"  "$basedir/../vue-tsc/bin/vue-tsc.js" "$@"
 else
-  exec node  "$basedir/../../../../node_modules/.pnpm/vue-tsc@2.2.12_typescript@5.9.3/node_modules/vue-tsc/bin/vue-tsc.js" "$@"
+  exec node  "$basedir/../vue-tsc/bin/vue-tsc.js" "$@"
 fi

package/packages/vue/node_modules/.vite/vitest/results.json

@@ -1 +1 @@
-{"version":"1.6.1","results":[[":src/DynamicForm.test.ts",{"duration":17,"failed":false}]]}
+{"version":"1.6.1","results":[[":test/DynamicForm.test.ts",{"duration":22,"failed":false}],[":test/FormFieldRenderer.test.ts",{"duration":82,"failed":false}]]}

package/packages/vue/package.json

@@ -27,10 +27,12 @@
     "lint": "eslint src/**/*.{ts,vue} --no-error-on-unmatched-pattern"
   },
   "dependencies": {
-    "clsx": "^2.0.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "lucide-vue-next": "^0.300.0",
     "pdyform": "workspace:*",
-    "tailwind-merge": "^2.0.0"
+    "radix-vue": "^1.9.17",
+    "tailwind-merge": "^2.6.1"
   },
   "peerDependencies": {
     "vue": "^3.5.0"

package/packages/vue/postcss.config.mjs

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/packages/vue/src/FormFieldRenderer.vue

@@ -1,114 +1,70 @@
 <script setup lang="ts">
 import type { FormField } from 'pdyform/core';
+import type { Component } from 'vue';
 import { computed } from 'vue';
+import { defaultComponentMap, type FieldComponentMap } from './fieldComponentMap';
+import Label from './components/Label.vue';
+import InputRenderer from './components/InputRenderer.vue';
 
 const props = defineProps<{
   field: FormField;
   modelValue: any;
   error?: string;
+  /**
+   * Custom component map.
+   * Entries here are merged with the default map, so you can override
+   * specific types or add entirely new ones.
+   *
+   * @example
+   * ```ts
+   * import { defaultComponentMap } from 'pdyform-vue';
+   * const myMap = {
+   *   ...defaultComponentMap,
+   *   text: MyCustomInput,       // overrides built-in text input
+   *   rating: StarRatingField,   // adds a new field type
+   * };
+   * ```
+   */
+  componentMap?: FieldComponentMap;
 }>();
 
 const emit = defineEmits(['update:modelValue']);
 
 const fieldId = computed(() => `field-${props.field.name}`);
 
-const baseInputClasses = "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50";
+// Merge external map over defaults — external wins
+const resolvedMap = computed<FieldComponentMap>(() =>
+  props.componentMap
+    ? { ...defaultComponentMap, ...props.componentMap }
+    : defaultComponentMap
+);
 
-const handleUpdate = (val: any) => {
-  emit('update:modelValue', val);
-};
-
-const handleCheckboxChange = (val: any, checked: boolean) => {
-  const current = Array.isArray(props.modelValue) ? [...props.modelValue] : [];
-  if (checked) {
-    current.push(val);
-  } else {
-    const idx = current.indexOf(val);
-    if (idx > -1) current.splice(idx, 1);
-  }
-  handleUpdate(current);
-};
+// Resolve a component or fall back to InputRenderer
+const ResolvedFieldComponent = computed<Component>(
+  () => resolvedMap.value[props.field.type] ?? InputRenderer
+);
 </script>
 
 <template>
   <div :class="['space-y-2', field.className]">
-    <label v-if="field.label" :for="fieldId" class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+    <Label v-if="field.label" :for="fieldId">
       {{ field.label }}
-    </label>
-
-    <template v-if="field.type === 'textarea'">
-      <textarea
-        :id="fieldId"
-        :class="[baseInputClasses, 'min-h-[80px]']"
-        :placeholder="field.placeholder"
-        :disabled="field.disabled"
-        :name="field.name"
-        :value="modelValue"
-        @input="(e: any) => handleUpdate(e.target.value)"
-      />
-    </template>
-
-    <template v-else-if="field.type === 'select'">
-      <select
-        :id="fieldId"
-        :class="baseInputClasses"
-        :disabled="field.disabled"
-        :name="field.name"
-        :value="modelValue"
-        @change="(e: any) => handleUpdate(e.target.value)"
-      >
-        <option value="" disabled>{{ field.placeholder || 'Select an option' }}</option>
-        <option v-for="opt in field.options" :key="opt.value" :value="opt.value">
-          {{ opt.label }}
-        </option>
-      </select>
-    </template>
-
-    <template v-else-if="field.type === 'checkbox'">
-      <div class="flex flex-wrap gap-4">
-        <label v-for="opt in field.options" :key="opt.value" class="flex items-center space-x-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
-          <input
-            type="checkbox"
-            class="h-4 w-4 rounded border-primary text-primary focus:ring-primary"
-            :disabled="field.disabled"
-            :checked="Array.isArray(modelValue) && modelValue.includes(opt.value)"
-            @change="(e: any) => handleCheckboxChange(opt.value, e.target.checked)"
-          />
-          <span>{{ opt.label }}</span>
-        </label>
-      </div>
-    </template>
-
-    <template v-else-if="field.type === 'radio'">
-      <div class="flex flex-wrap gap-4">
-        <label v-for="opt in field.options" :key="opt.value" class="flex items-center space-x-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
-          <input
-            type="radio"
-            class="h-4 w-4 border-primary text-primary focus:ring-primary"
-            :disabled="field.disabled"
-            :name="field.name"
-            :checked="modelValue === opt.value"
-            @change="handleUpdate(opt.value)"
-          />
-          <span>{{ opt.label }}</span>
-        </label>
-      </div>
-    </template>
+    </Label>
 
-    <template v-else>
-      <input
-        :id="fieldId"
-        :type="field.type"
-        :class="baseInputClasses"
-        :placeholder="field.placeholder"
-        :disabled="field.disabled"
-        :name="field.name"
-        :value="modelValue"
-        @input="(e: any) => handleUpdate(e.target.value)"
-      />
-    </template>
+    <!-- All field rendering is delegated to the resolved component -->
+    <component
+      :is="ResolvedFieldComponent"
+      :field="field"
+      :fieldId="fieldId"
+      :modelValue="modelValue"
+      @update:modelValue="emit('update:modelValue', $event)"
+    />
 
-    <p v-if="field.description" class="text-sm text-muted-foreground">{{ field.description }}</p>
-    <p v-if="error" class="text-sm font-medium text-destructive">{{ error }}</p>
+    <p v-if="field.description" class="text-[0.8rem] text-muted-foreground">
+      {{ field.description }}
+    </p>
+    <p v-if="error" class="text-[0.8rem] font-medium text-destructive">
+      {{ error }}
+    </p>
   </div>
 </template>

package/packages/vue/src/components/Checkbox.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { CheckboxIndicator, CheckboxRoot, type CheckboxRootEmits, type CheckboxRootProps, useForwardPropsEmits } from 'radix-vue'
+import { Check } from 'lucide-vue-next'
+import { cn } from '../utils'
+
+const props = defineProps<CheckboxRootProps & { class?: any }>()
+const emits = defineEmits<CheckboxRootEmits & { blur: [] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <CheckboxRoot
+    v-bind="forwarded"
+    :class="cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground', props.class)"
+    @blur="emits('blur')"
+  >
+    <CheckboxIndicator class="flex h-full w-full items-center justify-center text-current">
+      <Check class="h-4 w-4" />
+    </CheckboxIndicator>
+  </CheckboxRoot>
+</template>

package/packages/vue/src/components/CheckboxRenderer.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { FieldRendererProps } from '../fieldComponentMap';
+import Checkbox from '../components/Checkbox.vue';
+import Label from '../components/Label.vue';
+
+const props = defineProps<FieldRendererProps>();
+const emit = defineEmits<{ 'update:modelValue': [value: any] }>();
+
+const handleChange = (optValue: any, checked: boolean) => {
+  const current = Array.isArray(props.modelValue) ? [...props.modelValue] : [];
+  if (checked) {
+    current.push(optValue);
+  } else {
+    const idx = current.indexOf(optValue);
+    if (idx > -1) current.splice(idx, 1);
+  }
+  emit('update:modelValue', current);
+};
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-4">
+    <div v-for="opt in field.options" :key="opt.value" class="flex items-center space-x-2">
+      <Checkbox
+        :id="`checkbox-${field.name}-${opt.value}`"
+        :disabled="field.disabled"
+        :checked="Array.isArray(modelValue) && modelValue.includes(opt.value)"
+        @update:checked="(checked) => handleChange(opt.value, !!checked)"
+      />
+      <Label :for="`checkbox-${field.name}-${opt.value}`" class="font-normal">
+        {{ opt.label }}
+      </Label>
+    </div>
+  </div>
+</template>

package/packages/vue/src/components/Input.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { cn } from '../utils'
+
+const props = defineProps<{
+  class?: any
+  type?: string
+  modelValue?: any
+}>()
+
+const emit = defineEmits(['update:modelValue', 'blur'])
+</script>
+
+<template>
+  <input
+    :type="type"
+    :class="cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)"
+    :value="modelValue"
+    @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+    @blur="emit('blur', $event)"
+  />
+</template>

package/packages/vue/src/components/InputRenderer.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { FieldRendererProps } from '../fieldComponentMap';
+import Input from '../components/Input.vue';
+
+const props = defineProps<FieldRendererProps>();
+const emit = defineEmits<{ 'update:modelValue': [value: any] }>();
+
+const handleInput = (nextValue: any) => {
+  if (props.field.type !== 'number') {
+    emit('update:modelValue', nextValue);
+    return;
+  }
+
+  emit('update:modelValue', nextValue === '' ? '' : Number(nextValue));
+};
+</script>
+
+<template>
+  <Input
+    :id="fieldId"
+    :type="field.type"
+    :placeholder="field.placeholder"
+    :disabled="field.disabled"
+    :name="field.name"
+    :modelValue="modelValue ?? ''"
+    @update:modelValue="handleInput"
+  />
+</template>

package/packages/vue/src/components/Label.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Label, type LabelProps } from 'radix-vue'
+import { cn } from '../utils'
+
+const props = defineProps<LabelProps & { class?: any }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+</script>
+
+<template>
+  <Label
+    v-bind="delegatedProps"
+    :class="cn('text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70', props.class)"
+  >
+    <slot />
+  </Label>
+</template>

package/packages/vue/src/components/RadioGroup.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { RadioGroupItem, type RadioGroupItemProps, RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'radix-vue'
+import { Circle } from 'lucide-vue-next'
+import { cn } from '../utils'
+
+// Root
+const props = defineProps<RadioGroupRootProps & { class?: any }>()
+const emits = defineEmits<RadioGroupRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<script lang="ts">
+export { default as RadioGroupItem } from './RadioGroupItem.vue'
+</script>
+
+<template>
+  <RadioGroupRoot
+    v-bind="forwarded"
+    :class="cn('grid gap-2', props.class)"
+  >
+    <slot />
+  </RadioGroupRoot>
+</template>

package/packages/vue/src/components/RadioGroupItem.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { RadioGroupIndicator, RadioGroupItem, type RadioGroupItemProps, useForwardProps } from 'radix-vue'
+import { Circle } from 'lucide-vue-next'
+import { cn } from '../utils'
+
+const props = defineProps<RadioGroupItemProps & { class?: any }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RadioGroupItem
+    v-bind="forwardedProps"
+    :class="cn('aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)"
+  >
+    <RadioGroupIndicator class="flex items-center justify-center">
+      <Circle class="h-2.5 w-2.5 fill-current text-current" />
+    </RadioGroupIndicator>
+  </RadioGroupItem>
+</template>

package/packages/vue/src/components/RadioRenderer.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { FieldRendererProps } from '../fieldComponentMap';
+import RadioGroup from '../components/RadioGroup.vue';
+import RadioGroupItem from '../components/RadioGroupItem.vue';
+import Label from '../components/Label.vue';
+
+const props = defineProps<FieldRendererProps>();
+const emit = defineEmits<{ 'update:modelValue': [value: any] }>();
+</script>
+
+<template>
+  <RadioGroup
+    class="flex flex-wrap gap-4"
+    :disabled="field.disabled"
+    :name="field.name"
+    :modelValue="modelValue != null ? String(modelValue) : ''"
+    @update:modelValue="emit('update:modelValue', $event)"
+  >
+    <div v-for="opt in field.options" :key="opt.value" class="flex items-center space-x-2">
+      <RadioGroupItem :id="`radio-${field.name}-${opt.value}`" :value="String(opt.value)" />
+      <Label :for="`radio-${field.name}-${opt.value}`" class="font-normal">{{ opt.label }}</Label>
+    </div>
+  </RadioGroup>
+</template>

package/packages/vue/src/components/Select.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import {
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  SelectPortal,
+  SelectRoot,
+  type SelectRootEmits,
+  type SelectRootProps,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectTrigger,
+  SelectValue,
+  SelectViewport,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { Check, ChevronDown, ChevronUp } from 'lucide-vue-next'
+import { cn } from '../utils'
+
+const props = defineProps<SelectRootProps>()
+const emits = defineEmits<SelectRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<script lang="ts">
+export { default as SelectTrigger } from './SelectTrigger.vue'
+export { default as SelectContent } from './SelectContent.vue'
+export { default as SelectItem } from './SelectItem.vue'
+export { SelectValue, SelectGroup } from 'radix-vue'
+</script>
+
+<template>
+  <SelectRoot v-bind="forwarded">
+    <slot />
+  </SelectRoot>
+</template>

package/packages/vue/src/components/SelectContent.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import {
+  SelectContent,
+  type SelectContentProps,
+  SelectPortal,
+  SelectViewport,
+  useForwardProps,
+} from 'radix-vue'
+import { cn } from '../utils'
+
+const props = withDefaults(
+  defineProps<SelectContentProps & { class?: any }>(),
+  {
+    position: 'popper',
+  },
+)
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectPortal>
+    <SelectContent
+      v-bind="forwardedProps"
+      :class="cn('relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-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="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>

package/packages/vue/src/components/SelectItem.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import {
+  SelectItem,
+  SelectItemIndicator,
+  type SelectItemProps,
+  SelectItemText,
+  useForwardProps,
+} from 'radix-vue'
+import { Check } from 'lucide-vue-next'
+import { cn } from '../utils'
+
+const props = defineProps<SelectItemProps & { class?: any }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectItem
+    v-bind="forwardedProps"
+    :class="
+      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',
+        props.class,
+      )
+    "
+  >
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectItemIndicator>
+        <Check class="h-4 w-4" />
+      </SelectItemIndicator>
+    </span>
+
+    <SelectItemText>
+      <slot />
+    </SelectItemText>
+  </SelectItem>
+</template>

package/packages/vue/src/components/SelectRenderer.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { FieldRendererProps } from '../fieldComponentMap';
+import Select from '../components/Select.vue';
+import SelectTrigger from '../components/SelectTrigger.vue';
+import SelectContent from '../components/SelectContent.vue';
+import SelectItem from '../components/SelectItem.vue';
+import { SelectValue } from 'radix-vue';
+
+
+const props = defineProps<FieldRendererProps>();
+const emit = defineEmits<{ 'update:modelValue': [value: any] }>();
+</script>
+
+<template>
+  <Select
+    :disabled="field.disabled"
+    :name="field.name"
+    :modelValue="modelValue != null ? String(modelValue) : ''"
+    @update:modelValue="emit('update:modelValue', $event)"
+  >
+    <SelectTrigger :id="fieldId">
+      <SelectValue :placeholder="field.placeholder || 'Select an option'" />
+    </SelectTrigger>
+    <SelectContent>
+      <SelectItem v-for="opt in field.options" :key="opt.value" :value="String(opt.value)">
+        {{ opt.label }}
+      </SelectItem>
+    </SelectContent>
+  </Select>
+</template>

package/packages/vue/src/components/SelectTrigger.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'radix-vue'
+import { ChevronDown } from 'lucide-vue-next'
+import { computed } from 'vue'
+import { cn } from '../utils'
+
+const props = defineProps<SelectTriggerProps & { class?: any }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectTrigger
+    v-bind="forwardedProps"
+    :class="cn('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)"
+  >
+    <slot />
+    <SelectIcon as-child>
+      <ChevronDown class="h-4 w-4 opacity-50" />
+    </SelectIcon>
+  </SelectTrigger>
+</template>