barbican-reset 3.12.0 → 3.15.0

package/components/BrFormCheckbox.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="br-checkbox">
+    <br-form-input v-bind="$attrs" :value="data" type="checkbox">
+      <slot />
+    </br-form-input>
+  </div>
+</template>
+
+<script>
+import BrFormInput from '#components/BrFormInput.vue'
+
+export default {
+  props: ['data'],
+  inheritAttrs: false,
+  components: {
+    BrFormInput,
+  },
+}
+</script>

package/components/BrFormCheckboxGroup.vue

@@ -0,0 +1,33 @@
+<template>
+  <div role="group">
+    <br-form-checkbox
+      v-for="(option, index) in options"
+      :data-test="option['data-test']"
+      :disabled="option.disabled"
+      :key="generateKey(index)"
+      :data="option.value"
+      v-model="value"
+      :name="name">
+      <slot v-if="$slots.default" v-bind="option" />
+      <template v-else>{{ option.text }}</template>
+    </br-form-checkbox>
+  </div>
+</template>
+
+<script>
+import inputs from '#mixins/inputs'
+import BrFormCheckbox from '#components/BrFormCheckbox.vue'
+
+export default {
+  mixins: [inputs],
+  props: ['modelValue', 'options', 'name'],
+  components: {
+    BrFormCheckbox,
+  },
+  methods: {
+    generateKey(index) {
+      return 'checkbox-option-' + index
+    },
+  },
+}
+</script>

package/components/BrFormDate.vue

@@ -0,0 +1,9 @@
+<template>
+  <br-form-input v-bind="$attrs" type="date" />
+</template>
+
+<script>
+export default {
+  inheritAttrs: false,
+}
+</script>

package/components/BrFormEdit.vue

@@ -0,0 +1,38 @@
+<template>
+  <div :class="generateClasses">
+    <slot />
+    <br-button
+      @click="$emit('edit')"
+      variant="edit-input"
+      data-test="edit"
+      v-if="active">
+      <edit-icon />
+    </br-button>
+  </div>
+</template>
+
+<script>
+import BrButton from '#components/BrButton.vue'
+import EditIcon from '#icons/account/edit.vue'
+
+export default {
+  props: {
+    active: {
+      type: Boolean,
+    },
+  },
+  components: {
+    BrButton,
+    EditIcon,
+  },
+  computed: {
+    generateClasses() {
+      let result = ['br-form-edit']
+
+      if (this.active) result.push('active')
+
+      return result
+    },
+  },
+}
+</script>

package/components/BrFormEmail.vue

@@ -0,0 +1,13 @@
+<template>
+  <br-form-input type="email" />
+</template>
+
+<script>
+import BrFormInput from '#components/BrFormInput.vue'
+
+export default {
+  components: {
+    BrFormInput,
+  },
+}
+</script>

package/components/BrFormFieldset.vue

@@ -0,0 +1,14 @@
+<template>
+  <fieldset>
+    <legend>{{ label }}</legend>
+    <slot />
+  </fieldset>
+</template>
+
+<script>
+// Pass a form "id" as "form" to associate inputs with that form
+// Pass a "disabled" attribute to disable inputs inside the fieldset
+export default {
+  props: ['label'],
+}
+</script>

package/components/BrFormInput.vue

@@ -0,0 +1,20 @@
+<template>
+  <input
+    :autocomplete="generateAutoComplete"
+    :data-test="generateDataTest"
+    :type="generateType"
+    :id="generateID"
+    v-model="value"
+    v-bind="$attrs" />
+  <label v-if="$slots.default" :for="generateID"><slot /></label>
+</template>
+
+<script>
+import inputs from '#mixins/inputs'
+
+export default {
+  props: ['modelValue', 'id', 'type', 'data-test', 'autocomplete'],
+  inheritAttrs: false,
+  mixins: [inputs],
+}
+</script>

package/components/BrFormLabel.vue

@@ -0,0 +1,27 @@
+<template>
+  <label v-if="!disabled" :for="id">
+    <strong>
+      <slot />
+    </strong>
+    <span v-if="required"> (required)</span>
+    <span v-if="optional"> (optional)</span>
+  </label>
+  <div v-else class="br-label">
+    <strong>
+      <slot />
+    </strong>
+    <span v-if="required"> (required)</span>
+    <span v-if="optional"> (optional)</span>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    disabled: { type: Boolean },
+    required: { type: Boolean },
+    optional: { type: Boolean },
+    id: { type: String },
+  },
+}
+</script>

