@avakhula/ui 0.0.505 → 0.0.510-alpha-spa.1

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@avakhula/ui",
-  "version": "0.0.505",
-  "main": "dist/index.js",
-  "module": "dist/index.umd.cjs",
+  "version": "0.0.510-alpha-spa.01",
+  "main": "dist/index.umd.js",
+  "module": "dist/index.es.js",
   "source": "src/index.js",
   "type": "module",
   "private": false,
@@ -11,7 +11,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --port 3006",
     "build": "vite build",
     "preview": "vite preview",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --ignore-path .gitignore",
@@ -21,10 +21,11 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.5.4",
+    "@tanstack/vue-virtual": "^3.13.12",
     "@vueup/vue-quill": "^1.2.0",
     "mitt": "^3.0.0",
-    "vue": "^3.2.45"
+    "quill-placeholder-module": "^0.3.1",
+    "vue": "3.4.6"
   },
   "devDependencies": {
     "@babel/core": "^7.20.7",
@@ -55,12 +56,12 @@
     "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": "^8.1.1"
+    "vue-tel-input": "^9.1.4"
   }
 }

package/src/App.vue

@@ -1,135 +1,24 @@
 <template>
-  <ib-select :options="opt">
-    <template v-slot:triggerContent="{ selectedCount }">
-        {{ selectedCount }}
-    </template>
-  </ib-select>
+<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh;">
 
-</template>
+    <ib-textarea
+        @blur="console.log('test')"
+    >
 
-<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,
-  },
+        <template #actions>
+            <button>test</button>
+        </template>
+    </ib-textarea>
+</div>
 
-  {
-    id: "6",
-    title: "Education 6",
-    is_category: true,
-    initiallyVisible: true,
-    visible: true,
-    isDisabled: false,
-    checked: false,
-    isChildrenVisible: true,
-  },
+</template>
 
-  {
-    id: "7",
-    title: "Education 7",
-    is_category: true,
-    initiallyVisible: true,
-    visible: true,
-    isDisabled: false,
-    checked: false,
-    isChildrenVisible: true,
-  },
+<script>
+import IbTextarea from "./components/Form/Textarea/Textarea.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 {
-  data() {
-    return {
-      opt: testData1,
-    }
+  components: {
+    IbTextarea,
   },
-  components: {IbSelect}
-}
-</script>
+};
+</script>

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

@@ -1,11 +1,11 @@
-@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 {
     @include Ib-H4-regular;
-    padding: 8.5px 15px 13px;
+    padding: 8.5px 15px;
     background-color: transparent;
     border: none;
     border-left: 2px solid transparent;
@@ -36,6 +36,11 @@
       background-color: $gray-100;
     }
 
+    &:disabled {
+      cursor: not-allowed;
+      color: $neutral-500;
+    }
+
     &:focus {
       @include focus();
     }

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

@@ -6,6 +6,7 @@
         <b v-if="title?.length" class="ib-alert-title">
           {{ title }}
         </b>
+        <slot name="title"></slot>
       </span>
 
       <span class="text-content">
@@ -54,6 +55,10 @@ export default {
       type: String,
       default: "",
     },
