easy-forms-core 1.0.5 → 1.0.7

package/README.md

@@ -144,11 +144,97 @@ const schema = {
 </template>
 ```
 
+## Templates Pre-construidos
+
+EasyForms incluye templates pre-construidos para formularios comunes. Puedes usar el atributo `template` en lugar de `schema`. Los templates y schemas son mutuamente excluyentes.
+
+### Uso Básico de Templates
+
+```html
+<!-- HTML Vanilla -->
+<easy-form template="login"></easy-form>
+```
+
+```javascript
+import 'easy-forms-core'
+
+const form = document.querySelector('easy-form')
+form.template = 'register'
+```
+
+```tsx
+// React
+<easy-form template="contact" />
+```
+
+```vue
+<!-- Vue -->
+<easy-form template="login" />
+```
+
+### Templates Disponibles
+
+1. **login** - Login form (email, password, remember me)
+2. **register** - Registration form (name, email, password, confirm password)
+3. **otp** - OTP verification (6-digit code)
+4. **contact** - Contact form (name, email, subject, message)
+5. **password-reset** - Password reset request (email)
+6. **password-change** - Change password (current, new, confirm)
+7. **profile** - User profile edit (name, email, phone, bio, avatar)
+8. **checkout** - Checkout form (billing address, payment method, shipping)
+9. **feedback** - Feedback form (rating, comment, email)
+10. **subscription** - Newsletter subscription (email, preferences)
+11. **booking** - Booking/reservation (date, time, guests, special requests)
+12. **review** - Review/rating form (rating, title, comment)
+
+### Extender Templates
+
+Puedes extender un template agregando campos adicionales usando el atributo `template-extend`:
+
+```html
+<easy-form 
+  template="contact"
+  template-extend='[{"type": "text", "name": "phone", "label": "Phone", "validations": [{"type": "required"}]}]'>
+</easy-form>
+```
+
+O programáticamente:
+
+```javascript
+import { extendTemplate } from 'easy-forms-core'
+
+const extendedSchema = extendTemplate('register', [
+  { 
+    type: 'text', 
+    name: 'company', 
+    label: 'Company',
+    validations: [{ type: 'required' }]
+  }
+])
+
+form.schema = extendedSchema
+```
+
+### Mutua Exclusividad
+
+Los atributos `template` y `schema` son mutuamente excluyentes. Si estableces uno, el otro será removido automáticamente:
+
+```javascript
+// Si estableces template, schema será removido
+form.template = 'login'
+// schema ahora es null
+
+// Si estableces schema, template será removido
+form.schema = { fields: [...] }
+// template ahora es null
+```
+
 ## Características
 
 - Web Component nativo
 - Escrito en TypeScript
 - JSON → Form automático
+- **Templates pre-construidos** - 12 templates comunes listos para usar
 - Validaciones integradas
 - Steps / wizard forms
 - Formularios anidados

package/dist/easy-form.d.ts

@@ -1,7 +1,7 @@
 /**
  * Tipos de campos soportados
  */
-type FieldType = 'text' | 'email' | 'number' | 'password' | 'textarea' | 'select' | 'checkbox' | 'radio' | 'switch' | 'date' | 'file' | 'array' | 'group' | 'row' | 'custom';
+type FieldType = 'text' | 'email' | 'number' | 'password' | 'textarea' | 'select' | 'checkbox' | 'radio' | 'switch' | 'date' | 'file' | 'array' | 'group' | 'row' | 'custom' | 'quantity' | 'accordion-select' | 'image-grid-select' | 'otp';
 /**
  * Tipos de validaciones soportadas
  */
@@ -222,10 +222,57 @@ interface CustomField extends BaseField {
     type: 'custom';
     component: string;
 }
+/**
+ * Campo de cantidad (quantity)
+ */
+interface QuantityField extends BaseField {
+    type: 'quantity';
+    min?: number;
+    max?: number;
+    step?: number;
+}
+/**
+ * Campo select en acordeón
+ */
+interface AccordionSelectField extends BaseField {
+    type: 'accordion-select';
+    options: Array<{
+        label: string;
+        value: any;
+        description?: string;
+        content?: string | HTMLElement;
+    } | string>;
+    multiple?: boolean;
+    autoExpand?: boolean;
+}
+/**
+ * Campo select de imágenes en cuadrícula
+ */
+interface ImageGridSelectField extends BaseField {
+    type: 'image-grid-select';
+    options: Array<{
+        label: string;
+        value: any;
+        image?: string;
+        description?: string;
+    } | string>;
+    multiple?: boolean;
+    columns?: number;
+    imageSize?: 'small' | 'medium' | 'large';
+    gap?: string;
+}
+/**
+ * Campo OTP (código de un solo uso)
+ */
+interface OTPField extends BaseField {
+    type: 'otp';
+    length?: number;
+    numeric?: boolean;
+}
 /**
  * Unión de todos los tipos de campos
  */
-type Field = TextField | NumberField | TextareaField | SelectField | CheckboxField | RadioField | SwitchField | DateField | FileField | ArrayField | GroupField | RowField | CustomField;
+type Field = TextField | NumberField | TextareaField | SelectField | CheckboxField | RadioField | SwitchField | DateField | FileField | ArrayField | GroupField | RowField | CustomField | QuantityField | AccordionSelectField | ImageGridSelectField | OTPField;
 /**
  * Step para formularios wizard
  */
@@ -251,6 +298,10 @@ interface FormColors {
     border?: string;
     background?: string;
 }
+/**
+ * Template names available
+ */
+type TemplateName = 'login' | 'register' | 'otp' | 'contact' | 'password-reset' | 'password-change' | 'profile' | 'checkout' | 'feedback' | 'subscription' | 'booking' | 'review';
 /**
  * Schema del formulario
  */
@@ -298,6 +349,22 @@ declare class EasyForm extends BrowserHTMLElement {
      * Establece el schema
      */
     set schema(value: FormSchema | null);
+    /**
+     * Obtiene el template
+     */
+    get template(): TemplateName | null;
+    /**
+     * Establece el template
+     */
+    set template(value: TemplateName | null);
+    /**
+     * Obtiene los campos adicionales para extender el template
+     */
+    get templateExtend(): Field[] | null;
+    /**
+     * Establece los campos adicionales para extender el template
+     */
+    set templateExtend(value: Field[] | null);
     /**
      * Se llama cuando el componente se conecta al DOM
      */
@@ -310,6 +377,10 @@ declare class EasyForm extends BrowserHTMLElement {
      * Maneja el cambio de schema
      */
     private handleSchemaChange;
+    /**
+     * Obtiene el schema desde un template
+     */
+    private getSchemaFromTemplate;
     /**
      * Renderiza el formulario
      */