easy-forms-core 1.0.6 → 1.0.7

package/dist/easy-form.js

@@ -3241,6 +3241,516 @@ function getCustomComponent(type) {
   return customComponents.get(type);
 }
 
+// src/templates/index.ts
+var loginTemplate = {
+  fields: [
+    {
+      type: "email",
+      name: "email",
+      label: "Email",
+      placeholder: "Enter your email",
+      validations: [
+        { type: "required", message: "Email is required" },
+        { type: "email", message: "Please enter a valid email" }
+      ]
+    },
+    {
+      type: "password",
+      name: "password",
+      label: "Password",
+      placeholder: "Enter your password",
+      validations: [
+        { type: "required", message: "Password is required" },
+        { type: "minLength", value: 6, message: "Password must be at least 6 characters" }
+      ]
+    },
+    {
+      type: "checkbox",
+      name: "rememberMe",
+      label: "Remember me",
+      defaultValue: false
+    }
+  ]
+};
+var registerTemplate = {
+  fields: [
+    {
+      type: "text",
+      name: "name",
+      label: "Full Name",
+      placeholder: "Enter your full name",
+      validations: [
+        { type: "required", message: "Name is required" },
+        { type: "minLength", value: 2, message: "Name must be at least 2 characters" }
+      ]
+    },
+    {
+      type: "email",
+      name: "email",
+      label: "Email",
+      placeholder: "Enter your email",
+      validations: [
+        { type: "required", message: "Email is required" },
+        { type: "email", message: "Please enter a valid email" }
+      ]
+    },
+    {
+      type: "password",
+      name: "password",
+      label: "Password",
+      placeholder: "Create a password",
+      validations: [
+        { type: "required", message: "Password is required" },
+        { type: "minLength", value: 8, message: "Password must be at least 8 characters" }
+      ]
+    },
+    {
+      type: "password",
+      name: "confirmPassword",
+      label: "Confirm Password",
+      placeholder: "Confirm your password",
+      validations: [
+        { type: "required", message: "Please confirm your password" },
+        {
+          type: "custom",
+          validator: (value) => {
+            return typeof value === "string" && value.length >= 8;
+          },
+          message: "Password must be at least 8 characters"
+        }
+      ]
+    }
+  ]
+};
+var otpTemplate = {
+  fields: [
+    {
+      type: "otp",
+      name: "code",
+      label: "Verification Code",
+      validations: [
+        { type: "required", message: "Verification code is required" }
+      ]
+    }
+  ]
+};
+var contactTemplate = {
+  fields: [
+    {
+      type: "text",
+      name: "name",
+      label: "Name",
+      placeholder: "Enter your name",
+      validations: [
+        { type: "required", message: "Name is required" }
+      ]
+    },
+    {
+      type: "email",
+      name: "email",
+      label: "Email",
+      placeholder: "Enter your email",
+      validations: [
+        { type: "required", message: "Email is required" },
+        { type: "email", message: "Please enter a valid email" }
+      ]
+    },
+    {
+      type: "text",
+      name: "subject",
+      label: "Subject",
+      placeholder: "Enter the subject",
+      validations: [
+        { type: "required", message: "Subject is required" }
+      ]
+    },
+    {
+      type: "textarea",
+      name: "message",
+      label: "Message",
+      placeholder: "Enter your message",
+      rows: 5,
+      validations: [
+        { type: "required", message: "Message is required" },
+        { type: "minLength", value: 10, message: "Message must be at least 10 characters" }
+      ]
+    }
+  ]
+};
+var passwordResetTemplate = {
+  fields: [
+    {
+      type: "email",
+      name: "email",
+      label: "Email",
+      placeholder: "Enter your email address",
+      validations: [
+        { type: "required", message: "Email is required" },
+        { type: "email", message: "Please enter a valid email" }
+      ]
+    }
+  ]
+};
+var passwordChangeTemplate = {
+  fields: [
+    {
+      type: "password",
+      name: "currentPassword",
+      label: "Current Password",
+      placeholder: "Enter your current password",
+      validations: [
+        { type: "required", message: "Current password is required" }
+      ]
+    },
+    {
+      type: "password",
+      name: "newPassword",
+      label: "New Password",
+      placeholder: "Enter your new password",
+      validations: [
+        { type: "required", message: "New password is required" },
+        { type: "minLength", value: 8, message: "Password must be at least 8 characters" }
+      ]
+    },
+    {
+      type: "password",
+      name: "confirmPassword",
+      label: "Confirm New Password",
+      placeholder: "Confirm your new password",
+      validations: [
+        { type: "required", message: "Please confirm your new password" },
+        {
+          type: "custom",
+          validator: (value) => {
+            return typeof value === "string" && value.length >= 8;
+          },
+          message: "Password must be at least 8 characters"
+        }
+      ]
+    }
+  ]
+};
+var profileTemplate = {
+  fields: [
+    {
+      type: "text",
+      name: "name",
+      label: "Full Name",
+      placeholder: "Enter your full name",
+      validations: [
+        { type: "required", message: "Name is required" }
+      ]
+    },
+    {
+      type: "email",
+      name: "email",
+      label: "Email",
+      placeholder: "Enter your email",
+      validations: [
+        { type: "required", message: "Email is required" },
+        { type: "email", message: "Please enter a valid email" }
+      ]
+    },
+    {
+      type: "text",
+      name: "phone",
+      label: "Phone",
+      placeholder: "Enter your phone number",
+      mask: {
+        type: "phone"
+      }
+    },
+    {
+      type: "textarea",
+      name: "bio",
+      label: "Bio",
+      placeholder: "Tell us about yourself",
+      rows: 4
+    },
+    {
+      type: "file",
+      name: "avatar",
+      label: "Profile Picture",
+      accept: "image/*"
+    }
+  ]
+};
+var checkoutTemplate = {
+  fields: [
+    {
+      type: "group",
+      name: "billingAddress",
+      label: "Billing Address",
+      fields: [
+        {
+          type: "text",
+          name: "street",
+          label: "Street Address",
+          placeholder: "Enter street address",
+          validations: [
+            { type: "required", message: "Street address is required" }
+          ]
+        },
+        {
+          type: "row",
+          name: "cityState",
+          fields: [
+            {
+              type: "text",
+              name: "city",
+              label: "City",
+              placeholder: "City",
+              validations: [
+                { type: "required", message: "City is required" }
+              ]
+            },
+            {
+              type: "text",
+              name: "state",
+              label: "State",
+              placeholder: "State",
+              validations: [
+                { type: "required", message: "State is required" }
+              ]
+            }
+          ]
+        },
+        {
+          type: "text",
+          name: "zipCode",
+          label: "ZIP Code",
+          placeholder: "ZIP Code",
+          validations: [
+            { type: "required", message: "ZIP code is required" }
+          ]
+        }
+      ]
+    },
+    {
+      type: "select",
+      name: "paymentMethod",
+      label: "Payment Method",
+      options: [
+        { label: "Credit Card", value: "credit-card" },
+        { label: "Debit Card", value: "debit-card" },
+        { label: "PayPal", value: "paypal" },
+        { label: "Bank Transfer", value: "bank-transfer" }
+      ],
+      validations: [
+        { type: "required", message: "Payment method is required" }
+      ]
+    },
+    {
+      type: "select",
+      name: "shipping",
+      label: "Shipping Method",
+      options: [
+        { label: "Standard (5-7 days)", value: "standard" },
+        { label: "Express (2-3 days)", value: "express" },
+        { label: "Overnight", value: "overnight" }
+      ],
+      validations: [
+        { type: "required", message: "Shipping method is required" }
+      ]
+    }
+  ]
+};
+var feedbackTemplate = {
+  fields: [
+    {
+      type: "select",
+      name: "rating",
+      label: "Rating",
+      options: [
+        { label: "1 - Poor", value: 1 },
+        { label: "2 - Fair", value: 2 },
+        { label: "3 - Good", value: 3 },
+        { label: "4 - Very Good", value: 4 },
+        { label: "5 - Excellent", value: 5 }
+      ],
+      validations: [
+        { type: "required", message: "Rating is required" }
+      ]
+    },
+    {
+      type: "textarea",
+      name: "comment",
+      label: "Comment",
+      placeholder: "Share your feedback",
+      rows: 5,
+      validations: [
+        { type: "required", message: "Comment is required" }
+      ]
+    },
+    {
+      type: "email",
+      name: "email",
+      label: "Email (optional)",
+      placeholder: "Enter your email if you want a response"
+    }
+  ]
+};
+var subscriptionTemplate = {
+  fields: [
+    {
+      type: "email",
+      name: "email",
+      label: "Email",
+      placeholder: "Enter your email",
+      validations: [
+        { type: "required", message: "Email is required" },
+        { type: "email", message: "Please enter a valid email" }
+      ]
+    },
+    {
+      type: "checkbox",
+      name: "weeklyNewsletter",
+      label: "Weekly Newsletter",
+      defaultValue: true
+    },
+    {
+      type: "checkbox",
+      name: "productUpdates",
+      label: "Product Updates",
+      defaultValue: false
+    },
+    {
+      type: "checkbox",
+      name: "promotions",
+      label: "Promotions and Special Offers",
+      defaultValue: false
+    }
+  ]
+};
+var bookingTemplate = {
+  fields: [
+    {
+      type: "date",
+      name: "date",
+      label: "Date",
+      validations: [
+        { type: "required", message: "Date is required" }
+      ]
+    },
+    {
+      type: "text",
+      name: "time",
+      label: "Time",
+      placeholder: "HH:MM",
+      mask: {
+        type: "time"
+      },
+      validations: [
+        { type: "required", message: "Time is required" }
+      ]
+    },
+    {
+      type: "number",
+      name: "guests",
+      label: "Number of Guests",
+      placeholder: "Enter number of guests",
+      min: 1,
+      max: 20,
+      validations: [
+        { type: "required", message: "Number of guests is required" },
+        { type: "min", value: 1, message: "At least 1 guest is required" }
+      ]
+    },
+    {
+      type: "textarea",
+      name: "specialRequests",
+      label: "Special Requests",
+      placeholder: "Any special requests or dietary restrictions?",
+      rows: 4
+    }
+  ]
+};
+var reviewTemplate = {
+  fields: [
+    {
+      type: "select",
+      name: "rating",
+      label: "Rating",
+      options: [
+        { label: "1 Star", value: 1 },
+        { label: "2 Stars", value: 2 },
+        { label: "3 Stars", value: 3 },
+        { label: "4 Stars", value: 4 },
+        { label: "5 Stars", value: 5 }
+      ],
+      validations: [
+        { type: "required", message: "Rating is required" }
+      ]
+    },
+    {
+      type: "text",
+      name: "title",
+      label: "Review Title",
+      placeholder: "Give your review a title",
+      validations: [
+        { type: "required", message: "Review title is required" },
+        { type: "minLength", value: 5, message: "Title must be at least 5 characters" }
+      ]
+    },
+    {
+      type: "textarea",
+      name: "comment",
+      label: "Your Review",
+      placeholder: "Share your experience",
+      rows: 6,
+      validations: [
+        { type: "required", message: "Review comment is required" },
+        { type: "minLength", value: 20, message: "Review must be at least 20 characters" }
+      ]
+    }
+  ]
+};
+var templates = {
+  login: loginTemplate,
+  register: registerTemplate,
+  otp: otpTemplate,
+  contact: contactTemplate,
+  "password-reset": passwordResetTemplate,
+  "password-change": passwordChangeTemplate,
+  profile: profileTemplate,
+  checkout: checkoutTemplate,
+  feedback: feedbackTemplate,
+  subscription: subscriptionTemplate,
+  booking: bookingTemplate,
+  review: reviewTemplate
+};
+function getTemplate(templateName) {
+  if (templateName in templates) {
+    return templates[templateName];
+  }
+  return null;
+}
+function extendTemplate(templateName, additionalFields) {
+  const baseTemplate = getTemplate(templateName);
+  if (!baseTemplate) {
+    throw new Error(`Template "${templateName}" not found`);
+  }
+  const existingFields = baseTemplate.fields || [];
+  const existingSteps = baseTemplate.steps;
+  if (existingSteps && existingSteps.length > 0) {
+    const lastStep = existingSteps[existingSteps.length - 1];
+    return {
+      ...baseTemplate,
+      steps: [
+        ...existingSteps.slice(0, -1),
+        {
+          ...lastStep,
+          fields: [...lastStep.fields, ...additionalFields]
+        }
+      ]
+    };
+  }
+  return {
+    ...baseTemplate,
+    fields: [...existingFields, ...additionalFields]
+  };
+}
+
 // src/components/easy-form.ts
 var BrowserHTMLElement = typeof HTMLElement !== "undefined" ? HTMLElement : class {
 };
