@finema/core 2.56.0 → 2.57.0

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "2.56.0",
+  "version": "2.57.0",
   "configKey": "core",
   "builder": {
     "@nuxt/module-builder": "1.0.2",

package/dist/module.mjs

@@ -4,7 +4,7 @@ import * as lodash from 'lodash-es';
 import * as theme from '../dist/runtime/theme/index.js';
 
 const name = "@finema/core";
-const version = "2.56.0";
+const version = "2.57.0";
 
 const nuxtAppOptions = {
   head: {

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

@@ -16,6 +16,7 @@
       :start-time="startTime"
       :teleport="teleport"
       :required="required"
+      :timezone="appConfig.core?.time_zone"
       :flow="['calendar', 'time']"
       @update:model-value="onInput"
     >
@@ -119,13 +120,19 @@ onMounted(() => {
 });
 const format = (date) => {
   if (props.disabledTime) {
-    return TimeHelper.displayDate(date);
+    return TimeHelper.displayDate(date, {
+      autoTimezone: true
+    });
   }
-  return TimeHelper.displayDateTime(date);
+  return TimeHelper.displayDateTime(date, {
+    autoTimezone: true
+  });
 };
 const onInput = (_value) => {
   if (props.disabledTime && !props.isReturnISO) {
-    value.value = TimeHelper.getDateFormTime(_value);
+    value.value = TimeHelper.displayDate(_value, {
+      autoTimezone: true
+    }) ?? void 0;
   } else {
     value.value = _value;
   }

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

@@ -64,9 +64,10 @@
 <script setup>
 import Datepicker from "@vuepic/vue-datepicker";
 import FieldWrapper from "#core/components/Form/FieldWrapper.vue";
-import { TimeHelper, ref, useFieldHOC, useAppConfig, computed, useUiConfig, watch, onMounted } from "#imports";
+import { ref, useFieldHOC, useAppConfig, computed, useUiConfig, watch, onMounted, TimeHelper } from "#imports";
 import "@vuepic/vue-datepicker/dist/main.css";
 import { dateTimeTheme } from "#core/theme/dateTime";
+import { toZonedTime } from "date-fns-tz";
 const emits = defineEmits(["change"]);
 const props = defineProps({
   isDisabledMultiCalendar: { type: Boolean, required: false },
@@ -103,18 +104,18 @@ const {
 const innerValueRef = ref([]);
 const initializeValue = () => {
   const currentValue = value.value;
-  if (currentValue) {
-    const start = typeof currentValue.start === "string" ? new Date(currentValue.start) : currentValue.start;
-    const end = typeof currentValue.end === "string" ? new Date(currentValue.end) : currentValue.end;
+  if (currentValue && currentValue.start) {
+    const start = toZonedTime(new Date(currentValue.start), appConfig.core.time_zone);
+    const end = toZonedTime(new Date(currentValue.end || currentValue.start), appConfig.core.time_zone);
     innerValueRef.value = [start, end];
   } else {
     innerValueRef.value = [];
   }
 };
 watch(value, (newValue) => {
-  if (newValue && (newValue.start || newValue.end)) {
-    const start = typeof newValue.start === "string" ? new Date(newValue.start) : newValue.start;
-    const end = typeof newValue.end === "string" ? new Date(newValue.end) : newValue.end;
+  if (newValue && newValue.start) {
+    const start = toZonedTime(new Date(newValue.start), appConfig.core.time_zone);
+    const end = toZonedTime(new Date(newValue.end || newValue.start), appConfig.core.time_zone);
     innerValueRef.value = [start, end];
   } else if (!newValue) {
     innerValueRef.value = [];
@@ -127,11 +128,25 @@ onMounted(() => {
 });
 const format = (date) => {
   if (props.disabledTime) {
-    return date.length > 0 ? TimeHelper.displayDate(date[0]) + " - " + TimeHelper.displayDate(date[1] ?? date[0]) : "";
+    return date.length > 0 && date[0] ? TimeHelper.displayDate(date[0], {
+      autoTimezone: true
+    }) + " - " + TimeHelper.displayDate(date[1] || date[0], {
+      autoTimezone: true
+    }) : "";
   }
-  return date.length > 0 ? TimeHelper.displayDateTime(date[0]) + " - " + TimeHelper.displayDateTime(date[1] ?? date[0]) : "";
+  return date.length > 0 && date[0] ? TimeHelper.displayDateTime(date[0], {
+    autoTimezone: true
+  }) + " - " + TimeHelper.displayDateTime(date[1] || date[0], {
+    autoTimezone: true
+  }) : "";
 };
 const onInput = (_value) => {
+  const formattedDates = _value.map((d) => {
+    const year = d.getFullYear();
+    const month = String(d.getMonth() + 1).padStart(2, "0");
+    const day = String(d.getDate()).padStart(2, "0");
+    return `${year}-${month}-${day}`;
+  });
   if (_value === null || _value === void 0) {
     value.value = void 0;
     emits("change", void 0);
@@ -139,8 +154,8 @@ const onInput = (_value) => {
   }
   if (props.disabledTime && !props.isReturnISO) {
     value.value = {
-      start: TimeHelper.getDateFormTime(_value[0]),
-      end: TimeHelper.getDateFormTime(_value[1] || _value[0])
+      start: formattedDates[0],
+      end: formattedDates[1] || formattedDates[0]
     };
   } else {
     value.value = {

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

@@ -15,6 +15,7 @@
       :required="wrapperProps.required"
       :clearable="true"
       :always-clearable="true"
+      :timezone="appConfig.core?.time_zone"
       @update:model-value="onInput"
     >
       <template

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

@@ -17,7 +17,15 @@
       @update:modelValue="onChange"
       @update:searchTerm="onSearch"
     >
-      <template #default="{ modelValue }">
+      <template #default="{ modelValue, ui: selectMenuUi }">
+        <Chip
+          v-if="options.find((item) => item.value === modelValue)?.chip"
+          v-bind="options.find((item) => item.value === modelValue)?.chip"
+          inset
+          standalone
+          :size="selectMenuUi.itemLeadingChipSize()"
+          :class="selectMenuUi.itemLeadingChip()"
+        />
         <div
           v-if="value"
           :class="theme.selectedWrapper({

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

@@ -17,7 +17,7 @@
       @update:model-value="onChange"
       @update:searchTerm="onSearch"
     >
-      <template #default="{ modelValue }">
+      <template #default="{ modelValue, ui: selectMenuUi }">
         <div
           v-if="!ArrayHelper.isEmpty(value)"
           :class="theme.tagsWrapper({
@@ -31,6 +31,25 @@
   class: [ui?.tagsItem]
 })"
           >
+            <Chip
+              v-if="options.find((item) => item.value === _value)?.chip"
+              v-bind="options.find((item) => item.value === _value)?.chip"
+              inset
+              standalone
+              :size="selectMenuUi.itemLeadingChipSize()"
+              class="p-1"
+            />
+            <Icon
+              v-if="options.find((item) => item.value === _value)?.icon"
+              :name="options.find((item) => item.value === _value)?.icon"
+              class="size-4"
+            />
+            <Avatar
+              v-if="options.find((item) => item.value === _value)?.avatar"
+              v-bind="options.find((item) => item.value === _value)?.avatar"
+              :class="selectMenuUi.itemLeadingAvatar()"
+              size="2xs"
+            />
             <div
               :class="theme.tagsItemText({
   class: [ui?.tagsItemText]

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

@@ -15,6 +15,7 @@
       :start-time="startTime"
       :required="required"
       :enable-seconds="enableSeconds"
+      :timezone="appConfig.core?.time_zone"
       @update:model-value="onChange"
     >
       <template #dp-input="{ value: innerValue }">

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

@@ -2,7 +2,11 @@ import type { TableColumn } from '@nuxt/ui';
 type __VLS_Props = {
     value: any;
     row: any;
-    column: TableColumn<any>;
+    column: TableColumn<any> & {
+        meta: {
+            max: number;
+        };
+    };
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -2,7 +2,11 @@ import type { TableColumn } from '@nuxt/ui';
 type __VLS_Props = {
     value: any;
     row: any;
-    column: TableColumn<any>;
+    column: TableColumn<any> & {
+        meta: {
+            max: number;
+        };
+    };
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/theme/selectMenu.js

@@ -7,10 +7,10 @@ export const selectMenuTheme = {
     clearIcon: "size-6 bg-gray-400 hover:bg-gray-400/75",
     item: "cursor-pointer max-sm:h-14",
     tagsWrapper: "flex flex-wrap gap-x-2 gap-y-1",
-    tagsItem: "px-1.5 py-0.5 rounded-sm inline-flex items-center gap-0.5 bg-primary text-white data-disabled:cursor-not-allowed data-disabled:opacity-75",
+    tagsItem: "px-1.5 py-0.5 rounded-sm inline-flex items-center gap-0.5 ring-1 ring-gray-300 bg-white data-disabled:cursor-not-allowed data-disabled:opacity-75",
     tagsItemText: "flex items-center gap-x-1 text-sm",
     tagsItemDelete: [
-      "inline-flex items-center text-white disabled:pointer-events-none",
+      "inline-flex items-center hover:text-gray-500 disabled:pointer-events-none",
       "transition-colors cursor-pointer"
     ],
     tagsItemDeleteIcon: "ph:x"

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

@@ -1,10 +1,20 @@
 export declare class TimeHelper {
     static thaiFormat: (dateStr: Date, formatStr: string, forceThai?: boolean) => string;
-    static displayDate: (time: string | Date | null | undefined) => string | null;
-    static displayDateTime: (time: string | Date | null | undefined) => string | null;
-    static displayDateThai: (time: string | Date | null | undefined) => string | null;
-    static displayDateTimeThai: (time: string | Date | null | undefined) => string | null;
-    static displayDateRange: (startDate: Date | string | null | undefined, endDate: Date | string | null | undefined) => {
+    static displayDate: (time: string | Date | null | undefined, options?: {
+        autoTimezone?: boolean;
+    }) => string | null;
+    static displayDateTime: (time: string | Date | null | undefined, options?: {
+        autoTimezone?: boolean;
+    }) => string | null;
+    static displayDateThai: (time: string | Date | null | undefined, options?: {
+        autoTimezone?: boolean;
+    }) => string | null;
+    static displayDateTimeThai: (time: string | Date | null | undefined, options?: {
+        autoTimezone?: boolean;
+    }) => string | null;
+    static displayDateRange: (startDate: Date | string | null | undefined, endDate: Date | string | null | undefined, options?: {
+        autoTimezone?: boolean;
+    }) => {
         startDate: Date | string | null;
         endDate: Date | string | null;
     };

package/dist/runtime/utils/TimeHelper.js

@@ -25,39 +25,55 @@ export class TimeHelper {
     }
     return formatInTimeZone(newDateStr, timeZone, formatStr, options);
   };
-  static displayDate = (time) => {
+  static displayDate = (time, options) => {
     if (!time) {
       return null;
     }
     const parsedTime = getTime(time);
+    if (options?.autoTimezone) {
+      const newTime2 = format(parsedTime, dateFormatDisplay);
+      return isValid(parsedTime) ? newTime2 : time;
+    }
     const newTime = TimeHelper.thaiFormat(parsedTime, dateFormatDisplay);
     return isValid(parsedTime) ? newTime : time;
   };
-  static displayDateTime = (time) => {
+  static displayDateTime = (time, options) => {
     if (!time) {
       return null;
     }
     const parsedTime = getTime(time);
+    if (options?.autoTimezone) {
+      const newTime2 = format(parsedTime, dateTimeFormatDisplay);
+      return isValid(parsedTime) ? newTime2 : time;
+    }
     const newTime = TimeHelper.thaiFormat(parsedTime, dateTimeFormatDisplay);
     return isValid(parsedTime) ? newTime : time;
   };
-  static displayDateThai = (time) => {
+  static displayDateThai = (time, options) => {
     if (!time) {
       return null;
     }
     const parsedTime = getTime(time);
+    if (options?.autoTimezone) {
+      const newTime2 = format(parsedTime, dateFormat);
+      return isValid(parsedTime) ? newTime2 : time;
+    }
     const newTime = TimeHelper.thaiFormat(parsedTime, dateFormat, true);
     return isValid(parsedTime) ? newTime : time;
   };
-  static displayDateTimeThai = (time) => {
+  static displayDateTimeThai = (time, options) => {
     if (!time) {
       return null;
     }
     const parsedTime = getTime(time);
+    if (options?.autoTimezone) {
+      const newTime2 = format(parsedTime, dateTimeFormat);
+      return isValid(parsedTime) ? newTime2 : time;
+    }
     const newTime = TimeHelper.thaiFormat(parsedTime, dateTimeFormat, true);
     return isValid(parsedTime) ? newTime : time;
   };
-  static displayDateRange = (startDate, endDate) => {
+  static displayDateRange = (startDate, endDate, options) => {
     if (!startDate || !endDate) {
       return {
         startDate: startDate || null,
@@ -66,6 +82,14 @@ export class TimeHelper {
     }
     const parsedStartDate = getTime(startDate);
     const parsedEndDate = getTime(endDate);
+    if (options?.autoTimezone) {
+      const newTimeStartDate = format(parsedStartDate, dateFormatDisplay);
+      const newTimeEndDate = format(parsedEndDate, dateFormatDisplay);
+      return {
+        startDate: isValid(parsedStartDate) ? newTimeStartDate : startDate,
+        endDate: isValid(parsedEndDate) ? newTimeEndDate : endDate
+      };
+    }
     const newStartDate = TimeHelper.thaiFormat(parsedStartDate, dateFormatDisplay);
     const newEndDate = TimeHelper.thaiFormat(parsedEndDate, dateFormatDisplay);
     return {
@@ -105,7 +129,7 @@ export class TimeHelper {
       return null;
     }
     const parsedTime = getTime(time);
-    const newTime = format(parsedTime, customFormat);
+    const newTime = formatInTimeZone(parsedTime, timeZone, customFormat);
     return isValid(parsedTime) ? newTime : time;
   };
   static getDateFormTimeWithLocal = (time, customFormat = dateFormat) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "2.56.0",
+  "version": "2.57.0",
   "repository": "https://gitlab.finema.co/finema/ui-kit",
   "license": "MIT",
   "author": "Finema Dev Core Team",