@finema/core 1.4.220 → 2.1.0

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

@@ -1,141 +0,0 @@
-<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"
-        >
-          <div class="flex items-center gap-x-0.5">
-            {{ tagPrefix + text }}
-            <Icon name="ph:x" class="size-3 cursor-pointer" @click="onClickDelete(index)" />
-          </div>
-        </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 = value.value.slice(0, value.value.length - 1)
-      backspaceCount.value = 0
-    }
-  }
-}
-
-const onClickDelete = (index: number) => {
-  value.value = value.value.filter((_, i) => i !== index)
-}
-
-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

@@ -1,11 +0,0 @@
-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/InputUploadDropzone/index.vue

@@ -1,206 +0,0 @@
-<template>
-  <FieldWrapper v-bind="wrapperProps">
-    <div
-      ref="dropzoneRef"
-      :class="[
-        ui.base,
-        {
-          [ui.disabled]: isDisabled,
-          [ui.background.default]: !isOverDropZone && !isDisabled,
-          [ui.background.dragover]: isOverDropZone && !isDisabled,
-        },
-      ]"
-    >
-      <input
-        ref="fileInputRef"
-        type="file"
-        class="hidden"
-        :name="name"
-        :accept="acceptFile"
-        :disabled="isDisabled"
-        @change="handleChange"
-      />
-      <div :class="[ui.wrapper]">
-        <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>
-
-        <!-- Selected State -->
-        <div v-if="selectedFile" :class="[ui.onPreview.wrapper]">
-          <div :class="[ui.onPreview.previewImgWrapper]">
-            <div v-if="isImage(selectedFile)" class="size-full overflow-hidden">
-              <img
-                :src="generateURL(selectedFile)"
-                :class="[ui.onPreview.previewImgClass]"
-                alt="image-preview"
-              />
-            </div>
-            <div v-else>
-              <Icon
-                :name="ui.onPreview.previewFileIcon || ui.default.filePreviewIcon"
-                :class="[ui.onPreview.previewFileClass]"
-              />
-            </div>
-          </div>
-          <div :class="[ui.onPreview.textWrapper]">
-            <div class="truncate">
-              <h1 class="truncate font-bold">{{ selectedFile?.name }}</h1>
-              <p class="truncate font-light text-gray-400">
-                {{
-                  fileAllocate.isSelectedFileUseMb.value
-                    ? `${fileAllocate.selectedFileSizeMb.value} MB`
-                    : `${fileAllocate.selectedFileSizeKb.value} KB`
-                }}
-              </p>
-            </div>
-            <div :class="[ui.action.wrapper]">
-              <Icon
-                v-if="isImage(selectedFile)"
-                :name="ui.action.previewIcon"
-                :class="[ui.action.iconClass]"
-                @click="() => (isPreviewOpen = true)"
-              />
-              <Icon
-                :name="ui.action.downloadIcon"
-                :class="[ui.action.iconClass]"
-                @click="handleDownloadFile"
-              />
-              <Icon
-                :name="ui.action.deleteIcon"
-                :class="[ui.action.iconClass]"
-                @click="handleDeleteFile"
-              />
-              <Modal v-model="isPreviewOpen" :title="selectedFile?.name">
-                <img :src="generateURL(selectedFile)" alt="image-preview" />
-              </Modal>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </FieldWrapper>
-</template>
-
-<script lang="ts" setup>
-import { useDropZone } from '@vueuse/core'
-import { type IUploadDropzoneProps } from './types'
-import {
-  isImage,
-  generateURL,
-  checkMaxSize,
-  checkFileType,
-  downloadFileFromURL,
-  useFileAllocate,
-} 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>(), {
-  selectFileLabel: 'คลิกเพื่อเลือกไฟล์',
-  selectFileSubLabel: 'หรือ ลากและวางที่นี่',
-})
-
-const emit = defineEmits(['change', 'delete'])
-const isPreviewOpen = ref<boolean>(false)
-
-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 selectedFile = computed(() => value?.value)
-const fileAllocate = useFileAllocate(selectedFile, props)
-
-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 as unknown as HTMLElement, {
-  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 handleDownloadFile = () => {
-  downloadFileFromURL(generateURL(selectedFile.value), selectedFile.value?.name)
-}
-
-const handleCheckFileCondition = (file: File | undefined): boolean => {
-  if (!file) return false
-
-  const fileType = checkFileType(file, acceptFile.value ?? '')
-
-  if (!fileType) {
-    setErrors(i18next.t('custom:invalid_file_type'))
-
-    return false
-  }
-
-  const maxSize = checkMaxSize(file, fileAllocate.acceptFileSizeKb.value)
-
-  if (!maxSize) {
-    if (fileAllocate.isAcceptFileUseMb.value) {
-      setErrors(
-        i18next.t('custom:invalid_file_size_mb', { size: fileAllocate.acceptFileSizeMb.value })
-      )
-    } else {
-      setErrors(
-        i18next.t('custom:invalid_file_size_kb', { size: fileAllocate.acceptFileSizeKb.value })
-      )
-    }
-
-    return false
-  }
-
-  setErrors('')
-
-  return true
-}
-</script>

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

@@ -1,11 +0,0 @@
-import { type IFieldProps, type IFormFieldBase, type INPUT_TYPES } from '../types';
-export interface IUploadDropzoneProps extends IFieldProps {
-    selectFileLabel?: string;
-    selectFileSubLabel?: string;
-    accept?: string[] | string;
-    maxSize?: number;
-}
-export type IUploadDropzoneField = IFormFieldBase<INPUT_TYPES.UPLOAD_DROPZONE, IUploadDropzoneProps, {
-    change: (value: File | undefined) => void;
-    delete: () => void;
-}>;