@finema/core 3.23.2 → 3.24.0

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 ?? messages.upload.selectFile"
-          :select-file-sub-label="selectFileSubLabel ?? messages.upload.dropHere"
-          :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 ?? messages.upload.selectFile"
+          :select-file-sub-label="selectFileSubLabel ?? messages.upload.dropHere"
+          :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>
@@ -63,18 +63,9 @@ const props = defineProps({
   ui: { type: null, required: false },
   containerUi: { type: null, required: false }
 });
-const {
-  messages
-} = useCoreMessages();
-const {
-  wrapperProps,
-  handleChange: onChange,
-  setErrors,
-  value
-} = useFieldHOC(props);
-const acceptedFileTypes = computed(
-  () => typeof props.accept === "string" ? props.accept : props.accept?.join(",")
-);
+const { messages } = useCoreMessages();
+const { wrapperProps, handleChange: onChange, setErrors, value } = useFieldHOC(props);
+const acceptedFileTypes = computed(() => typeof props.accept === "string" ? props.accept : props.accept?.join(","));
 const dropzoneRef = useTemplateRef("dropzoneRef");
 const uploadState = useFileState({
   props,
@@ -86,15 +77,21 @@ const uploadState = useFileState({
   wrapperProps,
   dropzoneRef
 });
-useWatchChange(() => value.value, (newValue) => {
-  if (typeof newValue === "object" && newValue !== null) {
-    onChange(newValue);
-  } else {
-    onChange(void 0);
+useWatchChange(
+  () => value.value,
+  (newValue) => {
+    if (typeof newValue === "object" && newValue !== null) {
+      onChange(newValue);
+    } else {
+      onChange(void 0);
+    }
   }
-});
+);
 const theme = computed(
-  () => useUiConfig(uploadFileDropzoneTheme, "uploadFileDropzone")({
+  () => useUiConfig(
+    uploadFileDropzoneTheme,
+    "uploadFileDropzone"
+  )({
     dragover: uploadState.dropzone.isOverDropZone.value && uploadState.isEmpty.value,
     disabled: wrapperProps.value.disabled
   })

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 ?? messages.upload.selectFile"
-          :select-file-sub-label="selectFileSubLabel ?? messages.upload.dropHere"
-          :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 ?? messages.upload.uploading"
-        />
-
-        <!-- 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 ?? messages.upload.uploadFailed"
-          :retry-label="retryLabel ?? messages.upload.retry"
-          @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 ?? messages.upload.selectFile"
+          :select-file-sub-label="selectFileSubLabel ?? messages.upload.dropHere"
+          :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 ?? messages.upload.uploading"
+        />
+
+        <!-- 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 ?? messages.upload.uploadFailed"
+          :retry-label="retryLabel ?? messages.upload.retry"
+          @retry="uploadState.handleRetryUpload"
+          @delete="uploadState.handleDeleteFile"
+        />
+      </div>
+    </div>
+  </FieldWrapper>
 </template>
 
 <script setup>
@@ -97,18 +97,9 @@ const props = defineProps({
   ui: { type: null, required: false },
   containerUi: { type: null, required: false }
 });
-const {
-  messages
-} = useCoreMessages();
-const {
-  wrapperProps,
-  handleChange: onChange,
-  setErrors,
-  value
-} = useFieldHOC(props);
-const acceptedFileTypes = computed(
-  () => typeof props.accept === "string" ? props.accept : props.accept?.join(",")
-);
+const { messages } = useCoreMessages();
+const { wrapperProps, handleChange: onChange, setErrors, value } = useFieldHOC(props);
+const acceptedFileTypes = computed(() => typeof props.accept === "string" ? props.accept : props.accept?.join(","));
 const dropzoneRef = useTemplateRef("dropzoneRef");
 const uploadState = useUploadState({
   props,
@@ -121,7 +112,10 @@ const uploadState = useUploadState({
   dropzoneRef
 });
 const theme = computed(
-  () => useUiConfig(uploadFileDropzoneTheme, "uploadFileDropzone")({
+  () => useUiConfig(
+    uploadFileDropzoneTheme,
+    "uploadFileDropzone"
+  )({
     dragover: uploadState.dropzone.isOverDropZone.value && uploadState.isEmpty.value,
     disabled: wrapperProps.value.disabled,
     failed: uploadState.upload.status.value.isError

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 ?? messages.upload.selectFile"
-          :select-file-sub-label="selectFileSubLabel ?? messages.upload.dropHere"
-          :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 ?? messages.upload.uploadFailed"
-      :retry-label="retryLabel ?? messages.upload.retry"
-      @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 ?? messages.upload.selectFile"
+          :select-file-sub-label="selectFileSubLabel ?? messages.upload.dropHere"
+          :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 ?? messages.upload.uploadFailed"
+      :retry-label="retryLabel ?? messages.upload.retry"
+      @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>
@@ -97,20 +97,10 @@ const props = defineProps({
   ui: { type: null, required: false },
   containerUi: { type: null, required: false }
 });
-const {
-  messages,
-  format
-} = useCoreMessages();
-const {
-  wrapperProps,
-  handleChange: onChange,
-  setErrors,
-  value
-} = useFieldHOC(props);
+const { messages, format } = useCoreMessages();
+const { wrapperProps, handleChange: onChange, setErrors, value } = useFieldHOC(props);
 const dialog = useDialog();
-const acceptedFileTypes = computed(
-  () => typeof props.accept === "string" ? props.accept : props.accept?.join(",")
-);
+const acceptedFileTypes = computed(() => typeof props.accept === "string" ? props.accept : props.accept?.join(","));
 const dropzoneRef = useTemplateRef("dropzoneRef");
 const uploadState = useUploadStateMultiple({
   props,
@@ -123,7 +113,10 @@ const uploadState = useUploadStateMultiple({
   dropzoneRef
 });
 const theme = computed(
-  () => useUiConfig(uploadFileDropzoneTheme, "uploadFileDropzone")({
+  () => useUiConfig(
+    uploadFileDropzoneTheme,
+    "uploadFileDropzone"
+  )({
     dragover: uploadState.dropzone.isOverDropZone.value && uploadState.isEmpty.value,
     disabled: wrapperProps.value.disabled,
     failed: false

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 ?? messages.upload.selectImage"
-          :select-file-sub-label="selectFileSubLabel ?? messages.upload.dropHere"
-          :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 ?? messages.upload.uploading"
-        />
-
-        <!-- 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 ?? messages.upload.uploadFailed"
-          :retry-label="retryLabel ?? messages.upload.retry"
-          @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 ?? messages.upload.selectImage"
+          :select-file-sub-label="selectFileSubLabel ?? messages.upload.dropHere"
+          :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 ?? messages.upload.uploading"
+        />
+
+        <!-- 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 ?? messages.upload.uploadFailed"
+          :retry-label="retryLabel ?? messages.upload.retry"
+          @retry="uploadState.handleRetryUpload"
+          @delete="uploadState.handleDeleteFile"
+        />
+      </div>
+    </div>
+  </FieldWrapper>
 </template>
 
 <script setup>
@@ -98,18 +98,9 @@ const props = defineProps({
   ui: { type: null, required: false },
   containerUi: { type: null, required: false }
 });
-const {
-  messages
-} = useCoreMessages();
-const {
-  wrapperProps,
-  handleChange: onChange,
-  setErrors,
-  value
-} = useFieldHOC(props);
-const acceptedFileTypes = computed(
-  () => typeof props.accept === "string" ? props.accept : props.accept?.join(",")
-);
+const { messages } = useCoreMessages();
+const { wrapperProps, handleChange: onChange, setErrors, value } = useFieldHOC(props);
+const acceptedFileTypes = computed(() => typeof props.accept === "string" ? props.accept : props.accept?.join(","));
 const dropzoneRef = useTemplateRef("dropzoneRef");
 const uploadState = useUploadImageState({
   props,
@@ -122,7 +113,10 @@ const uploadState = useUploadImageState({
   dropzoneRef
 });
 const theme = computed(
-  () => useUiConfig(uploadFileDropzoneTheme, "uploadFileDropzone")({
+  () => useUiConfig(
+    uploadFileDropzoneTheme,
+    "uploadFileDropzone"
+  )({
     dragover: uploadState.dropzone.isOverDropZone.value && uploadState.isEmpty.value,
     disabled: wrapperProps.value.disabled,
     failed: uploadState.upload.status.value.isError

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

@@ -39,14 +39,15 @@ export const ImagePaste = Extension.create({
                   console.warn("ImagePaste: requestOptions is not configured");
                   continue;
                 }
-                const {
-                  schema
-                } = view.state;
+                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
-                  }));
+                  const transaction = view.state.tr.insert(
+                    pos,
+                    schema.nodes.imageUpload.create({
+                      loading: true
+                    })
+                  );
                   view.dispatch(transaction);
                 }
                 const request = {

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

@@ -10,25 +10,26 @@ export const ImageUpload = Node.create({
     return {};
   },
   parseHTML() {
-    return [{
-      tag: 'div[data-type="image-upload"]'
-    }];
+    return [
+      {
+        tag: 'div[data-type="image-upload"]'
+      }
+    ];
   },
-  renderHTML({
-    HTMLAttributes
-  }) {
-    return ["div", mergeAttributes(HTMLAttributes, {
-      "data-type": "image-upload"
-    })];
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "div",
+      mergeAttributes(HTMLAttributes, {
+        "data-type": "image-upload"
+      })
+    ];
   },
   addNodeView() {
     return VueNodeViewRenderer(ImageUploadNodeComponent);
   },
   addCommands() {
     return {
-      insertImageUpload: () => ({
-        commands
-      }) => {
+      insertImageUpload: () => ({ commands }) => {
         return commands.insertContent({
           type: this.name
         });

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>
@@ -38,7 +38,9 @@ const props = defineProps({
   extension: { type: Object, required: true },
   HTMLAttributes: { type: Object, required: true }
 });
-const options = computed(() => props.extension.options);
+const options = computed(
+  () => props.extension.options
+);
 const file = ref(null);
 const loading = ref(false);
 watch(file, async (newFile) => {