inertia-bootstrap-forms 2.1.21 → 3.0.0

package/src/DropzoneInput.vue

@@ -1,108 +1,130 @@
-<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>
+import { defineComponent, onMounted, ref, watch } from 'vue';
+import { fieldProps, useField } from './composables/useField.js';
+import { useDisposables } from './composables/useDisposables.js';
+import { useI18n } from './i18n.js';
+import { laravelHeaders } from './utils/http.js';
+
+/**
+ * Dropzone.js uploader. Import `dropzone/dist/dropzone.css` (and `basic.css`) in your application.
+ * Stored value: the JSON object returned by the endpoint (single) or an array of them (multiple).
+ */
+export default defineComponent({
+    name: 'DropzoneInput',
+    emits: ['update:modelValue', 'change', 'ready', 'added', 'success', 'error', 'removed', 'complete'],
+    props: {
+        ...fieldProps,
+        multiple: { type: Boolean, default: false },
+        url: { type: String, default: '/upload' },
+        /** Dropzone options (merged over the defaults). */
+        options: { type: Object, default: () => ({}) },
+        headers: { type: Object, default: () => ({}) },
+        locale: { type: String, default: null },
+    },
+    setup(props, { emit, expose }) {
+        const field = useField(props, emit);
+        const { t } = useI18n(() => props.locale);
+        const d = useDisposables();
+
+        const el = ref(null);
+        let dz = null;
+        let resetting = false;
+
+        const asArray = () => (Array.isArray(field.model.value) ? field.model.value : []);
+
+        onMounted(async () => {
+            const { default: Dropzone } = await import('dropzone');
+            if (d.isDisposed() || !el.value) return;
+
+            Dropzone.autoDiscover = false;
+
+            dz = new Dropzone(el.value, {
+                url: props.url,
+                addRemoveLinks: true,
+                maxFiles: props.multiple ? null : 1,
+                headers: laravelHeaders(props.headers),
+                ...props.options,
+            });
+
+            dz.on('addedfile', (file) => emit('added', file));
+            dz.on('complete', (file) => emit('complete', file));
+
+            dz.on('error', (file, response) => {
+                let message = t('upload.failed');
+                if (typeof response === 'string') message = response;
+                if (response?.message) message = response.message;
+
+                file.previewElement?.classList.add('dz-error');
+                const target = file.previewElement?.querySelector('[data-dz-errormessage]');
+                if (target) target.textContent = message;
+                emit('error', file, message);
+            });
+
+            dz.on('success', (file, response) => {
+                const result = response?.data ?? response;
+                field.model.value = props.multiple ? [...asArray(), result] : result;
+                field.emitChange(field.model.value);
+                emit('success', file, result);
+            });
+
+            dz.on('removedfile', async (file) => {
+                emit('removed', file);
+                if (resetting) return;
+
+                let data = file.xhr?.response;
+                if (!data) return;
+
+                try {
+                    data = JSON.parse(data);
+                    const info = data.data ?? data;
+
+                    field.model.value = props.multiple
+                        ? asArray().filter((f) => (f?.path ?? f) !== info.path)
+                        : null;
+                    field.emitChange(field.model.value);
+
+                    await fetch(props.url, {
+                        method: 'DELETE',
+                        headers: laravelHeaders({ 'Content-Type': 'application/json', ...props.headers }),
+                        credentials: 'same-origin',
+                        body: info.path,
+                    });
+                } catch (e) {
+                    // eslint-disable-next-line no-console
+                    console.error('[inertia-bootstrap-forms] Could not delete the uploaded file on the server', e);
+                }
+            });
+
+            // Release the dropzone (listeners, hidden input, previews) when the component unmounts
+            d.add(() => {
+                resetting = true;
+                try { dz?.destroy(); } catch (e) { /* noop */ }
+                dz = null;
+            });
+
+            emit('ready', dz);
+        });
+
+        // The form was reset: clear the previews without calling the DELETE endpoint
+        watch(
+            () => field.model.value,
+            (v) => {
+                const empty = v === null || v === undefined || v === '' || (Array.isArray(v) && !v.length);
+                if (empty && dz?.files?.length) {
+                    resetting = true;
+                    dz.removeAllFiles(true);
+                    resetting = false;
+                }
+            }
+        );
+
+        expose({ dropzone: () => dz });
+
+        return { ...field, el };
+    },
 });
 </script>
 
 <template>
-  <div class="inertia-dropzone-input dropzone" ref="dz"></div>
+    <div ref="el" class="inertia-dropzone-input dropzone" :class="{ 'is-invalid': isInvalid }" :id="inputId"></div>
 </template>

package/src/EditorInput.vue

@@ -1,117 +1,58 @@
 <script>
-import Editor from '@tinymce/tinymce-vue';
-import {computed, defineComponent, inject, ref} from "vue";
+import { defineAsyncComponent, defineComponent, ref, watch } from 'vue';
+import { fieldProps, useField } from './composables/useField.js';
 
