inertia-bootstrap-forms 1.0.33 → 1.0.35

package/src/MultiQuantityInput.vue

@@ -1,10 +1,10 @@
 <script>
 import {Dropdown, DropdownToggle, DropdownMenu, InputGroup, InputGroupText} from 'vue3-bootstrap-components';
-import {computed, inject} from "vue";
+import {computed, defineComponent, inject} from "vue";
 import QuantityInput from "./QuantityInput.vue";
 import GroupControl from "./GroupControl.vue";
 
-export default {
+export default defineComponent({
   components: {GroupControl, QuantityInput, InputGroup, InputGroupText, Dropdown, DropdownToggle, DropdownMenu},
   props: {
     name: {
@@ -97,7 +97,7 @@ export default {
       showDropdown : false,
     }
   }
-}
+})
 </script>
 <template>
   <div ref="input" class="multi-quantity-input fanum">

package/src/PasswordInput.vue

@@ -1,7 +1,8 @@
 <script>
 import TextInput from "./TextInput.vue";
+import {defineComponent} from "vue";
 
-export default {
+export default defineComponent({
     components: {
         TextInput
     },
@@ -12,7 +13,7 @@ export default {
             required: true,
         },
     },
-}
+})
 </script>
 <template>
     <TextInput

package/src/PersianDatePickerInput.vue

@@ -1,8 +1,8 @@
 <script>
 import Vue3PersianDatetimePicker from 'vue3-persian-datetime-picker';
-import {computed, inject} from "vue";
+import {computed, defineComponent, inject} from "vue";
 
-export default {
+export default defineComponent({
     components: {Vue3PersianDatetimePicker},
     props: {
         name: {
@@ -74,7 +74,7 @@ export default {
     data() {
         return {}
     }
-}
+})
 </script>
 
 <template>

package/src/QuantityInput.vue

@@ -1,8 +1,8 @@
 <script>
 import {InputGroup, InputGroupText} from 'vue3-bootstrap-components';
-import {computed, inject} from "vue";
+import {computed, defineComponent, inject} from "vue";
 
-export default {
+export default defineComponent({
   components: {InputGroup, InputGroupText},
   props: {
     name: {
@@ -80,7 +80,7 @@ export default {
   data() {
     return {}
   }
-}
+})
 </script>
 <template>
   <InputGroup class="input-group-quantity">

package/src/SecondarySubmitButton.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/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: {
@@ -44,6 +44,10 @@ export default {
       type: Boolean,
       default: false
     },
+    hideDropdown: {
+      type: Boolean,
+      default: false
+    },
     search: {
       type: Object,
       default: {
@@ -75,6 +79,15 @@ export default {
 
     return {modelValue, form, group};
   },
+  computed: {
+    selectedValue() {
+      if (!this.multiple) {
+        return this.modelValue;
+      }
+
+      return (typeof this.modelValue == 'object') ? Object.values(this.modelValue) : (this.modelValue ? [this.modelValue] : null)
+    }
+  },
   methods: {
     init() {
       this.choices = new Choices(this.$refs.input, {
@@ -175,11 +188,12 @@ export default {
       },
     }
   }
-}
+})
 </script>
 <template>
   <div class="select2-controller" :class="{
-        'is-invalid': form.errors[name]
+        'is-invalid': form.errors[name],
+        'select2-dropdown-hidden': hideDropdown === true
   }">
     <select
         v-bind="$props"
@@ -192,7 +206,9 @@ export default {
       }"
         :placeholder="placeholder"
         ref="input">
-      <option :value="item.id" v-for="(item, key) in options" :selected="modelValue === item.id">{{ item.name }}
+      <option
+          :value="(item.id || item)" v-for="(item, key) in options"
+          :selected="multiple ? (selectedValue || []).includes(item.id || item) : (item.id || item) === modelValue">{{ item.name || item }}
       </option>
     </select>
   </div>

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/from-select.scss

@@ -84,7 +84,7 @@
     height: 0;
     width: 0;
     border-style: solid;
-    border-color: #333 transparent transparent;
+    border-color: var(--bs-secondary-color, #333) transparent transparent;
     border-width: 5px;
     position: absolute;
     right: 11.5px;
@@ -94,7 +94,7 @@
 }
 
 .choices[data-type*=select-one].is-open::after {
-    border-color: transparent transparent #333;
+    border-color: transparent transparent var(--bs-secondary-color, #333);
     margin-top: -7.5px
 }
 
@@ -137,7 +137,7 @@
     width: 100%;
     background-color: var(--bs-body-bg, #ffffff);
     padding: calc(.5rem - 4px) .75rem calc(.5rem - 4px) .75rem;
-    border: 1px solid #ddd;
+    border: 1px solid var(--bs-border-color, #ddd);
     border-radius: var(--bs-border-radius);
     font-size: var(--bs-body-font-size);
     min-height: 44px;
@@ -148,15 +148,16 @@
     border-color: var(--bs-danger, #de0021);
 }
 
-.is-focused .choices__inner, .is-open .choices__inner {
+.is-focused .choices__inner,
+.is-open .choices__inner {
     border-color: #b7b7b7
 }
 
-.is-open .choices__inner {
+.select2-controller:not(.select2-dropdown-hidden) .is-open .choices__inner {
     border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0
 }
 
-.is-flipped.is-open .choices__inner {
+.select2-controller:not(.select2-dropdown-hidden) .is-flipped.is-open .choices__inner {
     border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius)
 }
 
@@ -195,8 +196,8 @@
     font-weight: 500;
     margin-right: 3.75px;
     margin-bottom: 3.75px;
-    background-color: var(--bs-body-secondary, #999999);
-    border: 1px solid var(--bs-body-secondary, #999999);
+    background-color: var(--bs-secondary-bg, #999999);
+    border: 1px solid var(--bs-secondary-bg, #999999);
     color: var(--bs-body-color, #ffffff);
     word-break: break-all;
     box-sizing: border-box
@@ -221,13 +222,17 @@
     border: 1px solid var(--bs-secondary, #003642)
 }
 
+.select2-dropdown-hidden .choices__list--dropdown{
+  display: none !important;
+}
+
 .choices__list--dropdown, .choices__list[aria-expanded] {
     display: none;
     z-index: 99999;
     position: absolute;
     width: 100%;
-    background-color: var(--bs-secondary-bg, #ddd);
-    border: 1px solid var(--bs-secondary-bg, #ddd);
+    background-color: var(--bs-body-bg, #ddd);
+    border: 1px solid var(--bs-body-bg, #ddd);
     top: 100%;
     margin-top: -1px;
     border-bottom-left-radius: var(--bs-border-radius);
@@ -295,7 +300,7 @@
 }
 
 .choices__list--dropdown .choices__item--selectable.is-highlighted, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
-    background-color: #f2f2f2
+    background-color: var(--bs-secondary-bg, #ddd)
 }
 
 .choices__list--dropdown .choices__item--selectable.is-highlighted::after, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted::after {
@@ -348,7 +353,7 @@
 .choices__input {
     display: inline-block;
     vertical-align: baseline;
-    background-color: #f9f9f9;
+    background-color: var(--bs-body-bg, #f7f7f7);
     font-size: var(--bs-body-font-size);
     border: 0;
     border-radius: 0;

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,