@finema/core 1.4.110 → 1.4.112

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

@@ -1,222 +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>
+<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/InputWYSIWYG/index.vue

@@ -1,40 +1,55 @@
-<template>
-  <FieldWrapper v-bind="wrapperProps">
-    <div :id="id" />
-  </FieldWrapper>
-</template>
-<script lang="ts" setup>
-import { useFieldHOC } from '#core/composables/useForm'
-import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
-import type { IWYSIWYGFieldProps } from '#core/components/Form/InputWYSIWYG/types'
-import 'quill/dist/quill.core.css'
-import 'quill/dist/quill.snow.css'
-import { onMounted } from 'vue'
-import { useId } from '#app'
-import type Quill from 'quill'
-
-const props = withDefaults(defineProps<IWYSIWYGFieldProps>(), {})
-const id = useId()
-const { value, wrapperProps } = useFieldHOC<string>(props)
-
-onMounted(async () => {
-  if (process.client) {
-    const Quill = await import('quill')
-
-    // eslint-disable-next-line
-    const quill: Quill = new Quill.default(`#${id}`, {
-      theme: 'snow',
-      placeholder: props.placeholder,
-      readOnly: props.isDisabled || props.isReadonly,
-    })
-
-    quill.setContents(quill.clipboard.convert({ html: value.value }))
-
-    quill.on('text-change', (delta, oldDelta, source) => {
-      if (value.value === quill.getSemanticHTML()) return
-
-      value.value = quill.getSemanticHTML()
-    })
-  }
-})
-</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>

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/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>