package/components/BrFormPassword.vue

@@ -1,67 +1,49 @@
 <template>
-  <div class="br-form-password">
-    <input
+  <br-form-visible
+    @visible="showPassword = !showPassword"
+    :visible="showPassword"
+    v-if="toggle">
+    <br-form-input
+      :autocomplete="generateAutocomplete"
+      :type="generateType"
       v-bind="$attrs"
-      :autocomplete="autocomplete"
-      @input="$emit('update:modelValue', $event.target.value)"
-      :value="modelValue"
-      name="password"
-      :type="type"
-      required
-      :id="id"
-      :data-test="dataTest"
-    />
-    <br-button
-      @click="showPassword = !showPassword"
-      variant="toggle-password"
-      data-test="show-password"
-    >
-      <span class="sr-only">
-        {{ showPassword ? "Hide" : "Show" }} password
-      </span>
-      <show-password-icon v-if="showPassword" />
-      <hide-password-icon v-else />
-    </br-button>
-  </div>
+      required />
+  </br-form-visible>
+  <br-form-input
+    :autocomplete="generateAutocomplete"
+    :type="generateType"
+    v-bind="$attrs"
+    required
+    v-else />
 </template>
 
 <script>
-import BrButton from "#components/BrButton.vue";
-import HidePasswordIcon from "#icons/password/hide.vue";
-import ShowPasswordIcon from "#icons/password/show.vue";
+import BrFormInput from '#components/BrFormInput.vue'
+import BrFormVisible from '#components/BrFormVisible.vue'
 
 export default {
-  inheritAttrs: false, // Allow us to put attributes on the input.
-  emits: ["update:modelValue"],
-  data() {
-    return {
-      password: "",
-      showPassword: false,
-    };
+  inheritAttrs: false,
+  props: {
+    toggle: {
+      type: Boolean,
+    },
   },
   components: {
-    HidePasswordIcon,
-    ShowPasswordIcon,
-    BrButton,
+    BrFormInput,
+    BrFormVisible,
   },
-  props: {
-    modelValue: {},
-    id: {
-      type: String,
-      default: "password",
-    },
-    dataTest: {
-      type: String,
-      default: "password-field",
-    },
+  data() {
+    return {
+      showPassword: false,
+    }
   },
   computed: {
-    type() {
-      return this.showPassword ? "text" : "password";
+    generateType() {
+      return this.showPassword ? 'text' : 'password'
     },
-    autocomplete() {
-      return this.showPassword ? "off" : "current-password";
+    generateAutocomplete() {
+      return this.showPassword ? 'off' : 'current-password'
     },
   },
-};
+}
 </script>

package/components/BrFormRadio.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="br-radio">
+    <br-form-input v-bind="$attrs" :value="data" type="radio">
+      <slot />
+    </br-form-input>
+  </div>
+</template>
+
+<script>
+import BrFormInput from '#components/BrFormInput.vue'
+
+export default {
+  props: ['data'],
+  inheritAttrs: false,
+  components: {
+    BrFormInput,
+  },
+}
+</script>

package/components/BrFormRadioGroup.vue

@@ -0,0 +1,33 @@
+<template>
+  <div role="radiogroup">
+    <br-form-radio
+      v-for="(option, index) in options"
+      :data-test="option['data-test']"
+      :disabled="option.disabled"
+      :key="generateKey(index)"
+      :data="option.value"
+      v-model="value"
+      :name="name">
+      <slot v-if="$slots.default" v-bind="option" />
+      <template v-else>{{ option.text }}</template>
+    </br-form-radio>
+  </div>
+</template>
+
+<script>
+import inputs from '#mixins/inputs'
+import BrFormRadio from '#components/BrFormRadio.vue'
+
+export default {
+  mixins: [inputs],
+  props: ['modelValue', 'options', 'name'],
+  components: {
+    BrFormRadio,
+  },
+  methods: {
+    generateKey(index) {
+      return 'radio-option-' + index
+    },
+  },
+}
+</script>

package/components/BrFormRow.vue

@@ -1,76 +1,48 @@
 <template>
-  <div :class="styleRow">
-    <template v-if="label">
-      <label v-if="input_active" :for="generateInputID">
-        <strong>{{ label }}</strong>
-        <span v-if="required"> (required)</span>
-        <span v-if="optional"> (optional)</span>
-      </label>
-      <div class="fake-label" v-else>
-        <strong>
-          {{ label }}
-        </strong>
-      </div>
-    </template>
-    <div :class="[`content`, { editable }, { label }, { submit }, { radios }]">
-      <br-button v-if="editable" variant="input-edit" @click="$emit('edit')">
-        <edit-icon />
-      </br-button>
+  <div :class="generateClasses">
+    <br-form-label :id="generateFor" v-bind="$attrs" v-if="label">
+      {{ label }}
+    </br-form-label>
+    <div :class="[`content`, { label }, { submit }, { radios }]">
       <slot />
     </div>
   </div>
 </template>
 
 <script>
-import BrButton from '#components/BrButton.vue'
-import EditIcon from '#icons/account/edit.vue'
-import mixins from '#mixins/inputs'
+import inputs from '#mixins/inputs'
+import BrFormLabel from '#components/BrFormLabel.vue'
 
 export default {
-  mixins: [mixins],
+  inheritAttrs: false,
+  mixins: [inputs],
   components: {
-    BrButton,
-    EditIcon,
+    BrFormLabel,
   },
   props: {
     label: {
       type: String,
     },
-    input_id: {
+    id: {
       type: String,
     },
-    input_active: {
-      type: Boolean,
-      default: true,
-    },
-    required: {
-      type: Boolean,
-    },
-    optional: {
-      type: Boolean,
-    },
     submit: {
       type: Boolean,
     },
-    editable: {
-      type: Boolean,
+    class: {
+      type: String,
     },
     radios: {
       type: Boolean,
     },
-    class: {
-      type: String,
-    },
   },
   computed: {
-    styleRow() {
-      let styles = ['br-form-row']
+    generateClasses() {
+      let result = ['br-form-row']
 
-      if (this.class) {
-        styles.push(this.class)
-      }
+      if (this.class) result.push(this.class)
 
-      return styles.join(' ')
+      return result
     },
   },
 }

package/components/BrFormTel.vue

@@ -0,0 +1,13 @@
+<template>
+  <br-form-input autocomplete="tel" inputmode="tel" type="tel" />
+</template>
+
+<script>
+import BrFormInput from '#components/BrFormInput.vue'
+
+export default {
+  components: {
+    BrFormInput,
+  },
+}
+</script>

package/components/BrFormTextarea.vue

@@ -0,0 +1,16 @@
+<template>
+  <textarea
+    class="br-form-textarea"
+    :id="generateID"
+    v-model="value"
+    wrap="soft" />
+</template>
+
+<script>
+import inputs from '#mixins/inputs'
+
+export default {
+  mixins: [inputs],
+  props: ['modelValue', 'id'],
+}
+</script>

package/components/BrFormUpdate.vue

@@ -1,18 +1,32 @@
 <template>
-  <div class="br-form-update">
-    <div class="br-form-update--input" data-test="email"><slot /></div>
-    <br-button @click="$emit('update')" data-test="update">
+  <div :class="generateClasses">
+    <slot />
+    <br-button v-if="active" @click="$emit('update')" data-test="update">
       update
     </br-button>
   </div>
 </template>
 
 <script>
-import BrButton from "#components/BrButton.vue";
+import BrButton from '#components/BrButton.vue'
 
 export default {
+  props: {
+    active: {
+      type: Boolean,
+    },
+  },
   components: {
     BrButton,
   },
-};
+  computed: {
+    generateClasses() {
+      let result = ['br-form-update']
+
+      if (this.active) result.push('active')
+
+      return result
+    },
+  },
+}
 </script>

package/components/BrFormVisible.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="br-form-visible">
+    <slot />
+    <br-button
+      @click="$emit('visible')"
+      data-test="show-password"
+      variant="toggle-password">
+      <span class="sr-only">{{ visible ? 'Hide' : 'Show' }} password</span>
+      <show-password-icon v-if="visible" />
+      <hide-password-icon v-else />
+    </br-button>
+  </div>
+</template>
+
+<script>
+import BrButton from '#components/BrButton.vue'
+import HidePasswordIcon from '#icons/password/hide.vue'
+import ShowPasswordIcon from '#icons/password/show.vue'
+
+export default {
+  props: {
+    visible: {
+      type: Boolean,
+    },
+  },
+  components: {
+    BrButton,
+    HidePasswordIcon,
+    ShowPasswordIcon,
+  },
+}
+</script>