pdyform 2.0.2 → 2.2.0

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

@@ -1,21 +0,0 @@
-<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

@@ -1,30 +0,0 @@
-<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

@@ -1,26 +0,0 @@
-<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

@@ -1,24 +0,0 @@
-<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

@@ -1,40 +0,0 @@
-<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

@@ -1,38 +0,0 @@
-<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

@@ -1,43 +0,0 @@
-<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

@@ -1,30 +0,0 @@
-<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

@@ -1,27 +0,0 @@
-<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>

package/packages/vue/src/components/Textarea.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import { cn } from '../utils'
-
-const props = defineProps<{
-  class?: any
-  modelValue?: any
-}>()
-
-const emit = defineEmits(['update:modelValue', 'blur'])
-</script>
-
-<template>
-  <textarea
-    :class="cn('flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background 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 HTMLTextAreaElement).value)"
-    @blur="emit('blur', $event)"
-  />
-</template>

package/packages/vue/src/components/TextareaRenderer.vue

@@ -1,18 +0,0 @@
-<script setup lang="ts">
-import type { FieldRendererProps } from '../fieldComponentMap';
-import Textarea from '../components/Textarea.vue';
-
-const props = defineProps<FieldRendererProps>();
-const emit = defineEmits<{ 'update:modelValue': [value: any] }>();
-</script>
-
-<template>
-  <Textarea
-    :id="fieldId"
-    :placeholder="field.placeholder"
-    :disabled="field.disabled"
-    :name="field.name"
-    :modelValue="modelValue ?? ''"
-    @update:modelValue="emit('update:modelValue', $event)"
-  />
-</template>

package/packages/vue/src/components/index.ts

@@ -1,24 +0,0 @@
-// ─── Primitive UI components ─────────────────────────────────────────────────
-export { default as Input } from './Input.vue';
-export { default as Textarea } from './Textarea.vue';
-export { default as Checkbox } from './Checkbox.vue';
-export { default as RadioGroup } from './RadioGroup.vue';
-export { default as RadioGroupItem } from './RadioGroupItem.vue';
-export { default as Select } from './Select.vue';
-export { default as SelectTrigger } from './SelectTrigger.vue';
-export { default as SelectContent } from './SelectContent.vue';
-export { default as SelectItem } from './SelectItem.vue';
-export { default as Label } from './Label.vue';
-
-// ─── Field renderer components ────────────────────────────────────────────────
-export { default as InputRenderer } from './InputRenderer.vue';
-export { default as TextareaRenderer } from './TextareaRenderer.vue';
-export { default as SelectRenderer } from './SelectRenderer.vue';
-export { default as CheckboxRenderer } from './CheckboxRenderer.vue';
-export { default as RadioRenderer } from './RadioRenderer.vue';
-
-// ─── Types ───────────────────────────────────────────────────────────────────
-export type { FieldComponentMap, FieldRendererProps } from '../fieldComponentMap';
-
-// ─── Default component map ───────────────────────────────────────────────────
-export { defaultComponentMap } from '../fieldComponentMap';

package/packages/vue/src/env.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="vite/client" />
-
-declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
-  const component: DefineComponent<object, object, any>
-  export default component
-}

package/packages/vue/src/fieldComponentMap.ts

@@ -1,34 +0,0 @@
-import type { FormField } from 'pdyform/core';
-import type { Component } from 'vue';
-
-import InputRenderer from './components/InputRenderer.vue';
-import TextareaRenderer from './components/TextareaRenderer.vue';
-import SelectRenderer from './components/SelectRenderer.vue';
-import CheckboxRenderer from './components/CheckboxRenderer.vue';
-import RadioRenderer from './components/RadioRenderer.vue';
-
-/**
- * The props interface that every field renderer component must accept.
- * Custom field renderers must implement this interface.
- */
-export interface FieldRendererProps {
-  field: FormField;
-  modelValue: any;
-  fieldId: string;
-}
-
-/** Map from field type to a Vue component */
-export type FieldComponentMap = Record<string, Component>;
-
-/** The default built-in component map */
-export const defaultComponentMap: FieldComponentMap = {
-  text: InputRenderer,
-  number: InputRenderer,
-  password: InputRenderer,
-  email: InputRenderer,
-  date: InputRenderer,
-  textarea: TextareaRenderer,
-  select: SelectRenderer,
-  checkbox: CheckboxRenderer,
-  radio: RadioRenderer,
-};

