@avakhula/ui 0.0.503 → 0.0.505-alpha-spa.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@avakhula/ui",
-  "version": "0.0.503",
+  "version": "0.0.505-alpha-spa.2",
   "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,9 +21,9 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.5.4",
     "@vueup/vue-quill": "^1.2.0",
     "mitt": "^3.0.0",
+    "quill-placeholder-module": "^0.3.1",
     "vue": "^3.2.45"
   },
   "devDependencies": {
@@ -61,6 +61,6 @@
     "vite": "^4.0.0",
     "vitest": "^0.28.4",
     "vue-loader": "^16.8.3",
-    "vue-tel-input": "^8.1.1"
+    "vue-tel-input": "^9.1.4"
   }
 }

package/src/App.vue

@@ -1,135 +1,20 @@
 <template>
-  <ib-select :options="opt">
-    <template v-slot:triggerContent="{ selectedCount }">
-        {{ selectedCount }}
+  <chips :active="true" @click="() => console.log('hello click')">
+    <template #icon>
+      <icon name="people-outline" />
     </template>
-  </ib-select>
-
+    Users
+  </chips>
 </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,
-  },
-];
+import Chips from "./components/Chips/Chips.vue";
+import Icon from "./components/Icon.vue";
 export default {
-  data() {
-    return {
-      opt: testData1,
-    }
+  components: {
+    Chips,
+    Icon,
   },
-  components: {IbSelect}
-}
-</script>
+};
+</script>
+

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

@@ -36,6 +36,11 @@
       background-color: $gray-100;
     }
 
+    &:disabled {
+      cursor: not-allowed;
+      color: $neutral-500;
+    }
+
     &:focus {
       @include focus();
     }

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/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;
@@ -216,6 +218,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 = {};
+

package/src/components/Chips/Chips.vue

@@ -0,0 +1,125 @@
+<template>
+  <button
+    :class="{
+      'ib-chips': true,
+      'ib-chips-active': active,
+      'ib-chips-error': error,
+      'ib-chips-disabled': disabled,
+    }"
+    :disabled="disabled"
+  >
+    <span v-if="hasIcon" class="ib-chips-icon-wrapper">
+      <slot class="ib-chips-icon" name="icon" />
+    </span>
+
+    <slot />
+
+    <span class="ib-chips-close-wrapper" v-if="showCloseIcon">
+      <icon class="ib-chips-icon" name="close-outline" />
+    </span>
+  </button>
+</template>
+
+<script>
+import Icon from "../Icon.vue";
+
+export default {
+  props: {
+    showCloseIcon: {
+      type: Boolean,
+      default: false,
+    },
+    active: {
+      type: Boolean,
+      default: false,
+    },
+    error: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    hasIcon() {
+      return this.$slots?.icon;
+    },
+  },
+  components: {
+    Icon,
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "../../assets/scss/variables/colors.scss";
+@import "../../assets/scss/typography.scss";
+@import "../../assets/scss/mixins.scss";
+
+.ib-chips {
+  @include Ib-H4-medium;
+  padding: 8.5px 10px;
+  border: 2px solid transparent;
+  border-radius: 4px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  background-color: $gray-100;
+  color: $neutral-600;
+  cursor: pointer;
+  transition: all 0.3s;
+
+  .ib-chips-close-wrapper,
+  .ib-chips-icon-wrapper {
+    width: 16px;
+    height: 16px;
+  }
+
+  .ib-chips-icon-wrapper {
+    margin-right: 5px;
+  }
+  .ib-chips-close-wrapper {
+    margin-left: 5px;
+  }
+
+  .ib-chips-icon {
+    color: inherit;
+    font-size: 16px;
+  }
+
+  &.ib-chips-active {
+    background-color: $blue-200;
+    color: $blue-800;
+  }
+
+  &.ib-chips-error {
+    border-color: $red-800;
+    color: $red-800;
+    background-color: $red-50;
+  }
+
+  &.ib-chips-disabled {
+    border-color: transparent!important;
+    color: $neutral-500!important;
+    background-color: $gray-100!important;
+    cursor: default;
+  }
+
+  &:hover {
+    border-color: $blue-300;
+    background-color: $blue-100;
+    color: $blue-700;
+  }
+
+  &:active {
+    border-color: transparent;
+    background-color: $blue-200;
+    color: $blue-900;
+  }
+
+  &:focus {
+    @include focus(2px);
+  }
+}
+</style>