@finema/core 3.22.0 → 3.24.0

package/README.md

@@ -7,6 +7,23 @@
 
 > Enterprise-grade Vue.js UI component library for Nuxt applications
 
+---
+
+## 🚀 Starting a new project? Use the starter template
+
+> [!TIP]
+> **Don't set it up by hand: start from the template.** It's a Nuxt 3 project with `@finema/core` already installed and configured.
+>
+> ### 👉 [gitlab.finema.co/finema/shared/nuxt3-template-with-uikit](https://gitlab.finema.co/finema/shared/nuxt3-template-with-uikit)
+>
+> ```bash
+> git clone https://gitlab.finema.co/finema/shared/nuxt3-template-with-uikit.git my-app
+> ```
+
+Adding the kit to an **existing** project instead? See [Installation](#-installation) below.
+
+---
+
 A comprehensive, production-ready UI kit that provides 20+ auto-registered components, composables, and utilities for building consistent and beautiful user interfaces. Designed specifically for Nuxt 3 with TypeScript support, automatic validation, and seamless theming.
 
 ## ✨ Features
@@ -24,6 +41,7 @@ A comprehensive, production-ready UI kit that provides 20+ auto-registered compo
 ## 📋 Quick Links
 
 - [📖 Getting Started Guide](./docs/getting-started.md) - Complete setup and usage guide
+- [🚀 **Starter Template**](https://gitlab.finema.co/finema/shared/nuxt3-template-with-uikit) - Nuxt 3 project template with the kit pre-configured
 - [🎮 Playground Examples](./playground/) - Live examples and demos
 - [📚 Component Documentation](./docs/components/) - Detailed component API
 - [🔧 Composables Guide](./docs/composables/) - Available utilities and helpers
@@ -362,14 +380,16 @@ bun run dev:build        # Build playground
 bun run dev:prepare      # Prepare development environment
 
 # Quality
-bun run lint             # Lint codebase
+bun run check            # oxfmt --check + oxlint + nuxt-oxclint check-vue (rules from @finema/nuxt-oxclint)
+bun run lint             # oxlint only
 bun run lint:fix         # Fix linting issues
+bun run format           # oxfmt, writes in place
 bun run test             # Run tests
 bun run test:watch       # Run tests in watch mode
 bun run test:types       # Type checking
 
 # Release
-bun run release          # Create new release (lint, test, build, publish)
+bun run release          # Create new release (check, test, build, publish)
 ```
 
 ## 📚 Documentation

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.24.0",
   "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.24.0";
 
 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({
@@ -79,16 +81,7 @@ const module$1 = defineNuxtModule({
       defaults: {
         prefix: "",
         theme: {
-          colors: [
-            "primary",
-            "secondary",
-            "tertiary",
-            "info",
-            "success",
-            "warning",
-            "error",
-            "white"
-          ]
+          colors: ["primary", "secondary", "tertiary", "info", "success", "warning", "error", "white"]
         }
       }
     },
@@ -101,9 +94,7 @@ const module$1 = defineNuxtModule({
   },
   defaults: {},
   async setup(_options, _nuxt) {
-    const {
-      resolve
-    } = createResolver(import.meta.url);
+    const { resolve } = createResolver(import.meta.url);
     const runtimeDir = resolve("./runtime");
     _nuxt.options.build.transpile.push(runtimeDir);
     _nuxt.options.alias["#core"] = runtimeDir;
@@ -132,6 +123,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 +155,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

@@ -2,10 +2,7 @@
   <div
     v-show="isShowDevTools"
     ref="devToolsRef"
-    class="
-      fixed z-50 overflow-hidden rounded-lg border border-neutral-300 bg-white
-      opacity-80 shadow-2xl
-    "
+    class="fixed z-50 overflow-hidden rounded-lg border border-neutral-300 bg-white opacity-80 shadow-2xl"
     :style="devToolsDynamicStyles"
   >
     <!-- Draggable Title Bar -->
@@ -85,9 +82,7 @@
   </div>
 
   <!-- Toggle button for this DevToolsWindow -->
-  <div
-    class="fixed right-1 bottom-1 z-[99999]"
-  >
+  <div class="fixed right-1 bottom-1 z-[99999]">
     <Button
       :icon="isShowDevTools ? 'heroicons:x-mark' : 'heroicons:information-circle'"
       color="info"
@@ -214,14 +209,7 @@ const handleResizeStart = (handle, event) => {
 };
 const handleResizeMove = (event) => {
   if (!isResizing.value || !devToolsRef.value || !activeResizeHandle.value) return;
-  const {
-    width,
-    height,
-    top,
-    left,
-    mouseX,
-    mouseY
-  } = initialResizeState.value;
+  const { width, height, top, left, mouseX, mouseY } = initialResizeState.value;
   const deltaX = event.clientX - mouseX;
   const deltaY = event.clientY - mouseY;
   let newWidth = width;
@@ -278,33 +266,43 @@ const resetDevToolsState = () => {
       ...DEFAULT_POSITION
     };
     Object.keys(newStyles).forEach((key) => {
+      ;
       devToolsRef.value.style[key] = newStyles[key];
     });
     if (newStyles.top === "auto") {
+      ;
       devToolsRef.value.style.bottom = newStyles.bottom;
     } else {
+      ;
       devToolsRef.value.style.bottom = "auto";
     }
     if (newStyles.left === "auto") {
+      ;
       devToolsRef.value.style.right = newStyles.right;
     } else {
+      ;
       devToolsRef.value.style.right = "auto";
     }
   }
 };
 onMounted(() => {
-  watch(isShowDevTools, (newValue) => {
-    if (newValue && devToolsRef.value) {
-      const currentStyle = devToolsDynamicStyles.value;
-      Object.keys(currentStyle).forEach((key) => {
-        if (devToolsRef.value) {
-          devToolsRef.value.style[key] = currentStyle[key];
-        }
-      });
+  watch(
+    isShowDevTools,
+    (newValue) => {
+      if (newValue && devToolsRef.value) {
+        const currentStyle = devToolsDynamicStyles.value;
+        Object.keys(currentStyle).forEach((key) => {
+          if (devToolsRef.value) {
+            ;
+            devToolsRef.value.style[key] = currentStyle[key] ?? "";
+          }
+        });
+      }
+    },
+    {
+      immediate: true
     }
-  }, {
-    immediate: true
-  });
+  );
 });
 onUnmounted(() => {
   if (isDragging.value) handleDragEnd();

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

@@ -2,9 +2,7 @@
   <AlertDialogRoot :open="true">
     <AlertDialogPortal>
       <AlertDialogOverlay :class="theme.overlay()" />
-      <AlertDialogContent
-        :class="theme.base()"
-      >
+      <AlertDialogContent :class="theme.base()">
         <div :class="theme.iconWrapper()">
           <Icon
             v-if="!propsSafe.isHideIcon"
@@ -64,21 +62,18 @@ 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(() => {
@@ -100,8 +95,13 @@ const getIcon = computed(() => {
       return icons.iconInfo;
   }
 });
-const theme = computed(() => useUiConfig(dialogTheme, "dialog")({
-  color: propsSafe.value.type,
-  confirm: propsSafe.value.isConfirm
-}));
+const theme = computed(
+  () => useUiConfig(
+    dialogTheme,
+    "dialog"
+  )({
+    color: propsSafe.value.type,
+    confirm: propsSafe.value.isConfirm
+  })
+);
 </script>

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

@@ -2,12 +2,11 @@ import { emptyTheme } from '#core/theme/empty';
 type __VLS_Props = {
     message?: any;
     icon?: string;
-    ui?: typeof emptyTheme['slots'];
+    ui?: (typeof emptyTheme)['slots'];
     class?: any;
 };
 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

@@ -1,20 +1,26 @@
 <template>
   <div
-    :class="theme.base({
-  class: [ui?.base, props.class]
-})"
+    :class="
+  theme.base({
+    class: [ui?.base, props.class]
+  })
+"
   >
     <Icon
       :name="icon"
-      :class="theme.iconSize({
-  class: [ui?.iconSize]
-})"
+      :class="
+  theme.iconSize({
+    class: [ui?.iconSize]
+  })
+"
     />
     <p
-      :class="theme.message({
-  class: [ui?.message]
-})"
-      v-html="message"
+      :class="
+  theme.message({
+    class: [ui?.message]
+  })
+"
+      v-html="message ?? messages.common.empty"
     />
   </div>
 </template>
@@ -23,11 +29,13 @@
 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

@@ -2,12 +2,11 @@ import { emptyTheme } from '#core/theme/empty';
 type __VLS_Props = {
     message?: any;
     icon?: string;
-    ui?: typeof emptyTheme['slots'];
+    ui?: (typeof emptyTheme)['slots'];
     class?: any;
 };
 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

@@ -7,7 +7,7 @@
       <Input
         v-model="q"
         icon="i-heroicons-magnifying-glass"
-        :placeholder="options.searchPlaceholder || '\u0E04\u0E49\u0E19\u0E2B\u0E32...'"
+        :placeholder="options.searchPlaceholder || messages.common.search"
       />
     </div>
 
@@ -16,7 +16,8 @@
       class="mb-4 flex items-center justify-end"
     >
       <p class="text-xs text-gray-500">
-        {{ totalInnerRawData }} รายการ จากทั้งหมด {{ totalCountWithComma }} รายการ
+        {{ totalInnerRawData }} {{ messages.pagination.itemsOfTotal }} {{ totalCountWithComma }}
+        {{ messages.pagination.items }}
       </p>
     </div>
 
@@ -31,19 +32,13 @@
       v-else-if="options.status.isLoading"
       name="loading-state"
     >
-      <Loader
-        :loading="true"
-      />
+      <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
-        "
-      >
+      <div class="flex h-[200px] items-center justify-center text-2xl text-error-400">
         {{ StringHelper.getError(options.status.errorData) }}
       </div>
     </slot>
@@ -65,8 +60,8 @@
       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" }}
+        {{ pageBetween }} {{ messages.pagination.itemsOfTotal }} {{ totalCountWithComma }}
+        {{ messages.pagination.items }}
       </p>
       <Pagination
         v-if="options.pageOptions.totalPage > 1"
@@ -81,10 +76,12 @@
 </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 +97,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);
@@ -113,9 +109,7 @@ const displayData = computed(() => {
 const to = (page2) => {
   const params = props.options?.pageOptions?.request?.params || {};
   const cleanParams = Object.fromEntries(
-    Object.entries(params).filter(
-      ([key, value]) => value !== null && value !== void 0 && value !== ""
-    )
+    Object.entries(params).filter(([key, value]) => value !== null && value !== void 0 && value !== "")
   );
   return {
     query: {
@@ -124,12 +118,15 @@ const to = (page2) => {
     }
   };
 };
-useWatchChange(() => props.options?.pageOptions?.request?.params, () => {
-  if (props.options?.isRouteChange) return;
-  router.replace({
-    query: props.options?.pageOptions?.request?.params || {}
-  });
-});
+useWatchChange(
+  () => props.options?.pageOptions?.request?.params,
+  () => {
+    if (props.options?.isRouteChange) return;
+    router.replace({
+      query: props.options?.pageOptions?.request?.params || {}
+    });
+  }
+);
 const pageBetween = computed(() => {
   const length = props.options.rawData?.length;
   if (length === 0) {
@@ -176,4 +173,5 @@ watch(targetElement, (value) => {
 const onPageChange = (page2) => {
   emits("pageChange", page2);
 };
+const { messages } = useCoreMessages();
 </script>

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

@@ -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.d.vue.ts

@@ -6,7 +6,7 @@ type __VLS_Props = {
     options: IFormField[];
     orientation?: 'horizontal' | 'vertical';
     class?: any;
-    ui?: typeof formTheme['slots'];
+    ui?: (typeof formTheme)['slots'];
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     orientation: "horizontal" | "vertical";

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

@@ -1,8 +1,10 @@
 <template>
   <div
-    :class="[theme.base({
-  class: [$props.class, ui?.base]
-})]"
+    :class="[
+  theme.base({
+    class: [$props.class, ui?.base]
+  })
+]"
   >
     <component
       :is="componentMap[option.type]?.component"
@@ -20,7 +22,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 +36,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 +47,17 @@ 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,
@@ -179,14 +183,16 @@ const componentMap = {
     props: {}
   }
 };
-const theme = computed(() => useUiConfig(formTheme, "form")({
-  orientation: props.orientation
-}));
+const theme = computed(
+  () => useUiConfig(
+    formTheme,
+    "form"
+  )({
+    orientation: props.orientation
+  })
+);
 const getFieldBinding = (field) => {
-  const {
-    props: fieldProps,
-    ui: fieldUi
-  } = field;
+  const { props: fieldProps, ui: fieldUi } = field;
   const allProps = {
     ...fieldProps,
     containerUi: {

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

@@ -6,7 +6,7 @@ type __VLS_Props = {
     options: IFormField[];
     orientation?: 'horizontal' | 'vertical';
     class?: any;
-    ui?: typeof formTheme['slots'];
+    ui?: (typeof formTheme)['slots'];
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     orientation: "horizontal" | "vertical";

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

@@ -39,13 +39,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);