barbican-reset 3.11.0 → 3.13.0

package/components/BrFormInput/Component.vue

@@ -3,15 +3,16 @@
     @input="$emit('update:modelValue', $event.target.value)"
     v-bind="$attrs"
     :autocomplete="autocomplete"
+    :placeholder="placeholder"
     :required="required"
     :disabled="disabled"
-    :id="generateID"
     :value="modelValue"
+    :id="generateID"
     :type="type"
     :name="name"
     :min="min"
     :max="max" />
-  <label v-if="$slots.default" :for="generateID" ref="label"><slot /></label>
+  <label v-if="$slots.default" v-bind="label"><slot /></label>
 </template>
 
 <script>
@@ -24,6 +25,7 @@ export default {
   props: [
     'modelValue',
     'autocomplete',
+    'placeholder',
     'required',
     'disabled',
     'value',
@@ -33,5 +35,13 @@ export default {
     'max',
     'id',
   ],
+  data() {
+    return {
+      label: {
+        for: this.generateID,
+        ref: 'label',
+      },
+    }
+  },
 }
 </script>

package/components/BrFormInputNew.vue

@@ -0,0 +1,16 @@
+<template>
+  <input
+    @input="$emit('input', $event.target.value)"
+    :value="value"
+    :type="type"
+    :min="min"
+    :max="max"
+    :id="id" />
+</template>
+
+<script>
+export default {
+  props: ['value', 'type', 'id', 'min', 'max'],
+  emits: ['input'],
+}
+</script>

package/components/BrFormRadio/Component.vue

@@ -4,38 +4,37 @@
       v-bind="$attrs"
       v-model="model"
       :disabled="disabled"
-      :id="randomId"
+      :id="generateID"
       :value="value"
       type="radio"
-      :name="name"
-    />
-    <label v-if="$slots.default" :for="randomId" ref="label"><slot /></label>
+      :name="name" />
+    <label v-if="$slots.default" :for="generateID" ref="label"><slot /></label>
   </div>
 </template>
 
 <script>
+import inputs from '#mixins/inputs'
+
 export default {
+  mixins: [inputs],
   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"],
+  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;
+        return this.modelValue
       },
       set(value) {
-        this.$emit("update:modelValue", value);
-        this.$emit("change", { value }); // Support @change.
+        this.$emit('update:modelValue', value)
+        this.$emit('change', { value }) // Support @change.
       },
     },
-    randomId() {
-      return (Math.random() + 1).toString(36).substring(7);
-    },
   },
-};
+}
 </script>

package/components/BrFormRow.vue

@@ -24,8 +24,10 @@
 <script>
 import BrButton from '#components/BrButton.vue'
 import EditIcon from '#icons/account/edit.vue'
+import mixins from '#mixins/inputs'
 
 export default {
+  mixins: [mixins],
   components: {
     BrButton,
     EditIcon,
@@ -60,19 +62,7 @@ export default {
       type: String,
     },
   },
-  methods: {
-    createKebabCase(value = '') {
-      return value.toLowerCase().split(' ').join('-')
-    },
-  },
   computed: {
-    generateInputID() {
-      if (!this.label) {
-        return 'undefined'
-      }
-
-      return this.input_id ? this.input_id : this.createKebabCase(this.label)
-    },
     styleRow() {
       let styles = ['br-form-row']
 

package/components/BrStatusBars.vue

@@ -0,0 +1,102 @@
+<template>
+  <div v-bind="container">
+    <div v-for="item in total" :key="'bar-' + item" v-bind="status">
+      <div v-bind="progress(item)" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    total: {
+      type: Number,
+      default: 1,
+    },
+    foreground: {
+      type: String,
+      default: 'white',
+    },
+    background: {
+      type: String,
+      default: 'grey',
+    },
+    complete: {
+      type: Number,
+      default: 0,
+    },
+    gap: {
+      type: Number,
+      default: 1,
+    },
+    height: {
+      type: Number,
+      default: 0.75,
+    },
+    radius: {
+      type: Number,
+      default: 0,
+    },
+  },
+  methods: {
+    progress(index) {
+      let isComplete = index <= this.complete
+
+      let style = []
+
+      style.push('background-color: ' + this.foreground + ';')
+
+      style.push('height: ' + this.height + 'rem;')
+
+      if (isComplete) {
+        style.push('width: 100%;')
+      }
+
+      return {
+        class: 'progress-bar',
+        style: style.join(' '),
+      }
+    },
+  },
+  computed: {
+    container() {
+      let style = []
+
+      style.push('grid-template-columns: repeat(' + this.total + ', 1fr);')
+
+      style.push('grid-gap: ' + this.gap + 'rem;')
+
+      style.push('gap: ' + this.gap + 'rem;')
+
+      style.push('border-radius: ' + this.radius + 'rem;')
+
+      return {
+        'data-cy': 'status--bars',
+        class: 'status--bars',
+        style: style.join(' '),
+      }
+    },
+    status() {
+      let style = []
+
+      style.push('background-color: ' + this.background + ';')
+
+      return {
+        class: 'status--bar',
+        style: style.join(' '),
+      }
+    },
+  },
+}
+</script>
+
+<style>
+.status--bars {
+  overflow: hidden;
+  display: grid;
+}
+
+.progress-bar {
+  width: 0;
+}
+</style>