@finema/core 1.4.192 → 1.4.193

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

@@ -1,216 +1,230 @@
-<template>
-  <FieldWrapper v-bind="wrapperProps">
-    <ClientOnly>
-      <div
-        class="form-textarea focus:ring-primary-500 dark:focus:ring-primary-400 relative block w-full resize-none rounded-md border-0 bg-white p-0 pb-3 text-sm text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 disabled:cursor-not-allowed disabled:opacity-75 dark:bg-gray-900 dark:text-white dark:ring-gray-700 dark:placeholder:text-gray-500"
-      >
-        <div class="tiptap-menu-bar">
-          <div
-            v-for="(items, index) in menuItems"
-            :key="index"
-            class="flex items-center border-r border-gray-200 pr-2"
-          >
-            <button
-              v-for="item in items"
-              :key="item.name"
-              :class="{ 'is-active': item.isActive?.() }"
-              class="menu-item"
-              type="button"
-              :title="item.title"
-              @click="item.action"
-            >
-              <Icon :name="item.icon" class="size-5" />
-            </button>
-          </div>
-        </div>
-        <EditorContent
-          :editor="editor"
-          :placeholder="placeholder ?? label"
-          :autofocus="autoFocus"
-          :disabled="isDisabled || isReadonly"
-          :name="name"
-        />
-      </div>
-    </ClientOnly>
-  </FieldWrapper>
-</template>
-<script lang="ts" setup>
-import { useFieldHOC } from '#core/composables/useForm'
-import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
-import { EditorContent, useEditor } from '@tiptap/vue-3'
-import type { IWYSIWYGFieldProps } from '#core/components/Form/InputWYSIWYG/types'
-import StarterKit from '@tiptap/starter-kit'
-import Underline from '@tiptap/extension-underline'
-import TextAlign from '@tiptap/extension-text-align'
-import Link from '@tiptap/extension-link'
-import Image from '@tiptap/extension-image'
-import Youtube from '@tiptap/extension-youtube'
-import { computed, watch } from 'vue'
-
-const props = withDefaults(defineProps<IWYSIWYGFieldProps>(), {})
-const { value, wrapperProps } = useFieldHOC<string>(props)
-const editor = useEditor({
-  content: value.value,
-  extensions: [
-    StarterKit,
-    Underline,
-    TextAlign.configure({
-      types: ['heading', 'paragraph'],
-    }),
-    Link.configure({
-      openOnClick: false,
-    }),
-    Image,
-    Youtube,
-  ],
-  editorProps: {
-    attributes: {
-      class: 'prose m-4 focus:outline-none',
-    },
-  },
-  onUpdate: ({ editor }) => {
-    value.value = editor.getHTML()
-  },
-})
-
-watch(value, (newValue) => {
-  if (editor.value && newValue !== editor.value.getHTML()) {
-    editor.value.commands.setContent(newValue)
-  }
-})
-
-const menuItems = computed(() => [
-  [
-    {
-      name: 'bold',
-      icon: 'ph:text-b-bold',
-      action: () => editor.value!.chain().focus().toggleBold().run(),
-      isActive: () => editor.value!.isActive('bold'),
-      title: 'Bold',
-    },
-    {
-      name: 'italic',
-      icon: 'ph:text-italic',
-      action: () => editor.value!.chain().focus().toggleItalic().run(),
-      isActive: () => editor.value!.isActive('italic'),
-      title: 'Italic',
-    },
-    {
-      name: 'underline',
-      icon: 'ph:text-underline',
-      action: () => editor.value!.chain().focus().toggleUnderline().run(),
-      isActive: () => editor.value!.isActive('underline'),
-      title: 'Underline',
-    },
-  ],
-  [
-    {
-      name: 'bullet-list',
-      icon: 'ph:list-bullets',
-      action: () => editor.value!.chain().focus().toggleBulletList().run(),
-      isActive: () => editor.value!.isActive('bulletList'),
-      title: 'Bullet List',
-    },
-    {
-      name: 'ordered-list',
-      icon: 'ph:list-numbers',
-      action: () => editor.value!.chain().focus().toggleOrderedList().run(),
-      isActive: () => editor.value!.isActive('orderedList'),
-      title: 'Ordered List',
-    },
-  ],
-  [
-    {
-      name: 'align-left',
-      icon: 'ph:text-align-left',
-      action: () => editor.value!.chain().focus().setTextAlign('left').run(),
-      isActive: () => editor.value!.isActive({ textAlign: 'left' }),
-      title: 'Align Left',
-    },
-    {
-      name: 'align-center',
-      icon: 'ph:text-align-center',
-      action: () => editor.value!.chain().focus().setTextAlign('center').run(),
-      isActive: () => editor.value!.isActive({ textAlign: 'center' }),
-      title: 'Align Center',
-    },
-    {
-      name: 'align-right',
-      icon: 'ph:text-align-right',
-      action: () => editor.value!.chain().focus().setTextAlign('right').run(),
-      isActive: () => editor.value!.isActive({ textAlign: 'right' }),
-      title: 'Align Right',
-    },
-  ],
-  [
-    {
-      name: 'link',
-      icon: 'ph:link-simple',
-      action: () => {
-        const url = window.prompt('URL')
-
-        if (url) {
-          editor.value!.chain().focus().setLink({ href: url }).run()
-        }
-      },
-      isActive: () => editor.value!.isActive('link'),
-      title: 'Insert Link',
-    },
-    {
-      name: 'image',
-      icon: 'ph:image',
-      action: () => {
-        const url = window.prompt('Image URL')
-
-        if (url) {
-          editor.value!.chain().focus().setImage({ src: url }).run()
-        }
-      },
-      title: 'Insert Image',
-    },
-    {
-      name: 'video',
-      icon: 'ph:video-camera',
-      action: () => {
-        const url = window.prompt('Video URL')
-
-        if (url) {
-          editor.value!.chain().focus().setYoutubeVideo({ src: url }).run()
-        }
-      },
-      title: 'Insert Video',
-    },
-  ],
-  [
-    {
-      name: 'hardBreak',
-      icon: 'ri:text-wrap',
-      action: () => editor.value!.chain().focus().setHardBreak().run(),
-      title: 'Hard Break',
-    },
-    {
-      name: 'clear',
-      icon: 'ri:format-clear',
-      action: () => editor.value!.chain().focus().clearNodes().unsetAllMarks().run(),
-      title: 'Clear',
-    },
-  ],
-  [
-    {
-      name: 'undo',
-      icon: 'ph:arrow-counter-clockwise',
-      action: () => editor.value!.chain().focus().undo().run(),
-      title: 'Undo',
-    },
-    {
-      name: 'redo',
-      icon: 'ph:arrow-clockwise',
-      action: () => editor.value!.chain().focus().redo().run(),
-      title: 'Redo',
-    },
-  ],
-])
-</script>
+<template>
+  <FieldWrapper v-bind="wrapperProps">
+    <Modal v-model="isShowUploadImageModal" title="อัพโหลดรูปภาพ">
+      <UploadImageForm :options="image" @submit="onImageSubmit" />
+    </Modal>
+    <ClientOnly>
+      <div
+        class="form-textarea focus:ring-primary-500 dark:focus:ring-primary-400 relative block w-full resize-none rounded-md border-0 bg-white p-0 pb-3 text-sm text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 disabled:cursor-not-allowed disabled:opacity-75 dark:bg-gray-900 dark:text-white dark:ring-gray-700 dark:placeholder:text-gray-500"
+      >
+        <div class="tiptap-menu-bar">
+          <div
+            v-for="(items, index) in menuItems"
+            :key="index"
+            class="flex items-center border-r border-gray-200 pr-2"
+          >
+            <button
+              v-for="item in items"
+              :key="item.name"
+              :class="{ 'is-active': item.isActive?.() }"
+              class="menu-item"
+              type="button"
+              :title="item.title"
+              @click="item.action"
+            >
+              <Icon :name="item.icon" class="size-5" />
+            </button>
+          </div>
+        </div>
+        <EditorContent
+          :editor="editor"
+          :placeholder="placeholder ?? label"
+          :autofocus="autoFocus"
+          :disabled="isDisabled || isReadonly"
+          :name="name"
+        />
+      </div>
+    </ClientOnly>
+  </FieldWrapper>
+</template>
+<script lang="ts" setup>
+import { useFieldHOC } from '#core/composables/useForm'
+import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
+import { EditorContent, useEditor } from '@tiptap/vue-3'
+import type { IWYSIWYGFieldProps } from '#core/components/Form/InputWYSIWYG/types'
+import StarterKit from '@tiptap/starter-kit'
+import Underline from '@tiptap/extension-underline'
+import TextAlign from '@tiptap/extension-text-align'
+import Link from '@tiptap/extension-link'
+import Image from '@tiptap/extension-image'
+import Youtube from '@tiptap/extension-youtube'
+import { computed, watch, ref } from 'vue'
+import UploadImageForm from '#core/components/Form/InputWYSIWYG/UploadImageForm.vue'
+
+const props = withDefaults(defineProps<IWYSIWYGFieldProps>(), {})
+const { value, wrapperProps } = useFieldHOC<string>(props)
+const isShowUploadImageModal = ref(false)
+const editor = useEditor({
+  content: value.value,
+  extensions: [
+    StarterKit,
+    Underline,
+    TextAlign.configure({
+      types: ['heading', 'paragraph'],
+    }),
+    Link.configure({
+      openOnClick: false,
+    }),
+    Image,
+    Youtube,
+  ],
+  editorProps: {
+    attributes: {
+      class: 'prose m-4 focus:outline-none',
+    },
+  },
+  onUpdate: ({ editor }) => {
+    value.value = editor.getHTML()
+  },
+})
+
+watch(value, (newValue) => {
+  if (editor.value && newValue !== editor.value.getHTML()) {
+    editor.value.commands.setContent(newValue)
+  }
+})
+
+const menuItems = computed(() => [
+  [
+    {
+      name: 'bold',
+      icon: 'ph:text-b-bold',
+      action: () => editor.value!.chain().focus().toggleBold().run(),
+      isActive: () => editor.value!.isActive('bold'),
+      title: 'Bold',
+    },
+    {
+      name: 'italic',
+      icon: 'ph:text-italic',
+      action: () => editor.value!.chain().focus().toggleItalic().run(),
+      isActive: () => editor.value!.isActive('italic'),
+      title: 'Italic',
+    },
+    {
+      name: 'underline',
+      icon: 'ph:text-underline',
+      action: () => editor.value!.chain().focus().toggleUnderline().run(),
+      isActive: () => editor.value!.isActive('underline'),
+      title: 'Underline',
+    },
+  ],
+  [
+    {
+      name: 'bullet-list',
+      icon: 'ph:list-bullets',
+      action: () => editor.value!.chain().focus().toggleBulletList().run(),
+      isActive: () => editor.value!.isActive('bulletList'),
+      title: 'Bullet List',
+    },
+    {
+      name: 'ordered-list',
+      icon: 'ph:list-numbers',
+      action: () => editor.value!.chain().focus().toggleOrderedList().run(),
+      isActive: () => editor.value!.isActive('orderedList'),
+      title: 'Ordered List',
+    },
+  ],
+  [
+    {
+      name: 'align-left',
+      icon: 'ph:text-align-left',
+      action: () => editor.value!.chain().focus().setTextAlign('left').run(),
+      isActive: () => editor.value!.isActive({ textAlign: 'left' }),
+      title: 'Align Left',
+    },
+    {
+      name: 'align-center',
+      icon: 'ph:text-align-center',
+      action: () => editor.value!.chain().focus().setTextAlign('center').run(),
+      isActive: () => editor.value!.isActive({ textAlign: 'center' }),
+      title: 'Align Center',
+    },
+    {
+      name: 'align-right',
+      icon: 'ph:text-align-right',
+      action: () => editor.value!.chain().focus().setTextAlign('right').run(),
+      isActive: () => editor.value!.isActive({ textAlign: 'right' }),
+      title: 'Align Right',
+    },
+  ],
+  [
+    {
+      name: 'link',
+      icon: 'ph:link-simple',
+      action: () => {
+        const url = window.prompt('URL')
+
+        if (url) {
+          editor.value!.chain().focus().setLink({ href: url }).run()
+        }
+      },
+      isActive: () => editor.value!.isActive('link'),
+      title: 'Insert Link',
+    },
+    {
+      name: 'image',
+      icon: 'ph:image',
+      action: () => {
+        if (props.image?.requestOptions) {
+          isShowUploadImageModal.value = true
+        } else {
+          const url = window.prompt('Image URL')
+
+          if (url) {
+            editor.value!.chain().focus().setImage({ src: url }).run()
+          }
+        }
+      },
+      title: 'Insert Image',
+    },
+    {
+      name: 'video',
+      icon: 'ph:video-camera',
+      action: () => {
+        const url = window.prompt('Video URL')
+
+        if (url) {
+          editor.value!.chain().focus().setYoutubeVideo({ src: url }).run()
+        }
+      },
+      title: 'Insert Video',
+    },
+  ],
+  [
+    {
+      name: 'hardBreak',
+      icon: 'ri:text-wrap',
+      action: () => editor.value!.chain().focus().setHardBreak().run(),
+      title: 'Hard Break',
+    },
+    {
+      name: 'clear',
+      icon: 'ri:format-clear',
+      action: () => editor.value!.chain().focus().clearNodes().unsetAllMarks().run(),
+      title: 'Clear',
+    },
+  ],
+  [
+    {
+      name: 'undo',
+      icon: 'ph:arrow-counter-clockwise',
+      action: () => editor.value!.chain().focus().undo().run(),
+      title: 'Undo',
+    },
+    {
+      name: 'redo',
+      icon: 'ph:arrow-clockwise',
+      action: () => editor.value!.chain().focus().redo().run(),
+      title: 'Redo',
+    },
+  ],
+])
+
+const onImageSubmit = (url: string) => {
+  editor.value!.chain().focus().setImage({ src: url }).run()
+  isShowUploadImageModal.value = false
+}
+</script>
 <style>
 .tiptap-menu-bar{@apply flex flex-wrap border-b py-2 px-2 gap-1}.menu-item{@apply px-1 py-1 rounded hover:bg-gray-100 transition-colors flex justify-center items-center}.menu-item.is-active{@apply bg-primary-100 text-primary-600}
