inertia-bootstrap-forms 2.1.20 → 3.0.0

package/src/MultiQuantityInput.vue

@@ -1,190 +1,118 @@
 <script>
-import {Dropdown, DropdownToggle, DropdownMenu, InputGroup, InputGroupText} from 'vue3-bootstrap-components';
-import {computed, defineComponent, inject} from "vue";
-import QuantityInput from "./QuantityInput.vue";
-import GroupControl from "./GroupControl.vue";
-
+import { computed, defineComponent, onMounted, ref } from 'vue';
+import GroupControl from './GroupControl.vue';
+import QuantityInput from './QuantityInput.vue';
+import { fieldProps, useField } from './composables/useField.js';
+import { useBsInstance } from './composables/useBsInstance.js';
+import { useI18n } from './i18n.js';
+
+/**
+ * A menu (Bootstrap 6 Menu) with one quantity stepper per option, e.g. passengers: adults / children / infants.
+ * The value is an object keyed by option index: { 0: 2, 1: 1, 2: 0 }.
+ */
 export default defineComponent({
-  components: {GroupControl, QuantityInput, InputGroup, InputGroupText, Dropdown, DropdownToggle, DropdownMenu},
-  props: {
-    name: {
-      type: String,
-      required: true,
-    },
-    required: Boolean,
-    disabled: Boolean,
-    readonly: Boolean,
-    options: {
-      type: Array,
-      default: [],
-      required: true,
-    },
-    max: {
-      type: Number,
-      default: null,
-    },
-    totalMax: {
-      type: Number,
-      default: null,
-    },
-    min: {
-      type: Number,
-      default: 0,
-    },
-    totalMin: {
-      type: Number,
-      default: null,
+    name: 'MultiQuantityInput',
+    components: { GroupControl, QuantityInput },
+    emits: ['update:modelValue', 'change', 'show', 'shown', 'hide', 'hidden'],
+    props: {
+        ...fieldProps,
+        /** Array of strings or { name, min, max, description, html }. */
+        options: { type: Array, default: () => [] },
+        min: { type: Number, default: 0 },
+        max: { type: Number, default: null },
+        totalMin: { type: Number, default: null },
+        totalMax: { type: Number, default: null },
+        unit: { type: String, default: null },
+        placement: { type: String, default: 'bottom-start' },
+        locale: { type: String, default: null },
     },
-    unit: {
-      type: String,
-      default: 'Number',
+    setup(props, { emit }) {
+        const field = useField(props, emit);
+        const { t } = useI18n(() => props.locale);
+        const toggle = ref(null);
+
+        const quantities = computed(() => {
+            const v = field.model.value;
+            return v && typeof v === 'object' ? v : {};
+        });
+
+        const total = computed(() =>
+            props.options.reduce((sum, _, i) => sum + (Number(quantities.value[i]) || 0), 0)
+        );
+
+        const unitText = computed(() => props.unit ?? t('quantity.unit'));
+        const normalized = computed(() =>
+            props.options.map((item, i) => {
+                const o = typeof item === 'object' && item !== null ? item : { name: item };
+                const own = Number(quantities.value[i]) || 0;
+                const itemMax = o.max ?? props.max;
+                const room = props.totalMax === null ? Infinity : own + (props.totalMax - total.value);
+                return {
+                    key: i,
+                    name: o.name ?? o.label ?? String(item),
+                    description: o.description ?? null,
+                    html: !!o.html,
+                    min: o.min ?? props.min,
+                    max: Math.min(itemMax ?? Infinity, room) === Infinity ? null : Math.min(itemMax ?? Infinity, room),
+                };
+            })
+        );
+
+        onMounted(() => {
+            if (!field.model.value || typeof field.model.value !== 'object') {
+                field.model.value = props.options.reduce((carry, item, i) => {
+                    carry[i] = (typeof item === 'object' && item?.min) || props.min;
+                    return carry;
+                }, {});
+            }
+        });
+
+        useBsInstance(
+            'Menu',
+            () => toggle.value,
+            () => ({ autoClose: 'outside', placement: props.placement }),
+            {
+                onCreate(_, el) {
+                    ['show', 'shown', 'hide', 'hidden'].forEach((evt) =>
+                        el.addEventListener(`${evt}.bs.menu`, (e) => emit(evt, e))
+                    );
+                },
+            }
+        );
+
+        return { ...field, t, toggle, total, unitText, normalized };
     },
-  },
-  setup(props) {
-    let form = inject('form');
-    let group = inject('group', {});
-
-    if (form === undefined) {
-      form = {
-        errors: {},
-        getID(name) {
-        }
-      };
-    }
-
-    if (!form[props.name]) {
-      form[props.name] = props.min;
-    }
-
-    const modelValue = computed({
-      get() {
-        return (group.value && form.value[group.value.name]) ? group.value?.getData(props.name) : form.value[props.name];
-      },
-      set(value) {
-        if (group?.value?.name) {
-          group.value.setData(props.name, value);
-        } else {
-          form.value[props.name] = value;
-        }
-      }
-    });
-
-    return {modelValue, form};
-  },
-  computed: {
-    totalQuantity() {
-      return this.modelValue ? Object.values(this.modelValue).reduce((sum, value) => sum + value, 0) : this.options.length;
-    }
-  },
-  methods: {
-    show(){
-      this.showDropdown = !this.showDropdown;
-    },
-    clickOnOutside(e){
-      if(!this.$refs.input.contains(e.target)){
-        this.showDropdown = false;
-      }
-    }
-  },
-  mounted() {
-    if(typeof window !== 'undefined'){
-      window.addEventListener('click', this.clickOnOutside);
-    }
-  },
-  beforeUnmount() {
-    if(typeof window !== 'undefined'){
-      window.removeEventListener('click', this.clickOnOutside);
-    }
-  },
-  data() {
-    return {
-      showDropdown : false,
-    }
-  }
-})
+});
 </script>