+const Editor = defineAsyncComponent(() => import('@tinymce/tinymce-vue'));
+
+/** TinyMCE rich text editor. The HTML is stored in the FormContainer's v-model. */
 export default defineComponent({
-  emits: ['update:modelValue', 'setContent'],
-  components: {Editor},
-  props: {
-    name: {
-      type: String,
-      required: true,
-    },
-    placeholder: {
-      type: String,
-      default: '',
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    modelValue: String,
-    options: {
-      type: Object,
-      default: {},
-      required: false,
+    name: 'EditorInput',
+    components: { Editor },
+    emits: ['update:modelValue', 'change', 'init', 'focus', 'blur'],
+    props: {
+        ...fieldProps,
+        placeholder: { type: String, default: '' },
+        /** TinyMCE `init` options. */
+        options: { type: Object, default: () => ({}) },
+        height: { type: [Number, String], default: null },
+        /** Self-hosted TinyMCE script (`tinymceScriptSrc`) or Tiny Cloud api key. */
+        tinymceScriptSrc: { type: String, default: null },
+        apiKey: { type: String, default: null },
     },
-  },
-  setup(props, {expose, emit}) {
-    const editorRef = ref(null)
-    const tinyInstance = ref(null)
-
-    const handleInit = (evt, editor) => {
-      tinyInstance.value = editor
-    }
-
-    expose({
-      editor: () => tinyInstance.value
-    })
+    setup(props, { emit, expose }) {
+        const field = useField(props, emit);
+        const tiny = ref(null);
+
+        function onInit(event, editor) {
+            tiny.value = editor;
+            editor.mode?.set(field.isDisabled.value || props.readonly ? 'readonly' : 'design');
+            emit('init', editor);
+        }
 
-    let form = inject('form', {
-      errors: {},
-      getID(name) {
-        return name;
-      }
-    });
-    let group = inject('group', {});
+        watch(
+            () => field.isDisabled.value || props.readonly,
+            (locked) => tiny.value?.mode?.set(locked ? 'readonly' : 'design')
+        );
 
-    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;
-        }
-      }
-    });
+        expose({ editor: () => tiny.value });
 
-    return {modelValue, form, group, editorRef, handleInit};
-  },
-})
+        return { ...field, onInit };
+    },
+});
 </script>
 
 <template>
-  <Editor
-      ref="editorRef"
-      @init="handleInit"
-      v-model="modelValue"
-      class="tiny-editor-input-el"
-      :init="{
-        disabled: this.disabled,
-        placeholder: this.placeholder,
-        ...options
-      }"
-  />
+    <Editor
+        v-model="model"
+        :id="inputId"
+        :disabled="isDisabled || readonly"
+        :tinymce-script-src="tinymceScriptSrc || undefined"
+        :api-key="apiKey || undefined"
+        :init="{ placeholder, ...(height ? { height } : {}), ...options }"
+        class="tiny-editor-input-el"
+        @init="onInit"
+        @change="emitChange(model, $event)"
+        @focus="$emit('focus', $event)"
+        @blur="$emit('blur', $event)"
+    />
 </template>
-<style>
-textarea.tiny-editor-input-el {
-  width: 100%;
-  min-height: 200px;
-}
-
-textarea.tiny-editor-input-el,
-.tox.tox-tinymce {
-  background-color: transparent;
-  border: 0;
-  outline: none;
-  background-image: url("css/loader.gif");
-  background-repeat: no-repeat;
-  background-position: center center;
-}
-
-.tox .tox-edit-area::before {
-  display: none;
-}
-
-.tox .tox-throbber{
-  z-index: var(--bs-dropdown-zindex, 900) !important;
-}
-
-.tox:not(.tox-tinymce-inline) .tox-editor-header,
-.tox .tox-toolbar-overlord,
-.tox .tox-toolbar, .tox .tox-toolbar__overflow, .tox .tox-toolbar__primary,
-.tox .tox-statusbar{
-  background-color: var(--bs-body-bg, #fff) !important;
-  color: var(--bs-body-color, #000) !important;
-}
-
-.tox .tox-statusbar a,
-.tox .tox-statusbar__path-item,
-.tox .tox-statusbar__wordcount,
-.tox .tox-statusbar{
-  color: var(--bs-secondary-color, #cccc) !important;
-}
-</style>

package/src/EmailInput.vue

@@ -1,23 +1,24 @@
 <script>
-import TextInput from "./TextInput.vue";
-import {defineComponent} from "vue";
+import { defineComponent } from 'vue';
+import TextInput from './TextInput.vue';
+import { useI18n } from './i18n.js';
 
+/** Thin wrapper around TextInput (type="email"). All TextInput props and events are forwarded. */
 export default defineComponent({
-    components: {
-        TextInput
-    },
+    name: 'EmailInput',
+    components: { TextInput },
     props: {
-      FileInput: {
-            type: String,
-            default: 'email',
-            required: true,
-        },
+        name: { type: String, default: 'email' },
+        placeholder: { type: String, default: null },
+        locale: { type: String, default: null },
+    },
+    setup(props) {
+        const { t } = useI18n(() => props.locale);
+        return { t };
     },
-})
+});
 </script>
+
 <template>
-    <TextInput
-        :name="name"
-        placeholder="ایمیل خود را وارد کنید"
-        type="email"/>
+    <TextInput type="email" autocomplete="email" :name="name" :placeholder="placeholder ?? t('email.placeholder')" />
 </template>