inertia-bootstrap-forms 2.1.20 → 3.0.0

package/src/composables/useChoice.js

@@ -0,0 +1,34 @@
+import { onMounted, watch } from 'vue';
+
+/**
+ * Shared behaviour of checkbox / radio / switch style fields:
+ *  - the `checked` prop initialises the model when it is still empty
+ *  - the `indeterminate` DOM property is kept in sync
+ */
+export function useChoice(props, field, elRef, { type = () => props.type } = {}) {
+    function applyInitialChecked() {
+        if (!props.checked) return;
+        const current = field.model.value;
+
+        if (type() === 'radio') {
+            if (current === null || current === undefined || current === '') field.model.value = props.value;
+        } else if (Array.isArray(current)) {
+            if (!current.includes(props.value)) field.model.value = [...current, props.value];
+        } else if (!current) {
+            field.model.value = props.trueValue !== undefined ? props.trueValue : true;
+        }
+    }
+
+    function syncIndeterminate() {
+        if (elRef.value) elRef.value.indeterminate = !!props.indeterminate;
+    }
+
+    onMounted(() => {
+        applyInitialChecked();
+        syncIndeterminate();
+    });
+
+    watch(() => props.indeterminate, syncIndeterminate);
+
+    return { applyInitialChecked };
+}

package/src/composables/useDisposables.js

@@ -0,0 +1,59 @@
+import { onBeforeUnmount } from 'vue';
+
+/**
+ * Tracks every resource a component acquires after mount (DOM listeners,
+ * timers, abort controllers, third-party instances) and releases all of them
+ * in reverse order when the component unmounts.
+ */
+export function useDisposables() {
+    const tasks = [];
+    let disposed = false;
+
+    const add = (fn) => {
+        if (disposed) {
+            try { fn(); } catch (e) { /* noop */ }
+            return () => {};
+        }
+        tasks.push(fn);
+        return () => {
+            const i = tasks.indexOf(fn);
+            if (i !== -1) tasks.splice(i, 1);
+        };
+    };
+
+    const listen = (target, type, handler, options) => {
+        if (!target) return () => {};
+        target.addEventListener(type, handler, options);
+        return add(() => target.removeEventListener(type, handler, options));
+    };
+
+    const timeout = (fn, ms) => {
+        const id = setTimeout(fn, ms);
+        add(() => clearTimeout(id));
+        return id;
+    };
+
+    const abortable = () => {
+        const controller = new AbortController();
+        add(() => controller.abort());
+        return controller;
+    };
+
+    const dispose = () => {
+        disposed = true;
+        while (tasks.length) {
+            try { tasks.pop()(); } catch (e) { /* keep releasing the rest */ }
+        }
+    };
+
+    onBeforeUnmount(dispose);
+
+    return {
+        add,
+        listen,
+        timeout,
+        abortable,
+        dispose,
+        isDisposed: () => disposed,
+    };
+}

package/src/composables/useField.js

