@finema/core 1.4.90 → 1.4.91

package/dist/runtime/components/Table/ColumnText.vue

@@ -1,25 +1,25 @@
-<template>{{ getValue }}</template>
-<script lang="ts" setup>
-import { computed } from 'vue'
-import { type IColumn } from '#core/components/Table/types'
-import { StringHelper } from '#imports'
-
-const props = defineProps<{
-  value: any
-  row: any
-  column: IColumn<{
-    max?: number
-  }>
-}>()
-
-const getValue = computed<string>(() => {
-  const value = props.value
-  const max = props.column.props?.max
-
-  if (max) {
-    return StringHelper.truncate(value, max)
-  }
-
-  return value ?? '-'
-})
-</script>
+<template>{{ getValue }}</template>
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { type IColumn } from '#core/components/Table/types'
+import { StringHelper } from '#imports'
+
+const props = defineProps<{
+  value: any
+  row: any
+  column: IColumn<{
+    max?: number
+  }>
+}>()
+
+const getValue = computed<string>(() => {
+  const value = props.value
+  const max = props.column.props?.max
+
+  if (max) {
+    return StringHelper.truncate(value, max)
+  }
+
+  return value ?? '-'
+})
+</script>

package/dist/runtime/components/Table/Simple.vue

@@ -1,69 +1,69 @@
-<template>
-  <Base
-    v-bind="$attrs"
-    :columns="options.columns"
-    :raw-data="itemsByPage"
-    :status="options.status"
-    :page-options="pageOptions"
-    :is-simple-pagination="isShowSimplePagination"
-    :is-hide-bottom-pagination="options.isHideBottomPagination"
-    @page-change="onPageChange"
-  >
-    <template v-for="(_, slot) of $slots" #[slot]="slotProps">
-      <slot :name="slot" v-bind="slotProps || {}" />
-    </template>
-  </Base>
-</template>
-<script lang="ts" setup>
-import { computed, type PropType, ref } from 'vue'
-import { type ISimpleTableOptions } from '#core/components/Table/types'
-import Base from '#core/components/Table/Base.vue'
-import { initPageOptions } from '#core/composables/loaderPage'
-import { useCoreConfig } from '#core/composables/useConfig'
-
-defineSlots<{
-  'empty-state': () => any
-  'loading-state': () => any
-}>()
-
-const props = defineProps({
-  options: { type: Object as PropType<ISimpleTableOptions>, required: true },
-})
-
-const currentPage = ref(1)
-const coreConfig = useCoreConfig()
-const isShowSimplePagination = computed(
-  (): boolean => props.options.isSimplePagination ?? coreConfig.is_simple_pagination
-)
-
-const pageOptions = computed(() => {
-  if (!props.options?.limit) {
-    return undefined
-  }
-
-  return {
-    ...initPageOptions({
-      limit: props.options.limit,
-      primary: props.options.primary,
-    }),
-    totalCount: props.options.rawData.length,
-    totalPage: Math.ceil(props.options.rawData.length / props.options.limit),
-    currentPage: currentPage.value,
-  }
-})
-
-const onPageChange = (page: number) => {
-  currentPage.value = page
-}
-
-const itemsByPage = computed(() => {
-  if (!pageOptions.value) {
-    return props.options?.rawData
-  }
-
-  const start = (pageOptions.value.currentPage - 1) * pageOptions.value.limit
-  const end = start + pageOptions.value.limit
-
-  return props.options?.rawData.slice(start, end)
-})
-</script>
+<template>
+  <Base
+    v-bind="$attrs"
+    :columns="options.columns"
+    :raw-data="itemsByPage"
+    :status="options.status"
+    :page-options="pageOptions"
+    :is-simple-pagination="isShowSimplePagination"
+    :is-hide-bottom-pagination="options.isHideBottomPagination"
+    @page-change="onPageChange"
+  >
+    <template v-for="(_, slot) of $slots" #[slot]="slotProps">
+      <slot :name="slot" v-bind="slotProps || {}" />
+    </template>
+  </Base>
+</template>
+<script lang="ts" setup>
+import { computed, type PropType, ref } from 'vue'
+import { type ISimpleTableOptions } from '#core/components/Table/types'
+import Base from '#core/components/Table/Base.vue'
+import { initPageOptions } from '#core/composables/loaderPage'
+import { useCoreConfig } from '#core/composables/useConfig'
+
+defineSlots<{
+  'empty-state': () => any
+  'loading-state': () => any
+}>()
+
+const props = defineProps({
+  options: { type: Object as PropType<ISimpleTableOptions>, required: true },
+})
+
+const currentPage = ref(1)
+const coreConfig = useCoreConfig()
+const isShowSimplePagination = computed(
+  (): boolean => props.options.isSimplePagination ?? coreConfig.is_simple_pagination
+)
+
+const pageOptions = computed(() => {
+  if (!props.options?.limit) {
+    return undefined
+  }
+
+  return {
+    ...initPageOptions({
+      limit: props.options.limit,
+      primary: props.options.primary,
+    }),
+    totalCount: props.options.rawData.length,
+    totalPage: Math.ceil(props.options.rawData.length / props.options.limit),
+    currentPage: currentPage.value,
+  }
+})
+
+const onPageChange = (page: number) => {
+  currentPage.value = page
+}
+
+const itemsByPage = computed(() => {
+  if (!pageOptions.value) {
+    return props.options?.rawData
+  }
+
+  const start = (pageOptions.value.currentPage - 1) * pageOptions.value.limit
+  const end = start + pageOptions.value.limit
+
+  return props.options?.rawData.slice(start, end)
+})
+</script>

