barbican-reset 2.43.0 → 2.44.0

package/components/BrFormCheckbox/Component.vue

@@ -5,7 +5,7 @@
       @change="(event) => emitInputData(event, 'checkbox')"
       :data-test="dataTest"
       :disabled="disabled"
-      :checked="isDefault"
+      :checked="checked"
       :success="success"
       :id="generateID"
       type="checkbox"
@@ -25,7 +25,7 @@ export default {
     "dataTest",
     "disabled",
     "success",
-    "default",
+    "checked",
     "toggle",
     "table",
     "value",

package/components/BrFormCheckboxGroup/Component.vue

@@ -1,11 +1,12 @@
 <template>
   <div role="group" :id="id">
     <br-form-checkbox
-      v-for="({ value, text }, index) in options"
+      v-for="({ value, checked, text }, index) in options"
       @change="emitCheckboxGroupData"
+      :checked="checked"
       :value="value"
-      :key="index"
-      :name="name">
+      :name="name"
+      :key="index">
       {{ text }}
     </br-form-checkbox>
   </div>

package/components/BrFormCheckboxGroup/Demo.vue

@@ -1,13 +1,15 @@
 <template>
-  <div>
+  <div style="padding: 100px">
     <br-form-checkbox
       @change="({ value }) => (boolean = value)"
       data-test="checkbox-test-data"
       id="checkbox-id"
       :disabled="false"
+      :toggle="true"
       :table="false"
       :value="true"
-      success>
+      success
+    >
       Lorem ipsum dolor sit amet.
     </br-form-checkbox>
     <br-form-checkbox-group
@@ -17,9 +19,10 @@
       name="checkbox-name"
       id="checkbox-id"
       :options="options"
-      :model="model" />
-    {{ boolean ? 'true' : 'false' }}
-    {{ model.length ? model : 'nothing' }}
+      :model="model"
+    />
+    {{ boolean }}
+    {{ model.length ? model : "nothing" }}
   </div>
 </template>
 
@@ -30,10 +33,10 @@ export default {
       boolean: false,
       model: [],
       options: [
-        { text: 'Orange text', value: 'orange' },
-        { text: 'Apple text', value: 'apple' },
+        { text: "Orange text", value: "orange", checked: true },
+        { text: "Apple text", value: "apple", checked: false },
       ],
-    }
+    };
   },
-}
+};
 </script>

package/components/BrFormInput/Component.vue

@@ -1,7 +1,7 @@
 <template>
   <input
+    @input="(event) => emitInputData(event, 'input')"
     :autocomplete="autocomplete"
-    @input="emitInputData"
     :data-test="dataTest"
     :required="required"
     :disabled="disabled"
@@ -10,26 +10,27 @@
     :type="type"
     :name="name"
     :min="min"
-    :max="max" />
+    :max="max"
+  />
   <label v-if="$slots.default" :for="generateID" ref="label"><slot /></label>
 </template>
 
 <script>
-import mixins from '../../mixins/inputs'
+import mixins from "../../mixins/inputs";
 
 export default {
   mixins: [mixins],
   props: [
-    'autocomplete',
-    'dataTest',
-    'required',
-    'disabled',
-    'value',
-    'name',
-    'type',
-    'min',
-    'max',
-    'id',
+    "autocomplete",
+    "dataTest",
+    "required",
+    "disabled",
+    "value",
+    "name",
+    "type",
+    "min",
+    "max",
+    "id",
   ],
-}
+};
 </script>

package/components/BrFormPassword.vue

@@ -2,6 +2,7 @@
   <div class="br-form-password">
     <input
       :autocomplete="autocomplete"
+      data-test="password-field"
       @input="inputChange"
       :value="password"
       name="password"

package/components/BrFormRadio/Component.vue

@@ -4,7 +4,7 @@
       @input="(event) => emitInputData(event, 'radio')"
       :data-test="dataTest"
       :disabled="disabled"
-      :checked="isDefault"
+      :checked="checked"
       :id="generateID"
       :value="value"
       type="radio"
@@ -18,6 +18,6 @@ import mixins from '../../mixins/inputs'
 
 export default {
   mixins: [mixins],
-  props: ['id', 'name', 'value', 'disabled', 'default', 'dataTest'],
+  props: ['id', 'name', 'value', 'disabled', 'dataTest', 'checked'],
 }
 </script>

package/components/BrFormRadioGroup/Component.vue

@@ -1,8 +1,9 @@
 <template>
   <div role="radiogroup" :id="id">
     <br-form-radio
-      v-for="({ value, text }, index) in options"
+      v-for="({ value, checked, text }, index) in options"
       @change="(event) => $emit('change', event)"
+      :checked="checked"
       :value="value"
       :key="index"
       :name="name">

package/components/BrFormRadioGroup/Demo.vue

@@ -13,8 +13,8 @@ export default {
     return {
       contactMeSelection: true,
       yesNoOptions: [
-        { text: 'Yes', value: true },
-        { text: 'No', value: false },
+        { text: 'Yes', value: true, checked: true },
+        { text: 'No', value: false, checked: false },
       ],
     }
   },

package/mixins/inputs.js

@@ -5,26 +5,26 @@ export default {
 
       return this.id ? this.id : random;
     },
-    isDefault() {
-      return this.default == this.value;
-    },
   },
   methods: {
-    emitInputData({ target }, name = "input") {
+    emitInputData({ target }, name) {
       let { value, checked } = target;
+     
+      if (this.name) name = this.name;
 
-      value = this.toggle ? checked : value;
-
-      let content = this.name ? this.name : name;
+      if (this.toggle) value = checked;
 
-      console.log({ content, value });
+      console.log({ name, value });
 
-      this.$emit("change", { content, value });
+      this.$emit("change", { name, value, checked });
     },
-    emitCheckboxGroupData({ value }) {
-      this.store.includes(value)
-        ? (this.store = this.store.filter((item) => item !== value))
-        : this.store.push(value);
+    emitCheckboxGroupData(option) {
+      if (option.checked) {
+        delete option.checked;
+        this.store.push(option);
+      } else this.store = this.store.filter((item) => item.name != option.name);
+
+      console.log("store: ", this.store);
 
       this.$emit("change", this.store);
     },

package/package.json

@@ -100,5 +100,5 @@
     "build:patterns": "cd patterns && rm -rf html && pug views --out html"
   },
   "style": "dist/css/barbican-reset.css",
-  "version": "2.43.0"
+  "version": "2.44.0"
 }