inertia-bootstrap-forms 1.0.13 → 1.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "inertia-bootstrap-forms",
-    "version": "1.0.13",
+    "version": "1.0.15",
     "description": "Create bootstrap forms with inertia and twitter bootstrap",
     "main": "dist/inertia-bootstrap-forms.cjs.js",
     "module": "dist/inertia-bootstrap-forms.es.js",

package/src/FileUploader.vue

@@ -0,0 +1,196 @@
+<script>
+import {inject} from "vue";
+
+export default {
+    props: {
+        modelValue: '',
+        name: {
+            type: String,
+            required: true,
+        },
+        multiple: {
+            type: Boolean,
+            default: false,
+        },
+        endpoint: {
+            type: String,
+            default: '/upload',
+        },
+    },
+    setup(props) {
+        let form = inject('form');
+
+        if (form === undefined) {
+            form = {
+                errors: {},
+                getID(name) {
+                }
+            };
+        }
+
+        return {form};
+    },
+    computed: {
+        allFiles() {
+            return this.files
+        },
+    },
+    methods: {
+        addFile(file) {
+            let uploadedFile = {
+                id: crypto.randomUUID(),
+                percent: 0,
+                error: 0,
+                file: file,
+            };
+
+            if (this.multiple) {
+                this.files.push(uploadedFile);
+            } else {
+                this.files = [uploadedFile];
+            }
+
+            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)
+                }
+            ).then(function (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));
+        }
+    },
+    data() {
+        return {
+            files: [],
+        }
+    }
+}
+</script>
+<template>
+    <div class="file-input-uploader">
+        <input
+            ref="input"
+            :name="name"
+            :class="{'is-invalid': form?.errors[name] !== undefined}"
+            :disabled="form?.processing"
+            type="file"
+            :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>
+                </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>
+            </div>
+        </div>
+    </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/{locationInput.vue → LocationInput.vue}

@@ -4,7 +4,7 @@ import {LMap, LTileLayer, LMarker} from "@vue-leaflet/vue-leaflet";
 import {inject} from "vue";
 
 export default {
-  name: 'locationInput',
+  name: 'LocationInput',
   components: {
     LMap, LTileLayer, LMarker
   },

package/src/css/from-select.scss

@@ -223,7 +223,7 @@
 
 .choices__list--dropdown, .choices__list[aria-expanded] {
     display: none;
-    z-index: 9;
+    z-index: 99999;
     position: absolute;
     width: 100%;
     background-color: #fff;

package/src/index.js

@@ -10,7 +10,7 @@ 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 LocationInput from "./LocationInput.vue";
 import MobileInput from "./MobileInput.vue";
 import PasswordInput from "./PasswordInput.vue";
 import QuantityInput from "./QuantityInput.vue";
@@ -35,7 +35,7 @@ export {
     EditorInput,
     GroupControl,
     FormContainer,
-    locationInput,
+    LocationInput,
     MobileInput,
     PasswordInput,
     QuantityInput,