@finema/core 3.22.0 → 3.24.0

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

@@ -45,13 +45,10 @@ const props = defineProps({
   readonly: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
   help: { type: String, required: false },
-  ui: { type: null, required: false }
+  ui: { type: null, required: false },
+  containerUi: { type: null, required: false }
 });
-const {
-  value,
-  wrapperProps,
-  handleChange
-} = useFieldHOC(props);
+const { value, wrapperProps, handleChange } = useFieldHOC(props);
 const onChange = (value2) => {
   handleChange(value2);
   emits("change", value2);

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

@@ -21,6 +21,7 @@ const props = defineProps({
   readonly: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
   help: { type: String, required: false },
-  ui: { type: null, required: false }
+  ui: { type: null, required: false },
+  containerUi: { type: null, required: false }
 });
 </script>

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

@@ -4,10 +4,13 @@
     :error-message="undefined"
   >
     <div
-      :class="['inline-flex w-full items-center -space-x-px rounded-lg ring-1', {
-  'ring-error': wrapperProps.errorMessage,
-  'ring-gray-300': !wrapperProps.errorMessage
-}]"
+      :class="[
+  'inline-flex w-full items-center -space-x-px rounded-lg ring-1',
+  {
+    'ring-error': wrapperProps.errorMessage,
+    'ring-gray-300': !wrapperProps.errorMessage
+  }
+]"
     >
       <p class="pl-3 text-lg">
         {{ currencySymbol }}
@@ -46,7 +49,7 @@
     </div>
     <p
       v-if="wrapperProps.errorMessage"
-      class="text-error mt-2"
+      class="mt-2 text-error"
     >
       {{ wrapperProps.errorMessage }}
     </p>
@@ -90,13 +93,10 @@ const props = defineProps({
   readonly: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
   help: { type: String, required: false },
-  ui: { type: null, required: false }
+  ui: { type: null, required: false },
+  containerUi: { type: null, required: false }
 });
