@avakhula/ui 0.0.33 → 0.0.34-4.1

package/src/components/IconButton/IconButton.vue

@@ -1,11 +1,10 @@
 <template>
   <ib-button
-    @click="onClick"
     v-bind="attrs"
     :href="href"
     :kind="kind"
     :disabled="disabled"
-    :tabindex="disabledFocus ? -1 : 0"
+    :prevent-default="preventDefault"
   >
     <slot></slot>
     <ib-tooltip v-if="helpText.length" :text="helpText" />
@@ -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",
@@ -53,17 +51,16 @@ export default {
       type: Boolean,
       default: false,
     },
+    preventDefault: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
       tooltipVisible: false,
     };
   },
-  methods: {
-    onClick(e) {
-      this.$emit("click", e);
-    },
-  },
   computed: {
     classes() {
       const classList = ["ib-icon-button"];
@@ -81,9 +78,13 @@ export default {
       return classList;
     },
     attrs() {
-      const attrsList = { ...removeEvents({ ...this.$attrs }) };
+      const attrsList = {...this.$attrs};
       attrsList.class = [...this.classes, attrsList.class];
 
+      if (this.disabledFocus) {
+        attrsList["tabindex"] = "-1";
+      }
+
       return attrsList;
     },
   },

package/src/components/List.vue

@@ -119,7 +119,7 @@ $item-hover-bg: $gray-100;
     }
   }
 
