@avakhula/ui 0.0.175 → 0.0.177

package/package.json

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

package/src/App.vue

@@ -1,20 +1,59 @@
-
 <template>
-  <form>
-    <!-- <ib-input required autofocus type="email" id="email" name="email" ref="email" /> -->
-    <ib-input name="password" type="password" />
+  <div class="hello">
+    <div v-for="item in items" :key="item.id">
+      {{ item.name }}
 
-		<input type="text" name="username" />
-		<input type="password" name="password" />
-		<input type="submit" name="Login">
-  </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 {
+      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: {
+    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/Button/button.scss

@@ -160,6 +160,7 @@ $disabled-btn-color: $neutral-500;
         &.ib-btn-link,
         &:disabled {
           background: $ghost-btn-disabled-background;
+          border-color: transparent;
         }
       }
     }

package/src/components/Form/Input/input.scss

@@ -102,26 +102,29 @@ $input-border-error-color: $red-800;
 
     &:-webkit-autofill {
       & + .button-clear {
-        display: block!important;
+        display: flex!important;
       }
 
       & + .toggle-password{
-        display: block!important;
+        display: flex!important;
       }
     }
 
+    &::-ms-reveal {
+      display: none;
+    }
+
     &:disabled {
       color: $input-disabled-color;
       background-color: $input-disabled-bg;
       border-bottom-color: $input-disabled-border-color;
 
-      &::-ms-reveal {
-        display: none;
-      }
-
-      &:-webkit-autofill {
-        color: $input-disabled-color;
-        background-color: $input-disabled-bg;
+      &:-webkit-autofill,
+      &:-webkit-autofill:hover, 
+      &:-webkit-autofill:focus, 
+      &:-webkit-autofill:active {
+        -webkit-box-shadow: 0 0 0 30px $input-disabled-bg inset !important;
+        -webkit-text-fill-color: $input-disabled-color;
       }
 
       &::placeholder {
@@ -143,6 +146,11 @@ $input-border-error-color: $red-800;
       border-radius: 4px;
       border-color: transparent;
       @include outline(-2px, $input-border-error-color);
+
+      &:focus {
+        border-bottom: 0px;
+        @include focus(-2px);
+      }
     }
   }
 }

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/IconButton/IconButton.vue

@@ -6,8 +6,7 @@
     :kind="kind"
     :disabled="disabled"
     :prevent-default="preventDefault"
-    >
-    <!-- :tabindex="disabledFocus ? -1 : 0" -->
+  >
     <slot></slot>
     <ib-tooltip v-if="helpText.length" :text="helpText" />
   </ib-button>

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;