barbican-reset 2.53.0 → 2.54.0

package/components/BrFormCheckbox/Component.vue

@@ -2,16 +2,16 @@
   <div class="br-checkbox">
     <!-- @TODO: remove success prop and style scss from br-checkbox inheritence? -->
     <input
-      @change="(event) => emitInputData(event, 'checkbox')"
-      :data-test="dataTest"
+      v-bind="$attrs"
       :disabled="disabled"
       :success="success"
       :checked="checked"
       :id="generateID"
       type="checkbox"
       :table="table"
-      :value="value"
       :name="name"
+      v-model="model"
+      :value="value"
     />
     <label v-if="$slots.default" :for="generateID" ref="label"><slot /></label>
   </div>
@@ -21,17 +21,34 @@
 import mixins from "../../mixins/inputs";
 
 export default {
+  compatConfig: { COMPONENT_V_MODEL: false }, // THIS LINE IS IMPORTANT, WILL NOT WORK WITHOUT.
+  inheritAttrs: false, // Allow us to put attributes on the input.
   mixins: [mixins],
+  emits: ["update:modelValue", "change"],
   props: [
-    "dataTest",
+    "modelValue",
     "disabled",
     "success",
     "checked",
     "toggle",
     "table",
-    "value",
     "name",
     "id",
+    "value",
   ],
+  computed: {
+    // You cannot use a prop with v-model, it results in the below error. The suggested option is to have a local
+    // property that wraps around the modelValue prop.
+    // Error: VueCompilerError: v-model cannot be used on a prop, because local prop bindings are not writable.
+    model: {
+      get() {
+        return this.modelValue;
+      },
+      set(value) {
+        this.$emit("update:modelValue", value);
+        this.$emit("change", { value }); // Support @change.
+      },
+    },
+  },
 };
 </script>

package/components/BrFormCheckboxGroup/Component.vue

@@ -3,10 +3,10 @@
     <template v-if="options">
       <br-form-checkbox
         v-for="({ value, checked, text, dataTest }, index) in options"
-        @change="emitCheckboxGroupData"
+        v-model="model"
+        :value="value"
         :dataTest="dataTest"
         :checked="checked"
-        :value="value"
         :name="name"
         :key="index"
       >
@@ -18,19 +18,23 @@
 </template>
 
 <script>
