@finema/core 2.7.7 → 2.8.1

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "2.7.7",
+  "version": "2.8.1",
   "configKey": "core",
   "builder": {
     "@nuxt/module-builder": "1.0.1",

package/dist/module.mjs

@@ -3,7 +3,7 @@ import defu from 'defu';
 import * as theme from '../dist/runtime/theme/index.js';
 
 const name = "@finema/core";
-const version = "2.7.7";
+const version = "2.8.1";
 
 const nuxtAppOptions = {
   head: {

package/dist/runtime/components/Empty.vue

@@ -1,22 +1,22 @@
 <template>
-  <div
+  <div
     :class="theme.base({
   class: [ui?.base, props.class]
-})"
-  >
-    <Icon
-      :name="icon"
-      :class="theme.icon({
-  class: [ui?.icon]
-})"
-    />
-    <p
+})"
+  >
+    <Icon
+      :name="icon"
+      :class="theme.iconSize({
+  class: [ui?.iconSize]
+})"
+    />
+    <p
       :class="theme.message({
   class: [ui?.message]
-})"
-      v-html="message"
-    />
-  </div>
+})"
+      v-html="message"
+    />
+  </div>
 </template>
 
 <script setup>
@@ -25,7 +25,7 @@ import { useUiConfig } from "#core/composables/useConfig";
 import { emptyTheme } from "#core/theme/empty";
 const props = defineProps({
   message: { type: null, required: false, default: "\u0E44\u0E21\u0E48\u0E1E\u0E1A\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25!" },
-  icon: { type: String, required: false },
+  icon: { type: String, required: false, default: "ph:table-thin" },
   ui: { type: null, required: false },
   class: { type: null, required: false }
 });

package/dist/runtime/components/Empty.vue.d.ts

@@ -7,5 +7,6 @@ type __VLS_Props = {
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     message: any;
+    icon: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -1,20 +1,19 @@
 <template>
-  <div
+  <div
     :class="[theme.base({
   class: [$props.class, ui?.base]
-})]"
-  >
-    <component
-      :is="componentMap[option.type] || option.component"
-      v-for="option in options.filter((item) => !item.isHide)"
-      :key="option.props.name"
-      :class="option.class"
-      :form="form"
-      v-bind="getFieldBinding(option)"
-      :type="option.type === INPUT_TYPES.PASSWORD ? 'password' : void 0"
-      v-on="option.on ?? {}"
-    />
-  </div>
+})]"
+  >
+    <component
+      :is="componentMap[option.type]?.component"
+      v-for="option in options.filter((item) => !item.isHide)"
+      :key="option.props.name"
+      :class="option.class"
+      :form="form"
+      v-bind="{ ...getFieldBinding(option), ...componentMap[option.type]?.props }"
+      v-on="option.on ?? {}"
+    />
+  </div>
 </template>
 
 <script setup>
@@ -27,6 +26,7 @@ import FormInputCheckbox from "./InputCheckbox/index.vue";
 import FormInputSelect from "./InputSelect/index.vue";
 import FormInputSelectMultiple from "./InputSelectMultiple/index.vue";
 import FormInputDateTime from "./InputDateTime/index.vue";
+import FormInputDateTimeRange from "./InputDateTimeRange/index.vue";
 import FormInputUploadDropzoneAuto from "./InputUploadDropzoneAuto/index.vue";
 import { INPUT_TYPES } from "#core/components/Form/types";
 import { formTheme } from "#core/theme/form";
