@finema/core 1.4.14 → 1.4.16

package/dist/module.d.mts

@@ -6,6 +6,7 @@ declare const core: {
     date_format: string;
     date_time_format: string;
     time_format: string;
+    is_thai_year: boolean;
 };
 
 declare const config_core: typeof core;

package/dist/module.d.ts

@@ -6,6 +6,7 @@ declare const core: {
     date_format: string;
     date_time_format: string;
     time_format: string;
+    is_thai_year: boolean;
 };
 
 declare const config_core: typeof core;

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "1.4.14",
+  "version": "1.4.16",
   "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.14";
+const version = "1.4.16";
 
 const colors = {
   black: "#20243E",

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

@@ -9,6 +9,7 @@
     :help="help"
     :error="errorMessage"
     :required="!!isRequired"
+    :ui="containerUi"
   >
     <slot />
   </UFormGroup>

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

@@ -1,83 +1,96 @@
 <template>
-  <div class="fields space-y-4">
-    <template v-for="(option, index) in options" :key="option.props.name + index + option.type">
-      <div v-if="!option.isHide" :class="option.class">
-        <FormInputStatic
-          v-if="option.type === INPUT_TYPES.STATIC"
-          :form="form"
-          v-bind="option.props"
-          v-on="option.on ?? {}"
-        />
-        <FormInputText
-          v-else-if="option.type === INPUT_TYPES.TEXT"
-          :form="form"
-          v-bind="option.props"
-          v-on="option.on ?? {}"
-        />
-        <FormInputText
-          v-else-if="option.type === INPUT_TYPES.PASSWORD"
-          type="password"
-          :form="form"
-          v-bind="option.props"
-          v-on="option.on ?? {}"
-        />
-        <FormInputText
-          v-else-if="option.type === INPUT_TYPES.EMAIL"
-          type="email"
-          :form="form"
-          v-bind="option.props"
-          v-on="option.on ?? {}"
-        />
-        <FormInputTextarea
-          v-else-if="option.type === INPUT_TYPES.TEXTAREA"
-          :form="form"
-          v-bind="option.props"
-          v-on="option.on ?? {}"
-        />
-        <FormInputToggle
-          v-else-if="option.type === INPUT_TYPES.TOGGLE"
-          :form="form"
-          v-bind="option.props"
-          v-on="option.on ?? {}"
-        />
-        <FormInputSelect
-          v-else-if="option.type === INPUT_TYPES.SELECT"
-          :form="form"
-          v-bind="option.props"
-          v-on="option.on ?? {}"
-        />
-        <FormInputRadio
-          v-else-if="option.type === INPUT_TYPES.RADIO"
-          :form="form"
-          v-bind="option.props"
-          v-on="option.on ?? {}"
-        />
-        <FormInputCheckbox
-          v-else-if="option.type === INPUT_TYPES.CHECKBOX"
-          :form="form"
-          v-bind="option.props"
-          v-on="option.on ?? {}"
-        />
-        <FormInputDateTime
-          v-else-if="option.type === INPUT_TYPES.DATE_TIME"
-          :form="form"
-          v-bind="option.props"
-          v-on="option.on ?? {}"
-        />
-        <FormInputDateTime
-          v-else-if="option.type === INPUT_TYPES.DATE"
-          :form="form"
-          v-bind="option.props"
-          :disabled-time="true"
-          v-on="option.on ?? {}"
-        />
-        <FormInputUploadFileClassic
-          v-else-if="option.type === INPUT_TYPES.UPLOAD_FILE_CLASSIC"
-          :form="form"
-          v-bind="option.props"
-          v-on="option.on ?? {}"
-        />
-      </div>
+  <div :class="['fields', $props.class]">
+    <template
+      v-for="(option, index) in options.filter((item) => !item.isHide)"
+      :key="option.props.name + index + option.type"
+    >
+      <FormInputStatic
+        v-if="option.type === INPUT_TYPES.STATIC"
+        :class="option.class"
+        :form="form"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
+      <FormInputText
+        v-else-if="option.type === INPUT_TYPES.TEXT"
+        :class="option.class"
+        :form="form"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
+      <FormInputText
+        v-else-if="option.type === INPUT_TYPES.PASSWORD"
+        :class="option.class"
+        type="password"
+        :form="form"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
+      <FormInputText
+        v-else-if="option.type === INPUT_TYPES.EMAIL"
+        :class="option.class"
+        type="email"
+        :form="form"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
+      <FormInputTextarea
+        v-else-if="option.type === INPUT_TYPES.TEXTAREA"
+        :class="option.class"
+        :form="form"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
+      <FormInputToggle
+        v-else-if="option.type === INPUT_TYPES.TOGGLE"
+        :class="option.class"
+        :form="form"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
+      <FormInputSelect
+        v-else-if="option.type === INPUT_TYPES.SELECT"
+        :class="option.class"
+        :form="form"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
+      <FormInputRadio
+        v-else-if="option.type === INPUT_TYPES.RADIO"
+        :class="option.class"
+        :form="form"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
+      <FormInputCheckbox
+        v-else-if="option.type === INPUT_TYPES.CHECKBOX"
+        :class="option.class"
+        :form="form"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
+      <FormInputDateTime
+        v-else-if="option.type === INPUT_TYPES.DATE_TIME"
+        :class="option.class"
+        :form="form"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
+      <FormInputDateTime
+        v-else-if="option.type === INPUT_TYPES.DATE"
+        :class="option.class"
+        :form="form"
+        v-bind="getFieldBinding(option)"
+        :disabled-time="true"
+        v-on="option.on ?? {}"
+      />
+      <FormInputUploadFileClassic
+        v-else-if="option.type === INPUT_TYPES.UPLOAD_FILE_CLASSIC"
+        :class="option.class"
+        :form="form"
+        v-bind="getFieldBinding(option)"
+        v-on="option.on ?? {}"
+      />
     </template>
   </div>
 </template>
@@ -85,8 +98,32 @@
 import { type FormContext } from 'vee-validate'
 import { type IFormField, INPUT_TYPES } from '#core/components/Form/types'
 
-defineProps<{
-  form?: FormContext
-  options: IFormField[]
-}>()
+const props = withDefaults(
+  defineProps<{
+    form?: FormContext
+    options: IFormField[]
+    orientation?: 'horizontal' | 'vertical'
+    class?: any
+  }>(),
+  {
+    class: 'space-y-4',
+    orientation: 'vertical',
+  }
+)
+
+const getFieldBinding = (field: IFormField) => {
+  if (props.orientation === 'horizontal') {
+    return {
+      ...field.props,
+      containerUi: {
+        ...field.props.containerUi,
+        wrapper:
+          'lg:grid lg:grid-cols-3 lg:gap-4 lg:items-start ' + field.props.containerUi?.wrapper,
+        container: 'lg:col-span-2 ' + field.props.containerUi?.container,
+      },
+    }
+  }
+
+  return field.props
+}
 </script>

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

@@ -33,19 +33,19 @@ export interface IFieldProps {
     size?: string;
     rules?: any;
     autoFocus?: boolean;
-    class?: any;
-    classInner?: any;
     placeholder?: string;
     isDisabled?: boolean;
     isReadonly?: boolean;
     isRequired?: boolean;
     help?: string;
     ui?: object | any;
+    containerUi?: object | any;
 }
 export interface IFormFieldBase<I extends INPUT_TYPES, P extends IFieldProps, O> {
     type: I;
     component?: Component;
     class?: any;
+    ui?: object | any;
     isHide?: boolean;
     props: P;
     on?: O;

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

@@ -15,11 +15,11 @@
       v-if="title"
       :class="[ui.header, { 'flex items-center justify-between': !isHideCloseBtn }]"
     >
-      <h1 class="text-xl font-medium">{{ title }}</h1>
+      <h1 class="text-lg font-semibold">{{ title }}</h1>
       <Icon
         v-if="!isHideCloseBtn"
         name="i-heroicons-x-mark"
-        class="h-6 w-6 cursor-pointer"
+        class="h-6 w-6 cursor-pointer opacity-50"
         @click="close"
       />
     </div>
@@ -31,7 +31,7 @@
       <Icon
         v-if="!isHideCloseBtn"
         name="i-heroicons-x-mark"
-        class="h-6 w-6 cursor-pointer"
+        class="h-6 w-6 cursor-pointer opacity-50"
         @click="close"
       />
     </div>

package/dist/runtime/core.config.d.ts

@@ -4,4 +4,5 @@ export declare const core: {
     date_format: string;
     date_time_format: string;
     time_format: string;
+    is_thai_year: boolean;
 };

package/dist/runtime/core.config.mjs

@@ -3,5 +3,6 @@ export const core = {
   default_primary_key: "id",
   date_format: "dd-MM-yyyy",
   date_time_format: "dd-MM-yyyy HH:mm",
-  time_format: "HH:mm"
+  time_format: "HH:mm",
+  is_thai_year: false
 };

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

@@ -1,18 +1,20 @@
 import { modal as inheritModal } from "#ui/ui.config";
 export const modal = {
   ...inheritModal,
-  header: "px-4 py-2 border-b",
-  innerWrapper: "p-4",
+  header: "px-6 py-4 border-b",
+  innerWrapper: "px-6 py-4",
+  padding: "p-6",
+  margin: "my-0",
   size: {
-    sm: "sm:max-w-sm",
-    md: "sm:max-w-lg",
-    lg: "sm:max-w-2xl",
-    xl: "sm:max-w-4xl"
+    sm: "w-full lg:max-w-sm",
+    md: "w-full lg:max-w-lg",
+    lg: "w-full lg:max-w-2xl",
+    xl: "w-full lg:max-w-4xl"
   },
   position: {
-    top: "flex min-h-full items-end sm:items-start justify-center text-center",
-    center: "flex min-h-full items-end sm:items-center  justify-center text-center",
-    bottom: "flex min-h-full items-end sm:items-end justify-center text-center"
+    top: "flex min-h-full items-start justify-center text-center",
+    center: "flex min-h-full items-start lg:items-center  justify-center text-center",
+    bottom: "flex min-h-full items-start lg:items-end justify-center text-center"
   },
   overlay: {
     background: "bg-gray-500/75 dark:bg-gray-800/75 backdrop-blur-sm"

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

@@ -1,4 +1,7 @@
 export declare class TimeHelper {
+    static thaiFormat: (dateStr: Date, formatStr: string) => string;
+    static displayDate: (time: string | Date) => string;
+    static displayDateTime: (time: string | Date) => string;
     static toUTC: (time: string | Date) => string;
     static toLocal: (time: string | Date) => string;
     static getCurrentDate: () => string;

package/dist/runtime/utils/TimeHelper.mjs

@@ -1,9 +1,33 @@
-import { addHours, format, formatISO, isDate, isValid, parse, subHours } from "date-fns";
+import { addHours, format, formatISO, isDate, isValid, parse, subHours, addYears } from "date-fns";
 import { useCoreConfig } from "#core/composables/useConfig";
 const dateFormat = useCoreConfig().date_format;
 const dateTimeFormat = useCoreConfig().date_time_format;
 const timeFormat = useCoreConfig().time_format;
+const isThaiYear = useCoreConfig().is_thai_year;
 export class TimeHelper {
+  static thaiFormat = (dateStr, formatStr) => {
+    let newDateStr = dateStr;
+    if (isThaiYear) {
+      newDateStr = addYears(dateStr, 543);
+    }
+    return format(newDateStr, formatStr);
+  };
+  static displayDate = (time) => {
+    if (!time) {
+      return time;
+    }
+    const parsedTime = isDate(time) ? time : new Date(time);
+    const newTime = TimeHelper.thaiFormat(parsedTime, dateFormat);
+    return isValid(parsedTime) ? newTime : time;
+  };
+  static displayDateTime = (time) => {
+    if (!time) {
+      return time;
+    }
+    const parsedTime = isDate(time) ? time : new Date(time);
+    const newTime = TimeHelper.thaiFormat(parsedTime, dateTimeFormat);
+    return isValid(parsedTime) ? newTime : time;
+  };
   static toUTC = (time) => {
     if (!time) {
       return time;

package/dist/runtime/utils/TimeHelper.spec.mjs

@@ -4,7 +4,8 @@ vi.mock("#core/composables/useConfig", () => ({
   useCoreConfig: () => ({
     date_format: "yyyy-MM-dd",
     date_time_format: "yyyy-MM-dd HH:mm",
-    time_format: "HH:mm"
+    time_format: "HH:mm",
+    is_thai_year: false
   })
 }));
 describe("TimeHelper", async () => {
@@ -20,6 +21,12 @@ describe("TimeHelper", async () => {
     const result = TimeHelper.toLocal(inputTime);
     assert.equal(result, expectedOutput);
   });
+  it("[thai year ]toLocal should convert time to local format", () => {
+    const inputTime = "2023-12-19 12:00";
+    const expectedOutput = "2023-12-19 19:00";
+    const result = TimeHelper.toLocal(inputTime);
+    assert.equal(result, expectedOutput);
+  });
   it("getCurrentDate should return the current date in yyyy-MM-dd format", () => {
     const expectedOutputRegex = /^\d{4}-\d{2}-\d{2}$/;
     const result = TimeHelper.getCurrentDate();

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

@@ -0,0 +1 @@
+export {};

package/dist/runtime/utils/TimeHelper.thai.spec.mjs

@@ -0,0 +1,30 @@
+import { assert, describe, it, vi } from "vitest";
+import { TimeHelper } from "./TimeHelper.mjs";
+vi.mock("#core/composables/useConfig", () => ({
+  useCoreConfig: () => ({
+    date_format: "yyyy-MM-dd",
+    date_time_format: "yyyy-MM-dd HH:mm",
+    time_format: "HH:mm",
+    is_thai_year: true
+  })
+}));
+describe("TimeHelper", async () => {
+  it("displayDate", () => {
+    const inputTime = "2023-12-19 12:00";
+    const expectedOutput = "2566-12-19";
+    const result = TimeHelper.displayDate(inputTime);
+    assert.equal(result, expectedOutput);
+  });
+  it("displayDateTime", () => {
+    const inputTime = "2023-12-19 12:00";
+    const expectedOutput = "2566-12-19 12:00";
+    const result = TimeHelper.displayDateTime(inputTime);
+    assert.equal(result, expectedOutput);
+  });
+  it("displayDateTime - iso", () => {
+    const inputTime = "2023-01-16T22:00:00Z";
+    const expectedOutput = "2566-01-17 05:00";
+    const result = TimeHelper.displayDateTime(inputTime);
+    assert.equal(result, expectedOutput);
+  });
+});

package/package.json

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