inertia-bootstrap-forms 1.0.34 → 1.0.35

package/index.d.ts

@@ -1,4 +1,100 @@
-// index.d.ts
+import { defineComponent } from 'vue';
+
+// Import کامپوننت‌ها
+import AmountInput from './src/AmountInput.vue';
+import CaptchaInput from './src/CaptchaInput.vue';
+import CheckboxButtonInput from './src/CheckboxButtonInput.vue';
+import CheckboxInput from './src/CheckboxInput.vue';
+import CheckboxToggle from './src/CheckboxToggle.vue';
+import EditorInput from './src/EditorInput.vue';
+import EmailInput from './src/EmailInput.vue';
+import FileInput from './src/FileInput.vue';
+import SimpleUploader from './src/SimpleUploader.vue';
+import FormContainer from './src/FormContainer.vue';
+import FormLabel from './src/FormLabel.vue';
+import GroupControl from './src/GroupControl.vue';
+import LocationInput from './src/LocationInput.vue';
+import MobileInput from './src/MobileInput.vue';
+import MultiQuantityInput from './src/MultiQuantityInput.vue';
+import PasswordInput from './src/PasswordInput.vue';
+import PersianDatePickerInput from './src/PersianDatePickerInput.vue';
+import QuantityInput from './src/QuantityInput.vue';
+import SecondarySubmitButton from './src/SecondarySubmitButton.vue';
+import Select2Input from './src/Select2Input.vue';
+import StarRatingInput from './src/StarRatingInput.vue';
+import SubmitButton from './src/SubmitButton.vue';
+import TelInput from './src/TelInput.vue';
+import TextAreaInput from './src/TextAreaInput.vue';
+import TextInput from './src/TextInput.vue';
+import DropzoneInput from './src/DropzoneInput.vue';
+import { countryCodes } from './src/countryCodes';
+
+// Export تکی
+export {
+    AmountInput,
+    CaptchaInput,
+    CheckboxButtonInput,
+    CheckboxInput,
+    CheckboxToggle,
+    countryCodes,
+    EditorInput,
+    EmailInput,
+    DropzoneInput,
+    FileInput,
+    SimpleUploader,
+    FormContainer,
+    FormLabel,
+    GroupControl,
+    LocationInput,
+    MobileInput,
+    MultiQuantityInput,
+    PasswordInput,
+    PersianDatePickerInput,
+    QuantityInput,
+    SecondarySubmitButton,
+    Select2Input,
+    StarRatingInput,
+    SubmitButton,
+    TelInput,
+    TextAreaInput,
+    TextInput,
+    Quantity,
+    File,
+};
+
+// Export پیش‌فرض برای import * as
+const Vue3FormComponents = {
+    AmountInput,
+    CaptchaInput,
+    CheckboxButtonInput,
+    CheckboxInput,
+    CheckboxToggle,
+    countryCodes,
+    EditorInput,
+    DropzoneInput,
+    EmailInput,
+    FileInput,
+    SimpleUploader,
+    FormContainer,
+    FormLabel,
+    GroupControl,
+    LocationInput,
+    MobileInput,
+    MultiQuantityInput,
+    PasswordInput,
+    PersianDatePickerInput,
+    QuantityInput,
+    SecondarySubmitButton,
+    Select2Input,
+    StarRatingInput,
+    SubmitButton,
+    TelInput,
+    TextAreaInput,
+    TextInput,
+};
+
+export default Vue3FormComponents;
+
 import { DefineComponent } from 'vue';
 
 export const AmountInput: DefineComponent<{}, {}, any>;
@@ -9,10 +105,9 @@ export const CheckboxToggle: DefineComponent<{}, {}, any>;
 export const countryCodes: any;
 export const EditorInput: DefineComponent<{}, {}, any>;
 export const EmailInput: DefineComponent<{}, {}, any>;
-export const FileInput: DefineComponent<{
-
-}, {}, any>;
-export const FileUploader: DefineComponent<{}, {}, any>;
+export const DropzoneInput: DefineComponent<{}, {}, any>;
+export const FileInput: DefineComponent<{}, {}, any>;
+export const SimpleUploader: DefineComponent<{}, {}, any>;
 export const FormContainer: DefineComponent<{}, {}, any>;
 export const FormLabel: DefineComponent<{}, {}, any>;
 export const GroupControl: DefineComponent<{}, {}, any>;
@@ -30,18 +125,19 @@ export const TelInput: DefineComponent<{}, {}, any>;
 export const TextAreaInput: DefineComponent<{}, {}, any>;
 export const TextInput: DefineComponent<{}, {}, any>;
 
