@dmitryvim/form-builder 0.1.31 → 0.1.33

package/dist/elements.js

@@ -0,0 +1,450 @@
+// Elements Documentation Page Logic
+
+// Initialize FormBuilder with demo handlers
+function initializeFormBuilder() {
+  // Simple in-memory file storage for demo
+  const fileStorage = new Map();
+  let fileCounter = 0;
+
+  // Mock upload handler
+  FormBuilder.setUploadHandler(async (file) => {
+    const resourceId = `file-${++fileCounter}`;
+    const fileUrl = URL.createObjectURL(file);
+
+    fileStorage.set(resourceId, {
+      file: file,
+      url: fileUrl,
+      name: file.name,
+      type: file.type,
+      size: file.size,
+      uploadDate: new Date().toISOString()
+    });
+
+    return resourceId;
+  });
+
+  // Mock download handler
+  FormBuilder.setDownloadHandler((resourceId, fileName) => {
+    const fileData = fileStorage.get(resourceId);
+    if (fileData && fileData.url) {
+      const a = document.createElement('a');
+      a.href = fileData.url;
+      a.download = fileName || fileData.name;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+    }
+  });
+
+  // Mock thumbnail handler
+  FormBuilder.setThumbnailHandler((resourceId) => {
+    const fileData = fileStorage.get(resourceId);
+    return fileData ? fileData.url : null;
+  });
+
+  // Mock action handler
+  FormBuilder.setActionHandler((actionValue) => {
+    alert(`Action triggered: ${actionValue}`);
+  });
+}
+
+// Element data and demo schemas
+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"
+        }]
+      }]
+    },
+    prefill: { username: "john_doe" }
+  },
+
+  '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"
+      }]
+    },
+    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"
+      }]
+    },
+    prefill: { description: "This is a sample project description that demonstrates the textarea field with multiple lines of text." }
+  },
+
+  '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"
+      }]
+    },
+    prefill: {
+      features: [
+        "High-quality materials ensure durability and long-lasting performance",
+        "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"
+      }]
+    },
+    prefill: { price: 149.99 }
+  },
+
+  '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"
+      }]
+    },
+    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"
+      }]
+    },
+    prefill: { category: "books" }
+  },
+
+  '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"
+      }]
+    },
+    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
+        },
+        description: "Upload your profile picture (max 5MB, images only)"
+      }]
+    },
+    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
+        },
+        description: "Upload project files (max 10MB each, 1-10 files)"
+      }]
+    },
+    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
+          },
+          {
+            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" }
+      ]
+    }
+  }
+};
+
+// Update preview for an element
+function updatePreview(elementType) {
+  const elementData = elementSchemas[elementType];
+  if (!elementData) return;
+
+  const previewContainer = document.getElementById(`${elementType}-preview`);
+  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');
+
+  // Render the form
+  FormBuilder.renderForm(elementData.schema, elementData.prefill);
+}
+
+// Update schema textarea from element data
+function updateSchemaTextarea(elementType) {
+  const elementData = elementSchemas[elementType];
+  const textarea = document.getElementById(`${elementType}-schema`);
+
+  if (elementData && textarea) {
+    textarea.value = JSON.stringify(elementData.schema.elements[0], null, 2);
+  }
+}
+
+// Apply schema changes from textarea
+function applySchemaChanges(elementType) {
+  const textarea = document.getElementById(`${elementType}-schema`);
+  if (!textarea) return;
+
+  try {
+    const elementSchema = JSON.parse(textarea.value);
+    elementSchemas[elementType].schema.elements[0] = elementSchema;
+    updatePreview(elementType);
+  } catch (error) {
+    console.error('Invalid JSON in schema:', error);
+    // Reset to original if invalid
+    updateSchemaTextarea(elementType);
+  }
+}
+
+// Initialize navigation
+function initializeNavigation() {
+  const navItems = document.querySelectorAll('.nav-item');
+
+  // Set initial active state
+  if (navItems.length > 0) {
+    navItems[0].classList.add('active');
+  }
+
+  navItems.forEach(item => {
+    item.addEventListener('click', (e) => {
+      e.preventDefault();
+
+      // Remove active class from all items
+      navItems.forEach(nav => nav.classList.remove('active'));
+
+      // Add active class to clicked item
+      item.classList.add('active');
+
+      // Scroll to element
+      const elementId = item.getAttribute('href').substring(1);
+      const element = document.getElementById(elementId);
+      if (element) {
+        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
+  });
+
+  sections.forEach(section => {
+    observer.observe(section);
+  });
+}
+
+// Initialize all elements
+function initializeElements() {
+  Object.keys(elementSchemas).forEach(elementType => {
+    // Update textarea with schema
+    updateSchemaTextarea(elementType);
+
+    // Setup textarea change listener
+    const textarea = document.getElementById(`${elementType}-schema`);
+    if (textarea) {
+      let debounceTimer;
+      textarea.addEventListener('input', () => {
+        clearTimeout(debounceTimer);
+        debounceTimer = setTimeout(() => {
+          applySchemaChanges(elementType);
+        }, 1000); // 1 second delay
+      });
+    }
+
+    // Setup readonly toggle
+    const readonlyToggle = document.querySelector(`input[data-element="${elementType}"]`);
+    if (readonlyToggle) {
+      readonlyToggle.addEventListener('change', () => {
+        updatePreview(elementType);
+      });
+    }
+
+    // Initial preview render
+    updatePreview(elementType);
+  });
+}
+
+// Initialize everything when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+  initializeFormBuilder();
+  initializeNavigation();
+  initializeElements();
+});