package/dist/runtime/components/Table/index.vue

@@ -1,65 +1,65 @@
-<template>
-  <div>
-    <div v-if="options.isEnabledSearch" class="mb-4 flex justify-end">
-      <UInput
-        v-model="q"
-        icon="i-heroicons-magnifying-glass"
-        :placeholder="options.searchPlaceholder || 'ค้นหา...'"
-      />
-    </div>
-    <Base
-      v-bind="$attrs"
-      :columns="options.columns"
-      :raw-data="options.rawData"
-      :status="options.status"
-      :page-options="options.pageOptions"
-      :is-simple-pagination="isShowSimplePagination"
-      :is-hide-bottom-pagination="options.isHideBottomPagination"
-      @page-change="onPageChange"
-    >
-      <template v-for="(_, slot) of $slots" #[slot]="slotProps">
-        <slot :name="slot" v-bind="slotProps || {}" />
-      </template>
-    </Base>
-  </div>
-</template>
-<script lang="ts" setup>
-import { type PropType } from 'vue'
-import { type ITableOptions } from '#core/components/Table/types'
-import { _debounce, computed, ref, watch } from '#imports'
-import { useCoreConfig } from '#core/composables/useConfig'
-import Base from '#core/components/Table/Base.vue'
-
-defineSlots<{
-  'empty-state': () => any
-  'loading-state': () => any
-}>()
-
-const emits = defineEmits<{
-  (event: 'pageChange', page: number): void
-  (event: 'search', q: string): void
-}>()
-
-const props = defineProps({
-  options: { type: Object as PropType<ITableOptions>, required: true },
-})
-
-const coreConfig = useCoreConfig()
-
-const q = ref(props.options?.pageOptions.search ?? '')
-
-const isShowSimplePagination = computed(
-  (): boolean => props.options.isSimplePagination ?? coreConfig.is_simple_pagination
-)
-
-watch(
-  q,
-  _debounce((value) => {
-    emits('search', value)
-  }, 500)
-)
-
-const onPageChange = (page: number) => {
-  emits('pageChange', page)
-}
-</script>
+<template>
+  <div>
+    <div v-if="options.isEnabledSearch" class="mb-4 flex justify-end">
+      <UInput
+        v-model="q"
+        icon="i-heroicons-magnifying-glass"
+        :placeholder="options.searchPlaceholder || 'ค้นหา...'"
+      />
+    </div>
+    <Base
+      v-bind="$attrs"
+      :columns="options.columns"
+      :raw-data="options.rawData"
+      :status="options.status"
+      :page-options="options.pageOptions"
+      :is-simple-pagination="isShowSimplePagination"
+      :is-hide-bottom-pagination="options.isHideBottomPagination"
+      @page-change="onPageChange"
+    >
+      <template v-for="(_, slot) of $slots" #[slot]="slotProps">
+        <slot :name="slot" v-bind="slotProps || {}" />
+      </template>
+    </Base>
+  </div>
+</template>
+<script lang="ts" setup>
+import { type PropType } from 'vue'
+import { type ITableOptions } from '#core/components/Table/types'
+import { _debounce, computed, ref, watch } from '#imports'
+import { useCoreConfig } from '#core/composables/useConfig'
+import Base from '#core/components/Table/Base.vue'
+
+defineSlots<{
+  'empty-state': () => any
+  'loading-state': () => any
+}>()
+
+const emits = defineEmits<{
+  (event: 'pageChange', page: number): void
+  (event: 'search', q: string): void
+}>()
+
+const props = defineProps({
+  options: { type: Object as PropType<ITableOptions>, required: true },
+})
+
+const coreConfig = useCoreConfig()
+
+const q = ref(props.options?.pageOptions.search ?? '')
+
+const isShowSimplePagination = computed(
+  (): boolean => props.options.isSimplePagination ?? coreConfig.is_simple_pagination
+)
+
+watch(
+  q,
+  _debounce((value) => {
+    emits('search', value)
+  }, 500)
+)
+
+const onPageChange = (page: number) => {
+  emits('pageChange', page)
+}
+</script>

