@finema/core 1.4.219 → 2.1.0

package/README.md

@@ -1,60 +1,79 @@
-# @finema/core Nuxt Module
+<!--
+Get your module up and running quickly.
 
-[✨ &nbsp;Release Notes](/CHANGELOG.md)
+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.
+-->
 
-## Starter template
-https://gitlab.finema.co/finema/nuxt3-template-with-uikit
+# Finema UI Kit
 
-## Remark
-- Temporary use resolutions for vue 3.3.13 instead of ^3.4.0 due to [this issue](https://github.com/nuxt/ui/issues/1171) and planned to be fixed in the next vue 3.5 version.
+[![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]
 
-## Quick Setup
+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.
 
-1. Add `@finema/core` dependency to your project
+- [✨ &nbsp;Release Notes](/CHANGELOG.md)
+- [📖 &nbsp;Storybook](https://your-storybook-url.com) <!-- Add a link to your Storybook -->
+- [🕹️ &nbsp;Playground](#playground)
 
-```bash
-# Using pnpm
-pnpm add -D @finema/core
+## 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
 
-# Using yarn
-yarn add --dev @finema/core
+## 🚀 Installation
 
+Install the UI kit in your project using npm or yarn:
+
+```bash
+npm install @finema/core
 ```
 
-1. Add `@finema/core` to the `modules` section of `nuxt.config.ts`
+or
 
-```js
-export default defineNuxtConfig({
-  modules: [
-    '@finema/core'
-  ]
-})
+```bash
+yarn add @finema/core
 ```
 
-That's it! You can now use @finema/core in your Nuxt app ✨
+## 🛠️ Available Scripts
 
-## Development
+In the project directory, you can run the following scripts:
 
-```bash
-# Install dependencies
-pnpm install
+- `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).
 
-# Generate type stubs
-pnpm dev:prepare
+## 🕹️ Playground
 
-# Develop with the playground
-pnpm dev
+This project includes a `playground` directory that you can use to test and experiment with the UI components.
 
-# Build the playground
-pnpm dev:build
+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`.
 
-# Run ESLint
-pnpm lint
+## 🤝 Contributing
 
-# Run Vitest
-pnpm test
-pnpm test:watch
+Contributions are welcome! Please refer to the `CONTRIBUTING.md` file for guidelines. (You'll need to create this file).
 
-# Release new version
-pnpm release
-```
+<!--
+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.d.mts

@@ -11,40 +11,20 @@ declare const core: {
     is_thai_year: boolean;
     is_thai_month: boolean;
     site_name: string;
+    color: string;
     is_simple_pagination: boolean;
     time_zone: string;
 };
 
-declare const config_core: typeof core;
-declare namespace config {
-  export { config_core as core };
-}
-
 interface ModuleOptions {
-    /**
-     * @default ''
-     */
     prefix?: string;
-    /**
-     * @default false
-     */
-    global?: boolean;
-    securityDisabled?: boolean;
-}
-type CORE = {
-    strategy?: 'merge' | 'override';
-    [key: string]: any;
-} & Partial<typeof config>;
-declare module 'nuxt/schema' {
-    interface AppConfigInput {
-        core?: CORE;
-    }
 }
 declare module '@nuxt/schema' {
     interface AppConfigInput {
-        core?: CORE;
+        core?: Partial<typeof core>;
     }
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
-export { type ModuleOptions, _default as default };
+export { _default as default };
+export type { ModuleOptions };

package/dist/module.json

@@ -1,8 +1,9 @@
 {
   "name": "@finema/core",
-  "version": "1.4.219",
+  "version": "2.1.0",
   "configKey": "core",
-  "compatibility": {
-    "nuxt": "^3.7.4"
+  "builder": {
+    "@nuxt/module-builder": "1.0.1",
+    "unbuild": "3.5.0"
   }
 }

package/dist/module.mjs

@@ -1,52 +1,13 @@
 import { defineNuxtModule, createResolver, installModule, addPlugin, addComponentsDir, addImportsDir } from '@nuxt/kit';
-import { defu } from 'defu';
+import defu from 'defu';
+import * as theme from '../dist/runtime/theme/index.js';
 
 const name = "@finema/core";
-const version = "1.4.219";
+const version = "2.1.0";
 
-const colorModeOptions = {
-  preference: "light"
-};
-const veeValidateNuxtOptions = {
-  // disable or enable auto imports
-  autoImports: true,
-  // Use different names for components
-  componentNames: {
-    Form: "VForm",
-    Field: "VField",
-    FieldArray: "VFieldArray",
-    ErrorMessage: "VErrorMessage"
-  }
-};
-const nuxtSecurityOptions = {
-  headers: {
-    xXSSProtection: "1; mode=block",
-    crossOriginEmbedderPolicy: "unsafe-none",
-    contentSecurityPolicy: {
-      "img-src": ["*", "'self'", "data:", "https", "blob:"],
-      "script-src": [
-        "'self'",
-        "'unsafe-inline'",
-        "https://www.google-analytics.com",
-        "https://www.googletagmanager.com",
-        "https://fonts.googleapis.com",
-        "https://cdnjs.cloudflare.com"
-      ],
-      "script-src-attr": [
-        "'unsafe-inline'",
-        "https://www.google-analytics.com",
-        "https://www.googletagmanager.com",
-        "https://fonts.googleapis.com",
-        "https://cdnjs.cloudflare.com"
-      ]
-    }
-  }
-};
 const nuxtAppOptions = {
   head: {
-    htmlAttrs: {
-      lang: "en"
-    },
+    htmlAttrs: { lang: "en" },
     meta: [
       { charset: "utf-8" },
       {
@@ -64,24 +25,6 @@ const nuxtAppOptions = {
       }
     ],
     link: [
-      {
-        rel: "preconnect",
-        href: "https://fonts.googleapis.com"
-      },
-      {
-        rel: "preconnect",
-        href: "https://fonts.gstatic.com",
-        crossorigin: ""
-      },
-      {
-        rel: "dns-prefetch",
-        href: "https://www.google-analytics.com/"
-      },
-      {
-        rel: "preconnect",
-        href: "https://www.google-analytics.com/",
-        crossorigin: ""
-      },
       {
         rel: "icon",
         type: "image/x-icon",
@@ -100,177 +43,96 @@ const nuxtRunTimeConfigOptions = {
   }
 };
 
-const colors = {
-  black: "#20243E",
-  white: "#FFFFFF",
-  dark: {
-    DEFAULT: "#20243E",
-    50: "#6D7280",
-    100: "#505050"
-  },
-  light: {
-    DEFAULT: "#FAFAFA"
-  },
-  gray: {
-    DEFAULT: "#9095A6",
-    disabled: "#C1C4D0",
-    border: "#E2E4EA",
-    fill: "#F4F5FA",
-    50: "#E0E0E0",
-    600: "#616161",
-    700: "#757575"
-  },
-  cool: {
-    DEFAULT: "#9095A6",
-    disabled: "#C1C4D0",
-    border: "#E2E4EA",
-    fill: "#F4F5FA",
-    50: "#E0E0E0",
-    600: "#616161",
-    700: "#757575"
-  },
-  secondary: {
-    DEFAULT: "#EE8B36",
-    50: "#fdf1e7",
-    100: "#f9d6b8",
-    200: "#f5bb89",
-    300: "#f1a05a",
-    400: "#ed852b",
-    500: "#d46b12",
-    600: "#a5540e",
-    700: "#763c0a",
-    800: "#472406",
-    900: "#180c02"
-  },
-  info: {
-    DEFAULT: "#0D8CEE",
-    50: "#F3F9FE",
-    100: "#E7F4FD",
-    200: "#EBF6FF",
-    300: "#9ED1F8",
-    400: "#56AFF3",
-    500: "#0D8CEE",
-    600: "#0C7ED6",
-    700: "#08548F",
-    800: "#063F6B",
-    900: "#042A47"
-  },
-  danger: {
-    DEFAULT: "#F25555",
-    50: "#FEF7F7",
-    100: "#FEEEEE",
-    200: "#FFDFDF",
-    300: "#FABBBB",
-    400: "#F68888",
-    500: "#F25555",
-    600: "#DA4D4D",
-    700: "#913333",
-    800: "#6D2626",
-    900: "#491A1A"
-  },
-  success: {
-    DEFAULT: "#3FB061",
-    50: "#F5FBF7",
-    100: "#ECF7EF",
-    200: "#DAEEE0",
-    300: "#B2DFC0",
-    400: "#79C890",
-    500: "#3FB061",
-    600: "#399E57",
-    700: "#266A3A",
-    800: "#1C4F2C",
-    900: "#13351D"
-  },
-  warning: {
-    DEFAULT: "#FF9A35",
-    50: "#FFFAF5",
-    100: "#FFF5EB",
-    200: "#FEF1CC",
-    300: "#FFD7AE",
-    400: "#FFB872",
-    500: "#FF9A35",
-    600: "#E68B30",
-    700: "#995C20",
-    800: "#734518",
-    900: "#4D2E10"
-  }
+const core = {
+  limit_per_page: 30,
+  default_primary_key: "id",
+  time_format: "HH:mm",
+  date_format: "dd-MM-yyyy",
+  date_time_format: "dd-MM-yyyy HH:mm",
+  date_format_system: "yyyy-MM-dd",
+  date_time_format_system: "yyyy-MM-dd HH:mm",
+  is_thai_year: false,
+  is_thai_month: false,
+  site_name: "",
+  color: "#3675FB",
+  is_simple_pagination: false,
+  time_zone: "Asia/Bangkok"
 };
 
 const module = defineNuxtModule({
   meta: {
     name,
     version,
-    configKey: "core",
-    compatibility: {
-      nuxt: "^3.7.4"
-    }
+    configKey: "core"
   },
   // Default configuration options of the Nuxt module
   defaults: {},
-  async setup(options, nuxt) {
+  async setup(_options, _nuxt) {
     const { resolve } = createResolver(import.meta.url);
     const runtimeDir = resolve("./runtime");
-    nuxt.options.build.transpile.push(runtimeDir);
-    nuxt.options.alias["#core"] = runtimeDir;
-    nuxt.options.css.push(resolve(runtimeDir, "ui.css"));
-    nuxt.hook("tailwindcss:config", (tailwindConfig) => {
-      tailwindConfig.theme.extend.colors = defu(colors, tailwindConfig.theme.extend.colors);
-      tailwindConfig.content = defu(
-        {
-          files: [
-            ...tailwindConfig.content.files || [],
-            resolve(runtimeDir, "components/**/*.{vue,mjs,ts}"),
-            resolve(runtimeDir, "composables/**/*.{vue,mjs,ts}"),
-            resolve(runtimeDir, "ui.config/**/*.{mjs,js,ts}")
-          ]
-        },
-        tailwindConfig.content
-      );
-    });
+    const stylesDir = resolve("./styles");
+    _nuxt.options.build.transpile.push(runtimeDir);
+    _nuxt.options.alias["#core"] = runtimeDir;
+    _nuxt.options.css.push(resolve(stylesDir, "main.css"));
+    _nuxt.options.app = defu(nuxtAppOptions, _nuxt.options.app);
+    _nuxt.options.runtimeConfig = defu(
+      nuxtRunTimeConfigOptions,
+      _nuxt.options.runtimeConfig
+    );
+    _nuxt.options.appConfig.core = defu(
+      _nuxt.options.appConfig.core || {},
+      core
+    );
+    _nuxt.options.colorMode = { preference: "light" };
+    _nuxt.options.appConfig.ui = {
+      colors: {
+        primary: "main",
+        secondary: "secondary",
+        tertiary: "tertiary",
+        success: "success",
+        info: "info",
+        warning: "warning",
+        error: "error",
+        neutral: "slate"
+      },
+      ...theme
+    };
     await installModule("@nuxt/ui", {
-      safelistColors: ["secondary", "success", "info", "danger", "warning"]
-    });
-    await installModule("nuxt-lodash", {
-      prefix: "_",
-      upperAfterPrefix: false
-    });
-    nuxt.options.app = defu(nuxtAppOptions, nuxt.options.app);
-    nuxt.options.colorMode = defu(colorModeOptions, nuxt.options.colorMode);
-    nuxt.options.devtools = defu({ enabled: true }, nuxt.options.devtools);
-    nuxt.options.runtimeConfig = defu(nuxtRunTimeConfigOptions, nuxt.options.runtimeConfig);
-    nuxt.options.build = defu(
-      {
-        transpile: [
-          ...nuxt.options.build?.transpile || [],
-          "date-fns",
-          "date-fns-tz",
-          "@vuepic/vue-datepicker",
-          "defu"
+      prefix: "",
+      colorMode: false,
+      theme: {
+        colors: [
+          "primary",
+          "secondary",
+          "tertiary",
+          "info",
+          "success",
+          "warning",
+          "error"
         ]
-      },
-      nuxt.options.build
-    );
-    nuxt.options.vite = defu(
+      }
+    });
+    await installModule("@pinia/nuxt");
+    await installModule(
+      "@vee-validate/nuxt",
       {
-        optimizeDeps: {
-          include: [...nuxt.options.vite?.optimizeDeps?.include || [], "@wdns/vue-code-block"]
+        autoImports: true,
+        componentNames: {
+          Form: "VForm",
+          Field: "VField",
+          FieldArray: "VFieldArray",
+          ErrorMessage: "VErrorMessage"
         }
-      },
-      nuxt.options.vite
+      }
     );
-    await installModule("@pinia/nuxt");
-    await installModule("@vee-validate/nuxt", veeValidateNuxtOptions);
-    if (!options.securityDisabled) {
-      await installModule("nuxt-security", nuxtSecurityOptions);
-    }
-    addPlugin({
-      src: resolve(runtimeDir, "plugin")
+    await installModule("nuxt-lodash", {
+      prefix: "_",
+      upperAfterPrefix: false
     });
+    addPlugin(resolve("./runtime/plugin"));
     void addComponentsDir({
       path: resolve(runtimeDir, "components"),
-      prefix: options.prefix,
-      global: options.global,
-      watch: false
+      prefix: _options.prefix
     });
     addImportsDir(resolve(runtimeDir, "composables"));
     addImportsDir(resolve(runtimeDir, "utils"));

package/dist/runtime/components/App.vue

@@ -0,0 +1,27 @@
+<template>
+  <NuxtLoadingIndicator :color="coreConfig.color" />
+  <UApp :locale="th">
+    <slot />
+  </UApp>
+  <DevOnly>
+    <DevToolsWindow />
+  </DevOnly>
+</template>
+
+<script setup>
+import { th } from "@nuxt/ui/locale";
+import UApp from "#ui/components/App";
+import { useHead } from "#imports";
+import { useCoreConfig } from "#core/composables/useConfig";
+import DevToolsWindow from "#core/components/DevToolsWindow/index.vue";
+const coreConfig = useCoreConfig();
+useHead({
+  titleTemplate: (titleChunk) => {
+    return titleChunk ? `${titleChunk} %separator %siteName` : "%siteName";
+  },
+  templateParams: {
+    siteName: coreConfig.site_name,
+    separator: "-"
+  }
+});
+</script>

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

@@ -0,0 +1,12 @@
+declare var __VLS_9: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};