@finema/finework-layer 0.0.2

package/.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_size = 2
+indent_style = space
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

package/.nuxtrc

@@ -0,0 +1 @@
+typescript.includeWorkspace = true

package/.playground/app.config.ts

@@ -0,0 +1,5 @@
+export default defineAppConfig({
+  myLayer: {
+    name: 'My amazing Nuxt layer (overwritten)'
+  }
+})

package/.playground/nuxt.config.ts

@@ -0,0 +1,12 @@
+import { fileURLToPath } from 'node:url'
+
+export default defineNuxtConfig({
+  extends: ['..'],
+  modules: ['@nuxt/eslint'],
+  eslint: {
+    config: {
+      // Use the generated ESLint config for lint root project as well
+      rootDir: fileURLToPath(new URL('..', import.meta.url))
+    }
+  }
+})

package/.release-it.json

@@ -0,0 +1,20 @@
+{
+  "git": {
+    "commitMessage": "chore(release): ${version}"
+  },
+  "npm": {
+    "publish": true
+  },
+  "hooks": {
+  },
+  "plugins": {
+    "@release-it/conventional-changelog": {
+      "preset": {
+        "name": "conventionalcommits"
+      },
+      "infile": "CHANGELOG.md",
+      "header": "# Changelog",
+      "ignoreRecommendedBump": true
+    }
+  }
+}

package/CHANGELOG.md

@@ -0,0 +1,3 @@
+# Changelog
+
+## 0.0.2 (2025-10-09)

package/README.md

