@finema/core 1.4.192 → 1.4.193

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

@@ -1,219 +1,219 @@
-<template>
-  <FieldWrapper v-bind="wrapperProps">
-    <div :class="[ui.base]">
-      <input
-        ref="fileInputRef"
-        type="file"
-        class="hidden"
-        :name="name"
-        :accept="acceptFile"
-        :disabled="isDisabled"
-        @change="handleChange"
-      />
-
-      <div :class="[ui.imageItem.wrapper]">
-        <div v-if="!selectedFile && !value" class="w-full">
-          <div :class="[ui.action.addingWrapper]" @click="handleOpenFile">
-            <Icon :name="ui.action.addingIcon" :class="[ui.action.addingBtnClass]" />
-            <p :class="[ui.action.addingTextClass]">{{ uploadAddLabel }}</p>
-          </div>
-        </div>
-
-        <!-- Loading State -->
-        <div v-if="selectedFile && upload.status.value.isLoading" class="w-full">
-          <div :class="[ui.imageItem.onLoading.wrapper]">
-            <div :class="[ui.imageItem.onLoading.percentClass]">{{ percent }}%</div>
-            <UProgress :value="percent" />
-          </div>
-        </div>
-
-        <!-- Success State -->
-        <div v-if="(selectedFile && upload.status.value.isSuccess) || value" class="w-full">
-          <div :class="[ui.imageItem.onPreview.wrapper]">
-            <img :class="[ui.imageItem.onPreview.previewImgClass]" :src="value?.url" alt="img" />
-            <div :class="[ui.imageItem.onPreview.previewActionWrapper]">
-              <Icon
-                title="ดูตัวอย่าง"
-                :name="ui.action.previewIcon"
-                :class="[ui.imageItem.onPreview.actionBtnClass]"
-                @click="() => (isPreviewOpen = true)"
-              />
-              <Icon
-                title="ลบไฟล์"
-                :name="ui.action.deleteIcon"
-                :class="[ui.imageItem.onPreview.actionBtnClass]"
-                @click="handleDeleteFile"
-              />
-              <Modal v-model="isPreviewOpen" size="xl">
-                <div class="absolute -top-8 left-0 flex w-full justify-between text-gray-600">
-                  <p>{{ selectedFile?.name }}</p>
-                  <Icon
-                    name="i-heroicons-x-mark"
-                    class="size-6 cursor-pointer hover:text-gray-400"
-                    @click="() => (isPreviewOpen = false)"
-                  />
-                </div>
-                <img :src="value?.url" alt="img-preview" class="w-full rounded-lg" />
-              </Modal>
-            </div>
-          </div>
-
-          <div v-if="selectedFile" :class="[ui.imageItem.onPreview.previewTextWrapper]">
-            <p :class="[ui.imageItem.onPreview.previewText]">{{ selectedFile.name }}</p>
-          </div>
-        </div>
-
-        <!-- Failed State -->
-        <div v-if="selectedFile && upload.status.value.isError" class="w-full">
-          <div :class="[ui.imageItem.onFailed.wrapper]">
-            <img
-              :class="[ui.imageItem.onFailed.failedImgClass]"
-              :src="generateURL(selectedFile)"
-              alt="img"
-            />
-            <div :class="[ui.imageItem.onFailed.failedActionWrapper]">
-              <Icon
-                title="ลบไฟล์"
-                :name="ui.action.deleteIcon"
-                :class="[ui.imageItem.onFailed.actionBtnClass]"
-                @click="handleDeleteFile"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </FieldWrapper>
-</template>
-
-<script lang="ts" setup>
-import { type IUploadImageAutoProps } from './types'
-import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
-import { useFieldHOC } from '#core/composables/useForm'
-import {
-  computed,
-  ref,
-  toRef,
-  useUI,
-  useUiConfig,
-  useWatchTrue,
-  useUploadLoader,
-  _get,
-  type IUploadRequest,
-} from '#imports'
-import { uploadImage } from '#core/ui.config'
-import {
-  checkMaxSize,
-  generateURL,
-  useFileAllocate,
-  useFileProgress,
-} from '#core/helpers/componentHelper'
-import type { IFileValue } from '#core/components/Form/types'
-import i18next from 'i18next'
-
-const config = useUiConfig<typeof uploadImage>(uploadImage, 'uploadImage')
-
-const props = withDefaults(defineProps<IUploadImageAutoProps>(), {
-  accept: 'image/*',
-  bodyKey: 'file',
-  responseURL: 'url',
-  responsePath: 'path',
-  uploadAddLabel: 'อัพโหลด',
-})
-
-const emits = defineEmits(['change', 'success', 'delete', 'error'])
-
-const request: IUploadRequest = {
-  pathURL: props.uploadPathURL,
-  requestOptions: props.requestOptions,
-}
-
-const selectedFile = ref<File>()
-const isPreviewOpen = ref<boolean>(false)
-
-const { wrapperProps, value, errorMessage } = useFieldHOC<IFileValue | undefined>(props)
-
-const upload = useUploadLoader(request)
-const { ui } = useUI('uploadImage', toRef(props, 'ui'), config)
-
-const fileInputRef = ref<HTMLInputElement | null>()
-
-const fileAllocate = useFileAllocate(toRef(selectedFile), props)
-const { onUploadProgress, onDownloadProgress, percent } = useFileProgress()
-const acceptFile = computed(() =>
-  typeof props.accept === 'string' ? props.accept : props.accept?.join(',')
-)
-
-const handleChange = (e: Event) => {
-  if (props.isDisabled) return
-
-  const file = (e.target as HTMLInputElement).files?.[0]
-  const result = handleCheckFileCondition(file)
-
-  if (result && file) {
-    selectedFile.value = file
-    emits('change', selectedFile.value)
-    const formData = new FormData()
-
-    formData.append(props.bodyKey, file)
-    upload.run(formData, { data: { onUploadProgress, onDownloadProgress } })
-  }
-}
-
-const handleCheckFileCondition = (file: File | undefined): boolean => {
-  if (!file) return false
-  const maxSize = checkMaxSize(file, fileAllocate.acceptFileSizeKb.value)
-
-  if (!maxSize) {
-    if (fileAllocate.isAcceptFileUseMb.value) {
-      errorMessage.value = i18next.t('custom:invalid_file_size_mb', {
-        size: fileAllocate.acceptFileSizeMb.value,
-      })
-    } else {
-      errorMessage.value = i18next.t('custom:invalid_file_size_kb', {
-        size: fileAllocate.acceptFileSizeKb.value,
-      })
-    }
-
-    return false
-  }
-
-  errorMessage.value = ''
-
-  return true
-}
-
-const handleOpenFile = () => {
-  fileInputRef.value?.click()
-}
-
-const handleDeleteFile = () => {
-  fileInputRef.value!.value = ''
-  selectedFile.value = undefined
-  value.value = undefined
-  emits('change', undefined)
-
-  emits('delete')
-}
-
-useWatchTrue(
-  () => upload.status.value.isSuccess,
-  () => {
-    value.value = {
-      url: _get(upload.data.value, props.responseURL),
-      path: _get(upload.data.value, props.responsePath),
-      name: upload.data.value.name,
-      size: upload.data.value.size,
-    }
-
-    emits('success', value.value)
-  }
-)
-
-useWatchTrue(
-  () => upload.status.value.isError,
-  () => {
-    emits('error', upload.status.value.errorData)
-  }
-)
-</script>
+<template>
+  <FieldWrapper v-bind="wrapperProps">
+    <div :class="[ui.base]">
+      <input
+        ref="fileInputRef"
+        type="file"
+        class="hidden"
+        :name="name"
+        :accept="acceptFile"
+        :disabled="isDisabled"
+        @change="handleChange"
+      />
+
+      <div :class="[ui.imageItem.wrapper]">
+        <div v-if="!selectedFile && !value" class="w-full">
+          <div :class="[ui.action.addingWrapper]" @click="handleOpenFile">
+            <Icon :name="ui.action.addingIcon" :class="[ui.action.addingBtnClass]" />
+            <p :class="[ui.action.addingTextClass]">{{ uploadAddLabel }}</p>
+          </div>
+        </div>
+
+        <!-- Loading State -->
+        <div v-if="selectedFile && upload.status.value.isLoading" class="w-full">
+          <div :class="[ui.imageItem.onLoading.wrapper]">
+            <div :class="[ui.imageItem.onLoading.percentClass]">{{ percent }}%</div>
+            <UProgress :value="percent" />
+          </div>
+        </div>
+
+        <!-- Success State -->
+        <div v-if="(selectedFile && upload.status.value.isSuccess) || value" class="w-full">
+          <div :class="[ui.imageItem.onPreview.wrapper]">
+            <img :class="[ui.imageItem.onPreview.previewImgClass]" :src="value?.url" alt="img" />
+            <div :class="[ui.imageItem.onPreview.previewActionWrapper]">
+              <Icon
+                title="ดูตัวอย่าง"
+                :name="ui.action.previewIcon"
+                :class="[ui.imageItem.onPreview.actionBtnClass]"
+                @click="() => (isPreviewOpen = true)"
+              />
+              <Icon
+                title="ลบไฟล์"
+                :name="ui.action.deleteIcon"
+                :class="[ui.imageItem.onPreview.actionBtnClass]"
+                @click="handleDeleteFile"
+              />
+              <Modal v-model="isPreviewOpen" size="xl">
+                <div class="absolute -top-8 left-0 flex w-full justify-between text-gray-600">
+                  <p>{{ selectedFile?.name }}</p>
+                  <Icon
+                    name="i-heroicons-x-mark"
+                    class="size-6 cursor-pointer hover:text-gray-400"
+                    @click="() => (isPreviewOpen = false)"
+                  />
+                </div>
+                <img :src="value?.url" alt="img-preview" class="w-full rounded-lg" />
+              </Modal>
+            </div>
+          </div>
+
+          <div v-if="selectedFile" :class="[ui.imageItem.onPreview.previewTextWrapper]">
+            <p :class="[ui.imageItem.onPreview.previewText]">{{ selectedFile.name }}</p>
+          </div>
+        </div>
+
+        <!-- Failed State -->
+        <div v-if="selectedFile && upload.status.value.isError" class="w-full">
+          <div :class="[ui.imageItem.onFailed.wrapper]">
+            <img
+              :class="[ui.imageItem.onFailed.failedImgClass]"
+              :src="generateURL(selectedFile)"
+              alt="img"
+            />
+            <div :class="[ui.imageItem.onFailed.failedActionWrapper]">
+              <Icon
+                title="ลบไฟล์"
+                :name="ui.action.deleteIcon"
+                :class="[ui.imageItem.onFailed.actionBtnClass]"
+                @click="handleDeleteFile"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </FieldWrapper>
+</template>
+
+<script lang="ts" setup>
+import { type IUploadImageAutoProps } from './types'
+import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
+import { useFieldHOC } from '#core/composables/useForm'
+import {
+  computed,
+  ref,
+  toRef,
+  useUI,
+  useUiConfig,
+  useWatchTrue,
+  useUploadLoader,
+  _get,
+  type IUploadRequest,
+} from '#imports'
+import { uploadImage } from '#core/ui.config'
+import {
+  checkMaxSize,
+  generateURL,
+  useFileAllocate,
+  useFileProgress,
+} from '#core/helpers/componentHelper'
+import type { IFileValue } from '#core/components/Form/types'
+import i18next from 'i18next'
+
+const config = useUiConfig<typeof uploadImage>(uploadImage, 'uploadImage')
+
+const props = withDefaults(defineProps<IUploadImageAutoProps>(), {
+  accept: 'image/*',
+  bodyKey: 'file',
+  responseURL: 'url',
+  responsePath: 'path',
+  uploadAddLabel: 'อัพโหลด',
+})
+
+const emits = defineEmits(['change', 'success', 'delete', 'error'])
+
+const request: IUploadRequest = {
+  pathURL: props.uploadPathURL,
+  requestOptions: props.requestOptions,
+}
+
+const selectedFile = ref<File>()
+const isPreviewOpen = ref<boolean>(false)
+
+const { wrapperProps, value, errorMessage } = useFieldHOC<IFileValue | undefined>(props)
+
+const upload = useUploadLoader(request)
+const { ui } = useUI('uploadImage', toRef(props, 'ui'), config)
+
+const fileInputRef = ref<HTMLInputElement | null>()
+
+const fileAllocate = useFileAllocate(toRef(selectedFile), props)
+const { onUploadProgress, onDownloadProgress, percent } = useFileProgress()
+const acceptFile = computed(() =>
+  typeof props.accept === 'string' ? props.accept : props.accept?.join(',')
+)
+
+const handleChange = (e: Event) => {
+  if (props.isDisabled) return
+
+  const file = (e.target as HTMLInputElement).files?.[0]
+  const result = handleCheckFileCondition(file)
+
+  if (result && file) {
+    selectedFile.value = file
+    emits('change', selectedFile.value)
+    const formData = new FormData()
+
+    formData.append(props.bodyKey, file)
+    upload.run(formData, { data: { onUploadProgress, onDownloadProgress } })
+  }
+}
+
+const handleCheckFileCondition = (file: File | undefined): boolean => {
+  if (!file) return false
+  const maxSize = checkMaxSize(file, fileAllocate.acceptFileSizeKb.value)
+
+  if (!maxSize) {
+    if (fileAllocate.isAcceptFileUseMb.value) {
+      errorMessage.value = i18next.t('custom:invalid_file_size_mb', {
+        size: fileAllocate.acceptFileSizeMb.value,
+      })
+    } else {
+      errorMessage.value = i18next.t('custom:invalid_file_size_kb', {
+        size: fileAllocate.acceptFileSizeKb.value,
+      })
+    }
+
+    return false
+  }
+
+  errorMessage.value = ''
+
+  return true
+}
+
+const handleOpenFile = () => {
+  fileInputRef.value?.click()
+}
+
+const handleDeleteFile = () => {
+  fileInputRef.value!.value = ''
+  selectedFile.value = undefined
+  value.value = undefined
+  emits('change', undefined)
+
+  emits('delete')
+}
+
+useWatchTrue(
+  () => upload.status.value.isSuccess,
+  () => {
+    value.value = {
+      url: _get(upload.data.value, props.responseURL),
+      path: _get(upload.data.value, props.responsePath),
+      name: upload.data.value.name,
+      size: upload.data.value.size,
+    }
+
+    emits('success', value.value)
+  }
+)
+
+useWatchTrue(
+  () => upload.status.value.isError,
+  () => {
+    emits('error', upload.status.value.errorData)
+  }
+)
+</script>

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>