-// این قسمت برای اینکه import * as ... هم ساپورت بشه
+// Export پیش‌فرض
 declare const Vue3FormComponents: {
     AmountInput: typeof AmountInput;
     CaptchaInput: typeof CaptchaInput;
     CheckboxButtonInput: typeof CheckboxButtonInput;
     CheckboxInput: typeof CheckboxInput;
     CheckboxToggle: typeof CheckboxToggle;
+    DropzoneInput: typeof DropzoneInput;
     countryCodes: typeof countryCodes;
     EditorInput: typeof EditorInput;
     EmailInput: typeof EmailInput;
     FileInput: typeof FileInput;
-    FileUploader: typeof FileUploader;
+    SimpleUploader: typeof SimpleUploader;
     FormContainer: typeof FormContainer;
     FormLabel: typeof FormLabel;
     GroupControl: typeof GroupControl;
@@ -58,6 +154,7 @@ declare const Vue3FormComponents: {
     TelInput: typeof TelInput;
     TextAreaInput: typeof TextAreaInput;
     TextInput: typeof TextInput;
+    Quantity: typeof QuantityInput;
 };
 
 export default Vue3FormComponents;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "inertia-bootstrap-forms",
-    "version": "1.0.34",
+    "version": "1.0.35",
     "description": "Create bootstrap forms with inertia and twitter bootstrap",
     "main": "dist/inertia-bootstrap-forms.cjs.js",
     "module": "dist/inertia-bootstrap-forms.es.js",
@@ -46,10 +46,12 @@
     },
     "peerDependencies": {
         "@inertiajs/vue3": ">2.0",
+        "dropzone": "^6.0.0-beta.2",
         "vue": "^3.0"
     },
     "devDependencies": {
         "sass-embedded": "^1.89.2",
+        "dropzone": "^6.0.0-beta.2",
         "vite": "^5"
     },
     "bugs": {

package/src/AmountInput.vue

@@ -1,8 +1,8 @@
 <script>
 import {InputGroup, InputGroupText} from 'vue3-bootstrap-components';
-import {inject} from "vue";
+import {defineComponent, inject} from "vue";
 
-export default {
+export default defineComponent({
     components: {InputGroup, InputGroupText},
     props: {
         name: {
@@ -40,7 +40,7 @@ export default {
             this.$emit('update:modelValue', parseFloat(this.$number.toEnglish(event.detail?.unmasked)));
         }
     }
-}
+})
 </script>
 <template>
     <InputGroup>

package/src/CaptchaInput.vue

@@ -1,7 +1,8 @@
 <script>
 import TextInput from "./TextInput.vue";
+import {defineComponent} from "vue";
 
-export default {
+export default defineComponent({
     components: {TextInput},
     props: {
         name: {
@@ -56,7 +57,7 @@ export default {
             src: this.url + Math.random(),
         };
     }
-};
+});
 
 </script>
 <template>

package/src/CheckboxButtonInput.vue

@@ -1,7 +1,7 @@
 <script>
-import {inject} from "vue";
+import {defineComponent, inject} from "vue";
 
-export default {
+export default defineComponent({
     emits: ['change'],
     props: {
         name: {
@@ -43,7 +43,7 @@ export default {
 
         return {form};
     },
-}
+})
 </script>
 <template>
     <label class="btn-label" :for="form.getID(name)+(id || value)" :class="{'active': (form[name] === value || form[name] === true)}">

package/src/CheckboxInput.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,
@@ -52,7 +52,7 @@ export default {
 
         return {modelValue, form, group};
     },
-}
+})
 </script>
 <template>
     <div class="form-check">

package/src/CheckboxToggle.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,
@@ -59,7 +59,7 @@ export default {
 
     return {modelValue, form, group};
   },
-}
+})
 </script>
 <template>
   <label class="form-check-toggle" :class="{'form-check-toggle--active': (selectedValue || []).includes(value)}" :for="inputID">

package/src/DropzoneInput.vue

