@avakhula/ui 0.0.104 → 0.0.106

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@avakhula/ui",
-  "version": "0.0.104",
+  "version": "0.0.106",
   "main": "dist/index.js",
   "module": "dist/index.umd.cjs",
   "source": "src/index.js",
@@ -29,23 +29,23 @@
     "@babel/core": "^7.20.7",
     "@babel/preset-env": "^7.21.4",
     "@rushstack/eslint-patch": "^1.1.4",
-    "@storybook/addon-a11y": "^7.0.22",
-    "@storybook/addon-actions": "^7.0.22",
-    "@storybook/addon-docs": "^7.0.22",
-    "@storybook/addon-essentials": "^7.0.22",
-    "@storybook/addon-interactions": "^7.0.22",
-    "@storybook/addon-links": "^7.0.22",
-    "@storybook/addon-mdx-gfm": "^7.0.22",
+    "@storybook/addon-a11y": "^7.1.0",
+    "@storybook/addon-actions": "^7.1.0",
+    "@storybook/addon-docs": "^7.1.0",
+    "@storybook/addon-essentials": "^7.1.0",
+    "@storybook/addon-interactions": "^7.1.0",
+    "@storybook/addon-links": "^7.1.0",
+    "@storybook/addon-mdx-gfm": "^7.1.0",
     "@storybook/testing-library": "^0.2.0",
-    "@storybook/vue3": "^7.0.22",
-    "@storybook/vue3-vite": "^7.0.22",
+    "@storybook/vue3": "^7.1.0",
+    "@storybook/vue3-vite": "^7.1.0",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vitest/coverage-c8": "^0.28.4",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/test-utils": "^2.2.10",
     "babel-loader": "^8.3.0",
     "eslint": "^8.22.0",
-    "eslint-plugin-storybook": "^0.6.12",
+    "eslint-plugin-storybook": "^0.6.13",
     "eslint-plugin-vue": "^9.3.0",
     "flatpickr": "^4.6.13",
     "jsdom": "^21.1.0",
@@ -56,7 +56,7 @@
     "react-dom": "^18.2.0",
     "sass": "^1.57.1",
     "sass-loader": "^13.2.0",
-    "storybook": "^7.0.22",
+    "storybook": "^7.1.0",
     "vite": "^4.0.0",
     "vitest": "^0.28.4",
     "vue-loader": "^16.8.3",

package/src/components/Form/Input/Input.vue

@@ -6,6 +6,7 @@
       <input
         v-bind="attrs"
         v-model="actualValue"
+        :readonly="readonly"
         :disabled="disabled"
         :id="id"
         :class="classes"
@@ -19,8 +20,9 @@
       <ib-icon-button
         kind="ghost"
         class="button-clear"
-        @click.prevent="clearInput"
+        :disabled="readonly"
         :help-text="clearButtonMessage"
+        @click.prevent="clearInput"
         v-if="actualValue?.length && type !== 'password' && showClearButton"
       >
         <ib-icon name="close-outline"></ib-icon>
@@ -29,6 +31,7 @@
       <ib-icon-button
         kind="ghost"
         class="toggle-password"
+        :disabled="readonly"
         :help-text="showPassword ? hidePasswordMessage : showPasswordMessage"
         @click.prevent="toggleShowPassword"
         v-if="actualValue?.length && type === 'password'"
@@ -146,6 +149,10 @@ export default {
       type: String,
       default: horizontalPosition.right,
     },
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {

package/src/components/Form/Input/input.scss

@@ -90,7 +90,7 @@ $input-border-error-color: $red-800;
       color: $input-placeholder-color;
     }
 
-    &:hover {
+    &:hover:not(&:read-only) {
       color: $input-hover-color;
       background-color: $input-hover-bg;
       border-bottom-color: $input-hover-border-color;

package/src/components/Panel/Panel.vue

@@ -93,6 +93,7 @@ $description-color: $gray-700;
     .head-content {
       @include Ib-H4-regular;
       color: $description-color;
+      width: 100%;
     }
   }
 }

package/src/components/Popover/Popover.vue

@@ -16,11 +16,15 @@ export default {
       type: String,
       default: popoverPosition.topCenter,
     },
+    alwaysVisible: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
       parentNode: null,
