simple plugin and button component

fragments/button/hatch.js

@@ -0,0 +1,10 @@
+module.exports = {
+    convert: function ($, f) {
+      f.wrap($, 'themecleanflex-components-block');
+      f.bindAttribute($.parent(), 'model', 'model');
+
+      const submit = $.find('input').first();
+      f.bindAttribute(submit, 'value', 'model.submittext'); 
+      f.bindEvent(submit, 'click.prevent.stop', 'onClick');
+    }
+  };

fragments/button/model.json

@@ -0,0 +1,87 @@
+{
+  "definitions": {
+    "Button": {
+      "type": "object",
+      "x-type": "component",
+      "properties": {
+        "submitfunction": {
+          "type": "string",
+          "x-source": "inject",
+          "x-form-label": "Javascript function to call on submit",
+          "x-form-hint": "Function must accept (model, formdata)",
+          "x-form-type": "text",
+          "x-form-group": "content",
+          "x-default": ""
+        },
+        "submittext": {
+          "type": "string",
+          "x-source": "inject",
+          "x-form-label": "Submit Button Text",
+          "x-form-type": "text",
+          "x-form-group": "content",
+          "x-default": "Submit"
+        },
+        "submitsize": {
+          "type": "string",
+          "x-source": "inject",
+          "x-form-label": "Submit button size",
+          "x-form-type": "materialselect",
+          "x-form-group": "style",
+          "x-default": "normal",
+          "properties":{
+            "section": {
+              "x-form-name": "normal",
+              "x-form-value": "normal"
+            },
+            "small": {
+              "x-form-name": "small",
+              "x-form-value": "small"
+            },
+            "large": {
+              "x-form-name": "large",
+              "x-form-value": "large"
+            },
+            "full": {
+              "x-form-name": "full width",
+              "x-form-value": "full"
+            }
+          }
+        },
+        "submitalignment": {
+          "type": "string",
+          "x-source": "inject",
+          "x-form-label": "Submit button alignment",
+          "x-form-type": "materialselect",
+          "x-form-group": "style",
+          "x-default": "start",
+          "properties":{
+            "start": {
+              "x-form-name": "start",
+              "x-form-value": "start"
+            },
+            "center": {
+              "x-form-name": "center",
+              "x-form-value": "center"
+            },
+            "end": {
+              "x-form-name": "end",
+              "x-form-value": "end"
+            }
+          }
+        },
+        "successpage": {
+          "type": "string",
+          "x-source": "inject",
+          "x-form-type": "pathbrowser",
+          "x-form-label": "Submit Success Page",
+          "x-form-group": "content",
+          "x-form-browserRoot": "/content/themecleanflex/pages"
+        },
+        "bgref": {
+          "$ref": "fragments/block/model.json#/definitions/Block",
+          "x-form-type": "reference"
+        }
+      }
+    }
+  }
+}

fragments/button/sample.json

@@ -0,0 +1,7 @@
+{
+  "title": "Button",
+  "group": "",
+  "model": {
+    "text": "example"
+  }
+}

fragments/button/template.html

@@ -0,0 +1,3 @@
+<div class="w-full">
+    <input class="btn mb-4" type="submit">
+</div>

fragments/button/template.vue

@@ -0,0 +1,38 @@
+<template>
+  <themecleanflex-components-block v-bind:model="model">
+    <div class="w-full">
+      <input class="btn mb-4" type="submit" v-bind:value="model.submittext"
+      v-on:click.prevent.stop="onClick">
+    </div>
+  </themecleanflex-components-block>
+</template>
+
+<script>
+  export default {
+    props: ['model'],
+    methods: {
+      onClick(e) { 
+        if (this.model.submitfunction !== 'onSubmit' && this.model.submitfunction !== '') {
+          const objs = this.model.submitfunction.split('.');
+          let parent = window;
+          let obj = objs.shift();
+          while (obj && parent[obj]) {
+            if (objs.length === 0) {
+              try {
+                const result = parent[obj](this.model, this.form);
+              } catch (err) {
+                console.error(err);
+              }
+              return;
+            }
+            parent = parent[obj];
+            obj = objs.shift();
+          }
+          console.log('window.' + this.model.submitfunction + ' not found');
+          return;
+        }
+      }
+    }
+  }
+</script>
+

