inertia-bootstrap-forms 2.1.20 → 3.0.0

package/src/SwitchInput.vue

@@ -1,83 +1,58 @@
-<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: null,
-      required: false,
-    },
-    disabled: {
-      type: Boolean,
-      default: 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 form-switch" :class="{'disabled': disabled}">
-    <input
-        :name="name"
-        :id="inputID"
-        v-model="modelValue"
-        :class="{'is-invalid': form?.errors[name]}"
-        :disabled="form?.processing || disabled"
-        :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 switch: `.switch` wrapper around `<input type="checkbox" role="switch" switch>`. */
+export default defineComponent({
+    name: 'SwitchInput',
+    emits: ['update:modelValue', 'change', 'focus', 'blur'],
+    props: {
+        ...fieldProps,
+        value: { type: [String, Number, Boolean, Object], default: null },
+        trueValue: { type: null, default: true },
+        falseValue: { type: null, default: false },
+        checked: { 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, { type: () => 'checkbox' });
+
+        return {
+            ...field,
+            input,
+            onChange: (event) => field.emitChange(field.model.value, event),
+        };
+    },
+    expose: ['input'],
+});
+</script>
+
+<template>
+    <div class="form-field">
+        <div class="switch">
+            <input
+                ref="input"
+                v-model="model"
+                :name="name"
+                :id="inputId"
+                type="checkbox"
+                role="switch"
+                switch
+                :value="value ?? undefined"
+                :true-value="trueValue"
+                :false-value="falseValue"
+                :required="required"
+                :disabled="isDisabled"
+                :aria-invalid="isInvalid || undefined"
+                :class="{ 'is-invalid': isInvalid }"
+                @change="onChange"
+                @focus="$emit('focus', $event)"
+                @blur="$emit('blur', $event)"
+            />
+        </div>
+        <label :for="inputId"><slot>{{ label }}</slot></label>
+    </div>
+</template>

package/src/TelInput.vue

@@ -1,130 +1,96 @@
 <script>
-import {VueTelInput} from 'vue-tel-input';
-import 'vue-tel-input/vue-tel-input.css';
-import {defineComponent, inject} from "vue";
+import { computed, defineAsyncComponent, defineComponent, ref, watch } from 'vue';
+import { fieldProps, useField } from './composables/useField.js';
 
+const VueTelInput = defineAsyncComponent(() => import('vue-tel-input').then((m) => m.VueTelInput));
+
+/**
+ * International phone input (vue-tel-input). The stored value is the international number (E.164 style).
+ * Remember to import `vue-tel-input/vue-tel-input.css` in your application.
+ */
 export default defineComponent({
-  components: {
-    VueTelInput
-  },
-  props: {
-    name: {
-      type: String,
-      default: 'email',
-      required: true,
-    },
-    placeHolder: {
-      type: String,
-      default: '000 000 0000',
+    name: 'TelInput',
+    components: { VueTelInput },
+    emits: ['update:modelValue', 'change', 'validate', 'country-changed', 'focus', 'blur'],
+    props: {
+        ...fieldProps,
+        placeholder: { type: String, default: '000 000 0000' },
+        /** Legacy alias of `placeholder`. */
+        placeHolder: { type: String, default: null },
+        defaultCountry: { type: String, default: 'ir' },
+        preferredCountries: { type: Array, default: () => ['ir', 'us', 'tr', 'ca'] },
+        mode: { type: String, default: 'national' },
+        validCharactersOnly: { type: Boolean, default: true },
+        /** Mark the field invalid as soon as the typed number is not valid. */
+        validate: { type: Boolean, default: true },
+        searchPlaceholder: { type: String, default: 'Search…' },
+        dropdownOptions: { type: Object, default: () => ({}) },
+        inputOptions: { type: Object, default: () => ({}) },
     },
-  },
-  setup(props) {
-    let form = inject('form');
+    setup(props, { emit }) {
+        const field = useField(props, emit);
+        const text = ref(field.model.value ?? '');
+        const valid = ref(null);
+        let lastEmitted = field.model.value ?? '';
 
-    if (form === undefined) {
-      form = {
-        errors: {},
-        getID(name) {
+        // External changes (form reset, server data) → refresh the visible text
+        watch(
+            () => field.model.value,
+            (v) => {
+                if ((v ?? '') !== lastEmitted) text.value = v ?? '';
+            }
+        );
+
+        function onInput(number, phone) {
+            lastEmitted = phone?.number ?? '';
+            field.model.value = lastEmitted;
+            valid.value = phone?.valid ?? null;
+            emit('validate', valid.value, phone);
+            field.emitChange(lastEmitted);
         }
-      };
-    }
 
-    return {form};
-  },
-  methods: {
-    inputEvent(number, phone) {
-      this.form[this.name] = phone.number;
-      this.valid = phone.valid;
-      // console.log('input', number, phone);
-    }
-  },
-  data() {
-    return {
-      defaultValue: this.form[this.name],
-      valid: null,
-    }
-  }
-})
+        return {
+            ...field,
+            text,
+            valid,
+            onInput,
+            dropdown: computed(() => ({
+                showDialCodeInList: true,
+                showDialCodeInSelection: true,
+                showSearchBox: true,
+                searchBoxPlaceholder: props.searchPlaceholder,
+                showFlags: false,
+                ...props.dropdownOptions,
+            })),
+            inputOpts: computed(() => ({
+                placeholder: props.placeHolder ?? props.placeholder,
+                id: field.inputId.value,
+                name: props.name,
+                readonly: props.readonly,
+                ...props.inputOptions,
+            })),
+            invalidClass: computed(() => field.isInvalid.value || (props.validate && valid.value === false)),
+        };
+    },
+});
 </script>
+
 <template>
-  <div class="telephone-input input-group fanum" dir="ltr">
-    <vue-tel-input
-        mode="national"
-        :validCharactersOnly="true"
-        defaultCountry="ir"
-        :preferredCountries="['ir', 'us', 'tr', 'ca']"
-        :dropdownOptions="{
-            showDialCodeInList:true,
-            showDialCodeInSelection:true,
-            showSearchBox:true,
-            searchBoxPlaceholder:'Search...',
-            showFlags:false,
-        }"
-        @on-input="inputEvent"
-        :inputOptions="{
-            placeholder: placeHolder
-        }"
-        v-model="defaultValue"
-        :styleClasses="'form-control form-control-tel fanum ' + ((valid === false || form?.errors[name] !== undefined) ? ' is-invalid' : '')"/>
-  </div>
+    <div class="telephone-input input-group fanum" dir="ltr">
+        <VueTelInput
+            v-model="text"
+            :mode="mode"
+            :valid-characters-only="validCharactersOnly"
+            :default-country="defaultCountry"
+            :preferred-countries="preferredCountries"
+            :disabled="isDisabled"
+            :dropdown-options="dropdown"
+            :input-options="inputOpts"
+            :style-classes="'form-control form-control-tel fanum' + (invalidClass ? ' is-invalid' : '')"
+            @on-input="onInput"
+            @country-changed="$emit('country-changed', $event)"
+            @focus="$emit('focus', $event)"
+            @blur="$emit('blur', $event)"
+        />
+    </div>
 </template>
