inertia-bootstrap-forms 2.1.20 → 3.0.0

package/package.json

@@ -1,70 +1,89 @@
-{
-    "name": "inertia-bootstrap-forms",
-    "version": "2.1.20",
-    "description": "Create bootstrap forms with inertia and twitter bootstrap",
-    "main": "dist/inertia-bootstrap-forms.cjs.js",
-    "module": "dist/inertia-bootstrap-forms.es.js",
-    "type": "module",
-    "types": "./index.d.ts",
-    "scripts": {
-        "dev": "vite build --watch",
-        "build": "vite build"
-    },
-    "files": [
-        "dist",
-        "src",
-        "index.d.ts"
-    ],
-    "exports": {
-        ".": {
-            "import": "./dist/inertia-bootstrap-forms.es.js"
-        },
-        "./dist/*.css": {
-            "import": "./dist/style.css"
-        }
-    },
-    "author": "NovinVision",
-    "license": "MIT",
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/novinvision/inertia-bootstrap-forms.git"
-    },
-    "keywords": [
-        "inertia",
-        "vue",
-        "laravel",
-        "bootstrap",
-        "forms"
-    ],
-    "dependencies": {
-        "@tinymce/tinymce-vue": "^6.1.0",
-        "@uppy/audio": "^3.1.0",
-        "@uppy/core": "^5.2.0",
-        "@uppy/dashboard": "^5.1.1",
-        "@uppy/drag-drop": "^5.1.0",
-        "@uppy/locales": "^5.1.1",
-        "@uppy/vue": "^3.2.0",
-        "@uppy/xhr-upload": "^5.1.1",
-        "@vitejs/plugin-vue": "^5.2.4",
-        "@vue-leaflet/vue-leaflet": "^0.10.1",
-        "choices.js": "^11.1.0",
-        "svelte-range-slider-pips": "^4.1.0",
-        "vue-tel-input": "^9.3.0",
-        "vue3-bootstrap-components": "^2.0.16",
-        "vue3-persian-datetime-picker": "^1.2.2"
-    },
-    "peerDependencies": {
-        "@inertiajs/vue3": ">3.0",
-        "dropzone": "^6.0.0-beta.2",
-        "vue": "^3.0"
-    },
-    "devDependencies": {
-        "dropzone": "^6.0.0-beta.2",
-        "sass-embedded": "^1.89.2",
-        "vite": "^5"
-    },
-    "bugs": {
-        "url": "https://github.com/novinvision/inertia-bootstrap-forms/issues"
-    },
-    "homepage": "https://github.com/novinvision/inertia-bootstrap-forms#readme"
-}
+{
+    "name": "inertia-bootstrap-forms",
+    "version": "3.0.0",
+    "description": "Bootstrap 6 form components for Vue 3 + Inertia.js (Laravel). Every field is bound to a single FormContainer v-model.",
+    "type": "module",
+    "main": "dist/inertia-bootstrap-forms.cjs.js",
+    "module": "dist/inertia-bootstrap-forms.es.js",
+    "types": "./index.d.ts",
+    "sideEffects": false,
+    "scripts": {
+        "dev": "vite build --watch",
+        "build": "vite build",
+        "test": "vitest run"
+    },
+    "files": [
+        "dist",
+        "src",
+        "index.d.ts",
+        "README.md",
+        "README.fa.md"
+    ],
+    "exports": {
+        ".": {
+            "types": "./index.d.ts",
+            "import": "./dist/inertia-bootstrap-forms.es.js",
+            "require": "./dist/inertia-bootstrap-forms.cjs.js"
+        },
+        "./src/*": "./src/*",
+        "./package.json": "./package.json"
+    },
+    "author": "NovinVision",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/novinvision/inertia-bootstrap-forms.git"
+    },
+    "keywords": [
+        "inertia",
+        "vue",
+        "laravel",
+        "bootstrap",
+        "bootstrap6",
+        "forms",
+        "combobox",
+        "chips",
+        "otp"
+    ],
+    "dependencies": {
+        "@tinymce/tinymce-vue": "^6.1.0",
+        "@uppy/core": "^5.2.0",
+        "@uppy/vue": "^3.2.0",
+        "@uppy/xhr-upload": "^5.1.1",
+        "@vue-leaflet/vue-leaflet": "^0.10.1",
+        "vue-tel-input": "^9.3.0",
+        "vue3-persian-datetime-picker": "^1.2.2"
+    },
+    "peerDependencies": {
+        "@floating-ui/dom": "^1.7.6",
+        "@inertiajs/vue3": ">=2.0.0",
+        "bootstrap": "^6.0.0-alpha.1",
+        "dropzone": "^6.0.0-beta.2",
+        "leaflet": "^1.9.0",
+        "vue": "^3.3.0"
+    },
+    "peerDependenciesMeta": {
+        "dropzone": {
+            "optional": true
+        },
+        "leaflet": {
+            "optional": true
+        }
+    },
+    "devDependencies": {
+        "@floating-ui/dom": "^1.7.6",
+        "@inertiajs/vue3": "^2.0.0",
+        "@vitejs/plugin-vue": "^5.2.4",
+        "@vue/test-utils": "^2.4.6",
+        "bootstrap": "6.0.0-alpha.1",
+        "dropzone": "^6.0.0-beta.2",
+        "jsdom": "^25.0.0",
+        "vite": "^5",
+        "vitest": "^2.1.0",
+        "vue": "^3.5.0"
+    },
+    "bugs": {
+        "url": "https://github.com/novinvision/inertia-bootstrap-forms/issues"
+    },
+    "homepage": "https://github.com/novinvision/inertia-bootstrap-forms#readme"
+}

