@finema/core 1.4.49 → 1.4.51

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

@@ -1,54 +1,54 @@
-<template>
-  <FieldWrapper v-bind="wrapperProps">
-    <UInput
-      v-if="type === 'password'"
-      v-model="value"
-      :disabled="wrapperProps.isDisabled"
-      :leading-icon="leadingIcon"
-      :trailing-icon="trailingIcon"
-      :name="name"
-      :placeholder="wrapperProps.placeholder"
-      :type="isShowPassword ? 'text' : 'password'"
-      :autofocus="!!autoFocus"
-      :icon="icon"
-      :readonly="isReadonly"
-      :ui="_deepMerge({}, ui, { icon: { trailing: { pointer: '' } } })"
-    >
-      <template #trailing>
-        <UButton
-          color="gray"
-          variant="link"
-          :icon="isShowPassword ? 'i-heroicons-eye' : 'i-heroicons-eye-slash'"
-          :padded="false"
-          @click="isShowPassword = !isShowPassword"
-        />
-      </template>
-    </UInput>
-    <UInput
-      v-else
-      v-model="value"
-      :disabled="wrapperProps.isDisabled"
-      :leading-icon="leadingIcon"
-      :trailing-icon="trailingIcon"
-      :name="name"
-      :placeholder="wrapperProps.placeholder"
-      :type="type || 'text'"
-      :autofocus="!!autoFocus"
-      :icon="icon"
-      :readonly="isReadonly"
-      :ui="ui"
-    />
-  </FieldWrapper>
-</template>
-<script lang="ts" setup>
-import { _deepMerge, ref } from '#imports'
-import { type ITextFieldProps } from '#core/components/Form/InputText/types'
-import { useFieldHOC } from '#core/composables/useForm'
-import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
-
-const props = withDefaults(defineProps<ITextFieldProps>(), {})
-
-const { value, wrapperProps } = useFieldHOC<string>(props)
-
-const isShowPassword = ref(false)
-</script>
+<template>
+  <FieldWrapper v-bind="wrapperProps">
+    <UInput
+      v-if="type === 'password'"
+      v-model="value"
+      :disabled="wrapperProps.isDisabled"
+      :leading-icon="leadingIcon"
+      :trailing-icon="trailingIcon"
+      :name="name"
+      :placeholder="wrapperProps.placeholder"
+      :type="isShowPassword ? 'text' : 'password'"
+      :autofocus="!!autoFocus"
+      :icon="icon"
+      :readonly="isReadonly"
+      :ui="_deepMerge({}, ui, { icon: { trailing: { pointer: '' } } })"
+    >
+      <template #trailing>
+        <UButton
+          color="gray"
+          variant="link"
+          :icon="isShowPassword ? 'i-heroicons-eye' : 'i-heroicons-eye-slash'"
+          :padded="false"
+          @click="isShowPassword = !isShowPassword"
+        />
+      </template>
+    </UInput>
+    <UInput
+      v-else
+      v-model="value"
+      :disabled="wrapperProps.isDisabled"
+      :leading-icon="leadingIcon"
+      :trailing-icon="trailingIcon"
+      :name="name"
+      :placeholder="wrapperProps.placeholder"
+      :type="type || 'text'"
+      :autofocus="!!autoFocus"
+      :icon="icon"
+      :readonly="isReadonly"
+      :ui="ui"
+    />
+  </FieldWrapper>
+</template>
+<script lang="ts" setup>
+import { _deepMerge, ref } from '#imports'
+import { type ITextFieldProps } from '#core/components/Form/InputText/types'
+import { useFieldHOC } from '#core/composables/useForm'
+import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
+
+const props = withDefaults(defineProps<ITextFieldProps>(), {})
+
+const { value, wrapperProps } = useFieldHOC<string>(props)
+
+const isShowPassword = ref(false)
+</script>

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

