@finema/core 1.4.216 → 1.4.218

package/dist/module.json

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

package/dist/module.mjs

@@ -2,7 +2,7 @@ import { defineNuxtModule, createResolver, installModule, addPlugin, addComponen
 import { defu } from 'defu';
 
 const name = "@finema/core";
-const version = "1.4.216";
+const version = "1.4.218";
 
 const colorModeOptions = {
   preference: "light"

package/dist/runtime/components/Empty.vue

@@ -1,18 +1,18 @@
-<template>
-  <div class="flex flex-col items-center justify-center py-6 text-gray-400">
-    <Icon :name="icon!" class="text-[72px]" />
-    <p class="mt-2" v-html="message!" />
-  </div>
-</template>
-<script lang="ts" setup>
-withDefaults(
-  defineProps<{
-    message?: any
-    icon?: string
-  }>(),
-  {
-    message: 'ไม่พบข้อมูล!',
-    icon: 'ph:table-thin',
-  }
-)
-</script>
+<template>
+  <div class="flex flex-col items-center justify-center py-6 text-gray-400">
+    <Icon :name="icon!" class="text-[72px]" />
+    <p class="mt-2" v-html="message!" />
+  </div>
+</template>
+<script lang="ts" setup>
+withDefaults(
+  defineProps<{
+    message?: any
+    icon?: string
+  }>(),
+  {
+    message: 'ไม่พบข้อมูล!',
+    icon: 'ph:table-thin',
+  }
+)
+</script>

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

@@ -18,6 +18,12 @@
       time-picker-inline
       @update:model-value="onInput"
     >
+      <template v-if="appConfig.core?.is_thai_year" #year="{ value }">
+        {{ value + 543 }}
+      </template>
+      <template v-if="appConfig.core?.is_thai_year" #year-overlay-value="{ value }">
+        {{ value + 543 }}
+      </template>
       <template #dp-input="{ value: innerValue }">
         <UInput
           :trailing-icon="innerValue ? undefined : 'i-heroicons-calendar-days'"
@@ -36,11 +42,12 @@
 import Datepicker from '@vuepic/vue-datepicker'
 import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
 import { type IDateTimeFieldProps } from '#core/components/Form/InputDateTime/date_time_field.types'
-import { TimeHelper, useFieldHOC } from '#imports'
+import { TimeHelper, useFieldHOC, useAppConfig } from '#imports'
 import '@vuepic/vue-datepicker/dist/main.css'
 
 const props = withDefaults(defineProps<IDateTimeFieldProps>(), {})
 
+const appConfig = useAppConfig()
 const { value, wrapperProps } = useFieldHOC<string>(props)
 
 const format = (date: Date) => {

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

@@ -21,6 +21,12 @@
       range
       @update:model-value="onInput"
     >
+      <template v-if="appConfig.core?.is_thai_year" #year="{ value }">
+        {{ value + 543 }}
+      </template>
+      <template v-if="appConfig.core?.is_thai_year" #year-overlay-value="{ value }">
+        {{ value + 543 }}
+      </template>
       <template #dp-input="{ value: innerValue }">
         <UInput
           :trailing-icon="innerValue ? undefined : 'i-heroicons-calendar-days'"
@@ -37,7 +43,7 @@
 <script lang="ts" setup>
 import Datepicker from '@vuepic/vue-datepicker'
 import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
-import { TimeHelper, ref, useFieldHOC } from '#imports'
+import { TimeHelper, ref, useFieldHOC, useAppConfig } from '#imports'
 import '@vuepic/vue-datepicker/dist/main.css'
 import type {
   IDateTimeRangeFieldProps,
@@ -46,6 +52,7 @@ import type {
 
 const props = withDefaults(defineProps<IDateTimeRangeFieldProps>(), {})
 
+const appConfig = useAppConfig()
 const { value, wrapperProps } = useFieldHOC<IDateTimeRangeResponse | null>(props)
 
 const innerValueRef = ref<Date[]>([])

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

@@ -99,7 +99,7 @@
                 />
               </a>
               <Icon
-                v-if="isImageFromPath(value.path)"
+                v-if="isImageFromPath(value.path) || isVideoFromPath(value.path)"
                 :name="ui.action.previewIcon"
                 :class="[ui.action.iconClass]"
                 title="ดูตัวอย่าง"
@@ -119,7 +119,18 @@
                 @click="handleDeleteFile"
               />
               <Modal v-model="isPreviewOpen" :title="value.name">
-                <img :src="value.url" alt="img-preview" />
+                <img
+                  v-if="isImageFromPath(value.path)"
+                  :src="value.url"
+                  alt="img-preview"
+                  class="mx-auto max-w-full rounded-lg"
+                />
+                <video
+                  v-else-if="isVideoFromPath(value.path)"
+                  :src="value.url"
+                  controls
+                  class="mx-auto max-w-full"
+                />
               </Modal>
             </div>
           </div>
@@ -180,6 +191,7 @@ import {
   isImageFromPath,
   useFileSize,
   isPDFFromPath,
+  isVideoFromPath,
 } from '#core/helpers/componentHelper'
 import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
 import { useFieldHOC } from '#core/composables/useForm'

package/dist/runtime/components/Form/InputUploadDropzoneAutoMultiple/ItemView.vue

@@ -31,7 +31,7 @@
         </div>
         <div :class="[ui.action.wrapper]">
           <Icon
-            v-if="isImageFromPath(selectedFile.path)"
+            v-if="isImageFromPath(selectedFile.path) || isVideoFromPath(selectedFile.path)"
             :name="ui.action.previewIcon"
             :class="[ui.action.iconClass]"
             title="ดูตัวอย่าง"
@@ -59,10 +59,17 @@
           />
           <Modal v-model="isPreviewOpen" :title="selectedFile?.name">
             <img
+              v-if="isImageFromPath(selectedFile.path)"
               :src="selectedFile.url"
               alt="image-preview"
               class="mx-auto max-w-full rounded-lg"
             />
+            <video
+              v-else-if="isVideoFromPath(selectedFile.path)"
+              :src="selectedFile.url"
+              controls
+              class="mx-auto max-w-full"
+            />
           </Modal>
         </div>
       </div>
@@ -74,6 +81,7 @@ import {
   downloadFileFromURL,
   isImageFromPath,
   isPDFFromPath,
+  isVideoFromPath,
   useFileSize,
 } from '#core/helpers/componentHelper'
 import { type uploadFileDropzone } from '#core/ui.config'

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

@@ -2,6 +2,7 @@
   <FieldWrapper v-bind="wrapperProps">
     <div class="space-y-3">
       <div
+        v-if="!isReadonly"
         ref="dropzoneRef"
         :class="[
           ui.base,

package/dist/runtime/components/Log.vue

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

package/dist/runtime/components/LogItem.vue

@@ -1,43 +1,43 @@
-<template>
-  <div>
-    <div class="mb-2 flex items-center justify-between">
-      <p v-if="title" class="font-semibold">{{ title }}</p>
-      <Icon
-        class="cursor-pointer"
-        :name="isShow ? 'heroicons:minus' : 'heroicons:plus'"
-        @click="isShow = !isShow"
-      />
-    </div>
-    <VCodeBlock
-      v-show="isShow"
-      :code="getCode"
-      max-height="500"
-      :browser-window="true"
-      :indent="2"
-      lang="json"
-      highlightjs
-    />
-  </div>
-</template>
-<script lang="ts" setup>
-import { computed, ref } from 'vue'
-import { VCodeBlock } from '@wdns/vue-code-block'
-
-const props = defineProps<{
-  data?: any
-  title?: string
-}>()
-
-const isShow = ref(true)
-
-const getCode = computed(() => {
-  try {
-    return JSON.stringify(props.data)
-  } catch (e) {
-    return JSON.stringify('{}')
-  }
-})
-</script>
+<template>
+  <div>
+    <div class="mb-2 flex items-center justify-between">
+      <p v-if="title" class="font-semibold">{{ title }}</p>
+      <Icon
+        class="cursor-pointer"
+        :name="isShow ? 'heroicons:minus' : 'heroicons:plus'"
+        @click="isShow = !isShow"
+      />
+    </div>
+    <VCodeBlock
+      v-show="isShow"
+      :code="getCode"
+      max-height="500"
+      :browser-window="true"
+      :indent="2"
+      lang="json"
+      highlightjs
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import { VCodeBlock } from '@wdns/vue-code-block'
+
+const props = defineProps<{
+  data?: any
+  title?: string
+}>()
+
+const isShow = ref(true)
+
+const getCode = computed(() => {
+  try {
+    return JSON.stringify(props.data)
+  } catch (e) {
+    return JSON.stringify('{}')
+  }
+})
+</script>
 <style>
 .hljs-string{white-space:break-spaces}
-</style>
+</style>

package/dist/runtime/components/OTPInput.vue

@@ -1,127 +1,127 @@
-<template>
-  <div :class="containerClass">
-    <input
-      v-for="(_, index) in length"
-      :key="index"
-      :ref="(el) => setInputRef(index, el)"
-      v-model="otp[index]"
-      :type="isPassword ? 'password' : 'text'"
-      :class="inputClass"
-      maxlength="1"
-      :autofocus="autoFocus && index === 0"
-      @input="handleInput(index)"
-      @focus="handleFocus($event)"
-      @paste="handlePaste"
-      @keydown="handleKeydown(index, $event)"
-    />
-  </div>
-</template>
-<script lang="ts" setup>
-import { type Ref, ref } from 'vue'
-import { watch } from '#imports'
-
-const emits = defineEmits(['update:modelValue'])
-const props = defineProps({
-  length: {
-    type: Number,
-    required: true,
-  },
-  autoFocus: {
-    type: Boolean,
-    default: false,
-  },
-  isPassword: {
-    type: Boolean,
-    default: false,
-  },
-  isOnlyNumber: {
-    type: Boolean,
-    default: false,
-  },
-  modelValue: {
-    type: String,
-    default: '',
-  },
-  containerClass: {
-    type: String,
-    default: 'flex space-x-3',
-  },
-  inputClass: {
-    type: String,
-    default:
-      'h-12 w-12 relative flex flex-col items-center justify-center text-center ' +
-      'disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 form-input ' +
-      'rounded-md placeholder-gray-400 text-sm px-3.5 py-2.5 shadow-sm bg-white text-gray-900 ' +
-      'ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-primary-500',
-  },
-})
-
-const otp: Ref<string[]> = ref(Array(props.length).fill(''))
-const inputRefs: Ref<HTMLInputElement[]> = ref([])
-
-const setInputRef = (index: number, el: HTMLInputElement) => {
-  if (el) {
-    inputRefs.value[index] = el
-  }
-}
-
-const focusNext = (index: number): void => {
-  if (index < props.length - 1) {
-    inputRefs.value[index + 1].focus()
-  }
-}
-
-const focusPrevious = (index: number): void => {
-  if (index > 0) {
-    inputRefs.value[index - 1].focus()
-  }
-}
-
-const isNumeric = (str: string): boolean => {
-  return /^\d+$/.test(str)
-}
-
-const handleInput = (index: number): void => {
-  if (props.isOnlyNumber && !isNumeric(otp.value[index])) {
-    otp.value[index] = ''
-
-    return
-  }
-
-  if (otp.value[index].length === 1) {
-    focusNext(index)
-  }
-}
-
-const handleFocus = (event: FocusEvent): void => {
-  const target = event.target as HTMLInputElement
-
-  target.select()
-}
-
-const handlePaste = (event: ClipboardEvent): void => {
-  const paste = event.clipboardData?.getData('text') || ''
-
-  if (paste.length === props.length) {
-    paste.split('').forEach((char, idx) => {
-      otp.value[idx] = char
-    })
-
-    focusNext(paste.length - 2)
-  }
-}
-
-const handleKeydown = (index: number, event: KeyboardEvent): void => {
-  // Focus the previous field if backspace is pressed on an empty field
-  if (event.key === 'Backspace' && otp.value[index] === '') {
-    focusPrevious(index)
-  }
-}
-
-watch(
-  () => otp.value.join(''),
-  (newValue) => {
-    emits('update:modelValue', newValue)
-  }
-)
-</script>
+<template>
+  <div :class="containerClass">
+    <input
+      v-for="(_, index) in length"
+      :key="index"
+      :ref="(el) => setInputRef(index, el)"
+      v-model="otp[index]"
+      :type="isPassword ? 'password' : 'text'"
+      :class="inputClass"
+      maxlength="1"
+      :autofocus="autoFocus && index === 0"
+      @input="handleInput(index)"
+      @focus="handleFocus($event)"
+      @paste="handlePaste"
+      @keydown="handleKeydown(index, $event)"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+import { type Ref, ref } from 'vue'
+import { watch } from '#imports'
+
+const emits = defineEmits(['update:modelValue'])
+const props = defineProps({
+  length: {
+    type: Number,
+    required: true,
+  },
+  autoFocus: {
+    type: Boolean,
+    default: false,
+  },
+  isPassword: {
+    type: Boolean,
+    default: false,
+  },
+  isOnlyNumber: {
+    type: Boolean,
+    default: false,
+  },
+  modelValue: {
+    type: String,
+    default: '',
+  },
+  containerClass: {
+    type: String,
+    default: 'flex space-x-3',
+  },
+  inputClass: {
+    type: String,
+    default:
+      'h-12 w-12 relative flex flex-col items-center justify-center text-center ' +
+      'disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 form-input ' +
+      'rounded-md placeholder-gray-400 text-sm px-3.5 py-2.5 shadow-sm bg-white text-gray-900 ' +
+      'ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-primary-500',
+  },
+})
+
+const otp: Ref<string[]> = ref(Array(props.length).fill(''))
+const inputRefs: Ref<HTMLInputElement[]> = ref([])
+
+const setInputRef = (index: number, el: HTMLInputElement) => {
+  if (el) {
+    inputRefs.value[index] = el
+  }
+}
+
+const focusNext = (index: number): void => {
+  if (index < props.length - 1) {
+    inputRefs.value[index + 1].focus()
+  }
+}
+
+const focusPrevious = (index: number): void => {
+  if (index > 0) {
+    inputRefs.value[index - 1].focus()
+  }
+}
+
+const isNumeric = (str: string): boolean => {
+  return /^\d+$/.test(str)
+}
+
+const handleInput = (index: number): void => {
+  if (props.isOnlyNumber && !isNumeric(otp.value[index])) {
+    otp.value[index] = ''
+
+    return
+  }
+
+  if (otp.value[index].length === 1) {
+    focusNext(index)
+  }
+}
+
+const handleFocus = (event: FocusEvent): void => {
+  const target = event.target as HTMLInputElement
+
+  target.select()
+}
+
+const handlePaste = (event: ClipboardEvent): void => {
+  const paste = event.clipboardData?.getData('text') || ''
+
+  if (paste.length === props.length) {
+    paste.split('').forEach((char, idx) => {
+      otp.value[idx] = char
+    })
+
+    focusNext(paste.length - 2)
+  }
+}
+
+const handleKeydown = (index: number, event: KeyboardEvent): void => {
+  // Focus the previous field if backspace is pressed on an empty field
+  if (event.key === 'Backspace' && otp.value[index] === '') {
+    focusPrevious(index)
+  }
+}
+
+watch(
+  () => otp.value.join(''),
+  (newValue) => {
+    emits('update:modelValue', newValue)
+  }
+)
+</script>

package/dist/runtime/helpers/componentHelper.d.ts

@@ -4,6 +4,7 @@ export declare const checkFileType: (file: File, acceptFileType: string | string
 export declare const generateURL: (file: File) => string;
 export declare const isImage: (file: File) => boolean;
 export declare const isImageFromPath: (path?: string) => boolean;
+export declare const isVideoFromPath: (path?: string) => boolean;
 export declare const isPDFFromPath: (path?: string) => boolean;
 export declare const useFileAllocate: (selectedFile: Ref<File | undefined | null>, props: {
     accept?: string | string[];

package/dist/runtime/helpers/componentHelper.mjs

@@ -41,6 +41,11 @@ export const isImageFromPath = (path = "") => {
   const extension = path.toLowerCase().substring(path.lastIndexOf("."));
   return imageExtensions.includes(extension);
 };
+export const isVideoFromPath = (path = "") => {
+  const imageExtensions = [".mp4"];
+  const extension = path.toLowerCase().substring(path.lastIndexOf("."));
+  return imageExtensions.includes(extension);
+};
 export const isPDFFromPath = (path = "") => {
   const imageExtensions = [".pdf"];
   const extension = path.toLowerCase().substring(path.lastIndexOf("."));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "1.4.216",
+  "version": "1.4.218",
   "repository": "https://gitlab.finema.co/finema/ui-kit",
   "license": "MIT",
   "author": "Finema Dev Core Team",
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@nuxt/kit": "^3.13.1",
-    "@nuxt/ui": "2.19.2",
+    "@nuxt/ui": "2.20.0",
     "@pinia/nuxt": "^0.7.0",
     "@tiptap/extension-image": "^2.8.0",
     "@tiptap/extension-link": "^2.8.0",

package/dist/runtime/components/Form/InputDateTime/index.vue~

@@ -1,61 +0,0 @@
-<template>
-  <FieldWrapper v-bind="wrapperProps">
-    <Datepicker
-      :model-value="value"
-      :disabled="wrapperProps.isDisabled"
-      cancel-text="ยกเลิก"
-      select-text="เลือก"
-      locale="th"
-      :enable-time-picker="!disabledTime"
-      :placeholder="wrapperProps.placeholder"
-      :format="format"
-      :min-date="minDate"
-      :max-date="maxDate"
-      :min-time="minTime"
-      :max-time="maxTime"
-      :start-time="startTime"
-      :required="isRequired"
-      time-picker-inline
-      @update:model-value="onInput"
-    >
-      <template #dp-input="{ value: innerValue }">
-        <UInput
-          :trailing-icon="innerValue ? undefined : 'i-heroicons-calendar-days'"
-          type="text"
-          :disabled="wrapperProps.isDisabled"
-          :value="innerValue"
-          :placeholder="wrapperProps.placeholder"
-          :readonly="true"
-          input-class="cursor-pointer select-none"
-        />
-      </template>
-    </Datepicker>
-  </FieldWrapper>
-</template>
-<script lang="ts" setup>
-import Datepicker from '@vuepic/vue-datepicker'
-import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
-import { type IDateTimeFieldProps } from '#core/components/Form/InputDateTime/date_time_field.types'
-import { TimeHelper, useFieldHOC } from '#imports'
-import '@vuepic/vue-datepicker/dist/main.css'
-
-const props = withDefaults(defineProps<IDateTimeFieldProps>(), {})
-
-const { value, wrapperProps } = useFieldHOC<string>(props)
-
-const format = (date: Date) => {
-  if (props.disabledTime) {
-    return TimeHelper.displayDate(date)
-  }
-
-  return TimeHelper.displayDateTime(date)
-}
-
-const onInput = (_value: any) => {
-  if (props.disabledTime && !props.isReturnISO) {
-    value.value = TimeHelper.getDateFormTime(_value)
-  } else {
-    value.value = _value
-  }
-}
-</script>

package/dist/runtime/ui.config/table.ts~

@@ -1,48 +0,0 @@
-import type { DeepPartial } from '#ui/types'
-import type * as config from '#ui/ui.config'
-
-export const table: DeepPartial<(typeof config)['table']> = {
-  wrapper: 'relative overflow-x-auto bg-white rounded-lg',
-  base: 'min-w-full table-fixed',
-  divide: 'divide-y divide-y-2 divide-gray-300 dark:divide-gray-700',
-  thead: '',
-  tbody: 'divide-y divide-gray-200 dark:divide-gray-800',
-  tr: {
-    base: 'even:bg-gray-50',
-    selected: 'bg-gray-50 dark:bg-gray-800/50',
-    active: 'hover:bg-gray-50 dark:hover:bg-gray-800/50 cursor-pointer',
-  },
-  th: {
-    base: 'text-left rtl:text-right',
-    padding: 'px-3 py-3.5',
-    color: 'text-gray-700 dark:text-white',
-    font: 'font-normal',
-    size: 'text-sm',
-  },
-  td: {
-    base: 'whitespace-nowrap',
-    padding: 'px-3 py-4',
-    color: 'text-gray-500 dark:text-gray-400',
-    font: '',
-    size: 'text-base',
-  },
-  progress: {
-    wrapper: 'absolute inset-x-0 p-0',
-  },
-  default: {
-    sortButton: {
-      icon: 'i-heroicons-arrows-up-down-20-solid',
-      trailing: true,
-      square: true,
-      color: 'gray',
-      variant: 'ghost',
-      class: '-m-1.5 text-gray-700 font-normal',
-    },
-    loadingState: {
-      label: 'กำลังโหลด...',
-    },
-    emptyState: {
-      label: 'ไม่พบข้อมูล',
-    },
-  },
-}