@avakhula/ui 0.0.505 → 0.0.510-alpha-spa.1

package/src/components/IconButton/IconButton.scss

@@ -1,5 +1,9 @@
-@import "../../assets/scss/variables/colors.scss";
-@import "../../assets/scss/mixins.scss";
+@use "../../assets/scss/variables/colors.scss" as *;
+@use "../../assets/scss/mixins.scss" as *;
+
+// Disabled button colors
+$disabled-btn-background: $gray-100;
+$disabled-btn-color: $neutral-500;
 
 .ib-icon-button {
   padding: 0;
@@ -93,6 +97,13 @@
         color: $blue-900;
         background-color: $blue-200;
       }
+
+      &:disabled {
+        background: $disabled-btn-background;
+        color: $disabled-btn-color;
+        cursor: auto;
+        border-color: transparent;
+      }
     }
   }
 }

package/src/components/IconButton/IconButton.vue

@@ -2,18 +2,19 @@
   <ib-button
     v-bind="attrs"
     :href="href"
+    :to="to"
     :kind="kind"
     :disabled="disabled"
     :prevent-default="preventDefault"
+    v-tooltip="helpText"
   >
     <slot></slot>
-    <ib-tooltip v-if="helpText.length" :text="helpText" />
   </ib-button>
 </template>
 
 <script>
 import IbButton from "../Button/Button.vue";
-import IbTooltip from "../Tooltip/Tooltip.vue";
+import { TooltipDirective as Tooltip } from "../../directives/tooltip/tooltip"
 import { iconButtonKindOptions, iconButtonSize } from "./constants.js";
 
 export default {
@@ -43,6 +44,10 @@ export default {
       type: String,
       default: "",
     },
+    to: {
+      type: [String, Object],
+      default: "",
+    },
     helpText: {
       type: String,
       default: "",
@@ -90,12 +95,14 @@ export default {
   },
   components: {
     IbButton,
-    IbTooltip,
+  },
+  directives: {
+    Tooltip,
   },
   inheritAttrs: false,
 };
 </script>
 
 <style lang="scss">
-@import "./IconButton.scss";
+@use "./IconButton.scss" as *;
 </style>

package/src/components/List.vue

@@ -86,7 +86,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../assets/scss/variables/colors.scss";
+@use "../assets/scss/variables/colors.scss" as *;
 
 $item-checked-bg: $gray-100;
 $item-hover-bg: $gray-100;

package/src/components/Modal/Modal.vue

@@ -9,8 +9,8 @@
     <slot name="trigger"></slot>
   </div>
 
-  <Teleport to="body">
-    <div class="modal" :class="classList" 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();
@@ -116,8 +149,10 @@ export default {
         this.close();
       }
     },
