From c7e6576644cedb127b61bb7b0c555d64c84a266b Mon Sep 17 00:00:00 2001 From: ruben Reusser Date: Wed, 12 Aug 2020 12:05:29 -0700 Subject: [PATCH 01/32] introduction of a forms component --- .../com/themecleanflex/models/FormModel.java | 528 ++++++++++++++++++ fragments/form/hatch.js | 16 + fragments/form/model.json | 21 + fragments/form/sample-contact.json | 7 + fragments/form/sample.json | 7 + fragments/form/template.html | 6 + fragments/form/template.vue | 34 ++ .../components/form/.content.xml | 11 + .../components/form/dialog.json | 257 +++++++++ .../components/form/template.vue | 39 ++ .../components/page/renderer.html | 4 + .../themecleanflex/templates/.content.xml | 3 +- 12 files changed, 932 insertions(+), 1 deletion(-) create mode 100644 core/src/main/java/com/themecleanflex/models/FormModel.java create mode 100644 fragments/form/hatch.js create mode 100644 fragments/form/model.json create mode 100644 fragments/form/sample-contact.json create mode 100644 fragments/form/sample.json create mode 100644 fragments/form/template.html create mode 100644 fragments/form/template.vue create mode 100644 ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/form/.content.xml create mode 100644 ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/form/dialog.json create mode 100644 ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/form/template.vue diff --git a/core/src/main/java/com/themecleanflex/models/FormModel.java b/core/src/main/java/com/themecleanflex/models/FormModel.java new file mode 100644 index 000000000..1541ffc43 --- /dev/null +++ b/core/src/main/java/com/themecleanflex/models/FormModel.java @@ -0,0 +1,528 @@ +package com.themecleanflex.models; + +import com.peregrine.nodetypes.models.AbstractComponent; +import com.peregrine.nodetypes.models.IComponent; +import com.peregrine.nodetypes.models.Container; +import org.apache.sling.api.resource.Resource; +import org.apache.sling.models.annotations.Default; +import org.apache.sling.models.annotations.DefaultInjectionStrategy; +import org.apache.sling.models.annotations.Exporter; +import org.apache.sling.models.annotations.Model; +import java.util.List; + +import javax.inject.Inject; +import javax.inject.Named; + +/* + //GEN[:DATA + { + "definitions": { + "Form": { + "type": "object", + "x-type": "component", + "properties": { + "schema": { + "type": "string", + "x-source": "inject", + "x-form-label": "Form Model", + "x-form-type": "textarea", + "x-form-max": "16000" + }, + "bgref": { + "x-form-type": "reference", + "type": "object", + "x-type": "component", + "properties": { + "anchorname": { + "type": "string", + "x-source": "inject", + "x-form-label": "Anchor Name", + "x-form-type": "text" + }, + "extraclasses": { + "type": "string", + "x-source": "inject", + "x-form-label": "Additonal Classes", + "x-form-type": "text" + }, + "htmlelement": { + "type": "string", + "x-source": "inject", + "x-form-label": "Semantic Element", + "x-form-type": "materialselect", + "x-default": "section", + "properties": { + "section": { + "x-form-name": "section", + "x-form-value": "section" + }, + "article": { + "x-form-name": "article", + "x-form-value": "article" + }, + "main": { + "x-form-name": "main", + "x-form-value": "main" + }, + "div": { + "x-form-name": "div", + "x-form-value": "div" + }, + "header": { + "x-form-name": "header", + "x-form-value": "header" + }, + "nav": { + "x-form-name": "nav", + "x-form-value": "nav" + }, + "footer": { + "x-form-name": "footer", + "x-form-value": "footer" + } + } + }, + "colorscheme": { + "type": "string", + "x-source": "inject", + "x-form-label": "Block Color Scheme", + "x-form-type": "materialradio", + "x-default": "", + "properties": { + "none": { + "x-form-name": "None", + "x-form-value": "" + }, + "light": { + "x-form-name": "Light", + "x-form-value": "light" + }, + "dark": { + "x-form-name": "Dark", + "x-form-value": "dark" + } + } + }, + "custombackground": { + "type": "string", + "x-source": "inject", + "x-form-label": "Custom Background", + "x-form-type": "materialswitch", + "x-default": "false" + }, + "backgroundtype": { + "type": "string", + "x-source": "inject", + "x-form-label": "Background Type", + "x-form-type": "materialradio", + "x-form-visible": "model.custombackground == 'true'", + "properties": { + "color": { + "x-form-name": "Color", + "x-form-value": "color" + }, + "gradient": { + "x-form-name": "Gradient", + "x-form-value": "gradient" + }, + "image": { + "x-form-name": "Image", + "x-form-value": "image" + }, + "video": { + "x-form-name": "Video", + "x-form-value": "video" + } + } + }, + "bgvideo": { + "type": "string", + "x-source": "inject", + "x-form-label": "Background Video", + "x-form-type": "pathbrowser", + "x-form-visible": "model.backgroundtype == 'video' and model.custombackground == 'true'", + "x-default": "https://www.youtube.com/embed/Ju86mknumYM", + "x-form-browserRoot": "/content/themecleanflex/assets" + }, + "bgimage": { + "type": "string", + "x-source": "inject", + "x-form-label": "Background Image", + "x-form-type": "pathbrowser", + "x-form-visible": "model.backgroundtype == 'image' and model.custombackground == 'true'", + "x-form-browserRoot": "/content/themecleanflex/assets" + }, + "bgxposition": { + "type": "string", + "x-source": "inject", + "x-form-label": "Background X Position", + "x-form-type": "materialrange", + "x-form-min": 0, + "x-form-max": 100, + "x-form-visible": "model.backgroundtype == 'image' and model.custombackground == 'true'", + "x-default": "50" + }, + "bgyposition": { + "type": "string", + "x-source": "inject", + "x-form-label": "Background Y Position", + "x-form-type": "materialrange", + "x-form-min": 0, + "x-form-max": 100, + "x-form-visible": "model.backgroundtype == 'image' and model.custombackground == 'true'", + "x-default": "50" + }, + "bgsize": { + "type": "string", + "x-source": "inject", + "x-form-label": "Background Size Style", + "x-form-type": "text", + "x-default": "cover" + }, + "overlay": { + "type": "string", + "x-source": "inject", + "x-form-label": "Overlay", + "x-form-type": "materialswitch", + "x-form-visible": "model.backgroundtype == 'image' and model.custombackground == 'true'" + }, + "overlaycolor": { + "type": "string", + "x-source": "inject", + "x-form-label": "Overlay Color", + "x-form-type": "color", + "x-form-visible": "model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'", + "x-default": "#ffffff" + }, + "overlayopacity": { + "type": "string", + "x-source": "inject", + "x-form-label": "Overlay opacity", + "x-form-type": "materialrange", + "x-form-min": 0, + "x-form-max": 100, + "x-form-visible": "model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'", + "x-default": "50" + }, + "bgcolor": { + "type": "string", + "x-source": "inject", + "x-form-label": "Background Color", + "x-form-type": "color", + "x-form-visible": "(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'", + "x-default": "#ffffff" + }, + "color2": { + "type": "string", + "x-source": "inject", + "x-form-label": "Color 2", + "x-form-type": "color", + "x-form-visible": "model.backgroundtype == 'gradient' and model.custombackground == 'true'", + "x-default": "#c0c0c0" + }, + "blockwidth": { + "type": "string", + "x-source": "inject", + "x-form-label": "Block Width", + "x-form-type": "materialradio", + "x-default": "default", + "properties": { + "default": { + "x-form-name": "Default", + "x-form-value": "default" + }, + "full": { + "x-form-name": "Full Width", + "x-form-value": "full" + }, + "article": { + "x-form-name": "Article Width", + "x-form-value": "article" + } + } + }, + "fullheight": { + "type": "string", + "x-source": "inject", + "x-form-label": "Full Height", + "x-form-type": "materialswitch", + "x-default": "false" + }, + "toppadding": { + "type": "string", + "x-source": "inject", + "x-form-label": "Top Padding", + "x-form-type": "materialrange", + "x-form-min": 0, + "x-form-max": 300, + "x-form-visible": "model.fullheight != 'true'" + }, + "bottompadding": { + "type": "string", + "x-source": "inject", + "x-form-label": "Bottom Padding", + "x-form-type": "materialrange", + "x-form-min": 0, + "x-form-max": 300, + "x-form-visible": "model.fullheight != 'true'" + }, + "contentname": { + "type": "string", + "x-source": "inject", + "x-form-label": "Content Name", + "x-form-type": "text" + } + } + } + } + } + }, + "name": "Form", + "componentPath": "themecleanflex/components/form", + "package": "com.themecleanflex.models", + "modelName": "Form", + "classNameParent": "AbstractComponent" +} +//GEN] +*/ + +//GEN[:DEF +@Model( + adaptables = Resource.class, + resourceType = "themecleanflex/components/form", + defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL, + adapters = IComponent.class +) +@Exporter( + name = "jackson", + extensions = "json" +) + +//GEN] +public class FormModel extends AbstractComponent { + + public FormModel(Resource r) { super(r); } + + //GEN[:INJECT + /* {"type":"string","x-source":"inject","x-form-label":"Form Model","x-form-type":"textarea","x-form-max":"16000"} */ + @Inject + private String schema; + + /* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-type":"text"} */ + @Inject + private String anchorname; + + /* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-type":"text"} */ + @Inject + private String extraclasses; + + /* {"type":"string","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */ + @Inject + @Default(values ="section") + private String htmlelement; + + /* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */ + @Inject + @Default(values ="") + private String colorscheme; + + /* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-type":"materialswitch","x-default":"false"} */ + @Inject + @Default(values ="false") + private String custombackground; + + /* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */ + @Inject + private String backgroundtype; + + /* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */ + @Inject + @Default(values ="https://www.youtube.com/embed/Ju86mknumYM") + private String bgvideo; + + /* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */ + @Inject + private String bgimage; + + /* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */ + @Inject + @Default(values ="50") + private String bgxposition; + + /* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */ + @Inject + @Default(values ="50") + private String bgyposition; + + /* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-default":"cover"} */ + @Inject + @Default(values ="cover") + private String bgsize; + + /* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */ + @Inject + private String overlay; + + /* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */ + @Inject + @Default(values ="#ffffff") + private String overlaycolor; + + /* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */ + @Inject + @Default(values ="50") + private String overlayopacity; + + /* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */ + @Inject + @Default(values ="#ffffff") + private String bgcolor; + + /* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */ + @Inject + @Default(values ="#c0c0c0") + private String color2; + + /* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */ + @Inject + @Default(values ="default") + private String blockwidth; + + /* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-default":"false"} */ + @Inject + @Default(values ="false") + private String fullheight; + + /* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-visible":"model.fullheight != 'true'"} */ + @Inject + private String toppadding; + + /* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-visible":"model.fullheight != 'true'"} */ + @Inject + private String bottompadding; + + /* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-type":"text"} */ + @Inject + private String contentname; + + +//GEN] + + //GEN[:GETTERS + /* {"type":"string","x-source":"inject","x-form-label":"Form Model","x-form-type":"textarea","x-form-max":"16000"} */ + public String getSchema() { + return schema; + } + + /* {"type":"string","x-source":"inject","x-form-label":"Anchor Name","x-form-type":"text"} */ + public String getAnchorname() { + return anchorname; + } + + /* {"type":"string","x-source":"inject","x-form-label":"Additonal Classes","x-form-type":"text"} */ + public String getExtraclasses() { + return extraclasses; + } + + /* {"type":"string","x-source":"inject","x-form-label":"Semantic Element","x-form-type":"materialselect","x-default":"section","properties":{"section":{"x-form-name":"section","x-form-value":"section"},"article":{"x-form-name":"article","x-form-value":"article"},"main":{"x-form-name":"main","x-form-value":"main"},"div":{"x-form-name":"div","x-form-value":"div"},"header":{"x-form-name":"header","x-form-value":"header"},"nav":{"x-form-name":"nav","x-form-value":"nav"},"footer":{"x-form-name":"footer","x-form-value":"footer"}}} */ + public String getHtmlelement() { + return htmlelement; + } + + /* {"type":"string","x-source":"inject","x-form-label":"Block Color Scheme","x-form-type":"materialradio","x-default":"","properties":{"none":{"x-form-name":"None","x-form-value":""},"light":{"x-form-name":"Light","x-form-value":"light"},"dark":{"x-form-name":"Dark","x-form-value":"dark"}}} */ + public String getColorscheme() { + return colorscheme; + } + + /* {"type":"string","x-source":"inject","x-form-label":"Custom Background","x-form-type":"materialswitch","x-default":"false"} */ + public String getCustombackground() { + return custombackground; + } + + /* {"type":"string","x-source":"inject","x-form-label":"Background Type","x-form-type":"materialradio","x-form-visible":"model.custombackground == 'true'","properties":{"color":{"x-form-name":"Color","x-form-value":"color"},"gradient":{"x-form-name":"Gradient","x-form-value":"gradient"},"image":{"x-form-name":"Image","x-form-value":"image"},"video":{"x-form-name":"Video","x-form-value":"video"}}} */ + public String getBackgroundtype() { + return backgroundtype; + } + + /* {"type":"string","x-source":"inject","x-form-label":"Background Video","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'video' and model.custombackground == 'true'","x-default":"https://www.youtube.com/embed/Ju86mknumYM","x-form-browserRoot":"/content/themecleanflex/assets"} */ + public String getBgvideo() { + return bgvideo; + } + + /* {"type":"string","x-source":"inject","x-form-label":"Background Image","x-form-type":"pathbrowser","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-form-browserRoot":"/content/themecleanflex/assets"} */ + public String getBgimage() { + return bgimage; + } + + /* {"type":"string","x-source":"inject","x-form-label":"Background X Position","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */ + public String getBgxposition() { + return bgxposition; + } + + /* {"type":"string","x-source":"inject","x-form-label":"Background Y Position","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */ + public String getBgyposition() { + return bgyposition; + } + + /* {"type":"string","x-source":"inject","x-form-label":"Background Size Style","x-form-type":"text","x-default":"cover"} */ + public String getBgsize() { + return bgsize; + } + + /* {"type":"string","x-source":"inject","x-form-label":"Overlay","x-form-type":"materialswitch","x-form-visible":"model.backgroundtype == 'image' and model.custombackground == 'true'"} */ + public String getOverlay() { + return overlay; + } + + /* {"type":"string","x-source":"inject","x-form-label":"Overlay Color","x-form-type":"color","x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"#ffffff"} */ + public String getOverlaycolor() { + return overlaycolor; + } + + /* {"type":"string","x-source":"inject","x-form-label":"Overlay opacity","x-form-type":"materialrange","x-form-min":0,"x-form-max":100,"x-form-visible":"model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'","x-default":"50"} */ + public String getOverlayopacity() { + return overlayopacity; + } + + /* {"type":"string","x-source":"inject","x-form-label":"Background Color","x-form-type":"color","x-form-visible":"(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'","x-default":"#ffffff"} */ + public String getBgcolor() { + return bgcolor; + } + + /* {"type":"string","x-source":"inject","x-form-label":"Color 2","x-form-type":"color","x-form-visible":"model.backgroundtype == 'gradient' and model.custombackground == 'true'","x-default":"#c0c0c0"} */ + public String getColor2() { + return color2; + } + + /* {"type":"string","x-source":"inject","x-form-label":"Block Width","x-form-type":"materialradio","x-default":"default","properties":{"default":{"x-form-name":"Default","x-form-value":"default"},"full":{"x-form-name":"Full Width","x-form-value":"full"},"article":{"x-form-name":"Article Width","x-form-value":"article"}}} */ + public String getBlockwidth() { + return blockwidth; + } + + /* {"type":"string","x-source":"inject","x-form-label":"Full Height","x-form-type":"materialswitch","x-default":"false"} */ + public String getFullheight() { + return fullheight; + } + + /* {"type":"string","x-source":"inject","x-form-label":"Top Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-visible":"model.fullheight != 'true'"} */ + public String getToppadding() { + return toppadding; + } + + /* {"type":"string","x-source":"inject","x-form-label":"Bottom Padding","x-form-type":"materialrange","x-form-min":0,"x-form-max":300,"x-form-visible":"model.fullheight != 'true'"} */ + public String getBottompadding() { + return bottompadding; + } + + /* {"type":"string","x-source":"inject","x-form-label":"Content Name","x-form-type":"text"} */ + public String getContentname() { + return contentname; + } + + +//GEN] + + //GEN[:CUSTOMGETTERS + //GEN] + +} diff --git a/fragments/form/hatch.js b/fragments/form/hatch.js new file mode 100644 index 000000000..fac692980 --- /dev/null +++ b/fragments/form/hatch.js @@ -0,0 +1,16 @@ +module.exports = { + convert: function($, f) { + f.wrap($, 'themecleanflex-components-block') + f.bindAttribute($.parent(),'model','model') + + const el = $.find('div').first() + f.replace(el, '') + + const form = $.find('vue-form-generator').first() + f.bindAttribute(form,'model','formModel') + f.bindAttribute(form,'schema','schema') + f.bindAttribute(form,'options','formOptions') + + f.bindPath($) + } +} \ No newline at end of file diff --git a/fragments/form/model.json b/fragments/form/model.json new file mode 100644 index 000000000..93c4e4ba7 --- /dev/null +++ b/fragments/form/model.json @@ -0,0 +1,21 @@ +{ + "definitions": { + "Form": { + "type": "object", + "x-type": "component", + "properties": { + "schema": { + "type": "string", + "x-source": "inject", + "x-form-label": "Form Model", + "x-form-type": "textarea", + "x-form-max": "16000" + }, + "bgref": { + "$ref": "fragments/block/model.json#/definitions/Block", + "x-form-type": "reference" + } + } + } + } +} diff --git a/fragments/form/sample-contact.json b/fragments/form/sample-contact.json new file mode 100644 index 000000000..500979f38 --- /dev/null +++ b/fragments/form/sample-contact.json @@ -0,0 +1,7 @@ +{ + "title": "Form - Contact", + "group": "Features", + "model": { + "schema": "{}" + } +} \ No newline at end of file diff --git a/fragments/form/sample.json b/fragments/form/sample.json new file mode 100644 index 000000000..4b6d4cb59 --- /dev/null +++ b/fragments/form/sample.json @@ -0,0 +1,7 @@ +{ + "title": "Form", + "group": "Features", + "model": { + "schema": "{}" + } +} \ No newline at end of file diff --git a/fragments/form/template.html b/fragments/form/template.html new file mode 100644 index 000000000..b2da7a560 --- /dev/null +++ b/fragments/form/template.html @@ -0,0 +1,6 @@ +
+
+
+ +
+
\ No newline at end of file diff --git a/fragments/form/template.vue b/fragments/form/template.vue new file mode 100644 index 000000000..728b0a297 --- /dev/null +++ b/fragments/form/template.vue @@ -0,0 +1,34 @@ + + + + diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/form/.content.xml b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/form/.content.xml new file mode 100644 index 000000000..205cf237d --- /dev/null +++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/form/.content.xml @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/form/dialog.json b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/form/dialog.json new file mode 100644 index 000000000..21f4e6c0e --- /dev/null +++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/form/dialog.json @@ -0,0 +1,257 @@ +{ + "fields": [ + { + "type": "material-textarea", + "rows": 10, + "max": "16000", + "placeholder": "schema", + "label": "Form Model", + "model": "schema" + }, + { + "type": "input", + "inputType": "text", + "placeholder": "anchorname", + "label": "Anchor Name", + "model": "anchorname" + }, + { + "type": "input", + "inputType": "text", + "placeholder": "extraclasses", + "label": "Additonal Classes", + "model": "extraclasses" + }, + { + "type": "material-select", + "values": [ + { + "name": "section", + "value": "section" + }, + { + "name": "article", + "value": "article" + }, + { + "name": "main", + "value": "main" + }, + { + "name": "div", + "value": "div" + }, + { + "name": "header", + "value": "header" + }, + { + "name": "nav", + "value": "nav" + }, + { + "name": "footer", + "value": "footer" + } + ], + "placeholder": "htmlelement", + "label": "Semantic Element", + "model": "htmlelement" + }, + { + "type": "material-radios", + "values": [ + { + "name": "None", + "value": "" + }, + { + "name": "Light", + "value": "light" + }, + { + "name": "Dark", + "value": "dark" + } + ], + "placeholder": "colorscheme", + "label": "Block Color Scheme", + "model": "colorscheme" + }, + { + "type": "materialswitch", + "textOn": "yes", + "textOff": "no", + "valueOn": "true", + "valueOff": "false", + "placeholder": "custombackground", + "label": "Custom Background", + "model": "custombackground" + }, + { + "type": "material-radios", + "values": [ + { + "name": "Color", + "value": "color" + }, + { + "name": "Gradient", + "value": "gradient" + }, + { + "name": "Image", + "value": "image" + }, + { + "name": "Video", + "value": "video" + } + ], + "placeholder": "backgroundtype", + "label": "Background Type", + "model": "backgroundtype", + "visible": "model.custombackground == 'true'" + }, + { + "type": "pathbrowser", + "browserRoot": "/content/themecleanflex/assets", + "placeholder": "bgvideo", + "label": "Background Video", + "model": "bgvideo", + "visible": "model.backgroundtype == 'video' and model.custombackground == 'true'" + }, + { + "type": "pathbrowser", + "browserRoot": "/content/themecleanflex/assets", + "placeholder": "bgimage", + "label": "Background Image", + "model": "bgimage", + "visible": "model.backgroundtype == 'image' and model.custombackground == 'true'" + }, + { + "type": "material-range", + "placeholder": "bgxposition", + "label": "Background X Position", + "model": "bgxposition", + "visible": "model.backgroundtype == 'image' and model.custombackground == 'true'", + "min": 0, + "max": 100 + }, + { + "type": "material-range", + "placeholder": "bgyposition", + "label": "Background Y Position", + "model": "bgyposition", + "visible": "model.backgroundtype == 'image' and model.custombackground == 'true'", + "min": 0, + "max": 100 + }, + { + "type": "input", + "inputType": "text", + "placeholder": "bgsize", + "label": "Background Size Style", + "model": "bgsize" + }, + { + "type": "materialswitch", + "textOn": "yes", + "textOff": "no", + "valueOn": "true", + "valueOff": "false", + "placeholder": "overlay", + "label": "Overlay", + "model": "overlay", + "visible": "model.backgroundtype == 'image' and model.custombackground == 'true'" + }, + { + "type": "input", + "inputType": "color", + "placeholder": "overlaycolor", + "label": "Overlay Color", + "model": "overlaycolor", + "visible": "model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'" + }, + { + "type": "material-range", + "placeholder": "overlayopacity", + "label": "Overlay opacity", + "model": "overlayopacity", + "visible": "model.overlay == 'true' and model.backgroundtype == 'image' and model.custombackground == 'true'", + "min": 0, + "max": 100 + }, + { + "type": "input", + "inputType": "color", + "placeholder": "bgcolor", + "label": "Background Color", + "model": "bgcolor", + "visible": "(model.backgroundtype == 'color' or model.backgroundtype == 'gradient') and model.custombackground == 'true'" + }, + { + "type": "input", + "inputType": "color", + "placeholder": "color2", + "label": "Color 2", + "model": "color2", + "visible": "model.backgroundtype == 'gradient' and model.custombackground == 'true'" + }, + { + "type": "material-radios", + "values": [ + { + "name": "Default", + "value": "default" + }, + { + "name": "Full Width", + "value": "full" + }, + { + "name": "Article Width", + "value": "article" + } + ], + "placeholder": "blockwidth", + "label": "Block Width", + "model": "blockwidth" + }, + { + "type": "materialswitch", + "textOn": "yes", + "textOff": "no", + "valueOn": "true", + "valueOff": "false", + "placeholder": "fullheight", + "label": "Full Height", + "model": "fullheight" + }, + { + "type": "material-range", + "placeholder": "toppadding", + "label": "Top Padding", + "model": "toppadding", + "visible": "model.fullheight != 'true'", + "min": 0, + "max": 300 + }, + { + "type": "material-range", + "placeholder": "bottompadding", + "label": "Bottom Padding", + "model": "bottompadding", + "visible": "model.fullheight != 'true'", + "min": 0, + "max": 300 + }, + { + "type": "input", + "inputType": "text", + "placeholder": "contentname", + "label": "Content Name", + "model": "contentname" + } + ] +} \ No newline at end of file diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/form/template.vue b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/form/template.vue new file mode 100644 index 000000000..9c320bf2e --- /dev/null +++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/form/template.vue @@ -0,0 +1,39 @@ + + + + diff --git a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/page/renderer.html b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/page/renderer.html index 769f5acbc..000567364 100644 --- a/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/page/renderer.html +++ b/ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/page/renderer.html @@ -31,6 +31,10 @@ // } // } + if(window.VueFormGenerator) { + var VueFormGenerator = window.VueFormGenerator + Vue.component('vue-form-generator', VueFormGenerator.component) + } Vue.use(window.VLazyImage.VLazyImagePlugin) $peregrineApp.loadComponent('pagerendervue-components-placeholder') $peregrineApp.loadComponent('themecleanflex-components-block') diff --git a/ui.apps/src/main/content/jcr_root/content/themecleanflex/templates/.content.xml b/ui.apps/src/main/content/jcr_root/content/themecleanflex/templates/.content.xml index 5b6798665..4ab3e0e67 100644 --- a/ui.apps/src/main/content/jcr_root/content/themecleanflex/templates/.content.xml +++ b/ui.apps/src/main/content/jcr_root/content/themecleanflex/templates/.content.xml @@ -8,7 +8,8 @@ jcr:primaryType="per:PageContent" sling:resourceType="themecleanflex/components/page" jcr:title="themecleanflex root template" - siteCSS="[/content/themecleanflex/pages/css/commons.css,/content/themecleanflex/pages/css/palettes/default.css,/content/themecleanflex/pages/css/palette.css,/etc/felibs/themecleanflex.css,/content/themecleanflex/pages/css/custom.css,https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap]" + siteJS="[/etc/felibs/admin/dependencies/vfg.js]" + siteCSS="[/etc/felibs/admin/dependencies/vfg.css,/content/themecleanflex/pages/css/commons.css,/content/themecleanflex/pages/css/palettes/default.css,/content/themecleanflex/pages/css/palette.css,/etc/felibs/themecleanflex.css,/content/themecleanflex/pages/css/custom.css,https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap]" prefetchDNS="[https://www.youtube.com,https://s.ytimg.com,https://www.google.com,https://fonts.gstatic.com,https://www.youtube-nocookie.com]"/>