@avakhula/ui 0.0.238 → 0.0.240

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@avakhula/ui",
-  "version": "0.0.238",
+  "version": "0.0.240",
   "main": "dist/index.js",
   "module": "dist/index.umd.cjs",
   "source": "src/index.js",

package/src/App.vue

@@ -1,243 +1,34 @@
 <template>
-  {{ selectedRoles }}
+  <div style="width: 200px;height: 200px;display: flex;align-items: center;justify-content: center;">
+  <ib-dropdown-list
+  >
+      <template #trigger>
+          <ib-icon-button
+              kind="ghost"
+              v-tooltip="'test'"
+          >
+        X
+        </ib-icon-button>
+      </template>
 
-  <ib-select
-    :options="opt"
-  />
+      <template #body>
+         test
+      </template>
+  </ib-dropdown-list>
+</div>
 
-<button @click="selectedRoles = []">resset</button>
 </template>
 
 <script>
-import IbSelect from "./components/TreeSelect/Select.vue";
-const testData1 = [
-  {
-    id: "1",
-    title: "A Education",
-    is_category: true,
-    isDisabled: false,
-    checked: true,
-    isChildrenVisible: true,
-  },
-  {
-    id: "2",
-    title: "Education 2",
-    is_category: true,
-    isDisabled: false,
-    checked: false,
-    isChildrenVisible: true,
-  },
-  {
-    id: "3",
-    title: "Education 3",
-    is_category: true,
-    isDisabled: false,
-    checked: false,
-    isChildrenVisible: true,
-  },
-  {
-    id: "4",
-    title: "Education 4",
-    is_category: true,
-    isDisabled: false,
-    checked: false,
-    isChildrenVisible: true,
-  },
-  {
-    id: "5",
-    title: "Education 5",
-    is_category: true,
-    isDisabled: false,
-    checked: false,
-    isChildrenVisible: true,
-  },
-
-  {
-    id: "6",
-    title: "Education 6",
-    is_category: true,
-    isDisabled: false,
-    checked: false,
-    isChildrenVisible: true,
-  },
-
-  {
-    id: "7",
-    title: "Education 7",
-    is_category: true,
-    isDisabled: false,
-    checked: false,
-    isChildrenVisible: true,
-  },
-
-  {
-    id: "8",
-    title: "Education 8",
-    is_category: true,
-    isDisabled: false,
-    checked: false,
-    isChildrenVisible: true,
-  },
-  {
-    id: "9",
-    title: "Education 9",
-    is_category: true,
-    isDisabled: false,
-    checked: false,
-    isChildrenVisible: true,
-  },
-  {
-    id: "10",
-    title: "Education 10",
-    is_category: true,
-    isDisabled: false,
-    checked: false,
-    isChildrenVisible: true,
-  },
-  {
-    id: "11",
-    title: "Education 11",
-    is_category: true,
-    isDisabled: false,
-    checked: false,
-    isChildrenVisible: true,
-  },
-];
+import IbIconButton from "./components/IconButton/IconButton.vue";
+import IbDropdownList from "./components/Dropdown/DropdownList.vue"
+import { TooltipDirective as Tooltip } from "./directives/tooltip/tooltip"
 