package/src/AmountInput.vue

@@ -1,86 +1,91 @@
 <script>
-import {InputGroup, InputGroupText} from 'vue3-bootstrap-components';
-import {computed, defineComponent, inject} from "vue";
+import { computed, defineComponent } from 'vue';
+import { fieldProps, useField } from './composables/useField.js';
+import { useI18n } from './i18n.js';
+import { formatNumber, parseDigits, toEnglishDigits } from './utils/digits.js';
 
+/** Integer input with thousands separators and a unit (Bootstrap 6 `.input-group`). */
 export default defineComponent({
-  components: {InputGroup, InputGroupText},
-  props: {
-    name: {
-      type: String,
-      required: true,
+    name: 'AmountInput',
+    emits: ['update:modelValue', 'change', 'input', 'focus', 'blur'],
+    props: {
+        ...fieldProps,
+        placeholder: { type: String, default: null },
+        unit: { type: String, default: null },
+        min: { type: Number, default: null },
+        max: { type: Number, default: null },
+        inputClass: { type: [String, Array, Object], default: null },
+        size: { type: String, default: null },
+        locale: { type: String, default: null },
     },
-    required: Boolean,
-    disabled: Boolean,
-    readonly: Boolean,
-    inputClass: String,
-    placeholder: {
-      type: String,
-      default: 'عدد را وارد کنید'
-    },
-    unit: {
-      type: String,
-      default: 'عدد'
-    },
-  },
-  setup(props) {
-    let form = inject('form', {
-      errors: {},
-      getID(name) {
-        return name;
-      }
-    });
-    let group = inject('group', {});
+    setup(props, { emit }) {
+        const field = useField(props, emit);
+        const { t } = useI18n(() => props.locale);
 
-    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;
-        }
-      }
-    });
+        const displayValue = computed(() => formatNumber(field.model.value));
+        const unitText = computed(() => props.unit ?? t('amount.unit'));
+        const sizeClass = computed(() => (props.size ? `form-control-${props.size}` : null));
+
+        function onInput(event) {
+            const el = event.target;
+            const before = el.value.slice(0, el.selectionStart ?? 0);
+            const digitsBefore = toEnglishDigits(before).replace(/\D/g, '').length;
+
+            const parsed = parseDigits(el.value);
+            field.model.value = parsed;
 
-    const persianDigits = '۰۱۲۳۴۵۶۷۸۹';
-    const arabicDigits = '٠١٢٣٤٥٦٧٨٩';
-    function toEnglishDigits(str) {
-      return String(str).replace(/[۰-۹٠-٩]/g, (ch) => {
-        const pIndex = persianDigits.indexOf(ch);
-        if (pIndex !== -1) return pIndex;
-        return arabicDigits.indexOf(ch);
-      });
-    }
+            // Re-format immediately and keep the caret after the same number of digits
+            const formatted = formatNumber(parsed);
+            el.value = formatted;
+            let pos = 0;
+            let seen = 0;
+            while (pos < formatted.length && seen < digitsBefore) {
+                if (/\d/.test(formatted[pos])) seen++;
+                pos++;
+            }
+            if (document.activeElement === el) el.setSelectionRange(pos, pos);
 
-    const displayValue = computed({
-      get() {
-        const raw = modelValue.value;
-        if (raw === null || raw === undefined || raw === '') return '';
-        return Number(raw).toLocaleString('en-US');
-      },
-      set(value) {
-        const digitsOnly = toEnglishDigits(value).replace(/\D/g, '');
-        modelValue.value = digitsOnly === '' ? null : parseInt(digitsOnly, 10);
-      }
-    });
+            emit('input', parsed, event);
+        }
+
+        function clamp(event) {
+            let v = field.model.value;
+            if (v !== null && v !== undefined) {
+                if (props.max !== null && v > props.max) v = props.max;
+                if (props.min !== null && v < props.min) v = props.min;
+                if (v !== field.model.value) field.model.value = v;
+            }
+            field.emitChange(v, event);
+        }
 
-    return {modelValue, displayValue, form, group};
-  },
-})
+        return { ...field, displayValue, unitText, sizeClass, onInput, clamp, t };
+    },
+});
 </script>