@@ -0,0 +1,121 @@
+import { computed, inject, ref, watch } from 'vue';
+import * as Vue from 'vue';
+
+let fallbackUid = 0;
+
+/**
+ * Props shared by every field component.
+ * Spread them into a component: `props: { ...fieldProps, ... }`.
+ */
+export const fieldProps = {
+    /** Key of the field inside the FormContainer's v-model object. */
+    name: { type: String, default: null },
+    /** Standalone v-model (only used when the field is NOT inside a FormContainer). */
+    modelValue: { type: null, default: undefined },
+    id: { type: String, default: null },
+    disabled: { type: Boolean, default: false },
+    readonly: { type: Boolean, default: false },
+    required: { type: Boolean, default: false },
+    /** Force the invalid state. By default it follows the server-side errors of the form. */
+    invalid: { type: Boolean, default: null },
+};
+
+/**
+ * Connects a field to the parent <FormContainer>.
+ *
+ * The value of every field lives in the form object that FormContainer exposes
+ * through its own `v-model`. Fields never need a v-model of their own; when a
+ * field is used outside a FormContainer it falls back to a regular
+ * `v-model` / `update:modelValue` pair.
+ */
+export function useField(props, emit, options = {}) {
+    const formRef = inject('form', null);
+    const groupRef = inject('group', null);
+    const fieldCtx = inject('formField', null);
+    const formApi = inject('formApi', null);
+
+    const form = computed(() => formRef?.value ?? null);
+    const group = computed(() => (groupRef?.value?.name ? groupRef.value : null));
+    const standalone = computed(() => !form.value);
+
+    const local = ref(
+        props.modelValue === undefined ? (options.defaultValue ?? null) : props.modelValue
+    );
+
+    watch(
+        () => props.modelValue,
+        (v) => {
+            if (standalone.value && v !== undefined) local.value = v;
+        }
+    );
+
+    const value = computed({
+        get() {
+            if (standalone.value) return local.value;
+            if (group.value) return group.value.getData(props.name);
+            return form.value[props.name];
+        },
+        set(next) {
+            if (standalone.value) local.value = next;
+            else if (group.value) group.value.setData(props.name, next);
+            else form.value[props.name] = next;
+
+            emit('update:modelValue', next);
+        },
+    });
+
+    const errorKeys = computed(() => {
+        const keys = [];
+        if (group.value) {
+            keys.push(`${group.value.name}.${group.value.index}.${props.name}`);
+            keys.push(`${group.value.name}.${props.name}`);
+        }
+        keys.push(props.name);
+        return keys;
+    });
+
+    const error = computed(() => {
+        const errors = form.value?.errors;
+        if (!errors) return null;
+        for (const key of errorKeys.value) {
+            if (key && errors[key] !== undefined) return errors[key];
+        }
+        return null;
+    });
+
+    const isInvalid = computed(() => props.invalid === true || (props.invalid === null && error.value !== null));
+    const isDisabled = computed(() => props.disabled || !!form.value?.processing);
+
+    const uid = Vue.useId ? Vue.useId() : `ibf-${++fallbackUid}`;
+
+    const inputId = computed(() => {
+        if (props.id) return props.id;
+        if (fieldCtx?.id && !options.valued) return fieldCtx.id;
+
+        if (form.value?.getID && props.name) {
+            return form.value.getID({
+                name: props.name,
+                value: options.valued ? options.valued() : undefined,
+                group: group.value,
+            });
+        }
+
+        return props.name ? `${props.name}-${uid}` : uid;
+    });
+
+    const emitChange = (next, event) => emit('change', next, event);
+
+    return {
+        form,
+        group,
+        standalone,
+        model: value,
+        error,
+        isInvalid,
+        isDisabled,
+        inputId,
+        emitChange,
+        formApi,
+        fieldCtx,
+    };
+}

package/src/composables/useFormApi.js

@@ -0,0 +1,12 @@
+import { inject } from 'vue';
+
+/** Programmatic access to the parent FormContainer: submit(), reset(), form. */
+export function useFormApi() {
+    const form = inject('form', null);
+    const api = inject('formApi', null);
+    return {
+        form: form,
+        submit: (...args) => api?.submit?.(...args),
+        reset: () => api?.reset?.(),
+    };
+}

package/src/i18n.js

