@avakhula/ui 0.0.267 → 0.0.269

package/package.json

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

package/src/App.vue

@@ -1,36 +1,135 @@
 <template>
-  <div class="page">
+  <ib-select :options="opt">
+    <template v-slot:triggerContent="{ selectedCount }">
+        {{ selectedCount }} test hello
+    </template>
+  </ib-select>
 
-    <sorting view="table-sorting" toggle-tip-title="hello" :table-name="'table'" :title="'test'">
-
-      <!-- <template #toggleTipBody>
-        <p>
-          test
-        </p>
-      </template>
+</template>
 
-      <template #toggleTipButtons>
-        <p>
-          test
-        </p>
-      </template> -->
+<script>
+import IbSelect from "./components/TreeSelect/Select.vue";
+const testData1 = [
+  {
+    id: "1",
+    title: "A Education",
+    is_category: true,
+    initiallyVisible: true,
+    visible: true,
+    isDisabled: false,
+    checked: true,
+    isChildrenVisible: true,
+  },
+  {
+    id: "2",
+    title: "Education 2",
+    is_category: true,
+    initiallyVisible: true,
+    visible: true,
+    isDisabled: false,
+    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: false,
+    checked: false,
+    isChildrenVisible: true,
+  },
 
+  {
+    id: "6",
+    title: "Education 6",
+    is_category: true,
+    initiallyVisible: true,
+    visible: true,
+    isDisabled: false,
+    checked: false,
+    isChildrenVisible: true,
+  },
 
-    </sorting>
-  </div>
-</template>
+  {
+    id: "7",
+    title: "Education 7",
+    is_category: true,
+    initiallyVisible: true,
+    visible: true,
+    isDisabled: false,
+    checked: false,
+    isChildrenVisible: true,
+  },
 
-<script>
-import Sorting from './components/Sorting/Sorting.vue';
+  {
+    id: "8",
+    title: "Education 8",
+    is_category: true,
+    initiallyVisible: true,
+    visible: true,
+    isDisabled: false,
+    checked: false,
+    isChildrenVisible: 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,
+  },
+  {
+    id: "11",
+    title: "Education 11",
+    is_category: true,
+    initiallyVisible: true,
+    visible: true,
+    isDisabled: false,
+    checked: false,
+    isChildrenVisible: true,
+  },
+];
 export default {
-  components: {
-    Sorting
-  }
-}
-</script>
-
-<style lang="scss">
-.page {
-  padding: 200px;
+  data() {
+    return {
+      opt: testData1,
+    }
+  },
+  components: {IbSelect}
 }
-</style>
+</script>

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/Form/Checkbox/Checkbox.scss

@@ -5,13 +5,13 @@
 $checkbox-bg-disabled: $gray-100;
 $checkbox-filed-bg-disabled: $neutral-500;
 $checkbox-border-disabled: $neutral-500;
-$checkbox-border: $gray-500;
+$checkbox-border: $gray-600;
 $checkbox-bg: transparent;
 $checkbox-checkmark: $neutral-900;
 $checkbox-border-hover: $blue-300;
 $checkbox-bg-hover: $blue-100;
 $checkbox-border-active: transparent;
-$checkbox-bg-active: $blue-300;
+$checkbox-bg-active: $blue-200;
 $checkbox-text-color-disabled: $neutral-500;
 $checkbox-bg-error: transparent;
 $checkbox-border-error: $red-800;

package/src/components/Form/Radio/radio.scss

@@ -11,7 +11,7 @@ $radio-bg-hover: $blue-100;
 $radio-bg-active: $blue-200;
 $radio-bg-disabled: $gray-100;
 $radio-bg-error: transparent;
-$radio-border: $gray-500;
+$radio-border: $gray-600;
 $radio-border-hover: $blue-300;
 $radio-border-active: $blue-200;
 $radio-border-disabled: $neutral-500;

package/src/components/Pagination/Pagination.vue

@@ -7,8 +7,7 @@
     ></ib-limit-selector>
 
     <div class="repot-pagination">
-      {{ displayPaginationInput }}
-      <template v-if="displayPaginationInput">
+      <template v-if="showPaginationInput">
         <ib-label>{{ labelInput }}</ib-label>
         <div class="pagination-input">
           <ib-input type="number" :debounce="500" @input="onInput"></ib-input>
@@ -23,10 +22,10 @@
         size="m"
         class="toggle-children button-prev"
         :disabled="currentPage === 1"
-        v-tooltip="tooltipTextPrev ? tooltipTextNext : lang('prev_page', 'system')"
         @click="onSelect(currentPage - 1)"
       >
         <ib-icon name="chevron-back-outline"></ib-icon>
+        <ib-tooltip v-if="tooltipTextPrev" :text="tooltipTextPrev"></ib-tooltip>
       </ib-icon-button>
 
       <ul class="pagination-wrapper">
@@ -53,10 +52,10 @@
         size="m"
         class="toggle-children button-next"
         :disabled="currentPage === countPagePagination"
-        v-tooltip="tooltipTextNext ? tooltipTextNext : lang('next_page', 'system')"
         @click="onSelect(currentPage + 1)"
       >
         <ib-icon name="chevron-forward-outline"></ib-icon>
