@avakhula/ui 0.0.352 → 0.0.353

package/src/components/Form/TextEditor/TextEditor.vue

@@ -32,11 +32,11 @@
         ref="wrapper"
       >
         <QuillEditor
+          aria-label="text-editor"
           @textChange="onChange"
           @blur="onBlur"
           @focus="onFocus"
           ref="quill"
-          toolbar="#toolbar"
           v-model:content="data"
           contentType="html"
           :options="config"
@@ -44,8 +44,18 @@
         ></QuillEditor>
       </div>
       <div id="toolbar" class="toolbar" ref="toolbar">
+
+        <div class="toolbar-group header-toolbar-group" v-if="placeholders.length">
+          <label class="toolbar-group__label" for="placeholders">Placeholder Selector</label>
+          <select id="placeholders" class="ql-placeholder">
+            <option selected value="default" class="disabled"></option>
+            <option v-for="placeholder in placeholders" :key="placeholder.id" :value="placeholder.id">{{ placeholder.label }}</option>
+          </select>
+        </div>
+
         <div class="toolbar-group header-toolbar-group">
-          <select class="ql-header">
+          <label class="toolbar-group__label" for="header-selector">Header Selector</label>
+          <select id="header-selector" class="ql-header">
             <option value="1"></option>
             <option value="2"></option>
             <option value="3"></option>
@@ -58,34 +68,42 @@
 
         <div class="toolbar-group">
           <ib-icon-button
+            aria-label="button-bold"
             class="toolbar-item ql-bold"
             kind="ghost"
           ></ib-icon-button>
           <ib-icon-button
+            aria-label="button-italic"
             class="toolbar-item ql-italic"
             kind="ghost"
           ></ib-icon-button>
           <ib-icon-button
+            aria-label="button-underline"
             class="toolbar-item ql-underline"
             kind="ghost"
           ></ib-icon-button>
           <ib-icon-button
+            aria-label="button-strike"
             class="toolbar-item ql-strike"
             kind="ghost"
           ></ib-icon-button>
         </div>
 
         <div class="toolbar-group">
-          <select class="ql-background"></select>
-          <select class="ql-color"></select>
+          <label class="toolbar-group__label" for="background-selector">Background Selector</label>
+          <select id="background-selector" class="ql-background"></select>
+          <label class="toolbar-group__label" for="color-selector">Background Color Selector</label>
+          <select id="color-selector" class="ql-color"></select>
         </div>
 
         <div class="toolbar-group">
           <ib-icon-button
+              aria-label="button-code-block"
             class="toolbar-item ql-code-block"
             kind="ghost"
           ></ib-icon-button>
           <ib-icon-button
+              aria-label="button-link"
             class="toolbar-item ql-link"
             kind="ghost"
           ></ib-icon-button>
@@ -93,20 +111,24 @@
 
         <div class="toolbar-group">
           <ib-icon-button
+              aria-label="button-align"
             class="toolbar-item ql-align"
             kind="ghost"
           ></ib-icon-button>
           <ib-icon-button
+              aria-label="button-align-center"
             class="ql-align toolbar-item"
             value="center"
             kind="ghost"
           ></ib-icon-button>
           <ib-icon-button
+              aria-label="button-align-right"
             class="ql-align toolbar-item"
             value="right"
             kind="ghost"
           ></ib-icon-button>
           <ib-icon-button
+              aria-label="button-align-justify"
             class="ql-align toolbar-item"
             value="justify"
             kind="ghost"
@@ -115,17 +137,20 @@
 
         <div class="toolbar-group">
           <ib-icon-button
+              aria-label="button-ordered-list"
             class="ql-list toolbar-item"
             value="ordered"
             kind="ghost"
           ></ib-icon-button>
           <ib-icon-button
+              aria-label="button-bullet-list"
             class="ql-list toolbar-item"
             value="bullet"
             kind="ghost"
           ></ib-icon-button>
 
           <ib-icon-button
+              aria-label="button-alphabet-list"
             class="ql-alphabet-list alphabet-list toolbar-item"
             kind="ghost"
           ></ib-icon-button>