package/dist/runtime/components/Tabs/index.vue

@@ -1,64 +1,64 @@
-<template>
-  <UTabs
-    v-bind="attrs"
-    :model-value="modelValue"
-    :class="$props.class"
-    :items="items"
-    :orientation="orientation"
-    :default-index="defaultIndex"
-    :ui="ui"
-    @change="change"
-  >
-    <template #default="{ item, index, selected }">
-      <slot name="default" :item="item" :index="index" :selected="selected" />
-    </template>
-
-    <template #item="{ item, index, selected }">
-      <slot name="item" :item="item" :index="index" :selected="selected" />
-    </template>
-  </UTabs>
-</template>
-
-<script setup lang="ts">
-import { useUiConfig, type PropType, useUI, toRef } from '#imports'
-import { tabs } from '#core/ui.config'
-import type { Strategy, TabItem } from '#ui/types'
-
-const config = useUiConfig<typeof tabs>(tabs, 'tabs')
-
-const props = defineProps({
-  modelValue: {
-    type: Number,
-    default: undefined,
-  },
-  items: {
-    type: Array as PropType<TabItem[]>,
-    default: () => [],
-  },
-  orientation: {
-    type: String as PropType<'horizontal' | 'vertical'>,
-    default: 'horizontal',
-    validator: (value: string) => ['horizontal', 'vertical'].includes(value),
-  },
-  defaultIndex: {
-    type: Number,
-    default: 0,
-  },
-  class: {
-    type: [String, Object, Array] as PropType<any>,
-    default: () => '',
-  },
-  ui: {
-    type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
-    default: () => ({}),
-  },
-})
-
-const emits = defineEmits(['update:modelValue', 'change'])
-
-const change = (index: number) => {
-  emits('change', index)
-}
-
-const { ui, attrs } = useUI('tabs', toRef(props, 'ui'), config, toRef(props, 'class'))
-</script>
+<template>
+  <UTabs
+    v-bind="attrs"
+    :model-value="modelValue"
+    :class="$props.class"
+    :items="items"
+    :orientation="orientation"
+    :default-index="defaultIndex"
+    :ui="ui"
+    @change="change"
+  >
+    <template #default="{ item, index, selected }">
+      <slot name="default" :item="item" :index="index" :selected="selected" />
+    </template>
+
+    <template #item="{ item, index, selected }">
+      <slot name="item" :item="item" :index="index" :selected="selected" />
+    </template>
+  </UTabs>
+</template>
+
+<script setup lang="ts">
+import { useUiConfig, type PropType, useUI, toRef } from '#imports'
+import { tabs } from '#core/ui.config'
+import type { Strategy, TabItem } from '#ui/types'
+
+const config = useUiConfig<typeof tabs>(tabs, 'tabs')
+
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    default: undefined,
+  },
+  items: {
+    type: Array as PropType<TabItem[]>,
+    default: () => [],
+  },
+  orientation: {
+    type: String as PropType<'horizontal' | 'vertical'>,
+    default: 'horizontal',
+    validator: (value: string) => ['horizontal', 'vertical'].includes(value),
+  },
+  defaultIndex: {
+    type: Number,
+    default: 0,
+  },
+  class: {
+    type: [String, Object, Array] as PropType<any>,
+    default: () => '',
+  },
+  ui: {
+    type: Object as PropType<Partial<typeof config> & { strategy?: Strategy }>,
+    default: () => ({}),
+  },
+})
+
+const emits = defineEmits(['update:modelValue', 'change'])
+
+const change = (index: number) => {
+  emits('change', index)
+}
+
+const { ui, attrs } = useUI('tabs', toRef(props, 'ui'), config, toRef(props, 'class'))
+</script>

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

