@avakhula/ui 0.0.207 → 0.0.208

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@avakhula/ui",
-  "version": "0.0.207",
+  "version": "0.0.208",
   "main": "dist/index.js",
   "module": "dist/index.umd.cjs",
   "source": "src/index.js",
@@ -29,16 +29,16 @@
     "@babel/core": "^7.20.7",
     "@babel/preset-env": "^7.21.4",
     "@rushstack/eslint-patch": "^1.1.4",
-    "@storybook/addon-a11y": "^7.1.0",
-    "@storybook/addon-actions": "^7.1.0",
-    "@storybook/addon-docs": "^7.1.0",
-    "@storybook/addon-essentials": "^7.1.0",
-    "@storybook/addon-interactions": "^7.1.0",
-    "@storybook/addon-links": "^7.1.0",
-    "@storybook/addon-mdx-gfm": "^7.1.0",
+    "@storybook/addon-a11y": "^7.3.2",
+    "@storybook/addon-actions": "^7.3.2",
+    "@storybook/addon-docs": "^7.3.2",
+    "@storybook/addon-essentials": "^7.3.2",
+    "@storybook/addon-interactions": "^7.3.2",
+    "@storybook/addon-links": "^7.3.2",
+    "@storybook/addon-mdx-gfm": "^7.3.2",
     "@storybook/testing-library": "^0.2.0",
-    "@storybook/vue3": "^7.1.0",
-    "@storybook/vue3-vite": "^7.1.0",
+    "@storybook/vue3": "^7.3.2",
+    "@storybook/vue3-vite": "^7.3.2",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vitest/coverage-c8": "^0.28.4",
     "@vue/eslint-config-prettier": "^7.0.0",
@@ -56,7 +56,7 @@
     "react-dom": "^18.2.0",
     "sass": "^1.57.1",
     "sass-loader": "^13.2.0",
-    "storybook": "^7.1.0",
+    "storybook": "^7.3.2",
     "vite": "^4.0.0",
     "vitest": "^0.28.4",
     "vue-loader": "^16.8.3",

package/src/App.vue

@@ -1,30 +1,131 @@
 <template>
-  <div style="padding-left: 200px;padding-top: 200px;">
+  <ib-select :options="opt"/>
 
-    <ib-sorting
-      title="'test'"
-      class="table-sorting"
-      view="table-sorting"
-      table-name="user-list-table"
-      toggle-tip-title="some title"
-    >
-      <template #toggleTipBody>
-        hello
-      </template>
-
-      <template #toggleTipButtons>
-        some buttons
-      </template>
-    </ib-sorting>
-  </div>
 </template>
 
 <script>
-import IbSorting from "./components/Sorting/Sorting.vue";
+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 {
-  components: {
-    IbSorting,
-  }
+  data() {
+    return {
+      opt: testData1,
+    }
+  },
+  components: {IbSelect}
 }
 </script>

package/src/components/Accordion/Accordion.scss