@@ -39,32 +39,80 @@ const props = defineProps({
   ui: { type: null, required: false }
 });
 const componentMap = {
-  [INPUT_TYPES.TEXT]: FormInputText,
-  [INPUT_TYPES.TEXTAREA]: FormInputTextarea,
-  [INPUT_TYPES.TOGGLE]: FormInputToggle,
-  [INPUT_TYPES.CHECKBOX]: FormInputCheckbox,
-  [INPUT_TYPES.SELECT]: FormInputSelect,
-  [INPUT_TYPES.SELECT_MULTIPLE]: FormInputSelectMultiple,
+  [INPUT_TYPES.TEXT]: {
+    component: FormInputText,
+    props: {}
+  },
+  [INPUT_TYPES.TEXTAREA]: {
+    component: FormInputTextarea,
+    props: {}
+  },
+  [INPUT_TYPES.TOGGLE]: {
+    component: FormInputToggle,
+    props: {}
+  },
+  [INPUT_TYPES.CHECKBOX]: {
+    component: FormInputCheckbox,
+    props: {}
+  },
+  [INPUT_TYPES.SELECT]: {
+    component: FormInputSelect,
+    props: {}
+  },
+  [INPUT_TYPES.SELECT_MULTIPLE]: {
+    component: FormInputSelectMultiple,
+    props: {}
+  },
   // For INPUT_TYPES.COMPONENT, it will use option.component directly from the template
   [INPUT_TYPES.COMPONENT]: void 0,
   // Add other INPUT_TYPES here if they have dedicated components not covered by option.component
-  [INPUT_TYPES.NUMBER]: FormInputNumber,
+  [INPUT_TYPES.NUMBER]: {
+    component: FormInputNumber,
+    props: {}
+  },
   // Example: Map to FormInputText or a specific Number input if exists
-  [INPUT_TYPES.PASSWORD]: FormInputText,
-  // Example: Map to FormInputText or a specific Password input if exists
-  [INPUT_TYPES.EMAIL]: void 0,
-  // Example: Map to FormInputText or a specific Email input if exists
+  [INPUT_TYPES.PASSWORD]: {
+    component: FormInputText,
+    props: {
+      type: "password"
+    }
+  },
+  [INPUT_TYPES.EMAIL]: {
+    component: FormInputText,
+    props: {
+      type: "email"
+    }
+  },
   [INPUT_TYPES.STATIC]: void 0,
   [INPUT_TYPES.RADIO]: void 0,
-  [INPUT_TYPES.DATE_TIME]: FormInputDateTime,
-  [INPUT_TYPES.DATE]: void 0,
-  [INPUT_TYPES.DATE_RANGE]: void 0,
-  [INPUT_TYPES.DATE_TIME_RANGE]: void 0,
+  [INPUT_TYPES.DATE_TIME]: {
+    component: FormInputDateTime,
+    props: {}
+  },
+  [INPUT_TYPES.DATE]: {
+    component: FormInputDateTime,
+    props: {
+      disabledTime: true
+    }
+  },
+  [INPUT_TYPES.DATE_RANGE]: {
+    component: FormInputDateTimeRange,
+    props: {
+      disabledTime: true
+    }
+  },
+  [INPUT_TYPES.DATE_TIME_RANGE]: {
+    component: FormInputDateTimeRange,
+    props: {}
+  },
   [INPUT_TYPES.UPLOAD_FILE_CLASSIC]: void 0,
   [INPUT_TYPES.UPLOAD_FILE_CLASSIC_AUTO]: void 0,
   [INPUT_TYPES.UPLOAD_IMAGE_AUTO]: void 0,
   [INPUT_TYPES.UPLOAD_DROPZONE]: void 0,
-  [INPUT_TYPES.UPLOAD_DROPZONE_AUTO]: FormInputUploadDropzoneAuto,
+  [INPUT_TYPES.UPLOAD_DROPZONE_AUTO]: {
+    component: FormInputUploadDropzoneAuto,
+    props: {}
+  },
   [INPUT_TYPES.UPLOAD_DROPZONE_AUTO_MULTIPLE]: void 0,
   [INPUT_TYPES.UPLOAD_DROPZONE_IMAGE_AUTO_MULTIPLE]: void 0,
   [INPUT_TYPES.WYSIWYG]: void 0,

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

@@ -0,0 +1,17 @@
+import type { IDateTimeFieldProps } from '../InputDateTime/date_time_field.types.js';
+import type { IFormFieldBase, INPUT_TYPES } from '#core/components/Form/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,112 @@
+<template>
+  <FieldWrapper v-bind="wrapperProps">
+    <Datepicker
+      ref="datepicker"
+      v-model="innerValueRef"
+      :disabled="wrapperProps.disabled"
+      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="required"
+      time-picker-inline
+      range
+      :flow="['calendar', 'time']"
+      @update:model-value="onInput"
+    >
+      <template
+        v-if="appConfig.core?.is_thai_year"
+        #year="{ value }"
+      >
+        {{ value + 543 }}
+      </template>
+      <template
+        v-if="appConfig.core?.is_thai_year"
+        #year-overlay-value="{ value }"
+      >
+        {{ value + 543 }}
+      </template>
+      <template #dp-input="{ value: innerValue }">
+        <Input
+          :trailing-icon="innerValue ? void 0 : 'i-heroicons-calendar-days'"
+          type="text"
+          :model-value="innerValue"
+          :placeholder="wrapperProps.placeholder"
+          :readonly="true"
+          :ui="{
+  base: 'cursor-pointer select-none',
+  trailingIcon: 'cursor-pointer'
+}"
+        />
+      </template>
+    </Datepicker>
+  </FieldWrapper>
+</template>
+
+<script setup>
+import Datepicker from "@vuepic/vue-datepicker";
+import FieldWrapper from "#core/components/Form/FieldWrapper.vue";
+import { TimeHelper, ref, useFieldHOC, useAppConfig } from "#imports";
+import "@vuepic/vue-datepicker/dist/main.css";
+const props = defineProps({
+  isDisabledMultiCalendar: { type: Boolean, required: false },
+  disabledTime: { type: Boolean, required: false },
+  minDate: { type: [Date, String], required: false },
+  maxDate: { type: [Date, String], required: false },
+  startTime: { type: Object, required: false },
+  minTime: { type: Object, required: false },
+  maxTime: { type: Object, required: false },
+  isReturnISO: { type: Boolean, required: false },
+  form: { type: Object, required: false },
+  name: { type: String, required: true },
+  errorMessage: { type: String, required: false },
+  label: { type: null, required: false },
+  description: { type: String, required: false },
+  hint: { type: String, required: false },
+  rules: { type: null, required: false },
+  autoFocus: { type: Boolean, required: false },
+  placeholder: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  required: { type: Boolean, required: false },
+  help: { type: String, required: false },
+  ui: { type: null, required: false }
+});
+const appConfig = useAppConfig();
+const {
+  value,
+  wrapperProps
+} = useFieldHOC(props);
+const innerValueRef = ref([]);
+const format = (date) => {
+  if (props.disabledTime) {
+    return date.length > 0 ? TimeHelper.displayDate(date[0]) + " - " + TimeHelper.displayDate(date[1] ?? date[0]) : "";
+  }
+  return date.length > 0 ? TimeHelper.displayDateTime(date[0]) + " - " + TimeHelper.displayDateTime(date[1] ?? date[0]) : "";
+};
+const onInput = (_value) => {
+  if (_value === null) {
+    value.value = null;
+    return;
+  }
+  if (props.disabledTime && !props.isReturnISO) {
+    value.value = {
+      start: TimeHelper.getDateFormTime(_value[0]),
+      end: TimeHelper.getDateFormTime(_value[1] || _value[0])
+    };
+  } else {
+    value.value = {
+      start: _value[0],
+      end: _value[1] || _value[0]
+    };
+  }
+};
+</script>

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