-<style>
-.telephone-input .vue-tel-input {
-  border-color: var(--bs-border-color, #ccc);
-  border-width: var(--bs-border-width, 1px);
-  border-radius: var(--bs-border-radius, .5rem);
-}
-
-.telephone-input .vti__input.vti__search_box {
-  border: 0;
-  font-size: var(--bs-body-font-size, .9rem);
-  background: var(--bs-tertiary-bg, #eee);
-  border-radius: var(--bs-border-radius, .5rem);
-}
-
-.telephone-input .vti__search_box_container {
-  display: flex;
-}
-
-.telephone-input .vti__dropdown {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
-  padding: 7px 7px 7px 0;
-}
-
-.telephone-input .vti__input.vti__phone {
-  padding-right: 3rem;
-}
-
-.telephone-input .vti__dropdown-list {
-  padding: 0 !important;
-  left: auto;
-  right: 0;
-}
-
-.telephone-input .vti__dropdown-list .vti__dropdown-item {
-  direction: rtl;
-  text-align: right;
-}
-
-.telephone-input .vti__dropdown-list .vti__dropdown-item strong {
-  font-weight: normal;
-}
-
-.telephone-input .vti__selection {
-  font-size: inherit;
-}
-
-.telephone-input .form-control.is-invalid {
-  padding-right: 0.75rem;
-  background-position: left calc(0.425em + 0.25rem) center;
-}
-
-.telephone-input .vti__dropdown-arrow {
-  margin: 0 4px;
-}
-
-</style>

package/src/TextAreaInput.vue

@@ -1,44 +1,40 @@
 <script>
-import {computed, defineComponent, inject} from "vue";
+import { computed, defineComponent } from 'vue';
+import { fieldProps, useField } from './composables/useField.js';
 
 export default defineComponent({
+    name: 'TextAreaInput',
+    emits: ['update:modelValue', 'change', 'input', 'focus', 'blur'],
     props: {
-        name: {
-            type: String,
-            required: true,
-        },
+        ...fieldProps,
+        rows: { type: [Number, String], default: 3 },
+        placeholder: { type: String, default: null },
+        size: { type: String, default: 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};
+    setup(props, { emit }) {
+        const field = useField(props, emit);
+        const sizeClass = computed(() => (props.size ? `form-control-${props.size}` : null));
+        return { ...field, sizeClass, emit };
     },
-})
+});
 </script>
+
 <template>
     <textarea
+        v-model="model"
         :name="name"
-        v-model="modelValue"
-        :class="{'is-invalid': form?.errors[name] !== undefined}"
-        :disabled="form?.processing"
-        class="form-control"></textarea>
+        :id="inputId"
+        :rows="rows"
+        :placeholder="placeholder"
+        :required="required"
+        :readonly="readonly"
+        :disabled="isDisabled"
+        :aria-invalid="isInvalid || undefined"
+        class="form-control"
+        :class="[sizeClass, { 'is-invalid': isInvalid }]"
+        @input="emit('input', model, $event)"
+        @change="emitChange(model, $event)"
+        @focus="$emit('focus', $event)"
+        @blur="$emit('blur', $event)"
+    ></textarea>
 </template>

package/src/TextInput.vue

@@ -1,51 +1,42 @@
-<script>
-import {computed, inject, defineComponent} from "vue";
-
-export default defineComponent({
-    props: {
-        name: {
-            type: String,
-            required: true,
-        },
-    },
-    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>
-    <input
-        :name="name"
-        :id="inputID"
-        v-model="modelValue"
-        :class="{'is-invalid': form?.errors[name] !== undefined}"
-        :disabled="form?.processing"
-        type="text"
-        class="form-control">
-</template>
+<script>
+import { computed, defineComponent } from 'vue';
+import { fieldProps, useField } from './composables/useField.js';
+
+export default defineComponent({
+    name: 'TextInput',
+    emits: ['update:modelValue', 'change', 'input', 'focus', 'blur'],
+    props: {
+        ...fieldProps,
+        type: { type: String, default: 'text' },
+        placeholder: { type: String, default: null },
+        /** sm | lg */
+        size: { type: String, default: null },
+    },
+    setup(props, { emit }) {
+        const field = useField(props, emit);
+        const sizeClass = computed(() => (props.size ? `form-control-${props.size}` : null));
+
+        return { ...field, sizeClass, emit };
+    },
+});
+</script>
+
+<template>
+    <input
+        v-model="model"
+        :name="name"
+        :id="inputId"
+        :type="type"
+        :placeholder="placeholder"
+        :required="required"
+        :readonly="readonly"
+        :disabled="isDisabled"
+        :aria-invalid="isInvalid || undefined"
+        class="form-control"
+        :class="[sizeClass, { 'is-invalid': isInvalid }]"
+        @input="emit('input', model, $event)"
+        @change="emitChange(model, $event)"
+        @focus="$emit('focus', $event)"
+        @blur="$emit('blur', $event)"
+    />
+</template>