-      isVisible: false,
+      isVisible: this.alwaysVisible ? true : false,
     };
   },
   mounted() {
@@ -31,10 +35,12 @@ export default {
         this.parentNode.style.position = "relative";
       }
 
-      this.parentNode.addEventListener("focus", this.showPopover, true);
-      this.parentNode.addEventListener("blur", this.hidePopover, true);
-      this.parentNode.addEventListener("mouseover", this.showPopover, true);
-      this.parentNode.addEventListener("mouseleave", this.hidePopover, true);
+      if (!this.alwaysVisible) {
+        this.parentNode.addEventListener("focus", this.showPopover, true);
+        this.parentNode.addEventListener("blur", this.hidePopover, true);
+        this.parentNode.addEventListener("mouseover", this.showPopover, true);
+        this.parentNode.addEventListener("mouseleave", this.hidePopover, true);
+      }
     });
   },
   methods: {
@@ -58,10 +64,12 @@ export default {
     },
   },
   beforeUnmount() {
-    this.parentNode.removeEventListener("focus", this.showPopover, true);
-    this.parentNode.removeEventListener("blur", this.hidePopover, true);
-    this.parentNode.removeEventListener("mouseover", this.showPopover, true);
-    this.parentNode.removeEventListener("mouseleave", this.hidePopover, true);
+    if (!this.alwaysVisible) {
+      this.parentNode.removeEventListener("focus", this.showPopover, true);
+      this.parentNode.removeEventListener("blur", this.hidePopover, true);
+      this.parentNode.removeEventListener("mouseover", this.showPopover, true);
+      this.parentNode.removeEventListener("mouseleave", this.hidePopover, true);
+    }
   },
 };
 </script>

package/src/components/Tooltip/Tooltip.vue

@@ -1,5 +1,9 @@
 <template>
-  <ib-popover :position="position" :class="classList">
+  <ib-popover
+    :position="position"
+    :always-visible="alwaysVisible"
+    :class="classList"
+  >
     <b v-if="title">{{ title }}</b>
     <p>{{ text }}</p>
   </ib-popover>
@@ -20,6 +24,10 @@ export default {
     text: {
       type: String,
     },
+    alwaysVisible: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     classList() {
@@ -46,6 +54,17 @@ export default {
   max-width: 240px;
   box-shadow: $ib-shadow-1;
 
+  &::after {
+    content: "";
+    width: 100%;
+    height: calc(100% + 5px);
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: -5px;
+    z-index: -1;
+  }
+
   &.ib-tooltip-large {
     box-shadow: $ib-shadow-2;
   }

package/src/directives/tooltip/TooltipController.js

@@ -7,22 +7,35 @@ export default class Tooltip {
     this.tooltipContainer = null;
   }
 
+  getTooltipInstance() {
+    return this.getTooltipInstance;
+  }
+
+  getTooltipContainer() {
+    return this.tooltipContainer;
+  }
+
   createTooltip(el, text) {
+    if (!text.trim().length) {
+      return;
+    }
+
     const tooltipContainerStyles = `
       position: absolute;
       top: 0px;
       left: 0px;
     `;
+
     this.tooltipContainer = document.createElement("div");
     this.tooltipContainer.setAttribute("style", tooltipContainerStyles);
 
     document.body.appendChild(this.tooltipContainer);
     this.tooltipInstance = createApp(IbTooltip, {
       text: text,
+      alwaysVisible: true,
     });
 
     this.tooltipInstance.mount(this.tooltipContainer);
-    this.tooltipContainer.firstChild.setAttribute("style", "display: block");
 
     setTimeout(() => {
       if (this.tooltipContainer?.firstChild) {
@@ -45,11 +58,9 @@ export default class Tooltip {
   }
 
   destroyTooltip() {
-    if (this.tooltipInstance && this.tooltipContainer) {
-      this.tooltipInstance.unmount();
-      this.tooltipInstance = null;
-      this.tooltipContainer.remove();
-      this.tooltipContainer = null;
-    }
+    this.tooltipInstance?.unmount();
+    this.tooltipInstance = null;
+    this.tooltipContainer?.remove();
+    this.tooltipContainer = null;
   }
 }

package/src/directives/tooltip/tooltip.js

@@ -2,22 +2,33 @@ import Tooltip from "./TooltipController";
 
 const tooltip = new Tooltip();
 const createTooltip = (el, binding) => {
-  tooltip.createTooltip(el, binding.value);
+  if (!tooltip.getTooltipContainer()) {
+    tooltip.createTooltip(el, binding.value);
+  }
 };
 
-const destroyTooltip = () => {
-  tooltip.destroyTooltip();
+const destroyTooltip = (event, el) => {
+  const tooltipContainer = tooltip.getTooltipContainer();
+
+  const isMouseOverEl = el !== event.target && !el.contains(event.target);
+  const isMouseOverTooltip =
+    tooltipContainer !== event.target &&
+    !tooltipContainer?.contains(event.target);
+
+  if (isMouseOverEl && isMouseOverTooltip) {
+    tooltip.destroyTooltip();
+  }
 };
 
 export const TooltipDirective = {
   mounted(el, binding) {
     el.addEventListener("mouseenter", () => createTooltip(el, binding));
-    el.addEventListener("mouseleave", destroyTooltip);
+    document.addEventListener("mousemove", (e) => destroyTooltip(e, el));
   },
 
   beforeUnmount(el, binding) {
     tooltip.destroyTooltip();
     el.removeEventListener("mouseenter", () => createTooltip(el, binding));
-    el.removeEventListener("mouseleave", destroyTooltip);
+    document.removeEventListener("mousemove", (e) => destroyTooltip(e, el));
   },
 };