@finema/core 2.5.5 → 2.6.1

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.5.5",
+  "version": "2.6.1",
   "configKey": "core",
   "builder": {
     "@nuxt/module-builder": "1.0.1",

package/dist/module.mjs

@@ -3,7 +3,7 @@ import defu from 'defu';
 import * as theme from '../dist/runtime/theme/index.js';
 
 const name = "@finema/core";
-const version = "2.5.5";
+const version = "2.6.1";
 
 const nuxtAppOptions = {
   head: {
@@ -96,6 +96,22 @@ const module = defineNuxtModule({
       },
       ...theme
     };
+    _nuxt.options.build = defu(
+      {
+        transpile: [
+          ..._nuxt.options.build?.transpile || [],
+          "date-fns",
+          "date-fns-tz",
+          "@vuepic/vue-datepicker",
+          "defu"
+        ]
+      },
+      _nuxt.options.build
+    );
+    _nuxt.options.vite = defu(
+      { optimizeDeps: { include: [..._nuxt.options.vite?.optimizeDeps?.include || [], "@wdns/vue-code-block"] } },
+      _nuxt.options.vite
+    );
     await installModule("@nuxt/ui", {
       prefix: "",
       colorMode: false,
@@ -131,7 +147,8 @@ const module = defineNuxtModule({
     addPlugin(resolve("./runtime/plugin"));
     void addComponentsDir({
       path: resolve(runtimeDir, "components"),
-      prefix: _options.prefix
+      prefix: _options.prefix,
+      priority: 10
     });
     addImportsDir(resolve(runtimeDir, "composables"));
     addImportsDir(resolve(runtimeDir, "utils"));

package/dist/runtime/components/App.vue

@@ -1,11 +1,11 @@
 <template>
-  <NuxtLoadingIndicator :color="coreConfig.color" />
-  <UApp :locale="th">
-    <slot />
-  </UApp>
-  <DevOnly>
-    <DevToolsWindow />
-  </DevOnly>
+  <NuxtLoadingIndicator :color="coreConfig.color" />
+  <UApp :locale="th">
+    <slot />
+  </UApp>
+  <DevOnly>
+    <DevToolsWindow />
+  </DevOnly>
 </template>
 
 <script setup>

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="text-sm font-semibold cursor-move flex-grow"
-        @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-col flex-1 space-y-1 p-2 overflow-auto"
-      :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 bottom-1 right-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="text-sm font-semibold cursor-move flex-grow"
+        @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-col flex-1 space-y-1 p-2 overflow-auto"
+      :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 bottom-1 right-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/Empty.vue

@@ -1,22 +1,22 @@
 <template>
-  <div
+  <div
     :class="theme.base({
   class: [ui?.base, props.class]
-})"
-  >
-    <Icon
-      :name="icon"
+})"
+  >
+    <Icon
+      :name="icon"
       :class="theme.icon({
   class: [ui?.icon]
-})"
-    />
-    <p
+})"
+    />
+    <p
       :class="theme.message({
   class: [ui?.message]
-})"
-      v-html="message"
-    />
-  </div>
+})"
+      v-html="message"
+    />
+  </div>
 </template>
 
 <script setup>

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

@@ -1,71 +1,71 @@
 <template>
