@finema/core 3.23.2 → 3.24.0

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

@@ -1,56 +1,59 @@
 <template>
-  <FieldWrapper
-    v-bind="wrapperProps"
-    :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
-}]"
-    >
-      <p class="pl-3 text-lg">
-        {{ currencySymbol }}
-      </p>
-      <InputNumber
-        :model-value="value.value"
-        :disabled="wrapperProps.disabled"
-        :name="name"
-        :placeholder="wrapperProps.placeholder"
-        :autofocus="!!autoFocus"
-        :readonly="readonly"
-        :min="min"
-        :max="max"
-        :step="step"
-        :format-options="formatOptions"
-        :increment="false"
-        :decrement="false"
-        variant="none"
-        @update:model-value="onAmountChange"
-      />
-      <Select
-        :model-value="value.currency"
-        :items="options"
-        :disabled="wrapperProps.disabled"
-        value-key="value"
-        label-key="label"
-        variant="none"
-        size="xl"
-        class="cursor-pointer"
-        @update:model-value="onCurrencyChange"
-      >
-        <template #default="{ modelValue }">
-          {{ options.find((item) => item.value === modelValue)?.label || modelValue }}
-        </template>
-      </Select>
-    </div>
-    <p
-      v-if="wrapperProps.errorMessage"
-      class="text-error mt-2"
-    >
-      {{ wrapperProps.errorMessage }}
-    </p>
-  </FieldWrapper>
+  <FieldWrapper
+    v-bind="wrapperProps"
+    :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
+  }
+]"
+    >
+      <p class="pl-3 text-lg">
+        {{ currencySymbol }}
+      </p>
+      <InputNumber
+        :model-value="value.value"
+        :disabled="wrapperProps.disabled"
+        :name="name"
+        :placeholder="wrapperProps.placeholder"
+        :autofocus="!!autoFocus"
+        :readonly="readonly"
+        :min="min"
+        :max="max"
+        :step="step"
+        :format-options="formatOptions"
+        :increment="false"
+        :decrement="false"
+        variant="none"
+        @update:model-value="onAmountChange"
+      />
+      <Select
+        :model-value="value.currency"
+        :items="options"
+        :disabled="wrapperProps.disabled"
+        value-key="value"
+        label-key="label"
+        variant="none"
+        size="xl"
+        class="cursor-pointer"
+        @update:model-value="onCurrencyChange"
+      >
+        <template #default="{ modelValue }">
+          {{ options.find((item) => item.value === modelValue)?.label || modelValue }}
+        </template>
+      </Select>
+    </div>
+    <p
+      v-if="wrapperProps.errorMessage"
+      class="mt-2 text-error"
+    >
+      {{ wrapperProps.errorMessage }}
+    </p>
+  </FieldWrapper>
 </template>
 
 <script setup>
