@avakhula/ui 0.1.19 → 0.1.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@avakhula/ui",
-  "version": "0.1.19",
+  "version": "0.1.21",
   "main": "dist/index.js",
   "module": "dist/index.umd.cjs",
   "source": "src/index.js",
@@ -21,10 +21,11 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@tanstack/vue-virtual": "^3.13.12",
     "@vueup/vue-quill": "^1.2.0",
     "mitt": "^3.0.0",
     "quill-placeholder-module": "^0.3.1",
-    "vue": "^3.2.45"
+    "vue": "3.4.6"
   },
   "devDependencies": {
     "@babel/core": "^7.20.7",
@@ -55,11 +56,11 @@
     "prettier": "^2.7.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "sass": "^1.57.1",
+    "sass": "^1.97.1",
     "sass-loader": "^13.2.0",
     "storybook": "^7.1.0",
-    "vite": "^4.0.0",
-    "vitest": "^0.28.4",
+    "vite": "^6.3.2",
+    "vitest": "^1.6.0",
     "vue-loader": "^16.8.3",
     "vue-tel-input": "^9.1.4"
   }

package/src/App.vue

@@ -1,12 +1,16 @@
 <template>
+<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh;">
+    <ib-select data-testid="tests" data-foo="sdf" dusk="asd" :options="[]" />
+</div>
+
 </template>
 
 <script>
-import IbInput from "./components/Form/Input/Input.vue";
+import IbSelect from "./components/TreeSelect/Select.vue";
 
 export default {
   components: {
-    IbInput,
+    IbSelect,
   },
 };
 </script>

package/src/assets/scss/mixins/dropdown-list-item.scss

