@finema/core 1.4.192 → 1.4.194

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "1.4.192",
+  "version": "1.4.194",
   "configKey": "core",
   "compatibility": {
     "nuxt": "^3.7.4"

package/dist/module.mjs

@@ -2,7 +2,7 @@ import { defineNuxtModule, createResolver, installModule, addPlugin, addComponen
 import { defu } from 'defu';
 
 const name = "@finema/core";
-const version = "1.4.192";
+const version = "1.4.194";
 
 const colorModeOptions = {
   preference: "light"

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

@@ -0,0 +1,55 @@
+<template>
+  <FormFields :options="formFields" :form="form" />
+</template>
+<script lang="ts" setup>
+import { toTypedSchema, useForm, createFormFields, watch } from '#imports'
+import * as z from 'zod'
+import { INPUT_TYPES } from '#core/components/Form/types'
+import type { IWYSIWYGFieldProps } from '#core/components/Form/InputWYSIWYG/types'
+
+const emits = defineEmits(['submit'])
+const props = defineProps<{
+  options: IWYSIWYGFieldProps['image']
+}>()
+
+const form = useForm({
+  validationSchema: toTypedSchema(
+    z.object({
+      file: z
+        .object({
+          url: z.string(),
+          path: z.string().optional(),
+          name: z.string().optional(),
+          size: z.string().optional(),
+        })
+        .optional()
+        .nullable(),
+    })
+  ),
+  initialValues: {
+    file: null,
+  },
+})
+
+const formFields = createFormFields(() => [
+  {
+    type: INPUT_TYPES.UPLOAD_IMAGE_AUTO,
+    props: {
+      name: 'file',
+      ...((props.options || {}) as any),
+    },
+  },
+])
+
+watch(
+  () => form.values,
+  () => {
+    if (form.values.file?.url) {
+      emits('submit', form.values.file?.url)
+    }
+  },
+  {
+    deep: true,
+  }
+)
+</script>

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

@@ -1,5 +1,8 @@
 <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"
@@ -45,10 +48,12 @@ 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'
+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: [
@@ -160,10 +165,14 @@ const menuItems = computed(() => [
       name: 'image',
       icon: 'ph:image',
       action: () => {
-        const url = window.prompt('Image URL')
+        if (props.image?.requestOptions) {
+          isShowUploadImageModal.value = true
+        } else {
+          const url = window.prompt('Image URL')
 
-        if (url) {
-          editor.value!.chain().focus().setImage({ src: url }).run()
+          if (url) {
+            editor.value!.chain().focus().setImage({ src: url }).run()
+          }
         }
       },
       title: 'Insert Image',
@@ -210,6 +219,11 @@ const menuItems = computed(() => [
     },
   ],
 ])
+
+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}

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "1.4.192",
+  "version": "1.4.194",
   "repository": "https://gitlab.finema.co/finema/ui-kit",
   "license": "MIT",
   "author": "Finema Dev Core Team",
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@nuxt/kit": "^3.13.1",
-    "@nuxt/ui": "2.18.4",
+    "@nuxt/ui": "2.18.5",
     "@pinia/nuxt": "^0.5.4",
     "@tiptap/extension-image": "^2.6.6",
     "@tiptap/extension-link": "^2.6.6",
@@ -67,7 +67,7 @@
   },
   "devDependencies": {
     "@finema/eslint-config": "^1.2.0",
-    "@nuxt/devtools": "^1.3.9",
+    "@nuxt/devtools": "^1.4.2",
     "@nuxt/eslint-config": "^0.5.0",
     "@nuxt/module-builder": "^0.5.5",
     "@nuxt/schema": "^3.13.1",