inertia-bootstrap-forms 1.0.33 → 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.33",
+    "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,
@@ -30,6 +30,9 @@ export default {
   computed: {
     inputID() {
       return this.form.getID(this) + (this.value || '');
+    },
+    selectedValue(){
+      return (typeof this.modelValue == 'object') ? Object.values(this.modelValue) : (this.modelValue ? [this.modelValue] : null)
     }
   },
   setup(props) {
@@ -56,10 +59,10 @@ export default {
 
     return {modelValue, form, group};
   },
-}
+})
 </script>
 <template>
-  <label class="form-check-toggle" :class="{'form-check-toggle--active': (Array.isArray(modelValue) ? modelValue : [modelValue]).include(value)}" :for="inputID">
+  <label class="form-check-toggle" :class="{'form-check-toggle--active': (selectedValue || []).includes(value)}" :for="inputID">
     <input
         :name="name + (group ? '_' + group?.name + '-'+group?.groupID : '')"
         :id="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 {inject} from "vue";
+import {computed, defineComponent, inject} from "vue";
 
-export default {
+export default defineComponent({
     components: {Editor},
     props: {
         name: {
@@ -27,27 +27,38 @@ export default {
         },
     },
     setup(props) {
-        let form = inject('form');
+      let form = inject('form', {
+        errors: {},
+        getID(name) {
+          return name;
+        }
+      });
+      let group = inject('group', {});
 
-        if (form === undefined) {
-            form = {
-                errors: {},
-                getID(name) {
-                }
-            };
+      const modelValue = computed({
+        get() {
+          return (group.value && form.value[group.value.name]) ? group.value?.getData(props.name) : form.value[props.name];
+        },
+        set(value) {
+          if (group?.value?.name) {
+            group.value.setData(props.name, value);
+          } else {
+            form.value[props.name] = value;
+          }
         }
+      });
 
-        return {form};
+      return {modelValue, form, group};
     },
     emits: ['update:modelValue'],
-}
+})
 </script>
 
 <template>
     <Editor
         api-key="tbws10u99swxhai03qolxykukvqw99jd4nw9q8z34aocvc4r"
         tinymce-script-src="/js/tinymce/tinymce.min.js"
-        v-model="form[name]"
+        v-model="modelValue"
         :init="{
           base_url: '/js/tinymce/',
           disabled: false,

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: {
@@ -34,7 +34,11 @@ export default {
     setup(props) {
         const formEl = toRef('formEl');
         const formData = reactive(props.modelValue);
-        const form = useForm(formData);
+        const form = useForm({
+          hasMessage: false,
+          successMessage: null,
+          ...formData
+        });
 
         form.getID = function (el) {
             if (typeof el === String) {
@@ -58,6 +62,8 @@ export default {
                     isDirty,
                     errors,
                     hasErrors,
+                    hasMessage,
+                    successMessage,
                     processing,
                     progress,
                     wasSuccessful,
@@ -101,7 +107,10 @@ export default {
                 }).submit(this.method.toString(), this.url, {
                     only: this.only,
                     onStart: () => {
-                        this.$emit('onStart');
+                      this.form.hasMessage = false;
+                      this.form.successMessage = null;
+
+                      this.$emit('onStart');
                         this.form.clearErrors();
                     },
                     onFinish: (data) => {
@@ -111,6 +120,12 @@ export default {
                     },
                     onSuccess: (data) => {
                         this.reset();
+
+                        if(data?.props?.message){
+                          this.form.hasMessage = true;
+                          this.form.successMessage = data?.props?.message;
+                        }
+
                         this.$emit('onSuccess', data);
                     }
                 });
@@ -118,7 +133,7 @@ export default {
         }
     },
     expose: ['submit', 'reset'],
-}
+})
 
 </script>
 
@@ -137,6 +152,9 @@ export default {
                 </ul>
             </Alert>
         </slot>
+        <slot name="message" v-if="form.hasMessage" :form="form">
+            <Alert type="success" v-html="form.successMessage"></Alert>
+        </slot>
         <slot :form="form" :submit="submit"/>
     </form>
 </template>

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