@finema/core 1.4.107 → 1.4.109

package/dist/module.json

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

package/dist/module.mjs

@@ -1,7 +1,7 @@
 import { defineNuxtModule, createResolver, installModule, addPlugin, addComponentsDir, addImportsDir } from '@nuxt/kit';
 
 const name = "@finema/core";
-const version = "1.4.107";
+const version = "1.4.109";
 
 const colors = {
   black: "#20243E",
@@ -394,7 +394,12 @@ const module = defineNuxtModule({
     );
     nuxt.options.build = {
       ...nuxt.options.build || {},
-      transpile: [...nuxt.options.build?.transpile || [], "date-fns", "@vuepic/vue-datepicker"]
+      transpile: [
+        ...nuxt.options.build?.transpile || [],
+        "date-fns",
+        "@vuepic/vue-datepicker",
+        "quill"
+      ]
     };
     await installModule("@pinia/nuxt");
     await installModule("@vee-validate/nuxt", veeValidateNuxtOptions);

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

@@ -123,6 +123,14 @@
         v-bind="getFieldBinding(option)"
         v-on="option.on ?? {}"
       />
+      <FormInputUploadImageAuto
+        v-else-if="option.type === INPUT_TYPES.UPLOAD_IMAGE_AUTO"
+        :class="option.class"
+        :form="form"
+        :request-options="option.props.requestOptions"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
       <FormInputUploadDropzone
         v-else-if="option.type === INPUT_TYPES.UPLOAD_DROPZONE"
         :class="option.class"
@@ -161,6 +169,13 @@
         v-bind="getFieldBinding(option)"
         v-on="option.on ?? {}"
       />
+      <FormInputTags
+        v-else-if="option.type === INPUT_TYPES.TAGS"
+        :class="option.class"
+        :form="form"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
       <component
         :is="option.component"
         v-else-if="option.type === INPUT_TYPES.COMPONENT"

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

@@ -0,0 +1,134 @@
+<template>
+  <FieldWrapper v-bind="wrapperProps">
+    <div
+      :class="[
+        ui.base,
+        ui.border,
+        ui.shadow,
+        ui.padding,
+        {
+          [ui.stages.default]: !wrapperProps.errorMessage,
+          [ui.stages.error]: wrapperProps.errorMessage,
+        },
+      ]"
+    >
+      <p
+        v-if="wrapperProps.placeholder && !innerValue && (!value || value.length === 0)"
+        :class="[ui.placeholder]"
+        @click="focusInput"
+      >
+        {{ wrapperProps.placeholder }}
+      </p>
+      <div :class="[ui.innerWrapper]">
+        <Badge
+          v-for="(text, index) in value"
+          :key="index"
+          :size="ui.tag.size || (ui.default.tag.size as any)"
+          :color="ui.tag.color || (ui.default.tag.color as any)"
+          :variant="ui.tag.variant || (ui.default.tag.variant as any)"
+          :ui="badgeUi"
+        >
+          {{ tagPrefix + text }}
+        </Badge>
+        <input
+          ref="inputRef"
+          v-model="innerValue"
+          :class="[ui.input]"
+          :disabled="wrapperProps.isDisabled"
+          :name="name"
+          :readonly="isReadonly"
+          :autofocus="!!autoFocus"
+          @blur="onBlur"
+          @keyup.delete="onDelete"
+          @keyup.enter="onEnter"
+          @keyup.space="onSpace"
+        />
+      </div>
+    </div>
+  </FieldWrapper>
+</template>
+
+<script lang="ts" setup>
+import { ref, toRef, useUI, useUiConfig } from '#imports'
+import { type ITagsFieldProps } from '#core/components/Form/InputTags/types'
+import { tags } from '#core/ui.config'
+import { useFieldHOC } from '#core/composables/useForm'
+import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
+
+const config = useUiConfig<typeof tags>(tags, 'tags')
+
+const props = withDefaults(defineProps<ITagsFieldProps>(), {
+  tagPrefix: '#',
+})
+
+const emits = defineEmits(['change', 'blur'])
+
+const { value, wrapperProps } = useFieldHOC<string[]>(props)
+
+const { ui } = useUI('tags', toRef(props, 'ui'), config)
+
+const inputRef = ref<HTMLInputElement | null>(null)
+const innerValue = ref<string>('')
+const backspaceCount = ref<number>(0)
+
+const operateValue = (input: string) => {
+  const tagSet = splitBySpace(input)
+
+  if (value.value && value.value.length > 0) {
+    value.value = [...value.value, ...tagSet]
+  } else {
+    value.value = tagSet
+  }
+
+  innerValue.value = ''
+
+  emits('change', value.value)
+}
+
+const onBlur = (e: FocusEvent) => {
+  const eventValue = e.target as HTMLInputElement
+
+  if (!eventValue.value || eventValue.value === '') return
+
+  operateValue(eventValue.value)
+
+  emits('blur', eventValue.value)
+}
+
+const onDelete = (e: KeyboardEvent) => {
+  if (e.key === 'Backspace') {
+    if (innerValue.value === '') {
+      backspaceCount.value += 1
+    } else {
+      backspaceCount.value = 0
+    }
+
+    if (backspaceCount.value >= 2 && value.value.length > 0) {
+      value.value.pop()
+      backspaceCount.value = 0
+    }
+  }
+}
+
+const onEnter = (e: KeyboardEvent) => {
+  if (e.key === 'Enter') {
+    operateValue(innerValue.value)
+  }
+}
+
+const onSpace = (e: KeyboardEvent) => {
+  if (e.key === ' ') {
+    operateValue(innerValue.value)
+  }
+}
+
+const splitBySpace = (input: string): string[] => {
+  const spited = input.split(' ')
+
+  return spited.filter((item) => item !== '')
+}
+
+const focusInput = () => {
+  inputRef.value?.focus()
+}
+</script>

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

@@ -0,0 +1,11 @@
+import { type IFieldProps, type IFormFieldBase, type INPUT_TYPES } from '#core/components/Form/types';
+export interface ITagsFieldProps extends IFieldProps {
+    leadingIcon?: string;
+    trailingIcon?: string;
+    tagPrefix?: string;
+    badgeUi?: object | any;
+}
+export type ITagsField = IFormFieldBase<INPUT_TYPES.TAGS, ITagsFieldProps, {
+    change?: (value: string[]) => void;
+    blur?: (value: string) => void;
+}>;

package/dist/runtime/components/Form/InputUploadDropzoneImageAutoMultiple/item.vue

@@ -20,7 +20,7 @@
       <div :class="[ui.imageItem.onPreview.wrapper]">
         <img
           :class="[ui.imageItem.onPreview.previewImgClass]"
-          :src="upload.data.value[responseKey]"
+          :src="upload.data.value[responseKey || 'url']"
           alt="img"
         />
         <div :class="[ui.imageItem.onPreview.previewActionWrapper]">
@@ -46,7 +46,7 @@
               />
             </div>
             <img
-              :src="upload.data.value[responseKey]"
+              :src="upload.data.value[responseKey || 'url']"
               alt="image-preview"
               class="w-full rounded-lg"
             />

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

@@ -0,0 +1,222 @@
+<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>

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

@@ -0,0 +1,19 @@
+import { type AxiosRequestConfig } from 'axios';
+import { type IFieldProps, type IFormFieldBase, type INPUT_TYPES } from '../types';
+export interface IUploadImageAutoProps extends IFieldProps {
+    requestOptions: Omit<AxiosRequestConfig, 'baseURL'> & {
+        baseURL: string;
+    };
+    uploadPathURL?: string;
+    uploadAddLabel?: string;
+    accept?: string[] | string;
+    bodyKey?: string;
+    responseKey?: string;
+    maxSize?: number;
+}
+export type IUploadImageAutoField = IFormFieldBase<INPUT_TYPES.UPLOAD_IMAGE_AUTO, IUploadImageAutoProps, {
+    change: (value: File | undefined) => void;
+    success: (res: any) => void;
+    delete: () => void;
+    error: (err: any) => void;
+}>;

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

@@ -11,12 +11,14 @@ import { type IDateTimeField } from '#core/components/Form/InputDateTime/date_ti
 import { type IDateTimeRangeField } from '#core/components/Form/InputDateTimeRange/date_range_time_field.types';
 import { type IUploadFileClassicField } from '#core/components/Form/InputUploadFileClassic/types';
 import { type IUploadFileField } from '#core/components/Form/InputUploadFileClassicAuto/types';
+import { type IUploadImageAutoField } from '#core/components/Form/InputUploadImageAuto/types';
 import { type IUploadDropzoneField } from '#core/components/Form/InputUploadDropzone/types';
 import { type IUploadDropzoneAutoField } from '#core/components/Form/InputUploadDropzoneAuto/types';
 import type { INumberField } from '#core/components/Form/InputNumber/types';
 import type { IUploadDropzoneAutoMultipleField } from '#core/components/Form/InputUploadDropzoneAutoMultiple/types';
 import type { IUploadDropzoneImageAutoMultipleField } from '#core/components/Form/InputUploadDropzoneImageAutoMultiple/types';
 import type { IWYSIWYGField } from '#core/components/Form/InputWYSIWYG/types';
+import type { ITagsField } from '#core/components/Form/InputTags/types';
 export declare const enum INPUT_TYPES {
     TEXT = "TEXT",
     NUMBER = "NUMBER",
@@ -34,11 +36,13 @@ export declare const enum INPUT_TYPES {
     DATE_TIME_RANGE = "DATE_TIME_RANGE",
     UPLOAD_FILE_CLASSIC = "UPLOAD_FILE_CLASSIC",
     UPLOAD_FILE_CLASSIC_AUTO = "UPLOAD_FILE_CLASSIC_AUTO",
+    UPLOAD_IMAGE_AUTO = "UPLOAD_IMAGE_AUTO",
     UPLOAD_DROPZONE = "UPLOAD_DROPZONE",
     UPLOAD_DROPZONE_AUTO = "UPLOAD_DROPZONE_AUTO",
     UPLOAD_DROPZONE_AUTO_MULTIPLE = "UPLOAD_DROPZONE_AUTO_MULTIPLE",
     UPLOAD_DROPZONE_IMAGE_AUTO_MULTIPLE = "UPLOAD_DROPZONE_IMAGE_AUTO_MULTIPLE",
     WYSIWYG = "WYSIWYG",
+    TAGS = "TAGS",
     COMPONENT = "COMPONENT"
 }
 export interface IFieldProps {
@@ -68,4 +72,4 @@ export interface IFormFieldBase<I extends INPUT_TYPES, P extends IFieldProps, O>
     props: P;
     on?: O;
 }
-export type IFormField = ITextField | INumberField | IStaticField | ICheckboxField | IRadioField | ISelectField | IToggleField | ITextareaField | IDateTimeField | IDateTimeRangeField | IUploadFileClassicField | IUploadFileField | IUploadDropzoneField | IUploadDropzoneAutoField | IUploadDropzoneAutoMultipleField | IUploadDropzoneImageAutoMultipleField | IWYSIWYGField | IFormFieldBase<INPUT_TYPES.COMPONENT, any, any>;
+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>;

package/dist/runtime/components/Form/types.mjs

@@ -15,11 +15,13 @@ export var INPUT_TYPES = /* @__PURE__ */ ((INPUT_TYPES2) => {
   INPUT_TYPES2["DATE_TIME_RANGE"] = "DATE_TIME_RANGE";
   INPUT_TYPES2["UPLOAD_FILE_CLASSIC"] = "UPLOAD_FILE_CLASSIC";
   INPUT_TYPES2["UPLOAD_FILE_CLASSIC_AUTO"] = "UPLOAD_FILE_CLASSIC_AUTO";
+  INPUT_TYPES2["UPLOAD_IMAGE_AUTO"] = "UPLOAD_IMAGE_AUTO";
   INPUT_TYPES2["UPLOAD_DROPZONE"] = "UPLOAD_DROPZONE";
   INPUT_TYPES2["UPLOAD_DROPZONE_AUTO"] = "UPLOAD_DROPZONE_AUTO";
   INPUT_TYPES2["UPLOAD_DROPZONE_AUTO_MULTIPLE"] = "UPLOAD_DROPZONE_AUTO_MULTIPLE";
   INPUT_TYPES2["UPLOAD_DROPZONE_IMAGE_AUTO_MULTIPLE"] = "UPLOAD_DROPZONE_IMAGE_AUTO_MULTIPLE";
   INPUT_TYPES2["WYSIWYG"] = "WYSIWYG";
+  INPUT_TYPES2["TAGS"] = "TAGS";
   INPUT_TYPES2["COMPONENT"] = "COMPONENT";
   return INPUT_TYPES2;
 })(INPUT_TYPES || {});

package/dist/runtime/types/config.d.ts

@@ -1 +1 @@
-export type UIComponentList = 'modal' | 'slideover' | 'dropdown' | 'icon' | 'button' | 'buttonGroup' | 'tabs' | 'card' | 'breadcrumb' | 'badge' | 'input' | 'pagination' | 'notification' | 'uploadFileInputClassicAuto' | 'uploadFileDropzone' | 'uploadFileDropzoneImage';
+export type UIComponentList = 'modal' | 'slideover' | 'dropdown' | 'icon' | 'button' | 'buttonGroup' | 'tabs' | 'card' | 'breadcrumb' | 'badge' | 'input' | 'pagination' | 'notification' | 'uploadFileInputClassicAuto' | 'uploadFileDropzone' | 'uploadFileDropzoneImage' | 'uploadImage' | 'tags';

package/dist/runtime/ui.config/index.d.ts

@@ -12,3 +12,5 @@ export { breadcrumb } from './breadcrumb';
 export { uploadFileInputClassicAuto } from './uploadFileInputClassicAuto';
 export { uploadFileDropzone } from './uploadFileDropzone';
 export { uploadFileDropzoneImage } from './uploadDropzoneImage';
+export { uploadImage } from './uploadImage';
+export { tags } from './tags';

package/dist/runtime/ui.config/index.mjs

@@ -12,3 +12,5 @@ export { breadcrumb } from "./breadcrumb.mjs";
 export { uploadFileInputClassicAuto } from "./uploadFileInputClassicAuto.mjs";
 export { uploadFileDropzone } from "./uploadFileDropzone.mjs";
 export { uploadFileDropzoneImage } from "./uploadDropzoneImage.mjs";
+export { uploadImage } from "./uploadImage.mjs";
+export { tags } from "./tags.mjs";

package/dist/runtime/ui.config/tags.d.ts

@@ -0,0 +1,25 @@
+export declare const tags: {
+    base: string;
+    border: string;
+    shadow: string;
+    padding: string;
+    stages: {
+        default: string;
+        error: string;
+    };
+    placeholder: string;
+    innerWrapper: string;
+    input: string;
+    tag: {
+        size: string;
+        color: string;
+        variant: string;
+    };
+    default: {
+        tag: {
+            size: string;
+            color: string;
+            variant: string;
+        };
+    };
+};

package/dist/runtime/ui.config/tags.mjs

@@ -0,0 +1,25 @@
+export const tags = {
+  base: "relative flex w-full flex-wrap items-center bg-white ring-1 ring-inset",
+  border: "rounded-md border-0",
+  shadow: "shadow-sm",
+  padding: "px-3.5 py-2.5",
+  stages: {
+    default: "has-[:focus]:ring-primary-500 ring-gray-300 has-[:focus]:ring-2",
+    error: "has-[:focus]:ring-danger-500 ring-danger-500 ring-danger-300 has-[:focus]:ring-2"
+  },
+  placeholder: "absolute left-3.5 top-2.5 text-sm text-gray-400",
+  innerWrapper: "mr-2 flex w-full flex-wrap items-center gap-2",
+  input: "m-0 grow p-0 text-sm text-gray-900 outline-none",
+  tag: {
+    size: "",
+    color: "",
+    variant: ""
+  },
+  default: {
+    tag: {
+      size: "sm",
+      color: "primary",
+      variant: "solid"
+    }
+  }
+};

package/dist/runtime/ui.config/uploadDropzoneImage.mjs

@@ -9,7 +9,7 @@ export const uploadFileDropzoneImage = {
       percentClass: "text-primary"
     },
     onPreview: {
-      wrapper: "relative size-24 overflow-hidden rounded-lg ring-[1px] ring-gray-100",
+      wrapper: "relative size-24 overflow-hidden rounded-lg border-[1px] border-gray-100",
       previewImgClass: "size-full object-cover",
       previewActionWrapper: "absolute inset-0 z-10 flex items-center justify-center space-x-2 opacity-0 transition hover:bg-black/50 hover:opacity-100",
       actionBtnClass: "size-7 cursor-pointer text-white",
@@ -17,7 +17,7 @@ export const uploadFileDropzoneImage = {
       previewText: "truncate text-center text-sm"
     },
     onFailed: {
-      wrapper: "ring-danger relative size-24 overflow-hidden rounded-lg ring-[1px]",
+      wrapper: "border-danger border-dashed relative size-24 overflow-hidden rounded-lg border-[1px]",
       failedImgClass: "size-full object-cover",
       failedActionWrapper: "absolute inset-0 z-10 flex items-center justify-center space-x-2 bg-white/50",
       actionBtnClass: "text-danger size-7 cursor-pointer"

package/dist/runtime/ui.config/uploadImage.d.ts

@@ -0,0 +1,34 @@
+export declare const uploadImage: {
+    base: string;
+    imageItemWrapper: string;
+    imageItem: {
+        wrapper: string;
+        onLoading: {
+            wrapper: string;
+            percentClass: string;
+        };
+        onPreview: {
+            wrapper: string;
+            previewImgClass: string;
+            previewActionWrapper: string;
+            actionBtnClass: string;
+            previewTextWrapper: string;
+            previewText: string;
+        };
+        onFailed: {
+            wrapper: string;
+            failedImgClass: string;
+            failedActionWrapper: string;
+            actionBtnClass: string;
+        };
+    };
+    action: {
+        addingWrapper: string;
+        deleteIconClass: string;
+        addingBtnClass: string;
+        addingTextClass: string;
+        previewIcon: string;
+        deleteIcon: string;
+        addingIcon: string;
+    };
+};

package/dist/runtime/ui.config/uploadImage.mjs

@@ -0,0 +1,36 @@
+export const uploadImage = {
+  base: "w-full overflow-hidden",
+  imageItemWrapper: "flex w-full flex-wrap gap-4",
+  imageItem: {
+    wrapper: "max-w-[96px]",
+    onLoading: {
+      wrapper: "flex size-24 flex-col items-center justify-center overflow-hidden rounded-lg border-[1px] border-dashed p-2",
+      percentClass: "text-primary"
+    },
+    onPreview: {
+      wrapper: "relative size-24 overflow-hidden rounded-lg border-[1px] border-gray-100",
+      previewImgClass: "size-full object-cover",
+      previewActionWrapper: "absolute inset-0 z-10 flex items-center justify-center space-x-2 opacity-0 transition hover:bg-black/50 hover:opacity-100",
+      actionBtnClass: "size-7 cursor-pointer text-white",
+      previewTextWrapper: "mt-2 truncate",
+      previewText: "truncate text-center text-sm"
+    },
+    onFailed: {
+      wrapper: "relative size-24 overflow-hidden rounded-lg border-[1px] border-dashed border-danger",
+      failedImgClass: "size-full object-cover",
+      failedActionWrapper: "absolute inset-0 z-10 flex items-center justify-center space-x-2 bg-white/50",
+      actionBtnClass: "text-danger size-7 cursor-pointer"
+    }
+  },
+  action: {
+    // wrapper: 'flex items-center space-x-4',
+    addingWrapper: "flex size-24 flex-col items-center justify-center overflow-hidden rounded-lg border-[1px] border-dashed p-2 cursor-pointer transition hover:bg-gray-100",
+    // iconClass: 'size-6 text-gray-400 cursor-pointer',
+    deleteIconClass: "size-6 text-danger cursor-pointer",
+    addingBtnClass: "size-7 text-gray-500",
+    addingTextClass: "text-center text-sm text-gray-500",
+    previewIcon: "i-ic:outline-remove-red-eye",
+    deleteIcon: "ph:trash",
+    addingIcon: "i-material-symbols:add"
+  }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "1.4.107",
+  "version": "1.4.109",
   "repository": "https://gitlab.finema.co/finema/ui-kit",
   "license": "MIT",
   "author": "Finema Dev Core Team",
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@nuxt/kit": "^3.11.1",
-    "@nuxt/ui": "^2.15.0",
+    "@nuxt/ui": "^2.15.1",
     "@pinia/nuxt": "^0.5.1",
     "@vee-validate/nuxt": "^4.12.6",
     "@vee-validate/zod": "^4.12.6",