Range component def

jalagari · Apr 17, 2024 · 450d68e · 450d68e
1 parent 8865871
commit 450d68e
Show file tree

Hide file tree

Showing 4 changed files with 227 additions and 0 deletions.
diff --git a/blocks/form/functions.js b/blocks/form/functions.js
@@ -28,5 +28,15 @@ function days(endDate, startDate) {
   return Math.floor(diffInMs / (1000 * 60 * 60 * 24));
 }
 
+/**
+ * 
+ * @param {*} arg1 
+ * @returns 
+ */
+function demoFun(arg1) {
+  return 'demo';
+
+}
+
 // eslint-disable-next-line import/prefer-default-export
 export { getFullName, days };
diff --git a/component-definition.json b/component-definition.json
@@ -106,6 +106,27 @@
             }
           }
         },
+        {
+          "title": "Range",
+          "id": "range",
+          "plugins": {
+            "xwalk": {
+              "page": {
+                "resourceType": "core/fd/components/form/numberinput/v1/numberinput",
+                "template": {
+                  "jcr:title": "Range Input",
+                  "fieldType": "range",
+                  "fd:additionalCustomPropertyKeys" : [
+                    "edsType"
+                  ],
+                  "fd:additionalCustomPropertyValues" : [
+                    "range"
+                  ]
+                }
+              }
+            }
+          }
+        },
         {
           "title": "Date Picker",
           "id": "date-input",

diff --git a/component-filters.json b/component-filters.json
@@ -43,6 +43,7 @@
       "plain-text",
       "text-input",
       "number-input",
+      "range",
       "date-input",
       "panel",
       "checkbox",

diff --git a/component-models.json b/component-models.json
@@ -1144,6 +1144,201 @@
             }
         ]
     },
+    {
+        "id": "range",
+        "fields": [
+            {
+                "component": "container",
+                "name": "basic",
+                "label": "Basic",
+                "collapsible": false,
+                "fields": [
+                    {
+                        "component": "text",
+                        "name": "name",
+                        "label": "Name",
+                        "valueType": "string",
+                        "required": true
+                    },
+                    {
+                        "component": "text",
+                        "name": "jcr:title",
+                        "label": "Label",
+                        "valueType": "string"
+                    },
+                    {
+                        "component": "text",
+                        "name": "placeholder",
+                        "label": "Placeholder text",
+                        "valueType": "string"
+                    },
+                    {
+                        "component": "text",
+                        "name": "dataRef",
+                        "label": "Bind reference",
+                        "valueType": "string"
+                    },
+                    {
+                        "component": "boolean",
+                        "name": "visible",
+                        "label": "Show Component",
+                        "valueType": "boolean",
+                        "value": true
+                    },
+                    {
+                        "component": "boolean",
+                        "name": "enabled",
+                        "label": "Enable Component",
+                        "valueType": "boolean",
+                        "value": true
+                    },
+                    {
+                        "component": "boolean",
+                        "name": "readOnly",
+                        "label": "Read-only",
+                        "valueType": "boolean"
+                    },
+                    {
+                        "component": "text",
+                        "name": "default",
+                        "label": "Default Value",
+                        "valueType": "string"
+                    },
+                    {
+                        "component": "boolean",
+                        "name": "unboundFormElement",
+                        "label": "Mark as Unbound Form Element",
+                        "valueType": "boolean"
+                    }
+                ]
+            },
+            {
+                "component": "container",
+                "name": "help",
+                "label": "Help Content",
+                "collapsible": true,
+                "fields": [
+                    {
+                        "component": "richtext",
+                        "name": "description",
+                        "label": "Help text",
+                        "valueType": "string"
+                    },
+                    {
+                        "component": "richtext",
+                        "name": "tooltip",
+                        "label": "Short description",
+                        "valueType": "string"
+                    }
+                ]
+            },
+            {
+                "component": "container",
+                "name": "validation",
+                "label": "Validation",
+                "collapsible": true,
+                "fields": [
+                    {
+                        "component": "boolean",
+                        "name": "required",
+                        "label": "Required",
+                        "valueType": "boolean"
+                    },
+                    {
+                        "component": "number",
+                        "name": "minimum",
+                        "label": "Minimum Value",
+                        "valueType": "number",
+                        "description": "Minimum length of the text in the field"
+                    },
+                    {
+                        "component": "number",
+                        "name": "maximum",
+                        "label": "Maximum Value",
+                        "valueType": "number",
+                        "description": "Maximum length of the text in the field"
+                    }
+                ]
+            },
+            {
+                "component": "container",
+                "name": "custom",
+                "label": "Custom Properties",
+                "collapsible": true,
+                "fields": [
+                    {
+                        "component": "select",
+                        "name": "fd:additionalCustomPropertyKeys",
+                        "label": "Custom Property Key",
+                        "valueType": "string"  ,
+                        "options": [
+                            {
+                                "name": "Col Span",
+                                "value": "colspan"
+                            }
+                        ]              
+                    },
+                    {
+                        "component": "select",
+                        "label": "Col Span",
+                        "name": "fd:additionalCustomPropertyValues",
+                        "condition": { "==": [{ "var": "fd:additionalCustomPropertyKeys" }, "colspan"] },
+                        "valueType": "string",
+                        "options": [
+                            {
+                                "name": "1",
+                                "value": "1"
+                            },
+                            {
+                                "name": "2",
+                                "value": "2"
+                            },
+                            {
+                                "name": "3",
+                                "value": "3"
+                            },
+                            {
+                                "name": "4",
+                                "value": "4"
+                            },
+                            {
+                                "name": "5",
+                                "value": "5"
+                            },
+                            {
+                                "name": "6",
+                                "value": "6"
+                            },
+                            {
+                                "name": "7",
+                                "value": "7"
+                            },
+                            {
+                                "name": "8",
+                                "value": "8"
+                            },
+                            {
+                                "name": "9",
+                                "value": "9"
+                            },
+                            {
+                                "name": "10",
+                                "value": "10"
+                            },
+                            {
+                                "name": "11",
+                                "value": "11"
+                            },
+                            {
+                                "name": "12",
+                                "value": "12"
+                            }
+                        ]
+                    }
+                ]
+            }
+        ]
+    },
     {
         "id": "checkbox",
         "fields": [