@finema/core 3.9.0 → 3.10.0

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

@@ -79,69 +79,69 @@ const handleKeyDown = (event) => {
 </script>
 
 <template>
-  <Popover
-    v-model:open="open"
-    :ui="{ content: 'p-0.5' }"
-  >
-    <Tooltip text="Link">
-      <Button
-        icon="i-lucide-link"
-        color="neutral"
-        active-color="primary"
-        variant="ghost"
-        active-variant="soft"
-        size="sm"
-        :active="active"
-        :disabled="disabled"
-      />
-    </Tooltip>
-
-    <template #content>
-      <Input
-        v-model="url"
-        autofocus
-        name="url"
-        type="url"
-        variant="none"
-        placeholder="Paste a link..."
-        @keydown="handleKeyDown"
-      >
-        <div class="mr-0.5 flex items-center">
-          <Button
-            icon="i-lucide-corner-down-left"
-            variant="ghost"
-            size="sm"
-            :disabled="!url && !active"
-            title="Apply link"
-            @click="setLink"
-          />
-
-          <Separator
-            orientation="vertical"
-            class="mx-1 h-6"
-          />
-
-          <Button
-            icon="i-lucide-external-link"
-            color="neutral"
-            variant="ghost"
-            size="sm"
-            :disabled="!url && !active"
-            title="Open in new window"
-            @click="openLink"
-          />
-
-          <Button
-            icon="i-lucide-trash"
-            color="neutral"
-            variant="ghost"
-            size="sm"
-            :disabled="!url && !active"
-            title="Remove link"
-            @click="removeLink"
-          />
-        </div>
-      </Input>
-    </template>
-  </Popover>
+  <Popover
+    v-model:open="open"
+    :ui="{ content: 'p-0.5' }"
+  >
+    <Tooltip text="Link">
+      <Button
+        icon="i-lucide-link"
+        color="neutral"
+        active-color="primary"
+        variant="ghost"
+        active-variant="soft"
+        size="sm"
+        :active="active"
+        :disabled="disabled"
+      />
+    </Tooltip>
+
+    <template #content>
+      <Input
+        v-model="url"
+        autofocus
+        name="url"
+        type="url"
+        variant="none"
+        placeholder="Paste a link..."
+        @keydown="handleKeyDown"
+      >
+        <div class="mr-0.5 flex items-center">
+          <Button
+            icon="i-lucide-corner-down-left"
+            variant="ghost"
+            size="sm"
+            :disabled="!url && !active"
+            title="Apply link"
+            @click="setLink"
+          />
+
+          <Separator
+            orientation="vertical"
+            class="mx-1 h-6"
+          />
+
+          <Button
+            icon="i-lucide-external-link"
+            color="neutral"
+            variant="ghost"
+            size="sm"
+            :disabled="!url && !active"
+            title="Open in new window"
+            @click="openLink"
+          />
+
+          <Button
+            icon="i-lucide-trash"
+            color="neutral"
+            variant="ghost"
+            size="sm"
+            :disabled="!url && !active"
+            title="Remove link"
+            @click="removeLink"
+          />
+        </div>
+      </Input>
+    </template>
+  </Popover>
 </template>

package/dist/runtime/components/Form/InputWYSIWYG/README.md

@@ -1,96 +1,96 @@
-# InputWYSIWYG - TipTap WYSIWYG Editor
-
-A rich text editor component built with TipTap that supports text formatting, images, and more.
-
-## Features
-
-- **Text Formatting**: Bold, italic, underline, strikethrough, code
-- **Headings**: H1, H2, H3, H4
-- **Lists**: Bullet lists and ordered lists
-- **Text Alignment**: Left, center, right, justify
-- **Blockquotes and Code Blocks**
-- **Links**: Add and edit links with a popover interface
-- **Image Upload**: Upload images via button click
-- **Image Paste**: ✨ **NEW** - Copy and paste images directly from your computer
-- **Horizontal Rules**
-- **Undo/Redo**
-
-## Image Paste Feature
-
-The editor now supports pasting images directly from your clipboard! This works in two ways:
-
-### 1. Copy from File System
-- Copy an image file from your file explorer/finder
-- Click into the editor
-- Press `Cmd+V` (Mac) or `Ctrl+V` (Windows/Linux)
-- The image will automatically upload and insert into the editor
-
-### 2. Copy from Screenshot
-- Take a screenshot (or copy an image from any application)
-- Click into the editor
-- Press `Cmd+V` (Mac) or `Ctrl+V` (Windows/Linux)
-- The image will automatically upload and insert into the editor
-
-### How It Works
-
-The `ImagePaste` extension intercepts paste events and:
-1. Detects if the clipboard contains image data
-2. Validates the image size (if `maxSize` is configured)
-3. Inserts a placeholder/loading node
-4. Uploads the image to your configured endpoint
-5. Replaces the placeholder with the actual image once uploaded
-
-## Usage
-
-```vue
-<template>
-  <InputWYSIWYG
-    name="content"
-    label="Content"
-    :image="{
-      requestOptions: useRequestOptions().getFile(),
-      uploadPathURL: '/uploads',
-      maxSize: 5120, // 5MB in KB
-      bodyKey: 'file',
-      responseURL: 'url',
-      responsePath: 'path',
-      responseName: 'name',
-      responseSize: 'size',
-      responseID: 'id',
-    }"
-  />
-</template>
-```
-
-## Configuration
-
-### Image Upload Options
-
-| Option | Type | Default | Description |
-|--------|------|---------|-------------|
-| `requestOptions` | `AxiosRequestConfig` | - | Axios configuration for upload requests |
-| `uploadPathURL` | `string` | - | API endpoint path for uploads |
-| `bodyKey` | `string` | `'file'` | Form data key for the file |
-| `responseURL` | `string` | `'url'` | Path to URL in upload response |
-| `responsePath` | `string` | `'path'` | Path to file path in response |
-| `responseName` | `string` | `'name'` | Path to file name in response |
-| `responseSize` | `string` | `'size'` | Path to file size in response |
-| `responseID` | `string` | `'id'` | Path to file ID in response |
-| `maxSize` | `number` | - | Maximum file size in KB |
-
-## Extensions
-
-The component uses the following TipTap extensions:
-
-- **TextAlign**: For text alignment options
-- **ImageUpload**: Custom extension for manual image uploads via button
-- **ImagePaste**: Custom extension for pasting images from clipboard
-
-## Files
-
-- `index.vue` - Main component
-- `EditorImageUploadExtension.ts` - Extension for manual image upload
-- `EditorImageUploadNode.vue` - Vue component for image upload UI
-- `EditorImagePasteExtension.ts` - Extension for paste image functionality
-- `EditorLinkPopover.vue` - Link editing popover
-- `types.ts` - TypeScript type definitions
+# InputWYSIWYG - TipTap WYSIWYG Editor
+
+A rich text editor component built with TipTap that supports text formatting, images, and more.
+
+## Features
+
+- **Text Formatting**: Bold, italic, underline, strikethrough, code
+- **Headings**: H1, H2, H3, H4
+- **Lists**: Bullet lists and ordered lists
+- **Text Alignment**: Left, center, right, justify
+- **Blockquotes and Code Blocks**
+- **Links**: Add and edit links with a popover interface
+- **Image Upload**: Upload images via button click
+- **Image Paste**: ✨ **NEW** - Copy and paste images directly from your computer
+- **Horizontal Rules**
+- **Undo/Redo**
+
+## Image Paste Feature
+
+The editor now supports pasting images directly from your clipboard! This works in two ways:
+
+### 1. Copy from File System
+- Copy an image file from your file explorer/finder
+- Click into the editor
+- Press `Cmd+V` (Mac) or `Ctrl+V` (Windows/Linux)
+- The image will automatically upload and insert into the editor
+
+### 2. Copy from Screenshot
+- Take a screenshot (or copy an image from any application)
+- Click into the editor
+- Press `Cmd+V` (Mac) or `Ctrl+V` (Windows/Linux)
+- The image will automatically upload and insert into the editor
+
+### How It Works
+
+The `ImagePaste` extension intercepts paste events and:
+1. Detects if the clipboard contains image data
+2. Validates the image size (if `maxSize` is configured)
+3. Inserts a placeholder/loading node
+4. Uploads the image to your configured endpoint
+5. Replaces the placeholder with the actual image once uploaded
+
+## Usage
+
+```vue
+<template>
+  <InputWYSIWYG
+    name="content"
+    label="Content"
+    :image="{
+      requestOptions: useRequestOptions().getFile(),
+      uploadPathURL: '/uploads',
+      maxSize: 5120, // 5MB in KB
+      bodyKey: 'file',
+      responseURL: 'url',
+      responsePath: 'path',
+      responseName: 'name',
+      responseSize: 'size',
+      responseID: 'id',
+    }"
+  />
+</template>
+```
+
+## Configuration
+
+### Image Upload Options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `requestOptions` | `AxiosRequestConfig` | - | Axios configuration for upload requests |
+| `uploadPathURL` | `string` | - | API endpoint path for uploads |
+| `bodyKey` | `string` | `'file'` | Form data key for the file |
+| `responseURL` | `string` | `'url'` | Path to URL in upload response |
+| `responsePath` | `string` | `'path'` | Path to file path in response |
+| `responseName` | `string` | `'name'` | Path to file name in response |
+| `responseSize` | `string` | `'size'` | Path to file size in response |
+| `responseID` | `string` | `'id'` | Path to file ID in response |
+| `maxSize` | `number` | - | Maximum file size in KB |
+
+## Extensions
+
+The component uses the following TipTap extensions:
+
+- **TextAlign**: For text alignment options
+- **ImageUpload**: Custom extension for manual image uploads via button
+- **ImagePaste**: Custom extension for pasting images from clipboard
+
+## Files
+
+- `index.vue` - Main component
+- `EditorImageUploadExtension.ts` - Extension for manual image upload
+- `EditorImageUploadNode.vue` - Vue component for image upload UI
+- `EditorImagePasteExtension.ts` - Extension for paste image functionality
+- `EditorLinkPopover.vue` - Link editing popover
+- `types.ts` - TypeScript type definitions

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

@@ -1,56 +1,56 @@
 <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"
+}"
+        :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>
+}"
+        />
+
+        <EditorSuggestionMenu
+          :editor="editor"
+          :items="suggestionItems"
+          :append-to="appendToBody"
+        />
+      </Editor>
+    </div>
+  </FieldWrapper>
 </template>
 
 <script setup>

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="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>
 </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="ลบไฟล์"
-        @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="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="ลบไฟล์"
+        @click="$emit('delete')"
+      />
+    </div>
+  </div>
 </template>
 
 <script setup>

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>