inertia-bootstrap-forms 2.1.21 → 3.0.0

package/src/CheckboxInput.vue

@@ -1,79 +1,60 @@
-<script>
-import {computed, defineComponent, inject} from "vue";
-
-export default defineComponent({
-    props: {
-        name: {
-            type: String,
-            required: true,
-        },
-        id: {
-            type: String,
-            default: '',
-            required: false,
-        },
-        value: {
-            type: [String, Number],
-            default: 'yes',
-            required: false,
-        },
-        type: {
-            type: String,
-            default: 'checkbox',
-            required: false,
-        },
-    },
-    computed: {
-        inputID() {
-            return this.form.getID(this);
-        }
-    },
-    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>
-    <div class="form-check">
-        <input
-            :name="name"
-            :id="inputID"
-            v-model="modelValue"
-            :class="{'is-invalid': form?.errors[name]}"
-            :disabled="form?.processing"
-            :type="type"
-            :value="value"
-            @change="e => $emit('change', e)"
-            class="form-check-input">
-        <label class="form-check-label" :for="inputID">
-            <slot/>
-        </label>
-    </div>
-</template>
-<style>
-.form-check,
-.form-check label {
-    cursor: pointer;
-}
-</style>
+<script>
+import { defineComponent, ref } from 'vue';
+import { fieldProps, useField } from './composables/useField.js';
+import { useChoice } from './composables/useChoice.js';
+
+/** Bootstrap 6 checkbox / radio (`.check` / `.radio` directly on the input, wrapped by `.form-field`). */
+export default defineComponent({
+    name: 'CheckboxInput',
+    emits: ['update:modelValue', 'change', 'focus', 'blur'],
+    props: {
+        ...fieldProps,
+        /** checkbox | radio */
+        type: { type: String, default: 'checkbox', validator: (v) => ['checkbox', 'radio'].includes(v) },
+        /** Value added to the model (arrays / radios) when this option is checked. */
+        value: { type: [String, Number, Boolean, Object], default: 'yes' },
+        trueValue: { type: null, default: true },
+        falseValue: { type: null, default: false },
+        /** Initial checked state (applied only when the model is still empty). */
+        checked: { type: Boolean, default: false },
+        indeterminate: { type: Boolean, default: false },
+        label: { type: String, default: null },
+    },
+    setup(props, { emit }) {
+        const input = ref(null);
+        const field = useField(props, emit, { valued: () => props.value });
+        useChoice(props, field, input);
+
+        function onChange(event) {
+            field.emitChange(field.model.value, event);
+        }
+
+        return { ...field, input, onChange };
+    },
+    expose: ['input'],
+});
+</script>
+
+<template>
+    <div class="form-field">
+        <input
+            ref="input"
+            v-model="model"
+            :name="name"
+            :id="inputId"
+            :type="type"
+            :value="value"
+            :true-value="trueValue"
+            :false-value="falseValue"
+            :required="required"
+            :disabled="isDisabled"
+            :aria-invalid="isInvalid || undefined"
+            :class="[type === 'radio' ? 'radio' : 'check', { 'is-invalid': isInvalid }]"
+            @click="readonly && $event.preventDefault()"
+            @change="onChange"
+            @focus="$emit('focus', $event)"
+            @blur="$emit('blur', $event)"
+        />
+        <label :for="inputId"><slot>{{ label }}</slot></label>
+    </div>
+</template>

package/src/CheckboxToggle.vue

@@ -1,136 +1,53 @@
-<script>
-import {computed, defineComponent, inject} from "vue";
-
-export default defineComponent({
-  props: {
-    name: {
-      type: String,
-      required: true,
-    },
-    id: {
-      type: String,
-      default: '',
-      required: false,
-    },
-    value: {
-      type: [String, Number],
-      default: 'yes',
-      required: false,
-    },
-    type: {
-      type: String,
-      default: 'checkbox',
-      required: false,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-      required: false,
-    },
-    readonly: {
-      type: Boolean,
-      default: false,
-    },
-    hideInput: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  computed: {
-    inputID() {
-      return this.form.getID(this) + (this.value || '');
-    },
-    selectedValue() {
-      return (this.modelValue && typeof this.modelValue == 'object') ? Object.values(this.modelValue) : (this.modelValue ? [this.modelValue] : null)
-    }
-  },
-  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>
-  <label class="form-check-toggle"
-         :class="{
-            'form-check-toggle--active': (selectedValue || []).includes(value),
-            'disabled': (disabled || readonly),
-            'is-invalid': form?.errors[name]
-         }" :for="inputID">
-    <input
-        :name="name"
-        :id="inputID"
-        v-model="modelValue"
-        :class="{'is-invalid': form?.errors[name], 'form-check-toggle--input-hide': hideInput}"
-        :disabled="form?.processing || disabled"
-        :type="type"
-        :value="value"
-        :readonly="readonly"
-        @change="e => $emit('change', e)"
-        class="form-check-toggle--input form-check-input">
-    <slot/>
-  </label>
-</template>
-<style>
-.form-check-toggle {
-  position: relative;
-  cursor: pointer;
-  display: block;
-  background-color: var(--bs-body-bg, #ffffff);
-  border-radius: var(--bs-border-radius, 1rem);
-  min-width: 100px;
-  width: 100%;
-  padding: 0.5rem 0.75rem;
-  font-size: 0.97rem;
-  font-weight: 400;
-  line-height: 1.7;
-  color: var(--bs-body-color, #000000);
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background-clip: padding-box;
-  border: var(--bs-border-width, 1px) solid var(--bs-border-color, #eeeeee);
-  transition: background-color ease 0.3s, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-}
-
-.form-check-toggle.is-invalid {
-  border-color: var(--bs-form-invalid-border-color);
-}
-
-.form-check-toggle.form-check-toggle--active,
-.form-check-toggle:has(input:checked) {
-  background-color: var(--bs-warning-bg-subtle, #ffda6a);
-  border-color: var(--bs-warning-border-subtle, var(--bs-alert-border-color, #fff0c3));
-}
-
-.form-check-toggle .form-check-toggle--input-hide {
-  visibility: hidden;
-  position: absolute;
-  top: 0;
-  right: 0;
-}
-
-.form-check-toggle .form-check-input {
-  margin-right: 5px;
-}
-</style>
+<script>
+import { defineComponent, ref } from 'vue';
+import { fieldProps, useField } from './composables/useField.js';
+import { useChoice } from './composables/useChoice.js';
+
+/** Selectable card (Bootstrap 6 `.form-field-card`): the whole card toggles the checkbox / radio. */
+export default defineComponent({
+    name: 'CheckboxToggle',
+    emits: ['update:modelValue', 'change', 'focus', 'blur'],
+    props: {
+        ...fieldProps,
+        type: { type: String, default: 'checkbox', validator: (v) => ['checkbox', 'radio'].includes(v) },
+        value: { type: [String, Number, Boolean, Object], default: 'yes' },
+        trueValue: { type: null, default: true },
+        falseValue: { type: null, default: false },
+        checked: { type: Boolean, default: false },
+        /** Visually hide the check mark (the card highlight is the only indicator). */
+        hideInput: { type: Boolean, default: false },
+    },
+    setup(props, { emit }) {
+        const input = ref(null);
+        const field = useField(props, emit, { valued: () => props.value });
+        useChoice(props, field, input);
+
+        return { ...field, input, onChange: (event) => field.emitChange(field.model.value, event) };
+    },
+    expose: ['input'],
+});
+</script>
+
+<template>
+    <div class="form-field form-field-card" :class="{ 'is-invalid': isInvalid, disabled: isDisabled || readonly }">
+        <input
+            ref="input"
+            v-model="model"
+            :name="name"
+            :id="inputId"
+            :type="type"
+            :value="value"
+            :true-value="trueValue"
+            :false-value="falseValue"
+            :required="required"
+            :disabled="isDisabled"
+            :aria-invalid="isInvalid || undefined"
+            :class="[type === 'radio' ? 'radio' : 'check', { 'is-invalid': isInvalid, 'visually-hidden': hideInput }]"
+            @click="readonly && $event.preventDefault()"
+            @change="onChange"
+            @focus="$emit('focus', $event)"
+            @blur="$emit('blur', $event)"
+        />
+        <label :for="inputId"><slot /></label>
+    </div>
+</template>

package/src/ChipsInput.vue

@@ -0,0 +1,157 @@
+<script>
+import { defineComponent, nextTick, ref, watch } from 'vue';
+import { fieldProps, useField } from './composables/useField.js';
+import { useBsInstance } from './composables/useBsInstance.js';
+import { useI18n } from './i18n.js';
+
+const sameList = (a, b) => a.length === b.length && a.every((v, i) => v === b[i]);
+
+/**
+ * Bootstrap 6 Chip input (tags). The value is an array of strings stored in the FormContainer's v-model.
+ */
+export default defineComponent({
+    name: 'ChipsInput',
+    emits: ['update:modelValue', 'change', 'add', 'remove', 'select', 'rejected', 'focus', 'blur'],
+    props: {
+        ...fieldProps,
+        placeholder: { type: String, default: null },
+        /** Character that splits typed / pasted text into chips. Use null to disable. */
+        separator: { type: String, default: ',' },
+        allowDuplicates: { type: Boolean, default: false },
+        maxChips: { type: Number, default: null },
+        dismissible: { type: Boolean, default: true },
+        /** HTML / SVG of the remove icon (sanitised by Bootstrap). */
+        dismissIcon: { type: String, default: null },
+        /** Turn the pending text into a chip when the input loses focus. */
+        createOnBlur: { type: Boolean, default: true },
+        /** (value: string) => boolean — return false to reject a chip. */
+        validator: { type: Function, default: null },
+        locale: { type: String, default: null },
+    },
+    setup(props, { emit, expose }) {
+        const field = useField(props, emit);
+        const { t } = useI18n(() => props.locale);
+        const el = ref(null);
+        const ghost = ref(null);
+        let syncing = false;
+        let offs = [];
+
+        const toValues = (model) => {
+            if (Array.isArray(model)) return model.map(String);
+            if (typeof model === 'string' && model !== '') {
+                return props.separator ? model.split(props.separator).map((s) => s.trim()).filter(Boolean) : [model];
+            }
+            return [];
+        };
+
+        function syncFromModel() {
+            const inst = instance.value;
+            if (!inst) return;
+
+            const target = toValues(field.model.value);
+            if (sameList(inst.getValues(), target)) return;
+
+            syncing = true;
+            try {
+                inst.clear();
+                target.forEach((v) => inst.add(v));
+            } finally {
+                syncing = false;
+            }
+
+            // Some values may have been rejected (duplicates / maxChips): reflect the truth
+            const actual = inst.getValues();
+            if (!sameList(actual, target) && Array.isArray(field.model.value)) field.model.value = actual;
+        }
+
+        const locked = () => props.readonly || field.isDisabled.value;
+
+        const { instance, create } = useBsInstance(
+            'Chips',
+            () => el.value,
+            () => {
+                const config = {
+                    separator: props.separator,
+                    allowDuplicates: props.allowDuplicates,
+                    maxChips: props.maxChips,
+                    dismissible: props.dismissible && !locked(),
+                    createOnBlur: props.createOnBlur,
+                    placeholder: props.placeholder ?? t('chips.placeholder'),
+                };
+                if (props.dismissIcon) config.dismissIcon = props.dismissIcon;
+                return config;
+            },
+            {
+                onCreate(inst, element) {
+                    const on = (type, fn) => {
+                        element.addEventListener(type, fn);
+                        offs.push(() => element.removeEventListener(type, fn));
+                    };
+
+                    on('add.bs.chips', (e) => {
+                        if (syncing) return;
+                        if (props.validator && !props.validator(e.value)) {
+                            e.preventDefault();
+                            emit('rejected', e.value);
+                            return;
+                        }
+                        emit('add', e.value);
+                    });
+                    on('remove.bs.chips', (e) => !syncing && emit('remove', e.value));
+                    on('select.bs.chips', (e) => emit('select', e.selected));
+                    on('change.bs.chips', (e) => {
+                        if (syncing) return;
+                        field.model.value = e.values;
+                        field.emitChange(e.values, e);
+                    });
+
+                    syncFromModel();
+                },
+                onDestroy() {
+                    offs.forEach((off) => off());
+                    offs = [];
+                },
+            }
+        );
+
+        watch(() => field.model.value, syncFromModel, { deep: true });
+
+        // Options that are only read when the plugin is constructed
+        watch(
+            () => [props.separator, props.allowDuplicates, props.maxChips, props.dismissible, props.createOnBlur, props.dismissIcon, props.readonly, field.isDisabled.value],
+            async () => {
+                await nextTick();
+                create();
+            }
+        );
+
+        expose({
+            add: (value) => instance.value?.add(value),
+            remove: (value) => instance.value?.remove(value),
+            clear: () => instance.value?.clear(),
+            focus: () => ghost.value?.focus(),
+        });
+
+        return { ...field, t, el, ghost, locked };
+    },
+});
+</script>
+
+<template>
+    <div ref="el" class="chip-input" :aria-disabled="isDisabled || undefined">
+        <input
+            ref="ghost"
+            type="text"
+            class="form-ghost"
+            :id="inputId"
+            :class="{ 'is-invalid': isInvalid }"
+            :placeholder="placeholder ?? t('chips.placeholder')"
+            :disabled="isDisabled"
+            :readonly="readonly"
+            :aria-invalid="isInvalid || undefined"
+            autocomplete="off"
+            @focus="$emit('focus', $event)"
+            @blur="$emit('blur', $event)"
+        />
+    </div>
+</template>