@finema/core 3.12.0 → 3.13.1

package/dist/module.json

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

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

@@ -1,6 +1,102 @@
 <template>
   <FieldWrapper v-bind="wrapperProps">
+    <Drawer
+      v-if="isMobile"
+      v-model:open="isShowModal"
+    >
+      <Input
+        v-if="!readMode"
+        :trailing-icon="innerValue ? void 0 : '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' ? '\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01' : 'Cancel'"
+          :select-text="appConfig.core?.locale === 'th' ? '\u0E15\u0E01\u0E25\u0E07' : 'Select'"
+          :locale="appConfig.core?.locale"
+          :enable-time-picker="!disabledTime"
+          :placeholder="wrapperProps.placeholder"
+          :format="format"
+          :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) }}
+              </p>
+
+              <div class="flex items-center space-x-2">
+                <Button
+                  color="neutral"
+                  variant="subtle"
+                  @click="closePicker;
+  isShowModal = false"
+                >
+                  {{ appConfig.core?.locale === "th" ? "\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01" : "Cancel" }}
+                </Button>  <Button
+                  @click="selectDate;
+  isShowModal = false"
+                >
+                  {{ appConfig.core?.locale === "th" ? "\u0E15\u0E01\u0E25\u0E07" : "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
+      v-else
       :model-value="innerValue"
       :disabled="wrapperProps.disabled"
       :cancel-text="appConfig.core?.locale === 'th' ? '\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01' : 'Cancel'"
@@ -48,10 +144,10 @@
         />
         <div
           v-else
-          class="cursor-pointer p-1 hover:bg-gray-100"
+          class="cursor-pointer rounded-md px-2 py-1 hover:bg-gray-100"
           :class="classReadMode"
         >
-          {{ innerValue || "none" }}
+          {{ innerValue || "None" }}
         </div>
       </template>
       <template #clear-icon="{ clear }">
@@ -74,6 +170,7 @@ import FieldWrapper from "#core/components/Form/FieldWrapper.vue";
 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";
 const emits = defineEmits(["change"]);
 const props = defineProps({
   clearIcon: { type: String, required: false, default: "ph:x-circle-fill" },
@@ -105,11 +202,14 @@ const props = defineProps({
 });
 const appConfig = useAppConfig();
 const theme = computed(() => useUiConfig(dateTimeTheme, "dateTime")());
+const isShowModal = ref(false);
 const {
   value,
   wrapperProps
 } = useFieldHOC(props);
 const innerValue = ref();
+const breakpoints = useBreakpoints(breakpointsTailwind);
+const isMobile = breakpoints.smallerOrEqual("md");
 const initializeValue = () => {
   const currentValue = value.value;
   if (currentValue) {
@@ -137,6 +237,7 @@ const format = (date) => {
   return TimeHelper.displayDateTime(date);
 };
 const onInput = (_value) => {
+  console.log(_value);
   if (props.disabledTime && !props.isReturnISO) {
     value.value = TimeHelper.getDateFormTime(_value);
   } else {
@@ -145,3 +246,7 @@ const onInput = (_value) => {
   emits("change", value.value);
 };
 </script>
+
+<style scoped>
+:deep(.dp__calendar_item){display:flex;justify-content:center;text-align:center}
+</style>

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

@@ -148,8 +148,9 @@ const onChange = (value2) => {
     showSuggestions.value = true;
     selectedSuggestionIndex.value = -1;
   }
-  handleChange(value2);
-  emits("change", value2);
+  const trimmedValue = typeof value2 === "string" ? value2.trim() : value2;
+  handleChange(trimmedValue);
+  emits("change", trimmedValue);
 };
 const filteredSuggestions = computed(() => {
   if (!props.suggestions || !value.value) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "3.12.0",
+  "version": "3.13.1",
   "repository": "https://gitlab.finema.co/finema/ui-kit",
   "license": "MIT",
   "author": "Finema Dev Core Team",
@@ -44,7 +44,7 @@
     "@iconify-json/ph": "^1.2.2",
     "@iconify-json/svg-spinners": "^1.2.2",
     "@nuxt/kit": "^4.1.3",
-    "@nuxt/ui": "^4.4.0",
+    "@nuxt/ui": "^4.5.0",
     "@pinia/nuxt": "^0.11.0",
     "@tailwindcss/typography": "^0.5.0-alpha.3",
     "@tiptap/extension-text-align": "^3.18.0",
@@ -83,4 +83,4 @@
   "lint-staged": {
     "*": "eslint"
   }
-}
+}