@dmitryvim/form-builder 0.1.35 → 0.1.38

package/dist/elements.js

@@ -12,12 +12,12 @@ function initializeFormBuilder() {
     const fileUrl = URL.createObjectURL(file);
 
     fileStorage.set(resourceId, {
-      file: file,
+      file,
       url: fileUrl,
       name: file.name,
       type: file.type,
       size: file.size,
-      uploadDate: new Date().toISOString()
+      uploadDate: new Date().toISOString(),
     });
 
     return resourceId;
@@ -27,7 +27,7 @@ function initializeFormBuilder() {
   FormBuilder.setDownloadHandler((resourceId, fileName) => {
     const fileData = fileStorage.get(resourceId);
     if (fileData && fileData.url) {
-      const a = document.createElement('a');
+      const a = document.createElement("a");
       a.href = fileData.url;
       a.download = fileName || fileData.name;
       document.body.appendChild(a);
@@ -53,266 +53,297 @@ const elementSchemas = {
   text: {
     schema: {
       version: "0.3",
-      elements: [{
-        type: "text",
-        key: "username",
-        label: "Username",
-        placeholder: "Enter your username",
-        required: true,
-        minLength: 3,
-        maxLength: 20,
-        pattern: "^[a-zA-Z0-9_]+$",
-        description: "Username must be 3-20 characters, alphanumeric and underscore only",
-        default: "",
-        actions: [{
-          value: "check_availability",
-          label: "Check Availability"
-        }]
-      }]
+      elements: [
+        {
+          type: "text",
+          key: "username",
+          label: "Username",
+          placeholder: "Enter your username",
+          required: true,
+          minLength: 3,
+          maxLength: 20,
+          pattern: "^[a-zA-Z0-9_]+$",
+          description:
+            "Username must be 3-20 characters, alphanumeric and underscore only",
+          default: "",
+          actions: [
+            {
+              value: "check_availability",
+              label: "Check Availability",
+            },
+          ],
+        },
+      ],
     },
-    prefill: { username: "john_doe" }
+    prefill: { username: "john_doe" },
   },
 
-  'text-multiple': {
+  "text-multiple": {
     schema: {
       version: "0.3",
-      elements: [{
-        type: "text",
-        key: "keywords",
-        label: "Keywords",
-        placeholder: "Enter keyword",
-        required: true,
-        multiple: true,
-        minCount: 2,
-        maxCount: 5,
-        minLength: 2,
-        maxLength: 30,
-        description: "Add multiple keywords, minimum 2 required, maximum 5 allowed",
-        default: "example"
-      }]
+      elements: [
+        {
+          type: "text",
+          key: "keywords",
+          label: "Keywords",
+          placeholder: "Enter keyword",
+          required: true,
+          multiple: true,
+          minCount: 2,
+          maxCount: 5,
+          minLength: 2,
+          maxLength: 30,
+          description:
+            "Add multiple keywords, minimum 2 required, maximum 5 allowed",
+          default: "example",
+        },
+      ],
     },
-    prefill: { keywords: ["javascript", "react", "nodejs"] }
+    prefill: { keywords: ["javascript", "react", "nodejs"] },
   },
 
   textarea: {
     schema: {
       version: "0.3",
-      elements: [{
-        type: "textarea",
-        key: "description",
-        label: "Description",
-        placeholder: "Enter detailed description...",
-        rows: 6,
-        required: false,
-        minLength: 10,
-        maxLength: 500,
-        description: "Provide a detailed description of your project"
-      }]
+      elements: [
+        {
+          type: "textarea",
+          key: "description",
+          label: "Description",
+          placeholder: "Enter detailed description...",
+          rows: 6,
+          required: false,
+          minLength: 10,
+          maxLength: 500,
+          description: "Provide a detailed description of your project",
+        },
+      ],
+    },
+    prefill: {
+      description:
+        "This is a sample project description that demonstrates the textarea field with multiple lines of text.",
     },
-    prefill: { description: "This is a sample project description that demonstrates the textarea field with multiple lines of text." }
   },
 
-  'textarea-multiple': {
+  "textarea-multiple": {
     schema: {
       version: "0.3",
-      elements: [{
-        type: "textarea",
-        key: "features",
-        label: "Product Features",
-        placeholder: "Describe a feature...",
-        rows: 4,
-        required: true,
-        multiple: true,
-        minCount: 2,
-        maxCount: 4,
-        minLength: 20,
-        maxLength: 200,
-        description: "List key product features, minimum 2 required"
-      }]
+      elements: [
+        {
+          type: "textarea",
+          key: "features",
+          label: "Product Features",
+          placeholder: "Describe a feature...",
+          rows: 4,
+          required: true,
+          multiple: true,
+          minCount: 2,
+          maxCount: 4,
+          minLength: 20,
+          maxLength: 200,
+          description: "List key product features, minimum 2 required",
+        },
+      ],
     },
     prefill: {
       features: [
         "High-quality materials ensure durability and long-lasting performance",
-        "User-friendly interface makes it easy to operate for all skill levels"
-      ]
-    }
+        "User-friendly interface makes it easy to operate for all skill levels",
+      ],
+    },
   },
 
   number: {
     schema: {
       version: "0.3",
-      elements: [{
-        type: "number",
-        key: "price",
-        label: "Price (USD)",
-        placeholder: "0.00",
-        required: true,
-        min: 0,
-        max: 10000,
-        step: 0.01,
-        default: 99.99,
-        description: "Product price in US dollars"
-      }]
+      elements: [
+        {
+          type: "number",
+          key: "price",
+          label: "Price (USD)",
+          placeholder: "0.00",
+          required: true,
+          min: 0,
+          max: 10000,
+          step: 0.01,
+          default: 99.99,
+          description: "Product price in US dollars",
+        },
+      ],
     },
-    prefill: { price: 149.99 }
+    prefill: { price: 149.99 },
   },
 
-  'number-multiple': {
+  "number-multiple": {
     schema: {
       version: "0.3",
-      elements: [{
-        type: "number",
-        key: "dimensions",
-        label: "Dimensions (cm)",
-        placeholder: "0.0",
-        required: true,
-        multiple: true,
-        minCount: 2,
-        maxCount: 3,
-        min: 0.1,
-        max: 500,
-        step: 0.1,
-        decimals: 1,
-        default: 10.0,
-        description: "Enter product dimensions: width, height, and optionally depth"
-      }]
+      elements: [
+        {
+          type: "number",
+          key: "dimensions",
+          label: "Dimensions (cm)",
+          placeholder: "0.0",
+          required: true,
+          multiple: true,
+          minCount: 2,
+          maxCount: 3,
+          min: 0.1,
+          max: 500,
+          step: 0.1,
+          decimals: 1,
+          default: 10.0,
+          description:
+            "Enter product dimensions: width, height, and optionally depth",
+        },
+      ],
     },
-    prefill: { dimensions: [25.5, 30.0, 15.2] }
+    prefill: { dimensions: [25.5, 30.0, 15.2] },
   },
 
   select: {
     schema: {
       version: "0.3",
-      elements: [{
-        type: "select",
-        key: "category",
-        label: "Product Category",
-        required: true,
-        options: [
-          {value: "electronics", label: "Electronics"},
-          {value: "clothing", label: "Clothing & Apparel"},
-          {value: "books", label: "Books & Media"},
-          {value: "home", label: "Home & Garden"},
-          {value: "sports", label: "Sports & Recreation"}
-        ],
-        default: "electronics",
-        description: "Select the primary category for your product"
-      }]
+      elements: [
+        {
+          type: "select",
+          key: "category",
+          label: "Product Category",
+          required: true,
+          options: [
+            { value: "electronics", label: "Electronics" },
+            { value: "clothing", label: "Clothing & Apparel" },
+            { value: "books", label: "Books & Media" },
+            { value: "home", label: "Home & Garden" },
+            { value: "sports", label: "Sports & Recreation" },
+          ],
+          default: "electronics",
+          description: "Select the primary category for your product",
+        },
+      ],
     },
-    prefill: { category: "books" }
+    prefill: { category: "books" },
   },
 
-  'select-multiple': {
+  "select-multiple": {
     schema: {
       version: "0.3",
-      elements: [{
-        type: "select",
-        key: "tags",
-        label: "Product Tags",
-        required: true,
-        multiple: true,
-        minCount: 1,
-        maxCount: 3,
-        options: [
-          {value: "new", label: "New"},
-          {value: "popular", label: "Popular"},
-          {value: "sale", label: "On Sale"},
-          {value: "featured", label: "Featured"},
-          {value: "limited", label: "Limited Edition"},
-          {value: "bestseller", label: "Bestseller"}
-        ],
-        default: "new",
-        description: "Select relevant tags for the product, maximum 3 allowed"
-      }]
+      elements: [
+        {
+          type: "select",
+          key: "tags",
+          label: "Product Tags",
+          required: true,
+          multiple: true,
+          minCount: 1,
+          maxCount: 3,
+          options: [
+            { value: "new", label: "New" },
+            { value: "popular", label: "Popular" },
+            { value: "sale", label: "On Sale" },
+            { value: "featured", label: "Featured" },
+            { value: "limited", label: "Limited Edition" },
+            { value: "bestseller", label: "Bestseller" },
+          ],
+          default: "new",
+          description:
+            "Select relevant tags for the product, maximum 3 allowed",
+        },
+      ],
     },
-    prefill: { tags: ["popular", "featured"] }
+    prefill: { tags: ["popular", "featured"] },
   },
 
   file: {
     schema: {
       version: "0.3",
-      elements: [{
-        type: "file",
-        key: "avatar",
-        label: "Profile Picture",
-        required: false,
-        accept: {
-          extensions: ["jpg", "jpeg", "png", "gif", "webp"],
-          maxSize: 5242880
+      elements: [
+        {
+          type: "file",
+          key: "avatar",
+          label: "Profile Picture",
+          required: false,
+          accept: {
+            extensions: ["jpg", "jpeg", "png", "gif", "webp"],
+            maxSize: 5242880,
+          },
+          description: "Upload your profile picture (max 5MB, images only)",
         },
-        description: "Upload your profile picture (max 5MB, images only)"
-      }]
+      ],
     },
-    prefill: { avatar: null }
+    prefill: { avatar: null },
   },
 
   files: {
     schema: {
       version: "0.3",
-      elements: [{
-        type: "files",
-        key: "attachments",
-        label: "Project Attachments",
-        required: false,
-        min: 1,
-        max: 10,
-        accept: {
-          extensions: ["jpg", "png", "pdf", "doc", "docx", "mp4"],
-          maxSize: 10485760
+      elements: [
+        {
+          type: "files",
+          key: "attachments",
+          label: "Project Attachments",
+          required: false,
+          min: 1,
+          max: 10,
+          accept: {
+            extensions: ["jpg", "png", "pdf", "doc", "docx", "mp4"],
+            maxSize: 10485760,
+          },
+          description: "Upload project files (max 10MB each, 1-10 files)",
         },
-        description: "Upload project files (max 10MB each, 1-10 files)"
-      }]
+      ],
     },
-    prefill: { attachments: [] }
+    prefill: { attachments: [] },
   },
 
   group: {
     schema: {
       version: "0.3",
-      elements: [{
-        type: "group",
-        key: "contacts",
-        label: "Contact Information",
-        repeat: {
-          min: 1,
-          max: 5
-        },
-        elements: [
-          {
-            type: "text",
-            key: "name",
-            label: "Contact Name",
-            required: true
+      elements: [
+        {
+          type: "group",
+          key: "contacts",
+          label: "Contact Information",
+          repeat: {
+            min: 1,
+            max: 5,
           },
-          {
-            type: "text",
-            key: "email",
-            label: "Email Address",
-            required: true,
-            pattern: "^[^@]+@[^@]+\\.[^@]+$"
-          },
-          {
-            type: "select",
-            key: "role",
-            label: "Role",
-            options: [
-              {value: "primary", label: "Primary Contact"},
-              {value: "secondary", label: "Secondary Contact"},
-              {value: "technical", label: "Technical Contact"}
-            ],
-            default: "primary"
-          }
-        ],
-        description: "Add contact information for your project"
-      }]
+          elements: [
+            {
+              type: "text",
+              key: "name",
+              label: "Contact Name",
+              required: true,
+            },
+            {
+              type: "text",
+              key: "email",
+              label: "Email Address",
+              required: true,
+              pattern: "^[^@]+@[^@]+\\.[^@]+$",
+            },
+            {
+              type: "select",
+              key: "role",
+              label: "Role",
+              options: [
+                { value: "primary", label: "Primary Contact" },
+                { value: "secondary", label: "Secondary Contact" },
+                { value: "technical", label: "Technical Contact" },
+              ],
+              default: "primary",
+            },
+          ],
+          description: "Add contact information for your project",
+        },
+      ],
     },
     prefill: {
       contacts: [
         { name: "John Smith", email: "john@company.com", role: "primary" },
-        { name: "Jane Doe", email: "jane@company.com", role: "technical" }
-      ]
-    }
-  }
+        { name: "Jane Doe", email: "jane@company.com", role: "technical" },
+      ],
+    },
+  },
 };
 
 // Update preview for an element
@@ -321,13 +352,15 @@ function updatePreview(elementType) {
   if (!elementData) return;
 
   const previewContainer = document.getElementById(`${elementType}-preview`);
-  const readonlyToggle = document.querySelector(`input[data-element="${elementType}"]`);
+  const readonlyToggle = document.querySelector(
+    `input[data-element="${elementType}"]`,
+  );
 
   if (!previewContainer) return;
 
   // Set form root and mode
   FormBuilder.setFormRoot(previewContainer);
-  FormBuilder.setMode(readonlyToggle?.checked ? 'readonly' : 'edit');
+  FormBuilder.setMode(readonlyToggle?.checked ? "readonly" : "edit");
 
   // Render the form
   FormBuilder.renderForm(elementData.schema, elementData.prefill);
@@ -353,7 +386,7 @@ function applySchemaChanges(elementType) {
     elementSchemas[elementType].schema.elements[0] = elementSchema;
     updatePreview(elementType);
   } catch (error) {
-    console.error('Invalid JSON in schema:', error);
+    console.error("Invalid JSON in schema:", error);
     // Reset to original if invalid
     updateSchemaTextarea(elementType);
   }
@@ -361,59 +394,62 @@ function applySchemaChanges(elementType) {
 
 // Initialize navigation
 function initializeNavigation() {
-  const navItems = document.querySelectorAll('.nav-item');
+  const navItems = document.querySelectorAll(".nav-item");
 
   // Set initial active state
   if (navItems.length > 0) {
-    navItems[0].classList.add('active');
+    navItems[0].classList.add("active");
   }
 
-  navItems.forEach(item => {
-    item.addEventListener('click', (e) => {
+  navItems.forEach((item) => {
+    item.addEventListener("click", (e) => {
       e.preventDefault();
 
       // Remove active class from all items
-      navItems.forEach(nav => nav.classList.remove('active'));
+      navItems.forEach((nav) => nav.classList.remove("active"));
 
       // Add active class to clicked item
-      item.classList.add('active');
+      item.classList.add("active");
 
       // Scroll to element
-      const elementId = item.getAttribute('href').substring(1);
+      const elementId = item.getAttribute("href").substring(1);
       const element = document.getElementById(elementId);
       if (element) {
-        element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        element.scrollIntoView({ behavior: "smooth", block: "start" });
       }
     });
   });
 
   // Handle scroll-based active states
-  const sections = document.querySelectorAll('.element-section');
-  const observer = new IntersectionObserver((entries) => {
-    entries.forEach(entry => {
-      if (entry.isIntersecting) {
-        const id = entry.target.id;
-        navItems.forEach(nav => {
-          nav.classList.remove('active');
-          if (nav.getAttribute('href') === `#${id}`) {
-            nav.classList.add('active');
-          }
-        });
-      }
-    });
-  }, {
-    rootMargin: '-20% 0% -20% 0%',
-    threshold: 0.1
-  });
+  const sections = document.querySelectorAll(".element-section");
+  const observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          const id = entry.target.id;
+          navItems.forEach((nav) => {
+            nav.classList.remove("active");
+            if (nav.getAttribute("href") === `#${id}`) {
+              nav.classList.add("active");
+            }
+          });
+        }
+      });
+    },
+    {
+      rootMargin: "-20% 0% -20% 0%",
+      threshold: 0.1,
+    },
+  );
 
-  sections.forEach(section => {
+  sections.forEach((section) => {
     observer.observe(section);
   });
 }
 
 // Initialize all elements
 function initializeElements() {
-  Object.keys(elementSchemas).forEach(elementType => {
+  Object.keys(elementSchemas).forEach((elementType) => {
     // Update textarea with schema
     updateSchemaTextarea(elementType);
 
@@ -421,7 +457,7 @@ function initializeElements() {
     const textarea = document.getElementById(`${elementType}-schema`);
     if (textarea) {
       let debounceTimer;
-      textarea.addEventListener('input', () => {
+      textarea.addEventListener("input", () => {
         clearTimeout(debounceTimer);
         debounceTimer = setTimeout(() => {
           applySchemaChanges(elementType);
@@ -430,9 +466,11 @@ function initializeElements() {
     }
 
     // Setup readonly toggle
-    const readonlyToggle = document.querySelector(`input[data-element="${elementType}"]`);
+    const readonlyToggle = document.querySelector(
+      `input[data-element="${elementType}"]`,
+    );
     if (readonlyToggle) {
-      readonlyToggle.addEventListener('change', () => {
+      readonlyToggle.addEventListener("change", () => {
         updatePreview(elementType);
       });
     }
@@ -443,8 +481,8 @@ function initializeElements() {
 }
 
 // Initialize everything when DOM is loaded
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener("DOMContentLoaded", () => {
   initializeFormBuilder();
   initializeNavigation();
   initializeElements();
-});
+});