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

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;
 }
@@ -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: 100%;
+  }
+
+  .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,10 @@ $tree-search-border-color: $gray-600;
   .tree-select-empty {
     padding: 15px;
   }
+
+  .alphabetic-list {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+  }
 }

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 &&
@@ -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";
@@ -38,6 +39,9 @@ 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 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";