@@ -2,3 +2,12 @@ export declare const checkMaxSize: (file: File, acceptFileSize: number) => boole
 export declare const checkFileType: (file: File, acceptFileType: string | string[]) => boolean;
 export declare const generateURL: (file: File) => string;
 export declare const isImage: (file: File) => boolean;
+export declare const getFileAllocate: (maxSize: number, selectedFileSize: Blob['size']) => {
+    acceptFileSizeKb: number;
+    acceptFileSizeMb: string;
+    isAcceptFileUseMb: boolean;
+    selectedFileSizeKb: string;
+    selectedFileSizeMb: string;
+    isSelectedFileUseMb: boolean;
+};
+export declare const downloadFileFromURL: (url: string, filename?: string) => Promise<void>;

package/dist/runtime/helpers/componentHelper.mjs

@@ -37,3 +37,33 @@ export const generateURL = (file) => {
 export const isImage = (file) => {
   return file.type.startsWith("image/");
 };
+export const getFileAllocate = (maxSize, selectedFileSize) => {
+  return {
+    acceptFileSizeKb: maxSize,
+    acceptFileSizeMb: (maxSize / 1024).toFixed(2),
+    isAcceptFileUseMb: maxSize > 1024,
+    selectedFileSizeKb: (selectedFileSize / 1e3).toFixed(2),
+    selectedFileSizeMb: (selectedFileSize / 1e3 / 1e3).toFixed(2),
+    isSelectedFileUseMb: selectedFileSize / 1e3 > 1024
+  };
+};
+export const downloadFileFromURL = async (url, filename) => {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.responseType = "blob";
+    xhr.onload = () => {
+      const a = document.createElement("a");
+      const url2 = window.URL.createObjectURL(xhr.response);
+      a.href = url2;
+      a.download = filename || url2.split("/").pop() || (/* @__PURE__ */ new Date()).toISOString();
+      a.click();
+      window.URL.revokeObjectURL(url2);
+      resolve();
+    };
+    xhr.onerror = () => {
+      reject();
+    };
+    xhr.open("GET", url);
+    xhr.send();
+  });
+};

package/dist/runtime/ui.config/uploadFileDropzone.d.ts