+
 <template>
-  <InputGroup>
-    <input
-        :name="name"
-        v-model="displayValue"
-        :class="['form-control fanum', inputClass, {'is-invalid': form.errors[name]}]"
-        :disabled="disabled || form.processing"
-        :readonly="readonly"
-        :placeholder="placeholder"
-        type="tel">
-    <InputGroupText class="fanum">{{ unit }}</InputGroupText>
-    <slot name="suffix"/>
-  </InputGroup>
-</template>
+    <div class="input-group" :class="{ 'is-invalid': isInvalid }">
+        <slot name="prefix" />
+        <input
+            :name="name"
+            :id="inputId"
+            :value="displayValue"
+            :placeholder="placeholder ?? t('amount.placeholder')"
+            :required="required"
+            :readonly="readonly"
+            :disabled="isDisabled"
+            :aria-invalid="isInvalid || undefined"
+            type="tel"
+            inputmode="numeric"
+            autocomplete="off"
+            class="form-control fanum"
+            :class="[sizeClass, inputClass, { 'is-invalid': isInvalid }]"
+            @input="onInput"
+            @change="clamp"
+            @focus="$emit('focus', $event)"
+            @blur="$emit('blur', $event)"
+        />
+        <span v-if="unitText" class="input-group-text fanum">{{ unitText }}</span>
+        <slot name="suffix" />
+    </div>
+</template>

package/src/CaptchaInput.vue

@@ -1,106 +1,105 @@
 <script>
-import TextInput from "./TextInput.vue";
-import {defineComponent} from "vue";
+import { defineComponent, onMounted, ref, watch } from 'vue';
+import { fieldProps, useField } from './composables/useField.js';
+import { useDisposables } from './composables/useDisposables.js';
+import { useI18n } from './i18n.js';
 