@@ -0,0 +1,120 @@
+import { computed, reactive } from 'vue';
+
+const state = reactive({
+    locale: 'auto',
+    messages: {
+        en: {
+            'select.placeholder': 'Select an option…',
+            'select.search': 'Type to search…',
+            'select.noResults': 'No results found',
+            'select.loading': 'Searching…',
+            'select.selectedCount': '{count} selected',
+            'select.clear': '— Clear selection —',
+            'select.error': 'Search failed',
+            'submit.default': 'Submit',
+            'chips.placeholder': 'Type and press Enter…',
+            'chips.remove': 'Remove',
+            'email.placeholder': 'Enter your email',
+            'password.placeholder': 'Enter your password',
+            'password.show': 'Show password',
+            'password.hide': 'Hide password',
+            'mobile.placeholder': 'Enter your mobile number',
+            'amount.placeholder': 'Enter a number',
+            'amount.unit': 'pcs',
+            'quantity.unit': 'pcs',
+            'quantity.increase': 'Increase',
+            'quantity.decrease': 'Decrease',
+            'captcha.placeholder': 'Enter the code shown',
+            'captcha.refresh': 'Refresh code',
+            'captcha.alt': 'captcha',
+            'file.retry': 'Retry',
+            'file.remove': 'Remove',
+            'upload.failed': 'Upload failed',
+            'uppy.types': 'Only {types} files',
+            'uppy.maxFiles': 'up to {count} files',
+            'uppy.minFiles': 'at least {count} files required',
+            'uppy.maxSize': 'max {size} per file',
+            'uppy.minSize': 'min {size} per file',
+            'uppy.maxTotal': 'max {size} in total',
+            'uppy.suffix': 'are allowed.',
+        },
+        fa: {
+            'select.placeholder': 'انتخاب کنید…',
+            'select.search': 'برای جستجو تایپ کنید…',
+            'select.noResults': 'نتیجه‌ای یافت نشد',
+            'select.loading': 'در حال جستجو…',
+            'select.selectedCount': '{count} مورد انتخاب شده',
+            'select.clear': '— پاک کردن انتخاب —',
+            'select.error': 'جستجو با خطا مواجه شد',
+            'submit.default': 'تایید و ثبت اطلاعات',
+            'chips.placeholder': 'تایپ کنید و Enter بزنید…',
+            'chips.remove': 'حذف',
+            'email.placeholder': 'ایمیل خود را وارد کنید',
+            'password.placeholder': 'گذرواژه خود را وارد کنید',
+            'password.show': 'نمایش گذرواژه',
+            'password.hide': 'مخفی کردن گذرواژه',
+            'mobile.placeholder': 'موبایل خود را وارد کنید',
+            'amount.placeholder': 'عدد را وارد کنید',
+            'amount.unit': 'عدد',
+            'quantity.unit': 'عدد',
+            'quantity.increase': 'افزایش',
+            'quantity.decrease': 'کاهش',
+            'captcha.placeholder': 'کد امنیتی روبرو را وارد کنید',
+            'captcha.refresh': 'کد جدید',
+            'captcha.alt': 'کد امنیتی',
+            'file.retry': 'تلاش مجدد',
+            'file.remove': 'حذف',
+            'upload.failed': 'خطا در آپلود',
+            'uppy.types': 'فقط فایل‌های {types}',
+            'uppy.maxFiles': 'امکان انتخاب حداکثر {count} فایل',
+            'uppy.minFiles': 'حداقل {count} فایل نیاز است',
+            'uppy.maxSize': 'با حداکثر حجم {size} برای هر فایل',
+            'uppy.minSize': 'با حداقل حجم {size} برای هر فایل',
+            'uppy.maxTotal': 'و مجموع حجم کل حداکثر {size}',
+            'uppy.suffix': 'مجاز است.',
+        },
+    },
+});
+
+/**
+ * Global i18n configuration.
+ *   configureI18n({ locale: 'fa' })
+ *   configureI18n({ messages: { fa: { 'select.noResults': '...' } } })
+ */
+export function configureI18n({ locale, messages } = {}) {
+    if (locale) state.locale = locale;
+    if (messages) {
+        Object.keys(messages).forEach((lang) => {
+            state.messages[lang] = { ...(state.messages[lang] || {}), ...messages[lang] };
+        });
+    }
+}
+
+function detectLocale() {
+    if (typeof document !== 'undefined') {
+        const root = document.documentElement;
+        if (root?.dir === 'rtl' || root?.getAttribute('lang')?.startsWith('fa')) return 'fa';
+    }
+    return 'en';
+}
+
+/**
+ * `localeRef` may be a prop getter. Returns `t(key, vars)`.
+ */
+export function useI18n(getLocale = () => null) {
+    const locale = computed(() => {
+        const requested = getLocale() || state.locale;
+        return requested === 'auto' ? detectLocale() : requested;
+    });
+
+    const t = (key, vars = {}) => {
+        const dict = state.messages[locale.value] || state.messages.en;
+        let text = dict[key] ?? state.messages.en[key] ?? key;
+        Object.keys(vars).forEach((k) => {
+            text = text.replace(new RegExp(`\\{${k}\\}`, 'g'), vars[k]);
+        });
+        return text;
+    };
+
+    return { t, locale };
+}

package/src/index.js

