pdyform 2.0.1 → 2.1.0

package/packages/vue/src/DynamicForm.vue

@@ -1,81 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted } from 'vue';
-import type { FormSchema } from 'pdyform/core';
-import { validateField, getDefaultValues } from 'pdyform/core';
-import FormFieldRenderer from './FormFieldRenderer.vue';
-
-const props = defineProps<{
-  schema: FormSchema;
-  className?: string;
-}>();
-
-const emit = defineEmits(['submit']);
-
-const values = ref<Record<string, any>>({});
-const errors = ref<Record<string, string>>({});
-const isSubmitting = ref(false);
-
-onMounted(() => {
-  values.value = getDefaultValues(props.schema.fields);
-});
-
-const handleFieldChange = (name: string, value: any) => {
-  values.value[name] = value;
-  
-  const field = props.schema.fields.find(f => f.name === name);
-  if (field) {
-    const error = validateField(value, field);
-    errors.value[name] = error || '';
-  }
-};
-
-const handleSubmit = () => {
-  isSubmitting.value = true;
-  const newErrors: Record<string, string> = {};
-  let hasError = false;
-
-  props.schema.fields.forEach((field) => {
-    const error = validateField(values.value[field.name], field);
-    if (error) {
-      newErrors[field.name] = error;
-      hasError = true;
-    }
-  });
-
-  errors.value = newErrors;
-
-  if (!hasError) {
-    emit('submit', { ...values.value });
-  }
-  isSubmitting.value = false;
-};
-</script>
-
-<template>
-  <form :class="['space-y-6', className]" @submit.prevent="handleSubmit">
-    <div v-if="schema.title || schema.description" class="space-y-1">
-      <h2 v-if="schema.title" class="text-2xl font-bold tracking-tight">{{ schema.title }}</h2>
-      <p v-if="schema.description" class="text-muted-foreground">{{ schema.description }}</p>
-    </div>
-
-    <div class="space-y-4">
-      <template v-for="field in schema.fields" :key="field.id">
-        <FormFieldRenderer
-          v-if="!field.hidden"
-          :field="field"
-          :model-value="values[field.name]"
-          :error="errors[field.name]"
-          @update:model-value="(val: any) => handleFieldChange(field.name, val)"
-        />
-      </template>
-    </div>
-
-    <button
-      type="submit"
-      :disabled="isSubmitting"
-      class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2 w-full"
-    >
-      {{ isSubmitting ? 'Submitting...' : (schema.submitButtonText || 'Submit') }}
-    </button>
-  </form>
-</template>

package/packages/vue/src/FormFieldRenderer.vue

@@ -1,70 +0,0 @@
-<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}`);
-
-// Merge external map over defaults — external wins
-const resolvedMap = computed<FieldComponentMap>(() =>
-  props.componentMap
-    ? { ...defaultComponentMap, ...props.componentMap }
-    : defaultComponentMap
-);
-
-// 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">
-      {{ field.label }}
-    </Label>
-
-    <!-- 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-[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

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

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

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

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

@@ -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,
-};