easy-forms-core 1.0.6 → 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

@@ -298,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
  */
@@ -345,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
      */
@@ -357,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
      */