inertia-bootstrap-forms 1.0.34 → 1.0.35

package/src/Select2Input.vue

@@ -1,9 +1,9 @@
 <script>
 import './css/from-select.scss';
 import Choices from 'choices.js';
-import {computed, inject} from "vue";
+import {computed, defineComponent, inject} from "vue";
 
-export default {
+export default defineComponent({
   emits: ['update:modelValue', 'search', 'change', 'selected'],
   props: {
     name: {
@@ -188,7 +188,7 @@ export default {
       },
     }
   }
-}
+})
 </script>
 <template>
   <div class="select2-controller" :class="{

package/src/SimpleUploader.vue

@@ -0,0 +1,144 @@
+<script>
+import {defineComponent, inject} from "vue";
+
+export default defineComponent({
+  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 fetch(this.endpoint,
+          {
+            method: 'POST',
+            headers: {
+              'Accept': 'application/json',
+            },
+            body: formData,
+          },
+      )
+          .then(response => response.json())
+          .then(function (res) {
+            _this.addFileToInputValue(file, res)
+          }).catch(function (err) {
+            console.error('error on uploader', 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 fetch(this.endpoint, {
+        method: 'DELETE',
+        body: 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>

package/src/StarRatingInput.vue

@@ -1,7 +1,7 @@
 <script>
-import {inject} from 'vue';
+import {defineComponent, inject} from 'vue';
 
-export default {
+export default defineComponent({
     emits: ['update:modelValue'],
     props: {
         name: {
@@ -98,7 +98,7 @@ export default {
             isRTL: false,
         }
     }
-}
+})
 </script>
 <template>
     <div class="star-rating">

package/src/SubmitButton.vue

@@ -1,13 +1,14 @@
 <script>
 import {Spinner} from 'vue3-bootstrap-components';
+import {defineComponent} from "vue";
 
-export default {
+export default defineComponent({
     components: {
         Spinner
     },
     inject: ['form'],
     props: {},
-}
+})
 </script>
 <template>
     <button

package/src/TelInput.vue

@@ -1,9 +1,9 @@
 <script>
 import {VueTelInput} from 'vue-tel-input';
 import 'vue-tel-input/vue-tel-input.css';
-import {inject} from "vue";
+import {defineComponent, inject} from "vue";
 
-export default {
+export default defineComponent({
     components: {
         VueTelInput
     },
@@ -44,7 +44,7 @@ export default {
             valid: null,
         }
     }
-}
+})
 </script>
 <template>
     <div class="telephone-input input-group fanum" dir="ltr">

package/src/TextAreaInput.vue

@@ -1,7 +1,7 @@
 <script>
-import {computed, inject} from "vue";
+import {computed, defineComponent, inject} from "vue";
 
-export default {
+export default defineComponent({
     props: {
         name: {
             type: String,
@@ -32,7 +32,7 @@ export default {
 
         return {modelValue, form, group};
     },
-}
+})
 </script>
 <template>
     <textarea

package/src/TextInput.vue

@@ -1,7 +1,7 @@
 <script>
-import {computed, inject} from "vue";
+import {computed, inject, defineComponent} from "vue";
 
-export default {
+export default defineComponent({
     props: {
         name: {
             type: String,
@@ -37,7 +37,7 @@ export default {
 
         return {modelValue, form, group};
     },
-}
+})
 </script>
 <template>
     <input

package/src/css/location.scss

@@ -0,0 +1,44 @@
+.location-map-container {
+  position: relative;
+  width: 100%;
+  height: 300px;
+  overflow: hidden;
+  border-radius: var(--bs-border-radius);
+}
+
+.location-map-container.is-invalid {
+  border: 1px solid var(--bs-form-invalid-border-color);
+}
+
+.location-map-container[disabled],
+.location-map-container.disabled:before {
+  content: "";
+  background-color: rgba(var(--bs-light-rgb), 0.4);
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  z-index: 9999;
+}
+
+.location-map-container {
+  .leaflet-pane,
+  .leaflet-tile,
+  .leaflet-marker-icon,
+  .leaflet-marker-shadow,
+  .leaflet-tile-container,
+  .leaflet-pane > svg,
+  .leaflet-pane > canvas,
+  .leaflet-zoom-box,
+  .leaflet-image-layer,
+  .leaflet-layer {
+    left: auto;
+    right: 0;
+  }
+
+  .leaflet-control-attribution.leaflet-control {
+    display: none;
+  }
+}

package/src/css/simple-upload.scss

@@ -0,0 +1,54 @@
+.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);
+}

package/src/index.js

@@ -22,6 +22,8 @@ import SubmitButton from "./SubmitButton.vue";
 import TelInput from "./TelInput.vue";
 import TextAreaInput from "./TextAreaInput.vue";
 import TextInput from "./TextInput.vue";
+import DropzoneInput from "./DropzoneInput.vue";
+import SimpleUploader from "./SimpleUploader.vue";
 
 export {
     AmountInput,
@@ -33,6 +35,8 @@ export {
     EmailInput,
     PersianDatePickerInput,
     EditorInput,
+    DropzoneInput,
+    SimpleUploader,
     GroupControl,
     FormContainer,
     LocationInput,

package/src/FileUploader.vue

@@ -1,196 +0,0 @@
-<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>