@avakhula/ui 0.0.174 → 0.0.175

package/package.json

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

package/src/App.vue

@@ -1,59 +1,20 @@
+
 <template>
-  <div class="hello">
-    <div v-for="item in items" :key="item.id">
-      {{ item.name }}
+  <form>
+    <!-- <ib-input required autofocus type="email" id="email" name="email" ref="email" /> -->
+    <ib-input name="password" type="password" />
 
-      <ib-icon-button @click="deleteItem(item.id)" v-tooltip="'DELETE'">
-        <ib-icon name="close-outline" />
-      </ib-icon-button>
-    </div>
-  </div>
+		<input type="text" name="username" />
+		<input type="password" name="password" />
+		<input type="submit" name="Login">
+  </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" },
-      ],
-    };
-  },
-  methods: {
-    deleteItem(id) {
-      const idx = this.items.findIndex((item) => item.id === id);
-      this.items.splice(idx, 1);
-    },
-  },
-  directives: {
-    TextOverflowTooltip,
-    Tooltip
-  },
   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/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,6 +100,16 @@ $input-border-error-color: $red-800;
       }
     }
 
+    &:-webkit-autofill {
+      & + .button-clear {
+        display: block!important;
+      }
+
+      & + .toggle-password{
+        display: block!important;
+      }
+    }
+
     &:disabled {
       color: $input-disabled-color;
       background-color: $input-disabled-bg;