+
 <template>
-  <div ref="input" class="multi-quantity-input fanum">
-    <button type="button" class="form-control fanum dropdown-toggle" @click.prevent="show">
-      {{ totalQuantity }} {{ unit }}
-    </button>
-    <div class="multi-quantity-input--dropdown" :class="{'show': showDropdown}">
-      <GroupControl :name="name">
-        <div class="row align-items-center justify-content-between g-0" v-for="(item, key) in options">
-          <div class="col-auto" v-html="item?.name || item">
-          </div>
-          <div class="col-auto">
-            <QuantityInput :name="key" :min="(item.min || min)" :max="(item.max || max)"/>
-          </div>
+    <div class="multi-quantity-input fanum">
+        <button
+            ref="toggle"
+            type="button"
+            class="form-control combobox-toggle"
+            data-bs-toggle="menu"
+            aria-haspopup="true"
+            :disabled="isDisabled || readonly"
+            :class="{ 'is-invalid': isInvalid }"
+        >
+            <span class="combobox-value">{{ total }} {{ unitText }}</span>
+        </button>
+        <div class="menu p-3">
+            <GroupControl :name="name">
+                <div
+                    v-for="item in normalized"
+                    :key="item.key"
+                    class="d-flex align-items-center justify-content-between gap-3 py-1"
+                >
+                    <div>
+                        <span v-if="item.html" v-html="item.name"></span>
+                        <span v-else>{{ item.name }}</span>
+                        <div v-if="item.description" class="form-text mt-0">{{ item.description }}</div>
+                    </div>
+                    <QuantityInput :name="String(item.key)" :min="item.min" :max="item.max" :readonly="readonly" unit="" />
+                </div>
+            </GroupControl>
         </div>
-      </GroupControl>
     </div>
-  </div>
 </template>
