@finema/core 2.15.3 → 2.16.0

package/README.md

@@ -1,79 +1,79 @@
-<!--
-Get your module up and running quickly.
-
-Find and replace all on all files (CMD+SHIFT+F):
-- Name: Finema UI Kit (Note: package.json has name: @finema/core, consider aligning these)
-- Package name: @finema/core
-- Description: A comprehensive UI kit for Finema projects.
--->
-
-# Finema UI Kit
-
-[![npm version][npm-version-src]][npm-version-href]
-[![npm downloads][npm-downloads-src]][npm-downloads-href]
-[![License][license-src]][license-href]
-[![Nuxt][nuxt-src]][nuxt-href]
-
-A comprehensive UI kit for building consistent and beautiful user interfaces for Finema projects, designed to integrate seamlessly with Nuxt. This package is named `@finema/core` on npm.
-
-- [✨ &nbsp;Release Notes](/CHANGELOG.md)
-- [📖 &nbsp;Storybook](https://your-storybook-url.com) <!-- Add a link to your Storybook -->
-- [🕹️ &nbsp;Playground](#playground)
-
-## Features
-
-<!-- Highlight some of the features your UI kit provides here -->
-- 🎨 &nbsp;Wide range of customizable components, built for Vue and Nuxt
-- 📱 &nbsp;Responsive design out-of-the-box
-- ♿ &nbsp;Accessibility focused
-- 🛠️ &nbsp;Easy to integrate and use with Nuxt auto-import capabilities
-
-## 🚀 Installation
-
-Install the UI kit in your project using npm or yarn:
-
-```bash
-npm install @finema/core
-```
-
-or
-
-```bash
-yarn add @finema/core
-```
-
-## 🛠️ Available Scripts
-
-In the project directory, you can run the following scripts:
-
-- `npm run dev` or `yarn dev`: Runs the playground app in development mode.
-- `npm run dev:build` or `yarn dev:build`: Builds the playground app.
-- `npm run dev:prepare` or `yarn dev:prepare`: Prepares the development environment.
-- `npm run lint` or `yarn lint`: Lints the codebase.
-- `npm run test` or `yarn test`: Runs tests.
-- `npm run release` or `yarn release`: Creates a new release (lints, tests, builds, publishes).
-
-## 🕹️ Playground
-
-This project includes a `playground` directory that you can use to test and experiment with the UI components.
-
-To run the playground:
-1. Navigate to the `playground` directory.
-2. Install dependencies if you haven't already (`npm install` or `yarn install`).
-3. Run `npm run dev` or `yarn dev`.
-
-## 🤝 Contributing
-
-Contributions are welcome! Please refer to the `CONTRIBUTING.md` file for guidelines. (You'll need to create this file).
-
-<!--
-Badge URLs - Keep these at the bottom of the file for better readability
--->
-[npm-version-src]: https://img.shields.io/npm/v/@finema/core.svg
-[npm-version-href]: https://npmjs.com/package/@finema/core
-[npm-downloads-src]: https://img.shields.io/npm/dm/@finema/core.svg
-[npm-downloads-href]: https://npmjs.com/package/@finema/core
-[license-src]: https://img.shields.io/npm/l/@finema/core.svg
-[license-href]: https://npmjs.com/package/@finema/core
-[nuxt-src]: https://img.shields.io/badge/Nuxt-00DC82?logo=nuxt.js
-[nuxt-href]: https://nuxt.com
+<!--
+Get your module up and running quickly.
+
+Find and replace all on all files (CMD+SHIFT+F):
+- Name: Finema UI Kit (Note: package.json has name: @finema/core, consider aligning these)
+- Package name: @finema/core
+- Description: A comprehensive UI kit for Finema projects.
+-->
+
+# Finema UI Kit
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![License][license-src]][license-href]
+[![Nuxt][nuxt-src]][nuxt-href]
+
+A comprehensive UI kit for building consistent and beautiful user interfaces for Finema projects, designed to integrate seamlessly with Nuxt. This package is named `@finema/core` on npm.
+
+- [✨ &nbsp;Release Notes](/CHANGELOG.md)
+- [📖 &nbsp;Storybook](https://your-storybook-url.com) <!-- Add a link to your Storybook -->
+- [🕹️ &nbsp;Playground](#playground)
+
+## Features
+
+<!-- Highlight some of the features your UI kit provides here -->
+- 🎨 &nbsp;Wide range of customizable components, built for Vue and Nuxt
+- 📱 &nbsp;Responsive design out-of-the-box
+- ♿ &nbsp;Accessibility focused
+- 🛠️ &nbsp;Easy to integrate and use with Nuxt auto-import capabilities
+
+## 🚀 Installation
+
+Install the UI kit in your project using npm or yarn:
+
+```bash
+npm install @finema/core
+```
+
+or
+
+```bash
+yarn add @finema/core
+```
+
+## 🛠️ Available Scripts
+
+In the project directory, you can run the following scripts:
+
+- `npm run dev` or `yarn dev`: Runs the playground app in development mode.
+- `npm run dev:build` or `yarn dev:build`: Builds the playground app.
+- `npm run dev:prepare` or `yarn dev:prepare`: Prepares the development environment.
+- `npm run lint` or `yarn lint`: Lints the codebase.
+- `npm run test` or `yarn test`: Runs tests.
+- `npm run release` or `yarn release`: Creates a new release (lints, tests, builds, publishes).
+
+## 🕹️ Playground
+
+This project includes a `playground` directory that you can use to test and experiment with the UI components.
+
+To run the playground:
+1. Navigate to the `playground` directory.
+2. Install dependencies if you haven't already (`npm install` or `yarn install`).
+3. Run `npm run dev` or `yarn dev`.
+
+## 🤝 Contributing
+
+Contributions are welcome! Please refer to the `CONTRIBUTING.md` file for guidelines. (You'll need to create this file).
+
+<!--
+Badge URLs - Keep these at the bottom of the file for better readability
+-->
+[npm-version-src]: https://img.shields.io/npm/v/@finema/core.svg
+[npm-version-href]: https://npmjs.com/package/@finema/core
+[npm-downloads-src]: https://img.shields.io/npm/dm/@finema/core.svg
+[npm-downloads-href]: https://npmjs.com/package/@finema/core
+[license-src]: https://img.shields.io/npm/l/@finema/core.svg
+[license-href]: https://npmjs.com/package/@finema/core
+[nuxt-src]: https://img.shields.io/badge/Nuxt-00DC82?logo=nuxt.js
+[nuxt-href]: https://nuxt.com

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "2.15.3",
+  "version": "2.16.0",
   "configKey": "core",
   "builder": {
     "@nuxt/module-builder": "1.0.1",

package/dist/module.mjs

@@ -1,9 +1,9 @@
-import { defineNuxtModule, createResolver, installModule, addPlugin, addComponentsDir, addImportsDir } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, installModule, addPlugin, addComponentsDir, addImportsDir, addImports } from '@nuxt/kit';
 import defu from 'defu';
 import * as theme from '../dist/runtime/theme/index.js';
 
 const name = "@finema/core";
-const version = "2.15.3";
+const version = "2.16.0";
 
 const nuxtAppOptions = {
   head: {
@@ -91,7 +91,7 @@ const module = defineNuxtModule({
     _nuxt.options.colorMode = {
       preference: "light"
     };
-    _nuxt.options.appConfig.ui = {
+    _nuxt.options.appConfig.ui = defu({
       colors: {
         primary: "main",
         secondary: "secondary",
@@ -101,9 +101,8 @@ const module = defineNuxtModule({
         warning: "warning",
         error: "error",
         neutral: "slate"
-      },
-      ...theme
-    };
+      }
+    }, theme);
     _nuxt.options.build = defu(
       {
         transpile: [
@@ -143,18 +142,13 @@ const module = defineNuxtModule({
     await installModule(
       "@vee-validate/nuxt",
       {
-        autoImports: true,
-        componentNames: {
-          Form: "VForm",
-          Field: "VField",
-          FieldArray: "VFieldArray",
-          ErrorMessage: "VErrorMessage"
-        }
+        autoImports: false
       }
     );
     await installModule("nuxt-lodash", {
       prefix: "_",
-      upperAfterPrefix: false
+      upperAfterPrefix: false,
+      exclude: ["get"]
     });
     addPlugin(resolve("./runtime/plugin"));
     void addComponentsDir({
@@ -165,6 +159,51 @@ const module = defineNuxtModule({
     addImportsDir(resolve(runtimeDir, "composables"));
     addImportsDir(resolve(runtimeDir, "utils"));
     addImportsDir(resolve(runtimeDir, "types"));
+    addImports([
+      // Vee-Validate imports
+      {
+        name: "useForm",
+        from: "vee-validate"
+      },
+      {
+        name: "useField",
+        from: "vee-validate"
+      },
+      {
+        name: "useFormErrors",
+        from: "vee-validate"
+      },
+      {
+        name: "useFormValues",
+        from: "vee-validate"
+      },
+      {
+        name: "useIsFormDirty",
+        from: "vee-validate"
+      },
+      {
+        name: "useIsFormValid",
+        from: "vee-validate"
+      },
+      {
+        name: "useResetForm",
+        from: "vee-validate"
+      },
+      {
+        name: "useSubmitForm",
+        from: "vee-validate"
+      },
+      {
+        name: "toTypedSchema",
+        from: "@vee-validate/valibot"
+      },
+      // Valibot namespace import
+      {
+        name: "*",
+        as: "v",
+        from: "valibot"
+      }
+    ]);
   }
 });
 

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

@@ -1,99 +1,99 @@
 <template>
-  <div
-    v-show="isShowDevTools"
-    ref="devToolsRef"
-    class="fixed z-50 overflow-hidden rounded-lg border border-neutral-300 bg-white opacity-80 shadow-2xl"
-    :style="devToolsDynamicStyles"
-  >
-    <!-- Draggable Title Bar -->
-    <div class="flex items-center justify-between px-2 py-1 select-none">
-      <p
-        class="flex-grow cursor-move text-sm font-semibold"
-        @mousedown.prevent="handleDragStart"
-      >
-        Debug Tools
-      </p>
-      <div class="flex items-center">
-        <Button
-          icon="i-heroicons-arrow-path"
-          size="xs"
-          color="neutral"
-          variant="ghost"
-          class="mr-1"
-          title="Reset Position & Size"
-          @click.stop="resetDevToolsState"
-        />
-        <Button
-          icon="i-heroicons-x-mark"
-          size="xs"
-          color="neutral"
-          variant="ghost"
-          title="Close DevTools"
-          @click.stop="closeDevTools"
-        />
-      </div>
-    </div>
-    <hr class="text-neutral-300" />
-    <!-- Content Area Target for Logs -->
-    <div
-      id="dev-logs"
-      class="flex flex-1 flex-col space-y-1 overflow-auto p-2"
-      :style="{ height: `calc(${devToolsHeight} - 40px)` }"
-    />
-
-    <!-- Resize Handles -->
-    <div
-      v-if="!isDragging"
-      class="resize-handles"
-    >
-      <div
-        class="resize-handle top-left"
-        @mousedown.prevent="handleResizeStart('top-left', $event)"
-      />
-      <div
-        class="resize-handle top-center"
-        @mousedown.prevent="handleResizeStart('top', $event)"
-      />
-      <div
-        class="resize-handle top-right"
-        @mousedown.prevent="handleResizeStart('top-right', $event)"
-      />
-      <div
-        class="resize-handle middle-left"
-        @mousedown.prevent="handleResizeStart('left', $event)"
-      />
-      <div
-        class="resize-handle middle-right"
-        @mousedown.prevent="handleResizeStart('right', $event)"
-      />
-      <div
-        class="resize-handle bottom-left"
-        @mousedown.prevent="handleResizeStart('bottom-left', $event)"
-      />
-      <div
-        class="resize-handle bottom-center"
-        @mousedown.prevent="handleResizeStart('bottom', $event)"
-      />
-      <div
-        class="resize-handle bottom-right"
-        @mousedown.prevent="handleResizeStart('bottom-right', $event)"
-      />
-    </div>
-  </div>
-
-  <!-- Toggle button for this DevToolsWindow -->
-  <div
-    class="fixed right-1 bottom-1 z-[99999]"
-  >
-    <Button
-      :icon="isShowDevTools ? 'heroicons:x-mark' : 'heroicons:information-circle'"
-      color="info"
-      square
-      size="sm"
-      :ui="{ base: 'rounded-full' }"
-      @click="toggleDevTools"
-    />
-  </div>
+  <div
+    v-show="isShowDevTools"
+    ref="devToolsRef"
+    class="fixed z-50 overflow-hidden rounded-lg border border-neutral-300 bg-white opacity-80 shadow-2xl"
+    :style="devToolsDynamicStyles"
+  >
+    <!-- Draggable Title Bar -->
+    <div class="flex items-center justify-between px-2 py-1 select-none">
+      <p
+        class="flex-grow cursor-move text-sm font-semibold"
+        @mousedown.prevent="handleDragStart"
+      >
+        Debug Tools
+      </p>
+      <div class="flex items-center">
+        <Button
+          icon="i-heroicons-arrow-path"
+          size="xs"
+          color="neutral"
+          variant="ghost"
+          class="mr-1"
+          title="Reset Position & Size"
+          @click.stop="resetDevToolsState"
+        />
+        <Button
+          icon="i-heroicons-x-mark"
+          size="xs"
+          color="neutral"
+          variant="ghost"
+          title="Close DevTools"
+          @click.stop="closeDevTools"
+        />
+      </div>
+    </div>
+    <hr class="text-neutral-300" />
+    <!-- Content Area Target for Logs -->
+    <div
+      id="dev-logs"
+      class="flex flex-1 flex-col space-y-1 overflow-auto p-2"
+      :style="{ height: `calc(${devToolsHeight} - 40px)` }"
+    />
+
+    <!-- Resize Handles -->
+    <div
+      v-if="!isDragging"
+      class="resize-handles"
+    >
+      <div
+        class="resize-handle top-left"
+        @mousedown.prevent="handleResizeStart('top-left', $event)"
+      />
+      <div
+        class="resize-handle top-center"
+        @mousedown.prevent="handleResizeStart('top', $event)"
+      />
+      <div
+        class="resize-handle top-right"
+        @mousedown.prevent="handleResizeStart('top-right', $event)"
+      />
+      <div
+        class="resize-handle middle-left"
+        @mousedown.prevent="handleResizeStart('left', $event)"
+      />
+      <div
+        class="resize-handle middle-right"
+        @mousedown.prevent="handleResizeStart('right', $event)"
+      />
+      <div
+        class="resize-handle bottom-left"
+        @mousedown.prevent="handleResizeStart('bottom-left', $event)"
+      />
+      <div
+        class="resize-handle bottom-center"
+        @mousedown.prevent="handleResizeStart('bottom', $event)"
+      />
+      <div
+        class="resize-handle bottom-right"
+        @mousedown.prevent="handleResizeStart('bottom-right', $event)"
+      />
+    </div>
+  </div>
+
+  <!-- Toggle button for this DevToolsWindow -->
+  <div
+    class="fixed right-1 bottom-1 z-[99999]"
+  >
+    <Button
+      :icon="isShowDevTools ? 'heroicons:x-mark' : 'heroicons:information-circle'"
+      color="info"
+      square
+      size="sm"
+      :ui="{ base: 'rounded-full' }"
+      @click="toggleDevTools"
+    />
+  </div>
 </template>
 
 <script setup>

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

@@ -1,72 +1,72 @@
 <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>
-
-    <slot
-      v-if="options.status.isSuccess && options.rawData.length === 0"
-      name="empty-state"
-    >
-      <Empty />
-    </slot>
-
-    <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>
-
-    <div :class="containerClass">
-      <slot
-        v-for="(row, index) in displayData"
-        :key="index"
-        :row="row"
-      />
-      <div ref="bottomEdgeElement" />
-    </div>
-
-    <slot
-      v-if="options.status.isLoading"
-      name="loading-state"
-    >
-      <Loader
-        :loading="true"
-      />
-    </slot>
-
-    <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 }} รายการ จากทั้งหมด {{ totalCountWithComma }} รายการ
-      </p>
-      <Pagination
-        v-if="options.pageOptions.totalPage > 1 && !isShowSimplePagination"
-        :default-page="options.pageOptions?.currentPage || 1"
-        :items-per-page="options.pageOptions.limit"
-        :total="options.pageOptions.totalCount"
-        @update:page="onPageChange"
-      />
-      <SimplePagination
-        v-if="options.pageOptions.totalPage > 1 && isShowSimplePagination"
-        v-model="page"
-        :page-count="options.pageOptions.limit"
-        :total="options.pageOptions.totalCount"
-      />
-    </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 || '\u0E04\u0E49\u0E19\u0E2B\u0E32...'"
+      />
+    </div>
+
+    <slot
+      v-if="options.status.isSuccess && options.rawData.length === 0"
+      name="empty-state"
+    >
+      <Empty />
+    </slot>
+
+    <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>
+
+    <div :class="containerClass">
+      <slot
+        v-for="(row, index) in displayData"
+        :key="index"
+        :row="row"
+      />
+      <div ref="bottomEdgeElement" />
+    </div>
+
+    <slot
+      v-if="options.status.isLoading"
+      name="loading-state"
+    >
+      <Loader
+        :loading="true"
+      />
+    </slot>
+
+    <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 }} รายการ จากทั้งหมด {{ totalCountWithComma }} รายการ
+      </p>
+      <Pagination
+        v-if="options.pageOptions.totalPage > 1 && !isShowSimplePagination"
+        :default-page="options.pageOptions?.currentPage || 1"
+        :items-per-page="options.pageOptions.limit"
+        :total="options.pageOptions.totalCount"
+        @update:page="onPageChange"
+      />
+      <SimplePagination
+        v-if="options.pageOptions.totalPage > 1 && isShowSimplePagination"
+        v-model="page"
+        :page-count="options.pageOptions.limit"
+        :total="options.pageOptions.totalCount"
+      />
+    </div>
+  </div>
 </template>
 
 <script setup>

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>