@finema/core 2.61.0 → 3.0.0

package/dist/module.json

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

package/dist/runtime/components/Form/Fields.vue

@@ -25,6 +25,7 @@ import FormInputTextarea from "./InputTextarea/index.vue";
 import FormInputText from "./InputText/index.vue";
 import FormInputSearch from "./InputSearch/index.vue";
 import FormInputNumber from "./InputNumber/index.vue";
+import FormInputCurrency from "./InputCurrency/index.vue";
 import FormInputToggle from "./InputToggle/index.vue";
 import FormInputCheckbox from "./InputCheckbox/index.vue";
 import FormInputSelect from "./InputSelect/index.vue";
@@ -89,6 +90,10 @@ const componentMap = {
     props: {}
   },
   // Example: Map to FormInputText or a specific Number input if exists
+  [INPUT_TYPES.CURRENCY]: {
+    component: FormInputCurrency,
+    props: {}
+  },
   [INPUT_TYPES.PASSWORD]: {
     component: FormInputText,
     props: {

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

@@ -0,0 +1,13 @@
+import type { ICurrencyFieldProps } from '#core/components/Form/InputCurrency/types';
+declare const __VLS_export: import("vue").DefineComponent<ICurrencyFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<ICurrencyFieldProps> & Readonly<{
+    onChange?: ((...args: any[]) => any) | undefined;
+}>, {
+    step: number;
+    options: import("#core/components/Form/InputCurrency/types").SelectOption[];
+    disableWheelChange: boolean;
+    defaultCurrency: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,119 @@
+<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>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import FieldWrapper from "#core/components/Form/FieldWrapper.vue";
+import { useFieldHOC } from "#core/composables/useForm";
+const emits = defineEmits(["change"]);
+const props = defineProps({
+  min: { type: Number, required: false },
+  max: { type: Number, required: false },
+  step: { type: Number, required: false, default: 0.01 },
+  options: { type: Array, required: false, default: () => [
+    {
+      value: "THB",
+      label: "THB",
+      symbol: "\u0E3F"
+    },
+    {
+      value: "USD",
+      label: "USD",
+      symbol: "$"
+    }
+  ] },
+  defaultCurrency: { type: String, required: false, default: "THB" },
+  formatOptions: { type: null, required: false },
+  disableWheelChange: { type: Boolean, required: false, default: false },
+  form: { type: Object, required: false },
+  name: { type: String, required: true },
+  errorMessage: { type: String, required: false },
+  label: { type: null, required: false },
+  description: { type: String, required: false },
+  hint: { type: String, required: false },
+  rules: { type: null, required: false },
+  autoFocus: { type: Boolean, required: false },
+  placeholder: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  required: { type: Boolean, required: false },
+  help: { type: String, required: false },
+  ui: { type: null, required: false }
+});
+const {
+  value,
+  wrapperProps,
+  handleChange
+} = useFieldHOC(props);
+const currencySymbol = computed(() => props.options.find((item) => item.value === value.value.currency)?.symbol);
+const updateValue = (payload) => {
+  const newValue = {
+    ...value.value,
+    ...payload
+  };
+  handleChange(newValue);
+  emits("change", newValue);
+};
+const onAmountChange = (newAmount) => {
+  updateValue({
+    value: newAmount
+  });
+};
+const onCurrencyChange = (newCurrency) => {
+  updateValue({
+    currency: newCurrency
+  });
+};
+</script>

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

@@ -0,0 +1,13 @@
+import type { ICurrencyFieldProps } from '#core/components/Form/InputCurrency/types';
+declare const __VLS_export: import("vue").DefineComponent<ICurrencyFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<ICurrencyFieldProps> & Readonly<{
+    onChange?: ((...args: any[]) => any) | undefined;
+}>, {
+    step: number;
+    options: import("#core/components/Form/InputCurrency/types").SelectOption[];
+    disableWheelChange: boolean;
+    defaultCurrency: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,23 @@
+import type { IFieldProps, IFormFieldBase, INPUT_TYPES } from '#core/components/Form/types';
+import type { SelectMenuItem } from '@nuxt/ui';
+export type SelectOption = SelectMenuItem & {
+    label: string;
+    value: string;
+    symbol: string;
+};
+export interface ICurrencyValue {
+    value: number;
+    currency: string;
+}
+export interface ICurrencyFieldProps extends IFieldProps {
+    min?: number;
+    max?: number;
+    step?: number;
+    options?: SelectOption[];
+    defaultCurrency?: string;
+    formatOptions?: Intl.NumberFormatOptions;
+    disableWheelChange?: boolean;
+}
+export type ICurrencyField = IFormFieldBase<INPUT_TYPES.CURRENCY, ICurrencyFieldProps, {
+    change?: (value: ICurrencyValue) => void;
+}>;

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

@@ -5,6 +5,8 @@ declare const __VLS_export: import("vue").DefineComponent<INumberFieldProps, {},
     onChange?: ((...args: any[]) => any) | undefined;
 }>, {
     orientation: "horizontal" | "vertical";
+    increment: boolean | import("@nuxt/ui").ButtonProps;
+    decrement: boolean | import("@nuxt/ui").ButtonProps;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -8,8 +8,8 @@
       :autofocus="!!autoFocus"
       :readonly="readonly"
       :orientation="orientation"
-      :increment-disabled="incrementDisabled"
-      :decrement-disabled="decrementDisabled"
+      :increment="increment"
+      :decrement="decrement"
       :min="min"
       :max="max"
       :step="step"
@@ -27,8 +27,8 @@ import FieldWrapper from "#core/components/Form/FieldWrapper.vue";
 const emits = defineEmits(["change"]);
 const props = defineProps({
   orientation: { type: String, required: false, default: "vertical" },
-  incrementDisabled: { type: Boolean, required: false },
-  decrementDisabled: { type: Boolean, required: false },
+  increment: { type: Boolean, required: false, skipCheck: true, default: false },
+  decrement: { type: Boolean, required: false, skipCheck: true, default: false },
   min: { type: Number, required: false },
   max: { type: Number, required: false },
   step: { type: Number, required: false },

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

@@ -5,6 +5,8 @@ declare const __VLS_export: import("vue").DefineComponent<INumberFieldProps, {},
     onChange?: ((...args: any[]) => any) | undefined;
 }>, {
     orientation: "horizontal" | "vertical";
+    increment: boolean | import("@nuxt/ui").ButtonProps;
+    decrement: boolean | import("@nuxt/ui").ButtonProps;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,9 +1,9 @@
 import type { IFieldProps, IFormFieldBase, INPUT_TYPES } from '#core/components/Form/types';
-import type { InputNumberProps } from '#ui/components/InputNumber.vue';
+import type { InputNumberProps } from '@nuxt/ui';
 export interface INumberFieldProps extends IFieldProps {
     orientation?: InputNumberProps['orientation'];
-    incrementDisabled?: InputNumberProps['incrementDisabled'];
-    decrementDisabled?: InputNumberProps['decrementDisabled'];
+    increment?: InputNumberProps['increment'];
+    decrement?: InputNumberProps['decrement'];
     min?: InputNumberProps['min'];
     max?: InputNumberProps['max'];
     step?: InputNumberProps['step'];

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

@@ -1,5 +1,5 @@
 import type { IFieldProps, IFormFieldBase, INPUT_TYPES } from '#core/components/Form/types';
-import type { SelectMenuItem } from '#ui/components/SelectMenu.vue';
+import type { SelectMenuItem } from '@nuxt/ui';
 export type SelectOption = SelectMenuItem & {
     label?: string;
     value?: any;

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

@@ -18,10 +18,12 @@ import type { IRadioField } from '#core/components/Form/InputRadio/types';
 import type { IWYSIWYGField } from '#core/components/Form/InputWYSIWYG/types';
 import type { IComponentField } from '#core/components/Form/InputComponent/types';
 import type { ITagsField } from '#core/components/Form/InputTags/types';
+import type { ICurrencyField } from '#core/components/Form/InputCurrency/types';
 export declare enum INPUT_TYPES {
     TEXT = "TEXT",
     SEARCH = "SEARCH",
     NUMBER = "NUMBER",
+    CURRENCY = "CURRENCY",
     TEXTAREA = "TEXTAREA",
     PASSWORD = "PASSWORD",
     EMAIL = "EMAIL",
@@ -73,7 +75,7 @@ export interface IFormFieldBase<I extends INPUT_TYPES, P extends IFieldProps, O>
     props: P;
     on?: O;
 }
-export type IFormField = ITextField | ISearchField | INumberField | ITextareaField | IToggleField | ISelectField | ICheckboxField | ISelectMultipleField | IRadioField | IDateTimeField | ITimeField | IMonthField | IDateTimeRangeField | IUploadDropzoneField | IUploadDropzoneAutoField | IWYSIWYGField | IComponentField | ITagsField | IFormFieldBase<INPUT_TYPES.COMPONENT, any, any>;
+export type IFormField = ITextField | ISearchField | INumberField | ICurrencyField | ITextareaField | IToggleField | ISelectField | ICheckboxField | ISelectMultipleField | IRadioField | IDateTimeField | ITimeField | IMonthField | IDateTimeRangeField | IUploadDropzoneField | IUploadDropzoneAutoField | IWYSIWYGField | IComponentField | ITagsField | IFormFieldBase<INPUT_TYPES.COMPONENT, any, any>;
 export interface IFileValue {
     url: string;
     path?: string;

package/dist/runtime/components/Form/types.js

@@ -2,6 +2,7 @@ export var INPUT_TYPES = /* @__PURE__ */ ((INPUT_TYPES2) => {
   INPUT_TYPES2["TEXT"] = "TEXT";
   INPUT_TYPES2["SEARCH"] = "SEARCH";
   INPUT_TYPES2["NUMBER"] = "NUMBER";
+  INPUT_TYPES2["CURRENCY"] = "CURRENCY";
   INPUT_TYPES2["TEXTAREA"] = "TEXTAREA";
   INPUT_TYPES2["PASSWORD"] = "PASSWORD";
   INPUT_TYPES2["EMAIL"] = "EMAIL";

package/dist/runtime/utils/TimeHelper.d.ts

@@ -1,4 +1,15 @@
 export declare class TimeHelper {
+    static getConfig: () => {
+        dateFormat: string;
+        dateTimeFormat: string;
+        dateTimeFormatDisplay: string;
+        dateFormatDisplay: string;
+        timeFormat: string;
+        isThaiYear: boolean;
+        isThaiMonth: boolean;
+        timeZone: string;
+        locale: string;
+    };
     static thaiFormat: (dateStr: Date, formatStr: string, forceThai?: boolean) => string;
     static displayDate: (time: string | Date | null | undefined) => string | null;
     static displayDateTime: (time: string | Date | null | undefined) => string | null;

package/dist/runtime/utils/TimeHelper.js

@@ -2,36 +2,41 @@ import { addYears, format, formatISO, isDate, isValid } from "date-fns";
 import * as locales from "date-fns/locale";
 import { formatInTimeZone } from "date-fns-tz";
 import { useCoreConfig } from "#core/composables/useConfig";
-const dateFormat = useCoreConfig().date_format_system;
-const dateFormatDisplay = useCoreConfig().date_format;
-const dateTimeFormat = useCoreConfig().date_time_format_system;
-const dateTimeFormatDisplay = useCoreConfig().date_time_format;
-const timeFormat = useCoreConfig().time_format;
-const isThaiYear = useCoreConfig().is_thai_year;
-const isThaiMonth = useCoreConfig().is_thai_month;
-const timeZone = useCoreConfig().time_zone;
-const locale = useCoreConfig().locale;
 const getTime = (time) => {
   return isDate(time) ? time : new Date(time);
 };
 export class TimeHelper {
+  static getConfig = () => {
+    const config = useCoreConfig();
+    return {
+      dateFormat: config.date_format_system,
+      dateTimeFormat: config.date_time_format_system,
+      dateTimeFormatDisplay: config.date_time_format,
+      dateFormatDisplay: config.date_format,
+      timeFormat: config.time_format,
+      isThaiYear: config.is_thai_year,
+      isThaiMonth: config.is_thai_month,
+      timeZone: config.time_zone,
+      locale: config.locale
+    };
+  };
   static thaiFormat = (dateStr, formatStr, forceThai = false) => {
     let newDateStr = dateStr;
     const options = {};
-    if (isThaiYear || forceThai) {
+    if (this.getConfig().isThaiYear || forceThai) {
       newDateStr = addYears(dateStr, 543);
     }
-    if (isThaiMonth || forceThai) {
+    if (this.getConfig().isThaiMonth || forceThai) {
       options.locale = locales.th;
     }
-    return formatInTimeZone(newDateStr, timeZone, formatStr, options);
+    return formatInTimeZone(newDateStr, this.getConfig().timeZone, formatStr, options);
   };
   static displayDate = (time) => {
     if (!time) {
       return null;
     }
     const parsedTime = getTime(time);
-    const newTime = locale === "th" ? TimeHelper.thaiFormat(parsedTime, dateFormatDisplay) : format(parsedTime, dateFormatDisplay);
+    const newTime = this.getConfig().locale === "th" ? TimeHelper.thaiFormat(parsedTime, this.getConfig().dateFormatDisplay) : format(parsedTime, this.getConfig().dateFormatDisplay);
     return isValid(parsedTime) ? newTime : time;
   };
   static displayDateTime = (time) => {
@@ -39,7 +44,7 @@ export class TimeHelper {
       return null;
     }
     const parsedTime = getTime(time);
-    const newTime = locale === "th" ? TimeHelper.thaiFormat(parsedTime, dateTimeFormatDisplay) : format(parsedTime, dateTimeFormatDisplay);
+    const newTime = this.getConfig().locale === "th" ? TimeHelper.thaiFormat(parsedTime, this.getConfig().dateTimeFormatDisplay) : format(parsedTime, this.getConfig().dateTimeFormatDisplay);
     return isValid(parsedTime) ? newTime : time;
   };
   static displayDateThai = (time) => {
@@ -47,7 +52,7 @@ export class TimeHelper {
       return null;
     }
     const parsedTime = getTime(time);
-    const newTime = TimeHelper.thaiFormat(parsedTime, dateFormatDisplay, true);
+    const newTime = TimeHelper.thaiFormat(parsedTime, this.getConfig().dateFormatDisplay, true);
     return isValid(parsedTime) ? newTime : time;
   };
   static displayDateTimeThai = (time) => {
@@ -55,7 +60,7 @@ export class TimeHelper {
       return null;
     }
     const parsedTime = getTime(time);
-    const newTime = TimeHelper.thaiFormat(parsedTime, dateTimeFormatDisplay, true);
+    const newTime = TimeHelper.thaiFormat(parsedTime, this.getConfig().dateTimeFormatDisplay, true);
     return isValid(parsedTime) ? newTime : time;
   };
   static displayDateRange = (startDate, endDate) => {
@@ -67,8 +72,8 @@ export class TimeHelper {
     }
     const parsedStartDate = getTime(startDate);
     const parsedEndDate = getTime(endDate);
-    const newStartDate = TimeHelper.thaiFormat(parsedStartDate, dateFormatDisplay);
-    const newEndDate = TimeHelper.thaiFormat(parsedEndDate, dateFormatDisplay);
+    const newStartDate = TimeHelper.thaiFormat(parsedStartDate, this.getConfig().dateFormatDisplay);
+    const newEndDate = TimeHelper.thaiFormat(parsedEndDate, this.getConfig().dateFormatDisplay);
     return {
       startDate: isValid(parsedStartDate) ? newStartDate : startDate,
       endDate: isValid(parsedEndDate) ? newEndDate : endDate
@@ -80,7 +85,7 @@ export class TimeHelper {
     }
     try {
       const parsedTime = getTime(time);
-      const newTime = formatInTimeZone(parsedTime, "UTC", dateTimeFormat);
+      const newTime = formatInTimeZone(parsedTime, "UTC", this.getConfig().dateTimeFormat);
       return isValid(parsedTime) ? newTime : time;
     } catch (e) {
       return time.toString();
@@ -92,16 +97,16 @@ export class TimeHelper {
     }
     try {
       const parsedTime = getTime(time);
-      const newTime = formatInTimeZone(parsedTime, timeZone, dateTimeFormat);
+      const newTime = formatInTimeZone(parsedTime, this.getConfig().timeZone, this.getConfig().dateTimeFormat);
       return isValid(parsedTime) ? newTime : time;
     } catch (e) {
       return time.toString();
     }
   };
-  static getCurrentDate = (customFormat = dateFormat) => {
+  static getCurrentDate = (customFormat = this.getConfig().dateFormat) => {
     return format(/* @__PURE__ */ new Date(), customFormat);
   };
-  static getDateFormTime = (time, customFormat = dateFormat) => {
+  static getDateFormTime = (time, customFormat = this.getConfig().dateFormat) => {
     if (!time) {
       return null;
     }
@@ -109,7 +114,7 @@ export class TimeHelper {
     const newTime = format(parsedTime, customFormat);
     return isValid(parsedTime) ? newTime : time;
   };
-  static getDateFormTimeWithLocal = (time, customFormat = dateFormat) => {
+  static getDateFormTimeWithLocal = (time, customFormat = this.getConfig().dateFormat) => {
     if (!time) {
       return null;
     }
@@ -127,7 +132,7 @@ export class TimeHelper {
     }
     try {
       const parsedTime = getTime(time);
-      const testTime = format(parsedTime, dateTimeFormat);
+      const testTime = format(parsedTime, this.getConfig().dateTimeFormat);
       if (!isValid(parsedTime) || testTime === "Invalid Date") {
         return time;
       }
@@ -141,7 +146,7 @@ export class TimeHelper {
       return null;
     }
     const parsedTime = getTime(time);
-    const newTime = format(parsedTime, dateTimeFormat);
+    const newTime = format(parsedTime, this.getConfig().dateTimeFormat);
     return isValid(parsedTime) ? newTime : time;
   };
   static getTimeFormTime = (time) => {
@@ -149,11 +154,11 @@ export class TimeHelper {
       return null;
     }
     const parsedTime = getTime(time);
-    const newTime = format(parsedTime, timeFormat);
+    const newTime = format(parsedTime, this.getConfig().timeFormat);
     return isValid(parsedTime) ? newTime : time;
   };
   static getCurrentDateTime = () => {
-    return format(/* @__PURE__ */ new Date(), dateTimeFormat);
+    return format(/* @__PURE__ */ new Date(), this.getConfig().dateTimeFormat);
   };
   static toDate = (str) => {
     if (!str) {

package/package.json

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