@@ -93,11 +96,7 @@ const props = defineProps({
   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;

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

@@ -1,90 +1,83 @@
 <template>
-  <FieldWrapper v-bind="wrapperProps">
-    <Datepicker
-      :model-value="innerValue"
-      :disabled="wrapperProps.disabled"
-      :cancel-text="messages.common.cancel"
-      :select-text="messages.common.select"
-      :locale="appConfig.core?.locale"
-      :enable-time-picker="!disabledTime"
-      :auto-apply="autoApply && disabledTime"
-      :placeholder="wrapperProps.placeholder"
-      :format="format"
-      :min-date="minDate"
-      :max-date="maxDate"
-      :min-time="minTime"
-      :max-time="maxTime"
-      :six-weeks="true"
-      :start-time="startTime"
-      :teleport="teleport"
-      :required="required"
-      :flow="flowCalendar"
-      @update:model-value="onInput"
-    >
-      <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>
-      <template #dp-input="{ value: innerValue }">
-        <Input
-          v-if="!readMode"
-          :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="innerValue"
+      :disabled="wrapperProps.disabled"
+      :cancel-text="messages.common.cancel"
+      :select-text="messages.common.select"
+      :locale="appConfig.core?.locale"
+      :enable-time-picker="!disabledTime"
+      :auto-apply="autoApply && disabledTime"
+      :placeholder="wrapperProps.placeholder"
+      :format="format"
+      :min-date="minDate"
+      :max-date="maxDate"
+      :min-time="minTime"
+      :max-time="maxTime"
+      :six-weeks="true"
+      :start-time="startTime"
+      :start-date="startDate"
+      :focus-start-date="focusStartDate"
+      :teleport="teleport"
+      :required="required"
+      :flow="flowCalendar"
+      @update:model-value="onInput"
+    >
+      <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>
+      <template #dp-input="{ value: innerValue }">
+        <Input
+          v-if="!readMode"
+          :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'
-}"
-        />
-        <div
-          v-else
-          class="cursor-pointer rounded-md px-2 py-1 hover:bg-gray-100"
-          :class="classReadMode"
-        >
-          {{ innerValue || "None" }}
-        </div>
-      </template>
-      <template #clear-icon="{ clear }">
-        <Icon
-          v-if="clearable"
-          :name="clearIcon"
+}"
+        />
+        <div
+          v-else
+          class="cursor-pointer rounded-md px-2 py-1 hover:bg-gray-100"
+          :class="classReadMode"
+        >
+          {{ innerValue || "None" }}
+        </div>
+      </template>
+      <template #clear-icon="{ clear }">
+        <Icon
+          v-if="clearable"
+          :name="clearIcon"
           :class="
   theme.clearIcon({
     class: [ui?.clearIcon]
   })
-"
-          @click.stop="clear"
-        />
-      </template>
-    </Datepicker>
-  </FieldWrapper>
+"
+          @click.stop="clear"
+        />
+      </template>
+    </Datepicker>
+  </FieldWrapper>
 </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";
@@ -94,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 },
@@ -122,10 +117,7 @@ const props = defineProps({
 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");
@@ -170,9 +162,7 @@ const onInput = (_value) => {
   }
   emits("change", value.value);
 };
-const {
-  messages
-} = useCoreMessages();
+const { messages } = useCoreMessages();
 </script>
 
 <style scoped>

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

@@ -1,65 +1,67 @@
 <template>
-  <FieldWrapper v-bind="wrapperProps">
-    <Datepicker
-      ref="datepicker"
-      v-model="innerValueRef"
-      :teleport="teleport"
-      :disabled="wrapperProps.disabled"
-      :cancel-text="messages.common.cancel"
-      :select-text="messages.common.select"
-      :locale="appConfig.core?.locale"
-      :format="format"
-      :enable-time-picker="!disabledTime"
-      :placeholder="wrapperProps.placeholder"
-      :min-date="minDate"
-      :max-date="maxDate"
-      :min-time="minTime"
-      :max-time="maxTime"
-      :six-weeks="true"
-      :start-time="startTime"
-      :multi-calendars="!isDisabledMultiCalendar"
-      :required="required"
-      time-picker-inline
-      range
-      :flow="['calendar', 'time']"
-      @update:model-value="onInput"
-    >
-      <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>
-      <template #dp-input="{ value: innerValue }">
-        <Input
-          :trailing-icon="innerValue ? void 0 : 'i-heroicons-calendar-days'"
-          type="text"
-          :model-value="innerValue"
-          :placeholder="wrapperProps.placeholder"
-          :readonly="true"
+  <FieldWrapper v-bind="wrapperProps">
+    <Datepicker
+      ref="datepicker"
+      v-model="innerValueRef"
+      :teleport="teleport"
+      :disabled="wrapperProps.disabled"
+      :cancel-text="messages.common.cancel"
+      :select-text="messages.common.select"
+      :locale="appConfig.core?.locale"
+      :format="format"
+      :enable-time-picker="!disabledTime"
+      :placeholder="wrapperProps.placeholder"
+      :min-date="minDate"
+      :max-date="maxDate"
+      :min-time="minTime"
+      :max-time="maxTime"
+      :six-weeks="true"
+      :start-time="startTime"
+      :multi-calendars="!isDisabledMultiCalendar"
+      :required="required"
+      time-picker-inline
+      range
+      :flow="['calendar', 'time']"
+      @update:model-value="onInput"
+    >
+      <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>
+      <template #dp-input="{ value: innerValue }">
+        <Input
+          :trailing-icon="innerValue ? void 0 : 'i-heroicons-calendar-days'"
+          type="text"
+          :model-value="innerValue"
+          :placeholder="wrapperProps.placeholder"
+          :readonly="true"
           :ui="{
   base: 'cursor-pointer select-none',
   trailingIcon: 'cursor-pointer'
-}"
-        />
-      </template>
-      <template #clear-icon="{ clear }">
-        <Icon
-          :name="clearIcon"
-          :class="theme.clearIcon({
-  class: [ui?.clearIcon]
-})"
-          @click.stop="clear"
-        />
-      </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>
@@ -77,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 },
@@ -103,10 +107,7 @@ const props = defineProps({
 });
 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;
