@avakhula/ui 0.0.338 → 0.0.339

package/src/components/IconButton/IconButton.vue

@@ -1,6 +1,5 @@
 <template>
   <ib-button
-    @click="onClick"
     v-bind="attrs"
     :href="href"
     :kind="kind"
@@ -16,7 +15,6 @@
 import IbButton from "../Button/Button.vue";
 import IbTooltip from "../Tooltip/Tooltip.vue";
 import { iconButtonKindOptions, iconButtonSize } from "./constants.js";
-import removeEvents from "../../helpers/removeEvents";
 
 export default {
   name: "IbIconButton",
@@ -63,11 +61,6 @@ export default {
       tooltipVisible: false,
     };
   },
-  methods: {
-    onClick(e) {
-      this.$emit("click", e);
-    },
-  },
   computed: {
     classes() {
       const classList = ["ib-icon-button"];
@@ -85,8 +78,7 @@ export default {
       return classList;
     },
     attrs() {
-      const attrsList = removeEvents({ ...this.$attrs }, ['onClick']);
-
+      const attrsList = {...this.$attrs};
       attrsList.class = [...this.classes, attrsList.class];
 
       if (this.disabledFocus) {

package/src/components/Pagination/Pagination.vue

@@ -117,6 +117,9 @@ export default {
     current(newVal) {
       this.onSelect(newVal);
     },
+    limitSelector(newVal) {
+      this.limitValue = newVal;
+    },
     limitValue() {
       this.currentPage = 1;
     },

package/src/components/Popover/Popover.vue

@@ -1,20 +1,20 @@
 <template>
   <Transition>
-    <div v-show="isVisible" :class="classes">
+    <div ref="popover" v-show="isVisible" :class="classes">
       <slot></slot>
     </div>
   </Transition>
 </template>
 
 <script>
-import { popoverPosition } from "./constants";
+import { computePosition, autoPlacement } from '@floating-ui/dom';
 
 export default {
   name: "IbPopover",
   props: {
     position: {
-      type: String,
-      default: popoverPosition.topCenter,
+      type: [String, Array],
+      default: 'top',
     },
     alwaysVisible: {
       type: Boolean,
@@ -25,29 +25,45 @@ export default {
     return {
       parentNode: null,
       isVisible: this.alwaysVisible ? true : false,
+      activePosition: null,
     };
   },
   mounted() {
     this.$nextTick(() => {
       this.parentNode = this.$el.parentNode;
 
-      if (!this.parentNode) return;
-
-      if (getComputedStyle(this.parentNode).position !== "absolute") {
-        this.parentNode.style.position = "relative";
-      }
-
       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);
+        this.parentNode?.addEventListener("focus", this.showPopover, true);
+        this.parentNode?.addEventListener("blur", this.hidePopover, true);
+        this.parentNode?.addEventListener("mouseover", this.showPopover);
+        this.parentNode?.addEventListener("mouseleave", this.hidePopover);
       }
     });
   },
   methods: {
     showPopover() {
+      if (this.isVisible) return;
       this.isVisible = true;
+
+      computePosition(
+          this.parentNode,
+          this.$refs.popover,
+          {
+            middleware: [
+              autoPlacement({
+                allowedPlacements: this.position,
+              })
+            ]
+          }
+        )
+          .then(({x, y, placement }) => {
+            this.activePosition = placement;
+
+            Object.assign(this.$refs.popover.style, {
+              left: `${x}px`,
+              top: `${y}px`,
+            });
+        });
     },
     hidePopover() {
       this.isVisible = false;
@@ -56,7 +72,7 @@ export default {
   computed: {
     classes() {
       const classList = ["ib-popover"];
-      classList.push(`ib-${this.position}`);
+      classList.push(`ib-${this.activePosition}`);
 
       if (this.isVisible) {
         classList.push("active");

package/src/components/Popover/popover.scss

@@ -1,5 +1,4 @@
 @import "../../assets/scss/typography.scss";
-@import "../../assets/scss/mixins/tooltip-position.scss";
 @import "../../assets/scss/variables/colors.scss";
 @import "../../assets/scss/variables/shadows.scss";
 
@@ -16,11 +15,32 @@ $shadow: $ib-shadow-3;
   color: $textColor;
   border-radius: 4px;
   box-shadow: $shadow;
-  top: auto;
-  bottom: auto;
-  left: auto;
-  right: auto;
-  @include TooltipPosition;
-  z-index: 100;
+  z-index: 9998;
   text-align: start;
+
+  &.ib {
+    &-right,
+    &-right-start,
+    &-right-end {
+      margin-left: 7px;
+    }
+
+    &-left,
+    &-left-start,
+    &-left-end {
+      margin-left: -7px;
+    }
+
+    &-top,
+    &-top-start,
+    &-top-end {
+      margin-top: -7px;
+    }
+
+    &-bottom,
+    &-bottom-start,
+    &-bottom-end {
+      margin-bottom: -7px;
+    }
+  }
 }

package/src/directives/tooltip/TooltipController.js

@@ -37,6 +37,7 @@ export default class Tooltip {
       position: absolute;
       top: 0px;
       left: 0px;
+      opacity: 0;
     `;
 
     this.tooltipContainer = document.createElement("div");
@@ -59,6 +60,7 @@ export default class Tooltip {
 
         const tooltipStyles = this.getPositionStyle(el, position);
         this.tooltipContainer.firstChild.setAttribute("style", tooltipStyles);
+        this.tooltipContainer.setAttribute("style", {'opacity': 1});
       }
     }, 100);
   }