-const testData = [
-  {
-    id: "category_id_2",
-    title: "Education",
-    is_category: true,
-    children: [
-      {
-        id: "category_id_19",
-        title: "Test1",
-        is_category: true,
-        children: [
-          {
-            id: 139,
-            title: "Test Course 1",
-            selected: false,
-            isDisabled: false,
-            checked: false,
-          },
-          {
-            id: 300,
-            title: "Course for unenrollmemt test",
-            selected: false,
-            isDisabled: false,
-            checked: false,
-          },
-        ],
-        isDisabled: false,
-        checked: false,
-        isChildrenVisible: true,
-      },
-      {
-        id: 15,
-        title: "History",
-        selected: false,
-        isDisabled: false,
-        checked: false,
-      },
-      {
-        id: 17,
-        title: "Algebra 101",
-        selected: false,
-        isDisabled: false,
-        checked: false,
-      },
-      {
-        id: 29,
-        title: "Music",
-        selected: false,
-        isDisabled: false,
-        checked: false,
-      },
-      {
-        id: 30,
-        title: "Astronomy",
-        selected: false,
-        isDisabled: false,
-        checked: false,
-      },
-      {
-        id: 31,
-        title: "Pharmacology",
-        selected: false,
-        isDisabled: false,
-        checked: false,
-      },
-      {
-        id: 32,
-        title: "German Basics",
-        selected: false,
-        isDisabled: false,
-        checked: false,
-      },
-    ],
-    isDisabled: false,
-    checked: false,
-    isChildrenVisible: true,
-  },
-  {
-    id: 43234,
-    title: "German Basics 1",
-    selected: false,
-    isDisabled: false,
-    checked: false,
-  },
-  {
-    id: 434,
-    title: "German Basics 2",
-    selected: false,
-    isDisabled: false,
-    checked: false,
-  },
-  {
-    id: 4324,
-    title: "German Basics 3",
-    selected: false,
-    isDisabled: false,
-    checked: false,
-  },
-  {
-    id: 41224,
-    title: "German Basics 4",
-    selected: false,
-    isDisabled: false,
-    checked: false,
-  },
-  {
-    id: 990,
-    title: "German Basics 5",
-    selected: false,
-    isDisabled: false,
-    checked: false,
-  },
-  {
-    id: 122324,
-    title: "German Basics 6",
-    selected: false,
-    isDisabled: false,
-    checked: false,
-  },
-  {
-    id: 9123123,
-    title: "German Basics 7",
-    selected: false,
-    isDisabled: false,
-    checked: false,
-  },
-];
 export default {
-  data() {
-    return {
-      opt: testData,
-      selectedRolesVal: []
-    }
+  components: {
+      IbDropdownList,
+      IbIconButton,
   },
-  components: {IbSelect}
+  directives: { Tooltip },
 }
 </script>

package/src/components/Modal/Modal.stories.js

@@ -29,9 +29,7 @@ const Template = (args) => ({
   },
   template: `
     <ib-modal v-bind="args">
-      <template #trigger>
-        <ib-button>Show modal</ib-button>
-      </template>
+     
       <template #header>
         Remove
       </template>
@@ -47,7 +45,11 @@ const Template = (args) => ({
         </ib-button-group>
       </template>
     </ib-modal>
+
+    <ib-button>Show modal</ib-button>
   `,
 });
 
-export const Default = Template.bind({});
+export const Default = Template.bind({
+  active: true,
+});

package/src/components/Modal/Modal.vue

@@ -101,6 +101,7 @@ export default {
     );
 
     document.addEventListener("keydown", this.onKeydown);
+    document.addEventListener("blur", this.setFocusOnModal, true);
   },
   data() {
     return {
@@ -129,6 +130,13 @@ export default {
       document.body.classList.remove("modal-open");
       this.$emit("close");
     },
+    setFocusOnModal(e) {
+      if(!this.$refs.modal?.contains(e.target) && this.isActive) {
+        this.$refs.modal.querySelector(
+          "[tabindex], a, button, input, select, textarea"
+        ).focus();
+      }
+    },
     clickOutside(e) {
       if (this.stopPropagation) {
         return;
@@ -212,6 +220,7 @@ export default {
     }
 
     document.removeEventListener("keydown", this.onKeydown);
+    document.removeEventListener("blur", this.setFocusOnModal, true);
   },
 };
 </script>

package/src/components/ProgressBar/ProgressBar.vue

@@ -4,6 +4,7 @@
       <div
         class="progress"
         role="meter"
+        :aria-name="ariaName"
         aria-valuemin="0"
         aria-valuemax="100"
         :aria-valuenow="progress"
@@ -31,6 +32,10 @@ export default {
       type: [String, Number],
       default: 0,
     },
+    ariaName: {
+      type: String,
+      required: true
+    }
   },
   computed: {
     classes() {

package/src/components/TreeSelect/Select.vue

@@ -658,6 +658,8 @@ export default {
       this.allOptionsIsChecked = false;
       this.selected = [];
       this.$emit("update:modelValue", null);
+      this.$emit("clear-value");
+      this.$emit("input", null);
     },
     clearValue() {
       this.clear();

package/src/directives/tooltip/tooltip.js

@@ -43,7 +43,7 @@ const attachTooltipListeners = (el, binding) => {
 };
 
 const removeTooltipListeners = (el) => {
-  tooltip.destroyTooltip();
+  tooltip.destroyTooltip(el);
   el.removeEventListener("mouseenter", el.__tooltip_create);
   document.removeEventListener("mousemove", el.__tooltip_destroy);
 };