@finema/core 2.8.4 → 2.9.0

package/dist/module.json

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

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

@@ -5,6 +5,7 @@ export interface ITimeOption {
     seconds?: number | string;
 }
 export interface IDateTimeFieldProps extends IFieldProps {
+    clearIcon?: string;
     disabledTime?: boolean;
     minDate?: Date | string;
     maxDate?: Date | string;

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

@@ -1,59 +1,70 @@
 <template>
-  <FieldWrapper v-bind="wrapperProps">
-    <Datepicker
-      :model-value="value"
-      :disabled="wrapperProps.disabled"
-      cancel-text="ยกเลิก"
-      select-text="เลือก"
-      locale="th"
-      :enable-time-picker="!disabledTime"
-      :placeholder="wrapperProps.placeholder"
-      :format="format"
-      :min-date="minDate"
-      :max-date="maxDate"
-      :min-time="minTime"
-      :max-time="maxTime"
-      :start-time="startTime"
-      :required="required"
-      :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"
-          :disabled="wrapperProps.disabled"
-          :model-value="innerValue"
-          :placeholder="wrapperProps.placeholder"
-          :readonly="true"
+  <FieldWrapper v-bind="wrapperProps">
+    <Datepicker
+      :model-value="value"
+      :disabled="wrapperProps.disabled"
+      cancel-text="ยกเลิก"
+      select-text="เลือก"
+      locale="th"
+      :enable-time-picker="!disabledTime"
+      :placeholder="wrapperProps.placeholder"
+      :format="format"
+      :min-date="minDate"
+      :max-date="maxDate"
+      :min-time="minTime"
+      :max-time="maxTime"
+      :start-time="startTime"
+      :required="required"
+      :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"
+          :disabled="wrapperProps.disabled"
+          :model-value="innerValue"
+          :placeholder="wrapperProps.placeholder"
+          :readonly="true"
           :ui="{
   base: 'cursor-pointer select-none',
   trailingIcon: 'cursor-pointer'
-}"
-        />
-      </template>
-    </Datepicker>
-  </FieldWrapper>
+}"
+        />
+      </template>
+      <template #clear-icon="{ clear }">
+        <Icon
+          :name="clearIcon"
+          :class="theme.clearIcon({
+  class: [ui?.clearIcon]
+})"
+          @click.stop="clear"
+        />
+      </template>
+    </Datepicker>
+  </FieldWrapper>
 </template>
 
 <script setup>
 import Datepicker from "@vuepic/vue-datepicker";
 import FieldWrapper from "#core/components/Form/FieldWrapper.vue";
-import { TimeHelper, useAppConfig, useFieldHOC } from "#imports";
+import { computed, TimeHelper, useAppConfig, useFieldHOC, useUiConfig } from "#imports";
 import "@vuepic/vue-datepicker/dist/main.css";
+import { dateTimeTheme } from "#core/theme/dateTime";
 const props = defineProps({
+  clearIcon: { type: String, required: false, default: "ph:x-circle-fill" },
   disabledTime: { type: Boolean, required: false },
   minDate: { type: [Date, String], required: false },
   maxDate: { type: [Date, String], required: false },
@@ -77,6 +88,7 @@ const props = defineProps({
   ui: { type: null, required: false }
 });
 const appConfig = useAppConfig();
+const theme = computed(() => useUiConfig(dateTimeTheme, "dateTime")());
 const {
   value,
   wrapperProps

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

@@ -1,4 +1,6 @@
 import '@vuepic/vue-datepicker/dist/main.css';
 import type { IDateTimeFieldProps } from '#core/components/Form/InputDateTime/date_time_field.types';
-declare const _default: import("vue").DefineComponent<IDateTimeFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IDateTimeFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: import("vue").DefineComponent<IDateTimeFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IDateTimeFieldProps> & Readonly<{}>, {
+    clearIcon: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -47,6 +47,15 @@
 }"
         />
       </template>
+      <template #clear-icon="{ clear }">
+        <Icon
+          :name="clearIcon"
+          :class="theme.clearIcon({
+  class: [ui?.clearIcon]
+})"
+          @click.stop="clear"
+        />
+      </template>
     </Datepicker>
   </FieldWrapper>
 </template>
@@ -54,10 +63,12 @@
 <script setup>
 import Datepicker from "@vuepic/vue-datepicker";
 import FieldWrapper from "#core/components/Form/FieldWrapper.vue";
-import { TimeHelper, ref, useFieldHOC, useAppConfig } from "#imports";
+import { TimeHelper, ref, useFieldHOC, useAppConfig, computed, useUiConfig } from "#imports";
 import "@vuepic/vue-datepicker/dist/main.css";
+import { dateTimeTheme } from "#core/theme/dateTime";
 const props = defineProps({
   isDisabledMultiCalendar: { type: Boolean, required: false },
+  clearIcon: { type: String, required: false, default: "ph:x-circle-fill" },
   disabledTime: { type: Boolean, required: false },
   minDate: { type: [Date, String], required: false },
   maxDate: { type: [Date, String], required: false },
@@ -81,6 +92,7 @@ const props = defineProps({
   ui: { type: null, required: false }
 });
 const appConfig = useAppConfig();
+const theme = computed(() => useUiConfig(dateTimeTheme, "dateTime")());
 const {
   value,
   wrapperProps

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

@@ -1,4 +1,6 @@
 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>;
+declare const _default: import("vue").DefineComponent<IDateTimeRangeFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IDateTimeRangeFieldProps> & Readonly<{}>, {
+    clearIcon: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -0,0 +1,5 @@
+export declare const dateTimeTheme: {
+    slots: {
+        clearIcon: string;
+    };
+};

package/dist/runtime/theme/dateTime.js

@@ -0,0 +1,5 @@
+export const dateTimeTheme = {
+  slots: {
+    clearIcon: "size-4 cursor-pointer text-gray-300 hover:text-gray-200"
+  }
+};

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

@@ -10,3 +10,4 @@ export { formTheme as form } from './form.js';
 export { inputNumberTheme as inputNumber } from './inputNumber.js';
 export { iconsTheme as icons } from './icons.js';
 export { uploadFileDropzoneTheme as uploadFileDropzone } from './uploadFileDropzone.js';
+export { dateTimeTheme as dateTime } from './dateTime.js';

package/dist/runtime/theme/index.js

@@ -10,3 +10,4 @@ export { formTheme as form } from "./form.js";
 export { inputNumberTheme as inputNumber } from "./inputNumber.js";
 export { iconsTheme as icons } from "./icons.js";
 export { uploadFileDropzoneTheme as uploadFileDropzone } from "./uploadFileDropzone.js";
+export { dateTimeTheme as dateTime } from "./dateTime.js";

package/package.json

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