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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@avakhula/ui",
-  "version": "0.0.505",
+  "version": "0.0.506-alpha-spa.1",
   "main": "dist/index.js",
   "module": "dist/index.umd.cjs",
   "source": "src/index.js",
@@ -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",
@@ -58,9 +59,9 @@
     "sass": "^1.57.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,16 @@
 <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;">
+    <ib-select data-testid="tests" data-foo="sdf" dusk="asd" :options="[]" />
+</div>
 
 </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,
-  },
 
-  {
-    id: "7",
-    title: "Education 7",
-    is_category: true,
-    initiallyVisible: true,
-    visible: true,
-    isDisabled: false,
-    checked: false,
-    isChildrenVisible: true,
-  },
-
-  {
-    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: {
+    IbSelect,
   },
-  components: {IbSelect}
-}
-</script>
+};
+</script>

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

@@ -5,7 +5,7 @@
 @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/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/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();

package/src/components/Alert/alert.scss

@@ -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() {
@@ -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/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,6 +102,9 @@ export default {
     IbDropdownList,
     IbTooltip,
   },
+  directives: {
+    OverflowTooltip,
+  },
 };
 </script>
 

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");
       }
 
@@ -154,6 +166,10 @@ export default {
       if (this.href.length) {
         attrsList.href = this.href;
       }
+      
+      if(this.to) {
+        attrsList.to = this.to;
+      }
 
       return attrsList;
     },

package/src/components/Button/button.scss

@@ -136,6 +136,7 @@ $disabled-btn-color: $neutral-500;
         background: $tertiary-btn-focus-background;
       }
 
+      &.active,
       &:active {
         color: $tertiary-btn-active-color;
         background: $tertiary-btn-active-background;
@@ -151,6 +152,7 @@ $disabled-btn-color: $neutral-500;
         background: $ghost-btn-hover-background;
       }
 
+      &.active,
       &:active {
         color: $ghost-btn-active-color;
         background: $ghost-btn-active-background;
@@ -209,6 +211,7 @@ $disabled-btn-color: $neutral-500;
     display: block;
     text-align: center;
     width: 100%;
+    line-height: 36px;
   }
 
   &.ib-btn-disabled {
@@ -216,6 +219,8 @@ $disabled-btn-color: $neutral-500;
     &:disabled {
       background: $disabled-btn-background;
       color: $disabled-btn-color;
+      cursor: auto;
+      pointer-events: none;
     }
   }
 }

package/src/components/Chips/Chips.stories.js

@@ -0,0 +1,30 @@
+import IbChips from "./Chips.vue";
+import Icon from "../Icon.vue";
+
+export default {
+title: "Chips",
+  component: IbChips,
+}
+
+const Template = (args) => ({
+  components: { IbChips },
+  setup() {
+    return { args };
+  },
+  template: '<ib-chips v-bind="args">Total Visits: 0-20</ib-chips>',
+});
+
+const TemplateWithIcon = (args) => ({
+  components: { IbChips, Icon },
+  setup() {
+    return { args };
+  },
+  template: '<ib-chips v-bind="args"><template #icon><icon name="people-outline" /></template>Users</ib-chips>',
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const ChipsWithIcon = TemplateWithIcon.bind({});
+ChipsWithIcon.args = {};
+