@finema/core 3.14.6 → 3.14.8

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "3.14.6",
+  "version": "3.14.8",
   "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 = "3.14.6";
+const version = "3.14.8";
 
 const nuxtAppOptions = {
   head: {

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

@@ -17,6 +17,7 @@ export interface IDateTimeFieldProps extends IFieldProps {
     readMode?: boolean;
     classReadMode?: string;
     clearable?: boolean;
+    autoApply?: boolean;
 }
 export type IDateTimeField = IFormFieldBase<INPUT_TYPES.DATE_TIME | INPUT_TYPES.DATE, IDateTimeFieldProps, {
     change: (value: string) => void;

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

@@ -1,98 +1,5 @@
 <template>
   <FieldWrapper v-bind="wrapperProps">
-    <!--   <Drawer
-      v-if="isMobile"
-      v-model:open="isShowModal"
-    >
-      <Input
-        v-if="!readMode"
-        :trailing-icon="innerValue ? undefined : 'i-heroicons-calendar-days'"
-        type="text"
-        :disabled="wrapperProps.disabled"
-        :model-value="format(innerValue)"
-        :placeholder="wrapperProps.placeholder"
-        :readonly="true"
-        :ui="{
-          base: 'cursor-pointer select-none',
-          trailingIcon: 'cursor-pointer',
-        }"
-      >
-        <template #trailing>
-          <Icon
-            v-if="clearable && value"
-            :name="clearIcon"
-            :class="theme.clearIcon({
-              class: [ui?.clearIcon, 'mr-0 cursor-pointer'],
-            })"
-            @click.stop="value = null"
-          />
-        </template>
-      </Input>
-      <div
-        v-else
-        class="cursor-pointer rounded-md px-2 py-1 hover:bg-gray-100"
-        :class="classReadMode"
-      >
-        {{ innerValue ? format(innerValue) : 'None' }}
-      </div>
-
-      <template #content>
-        <Datepicker
-          inline
-          :model-value="innerValue"
-          :disabled="wrapperProps.disabled"
-          :cancel-text="appConfig.core?.locale === 'th' ? 'ยกเลิก' : 'Cancel'"
-          :select-text="appConfig.core?.locale === 'th' ? 'ตกลง' : 'Select'"
-          :locale="appConfig.core?.locale"
-          :enable-time-picker="!disabledTime"
-          :placeholder="wrapperProps.placeholder"
-          :format="(format as any)"
-          :min-date="minDate"
-          :max-date="maxDate"
-          :min-time="minTime"
-          :max-time="maxTime"
-          :six-weeks="true"
-          :start-time="startTime"
-          :required="required"
-          :flow="['calendar', 'time']"
-          @update:model-value="onInput"
-        >
-          <template #action-row="{ internalModelValue, selectDate, closePicker }">
-            <div class="flex w-full items-center justify-between">
-              <p>
-                {{ format(internalModelValue as any) }}
-              </p>
-
-              <div class="flex items-center space-x-2">
-                <Button
-                  color="neutral"
-                  variant="subtle"
-                  @click="closePicker; isShowModal = false"
-                >
-                  {{ appConfig.core?.locale === 'th' ? 'ยกเลิก' : 'Cancel' }}
-                </Button>  <Button
-                  @click="selectDate; isShowModal = false"
-                >
-                  {{ appConfig.core?.locale === 'th' ? 'ตกลง' : 'Select' }}
-                </Button>
-              </div>
-            </div>
-          </template>
-          <template
-            v-if="appConfig.core?.locale === 'th' && appConfig.core?.is_thai_year"
-            #year="{ value }"
-          >
-            {{ value + 543 }}
-          </template>
-          <template
-            v-if="appConfig.core?.locale === 'th' && appConfig.core?.is_thai_year"
-            #year-overlay-value="{ value }"
-          >
-            {{ value + 543 }}
-          </template>
-        </Datepicker>
-      </template>
-    </Drawer> -->
     <Datepicker
       :model-value="innerValue"
       :disabled="wrapperProps.disabled"
