@finema/core 2.61.1 → 3.0.1

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "2.61.1",
+  "version": "3.0.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 = "2.61.1";
+const version = "3.0.1";
 
 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/InputMonth/index.vue

@@ -1,60 +1,60 @@
 <template>
-  <FieldWrapper v-bind="wrapperProps">
-    <Datepicker
-      :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'"
-      :locale="appConfig.core?.locale"
-      :format="appConfig.core?.month_format"
-      month-picker
-      :placeholder="wrapperProps.placeholder"
-      :min-date="minDate"
-      :max-date="maxDate"
-      :required="wrapperProps.required"
-      :clearable="true"
-      :always-clearable="true"
-      @update:model-value="onInput"
-    >
-      <template
-        v-if="appConfig.core?.is_thai_year"
-        #year="{ year }"
-      >
-        {{ year + 543 }}
-      </template>
-      <template
-        v-if="appConfig.core?.is_thai_year"
-        #year-overlay-value="{ value }"
-      >
-        {{ value + 543 }}
-      </template>
-      <template #dp-input>
-        <Input
-          :trailing-icon="!wrapperProps.required && value ? void 0 : 'i-heroicons-calendar-days'"
-          type="text"
-          :disabled="wrapperProps.disabled"
-          :model-value="formatDisplay(value)"
-          :placeholder="wrapperProps.placeholder"
-          :readonly="true"
+  <FieldWrapper v-bind="wrapperProps">
+    <Datepicker
+      :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'"
+      :locale="appConfig.core?.locale"
+      :format="appConfig.core?.month_format"
+      month-picker
+      :placeholder="wrapperProps.placeholder"
+      :min-date="minDate"
+      :max-date="maxDate"
+      :required="wrapperProps.required"
+      :clearable="true"
+      :always-clearable="true"
+      @update:model-value="onInput"
+    >
+      <template
+        v-if="appConfig.core?.locale === 'th' && appConfig.core?.is_thai_year"
+        #year="{ year }"
+      >
+        {{ year + 543 }}
+      </template>
+      <template
+        v-if="appConfig.core?.locale === 'th' && appConfig.core?.is_thai_year"
+        #year-overlay-value="{ value }"
+      >
+        {{ value + 543 }}
+      </template>
+      <template #dp-input>
+        <Input
+          :trailing-icon="!wrapperProps.required && value ? void 0 : 'i-heroicons-calendar-days'"
+          type="text"
+          :disabled="wrapperProps.disabled"
+          :model-value="formatDisplay(value)"
+          :placeholder="wrapperProps.placeholder"
+          :readonly="true"
           :ui="{
   base: 'cursor-pointer select-none',
   trailingIcon: 'cursor-pointer'
-}"
-        />
-      </template>
-      <template #clear-icon="{ clear }">
-        <Icon
-          v-if="value && !wrapperProps.disabled && !wrapperProps.required"
-          :name="clearIcon"
+}"
+        />
+      </template>
+      <template #clear-icon="{ clear }">
+        <Icon
+          v-if="value && !wrapperProps.disabled && !wrapperProps.required"
+          :name="clearIcon"
           :class="theme.clearIcon({
   class: [ui?.clearIcon]
-})"
-          @click.stop="clear"
-        />
-      </template>
-    </Datepicker>
-  </FieldWrapper>
+})"
+          @click.stop="clear"
+        />
+      </template>
+    </Datepicker>
+  </FieldWrapper>
 </template>
 
 <script setup>
@@ -97,10 +97,10 @@ const formatDisplay = (date) => {
   if (!date) return "";
   let newDateStr = new Date(date.year, date.month);
   const options = {};
-  if (appConfig.core?.is_thai_year) {
+  if (appConfig.core?.locale === "th" && appConfig.core?.is_thai_year) {
     newDateStr = addYears(newDateStr, 543);
   }
-  if (appConfig.core?.is_thai_month) {
+  if (appConfig.core?.locale === "th" && appConfig.core?.is_thai_month) {
     options.locale = locales.th;
   }
   return format(newDateStr, appConfig.core?.month_format, options);

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/package.json

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