inertia-bootstrap-forms 1.0.81 → 1.0.84

package/index.d.ts

@@ -200,7 +200,55 @@ export const UppyInput: DefineComponent<{
 >;
 export const FileInput: DefineComponent<{}, {}, any>;
 export const SimpleUploader: DefineComponent<{}, {}, any>;
-export const FormContainer: DefineComponent<{}, {}, any>;
+export const FormContainer: DefineComponent<{
+    url: {
+        type: String,
+        default: '',
+        required: false,
+    },
+    method: {
+        default: 'post'
+    },
+    only: {
+        type: Array,
+        default: [],
+        required: false,
+    },
+    modelValue: {
+        type: Object,
+        default: {},
+        required: false,
+    },
+    options: {
+        type: Object,
+        default: {},
+        required: false,
+    },
+    resetOnSuccess: {
+        type: Boolean,
+        default: true,
+    },
+    submitHandler: {
+        type: Function,
+        default: null,
+        required: false,
+    },
+}, {}, any,
+    {},
+    {},
+    {},
+    {},
+    {
+        'update:modelValue': (data) => void,
+        'submit': (event) => void,
+        'reset': (file) => void,
+        'onStart': () => void,
+        'onFinish': (data) => void,
+        'onSuccess': (data) => void,
+        'onError': (errors) => void,
+        'change': (data) => void,
+    }
+>;
 export const FormLabel: DefineComponent<{}, {}, any>;
 export const GroupControl: DefineComponent<{}, {}, any>;
 export const LocationInput: DefineComponent<{

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "inertia-bootstrap-forms",
-    "version": "1.0.81",
+    "version": "1.0.84",
     "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/FormContainer.vue

@@ -25,6 +25,15 @@ export default defineComponent({
       default: {},
       required: false,
     },
+    options: {
+      type: Object,
+      default: {},
+      required: false,
+    },
+    resetOnSuccess: {
+      type: Boolean,
+      default: true,
+    },
     submitHandler: {
       type: Function,
       default: null,
@@ -37,6 +46,7 @@ export default defineComponent({
     const form = useForm({
       hasMessage: false,
       successMessage: null,
+      ...props.options,
       ...formData
     });
 
@@ -132,6 +142,10 @@ export default defineComponent({
               this.form.successMessage = data?.props?.message;
             }
 
+            if (this.resetOnSuccess) {
+              this.form?.reset();
+            }
+
             this.$emit('onSuccess', data);
           }
         });

package/src/UppyInput.vue

@@ -3,10 +3,10 @@
     <UppyContextProvider :name="'uu' + name" :uppy="uppy">
       <slot :uppy="uppy">
         <FilesList class="uppy-file-lists"/>
-        <Dropzone/>
+        <Dropzone class="uppy-drop-zone"/>
       </slot>
     </UppyContextProvider>
-    <div class="uppy-input-area--caption small text-body-secondary fst-italic" v-if="restrictionCaption">{{restrictionCaption}}</div>
+    <div class="uppy-input-area--caption small text-body-secondary fst-italic" v-if="restrictionCaption">{{ restrictionCaption }}</div>
   </div>
 </template>
 
@@ -45,6 +45,7 @@ const inputEl = ref(null);
 const uppy = shallowRef(null);
 const isResetting = ref(false);
 const isUnmounting = ref(false);
+const uploadingFiles = ref(0);
 
 // Inject form and group contexts
 const form = inject("form", {value: {}, errors: {}, getID: n => n});
@@ -76,11 +77,18 @@ uppy.value = new Uppy({
   },
 });
 
+uppy.value.on('upload', () => {
+  uploadingFiles.value = uppy.value.getFiles().filter(f => !f.progress.uploadComplete).length;
+  emits('upload');
+});
+
 uppy.value.on('before-upload', (files) => {
   emits('beforeUpload', files);
 });
 
 uppy.value.on('upload-success', (file, response) => {
+  uploadingFiles.value = Math.max(0, uploadingFiles.value - 1);
+
   const result = response.body ?? response;
   if (props.multiple) {
     const currentValues = Array.isArray(modelValue.value) ? modelValue.value : [];
@@ -119,7 +127,15 @@ uppy.value.on('file-removed', (file) => {
 });
 
 uppy.value.on('progress', (progress) => {
-  form.value['uploading'] = (progress >= 100 || progress <= 0) ? null : progress;
+  if (progress <= 0) {
+    form.value['uploading'] = null;
+  } else if (progress >= 100) {
+    // هنوز منتظر جواب سرور - uploading رو null نکن
+    form.value['uploading'] = uploadingFiles.value > 0 ? 99 : null;
+  } else {
+    form.value['uploading'] = progress;
+  }
+
   emits('progress', progress)
 });
 uppy.value.on('upload-progress', (file, progress) => emits('upload-progress', file, progress));
@@ -128,13 +144,20 @@ uppy.value.on('cancel-all', () => emits('cancel-all'));
 uppy.value.on('retry-all', () => emits('retry-all'));
 uppy.value.on('upload-stalled', (error, files) => emits('upload-stalled', error, files));
 uppy.value.on('upload-retry', (file) => emits('upload-retry', file));
-uppy.value.on('complete', (result) => emits('complete', result));
+
+uppy.value.on('complete', (result) => {
+  uploadingFiles.value = 0;
+  form.value['uploading'] = null;
+  emits('complete', result);
+});
 
 uppy.value.on('error', (error) => {
   emits('error', error)
 });
 
 uppy.value.on('upload-error', (file, error, response) => {
+  uploadingFiles.value = Math.max(0, uploadingFiles.value - 1);
+
   const errorMessage = JSON.parse(response.response)?.message ?? error;
   handleError(errorMessage);
   emits('upload-error', file, error, response, errorMessage)
@@ -169,6 +192,13 @@ onMounted(() => {
   if (uppy.value?.opts?.restrictions) {
     restrictionCaption.value = buildRestrictionsCaption(uppy.value.opts.restrictions)
   }
+
+
+  if (inputEl && uppy.value?.opts?.locale?.strings?.dropzoneText) {
+    inputEl.value?.querySelectorAll('[data-uppy-element="dropzone"]>div>div>p')?.forEach(el => {
+      el.innerHTML = uppy.value?.opts?.locale?.strings?.dropzoneText;
+    });
+  }
 });
 
 onBeforeUnmount(() => {
@@ -207,6 +237,7 @@ function showError(message) {
 }
 
 const niceBytesUnits = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
 function niceBytes(x) {
   let l = 0, n = parseInt(x, 10) || 0;
   while (n >= 1024 && ++l) {
@@ -236,7 +267,7 @@ function buildRestrictionsCaption(restrictions) {
     parts.push(`فقط فایل‌های ${types}`);
   }
 
-  if (maxNumberOfFiles) {
+  if (maxNumberOfFiles && maxNumberOfFiles > 1) {
     parts.push(`امکان انتخاب حداکثر ${maxNumberOfFiles} فایل`);
   }