@avakhula/ui 0.1.20 → 0.1.22

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

@@ -1,7 +1,7 @@
-@import "../../../assets/scss/variables/shadows.scss";
-@import "../../../assets/scss/variables/colors.scss";
-@import "../../../assets/scss/typography.scss";
-@import "../../../assets/scss/mixins.scss";
+@use "../../../assets/scss/variables/shadows.scss" as *;
+@use "../../../assets/scss/variables/colors.scss" as *;
+@use "../../../assets/scss/typography.scss" as *;
+@use "../../../assets/scss/mixins.scss" as *;
 
 $choice-bg: $gray-100;
 $choice-border-color: $gray-500;
@@ -35,6 +35,10 @@ $tree-search-border-color: $gray-600;
 .tree-select {
   width: 100%;
 
+  .ib-dropdown-menu {
+    min-width: 100%;
+  }
+
   &.tree-select-custom-trigger-content {
     width: fit-content;
   }
@@ -251,4 +255,49 @@ $tree-search-border-color: $gray-600;
     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/directives/tooltip/tooltip.js

@@ -43,24 +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/index.js

@@ -38,10 +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 IbCharactersCount } from "./components/Form/CharactersCount.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";