package/packages/vue/src/index.ts

@@ -1,4 +0,0 @@
-export { default as DynamicForm } from './DynamicForm.vue';
-export { default as FormFieldRenderer } from './FormFieldRenderer.vue';
-export { defaultComponentMap } from './fieldComponentMap';
-export type { FieldComponentMap, FieldRendererProps } from './fieldComponentMap';

package/packages/vue/src/utils.ts

@@ -1,6 +0,0 @@
-import { type ClassValue, clsx } from 'clsx'
-import { twMerge } from 'tailwind-merge'
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}

package/packages/vue/tailwind.config.mjs

@@ -1,10 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: [
-    "./src/**/*.{vue,js,ts,jsx,tsx}",
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-}

package/packages/vue/test/DynamicForm.test.ts

@@ -1,19 +0,0 @@
-// @vitest-environment jsdom
-import { describe, it, expect } from 'vitest';
-import { mount } from '@vue/test-utils';
-import DynamicForm from '../src/DynamicForm.vue';
-
-describe('Vue DynamicForm', () => {
-  const schema: any = {
-    fields: [
-      { name: 'username', label: 'Username', type: 'text' }
-    ]
-  };
-
-  it('renders correctly', () => {
-    const wrapper = mount(DynamicForm, {
-      props: { schema }
-    });
-    expect(wrapper.find('label').text()).toBe('Username');
-  });
-});

package/packages/vue/test/FormFieldRenderer.test.ts

@@ -1,133 +0,0 @@
-// @vitest-environment jsdom
-import { describe, it, expect } from 'vitest';
-import { mount } from '@vue/test-utils';
-import FormFieldRenderer from '../src/FormFieldRenderer.vue';
-import type { FormField } from 'pdyform/core';
-
-describe('FormFieldRenderer', () => {
-  const defaultField: FormField = {
-    name: 'testField',
-    label: 'Test Label',
-    type: 'text',
-    id: 'test-field-id',
-  };
-
-  it('renders a text input correctly', async () => {
-    const wrapper = mount(FormFieldRenderer, {
-      props: { field: defaultField, modelValue: 'test value' }
-    });
-    
-    expect(wrapper.find('label').text()).toBe('Test Label');
-    const input = wrapper.find('input');
-    expect((input.element as HTMLInputElement).value).toBe('test value');
-    expect((input.element as HTMLInputElement).type).toBe('text');
-    
-    await input.setValue('new value');
-    expect(wrapper.emitted('update:modelValue')![0]).toEqual(['new value']);
-  });
-
-  it('emits number for number inputs', async () => {
-    const field: FormField = { ...defaultField, type: 'number' };
-    const wrapper = mount(FormFieldRenderer, {
-      props: { field, modelValue: 22 }
-    });
-
-    const input = wrapper.find('input');
-    await input.setValue('23');
-    expect(wrapper.emitted('update:modelValue')![0]).toEqual([23]);
-  });
-
-  it('renders a textarea correctly', async () => {
-    const field: FormField = { ...defaultField, type: 'textarea' };
-    const wrapper = mount(FormFieldRenderer, {
-      props: { field, modelValue: 'text\narea' }
-    });
-    
-    const textarea = wrapper.find('textarea');
-    expect((textarea.element as HTMLTextAreaElement).value).toBe('text\narea');
-    
-    await textarea.setValue('new textarea value');
-    expect(wrapper.emitted('update:modelValue')![0]).toEqual(['new textarea value']);
-  });
-
-  it('renders a select correctly', async () => {
-    const field: FormField = { 
-      ...defaultField, 
-      type: 'select', 
-      options: [
-        { label: 'Option 1', value: 'opt1' },
-        { label: 'Option 2', value: 'opt2' }
-      ]
-    };
-    const wrapper = mount(FormFieldRenderer, {
-      props: { field, modelValue: 'opt1' }
-    });
-    
-    // Radix Select renders a combobox trigger
-    expect(wrapper.find('[role="combobox"]').exists()).toBe(true);
-
-    // Simulate the SelectField emitting the new value (Radix portal doesn't fully function in jsdom)
-    const selectField = wrapper.findComponent({ name: 'Select' });
-    await selectField.vm.$emit('update:modelValue', 'opt2');
-    
-    expect(wrapper.emitted('update:modelValue')![0]).toEqual(['opt2']);
-  });
-
-  it('renders a checkbox correctly', async () => {
-    const field: FormField = { 
-      ...defaultField, 
-      type: 'checkbox', 
-      options: [
-        { label: 'Check 1', value: 'c1' },
-        { label: 'Check 2', value: 'c2' }
-      ]
-    };
-    const wrapper = mount(FormFieldRenderer, {
-      props: { field, modelValue: ['c1'] }
-    });
-    
-    const checkboxes = wrapper.findAll('[role="checkbox"]');
-    expect(checkboxes[0].attributes('data-state')).toBe('checked');
-    expect(checkboxes[1].attributes('data-state')).toBe('unchecked');
-    
-    // Emit from the internal CheckboxComponent logic since Radix click simulation can be tricky with simple DOM wrapper
-    const checkboxComponents = wrapper.findAllComponents({ name: 'Checkbox' });
-    await checkboxComponents[1].vm.$emit('update:checked', true);
-
-    expect(wrapper.emitted('update:modelValue')![0]).toEqual([['c1', 'c2']]);
-  });
-
-  it('renders a radio correctly', async () => {
-    const field: FormField = { 
-      ...defaultField, 
-      type: 'radio', 
-      options: [
-        { label: 'Radio 1', value: 'r1' },
-        { label: 'Radio 2', value: 'r2' }
-      ]
-    };
-    const wrapper = mount(FormFieldRenderer, {
-      props: { field, modelValue: 'r1' }
-    });
-    
-    const radios = wrapper.findAll('[role="radio"]');
-    expect(radios[0].attributes('data-state')).toBe('checked');
-    expect(radios[1].attributes('data-state')).toBe('unchecked');
-    
-    // Radix Vue uses a radio group component wrapper for selecting
-    const radioGroupComp = wrapper.findComponent({ name: 'RadioGroup' });
-    await radioGroupComp.vm.$emit('update:modelValue', 'r2');
-    
-    expect(wrapper.emitted('update:modelValue')![0]).toEqual(['r2']);
-  });
-
-  it('displays description and error', () => {
-    const field: FormField = { ...defaultField, description: 'Desc text' };
-    const wrapper = mount(FormFieldRenderer, {
-      props: { field, modelValue: '', error: 'Error text' }
-    });
-    
-    expect(wrapper.text()).toContain('Desc text');
-    expect(wrapper.text()).toContain('Error text');
-  });
-});

