@finema/core 3.9.0 → 3.10.0

package/dist/runtime/components/Form/InputToggle/index.vue

@@ -1,21 +1,21 @@
 <template>
-  <FieldWrapper
-    v-bind="wrapperProps"
-    label=""
-    description=""
-  >
-    <Switch
-      :model-value="value"
-      :disabled="wrapperProps.disabled"
-      :name="name"
-      :ui="ui"
-      :label="label"
-      :description="description"
-      :loading="loading"
-      :loading-icon="loadingIcon"
-      @update:modelValue="onChange"
-    />
-  </FieldWrapper>
+  <FieldWrapper
+    v-bind="wrapperProps"
+    label=""
+    description=""
+  >
+    <Switch
+      :model-value="value"
+      :disabled="wrapperProps.disabled"
+      :name="name"
+      :ui="ui"
+      :label="label"
+      :description="description"
+      :loading="loading"
+      :loading-icon="loadingIcon"
+      @update:modelValue="onChange"
+    />
+  </FieldWrapper>
 </template>
 
 <script setup>

package/dist/runtime/components/Form/InputUploadDropzone/index.vue

@@ -1,34 +1,34 @@
 <template>
-  <FieldWrapper v-bind="wrapperProps">
-    <div
-      ref="dropzoneRef"
-      :class="theme.base()"
-    >
-      <div :class="theme.wrapper()">
-        <!-- Empty State -->
-        <EmptyState
-          v-if="uploadState.isEmpty.value"
-          :theme="theme"
-          :select-file-label="selectFileLabel"
-          :select-file-sub-label="selectFileSubLabel"
-          :placeholder="placeholder"
-          @open-file="uploadState.handleOpenFile"
-        />
-
-        <!-- Success State -->
-        <SuccessState
-          v-if="uploadState.isSuccess.value"
-          :theme="theme"
-          :value="value"
-          :disabled="wrapperProps.disabled"
-          :readonly="wrapperProps.readonly"
-          @preview="uploadState.handlePreview"
-          @download="handleDownloadFile"
-          @delete="uploadState.handleDeleteFile"
-        />
-      </div>
-    </div>
-  </FieldWrapper>
+  <FieldWrapper v-bind="wrapperProps">
+    <div
+      ref="dropzoneRef"
+      :class="theme.base()"
+    >
+      <div :class="theme.wrapper()">
+        <!-- Empty State -->
+        <EmptyState
+          v-if="uploadState.isEmpty.value"
+          :theme="theme"
+          :select-file-label="selectFileLabel"
+          :select-file-sub-label="selectFileSubLabel"
+          :placeholder="placeholder"
+          @open-file="uploadState.handleOpenFile"
+        />
+
+        <!-- Success State -->
+        <SuccessState
+          v-if="uploadState.isSuccess.value"
+          :theme="theme"
+          :value="value"
+          :disabled="wrapperProps.disabled"
+          :readonly="wrapperProps.readonly"
+          @preview="uploadState.handlePreview"
+          @download="handleDownloadFile"
+          @delete="uploadState.handleDeleteFile"
+        />
+      </div>
+    </div>
+  </FieldWrapper>
 </template>
 
 <script setup>

package/dist/runtime/components/Form/InputUploadDropzoneAuto/index.vue

@@ -1,54 +1,54 @@
 <template>