@@ -1,61 +1,142 @@
-import AmountInput from "./AmountInput.vue";
-import CaptchaInput from "./CaptchaInput.vue";
-import CheckboxButtonInput from "./CheckboxButtonInput.vue";
-import CheckboxInput from "./CheckboxInput.vue";
-import CheckboxToggle from "./CheckboxToggle.vue";
-import SwitchInput from "./SwitchInput.vue";
-import PersianDatePickerInput from "./PersianDatePickerInput.vue";
-import EditorInput from "./EditorInput.vue";
-import FileInput from "./FileInput.vue";
-import EmailInput from "./EmailInput.vue";
-import GroupControl from "./GroupControl.vue";
-import FormContainer from "./FormContainer.vue";
-import FormLabel from "./FormLabel.vue";
-import LocationInput from "./LocationInput.vue";
-import MobileInput from "./MobileInput.vue";
-import PasswordInput from "./PasswordInput.vue";
-import QuantityInput from "./QuantityInput.vue";
-import MultiQuantityInput from "./MultiQuantityInput.vue";
-import Select2Input from "./Select2Input.vue";
-import StarRatingInput from "./StarRatingInput.vue";
-import SubmitButton from "./SubmitButton.vue";
-import TelInput from "./TelInput.vue";
-import TextAreaInput from "./TextAreaInput.vue";
-import TextInput from "./TextInput.vue";
-import OTPInput from "./OTPInput.vue";
-import DropzoneInput from "./DropzoneInput.vue";
-import SimpleUploader from "./SimpleUploader.vue";
-import RangeSliderInput from "./RangeSliderInput.vue";
-import UppyInput from "./UppyInput.vue";
+import AmountInput from './AmountInput.vue';
+import CaptchaInput from './CaptchaInput.vue';
+import CheckboxButtonInput from './CheckboxButtonInput.vue';
+import CheckboxInput from './CheckboxInput.vue';
+import CheckboxToggle from './CheckboxToggle.vue';
+import ChipsInput from './ChipsInput.vue';
+import ComboboxInput from './ComboboxInput.vue';
+import DropzoneInput from './DropzoneInput.vue';
+import EditorInput from './EditorInput.vue';
+import EmailInput from './EmailInput.vue';
+import FileInput from './FileInput.vue';
+import FormAdornInput from './FormAdornInput.vue';
+import FormContainer from './FormContainer.vue';
+import FormField from './FormField.vue';
+import FormLabel from './FormLabel.vue';
+import GroupControl from './GroupControl.vue';
+import LocationInput from './LocationInput.vue';
+import MobileInput from './MobileInput.vue';
+import MultiQuantityInput from './MultiQuantityInput.vue';
+import OTPInput from './OTPInput.vue';
+import PasswordInput from './PasswordInput.vue';
+import PersianDatePickerInput from './PersianDatePickerInput.vue';
+import QuantityInput from './QuantityInput.vue';
+import RangeInput from './RangeInput.vue';
+import SimpleUploader from './SimpleUploader.vue';
+import StarRatingInput from './StarRatingInput.vue';
+import SubmitButton from './SubmitButton.vue';
+import SwitchInput from './SwitchInput.vue';
+import TelInput from './TelInput.vue';
+import TextAreaInput from './TextAreaInput.vue';
+import TextInput from './TextInput.vue';
+import UppyInput from './UppyInput.vue';
 
-export {
+import { configureBootstrap } from './utils/bootstrap.js';
+import { configureI18n } from './i18n.js';
+
+/** Backwards compatible names (v2 → v3). */
+const Select2Input = ComboboxInput;
+const RangeSliderInput = RangeInput;
+const FormAdorn = FormAdornInput;
+
+const components = {
     AmountInput,
     CaptchaInput,
     CheckboxButtonInput,
     CheckboxInput,
     CheckboxToggle,
-    SwitchInput,
-    FileInput,
+    ChipsInput,
+    ComboboxInput,
+    DropzoneInput,
+    EditorInput,
     EmailInput,
+    FileInput,
+    FormAdornInput,
+    FormContainer,
+    FormField,
+    FormLabel,
+    GroupControl,
+    LocationInput,
+    MobileInput,
+    MultiQuantityInput,
+    OTPInput,
+    PasswordInput,
     PersianDatePickerInput,
-    EditorInput,
-    DropzoneInput,
+    QuantityInput,
+    RangeInput,
     SimpleUploader,
-    RangeSliderInput,
+    StarRatingInput,
+    SubmitButton,
+    SwitchInput,
+    TelInput,
+    TextAreaInput,
+    TextInput,
     UppyInput,
-    GroupControl,
+    // aliases
+    Select2Input,
+    RangeSliderInput,
+    FormAdorn,
+};
+
+/**
+ * Optional global registration:
+ *   app.use(InertiaBootstrapForms, { locale: 'fa', bootstrap: { Combobox, Chips, OtpInput, Range, Menu } })
+ */
+const plugin = {
+    install(app, options = {}) {
+        if (options.locale || options.messages) configureI18n(options);
+        if (options.bootstrap) configureBootstrap(options.bootstrap);
+
+        Object.entries(components).forEach(([name, component]) => app.component(name, component));
+    },
+};
+
+export default plugin;
+
+export {
+    AmountInput,
+    CaptchaInput,
+    CheckboxButtonInput,
+    CheckboxInput,
+    CheckboxToggle,
+    ChipsInput,
+    ComboboxInput,
+    DropzoneInput,
+    EditorInput,
+    EmailInput,
+    FileInput,
+    FormAdornInput,
     FormContainer,
+    FormField,
+    FormLabel,
+    GroupControl,
     LocationInput,
     MobileInput,
+    MultiQuantityInput,
+    OTPInput,
     PasswordInput,
+    PersianDatePickerInput,
     QuantityInput,
-    MultiQuantityInput,
-    SubmitButton,
+    RangeInput,
+    SimpleUploader,
     StarRatingInput,
-    Select2Input,
-    FormLabel,
+    SubmitButton,
+    SwitchInput,
     TelInput,
     TextAreaInput,
     TextInput,
-    OTPInput,
-}
+    UppyInput,
+    // aliases
+    Select2Input,
+    RangeSliderInput,
+    FormAdorn,
+};
+
+export { configureBootstrap } from './utils/bootstrap.js';
+export { configureI18n } from './i18n.js';
+export { fieldProps, useField } from './composables/useField.js';
+export { useFormApi } from './composables/useFormApi.js';
+export { useDisposables } from './composables/useDisposables.js';
+export { useBsInstance } from './composables/useBsInstance.js';
+export { toEnglishDigits } from './utils/digits.js';
+export { default as countryCodes } from './countryCodes.js';

