@avakhula/ui 0.1.20 → 0.1.21

package/src/components/Modal/Modal.vue

@@ -9,8 +9,8 @@
     <slot name="trigger"></slot>
   </div>
 
-  <Teleport to="body">
-    <div :class="classes" v-show="isActive" ref="modal">
+  <Teleport to="body" v-if="isActive">
+    <div :class="classes" ref="modal">
       <div :class="bodyClassList" :style="bodyStyles" v-outside="clickOutside">
         <ib-icon-button
           v-if="showCloseButton"
@@ -76,32 +76,18 @@ export default {
   watch: {
     active(val) {
       this.isActive = val;
-    },
-  },
-  mounted() {
-    const focusableItems = this.$refs?.modal?.querySelectorAll(
-      "[tabindex], a, button, input, select, textarea"
-    );
-
-    focusableItems[0]?.addEventListener("keydown", (e) => {
-      if (e.keyCode === TAB_KEY_CODE && e.shiftKey) {
-        e.preventDefault();
-        focusableItems[focusableItems.length - 1].focus();
-      }
-    });
-
-    focusableItems[focusableItems.length - 1]?.addEventListener(
-      "keydown",
-      (e) => {
-        if (e.keyCode === TAB_KEY_CODE && !e.shiftKey) {
-          e.preventDefault();
-          focusableItems[0].focus();
-        }
+      if (val) {
+        this.$nextTick(() => {
+          this.setupFocusTrap();
+        });
+        document.addEventListener("keydown", this.onKeydown);
+        document.addEventListener("blur", this.setFocusOnModal, true);
+      } else {
+        this.cleanupFocusTrap();
+        document.removeEventListener("keydown", this.onKeydown);
+        document.removeEventListener("blur", this.setFocusOnModal, true);
       }
-    );
-
-    document.addEventListener("keydown", this.onKeydown);
-    document.addEventListener("blur", this.setFocusOnModal, true);
+    },
   },
   data() {
     return {
@@ -109,6 +95,53 @@ export default {
     };
   },
   methods: {
+    setupFocusTrap() {
+      this.focusableItems =
+        this.$refs?.modal?.querySelectorAll(
+          "[tabindex], a, button, input, select, textarea"
+        ) || [];
+
+      if (this.focusableItems.length === 0) return;
+
+      const firstItem = this.focusableItems[0];
+      const lastItem = this.focusableItems[this.focusableItems.length - 1];
+
+      this.firstFocusableHandler = (e) => {
+        if (e.keyCode === TAB_KEY_CODE && e.shiftKey) {
+          e.preventDefault();
+          lastItem.focus();
+        }
+      };
+
+      this.lastFocusableHandler = (e) => {
+        if (e.keyCode === TAB_KEY_CODE && !e.shiftKey) {
+          e.preventDefault();
+          firstItem.focus();
+        }
+      };
+
+      firstItem.addEventListener("keydown", this.firstFocusableHandler);
+      lastItem.addEventListener("keydown", this.lastFocusableHandler);
+
+      firstItem.focus();
+    },
+    cleanupFocusTrap() {
+      if (this.focusableItems.length === 0) return;
+
+      const firstItem = this.focusableItems[0];
+      const lastItem = this.focusableItems[this.focusableItems.length - 1];
+
+      if (this.firstFocusableHandler) {
+        firstItem?.removeEventListener("keydown", this.firstFocusableHandler);
+      }
+      if (this.lastFocusableHandler) {
+        lastItem?.removeEventListener("keydown", this.lastFocusableHandler);
+      }
+
+      this.firstFocusableHandler = null;
+      this.lastFocusableHandler = null;
+      this.focusableItems = [];
+    },
     showModal(value) {
       if (value) {
         this.open();
@@ -117,7 +150,7 @@ export default {
       }
     },
     onTriggerBlur(e) {
-      if (!this.$refs.modal?.contains(e.relatedTarget) && this.isActive ) {
+      if (!this.$refs.modal?.contains(e.relatedTarget) && this.isActive) {
         this.$refs.modal?.querySelector("a, button, [tabindex]")?.focus();
       }
     },
@@ -135,21 +168,20 @@ export default {
       if (!this.isActive) return;
 
       const openModals = Array.from(
-        document.querySelectorAll('.modal.is-active')
+        document.querySelectorAll(".modal.is-active")
       );
 
       const topModal = openModals
-        .sort((a, b) =>
-          +(getComputedStyle(a).zIndex || 0) - +(getComputedStyle(b).zIndex || 0)
+        .sort(
+          (a, b) =>
+            +(getComputedStyle(a).zIndex || 0) -
+            +(getComputedStyle(b).zIndex || 0)
         )
         .at(-1);
 
-      if (topModal !== (this.$refs.modal)) return;
+      if (topModal !== this.$refs.modal) return;
 
-      if (
-        !topModal.contains(e.target) &&
-        !topModal.contains(e.relatedTarget)
-      ) {
+      if (!topModal.contains(e.target) && !topModal.contains(e.relatedTarget)) {
         const focusable = topModal.querySelector(
           `a[href], button:not([disabled]),
            textarea, input:not([type="hidden"]),
@@ -168,24 +200,28 @@ export default {
       }
     },
     onKeydown(e) {
-      if (e.keyCode === ESC_KEY_CODE && !this.stopPropagation && this.isActive) {
+      if (
+        e.keyCode === ESC_KEY_CODE &&
+        !this.stopPropagation &&
+        this.isActive
+      ) {
         this.close();
       }
-    }
+    },
   },
   computed: {
     classes() {
-        const classList = ["modal"];
+      const classList = ["modal"];
 
-        if (this.classList.length) {
-          classList.push(this.classList);
-        }
+      if (this.classList.length) {
+        classList.push(this.classList);
+      }
 
-        if (this.isActive) {
-          classList.push("is-active");
-        }
+      if (this.isActive) {
+        classList.push("is-active");
+      }
 
-        return classList;
+      return classList;
     },
     bodyStyles() {
       const styleList = {};
@@ -259,9 +295,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/scss/variables/colors.scss";
-@import "../../assets/scss/variables/shadows.scss";
-@import "../../assets/scss/typography.scss";
+@use "../../assets/scss/variables/colors.scss" as *;
+@use "../../assets/scss/variables/shadows.scss" as *;
+@use "../../assets/scss/typography.scss" as *;
 
 $backdrop-bg: $black-t20;
 $modal-title-color: $neutral-900;

package/src/components/Pagination/Pagination.vue

@@ -1,6 +1,7 @@
 <template>
-  <div class="report-controls">
+  <div ref="paginationControl" class="report-controls" :class="{ 'simple-pagination': !showLimitSelector }">
     <ib-limit-selector
+      v-if="showLimitSelector"
       @select="changeLimit"
       :value="limitValue"
       :vertical="vertical"
@@ -29,7 +30,10 @@
         <ib-tooltip v-if="tooltipTextPrev" :text="tooltipTextPrev"></ib-tooltip>
       </ib-icon-button>
 
-      <ul class="pagination-wrapper">
+      <p v-if="isShort" class="pagination-text">
+          {{ currentPage }} Page
+      </p>
+      <ul v-else class="pagination-wrapper">
         <li
           v-for="(item, index) of countPagePagination"
           v-show="showItem(index + 1)"
@@ -69,6 +73,9 @@ import IbInput from "../Form/Input/Input.vue";
 import IbLabel from "../Form/Label/Label.vue";
 import IbIcon from "../Icon.vue";
 import IbTooltip from "../Tooltip/Tooltip.vue";
+
+const MIN_FULL_WIDTH = 475;
+
 export default {
   name: "IbPagination",
   props: {
@@ -105,12 +112,18 @@ export default {
       type: Boolean,
       default: true,
     },
+    showLimitSelector: {
+        type: Boolean,
+        default: true,
+    },
     vertical: {
       type: String
     }
   },
   data() {
     return {
+      isShort: false,
+      resizeObserver: null,
       currentPage: this.current,
       indexSpaceLeft: null,
       indexSpaceRight: null,
@@ -128,7 +141,15 @@ export default {
       this.currentPage = 1;
     },
   },
+  mounted() {
+      this.handleResize();
+      this.resizeObserver = new ResizeObserver(this.handleResize);
+      this.resizeObserver.observe(this.$refs.paginationControl);
+  },
   methods: {
+    handleResize() {
+        this.isShort = this.$refs.paginationControl.clientWidth < MIN_FULL_WIDTH;
+    },
     changeLimit(val) {
       if (Number.isInteger(val)) {
         this.limitValue = val;
@@ -229,6 +250,10 @@ export default {
       return Math.ceil(this.countRows / this.limitValue);
     },
   },
+  beforeUnmount() {
+    this.resizeObserver.disconnect();
+    this.resizeObserver = null;
+  },
   components: {
     IbIconButton,
     IbIcon,
@@ -240,5 +265,5 @@ export default {
 };
 </script>
 <style lang="scss">
-@import "./pagination.scss";
+@use "./pagination.scss" as *;
 </style>

package/src/components/Pagination/pagination.scss

@@ -1,6 +1,6 @@
-@import "../../assets/scss/variables/colors.scss";
-@import "../../assets/scss/typography.scss";
-@import "../../assets/scss/mixins.scss";
+@use "../../assets/scss/variables/colors.scss" as *;
+@use "../../assets/scss/typography.scss" as *;
+@use "../../assets/scss/mixins.scss" as *;
 
 .report-limit-selector {
   display: flex;
@@ -29,12 +29,28 @@
     justify-content: space-between;
     align-items: center;
 
+    &.simple-pagination {
+        width: 100%;
+
+        .repot-pagination {
+            width: 100%;
+        }
+
+        .row-count {
+            margin-right: auto;
+        }
+    }
   .row-count {
     margin-right: 10px;
     @include Ib-H4-regular;
     color: $gray-600;
   }
 
+  .pagination-text {
+      @include Ib-H4-regular;
+      color: $gray-600;
+      margin: 0 8px;
+  }
   .repot-pagination {
     display: flex;
     align-items: center;
@@ -180,4 +196,4 @@
       }
     }
   }
-}
+}

package/src/components/Panel/Panel.vue

@@ -94,8 +94,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/scss/variables/colors.scss";
-@import "../../assets/scss/typography.scss";
+@use "../../assets/scss/variables/colors.scss" as *;
+@use "../../assets/scss/typography.scss" as *;
 
 .expand-enter-active,
 .expand-leave-active {
@@ -164,8 +164,8 @@ $panel-divider-color: $gray-300;
 </style>
 
 <style lang="scss">
-@import "../../assets/scss/variables/colors.scss";
-@import "../../assets/scss/typography.scss";
+@use "../../assets/scss/variables/colors.scss" as *;
+@use "../../assets/scss/typography.scss" as *;
 
 $description-color: $gray-700;
 

package/src/components/Popover/Popover.vue

@@ -1,5 +1,5 @@
 <template>
-    <Teleport to="body" v-if="attachToBody">
+    <Teleport :to="attachToBody ? 'body' : attachTo" v-if="attachToBody || attachTo">
         <Transition>
             <div ref="popover" v-show="isVisible" :class="classes">
                 <slot></slot>
@@ -32,6 +32,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    attachTo: {
+        type: String,
+        default: null
+    }
   },
   data() {
     return {
@@ -105,6 +109,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@use "./popover.scss" as *;
+
 // Transition
 .v-enter-active,
 .v-leave-active {
@@ -115,5 +121,4 @@ export default {
 .v-leave-to {
   opacity: 0;
 }
-@import "./popover.scss";
 </style>

package/src/components/Popover/popover.scss

@@ -1,6 +1,6 @@
-@import "../../assets/scss/typography.scss";
-@import "../../assets/scss/variables/colors.scss";
-@import "../../assets/scss/variables/shadows.scss";
+@use "../../assets/scss/typography.scss" as *;
+@use "../../assets/scss/variables/colors.scss" as *;
+@use "../../assets/scss/variables/shadows.scss" as *;
 
 $background: $white;
 $textColor: $neutral-900;

package/src/components/ProgressBar/ProgressBar.vue

@@ -67,5 +67,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "./progressBar.scss";
+@use "./progressBar.scss" as *;
 </style>

package/src/components/ProgressBar/progressBar.scss

@@ -1,4 +1,4 @@
-@import "../../assets/scss/variables/colors.scss";
+@use "../../assets/scss/variables/colors.scss" as *;
 
 $progress-bar-bg: $gray-300;
 $progress-bar-gradient: linear-gradient(

package/src/components/Sorting/Sorting.vue

@@ -210,5 +210,5 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-@import "./sorting.scss";
+@use "./sorting.scss" as *;
 </style>

package/src/components/Sorting/sorting.scss

@@ -1,7 +1,7 @@
-@import "../../assets/scss/typography.scss";
-@import "../../assets/scss/variables/colors.scss";
-@import "../../assets/scss/reset.scss";
-@import "../../assets/scss/mixins.scss";
+@use "../../assets/scss/typography.scss" as *;
+@use "../../assets/scss/variables/colors.scss" as *;
+@use "../../assets/scss/reset.scss" as *;
+@use "../../assets/scss/mixins.scss" as *;
 
 button {
   padding: 0;
@@ -87,4 +87,4 @@ button {
       @include focus(2px);
     }
   }
-}
+}

package/src/components/SplitButton/SplitButton.vue

@@ -178,5 +178,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "./splitButton.scss";
+@use "./splitButton.scss" as *;
 </style>

package/src/components/SplitButton/SplitButtonItem.vue

@@ -41,6 +41,6 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-@import "../../assets/scss/mixins/dropdown-list-item.scss";
+@use "../../assets/scss/mixins/dropdown-list-item.scss" as *;
 @include DropdownListItem;
 </style>

package/src/components/SplitButton/splitButton.scss

@@ -1,6 +1,6 @@
-@import "../../assets/scss/variables/colors.scss";
-@import "../../assets/scss/typography.scss";
-@import "../../assets/scss/mixins.scss";
+@use "../../assets/scss/variables/colors.scss" as *;
+@use "../../assets/scss/typography.scss" as *;
+@use "../../assets/scss/mixins.scss" as *;
 
 $split-button-color: $white;
 $split-button-disabled-color: $neutral-500;

package/src/components/StatusIndicator/StatusIndicator.vue

@@ -24,8 +24,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/scss/variables/colors.scss";
-@import "../../assets/scss//typography.scss";
+@use "../../assets/scss/variables/colors.scss" as *;
+@use "../../assets/scss//typography.scss" as *;
 
 @keyframes loader {
   from {

package/src/components/Table/Cells/Cell.vue

@@ -43,8 +43,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../../assets/scss/typography.scss";
-@import "../../../assets/scss/variables/colors.scss";
+@use "../../../assets/scss/typography.scss" as *;
+@use "../../../assets/scss/variables/colors.scss" as *;
 
 .ib-cell {
   @include Ib-H4-regular;

package/src/components/Table/Row.vue

@@ -11,7 +11,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../../assets/scss/variables/colors.scss";
+@use "../../assets/scss/variables/colors.scss" as *;
 .ib-tr {
   .ib-cell {
     background-color: $white;

package/src/components/Tabs/TabDropdown.vue

@@ -89,5 +89,5 @@ export default {
 };
 </script>
 <style lang="scss">
-@import "./tabs.scss";
+@use "./tabs.scss" as *;
 </style>

package/src/components/Tabs/Tabs.vue

@@ -3,23 +3,23 @@
     <ul class="tabs-list">
       <li class="tab-item" v-for="(tab, index) in tabs" :key="index">
         <div v-if="!tab.name" class="wrapper-tab-link">
-          <a
+          <component
+            :is="setHref ? 'a' : 'div'"
+            v-bind="setHref ? { href: createHref(tab.id), target: '_self' } : {}"
             class="tab-link"
             :class="{
               active: selectedTab === tab.id,
               disabled: tab.disabled,
             }"
-            :href="createHref(tab.id)"
             :tabindex="tab.disabled ? -1 : 0"
             @click="selectTab(tab.id)"
-            target="_self"
           >
             <ib-icon class="tab-icon" v-if="tab.icon" :name="tab.icon" />
 
             <template v-if="showTitle">
               {{ tab.title }}
             </template>
-          </a>
+          </component>
         </div>
         <ib-tab-dropdown
           v-else
@@ -51,6 +51,10 @@ export default {
       type: String,
       default: "",
     },
+    setHref: {
+      type: Boolean,
+      default: false,
+    }
   },
   data() {
     return {
@@ -124,5 +128,5 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-@import "./tabs.scss";
+@use "./tabs.scss" as *;
 </style>

package/src/components/Tabs/tabs.scss

@@ -1,7 +1,7 @@
-@import "../../assets/scss/variables/colors.scss";
-@import "../../assets/scss/typography.scss";
-@import "../../assets/scss/mixins.scss";
-@import "../../assets/scss/reset.scss";
+@use "../../assets/scss/variables/colors.scss" as *;
+@use "../../assets/scss/typography.scss" as *;
+@use "../../assets/scss/mixins.scss" as *;
+@use "../../assets/scss/reset.scss" as *;
 
 .tabs {
 

package/src/components/TagPill/TagPill.vue

@@ -56,8 +56,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/scss/typography.scss";
-@import "../../assets/scss/variables/colors.scss";
+@use "../../assets/scss/typography.scss" as *;
+@use "../../assets/scss/variables/colors.scss" as *;
 
 $neutral-tag-bg: $gray-100;
 $neutral-tag-color: $neutral-600;

package/src/components/ToggleTip/ToggleTip.vue

@@ -95,7 +95,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "./toggleTip.scss";
+@use "./toggleTip.scss" as *;
 </style>
 
 <style lang="scss" scoped>

package/src/components/ToggleTip/toggleTip.scss

@@ -1,7 +1,7 @@
-@import "../../assets/scss/typography.scss";
-@import "../../assets/scss/mixins/tooltip-position.scss";
-@import "../../assets/scss/variables/colors.scss";
-@import "../../assets/scss/variables/shadows.scss";
+@use "../../assets/scss/typography.scss" as *;
+@use "../../assets/scss/mixins/tooltip-position.scss" as *;
+@use "../../assets/scss/variables/colors.scss" as *;
+@use "../../assets/scss/variables/shadows.scss" as *;
 
 $background: $white;
 $textColor: $neutral-900;
@@ -19,7 +19,7 @@ $shadow: $ib-shadow-3;
   bottom: auto;
   left: auto;
   right: auto;
-  z-index: 100; 
+  z-index: 100;
   @include TooltipPosition;
 
   &-head {

package/src/components/Tooltip/Tooltip.vue

@@ -45,9 +45,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/scss/typography.scss";
-@import "../../assets/scss/variables/shadows.scss";
-@import "../../assets/scss/mixins.scss";
+@use "../../assets/scss/typography.scss" as *;
+@use "../../assets/scss/variables/shadows.scss" as *;
+@use "../../assets/scss/mixins.scss" as *;
 
 .ib-tooltip {
   padding: 10px;