@avakhula/ui 0.0.336 → 0.0.501

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@avakhula/ui",
-  "version": "0.0.336",
+  "version": "0.0.501",
   "main": "dist/index.js",
   "module": "dist/index.umd.cjs",
   "source": "src/index.js",
@@ -21,6 +21,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@floating-ui/dom": "^1.5.4",
     "@vueup/vue-quill": "^1.2.0",
     "mitt": "^3.0.0",
     "vue": "^3.2.45"

package/src/assets/scss/mixins/dropdown-list-item.scss

@@ -20,7 +20,14 @@
     cursor: pointer;
     transition: background-color 0.3s, border-color 0.3s;
     @include lineClamp(1);
-    
+    display: flex;
+    align-items: center;
+
+    ion-icon {
+      font-size: 16px;
+      margin-right: 15px;
+    }
+
     p {
       @include lineClamp(1);
     }

package/src/components/Form/Checkbox/Checkbox.vue

@@ -15,7 +15,7 @@
         :disabled="disabled"
         :required="required"
         v-model="checked"
-        @click="onChange"
+        @click.stop="onChange"
       />
       <div class="ib-checkbox-body">
         <span

package/src/components/Form/Radio/Radio.vue

@@ -4,8 +4,8 @@
     :class="classes"
     :for="id"
     :aria-checked="checked"
+    @click.prevent="onClick"
   >
-    <!-- @click.prevent="onClick" -->
     <input
       type="radio"
       :name="name"

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/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("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: 1000;
   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;
+    }
+  }
 }