@@ -0,0 +1,4 @@
+import '@vuepic/vue-datepicker/dist/main.css';
+import type { IDateTimeRangeFieldProps } from './date_range_time_field.types.js';
+declare const _default: import("vue").DefineComponent<IDateTimeRangeFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IDateTimeRangeFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -1,6 +1,7 @@
 import type { Component } from '@nuxt/schema';
 import type { FormContext } from 'vee-validate';
 import type { IUploadDropzoneAutoField } from './InputUploadDropzoneAuto/types.js';
+import type { IDateTimeRangeField } from './InputDateTimeRange/date_range_time_field.types.js';
 import type { ITextField } from '#core/components/Form/InputText/types';
 import type { ITextareaField } from '#core/components/Form/InputTextarea/types';
 import type { IToggleField } from '#core/components/Form/InputToggle/types';
@@ -61,7 +62,7 @@ export interface IFormFieldBase<I extends INPUT_TYPES, P extends IFieldProps, O>
     props: P;
     on?: O;
 }
-export type IFormField = ITextField | INumberField | ITextareaField | IToggleField | ISelectField | ICheckboxField | ISelectMultipleField | IDateTimeField | IUploadDropzoneAutoField | IFormFieldBase<INPUT_TYPES.COMPONENT, any, any>;
+export type IFormField = ITextField | INumberField | ITextareaField | IToggleField | ISelectField | ICheckboxField | ISelectMultipleField | IDateTimeField | IDateTimeRangeField | IUploadDropzoneAutoField | IFormFieldBase<INPUT_TYPES.COMPONENT, any, any>;
 export interface IFileValue {
     url: string;
     path?: string;

package/dist/runtime/styles/main.css

@@ -1 +1 @@
-@import "tailwindcss";@import "@nuxt/ui";@theme static{--font-sans:"Noto Sans Thai","Noto Sans Thai Looped","Public Sans",sans-serif;--color-main:#232c5a;--color-main-50:#f4f4f7;--color-main-100:#e9eaef;--color-main-200:#c8cad6;--color-main-300:#a7abbd;--color-main-400:#656b8c;--color-main-500:#232c5a;--color-main-600:#202851;--color-main-700:#151a36;--color-main-800:#101429;--color-main-900:#0b0d1b;--color-main-950:#0b0d1b;--color-secondary:#ee8b36;--color-secondary-50:#fdf1e7;--color-secondary-100:#f9d6b8;--color-secondary-200:#f5bb89;--color-secondary-300:#f1a05a;--color-secondary-400:#ed852b;--color-secondary-500:#d46b12;--color-secondary-600:#a5540e;--color-secondary-700:#763c0a;--color-secondary-800:#472406;--color-secondary-900:#180c02;--color-info:#0d8cee;--color-info-50:#f3f9fe;--color-info-100:#e7f4fd;--color-info-200:#ebf6ff;--color-info-300:#9ed1f8;--color-info-400:#56aff3;--color-info-500:#0d8cee;--color-info-600:#0c7ed6;--color-info-700:#08548f;--color-info-800:#063f6b;--color-info-900:#042a47;--color-error:#f25555;--color-error-50:#fef7f7;--color-error-100:#feeeee;--color-error-200:#ffdfdf;--color-error-300:#fabbbb;--color-error-400:#f68888;--color-error-500:#f25555;--color-error-600:#da4d4d;--color-error-700:#913333;--color-error-800:#6d2626;--color-error-900:#491a1a;--color-success:#3fb061;--color-success-50:#f5fbf7;--color-success-100:#ecf7ef;--color-success-200:#daeee0;--color-success-300:#b2dfc0;--color-success-400:#79c890;--color-success-500:#3fb061;--color-success-600:#399e57;--color-success-700:#266a3a;--color-success-800:#1c4f2c;--color-success-900:#13351d;--color-warning:#ff9a35;--color-warning-50:#fffaf5;--color-warning-100:#fff5eb;--color-warning-200:#fef1cc;--color-warning-300:#ffd7ae;--color-warning-400:#ffb872;--color-warning-500:#ff9a35;--color-warning-600:#e68b30;--color-warning-700:#995c20;--color-warning-800:#734518;--color-warning-900:#4d2e10}#__nuxt,body,html{@apply w-full h-full}
+@import "tailwindcss";@import "@nuxt/ui";:root{--dp-font-family:inherit!important}@theme static{--font-sans:"Noto Sans Thai","Noto Sans Thai Looped","Public Sans",sans-serif;--color-main:#232c5a;--color-main-50:#f4f4f7;--color-main-100:#e9eaef;--color-main-200:#c8cad6;--color-main-300:#a7abbd;--color-main-400:#656b8c;--color-main-500:#232c5a;--color-main-600:#202851;--color-main-700:#151a36;--color-main-800:#101429;--color-main-900:#0b0d1b;--color-main-950:#0b0d1b;--color-secondary:#ee8b36;--color-secondary-50:#fdf1e7;--color-secondary-100:#f9d6b8;--color-secondary-200:#f5bb89;--color-secondary-300:#f1a05a;--color-secondary-400:#ed852b;--color-secondary-500:#d46b12;--color-secondary-600:#a5540e;--color-secondary-700:#763c0a;--color-secondary-800:#472406;--color-secondary-900:#180c02;--color-info:#0d8cee;--color-info-50:#f3f9fe;--color-info-100:#e7f4fd;--color-info-200:#ebf6ff;--color-info-300:#9ed1f8;--color-info-400:#56aff3;--color-info-500:#0d8cee;--color-info-600:#0c7ed6;--color-info-700:#08548f;--color-info-800:#063f6b;--color-info-900:#042a47;--color-error:#f25555;--color-error-50:#fef7f7;--color-error-100:#feeeee;--color-error-200:#ffdfdf;--color-error-300:#fabbbb;--color-error-400:#f68888;--color-error-500:#f25555;--color-error-600:#da4d4d;--color-error-700:#913333;--color-error-800:#6d2626;--color-error-900:#491a1a;--color-success:#3fb061;--color-success-50:#f5fbf7;--color-success-100:#ecf7ef;--color-success-200:#daeee0;--color-success-300:#b2dfc0;--color-success-400:#79c890;--color-success-500:#3fb061;--color-success-600:#399e57;--color-success-700:#266a3a;--color-success-800:#1c4f2c;--color-success-900:#13351d;--color-warning:#ff9a35;--color-warning-50:#fffaf5;--color-warning-100:#fff5eb;--color-warning-200:#fef1cc;--color-warning-300:#ffd7ae;--color-warning-400:#ffb872;--color-warning-500:#ff9a35;--color-warning-600:#e68b30;--color-warning-700:#995c20;--color-warning-800:#734518;--color-warning-900:#4d2e10}#__nuxt,body,html{@apply w-full h-full}

package/dist/runtime/theme/empty.d.ts

@@ -1,7 +1,7 @@
 export declare const emptyTheme: {
     slots: {
         base: string;
-        icon: string;
+        iconSize: string;
         message: string;
     };
 };

package/dist/runtime/theme/empty.js

@@ -1,7 +1,7 @@
 export const emptyTheme = {
   slots: {
     base: "flex flex-col items-center justify-center py-6 text-gray-400",
-    icon: "text-[72px]",
+    iconSize: "text-[72px]",
     message: "mt-2"
   }
 };

package/package.json

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