@finema/core 1.4.220 → 2.1.0

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

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

@@ -1,20 +0,0 @@
-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;
-    responseURL?: string;
-    responsePath?: 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/InputWYSIWYG/UploadImageForm.vue

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

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

@@ -1,230 +0,0 @@
-<template>
-  <FieldWrapper v-bind="wrapperProps">
-    <Modal v-model="isShowUploadImageModal" title="อัพโหลดรูปภาพ">
-      <UploadImageForm :options="image" @submit="onImageSubmit" />
-    </Modal>
-    <ClientOnly>
-      <div
-        class="form-textarea focus:ring-primary-500 dark:focus:ring-primary-400 relative block w-full resize-none rounded-md border-0 bg-white p-0 pb-3 text-sm text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 disabled:cursor-not-allowed disabled:opacity-75 dark:bg-gray-900 dark:text-white dark:ring-gray-700 dark:placeholder:text-gray-500"
-      >
-        <div class="tiptap-menu-bar">
-          <div
-            v-for="(items, index) in menuItems"
-            :key="index"
-            class="flex items-center border-r border-gray-200 pr-2"
-          >
-            <button
-              v-for="item in items"
-              :key="item.name"
-              :class="{ 'is-active': item.isActive?.() }"
-              class="menu-item"
-              type="button"
-              :title="item.title"
-              @click="item.action"
-            >
-              <Icon :name="item.icon" class="size-5" />
-            </button>
-          </div>
-        </div>
-        <EditorContent
-          :editor="editor"
-          :placeholder="placeholder ?? label"
-          :autofocus="autoFocus"
-          :disabled="isDisabled || isReadonly"
-          :name="name"
-        />
-      </div>
-    </ClientOnly>
-  </FieldWrapper>
-</template>
-<script lang="ts" setup>
-import { useFieldHOC } from '#core/composables/useForm'
-import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
-import { EditorContent, useEditor } from '@tiptap/vue-3'
-import type { IWYSIWYGFieldProps } from '#core/components/Form/InputWYSIWYG/types'
-import StarterKit from '@tiptap/starter-kit'
-import Underline from '@tiptap/extension-underline'
-import TextAlign from '@tiptap/extension-text-align'
-import Link from '@tiptap/extension-link'
-import Image from '@tiptap/extension-image'
-import Youtube from '@tiptap/extension-youtube'
-import { computed, watch, ref } from 'vue'
-import UploadImageForm from '#core/components/Form/InputWYSIWYG/UploadImageForm.vue'
-
-const props = withDefaults(defineProps<IWYSIWYGFieldProps>(), {})
-const { value, wrapperProps } = useFieldHOC<string>(props)
-const isShowUploadImageModal = ref(false)
-const editor = useEditor({
-  content: value.value,
-  extensions: [
-    StarterKit,
-    Underline,
-    TextAlign.configure({
-      types: ['heading', 'paragraph'],
-    }),
-    Link.configure({
-      openOnClick: false,
-    }),
-    Image,
-    Youtube,
-  ],
-  editorProps: {
-    attributes: {
-      class: 'prose m-4 focus:outline-none',
-    },
-  },
-  onUpdate: ({ editor }) => {
-    value.value = editor.getHTML()
-  },
-})
-
-watch(value, (newValue) => {
-  if (editor.value && newValue !== editor.value.getHTML()) {
-    editor.value.commands.setContent(newValue)
-  }
-})
-
-const menuItems = computed(() => [
-  [
-    {
-      name: 'bold',
-      icon: 'ph:text-b-bold',
-      action: () => editor.value!.chain().focus().toggleBold().run(),
-      isActive: () => editor.value!.isActive('bold'),
-      title: 'Bold',
-    },
-    {
-      name: 'italic',
-      icon: 'ph:text-italic',
-      action: () => editor.value!.chain().focus().toggleItalic().run(),
-      isActive: () => editor.value!.isActive('italic'),
-      title: 'Italic',
-    },
-    {
-      name: 'underline',
-      icon: 'ph:text-underline',
-      action: () => editor.value!.chain().focus().toggleUnderline().run(),
-      isActive: () => editor.value!.isActive('underline'),
-      title: 'Underline',
-    },
-  ],
-  [
-    {
-      name: 'bullet-list',
-      icon: 'ph:list-bullets',
-      action: () => editor.value!.chain().focus().toggleBulletList().run(),
-      isActive: () => editor.value!.isActive('bulletList'),
-      title: 'Bullet List',
-    },
-    {
-      name: 'ordered-list',
-      icon: 'ph:list-numbers',
-      action: () => editor.value!.chain().focus().toggleOrderedList().run(),
-      isActive: () => editor.value!.isActive('orderedList'),
-      title: 'Ordered List',
-    },
-  ],
-  [
-    {
-      name: 'align-left',
-      icon: 'ph:text-align-left',
-      action: () => editor.value!.chain().focus().setTextAlign('left').run(),
-      isActive: () => editor.value!.isActive({ textAlign: 'left' }),
-      title: 'Align Left',
-    },
-    {
-      name: 'align-center',
-      icon: 'ph:text-align-center',
-      action: () => editor.value!.chain().focus().setTextAlign('center').run(),
-      isActive: () => editor.value!.isActive({ textAlign: 'center' }),
-      title: 'Align Center',
-    },
-    {
-      name: 'align-right',
-      icon: 'ph:text-align-right',
-      action: () => editor.value!.chain().focus().setTextAlign('right').run(),
-      isActive: () => editor.value!.isActive({ textAlign: 'right' }),
-      title: 'Align Right',
-    },
-  ],
-  [
-    {
-      name: 'link',
-      icon: 'ph:link-simple',
-      action: () => {
-        const url = window.prompt('URL')
-
-        if (url) {
-          editor.value!.chain().focus().setLink({ href: url }).run()
-        }
-      },
-      isActive: () => editor.value!.isActive('link'),
-      title: 'Insert Link',
-    },
-    {
-      name: 'image',
-      icon: 'ph:image',
-      action: () => {
-        if (props.image?.requestOptions) {
-          isShowUploadImageModal.value = true
-        } else {
-          const url = window.prompt('Image URL')
-
-          if (url) {
-            editor.value!.chain().focus().setImage({ src: url }).run()
-          }
-        }
-      },
-      title: 'Insert Image',
-    },
-    {
-      name: 'video',
-      icon: 'ph:video-camera',
-      action: () => {
-        const url = window.prompt('Video URL')
-
-        if (url) {
-          editor.value!.chain().focus().setYoutubeVideo({ src: url }).run()
-        }
-      },
-      title: 'Insert Video',
-    },
-  ],
-  [
-    {
-      name: 'hardBreak',
-      icon: 'ri:text-wrap',
-      action: () => editor.value!.chain().focus().setHardBreak().run(),
-      title: 'Hard Break',
-    },
-    {
-      name: 'clear',
-      icon: 'ri:format-clear',
-      action: () => editor.value!.chain().focus().clearNodes().unsetAllMarks().run(),
-      title: 'Clear',
-    },
-  ],
-  [
-    {
-      name: 'undo',
-      icon: 'ph:arrow-counter-clockwise',
-      action: () => editor.value!.chain().focus().undo().run(),
-      title: 'Undo',
-    },
-    {
-      name: 'redo',
-      icon: 'ph:arrow-clockwise',
-      action: () => editor.value!.chain().focus().redo().run(),
-      title: 'Redo',
-    },
-  ],
-])
-
-const onImageSubmit = (url: string) => {
-  editor.value!.chain().focus().setImage({ src: url }).run()
-  isShowUploadImageModal.value = false
-}
-</script>
-<style>
-.tiptap-menu-bar{@apply flex flex-wrap border-b py-2 px-2 gap-1}.menu-item{@apply px-1 py-1 rounded hover:bg-gray-100 transition-colors flex justify-center items-center}.menu-item.is-active{@apply bg-primary-100 text-primary-600}
-</style>

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