-  <FieldWrapper v-bind="wrapperProps">
-    <div
-      ref="dropzoneRef"
-      :class="theme.base()"
-    >
-      <div :class="theme.wrapper()">
-        <!-- Empty State -->
-        <EmptyState
-          v-if="uploadState.isEmpty.value"
-          :theme="theme"
-          :select-file-label="selectFileLabel"
-          :select-file-sub-label="selectFileSubLabel"
-          :placeholder="placeholder"
-          @open-file="uploadState.handleOpenFile"
-        />
-
-        <!-- Loading State -->
-        <LoadingState
-          v-if="uploadState.isUploading.value"
-          :theme="theme"
-          :selected-file="uploadState.selectedFile.value"
-          :percent="uploadState.percent.value"
-          :uploading-label="uploadingLabel"
-        />
-
-        <!-- Success State -->
-        <SuccessState
-          v-if="uploadState.isSuccess.value"
-          :theme="theme"
-          :value="value"
-          :disabled="wrapperProps.disabled"
-          :readonly="wrapperProps.readonly"
-          @preview="uploadState.handlePreview"
-          @download="handleDownloadFile"
-          @delete="uploadState.handleDeleteFile"
-        />
-
-        <!-- Failed State -->
-        <FailedState
-          v-if="uploadState.isError.value"
-          :theme="theme"
-          :selected-file="uploadState.selectedFile.value"
-          :upload-failed-label="uploadFailedLabel"
-          :retry-label="retryLabel"
-          @retry="uploadState.handleRetryUpload"
-          @delete="uploadState.handleDeleteFile"
-        />
-      </div>
-    </div>
-  </FieldWrapper>
+  <FieldWrapper v-bind="wrapperProps">
+    <div
+      ref="dropzoneRef"
+      :class="theme.base()"
+    >
+      <div :class="theme.wrapper()">
+        <!-- Empty State -->
+        <EmptyState
+          v-if="uploadState.isEmpty.value"
+          :theme="theme"
+          :select-file-label="selectFileLabel"
+          :select-file-sub-label="selectFileSubLabel"
+          :placeholder="placeholder"
+          @open-file="uploadState.handleOpenFile"
+        />
+
+        <!-- Loading State -->
+        <LoadingState
+          v-if="uploadState.isUploading.value"
+          :theme="theme"
+          :selected-file="uploadState.selectedFile.value"
+          :percent="uploadState.percent.value"
+          :uploading-label="uploadingLabel"
+        />
+
+        <!-- Success State -->
+        <SuccessState
+          v-if="uploadState.isSuccess.value"
+          :theme="theme"
+          :value="value"
+          :disabled="wrapperProps.disabled"
+          :readonly="wrapperProps.readonly"
+          @preview="uploadState.handlePreview"
+          @download="handleDownloadFile"
+          @delete="uploadState.handleDeleteFile"
+        />
+
+        <!-- Failed State -->
+        <FailedState
+          v-if="uploadState.isError.value"
+          :theme="theme"
+          :selected-file="uploadState.selectedFile.value"
+          :upload-failed-label="uploadFailedLabel"
+          :retry-label="retryLabel"
+          @retry="uploadState.handleRetryUpload"
+          @delete="uploadState.handleDeleteFile"
+        />
+      </div>
+    </div>
+  </FieldWrapper>
 </template>
 
 <script setup>

package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/index.vue

@@ -1,54 +1,54 @@
 <template>
-  <FieldWrapper v-bind="wrapperProps">
-    <div
-      ref="dropzoneRef"
-      :class="theme.base()"
-    >
-      <div :class="theme.wrapper()">
-        <!-- Empty State -->
-        <EmptyState
-          :theme="theme"
-          :select-file-label="selectFileLabel"
-          :select-file-sub-label="selectFileSubLabel"
-          :placeholder="placeholder"
-          @open-file="uploadState.handleOpenFile"
-        />
-      </div>
-    </div>
-    <!-- Multiple Files State -->
-    <MultipleFilesState
-      v-if="!uploadState.isEmpty.value"
-      :theme="theme"
-      :file-items="uploadState.fileItems.value"
-      :disabled="wrapperProps.disabled"
-      :readonly="wrapperProps.readonly"
-      :upload-failed-label="uploadFailedLabel"
-      :retry-label="retryLabel"
-      @preview="uploadState.handlePreview"
-      @download="handleDownloadFile"
-      @delete="uploadState.handleDeleteFile"
-      @retry="uploadState.handleRetryUpload"
-    />
-
-    <!-- Success State -->
-    <div
-      v-for="(item, index) in value"
-      :key="index"
-      :class="theme.multipleFilesWrapper()"
-    >
-      <div :class="theme.fileItemWrapper()">
-        <SuccessState
-          :theme="theme"
-          :value="item"
-          :disabled="wrapperProps.disabled"
-          :readonly="wrapperProps.readonly"
-          @preview="uploadState.handlePreview(item)"
-          @download="handleDownloadFile(item)"
-          @delete="handleDeleteFile(index, item)"
-        />
-      </div>
-    </div>
-  </FieldWrapper>
+  <FieldWrapper v-bind="wrapperProps">
+    <div
+      ref="dropzoneRef"
+      :class="theme.base()"
+    >
+      <div :class="theme.wrapper()">
+        <!-- Empty State -->
+        <EmptyState
+          :theme="theme"
+          :select-file-label="selectFileLabel"
+          :select-file-sub-label="selectFileSubLabel"
+          :placeholder="placeholder"
+          @open-file="uploadState.handleOpenFile"
+        />
+      </div>
+    </div>
+    <!-- Multiple Files State -->
+    <MultipleFilesState
+      v-if="!uploadState.isEmpty.value"
+      :theme="theme"
+      :file-items="uploadState.fileItems.value"
+      :disabled="wrapperProps.disabled"
+      :readonly="wrapperProps.readonly"
+      :upload-failed-label="uploadFailedLabel"
+      :retry-label="retryLabel"
+      @preview="uploadState.handlePreview"
+      @download="handleDownloadFile"
+      @delete="uploadState.handleDeleteFile"
+      @retry="uploadState.handleRetryUpload"
+    />
+
+    <!-- Success State -->
+    <div
+      v-for="(item, index) in value"
+      :key="index"
+      :class="theme.multipleFilesWrapper()"
+    >
+      <div :class="theme.fileItemWrapper()">
+        <SuccessState
+          :theme="theme"
+          :value="item"
+          :disabled="wrapperProps.disabled"
+          :readonly="wrapperProps.readonly"
+          @preview="uploadState.handlePreview(item)"
+          @download="handleDownloadFile(item)"
+          @delete="handleDeleteFile(index, item)"
+        />
+      </div>
+    </div>
+  </FieldWrapper>
 </template>
 
 <script setup>

