@finema/core 3.22.0 → 3.23.2

package/dist/module.d.mts

@@ -1,4 +1,5 @@
 import * as _nuxt_schema from '@nuxt/schema';
+import { ICoreMessagesOverride } from '../dist/runtime/locale/index.js';
 
 declare const core: {
     limit_per_page: number;
@@ -15,6 +16,7 @@ declare const core: {
     color: string;
     time_zone: string;
     locale: string;
+    messages: ICoreMessagesOverride;
 };
 
 interface ModuleOptions {

package/dist/module.json

@@ -1,9 +1,9 @@
 {
   "name": "@finema/core",
-  "version": "3.22.0",
+  "version": "3.23.2",
   "configKey": "core",
   "builder": {
-    "@nuxt/module-builder": "1.0.2",
+    "@nuxt/module-builder": "1.0.3",
     "unbuild": "3.6.1"
   }
 }

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 = "3.22.0";
+const version = "3.23.2";
 
 const nuxtAppOptions = {
   head: {
@@ -62,7 +62,9 @@ const core = {
   site_name: "",
   color: "#3675FB",
   time_zone: "Asia/Bangkok",
-  locale: "th"
+  locale: "th",
+  // Override any text the kit renders by itself, e.g. { common: { confirm: 'ยืนยัน' } }
+  messages: {}
 };
 
 const module$1 = defineNuxtModule({
@@ -132,6 +134,17 @@ const module$1 = defineNuxtModule({
       },
       _nuxt.options.build
     );
+    const isInstalledPackage = import.meta.url.includes("node_modules");
+    const runtimeOptimizeDeps = [
+      "date-fns",
+      "date-fns/locale/th",
+      "date-fns-tz",
+      "lodash-es",
+      "url-join",
+      "maska/vue",
+      "@vuepic/vue-datepicker",
+      "@vueuse/components"
+    ].map((dep) => isInstalledPackage ? `${name} > ${dep}` : dep);
     _nuxt.options.vite = defu(
       {
         resolve: {
@@ -153,6 +166,7 @@ const module$1 = defineNuxtModule({
             "axios",
             "tailwind-variants",
             "@vueuse/core",
+            ...runtimeOptimizeDeps,
             "@nuxt/ui > prosemirror-state",
             "@nuxt/ui > prosemirror-transform",
             "@nuxt/ui > prosemirror-model",

package/dist/runtime/components/App.vue

@@ -13,7 +13,7 @@
 
 <script setup>
 import { th } from "@nuxt/ui/locale";
-import UApp from "#ui/components/App";
+import UApp from "#ui/components/App.vue";
 import { useHead } from "#imports";
 import { useCoreConfig } from "#core/composables/useConfig";
 import DevToolsWindow from "#core/components/DevToolsWindow/index.vue";

package/dist/runtime/components/DevToolsWindow/index.vue

@@ -298,7 +298,7 @@ onMounted(() => {
       const currentStyle = devToolsDynamicStyles.value;
       Object.keys(currentStyle).forEach((key) => {
         if (devToolsRef.value) {
-          devToolsRef.value.style[key] = currentStyle[key];
+          devToolsRef.value.style[key] = currentStyle[key] ?? "";
         }
       });
     }

package/dist/runtime/components/Dialog/index.d.vue.ts

@@ -3,9 +3,6 @@ declare const __VLS_export: import("vue").DefineComponent<IDialogMetaItem, {}, {
     close: (args_0: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<IDialogMetaItem> & Readonly<{
     onClose?: ((args_0: boolean) => any) | undefined;
-}>, {
-    confirmText: string;
-    cancelText: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/Dialog/index.vue

@@ -64,21 +64,20 @@ import { computed, useAttrs } from "vue";
 import { useUiIconConfig, useUiConfig } from "../../composables/useConfig";
 import { dialogTheme } from "#core/theme/dialog";
 import { DialogType } from "#core/composables/useDialog";
+import { useCoreMessages } from "#core/composables/useMessages";
 const emits = defineEmits();
-const props = withDefaults(defineProps(), {
-  confirmText: "\u0E15\u0E01\u0E25\u0E07",
-  cancelText: "\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01"
-});
+const props = defineProps();
 const attrs = useAttrs();
+const {
+  messages
+} = useCoreMessages();
 const icons = useUiIconConfig("dialog");
 const propsSafe = computed(() => {
-  if (props.title) {
-    return props;
-  }
+  const source = props.title ? props : attrs;
   return {
-    ...attrs,
-    cancelText: attrs.cancelText || "\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01",
-    confirmText: attrs.confirmText || "\u0E15\u0E01\u0E25\u0E07"
+    ...source,
+    cancelText: source.cancelText || messages.value.common.cancel,
+    confirmText: source.confirmText || messages.value.common.confirm
   };
 });
 const getIcon = computed(() => {

package/dist/runtime/components/Dialog/index.vue.d.ts

@@ -3,9 +3,6 @@ declare const __VLS_export: import("vue").DefineComponent<IDialogMetaItem, {}, {
     close: (args_0: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<IDialogMetaItem> & Readonly<{
     onClose?: ((args_0: boolean) => any) | undefined;
-}>, {
-    confirmText: string;
-    cancelText: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/Empty.d.vue.ts

@@ -7,7 +7,6 @@ type __VLS_Props = {
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     icon: string;
-    message: any;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/Empty.vue

@@ -14,7 +14,7 @@
       :class="theme.message({
   class: [ui?.message]
 })"
-      v-html="message"
+      v-html="message ?? messages.common.empty"
     />
   </div>
 </template>
@@ -23,11 +23,15 @@
 import { computed } from "vue";
 import { useUiConfig } from "#core/composables/useConfig";
 import { emptyTheme } from "#core/theme/empty";
+import { useCoreMessages } from "#core/composables/useMessages";
 const props = defineProps({
-  message: { type: null, required: false, default: "\u0E44\u0E21\u0E48\u0E1E\u0E1A\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25!" },
+  message: { type: null, required: false },
   icon: { type: String, required: false, default: "ph:table-thin" },
   ui: { type: null, required: false },
   class: { type: null, required: false }
 });
 const theme = computed(() => useUiConfig(emptyTheme, "empty")());
+const {
+  messages
+} = useCoreMessages();
 </script>

package/dist/runtime/components/Empty.vue.d.ts

@@ -7,7 +7,6 @@ type __VLS_Props = {
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     icon: string;
-    message: any;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/FlexDeck/index.vue

@@ -1,90 +1,93 @@
 <template>
-  <div>
-    <div
-      v-if="options.isEnabledSearch"
-      class="mb-4 flex justify-end"
-    >
-      <Input
-        v-model="q"
-        icon="i-heroicons-magnifying-glass"
-        :placeholder="options.searchPlaceholder || '\u0E04\u0E49\u0E19\u0E2B\u0E32...'"
-      />
-    </div>
-
-    <div
-      v-if="options.pageOptions && options.isEnableInfiniteScroll"
-      class="mb-4 flex items-center justify-end"
-    >
-      <p class="text-xs text-gray-500">
-        {{ totalInnerRawData }} รายการ จากทั้งหมด {{ totalCountWithComma }} รายการ
-      </p>
-    </div>
-
-    <slot
-      v-if="options.status.isSuccess && options.rawData.length === 0"
-      name="empty-state"
-    >
-      <Empty />
-    </slot>
-
-    <slot
-      v-else-if="options.status.isLoading"
-      name="loading-state"
-    >
-      <Loader
-        :loading="true"
-      />
-    </slot>
-    <slot
-      v-else-if="options.status.isError"
-      name="error-state"
-    >
-      <div
-        class="
-          text-error-400 flex h-[200px] items-center justify-center text-2xl
-        "
-      >
-        {{ StringHelper.getError(options.status.errorData) }}
-      </div>
-    </slot>
-
-    <div
-      v-else
-      :class="containerClass"
-    >
-      <slot
-        v-for="(row, index) in displayData"
-        :key="index"
-        :row="row"
-      />
-      <div ref="bottomEdgeElement" />
-    </div>
-
-    <div
-      v-if="options.pageOptions && !options.isEnableInfiniteScroll && !options.isHidePagination"
-      class="mt-4 flex justify-between px-3"
-    >
-      <p class="text-xs text-gray-500">
-        {{ pageBetween }}  {{ appConfig.core?.locale === "th" ? "\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23 \u0E08\u0E32\u0E01\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14" : "items of total" }}
-        {{ totalCountWithComma }}  {{ appConfig.core?.locale === "th" ? "\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23" : "items" }}
-      </p>
-      <Pagination
-        v-if="options.pageOptions.totalPage > 1"
-        :to="options.isRouteChange ? to : void 0"
-        :default-page="options.pageOptions?.currentPage || 1"
-        :items-per-page="options.pageOptions.limit"
-        :total="options.pageOptions.totalCount"
-        @update:page="onPageChange"
-      />
-    </div>
-  </div>
+  <div>
+    <div
+      v-if="options.isEnabledSearch"
+      class="mb-4 flex justify-end"
+    >
+      <Input
+        v-model="q"
+        icon="i-heroicons-magnifying-glass"
+        :placeholder="options.searchPlaceholder || messages.common.search"
+      />
+    </div>
+
+    <div
+      v-if="options.pageOptions && options.isEnableInfiniteScroll"
+      class="mb-4 flex items-center justify-end"
+    >
+      <p class="text-xs text-gray-500">
+        {{ totalInnerRawData }} {{ messages.pagination.itemsOfTotal }}
+        {{ totalCountWithComma }} {{ messages.pagination.items }}
+      </p>
+    </div>
+
+    <slot
+      v-if="options.status.isSuccess && options.rawData.length === 0"
+      name="empty-state"
+    >
+      <Empty />
+    </slot>
+
+    <slot
+      v-else-if="options.status.isLoading"
+      name="loading-state"
+    >
+      <Loader
+        :loading="true"
+      />
+    </slot>
+    <slot
+      v-else-if="options.status.isError"
+      name="error-state"
+    >
+      <div
+        class="
+          text-error-400 flex h-[200px] items-center justify-center text-2xl
+        "
+      >
+        {{ StringHelper.getError(options.status.errorData) }}
+      </div>
+    </slot>
+
+    <div
+      v-else
+      :class="containerClass"
+    >
+      <slot
+        v-for="(row, index) in displayData"
+        :key="index"
+        :row="row"
+      />
+      <div ref="bottomEdgeElement" />
+    </div>
+
+    <div
+      v-if="options.pageOptions && !options.isEnableInfiniteScroll && !options.isHidePagination"
+      class="mt-4 flex justify-between px-3"
+    >
+      <p class="text-xs text-gray-500">
+        {{ pageBetween }}  {{ messages.pagination.itemsOfTotal }}
+        {{ totalCountWithComma }}  {{ messages.pagination.items }}
+      </p>
+      <Pagination
+        v-if="options.pageOptions.totalPage > 1"
+        :to="options.isRouteChange ? to : void 0"
+        :default-page="options.pageOptions?.currentPage || 1"
+        :items-per-page="options.pageOptions.limit"
+        :total="options.pageOptions.totalCount"
+        @update:page="onPageChange"
+      />
+    </div>
+  </div>
 </template>
 
 <script setup>
+import { useCoreMessages } from "#core/composables/useMessages";
 import { computed, ref, watch } from "vue";
 import { useElementVisibility } from "@vueuse/core";
 import { NumberHelper } from "#core/utils/NumberHelper";
-import { _debounce, useRouter, useWatchChange, useWatchTrue, useAppConfig } from "#imports";
+import { StringHelper } from "#core/utils/StringHelper";
+import { _debounce, useRouter, useWatchChange, useWatchTrue } from "#imports";
 import { useCoreConfig } from "#core/composables/useConfig";
 import Empty from "#core/components/Empty.vue";
 const emits = defineEmits(["pageChange", "search"]);
@@ -100,7 +103,6 @@ const props = defineProps({
 });
 defineSlots();
 const coreConfig = useCoreConfig();
-const appConfig = useAppConfig();
 const router = useRouter();
 const q = ref(props.options?.pageOptions.search ?? "");
 const bottomEdgeElement = ref(null);
@@ -176,4 +178,7 @@ watch(targetElement, (value) => {
 const onPageChange = (page2) => {
   emits("pageChange", page2);
 };
+const {
+  messages
+} = useCoreMessages();
 </script>

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

@@ -1,17 +1,17 @@
 <template>
-  <FormField
-    :label="label"
-    :name="name"
-    :description="description"
-    :hint="hint"
-    :data-testid="name"
-    :help="help"
-    :error="errorMessage"
-    :required="!!required"
-    :ui="containerUi"
-  >
-    <slot />
-  </FormField>
+  <FormField
+    :label="label"
+    :name="name"
+    :description="description"
+    :hint="hint"
+    :data-testid="name"
+    :help="help"
+    :error="errorMessage"
+    :required="!!required"
+    :ui="containerUi"
+  >
+    <slot />
+  </FormField>
 </template>
 
 <script setup>
@@ -30,6 +30,6 @@ defineProps({
   required: { type: Boolean, required: false },
   help: { type: String, required: false },
   ui: { type: null, required: false },
-  containerUi: { type: null, required: false }
+  containerUi: { type: Object, required: false }
 });
 </script>

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

@@ -20,7 +20,7 @@
 </template>
 
 <script setup>
-import { computed } from "vue";
+import { computed, defineAsyncComponent } from "vue";
 import FormInputTextarea from "./InputTextarea/index.vue";
 import FormInputText from "./InputText/index.vue";
 import FormInputSearch from "./InputSearch/index.vue";
@@ -34,16 +34,7 @@ import FormInputSelectMultiple from "./InputSelectMultiple/index.vue";
 import FormInputComponent from "./InputComponent/index.vue";
 import FormInputRadio from "./InputRadio/index.vue";
 import FormInputRating from "./InputRating/index.vue";
-import FormInputDateTime from "./InputDateTime/index.vue";
-import FormInputTime from "./InputTime/index.vue";
-import FormInputMonth from "./InputMonth/index.vue";
-import FormInputDateTimeRange from "./InputDateTimeRange/index.vue";
-import FormInputUploadDropzoneAuto from "./InputUploadDropzoneAuto/index.vue";
-import FormInputUploadDropzoneAutoMultiple from "./InputUploadDropzoneAutoMultiple/index.vue";
-import FormInputUploadDropzone from "./InputUploadDropzone/index.vue";
-import FormInputUploadImageAuto from "./InputUploadImageAuto/index.vue";
 import FormInputTag from "./InputTags/index.vue";
-import FormInputWYSIWYG from "./InputWYSIWYG/index.vue";
 import { INPUT_TYPES } from "#core/components/Form/types";
 import { formTheme } from "#core/theme/form";
 import { useUiConfig } from "#core/composables/useConfig";
@@ -54,6 +45,15 @@ const props = defineProps({
   class: { type: null, required: false },
   ui: { type: null, required: false }
 });
+const FormInputDateTime = defineAsyncComponent(() => import("./InputDateTime/index.vue"));
+const FormInputTime = defineAsyncComponent(() => import("./InputTime/index.vue"));
+const FormInputMonth = defineAsyncComponent(() => import("./InputMonth/index.vue"));
+const FormInputDateTimeRange = defineAsyncComponent(() => import("./InputDateTimeRange/index.vue"));
+const FormInputUploadDropzoneAuto = defineAsyncComponent(() => import("./InputUploadDropzoneAuto/index.vue"));
+const FormInputUploadDropzoneAutoMultiple = defineAsyncComponent(() => import("./InputUploadDropzoneAutoMultiple/index.vue"));
+const FormInputUploadDropzone = defineAsyncComponent(() => import("./InputUploadDropzone/index.vue"));
+const FormInputUploadImageAuto = defineAsyncComponent(() => import("./InputUploadImageAuto/index.vue"));
+const FormInputWYSIWYG = defineAsyncComponent(() => import("./InputWYSIWYG/index.vue"));
 const componentMap = {
   [INPUT_TYPES.TEXT]: {
     component: FormInputText,

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

@@ -1,22 +1,22 @@
 <template>
-  <FieldWrapper
-    v-bind="wrapperProps"
-    label=""
-    description=""
-  >
-    <Checkbox
-      :model-value="value"
-      :disabled="wrapperProps.disabled"
-      :name="name"
-      :label="label"
-      :description="description"
-      :required="required"
-      :variant="variant"
-      :indicator="indicator"
-      :ui="ui"
-      @update:modelValue="onChange"
-    />
-  </FieldWrapper>
+  <FieldWrapper
+    v-bind="wrapperProps"
+    label=""
+    description=""
+  >
+    <Checkbox
+      :model-value="value"
+      :disabled="wrapperProps.disabled"
+      :name="name"
+      :label="label"
+      :description="description"
+      :required="required"
+      :variant="variant"
+      :indicator="indicator"
+      :ui="ui"
+      @update:modelValue="onChange"
+    />
+  </FieldWrapper>
 </template>
 
 <script setup>
@@ -39,7 +39,8 @@ 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,

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

@@ -45,7 +45,8 @@ 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,

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

@@ -1,56 +1,56 @@
 <template>
-  <FieldWrapper
-    v-bind="wrapperProps"
-    :error-message="undefined"
-  >
-    <div
+  <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>
+}]"
+    >
+      <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>
@@ -90,7 +90,8 @@ 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,