-</style>
+</style>

package/dist/runtime/components/Form/InputWYSIWYG/types.d.ts

@@ -1,5 +1,18 @@
 import { type IFieldProps, type IFormFieldBase, type INPUT_TYPES } from '#core/components/Form/types';
+import type { AxiosRequestConfig } from 'axios';
 export interface IWYSIWYGFieldProps extends IFieldProps {
+    image?: {
+        requestOptions?: Omit<AxiosRequestConfig, 'baseURL'> & {
+            baseURL: string;
+        };
+        uploadPathURL?: string;
+        uploadAddLabel?: string;
+        accept?: string[] | string;
+        bodyKey?: string;
+        responseURL?: string;
+        responsePath?: string;
+        maxSize?: number;
+    };
 }
 export type IWYSIWYGField = IFormFieldBase<INPUT_TYPES.WYSIWYG, IWYSIWYGFieldProps, {
     change?: (value: string) => void;

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

@@ -1,6 +1,6 @@
-<template>
-  <form class="form">
-    <slot />
-  </form>
-</template>
-<script lang="ts" setup></script>
+<template>
+  <form class="form">
+    <slot />
+  </form>
+</template>
+<script lang="ts" setup></script>

package/dist/runtime/components/Icon.vue

@@ -1,23 +1,23 @@
-<template>
-  <UIcon :name="name" :dynamic="dynamicValue" />
-</template>
-
-<script lang="ts" setup>
-import { computed, useUiConfig } from '#imports'
-import { icon } from '#core/ui.config'
-
-const props = defineProps({
-  name: {
-    type: String,
-    required: true,
-  },
-  dynamic: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const config = useUiConfig<typeof icon>(icon, 'icon')
-
-const dynamicValue = computed(() => props.dynamic || config.dynamic)
-</script>
+<template>
+  <UIcon :name="name" :dynamic="dynamicValue" />
+</template>
+
+<script lang="ts" setup>
+import { computed, useUiConfig } from '#imports'
+import { icon } from '#core/ui.config'
+
+const props = defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+  dynamic: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const config = useUiConfig<typeof icon>(icon, 'icon')
+
+const dynamicValue = computed(() => props.dynamic || config.dynamic)
+</script>

package/dist/runtime/components/Image.vue

@@ -1,36 +1,36 @@
-<template>
-  <img :src="getSrc" />
-</template>
-<script lang="ts" setup>
-import { useImage } from '@vueuse/core'
-import { computed } from 'vue'
-
-const props = defineProps({
-  src: {
-    type: String,
-    required: true,
-  },
-  loadingSrc: {
-    type: String,
-    default: '',
-  },
-  errorSrc: {
-    type: String,
-    default: '',
-  },
-})
-
-const { isLoading, error } = useImage({ src: props.src })
-
-const getSrc = computed(() => {
-  if (isLoading.value) {
-    return props.loadingSrc
-  }
-
-  if (error.value) {
-    return props.errorSrc
-  }
-
-  return props.src
-})
-</script>
+<template>
+  <img :src="getSrc" />
+</template>
+<script lang="ts" setup>
+import { useImage } from '@vueuse/core'
+import { computed } from 'vue'
+
+const props = defineProps({
+  src: {
+    type: String,
+    required: true,
+  },
+  loadingSrc: {
+    type: String,
+    default: '',
+  },
+  errorSrc: {
+    type: String,
+    default: '',
+  },
+})
+
+const { isLoading, error } = useImage({ src: props.src })
+
+const getSrc = computed(() => {
+  if (isLoading.value) {
+    return props.loadingSrc
+  }
+
+  if (error.value) {
+    return props.errorSrc
+  }
+
+  return props.src
+})
+</script>

package/dist/runtime/components/Loader.vue

@@ -1,27 +1,27 @@
-<template>
-  <div
-    v-if="isLoading"
-    :class="[
-      'flex  w-full items-center justify-center',
-      $attrs.class,
-      {
-        'min-h-[200px]': !$attrs.class,
-      },
-    ]"
-  >
-    <UIcon name="i-svg-spinners:180-ring-with-bg" class="text-primary text-4xl" dynamic />
-  </div>
-  <slot v-else />
-</template>
-<script lang="ts" setup>
-defineOptions({
-  inheritAttrs: false,
-})
-
-defineProps({
-  isLoading: {
-    type: Boolean,
-    default: true,
-  },
-})
-</script>
+<template>
+  <div
+    v-if="isLoading"
+    :class="[
+      'flex  w-full items-center justify-center',
+      $attrs.class,
+      {
+        'min-h-[200px]': !$attrs.class,
+      },
+    ]"
+  >
+    <UIcon name="i-svg-spinners:180-ring-with-bg" class="text-primary text-4xl" dynamic />
+  </div>
+  <slot v-else />
+</template>
+<script lang="ts" setup>
+defineOptions({
+  inheritAttrs: false,
+})
+
+defineProps({
+  isLoading: {
+    type: Boolean,
+    default: true,
+  },
+})
+</script>