@@ -3257,7 +3767,7 @@ var EasyForm = class extends BrowserHTMLElement {
     this.shadow = this.attachShadow({ mode: "open" });
   }
   static get observedAttributes() {
-    return ["schema", "theme", "colors", "initialData"];
+    return ["schema", "template", "template-extend", "theme", "colors", "initialData"];
   }
   /**
    * Obtiene el schema
@@ -3265,18 +3775,72 @@ var EasyForm = class extends BrowserHTMLElement {
   get schema() {
     const schemaAttr = this.getAttribute("schema");
     if (!schemaAttr) return null;
+    if (this.getAttribute("template")) {
+      console.warn('EasyForm: Cannot use both "schema" and "template" attributes. "template" will be ignored.');
+      return parseAttributeValue(schemaAttr);
+    }
     return parseAttributeValue(schemaAttr);
   }
   /**
    * Establece el schema
    */
   set schema(value) {
+    if (value && this.getAttribute("template")) {
+      console.warn('EasyForm: Setting "schema" will remove "template" attribute.');
+      this.removeAttribute("template");
+      this.removeAttribute("template-extend");
+    }
     if (value) {
       this.setAttribute("schema", attributeValue(value));
     } else {
       this.removeAttribute("schema");
     }
   }
+  /**
+   * Obtiene el template
+   */
+  get template() {
+    const templateAttr = this.getAttribute("template");
+    if (!templateAttr) return null;
+    if (this.getAttribute("schema")) {
+      console.warn('EasyForm: Cannot use both "template" and "schema" attributes. "schema" will be ignored.');
+      return templateAttr;
+    }
+    return templateAttr;
+  }
+  /**
+   * Establece el template
+   */
+  set template(value) {
+    if (value && this.getAttribute("schema")) {
+      console.warn('EasyForm: Setting "template" will remove "schema" attribute.');
+      this.removeAttribute("schema");
+    }
+    if (value) {
+      this.setAttribute("template", value);
+    } else {
+      this.removeAttribute("template");
+      this.removeAttribute("template-extend");
+    }
+  }
+  /**
+   * Obtiene los campos adicionales para extender el template
+   */
+  get templateExtend() {
+    const extendAttr = this.getAttribute("template-extend");
+    if (!extendAttr) return null;
+    return parseAttributeValue(extendAttr);
+  }
+  /**
+   * Establece los campos adicionales para extender el template
+   */
+  set templateExtend(value) {
+    if (value) {
+      this.setAttribute("template-extend", attributeValue(value));
+    } else {
+      this.removeAttribute("template-extend");
+    }
+  }
   /**
    * Se llama cuando el componente se conecta al DOM
    */