@@ -76,13 +76,10 @@ $content-bg: $gray-50;
   .accordion-content {
     border-radius: 0 0 4px 4px;
     border: 1px solid $content-border-color;
+    padding:10px 15px 15px;
     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;
-    }
   }
 
   &.active {

package/src/components/Accordion/Accordion.vue

@@ -1,6 +1,12 @@
 <template>
   <div class="ib-accordion" :class="{ active: isActive }">
-    <button class="accordion-title" @click="onClick">
+    <button
+      class="accordion-title"
+      :id="'accordion' + uuid"
+      :aria-controls="'accordion-section-' + uuid"
+      :aria-expanded="isActive"
+      @click="onClick"
+    >
       <slot name="title"></slot>
 
       <ib-icon class="chevron-icon" name="chevron-down-outline" />
@@ -12,16 +18,21 @@
       @after-enter="afterEnter"
       @leave="leave"
     >
-      <div v-show="isActive" class="accordion-content">
-        <div class="accordion-content-wrapper">
-          <slot name="content"></slot>
-        </div>
+      <div
+        v-show="isActive"
+        role="region"
+        class="accordion-content"
+        :id="'accordion-section-' + uuid"
+        :aria-labelledby="'accordion' + uuid"
+      >
+        <slot name="content"></slot>
       </div>
     </Transition>
   </div>
 </template>
 
 <script>
+import generateUID from "../../helpers/generateUID";
 import expandAnimation from "../../mixins/expandAnimation";
 import IbIcon from "../Icon.vue";
 
@@ -42,6 +53,7 @@ export default {
   data() {
     return {
       isActive: this.isOpen,
+      uuid: generateUID(),
     };
   },
   methods: {

package/src/components/Alert/alert.scss

@@ -147,7 +147,6 @@ $alert-success-secondary-color: $green-50;
     margin-right: 5px;
   }
 
-  &-error,
   &-alert {
     border-left-color: $alert-alert-primary-color;
     background-color: $alert-alert-secondary-color;

package/src/components/Alert/constants.js

@@ -1,6 +1,5 @@
 export const alertTypeOptions = {
   alert: "alert",
-  error: "error",
   warning: "warning",
   info: "info",
   success: "success",

package/src/components/Avatar/Avatar.vue

@@ -1,10 +1,5 @@
 <template>
-  <img
-    v-if="src && !userAvatar"
-    :class="classList"
-    :src="src"
-    :alt="firstName + '' + lastName"
-  />
+  <img v-if="src && !userAvatar" :class="classList" :src="src" :alt="name" />
 
   <div
     v-else-if="src && userAvatar"
@@ -15,7 +10,7 @@
     }"
   ></div>
 
-  <div v-else-if="!validateName" class="empty-avatar" :class="classList">
+  <div v-else-if="validateName" class="empty-avatar" :class="classList">
     <ib-icon name="camera-outline" />
   </div>
 
@@ -31,11 +26,7 @@ import { avatarSizes } from "./constants";
 export default {
   name: "IbAvatar",
   props: {
-    firstName: {
-      type: String,
-      default: "",
-    },
-    lastName: {
+    name: {
       type: String,
       default: "",
     },
@@ -58,13 +49,14 @@ export default {
       return classList;
     },
     validateName() {
-      return (
-        this.firstName?.trim().length !== 0 &&
-        this.lastName?.trim().length !== 0
-      );
+      return this.name?.trim().split(" ").length < 2;
     },
     initials() {
-      return this.firstName[0].toUpperCase() + this.lastName[0].toUpperCase();
+      const words = this.name.split(" ");
+
+      return words.length === 1
+        ? (words[0][0] + words[0][1]).toUpperCase()
+        : (words[0][0] + words[1][0]).toUpperCase();
     },
   },
   components: {

package/src/components/Dropdown/Dropdown.vue

@@ -2,8 +2,10 @@
   <div class="ib-dropdown" v-outside="close">
     <span
       class="dropdown-trigger"
-      :class="triggerClasses"
       ref="dropdown"
+      aria-haspopup="true"
+      :class="triggerClasses"
+      :aria-expanded="isOpenedState ? true : false"
       @keydown="onKeydown"
       @click.prevent.stop="toggle"
       v-if="hasTrigger && triggerType === 'click'"
@@ -23,6 +25,7 @@
 
     <div
       ref="body"
+      role="menu"
       :class="'ib-dropdown-menu ' + classes"
       v-if="!destroyOnHide || isOpenedState"
       v-show="isOpenedState"
@@ -35,7 +38,7 @@
         </span>
       </div>
       <div class="footer-slot">
-        <slot name="footerslot"></slot>
+        <slot name="footer"></slot>
       </div>
     </div>
 

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

@@ -1,49 +1,51 @@
 <template>
-  <label
-    v-bind="attrs"
-    :for="id"
-    :tabindex="disabled ? -1 : 0"
-    @keypress.prevent="onChange"
-  >
-    <input
-      tabindex="-1"
-      type="checkbox"
-      :name="name"
-      :id="id"
-      :value="value"
-      :checked="checked"
-      :disabled="disabled"
-      :required="required"
-      @click="onChange"
-    />
-    <div class="ib-checkbox-body">
-      <span
-        v-if="labelPosition === 'left' && label.length"
-        class="ib-checkbox-label"
-        :class="{ 'ib-checkbox-label-left': labelPosition === 'left' }"
-      >
-        <span v-if="required" class="required">*</span>
-        {{ label }}
-      </span>
+  <div role="checkbox" :aria-checked="checked ? true : false">
+    <label
+      v-bind="attrs"
+      :for="id"
+      :tabindex="disabled | disableFocus ? -1 : 0"
+      @keypress.prevent="onChange"
+    >
+      <input
+        tabindex="-1"
+        type="checkbox"
+        :name="name"
+        :id="id"
+        :value="value"
+        :checked="checked"
+        :disabled="disabled"
+        :required="required"
+        @click="onChange"
+      />
+      <div class="ib-checkbox-body">
+        <span
+          v-if="labelPosition === 'left' && label.length"
+          class="ib-checkbox-label"
+          :class="{ 'ib-checkbox-label-left': labelPosition === 'left' }"
+        >
+          <span v-if="required" class="required">*</span>
+          {{ label }}
+        </span>
 
-      <span class="ib-checkbox-input">
-        <ib-icon name="checkmark-sharp" v-show="checked && !indeterminate" />
-        <ib-icon
-          :class="'checkbox-undeterminate-icon'"
-          name="remove-sharp"
-          v-show="indeterminate"
-        />
-      </span>
+        <span class="ib-checkbox-input">
+          <ib-icon name="checkmark-sharp" v-show="checked && !indeterminate" />
+          <ib-icon
+            :class="'checkbox-undeterminate-icon'"
+            name="remove-sharp"
+            v-show="indeterminate"
+          />
+        </span>
 
-      <span
-        v-if="labelPosition === 'right' && label?.length"
-        class="ib-checkbox-label"
-      >
-        <span v-if="required" class="required">*</span>
-        {{ label }}
-      </span>
-    </div>
-  </label>
+        <span
+          v-if="labelPosition === 'right' && label?.length"
+          class="ib-checkbox-label"
+        >
+          <span v-if="required" class="required">*</span>
+          {{ label }}
+        </span>
+      </div>
+    </label>
+  </div>
 </template>
 <script>
 import generateUID from "../../../helpers/generateUID";
@@ -82,6 +84,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    disableFocus: {
+      type: Boolean,
+      default: false,
+    },
     required: {
       type: Boolean,
       default: false,

package/src/components/Form/Input/Input.vue

@@ -232,7 +232,7 @@ export default {
       return classList;
     },
     attrs() {
-      let attrs = removeEvents({ ...this.$attrs });
+      let attrs = removeEvents({ ...this.$attrs }, ['onInput', 'onBlur']);
 
       attrs.type =
         this.type === inputTypeOptions.password

package/src/components/Form/Radio/Radio.vue

@@ -1,5 +1,11 @@
 <template>
-  <label :class="classes" :for="id" @click.prevent="onClick">
+  <label
+    role="radio"
+    :class="classes"
+    :for="id"
+    :aria-checked="checked"
+    @click.prevent="onClick"
+  >
     <input
       type="radio"
       :name="name"

package/src/components/Form/Toggle/Toggle.vue

@@ -1,8 +1,11 @@
 <template>
   <label
+    role="switch"
+    :aria-checked="checked"
+    :tabindex="disabled ? -1 : 0"
     :class="classes"
     @keypress.space.prevent="onChange"
-    :tabindex="disabled ? -1 : 0"
+    @keypress.enter.prevent="onChange"
   >
     <div class="toggle-wrapper" ref="wrapper">
       <div class="toggle" ref="toggle">

package/src/components/Modal/Modal.vue

@@ -100,11 +100,7 @@ export default {
       }
     );
 
-    document.addEventListener("keydown", (e) => {
-      if (e.keyCode === ESC_KEY_CODE && !this.stopPropagation && this.active) {
-        this.close();
-      }
-    });
+    document.addEventListener("keydown", this.onKeydown);
   },
   data() {
     return {
@@ -142,6 +138,11 @@ export default {
         this.close();
       }
     },
+    onKeydown(e) {
+      if (e.keyCode === ESC_KEY_CODE && !this.stopPropagation && this.isActive) {
+        this.close();
+      }
+    }
   },
   computed: {
     bodyStyles() {
@@ -209,6 +210,8 @@ export default {
     if (this.isActive) {
       this.close();
     }
+
+    document.removeEventListener("keydown", this.onKeydown);
   },
 };
 </script>

package/src/components/ProgressBar/ProgressBar.vue

@@ -1,7 +1,14 @@
 <template>
   <div class="ib-progress-bar-wrapper">
     <div :class="classes">
-      <div class="progress" :style="{ width: progress + '%' }">
+      <div
+        class="progress"
+        role="meter"
+        aria-valuemin="0"
+        aria-valuemax="100"
+        :aria-valuenow="progress"
+        :style="{ width: progress + '%' }"
+      >
         <div class="gradient"></div>
       </div>
       <div></div>

package/src/components/Sorting/Sorting.stories.js

@@ -16,7 +16,7 @@ export default {
     },
     tooltipPosition: {
       control: { type: "select" },
-      options: Object.keys(popoverPosition),
+      options: Object.values(popoverPosition),
     },
   },
 };