@@ -0,0 +1,73 @@
+# Nuxt Layer Starter
+
+Create Nuxt extendable layer with this GitHub template.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+pnpm install
+```
+
+## Working on your layer
+
+Your layer is at the root of this repository, it is exactly like a regular Nuxt project, except you can publish it on NPM.
+
+The `.playground` directory should help you on trying your layer during development.
+
+Running `pnpm dev` will prepare and boot `.playground` directory, which imports your layer itself.
+
+## Distributing your layer
+
+Your Nuxt layer is shaped exactly the same as any other Nuxt project, except you can publish it on NPM.
+
+To do so, you only have to check if `files` in `package.json` are valid, then run:
+
+```bash
+npm publish --access public
+```
+
+Once done, your users will only have to run:
+
+```bash
+npm install --save your-layer
+```
+
+Then add the dependency to their `extends` in `nuxt.config`:
+
+```ts
+defineNuxtConfig({
+  extends: 'your-layer'
+})
+```
+
+## Development Server
+
+Start the development server on http://localhost:3000
+
+```bash
+pnpm dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+pnpm build
+```
+
+Or statically generate it with:
+
+```bash
+pnpm generate
+```
+
+Locally preview production build:
+
+```bash
+pnpm preview
+```
+
+Checkout the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

package/app/app.config.ts

@@ -0,0 +1,298 @@
+
+export default defineAppConfig({
+  core: {
+    is_thai_year: false,
+    is_thai_month: false,
+    date_format: 'dd MMM yyyy',
+    month_format: 'MMM yyyy',
+    date_time_format: 'dd/MM/yyyy HH:mm น.',
+    color: '#335AFF',
+    limit_per_page: 15,
+    locale: 'en',
+  },
+  ui: {
+    colors: {
+      white: 'white',
+    },
+    dialog: {
+      icons: {
+        iconInfo: 'material-symbols:info-outline',
+        iconConfirm: 'material-symbols:info-outline',
+      },
+      slots: {
+        iconWrapper: 'rounded-full size-[48px] flex justify-center items-center',
+        icon: 'size-6',
+        base: [
+          'rounded-xl flex-col justify-start items-start space-x-0 bg-[url(/dialog-bg.png)] bg-no-repeat bg-top-left bg-size-[220px]',
+          'max-sm:top-auto max-sm:bottom-0 max-sm:left-0 max-sm:right-0 max-sm:translate-x-0 max-sm:translate-y-0 max-sm:w-full max-sm:max-w-full max-sm:rounded-b-none max-sm:rounded-t-xl',
+        ],
+        overlay: 'bg-black/50 backdrop-blur',
+        description: 'whitespace-pre-line',
+        wrapper: 'justify-start items-start',
+        title: 'mt-4',
+        buttonGroup: 'justify-center w-full mt-6',
+        cancelButton: 'w-full justify-center',
+        confirmButton: 'w-full justify-center',
+      },
+      variants: {
+        color: {
+          success: {
+            icon: 'text-success',
+            iconWrapper: 'bg-success/10',
+          },
+          info: {
+            icon: 'text-info',
+            iconWrapper: 'bg-info/10',
+          },
+          warning: {
+            icon: 'text-warning',
+            iconWrapper: 'bg-warning/10',
+          },
+          error: {
+            icon: 'text-error',
+            iconWrapper: 'bg-error/10',
+          },
+          loading: {
+            icon: 'text-primary size-10',
+            base: 'max-w-[400px] bg-none',
+            wrapper: 'justify-center',
+          },
+        },
+        confirm: {
+          true: {},
+          false: {},
+        },
+      },
+    },
+    slideover: {
+      slots: {
+        overlay: 'bg-black/50 backdrop-blur',
+      },
+    },
+    toast: {
+      slots: {
+        root: 'rounded-xl',
+        icon: 'size-8',
+      },
+    },
+    card: {
+      slots: {
+        root: '!bg-white',
+        header: 'text-lg font-bold',
+      },
+      variants: {
+        variant: {
+          soft: {
+            root: 'bg-elevated/50 divide-y divide-default shadow-[0px_2px_14px_0px_rgba(0,0,0,0.06)]',
+          },
+        },
+      },
+    },
+    switch: {
+      slots: {
+        base: 'cursor-pointer',
+        label: 'cursor-pointer',
+      },
+    },
+    breadcrumb: {
+      variants: {
+        active: {
+          true: {
+            link: 'text-black font-semibold',
+          },
+        },
+      },
+    },
+    tabs: {
+      slots: {
+        label: 'whitespace-nowrap',
+        list: 'relative flex p-1 group overflow-x-auto overflow-y-hidden scrollbar-hide',
+        trigger: 'data-[state=active]:font-bold cursor-pointer whitespace-nowrap shrink-0',
+      },
+      defaultVariants: {
+        size: 'xl',
+      },
+    },
+    modal: {
+      slots: {
+        overlay: 'bg-black/50 backdrop-blur',
+        title: 'text-xl font-bold',
+        content: [
+          'divide-none overflow-visible flex flex-col',
+          'max-sm:top-auto max-sm:bottom-0 max-sm:left-0 max-sm:right-0 max-sm:translate-x-0 max-sm:translate-y-0 max-sm:w-full max-sm:max-w-full max-sm:h-auto max-sm:max-h-[90dvh] max-sm:rounded-b-none max-sm:rounded-t-lg',
+        ],
+        body: 'sm:pt-0 pt-0 overflow-y-auto flex-1 overflow-x-visible',
+        footer: 'w-full',
+      },
+      variants: {
+        fullscreen: {
+          false: {
+            content: 'overflow-visible',
+          },
+        },
+      },
+    },
+    pagination: {
+      slots: {
+        first: 'disabled:hidden',
+        prev: 'disabled:hidden',
+        next: 'disabled:hidden',
+        last: 'disabled:hidden',
+      },
+    },
+    table: {
+      slots: {
+        root: 'rounded-t-md rounded-b-md bg-white',
+        captionContainer: 'hidden',
+        paginationInfo: 'text-gray-600',
+        paginationContainer: 'items-center flex-col lg:flex-row gap-4',
+        thead: 'bg-primary',
+        th: 'text-[#222222] bg-white whitespace-nowrap',
+        td: 'text-[#222222]',
+      },
+      variants: {
+        pinned: {
+          true: {
+            th: 'sticky bg-gray-100 data-[pinned=left]:left-0 data-[pinned=right]:right-0 z-[100] ',
+            td: 'sticky bg-gray-50 data-[pinned=left]:left-0 data-[pinned=right]:right-0   ',
+          },
+        },
+        sticky: {
+          true: {
+            thead: 'sticky top-0 inset-x-0 bg-primary z-[1] backdrop-blur',
+            tfoot: 'sticky bottom-0 inset-x-0 bg-white z-[1] backdrop-blur',
+          },
+        },
+      },
+    },
+    formField: {
+      slots: {
+        label: 'font-bold',
+      },
+    },
+    input: {
+      variants: {
+        size: {
+          xl: {
+            base: 'py-2.5 disabled:bg-[#F5F5F5] disabled:text-[#737373] disabled:cursor-not-allowed',
+          },
+        },
+      },
+      defaultVariants: {
+        size: 'xl',
+      },
+    },
+    inputNumber: {
+      variants: {
+        size: {
+          xl: 'py-2.5 disabled:bg-[#F5F5F5] disabled:text-[#737373] disabled:cursor-not-allowed',
+        },
+      },
+      defaultVariants: {
+        size: 'xl',
+      },
+    },
+    inputTags: {
+      variants: {
+        size: {
+          xl: {
+            base: 'py-2.5 disabled:bg-[#F5F5F5] disabled:text-[#737373] disabled:cursor-not-allowed w-full',
+          },
+        },
+      },
+      defaultVariants: {
+        size: 'xl',
+      },
+    },
+    dateTime: {
+      slots: {
+        clearIcon: 'size-6 mr-3',
+      },
+    },
+    selectMenu: {
+      slots: {
+        base: 'cursor-pointer w-full',
+        item: 'cursor-pointer max-sm:h-14',
+        clearIcon: 'size-6',
+      },
+      variants: {
+        size: {
+          xl: {
+            base: 'py-2.5 disabled:bg-[#F5F5F5] disabled:text-[#737373] disabled:cursor-not-allowed',
+          },
+        },
+      },
+      defaultVariants: {
+        size: 'xl',
+      },
+    },
+    textarea: {
+      variants: {
+        size: {
+          xl: {
+            base: 'py-2.5 disabled:bg-[#F5F5F5] disabled:text-[#737373] disabled:cursor-not-allowed',
+          },
+        },
+      },
+      defaultVariants: {
+        size: 'xl',
+      },
+    },
+    button: {
+      slots: {
+        base: ['rounded-lg cursor-pointer'],
+      },
+      variants: {
+        size: {
+          xl: {
+            base: 'py-2.5 font-semibold',
+          },
+        },
+      },
+      compoundVariants: [
+        {
+          color: 'white',
+          variant: 'solid',
+          class: 'text-black',
+        },
+      ],
+      defaultVariants: {
+        size: 'xl',
+      },
+    },
+    stepper: {
+      variants: {
+        size: {
+          xs: {
+            trigger: 'size-8',
+            icon: 'size-6',
+            title: 'text-base font-bold',
+            description: 'text-sm',
+            wrapper: 'mt-1.5',
+          },
+        },
+      },
+      defaultVariants: {
+        size: 'xs',
+      },
+    },
+    dropdownMenu: {
+      slots: {
+        content: 'cursor-pointer w-full',
+        item: 'cursor-pointer max-sm:h-14',
+        clearIcon: 'size-6',
+      },
+      variants: {
+        size: {
+          lg: {
+            content: 'text-sm py-2.5 disabled:bg-[#F5F5F5] disabled:text-[#737373] disabled:cursor-not-allowed',
+          },
+        },
+      },
+      defaultVariants: {
+        size: 'lg',
+      },
+    },
+
+  },
+})

package/app/app.vue

@@ -0,0 +1,10 @@
+<template>
+  <App
+    :toaster="{
+      position: 'top-right',
+      progress: false,
+    }"
+  >
+    <NuxtPage />
+  </App>
+</template>