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

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/components/TreeSelect/scss/option.scss

@@ -89,6 +89,14 @@ $option-checked-hover-bg: $blue-50;
     }
   }
 
+  &.alphabetic-option {
+    max-width: 65px;
+    width: 65px;
+    &.tree-select-option-checked {
+      background-color: white;
+    }
+  }
+
   .tree-select-option-label {
     &:hover {
       background-color: $option-hover-bg;
@@ -110,6 +118,19 @@ $option-checked-hover-bg: $blue-50;
     }
   }
 
+  &.has-icon {
+    border-top: 1px solid $gray-200;
+
+    .option-label {
+      display: flex;
+      align-items: center;
+
+      ion-icon {
+        margin-right: 15px;
+      }
+    }
+  }
+
   .tree-select-option {
     .toggle-children,
     .option-label,
@@ -128,6 +149,12 @@ $option-checked-hover-bg: $blue-50;
         transform: translateX(50px);
       }
 
+      .bookmarkable-option-content {
+        .option-label {
+          width: calc(100% - 85px);
+        }
+      }
+
       .option-label {
         width: calc(100% - 75px);
       }
@@ -205,4 +232,8 @@ $option-checked-hover-bg: $blue-50;
       }
     }
   }
+
+  .disabled {
+    color: $neutral-500 !important;
+  }
 }

package/src/components/TreeSelect/scss/select.scss

@@ -20,6 +20,14 @@ $choice-opened-icon-color: $blue-900;
 $choice-border-error-color: $red-800;
 $tree-search-border-color: $gray-600;
 
+.disable {
+  .tree-choice {
+    background-color: $gray-100 !important;
+    color: $neutral-500 !important;
+    border-bottom: 1px solid $neutral-500 !important;
+  }
+}
+
 .tree-select-error {
   margin-bottom: 5px;
 }
@@ -156,7 +164,7 @@ $tree-search-border-color: $gray-600;
 
     .ib-input-wrapper {
       margin-bottom: 6.5px;
-      
+
       & > div {
         overflow: visible;
       }
@@ -166,9 +174,36 @@ $tree-search-border-color: $gray-600;
       margin: 0;
       overflow: auto;
       max-height: 360px;
+
+      .ib-list {
+        max-height: fit-content;
+      }
     }
   }
 
+  .bookmarkable-option-content {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    justify-content: space-between;
+
+    .option-label {
+      width: calc(100% - 65px);
+
+      ion-icon {
+        color: $blue-900;
+      }
+    }
+  }
+
+  .tree-select-option-label {
+    width: 99.5%;
+  }
+
+  .bookmarkable-option-title {
+    width: inherit;
+  }
+
   .ib-dropdown-menu {
     position: inherit;
   }
@@ -178,10 +213,11 @@ $tree-search-border-color: $gray-600;
     cursor: move;
     background: transparent;
     z-index: 2;
+    width: 3px;
+    transition: background 0.3s;
 
     &.ib-dropdown-resizer-left,
     &.ib-dropdown-resizer-right {
-      width: 3px;
       top: 0;
       bottom: 0;
     }
@@ -195,6 +231,10 @@ $tree-search-border-color: $gray-600;
       right: 0;
       cursor: e-resize;
     }
+
+    &:hover {
+      background-color: $blue-700;
+    }
   }
 
   .tree-select-default-empty {
@@ -205,4 +245,55 @@ $tree-search-border-color: $gray-600;
   .tree-select-empty {
     padding: 15px;
   }
+
+  .alphabetic-list {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+  }
+
+  &.disabled-parent-autocheck {
+      .tree-select-option {
+        &.tree-select-option-indeterminate {
+            .ib-checkbox-input {
+                background-color: transparent;
+
+                ion-icon {
+                    color: $blue-900;
+                }
+            }
+
+            .ib-checkbox-body:hover .ib-checkbox-input {
+                background-color: transparent!important;
+                border-color: #a6ceff !important;
+            }
+        }
+
+        &.tree-select-option-checked {
+            .ib-checkbox-input {
+                border-color: #0060D6;
+                background-color: #0060D6;
+
+                ion-icon {
+                    color: white;
+                }
+            }
+
+            .ib-checkbox-body:hover .ib-checkbox-input {
+                background-color: $blue-700 !important;
+                border-color: $blue-700 !important;
+            }
+
+            .ib-list {
+                .ib-checkbox:not(.ib-checkbox-filled) .ib-checkbox-input {
+                    background-color: transparent;
+
+                    ion-icon {
+                        color: $blue-900;
+                    }
+                }
+            }
+        }
+      }
+  }
 }

package/src/constants/keyCodes.js

@@ -6,3 +6,4 @@ export const ARROW_UP_KEY_CODE = 38;
 export const ARROW_LEFT_KEY_CODE = 37;
 export const ARROW_RIGHT_KEY_CODE = 39;
 export const ARROW_DOWN_KEY_CODE = 40;
+export const BACKSPACE_KEY_CODE = 8;

package/src/directives/tooltip/TooltipController.js