@@ -1,25 +1,25 @@
-<template>
-  <FieldWrapper v-bind="wrapperProps">
-    <UTextarea
-      v-model="value"
-      :disabled="wrapperProps.isDisabled"
-      :name="name"
-      :resize="resize"
-      :placeholder="wrapperProps.placeholder"
-      :autofocus="!!autoFocus"
-      :autoresize="autoresize"
-      :rows="rows"
-      :readonly="isReadonly"
-      :ui="ui"
-    />
-  </FieldWrapper>
-</template>
-<script lang="ts" setup>
-import { useFieldHOC } from '#core/composables/useForm'
-import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
-import { type ITextareaFieldProps } from '#core/components/Form/InputTextarea/types'
-
-const props = withDefaults(defineProps<ITextareaFieldProps>(), {})
-
-const { value, wrapperProps } = useFieldHOC<string>(props)
-</script>
+<template>
+  <FieldWrapper v-bind="wrapperProps">
+    <UTextarea
+      v-model="value"
+      :disabled="wrapperProps.isDisabled"
+      :name="name"
+      :resize="resize"
+      :placeholder="wrapperProps.placeholder"
+      :autofocus="!!autoFocus"
+      :autoresize="autoresize"
+      :rows="rows"
+      :readonly="isReadonly"
+      :ui="ui"
+    />
+  </FieldWrapper>
+</template>
+<script lang="ts" setup>
+import { useFieldHOC } from '#core/composables/useForm'
+import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
+import { type ITextareaFieldProps } from '#core/components/Form/InputTextarea/types'
+
+const props = withDefaults(defineProps<ITextareaFieldProps>(), {})
+
+const { value, wrapperProps } = useFieldHOC<string>(props)
+</script>

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

@@ -1,14 +1,14 @@
-<template>
-  <FieldWrapper v-bind="wrapperProps">
-    <UToggle v-model="value" :disabled="wrapperProps.isDisabled" :name="name" :ui="ui" />
-  </FieldWrapper>
-</template>
-
-<script lang="ts" setup>
-import { useFieldHOC } from '#core/composables/useForm'
-import { type IToggleFieldProps } from '#core/components/Form/InputToggle/types'
-import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
-
-const props = withDefaults(defineProps<IToggleFieldProps>(), {})
-const { value, wrapperProps } = useFieldHOC<boolean>(props)
-</script>
+<template>
+  <FieldWrapper v-bind="wrapperProps">
+    <UToggle v-model="value" :disabled="wrapperProps.isDisabled" :name="name" :ui="ui" />
+  </FieldWrapper>
+</template>
+
+<script lang="ts" setup>
+import { useFieldHOC } from '#core/composables/useForm'
+import { type IToggleFieldProps } from '#core/components/Form/InputToggle/types'
+import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
+
+const props = withDefaults(defineProps<IToggleFieldProps>(), {})
+const { value, wrapperProps } = useFieldHOC<boolean>(props)
+</script>

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

