@dmitryvim/form-builder 0.1.42 → 0.2.0

package/dist/elements.js

@@ -1,488 +0,0 @@
-// 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,
-      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();
-});