@iankibetsh/shframework 0.2.1 → 0.2.4

package/dist/dist/library.mjs.css

@@ -30,3 +30,24 @@
   font-weight: 300;
   opacity: 0.5;
 }
+
+:root {
+  --ck-z-default: 10555 !important;
+  --ck-z-modal: calc(var(--ck-z-default) + 999) !important;
+}
+.mceToolbar td {
+  display:table-row;
+  float: left;
+}
+.mceToolbar td:nth-of-type(11){
+  clear: left;
+}
+
+@media screen and (max-width:600px) {
+  .sh-editor{
+    width: 100% !important;
+  }
+  table.mceLayout, textarea.tinyMCE {
+    width: 100% !important;
+  }
+}

package/dist/library.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var Axios = require('axios');
 var NProgress = require('nprogress');
 var vue = require('vue');
+var Editor = require('@tinymce/tinymce-vue');
 var moment = require('moment');
 var Swal = require('sweetalert2');
 var pinia = require('pinia');
@@ -13,6 +14,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var Axios__default = /*#__PURE__*/_interopDefaultLegacy(Axios);
 var NProgress__default = /*#__PURE__*/_interopDefaultLegacy(NProgress);
+var Editor__default = /*#__PURE__*/_interopDefaultLegacy(Editor);
 var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
 var Swal__default = /*#__PURE__*/_interopDefaultLegacy(Swal);
 
@@ -1542,7 +1544,7 @@ const countries = [
   }
 ];
 