+        <ib-tooltip v-if="tooltipTextNext" :text="tooltipTextNext"></ib-tooltip>
       </ib-icon-button>
     </div>
   </div>
@@ -68,8 +67,7 @@ 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 { TooltipDirective as Tooltip } from "../../directives/tooltip/tooltip";
-
+import IbTooltip from "../Tooltip/Tooltip.vue";
 export default {
   name: "IbPagination",
   props: {
@@ -223,14 +221,6 @@ 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,
@@ -238,7 +228,7 @@ export default {
     IbInput,
     IbLabel,
     IbLimitSelector,
-    // IbTooltip,
+    IbTooltip,
   },
 };
 </script>

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

@@ -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,
     },

package/src/components/Tooltip/Tooltip.vue

@@ -53,7 +53,7 @@ export default {
   padding: 10px;
   max-width: 240px;
   box-shadow: $ib-shadow-1;
-  z-index: 9999;
+  z-index: 10002;
 
   &.ib-tooltip-large {
     box-shadow: $ib-shadow-2;

package/src/components/TreeSelect/Select.vue

@@ -3,7 +3,12 @@
     {{ errorMessage }}
   </ib-alert>
 
-  <div class="tree-select" :class="classList">
+  <div
+    class="tree-select"
+    :class="{
+      ...classList, 'tree-select-custom-trigger-content': hasTriggerContent
+    }"
+  >
     <ib-dropdown
       :disabled="isLoading"
       :is-resizable="isResizable"
@@ -30,40 +35,49 @@
           :aria-activedescendant="focusedOptionId"
           :class="{
             'tree-choice-opened': isOpened,
-            'has-clear-button': !showClearButton,
+            'has-clear-button': showClearButton,
             'tree-choice-error': errorMessage,
           }"
         >
-          <template v-if="htmlOptionTitle">
-            <span
-              :class="{ placeholder: !selectStatus }"
-              v-html="selectStatus || placeholder"
-            ></span>
+
+          <template v-if="hasTriggerContent">
+            <slot v-bind:selected-count="selectedKeys.length" name="triggerContent"></slot>
           </template>
+
           <template v-else>
-            <span :class="{ placeholder: !selectStatus }">
-              {{ selectStatus || placeholder }}
-            </span>
+            <template v-if="htmlOptionTitle">
+              <span
+                :class="{ placeholder: !selectStatus }"
+                v-html="selectStatus || placeholder"
+              ></span>
+            </template>
+            <template v-else>
+              <span :class="{ placeholder: !selectStatus }">
+                {{ selectStatus || placeholder }}
+              </span>
+            </template>
           </template>
-        </div>
-        <ib-icon-button
-          v-if="showClearButton"
-          kind="ghost"
-          class="button-clear"
-          @click.prevent="clearValue"
-          @keypress.enter.stop.prevent
-          @keydown.enter.stop.prevent
-          @keyup.enter.prevent="clearValue"
-          :help-text="clearButtonMessage"
-          v-show="Object.keys(selected).length"
-        >
-          <ib-icon name="close-outline"></ib-icon>
-        </ib-icon-button>
 
-        <ib-icon
-          :name="isOpened ? 'chevron-up-outline' : 'chevron-down-outline'"
-          :classes="'tree-select-caret'"
-        />
+          <ib-icon-button
+            v-if="showClearButton"
+            kind="ghost"
+            class="button-clear"
+            @click.prevent="clearValue"
+            @keypress.enter.stop.prevent
+            @keydown.enter.stop.prevent
+            @keyup.enter.prevent="clearValue"
+            :help-text="clearButtonMessage"
+            v-show="Object.keys(selected).length"
+          >
+            <ib-icon name="close-outline"></ib-icon>
+          </ib-icon-button>
+
+          <ib-icon
+            :name="isOpened ? 'chevron-up-outline' : 'chevron-down-outline'"
+            :classes="'tree-select-caret'"
+          />
+      </div>
+
       </template>
 
       <template v-slot:body>
@@ -927,9 +941,14 @@ export default {
     }
   },
   computed: {
+    // RENAME TO CUSTOM TREGER
     hasTrigger() {
       return !!this.$slots.trigger;
     },
+    hasTriggerContent() {
+      console.log(this.$slots)
+      return !!this.$slots.triggerContent;
+    },
     hasEmptyMessage() {
       return !!this.$slots.emptyMessage;
     },

package/src/components/TreeSelect/scss/select.scss

@@ -27,6 +27,14 @@ $tree-search-border-color: $gray-600;
 .tree-select {
   width: 100%;
 
+  &.tree-select-custom-trigger-content {
+    width: fit-content;
+
+  //   .tree-drop {
+  //     min-width: 220px;
+  //   }
+  }
+
   .ib-dropdown {
     width: 100%;
   }
@@ -82,7 +90,11 @@ $tree-search-border-color: $gray-600;
     transition: background-color 0.3s, border-color 0.3s, border-radius 0.3s;
 
     &.has-clear-button {
-      padding-right: 30px;
+      padding-right: 60px;
+    }
+
+    &.tree-choice-custom-content {
+      width: fit-content;
     }
 
     span {