@finema/core 3.8.0 → 3.9.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>
@@ -94,12 +94,18 @@ const theme = computed(
     disabled: wrapperProps.value.disabled
   })
 );
-const handleDownloadFile = () => {
-  if (value.value?.url && value.value?.name) {
+const handleDownloadFile = async () => {
+  const fileValue = value.value;
+  if (fileValue instanceof File) {
+    const blobUrl = URL.createObjectURL(fileValue);
     const a = document.createElement("a");
-    a.href = value.value.url;
-    a.download = value.value.name;
+    a.href = blobUrl;
+    a.download = fileValue.name;
+    document.body.appendChild(a);
     a.click();
+    a.remove();
+    URL.revokeObjectURL(blobUrl);
+    return;
   }
 };
 </script>

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.d.ts

@@ -0,0 +1,16 @@
+import { Extension } from '@tiptap/core';
+import type { AxiosRequestConfig } from 'axios';
+export interface ImagePasteOptions {
+    requestOptions?: Omit<AxiosRequestConfig, 'baseURL'> & {
+        baseURL: string;
+    };
+    uploadPathURL?: string;
+    bodyKey?: string;
+    responseURL?: string;
+    responsePath?: string;
+    responseName?: string;
+    responseSize?: string;
+    responseID?: string;
+    maxSize?: number;
+}
+export declare const ImagePaste: Extension<ImagePasteOptions, any>;

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

@@ -0,0 +1,106 @@
+import { Extension } from "@tiptap/core";
+import { Plugin, PluginKey, TextSelection } from "@tiptap/pm/state";
+import { useUploadLoader } from "#core/composables/useUpload";
+import { _get } from "#core/utils/lodash";
+export const ImagePaste = Extension.create({
+  name: "imagePaste",
+  addOptions() {
+    return {
+      bodyKey: "file",
+      responseURL: "url",
+      responsePath: "path",
+      responseName: "name",
+      responseSize: "size",
+      responseID: "id"
+    };
+  },
+  addProseMirrorPlugins() {
+    const options = this.options;
+    return [
+      new Plugin({
+        key: new PluginKey("imagePaste"),
+        props: {
+          handlePaste: async (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);
+                  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 (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);
+                }
+              }
+            }
+            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>