@avakhula/ui 0.0.176 → 0.0.177

package/package.json

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

package/src/App.vue

@@ -1,32 +1,59 @@
-
 <template>
-  <form>
-    <ib-input name="password" type="password" />
-    <ib-input :disabled="test" name="username" type="email" />
-
-		<!-- <input type="text" name="username" />
-		<input type="password" name="password" />
-		<input type="submit" name="Login"> -->
+  <div class="hello">
+    <div v-for="item in items" :key="item.id">
+      {{ item.name }}
 
-    <button type="button" @click="test = true">Disabled</button>
-  </form>
+      <ib-icon-button @click="deleteItem(item.id)" v-tooltip="'DELETE'">
+        <ib-icon name="close-outline" />
+      </ib-icon-button>
+    </div>
+  </div>
 </template>
 
 <script>
-import IbInput from "./components/Form/Input/input.vue";
+import { TextOverflowTooltipDirective as TextOverflowTooltip } from "./directives/tooltip/textOverflowTooltip";
+import { TooltipDirective as Tooltip } from "./directives/tooltip/tooltip";
+
+import IbIconButton from "./components/IconButton/IconButton.vue";
+import IbIcon from "./components/Icon.vue"
 export default {
   data() {
     return {
-      test: false,
+      items: [
+        { id: 1, name: "Item 1" },
+        { id: 2, name: "Item 2" },
+        { id: 3, name: "Item 3" },
+        { id: 4, name: "Item 4" },
+        { id: 5, name: "Item 5" },
+      ],
     };
   },
   methods: {
-    test1() {
-      console.log('dissabled')
-    }
+    deleteItem(id) {
+      const idx = this.items.findIndex((item) => item.id === id);
+      this.items.splice(idx, 1);
+    },
+  },
+  directives: {
+    TextOverflowTooltip,
+    Tooltip
   },
   components: {
-    IbInput
+    IbIconButton,
+    IbIcon
   }
+};
+</script>
+
+<style lang="scss">
+@import "./assets/scss/mixins.scss";
+
+.hello {
+  padding: 200px;
+}
+
+.test {
+  max-width: 20px;
+  @include lineClamp(1);
 }
-</script>
+</style>

package/src/components/Form/Label/Label.vue

@@ -8,6 +8,7 @@
       size="xs"
       class="info-button"
       kind="ghost"
+      type="button"
     >
       <ib-icon name="information-circle-outline" />
 

package/src/components/TreeSelect/Select.vue

@@ -21,6 +21,7 @@
           tabindex="0"
           class="tree-choice"
           @click.prevent
+          @blur="() => $emit('blur')"
           :aria-label="ariaLabel"
           :aria-expanded="isOpened"
           :class="{
@@ -387,7 +388,15 @@ export default {
       default: false,
     },
   },
-  emits: ["close", "input", "search", "resize", "submit", "update:modelValue"],
+  emits: [
+    "close",
+    "input",
+    "blur",
+    "search",
+    "resize",
+    "submit",
+    "update:modelValue",
+  ],
   watch: {
     value(value) {
       this.val = value;