@finema/core 1.4.52 → 1.4.54

package/dist/module.json

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

package/dist/module.mjs

@@ -2,7 +2,7 @@ import { defineNuxtModule, createResolver, installModule, addPlugin, addComponen
 import 'lodash-es';
 
 const name = "@finema/core";
-const version = "1.4.52";
+const version = "1.4.54";
 
 const colors = {
   black: "#20243E",

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

@@ -16,6 +16,7 @@
       :start-time="startTime"
       :required="isRequired"
       time-picker-inline
+      @update:model-value="value = $event"
     >
       <template #dp-input="{ value: innerValue }">
         <UInput
@@ -43,9 +44,9 @@ const { value, wrapperProps } = useFieldHOC<string>(props)
 
 const format = (date: Date) => {
   if (props.disabledTime) {
-    return TimeHelper.getDateFormTime(date)
+    return TimeHelper.displayDate(date)
   }
 
-  return TimeHelper.getDateTimeFormTime(date)
+  return TimeHelper.displayDateTime(date)
 }
 </script>

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

@@ -1,36 +1,101 @@
 <template>
   <FieldWrapper v-bind="wrapperProps">
-    <UInput
-      type="file"
-      trailing
-      :loading-icon="loadingIcon"
-      :icon="icon"
-      :leading-icon="leadingIcon"
-      :trailing-icon="trailingIcon"
-      :disabled="wrapperProps.isDisabled"
-      :name="name"
-      :placeholder="wrapperProps.placeholder"
-      :autofocus="!!autoFocus"
-      :readonly="isReadonly"
-      :accept="accept"
-      :ui="ui"
-      @change="handleChange"
-    />
+    <div :class="[ui.base]">
+      <input
+        ref="fileInput"
+        type="file"
+        class="hidden"
+        :accept="acceptFile"
+        :required="isRequired"
+        :disabled="isDisabled"
+        @change="handleChange"
+      />
+      <div :class="[ui.wrapper]">
+        <div :class="[ui.selectFileBox]">
+          <Button size="2xs" @click="handleOpenFile">{{ selectFileLabel || 'Choose File' }}</Button>
+          <p :class="ui.placeholder">
+            {{ value?.name ?? placeholder ?? 'No file chosen' }}
+          </p>
+          <Badge v-if="value" size="xs" variant="outline">
+            {{ isSelectedFileUseMb ? `${selectedFileSizeMb} MB` : `${selectedFileSizeKb} KB` }}
+          </Badge>
+        </div>
+      </div>
+    </div>
   </FieldWrapper>
 </template>
 <script lang="ts" setup>
 import { useFieldHOC } from '#core/composables/useForm'
 import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
 import { type IUploadFileClassicFieldProps } from '#core/components/Form/InputUploadFileClassic/types'
+import { useUiConfig } from '#core/composables/useConfig'
+import { uploadFileInputClassicAuto } from '#core/ui.config'
+import { computed, ref, toRef, useUI } from '#imports'
+import i18next from 'i18next'
 
+const config = useUiConfig<typeof uploadFileInputClassicAuto>(
+  uploadFileInputClassicAuto,
+  'uploadFileInputClassicAuto'
+)
+
+const emits = defineEmits(['change'])
 const props = withDefaults(defineProps<IUploadFileClassicFieldProps>(), {})
 
-const { value, wrapperProps } = useFieldHOC<File | undefined>(props)
+const { value, wrapperProps, setErrors } = useFieldHOC<File | undefined>(props)
+const selectedFileSizeKb = computed(() => ((value.value?.size || 0) / 1000).toFixed(2))
+const selectedFileSizeMb = computed(() => ((value.value?.size || 0) / 1000 / 1000).toFixed(2))
 
-const emits = defineEmits(['change'])
+const isSelectedFileUseMb = computed(() => (value.value?.size || 0) / 1000 > 1024)
+const isAcceptFileUseMb = computed(() => acceptFileSizeKb.value && acceptFileSizeKb.value > 1024)
+const acceptFileSizeMb = computed(() => ((acceptFileSizeKb.value || 0) / 1024).toFixed(2))
+const acceptFileSizeKb = computed(() => props.maxSize)
+const acceptFile = computed(() =>
+  typeof props.accept === 'string' ? props.accept : props.accept?.join(',')
+)
+
+const fileInput = ref<HTMLInputElement>()
+
+const handleOpenFile = () => {
+  fileInput.value?.click()
+}
+
+const { ui } = useUI('uploadFileInputClassicAuto', toRef(props, 'ui'), config)
+
+const checkMaxSize = (file: File): boolean => {
+  if (acceptFileSizeKb.value) {
+    return file.size / 1000 <= acceptFileSizeKb.value
+  }
+
+  return true
+}
+
+const handleCheckFileCondition = (file: File | undefined): boolean => {
+  if (!file) return false
+
+  const maxSize = checkMaxSize(file)
+
+  if (!maxSize) {
+    if (isAcceptFileUseMb.value) {
+      setErrors(i18next.t('custom:invalid_file_size_mb', { size: acceptFileSizeMb.value }))
+    } else {
+      setErrors(i18next.t('custom:invalid_file_size_kb', { size: acceptFileSizeKb.value }))
+    }
+
+    return false
+  }
+
+  setErrors('')
+
+  return true
+}
 
 const handleChange = (e: Event) => {
-  value.value = (e.target as HTMLInputElement).files?.[0]
-  emits('change', e)
+  const file = (e.target as HTMLInputElement).files?.[0]
+  const result = handleCheckFileCondition(file)
+
+  if (result && file) {
+    value.value = file
+    emits('change', file)
+  }
 }
 </script>

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

@@ -42,10 +42,7 @@
         :column="column"
         :row="row"
       />
-
-      <template v-else>
-        <span :title="row[column.key]">{{ row[column.key] ?? '-' }}</span>
-      </template>
+      <ColumnText v-else :value="row[column.key]" :column="column" :row="row" />
     </template>
 
     <template v-for="(_, slot) of $slots" #[slot]="scope">
@@ -80,6 +77,7 @@ import { StringHelper } from '#core/utils/StringHelper'
 import { ref, watch } from '#imports'
 import ColumnDateTime from '#core/components/Table/ColumnDateTime.vue'
 import ColumnDate from '#core/components/Table/ColumnDate.vue'
+import ColumnText from '#core/components/Table/ColumnText.vue'
 
 const emits = defineEmits(['pageChange'])
 

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

@@ -1,4 +1,6 @@
-<template><img class="h-12" :src="getValue" /></template>
+<template>
+  <Image class="h-12" :src="getValue" />
+</template>
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { type IColumn } from '#core/components/Table/types'

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

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

package/dist/runtime/components/Table/types.d.ts

@@ -4,10 +4,9 @@ export declare const enum COLUMN_TYPES {
     DATE = "DATE",
     DATE_TIME = "DATE_TIME",
     NUMBER = "NUMBER",
-    IMAGE = "IMAGE",
-    ACTION = "ACTION"
+    IMAGE = "IMAGE"
 }
-export interface IColumn {
+export interface IColumn<P extends Record<string, any> = Record<string, any>, O extends Record<string, any> = Record<string, any>> {
     [key: string]: any;
     key: string;
     sortable?: boolean;
@@ -15,27 +14,14 @@ export interface IColumn {
     class?: string;
     component?: any;
     type?: COLUMN_TYPES;
+    props?: P;
+    on?: O;
 }
-export interface IRowItem {
-    value: string | any;
-    type?: COLUMN_TYPES;
-    title?: string;
-    className?: string;
-    isSelect?: boolean;
-    props?: Record<string, any>;
-    on?: Record<string, any>;
-}
-export type IRow = Record<number, IRowItem>;
 export interface IBaseTableOptions<T = object> {
     rawData: T[];
     primary: string;
     status: IStatus;
     columns: IColumn[];
-    onRowClick?: (index: number, columns: Array<{
-        value: string;
-    }>) => void;
-    onCheckBoxClick?: (index: number[]) => void;
-    disabledCheckIndexes?: number[];
 }
 export interface ITableOptions<T = object> extends IBaseTableOptions<T> {
     pageOptions: IPageOptions;

package/dist/runtime/components/Table/types.mjs

@@ -4,6 +4,5 @@ export var COLUMN_TYPES = /* @__PURE__ */ ((COLUMN_TYPES2) => {
   COLUMN_TYPES2["DATE_TIME"] = "DATE_TIME";
   COLUMN_TYPES2["NUMBER"] = "NUMBER";
   COLUMN_TYPES2["IMAGE"] = "IMAGE";
-  COLUMN_TYPES2["ACTION"] = "ACTION";
   return COLUMN_TYPES2;
 })(COLUMN_TYPES || {});

package/dist/runtime/composables/useForm.d.ts

@@ -1,9 +1,9 @@
 import { type ComputedRef } from 'vue';
 import { type FieldContext, type FieldOptions } from 'vee-validate';
-import { type IFieldProps, type IFormField } from '../components/Form/types';
+import { type IFieldProps } from '../components/Form/types';
 interface IFieldContext<TValue> extends FieldContext<TValue> {
     wrapperProps: ComputedRef<IFieldProps>;
 }
 export declare const useFieldHOC: <TValue = unknown>(newFormProps: IFieldProps, opts?: Partial<FieldOptions<TValue>> | undefined) => IFieldContext<TValue>;
-export declare const createFormFields: (fields: () => IFormField[]) => any;
+export declare const createFormFields: <T extends unknown>(fields: () => T[]) => ComputedRef<T[]>;
 export {};

package/dist/runtime/composables/useTable.d.ts

@@ -1,7 +1,7 @@
 import { type ComputedRef } from 'vue';
 import { type Store } from 'pinia';
 import { type IStatus } from '#imports';
-import { type IColumn, type IRow, type ISimpleTableOptions, type ITableOptions } from '../components/Table/types';
+import { type IColumn, type ISimpleTableOptions, type ITableOptions } from '../components/Table/types';
 import { type IUsePageLoader } from '../helpers/apiPageHelper';
 export interface IUseTable<T = object> {
     repo: IUsePageLoader<T> | Store<any, any>;
@@ -16,4 +16,4 @@ export interface IUseTableSimple<T = object> {
 }
 export declare const useTable: <T = object>(options: IUseTable<T>) => ComputedRef<ITableOptions<T>>;
 export declare const useTableSimple: <T = object>(options: IUseTableSimple<T>) => ComputedRef<ISimpleTableOptions<T>>;
-export declare const createTableOptions: <T = object>(repo: IUsePageLoader<T>, columns: IColumn[], rows: IRow[], options: Partial<ITableOptions<T>>) => ITableOptions<T>;
+export declare const createTableOptions: <T = object>(repo: IUsePageLoader<T>, columns: IColumn[], options: Partial<ITableOptions<T>>) => ITableOptions<T>;

package/dist/runtime/composables/useTable.mjs

@@ -5,7 +5,6 @@ export const useTable = (options) => computed(() => {
   return createTableOptions(
     options.repo,
     options.columns(),
-    get(options.repo.fetchItems),
     typeof options.options === "function" ? options.options() : options.options ?? {}
   );
 });
@@ -20,7 +19,7 @@ export const useTableSimple = (options) => computed(() => {
     ...typeof options.options === "function" ? options.options() : options.options ?? {}
   };
 });
-export const createTableOptions = (repo, columns, rows, options) => {
+export const createTableOptions = (repo, columns, options) => {
   const config = useCoreConfig();
   return {
     rawData: get(repo.fetchItems),
@@ -29,7 +28,7 @@ export const createTableOptions = (repo, columns, rows, options) => {
     status: get(repo.fetchStatus),
     deleteStatus: get(repo.deleteStatus),
     primary: get(repo.fetchOptions).primary ?? config.default_primary_key,
-    isNotChangeRoute: false,
+    isPreventRouteChange: false,
     ...options
   };
 };

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

@@ -106,6 +106,15 @@ export declare const _fromPairs: {
     (pairs: import("lodash").List<any[]> | null | undefined): import("lodash").Dictionary<any>;
 };
 export declare const _xor: <T>(...arrays: (import("lodash").List<T> | null | undefined)[]) => T[];
+export declare const _omit: {
+    <T extends object, K extends import("lodash").PropertyName[]>(object: T | null | undefined, ...paths: K): Pick<T, Exclude<keyof T, K[number]>>;
+    <T_1 extends object, K_1 extends keyof T_1>(object: T_1 | null | undefined, ...paths: import("lodash").Many<K_1>[]): import("lodash").Omit<T_1, K_1>;
+    <T_2 extends object>(object: T_2 | null | undefined, ...paths: import("lodash").Many<import("lodash").PropertyName>[]): Partial<T_2>;
+};
+export declare const _pick: {
+    <T extends object, U extends keyof T>(object: T, ...props: import("lodash").Many<U>[]): Pick<T, U>;
+    <T_1>(object: T_1 | null | undefined, ...props: import("lodash").Many<import("lodash").PropertyPath>[]): Partial<T_1>;
+};
 export declare const _clone: (object: any) => any;
 export declare const _debounce: <T extends (...args: any[]) => any>(func: T, wait?: number) => import("lodash").DebouncedFunc<T>;
 export declare const _deepMerge: (target: any, ...sources: any[]) => any;

package/dist/runtime/utils/lodash.mjs

@@ -27,7 +27,9 @@ import {
   xor,
   debounce,
   intersection,
-  get
+  get,
+  omit,
+  pick
 } from "lodash-es";
 export const _get = get;
 export const _range = range;
@@ -57,6 +59,8 @@ export const _toPairs = toPairs;
 export const _orderBy = orderBy;
 export const _fromPairs = fromPairs;
 export const _xor = xor;
+export const _omit = omit;
+export const _pick = pick;
 export const _clone = (object) => {
   try {
     return JSON.parse(JSON.stringify(object || {}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "1.4.52",
+  "version": "1.4.54",
   "repository": "https://gitlab.finema.co/finema/ui-kit",
   "license": "MIT",
   "author": "Finema Dev Core Team",
@@ -74,10 +74,16 @@
     "stylelint": "^16.1.0",
     "stylelint-config-prettier-scss": "^1.0.0",
     "stylelint-config-standard-scss": "^13.0.0",
-    "vitest": "^1.2.2"
+    "vitest": "^1.2.2",
+    "vue": "3.4.8"
   },
   "lint-staged": {
     "*.{ts,vue,tsx,js}": "eslint --fix --cache",
     "*.{html,json}": "prettier --write"
+  },
+  "pnpm": {
+    "overrides": {
+      "vue": "3.4.8"
+    }
   }
 }