-  .ib-checkbox {
+  .ib-checkbox-wrapper {
     transition: background-color 0.3s;
 
     .ib-checkbox-body {

package/src/components/Modal/Modal.stories.js

@@ -29,9 +29,7 @@ const Template = (args) => ({
   },
   template: `
     <ib-modal v-bind="args">
-      <template #trigger>
-        <ib-button>Show modal</ib-button>
-      </template>
+     
       <template #header>
         Remove
       </template>
@@ -47,7 +45,11 @@ const Template = (args) => ({
         </ib-button-group>
       </template>
     </ib-modal>
+
+    <ib-button>Show modal</ib-button>
   `,
 });
 
-export const Default = Template.bind({});
+export const Default = Template.bind({
+  active: true,
+});

package/src/components/Modal/Modal.vue

@@ -11,7 +11,7 @@
 
   <Teleport to="body">
     <div class="modal" :class="classList" v-show="isActive" ref="modal">
-      <div class="modal-body" :style="bodyStyles" v-outside="clickOutside">
+      <div :class="bodyClassList" :style="bodyStyles" v-outside="clickOutside">
         <ib-icon-button
           v-if="showCloseButton"
           class="modal-close-icon"
@@ -100,11 +100,8 @@ export default {
       }
     );
 
-    document.addEventListener("keydown", (e) => {
-      if (e.keyCode === ESC_KEY_CODE && !this.stopPropagation) {
-        this.close();
-      }
-    });
+    document.addEventListener("keydown", this.onKeydown);
+    document.addEventListener("blur", this.setFocusOnModal, true);
   },
   data() {
     return {
@@ -133,6 +130,13 @@ export default {
       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();
+      }
+    },
     clickOutside(e) {
       if (this.stopPropagation) {
         return;
@@ -142,6 +146,11 @@ export default {
         this.close();
       }
     },
+    onKeydown(e) {
+      if (e.keyCode === ESC_KEY_CODE && !this.stopPropagation && this.isActive) {
+        this.close();
+      }
+    }
   },
   computed: {
     bodyStyles() {
@@ -172,6 +181,25 @@ export default {
 
       return styleList;
     },
+    bodyClassList() {
+      const classList = ["modal-body"];
+      if (this.size === modalSizes.S) {
+        classList.push("modal-body-s");
+      }
+
+      if (this.size === modalSizes.M) {
+        classList.push("modal-body-m");
+      }
+
+      if (this.size === modalSizes.L) {
+        classList.push("modal-body-l");
+      }
+
+      if (this.size === modalSizes.XL) {
+        classList.push("modal-body-xl");
+      }
+      return classList;
+    },
     hasTrigger() {
       return !!this.$slots.trigger;
     },
@@ -190,6 +218,9 @@ export default {
     if (this.isActive) {
       this.close();
     }
+
+    document.removeEventListener("keydown", this.onKeydown);
+    document.removeEventListener("blur", this.setFocusOnModal, true);
   },
 };
 </script>
@@ -202,7 +233,9 @@ export default {
 $backdrop-bg: $black-t20;
 $modal-title-color: $neutral-900;
 $modal-bg: $white;
-$modal-shadow: $ib-shadow-6;
+$modal-small-shadow: $ib-shadow-5;
+$modal-large-shadow: $ib-shadow-6;
+
 body.modal-open {
   overflow: hidden;
 }
@@ -234,19 +267,31 @@ body.modal-open {
   min-width: 380px;
   border-radius: 8px;
   max-width: calc(100% - 40px);
-  box-shadow: $modal-shadow;
   display: flex;
   flex-direction: column;
 
+  &.modal-body-s,
+  &.modal-body-m {
+    box-shadow: $modal-small-shadow;
+  }
+
+  &.modal-body-l,
+  &.modal-body-xl {
+    box-shadow: $modal-large-shadow;
+  }
+
   .modal-header {
     @include Ib-H2-medium;
     color: $modal-title-color;
     margin-bottom: 15px;
+    padding-right: 25px;
   }
 
-  .modal-content.without-title {
-    padding-right: 25px;
-    padding-top: 4px;
+  .modal-content {
+    .without-title {
+      padding-right: 25px;
+      padding-top: 4px;
+    }
   }
 
   .modal-close-icon {

package/src/components/Pagination/LimitSelector.vue

@@ -2,7 +2,7 @@
   <div class="report-limit-selector">
     <ib-label>{{ labelSelect }}</ib-label>
     <ib-select
-      class="report-limit-selector-select"
+      classList="report-limit-selector-select"
       :value="value"
       :options="prepareOptions"
       :is-multiple="false"
@@ -64,10 +64,8 @@ export default {
 </script>
 <style lang="scss">
 .report-limit-selector {
-  .report-limit-selector-select {
-    .tree-choice {
-      width: auto;
-    }
+  .tree-select {
+    width: fit-content;
   }
 }
 </style>

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/Pagination/pagination.scss

@@ -25,7 +25,7 @@
 }
 
 .report-controls {
-     display: flex;
+    display: flex;
     justify-content: space-between;
     align-items: center;
 
@@ -62,7 +62,6 @@
       input[type=number] {
         -moz-appearance: textfield;
       }
-
     }
 
     .button-prev {
@@ -87,13 +86,12 @@
     .icon-button-wrapper.button-prev {
       &.disabled {
         pointer-events: none;
-        
+
         button {
           color: $neutral-500;
         }
       }
     }
-    
 
     .pagination-wrapper {
       display: flex;
@@ -101,14 +99,13 @@
       margin: 0;
       position: relative;
 
-      
-
       .pagination-item {
         list-style: none;
         @include Ib-H4-medium;
         margin: 0 5px;
         height: 36px;
-        width: 36px;
+        min-width: 36px;
+        width: fit-content;
         background: $gray-100;
         border-radius: 4px;
         @include Ib-H4-medium;
@@ -117,7 +114,7 @@
         &.dots-left {
           position: relative;
           margin-left: 29px;
-  
+
           &::before {
             content: '...';
             position: absolute;
@@ -128,13 +125,12 @@
             transform: translateX(-50%);
             width: 14px;
           }
-  
         }
 
         &.dots-right {
           position: relative;
           margin-right: 29px;
-  
+
           &::after {
             content: '...';
             position: absolute;
@@ -145,7 +141,6 @@
             transform: translateX(50%);
             width: 14px;
           }
-  
         }
 
         &.active button {
@@ -155,7 +150,7 @@
 
         button {
           height: inherit;
-          width: inherit;
+          width: 100%;
           border: none;
           background: $gray-100;
           border-radius: 4px;
@@ -171,7 +166,7 @@
             color: $blue-700;
             background: $blue-100;
           }
-    
+
           &:active {
             border-color: transparent;
             color: $blue-900;
@@ -181,7 +176,6 @@
           &:focus {
             @include focus(2px);
           }
-
         }
       }
     }

package/src/components/Panel/Panel.stories.js

@@ -1,15 +1,8 @@
 import IbPanel from "./Panel.vue";
-import { panelVariant } from "./constants";
 
 export default {
   title: "Panel",
   component: IbPanel,
-  argTypes: {
-    variant: {
-      control: { type: "select" },
-      options: Object.values(panelVariant),
-    },
-  },
 };
 
 const Template = (args) => ({

package/src/components/Panel/Panel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="classList">
+  <div class="ib-panel" :class="{ 'panel-error': error }">
     <div class="panel-head">
       <div class="head-title">
         <slot name="title" />
@@ -24,7 +24,6 @@
 
 <script>
 import expandAnimation from "../../mixins/expandAnimation";
-import { panelVariant } from "./constants";
 
 export default {
   name: "IbPanel",
@@ -34,22 +33,18 @@ export default {
       type: Boolean,
       default: true,
     },
-    variant: {
-      type: String,
-      default: panelVariant.primary,
-    },
-  },
-  computed: {
-    classList() {
-      const classList = ["panel", `panel-${this.variant}`];
-
-      return classList;
+    error: {
+      type: Boolean,
+      default: false,
     },
   },
 };
 </script>
 
 <style lang="scss" scoped>
+@import "../../assets/scss/variables/colors.scss";
+@import "../../assets/scss/typography.scss";
+
 .expand-enter-active,
 .expand-leave-active {
   transition: height 1s ease-in-out;
@@ -61,25 +56,25 @@ export default {
   height: 0;
 }
 
-@import "../../assets/scss/variables/colors.scss";
-@import "../../assets/scss/typography.scss";
-
 $panel-border-color: $gray-200;
+$panel-error-outline-color: $red-800;
 $panel-title-color: $neutral-900;
-$panel-divider-color: $gray-200;
-$description-color: $gray-600;
-$panel-primary-body-bg: $gray-50;
-$panel-secondary-body-bg: $white;
+$panel-divider-color: $gray-300;
 
-.panel {
+.ib-panel {
   border: 1px solid $panel-border-color;
   border-radius: 4px;
 
+  &.panel-error {
+    outline: 2px solid $panel-error-outline-color;
+  }
+
   .panel-head {
     display: inline-flex;
     width: 100%;
     align-items: center;
     padding: 15px;
+    background-color: $gray-50;
 
     .head-title {
       @include Ib-H3-medium;
@@ -95,19 +90,25 @@ $panel-secondary-body-bg: $white;
     }
 
     .head-content {
+      width: 100%;
       @include Ib-H4-regular;
-      color: $description-color;
-    }
-  }
-  &.panel-primary {
-    .panel-body {
-      background-color: $panel-primary-body-bg;
     }
   }
+}
+</style>
 
-  &.panel-secondary {
-    .panel-body {
-      background-color: $panel-secondary-body-bg;
+<style lang="scss">
+@import "../../assets/scss/variables/colors.scss";
+@import "../../assets/scss/typography.scss";
+
+$description-color: $gray-700;
+
+.ib-panel {
+  .head-content {
+    width: 100%;
+    @include Ib-H4-regular;
+    p {
+      color: $description-color;
     }
   }
 }

package/src/components/Popover/Popover.vue

@@ -1,45 +1,69 @@
 <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,
+      default: false,
     },
   },
   data() {
     return {
       parentNode: null,
-      isVisible: false,
+      isVisible: this.alwaysVisible ? true : false,
+      activePosition: null,
     };
   },
   mounted() {
     this.$nextTick(() => {
       this.parentNode = this.$el.parentNode;
 
-      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);
+        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, true);
-      this.parentNode.addEventListener("mouseleave", this.hidePopover, true);
     });
   },
   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;
@@ -48,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");
@@ -58,10 +82,12 @@ export default {
     },
   },
   beforeUnmount() {
-    this.parentNode.removeEventListener("focus", this.showPopover, true);
-    this.parentNode.removeEventListener("blur", this.hidePopover, true);
-    this.parentNode.removeEventListener("mouseover", this.showPopover, true);
-    this.parentNode.removeEventListener("mouseleave", this.hidePopover, true);
+    if (!this.alwaysVisible && this.parentNode) {
+      this.parentNode.removeEventListener("focus", this.showPopover, true);
+      this.parentNode.removeEventListener("blur", this.hidePopover, true);
+      this.parentNode.removeEventListener("mouseover", this.showPopover, true);
+      this.parentNode.removeEventListener("mouseleave", this.hidePopover, true);
+    }
   },
 };
 </script>

package/src/components/Popover/constants.js

@@ -1,5 +1,5 @@
 export const popoverPosition = {
-  topLeft: "top-Left",
+  topLeft: "top-left",
   topCenter: "top-center",
   topRight: "top-right",
   rightTop: "right-top",

package/src/components/Popover/popover.scss

@@ -1,11 +1,10 @@
 @import "../../assets/scss/typography.scss";
-@import "../../assets/scss/mixins/tooltip-position.scss";
 @import "../../assets/scss/variables/colors.scss";
 @import "../../assets/scss/variables/shadows.scss";
 
 $background: $white;
 $textColor: $neutral-900;
-$shadow: $ib-shadow-4;
+$shadow: $ib-shadow-3;
 
 .ib-popover {
   position: absolute;
@@ -16,11 +15,32 @@ $shadow: $ib-shadow-4;
   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/components/ProgressBar/ProgressBar.vue

@@ -1,7 +1,15 @@
 <template>
   <div class="ib-progress-bar-wrapper">
     <div :class="classes">
-      <div class="progress" :style="{ width: progress + '%' }">
+      <div
+        class="progress"
+        role="meter"
+        :aria-label="ariaLabel"
+        aria-valuemin="0"
+        aria-valuemax="100"
+        :aria-valuenow="progress"
+        :style="{ width: progress + '%' }"
+      >
         <div class="gradient"></div>
       </div>
       <div></div>
@@ -24,6 +32,10 @@ export default {
       type: [String, Number],
       default: 0,
     },
+    ariaLabel: {
+      type: String,
+      required: true
+    }
   },
   computed: {
     classes() {
@@ -39,6 +51,7 @@ export default {
 
       if (
         this.states === progressBarStates.FAILED ||
+        this.states === progressBarStates.CANCELING ||
         this.states === progressBarStates.CANCELED
       ) {
         return "close-circle";

package/src/components/ProgressBar/constants.js

@@ -2,5 +2,6 @@ export const progressBarStates = {
   PROGRESS: "progress",
   SUCCESS: "success",
   FAILED: "failed",
+  CANCELING: "canceling",
   CANCELED: "canceled",
 };