+/** Captcha image + input + refresh button. The image is refreshed after every finished submit. */
 export default defineComponent({
-    components: {TextInput},
+    name: 'CaptchaInput',
+    emits: ['update:modelValue', 'change', 'input', 'refresh'],
     props: {
-        name: {
-            type: String,
-            default: 'captcha',
-            required: false,
-        },
-        url: {
-            type: String,
-            default: '/captcha/default',
-            required: false,
-        },
-        modelValue: '',
-        required: Boolean,
-        placeholder: {
-            default: 'کد امنیتی روبرو را وارد کنید',
-        },
+        ...fieldProps,
+        name: { type: String, default: 'captcha' },
+        /** Endpoint that returns the captcha image. */
+        url: { type: String, default: '/captcha/default' },
+        placeholder: { type: String, default: null },
+        /** Reload the image (and clear the input) when a submit finishes. */
+        refreshOnSubmit: { type: Boolean, default: true },
+        imageWidth: { type: [Number, String], default: 82 },
+        imageHeight: { type: [Number, String], default: 38 },
+        locale: { type: String, default: null },
     },
-    emits: ['update:modelValue'],
-    inject: ['form'],
-    watch: {
-        'form.processing': {
-            handler: function (val, old) {
-                if (val !== old && !val) {
-                    this.getSrc();
-                    this.emptyField();
-                }
-            },
-            deep: false,
-            immediate: false,
+    setup(props, { emit, expose }) {
+        const field = useField(props, emit);
+        const { t } = useI18n(() => props.locale);
+        const d = useDisposables();
+
+        const src = ref(null);
+        const loading = ref(true);
+
+        function refresh() {
+            loading.value = true;
+            src.value = `${props.url}${props.url.includes('?') ? '&' : '?'}t=${Date.now()}`;
+            d.timeout(() => {
+                loading.value = false;
+            }, 500);
+            emit('refresh');
         }
-    },
-    methods: {
-        emptyField() {
-            if (this.form) {
-                this.form[this.name] = null;
+
+        onMounted(refresh);
+
+        watch(
+            () => field.form.value?.processing,
+            (now, before) => {
+                if (props.refreshOnSubmit && before && !now) {
+                    field.model.value = null;
+                    refresh();
+                }
             }
-        },
-        async getSrc() {
-            this.loading = true;
-            this.src = this.url + '?t=' + Math.random();
+        );
 
-            let _this = this;
-            setTimeout(function () {
-                _this.loading = false;
-            }, 500)
-        }
+        expose({ refresh });
+
+        return { ...field, t, src, loading, refresh };
     },
-    data() {
-        return {
-            loading: false,
-            src: this.url + Math.random(),
-        };
-    }
 });
-
 </script>
+
 <template>
-    <div class="input-group captcha">
-        <TextInput
+    <div class="input-group captcha" :class="{ 'is-invalid': isInvalid }">
+        <input
+            v-model="model"
             :name="name"
-            class="text-start"
-            type="tel"/>
-        <img
-            :src="src"
-            alt="captcha"
-            @click="getSrc"
-            v-if="!loading"
-            class="captcha-holder">
-        <div class="placeholder-wave captcha-holder" v-else>
-            <div class="placeholder w-100 h-100"></div>
-        </div>
+            :id="inputId"
+            type="text"
+            inputmode="numeric"
+            autocomplete="off"
+            :placeholder="placeholder ?? t('captcha.placeholder')"
+            :required="required"
+            :readonly="readonly"
+            :disabled="isDisabled"
+            :aria-invalid="isInvalid || undefined"
+            class="form-control text-start"
+            :class="{ 'is-invalid': isInvalid }"
+            @input="$emit('input', model, $event)"
+            @change="emitChange(model, $event)"
+        />
+        <span class="input-group-text p-0 overflow-hidden" :style="{ width: imageWidth + 'px', height: 'auto' }">
+            <img
+                v-if="src && !loading"
+                :src="src"
+                :alt="t('captcha.alt')"
+                :width="imageWidth"
+                :height="imageHeight"
+                class="captcha-holder"
+                :style="{ cursor: 'pointer', objectFit: 'contain' }"
+                @click="refresh"
+            />
+            <span v-else class="placeholder-wave w-100" aria-hidden="true">
+                <span class="placeholder w-100" :style="{ height: imageHeight + 'px' }"></span>
+            </span>
+        </span>
         <button
             type="button"
-            :disabled="form.processing || loading"
-            @click="getSrc"
-            class="btn btn-secondary border-0">
-            <i class="fal fa-sync-alt align-middle"></i>
+            class="btn-outline theme-secondary btn-icon"
+            :disabled="isDisabled || loading"
+            :aria-label="t('captcha.refresh')"
+            @click="refresh"
+        >
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <path d="M13.5 3v3.5H10M2.5 13V9.5H6" /><path d="M3.2 6.5A5.5 5.5 0 0 1 13 6.5M12.8 9.5A5.5 5.5 0 0 1 3 9.5" />
+            </svg>
         </button>
     </div>
 </template>
-<style>
-.captcha .captcha-holder {
-    cursor: pointer;
-    width: 82px;
-    height: 43px;
-    object-fit: contain;
-    border-top: 1px solid var(--bs-border-color, #eeeeee);
-    border-bottom: 1px solid var(--bs-border-color, #eeeeee);
-}
-
-.input-group-lg.captcha .captcha-holder {
-    width: 100px;
-    height: auto;
-}
-
-.captcha .btn-refresh {
-    background-color: var(--bs-body-bg, #ffffff);
-    border-color: var(--bs-border-color, #eeeeee) !important;
-}
-</style>

package/src/CheckboxButtonInput.vue

@@ -1,69 +1,56 @@
-<script>
-import {defineComponent, inject} from "vue";
-
-export default defineComponent({
-    emits: ['change'],
-    props: {
-        name: {
-            type: String,
-            required: true,
-        },
-        id: {
-            type: String,
-            default: '',
-            required: false,
-        },
-        value: {
-            type: String,
-            default: 'yes',
-            required: false,
-        },
-        type: {
-            type: String,
-            default: 'radio',
-            required: false,
-        },
-    },
-    methods:{
-        change(e){
-            this.$emit('change', e);
-        }
-    },
-    setup(props) {
-        let form = inject('form');
-
-        if (form === undefined) {
-            form = {
-                errors: {},
-                getID(name) {
-                    return name;
-                }
-            };
-        }
-
-        return {form};
-    },
-})
-</script>
-<template>
-    <label class="btn-label" :for="form.getID(name)+(id || value)" :class="{'active': (form[name] === value || form[name] === true)}">
-        <input
-            :name="name"
-            :id="form.getID(name)+(id || value)"
-            v-model="form[name]"
-            :class="{'is-invalid': form?.errors[name]}"
-            :disabled="form?.processing"
-            :type="type"
-            :value="value"
-            @change="change"
-            autocomplete="off"
-            class="btn-check">
-        <slot/>
-    </label>
-</template>
-<style>
-.btn-label:not(.active){
-    --bs-bg-opacity: .3;
-    opacity: .6;
-}
-</style>
+<script>
+import { defineComponent, ref } from 'vue';
+import { fieldProps, useField } from './composables/useField.js';
+import { useChoice } from './composables/useChoice.js';
+
+/** Toggle button (Bootstrap 6 `.btn-check`): the input is nested inside the label. */
+export default defineComponent({
+    name: 'CheckboxButtonInput',
+    emits: ['update:modelValue', 'change', 'focus', 'blur'],
+    props: {
+        ...fieldProps,
+        type: { type: String, default: 'radio', 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 },
+        /** solid | outline | subtle | text | styled */
+        variant: { type: String, default: 'outline' },
+        theme: { type: String, default: 'primary' },
+    },
+    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>
+    <label
+        class="btn-check"
+        :class="[`btn-${variant}`, `theme-${theme}`, { 'is-invalid': isInvalid, disabled: isDisabled }]"
+    >
+        <input
+            ref="input"
+            v-model="model"
+            :name="name"
+            :type="type"
+            :value="value"
+            :true-value="trueValue"
+            :false-value="falseValue"
+            :required="required"
+            :disabled="isDisabled"
+            :aria-invalid="isInvalid || undefined"
+            autocomplete="off"
+            :class="{ 'is-invalid': isInvalid }"
+            @change="onChange"
+            @focus="$emit('focus', $event)"
+            @blur="$emit('blur', $event)"
+        />
+        <slot />
+    </label>
+</template>