inertia-bootstrap-forms 1.0.56 → 1.0.57

package/index.d.ts

@@ -10,6 +10,7 @@ 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 UppyInput from './src/UppyInput.vue';
 import FormContainer from './src/FormContainer.vue';
 import FormLabel from './src/FormLabel.vue';
 import GroupControl from './src/GroupControl.vue';
@@ -40,6 +41,7 @@ export {
     EditorInput,
     EmailInput,
     DropzoneInput,
+    UppyInput,
     FileInput,
     SimpleUploader,
     FormContainer,
@@ -72,6 +74,7 @@ const Vue3FormComponents = {
     countryCodes,
     EditorInput,
     DropzoneInput,
+    UppyInput,
     EmailInput,
     FileInput,
     SimpleUploader,
@@ -153,6 +156,44 @@ export const EditorInput: DefineComponent<{
 }, {}, any>;
 export const EmailInput: DefineComponent<{}, {}, any>;
 export const DropzoneInput: DefineComponent<{}, {}, any>;
+export const UppyInput: DefineComponent<{
+    name: {
+        type: String,
+        required: true,
+    },
+    multiple: {
+        type: Boolean,
+        default: false,
+    },
+    modelValue: String,
+    url: { type: String, default: "/upload" },
+    options: { type: Object, default: () => ({}) },
+},   {},
+    any,
+    {},
+    {},
+    {},
+    {},
+    {
+        'update:modelValue': (value: string) => void,
+        'file-added': (file) => void,
+        'file-removed': (file) => void,
+        'beforeUpload': (files) => void,
+        'progress': (progress) => void,
+        'upload': (uploadID, file) => void,
+        'upload-progress': (file, progress) => void,
+        'upload-error': (file, error, response) => void,
+        'upload-success': (file, response) => void,
+        'upload-pause': (file, isPaused) => void,
+        'complete': (result) => void,
+        'error': (error) => void,
+        'upload-retry': (file) => void,
+        'upload-stalled': (error, files) => void,
+        'retry-all': (files) => void,
+        'cancel-all': () => void,
+        'restriction-failed': (file, error) => void,
+    }
+>;
 export const FileInput: DefineComponent<{}, {}, any>;
 export const SimpleUploader: DefineComponent<{}, {}, any>;
 export const FormContainer: DefineComponent<{}, {}, any>;

package/package.json

@@ -1,12 +1,13 @@
 {
     "name": "inertia-bootstrap-forms",
-    "version": "1.0.56",
+    "version": "1.0.57",
     "description": "Create bootstrap forms with inertia and twitter bootstrap",
     "main": "dist/inertia-bootstrap-forms.cjs.js",
     "module": "dist/inertia-bootstrap-forms.es.js",
     "type": "module",
     "types": "./index.d.ts",
     "scripts": {
+        "dev": "vite build --watch",
         "build": "vite build"
     },
     "files": [
@@ -37,6 +38,13 @@
     ],
     "dependencies": {
         "@tinymce/tinymce-vue": "^6.1.0",
+        "@uppy/audio": "^3.1.0",
+        "@uppy/core": "^5.2.0",
+        "@uppy/dashboard": "^5.1.1",
+        "@uppy/drag-drop": "^5.1.0",
+        "@uppy/locales": "^5.1.1",
+        "@uppy/vue": "^3.2.0",
+        "@uppy/xhr-upload": "^5.1.1",
         "@vitejs/plugin-vue": "^5.2.4",
         "@vue-leaflet/vue-leaflet": "^0.10.1",
         "choices.js": "^11.1.0",

package/src/RangeSliderInput.vue

@@ -95,7 +95,6 @@ export default defineComponent({
     });
   },
   beforeUnmount() {
-    this.rangeSliderEn?.destroy();
   },
   data() {
     return {

package/src/UppyInput.vue

@@ -0,0 +1,184 @@
+<template>
+  <div class="uppy-input-area" ref="inputEl" v-if="uppy">
+    <UppyContextProvider :name="'uu' + name" :uppy="uppy">
+      <slot :uppy="uppy">
+        <FilesList class="uppy-file-lists"/>
+        <Dropzone/>
+      </slot>
+    </UppyContextProvider>
+  </div>
+</template>
+
+<script setup>
+import {computed, inject, onBeforeUnmount, onMounted, shallowRef, ref} from 'vue'
+import {
+  Dropzone,
+  FilesList,
+  UppyContextProvider,
+} from '@uppy/vue';
+import Uppy from '@uppy/core';
+
+import '@uppy/vue/css/style.css';
+import '@uppy/audio/css/style.min.css';
+
+const props = defineProps({
+  name: {type: String, required: true},
+  multiple: {type: Boolean, default: false},
+  useXHR: {type: Boolean, default: true},
+  XHRConfig: {type: Object, default: {}},
+  url: {type: String, default: '/upload'},
+  config: {type: Object, default: () => ({})},
+  errorHandler: {type: Function, default: null},
+})
+
+const emits = defineEmits([
+  'update:modelValue', 'file-added', 'file-removed', 'beforeUpload',
+  'progress', 'upload', 'upload-progress', 'upload-error',
+  'upload-success', 'upload-pause', 'complete', 'error',
+  'upload-retry', 'upload-stalled', 'retry-all', 'cancel-all',
+  'restriction-failed',
+])
+
+const inputEl = ref(null);
+const uppy = shallowRef(null);
+
+// Inject form and group contexts
+const form = inject("form", {value: {}, errors: {}, getID: n => n});
+const group = inject("group", 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;
+    }
+    emits("update:modelValue", val);
+  }
+});
+
+// ایجاد اینستنس اختصاصی برای هر کامپوننت
+uppy.value = new Uppy({
+  id: props.name, // جلوگیری از تداخل با استفاده از نام پروپ
+  autoProceed: true,
+  ...props.config,
+  restrictions: {
+    maxNumberOfFiles: props.multiple ? 10 : 1,
+    ...(props.config?.restrictions || {})
+  },
+});
+
+uppy.value.on('before-upload', (files) => {
+  emits('beforeUpload', files);
+});
+
+uppy.value.on('upload-success', (file, response) => {
+  const result = response.body ?? response;
+  if (props.multiple) {
+    const currentValues = Array.isArray(modelValue.value) ? modelValue.value : [];
+    modelValue.value = [...currentValues, result];
+  } else {
+    modelValue.value = result;
+  }
+  emits('upload-success', file, response);
+});
+
+uppy.value.on('file-added', (file) => emits('file-added', file));
+uppy.value.on('file-removed', (file) => {
+  if (props.multiple && Array.isArray(modelValue.value)) {
+    const serverResponse = file.response?.body ?? file.response;
+    modelValue.value = modelValue.value.filter(item => {
+      // مقایسه بر اساس شناسه یا کل آبجکت (بسته به ساختار ارسالی سرور شما)
+      // اگر سرور ID برمی‌گرداند: return item.id !== serverResponse.id;
+      // اگر مستقیماً خود آبجکت است:
+      return JSON.stringify(item) !== JSON.stringify(serverResponse);
+    });
+  } else {
+    modelValue.value = null;
+  }
+
+  // بخش حذف از سرور
+  if (file.response) {
+    fetch(props.url, {
+      method: 'DELETE',
+      headers: {
+        'X-Requested-With': 'XMLHttpRequest',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(file.response.body ?? file.response),
+    });
+  }
+
+  emits('file-removed', file);
+});
+
+uppy.value.on('complete', (result) => emits('complete', result));
+uppy.value.on('error', (error) => emits('error', error));
+
+uppy.value.on('restriction-failed', (file, error) => {
+  if (props.errorHandler) {
+    props.errorHandler(error);
+  } else {
+    showError(error.message);
+  }
+  emits('restriction-failed', file, error);
+});
+
+onMounted(() => {
+  let XHR;
+  if (props.useXHR) {
+    import('@uppy/xhr-upload').then(module => {
+      XHR = module.default; // چون اکثر پکیج‌ها default export دارند
+      uppy.value.use(XHR, {
+        endpoint: props.url,
+        ...props.XHRConfig
+      });
+    });
+  }
+});
+
+onBeforeUnmount(() => {
+  if (uppy.value) {
+    uppy.value.destroy();
+  }
+});
+
+function showError(message) {
+  const errorEl = document.createElement('div');
+  errorEl.textContent = message;
+  errorEl.className = 'uppy-error';
+
+  if (inputEl.value) {
+    inputEl.value.prepend(errorEl);
+    setTimeout(() => errorEl.remove(), 3000);
+  }
+}
+</script>
+
+<style>
+.uppy-reset p {
+  margin-bottom: 0;
+}
+
+.uppy-file-lists > ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.uppy-input-area .uppy-error {
+  display: block;
+  padding: 5px;
+  background-color: #f8d7da;
+  border: 1px solid #f5c2c7;
+  color: #842029;
+  text-align: center;
+  border-radius: 0.5rem;
+  margin-bottom: 5px;
+}
+</style>

package/src/index.js

@@ -25,6 +25,7 @@ import TextInput from "./TextInput.vue";
 import DropzoneInput from "./DropzoneInput.vue";
 import SimpleUploader from "./SimpleUploader.vue";
 import RangeSliderInput from "./RangeSliderInput.vue";
+import UppyInput from "./UppyInput.vue";
 
 export {
     AmountInput,
@@ -39,6 +40,7 @@ export {
     DropzoneInput,
     SimpleUploader,
     RangeSliderInput,
+    UppyInput,
     GroupControl,
     FormContainer,
     LocationInput,