fragments/plugin/hatch.js

@@ -0,0 +1,9 @@
+module.exports = {
+    convert: function($, f) {
+        f.wrap($, 'themecleanflex-components-block');
+        f.bindAttribute($.parent(), 'model', 'model');
+        f.bindAttribute($, 'ref', '`target`');
+        f.addElse($);
+        $.parent().prepend('<div class="p-5" v-if="isEditAndEmpty">no functions defined for component</div>');
+    }
+}

fragments/plugin/model.json

@@ -0,0 +1,32 @@
+{
+  "definitions": {
+    "Plugin": {
+      "type": "object",
+      "x-type": "component",
+      "properties": {
+        "mount": {
+          "type": "string",
+          "x-source": "inject",
+          "x-form-label": "Javascript function to call on component mount",
+          "x-form-hint": "Function must accept (el)",
+          "x-form-type": "text",
+          "x-form-group": "content",
+          "x-default": ""
+        },
+        "unmount": {
+          "type": "string",
+          "x-source": "inject",
+          "x-form-label": "Javascript function to call on component unmount",
+          "x-form-hint": "Function must accept (el)",
+          "x-form-type": "text",
+          "x-form-group": "content",
+          "x-default": ""
+        },
+        "bgref": {
+          "$ref": "fragments/block/model.json#/definitions/Block",
+          "x-form-type": "reference"
+        }
+      }
+    }
+  }
+}

fragments/plugin/sample.json

@@ -0,0 +1,7 @@
+{
+  "title": "Plugin",
+  "group": "",
+  "model": {
+    "text": "example"
+  }
+}

fragments/plugin/template.html

@@ -0,0 +1 @@
+<div></div>

fragments/plugin/template.vue

@@ -0,0 +1,73 @@
+<template>
+  <themecleanflex-components-block v-bind:model="model">
+    <div class="p-5" v-if="isEditAndEmpty">no functions defined for component</div>
+    <div v-bind:ref="`target`" v-else=""></div>
+  </themecleanflex-components-block>
+</template>
+
+<script>
+  export default {
+    props: ['model'],
+    mounted: function() {
+      console.log('mounted');
+      this.mount(this.$refs.target);
+    },
+    beforeDestroy: function() {
+      this.unmount(this.$refs.target);
+    },
+    computed: {
+      isEditAndEmpty() {
+          if(!$peregrineApp.isAuthorMode()) return false
+          return this.$helper.areAllEmpty(this.model.mount, this.model.unmount)
+      }
+    },
+    methods: {
+      mount(e) { 
+        console.log(e);
+        if (this.model.mount !== '') {
+          const objs = this.model.mount.split('.');
+          let parent = window;
+          let obj = objs.shift();
+          while (obj && parent[obj]) {
+            if (objs.length === 0) {
+              try {
+                const result = parent[obj](e);
+              } catch (err) {
+                console.error(err);
+              }
+              return;
+            }
+            parent = parent[obj];
+            obj = objs.shift();
+          }
+          console.log('window.' + this.model.mount + ' not found');
+          return;
+        }
+      },
+      unmount(e) { 
+        console.log(e);
+        if (this.model.unmount !== '') {
+          const objs = this.model.unmount.split('.');
+          let parent = window;
+          let obj = objs.shift();
+          while (obj && parent[obj]) {
+            if (objs.length === 0) {
+              try {
+                const result = parent[obj](e);
+              } catch (err) {
+                console.error(err);
+              }
+              return;
+            }
+            parent = parent[obj];
+            obj = objs.shift();
+          }
+          console.log('window.' + this.model.unmount + ' not found');
+          return;
+        }
+      }
+
+    }
+  }
+</script>
+

ui.apps/src/main/content/jcr_root/apps/themecleanflex/components/button/.content.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="per:Component" jcr:title="Button" group="">
+  <jcr:content jcr:primaryType="nt:unstructured" text="example"/>
+</jcr:root>