@finema/core 3.23.2 → 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.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "3.23.2",
+  "version": "3.24.0",
   "configKey": "core",
   "builder": {
     "@nuxt/module-builder": "1.0.3",

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.23.2";
+const version = "3.24.0";
 
 const nuxtAppOptions = {
   head: {
@@ -81,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"]
         }
       }
     },
@@ -103,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;

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.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"
@@ -68,9 +66,7 @@ import { useCoreMessages } from "#core/composables/useMessages";
 const emits = defineEmits();
 const props = defineProps();
 const attrs = useAttrs();
-const {
-  messages
-} = useCoreMessages();
+const { messages } = useCoreMessages();
 const icons = useUiIconConfig("dialog");
 const propsSafe = computed(() => {
   const source = props.title ? props : attrs;
@@ -99,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/Empty.d.vue.ts

@@ -2,7 +2,7 @@ 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<{}>, {

package/dist/runtime/components/Empty.vue

@@ -1,19 +1,25 @@
 <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]
-})"
+      :class="
+  theme.message({
+    class: [ui?.message]
+  })
+"
       v-html="message ?? messages.common.empty"
     />
   </div>
@@ -31,7 +37,5 @@ const props = defineProps({
   class: { type: null, required: false }
 });
 const theme = computed(() => useUiConfig(emptyTheme, "empty")());
-const {
-  messages
-} = useCoreMessages();
+const { messages } = useCoreMessages();
 </script>

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

@@ -2,7 +2,7 @@ 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<{}>, {

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

@@ -1,84 +1,78 @@
 <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 || 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>
+  <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="flex h-[200px] items-center justify-center text-2xl text-error-400">
+        {{ 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>
@@ -115,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: {
@@ -126,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) {
@@ -178,7 +173,5 @@ watch(targetElement, (value) => {
 const onPageChange = (page2) => {
   emits("pageChange", page2);
 };
-const {
-  messages
-} = useCoreMessages();
+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>

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"
@@ -50,7 +52,9 @@ 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 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"));
@@ -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

@@ -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>
@@ -42,11 +42,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/InputCheckboxGroup/index.vue

@@ -48,11 +48,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);