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

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,7 +95,9 @@ export default {
   },
   components: {
     IbButton,
-    IbTooltip,
+  },
+  directives: {
+    Tooltip,
   },
   inheritAttrs: false,
 };

package/src/components/Modal/Modal.vue

@@ -10,7 +10,7 @@
   </div>
 
   <Teleport to="body">
-    <div class="modal" :class="classList" v-show="isActive" ref="modal">
+    <div :class="classes" v-show="isActive" ref="modal">
       <div :class="bodyClassList" :style="bodyStyles" v-outside="clickOutside">
         <ib-icon-button
           v-if="showCloseButton"
@@ -116,8 +116,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 +127,35 @@ 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) {
@@ -153,9 +174,21 @@ export default {
     }
   },
   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";

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,

package/src/components/Pagination/pagination.scss

@@ -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,7 +64,32 @@ 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>
 
@@ -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%;

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);
       }
     });
   },

package/src/components/Popover/popover.scss

@@ -15,7 +15,7 @@ $shadow: $ib-shadow-3;
   color: $textColor;
   border-radius: 4px;
   box-shadow: $shadow;
-  z-index: 1000;
+  z-index: 9998;
   text-align: start;
 
   &.ib {

package/src/components/Sorting/Sorting.vue

@@ -8,33 +8,31 @@
       }"
       v-if="view === sortingTypesView.TABLE_VIEW"
     >
-      <div>
-        <button
-          class="sorting-label"
-          v-tooltip:[sortingTooltipPosition]="sortingTooltipContent"
-          :class="{
-            'sorting-label-active': isOpenToggleTip && hasToggleTip,
-            'has-action': tooltipText?.length || hasToggleTip
-          }"
-          type="button"
-          @click="isOpenToggleTip = !isOpenToggleTip"
-        >
-          {{ title }}
-        </button>
+      <button
+        class="sorting-label"
+        v-tooltip:[sortingTooltipPosition]="sortingTooltipContent"
+        :class="{
+          'sorting-label-active': isOpenToggleTip && hasToggleTip,
+          'has-action': tooltipText?.length || hasToggleTip
+        }"
+        type="button"
+        @click="isOpenToggleTip = !isOpenToggleTip"
+      >
+        {{ title }}
+      </button>
 
-        <ib-toggle-tip
-          v-if="hasToggleTip"
-          position="bottom-center"
-          :is-open="isOpenToggleTip"
-          :title="toggleTipTitle"
-          @close="isOpenToggleTip = false"
-        >
-          <slot name="toggleTipBody"></slot>
-          <template #buttons>
-            <slot name="toggleTipButtons"></slot>
-          </template>
-        </ib-toggle-tip>
-      </div>
+      <ib-toggle-tip
+        v-if="hasToggleTip"
+        position="bottom-center"
+        :is-open="isOpenToggleTip"
+        :title="toggleTipTitle"
+        @close="isOpenToggleTip = false"
+      >
+        <slot name="toggleTipBody"></slot>
+        <template #buttons>
+          <slot name="toggleTipButtons"></slot>
+        </template>
+      </ib-toggle-tip>
 
       <ib-icon-button
         v-if="!hideSortingButton"

package/src/components/SplitButton/SplitButton.vue

@@ -1,16 +1,20 @@
 <template>
   <div :class="classes">
-    <button
-      :disabled="disabled"
-      v-if="!isLink"
+
+    <router-link
+      v-if="isRouterLink"
       class="split-button-main"
+      :class="{ disabled }"
+      :disabled="disabled"
+      :to="mainButtonAttrs.to"
       v-bind="mainButtonAttrs"
+      @click="onClickLink"
     >
       {{ content }}
-    </button>
+    </router-link>
 
     <a
-      v-else
+      v-else-if="isLink"
       class="split-button-main"
       :class="{ disabled }"
       :disabled="disabled"
@@ -20,7 +24,16 @@
       {{ content }}
     </a>
 
-    <ib-dropdown-list :disabled="disabled" :closeOnClick="true">
+    <button
+      v-else
+      :disabled="disabled"
+      class="split-button-main"
+      v-bind="mainButtonAttrs"
+    >
+      {{ content }}
+    </button>
+
+    <ib-dropdown-list :disabled="disabled" :closeOnClick="true" :vertical="verticalPosition" :horizontal="verticalPosition === 'top' ? 'right' : 'left'">
       <template #trigger>
         <button :disabled="disabled" class="split-button-menu-trigger">
           <ib-icon name="chevron-down-outline" />
@@ -53,6 +66,10 @@ export default {
       type: String,
       default: splitButtonKindOptions.common,
     },
+    verticalPosition: {
+      type: String,
+      default: "bottom",
+    },
     disabled: {
       type: Boolean,
       default: false,
@@ -83,7 +100,20 @@ export default {
       }
     }
 
-    this.setActiveItem();
+    this.$nextTick(() => {
+      this.setActiveItem();
+    });
+
+    this.listObserver = new MutationObserver((mutationsList) => {
+        for (const mutation of mutationsList) {
+            if (mutation.type === "attributes" && mutation.attributeName === "disabled") {
+                this.mainButtonAttrs.disabled = mutation.target.disabled;
+                break;
+            }
+        }
+    });
+
+    this.listObserver.observe(this.$refs.list, { attributes: true, subtree: true });
   },
   data() {
     return {
@@ -91,7 +121,9 @@ export default {
       content: "",
       mainButtonAttrs: {},
       isLink: false,
+      isRouterLink: false,
       childList: [],
+      listObserver: null,
     };
   },
   components: {
@@ -100,14 +132,21 @@ export default {
   },
   methods: {
     setActiveItem() {
-      this.mainButtonAttrs = this.$slots.default()[this.activeElemIdx].props;
+      const attrs = this.$slots.default()[this.activeElemIdx].props;
 
+      this.mainButtonAttrs = attrs;
       if (this.mainButtonAttrs && "href" in this.mainButtonAttrs) {
         this.isLink = true;
       } else {
         this.isLink = false;
       }
 
+      if (this.mainButtonAttrs && "to" in this.mainButtonAttrs) {
+        this.isRouterLink = true;
+      } else {
+        this.isRouterLink = false;
+      }
+
       this.childList[this.activeElemIdx].classList.add("active");
       this.content = this.childList[this.activeElemIdx].textContent;
     },
@@ -131,6 +170,10 @@ export default {
       this.setActiveItem();
     },
   },
+  beforeUnmount() {
+    this.listObserver.disconnect();
+    this.listObserver = null;
+  }
 };
 </script>