@@ -3289,6 +3853,21 @@ var EasyForm = class extends BrowserHTMLElement {
    */
   attributeChangedCallback(name, oldValue, newValue) {
     if (name === "schema" && newValue !== oldValue) {
+      if (this.getAttribute("template")) {
+        console.warn('EasyForm: "schema" and "template" cannot be used together. Removing "template".');
+        this.removeAttribute("template");
+        this.removeAttribute("template-extend");
+      }
+      this.handleSchemaChange();
+    }
+    if (name === "template" && newValue !== oldValue) {
+      if (this.getAttribute("schema")) {
+        console.warn('EasyForm: "template" and "schema" cannot be used together. Removing "schema".');
+        this.removeAttribute("schema");
+      }
+      this.handleSchemaChange();
+    }
+    if (name === "template-extend" && newValue !== oldValue) {
       this.handleSchemaChange();
     }
     if (name === "initialData" && newValue !== oldValue) {
@@ -3302,13 +3881,34 @@ var EasyForm = class extends BrowserHTMLElement {
    * Maneja el cambio de schema
    */
   handleSchemaChange() {
-    const schema = this.schema;
+    let schema = null;
+    const templateName = this.template;
+    if (templateName) {
+      schema = this.getSchemaFromTemplate(templateName);
+    } else {
+      schema = this.schema;
+    }
     if (schema) {
       const initialData = this.initialData;
       this.stateManager.initializeSchema(schema, initialData || void 0);
       this.render();
     }
   }
+  /**
+   * Obtiene el schema desde un template
+   */
+  getSchemaFromTemplate(templateName) {
+    const baseTemplate = getTemplate(templateName);
+    if (!baseTemplate) {
+      console.error(`EasyForm: Template "${templateName}" not found`);
+      return null;
+    }
+    const additionalFields = this.templateExtend;
+    if (additionalFields && additionalFields.length > 0) {
+      return extendTemplate(templateName, additionalFields);
+    }
+    return baseTemplate;
+  }
   /**
    * Renderiza el formulario
    */
@@ -3318,7 +3918,13 @@ var EasyForm = class extends BrowserHTMLElement {
     }
     this.isRendering = true;
     try {
-      const schema = this.schema;
+      let schema = null;
+      const templateName = this.template;
+      if (templateName) {
+        schema = this.getSchemaFromTemplate(templateName);
+      } else {
+        schema = this.schema;
+      }
       if (!schema) {
         const form = this.shadow.querySelector("form");
         if (form && form.parentNode === this.shadow) {