@finema/core 1.3.12 → 1.3.14

package/dist/module.json

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

package/dist/module.mjs

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

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

@@ -58,6 +58,19 @@
           v-bind="option.props"
           v-on="option.on ?? {}"
         />
+        <FormInputDateTime
+          v-if="option.type === INPUT_TYPES.DATE_TIME"
+          :form="form"
+          v-bind="option.props"
+          v-on="option.on ?? {}"
+        />
+        <FormInputDateTime
+          v-if="option.type === INPUT_TYPES.DATE"
+          :form="form"
+          v-bind="option.props"
+          :disabled_time="true"
+          v-on="option.on ?? {}"
+        />
       </div>
     </template>
   </div>

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

@@ -0,0 +1,9 @@
+import { type IFieldProps, type IFormFieldBase, type INPUT_TYPES } from '#core/components/Form/types';
+export interface IDateTimeFieldProps extends IFieldProps {
+    disabledTime?: boolean;
+    minDate?: Date | string;
+    maxDate?: Date | string;
+}
+export type IDateTimeField = IFormFieldBase<INPUT_TYPES.DATE_TIME | INPUT_TYPES.DATE, IDateTimeFieldProps, {
+    change: (value: string) => void;
+}>;

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

@@ -0,0 +1,44 @@
+<template>
+  <FieldWrapper v-bind="wrapperProps">
+    <Datepicker
+      v-model="value"
+      :disabled="disabled"
+      cancel-text="ยกเลิก"
+      select-text="เลือก"
+      locale="th"
+      :enable-time-picker="!disabledTime"
+      :placeholder="placeholder || 'เลือกวันที่'"
+      :format="format"
+      :min-date="minDate"
+      :max-date="maxDate"
+      :required="isRequired"
+      @change="handleChange"
+    />
+  </FieldWrapper>
+</template>
+<script lang="ts" setup>
+import Datepicker from '@vuepic/vue-datepicker'
+import FieldWrapper from '#core/components/Form/FieldWrapper.vue'
+import { type IDateTimeFieldProps } from '#core/components/Form/InputDateTime/date_time_field.types'
+import { TimeHelper, useFieldHOC } from '#imports'
+
+const props = withDefaults(defineProps<IDateTimeFieldProps>(), {})
+const emits = defineEmits<(event: 'change', value: string) => void>()
+
+const { value, wrapperProps, onChange, disabled } = useFieldHOC<string>(props)
+
+const format = (date: Date) => {
+  if (props.disabledTime) {
+    return TimeHelper.getDateFormTime(date as any)
+  }
+
+  return TimeHelper.getDateTimeFormTime(date as any)
+}
+
+const handleChange = (e: InputEvent) => {
+  onChange(e)
+  const target = e.target as HTMLInputElement
+
+  emits('change', target?.value)
+}
+</script>

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

@@ -7,6 +7,7 @@ import { type IRadioField } from '#core/components/Form/InputRadio/types';
 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';
 export declare const enum INPUT_TYPES {
     TEXT = "TEXT",
     TEXTAREA = "TEXTAREA",
@@ -16,7 +17,9 @@ export declare const enum INPUT_TYPES {
     TOGGLE = "TOGGLE",
     SELECT = "SELECT",
     RADIO = "RADIO",
-    CHECKBOX = "CHECKBOX"
+    CHECKBOX = "CHECKBOX",
+    DATE_TIME = "DATE_TIME",
+    DATE = "DATE"
 }
 export interface IOption {
     label: string;
@@ -37,7 +40,7 @@ export interface IFieldProps {
     classInputInner?: any;
     placeholder?: string;
     isDisabled?: boolean;
-    isReadOnly?: boolean;
+    isRequired?: boolean;
     isLoading?: boolean;
     help?: string;
     isHideLabel?: boolean;
@@ -53,4 +56,4 @@ export interface IFormFieldBase<I extends INPUT_TYPES, P extends object = never,
     props: IFieldProps & P;
     on?: O;
 }
-export type IFormField = ITextField | IStaticField | ICheckboxField | IRadioField | ISelectField | IToggleField | ITextareaField;
+export type IFormField = ITextField | IStaticField | ICheckboxField | IRadioField | ISelectField | IToggleField | ITextareaField | IDateTimeField;

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

@@ -8,5 +8,7 @@ export var INPUT_TYPES = /* @__PURE__ */ ((INPUT_TYPES2) => {
   INPUT_TYPES2["SELECT"] = "SELECT";
   INPUT_TYPES2["RADIO"] = "RADIO";
   INPUT_TYPES2["CHECKBOX"] = "CHECKBOX";
+  INPUT_TYPES2["DATE_TIME"] = "DATE_TIME";
+  INPUT_TYPES2["DATE"] = "DATE";
   return INPUT_TYPES2;
 })(INPUT_TYPES || {});

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

@@ -13,10 +13,10 @@ export interface IFieldWrapperProps {
     name: string;
 }
 interface IFieldContext<TValue> extends FieldContext<TValue> {
-    isRequired: ComputedRef<boolean>;
+    isRequired: boolean;
     onChange: (e: InputEvent) => void;
     fieldClassName: ComputedRef<any[]>;
-    disabled: ComputedRef<boolean>;
+    disabled: boolean;
     wrapperProps: ComputedRef<IFieldWrapperProps>;
 }
 export declare const useFieldHOC: <TValue = unknown>(newFormProps: IFieldProps, opts?: Partial<FieldOptions<TValue>> | undefined) => IFieldContext<TValue>;

package/dist/runtime/composables/useForm.mjs

@@ -6,7 +6,6 @@ export const useFieldHOC = (newFormProps, opts) => {
     form: newFormProps.form,
     ...opts
   });
-  const isRequired = computed(() => false);
   const onChange = (e) => {
     const target = e.target;
     const newValue = newFormProps.transform ? newFormProps.transform(target.value, field.value, e) : target.value;
@@ -24,17 +23,17 @@ export const useFieldHOC = (newFormProps, opts) => {
   });
   return {
     ...field,
-    isRequired,
+    isRequired: !!newFormProps.isRequired,
     onChange,
     fieldClassName,
-    disabled: computed(() => newFormProps.isDisabled ?? newFormProps.isReadOnly ?? false),
+    disabled: !!newFormProps.isDisabled,
     wrapperProps: computed(() => ({
       label: newFormProps.label,
       errorMessage: field.errorMessage.value,
       className: newFormProps.class,
       classInner: newFormProps.classInner,
       classInputInner: newFormProps.classInputInner,
-      isRequired: isRequired.value,
+      isRequired: newFormProps.isRequired,
       isHideLabel: newFormProps.isHideLabel,
       customErrorMessage: newFormProps.customErrorMessage,
       name: newFormProps.name