@@ -141,6 +166,7 @@ import IbIconButton from "../../IconButton/IconButton.vue";
 import IbAlert from "../../Alert/Alert.vue";
 import IbCharacterCount from "../CharactersCount.vue";
 import {AlphabetList, AlphabetListItem} from "./plugins/alphabetList";
+import getPlaceholderModule from 'quill-placeholder-module';
 import "@vueup/vue-quill/dist/vue-quill.snow.css";
 
 import {
@@ -179,6 +205,11 @@ Quill.register({
   "formats/alphabet-list/item": AlphabetListItem,
 });
 
+Quill.register('modules/placeholder', getPlaceholderModule(Quill, {
+  className: 'ql-placeholder-content'
+}))
+
+
 Quill.register(icons);
 Quill.debug("error");
 
@@ -193,6 +224,10 @@ export default {
       type: String,
       default: "",
     },
+    placeholders: {
+      type: Array,
+      default: () => []
+    },
     modelValue: {
       type: String,
     },
@@ -291,6 +326,13 @@ export default {
         placeholder: this.data.length ? "" : this.placeholder,
         readOnly: this.readOnly ? this.readOnly : this.disable,
         enable: this.enable,
+        modules: {
+          toolbar: {container: '#toolbar'},
+          placeholder: {
+            delimiters: ['{{', '}}'],
+            placeholders: this.placeholders
+          }
+        },
       };
 
       return Object.assign(config, this.options);

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

@@ -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.scss

@@ -14,7 +14,7 @@ $textarea-hover-border-color: $blue-700;
 $textarea-error-outline-color: $red-800;
 
 .textarea-wrapper {
-  width: fit-content;
+  width: 100%;
   position: relative;
 
   .character-count {
@@ -36,6 +36,7 @@ $textarea-error-outline-color: $red-800;
 
 textarea.ib-textarea {
   @include Ib-H4-regular;
+  width: 100%;
   height: 80px;
   min-height: 36px;
   border: none;
@@ -76,6 +77,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/Modal/Modal.vue

@@ -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;
@@ -131,9 +133,9 @@ export default {
       this.$emit("close");
     },
     setFocusOnModal(e) {
-      if(!this.$refs.modal?.contains(e.target) && this.isActive) {
+      if((!this.$refs.modal?.contains(e.target) && !this.$refs.modal?.contains(e.relatedTarget))  && this.isActive) {
         this.$refs.modal.querySelector(
-          "[tabindex], a, button, input, select, textarea"
+            "[tabindex], a, button, input, select, textarea"
         ).focus();
       }
     },

package/src/components/Pagination/Pagination.vue

@@ -9,9 +9,9 @@
 
     <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" :debounce="500" @input="onInput"></ib-input>
         </div>
       </template>
 

package/src/components/TreeSelect/Select.vue

@@ -124,9 +124,10 @@
             class="tree-search"
             v-if="showSearch"
             ref="search"
-            :show-icon="true"
             autocomplete="off"
+            :show-icon="true"
             :value="filterString"
+            :debounce="searchDebounce"
             :aria-label="
               searchPlaceholderText
                 ? searchPlaceholderText
@@ -252,6 +253,8 @@
                 </slot>
               </template>
             </template>
+
+            <div v-if="infiniteLoader" ref="infinityLoader"></div>
           </list>
         </div>
       </template>
@@ -270,6 +273,7 @@ import IbIcon from "../Icon.vue";
 import IbIconButton from "../IconButton/IconButton.vue";
 import IbAlert from "../Alert/Alert.vue";
 import List from "../List.vue";
+import InfinityLoaderMixin from "./mixins/InfinityLoaderMixin";
 
 function copy(data) {
     return JSON.parse(JSON.stringify(data));
@@ -278,8 +282,13 @@ function copy(data) {
 export default {
   name: "IbTreeSelect",
   inject: ["LANG_COMPONENTS"],
+  mixins: [InfinityLoaderMixin],
   props: {
     classList: [String, Array],
+    keywordHighlighter: {
+      type: Boolean,
+      default: true,
+    },
     placeholder: {
       type: String,
       default: "",
@@ -427,7 +436,11 @@ export default {
     disable: {
       type: Boolean,
       default: false
-    }
+    },
+    searchDebounce: {
+      type: Number,
+      default: 0,
+    },
   },
   emits: [
     "close",
@@ -530,7 +543,7 @@ export default {
       const filterString = this.filterString.toLowerCase().trim();
       this.filterFunc.call(this, options, filterString);
 
-      if (filterString) {
+      if (filterString && this.keywordHighlighter) {
         this.marker.mark(filterString);
       }
     };
@@ -675,7 +688,7 @@ export default {
     },
     filter(filterString, options) {
       this.filterString = filterString;
-      this.$emit("search", { search: this.filterString });
+      this.$emit("search", this.filterString);
       this.defaultFilter(options);
     },
     setPreparedValues(opt) {

package/src/components/TreeSelect/mixins/InfinityLoaderMixin.js

@@ -0,0 +1,40 @@
+export default {
+    props: {
+        infiniteLoader: {
+            type: Boolean,
+            default: true,
+        },
+    },
+    watch: {
+        infiniteLoader(newValue) {
+            if (!newValue) {
+                infiniteLoaderObserver.disconnect();
+            }
+        }
+    },
+    data() {
+        return {
+            infiniteLoaderObserver: null,
+        }
+    },
+    mounted() {
+        if (this.infiniteLoader) {
+
+            this.infiniteLoaderObserver = new IntersectionObserver((entries) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        this.$emit('loadMoreOptions');
+                    }
+                });
+            });
+
+            this.infiniteLoaderObserver.observe(this.$refs.infinityLoader);
+        }
+    },
+    beforeDestroy() {
+        if (this.infiniteLoader) {
+            infiniteLoaderObserver?.disconnect();
+        }
+    },
+    emits: ['loadMoreOptions'],
+};

package/src/directives/tooltip/tooltip.js

@@ -24,6 +24,15 @@ const destroyTooltip = (event, el) => {
 
   const tooltipContainer = tooltip.getTooltipContainer();
 
+  if(event.type === "blur") {
+    if(!el.contains(event.relatedTarget)) {
+      tooltip.destroyTooltip(el);
+    }
+
+    return;
+  }
+
+  // Remove Hover
   const isMouseOverEl = el !== event.target && !el.contains(event.target);
   const isMouseOverTooltip =
     tooltipContainer !== event.target &&
@@ -40,12 +49,18 @@ const attachTooltipListeners = (el, binding) => {
 
   el.addEventListener("mouseenter", el.__tooltip_create);
   document.addEventListener("mousemove", el.__tooltip_destroy);
+
+  el.addEventListener("focus", el.__tooltip_create);
+  el.addEventListener("blur", el.__tooltip_destroy, true);
 };
 
 const removeTooltipListeners = (el) => {
   tooltip.destroyTooltip(el);
   el.removeEventListener("mouseenter", el.__tooltip_create);
   document.removeEventListener("mousemove", el.__tooltip_destroy);
+
+  el.removeEventListener("focus", el.__tooltip_create);
+  el.removeEventListener("blur", el.__tooltip_destroy, true);
 };
 
 export const TooltipDirective = {

package/src/index.js

@@ -26,6 +26,7 @@ export { default as IbLimitSelector } from "./components/Pagination/LimitSelecto
 export { default as IbProgressBar } from "./components/ProgressBar/ProgressBar.vue";
 export { default as IbStatusIndicator } from "./components/StatusIndicator/StatusIndicator.vue";
 export { default as IbPanel } from "./components/Panel/Panel.vue";
+export { default as IbChips } from "./components/Chips/Chips.vue";
 
 // FORM
 export { default as IbInput } from "./components/Form/Input/Input.vue";
@@ -40,6 +41,7 @@ export { default as IbTreeSelect } from "./components/TreeSelect/Select.vue";
 export { default as IbDatePicker } from "./components/Form/DatePicker/DatePicker.vue";
 export { default as IbPhoneInput } from "./components/Form/PhoneInput/PhoneInput.vue";
 export { default as IbTextEditor } from "./components/Form/TextEditor/TextEditor.vue";
+export {default as IbCharactersCount } from "./components/Form/CharactersCount.vue";
 
 // Table
 export { default as IbTable } from "./components/Table/Table.vue";