pdyform 1.1.0 → 2.0.0

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

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

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

@@ -0,0 +1,24 @@
+// ─── 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/fieldComponentMap.ts

@@ -0,0 +1,34 @@
+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,2 +1,4 @@
 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

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

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

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

@@ -0,0 +1,133 @@
+// @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/pnpm-workspace.yaml

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

package/packages/core/src/index.test.ts

@@ -1,37 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { validateField, getDefaultValues } from '../src';
-import { FormField } from '../src/types';
-
-describe('core utils', () => {
-  it('should validate required fields', () => {
-    const field: FormField = {
-      name: 'test',
-      label: 'Test',
-      type: 'text',
-      validations: [{ type: 'required', message: 'Required' }]
-    };
-    expect(validateField('', field)).toBe('Required');
-    expect(validateField('val', field)).toBeNull();
-  });
-
-  it('should validate regex', () => {
-    const field: FormField = {
-      name: 'test',
-      label: 'Test',
-      type: 'text',
-      validations: [{ type: 'pattern', value: '^[0-9]+$', message: 'Only numbers' }]
-    };
-    expect(validateField('abc', field)).toBe('Only numbers');
-    expect(validateField('123', field)).toBeNull();
-  });
-
-  it('should get default values', () => {
-    const schema = {
-      fields: [
-        { name: 'f1', label: 'L1', type: 'text', defaultValue: 'v1' },
-        { name: 'f2', label: 'L2', type: 'text' }
-      ]
-    } as any;
-    expect(getDefaultValues(schema.fields)).toEqual({ f1: 'v1', f2: '' });
-  });
-});