@@ -1,6 +1,6 @@
-@import "../variables/colors.scss";
-@import "../typography.scss";
-@import "../mixins.scss";
+@use "../variables/colors.scss" as *;
+@use "../typography.scss" as *;
+@use "../mixins.scss" as *;
 
 @mixin DropdownListItem {
   .ib-dropdown-item {

package/src/assets/scss/mixins/tooltip-position.scss

@@ -1,3 +1,10 @@
+@use "../variables/colors.scss" as *;
+@use "../variables/shadows.scss" as *;
+
+$background: $white;
+$textColor: $neutral-900;
+$shadow: $ib-shadow-3;
+
 @mixin TooltipPosition {
   &::before {
     content: "";

package/src/assets/scss/mixins.scss

@@ -1,4 +1,4 @@
-@import "./variables/colors.scss";
+@use "./variables/colors.scss" as *;
 
 @mixin outline($offset: -2px, $color: $blue-700) {
   outline-offset: $offset;
@@ -18,4 +18,4 @@
   -webkit-box-orient: vertical;
   -webkit-line-clamp: $lines;
   overflow: hidden;
-}
+}

package/src/assets/scss/style.scss

@@ -1,7 +1,7 @@
-@import "./reset.scss";
-@import "./mixins.scss";
-@import "./variables/colors.scss";
-@import "./typography.scss";
+@use "./reset.scss" as *;
+@use "./mixins.scss" as *;
+@use "./variables/colors.scss" as *;
+@use "./typography.scss" as *;
 
 body,
 textarea::placeholder,

package/src/assets/scss/typography.scss

@@ -147,9 +147,9 @@
 }
 
 .Ib-P1-medium {
-  @include Ib-P1-regular;
+  @include Ib-P1-medium;
 }
 
 .Ib-P1-regular {
-  @include Ib-P1-medium;
-}
+  @include Ib-P1-regular;
+}

package/src/components/Accordion/Accordion.scss

@@ -1,5 +1,5 @@
-@import "../../assets/scss/variables/colors.scss";
-@import "../../assets/scss/mixins.scss";
+@use "../../assets/scss/variables/colors.scss" as *;
+@use "../../assets/scss/mixins.scss" as *;
 
 
 $title-bg: $gray-200;
@@ -79,7 +79,7 @@ $content-bg: $gray-50;
     overflow: hidden;
     transition: height 0.3s, padding-top 0.3s, padding-bottom 0.3s;
     background-color: $content-bg;
-    
+
     .accordion-content-wrapper {
       padding: 10px 15px 15px;
     }

package/src/components/Accordion/Accordion.vue

@@ -76,6 +76,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@use "./Accordion.scss" as *;
+
 .expand-enter-active,
 .expand-leave-active {
   transition: height 1s ease-in-out;
@@ -86,6 +88,4 @@ export default {
 .expand-leave-to {
   height: 0;
 }
-
-@import "./Accordion.scss";
 </style>

package/src/components/Alert/Alert.vue

@@ -151,5 +151,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "./alert.scss";
+@use "./alert.scss" as *;
 </style>

package/src/components/Alert/alert.scss

@@ -1,5 +1,5 @@
-@import "../../assets/scss/variables/colors.scss";
-@import "../../assets/scss//typography.scss";
+@use "../../assets/scss/variables/colors.scss" as *;
+@use "../../assets/scss//typography.scss" as *;
 
 $alert-content-color: $neutral-900;
 $alert-alert-primary-color: $red-800;

package/src/components/Avatar/Avatar.vue

@@ -78,8 +78,8 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import "../../assets/scss/typography.scss";
-@import "../../assets/scss/variables/colors.scss";
+@use "../../assets/scss/typography.scss" as *;
+@use "../../assets/scss/variables/colors.scss" as *;
 
 $avatar-border: $blue-200;
 .avatar {

package/src/components/Badge/Badge.vue

@@ -34,8 +34,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/scss/typography.scss";
-@import "../../assets/scss/variables/colors.scss";
+@use "../../assets/scss/typography.scss" as *;
+@use "../../assets/scss/variables/colors.scss" as *;
 
 $badge-bg: $blue-800;
 $badge-color: $white;

package/src/components/Breadcrumbs/Breadcrumbs.vue

@@ -26,7 +26,7 @@
             </router-link>
         </template>
 
-        <p v-if="index === last">
+        <p v-if="index === last && item.title" v-overflow-tooltip.bottomCenter="item.title">
           {{ item.title }}
         </p>
 
@@ -70,6 +70,8 @@ import IbDropdownList from "../Dropdown/DropdownList.vue";
 import IbDropdownItem from "../Dropdown/DropdownItem.vue";
 import IbTooltip from "../Tooltip/Tooltip.vue";
 
+import { TextOverflowTooltipDirective as OverflowTooltip } from "../../directives/tooltip/textOverflowTooltip";
+
 export default {
   name: "IbBreadcrumbs",
   props: {
@@ -100,9 +102,12 @@ export default {
     IbDropdownList,
     IbTooltip,
   },
+  directives: {
+    OverflowTooltip,
+  },
 };
 </script>
 
 <style scoped lang="scss">
-@import "./breadcrumbs.scss";
+@use "./breadcrumbs.scss" as *;
 </style>

package/src/components/Breadcrumbs/breadcrumbs.scss

@@ -1,7 +1,7 @@
-@import "../../assets/scss/variables/colors.scss";
-@import "../../assets/scss/typography.scss";
-@import "../../assets/scss/mixins.scss";
-@import "../../assets/scss/reset.scss";
+@use "../../assets/scss/variables/colors.scss" as *;
+@use "../../assets/scss/typography.scss" as *;
+@use "../../assets/scss/mixins.scss" as *;
+@use "../../assets/scss/reset.scss" as *;
 
 
 .breadcrumb {
@@ -74,4 +74,4 @@
       }
     }
   }
-}
+}

package/src/components/Button/Button.vue

@@ -166,7 +166,7 @@ export default {
       if (this.href.length) {
         attrsList.href = this.href;
       }
-      
+
       if(this.to) {
         attrsList.to = this.to;
       }
@@ -188,5 +188,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "./button.scss";
+@use "./button.scss" as *;
 </style>

package/src/components/Button/button.scss

@@ -1,6 +1,6 @@
-@import "../../assets/scss/variables/colors.scss";
-@import "../../assets/scss/typography.scss";
-@import "../../assets/scss/mixins.scss";
+@use "../../assets/scss/variables/colors.scss" as *;
+@use "../../assets/scss/typography.scss" as *;
+@use "../../assets/scss/mixins.scss" as *;
 
 // Primary button colors
 $primary-btn-background: $blue-800;

package/src/components/Chips/Chips.vue

@@ -53,9 +53,9 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-@import "../../assets/scss/variables/colors.scss";
-@import "../../assets/scss/typography.scss";
-@import "../../assets/scss/mixins.scss";
+@use "../../assets/scss/variables/colors.scss" as *;
+@use "../../assets/scss/typography.scss" as *;
+@use "../../assets/scss/mixins.scss" as *;
 
 .ib-chips {
   @include Ib-H4-medium;

package/src/components/Dropdown/Dropdown.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="ib-dropdown" v-outside="close">
+  <div class="ib-dropdown" v-outside="closeOnOutsideClick">
     <span
       class="dropdown-trigger"
       ref="dropdown"
@@ -21,23 +21,46 @@
       <slot name="trigger" v-bind:is-opened="isOpenedState"></slot>
     </span>
 
-    <div
-      ref="body"
-      :class="'ib-dropdown-menu ' + classes"
-      v-if="!destroyOnHide || isOpenedState"
-      v-show="isOpenedState"
+    <Teleport
+      :to="attachToBody ? 'body' : attachTo"
+      v-if="attachToBody || attachTo"
     >
-      <div class="dropdown-body" @click="closeOnClickIfRequired">
-        <slot name="body" v-bind:is-opened-state="isOpenedState"></slot>
-
-        <span class="close" @click="close" v-if="showCloseIcon">
-          <slot name="close"></slot>
-        </span>
+      <div
+        ref="body"
+        :class="'ib-dropdown-menu is-teleported ' + classes"
+        v-if="!destroyOnHide || isOpenedState"
+        v-show="isOpenedState"
+      >
+        <div class="dropdown-body" @click="closeOnClickIfRequired">
+          <slot name="body" v-bind:is-opened-state="isOpenedState"></slot>
+          <span class="close" @click="close" v-if="showCloseIcon">
+            <slot name="close"></slot>
+          </span>
+        </div>
+        <div class="footer-slot">
+          <slot name="footer"></slot>
+        </div>
       </div>
-      <div class="footer-slot">
-        <slot name="footer"></slot>
+    </Teleport>
+
+    <template v-else>
+      <div
+        ref="body"
+        :class="'ib-dropdown-menu ' + classes"
+        v-if="!destroyOnHide || isOpenedState"
+        v-show="isOpenedState"
+      >
+        <div class="dropdown-body" @click="closeOnClickIfRequired">
+          <slot name="body" v-bind:is-opened-state="isOpenedState"></slot>
+          <span class="close" @click="close" v-if="showCloseIcon">
+            <slot name="close"></slot>
+          </span>
+        </div>
+        <div class="footer-slot">
+          <slot name="footer"></slot>
+        </div>
       </div>
-    </div>
+    </template>
 
     <div class="before" @click="close">
       <slot name="before"></slot>
@@ -55,6 +78,7 @@ import {
 import { EVENT_NAME_CLICK } from "../../constants/events";
 import { OutsideDirective as Outside } from "../../directives/outside/outside";
 import { verticalPosition, horizontalPosition } from "./constants";
+import { computePosition, flip, shift, offset } from "@floating-ui/dom";
 
 export default {
   name: "IbDropdown",
@@ -95,6 +119,14 @@ export default {
       type: Boolean,
       default: false,
     },
+    attachToBody: {
+      type: Boolean,
+      default: false,
+    },
+    attachTo: {
+      type: String,
+      default: null,
+    },
   },
   watch: {
     isOpened(value) {
@@ -122,6 +154,39 @@ export default {
     };
   },
   methods: {
+    async updatePosition() {
+      const trigger = this.$refs.dropdown;
+      const body = this.$refs.body;
+
+      if (!trigger || !body) return;
+
+      const placementMap = {
+        bottom: { v: "bottom", h: "left" },
+        top: { v: "top", h: "left" },
+      };
+
+      const verticalPlacement = this.vertical === "top" ? "top" : "bottom";
+      const horizontalAlignment =
+        this.horizontal === "right"
+          ? "end"
+          : this.horizontal === "center"
+          ? ""
+          : "start";
+
+      const placement = horizontalAlignment
+        ? `${verticalPlacement}-${horizontalAlignment}`
+        : verticalPlacement;
+
+      const { x, y } = await computePosition(trigger, body, {
+        placement,
+        middleware: [offset(3), flip(), shift({ padding: 8 })],
+      });
+
+      Object.assign(body.style, {
+        left: `${x}px`,
+        top: `${y}px`,
+      });
+    },
     onKeydown(e) {
       if (e.keyCode === ENTER_KEY_CODE || e.keyCode === SPACE_KEY_CODE) {
         e.preventDefault();
@@ -147,14 +212,16 @@ export default {
       }
     },
     open() {
-      if (this.disabled) {
-        return;
-      }
-
-      this.isOpenedState = true;
-      this.$emit("open");
-      this.$globalEvents.$emit("dropdown:open", this);
-    },
+       if (this.disabled) return;
+       this.isOpenedState = true;
+       this.$emit('open');
+       this.$globalEvents.$emit('dropdown:open', this);
+       this.$nextTick(() => {
+         if (this.attachToBody || this.attachTo) {
+           this.updatePosition();
+         }
+       });
+     },
     close() {
       if (this.isOpenedState) {
         if (this.disabled) {
@@ -164,6 +231,13 @@ export default {
         this.$emit("close");
       }
     },
+    closeOnOutsideClick(event) {
+      if (this.$refs.body && this.$refs.body.contains(event.target)) {
+        return;
+      }
+
+      this.close();
+    },
     debouncedOpen() {
       this.timeout = setTimeout(() => {
         this.open();
@@ -179,6 +253,10 @@ export default {
       }
     },
     closeOnEventOutside(e) {
+      if (this.$refs.body && this.$refs.body.contains(e.target)) {
+        return;
+      }
+
       if (!this.$el.contains(e.target)) {
         this.close();
       }
@@ -221,8 +299,8 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import "../../assets/scss/variables/colors.scss";
-@import "../../assets/scss/variables/shadows.scss";
+@use "../../assets/scss/variables/colors.scss" as *;
+@use "../../assets/scss/variables/shadows.scss" as *;
 
 $menu-shadow: $ib-shadow-4;
 $menu-bg: $white;
@@ -250,7 +328,6 @@ $menu-bg: $white;
   position: absolute;
   display: block;
   background-color: $menu-bg;
-  min-width: 100%;
   width: fit-content;
 
   .dropdown-body {
@@ -286,7 +363,7 @@ $menu-bg: $white;
 }
 </style>
 <style lang="scss">
-@import "../../assets/scss/variables/colors.scss";
+@use "../../assets/scss/variables/colors.scss" as *;
 
 .dropdown-trigger {
   &.active {

package/src/components/Dropdown/DropdownDivider.vue

@@ -5,7 +5,7 @@
 <script></script>
 
 <style lang="scss" scoped>
-@import "../../assets/scss/variables/colors.scss";
+@use "../../assets/scss/variables/colors.scss" as *;
 
 .dropdown-divider {
   height: 1px;

package/src/components/Dropdown/DropdownItem.vue

@@ -60,7 +60,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/scss/mixins/dropdown-list-item.scss";
+@use "../../assets/scss/mixins/dropdown-list-item.scss" as *;
 @include DropdownListItem;
 
 .dropdown-item-wrapper {

package/src/components/Dropdown/DropdownList.vue

@@ -1,11 +1,13 @@
 <template>
-  <div class="dropdown-list-wrapper">
+  <div class="dropdown-list-wrapper" :class="class">
     <ib-dropdown
       :horizontal="horizontal"
       :vertical="vertical"
       :isOpened="isOpened"
       :closeOnClick="closeOnClick"
       :disabled="disabled"
+      :attachToBody="attachToBody"
+      :attachTo="attachTo"
       v-bind="$attrs"
       ref="dropdown"
       @all="proxyEvents"
@@ -50,6 +52,18 @@ export default {
       type: Boolean,
       default: false,
     },
+    class: {
+      type: String,
+      default: "",
+    },
+    attachToBody: {
+      type: Boolean,
+      default: false,
+    },
+    attachTo: {
+      type: String,
+      default: null,
+    },
   },
   methods: {
     proxyEvents(eventInfo) {
@@ -73,7 +87,7 @@ export default {
 };
 </script>
 <style lang="scss">
-@import "../../assets/scss/variables/colors.scss";
+@use "../../assets/scss/variables/colors.scss" as *;
 
 .dropdown-list-wrapper {
   .list {

package/src/components/Form/CharactersCount.vue

@@ -30,8 +30,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/scss/variables/colors.scss";
-@import "../../assets/scss/typography.scss";
+@use "../../assets/scss/variables/colors.scss" as *;
+@use "../../assets/scss/typography.scss" as *;
 
 $textarea-character-count-color: $gray-600;
 $textarea-character-count-limited-color: $red-900;

package/src/components/Form/Checkbox/Checkbox.scss

@@ -1,6 +1,6 @@
-@import "../../../assets/scss/variables/colors.scss";
-@import "../../../assets/scss/typography.scss";
-@import "../../../assets/scss/mixins.scss";
+@use "../../../assets/scss/variables/colors.scss" as *;
+@use "../../../assets/scss/typography.scss" as *;
+@use "../../../assets/scss/mixins.scss" as *;
 
 $checkbox-bg-disabled: $gray-100;
 $checkbox-filed-bg-disabled: $neutral-500;
@@ -45,7 +45,7 @@ $checkbox-bg-indeterminate: $blue-800;
     align-items: center;
     cursor: pointer;
   }
-  
+
   /* Hide default HTML checkbox */
   input {
     display: none;

package/src/components/Form/Checkbox/Checkbox.vue

@@ -171,5 +171,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "./Checkbox.scss";
+@use "./Checkbox.scss" as *;
 </style>

package/src/components/Form/DatePicker/DatePicker.scss

@@ -1,7 +1,7 @@
-@import "../../../assets/scss/mixins.scss";
-@import "../../../assets/scss/typography.scss";
-@import "../../../assets/scss/variables/colors.scss";
-@import "../../../assets/scss/variables/shadows.scss";
+@use "../../../assets/scss/mixins.scss" as *;
+@use "../../../assets/scss/typography.scss" as *;
+@use "../../../assets/scss/variables/colors.scss" as *;
+@use "../../../assets/scss/variables/shadows.scss" as *;
 
 $datepicker-shadow: $ib-shadow-3;
 $datepicker-bg: $white;

package/src/components/Form/DatePicker/DatePicker.vue

@@ -335,5 +335,5 @@ export default {
 };
 </script>
 <style lang="scss">
-@import "./DatePicker.scss";
+@use "./DatePicker.scss" as *;
 </style>

package/src/components/Form/FormGroup/FormGroup.vue

@@ -22,8 +22,8 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../../../assets/scss/typography.scss";
-@import "../../../assets/scss/variables/colors.scss";
+@use "../../../assets/scss/typography.scss" as *;
+@use "../../../assets/scss/variables/colors.scss" as *;
 
 .ib-form-group {
   display: flex;

package/src/components/Form/FormGroup/FormGroupSet.vue

@@ -35,7 +35,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../../../assets/scss/typography.scss";
+@use "../../../assets/scss/typography.scss" as *;
 .ib-form-group-set {
   max-width: 476px;
   width: fit-content;