@@ -2,33 +2,56 @@ export declare const uploadFileDropzone: {
     base: string;
     wrapper: string;
     disabled: string;
+    failed: string;
     placeholderWrapper: string;
     placeholder: string;
     labelWrapper: string;
-    preview: {
+    onLoading: {
         wrapper: string;
-        icon: string;
-        image: {
-            wrapper: string;
-            img: string;
-        };
-        filename: string;
+        placeholderWrapper: string;
+        placeholderImgIcon: string;
+        placeholderFileIcon: string;
+        placeholderIconClass: string;
+        textWrapper: string;
+        loadingIcon: string;
+        loadingIconClass: string;
     };
-    uploadStatus: {
+    onPreview: {
         wrapper: string;
-        progressBar: string;
+        previewImgWrapper: string;
+        previewImgClass: string;
+        previewFileIcon: string;
+        previewFileClass: string;
+        textWrapper: string;
+    };
+    onFailed: {
+        wrapper: string;
+        failedImgWrapper: string;
+        failedImgIcon: string;
+        failedFileIcon: string;
+        failedIconClass: string;
+        textWrapper: string;
+    };
+    action: {
+        wrapper: string;
+        iconClass: string;
+        deleteIconClass: string;
+        retryBtnClass: string;
+        previewIcon: string;
+        downloadIcon: string;
+        deleteIcon: string;
+        retryIcon: string;
     };
     background: {
         default: string;
         dragover: string;
     };
-    button: {
-        delete: string;
-    };
     labelIcon: string;
     default: {
-        closeIcon: string;
         filePreviewIcon: string;
         uploadIcon: string;
+        placeholderImgIcon: string;
+        failedImgIcon: string;
+        loadingIcon: string;
     };
 };

package/dist/runtime/ui.config/uploadFileDropzone.mjs

@@ -1,34 +1,57 @@
 export const uploadFileDropzone = {
-  base: "relative w-full p-8 transition rounded-lg flex items-center justify-center border-2 ring-0 min-h-[250px]",
+  base: "relative w-full p-4 transition rounded-lg flex items-center justify-center border-[1px] ring-0",
   wrapper: "flex flex-col items-center w-full",
-  disabled: "bg-gray-disabled cursor-not-allowed",
-  placeholderWrapper: "flex flex-col items-center justify-center",
+  disabled: "bg-gray-100 border-none grayscale cursor-not-allowed",
+  failed: "border-danger",
+  placeholderWrapper: "py-4 flex flex-col items-center justify-center",
   placeholder: "text-gray-400 text-center font-light text-sm truncate",
   labelWrapper: "flex items-center space-x-2 text-gray-400 text-center",
-  preview: {
-    wrapper: "flex flex-col items-center w-full",
-    icon: "mb-2 h-10 w-10 text-gray-400",
-    image: {
-      wrapper: "flex justify-center mb-2 rounded overflow-hidden max-w-[300px]",
-      img: "w-full object-contain"
-    },
-    filename: "flex items-center justify-center w-full font-semibold truncate"
+  onLoading: {
+    wrapper: "w-full flex space-x-4",
+    placeholderWrapper: "flex size-12 items-center justify-center rounded-lg bg-gray-100",
+    placeholderImgIcon: "",
+    placeholderFileIcon: "",
+    placeholderIconClass: "size-7 text-gray-400",
+    textWrapper: "flex w-full items-center justify-between",
+    loadingIcon: "",
+    loadingIconClass: "text-primary size-10"
   },
-  uploadStatus: {
-    wrapper: "w-full md:w-1/2 mt-2",
-    progressBar: ""
+  onPreview: {
+    wrapper: "w-full flex space-x-4",
+    previewImgWrapper: "flex size-12 items-center justify-center rounded-lg overflow-hidden bg-gray-100",
+    previewImgClass: "w-full h-full object-cover",
+    previewFileIcon: "",
+    previewFileClass: "size-7 text-gray-400",
+    textWrapper: "flex w-full items-center justify-between"
+  },
+  onFailed: {
+    wrapper: "w-full flex space-x-4",
+    failedImgWrapper: "flex size-12 items-center justify-center rounded-lg bg-gray-100",
+    failedImgIcon: "",
+    failedFileIcon: "",
+    failedIconClass: "size-7 text-gray-400",
+    textWrapper: "flex w-full items-start justify-between"
+  },
+  action: {
+    wrapper: "flex items-center space-x-4",
+    iconClass: "size-6 text-gray-400 cursor-pointer",
+    deleteIconClass: "size-6 text-danger cursor-pointer",
+    retryBtnClass: "px-0",
+    previewIcon: "i-ic:outline-remove-red-eye",
+    downloadIcon: "i-ic:outline-file-download",
+    deleteIcon: "ph:trash",
+    retryIcon: "ph:arrow-counter-clockwise"
   },
   background: {
     default: "bg-white border-gray-border",
     dragover: "bg-gray-100 border-primary"
   },
-  button: {
-    delete: "cursor-pointer w-5 h-5 ml-2 text-gray-400 hover:text-gray-300 absolute top-6 right-6 "
-  },
   labelIcon: "w-6 h-6 text-gray-400 text-center mb-4",
   default: {
-    closeIcon: "i-heroicons:trash-solid",
     filePreviewIcon: "i-heroicons:document-text-solid",
-    uploadIcon: "i-ph:cloud-arrow-up"
+    uploadIcon: "i-ph:cloud-arrow-up",
+    placeholderImgIcon: "i-material-symbols:imagesmode-outline",
+    failedImgIcon: "i-material-symbols:imagesmode-outline",
+    loadingIcon: "i-svg-spinners:180-ring-with-bg"
   }
 };

package/dist/runtime/utils/StringHelper.d.ts

@@ -1,6 +1,7 @@
 export declare class StringHelper {
     static genString: (length?: number) => string;
     static withComma: (value?: number | string) => string;
+    static withFixed: (value?: number | string) => string;
     static split: (str: string | null | undefined, separator: string | RegExp) => string[];
     static joinURL: (...parts: string[]) => string;
     static truncate: (str: any, num?: number) => any;

package/dist/runtime/utils/StringHelper.mjs

@@ -12,6 +12,12 @@ export class StringHelper {
   static withComma = (value = 0) => {
     return (+(value || 0)).toLocaleString();
   };
+  static withFixed = (value = 0) => {
+    return (+(value || 0)).toLocaleString(void 0, {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 2
+    });
+  };
   static split = (str, separator) => {
     return `${str || ""}`.split(separator).filter((item) => item).map((item) => item.trim());
   };