@avakhula/ui 0.0.215 → 0.0.217

package/package.json

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

package/src/components/Sorting/Sorting.stories.js

@@ -29,7 +29,16 @@ const Template = (args) => ({
   template: `
     <ib-sorting
       v-bind="args"
-    />
+      toggle-tip-title="test"
+    >
+    <template #toggleTipBody>
+     dfsdfsdf
+  </template>
+
+  <template #toggleTipButtons>
+   fsdfsd
+</template>
+    </ib-sorting>
   `,
 });
 

package/src/components/Sorting/Sorting.vue

@@ -12,14 +12,16 @@
         <button
           v-tooltip:[tooltipPosition]="tooltipText"
           class="sorting-label"
+          :class="{'sorting-label-active': isOpenToggleTip}"
           type="button"
-          @click="isOpenToggleTip = true"
+          @click="isOpenToggleTip = !isOpenToggleTip"
         >
           {{ title }}
         </button>
 
         <ib-toggle-tip
           v-if="hasToggleTip"
+          position="bottom-center"
           :is-open="isOpenToggleTip"
           :title="toggleTipTitle"
           @close="isOpenToggleTip = false"

package/src/components/Sorting/sorting.scss

@@ -40,6 +40,7 @@ button {
         background-color: $blue-100;
       }
 
+      &.sorting-label-active,
       &:active {
         border-color: transparent;
         color: $blue-900;

package/src/components/Tooltip/Tooltip.vue

@@ -64,6 +64,7 @@ export default {
   }
 
   p {
+    word-break: break-word;
     @include Ib-H4-regular;
   }
 

package/src/directives/tooltip/TooltipController.js

@@ -26,8 +26,8 @@ export default class Tooltip {
     this.uuid = "tooltip_" + generateUID();
   }
 
-  createTooltip(el, text, position) {
-    if (!text?.length) {
+  createTooltip(el, content, position) {
+    if (!content.text?.length) {
       return;
     }
 
@@ -44,7 +44,8 @@ export default class Tooltip {
 
     document.body.appendChild(this.tooltipContainer);
     this.tooltipInstance = createApp(IbTooltip, {
-      text: text,
+      title: content.title, 
+      text: content.text,
       alwaysVisible: true,
       for: this.uuid,
       class: this.getClassList(position),

package/src/directives/tooltip/textOverflowTooltip.js

@@ -5,7 +5,13 @@ const tooltip = new Tooltip();
 
 const createTooltip = (el, binding) => {
   if (multiLineOverflows(el)) {
-    tooltip.createTooltip(el, binding.value);
+
+    const content = {
+      title: binding.value.title || '',
+      text: typeof(binding.value) === 'object' ? binding.value.text : binding.value,
+    }
+
+    tooltip.createTooltip(el, content);
   }
 };
 

package/src/directives/tooltip/tooltip.js

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

package/src/directives/tooltip/tooltip.stories.js

@@ -20,8 +20,11 @@ const Template = (args) => ({
     return { args };
   },
   template: `
-    <div style="display:flex;flex-wrap:wrap;">
-      <ib-button v-tooltip="'Tooltip Content Content Content Content'" v-bind="args">Tooltip</ib-button>
+    <div style="display:flex;flex-wrap:wrap;margin-top: 100px;">
+      <ib-button v-tooltip="'Tooltip Content Content Content Content Tooltip Content Content Content Content Tooltip Content Content Content Content Tooltip Content Content Content Content Tooltip Content Content Content Content Tooltip Content Content Content Content'" v-bind="args">Tooltip</ib-button>
+
+
+      <ib-button v-tooltip="{text: 'antonushkoeliseyantonushkoelisey@gmail.com', title: 'test'}" v-bind="args">Tooltip</ib-button>
     </div>
 
     `,