@avakhula/ui 0.0.262 → 0.0.264

package/package.json

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

package/src/App.vue

@@ -1,23 +1,36 @@
 <template>
-  <div class="test">
-    <limit-selector />
+  <div class="page">
+
+    <sorting view="table-sorting" toggle-tip-title="hello" :table-name="'table'" :title="'test'">
+
+      <!-- <template #toggleTipBody>
+        <p>
+          test
+        </p>
+      </template>
+
+      <template #toggleTipButtons>
+        <p>
+          test
+        </p>
+      </template> -->
+
+
+    </sorting>
   </div>
 </template>
 
 <script>
-import LimitSelector from "./components/Pagination/LimitSelector.vue"
+import Sorting from './components/Sorting/Sorting.vue';
 export default {
   components: {
-    LimitSelector
-  } 
+    Sorting
+  }
 }
 </script>
 
-
 <style lang="scss">
-.test {
-  height: 100vh;
-  display: flex;
-  align-items: end;
+.page {
+  padding: 200px;
 }
-</style>
+</style>

package/src/components/Pagination/Pagination.vue

@@ -7,7 +7,8 @@
     ></ib-limit-selector>
 
     <div class="repot-pagination">
-      <template v-if="showPaginationInput">
+      {{ displayPaginationInput }}
+      <template v-if="displayPaginationInput">
         <ib-label>{{ labelInput }}</ib-label>
         <div class="pagination-input">
           <ib-input type="number" :debounce="500" @input="onInput"></ib-input>
@@ -22,13 +23,15 @@
         size="m"
         class="toggle-children button-prev"
         :disabled="currentPage === 1"
+        v-tooltip="tooltipTextPrev"
         @click="onSelect(currentPage - 1)"
       >
         <ib-icon name="chevron-back-outline"></ib-icon>
-        <ib-tooltip v-if="tooltipTextPrev" :text="tooltipTextPrev"></ib-tooltip>
+        <!-- <ib-tooltip v-if="tooltipTextPrev" :text="tooltipTextPrev"></ib-tooltip> -->
       </ib-icon-button>
 
       <ul class="pagination-wrapper">
+        <!-- here -->
         <li
           v-for="(item, index) of countPagePagination"
           v-show="showItem(index + 1)"
@@ -52,10 +55,11 @@
         size="m"
         class="toggle-children button-next"
         :disabled="currentPage === countPagePagination"
+        v-tooltip="tooltipTextNext"
         @click="onSelect(currentPage + 1)"
       >
         <ib-icon name="chevron-forward-outline"></ib-icon>
-        <ib-tooltip v-if="tooltipTextNext" :text="tooltipTextNext"></ib-tooltip>
+        <!-- <ib-tooltip v-if="tooltipTextNext" :text="tooltipTextNext"></ib-tooltip> -->
       </ib-icon-button>
     </div>
   </div>
@@ -67,15 +71,20 @@ import IbIconButton from "../IconButton/IconButton.vue";
 import IbInput from "../Form/Input/Input.vue";
 import IbLabel from "../Form/Label/Label.vue";
 import IbIcon from "../Icon.vue";
-import IbTooltip from "../Tooltip/Tooltip.vue";
+import { TooltipDirective as Tooltip } from "../../directives/tooltip/tooltip";
+// import IbTooltip from "../Tooltip/Tooltip.vue";
+
+
 export default {
   name: "IbPagination",
   props: {
     tooltipTextPrev: {
       type: String,
+      default: lang('prev_page', this.langComponents?.COMPONENT_SYSTEM),
     },
     tooltipTextNext: {
       type: String,
+      default: lang('next_page', this.langComponents?.COMPONENT_SYSTEM),
     },
     labelInput: {
       type: String,
@@ -221,6 +230,14 @@ export default {
     countPagePagination() {
       return Math.ceil(this.countRows / this.limitValue);
     },
+    displayPaginationInput() {
+      if(!this.showPaginationInput) return false;
+
+      return Boolean(this.countPagePagination >= 7);
+    }
+  },
+  directives: {
+    Tooltip
   },
   components: {
     IbIconButton,
@@ -228,7 +245,7 @@ export default {
     IbInput,
     IbLabel,
     IbLimitSelector,
-    IbTooltip,
+    // IbTooltip,
   },
 };
 </script>

package/src/components/Sorting/Sorting.vue

@@ -11,7 +11,7 @@
       <div>
         <button
           class="sorting-label"
-          v-tooltip:[tooltipPosition]="tooltipContent"
+          v-tooltip:[sortingTooltipPosition]="sortingTooltipContent"
           :class="{
             'sorting-label-active': isOpenToggleTip && hasToggleTip,
             'has-action': tooltipText?.length || hasToggleTip
@@ -158,6 +158,20 @@ export default {
       }
       return null;
     },
+    sortingTooltipPosition() {
+      if (this.hasToggleTip) {
+        return 'bottomCenter'
+      }
+
+      return this.tooltipPosition;
+    },
+    sortingTooltipContent() {
+      if (this.hasToggleTip) {
+        return lang('click_to_view_details', this.langComponents?.COMPONENT_SYSTEM);
+      }
+
+      return this.tooltipContent;
+    },
     tooltipIconText() {
       if (this.currentTypeSort === this.sortingTypes.TYPE_ASC) {
         return lang("sort_descending", this.langComponents?.COMPONENT_SELECT);

package/src/components/TreeSelect/Select.vue

@@ -915,24 +915,15 @@ export default {
       this.vertical = "bottom";
     },
     onOpen() {
-
-      const screenHeight = document.body.offsetHeight; 
-      const screenScrollHeight = document.documentElement.scrollHeight;
+      const screenHeight = document.documentElement.scrollHeight;
       this.isOpen = true;
 
-      setTimeout(() => {
-        const newScreenScrollHeight = document.documentElement.scrollHeight
-        const newScreenHeight = document.body.offsetHeight;
-        
-        console.log(screenScrollHeight, "screenScrollHeight")
-        console.log(screenHeight, "screenHeight")       
-        console.log(newScreenScrollHeight, "newScreenScrollHeight")
-        console.log(newScreenHeight, "newScreenHeight")
-        if(newScreenHeight > screenHeight || newScreenScrollHeight > screenScrollHeight) {
-          console.log('test')
+      this.$nextTick(() => {
+        const newScreenHeight = document.documentElement.scrollHeight
+        if(newScreenHeight > screenHeight) {
           this.vertical = "top";
         }
-      }, 1000)
+      })
     }
   },
   computed: {