@avakhula/ui 0.1.13 → 0.1.15

package/src/components/Form/TextEditor/textEditor.scss

@@ -30,13 +30,13 @@ $input-hover-error-color: $red-800;
 
 // AlphabeticalList list style
 ol[type="a"] li::before {
-  content: counter(list-1, lower-alpha) ". ";
+  content: counter(list-1, lower-alpha) ". "!important;
 }
 ol[type="a"] li {
-  counter-increment: list-1;
+  counter-increment: list-1!important;
 }
 ol[type="a"] li {
-  counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+  counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9!important;
 }
 
 .textarea-wrapper {
@@ -197,7 +197,7 @@ ol[type="a"] li {
     .ib-text-editor {
       background-color: $blue-100;
       border-bottom-color: $blue-700;
-  
+
       & + .toolbar {
         background-color: $blue-100;
       }
@@ -235,11 +235,11 @@ ol[type="a"] li {
 
   .toolbar {
     position: absolute;
-    bottom: 2px;
+    bottom: 1.5px;
     left: 12px;
     right: 25px;
     padding-top: 10px;
-    padding-bottom: 8px;
+    padding-bottom: 5px;
     display: flex;
     flex-wrap: wrap;
     margin: 0 -10px;
@@ -249,6 +249,10 @@ ol[type="a"] li {
       display: flex;
       padding: 0 10px;
 
+      &__label {
+        display: none;
+      }
+
       &:last-child {
         &::before {
           display: none;
@@ -274,6 +278,24 @@ ol[type="a"] li {
     }
   }
 
+  .ql-picker.ql-placeholder {
+    width: 118px;
+
+    .ql-picker-options {
+      [data-value='default'] {
+        display: none;
+      }
+    }
+  }
+
+  .ql-picker.ql-placeholder > span.ql-picker-label::before {
+    content: 'Placeholders';
+  }
+
+  .ql-picker.ql-placeholder > span.ql-picker-options > span.ql-picker-item::before {
+    content: attr(data-label);
+  }
+
   // Headings dropdown
   .ql-snow .ql-picker.ql-header .ql-picker-item {
     &::before {
@@ -395,37 +417,39 @@ ol[type="a"] li {
     }
   }
 
-  .ql-picker-options {
-    left: -2px;
-    margin-top: 5px !important;
-    border-radius: 4px;
-    padding: 6.5px 0;
-    background-color: $white;
-    box-shadow: $ib-shadow-4;
+  .ql-snow {
+    .ql-picker-options {
+      left: -2px;
+      margin-top: 5px !important;
+      border-radius: 4px;
+      padding: 6.5px 0;
+      background-color: $white;
+      box-shadow: $ib-shadow-4;
 
-    .ql-picker-item {
-      height: 36px;
-      padding: 0px 15px 0px 13px;
-      display: flex;
-      align-items: center;
-      border-left: 2px solid transparent;
-      transition: border-color 0.3s, background-color 0.3s;
-      @include focus();
+      .ql-picker-item {
+        height: 36px;
+        padding: 0px 15px 0px 13px;
+        display: flex;
+        align-items: center;
+        border-left: 2px solid transparent;
+        transition: border-color 0.3s, background-color 0.3s;
+        @include focus();
 
-      &:before {
-        color: $neutral-900;
-      }
+        &:before {
+          color: $neutral-900;
+        }
 
-      &:hover {
-        background-color: $gray-100;
-      }
+        &:hover {
+          background-color: $gray-100;
+        }
 
-      &.ql-selected {
-        border-color: $blue-900;
-        background-color: $gray-100;
+        &.ql-selected {
+          border-color: $blue-900;
+          background-color: $gray-100;
 
-        &:hover {
-          background-color: $blue-50;
+          &:hover {
+            background-color: $blue-50;
+          }
         }
       }
     }

package/src/components/Form/Textarea/Textarea.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="textarea-wrapper" :class="{ disabled: disabled }">
+  <div class="textarea-wrapper" :class="{ disabled: disabled, hasActins: $slots.actions }">
     <ib-character-count
       v-if="characterLimit"
       :character-limit="characterLimit"
@@ -20,6 +20,10 @@
       :class="classes"
       :disabled="disabled"
     ></textarea>
+
+    <div class="textarea-actions">
+      <slot name="actions"></slot>
+    </div>
   </div>
 </template>
 
@@ -57,22 +61,30 @@ export default {
       type: String,
       default: "",
     },
+    value: {
+      type: String,
+      default: "",
+    },
+  },
+  watch: {
+    value() {
+      this.val = this.value;
+    },
+    val() {
+      this.$emit("update:value", this.val);
+    },
   },
   data() {
     return {
-      val: "",
+      val: this.value,
     };
   },
   methods: {
     onInput() {
-      if (!this.characterOverLimit) {
         this.$emit("input", this.val);
-      }
     },
     onBlur() {
-      if (!this.characterOverLimit) {
         this.$emit("blur", this.val);
-      }
     },
   },
   computed: {
@@ -93,6 +105,7 @@ export default {
     IbAlert,
     IbCharacterCount,
   },
+  emits: ["input", "blur", "update:value"],
   inheritAttrs: false,
 };
 </script>

package/src/components/Form/Textarea/textarea.scss

@@ -14,8 +14,10 @@ $textarea-hover-border-color: $blue-700;
 $textarea-error-outline-color: $red-800;
 
 .textarea-wrapper {
-  width: fit-content;
+  background-color: $textarea-bg;
+  width: 100%;
   position: relative;
+  border-radius: 4px 4px 0px 0px;
 
   .character-count {
     position: absolute;
@@ -32,14 +34,35 @@ $textarea-error-outline-color: $red-800;
       color: $neutral-500;
     }
   }
+
+  &.hasActins {
+    textarea {
+      padding-bottom: 40px;
+    }
+  }
+
+  .textarea-actions {
+    background-color: inherit;
+    position: absolute;
+    bottom: 3px;
+    left: 0;
+    right: 10px;
+    padding: 0 10px 2px 10px;
+    transition: background-color 0.3s;
+  }
+
+  &:hover {
+        background-color: $textarea-hover-bg;
+  }
 }
 
 textarea.ib-textarea {
   @include Ib-H4-regular;
+  width: 100%;
   height: 80px;
   min-height: 36px;
   border: none;
-  background-color: $textarea-bg;
+  background-color: inherit;
   color: $textarea-text-color;
   padding: 10px 15px;
   resize: vertical;
@@ -76,6 +99,11 @@ textarea.ib-textarea {
     }
   }
 
+  &:read-only:hover {
+    background-color: $textarea-bg;
+    color: $textarea-text-color;
+  }
+
   &.error {
     border-radius: 4px;
     border-bottom-color: transparent;

package/src/components/IconButton/IconButton.scss

@@ -1,6 +1,10 @@
 @import "../../assets/scss/variables/colors.scss";
 @import "../../assets/scss/mixins.scss";
 
+// Disabled button colors
+$disabled-btn-background: $gray-100;
+$disabled-btn-color: $neutral-500;
+
 .ib-icon-button {
   padding: 0;
   display: flex;
@@ -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

@@ -1,8 +1,8 @@
 <template>
   <ib-button
-    @click="onClick"
     v-bind="attrs"
     :href="href"
+    :to="to"
     :kind="kind"
     :disabled="disabled"
     :prevent-default="preventDefault"
@@ -16,7 +16,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",
@@ -45,6 +44,10 @@ export default {
       type: String,
       default: "",
     },
+    to: {
+      type: [String, Object],
+      default: "",
+    },
     helpText: {
       type: String,
       default: "",
@@ -63,11 +66,6 @@ export default {
       tooltipVisible: false,
     };
   },
-  methods: {
-    onClick(e) {
-      this.$emit("click", e);
-    },
-  },
   computed: {
     classes() {
       const classList = ["ib-icon-button"];
@@ -85,8 +83,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/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

@@ -3,14 +3,15 @@
     <ib-limit-selector
       @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>
 
@@ -104,6 +105,9 @@ export default {
       type: Boolean,
       default: true,
     },
+    vertical: {
+      type: String
+    }
   },
   data() {
     return {
@@ -117,6 +121,9 @@ export default {
     current(newVal) {
       this.onSelect(newVal);
     },
+    limitSelector(newVal) {
+      this.limitValue = newVal;
+    },
     limitValue() {
       this.currentPage = 1;
     },

package/src/components/Panel/Panel.vue

@@ -1,13 +1,29 @@
 <template>
-  <div class="panel" :class="{ 'panel-error': error }">
+  <div class="ib-panel" :class="{ 'panel-error': error }">
     <div class="panel-head">
       <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>
 
@@ -60,9 +112,8 @@ $panel-border-color: $gray-200;
 $panel-error-outline-color: $red-800;
 $panel-title-color: $neutral-900;
 $panel-divider-color: $gray-300;
-$description-color: $gray-700;
 
-.panel {
+.ib-panel {
   border: 1px solid $panel-border-color;
   border-radius: 4px;
 
@@ -70,6 +121,20 @@ $description-color: $gray-700;
     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%;
@@ -91,9 +156,25 @@ $description-color: $gray-700;
     }
 
     .head-content {
+      width: 100%;
       @include Ib-H4-regular;
+    }
+  }
+}
+</style>
+
+<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;
-      width: 100%;
     }
   }
 }