@avakhula/ui 0.0.155 → 0.0.157

package/package.json

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

package/src/App.vue

@@ -6,7 +6,7 @@
         Email address
       </ib-label>
 
-      <ib-input required autofocus type="email" id="email" name="email" ref="email"
+      <ib-input required autofocus type="email" id="email" name="email" ref="email" :disabled="disabled"
         placeholder="Enter your email address" />
     </ib-form-group>
 
@@ -15,9 +15,11 @@
         Password
       </ib-label>
 
-      <ib-input required autofocus type="password" id="password" name="password" />
+      <ib-input required autofocus type="password" id="password" name="password" :disabled="disabled" />
     </ib-form-group>
   </form>
+
+  <button type="button" @click="() => disabled = !disabled">Disbaled</button>
 </template>
 
 <script>
@@ -27,6 +29,11 @@ import IbFormGroup from "./components/Form/FormGroup/FormGroup.vue"
 
 
 export default {
+  data() {
+    return {
+      disabled: false,
+    }
+  },
   components: {
     IbInput, IbLabel, IbFormGroup
   }

package/src/components/Form/Input/Input.vue

@@ -6,6 +6,7 @@
       <input
         v-bind="attrs"
         v-model="actualValue"
+        ref="field"
         :readonly="readonly"
         :disabled="disabled"
         :id="id"
@@ -166,6 +167,11 @@ export default {
       showPassword: false,
     };
   },
+  mounted() {
+    setTimeout(() => {
+      this.$globalEvents.$emit(`label:disabled:${this.id}`, this.disabled);
+    }, 100);
+  },
   methods: {
     toggleShowPassword() {
       this.showPassword = !this.showPassword;

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

@@ -99,6 +99,10 @@ export default {
         color: $neutral-500;
       }
     }
+
+    span.required {
+      color: $neutral-500;
+    }
   }
 
   .info-button {