@@ -118,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();
 });
@@ -157,7 +162,5 @@ const onInput = (_value) => {
   }
   emits("change", value.value);
 };
-const {
-  messages
-} = useCoreMessages();
+const { messages } = useCoreMessages();
 </script>

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

@@ -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>
@@ -91,10 +93,7 @@ const props = defineProps({
 });
 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);
@@ -111,7 +110,5 @@ const onInput = (date) => {
   value.value = date;
   emits("change", value.value);
 };
-const {
-  messages
-} = useCoreMessages();
+const { messages } = useCoreMessages();
 </script>

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

@@ -1,24 +1,24 @@
 <template>
-  <FieldWrapper v-bind="wrapperProps">
-    <InputNumber
-      :model-value="value"
-      :disabled="wrapperProps.disabled"
-      :name="name"
-      :placeholder="wrapperProps.placeholder"
-      :autofocus="!!autoFocus"
-      :readonly="readonly"
-      :orientation="orientation"
-      :increment="increment"
-      :decrement="decrement"
-      :min="min"
-      :max="max"
-      :step="step"
-      :disable-wheel-change="disableWheelChange"
-      :format-options="formatOptions"
-      :ui="ui"
-      @update:model-value="onChange"
-    />
-  </FieldWrapper>
+  <FieldWrapper v-bind="wrapperProps">
+    <InputNumber
+      :model-value="value"
+      :disabled="wrapperProps.disabled"
+      :name="name"
+      :placeholder="wrapperProps.placeholder"
+      :autofocus="!!autoFocus"
+      :readonly="readonly"
+      :orientation="orientation"
+      :increment="increment"
+      :decrement="decrement"
+      :min="min"
+      :max="max"
+      :step="step"
+      :disable-wheel-change="disableWheelChange"
+      :format-options="formatOptions"
+      :ui="ui"
+      @update:model-value="onChange"
+    />
+  </FieldWrapper>
 </template>
 
 <script setup>
@@ -50,11 +50,7 @@ const props = defineProps({
   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.d.vue.ts

@@ -5,8 +5,8 @@ declare const __VLS_export: import("vue").DefineComponent<IRadioFieldProps, {},
     onChange?: ((value: any) => any) | undefined;
 }>, {
     variant: "list" | "card" | "table";
-    indicator: "start" | "end" | "hidden";
     orientation: "horizontal" | "vertical";
+    indicator: "start" | "end" | "hidden";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -45,11 +45,7 @@ const props = defineProps({
   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/InputRadio/index.vue.d.ts

@@ -5,8 +5,8 @@ declare const __VLS_export: import("vue").DefineComponent<IRadioFieldProps, {},
     onChange?: ((value: any) => any) | undefined;
 }>, {
     variant: "list" | "card" | "table";
-    indicator: "start" | "end" | "hidden";
     orientation: "horizontal" | "vertical";
+    indicator: "start" | "end" | "hidden";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -53,11 +53,7 @@ const props = defineProps({
   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);