aloha-vue 1.0.310 → 1.0.312

package/docs/src/views/PageTabs/PageTabs.js

@@ -26,6 +26,17 @@ export default {
           disabled: true,
         },
       ],
+      dataTabs2: [
+        {
+          id: "tab_1",
+        },
+        {
+          id: "tab_2",
+        },
+        {
+          id: "tab_3",
+        },
+      ],
     };
   },
 };

package/docs/src/views/PageTabs/PageTabs.pug

@@ -35,3 +35,17 @@ div
     :is-boxed="true"
     :is-vertical="true"
   )
+  h2 With Slots
+  a-tabs(
+    :data="dataTabs2"
+    :is-boxed="true"
+  )
+    template(
+      v-slot:tab="{ tab }"
+    )
+      span {{ tab }}
+
+    template(
+      v-slot:content="{ tab }"
+    )
+      span {{ tab }}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "aloha-vue",
   "description": "Project aloha",
-  "version": "1.0.310",
+  "version": "1.0.312",
   "author": "Ilia Brykin",
   "scripts": {
     "build-icons": "node scriptsNode/iconsSvgToJs.js bootstrap3 && node scriptsNode/iconsSvgToJs.js bootstrap-1-9-1"

package/src/ATabs/ATabsContent/ATabsContent.js

@@ -41,6 +41,31 @@ export default {
     };
   },
   render() {
+    let content = "";
+    if (this.tab.slotContent && this.$slots[this.tab.slotContent]) {
+      content = this.$slots[this.tab.slotContent]({
+        tab: this.tab,
+        tabIndex: this.index,
+        isActive: this.isActive,
+        indexActiveTab: this.indexActiveTabLocal,
+        contentId: this.idForContent,
+        parentId: this.parentId,
+      });
+    } else if (this.$slots.content) {
+      content = this.$slots.content({
+        tab: this.tab,
+        tabIndex: this.index,
+        isActive: this.isActive,
+        indexActiveTab: this.indexActiveTabLocal,
+        contentId: this.idForContent,
+        parentId: this.parentId,
+      });
+    } else if (this.tab.content) {
+      content = withDirectives(h("div"), [
+        [ASafeHtml, this.tab.content],
+      ]);
+    }
+
     return h("div", {
       id: this.idForContent,
       role: "tabpanel",
@@ -49,20 +74,7 @@ export default {
       }],
       ariaLabelledby: this.idLocal,
     }, [
-      this.tab.slotContent ?
-        this.$slots[this.tab.slotContent] &&
-          this.$slots[this.tab.slotContent]({
-            tab: this.tab,
-            tabIndex: this.index,
-            isActive: this.isActive,
-            indexActiveTab: this.indexActiveTabLocal,
-            contentId: this.idForContent,
-            parentId: this.parentId,
-          }) :
-        this.tab.content &&
-          withDirectives(h("div"), [
-            [ASafeHtml, this.tab.content],
-          ]),
+      content,
     ]);
   },
 };

package/src/ATabs/ATabsTab/ATabsTab.js

@@ -75,6 +75,31 @@ export default {
     };
   },
   render() {
+    let tab = "";
+    if (this.tab.slotTab && this.$slots[this.tab.slotTab]) {
+      tab = this.$slots[this.tab.slotTab]({
+        tab: this.tab,
+        tabIndex: this.index,
+        isActive: this.isActive,
+        indexActiveTab: this.indexActiveTabLocal,
+        contentId: this.idForContent,
+        parentId: this.parentId,
+      });
+    } else if (this.$slots.tab) {
+      tab = this.$slots.tab({
+        tab: this.tab,
+        tabIndex: this.index,
+        isActive: this.isActive,
+        indexActiveTab: this.indexActiveTabLocal,
+        contentId: this.idForContent,
+        parentId: this.parentId,
+      });
+    } else if (this.tab.label) {
+      tab = withDirectives(h("div"), [
+        [ASafeHtml, this.tab.label],
+      ]);
+    }
+
     return h(ATooltip, {
       tag: "li",
       placement: this.titlePlacement,
@@ -99,19 +124,7 @@ export default {
           onClick: this.changeTabLocal,
           onKeydown: this.keydownTab,
         }, [
-          this.tab.slotTab && this.$slots[this.tab.slotTab] ?
-            this.$slots[this.tab.slotTab]({
-              tab: this.tab,
-              tabIndex: this.index,
-              isActive: this.isActive,
-              isDisabled: this.isDisabled,
-              indexActiveTab: this.indexActiveTabLocal,
-              tabId: this.idLocal,
-              parentId: this.parentId,
-            }) :
-            withDirectives(h("span"), [
-              [ASafeHtml, this.tab.label],
-            ]),
+          tab,
         ]),
       ],
       title: () => withDirectives(h("div"), [

package/src/ui/ATinymce/compositionAPI/ATinymceAPI.js

@@ -55,8 +55,15 @@ export default function ATinymceAPI(props, context, {
   const modelValue = toRef(props, "modelValue");
 
   let vueEditor = null;
+  let modelValueLocal = undefined;
+
+  const changeModelLocal = ({ model }) => {
+    modelValueLocal = model;
+    changeModel({ model });
+  };
 
   const render = () => {
+    modelValueLocal = modelValue.value;
     tinymce.init({
       selector: `#${ htmlIdLocal.value }`,
       plugins: plugins.value,
@@ -75,7 +82,7 @@ export default function ATinymceAPI(props, context, {
       setup: editor => {
         vueEditor = editor;
         editor.on("change input undo redo", () => {
-          changeModel({ model: editor.getContent({ format: "html" }) });
+          changeModelLocal({ model: editor.getContent({ format: "html" }) });
         });
       },
     });
@@ -94,7 +101,10 @@ export default function ATinymceAPI(props, context, {
   });
 
   watch(modelValue, newValue => {
-    tinymce.get(htmlIdLocal.value).setContent(newValue);
+    if (newValue !== modelValueLocal) {
+      tinymce.get(htmlIdLocal.value).setContent(newValue);
+      modelValueLocal = newValue;
+    }
   });
 
   onBeforeUnmount(() => {