package/dist/runtime/components/Form/InputUploadImageAuto/index.vue

@@ -1,54 +1,54 @@
 <template>
-  <FieldWrapper v-bind="wrapperProps">
-    <div
-      ref="dropzoneRef"
-      :class="theme.base()"
-    >
-      <div :class="theme.wrapper()">
-        <!-- Empty State -->
-        <EmptyState
-          v-if="uploadState.isEmpty.value"
-          :theme="theme"
-          :select-file-label="selectFileLabel"
-          :select-file-sub-label="selectFileSubLabel"
-          :placeholder="placeholder"
-          @open-file="uploadState.handleOpenFile"
-        />
-
-        <!-- Loading State -->
-        <LoadingState
-          v-if="uploadState.isUploading.value"
-          :theme="theme"
-          :selected-file="uploadState.selectedFile.value"
-          :percent="uploadState.percent.value"
-          :uploading-label="uploadingLabel"
-        />
-
-        <!-- Success State -->
-        <SuccessState
-          v-if="uploadState.isSuccess.value"
-          :theme="theme"
-          :value="value"
-          :disabled="wrapperProps.disabled"
-          :readonly="wrapperProps.readonly"
-          @preview="uploadState.handlePreview"
-          @download="handleDownloadFile"
-          @delete="uploadState.handleDeleteFile"
-        />
-
-        <!-- Failed State -->
-        <FailedState
-          v-if="uploadState.isError.value"
-          :theme="theme"
-          :selected-file="uploadState.selectedFile.value"
-          :upload-failed-label="uploadFailedLabel"
-          :retry-label="retryLabel"
-          @retry="uploadState.handleRetryUpload"
-          @delete="uploadState.handleDeleteFile"
-        />
-      </div>
-    </div>
-  </FieldWrapper>
+  <FieldWrapper v-bind="wrapperProps">
+    <div
+      ref="dropzoneRef"
+      :class="theme.base()"
+    >
+      <div :class="theme.wrapper()">
+        <!-- Empty State -->
+        <EmptyState
+          v-if="uploadState.isEmpty.value"
+          :theme="theme"
+          :select-file-label="selectFileLabel"
+          :select-file-sub-label="selectFileSubLabel"
+          :placeholder="placeholder"
+          @open-file="uploadState.handleOpenFile"
+        />
+
+        <!-- Loading State -->
+        <LoadingState
+          v-if="uploadState.isUploading.value"
+          :theme="theme"
+          :selected-file="uploadState.selectedFile.value"
+          :percent="uploadState.percent.value"
+          :uploading-label="uploadingLabel"
+        />
+
+        <!-- Success State -->
+        <SuccessState
+          v-if="uploadState.isSuccess.value"
+          :theme="theme"
+          :value="value"
+          :disabled="wrapperProps.disabled"
+          :readonly="wrapperProps.readonly"
+          @preview="uploadState.handlePreview"
+          @download="handleDownloadFile"
+          @delete="uploadState.handleDeleteFile"
+        />
+
+        <!-- Failed State -->
+        <FailedState
+          v-if="uploadState.isError.value"
+          :theme="theme"
+          :selected-file="uploadState.selectedFile.value"
+          :upload-failed-label="uploadFailedLabel"
+          :retry-label="retryLabel"
+          @retry="uploadState.handleRetryUpload"
+          @delete="uploadState.handleDeleteFile"
+        />
+      </div>
+    </div>
+  </FieldWrapper>
 </template>
 
 <script setup>