-    onTriggerBlur() {
-      this.$refs.modal?.querySelector("a, button, [tabindex]")?.focus();
+    onTriggerBlur(e) {
+      if (!this.$refs.modal?.contains(e.relatedTarget) && this.isActive) {
+        this.$refs.modal?.querySelector("a, button, [tabindex]")?.focus();
+      }
     },
     open() {
       this.isActive = true;
@@ -125,16 +160,34 @@ export default {
       this.$emit("open");
     },
     close() {
-      this.isActive = false;
       this.$refs.trigger?.querySelector("a, button, [tabindex]")?.focus();
       document.body.classList.remove("modal-open");
       this.$emit("close");
     },
     setFocusOnModal(e) {
-      if(!this.$refs.modal?.contains(e.target) && this.isActive) {
-        this.$refs.modal.querySelector(
-          "[tabindex], a, button, input, select, textarea"
-        ).focus();
+      if (!this.isActive) return;
+
+      const openModals = Array.from(
+        document.querySelectorAll(".modal.is-active")
+      );
+
+      const topModal = openModals
+        .sort(
+          (a, b) =>
+            +(getComputedStyle(a).zIndex || 0) -
+            +(getComputedStyle(b).zIndex || 0)
+        )
+        .at(-1);
+
+      if (topModal !== this.$refs.modal) return;
+
+      if (!topModal.contains(e.target) && !topModal.contains(e.relatedTarget)) {
+        const focusable = topModal.querySelector(
+          `a[href], button:not([disabled]),
+           textarea, input:not([type="hidden"]),
+           select, [tabindex]:not([tabindex="-1"])`
+        );
+        focusable?.focus();
       }
     },
     clickOutside(e) {
@@ -147,15 +200,31 @@ 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"];
+
+      if (this.classList.length) {
+        classList.push(this.classList);
+      }
+
+      if (this.isActive) {
+        classList.push("is-active");
+      }
+
+      return classList;
+    },
     bodyStyles() {
       const styleList = {};
-
       if (this.size === modalSizes.S) {
         styleList.width = "380px";
         styleList.minHeight = "160px";
@@ -226,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/LimitSelector.vue

@@ -4,9 +4,11 @@
     <ib-select
       classList="report-limit-selector-select"
       :value="value"
+      :vertical="vertical"
       :options="prepareOptions"
       :is-multiple="false"
       :show-clear-button="false"
+      aria-label="Pagination"
       @input="selectItem"
     />
   </div>
@@ -25,6 +27,9 @@ export default {
     value: {
       type: Number,
     },
+    vertical: {
+      type: String
+    },
     options: {
       type: Array,
       default: () => [10, 25, 50, 100],

package/src/components/Pagination/Pagination.vue

@@ -1,16 +1,18 @@
 <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"
       :label-select="labelSelect"
     ></ib-limit-selector>
 
     <div class="repot-pagination">
       <template v-if="showPaginationInput">
-        <ib-label>{{ labelInput }}</ib-label>
+        <ib-label for="goToPage">{{ labelInput }}</ib-label>
         <div class="pagination-input">
-          <ib-input type="number" :debounce="500" @input="onInput"></ib-input>
+          <ib-input id="goToPage" type="number" hide-number-actions :debounce="500" @input="onInput"></ib-input>
         </div>
       </template>
 
@@ -28,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)"
@@ -68,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: {
@@ -104,9 +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,
@@ -117,11 +134,22 @@ export default {
     current(newVal) {
       this.onSelect(newVal);
     },
+    limitSelector(newVal) {
+      this.limitValue = newVal;
+    },
     limitValue() {
       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;
@@ -222,6 +250,10 @@ export default {
       return Math.ceil(this.countRows / this.limitValue);
     },
   },
+  beforeUnmount() {
+    this.resizeObserver.disconnect();
+    this.resizeObserver = null;
+  },
   components: {
     IbIconButton,
     IbIcon,
@@ -233,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

@@ -4,10 +4,26 @@
       <div class="head-title">
         <slot name="title" />
       </div>
-      <div class="divider"></div>
+
+      <div v-show="!hideHeaderDivider" class="divider"></div>
+
       <div class="head-content">
         <slot name="head-content" />
       </div>
+
+      <icon-button
+        v-if="showExpandButton"
+        :class="{
+          'toggle-visible-button': true,
+          'active': isOpenVal,
+        }"
+        kind="ghost"
+        type="button"
+        v-tooltip="expandButtonTooltip"
+        @click="isOpenVal = !isOpenVal"
+      >
+        <icon name="chevron-down-outline" />
+      </icon-button>
     </div>
     <Transition
       name="expand"
@@ -15,7 +31,7 @@
       @after-enter="afterEnter"
       @leave="leave"
     >
-      <div v-show="isOpen" class="panel-body">
+      <div v-show="isOpenVal" class="panel-body">
         <slot name="body"></slot>
       </div>
     </Transition>
@@ -23,12 +39,23 @@
 </template>
 
 <script>
+import IconButton from "../IconButton/IconButton.vue";
+import Icon from "../Icon.vue";
 import expandAnimation from "../../mixins/expandAnimation";
+import { TooltipDirective as Tooltip } from "../../directives/tooltip/tooltip";
 
 export default {
   name: "IbPanel",
   mixins: [expandAnimation],
   props: {
+    showExpandButton: {
+      type: Boolean,
+      default: false,
+    },
+    expandButtonTooltip: {
+      type: String,
+      default: "",
+    },
     isOpen: {
       type: Boolean,
       default: true,
@@ -37,13 +64,38 @@ export default {
       type: Boolean,
       default: false,
     },
+    hideHeaderDivider: {
+      type: Boolean,
+      default: false,
+    }
+  },
+  watch: {
+    isOpen() {
+      this.isOpenVal = this.isOpen;
+    },
+    isOpenVal() {
+      this.$emit("update:isOpen", this.isOpenVal);
+    },
+  },
+  data() {
+    return {
+      isOpenVal: this.isOpen,
+    };
   },
+  components: {
+    IconButton,
+    Icon,
+  },
+  directives: {
+    Tooltip,
+  },
+  emits: ["update:isOpen"],
 };
 </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 {
@@ -69,6 +121,20 @@ $panel-divider-color: $gray-300;
     outline: 2px solid $panel-error-outline-color;
   }
 
+  .toggle-visible-button {
+    margin-left: 10px;
+
+    ion-icon {
+      transition: transform 0.5s;
+    }
+
+    &.active {
+      ion-icon {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
   .panel-head {
     display: inline-flex;
     width: 100%;
@@ -98,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,9 +1,17 @@
 <template>
-  <Transition>
-    <div ref="popover" v-show="isVisible" :class="classes">
-      <slot></slot>
-    </div>
-  </Transition>
+    <Teleport :to="attachToBody ? 'body' : attachTo" v-if="attachToBody || attachTo">
+        <Transition>
+            <div ref="popover" v-show="isVisible" :class="classes">
+                <slot></slot>
+            </div>
+        </Transition>
+    </Teleport>
+
+    <Transition v-else>
+        <div ref="popover" v-show="isVisible" :class="classes">
+            <slot></slot>
+        </div>
+    </Transition>
 </template>
 
 <script>
@@ -20,6 +28,14 @@ export default {
       type: Boolean,
       default: false,
     },
+    attachToBody: {
+      type: Boolean,
+      default: false,
+    },
+    attachTo: {
+        type: String,
+        default: null
+    }
   },
   data() {
     return {
@@ -33,10 +49,10 @@ export default {
       this.parentNode = this.$el.parentNode;
 
       if (!this.alwaysVisible) {
-        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);
+        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);
       }
     });
   },
@@ -93,6 +109,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@use "./popover.scss" as *;
+
 // Transition
 .v-enter-active,
 .v-leave-active {
@@ -103,5 +121,4 @@ export default {
 .v-leave-to {
   opacity: 0;
 }
-@import "./popover.scss";
 </style>