@finema/core 3.23.2 → 3.25.0

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

@@ -1,56 +1,58 @@
 <template>
-  <FieldWrapper v-bind="wrapperProps">
-    <div :class="ui.container()">
-      <Editor
-        v-slot="{ editor }"
-        v-model="value"
-        content-type="html"
-        :editable="editable"
-        :placeholder="placeholder"
-        :autofocus="autoFocus"
-        class="min-h-[200px]"
+  <FieldWrapper v-bind="wrapperProps">
+    <div :class="ui.container()">
+      <Editor
+        v-slot="{ editor }"
+        v-model="value"
+        content-type="html"
+        :editable="editable"
+        :placeholder="placeholder"
+        :autofocus="autoFocus"
+        class="min-h-[200px]"
         :extensions="[
   TextAlign.configure({
     types: ['heading', 'paragraph'],
     alignments: ['left', 'center', 'right', 'justify']
   }),
   ...image.requestOptions ? [ImageUpload.configure(image), ImagePaste.configure(image)] : []
-]"
+]"
         :ui="{
   content: '',
-  base: ['min-h-[200px] w-full sm:px-3 py-1']
-}"
-        :handlers="customHandlers"
-      >
-        <EditorToolbar
-          :editor="editor"
-          :items="toolbarItems"
-          :class="ui.toolbar()"
-        >
-          <template #link>
-            <EditorLinkPopover
-              :editor="editor"
-              auto-open
-            />
-          </template>
-        </EditorToolbar>
-        <EditorToolbar
-          :editor="editor"
-          :items="imageToolbarItems(editor)"
-          layout="bubble"
-          :should-show="({ editor: editor2, view }) => {
-  return editor2.isActive('image') && view.hasFocus();
-}"
-        />
-
-        <EditorSuggestionMenu
-          :editor="editor"
-          :items="suggestionItems"
-          :append-to="appendToBody"
-        />
-      </Editor>
-    </div>
-  </FieldWrapper>
+  base: ['min-h-[200px] w-full py-1 sm:px-3']
+}"
+        :handlers="customHandlers"
+      >
+        <EditorToolbar
+          :editor="editor"
+          :items="toolbarItems"
+          :class="ui.toolbar()"
+        >
+          <template #link>
+            <EditorLinkPopover
+              :editor="editor"
+              auto-open
+            />
+          </template>
+        </EditorToolbar>
+        <EditorToolbar
+          :editor="editor"
+          :items="imageToolbarItems(editor)"
+          layout="bubble"
+          :should-show="
+  ({ editor: editor2, view }) => {
+    return editor2.isActive('image') && view.hasFocus();
+  }
+"
+        />
+
+        <EditorSuggestionMenu
+          :editor="editor"
+          :items="suggestionItems"
+          :append-to="appendToBody"
+        />
+      </Editor>
+    </div>
+  </FieldWrapper>
 </template>
 
 <script setup>
@@ -90,10 +92,7 @@ const props = defineProps({
   ui: { type: null, required: false },
   containerUi: { type: null, required: false }
 });
