@avakhula/ui 0.0.503 → 0.0.505-alpha-spa.2

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

@@ -23,6 +23,8 @@
       {{ characterLimitErrorMessage }}
     </ib-alert>
 
+    <input :name="name" type="hidden" :disabled="disable" :value="data">
+
     <div class="ib-text-editor-wrapper" :class="{ disable: disable }">
       <div
         class="ib-text-editor"
@@ -30,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"
@@ -42,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">івф</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>
@@ -56,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>
@@ -91,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"
@@ -113,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>
@@ -134,27 +161,28 @@
 </template>
 
 <script>
-import { QuillEditor, Quill } from "@vueup/vue-quill";
+import {Quill, QuillEditor} from "@vueup/vue-quill";
 import IbIconButton from "../../IconButton/IconButton.vue";
 import IbAlert from "../../Alert/Alert.vue";
 import IbCharacterCount from "../CharactersCount.vue";
-import { AlphabetList, AlphabetListItem } from "./plugins/alphabetList";
+import {AlphabetList, AlphabetListItem} from "./plugins/alphabetList";
+import getPlaceholderModule from 'quill-placeholder-module';
 import "@vueup/vue-quill/dist/vue-quill.snow.css";
 
 import {
+  ALIGN_CENTER,
+  ALIGN_JUSTIFY,
+  ALIGN_LEFT,
+  ALIGN_RIGHT,
   BOLD,
-  ITALIC,
-  UNDERLINE,
-  STRIKE,
   CODE,
+  ITALIC,
   LINK,
-  ALIGN_LEFT,
-  ALIGN_CENTER,
-  ALIGN_RIGHT,
-  ALIGN_JUSTIFY,
-  LIST_ORDERED,
-  LIST_BULLET,
   LIST_ALPHABET,
+  LIST_BULLET,
+  LIST_ORDERED,
+  STRIKE,
+  UNDERLINE,
 } from "./icons/toolbarIcons";
 
 const icons = Quill.import("ui/icons");
@@ -177,16 +205,29 @@ Quill.register({
   "formats/alphabet-list/item": AlphabetListItem,
 });
 
+Quill.register('modules/placeholder', getPlaceholderModule(Quill, {
+  className: 'ql-placeholder-content'
+}))
+
+
 Quill.register(icons);
 Quill.debug("error");
 
 export default {
   name: "IbTextEditor",
   props: {
+    name: {
+      type: String,
+      required: true
+    },
     placeholder: {
       type: String,
       default: "",
     },
+    placeholders: {
+      type: Array,
+      default: () => []
+    },
     modelValue: {
       type: String,
     },
@@ -234,6 +275,7 @@ export default {
       type: String,
     },
   },
+  emits: ['onOverLimitHandler', 'update:modelValue', 'change', 'blur'],
   mounted() {
     // Reset default styles for toolbar
     this.$refs.toolbar.classList.remove("ql-toolbar");
@@ -258,6 +300,9 @@ export default {
     data(val) {
       this.$emit("update:modelValue", val);
     },
+    characterOverLimit(value) {
+      this.$emit('onOverLimitHandler', value);
+    }
   },
   methods: {
     onChange() {
@@ -281,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 {

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,10 +61,22 @@ 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: {
@@ -93,6 +109,7 @@ export default {
     IbAlert,
     IbCharacterCount,
   },
+  emits: ["input", "blur", "update:value"],
   inheritAttrs: false,
 };
 </script>

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 {
@@ -32,10 +32,24 @@ $textarea-error-outline-color: $red-800;
       color: $neutral-500;
     }
   }
+
+  &.hasActins {
+    textarea {
+      padding-bottom: 40px;
+    }
+  }
+
+  .textarea-actions {
+    position: absolute;
+    bottom: 10px;
+    left: 10px;
+    right: 10px;
+  }
 }
 
 textarea.ib-textarea {
   @include Ib-H4-regular;
+  width: 100%;
   height: 80px;
   min-height: 36px;
   border: none;
@@ -76,6 +90,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

@@ -2,6 +2,7 @@
   <ib-button
     v-bind="attrs"
     :href="href"
+    :to="to"
     :kind="kind"
     :disabled="disabled"
     :prevent-default="preventDefault"
@@ -43,6 +44,10 @@ export default {
       type: String,
       default: "",
     },
+    to: {
+      type: [String, Object],
+      default: "",
+    },
     helpText: {
       type: String,
       default: "",

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;
@@ -125,15 +127,14 @@ 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) {
+      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/LimitSelector.vue

@@ -4,6 +4,7 @@
     <ib-select
       classList="report-limit-selector-select"
       :value="value"
+      :vertical="vertical"
       :options="prepareOptions"
       :is-multiple="false"
       :show-clear-button="false"
@@ -25,6 +26,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" :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

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

@@ -33,10 +33,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 {