-var script$6 = {
+var script$7 = {
   name: 'ShPhone',
   props: ['modelValue', 'country_code'],
   data () {
@@ -1604,7 +1606,7 @@ var script$6 = {
   }
 };
 
-const _hoisted_1$6 = { class: "sh-phone mb-3" };
+const _hoisted_1$7 = { class: "sh-phone mb-3" };
 const _hoisted_2$6 = {
   key: 0,
   style: {"display":"contents"}
@@ -1612,8 +1614,8 @@ const _hoisted_2$6 = {
 const _hoisted_3$6 = ["src"];
 const _hoisted_4$5 = ["value"];
 
-function render$6(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, [
+function render$7(_ctx, _cache, $props, $setup, $data, $options) {
+  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$7, [
     ($data.selectedCountry)
       ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$6, [
           vue.createElementVNode("img", { src: $data.flag }, null, 8 /* PROPS */, _hoisted_3$6),
@@ -1647,15 +1649,95 @@ function render$6(_ctx, _cache, $props, $setup, $data, $options) {
   ]))
 }
 
+script$7.render = render$7;
+script$7.__file = "src/views/ShPhone.vue";
+
+var script$6 = {
+  name: 'ShEditor',
+  props: ['modelValue'],
+  components: {
+    editor: Editor__default["default"]
+  },
+  data () {
+    return {
+      editorData: this.modelValue
+    }
+  },
+  computed: {
+    value: {
+      get () {
+        return this.modelValue
+      },
+      set (value) {
+        this.$emit('update:modelValue', value);
+      }
+    }
+  },
+  created () {
+    document.addEventListener('focusin', function (e) {
+      const closest = e.target.closest('.tox-tinymce-aux, .tox-dialog, .moxman-window, .tam-assetmanager-root');
+      if (closest !== null && closest !== undefined) {
+        e.stopImmediatePropagation();
+      }
+    });
+  },
+  mounted () {
+    this.editorData = this.modelValue;
+  },
+  methods: {
+    updateValue: function () {
+      // alert('paste')
+    }
+  }
+};
+
+const _hoisted_1$6 = /*#__PURE__*/vue.createElementVNode("textarea", {
+  id: "tiny",
+  style: {"display":"none"},
+  "data-cy": "tinymce_editor"
+}, null, -1 /* HOISTED */);
+
+function render$6(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_editor = vue.resolveComponent("editor");
+
+  return (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+    vue.createCommentVNode("  <ckeditor @input=\"updateValue\" :editor=\"editor\" v-model=\"editorData\" :config=\"editorConfig\"></ckeditor>"),
+    _hoisted_1$6,
+    vue.createElementVNode("div", {
+      onFocusin: _cache[1] || (_cache[1] = vue.withModifiers(() => {}, ["stop"])),
+      class: "sh-editor w-100"
+    }, [
+      vue.createCommentVNode(" MCE editor placed here "),
+      vue.createVNode(_component_editor, {
+        class: "tinyEditor",
+        "api-key": "v5otxmculqf59xfg2bqr2ucw56cbqgbqo4x9gym2kwbv1rvi",
+        onInput: $options.updateValue,
+        onKeyup: $options.updateValue,
+        modelValue: $options.value,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (($options.value) = $event)),
+        init: {
+      selector: 'textarea#tiny',
+      valid_children : '+body[style],+body[script]',
+      extended_valid_elements : '*[*]',
+      contextmenu: false,
+      plugins: 'lists link image emoticons code autolink',
+      toolbar: 'styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist | link image emoticons code'
+    }
+      }, null, 8 /* PROPS */, ["onInput", "onKeyup", "modelValue"])
+    ], 32 /* HYDRATE_EVENTS */)
+  ], 64 /* STABLE_FRAGMENT */))
+}
+
 script$6.render = render$6;
-script$6.__file = "src/views/ShPhone.vue";
+script$6.__file = "src/views/FormComponent/ShEditor.vue";
 
 var script$5 = {
   name: 'ShForm',
   components: {
-    ShPhone: script$6
+    ShEditor: script$6,
+    ShPhone: script$7
   },
-  props: ['action', 'classes', 'hasTerms', 'country_code', 'submit_btn_class', 'fields', 'columns', 'placeholders', 'field_permissions', 'retain_data_after_submission', 'current_data', 'action_label', 'fill_selects', 'phones', 'successCallback', 'failed_callback', 'labels'],
+  props: ['action', 'classes', 'hasTerms', 'country_code', 'submitBtnClass', 'fields', 'columns', 'placeholders', 'field_permissions', 'retainDataAfterSubmission', 'currentData', 'actionLabel', 'fillSelects', 'phones', 'successCallback', 'failed_callback', 'labels', 'editors'],
   data: function () {
     return {
       form_elements: {},
@@ -1671,14 +1753,9 @@ var script$5 = {
       allLabels: {}
     }
   },
-  computed: {
-    currentData () {
-      return this.current_data
-    }
-  },
   methods: {
     getSubmitBtnClass: function () {
-      const btnClass = this.submit_btn_class;
+      const btnClass = this.submitBtnClass;
       if (!btnClass) {
         return 'btn btn-primary mt-2'
       } else {
@@ -1702,7 +1779,10 @@ var script$5 = {
       const selects = ['gender', 'payment_method', 'allow_view_mode', 'reasons_name', 'has_free_tier', 'payment_period', 'role', 'register_as', 'account_type'];
       const numbers = ['age'];
       const datePickers = ['free_tier_days', 'recurring_date', 'date', 'paid_at'];
-      const editors = ['html_content', 'listing_description', 'mail'];
+      let editors = ['html_content', 'listing_description', 'mail'];
+      if(this.editors){
+        editors = editors.concat(this.editors);
+      }
       const mapLocations = ['building_location'];
       const files = ['file', 'logo'];
       const phones = ['phone'];
@@ -1817,7 +1897,7 @@ var script$5 = {
         this.form_status = 2;
         Object.keys(this.form_elements).forEach(key => {
           this.form_errors[key] = null;
-          if (!this.retain_data_after_submission) {
+          if (!this.retainDataAfterSubmission) {
             this.form_elements[key] = '';
           }
         });
@@ -1886,14 +1966,14 @@ var script$5 = {
   },
   mounted: async function () {
     const selectData = {};
-    if (this.fill_selects) {
-      Object.keys(this.fill_selects).forEach(key => {
-        if (this.fill_selects[key].data) {
-          selectData[key] = this.fill_selects[key].data;
+    if (this.fillSelects) {
+      Object.keys(this.fillSelects).forEach(key => {
+        if (this.fillSelects[key].data) {
+          selectData[key] = this.fillSelects[key].data;
           this.selectData = selectData;
           console.log(this.selectData);
         } else {
-          apis.doGet(this.fill_selects[key].url, { all: 1 }).then(res => {
+          apis.doGet(this.fillSelects[key].url, { all: 1 }).then(res => {
             // selectData[key] = res.data
             // console.log(res)
             this.selectData[key] = res.data.data;
@@ -1946,7 +2026,7 @@ const _hoisted_15$2 = ["name", "onFocus", "onUpdate:modelValue"];
 const _hoisted_16$2 = ["name", "onFocus", "onUpdate:modelValue"];
 const _hoisted_17$2 = ["value"];
 const _hoisted_18$2 = {
-  key: 9,
+  key: 10,
   class: "invalid-feedback"
 };
 const _hoisted_19$2 = {
@@ -1979,6 +2059,7 @@ const _hoisted_23$2 = {
 
 function render$5(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_ShPhone = vue.resolveComponent("ShPhone");
+  const _component_ShEditor = vue.resolveComponent("ShEditor");
 
   return (vue.openBlock(), vue.createElementBlock("form", _hoisted_1$5, [
     vue.createCommentVNode("    <div v-if=\"form_status == 1\" class=\"alert alert-info\">Processing...</div>"),
@@ -2083,9 +2164,20 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
                   required: ""
                 }, null, 8 /* PROPS */, ["country_code", "placeholder", "name", "onFocus", "class", "modelValue", "onUpdate:modelValue"]))
               : vue.createCommentVNode("v-if", true),
+            ($options.getFieldType(field) === 'editor')
+              ? (vue.openBlock(), vue.createBlock(_component_ShEditor, {
+                  key: 6,
+                  placeholder: _ctx.allPlaceHolders[field] ? _ctx.allPlaceHolders[field] : '',
+                  name: field,
+                  onFocus: $event => ($options.removeErrors(field)),
+                  class: vue.normalizeClass([_ctx.form_errors[field] == null ? ' field_' + field:'is-invalid ' + field, "form-control"]),
+                  modelValue: _ctx.form_elements[field],
+                  "onUpdate:modelValue": $event => ((_ctx.form_elements[field]) = $event)
+                }, null, 8 /* PROPS */, ["placeholder", "name", "onFocus", "class", "modelValue", "onUpdate:modelValue"]))
+              : vue.createCommentVNode("v-if", true),
             ($options.getFieldType(field) === 'text')
               ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
-                  key: 6,
+                  key: 7,
                   disabled: $options.isDisabled(field),
                   placeholder: field === 'phone_number' ? 'e.g 0712 345 678':'',
                   name: field,
@@ -2099,7 +2191,7 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
               : vue.createCommentVNode("v-if", true),
             ($options.getFieldType(field) === 'textarea')
               ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("textarea", {
-                  key: 7,
+                  key: 8,
                   name: field,
                   onFocus: $event => ($options.removeErrors(field)),
                   class: vue.normalizeClass([_ctx.form_errors[field] == null ? ' field_' + field:'is-invalid ' + field, "form-control"]),
@@ -2110,7 +2202,7 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
               : vue.createCommentVNode("v-if", true),
             ($options.getFieldType(field) === 'select' && _ctx.selectData[field] != null)
               ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("select", {
-                  key: 8,
+                  key: 9,
                   name: field,
                   onFocus: $event => ($options.removeErrors(field)),
                   class: vue.normalizeClass([_ctx.form_errors[field] == null ? ' field_' + field:'is-invalid ' + field, "form-control"]),
@@ -2142,7 +2234,7 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
       type: "button",
       onClick: _cache[1] || (_cache[1] = (...args) => ($options.submitForm && $options.submitForm(...args)))
     }, [
-      vue.createTextVNode(vue.toDisplayString($props.action_label ? $props.action_label:'Submit') + " ", 1 /* TEXT */),
+      vue.createTextVNode(vue.toDisplayString($props.actionLabel ? $props.actionLabel:'Submit') + " ", 1 /* TEXT */),
       (_ctx.form_status == 1)
         ? (vue.openBlock(), vue.createElementBlock("img", _hoisted_23$2))
         : vue.createCommentVNode("v-if", true)
@@ -2864,25 +2956,37 @@ const _hoisted_13 = {
   key: 0,
   class: "text-center"
 };
-const _hoisted_14 = /*#__PURE__*/vue.createElementVNode("span", { colspan: 2 }, [
-  /*#__PURE__*/vue.createElementVNode("img", { src: "/src/views/assets/images/loading.gif" })
+const _hoisted_14 = /*#__PURE__*/vue.createElementVNode("div", {
+  class: "spinner-border",
+  role: "status"
+}, [
+  /*#__PURE__*/vue.createElementVNode("span", { class: "visually-hidden" }, "Loading...")
 ], -1 /* HOISTED */);
 const _hoisted_15 = [
   _hoisted_14
 ];
-const _hoisted_16 = { key: 1 };
+const _hoisted_16 = {
+  key: 1,
+  class: "alert alert-danger"
+};
 const _hoisted_17 = { colspan: 2 };
 const _hoisted_18 = {
   key: 0,
   class: "text-center"
 };
-const _hoisted_19 = /*#__PURE__*/vue.createElementVNode("span", { colspan: 2 }, [
-  /*#__PURE__*/vue.createElementVNode("img", { src: "/src/views/assets/images/loading.gif" })
+const _hoisted_19 = /*#__PURE__*/vue.createElementVNode("div", {
+  class: "spinner-border",
+  role: "status"
+}, [
+  /*#__PURE__*/vue.createElementVNode("span", { class: "visually-hidden" }, "Loading...")
 ], -1 /* HOISTED */);
 const _hoisted_20 = [
   _hoisted_19
 ];
-const _hoisted_21 = { key: 1 };
+const _hoisted_21 = {
+  key: 1,
+  class: "alert alert-danger"
+};
 const _hoisted_22 = { colspan: 2 };
 const _hoisted_23 = {
   key: 4,
@@ -3427,10 +3531,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     ]),
     vue.createElementVNode("div", _hoisted_3, [
       vue.createVNode(_component_router_view, {
-        current_tab: $data.currentTab,
+        currentTab: $data.currentTab,
         sharedData: $props.sharedData,
         tabCounts: $props.tabCounts
-      }, null, 8 /* PROPS */, ["current_tab", "sharedData", "tabCounts"])
+      }, null, 8 /* PROPS */, ["currentTab", "sharedData", "tabCounts"])
     ])
   ]))
 }
@@ -3519,7 +3623,7 @@ const useUserStore = pinia.defineStore('user-store', {
 exports.ShCanvas = script$4;
 exports.ShForm = script$5;
 exports.ShModal = script$3;
-exports.ShPhone = script$6;
+exports.ShPhone = script$7;
 exports.ShTable = script$1;
 exports.ShTabs = script;
 exports.shApis = apis;

package/dist/library.mjs

@@ -1,6 +1,7 @@
 import Axios from 'axios';
 import NProgress from 'nprogress';
-import { openBlock, createElementBlock, createElementVNode, createTextVNode, toDisplayString, createCommentVNode, withDirectives, Fragment, renderList, vModelSelect, vModelText, resolveComponent, normalizeClass, createBlock, renderSlot, createStaticVNode, withCtx, createVNode } from 'vue';
+import { openBlock, createElementBlock, createElementVNode, createTextVNode, toDisplayString, createCommentVNode, withDirectives, Fragment, renderList, vModelSelect, vModelText, resolveComponent, withModifiers, createVNode, normalizeClass, createBlock, renderSlot, createStaticVNode, withCtx } from 'vue';
+import Editor from '@tinymce/tinymce-vue';
 import moment from 'moment';
 import Swal from 'sweetalert2';
 import { defineStore } from 'pinia';
@@ -1531,7 +1532,7 @@ const countries = [
   }
 ];
 
-var script$6 = {
+var script$7 = {
   name: 'ShPhone',
   props: ['modelValue', 'country_code'],
   data () {
@@ -1593,7 +1594,7 @@ var script$6 = {
   }
 };
 
-const _hoisted_1$6 = { class: "sh-phone mb-3" };
+const _hoisted_1$7 = { class: "sh-phone mb-3" };
 const _hoisted_2$6 = {
   key: 0,
   style: {"display":"contents"}
@@ -1601,8 +1602,8 @@ const _hoisted_2$6 = {
 const _hoisted_3$6 = ["src"];
 const _hoisted_4$5 = ["value"];
 
-function render$6(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("div", _hoisted_1$6, [
+function render$7(_ctx, _cache, $props, $setup, $data, $options) {
+  return (openBlock(), createElementBlock("div", _hoisted_1$7, [
     ($data.selectedCountry)
       ? (openBlock(), createElementBlock("div", _hoisted_2$6, [
           createElementVNode("img", { src: $data.flag }, null, 8 /* PROPS */, _hoisted_3$6),
@@ -1636,15 +1637,95 @@ function render$6(_ctx, _cache, $props, $setup, $data, $options) {
   ]))
 }
 
+script$7.render = render$7;
+script$7.__file = "src/views/ShPhone.vue";
+
+var script$6 = {
+  name: 'ShEditor',
+  props: ['modelValue'],
+  components: {
+    editor: Editor
+  },
+  data () {
+    return {
+      editorData: this.modelValue
+    }
+  },
+  computed: {
+    value: {
+      get () {
+        return this.modelValue
+      },
+      set (value) {
+        this.$emit('update:modelValue', value);
+      }
+    }
+  },
+  created () {
+    document.addEventListener('focusin', function (e) {
+      const closest = e.target.closest('.tox-tinymce-aux, .tox-dialog, .moxman-window, .tam-assetmanager-root');
+      if (closest !== null && closest !== undefined) {
+        e.stopImmediatePropagation();
+      }
+    });
+  },
+  mounted () {
+    this.editorData = this.modelValue;
+  },
+  methods: {
+    updateValue: function () {
+      // alert('paste')
+    }
+  }
+};
+
+const _hoisted_1$6 = /*#__PURE__*/createElementVNode("textarea", {
+  id: "tiny",
+  style: {"display":"none"},
+  "data-cy": "tinymce_editor"
+}, null, -1 /* HOISTED */);
+
+function render$6(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_editor = resolveComponent("editor");
+
+  return (openBlock(), createElementBlock(Fragment, null, [
+    createCommentVNode("  <ckeditor @input=\"updateValue\" :editor=\"editor\" v-model=\"editorData\" :config=\"editorConfig\"></ckeditor>"),
+    _hoisted_1$6,
+    createElementVNode("div", {
+      onFocusin: _cache[1] || (_cache[1] = withModifiers(() => {}, ["stop"])),
+      class: "sh-editor w-100"
+    }, [
+      createCommentVNode(" MCE editor placed here "),
+      createVNode(_component_editor, {
+        class: "tinyEditor",
+        "api-key": "v5otxmculqf59xfg2bqr2ucw56cbqgbqo4x9gym2kwbv1rvi",
+        onInput: $options.updateValue,
+        onKeyup: $options.updateValue,
+        modelValue: $options.value,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (($options.value) = $event)),
+        init: {
+      selector: 'textarea#tiny',
+      valid_children : '+body[style],+body[script]',
+      extended_valid_elements : '*[*]',
+      contextmenu: false,
+      plugins: 'lists link image emoticons code autolink',
+      toolbar: 'styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist | link image emoticons code'
+    }
+      }, null, 8 /* PROPS */, ["onInput", "onKeyup", "modelValue"])
+    ], 32 /* HYDRATE_EVENTS */)
+  ], 64 /* STABLE_FRAGMENT */))
+}
+
 script$6.render = render$6;
-script$6.__file = "src/views/ShPhone.vue";
+script$6.__file = "src/views/FormComponent/ShEditor.vue";
 
 var script$5 = {
   name: 'ShForm',
   components: {
-    ShPhone: script$6
+    ShEditor: script$6,
+    ShPhone: script$7
   },
-  props: ['action', 'classes', 'hasTerms', 'country_code', 'submit_btn_class', 'fields', 'columns', 'placeholders', 'field_permissions', 'retain_data_after_submission', 'current_data', 'action_label', 'fill_selects', 'phones', 'successCallback', 'failed_callback', 'labels'],
+  props: ['action', 'classes', 'hasTerms', 'country_code', 'submitBtnClass', 'fields', 'columns', 'placeholders', 'field_permissions', 'retainDataAfterSubmission', 'currentData', 'actionLabel', 'fillSelects', 'phones', 'successCallback', 'failed_callback', 'labels', 'editors'],
   data: function () {
     return {
       form_elements: {},
@@ -1660,14 +1741,9 @@ var script$5 = {
       allLabels: {}
     }
   },
-  computed: {
-    currentData () {
-      return this.current_data
-    }
-  },
   methods: {
     getSubmitBtnClass: function () {
-      const btnClass = this.submit_btn_class;
+      const btnClass = this.submitBtnClass;
       if (!btnClass) {
         return 'btn btn-primary mt-2'
       } else {
@@ -1691,7 +1767,10 @@ var script$5 = {
       const selects = ['gender', 'payment_method', 'allow_view_mode', 'reasons_name', 'has_free_tier', 'payment_period', 'role', 'register_as', 'account_type'];
       const numbers = ['age'];
       const datePickers = ['free_tier_days', 'recurring_date', 'date', 'paid_at'];
-      const editors = ['html_content', 'listing_description', 'mail'];
+      let editors = ['html_content', 'listing_description', 'mail'];
+      if(this.editors){
+        editors = editors.concat(this.editors);
+      }
       const mapLocations = ['building_location'];
       const files = ['file', 'logo'];
       const phones = ['phone'];
@@ -1806,7 +1885,7 @@ var script$5 = {
         this.form_status = 2;
         Object.keys(this.form_elements).forEach(key => {
           this.form_errors[key] = null;
-          if (!this.retain_data_after_submission) {
+          if (!this.retainDataAfterSubmission) {
             this.form_elements[key] = '';
           }
         });
@@ -1875,14 +1954,14 @@ var script$5 = {
   },
   mounted: async function () {
     const selectData = {};
-    if (this.fill_selects) {
-      Object.keys(this.fill_selects).forEach(key => {
-        if (this.fill_selects[key].data) {
-          selectData[key] = this.fill_selects[key].data;
+    if (this.fillSelects) {
+      Object.keys(this.fillSelects).forEach(key => {
+        if (this.fillSelects[key].data) {
+          selectData[key] = this.fillSelects[key].data;
           this.selectData = selectData;
           console.log(this.selectData);
         } else {
-          apis.doGet(this.fill_selects[key].url, { all: 1 }).then(res => {
+          apis.doGet(this.fillSelects[key].url, { all: 1 }).then(res => {
             // selectData[key] = res.data
             // console.log(res)
             this.selectData[key] = res.data.data;
@@ -1935,7 +2014,7 @@ const _hoisted_15$2 = ["name", "onFocus", "onUpdate:modelValue"];
 const _hoisted_16$2 = ["name", "onFocus", "onUpdate:modelValue"];
 const _hoisted_17$2 = ["value"];
 const _hoisted_18$2 = {
-  key: 9,
+  key: 10,
   class: "invalid-feedback"
 };
 const _hoisted_19$2 = {
@@ -1968,6 +2047,7 @@ const _hoisted_23$2 = {
 
 function render$5(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_ShPhone = resolveComponent("ShPhone");
+  const _component_ShEditor = resolveComponent("ShEditor");
 
   return (openBlock(), createElementBlock("form", _hoisted_1$5, [
     createCommentVNode("    <div v-if=\"form_status == 1\" class=\"alert alert-info\">Processing...</div>"),
@@ -2072,9 +2152,20 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
                   required: ""
                 }, null, 8 /* PROPS */, ["country_code", "placeholder", "name", "onFocus", "class", "modelValue", "onUpdate:modelValue"]))
               : createCommentVNode("v-if", true),
+            ($options.getFieldType(field) === 'editor')
+              ? (openBlock(), createBlock(_component_ShEditor, {
+                  key: 6,
+                  placeholder: _ctx.allPlaceHolders[field] ? _ctx.allPlaceHolders[field] : '',
+                  name: field,
+                  onFocus: $event => ($options.removeErrors(field)),
+                  class: normalizeClass([_ctx.form_errors[field] == null ? ' field_' + field:'is-invalid ' + field, "form-control"]),
+                  modelValue: _ctx.form_elements[field],
+                  "onUpdate:modelValue": $event => ((_ctx.form_elements[field]) = $event)
+                }, null, 8 /* PROPS */, ["placeholder", "name", "onFocus", "class", "modelValue", "onUpdate:modelValue"]))
+              : createCommentVNode("v-if", true),
             ($options.getFieldType(field) === 'text')
               ? withDirectives((openBlock(), createElementBlock("input", {
-                  key: 6,
+                  key: 7,
                   disabled: $options.isDisabled(field),
                   placeholder: field === 'phone_number' ? 'e.g 0712 345 678':'',
                   name: field,
@@ -2088,7 +2179,7 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
               : createCommentVNode("v-if", true),
             ($options.getFieldType(field) === 'textarea')
               ? withDirectives((openBlock(), createElementBlock("textarea", {
-                  key: 7,
+                  key: 8,
                   name: field,
                   onFocus: $event => ($options.removeErrors(field)),
                   class: normalizeClass([_ctx.form_errors[field] == null ? ' field_' + field:'is-invalid ' + field, "form-control"]),
@@ -2099,7 +2190,7 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
               : createCommentVNode("v-if", true),
             ($options.getFieldType(field) === 'select' && _ctx.selectData[field] != null)
               ? withDirectives((openBlock(), createElementBlock("select", {
-                  key: 8,
+                  key: 9,
                   name: field,
                   onFocus: $event => ($options.removeErrors(field)),
                   class: normalizeClass([_ctx.form_errors[field] == null ? ' field_' + field:'is-invalid ' + field, "form-control"]),
@@ -2131,7 +2222,7 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
       type: "button",
       onClick: _cache[1] || (_cache[1] = (...args) => ($options.submitForm && $options.submitForm(...args)))
     }, [
-      createTextVNode(toDisplayString($props.action_label ? $props.action_label:'Submit') + " ", 1 /* TEXT */),
+      createTextVNode(toDisplayString($props.actionLabel ? $props.actionLabel:'Submit') + " ", 1 /* TEXT */),
       (_ctx.form_status == 1)
         ? (openBlock(), createElementBlock("img", _hoisted_23$2))
         : createCommentVNode("v-if", true)
@@ -2853,25 +2944,37 @@ const _hoisted_13 = {
   key: 0,
   class: "text-center"
 };
-const _hoisted_14 = /*#__PURE__*/createElementVNode("span", { colspan: 2 }, [
-  /*#__PURE__*/createElementVNode("img", { src: "/src/views/assets/images/loading.gif" })
+const _hoisted_14 = /*#__PURE__*/createElementVNode("div", {
+  class: "spinner-border",
+  role: "status"
+}, [
+  /*#__PURE__*/createElementVNode("span", { class: "visually-hidden" }, "Loading...")
 ], -1 /* HOISTED */);
 const _hoisted_15 = [
   _hoisted_14
 ];
-const _hoisted_16 = { key: 1 };
+const _hoisted_16 = {
+  key: 1,
+  class: "alert alert-danger"
+};
 const _hoisted_17 = { colspan: 2 };
 const _hoisted_18 = {
   key: 0,
   class: "text-center"
 };
-const _hoisted_19 = /*#__PURE__*/createElementVNode("span", { colspan: 2 }, [
-  /*#__PURE__*/createElementVNode("img", { src: "/src/views/assets/images/loading.gif" })
+const _hoisted_19 = /*#__PURE__*/createElementVNode("div", {
+  class: "spinner-border",
+  role: "status"
+}, [
+  /*#__PURE__*/createElementVNode("span", { class: "visually-hidden" }, "Loading...")
 ], -1 /* HOISTED */);
 const _hoisted_20 = [
   _hoisted_19
 ];
-const _hoisted_21 = { key: 1 };
+const _hoisted_21 = {
+  key: 1,
+  class: "alert alert-danger"
+};
 const _hoisted_22 = { colspan: 2 };
 const _hoisted_23 = {
   key: 4,
@@ -3416,10 +3519,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     ]),
     createElementVNode("div", _hoisted_3, [
       createVNode(_component_router_view, {
-        current_tab: $data.currentTab,
+        currentTab: $data.currentTab,
         sharedData: $props.sharedData,
         tabCounts: $props.tabCounts
-      }, null, 8 /* PROPS */, ["current_tab", "sharedData", "tabCounts"])
+      }, null, 8 /* PROPS */, ["currentTab", "sharedData", "tabCounts"])
     ])
   ]))
 }
@@ -3505,4 +3608,4 @@ const useUserStore = defineStore('user-store', {
   }
 });
 
-export { script$4 as ShCanvas, script$5 as ShForm, script$3 as ShModal, script$6 as ShPhone, script$1 as ShTable, script as ShTabs, apis as shApis, helpers as shRepo, shstorage as shStorage, useUserStore };
+export { script$4 as ShCanvas, script$5 as ShForm, script$3 as ShModal, script$7 as ShPhone, script$1 as ShTable, script as ShTabs, apis as shApis, helpers as shRepo, shstorage as shStorage, useUserStore };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iankibetsh/shframework",
-  "version": "0.2.1",
+  "version": "0.2.4",
   "description": "Vue library for handling laravel backend",
   "main": "dist/library.js",
   "module": "dist/library.mjs",
@@ -22,7 +22,8 @@
     "nprogress": "^0.2.0",
     "pinia": "^2.0.13",
     "sweetalert2": "^11.4.14",
-    "vue": "^3.2.37"
+    "vue": "^3.2.37",
+    "@tinymce/tinymce-vue": "^4.0.7"
   },
   "devDependencies": {
     "rollup": "^2.75.7",