@avakhula/ui 0.0.207 → 0.0.208

package/src/directives/tooltip/tooltip.js

@@ -3,15 +3,14 @@ import Tooltip from "./TooltipController";
 const tooltip = new Tooltip();
 const createTooltip = (el, binding) => {
   if (!tooltip.getTooltipContainer()) {
-    const position = Object.keys(binding.modifiers)[0] || binding.arg;
-    tooltip.createTooltip(el, binding.value, position);
+    tooltip.createTooltip(el, binding.value);
   }
 };
 
 const destroyTooltip = (event, el) => {
   const uuid = tooltip.getId();
 
-  if (el.getAttribute("describedby") !== uuid) {
+  if (el.getAttribute("aria-describedby") !== uuid) {
     return;
   }
 
@@ -27,29 +26,15 @@ const destroyTooltip = (event, el) => {
   }
 };
 
-const attachTooltipListeners = (el, binding) => {
-  el.__tooltip_create = () => createTooltip(el, binding);
-  el.__tooltip_destroy = (e) => destroyTooltip(e, el);
-
-  el.addEventListener("mouseenter", el.__tooltip_create);
-  document.addEventListener("mousemove", el.__tooltip_destroy);
-};
-
-const removeTooltipListeners = (el) => {
-  tooltip.destroyTooltip();
-  el.removeEventListener("mouseenter", el.__tooltip_create);
-  document.removeEventListener("mousemove", el.__tooltip_destroy);
-};
-
 export const TooltipDirective = {
   mounted(el, binding) {
-    attachTooltipListeners(el, binding);
-  },
-  updated(el, binding) {
-    removeTooltipListeners(el);
-    attachTooltipListeners(el, binding);
+    el.addEventListener("mouseenter", () => createTooltip(el, binding));
+    document.addEventListener("mousemove", (e) => destroyTooltip(e, el));
   },
-  beforeUnmount(el) {
-    removeTooltipListeners(el);
+
+  beforeUnmount(el, binding) {
+    tooltip.destroyTooltip();
+    el.removeEventListener("mouseenter", () => createTooltip(el, binding));
+    document.removeEventListener("mousemove", (e) => destroyTooltip(e, el));
   },
 };

package/src/directives/tooltip/tooltip.stories.js

@@ -1,6 +1,4 @@
 import IbButton from "../../components/Button/Button.vue";
-import IbIconButton from "../../components/IconButton/IconButton.vue";
-
 import { TooltipDirective } from "./tooltip";
 import readme from "./readme.mdx";
 
@@ -15,89 +13,18 @@ export default {
 };
 
 const Template = (args) => ({
-  components: { IbButton, IbIconButton },
+  components: { IbButton },
   directives: { tooltip: TooltipDirective },
   setup() {
     return { args };
   },
-  template: `
-    <div style="display:flex;flex-wrap:wrap;">
-
-    <div style="margin:20px">
-        bottomLeft
-        <ib-button v-tooltip.bottomLeft="'Tooltip Content Content Content Content'" v-bind="args">aaaabaaaa</ib-button>
-        <ib-icon-button v-tooltip.bottomLeft="'Tooltip Content Content Content Content'">  <ion-icon style="font-size=20px" name="add"></ion-icon></ib-icon-button>
-      </div>
-      <div style="margin:20px">
-        bottomCenter
-        <ib-button v-tooltip.bottomCenter="'Tooltip Content Content Content Content'" v-bind="args">aaaabaaaa</ib-button>
-        <ib-icon-button v-tooltip.bottomCenter="'Tooltip Content Content Content Content'">  <ion-icon style="font-size=20px" name="add"></ion-icon></ib-icon-button>
-      </div>
-      <div style="margin:20px">
-        bottomRight
-        <ib-button v-tooltip.bottomRight="'Tooltip Content Content Content Content'" v-bind="args">aaaabaaaa</ib-button>
-        <ib-icon-button v-tooltip.bottomRight="'Tooltip Content Content Content Content'">  <ion-icon style="font-size=20px" name="add"></ion-icon></ib-icon-button>
-      </div>
-
-      <div style="margin:20px">
-        topLeft
-        <ib-button v-tooltip.topLeft="'Tooltip Content Content Content Content'" v-bind="args">aaaabaaaa</ib-button>
-        <ib-icon-button v-tooltip.topLeft="'Tooltip Content Content Content Content'">  <ion-icon style="font-size=20px" name="add"></ion-icon></ib-icon-button>
-      </div>
-      <div style="margin:20px">
-        <ib-button v-tooltip="'Tooltip Content Content Content Content'" v-bind="args">Hover to me(default)</ib-button>
-      </div>
-      <div style="margin:20px">
-        topRight
-        <ib-button v-tooltip.topRight="'Tooltip Content Content Content Content'" v-bind="args">aaaabaaaa</ib-button>
-        <ib-icon-button v-tooltip.topRight="'Tooltip Content Content Content Content'">  <ion-icon style="font-size=20px" name="add"></ion-icon></ib-icon-button>
-      </div>
-
-      <div style="margin:20px">
-        leftTop
-        <ib-button v-tooltip.leftTop="'Tooltip Content Content Content Content'" v-bind="args">aaaabaaaa</ib-button>
-        <ib-icon-button v-tooltip.leftTop="'Tooltip Content Content Content Content'">  <ion-icon style="font-size=20px" name="add"></ion-icon></ib-icon-button>
-      </div>
-      <div style="margin:20px">
-        leftCenter
-        <ib-button v-tooltip.leftCenter="'Tooltip Content Content Content Content'" v-bind="args">aaaabaaaa</ib-button>
-        <ib-icon-button v-tooltip.leftCenter="'Tooltip Content Content Content Content'">  <ion-icon style="font-size=20px" name="add"></ion-icon></ib-icon-button>
-      </div>
-      <div style="margin:20px">
-      leftBottom
-      <ib-button v-tooltip.leftBottom="'Tooltip Content Content Content Content'" v-bind="args">aaaabaaaa</ib-button>
-      <ib-icon-button v-tooltip.leftBottom="'Tooltip Content Content Content Content'">  <ion-icon style="font-size=20px" name="add"></ion-icon></ib-icon-button>
-        <ib-button v-tooltip.leftBottom="'Tooltip Content Content Content Content'" v-bind="args">Hover to me(leftBottom)</ib-button>
-      </div>
-
-
-      <div style="margin:20px">
-        rightTop
-        <ib-button v-tooltip.rightTop="'Tooltip Content Content Content Content'" v-bind="args">aaaabaaaa</ib-button>
-        <ib-icon-button v-tooltip.rightTop="'Tooltip Content Content Content Content'">  <ion-icon style="font-size=20px" name="add"></ion-icon></ib-icon-button>
-      </div>
-      <div style="margin:20px">
-      rightCenter
-        <ib-button v-tooltip.rightCenter="'Tooltip Content Content Content Content'" v-bind="args">aaaabaaaa</ib-button>
-        <ib-icon-button v-tooltip.rightCenter="'Tooltip Content Content Content Content'">  <ion-icon style="font-size=20px" name="add"></ion-icon></ib-icon-button>
-        <ib-button v-tooltip.rightCenter="'Tooltip Content Content Content Content'" v-bind="args">Hover to me(rightCenter)</ib-button>
-      </div>
-      <div style="margin:20px">
-      rightBottom
-      <ib-icon-button v-tooltip.rightBottom="'Tooltip Content Content Content Content'">  <ion-icon style="font-size=20px" name="add"></ion-icon></ib-icon-button>
-      <ib-button v-tooltip.rightBottom="'Tooltip Content Content Content Content'" v-bind="args">Hover to me(rightCenter)</ib-button>
-    </div>
-    
-
-    </div>
-
-    `,
+  template: `<ib-button v-tooltip="'Tooltip Content'" v-bind="args">Hover to me</ib-button>`,
 });
 
 export const Default = Template.bind({});
 Default.decorators = [
   () => ({
     template:
-      '<div style="display: flex; align-items:center; justify-content: center; width: 600px; height: auto; margin: 0 auto"><story /></div>',
+      '<div style="display: flex; align-items:center; justify-content: center; width: 400px; height: 400px; margin: 0 auto"><story /></div>',
   }),
 ];

package/src/helpers/removeEvents.js

@@ -1,6 +1,6 @@
-export default function removeEvents(attrList) {
+export default function removeEvents(attrList, eventsToRemove = []) {
   for (let prop in attrList) {
-    if (prop.startsWith("on")) {
+    if (prop.startsWith("on") && (eventsToRemove.length === 0 || eventsToRemove.includes(prop))) {
       delete attrList[prop];
     }
   }

package/TODO

@@ -1,12 +0,0 @@
-[X]  topLeft
-[X]  topCenter
-[X]  topRight
-[ ]  rightTop
-[X]  rightCenter
-[ ]  rightBottom
-[X]  bottomLeft
-[X]  bottomCenter
-[X]  bottomRight
-[ ]  leftTop
-[X]  leftCenter
-[ ]  leftBottom