@finema/core 1.4.115 → 1.4.116

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

@@ -1,222 +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" 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" class="w-full">
-          <div :class="[ui.imageItem.onPreview.wrapper]">
-            <img
-              :class="[ui.imageItem.onPreview.previewImgClass]"
-              :src="upload.data.value[responseKey || '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="upload.data.value[responseKey || 'url']"
-                  alt="img-preview"
-                  class="w-full rounded-lg"
-                />
-              </Modal>
-            </div>
-          </div>
-
-          <div :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 i18next from 'i18next'
-
-const config = useUiConfig<typeof uploadImage>(uploadImage, 'uploadImage')
-
-const props = withDefaults(defineProps<IUploadImageAutoProps>(), {
-  accept: 'image/*',
-  bodyKey: 'file',
-  responseKey: 'url',
-  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<string | 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,
-  () => {
-    const response = _get(upload.data.value, props.responseKey, '')
-
-    value.value = response
-
-    emits('success', response)
-  }
-)
-
-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/InputUploadImageAuto/types.d.ts

@@ -8,7 +8,8 @@ export interface IUploadImageAutoProps extends IFieldProps {
     uploadAddLabel?: string;
     accept?: string[] | string;
     bodyKey?: string;
-    responseKey?: string;
+    responseURL?: string;
+    responsePath?: string;
     maxSize?: number;
 }
 export type IUploadImageAutoField = IFormFieldBase<INPUT_TYPES.UPLOAD_IMAGE_AUTO, IUploadImageAutoProps, {

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

@@ -1,55 +1,55 @@
-<template>
-  <FieldWrapper v-bind="wrapperProps">
-    <ClientOnly>
-      <QuillEditor
-        v-model:content="value"
-        :placeholder="placeholder ?? label"
-        :autofocus="autoFocus"
-        :disabled="isDisabled || isReadonly"
-        :name="name"
-        class="ql-snow focus:ring-primary-500 min-h-[300px] rounded-b-md ring-1 ring-inset ring-gray-300 focus:ring-2"
-        content-type="html"
-        :options="options"
-      />
-    </ClientOnly>
-  </FieldWrapper>
-</template>
-<script lang="ts" setup>
-import { useFieldHOC } from '#core/composables/useForm'
-import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
-import '@vueup/vue-quill/dist/vue-quill.snow.css'
-import type { IWYSIWYGFieldProps } from '#core/components/Form/InputWYSIWYG/types'
-
-const props = withDefaults(defineProps<IWYSIWYGFieldProps>(), {})
-const { value, wrapperProps } = useFieldHOC<string>(props)
-
-const options = {
-  modules: {
-    toolbar: [
-      // [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
-      ['bold', 'italic', 'underline'], // toggled buttons
-      // ['blockquote', 'code-block'],
-      // ['link', 'image', 'video'], // link and image, video
-      ['link'],
-
-      // [{ header: 1 }, { header: 2 }], // custom button values
-      // [{ list: 'ordered' }, { list: 'bullet' }],
-      // [{ script: 'sub' }, { script: 'super' }], // superscript/subscript
-      // [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
-      // [{ direction: 'rtl' }], // text direction
-
-      // [{ header: [1, 2, 3, 4, 5, 6, false] }],
-
-      [{ color: [] }, { background: [] }], // dropdown with defaults from theme
-      // [{ font: [] }],
-      // [{ align: [] }],
-      //
-      ['clean'], // remove formatting button
-    ],
-  },
-  theme: 'snow',
-}
-</script>
+<template>
+  <FieldWrapper v-bind="wrapperProps">
+    <ClientOnly>
+      <QuillEditor
+        v-model:content="value"
+        :placeholder="placeholder ?? label"
+        :autofocus="autoFocus"
+        :disabled="isDisabled || isReadonly"
+        :name="name"
+        class="ql-snow focus:ring-primary-500 min-h-[300px] rounded-b-md ring-1 ring-inset ring-gray-300 focus:ring-2"
+        content-type="html"
+        :options="options"
+      />
+    </ClientOnly>
+  </FieldWrapper>
+</template>
+<script lang="ts" setup>
+import { useFieldHOC } from '#core/composables/useForm'
+import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
+import '@vueup/vue-quill/dist/vue-quill.snow.css'
+import type { IWYSIWYGFieldProps } from '#core/components/Form/InputWYSIWYG/types'
+
+const props = withDefaults(defineProps<IWYSIWYGFieldProps>(), {})
+const { value, wrapperProps } = useFieldHOC<string>(props)
+
+const options = {
+  modules: {
+    toolbar: [
+      // [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
+      ['bold', 'italic', 'underline'], // toggled buttons
+      // ['blockquote', 'code-block'],
+      // ['link', 'image', 'video'], // link and image, video
+      ['link'],
+
+      // [{ header: 1 }, { header: 2 }], // custom button values
+      // [{ list: 'ordered' }, { list: 'bullet' }],
+      // [{ script: 'sub' }, { script: 'super' }], // superscript/subscript
+      // [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
+      // [{ direction: 'rtl' }], // text direction
+
+      // [{ header: [1, 2, 3, 4, 5, 6, false] }],
+
+      [{ color: [] }, { background: [] }], // dropdown with defaults from theme
+      // [{ font: [] }],
+      // [{ align: [] }],
+      //
+      ['clean'], // remove formatting button
+    ],
+  },
+  theme: 'snow',
+}
+</script>
 <style>
 .ql-toolbar.ql-snow{@apply rounded-t-md border-b-0}.ql-container.ql-snow,.ql-snow{@apply border-0}
-</style>
+</style>

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/Form/types.d.ts

@@ -73,3 +73,9 @@ export interface IFormFieldBase<I extends INPUT_TYPES, P extends IFieldProps, O>
     on?: O;
 }
 export type IFormField = ITextField | INumberField | IStaticField | ICheckboxField | IRadioField | ISelectField | IToggleField | ITextareaField | IDateTimeField | IDateTimeRangeField | IUploadFileClassicField | IUploadFileField | IUploadImageAutoField | IUploadDropzoneField | IUploadDropzoneAutoField | IUploadDropzoneAutoMultipleField | IUploadDropzoneImageAutoMultipleField | IWYSIWYGField | ITagsField | IFormFieldBase<INPUT_TYPES.COMPONENT, any, any>;
+export interface IFileValue {
+    url: string;
+    path?: string;
+    name?: string;
+    size?: number;
+}

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>