-import mixins from "../../mixins/inputs";
 import BrFormCheckbox from "../BrFormCheckbox/Component";
 
 export default {
-  mixins: [mixins],
-  props: ["options", "name", "id", "model"],
+  compatConfig: { COMPONENT_V_MODEL: false }, // THIS LINE IS IMPORTANT, WILL NOT WORK WITHOUT.
+  props: ["modelValue", "options", "name", "id"],
   components: {
     BrFormCheckbox,
   },
-  data() {
-    return {
-      store: this.model,
-    };
+  computed: {
+    model: {
+      get() {
+        return this.modelValue;
+      },
+      set(value) {
+        this.$emit("update:modelValue", value);
+      },
+    },
   },
 };
 </script>

package/components/BrFormInput/Component.vue

@@ -1,12 +1,12 @@
 <template>
   <input
-    @input="(event) => emitInputData(event, 'input')"
+    @input="$emit('update:modelValue', $event.target.value)"
+    v-bind="$attrs"
     :autocomplete="autocomplete"
-    :data-test="dataTest"
     :required="required"
     :disabled="disabled"
     :id="generateID"
-    :value="value"
+    :value="modelValue"
     :type="type"
     :name="name"
     :min="min"
@@ -19,10 +19,13 @@
 import mixins from "../../mixins/inputs";
 
 export default {
+  compatConfig: { COMPONENT_V_MODEL: false }, // THIS LINE IS IMPORTANT, WILL NOT WORK WITHOUT.
+  inheritAttrs: false, // Allow us to put attributes on the input.
   mixins: [mixins],
+  emits: ["update:modelValue"],
   props: [
+    "modelValue",
     "autocomplete",
-    "dataTest",
     "required",
     "disabled",
     "value",

package/components/BrFormPassword.vue

@@ -1,14 +1,15 @@
 <template>
   <div class="br-form-password">
     <input
+      v-bind="$attrs"
       :autocomplete="autocomplete"
-      :data-test="dataTest"
-      @input="inputChange"
-      :value="password"
+      @input="$emit('update:modelValue', $event.target.value)"
+      :value="modelValue"
       name="password"
       :type="type"
       required
       :id="id"
+      :data-test="dataTest"
     />
     <br-button
       @click="showPassword = !showPassword"
@@ -30,6 +31,9 @@ import HidePasswordIcon from "../icons/password/hide";
 import ShowPasswordIcon from "../icons/password/show";
 
 export default {
+  compatConfig: { COMPONENT_V_MODEL: false }, // THIS LINE IS IMPORTANT, WILL NOT WORK WITHOUT.
+  inheritAttrs: false, // Allow us to put attributes on the input.
+  emits: ["update:modelValue"],
   data() {
     return {
       password: "",
@@ -42,6 +46,7 @@ export default {
     BrButton,
   },
   props: {
+    modelValue: {},
     id: {
       type: String,
       default: "password",
@@ -49,15 +54,6 @@ export default {
     dataTest: {
       type: String,
       default: "password-field",
-    }
-  },
-  methods: {
-    inputChange({ target }) {
-      let { value } = target;
-
-      this.password = value;
-
-      this.$emit("change", value);
     },
   },
   computed: {

package/components/BrFormRadio/Component.vue

@@ -1,23 +1,42 @@
 <template>
   <div class="custom-radio">
     <input
-      @input="(event) => emitInputData(event, 'radio')"
-      :data-test="dataTest"
+      v-bind="$attrs"
+      v-model="model"
       :disabled="disabled"
-      :checked="checked"
-      :id="generateID"
+      :id="randomId"
       :value="value"
       type="radio"
-      :name="name" />
-    <label v-if="$slots.default" :for="generateID" ref="label"><slot /></label>
+      :name="name"
+    />
+    <label v-if="$slots.default" :for="randomId" ref="label"><slot /></label>
   </div>
 </template>
 
 <script>
-import mixins from '../../mixins/inputs'
-
 export default {
-  mixins: [mixins],
-  props: ['id', 'name', 'value', 'disabled', 'dataTest', 'checked'],
-}
+  compatConfig: { COMPONENT_V_MODEL: false }, // THIS LINE IS IMPORTANT, WILL NOT WORK WITHOUT.
+  inheritAttrs: false, // Allow us to put attributes on the input.
+  // @TODO:
+  // We may be able to get rid of name, value & disabled if we are using v-bind="$attrs"
+  props: ["id", "name", "value", "disabled", "modelValue"],
+  emits: ["update:modelValue", "change"],
+  computed: {
+    // You cannot use a prop with v-model, it results in the below error. The suggested option is to have a local
+    // property that wraps around the modelValue prop.
+    // Error: VueCompilerError: v-model cannot be used on a prop, because local prop bindings are not writable.
+    model: {
+      get() {
+        return this.modelValue;
+      },
+      set(value) {
+        this.$emit("update:modelValue", value);
+        this.$emit("change", { value }); // Support @change.
+      },
+    },
+    randomId() {
+      return (Math.random() + 1).toString(36).substring(7);
+    },
+  },
+};
 </script>

package/components/BrFormRadioGroup/Component.vue

@@ -2,13 +2,13 @@
   <div role="radiogroup" :id="id">
     <template v-if="options">
       <br-form-radio
-        v-for="({ value, checked, text }, index) in options"
-        @change="(event) => $emit('change', event)"
-        :checked="checked"
-        :value="value"
+        v-for="(option, index) in options"
+        v-model="model"
+        :value="option.value"
         :key="index"
-        :name="name">
-        {{ text }}
+        :name="name"
+      >
+        {{ option.text }}
       </br-form-radio>
     </template>
     <slot v-else></slot>
@@ -17,6 +17,23 @@
 
 <script>
 export default {
-  props: ['options', 'name', 'id'],
-}
+  compatConfig: { COMPONENT_V_MODEL: false }, // THIS LINE IS IMPORTANT, WILL NOT WORK WITHOUT.
+  props: {
+    modelValue: { type: [Array, Boolean] },
+    options: { type: Object },
+    name: { type: String },
+    id: { type: String },
+  },
+  computed: {
+    model: {
+      get() {
+        return this.modelValue;
+      },
+      set(value) {
+        this.$emit("update:modelValue", value);
+      },
+    },
+  },
+  emits: ["update:modelValue"],
+};
 </script>

package/components/BrFormTextarea/Component.vue

@@ -1,19 +1,19 @@
 <template>
   <textarea
-    @input="(event) => emitInputData(event, 'textarea')"
+    @input="$emit('update:modelValue', $event.target.value)"
     class="br-textarea form-control"
     :placeholder="placeholder"
     wrap="soft"
     :id="id"
+    :value="modelValue"
   ></textarea>
 </template>
 
 <script>
-import mixins from "../../mixins/inputs";
-
 export default {
-  mixins: [mixins],
-  props: ["id", "value", "disabled", "placeholder"],
+  compatConfig: { COMPONENT_V_MODEL: false }, // THIS LINE IS IMPORTANT, WILL NOT WORK WITHOUT.
+  emits: ["update:modelValue"],
+  props: ["modelValue", "id", "value", "disabled", "placeholder"],
 };
 </script>
 

package/package.json

@@ -112,5 +112,5 @@
     "style:patterns": "cd patterns && gulp build:css",
     "build:patterns": "cd patterns && rm -rf html && pug views --out html"
   },
-  "version": "2.53.0"
+  "version": "2.54.0"
 }

package/components/BrFormCheckbox/Demo.vue

@@ -1,27 +0,0 @@
-<template>
-  <div>
-    <br-form-checkbox
-      @change="({ value }) => (newsletterOptIn = value)"
-      data-test="requires-companion-option"
-      :default="newsletterOptIn"
-      id="newsletter-signup"
-      :disabled="false"
-      :toggle="true"
-      :table="false"
-      :value="true"
-      success>
-      Keep me up to date with news, events and offers from the Barbican
-    </br-form-checkbox>
-    {{ newsletterOptIn }}
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      newsletterOptIn: false,
-    }
-  },
-}
-</script>

package/components/BrFormCheckboxGroup/Demo.vue

@@ -1,42 +0,0 @@
-<template>
-  <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
-    >
-      Lorem ipsum dolor sit amet.
-    </br-form-checkbox>
-    <br-form-checkbox-group
-      @change="(value) => (model = value)"
-      data-test="checkbox-test-data"
-      class="checkbox-class"
-      name="checkbox-name"
-      id="checkbox-id"
-      :options="options"
-      :model="model"
-    />
-    {{ boolean }}
-    {{ model.length ? model : "nothing" }}
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      boolean: false,
-      model: [],
-      options: [
-        { text: "Orange text", value: "orange", checked: true },
-        { text: "Apple text", value: "apple", checked: false },
-      ],
-    };
-  },
-};
-</script>