@@ -0,0 +1,108 @@
+<script setup>
+import { computed, inject, ref, onMounted } from "vue";
+import Dropzone from "dropzone";
+import "dropzone/dist/basic.css";
+import "dropzone/dist/dropzone.css";
+
+const props = defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  modelValue: String,
+  url: { type: String, default: "/upload" },
+  options: { type: Object, default: () => ({}) },
+});
+const emit = defineEmits(["update:modelValue"]);
+
+const form = inject("form", {
+  value: {},
+  errors: {},
+  getID: n => n,
+});
+
+const group = inject("group", null);
+
+const dz = ref(null);
+const dropzone = ref(null);
+
+const modelValue = computed({
+  get() {
+    return group?.value?.name
+        ? group.value.getData(props.name)
+        : form.value[props.name];
+  },
+  set(val) {
+    if (group?.value?.name) {
+      group.value.setData(props.name, val);
+    } else {
+      form.value[props.name] = val;
+    }
+    emit("update:modelValue", val);
+  }
+});
+
+onMounted(() => {
+  dropzone.value = new Dropzone(dz.value, {
+    url: props.url,
+    addRemoveLinks: true,
+    maxFiles: props.multiple ? null : 1,
+    ...props.options,
+  });
+
+  dropzone.value.on("error", (file, response) => {
+    let message = "خطا در آپلود";
+
+    if (typeof response === "string") {
+      message = response;
+    }
+
+    if (response?.message) {
+      message = response.message;
+    }
+
+    file.previewElement.classList.add("dz-error");
+    const err = file.previewElement.querySelector("[data-dz-errormessage]");
+    if (err) err.textContent = message;
+  });
+
+  dropzone.value.on("success", (file, response) => {
+    const result = response.data ?? response;
+
+    if(props.multiple){
+      modelValue.value = [...(modelValue.value || []), result];
+    }else{
+      modelValue.value = result;
+    }
+  });
+
+  dropzone.value.on("removedfile", async (file) => {
+    let data = file.xhr.response;
+    if (!data) return;
+
+    try {
+      data = JSON.parse(data);
+      modelValue.value = (modelValue.value || []).filter(f => f.path !== data.path);
+
+      await fetch(props.url, {
+        method: "DELETE",
+        headers: {
+          "Content-Type": "application/json",
+          'Accept': 'application/json',
+        },
+        body: data.path
+      });
+    } catch (e) {
+      console.error("حذف فایل در سرور با خطا مواجه شد", e);
+    }
+  });
+});
+</script>
+
+<template>
+  <div class="inertia-dropzone-input dropzone" ref="dz"></div>
+</template>

package/src/EditorInput.vue

@@ -1,8 +1,8 @@
 <script>
 import Editor from '@tinymce/tinymce-vue';
-import {computed, inject} from "vue";
+import {computed, defineComponent, inject} from "vue";
 
-export default {
+export default defineComponent({
     components: {Editor},
     props: {
         name: {
@@ -51,7 +51,7 @@ export default {
       return {modelValue, form, group};
     },
     emits: ['update:modelValue'],
-}
+})
 </script>
 
 <template>

package/src/EmailInput.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/FileInput.vue

@@ -1,7 +1,7 @@
 <script>
-import {inject} from "vue";
+import {defineComponent, inject} from "vue";
 
-export default {
+export default defineComponent({
     props: {
         modelValue: '',
         name: {
@@ -99,7 +99,7 @@ export default {
             files: [],
         }
     }
-}
+})
 </script>
 <template>
     <div class="file-input-uploader">

package/src/FormContainer.vue

@@ -1,9 +1,9 @@
 <script>
 import {useForm} from "@inertiajs/vue3";
-import {computed, reactive, toRef} from "vue";
+import {computed, defineComponent, reactive, toRef} from "vue";
 import {Alert} from "vue3-bootstrap-components";
 
-export default {
+export default defineComponent({
     components: {Alert},
     emits: ['submit', 'reset', 'onStart', 'onFinish', 'onSuccess', 'change'],
     props: {
@@ -133,7 +133,7 @@ export default {
         }
     },
     expose: ['submit', 'reset'],
-}
+})
 
 </script>
 

package/src/FormLabel.vue

@@ -1,11 +1,13 @@
 <script>
-export default {
+import {defineComponent} from "vue";
+
+export default defineComponent({
     props: {
         default: false,
         required: false,
     },
     emits: ['update:modelValue'],
-}
+})
 </script>
 
 <template>

package/src/GroupControl.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,
@@ -58,7 +58,7 @@ export default {
             groupID: '0',
         };
     }
-}
+})
 </script>
 <template>
     <div class="form-control-group" :data-group-id="groupID" ref="groupEl">

package/src/LocationInput.vue

@@ -1,9 +1,10 @@
 <script>
 import "leaflet/dist/leaflet.css";
+import "./css/location.scss";
 import {LMap, LTileLayer, LMarker} from "@vue-leaflet/vue-leaflet";
-import {inject} from "vue";
+import {defineComponent, inject} from "vue";
 
-export default {
+export default defineComponent({
   name: 'LocationInput',
   components: {
     LMap, LTileLayer, LMarker
@@ -60,7 +61,7 @@ export default {
     };
   },
 
-}
+})
 </script>
 <template>
   <div class="location-map-container"
@@ -75,50 +76,3 @@ export default {
     </l-map>
   </div>
 </template>
-<style>
-.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;
-  }
-}
-
-</style>

package/src/MobileInput.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/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