@@ -1,19 +0,0 @@
-import { type IFieldProps, type IFormFieldBase, type INPUT_TYPES } from '#core/components/Form/types';
-import type { AxiosRequestConfig } from 'axios';
-export interface IWYSIWYGFieldProps extends IFieldProps {
-    image?: {
-        requestOptions?: Omit<AxiosRequestConfig, 'baseURL'> & {
-            baseURL: string;
-        };
-        uploadPathURL?: string;
-        uploadAddLabel?: string;
-        accept?: string[] | string;
-        bodyKey?: string;
-        responseURL?: string;
-        responsePath?: string;
-        maxSize?: number;
-    };
-}
-export type IWYSIWYGField = IFormFieldBase<INPUT_TYPES.WYSIWYG, IWYSIWYGFieldProps, {
-    change?: (value: string) => void;
-}>;

package/dist/runtime/components/Icon.vue

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

package/dist/runtime/components/Log.vue

@@ -1,22 +0,0 @@
-<template>
-  <TeleportSafe v-if="isDevEnv" to="#dev-logs">
-    <LogItem v-if="typeof data !== 'undefined'" :data="data" :title="title" />
-    <LogItem
-      v-for="(item, index) in dataItems"
-      :key="index"
-      :data="item"
-      :title="`${title} #${index + 1}`"
-    />
-  </TeleportSafe>
-</template>
-<script lang="ts" setup>
-import LogItem from './LogItem.vue'
-
-defineProps<{
-  data?: any
-  dataItems?: any[]
-  title?: string
-}>()
-
-const isDevEnv = process.env.NODE_ENV === 'development'
-</script>