@dmitryvim/form-builder 0.1.31 → 0.1.34

package/dist/demo.js

@@ -25,18 +25,19 @@ const EXAMPLE_SCHEMA = {
       ],
     },
     {
-      type: "files",
+      type: "file",
       key: "assets",
       label: "Другие изображения",
       description:
         "Additional images that provide context, show different angles, or demonstrate product usage. These will be used to enhance the infographic composition.",
       required: false,
+      multiple: true,
+      minCount: 0,
+      maxCount: 10,
       accept: {
         extensions: ["png", "jpg", "gif"],
         mime: ["image/png", "image/jpeg", "image/gif"],
       },
-      minCount: 0,
-      maxCount: 10,
       maxSizeMB: 5,
     },
     {
@@ -47,6 +48,9 @@ const EXAMPLE_SCHEMA = {
       description:
         "The exact product name as it should appear on the infographic. Use the official product name without marketing terms or decorative elements.",
       required: true,
+      multiple: true,
+      minCount: 1,
+      maxCount: 4,
       minLength: 1,
       maxLength: 100,
       pattern: "^[A-Za-zА-Яа-я0-9 _*-]+$",
@@ -97,6 +101,69 @@ const EXAMPLE_SCHEMA = {
       step: 0.01,
       default: 0.5,
     },
+    {
+      type: "text",
+      key: "tags",
+      label: "Теги товара",
+      description: "Добавьте ключевые теги для лучшего описания товара",
+      placeholder: "Введите тег",
+      required: false,
+      multiple: true,
+      minCount: 1,
+      maxCount: 5,
+      minLength: 2,
+      maxLength: 20,
+      default: "popular",
+    },
+    {
+      type: "textarea",
+      key: "features",
+      label: "Особенности товара",
+      description: "Опишите ключевые особенности и преимущества товара",
+      placeholder: "Опишите особенность...",
+      required: false,
+      multiple: true,
+      minCount: 2,
+      maxCount: 4,
+      minLength: 10,
+      maxLength: 200,
+      rows: 3,
+    },
+    {
+      type: "number",
+      key: "dimensions",
+      label: "Размеры (см)",
+      description:
+        "Укажите размеры товара в сантиметрах: длина, ширина, высота",
+      placeholder: "0",
+      required: false,
+      multiple: true,
+      minCount: 2,
+      maxCount: 3,
+      min: 0,
+      max: 500,
+      step: 0.1,
+      decimals: 1,
+    },
+    {
+      type: "select",
+      key: "colors",
+      label: "Доступные цвета",
+      description: "Выберите доступные цветовые варианты товара",
+      required: false,
+      multiple: true,
+      minCount: 1,
+      maxCount: 3,
+      options: [
+        { value: "white", label: "Белый" },
+        { value: "black", label: "Черный" },
+        { value: "red", label: "Красный" },
+        { value: "blue", label: "Синий" },
+        { value: "green", label: "Зеленый" },
+        { value: "gray", label: "Серый" },
+      ],
+      default: "white",
+    },
     {
       type: "file",
       key: "video",
@@ -111,12 +178,14 @@ const EXAMPLE_SCHEMA = {
       maxSizeMB: 50,
     },
     {
-      type: "group",
+      type: "container",
       key: "slides",
       label: "Слайды",
       description:
         "Additional slides to showcase different aspects of your product. Each slide can have its own main image and decorative elements to create a comprehensive infographic presentation.",
-      repeat: { min: 1, max: 5 },
+      multiple: true,
+      minCount: 1,
+      maxCount: 5,
       elements: [
         {
           type: "text",
@@ -140,6 +209,14 @@ const EXAMPLE_SCHEMA = {
         },
       ],
     },
+    {
+      type: "text",
+      key: "session_id",
+      label: "Session ID",
+      description: "Hidden session identifier for tracking purposes",
+      hidden: true,
+      default: "session_" + Math.random().toString(36).substr(2, 9),
+    },
   ],
 };
 
@@ -252,10 +329,10 @@ let actionLabelMap = new Map();
 // Build action value -> label mapping from schema for efficient lookup
 function buildActionLabelMap(schema) {
   const map = new Map();
-  
+
   function processElements(elements) {
     if (!Array.isArray(elements)) return;
-    
+
     for (const element of elements) {
       if (element.actions && Array.isArray(element.actions)) {
         for (const action of element.actions) {
@@ -264,18 +341,18 @@ function buildActionLabelMap(schema) {
           }
         }
       }
-      
+
       // Process nested group elements
       if (element.elements && Array.isArray(element.elements)) {
         processElements(element.elements);
       }
     }
   }
-  
+
   if (schema && schema.elements) {
     processElements(schema.elements);
   }
-  
+
   return map;
 }
 
@@ -366,7 +443,7 @@ function setupFormBuilder() {
     const actionLabel = actionLabelMap.get(value) || value; // fallback to value
 
     console.log("Action clicked:", { label: actionLabel, value });
-    
+
     // Show message to user (compatible with all environments)
     if (typeof window !== "undefined" && window.alert) {
       window.alert(`${actionLabel} clicked: ${value}`);