+    additionalTitleText: {
+      type: String,
+      default: "",
+    },
   },
   mounted() {
     this.checkHeight();
@@ -146,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;
@@ -82,6 +82,7 @@ $alert-success-secondary-color: $green-50;
 
     .text-content {
       @include Ib-H5-regular;
+      margin-left: 3px;
     }
 
     &.large {
@@ -109,6 +110,7 @@ $alert-success-secondary-color: $green-50;
         margin-bottom: 5px;
         padding-left: 0!important;
         word-break: break-word;
+        margin-left: 3px;
       }
 
       & + .close-button {
@@ -138,10 +140,13 @@ $alert-success-secondary-color: $green-50;
   }
 
   &-title {
-    margin-right: 5px;
     @include Ib-H4-medium;
   }
 
+  &-additional-text {
+    margin-right: 5px;
+  }
+
   &-icon {
     display: inline-block;
     font-size: 20px;

package/src/components/Avatar/Avatar.stories.js

@@ -1,5 +1,5 @@
 import Avatar from "./Avatar.vue";
-import { avatarSizes } from "./constants";
+import { avatarSizes, avatarTypes } from "./constants";
 
 export default {
   title: "Avatar",
@@ -9,6 +9,10 @@ export default {
       control: { type: "select" },
       options: Object.values(avatarSizes),
     },
+    type: {
+      control: { type: "select" },
+      options: Object.values(avatarTypes),
+    },
   },
 };
 

package/src/components/Avatar/Avatar.vue

@@ -26,7 +26,7 @@
 
 <script>
 import IbIcon from "../Icon.vue";
-import { avatarSizes } from "./constants";
+import { avatarSizes, avatarTypes } from "./constants";
 
 export default {
   name: "IbAvatar",
@@ -51,10 +51,14 @@ export default {
       type: String,
       default: avatarSizes.M,
     },
+    type: {
+      type: String,
+      default: avatarTypes.CIRCLE,
+    },
   },
   computed: {
     classList() {
-      const classList = ["avatar", `avatar-size-${this.size}`];
+      const classList = ["avatar", `avatar-size-${this.size}`, `avatar-type-${this.type}`];
       return classList;
     },
     validateName() {
@@ -74,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 {
@@ -86,15 +90,34 @@ $avatar-border: $blue-200;
   justify-content: center;
   object-fit: cover;
 
+  &.avatar-type-circle {
+    border-radius: 100%;
+  }
+
+  &.avatar-type-square {
+    border-radius: 4px;
+  }
+
   &.avatar-size {
     &-m {
       width: 34px;
+      min-width: 34px;
       height: 34px;
+      min-height: 34px;
     }
 
     &-l {
       width: 74px;
+      min-width: 74px;
       height: 74px;
+      min-height: 74px;
+    }
+
+    &-xl {
+      width: 87px;
+      min-width: 87px;
+      height: 87px;
+      min-height: 87px;
     }
   }
 

package/src/components/Avatar/constants.js

@@ -1,4 +1,10 @@
 export const avatarSizes = {
   M: "m",
   L: "l",
+  XL: "xl",
 };
+
+export const avatarTypes = {
+  SQUARE: "square",
+  CIRCLE: "circle",
+};

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

@@ -8,15 +8,25 @@
         v-for="(item, index) in items"
         :key="index"
       >
-        <a
-          class="ib-link"
-          :href="item.url"
-          v-if="(index !== last && index > items.length - 4) || index === 0"
-        >
-          {{ item.title }}
-        </a>
+        <template v-if="(index !== last && index > items.length - 4) || index === 0">
+            <a
+                v-if="item.url"
+                class="ib-link"
+                :href="item.url"
+            >
+                {{ item.title }}
+            </a>
 
-        <p v-if="index === last">
+            <router-link
+                v-else
+                class="ib-link"
+                :to="item.to"
+            >
+                {{ item.title }}
+            </router-link>
+        </template>
+
+        <p v-if="index === last && item.title" v-overflow-tooltip.bottomCenter="item.title">
           {{ item.title }}
         </p>
 
@@ -60,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: {
@@ -90,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

@@ -1,10 +1,10 @@
 <template>
   <component
-    :is="href.length ? 'a' : 'button'"
+    :is="component"
+    v-bind="attrs"
     @click="onClick($event)"
     @mouseenter="onMouseenter"
     @mouseleave="onMouseleave"
-    v-bind="attrs"
   >
     <slot name="icon"></slot>
     <slot></slot>
@@ -61,6 +61,9 @@ export default {
       type: String,
       default: "",
     },
+    to: {
+      type: [String, Object],
+    },
     linkMethod: {
       type: String,
       default: "get",
@@ -123,6 +126,15 @@ export default {
     },
   },
   computed: {
+    component() {
+      if (this.href.length) {
+        return "a";
+      } else if (this.to) {
+        return "router-link";
+      } else {
+        return "button";
+      }
+    },
     classes() {
       const classList = ["ib-button"];
       classList.push(`ib-btn-${this.kind}`);
@@ -135,7 +147,7 @@ export default {
         classList.push("ib-btn-block");
       }
 
-      if (this.href.length) {
+      if (this.href.length || this.to) {
         classList.push("ib-btn-link");
       }
 
@@ -155,6 +167,10 @@ export default {
         attrsList.href = this.href;
       }
 
+      if(this.to) {
+        attrsList.to = this.to;
+      }
+
       return attrsList;
     },
     hasIcon() {
@@ -172,5 +188,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import "./button.scss";
+@use "./button.scss" as *;
 </style>