package/components/BrFormInput/Demo.vue

@@ -1,64 +0,0 @@
-<template>
-  <div>
-    <br-form-row>
-      <br-form-radio
-        @change="({ value }) => (radio = value)"
-        name="radio"
-        value="true">
-        true
-      </br-form-radio>
-      <br-form-radio
-        @change="({ value }) => (radio = value)"
-        name="radio"
-        value="false">
-        false
-      </br-form-radio>
-    </br-form-row>
-    <br-form-row>
-      <br-form-input
-        @change="({ value }) => (gift.sendDate = value)"
-        :min="minimumSendDate"
-        :max="maximumSendDate"
-        data-test="send-date"
-        type="date" />
-      <br-form-input
-        @change="({ value }) => (email = value)"
-        data-test="login-form-email"
-        autocomplete="username"
-        value="disabled"
-        class="custom"
-        type="email"
-        name="email"
-        :disabled="false"
-        :required="true" />
-    </br-form-row>
-    <br-form-row>
-      {{ email }}
-      {{ radio }}
-    </br-form-row>
-  </div>
-</template>
-
-<script>
-import { DateTime } from 'luxon'
-
-export default {
-  computed: {
-    minimumSendDate() {
-      return DateTime.now().toISODate()
-    },
-    maximumSendDate() {
-      return DateTime.now().plus({ years: 1 }).toISODate()
-    },
-  },
-  data() {
-    return {
-      radio: 'radio',
-      email: 'email',
-      gift: {
-        sendDate: '',
-      },
-    }
-  },
-}
-</script>

package/components/BrFormRadio/Demo.vue

@@ -1,33 +0,0 @@
-<template>
-  <div v-for="(group, index) in radios" :key="index">
-    <div>{{ group.default }}</div>
-    <br-form-radio
-      v-for="(option, index) in group.options"
-      @change="({ value }) => (group.default = value)"
-      :default="group.default"
-      data-test="here it is"
-      :name="group.name"
-      :value="option"
-      :key="index">
-      {{ option }}
-    </br-form-radio>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      radios: [
-        { name: 'testA', default: true, options: [true, false] },
-        { name: 'testB', default: 16, options: [32, 46, 75] },
-        {
-          name: 'testC',
-          default: 'sentence',
-          options: ['paul', 'gareth', 'andrew'],
-        },
-      ],
-    }
-  },
-}
-</script>

package/components/BrFormRadioGroup/Demo.vue

@@ -1,22 +0,0 @@
-<template>
-  <br-form-radio-group
-    @change="({ value }) => (contactMeSelection = value)"
-    data-test="global-opt-in"
-    name="contact-me-options"
-    :options="yesNoOptions"
-    id="radio-slots" />
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      contactMeSelection: true,
-      yesNoOptions: [
-        { text: 'Yes', value: true, checked: true },
-        { text: 'No', value: false, checked: false },
-      ],
-    }
-  },
-}
-</script>

package/components/BrFormTextarea/Demo.vue

@@ -1,22 +0,0 @@
-<template>
-  <div style="padding: 100px">
-    <br-form-textarea
-      @change="({ value }) => (gift.message = value)"
-      placeholder="placeholder"
-      data-test="data-test"
-      rows="6" />
-    {{ gift.message }}
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      gift: {
-        message: '',
-      },
-    }
-  },
-}
-</script>