@@ -1,170 +1,149 @@
-<template>
-  <FieldWrapper v-bind="wrapperProps">
-    <div
-      ref="dropzoneRef"
-      :class="[
-        ui.base,
-        {
-          [ui.disabled]: isDisabled,
-          [ui.background.default]: !isOverDropZone && !isDisabled,
-          [ui.background.dragover]: isOverDropZone && !isDisabled,
-        },
-      ]"
-    >
-      <Icon
-        v-if="selectedFile"
-        :name="ui.default.closeIcon"
-        :class="[ui.button.delete]"
-        @click="handleDeleteFile"
-      />
-      <input
-        ref="fileInputRef"
-        type="file"
-        class="hidden"
-        :accept="acceptFile"
-        :disabled="isDisabled"
-        @change="handleChange"
-      />
-      <div :class="[ui.wrapper]">
-        <div v-if="selectedFile" :class="[ui.preview.wrapper]">
-          <div v-if="isImage(selectedFile)" :class="[ui.preview.image.wrapper]">
-            <img :src="generateURL(selectedFile)" :class="[ui.preview.image.img]" alt="file" />
-          </div>
-          <Icon v-else :name="ui.default.filePreviewIcon" :class="[ui.preview.icon]" />
-          <div :class="[ui.preview.filename]">
-            <p>{{ selectedFile.name }}</p>
-          </div>
-          <div :class="[ui.preview.fileInfo]">
-            {{ isSelectedFileUseMb ? `${selectedFileSizeMb} MB` : `${selectedFileSizeKb} KB` }}
-          </div>
-        </div>
-        <div v-if="!selectedFile" :class="[ui.placeholderWrapper]">
-          <Icon :name="ui.default.uploadIcon" :class="[ui.labelIcon]" />
-          <div :class="[ui.labelWrapper]">
-            <p class="text-primary cursor-pointer" @click="handleOpenFile">
-              {{ selectFileLabel ?? 'คลิกเพื่อเลือกไฟล์' }}
-            </p>
-            <p>{{ selectFileSubLabel ?? 'หรือ ลากและวางที่นี่' }}</p>
-          </div>
-          <p v-if="placeholder" :class="[ui.placeholder]">{{ placeholder }}</p>
-        </div>
-      </div>
-    </div>
-  </FieldWrapper>
-</template>
-
-<script lang="ts" setup>
-import { useDropZone } from '@vueuse/core'
-import { type IUploadDropzoneProps } from './types'
-import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
-import { useFieldHOC } from '#core/composables/useForm'
-import { computed, ref, toRef, useUI, useUiConfig } from '#imports'
-import { uploadFileDropzone } from '#core/ui.config'
-import i18next from 'i18next'
-
-const config = useUiConfig<typeof uploadFileDropzone>(uploadFileDropzone, 'uploadFileDropzone')
-
-const props = withDefaults(defineProps<IUploadDropzoneProps>(), {})
-const emit = defineEmits(['change', 'delete'])
-
-const { wrapperProps, handleChange: onChange, setErrors, value } = useFieldHOC<File>(props)
-
-const { ui } = useUI('uploadFileDropzone', toRef(props, 'ui'), config)
-
-const fileInputRef = ref<HTMLInputElement>()
-const dropzoneRef = ref<HTMLDivElement>()
-
-const acceptFile = computed(() =>
-  typeof props.accept === 'string' ? props.accept : props.accept?.join(',')
-)
-
-const acceptFileSizeKb = computed(() => props.maxSize)
-const acceptFileSizeMb = computed(() => ((acceptFileSizeKb.value ?? 0) / 1024).toFixed(2))
-const isAcceptFileUseMb = computed(() => acceptFileSizeKb.value && acceptFileSizeKb.value > 1024)
-
-const selectedFileSizeKb = computed(() => ((value?.value.size || 0) / 1000).toFixed(2))
-const selectedFileSizeMb = computed(() => ((value?.value.size || 0) / 1000 / 1000).toFixed(2))
-const isSelectedFileUseMb = computed(() => (value?.value.size || 0) / 1000 > 1024)
-const selectedFile = computed(() => value?.value)
-
-const onDrop = (files: File[] | null) => {
-  if (props.isDisabled || files?.length === 0 || !files) return
-
-  const file = files[0]
-  const result = handleCheckFileCondition(file)
-
-  if (result) {
-    onChange(file)
-    emit('change', file)
-  }
-}
-
-const { isOverDropZone } = useDropZone(dropzoneRef, {
-  onDrop,
-})
-
-const handleChange = (e: Event) => {
-  if (props.isDisabled) return
-
-  const file = (e.target as HTMLInputElement).files?.[0]
-  const result = handleCheckFileCondition(file)
-
-  if (result) {
-    onChange(file)
-    value.value = file
-    emit('change', file)
-  }
-}
-
-const handleOpenFile = () => {
-  fileInputRef.value?.click()
-}
-
-const handleDeleteFile = () => {
-  fileInputRef.value?.value && (fileInputRef.value.value = '')
-  onChange(undefined)
-  emit('delete')
-}
-
-const handleCheckFileCondition = (file: File | undefined): boolean => {
-  if (!file) return false
-
-  const maxSize = checkMaxSize(file)
-
-  if (!maxSize) {
-    if (isAcceptFileUseMb.value) {
-      setErrors(i18next.t('custom:invalid_file_size_mb', { size: acceptFileSizeMb.value }))
-    } else {
-      setErrors(i18next.t('custom:invalid_file_size_kb', { size: acceptFileSizeKb.value }))
-    }
-
-    return false
-  }
-
-  setErrors('')
-
-  return true
-}
-
-const isImage = (file: File) => {
-  return file.type.startsWith('image/')
-}
-
-const checkMaxSize = (file: File): boolean => {
-  if (acceptFileSizeKb.value) {
-    return file.size / 1000 <= acceptFileSizeKb.value
-  }
-
-  return true
-}
-
-const generateURL = (file: File) => {
-  const fileSrc = URL.createObjectURL(file)
-
-  setTimeout(() => {
-    URL.revokeObjectURL(fileSrc)
-  }, 1000)
-
-  return fileSrc
-}
-</script>
+<template>
+  <FieldWrapper v-bind="wrapperProps">
+    <div
+      ref="dropzoneRef"
+      :class="[
+        ui.base,
+        {
+          [ui.disabled]: isDisabled,
+          [ui.background.default]: !isOverDropZone && !isDisabled,
+          [ui.background.dragover]: isOverDropZone && !isDisabled,
+        },
+      ]"
+    >
+      <Icon
+        v-if="selectedFile"
+        :name="ui.default.closeIcon"
+        :class="[ui.button.delete]"
+        @click="handleDeleteFile"
+      />
+      <input
+        ref="fileInputRef"
+        type="file"
+        class="hidden"
+        :accept="acceptFile"
+        :disabled="isDisabled"
+        @change="handleChange"
+      />
+      <div :class="[ui.wrapper]">
+        <div v-if="selectedFile" :class="[ui.preview.wrapper]">
+          <div v-if="isImage(selectedFile)" :class="[ui.preview.image.wrapper]">
+            <img :src="generateURL(selectedFile)" :class="[ui.preview.image.img]" alt="file" />
+          </div>
+          <Icon v-else :name="ui.default.filePreviewIcon" :class="[ui.preview.icon]" />
+          <div :class="[ui.preview.filename]">
+            <p class="truncate">{{ selectedFile.name }}</p>
+          </div>
+          <Badge size="xs" variant="outline" class="mt-1">
+            {{ isSelectedFileUseMb ? `${selectedFileSizeMb} Mb` : `${selectedFileSizeKb} Kb` }}
+          </Badge>
+        </div>
+        <div v-if="!selectedFile" :class="[ui.placeholderWrapper]">
+          <Icon :name="ui.default.uploadIcon" :class="[ui.labelIcon]" />
+          <div :class="[ui.labelWrapper]">
+            <p class="text-primary cursor-pointer" @click="handleOpenFile">
+              {{ selectFileLabel ?? 'คลิกเพื่อเลือกไฟล์' }}
+            </p>
+            <p>{{ selectFileSubLabel ?? 'หรือ ลากและวางที่นี่' }}</p>
+          </div>
+          <p v-if="placeholder" :class="[ui.placeholder]">{{ placeholder }}</p>
+        </div>
+      </div>
+    </div>
+  </FieldWrapper>
+</template>
+
+<script lang="ts" setup>
+import { useDropZone } from '@vueuse/core'
+import { type IUploadDropzoneProps } from './types'
+import { isImage, generateURL, checkMaxSize } from '#core/helpers/componentHelper'
+import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
+import { useFieldHOC } from '#core/composables/useForm'
+import { computed, ref, toRef, useUI, useUiConfig } from '#imports'
+import { uploadFileDropzone } from '#core/ui.config'
+import i18next from 'i18next'
+
+const config = useUiConfig<typeof uploadFileDropzone>(uploadFileDropzone, 'uploadFileDropzone')
+
+const props = withDefaults(defineProps<IUploadDropzoneProps>(), {})
+const emit = defineEmits(['change', 'delete'])
+
+const { wrapperProps, handleChange: onChange, setErrors, value } = useFieldHOC<File>(props)
+
+const { ui } = useUI('uploadFileDropzone', toRef(props, 'ui'), config)
+
+const fileInputRef = ref<HTMLInputElement>()
+const dropzoneRef = ref<HTMLDivElement>()
+
+const acceptFile = computed(() =>
+  typeof props.accept === 'string' ? props.accept : props.accept?.join(',')
+)
+
+const acceptFileSizeKb = computed(() => props.maxSize)
+const acceptFileSizeMb = computed(() => ((acceptFileSizeKb.value ?? 0) / 1024).toFixed(2))
+const isAcceptFileUseMb = computed(() => acceptFileSizeKb.value && acceptFileSizeKb.value > 1024)
+
+const selectedFileSizeKb = computed(() => ((value?.value.size || 0) / 1000).toFixed(2))
+const selectedFileSizeMb = computed(() => ((value?.value.size || 0) / 1000 / 1000).toFixed(2))
+const isSelectedFileUseMb = computed(() => (value?.value.size || 0) / 1000 > 1024)
+const selectedFile = computed(() => value?.value)
+
+const onDrop = (files: File[] | null) => {
+  if (props.isDisabled || files?.length === 0 || !files) return
+
+  const file = files[0]
+  const result = handleCheckFileCondition(file)
+
+  if (result) {
+    onChange(file)
+    emit('change', file)
+  }
+}
+
+const { isOverDropZone } = useDropZone(dropzoneRef, {
+  onDrop,
+})
+
+const handleChange = (e: Event) => {
+  if (props.isDisabled) return
+
+  const file = (e.target as HTMLInputElement).files?.[0]
+  const result = handleCheckFileCondition(file)
+
+  if (result && file) {
+    onChange(file)
+    value.value = file
+    emit('change', file)
+  }
+}
+
+const handleOpenFile = () => {
+  fileInputRef.value?.click()
+}
+
+const handleDeleteFile = () => {
+  fileInputRef.value?.value && (fileInputRef.value.value = '')
+  onChange(undefined)
+  emit('delete')
+}
+
+const handleCheckFileCondition = (file: File | undefined): boolean => {
+  if (!file) return false
+
+  const maxSize = checkMaxSize(file, acceptFileSizeKb.value ?? 0)
+
+  if (!maxSize) {
+    if (isAcceptFileUseMb.value) {
+      setErrors(i18next.t('custom:invalid_file_size_mb', { size: acceptFileSizeMb.value }))
+    } else {
+      setErrors(i18next.t('custom:invalid_file_size_kb', { size: acceptFileSizeKb.value }))
+    }
+
+    return false
+  }
+
+  setErrors('')
+
+  return true
+}
+</script>