package/dist/runtime/components/Form/InputWYSIWYG/EditorImagePasteExtension.js

@@ -20,83 +20,100 @@ export const ImagePaste = Extension.create({
       new Plugin({
         key: new PluginKey("imagePaste"),
         props: {
-          handlePaste: async (view, event) => {
+          handlePaste: (view, event) => {
             const items = Array.from(event.clipboardData?.items || []);
             const imageItems = items.filter((item) => item.type.includes("image"));
             if (imageItems.length === 0) {
               return false;
             }
             event.preventDefault();
-            for (const item of imageItems) {
-              const file = item.getAsFile();
-              if (!file) continue;
-              if (options.maxSize && file.size > options.maxSize * 1024) {
-                console.warn(`Image size (${file.size} bytes) exceeds maximum allowed size (${options.maxSize} KB)`);
-                continue;
-              }
-              if (!options.requestOptions) {
-                console.warn("ImagePaste: requestOptions is not configured");
-                continue;
-              }
-              const {
-                schema
-              } = view.state;
-              const pos = view.state.selection.from;
-              if (schema.nodes.imageUpload) {
-                const transaction = view.state.tr.insert(pos, schema.nodes.imageUpload.create());
-                view.dispatch(transaction);
-              }
-              const request = {
-                requestOptions: options.requestOptions,
-                pathURL: options.uploadPathURL
-              };
-              const uploadLoader = useUploadLoader(request);
-              const formData = new FormData();
-              const bodyKey = options.bodyKey || "file";
-              formData.append(bodyKey, file);
-              await uploadLoader.run({
-                data: formData
-              });
-              if (uploadLoader.status.value.isSuccess && uploadLoader.data.value) {
-                const responseURL = options.responseURL || "url";
-                const url = _get(uploadLoader.data.value, responseURL);
-                if (!url) {
-                  console.error("ImagePaste: Could not find URL in response", uploadLoader.data.value);
+            const uploadImages = async () => {
+              for (const item of imageItems) {
+                const file = item.getAsFile();
+                if (!file) continue;
+                if (options.maxSize && file.size > options.maxSize * 1024) {
+                  console.warn(`Image size (${file.size} bytes) exceeds maximum allowed size (${options.maxSize} KB)`);
                   continue;
                 }
-                const currentState = view.state;
-                let placeholderPos = -1;
-                currentState.doc.descendants((node, nodePos) => {
-                  if (node.type.name === "imageUpload" && placeholderPos === -1) {
-                    placeholderPos = nodePos;
-                    return false;
-                  }
+                if (!options.requestOptions) {
+                  console.warn("ImagePaste: requestOptions is not configured");
+                  continue;
+                }
+                const {
+                  schema
+                } = view.state;
+                const pos = view.state.selection.from;
+                if (schema.nodes.imageUpload) {
+                  const transaction = view.state.tr.insert(pos, schema.nodes.imageUpload.create({
+                    loading: true
+                  }));
+                  view.dispatch(transaction);
+                }
+                const request = {
+                  requestOptions: options.requestOptions,
+                  pathURL: options.uploadPathURL
+                };
+                const uploadLoader = useUploadLoader(request);
+                const formData = new FormData();
+                const bodyKey = options.bodyKey || "file";
+                formData.append(bodyKey, file);
+                await uploadLoader.run({
+                  data: formData
                 });
-                if (placeholderPos !== -1 && schema.nodes.image) {
-                  const imageNode = schema.nodes.image.create({
-                    src: url
+                if (uploadLoader.status.value.isSuccess && uploadLoader.data.value) {
+                  const responseURL = options.responseURL || "url";
+                  const url = _get(uploadLoader.data.value, responseURL);
+                  if (!url) {
+                    console.error("ImagePaste: Could not find URL in response", uploadLoader.data.value);
+                    const currentState2 = view.state;
+                    let placeholderPos2 = -1;
+                    currentState2.doc.descendants((node, nodePos) => {
+                      if (node.type.name === "imageUpload" && placeholderPos2 === -1) {
+                        placeholderPos2 = nodePos;
+                        return false;
+                      }
+                    });
+                    if (placeholderPos2 !== -1) {
+                      const tr = currentState2.tr.delete(placeholderPos2, placeholderPos2 + 1);
+                      view.dispatch(tr);
+                    }
+                    continue;
+                  }
+                  const currentState = view.state;
+                  let placeholderPos = -1;
+                  currentState.doc.descendants((node, nodePos) => {
+                    if (node.type.name === "imageUpload" && placeholderPos === -1) {
+                      placeholderPos = nodePos;
+                      return false;
+                    }
                   });
-                  let tr = currentState.tr.delete(placeholderPos, placeholderPos + 1).insert(placeholderPos, imageNode);
-                  const resolvedPos = tr.doc.resolve(placeholderPos + imageNode.nodeSize);
-                  tr = tr.setSelection(TextSelection.near(resolvedPos));
-                  view.dispatch(tr);
-                }
-              } else if (uploadLoader.status.value.isError) {
-                console.error("ImagePaste: Upload failed", uploadLoader.status.value.errorData);
-                const currentState = view.state;
-                let placeholderPos = -1;
-                currentState.doc.descendants((node, nodePos) => {
-                  if (node.type.name === "imageUpload" && placeholderPos === -1) {
-                    placeholderPos = nodePos;
-                    return false;
+                  if (placeholderPos !== -1 && schema.nodes.image) {
+                    const imageNode = schema.nodes.image.create({
+                      src: url
+                    });
+                    let tr = currentState.tr.delete(placeholderPos, placeholderPos + 1).insert(placeholderPos, imageNode);
+                    const resolvedPos = tr.doc.resolve(placeholderPos + imageNode.nodeSize);
+                    tr = tr.setSelection(TextSelection.near(resolvedPos));
+                    view.dispatch(tr);
+                  }
+                } else if (uploadLoader.status.value.isError) {
+                  console.error("ImagePaste: Upload failed", uploadLoader.status.value.errorData);
+                  const currentState = view.state;
+                  let placeholderPos = -1;
+                  currentState.doc.descendants((node, nodePos) => {
+                    if (node.type.name === "imageUpload" && placeholderPos === -1) {
+                      placeholderPos = nodePos;
+                      return false;
+                    }
+                  });
+                  if (placeholderPos !== -1) {
+                    const tr = currentState.tr.delete(placeholderPos, placeholderPos + 1);
+                    view.dispatch(tr);
                   }
-                });
-                if (placeholderPos !== -1) {
-                  const tr = currentState.tr.delete(placeholderPos, placeholderPos + 1);
-                  view.dispatch(tr);
                 }
               }
-            }
+            };
+            uploadImages();
             return true;
           }
         }

package/dist/runtime/components/Form/InputWYSIWYG/EditorImageUploadNode.vue

@@ -1,22 +1,22 @@
 <template>
-  <NodeViewWrapper>
-    <FileUpload
-      v-model="file"
-      accept="image/*"
-      label="Upload an image"
-      description="SVG, PNG, JPG or GIF"
-      :preview="false"
-      class="min-h-48"
-    >
-      <template #leading>
-        <Avatar
-          :icon="loading ? 'i-lucide-loader-circle' : 'i-lucide-image'"
-          size="xl"
-          :ui="{ icon: [loading && 'animate-spin'] }"
-        />
-      </template>
-    </FileUpload>
-  </NodeViewWrapper>
+  <NodeViewWrapper>
+    <FileUpload
+      v-model="file"
+      accept="image/*"
+      label="Upload an image"
+      description="SVG, PNG, JPG or GIF"
+      :preview="false"
+      class="min-h-48"
+    >
+      <template #leading>
+        <Avatar
+          :icon="loading ? 'i-lucide-loader-circle' : 'i-lucide-image'"
+          size="xl"
+          :ui="{ icon: [loading && 'animate-spin'] }"
+        />
+      </template>
+    </FileUpload>
+  </NodeViewWrapper>
 </template>
 
 <script setup>