@avakhula/ui 0.0.348 → 0.0.350

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@avakhula/ui",
-  "version": "0.0.348",
+  "version": "0.0.350",
   "main": "dist/index.js",
   "module": "dist/index.umd.cjs",
   "source": "src/index.js",

package/src/App.vue

@@ -1,11 +1,12 @@
 <template>
-  <ib-select :options="opt">
+  <ib-select :options="opt" :is-multiple="false"
+             :show-clear-button="false" :style="{ width: '400px' }">
     <template v-slot:triggerContent="{ selectedCount }">
         {{ selectedCount }}
     </template>
   </ib-select>
 
-  <ib-toggle :disabled="true"></ib-toggle>
+  <ib-phone-input></ib-phone-input>
 
 
 </template>
@@ -16,121 +17,48 @@ import label from "@/components/Form/Label/Label.vue";
 import {IbCheckboxGroup} from "./index.js";
 import {IbRadio} from "./index.js";
 import IbToggle from "@/components/Form/Toggle/Toggle.vue";
+import {IbPhoneInput} from "./index.js";
 const testData1 = [
   {
-    id: "1",
-    title: "A Education",
-    is_category: true,
-    initiallyVisible: true,
-    visible: true,
-    isDisabled: true,
-    checked: false,
-    isChildrenVisible: false,
-  },
-  {
-    id: "2",
-    title: "Education 2",
-    is_category: true,
-    initiallyVisible: true,
-    visible: true,
-    isDisabled: true,
-    checked: false,
-    isChildrenVisible: true,
-  },
-  {
-    id: "3",
-    title: "Education 3",
-    is_category: true,
-    initiallyVisible: true,
-    visible: true,
-    isDisabled: false,
-    checked: false,
-    isChildrenVisible: true,
-  },
-  {
-    id: "4",
-    title: "Education 4",
-    is_category: true,
-    initiallyVisible: true,
-    visible: true,
-    isDisabled: false,
-    checked: false,
-    isChildrenVisible: true,
-  },
-  {
-    id: "5",
-    title: "Education 5",
-    is_category: true,
-    initiallyVisible: true,
-    visible: true,
-    isDisabled: true,
-    checked: false,
-    isChildrenVisible: true,
-  },
-
-  {
-    id: "6",
-    title: "Education 6",
-    is_category: true,
-    initiallyVisible: true,
-    visible: true,
+    disable: false,
+    active: false,
+    id: "2024-06-12 23:59:59.999999",
+    title: "One Day",
     isDisabled: false,
-    checked: false,
-    isChildrenVisible: true,
+    showTooltipByDefault: true
   },
-
   {
-    id: "7",
-    title: "Education 7",
-    is_category: true,
-    initiallyVisible: true,
-    visible: true,
-    isDisabled: false,
-    checked: false,
-    isChildrenVisible: true,
+    disable: false,
+    active: false,
+    id: "2024-06-18 23:59:59.999999",
+    title: "One Week",
+    isDisabled: false
   },
-
   {
-    id: "8",
-    title: "Education 8",
-    is_category: true,
-    initiallyVisible: true,
-    visible: true,
-    isDisabled: false,
-    checked: false,
-    isChildrenVisible: true,
+    disable: false,
+    active: false,
+    id: "2024-06-25 23:59:59.999999",
+    title: "Two Weeks",
+    isDisabled: true
   },
   {
-    id: "9",
-    title: "Education 9",
-    is_category: true,
-    initiallyVisible: true,
-    visible: true,
-    isDisabled: false,
-    checked: false,
-    isChildrenVisible: true,
-  },
-  {
-    id: "10",
-    title: "Education 10",
-    is_category: true,
-    initiallyVisible: true,
-    visible: true,
-    isDisabled: false,
-    checked: false,
-    isChildrenVisible: true,
+    disable: false,
+    active: false,
+    id: "2024-07-11 23:59:59.999999",
+    title: "One Month",
+    isDisabled: true,
+    disableTooltip: 'disable 123',
+    showTooltipByDefault: true
   },
   {
-    id: "11",
-    title: "Education 11",
-    is_category: true,
-    initiallyVisible: true,
-    visible: true,
+    disable: false,
+    active: true,
+    id: "2025-02-01 23:59:59.999999",
+    title: "All Time",
     isDisabled: true,
-    checked: false,
-    isChildrenVisible: true,
-  },
-];
+    disableTooltip: 'disable 123'
+  }
+]
 export default {
   computed: {
     label() {
@@ -143,6 +71,6 @@ export default {
       checked: '1'
     }
   },
-  components: {IbToggle, IbSelect, IbCheckboxGroup, IbRadio}
+  components: {IbToggle, IbSelect, IbCheckboxGroup, IbRadio, IbPhoneInput}
 }
 </script>

package/src/components/Form/PhoneInput/PhoneInput.vue

@@ -83,11 +83,15 @@ export default {
         this.vueTel.choose(value);
       });
 
-      if (!this.phone || this.phone.length - 1 < this.dialCode.length) {
-        this.phone = "+" + data.dialCode;
-      } else if (this.dialCode) {
-        this.phone = this.phone.replace(this.dialCode, data.dialCode);
-      }
+      this.phone = "+" + data.dialCode;
+
+      // if (!this.phone || this.phone.length - 1 < this.dialCode.length) {
+      //   console.log('1')
+      //   this.phone = "+" + data.dialCode;
+      // } else if (this.dialCode) {
+      //   console.log(2)
+      //   this.phone = this.phone.replace(this.dialCode, data.dialCode);
+      // }
       this.dialCode = data.dialCode;
     },
     clickOutside() {

package/src/components/TreeSelect/Option.vue

@@ -1,7 +1,7 @@
 <template>
   <li>
     <div
-      v-tooltip="showTooltip ? option.title : ''"
+      v-tooltip="showTooltip ? (option.isDisabled ? option.disableTooltip : option.title) : ''"
       class="tree-select-option"
       tabindex="0"
       role="option"
@@ -174,10 +174,16 @@ export default {
     if (this.option.hasOwnProperty("children") && this.option.children) {
       this.checkParent();
     }
+
+    if(this.option.showTooltipByDefault) {
+      this.showTooltip = true;
+    }
   },
   updated() {
     this.$nextTick(() => {
-      if (multiLineOverflows(this.$el.querySelector(".option-label"))) {
+      if(this.option.showTooltipByDefault) {
+        this.showTooltip = true;
+      } else if (multiLineOverflows(this.$el.querySelector(".option-label"))) {
         this.showTooltip = true;
       }
     });

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);
   }
 };