@mindful-web/marko-web-identity-x 1.0.0

package/browser/form/fields/custom-select-multiple.vue

@@ -0,0 +1,97 @@
+<template>
+  <fieldset :disabled="disabled" class="csmulti">
+    <legend class="csmulti-legend">
+      {{ label }}
+      <strong v-if="required" class="text-danger">*</strong>
+    </legend>
+
+    <div class="csmulti-wrapper p-2">
+      <div class="csmulti-inner">
+        <label class="text-muted">
+          Select all that apply...
+        </label>
+
+        <template v-for="option in options">
+          <custom-select-group
+            v-if="option.options && option.options.length"
+            :key="option.id"
+            :label="option.label"
+          >
+            <checkbox-group
+              :options="option.options"
+              :selected="selected"
+              :required="required"
+              :group-id="groupId"
+              :can-write-in="canWriteIn"
+              :write-in-label="writeInLabel"
+              :write-in-answer="writeInAnswer"
+              @change="$emit('change', $event)"
+            />
+          </custom-select-group>
+          <checkbox-group
+            v-else
+            :key="option.id"
+            :options="[option]"
+            :selected="selected"
+            :required="required"
+            :group-id="groupId"
+            :can-write-in="canWriteIn"
+            :write-in-label="writeInLabel"
+            :write-in-answer="writeInAnswer"
+            @change="$emit('change', $event)"
+          />
+        </template>
+      </div>
+    </div>
+  </fieldset>
+</template>
+
+<script>
+import CheckboxGroup from '../common/checkbox-group.vue';
+import CustomSelectGroup from './custom-select-group.vue';
+
+export default {
+  components: {
+    CheckboxGroup,
+    CustomSelectGroup,
+  },
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    groupId: {
+      type: String,
+      required: true,
+    },
+    options: {
+      type: Array,
+      required: true,
+    },
+    selected: {
+      type: Array,
+      required: true,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    canWriteIn: {
+      type: Boolean,
+      default: false,
+    },
+    writeInLabel: {
+      type: String,
+      default: 'Other',
+    },
+    writeInAnswer: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+};
+</script>

package/browser/form/fields/custom-select-write-in-inline.vue

@@ -0,0 +1,39 @@
+<template>
+  <input
+    v-model="answer.writeInValue"
+    class="form-control form-control-sm"
+    type="text"
+    :required="required"
+    :placeholder="placeholder"
+    :autofocus="autofocus"
+    autocomplete="off"
+  >
+</template>
+
+<script>
+
+export default {
+  props: {
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    answer: {
+      type: Object,
+      required: true,
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    id() {
+      return `custom-select-write-in-${this.answer.id}`;
+    },
+    autofocus() {
+      return this.answer && !this.answer.writeInValue;
+    },
+  },
+};
+</script>

package/browser/form/fields/custom-select-write-in.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="input-group">
+    <div class="input-group-prepend w-25">
+      <div class="input-group-text d-inline-block text-truncate w-100" :title="label">
+        {{ label }}
+      </div>
+    </div>
+
+    <input
+      :id="id"
+      v-model="answer.writeInValue"
+      class="form-control"
+      type="text"
+      :required="required"
+      :placeholder="placeholder"
+      :autofocus="autofocus"
+      autocomplete="off"
+    >
+
+    <div class="input-group-append">
+      <button
+        type="button"
+        class="btn btn-outline-secondary"
+        @click="$emit('clear', answer.id)"
+      >
+        Clear
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  props: {
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    answer: {
+      type: Object,
+      required: true,
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    value: {
+      type: String,
+      default: '',
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    id() {
+      return `custom-select-write-in-${this.answer.id}`;
+    },
+    autofocus() {
+      return this.answer && !this.answer.writeInValue;
+    },
+  },
+};
+</script>

package/browser/form/fields/custom-select.vue

@@ -0,0 +1,191 @@
+<template>
+  <form-group>
+    <form-label v-if="!multiple" :for="fieldId" :required="required">
+      {{ label }}
+    </form-label>
+    <custom-select-multiple
+      v-if="multiple"
+      :group-id="id"
+      :options="options"
+      :selected="selectedOptionIds"
+      :required="required"
+      :label="label"
+      :field-id="fieldId"
+      :can-write-in="canWriteIn"
+      :write-in-label="writeInLabel"
+      :write-in-answer="writeInAnswer"
+      @change="$emit('change', $event)"
+    />
+    <select
+      v-else-if="!canWriteIn"
+      :id="fieldId"
+      class="custom-select"
+      :required="required"
+      @change="$emit('change', [$event.target.value])"
+    >
+      <option value="">
+        Please select...
+      </option>
+      <template v-for="option in options">
+        <optgroup
+          v-if="option.options"
+          :key="option.id"
+          :label="option.label"
+        >
+          <option
+            v-for="child in option.options"
+            :key="child.id"
+            :value="child.id"
+            :selected="child.id === selectedOptionId"
+          >
+            {{ child.label }}
+          </option>
+        </optgroup>
+        <option
+          v-else
+          :key="option.id"
+          :value="option.id"
+          :selected="option.id === selectedOptionId"
+        >
+          {{ option.label }}
+        </option>
+      </template>
+    </select>
+    <custom-select-write-in
+      v-else
+      :label="writeInLabel"
+      :answer="writeInAnswer"
+      :required="required"
+      @clear="clearWriteIn($event)"
+    />
+  </form-group>
+</template>
+
+<script>
+import CustomSelectMultiple from './custom-select-multiple.vue';
+import CustomSelectWriteIn from './custom-select-write-in.vue';
+import FormGroup from '../common/form-group.vue';
+import FormLabel from '../common/form-label.vue';
+
+export default {
+  components: {
+    CustomSelectMultiple,
+    CustomSelectWriteIn,
+    FormGroup,
+    FormLabel,
+  },
+
+  props: {
+    /**
+     * The unique field id.
+     */
+    id: {
+      type: String,
+      required: true,
+    },
+
+    /**
+     * The field display label.
+     */
+    label: {
+      type: String,
+      required: true,
+    },
+
+    /**
+     * Whether the field is required.
+     */
+    required: {
+      type: Boolean,
+      default: false,
+    },
+
+    /**
+     * Whether the custom question supports multiple answers.
+     */
+    multiple: {
+      type: Boolean,
+      default: false,
+    },
+
+    /**
+     * The field options (the possible answers).
+     */
+    options: {
+      type: Array,
+      default: () => [],
+    },
+
+    /**
+     * Since all custom select answers are arrays mimic this behavior.
+     */
+    selected: {
+      type: Array,
+      default: () => [],
+    },
+  },
+
+  computed: {
+    value: {
+      get() {
+        return this.multiple ? this.selectedOptionIds : this.selectedOptionId;
+      },
+      set() {
+        // noop, re-render caused by emit/prop update
+      },
+    },
+    fieldId() {
+      return `custom-select-${this.id}`;
+    },
+
+    selectedOptionIds() {
+      return this.selected.map((item) => item.id);
+    },
+
+    selectedOptionId() {
+      const { selectedOptionIds, multiple } = this;
+      if (!multiple) return selectedOptionIds[0] || undefined;
+      return selectedOptionIds.slice();
+    },
+
+    selectedOptions() {
+      const { selectedOptionIds: sids } = this;
+      return this.options.reduce((arr, option) => ([
+        ...arr,
+        ...(sids.includes(option.id) ? [option] : []),
+        ...(option.options ? option.options.filter((opt) => sids.includes(opt.id)) : []),
+      ]), []);
+    },
+
+    canWriteIn() {
+      const { selectedOptions } = this;
+      if (selectedOptions.length) {
+        const canWriteIn = selectedOptions.find((o) => o.canWriteIn);
+        return Boolean(canWriteIn);
+      }
+      return false;
+    },
+    writeInAnswer() {
+      const { selectedOptions, selected: answers } = this;
+      return answers.find((a) => {
+        const opt = selectedOptions.find((o) => o.id === a.id);
+        return opt && opt.canWriteIn;
+      });
+    },
+    showWriteIn() {
+      return this.selected && this.canWriteIn;
+    },
+    writeInLabel() {
+      const selected = this.selectedOptions.find((option) => option.canWriteIn);
+      return selected && selected.label;
+    },
+  },
+
+  methods: {
+    clearWriteIn(optionId) {
+      const selected = this.selected.filter((item) => item.id !== optionId);
+      this.$emit('change', selected);
+    },
+  },
+};
+</script>

package/browser/form/fields/custom-text.vue

@@ -0,0 +1,62 @@
+<template>
+  <form-group :class-name="className">
+    <form-label :for="id" :required="required">
+      {{ label }}
+    </form-label>
+    <input
+      :id="id"
+      v-model="customText"
+      class="form-control"
+      type="text"
+      :required="required"
+      @change="$emit('change', customText)"
+    >
+  </form-group>
+</template>
+
+<script>
+import FormGroup from '../common/form-group.vue';
+import FormLabel from '../common/form-label.vue';
+
+export default {
+  components: {
+    FormGroup,
+    FormLabel,
+  },
+  props: {
+    /**
+     * The unique field id.
+     */
+    id: {
+      type: String,
+      required: true,
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    label: {
+      type: String,
+      default: 'Custom Input',
+    },
+    value: {
+      type: String,
+      default: '',
+    },
+    className: {
+      type: String,
+      default: 'col-md-12',
+    },
+  },
+  computed: {
+    customText: {
+      get() {
+        return this.value || '';
+      },
+      set(customText) {
+        this.$emit('change', customText);
+      },
+    },
+  },
+};
+</script>

package/browser/form/fields/display-name.vue

@@ -0,0 +1,64 @@
+<template>
+  <form-group>
+    <form-label :for="id" :required="required">
+      {{ label }}
+    </form-label>
+    <input
+      :id="id"
+      v-model="displayName"
+      class="form-control"
+      type="text"
+      :required="required"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      autocomplete="nickname"
+    >
+  </form-group>
+</template>
+
+<script>
+import FormGroup from '../common/form-group.vue';
+import FormLabel from '../common/form-label.vue';
+
+export default {
+  components: {
+    FormGroup,
+    FormLabel,
+  },
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    required: {
+      type: Boolean,
+      default: true,
+    },
+    label: {
+      type: String,
+      default: 'Display Name',
+    },
+    placeholder: {
+      type: String,
+      default: 'Will be displayed when posting comments.',
+    },
+    value: {
+      type: String,
+      default: '',
+    },
+  },
+  data: () => ({
+    id: 'sign-on-display-name',
+  }),
+  computed: {
+    displayName: {
+      get() {
+        return this.value || '';
+      },
+      set(displayName) {
+        this.$emit('input', displayName || null);
+      },
+    },
+  },
+};
+</script>

package/browser/form/fields/email.vue

@@ -0,0 +1,62 @@
+<template>
+  <form-group>
+    <form-label :for="id" :required="true">
+      {{ label }}
+    </form-label>
+    <input
+      :id="id"
+      v-model="email"
+      class="form-control"
+      type="email"
+      :required="true"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      autocomplete="email"
+      @focus="$emit('focus')"
+    >
+  </form-group>
+</template>
+
+<script>
+import FormGroup from '../common/form-group.vue';
+import FormLabel from '../common/form-label.vue';
+
+export default {
+  components: {
+    FormGroup,
+    FormLabel,
+  },
+  props: {
+    id: {
+      type: String,
+      default: 'sign-on-email',
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    label: {
+      type: String,
+      default: 'Email Address',
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    value: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    email: {
+      get() {
+        return this.value || '';
+      },
+      set(email) {
+        this.$emit('input', email || null);
+      },
+    },
+  },
+};
+</script>

package/browser/form/fields/family-name.vue

@@ -0,0 +1,68 @@
+<template>
+  <form-group :class-name="className">
+    <form-label :for="id" :required="required">
+      {{ label }}
+    </form-label>
+    <input
+      :id="id"
+      v-model="familyName"
+      class="form-control"
+      type="text"
+      :required="required"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      autocomplete="family-name"
+    >
+  </form-group>
+</template>
+
+<script>
+import FormGroup from '../common/form-group.vue';
+import FormLabel from '../common/form-label.vue';
+
+export default {
+  components: {
+    FormGroup,
+    FormLabel,
+  },
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    label: {
+      type: String,
+      default: 'Last Name',
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    value: {
+      type: String,
+      default: '',
+    },
+    className: {
+      type: String,
+      default: '',
+    },
+  },
+  data: () => ({
+    id: 'sign-on-family-name',
+  }),
+  computed: {
+    familyName: {
+      get() {
+        return this.value || '';
+      },
+      set(familyName) {
+        this.$emit('input', familyName || null);
+      },
+    },
+  },
+};
+</script>

package/browser/form/fields/given-name.vue

@@ -0,0 +1,68 @@
+<template>
+  <form-group :class-name="className">
+    <form-label :for="id" :required="required">
+      {{ label }}
+    </form-label>
+    <input
+      :id="id"
+      v-model="givenName"
+      class="form-control"
+      type="text"
+      :required="required"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      autocomplete="given-name"
+    >
+  </form-group>
+</template>
+
+<script>
+import FormGroup from '../common/form-group.vue';
+import FormLabel from '../common/form-label.vue';
+
+export default {
+  components: {
+    FormGroup,
+    FormLabel,
+  },
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    label: {
+      type: String,
+      default: 'First Name',
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    value: {
+      type: String,
+      default: '',
+    },
+    className: {
+      type: String,
+      default: '',
+    },
+  },
+  data: () => ({
+    id: 'sign-on-given-name',
+  }),
+  computed: {
+    givenName: {
+      get() {
+        return this.value || '';
+      },
+      set(givenName) {
+        this.$emit('input', givenName || null);
+      },
+    },
+  },
+};
+</script>