-const {
-  value,
-  wrapperProps
-} = useFieldHOC(props);
+const { value, wrapperProps } = useFieldHOC(props);
 const ui = computed(() => useUiConfig(wysiwygTheme, "wysiwyg")({}));
 const appendToBody = false ? () => document.body : void 0;
 const customHandlers = {
@@ -110,35 +109,38 @@ const customHandlers = {
 };
 const imageToolbarItems = (editor) => {
   const node = editor.state.doc.nodeAt(editor.state.selection.from);
-  return [[{
-    icon: "i-lucide-download",
-    to: node?.attrs?.src,
-    download: true,
-    tooltip: {
-      text: "Download"
-    }
-  }], [{
-    icon: "i-lucide-trash",
-    tooltip: {
-      text: "Delete"
-    },
-    onClick: () => {
-      const {
-        state
-      } = editor;
-      const {
-        selection
-      } = state;
-      const pos = selection.from;
-      const node2 = state.doc.nodeAt(pos);
-      if (node2 && node2.type.name === "image") {
-        editor.chain().focus().deleteRange({
-          from: pos,
-          to: pos + node2.nodeSize
-        }).run();
+  return [
+    [
+      {
+        icon: "i-lucide-download",
+        to: node?.attrs?.src,
+        download: true,
+        tooltip: {
+          text: "Download"
+        }
       }
-    }
-  }]];
+    ],
+    [
+      {
+        icon: "i-lucide-trash",
+        tooltip: {
+          text: "Delete"
+        },
+        onClick: () => {
+          const { state } = editor;
+          const { selection } = state;
+          const pos = selection.from;
+          const node2 = state.doc.nodeAt(pos);
+          if (node2 && node2.type.name === "image") {
+            editor.chain().focus().deleteRange({
+              from: pos,
+              to: pos + node2.nodeSize
+            }).run();
+          }
+        }
+      }
+    ]
+  ];
 };
 const toolbarItems = [
   // Block types
@@ -151,27 +153,32 @@ const toolbarItems = [
       content: {
         align: "start"
       },
-      items: [{
-        kind: "heading",
-        level: 1,
-        icon: "i-lucide-heading-1",
-        label: "Heading 1"
-      }, {
-        kind: "heading",
-        level: 2,
-        icon: "i-lucide-heading-2",
-        label: "Heading 2"
-      }, {
-        kind: "heading",
-        level: 3,
-        icon: "i-lucide-heading-3",
-        label: "Heading 3"
-      }, {
-        kind: "heading",
-        level: 4,
-        icon: "i-lucide-heading-4",
-        label: "Heading 4"
-      }]
+      items: [
+        {
+          kind: "heading",
+          level: 1,
+          icon: "i-lucide-heading-1",
+          label: "Heading 1"
+        },
+        {
+          kind: "heading",
+          level: 2,
+          icon: "i-lucide-heading-2",
+          label: "Heading 2"
+        },
+        {
+          kind: "heading",
+          level: 3,
+          icon: "i-lucide-heading-3",
+          label: "Heading 3"
+        },
+        {
+          kind: "heading",
+          level: 4,
+          icon: "i-lucide-heading-4",
+          label: "Heading 4"
+        }
+      ]
     },
     // Text alignment
     {
@@ -217,15 +224,18 @@ const toolbarItems = [
       content: {
         align: "start"
       },
-      items: [{
-        kind: "bulletList",
-        icon: "i-lucide-list",
-        label: "Bullet List"
-      }, {
-        kind: "orderedList",
-        icon: "i-lucide-list-ordered",
-        label: "Ordered List"
-      }]
+      items: [
+        {
+          kind: "bulletList",
+          icon: "i-lucide-list",
+          label: "Bullet List"
+        },
+        {
+          kind: "orderedList",
+          icon: "i-lucide-list-ordered",
+          label: "Ordered List"
+        }
+      ]
     },
     {
       kind: "blockquote",
@@ -250,66 +260,77 @@ const toolbarItems = [
     }
   ],
   // Text formatting
-  [{
-    kind: "mark",
-    mark: "bold",
-    icon: "i-lucide-bold",
-    tooltip: {
-      text: "Bold"
-    }
-  }, {
-    kind: "mark",
-    mark: "italic",
-    icon: "i-lucide-italic",
-    tooltip: {
-      text: "Italic"
-    }
-  }, {
-    kind: "mark",
-    mark: "underline",
-    icon: "i-lucide-underline",
-    tooltip: {
-      text: "Underline"
-    }
-  }, {
-    kind: "mark",
-    mark: "strike",
-    icon: "i-lucide-strikethrough",
-    tooltip: {
-      text: "Strikethrough"
-    }
-  }, {
-    kind: "mark",
-    mark: "code",
-    icon: "i-lucide-code",
-    tooltip: {
-      text: "Code"
+  [
+    {
+      kind: "mark",
+      mark: "bold",
+      icon: "i-lucide-bold",
+      tooltip: {
+        text: "Bold"
+      }
+    },
+    {
+      kind: "mark",
+      mark: "italic",
+      icon: "i-lucide-italic",
+      tooltip: {
+        text: "Italic"
+      }
+    },
+    {
+      kind: "mark",
+      mark: "underline",
+      icon: "i-lucide-underline",
+      tooltip: {
+        text: "Underline"
+      }
+    },
+    {
+      kind: "mark",
+      mark: "strike",
+      icon: "i-lucide-strikethrough",
+      tooltip: {
+        text: "Strikethrough"
+      }
+    },
+    {
+      kind: "mark",
+      mark: "code",
+      icon: "i-lucide-code",
+      tooltip: {
+        text: "Code"
+      }
     }
-  }],
+  ],
   // Link & image
   [
     {
       slot: "link"
     },
-    ...props.image?.requestOptions ? [{
-      kind: "imageUpload",
-      icon: "i-lucide-image"
-    }] : []
+    ...props.image?.requestOptions ? [
+      {
+        kind: "imageUpload",
+        icon: "i-lucide-image"
+      }
+    ] : []
   ],
   // History controls
-  [{
-    kind: "undo",
-    icon: "i-lucide-undo",
-    tooltip: {
-      text: "Undo"
-    }
-  }, {
-    kind: "redo",
-    icon: "i-lucide-redo",
-    tooltip: {
-      text: "Redo"
+  [
+    {
+      kind: "undo",
+      icon: "i-lucide-undo",
+      tooltip: {
+        text: "Undo"
+      }
+    },
+    {
+      kind: "redo",
+      icon: "i-lucide-redo",
+      tooltip: {
+        text: "Redo"
+      }
     }
-  }]
+  ]
 ];
 const suggestionItems = [
   [

package/dist/runtime/components/Form/fileState/EmptyState.vue

@@ -1,25 +1,25 @@
 <template>
-  <div :class="theme.placeholderWrapper()">
-    <Icon
-      :name="icons.uploadIcon"
-      :class="theme.labelIcon()"
-    />
-    <div :class="theme.labelWrapper()">
-      <p
-        class="text-primary cursor-pointer font-bold"
-        @click="$emit('openFile')"
-      >
-        {{ selectFileLabel }}
-      </p>
-      <p>{{ selectFileSubLabel }}</p>
-    </div>
-    <p
-      v-if="placeholder"
-      :class="theme.placeholder()"
-    >
-      {{ placeholder }}
-    </p>
-  </div>
+  <div :class="theme.placeholderWrapper()">
+    <Icon
+      :name="icons.uploadIcon"
+      :class="theme.labelIcon()"
+    />
+    <div :class="theme.labelWrapper()">
+      <p
+        class="cursor-pointer font-bold text-primary"
+        @click="$emit('openFile')"
+      >
+        {{ selectFileLabel }}
+      </p>
+      <p>{{ selectFileSubLabel }}</p>
+    </div>
+    <p
+      v-if="placeholder"
+      :class="theme.placeholder()"
+    >
+      {{ placeholder }}
+    </p>
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/Form/fileState/FailedState.vue

@@ -1,37 +1,37 @@
 <template>
-  <div :class="theme.onFailedWrapper()">
-    <div :class="theme.onFailedFailedImgWrapper()">
-      <Icon
-        :name="getFileIcon(selectedFile)"
-        :class="theme.onFailedFailedIconClass()"
-      />
-    </div>
-    <div :class="theme.onFailedTextWrapper()">
-      <div class="truncate">
-        <h1 class="truncate font-bold">
-          {{ selectedFile.name }}
-        </h1>
-        <p class="text-error truncate font-light">
-          {{ uploadFailedLabel }}
-        </p>
-        <Button
-          variant="link"
-          :icon="icons.actionRetryIcon"
-          :class="theme.actionRetryBtnClass()"
-          color="primary"
-          @click="$emit('retry')"
-        >
-          {{ retryLabel }}
-        </Button>
-      </div>
-      <Icon
-        :name="icons.actionDeleteIcon"
-        :class="theme.actionDeleteIconClass()"
-        :title="messages.upload.remove"
-        @click="$emit('delete')"
-      />
-    </div>
-  </div>
+  <div :class="theme.onFailedWrapper()">
+    <div :class="theme.onFailedFailedImgWrapper()">
+      <Icon
+        :name="getFileIcon(selectedFile)"
+        :class="theme.onFailedFailedIconClass()"
+      />
+    </div>
+    <div :class="theme.onFailedTextWrapper()">
+      <div class="truncate">
+        <h1 class="truncate font-bold">
+          {{ selectedFile.name }}
+        </h1>
+        <p class="truncate font-light text-error">
+          {{ uploadFailedLabel }}
+        </p>
+        <Button
+          variant="link"
+          :icon="icons.actionRetryIcon"
+          :class="theme.actionRetryBtnClass()"
+          color="primary"
+          @click="$emit('retry')"
+        >
+          {{ retryLabel }}
+        </Button>
+      </div>
+      <Icon
+        :name="icons.actionDeleteIcon"
+        :class="theme.actionDeleteIconClass()"
+        :title="messages.upload.remove"
+        @click="$emit('delete')"
+      />
+    </div>
+  </div>
 </template>
 
 <script setup>
@@ -52,7 +52,5 @@ const getFileIcon = (file) => {
   }
   return icons.filePreviewIcon;
 };
-const {
-  messages
-} = useCoreMessages();
+const { messages } = useCoreMessages();
 </script>

package/dist/runtime/components/Form/fileState/LoadingState.vue

@@ -1,28 +1,28 @@
 <template>
-  <div :class="theme.onLoadingWrapper()">
-    <div :class="theme.onLoadingPlaceholderWrapper()">
-      <Icon
-        :name="getFileIcon(selectedFile)"
-        :class="theme.onLoadingPlaceholderIconClass()"
-      />
-    </div>
-    <div :class="theme.onLoadingTextWrapper()">
-      <div class="truncate">
-        <h1 class="truncate font-bold">
-          {{ selectedFile.name }}
-        </h1>
-        <p class="truncate font-light text-gray-400">
-          {{ getFileSize(selectedFile) }} - {{ percent }}% {{ uploadingLabel }}
-        </p>
-      </div>
-      <div>
-        <Icon
-          :name="icons.loadingIcon"
-          :class="theme.onLoadingLoadingIconClass()"
-        />
-      </div>
-    </div>
-  </div>
+  <div :class="theme.onLoadingWrapper()">
+    <div :class="theme.onLoadingPlaceholderWrapper()">
+      <Icon
+        :name="getFileIcon(selectedFile)"
+        :class="theme.onLoadingPlaceholderIconClass()"
+      />
+    </div>
+    <div :class="theme.onLoadingTextWrapper()">
+      <div class="truncate">
+        <h1 class="truncate font-bold">
+          {{ selectedFile.name }}
+        </h1>
+        <p class="truncate font-light text-gray-400">
+          {{ getFileSize(selectedFile) }} - {{ percent }}% {{ uploadingLabel }}
+        </p>
+      </div>
+      <div>
+        <Icon
+          :name="icons.loadingIcon"
+          :class="theme.onLoadingLoadingIconClass()"
+        />
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>