@@ -37,6 +37,7 @@ export default class Tooltip {
       position: absolute;
       top: 0px;
       left: 0px;
+      opacity: 0;
     `;
 
     this.tooltipContainer = document.createElement("div");
@@ -59,6 +60,7 @@ export default class Tooltip {
 
         const tooltipStyles = this.getPositionStyle(el, position);
         this.tooltipContainer.firstChild.setAttribute("style", tooltipStyles);
+        this.tooltipContainer.setAttribute("style", {'opacity': 1});
       }
     }, 100);
   }

package/src/directives/tooltip/textOverflowTooltip.js

@@ -6,12 +6,14 @@ const tooltip = new Tooltip();
 const createTooltip = (el, binding) => {
   if (multiLineOverflows(el)) {
 
+    const position = Object.keys(binding.modifiers)[0] || binding.arg;
+
     const content = {
       title: binding.value.title || '',
       text: typeof(binding.value) === 'object' ? binding.value.text : binding.value,
     }
 
-    tooltip.createTooltip(el, content);
+    tooltip.createTooltip(el, content, position);
   }
 };
 

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 &&
@@ -34,18 +43,70 @@ const destroyTooltip = (event, el) => {
   }
 };
 
+const handleScroll = (el, binding) => {
+  tooltip.destroyTooltip(el);
+
+  if (el.__tooltip_scroll_timeout) {
+    clearTimeout(el.__tooltip_scroll_timeout);
+  }
+
+  el.__tooltip_scroll_timeout = setTimeout(() => {
+    const rect = el.getBoundingClientRect();
+    const mouseEvent = el.__tooltip_last_mouse_event;
+
+    if (mouseEvent) {
+      const { clientX, clientY } = mouseEvent;
+      const isOverElement =
+        clientX >= rect.left &&
+        clientX <= rect.right &&
+        clientY >= rect.top &&
+        clientY <= rect.bottom;
+
+      if (isOverElement) {
+        createTooltip(el, binding);
+      }
+    }
+  }, 250);
+};
+
+const trackMousePosition = (el) => {
+  return (e) => {
+    el.__tooltip_last_mouse_event = e;
+  };
+};
+
 const attachTooltipListeners = (el, binding) => {
+
   el.__tooltip_create = () => createTooltip(el, binding);
   el.__tooltip_destroy = (e) => destroyTooltip(e, el);
+  el.__tooltip_scroll = () => handleScroll(el, binding);
+  el.__tooltip_track_mouse = trackMousePosition(el);
 
   el.addEventListener("mouseenter", el.__tooltip_create);
   document.addEventListener("mousemove", el.__tooltip_destroy);
+  document.addEventListener("mousemove", el.__tooltip_track_mouse);
+  document.addEventListener("scroll", el.__tooltip_scroll, true);
+
+  el.addEventListener("focus", el.__tooltip_create);
+  el.addEventListener("blur", el.__tooltip_destroy, true);
 };
 
 const removeTooltipListeners = (el) => {
+  if (el.__tooltip_scroll_timeout) {
+    clearTimeout(el.__tooltip_scroll_timeout);
+  }
+
   tooltip.destroyTooltip(el);
   el.removeEventListener("mouseenter", el.__tooltip_create);
   document.removeEventListener("mousemove", el.__tooltip_destroy);
+  document.removeEventListener("mousemove", el.__tooltip_track_mouse);
+  document.removeEventListener("scroll", el.__tooltip_scroll, true);
+
+  el.removeEventListener("focus", el.__tooltip_create);
+  el.removeEventListener("blur", el.__tooltip_destroy, true);
+
+  delete el.__tooltip_last_mouse_event;
+  delete el.__tooltip_scroll_timeout;
 };
 
 export const TooltipDirective = {

package/src/helpers/debounce.js

@@ -0,0 +1,23 @@
+export default function debounce(f, ms) {
+    let timer = null;
+
+    function debounced(...args) {
+        if (timer) {
+            clearTimeout(timer);
+        }
+
+        timer = setTimeout(() => {
+            f.apply(this, args);
+            timer = null;
+        }, ms);
+    }
+
+    debounced.cancel = function() {
+        if (timer) {
+            clearTimeout(timer);
+            timer = null;
+        }
+    };
+
+    return debounced;
+}

package/src/helpers/stripHtml.js

@@ -0,0 +1,4 @@
+export function stripHtml(html) {
+    let doc = new DOMParser().parseFromString(html, 'text/html');
+    return doc.body.textContent || "";
+};

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";
@@ -37,9 +38,15 @@ export { default as IbRadio } from "./components/Form/Radio/Radio.vue";
 export { default as IbToggle } from "./components/Form/Toggle/Toggle.vue";
 export { default as IbTextarea } from "./components/Form/Textarea/Textarea.vue";
 export { default as IbTreeSelect } from "./components/TreeSelect/Select.vue";
+export { default as IbSelect } 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";
+
+// Text Editor
 export { default as IbTextEditor } from "./components/Form/TextEditor/TextEditor.vue";
+export { default as IbTextEditorToolbar } from "./components/Form/TextEditor/Toolbar.vue";
+export { setupTextEditor } from "./components/Form/TextEditor/setupTextEditor.js";
+export { default as IbCharactersCount } from "./components/Form/CharactersCount.vue";
 
 // Table
 export { default as IbTable } from "./components/Table/Table.vue";