package/src/utils/bootstrap.js

@@ -0,0 +1,48 @@
+/**
+ * Lazy loader for Bootstrap 6 JavaScript plugins.
+ *
+ * Plugins are imported on demand (inside `onMounted`), which keeps the package
+ * SSR-safe and lets bundlers code-split every plugin. If your application
+ * already imports Bootstrap (or you want to pin a specific build) you can hand
+ * the classes over with `configureBootstrap({ Combobox, Chips, OtpInput, Range, Menu })`.
+ */
+const overrides = {};
+const cache = new Map();
+
+const loaders = {
+    Combobox: () => import('bootstrap/js/dist/combobox.js'),
+    Menu: () => import('bootstrap/js/dist/menu.js'),
+    Strength: () => import('bootstrap/js/dist/strength.js'),
+    Chips: () => import('bootstrap/js/dist/chips.js'),
+    OtpInput: () => import('bootstrap/js/dist/otp-input.js'),
+    Range: () => import('bootstrap/js/dist/range.js'),
+};
+
+export function configureBootstrap(modules = {}) {
+    Object.assign(overrides, modules);
+    cache.clear();
+}
+
+export function loadBootstrap(name) {
+    if (overrides[name]) {
+        return Promise.resolve(overrides[name]);
+    }
+
+    if (!loaders[name]) {
+        return Promise.reject(new Error(`[inertia-bootstrap-forms] Unknown Bootstrap plugin "${name}"`));
+    }
+
+    if (!cache.has(name)) {
+        cache.set(
+            name,
+            loaders[name]()
+                .then((mod) => mod.default ?? mod[name])
+                .catch((error) => {
+                    cache.delete(name);
+                    throw error;
+                })
+        );
+    }
+
+    return cache.get(name);
+}

package/src/utils/digits.js

@@ -0,0 +1,21 @@
+const PERSIAN = '۰۱۲۳۴۵۶۷۸۹';
+const ARABIC = '٠١٢٣٤٥٦٧٨٩';
+
+/** Converts Persian / Arabic-Indic digits to ASCII digits. */
+export function toEnglishDigits(input) {
+    return String(input ?? '').replace(/[۰-۹٠-٩]/g, (ch) => {
+        const p = PERSIAN.indexOf(ch);
+        return p !== -1 ? String(p) : String(ARABIC.indexOf(ch));
+    });
+}
+
+export function formatNumber(value) {
+    if (value === null || value === undefined || value === '') return '';
+    const n = Number(value);
+    return Number.isNaN(n) ? '' : n.toLocaleString('en-US');
+}
+
+export function parseDigits(text) {
+    const digits = toEnglishDigits(text).replace(/\D/g, '');
+    return digits === '' ? null : parseInt(digits, 10);
+}

package/src/utils/http.js

@@ -0,0 +1,15 @@
+/** Default headers for same-origin Laravel endpoints (Accept JSON + XSRF cookie). */
+export function laravelHeaders(extra = {}) {
+    const headers = {
+        Accept: 'application/json',
+        'X-Requested-With': 'XMLHttpRequest',
+        ...extra,
+    };
+
+    if (typeof document !== 'undefined') {
+        const match = document.cookie.match(/(?:^|;\s*)XSRF-TOKEN=([^;]+)/);
+        if (match && !headers['X-XSRF-TOKEN']) headers['X-XSRF-TOKEN'] = decodeURIComponent(match[1]);
+    }
+
+    return headers;
+}