inertia-bootstrap-forms 2.1.20 → 3.0.0

package/src/FileInput.vue

@@ -1,204 +1,214 @@
 <script>
-import {defineComponent, inject} from "vue";
-
+import { defineComponent, reactive, ref, watch } from 'vue';
+import { fieldProps, useField } from './composables/useField.js';
+import { useDisposables } from './composables/useDisposables.js';
+import { useI18n } from './i18n.js';
+import { laravelHeaders } from './utils/http.js';
+
+let counter = 0;
+
+/**
+ * File input that uploads every selected file immediately to `endpoint` (XMLHttpRequest, with progress)
+ * and stores the returned path(s) in the form.
+ *
+ * Endpoint contract: POST multipart `file` → JSON `{ data: { path } }` (or `{ path }`);
+ *                    DELETE with the raw `path` as request body.
+ */
 export default defineComponent({
+    name: 'FileInput',
+    emits: ['update:modelValue', 'change', 'added', 'progress', 'uploaded', 'error', 'removed'],
     props: {
-        modelValue: '',
-        name: {
-            type: String,
-            required: true,
-        },
-        multiple: {
-            type: Boolean,
-            default: false,
-        },
-        endpoint: {
-            type: String,
-            default: '/upload',
-        },
+        ...fieldProps,
+        multiple: { type: Boolean, default: false },
+        endpoint: { type: String, default: '/upload' },
+        accept: { type: String, default: null },
+        headers: { type: Object, default: () => ({}) },
+        /** Name of the multipart field. */
+        fieldName: { type: String, default: 'file' },
+        locale: { type: String, default: null },
     },
-    setup(props) {
-        let form = inject('form');
+    setup(props, { emit, expose }) {
+        const field = useField(props, emit);
+        const { t } = useI18n(() => props.locale);
+        const d = useDisposables();
+
+        const input = ref(null);
+        const files = ref([]);
+        const requests = new Map();
+
+        d.add(() => {
+            requests.forEach((xhr) => xhr.abort());
+            requests.clear();
+            if (field.form.value) field.form.value.uploading = null;
+        });
+
+        const paths = () => files.value.filter((f) => f.path).map((f) => f.path);
+
+        function publish(event) {
+            const next = props.multiple ? paths() : (paths()[0] ?? null);
+            field.model.value = next;
+            field.emitChange(next, event);
+        }
+
+        function updateProgress() {
+            const form = field.form.value;
+            if (!form) return;
+            const active = files.value.filter((f) => f.uploading);
+            form.uploading = active.length ? Math.min(99, Math.round(active.reduce((s, f) => s + f.percent, 0) / active.length)) : null;
+        }
 
-        if (form === undefined) {
-            form = {
-                errors: {},
-                getID(name) {
+        function upload(item) {
+            item.error = '';
+            item.percent = 0;
+            item.uploading = true;
+            updateProgress();
+
+            const body = new FormData();
+            body.append(props.fieldName, item.file);
+
+            const xhr = new XMLHttpRequest();
+            requests.set(item.id, xhr);
+            xhr.open('POST', props.endpoint);
+            Object.entries(laravelHeaders(props.headers)).forEach(([k, v]) => xhr.setRequestHeader(k, v));
+
+            xhr.upload.onprogress = (e) => {
+                if (e.lengthComputable) {
+                    item.percent = Math.round((e.loaded / e.total) * 100);
+                    emit('progress', item, item.percent);
+                    updateProgress();
                 }
             };
-        }
 
-        return {form};
-    },
-    computed: {
-      inputID() {
-        return this.form?.getID(this);
-      },
-      allFiles() {
-            return this.files
-        },
-    },
-    methods: {
-        addFile(file) {
-            let uploadedFile = {
-                id: crypto.randomUUID(),
-                percent: 0,
-                error: 0,
-                file: file,
+            const fail = (message) => {
+                item.uploading = false;
+                item.error = message || t('upload.failed');
+                requests.delete(item.id);
+                updateProgress();
+                emit('error', item, item.error);
             };
 
-            if (this.multiple) {
-                this.files.push(uploadedFile);
-            } else {
-                this.files = [uploadedFile];
-            }
+            xhr.onerror = () => fail();
+            xhr.onload = () => {
+                let json = null;
+                try {
+                    json = JSON.parse(xhr.responseText);
+                } catch (e) { /* not json */ }
 
-            this.uploadFile(uploadedFile);
-            this.$refs.input.value = '';
-        },
-        calculatePercent(event, file) {
-            if (event.lengthComputable) {
-                this.files.find(item => item.id === file.id)['percent'] = Math.round((event.loaded / event.total) * 100);
-            }
-        },
-        addFileToInputValue(file, res) {
-            this.files.find(item => item.id === file.id).path = res.data.path;
-
-            this.form[this.name] = this.multiple ? this.files.map(item => item.path) : this.files[0].path;
-            this.$emit('update:modelValue', this.form[this.name]);
-        },
-        async uploadFile(file) {
-            let _this = this;
-            let formData = new FormData();
-            formData.append('file', file.file);
-
-            _this.files.find(item => item.id === file.id)['error'] = '';
-
-            await axios.post(this.endpoint,
-                formData, {
-                    headers: {
-                        'Content-Type': 'multipart/form-data'
-                    },
-                    onUploadProgress: progressEvent => _this.calculatePercent(progressEvent, file)
+                if (xhr.status < 200 || xhr.status >= 300) {
+                    const first = json?.errors ? Object.values(json.errors)[0] : null;
+                    return fail(json?.message || (Array.isArray(first) ? first[0] : first));
                 }
-            ).then(function (res) {
-              if(res.errors) {
-                throw res;
-              }
-
-              _this.addFileToInputValue(file, res)
-            }).catch(function (err) {
-                _this.files.find(item => item.id === file.id)['error'] = (err.response?.data?.message || err.message);
-            });
-        },
-        async deleteFile(file) {
-            this.files = this.files.filter(item => item.id !== file.id);
-            await axios.delete(this.endpoint, {
-                data: file.path
-            });
-        },
-        fileSelected(e) {
-            Array.from(e.target.files).forEach(file => this.addFile(file));
+
+                const path = json?.data?.path ?? json?.path;
+                if (!path) return fail();
+
+                item.path = path;
+                item.percent = 100;
+                item.uploading = false;
+                requests.delete(item.id);
+                updateProgress();
+                publish();
+                emit('uploaded', item);
+            };
+
+            xhr.send(body);
         }
-    },
-    data() {
-        return {
-            files: [],
+
+        function add(file) {
+            const item = reactive({ id: `f${++counter}`, file, percent: 0, error: '', path: null, uploading: false });
+            files.value = props.multiple ? [...files.value, item] : [item];
+            emit('added', item);
+            upload(item);
+        }
+
+        function onSelect(event) {
+            Array.from(event.target.files).forEach(add);
+            event.target.value = '';
         }
-    }
-})
+
+        async function remove(item) {
+            requests.get(item.id)?.abort();
+            requests.delete(item.id);
+            files.value = files.value.filter((f) => f.id !== item.id);
+            updateProgress();
+
+            if (item.path) {
+                publish();
+                try {
+                    await fetch(props.endpoint, {
+                        method: 'DELETE',
+                        headers: laravelHeaders(props.headers),
+                        credentials: 'same-origin',
+                        body: item.path,
+                    });
+                } catch (e) { /* the file is already detached from the form */ }
+            }
+            emit('removed', item);
+        }
+
+        // The form was reset (e.g. resetOnSuccess): forget the list without touching the server
+        watch(
+            () => field.model.value,
+            (v) => {
+                const empty = v === null || v === undefined || v === '' || (Array.isArray(v) && !v.length);
+                if (empty && files.value.some((f) => f.path)) files.value = files.value.filter((f) => !f.path);
+            }
+        );
+
+        expose({ clear: () => files.value.slice().forEach(remove) });
+
+        return { ...field, t, input, files, onSelect, remove, retry: upload, size: (b) => `${Math.round(b / 1024)}KB` };
+    },
+});
 </script>
+
 <template>
     <div class="file-input-uploader">
         <input
             ref="input"
-            :name="name"
-            :id="inputID"
-            :class="{'is-invalid': form?.errors[name] !== undefined}"
-            :disabled="form?.processing"
             type="file"
+            class="form-control"
+            :class="{ 'is-invalid': isInvalid }"
+            :name="name"
+            :id="inputId"
             :multiple="multiple"
-            @change="fileSelected"
-            class="form-control">
-        <div class="file-input-uploader--list">
-            <div :id="'file-'+file.id" class="file-input-uploader--list-item" v-for="file in allFiles">
-                <div class="file-input-uploader--progress" v-if="file.percent && file.percent< 100">
-                    <div :style="{width: file.percent + '%'}"></div>
+            :accept="accept || undefined"
+            :required="required && !files.length"
+            :disabled="isDisabled || readonly"
+            :aria-invalid="isInvalid || undefined"
+            @change="onSelect"
+        />
+        <ul v-if="files.length" class="list-group mt-2">
+            <li v-for="item in files" :key="item.id" class="list-group-item">
+                <div class="d-flex align-items-center justify-content-between gap-2">
+                    <span class="text-truncate">{{ item.file.name }}</span>
+                    <span class="d-flex align-items-center gap-2">
+                        <span class="fg-secondary fanum" dir="ltr">{{ size(item.file.size) }}</span>
+                        <button
+                            v-if="item.error"
+                            type="button"
+                            class="btn-text theme-secondary btn-icon"
+                            :aria-label="t('file.retry')"
+                            @click="retry(item)"
+                        >
+                            <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.5H10" /><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.5M2.5 13V9.5H6" /></svg>
+                        </button>
+                        <button
+                            v-if="item.path || item.error"
+                            type="button"
+                            class="btn-text theme-danger btn-icon"
+                            :aria-label="t('file.remove')"
+                            @click="remove(item)"
+                        >
+                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><path d="m4 4 8 8M12 4l-8 8" /></svg>
+                        </button>
+                    </span>
                 </div>
-                <div>{{ file.file.name }}</div>
-                <div class="file-input-uploader--list-error" v-if="file.error">{{ file.error }}</div>
-                <div class="file-input-uploader--list-item--size" dir="ltr">{{ Math.round(file.file.size / 1024) }}Kb</div>
-                <div class="file-input-uploader--list-item--actions">
-                    <button @click="uploadFile(file)" type="button" class="file-input-uploader--list-item--btn" v-if="file.error">
-                        <svg fill="#000000" width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                            <path
-                                d="M1,12A11,11,0,0,1,17.882,2.7l1.411-1.41A1,1,0,0,1,21,2V6a1,1,0,0,1-1,1H16a1,1,0,0,1-.707-1.707l1.128-1.128A8.994,8.994,0,0,0,3,12a1,1,0,0,1-2,0Zm21-1a1,1,0,0,0-1,1,9.01,9.01,0,0,1-9,9,8.9,8.9,0,0,1-4.42-1.166l1.127-1.127A1,1,0,0,0,8,17H4a1,1,0,0,0-1,1v4a1,1,0,0,0,.617.924A.987.987,0,0,0,4,23a1,1,0,0,0,.707-.293L6.118,21.3A10.891,10.891,0,0,0,12,23,11.013,11.013,0,0,0,23,12,1,1,0,0,0,22,11Z"/>
-                        </svg>
-                    </button>
-                    <button @click="deleteFile(file)" type="button" class="file-input-uploader--list-item--btn" v-if="file.path || file.error">
-                        <svg fill="#000000" width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                            <path
-                                d="M12,23A11,11,0,1,0,1,12,11.013,11.013,0,0,0,12,23ZM12,3a9,9,0,1,1-9,9A9.01,9.01,0,0,1,12,3ZM8.293,14.293,10.586,12,8.293,9.707A1,1,0,0,1,9.707,8.293L12,10.586l2.293-2.293a1,1,0,0,1,1.414,1.414L13.414,12l2.293,2.293a1,1,0,1,1-1.414,1.414L12,13.414,9.707,15.707a1,1,0,0,1-1.414-1.414Z"/>
-                        </svg>
-                    </button>
+                <div v-if="item.uploading" class="progress mt-2" role="progressbar" :aria-valuenow="item.percent" aria-valuemin="0" aria-valuemax="100">
+                    <div class="progress-bar" :style="{ width: item.percent + '%' }"></div>
                 </div>
-            </div>
-        </div>
+                <div v-if="item.error" class="fg-danger mt-1" role="alert">{{ item.error }}</div>
+            </li>
+        </ul>
     </div>
 </template>
-<style>
-.file-input-uploader .file-input-uploader--list .file-input-uploader--list-item {
-    background-color: var(--bs-secondary-bg);
-    border-radius: var(--bs-border-radius);
-    position: relative;
-    display: flex;
-    align-items: center;
-    margin: 5px 0;
-    padding: 5px 10px;
-}
-
-.file-input-uploader .file-input-uploader--list .file-input-uploader--list-item--size {
-    margin-left: auto;
-    font-size: 90%;
-    padding: 0 5px;
-    color: var(--bs-secondary-color);
-}
-
-.file-input-uploader .file-input-uploader--list-item--btn {
-    display: inline-block;
-    outline: none;
-    border: 0;
-    padding: 7px 2px;
-}
-
-.file-input-uploader .file-input-uploader--list-item--btn:not(:last-child){
-    margin-right: 5px;
-}
-
-.file-input-uploader .file-input-uploader--list-item--btn > svg {
-    height: 20px;
-    width: 20px;
-    vertical-align: middle;
-}
-
-.file-input-uploader .file-input-uploader--progress {
-    position: absolute;
-    top: 2px;
-    left: 5px;
-    right: 5px;
-}
-
-.file-input-uploader .file-input-uploader--progress > div {
-    background-color: #de0021;
-    height: 7px;
-    width: 0;
-    min-width: 1%;
-    border-radius: var(--bs-border-radius)
-}
-
-.file-input-uploader .file-input-uploader--list-error {
-    font-size: 90%;
-    margin: 0 5px;
-    color: var(--bs-danger, #de0021);
-}
-</style>

package/src/FormAdornInput.vue

@@ -0,0 +1,75 @@
+<script>
+import { computed, defineComponent, ref } from 'vue';
+import { fieldProps, useField } from './composables/useField.js';
+
+/**
+ * Bootstrap 6 `.form-adorn`: an input decorated with icons / text at its start and/or end.
+ *
+ * <FormAdornInput name="site" start-text="https://" end-text=".com" />
+ * <FormAdornInput name="search"><template #start><span class="form-adorn-icon"><svg …/></span></template></FormAdornInput>
+ */
+export default defineComponent({
+    name: 'FormAdornInput',
+    inheritAttrs: false,
+    emits: ['update:modelValue', 'change', 'input', 'focus', 'blur'],
+    props: {
+        ...fieldProps,
+        type: { type: String, default: 'text' },
+        placeholder: { type: String, default: null },
+        /** Text shown before the input. */
+        startText: { type: String, default: null },
+        /** Text shown after the input. */
+        endText: { type: String, default: null },
+        size: { type: String, default: null },
+    },
+    setup(props, { emit }) {
+        const field = useField(props, emit);
+        const input = ref(null);
+        const sizeClass = computed(() => (props.size ? `form-control-${props.size}` : null));
+
+        function focusInput(event) {
+            if (event.target === event.currentTarget || event.target.closest?.('.form-adorn-icon, .form-adorn-text')) {
+                input.value?.focus();
+            }
+        }
+
+        return { ...field, input, sizeClass, focusInput, emit, focus: () => input.value?.focus() };
+    },
+    expose: ['focus'],
+});
+</script>
+
+<template>
+    <div
+        class="form-control form-adorn"
+        :class="[sizeClass, { 'is-invalid': isInvalid }, $attrs.class]"
+        :style="$attrs.style"
+        @click="focusInput"
+    >
+        <slot name="start">
+            <span v-if="startText" class="form-adorn-text">{{ startText }}</span>
+        </slot>
+        <input
+            ref="input"
+            v-model="model"
+            v-bind="{ ...$attrs, class: undefined, style: undefined }"
+            :name="name"
+            :id="inputId"
+            :type="type"
+            :placeholder="placeholder"
+            :required="required"
+            :readonly="readonly"
+            :disabled="isDisabled"
+            :aria-invalid="isInvalid || undefined"
+            class="form-ghost"
+            :class="{ 'is-invalid': isInvalid }"
+            @input="emit('input', model, $event)"
+            @change="emitChange(model, $event)"
+            @focus="$emit('focus', $event)"
+            @blur="$emit('blur', $event)"
+        />
+        <slot name="end">
+            <span v-if="endText" class="form-adorn-text">{{ endText }}</span>
+        </slot>
+    </div>
+</template>