-<style>
-
-.multi-quantity-input{
-  position: relative;
-}
-
-.multi-quantity-input .dropdown-toggle {
-  text-align: start;
-}
-
-.multi-quantity-input .dropdown-menu small {
-  color: var(--bs-secondary-color, #cccccc)
-}
-
-.multi-quantity-input .input-group {
-  align-items: center;
-}
-
-.multi-quantity-input .input-group .input-group-text {
-  display: none;
-}
-
-.multi-quantity-input .input-group .form-control {
-  width: 40px;
-  padding-right: 3px;
-  padding-left: 3px;
-}
-
-.multi-quantity-input .input-group .btn {
-  display: flex;
-  align-content: center;
-  align-items: center;
-  width: 25px;
-  height: 25px;
-  border-radius: 50% !important;
-  padding: 5px;
-}
-
-.multi-quantity-input .input-group .btn,
-.multi-quantity-input .input-group .btn:active,
-.multi-quantity-input .input-group .btn:focus {
-  background-color: var(--bs-primary, #de0021);
-  color: #ffffff;
-}
-
-.multi-quantity-input .input-group .btn svg,
-.multi-quantity-input .input-group .btn svg path {
-  fill: #ffffff;
-}
-
-.multi-quantity-input .multi-quantity-input--dropdown {
-  display: none;
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  z-index: 2;
-}
-
-.multi-quantity-input .multi-quantity-input--dropdown.show {
-  color: var(--bs-body-color, #333333);
-  background-color: var(--bs-body-bg, #ffffff);
-  border-radius: var(--bs-border-radius, 1rem);
-  display: block;
-  padding: 10px 15px;
-}
-</style>

package/src/OTPInput.vue

@@ -1,76 +1,144 @@
-<script>
-import {computed, inject, defineComponent} from "vue";
-
-export default defineComponent({
-  props: {
-    name: {
-      type: String,
-      required: true,
-    },
-    maxLength: {
-      type: Number,
-      default: 5,
-    },
-    placeholder: {
-      type: String,
-      default: '',
-    },
-  },
-  computed: {
-    inputID() {
-      return this.form.getID(this);
-    },
-    placeholderLines() {
-      if (this.placeholder) {
-        return this.placeholder;
-      }
-
-      return '_'.repeat(this.maxLength);
-    }
-
-  },
-  setup(props) {
-    let form = inject('form', {
-      errors: {},
-      getID(name) {
-        return name;
-      }
-    });
-    let group = inject('group', {});
-
-    const modelValue = computed({
-      get() {
-        return (group.value && form.value[group.value.name]) ? group.value?.getData(props.name) : form.value[props.name];
-      },
-      set(value) {
-        if (group?.value?.name) {
-          group.value.setData(props.name, value);
-        } else {
-          form.value[props.name] = value;
-        }
-      }
-    });
-
-    return {modelValue, form, group};
-  },
-})
-</script>
-<template>
-  <input
-      :name="name"
-      :id="inputID"
-      v-model="modelValue"
-      :class="{'is-invalid': form?.errors[name] !== undefined}"
-      :disabled="form?.processing"
-      :placeholder="placeholderLines"
-      :maxlength="maxLength"
-      :data-auto-submit-length="maxLength"
-      type="tel"
-      class="form-control form-control-otp fanum">
-</template>
-<style>
-.form-control-otp {
-  letter-spacing: 1rem;
-  text-align: center;
-}
-</style>
+<script>
+import { defineComponent, nextTick, onMounted, ref, watch } from 'vue';
+import { fieldProps, useField } from './composables/useField.js';
+import { useBsInstance } from './composables/useBsInstance.js';
+
+/**
+ * Bootstrap 6 one-time-code input (`data-bs-otp`). A single real <input> backs the visual slots,
+ * so password managers and SMS autofill keep working.
+ */
+export default defineComponent({
+    name: 'OTPInput',
+    emits: ['update:modelValue', 'change', 'input', 'complete', 'focus', 'blur'],
+    props: {
+        ...fieldProps,
+        /** Number of characters. */
+        length: { type: Number, default: null },
+        /** Legacy alias of `length`. */
+        maxLength: { type: Number, default: null },
+        /** numeric | alphanumeric | alpha */
+        type: { type: String, default: 'numeric', validator: (v) => ['numeric', 'alphanumeric', 'alpha'].includes(v) },
+        /** Show • instead of the typed character. */
+        mask: { type: Boolean, default: false },
+        /** Visual grouping, e.g. [3, 3] renders `123 · 456`. */
+        groups: { type: Array, default: null },
+        separator: { type: String, default: '·' },
+        /** Submit the surrounding FormContainer as soon as the code is complete. */
+        autoSubmit: { type: Boolean, default: false },
+        autofocus: { type: Boolean, default: false },
+    },
+    setup(props, { emit, expose }) {
+        const field = useField(props, emit);
+        const el = ref(null);
+        const input = ref(null);
+        let syncing = false;
+        let offs = [];
+
+        const resolvedLength = () => props.length ?? props.maxLength ?? 6;
+        const asText = (v) => (v === null || v === undefined ? '' : String(v));
+
+        function syncInvalid() {
+            // Bootstrap adds its own classes to this input, so the state is toggled through classList
+            input.value?.classList.toggle('is-invalid', field.isInvalid.value);
+        }
+
+        function syncFromModel() {
+            const inst = instance.value;
+            if (!inst) return;
+            const text = asText(field.model.value);
+            if (inst.getValue() === text) return;
+
+            syncing = true;
+            try {
+                inst.setValue(text);
+            } finally {
+                syncing = false;
+            }
+        }
+
+        const { instance, create } = useBsInstance(
+            'OtpInput',
+            () => el.value,
+            () => ({
+                length: resolvedLength(),
+                type: props.type,
+                mask: props.mask,
+                groups: props.groups,
+                separator: props.separator,
+            }),
+            {
+                onCreate(inst, element) {
+                    const on = (type, fn) => {
+                        element.addEventListener(type, fn);
+                        offs.push(() => element.removeEventListener(type, fn));
+                    };
+
+                    on('input.bs.otpInput', (e) => {
+                        if (syncing) return;
+                        field.model.value = e.value;
+                        emit('input', e.value, e);
+                        field.emitChange(e.value, e);
+                    });
+
+                    on('complete.bs.otpInput', (e) => {
+                        if (syncing) return;
+                        emit('complete', e.value);
+                        if (props.autoSubmit) field.formApi?.submit?.();
+                    });
+
+                    syncFromModel();
+                    syncInvalid();
+                    if (props.autofocus) inst.focus();
+                },
+                onDestroy() {
+                    offs.forEach((off) => off());
+                    offs = [];
+                },
+            }
+        );
+
+        onMounted(() => {
+            // Pre-fill before the plugin is created so it can sanitise the initial value
+            if (input.value) input.value.value = asText(field.model.value);
+        });
+
+        watch(() => field.model.value, syncFromModel);
+        watch(field.isInvalid, syncInvalid, { flush: 'post' });
+        watch(
+            () => [resolvedLength(), props.type, props.mask, props.groups, props.separator],
+            async () => {
+                await nextTick();
+                create();
+            },
+            { deep: true }
+        );
+
+        expose({
+            focus: () => instance.value?.focus(),
+            clear: () => {
+                instance.value?.clear();
+                field.model.value = '';
+            },
+        });
+
+        return { ...field, el, input };
+    },
+});
+</script>
+
+<template>
+    <div ref="el" class="otp fanum">
+        <input
+            ref="input"
+            type="text"
+            :name="name"
+            :id="inputId"
+            :disabled="isDisabled"
+            :readonly="readonly"
+            :required="required"
+            :aria-invalid="isInvalid || undefined"
+            @focus="$emit('focus', $event)"
+            @blur="$emit('blur', $event)"
+        />
+    </div>
+</template>