@@ -100,6 +7,7 @@
       :select-text="appConfig.core?.locale === 'th' ? '\u0E15\u0E01\u0E25\u0E07' : 'Select'"
       :locale="appConfig.core?.locale"
       :enable-time-picker="!disabledTime"
+      :auto-apply="autoApply && disabledTime"
       :placeholder="wrapperProps.placeholder"
       :format="format"
       :min-date="minDate"
@@ -110,7 +18,7 @@
       :start-time="startTime"
       :teleport="teleport"
       :required="required"
-      :flow="['calendar', 'time']"
+      :flow="flowCalendar"
       @update:model-value="onInput"
     >
       <template
@@ -151,9 +59,11 @@
         <Icon
           v-if="clearable"
           :name="clearIcon"
-          :class="theme.clearIcon({
-  class: [ui?.clearIcon]
-})"
+          :class="
+  theme.clearIcon({
+    class: [ui?.clearIcon]
+  })
+"
           @click.stop="clear"
         />
       </template>
@@ -164,7 +74,16 @@
 <script setup>
 import Datepicker from "@vuepic/vue-datepicker";
 import FieldWrapper from "#core/components/Form/FieldWrapper.vue";
-import { computed, TimeHelper, useAppConfig, useFieldHOC, useUiConfig, ref, watch, onMounted } from "#imports";
+import {
+  computed,
+  TimeHelper,
+  useAppConfig,
+  useFieldHOC,
+  useUiConfig,
+  ref,
+  watch,
+  onMounted
+} from "#imports";
 import "@vuepic/vue-datepicker/dist/main.css";
 import { dateTimeTheme } from "#core/theme/dateTime";
 import { breakpointsTailwind, useBreakpoints } from "@vueuse/core";
@@ -182,6 +101,7 @@ const props = defineProps({
   readMode: { type: Boolean, required: false },
   classReadMode: { type: String, required: false },
   clearable: { type: Boolean, required: false, default: true },
+  autoApply: { type: Boolean, required: false },
   form: { type: Object, required: false },
   name: { type: String, required: true },
   errorMessage: { type: String, required: false },
@@ -207,6 +127,9 @@ const {
 const innerValue = ref();
 const breakpoints = useBreakpoints(breakpointsTailwind);
 const isMobile = breakpoints.smallerOrEqual("md");
+const flowCalendar = computed(
+  () => props.autoApply && props.disabledTime ? ["calendar"] : ["calendar", "time"]
+);
 const initializeValue = () => {
   const currentValue = value.value;
   if (currentValue) {
@@ -215,15 +138,19 @@ const initializeValue = () => {
     innerValue.value = void 0;
   }
 };
-watch(value, (newValue) => {
-  if (newValue) {
-    innerValue.value = typeof newValue === "string" ? new Date(newValue) : newValue;
-  } else {
-    innerValue.value = void 0;
+watch(
+  value,
+  (newValue) => {
+    if (newValue) {
+      innerValue.value = typeof newValue === "string" ? new Date(newValue) : newValue;
+    } else {
+      innerValue.value = void 0;
+    }
+  },
+  {
+    immediate: false
   }
-}, {
-  immediate: false
-});
+);
 onMounted(() => {
   initializeValue();
 });
@@ -234,7 +161,6 @@ const format = (date) => {
   return TimeHelper.displayDateTime(date);
 };
 const onInput = (_value) => {
-  console.log(_value);
   if (props.disabledTime && !props.isReturnISO) {
     value.value = TimeHelper.getDateFormTime(_value);
   } else {

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

@@ -83,6 +83,7 @@ const props = defineProps({
   readMode: { type: Boolean, required: false },
   classReadMode: { type: String, required: false },
   clearable: { type: Boolean, required: false },
+  autoApply: { type: Boolean, required: false },
   form: { type: Object, required: false },
   name: { type: String, required: true },
   errorMessage: { type: String, required: false },

package/package.json

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