-const {
-  value,
-  wrapperProps,
-  handleChange
-} = useFieldHOC(props);
+const { value, wrapperProps, handleChange } = useFieldHOC(props);
 const currencySymbol = computed(() => props.options.find((item) => item.value === value.value.currency)?.symbol);
 const updateValue = (payload) => {
   const newValue = {

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

@@ -9,6 +9,8 @@ export interface IDateTimeFieldProps extends IFieldProps {
     disabledTime?: boolean;
     minDate?: Date | string;
     maxDate?: Date | string;
+    startDate?: Date | string;
+    focusStartDate?: boolean;
     startTime?: ITimeOption;
     minTime?: ITimeOption;
     maxTime?: ITimeOption;
@@ -20,5 +22,5 @@ export interface IDateTimeFieldProps extends IFieldProps {
     autoApply?: boolean;
 }
 export type IDateTimeField = IFormFieldBase<INPUT_TYPES.DATE_TIME | INPUT_TYPES.DATE, IDateTimeFieldProps, {
-    change: (value: string) => void;
+    change?: (value: string) => void;
 }>;

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

@@ -3,8 +3,8 @@
     <Datepicker
       :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'"
+      :cancel-text="messages.common.cancel"
+      :select-text="messages.common.select"
       :locale="appConfig.core?.locale"
       :enable-time-picker="!disabledTime"
       :auto-apply="autoApply && disabledTime"
@@ -16,6 +16,8 @@
       :max-time="maxTime"
       :six-weeks="true"
       :start-time="startTime"
+      :start-date="startDate"
+      :focus-start-date="focusStartDate"
       :teleport="teleport"
       :required="required"
       :flow="flowCalendar"
@@ -72,18 +74,10 @@
 </template>
 
 <script setup>
+import { useCoreMessages } from "#core/composables/useMessages";
 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";
@@ -93,6 +87,8 @@ const props = defineProps({
   disabledTime: { type: Boolean, required: false },
   minDate: { type: [Date, String], required: false },
   maxDate: { type: [Date, String], required: false },
+  startDate: { type: [Date, String], required: false },
+  focusStartDate: { type: Boolean, required: false },
   startTime: { type: Object, required: false },
   minTime: { type: Object, required: false },
   maxTime: { type: Object, required: false },
@@ -115,15 +111,13 @@ const props = defineProps({
   readonly: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
   help: { type: String, required: false },
-  ui: { type: null, required: false }
+  ui: { type: null, required: false },
+  containerUi: { type: null, required: false }
 });
 const appConfig = useAppConfig();
 const theme = computed(() => useUiConfig(dateTimeTheme, "dateTime")());
 const isShowModal = ref(false);
-const {
-  value,
-  wrapperProps
-} = useFieldHOC(props);
+const { value, wrapperProps } = useFieldHOC(props);
 const innerValue = ref();
 const breakpoints = useBreakpoints(breakpointsTailwind);
 const isMobile = breakpoints.smallerOrEqual("md");
@@ -168,6 +162,7 @@ const onInput = (_value) => {
   }
   emits("change", value.value);
 };
+const { messages } = useCoreMessages();
 </script>
 
 <style scoped>

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

@@ -14,5 +14,5 @@ export interface IDateTimeRangeFieldProps extends IDateTimeFieldProps {
     teleport?: boolean | string | HTMLElement;
 }
 export type IDateTimeRangeField = IFormFieldBase<INPUT_TYPES.DATE_RANGE | INPUT_TYPES.DATE_TIME_RANGE, IDateTimeRangeFieldProps, {
-    change: (value: IDateTimeRangeResponse) => void;
+    change?: (value: IDateTimeRangeResponse) => void;
 }>;

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

@@ -5,8 +5,8 @@
       v-model="innerValueRef"
       :teleport="teleport"
       :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'"
+      :cancel-text="messages.common.cancel"
+      :select-text="messages.common.select"
       :locale="appConfig.core?.locale"
       :format="format"
       :enable-time-picker="!disabledTime"
@@ -52,9 +52,11 @@
       <template #clear-icon="{ clear }">
         <Icon
           :name="clearIcon"
-          :class="theme.clearIcon({
-  class: [ui?.clearIcon]
-})"
+          :class="
+  theme.clearIcon({
+    class: [ui?.clearIcon]
+  })
+"
           @click.stop="clear"
         />
       </template>
@@ -63,6 +65,7 @@
 </template>
 
 <script setup>
+import { useCoreMessages } from "#core/composables/useMessages";
 import Datepicker from "@vuepic/vue-datepicker";
 import FieldWrapper from "#core/components/Form/FieldWrapper.vue";
 import { TimeHelper, ref, useFieldHOC, useAppConfig, computed, useUiConfig, watch, onMounted } from "#imports";
@@ -76,6 +79,8 @@ const props = defineProps({
   disabledTime: { type: Boolean, required: false },
   minDate: { type: [Date, String], required: false },
   maxDate: { type: [Date, String], required: false },
+  startDate: { type: [Date, String], required: false },
+  focusStartDate: { type: Boolean, required: false },
   startTime: { type: Object, required: false },
   minTime: { type: Object, required: false },
   maxTime: { type: Object, required: false },
@@ -97,14 +102,12 @@ const props = defineProps({
   readonly: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
   help: { type: String, required: false },
-  ui: { type: null, required: false }
+  ui: { type: null, required: false },
+  containerUi: { type: null, required: false }
 });
 const appConfig = useAppConfig();
 const theme = computed(() => useUiConfig(dateTimeTheme, "dateTime")());
-const {
-  value,
-  wrapperProps
-} = useFieldHOC(props);
+const { value, wrapperProps } = useFieldHOC(props);
 const innerValueRef = ref([]);
 const initializeValue = () => {
   const currentValue = value.value;
@@ -116,17 +119,21 @@ const initializeValue = () => {
     innerValueRef.value = [];
   }
 };
-watch(value, (newValue) => {
-  if (newValue && (newValue.start || newValue.end)) {
-    const start = typeof newValue.start === "string" ? new Date(newValue.start) : newValue.start;
-    const end = typeof newValue.end === "string" ? new Date(newValue.end) : newValue.end;
-    innerValueRef.value = [start, end];
-  } else if (!newValue) {
-    innerValueRef.value = [];
+watch(
+  value,
+  (newValue) => {
+    if (newValue && (newValue.start || newValue.end)) {
+      const start = typeof newValue.start === "string" ? new Date(newValue.start) : newValue.start;
+      const end = typeof newValue.end === "string" ? new Date(newValue.end) : newValue.end;
+      innerValueRef.value = [start, end];
+    } else if (!newValue) {
+      innerValueRef.value = [];
+    }
+  },
+  {
+    immediate: false
   }
-}, {
-  immediate: false
-});
+);
 onMounted(() => {
   initializeValue();
 });
@@ -155,4 +162,5 @@ const onInput = (_value) => {
   }
   emits("change", value.value);
 };
+const { messages } = useCoreMessages();
 </script>

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

@@ -4,8 +4,8 @@
       :model-value="value"
       :teleport="teleport"
       :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'"
+      :cancel-text="messages.common.cancel"
+      :select-text="messages.common.select"
       :locale="appConfig.core?.locale"
       :format="appConfig.core?.month_format"
       month-picker
@@ -47,9 +47,11 @@
         <Icon
           v-if="value && !wrapperProps.disabled && !wrapperProps.required"
           :name="clearIcon"
-          :class="theme.clearIcon({
-  class: [ui?.clearIcon]
-})"
+          :class="
+  theme.clearIcon({
+    class: [ui?.clearIcon]
+  })
+"
           @click.stop="clear"
         />
       </template>
@@ -58,13 +60,14 @@
 </template>
 
 <script setup>
+import { useCoreMessages } from "#core/composables/useMessages";
 import Datepicker from "@vuepic/vue-datepicker";
 import FieldWrapper from "#core/components/Form/FieldWrapper.vue";
 import { computed, useAppConfig, useFieldHOC, useUiConfig } from "#imports";
 import "@vuepic/vue-datepicker/dist/main.css";
 import { dateTimeTheme } from "#core/theme/dateTime";
 import { format } from "date-fns-tz";
-import * as locales from "date-fns/locale";
+import { th } from "date-fns/locale/th";
 import { addYears } from "date-fns";
 const emits = defineEmits(["change"]);
 const props = defineProps({
@@ -85,14 +88,12 @@ const props = defineProps({
   readonly: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
   help: { type: String, required: false },
-  ui: { type: null, required: false }
+  ui: { type: null, required: false },
+  containerUi: { type: null, required: false }
 });
 const appConfig = useAppConfig();
 const theme = computed(() => useUiConfig(dateTimeTheme, "dateTime")());
-const {
-  value,
-  wrapperProps
-} = useFieldHOC(props);
+const { value, wrapperProps } = useFieldHOC(props);
 const formatDisplay = (date) => {
   if (!date) return "";
   let newDateStr = new Date(date.year, date.month);
@@ -101,7 +102,7 @@ const formatDisplay = (date) => {
     newDateStr = addYears(newDateStr, 543);
   }
   if (appConfig.core?.locale === "th" && appConfig.core?.is_thai_month) {
-    options.locale = locales.th;
+    options.locale = th;
   }
   return format(newDateStr, appConfig.core?.month_format, options);
 };
@@ -109,4 +110,5 @@ const onInput = (date) => {
   value.value = date;
   emits("change", value.value);
 };
+const { messages } = useCoreMessages();
 </script>

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

@@ -6,7 +6,7 @@ export interface IMonthFieldProps extends IFieldProps {
     teleport?: boolean | string | HTMLElement;
 }
 export type IMonthField = IFormFieldBase<INPUT_TYPES.MONTH, IMonthFieldProps, {
-    change: (value: {
+    change?: (value: {
         year: number;
         month: number;
     } | undefined) => void;

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

@@ -47,13 +47,10 @@ const props = defineProps({
   readonly: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
   help: { type: String, required: false },
-  ui: { type: null, required: false }
+  ui: { type: null, required: false },
+  containerUi: { type: null, required: false }
 });
-const {
-  value,
-  wrapperProps,
-  handleChange
-} = useFieldHOC(props);
+const { value, wrapperProps, handleChange } = useFieldHOC(props);
 const onChange = (value2) => {
   handleChange(value2);
   emits("change", value2);

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

@@ -42,13 +42,10 @@ const props = defineProps({
   readonly: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
   help: { type: String, required: false },
-  ui: { type: null, required: false }
+  ui: { type: null, required: false },
+  containerUi: { type: null, required: false }
 });
-const {
-  value,
-  wrapperProps,
-  handleChange
-} = useFieldHOC(props);
+const { value, wrapperProps, handleChange } = useFieldHOC(props);
 const onChange = (newValue) => {
   handleChange(newValue);
   emits("change", newValue);

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

@@ -50,13 +50,10 @@ const props = defineProps({
   readonly: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
   help: { type: String, required: false },
-  ui: { type: null, required: false }
+  ui: { type: null, required: false },
+  containerUi: { type: null, required: false }
 });
-const {
-  value,
-  wrapperProps,
-  handleChange
-} = useFieldHOC(props);
+const { value, wrapperProps, handleChange } = useFieldHOC(props);
 const onChange = (value2) => {
   handleChange(value2);
   emits("change", value2);

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

@@ -24,7 +24,7 @@
           variant="link"
           :icon="clearIcon || 'i-heroicons-x-mark'"
           :padded="false"
-          title="ล้างการค้นหา"
+          :title="messages.common.clearSearch"
           @click="onClear"
         />
       </template>
@@ -33,6 +33,7 @@
 </template>
 
 <script setup>
+import { useCoreMessages } from "#core/composables/useMessages";
 import { useFieldHOC } from "#core/composables/useForm";
 import FieldWrapper from "#core/components/Form/FieldWrapper.vue";
 const emits = defineEmits(["change", "search", "clear"]);
@@ -58,13 +59,10 @@ const props = defineProps({
   readonly: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
   help: { type: String, required: false },
-  ui: { type: null, required: false }
+  ui: { type: null, required: false },
+  containerUi: { type: null, required: false }
 });
-const {
-  value,
-  wrapperProps,
-  handleChange
-} = useFieldHOC(props);
+const { value, wrapperProps, handleChange } = useFieldHOC(props);
 const onInput = (newValue) => {
   handleChange(newValue);
   emits("change", newValue);
@@ -76,4 +74,5 @@ const onClear = () => {
   emits("clear");
   emits("search", "");
 };
+const { messages } = useCoreMessages();
 </script>

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

@@ -39,9 +39,7 @@
           <div class="flex min-w-0 flex-1 items-center gap-x-2 overflow-hidden">
             <component
               :is="selectedOption.component"
-              v-if="
-  componentPosition === 'leading' && selectedOption?.component
-"
+              v-if="componentPosition === 'leading' && selectedOption?.component"
               v-bind="selectedOption.componentProps"
             />
             <span
@@ -63,9 +61,7 @@
             </span>
             <component
               :is="selectedOption.component"
-              v-if="
-  componentPosition === 'trailing' && selectedOption?.component
-"
+              v-if="componentPosition === 'trailing' && selectedOption?.component"
               v-bind="selectedOption.componentProps"
             />
           </div>
@@ -166,17 +162,12 @@ const props = defineProps({
   readonly: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
   help: { type: String, required: false },
-  ui: { type: null, required: false }
+  ui: { type: null, required: false },
+  containerUi: { type: null, required: false }
 });
 const theme = computed(() => useUiConfig(selectMenuTheme, "selectMenu")());
-const {
-  value,
-  wrapperProps,
-  handleChange
-} = useFieldHOC(props);
-const selectedOption = computed(
-  () => props.options.find((item) => item.value === value.value)
-);
+const { value, wrapperProps, handleChange } = useFieldHOC(props);
+const selectedOption = computed(() => props.options.find((item) => item.value === value.value));
 const menuLabelStyle = computed(() => {
   const lines = props.menuLabelLines ?? 1;
   if (lines <= 1) return void 0;

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

@@ -57,9 +57,7 @@
             />
             <component
               :is="getOption(_value)?.component"
-              v-if="
-  componentPosition === 'leading' && getOption(_value)?.component
-"
+              v-if="componentPosition === 'leading' && getOption(_value)?.component"
               v-bind="getOption(_value)?.componentProps"
             />
             <div
@@ -72,9 +70,7 @@
               {{ getOption(_value)?.label ?? _value }}
               <component
                 :is="getOption(_value)?.component"
-                v-if="
-  componentPosition === 'trailing' && getOption(_value)?.component
-"
+                v-if="componentPosition === 'trailing' && getOption(_value)?.component"
                 v-bind="getOption(_value)?.componentProps"
               />
               <Icon
@@ -180,17 +176,12 @@ const props = defineProps({
   readonly: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
   help: { type: String, required: false },
-  ui: { type: null, required: false }
+  ui: { type: null, required: false },
+  containerUi: { type: null, required: false }
 });
 const theme = computed(() => useUiConfig(selectMenuTheme, "select")());
-const {
-  value,
-  wrapperProps,
-  handleChange
-} = useFieldHOC(props);
-const optionByValue = computed(
-  () => new Map(props.options.map((opt) => [opt.value, opt]))
-);
+const { value, wrapperProps, handleChange } = useFieldHOC(props);
+const optionByValue = computed(() => new Map(props.options.map((opt) => [opt.value, opt])));
 const getOption = (_value) => optionByValue.value.get(_value);
 const componentPosition = computed(() => props.componentPosition);
 const menuLabelStyle = computed(() => {
@@ -211,8 +202,6 @@ const onSearch = (value2) => {
   emits("search", value2);
 };
 const handleDelete = (_value) => {
-  value.value = ArrayHelper.toArray(value.value).filter(
-    (item) => item !== _value
-  );
+  value.value = ArrayHelper.toArray(value.value).filter((item) => item !== _value);
 };
 </script>

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

@@ -90,14 +90,11 @@ const props = defineProps({
   readonly: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
   help: { type: String, required: false },
-  ui: { type: null, required: false }
+  ui: { type: null, required: false },
+  containerUi: { type: null, required: false }
 });
 const theme = computed(() => useUiConfig(inputTheme, "input")());
-const {
-  value,
-  wrapperProps,
-  handleChange
-} = useFieldHOC(props);
+const { value, wrapperProps, handleChange } = useFieldHOC(props);
 const showSuggestions = ref(false);
 const selectedSuggestionIndex = ref(-1);
 const suggestionsContainerRef = ref();