@avakhula/ui 0.1.4 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@avakhula/ui",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "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/Alert/alert.scss

@@ -95,6 +95,7 @@ $alert-success-secondary-color: $green-50;
         margin-top: 5px;
         margin-bottom: 5px;
         padding-left: 0;
+        word-break: break-word;
       }
     }
 
@@ -107,6 +108,7 @@ $alert-success-secondary-color: $green-50;
         @include Ib-P1-regular;
         margin-bottom: 5px;
         padding-left: 0!important;
+        word-break: break-word;
       }
 
       & + .close-button {

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

@@ -18,6 +18,10 @@ export default {
       control: { type: "select" },
       options: Object.keys(popoverPosition),
     },
+    tooltipIconPosition: {
+      control: { type: "select" },
+      options: Object.keys(popoverPosition),
+    },
   },
 };
 

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
@@ -38,7 +38,7 @@
 
       <ib-icon-button
         v-if="!hideSortingButton"
-        v-tooltip="tooltipIconText"
+        v-tooltip:[tooltipIconPosition]="tooltipIconText"
         kind="white"
         size="s"
         @click="clickHandler"
@@ -88,6 +88,9 @@ export default {
     tooltipPosition: {
       type: String,
     },
+    tooltipIconPosition: {
+      type: String,
+    },
     tooltipIconSorting: {
       type: String,
     },
@@ -158,6 +161,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

@@ -921,7 +921,6 @@ export default {
       this.$nextTick(() => {
         const newScreenHeight = document.documentElement.scrollHeight
         if(newScreenHeight > screenHeight) {
-          console.log('test')
           this.vertical = "top";
         }
       })