@finema/core 1.4.100 → 1.4.101

package/dist/module.json

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

package/dist/module.mjs

@@ -1,7 +1,7 @@
 import { defineNuxtModule, createResolver, installModule, addPlugin, addComponentsDir, addImportsDir } from '@nuxt/kit';
 
 const name = "@finema/core";
-const version = "1.4.100";
+const version = "1.4.101";
 
 const colors = {
   black: "#20243E",

package/dist/runtime/components/Form/Fields.vue

@@ -93,6 +93,21 @@
         :disabled-time="true"
         v-on="option.on ?? {}"
       />
+      <FormInputDateTimeRange
+        v-else-if="option.type === INPUT_TYPES.DATE_TIME_RANGE"
+        :class="option.class"
+        :form="form"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
+      <FormInputDateTimeRange
+        v-else-if="option.type === INPUT_TYPES.DATE_RANGE"
+        :class="option.class"
+        :form="form"
+        :disabled-time="true"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
       <FormInputUploadFileClassic
         v-else-if="option.type === INPUT_TYPES.UPLOAD_FILE_CLASSIC"
         :class="option.class"

package/dist/runtime/components/Form/InputDateTimeRange/date_range_time_field.types.d.ts

@@ -0,0 +1,17 @@
+import { type IFormFieldBase, type INPUT_TYPES } from '#core/components/Form/types';
+import type { IDateTimeFieldProps } from '../InputDateTime/date_time_field.types';
+export interface ITimeOption {
+    hours?: number | string;
+    minutes?: number | string;
+    seconds?: number | string;
+}
+export interface IDateTimeRangeResponse {
+    start: Date | string;
+    end: Date | string;
+}
+export interface IDateTimeRangeFieldProps extends IDateTimeFieldProps {
+    isDisabledMultiCalendar?: boolean;
+}
+export type IDateTimeRangeField = IFormFieldBase<INPUT_TYPES.DATE_RANGE | INPUT_TYPES.DATE_TIME_RANGE, IDateTimeRangeFieldProps, {
+    change: (value: IDateTimeRangeResponse) => void;
+}>;

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

@@ -0,0 +1,83 @@
+<template>
+  <FieldWrapper v-bind="wrapperProps">
+    <Datepicker
+      v-model="innerValueRef"
+      :disabled="wrapperProps.isDisabled"
+      cancel-text="ยกเลิก"
+      select-text="เลือก"
+      locale="th"
+      :format="format"
+      :enable-time-picker="!disabledTime"
+      :placeholder="wrapperProps.placeholder"
+      :min-date="minDate"
+      :max-date="maxDate"
+      :min-time="minTime"
+      :max-time="maxTime"
+      :start-time="startTime"
+      :multi-calendars="!isDisabledMultiCalendar"
+      :required="isRequired"
+      time-picker-inline
+      range
+      @update:model-value="onInput"
+    >
+      <template #dp-input="{ value: innerValue }">
+        <UInput
+          :trailing-icon="innerValue ? undefined : 'i-heroicons-calendar-days'"
+          type="text"
+          :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 { TimeHelper, ref, useFieldHOC } from '#imports'
+import '@vuepic/vue-datepicker/dist/main.css'
+import type {
+  IDateTimeRangeFieldProps,
+  IDateTimeRangeResponse,
+} from './date_range_time_field.types'
+
+const props = withDefaults(defineProps<IDateTimeRangeFieldProps>(), {})
+
+const { value, wrapperProps } = useFieldHOC<IDateTimeRangeResponse | null>(props)
+
+const innerValueRef = ref<Date[]>([])
+
+const format = (date: Date[]) => {
+  if (props.disabledTime) {
+    return date.length > 0
+      ? TimeHelper.displayDate(date[0]) + ' - ' + TimeHelper.displayDate(date[1] ?? '')
+      : ''
+  }
+
+  return date.length > 0
+    ? TimeHelper.displayDateTime(date[0]) + ' - ' + TimeHelper.displayDateTime(date[1] ?? '')
+    : ''
+}
+
+const onInput = (_value: Date[]) => {
+  if (_value === null) {
+    value.value = null
+
+    return
+  }
+
+  if (props.disabledTime && !props.isReturnISO) {
+    value.value = <IDateTimeRangeResponse>{
+      start: TimeHelper.getDateFormTime(_value[0]),
+      end: TimeHelper.getDateFormTime(_value[1]),
+    }
+  } else {
+    value.value = <IDateTimeRangeResponse>{
+      start: _value[0],
+      end: _value[1],
+    }
+  }
+}
+</script>

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

@@ -8,6 +8,7 @@ import { type ISelectField } from '#core/components/Form/InputSelect/types';
 import { type IToggleField } from '#core/components/Form/InputToggle/types';
 import { type ITextareaField } from '#core/components/Form/InputTextarea/types';
 import { type IDateTimeField } from '#core/components/Form/InputDateTime/date_time_field.types';
+import { type IDateTimeRangeField } from '~/src/runtime/components/Form/InputDateTimeRange/date_range_time_field.types';
 import { type IUploadFileClassicField } from '#core/components/Form/InputUploadFileClassic/types';
 import { type IUploadFileField } from '#core/components/Form/InputUploadFileClassicAuto/types';
 import { type IUploadDropzoneField } from '#core/components/Form/InputUploadDropzone/types';
@@ -28,6 +29,8 @@ export declare const enum INPUT_TYPES {
     CHECKBOX = "CHECKBOX",
     DATE_TIME = "DATE_TIME",
     DATE = "DATE",
+    DATE_RANGE = "DATE_RANGE",
+    DATE_TIME_RANGE = "DATE_TIME_RANGE",
     UPLOAD_FILE_CLASSIC = "UPLOAD_FILE_CLASSIC",
     UPLOAD_FILE_CLASSIC_AUTO = "UPLOAD_FILE_CLASSIC_AUTO",
     UPLOAD_DROPZONE = "UPLOAD_DROPZONE",
@@ -62,4 +65,4 @@ export interface IFormFieldBase<I extends INPUT_TYPES, P extends IFieldProps, O>
     props: P;
     on?: O;
 }
-export type IFormField = ITextField | INumberField | IStaticField | ICheckboxField | IRadioField | ISelectField | IToggleField | ITextareaField | IDateTimeField | IUploadFileClassicField | IUploadFileField | IUploadDropzoneField | IUploadDropzoneAutoField | IUploadDropzoneAutoMultipleField | IUploadDropzoneImageAutoMultipleField;
+export type IFormField = ITextField | INumberField | IStaticField | ICheckboxField | IRadioField | ISelectField | IToggleField | ITextareaField | IDateTimeField | IDateTimeRangeField | IUploadFileClassicField | IUploadFileField | IUploadDropzoneField | IUploadDropzoneAutoField | IUploadDropzoneAutoMultipleField | IUploadDropzoneImageAutoMultipleField;

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

@@ -11,6 +11,8 @@ export var INPUT_TYPES = /* @__PURE__ */ ((INPUT_TYPES2) => {
   INPUT_TYPES2["CHECKBOX"] = "CHECKBOX";
   INPUT_TYPES2["DATE_TIME"] = "DATE_TIME";
   INPUT_TYPES2["DATE"] = "DATE";
+  INPUT_TYPES2["DATE_RANGE"] = "DATE_RANGE";
+  INPUT_TYPES2["DATE_TIME_RANGE"] = "DATE_TIME_RANGE";
   INPUT_TYPES2["UPLOAD_FILE_CLASSIC"] = "UPLOAD_FILE_CLASSIC";
   INPUT_TYPES2["UPLOAD_FILE_CLASSIC_AUTO"] = "UPLOAD_FILE_CLASSIC_AUTO";
   INPUT_TYPES2["UPLOAD_DROPZONE"] = "UPLOAD_DROPZONE";

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

@@ -4,6 +4,6 @@ import { type IFieldProps, type IFormField } 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 useFieldHOC: <TValue = unknown>(newFormProps: IFieldProps, opts?: Partial<FieldOptions<TValue>>) => IFieldContext<TValue>;
 export declare const createFormFields: (fields: () => IFormField[]) => any;
 export {};

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

@@ -85,5 +85,5 @@ export interface IUsePageLoader<T> {
 export declare const apiAddHelper: <T>(state: () => IAPIAddState<T>, onUpdateStatus: (status: IStatus) => void, onUpdateOptions: (options: IAPIOptions) => void, onUpdateData: (data: any) => void, onUpdateItems: (data: any[]) => void, data: any, opts: IPageLoaderOptions<any> & IPageFetchLoaderOptions) => Promise<void>;
 export declare const apiDeleteHelper: <T>(state: () => IAPIDeleteState<T>, onUpdateStatus: (status: IStatus) => void, onUpdateOptions: (options: IAPIOptions) => void, _onUpdateData: (data: T) => void, onUpdateItems: (data: T[]) => void, id: string | number, opts: IPageLoaderOptions<any> & IPageDeleteLoaderOptions) => Promise<void>;
 export declare const apiFetchHelper: <T>(state: () => IAPIFetchState<T>, onUpdateStatus: (status: IStatus) => void, onUpdateOptions: (options: IPageOptions) => void, onUpdateItems: (items: T[]) => void, page: number, query: string, opts: IPageLoaderOptions<T> & IPageFetchLoaderOptions<any>) => Promise<void>;
-export declare const apiFindHelper: <T>(state: () => IAPIFindState<T>, onUpdateStatus: (status: IStatus) => void, onUpdateOptions: (options: IAPIOptions) => void, onUpdateData: (data: any) => void, id: string | number, opts: IPageLoaderOptions<T> & IPageFindLoaderOptions<Record<string, any>>) => Promise<void>;
+export declare const apiFindHelper: <T>(state: () => IAPIFindState<T>, onUpdateStatus: (status: IStatus) => void, onUpdateOptions: (options: IAPIOptions) => void, onUpdateData: (data: any) => void, id: string | number, opts: IPageLoaderOptions<T> & IPageFindLoaderOptions) => Promise<void>;
 export declare const updateHelper: <T>(state: () => IAPIUpdateState<T>, onUpdateStatus: (status: IStatus) => void, onUpdateOptions: (options: IAPIOptions) => void, onUpdateData: (data: T) => void, _onUpdateItems: (data: T[]) => void, onUpdateOldData: (data: T) => void, id: string | number, data: any, opts: IPageLoaderOptions<any> & IPageUpdateLoaderOptions) => Promise<void>;

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

@@ -2,6 +2,10 @@ export declare class TimeHelper {
     static thaiFormat: (dateStr: Date, formatStr: string) => string;
     static displayDate: (time: string | Date) => string;
     static displayDateTime: (time: string | Date) => string;
+    static displayDateRange: (startDate: Date | string, endDate: Date | string) => {
+        startDate: Date | string;
+        endDate: Date | string;
+    };
     static toUTC: (time: string | Date) => string;
     static toLocal: (time: string | Date) => string;
     static getCurrentDate: () => string;

package/dist/runtime/utils/TimeHelper.mjs

@@ -36,6 +36,22 @@ export class TimeHelper {
     const newTime = TimeHelper.thaiFormat(parsedTime, dateTimeFormatDisplay);
     return isValid(parsedTime) ? newTime : time;
   };
+  static displayDateRange = (startDate, endDate) => {
+    if (!startDate || !endDate) {
+      return {
+        startDate,
+        endDate
+      };
+    }
+    const parsedStartDate = isDate(startDate) ? startDate : new Date(startDate);
+    const parsedEndDate = isDate(endDate) ? endDate : new Date(endDate);
+    const newStartDate = TimeHelper.thaiFormat(parsedStartDate, dateFormatDisplay);
+    const newEndDate = TimeHelper.thaiFormat(parsedEndDate, dateFormatDisplay);
+    return {
+      startDate: isValid(parsedStartDate) ? newStartDate : startDate,
+      endDate: isValid(parsedEndDate) ? newEndDate : endDate
+    };
+  };
   static toUTC = (time) => {
     if (!time) {
       return time;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "1.4.100",
+  "version": "1.4.101",
   "repository": "https://gitlab.finema.co/finema/ui-kit",
   "license": "MIT",
   "author": "Finema Dev Core Team",
@@ -22,7 +22,6 @@
   },
   "scripts": {
     "prepack": "nuxt-module-build build",
-    "docs": "nuxi dev docs",
     "dev": "nuxi dev playground",
     "dev:build": "nuxi build playground",
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
@@ -34,7 +33,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.10.3",
+    "@nuxt/kit": "^3.11.0",
     "@nuxt/ui": "^2.14.2",
     "@pinia/nuxt": "^0.5.1",
     "@vee-validate/nuxt": "^4.12.5",
@@ -54,11 +53,11 @@
   },
   "devDependencies": {
     "@finema/eslint-config": "^1.2.0",
-    "@nuxt/devtools": "latest",
+    "@nuxt/devtools": "^1.0.8",
     "@nuxt/eslint-config": "^0.2.0",
     "@nuxt/module-builder": "^0.5.5",
-    "@nuxt/schema": "^3.10.3",
-    "@nuxt/test-utils": "^3.11.0",
+    "@nuxt/schema": "^3.11.0",
+    "@nuxt/test-utils": "^3.12.0",
     "@release-it/conventional-changelog": "^8.0.1",
     "@types/node": "^20.10.17",
     "@vue/test-utils": "^2.4.3",
@@ -67,7 +66,7 @@
     "happy-dom": "^13.0.0",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.0",
-    "nuxt": "^3.10.3",
+    "nuxt": "^3.11.0",
     "playwright-core": "^1.42.1",
     "prettier": "^3.1.1",
     "release-it": "^17.0.1",