-  <div
-    v-if="!isHideCaption || !isHideBottomPagination"
-    class="mb-4 text-gray-500"
-  >
-    <span class="font-bold">ผลลัพธ์ทั้งหมด:</span>
-    จำนวน
-    <span class="font-bold">{{ pageOptions?.totalCount || 0 }}</span>
-    รายการ
-  </div>
-  <slot
-    v-if="!status.isLoading && rawData.length === 0"
-    name="empty-state"
-  >
-    <Empty />
-  </slot>
-
-  <div
-    v-if="pageOptions && isEnableInfiniteScroll && !isHideTopPagination"
-    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 innerRawData"
-      :key="index"
-      :row="row"
-    />
-    <div ref="bottomEdgeElement" />
-  </div>
-
-  <slot
-    v-if="status.isLoading"
-    name="loading-state"
-  >
-    <div class="flex h-60 items-center justify-center">
-      <Icon
-        name="i-svg-spinners:180-ring-with-bg"
-        class="text-primary size-8"
-      />
-    </div>
-  </slot>
-
-  <div
-    v-if="pageOptions && !isEnableInfiniteScroll"
-    class="mt-4 flex justify-between px-3"
-  >
-    <p class="text-xs text-gray-500">
-      ผลลัพธ์ {{ pageBetween }} ของ {{ totalCountWithComma }} รายการ
-    </p>
-    <Pagination
-      v-if="pageOptions.totalPage > 1 && !isSimplePagination && !isHideBottomPagination"
-      :default-page="pageOptions?.currentPage || 1"
-      :items-per-page="pageOptions.limit"
-      :total="pageOptions.totalCount"
-      @update:page="emits('pageChange', $event)"
-    />
-    <SimplePagination
-      v-if="pageOptions.totalPage > 1 && isSimplePagination"
-      v-model="page"
-      :page-count="pageOptions.limit"
-      :total="pageOptions.totalCount"
-    />
-  </div>
+  <div
+    v-if="!isHideCaption || !isHideBottomPagination"
+    class="mb-4 text-gray-500"
+  >
+    <span class="font-bold">ผลลัพธ์ทั้งหมด:</span>
+    จำนวน
+    <span class="font-bold">{{ pageOptions?.totalCount || 0 }}</span>
+    รายการ
+  </div>
+  <slot
+    v-if="!status.isLoading && rawData.length === 0"
+    name="empty-state"
+  >
+    <Empty />
+  </slot>
+
+  <div
+    v-if="pageOptions && isEnableInfiniteScroll && !isHideTopPagination"
+    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 innerRawData"
+      :key="index"
+      :row="row"
+    />
+    <div ref="bottomEdgeElement" />
+  </div>
+
+  <slot
+    v-if="status.isLoading"
+    name="loading-state"
+  >
+    <div class="flex h-60 items-center justify-center">
+      <Icon
+        name="i-svg-spinners:180-ring-with-bg"
+        class="text-primary size-8"
+      />
+    </div>
+  </slot>
+
+  <div
+    v-if="pageOptions && !isEnableInfiniteScroll"
+    class="mt-4 flex justify-between px-3"
+  >
+    <p class="text-xs text-gray-500">
+      ผลลัพธ์ {{ pageBetween }} ของ {{ totalCountWithComma }} รายการ
+    </p>
+    <Pagination
+      v-if="pageOptions.totalPage > 1 && !isSimplePagination && !isHideBottomPagination"
+      :default-page="pageOptions?.currentPage || 1"
+      :items-per-page="pageOptions.limit"
+      :total="pageOptions.totalCount"
+      @update:page="emits('pageChange', $event)"
+    />
+    <SimplePagination
+      v-if="pageOptions.totalPage > 1 && isSimplePagination"
+      v-model="page"
+      :page-count="pageOptions.limit"
+      :total="pageOptions.totalCount"
+    />
+  </div>
 </template>
 
 <script setup>

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

@@ -1,37 +1,37 @@
 <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>
-    <Base
-      :raw-data="options.rawData"
-      :status="options.status"
-      :page-options="options.pageOptions"
-      :is-simple-pagination="isShowSimplePagination"
-      :is-hide-top-pagination="options.isHideTopPagination"
-      :is-hide-bottom-pagination="options.isHideBottomPagination"
-      :is-enable-infinite-scroll="options.isEnableInfiniteScroll"
-      :container-class="containerClass"
-      @page-change="onPageChange"
-    >
-      <template
-        v-for="(_, slot) of $slots"
-        #[slot]="slotProps"
-      >
-        <slot
-          :name="slot"
-          v-bind="slotProps || {}"
-        />
-      </template>
-    </Base>
-  </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>
+    <Base
+      :raw-data="options.rawData"
+      :status="options.status"
+      :page-options="options.pageOptions"
+      :is-simple-pagination="isShowSimplePagination"
+      :is-hide-top-pagination="options.isHideTopPagination"
+      :is-hide-bottom-pagination="options.isHideBottomPagination"
+      :is-enable-infinite-scroll="options.isEnableInfiniteScroll"
+      :container-class="containerClass"
+      @page-change="onPageChange"
+    >
+      <template
+        v-for="(_, slot) of $slots"
+        #[slot]="slotProps"
+      >
+        <slot
+          :name="slot"
+          v-bind="slotProps || {}"
+        />
+      </template>
+    </Base>
+  </div>
 </template>
 
 <script setup>