package/packages/vue/tsconfig.json

@@ -1,16 +0,0 @@
-{
-  "extends": "@vue/tsconfig/tsconfig.json",
-  "compilerOptions": {
-    "composite": false,
-    "target": "ESNext",
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "outDir": "./dist",
-    "strict": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "declaration": true
-  },
-  "include": ["src/**/*.ts", "src/**/*.vue"],
-  "exclude": ["node_modules", "dist", "**/*.test.ts"]
-}

package/packages/vue/vite.config.ts

@@ -1,29 +0,0 @@
-import { defineConfig } from 'vite';
-import vue from '@vitejs/plugin-vue';
-import dts from 'vite-plugin-dts';
-import path from 'path';
-
-export default defineConfig({
-  plugins: [vue(), dts({ rollupTypes: true })],
-  build: {
-    lib: {
-      entry: path.resolve(__dirname, 'src/index.ts'),
-      name: 'PdDynamicFormVue',
-      fileName: (format) => `index.${format === 'es' ? 'mjs' : 'js'}`,
-    },
-    rollupOptions: {
-      external: ['vue', 'pdyform/core'],
-      output: {
-        globals: {
-          vue: 'Vue',
-          'pdyform/core': 'PdyformCore',
-        },
-      },
-    },
-  },
-  resolve: {
-    alias: {
-      'pdyform/core': path.resolve(__dirname, '../core/src'),
-    },
-  },
-});

package/packages/vue/vitest.config.ts

@@ -1,16 +0,0 @@
-import { defineConfig } from 'vitest/config';
-import vue from '@vitejs/plugin-vue';
-import path from 'path';
-
-export default defineConfig({
-  plugins: [vue()],
-  test: {
-    environment: 'jsdom',
-    globals: true,
-  },
-  resolve: {
-    alias: {
-      'pdyform/core': path.resolve(__dirname, '../core/src'),
-    },
-  },
-});

package/pnpm-workspace.yaml

@@ -1,4 +0,0 @@
-packages:
-  - 'packages/*'
-  - 'example/*'
-  - '.'