@avakhula/ui 0.0.174 → 0.0.176

package/package.json

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

package/src/App.vue

@@ -1,59 +1,32 @@
+
 <template>
-  <div class="hello">
-    <div v-for="item in items" :key="item.id">
-      {{ item.name }}
+  <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"> -->
 
-      <ib-icon-button @click="deleteItem(item.id)" v-tooltip="'DELETE'">
-        <ib-icon name="close-outline" />
-      </ib-icon-button>
-    </div>
-  </div>
+    <button type="button" @click="test = true">Disabled</button>
+  </form>
 </template>
 
 <script>
-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"
+import IbInput from "./components/Form/Input/input.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" },
-      ],
+      test: false,
     };
   },
   methods: {
-    deleteItem(id) {
-      const idx = this.items.findIndex((item) => item.id === id);
-      this.items.splice(idx, 1);
-    },
-  },
-  directives: {
-    TextOverflowTooltip,
-    Tooltip
+    test1() {
+      console.log('dissabled')
+    }
   },
   components: {
-    IbIconButton,
-    IbIcon
+    IbInput
   }
-};
-</script>
-
-<style lang="scss">
-@import "./assets/scss/mixins.scss";
-
-.hello {
-  padding: 200px;
-}
-
-.test {
-  max-width: 20px;
-  @include lineClamp(1);
 }
-</style>
+</script>

package/src/components/Alert/Alert.vue

@@ -90,10 +90,12 @@ export default {
         this.$refs.content.classList.remove("large");
       }
 
-      if (parseInt(contentStyle.height) > 37 &&
-        this.showIcon &&
-        this.title?.length) {
-        this.$refs.content.classList.add("large");
+      if (parseInt(contentStyle.height) > 37 && this.showIcon) {
+        if (this.title.length) {
+          this.$refs.content.classList.add("large");
+        } else {
+          this.$refs.content.classList.add("medium");
+        }
       }
     },
   },

package/src/components/Alert/alert.scss

@@ -97,6 +97,25 @@ $alert-success-secondary-color: $green-50;
         padding-left: 0;
       }
     }
+
+    &.medium {
+      align-items: start;
+      padding-left: 3px;
+      padding-right: 5px;
+
+      .text-content {
+        @include Ib-P1-regular;
+        margin-bottom: 5px;
+        padding-left: 0!important;
+      }
+
+      & + .close-button {
+        position: absolute;
+        right: 10px;
+        top: 10px;
+        transform: translateY(0);
+      }
+    }
   }
 
   &.has-icon {

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

@@ -3,6 +3,8 @@
     <ib-alert v-if="errorMessage">{{ errorMessage }}</ib-alert>
 
     <div class="ib-input-wrapper" :class="{ 'has-settings': hasSettings }">
+      <ib-icon v-if="showIcon" class="icon-search" name="search-outline" />
+
       <input
         v-bind="attrs"
         v-model="actualValue"
@@ -14,11 +16,8 @@
         @input="onInput($event)"
         @blur="onBlur($event)"
         @focus="onFocus($event)"
-        @change="onChange($event)"
       />
 
-      <ib-icon v-if="showIcon" class="icon-search" name="search-outline" />
-
       <ib-icon-button
         kind="ghost"
         class="button-clear"
@@ -28,7 +27,8 @@
         type="button"
         @click="clearInput"
         @keypress.enter="clearInput"
-        v-if="actualValue?.length && type !== 'password' && showClearButton"
+        v-if="type !== 'password' && showClearButton"
+        v-show="actualValue?.length"
       >
         <ib-icon name="close-outline"></ib-icon>
       </ib-icon-button>
@@ -41,7 +41,8 @@
         :disabled="readonly || disabled"
         :help-text="showPassword ? hidePasswordMessage : showPasswordMessage"
         @click.prevent="toggleShowPassword"
-        v-if="actualValue?.length && type === 'password'"
+        v-if="type === 'password'"
+        v-show="actualValue?.length"
       >
         <ib-icon
           :name="showPassword ? 'eye-off-outline' : 'eye-outline'"
@@ -83,6 +84,7 @@ import IbDropdown from "../../Dropdown/Dropdown.vue";
 import { inputTypeOptions } from "./constants";
 import generateUID from "../../../helpers/generateUID";
 import removeEvents from "../../../helpers/removeEvents";
+
 import {
   verticalPosition,
   horizontalPosition,
@@ -196,10 +198,6 @@ export default {
         this.$emit("input", this.actualValue);
       }
     },
-    onChange(event) {
-      this.actualValue = event.target.value;
-      this.$emit("focus", event.target.value);
-    },
     delayedInput(value) {
       if (this.timer) {
         clearTimeout(this.timer);
@@ -245,8 +243,8 @@ export default {
     value(newVal) {
       this.actualValue = newVal;
     },
-    disabled(val) {
-      this.$globalEvents.$emit(`label:disabled:${this.id}`, val);
+    disabled(newVal) {
+      this.$globalEvents.$emit(`label:disabled:${this.id}`, newVal);
     },
   },
   emits: [

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

@@ -83,7 +83,7 @@ $input-border-error-color: $red-800;
     outline: none;
     border-bottom: 1px solid $input-border-color;
     transition: color 0.3s, border-radius 0.3s, border-bottom-color 0.3s,
-      background-color 0.3s;
+    background-color 0.3s;
 
     &::placeholder {
       @include Ib-H4-regular-italic;
@@ -100,18 +100,31 @@ $input-border-error-color: $red-800;
       }
     }
 
+    &:-webkit-autofill {
+      & + .button-clear {
+        display: flex!important;
+      }
+
+      & + .toggle-password{
+        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 {
@@ -133,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/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>