create-m2m-bo-template-vue 1.0.8 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-m2m-bo-template-vue",
-  "version": "1.0.8",
+  "version": "1.1.0",
   "description": "Scaffolding CLI for the M2M back-office vue template.",
   "type": "module",
   "bin": {
@@ -16,9 +16,11 @@
   "scripts": {
     "lint": "eslint .",
     "format": "prettier --check .",
-    "test": "node smoke-test.mjs",
+    "test": "node scripts/check-styles.mjs && node scripts/check-structure.mjs && node smoke-test.mjs",
     "start": "node index.js",
-    "release": "semantic-release"
+    "release": "semantic-release",
+    "check:styles": "node scripts/check-styles.mjs",
+    "check:structure": "node scripts/check-structure.mjs"
   },
   "keywords": [
     "create",

package/template/CLAUDE.md

@@ -20,7 +20,7 @@
    - `/template` 상위(예: 리포지토리 루트의 배포 설정, CI/CD, `.gitlab-ci.yml`, 루트 `package.json` 등)는 배포 및 테스트 영역이므로 수정 금지.
    - 모든 작업은 `/template` 디렉토리 내부에서만 수행합니다.
 3. **React와 Vue는 언어(프레임워크) 차원에서는 다르지만, 화면에 보이는 결과(레이아웃/스타일/인터랙션)는 항상 동일해야 한다.**
-   - CSS Modules(`*.module.css`)는 Vue에서도 동일 파일명·동일 클래스 구조로 그대로 포팅합니다 (`<style module>` 또는 CSS Modules 그대로 사용).
+   - CSS Modules(`*.module.scss`)는 Vue에서도 동일 파일명·동일 클래스 구조로 그대로 포팅합니다 (`<style module>` 또는 CSS Modules 그대로 사용).
    - 페이지 타이틀, 문구(한국어 텍스트), 표/컬럼 구성, 필터, 뱃지, 상태값 등은 1:1로 동일해야 합니다.
    - 아이콘은 `lucide-react` → `lucide-vue-next`로 대응합니다 (아이콘 이름 동일).
    - UI 컴포넌트는 `m2m-uiux-react/<Component>` → `m2m-uiux-vue/<Component>` 서브패스 import로 대응합니다.
@@ -49,7 +49,7 @@ React 참고 코드는 `m2m-uiux-react`를 직접 각 페이지에서 import해
 | `useMemo` / `useCallback` | `computed` / 일반 함수 (Vue는 별도 메모이제이션이 대부분 불필요) |
 | custom hooks (`useXxx.ts`) | composables (`useXxx.ts`, 동일 파일명 유지, Composition API로 재작성) |
 | `.tsx` 컴포넌트 | `.vue` SFC (`<script setup lang="ts">`) |
-| `*.module.css` | 동일 파일명의 CSS Modules 그대로 유지 |
+| `*.module.scss` | 동일 파일명의 CSS Modules 그대로 유지 |
 | `lucide-react` | `lucide-vue-next` |
 | `m2m-uiux-react/*` | `m2m-uiux-vue/*` |
 | 순수 데이터/유틸 `*.ts` (`data/*.ts`, `lib/business.ts`, `lib/theme.ts`, `lib/nav.ts` 등 프레임워크 비의존 로직) | 대부분 그대로 복사 (React 의존 부분만 Vue로 치환) |
@@ -58,6 +58,35 @@ React 참고 코드는 `m2m-uiux-react`를 직접 각 페이지에서 import해
 
 React의 `src/pages/**`, `src/components/**`, `src/lib/**`, `src/data/**` 디렉토리 구조와 파일명을 최대한 그대로 유지합니다
 (`.tsx` → `.vue`, 나머지 `.ts` 파일은 파일명 유지). 라우트 경로(URL)도 React `App.tsx`의 라우트 테이블과 완전히 동일하게 구성합니다.
+컴포넌트/화면은 React와 동일하게 폴더 단위로 둡니다: `FooPage/FooPage.vue` + (있다면) `FooPage/FooPage.module.scss` +
+`FooPage/index.ts`(배럴: `export { default } from './FooPage.vue'; export * from './FooPage.vue';`). 다른 파일은 이 배럴을 통해
+확장자 없이 import 합니다(`from '../pages/foo/FooPage'`), React 쪽이 `from './FooPage'`로 import 하는 것과 동일합니다.
+
+## 스타일 (SCSS)
+
+- 스타일 파일은 `.scss`만 씁니다(`.css` 금지). CSS Modules는 `*.module.scss`.
+- 전역 스타일: `template/src/style.scss`(디자인 토큰 `--common-*` 정의, 순수 CSS 문법 그대로 유지).
+- 예외: `m2m-uiux-vue/style.css`처럼 라이브러리에서 그대로 가져오는 CSS import는 그대로 둡니다.
+- 컴파일러는 `sass`(devDependency)이고, `vite.config.ts`가 처리합니다.
+
+### sass 라이브러리 (믹스인 · 함수)
+
+- `template/src/styles/`가 공용 sass 라이브러리입니다. `vite.config.ts`가 모든 `.scss` 앞에
+  `@use "styles" as *;`를 넣어 주므로, **어느 파일에서든 바로 쓸 수 있습니다**(직접 `@use` 하지 않습니다).
+  - `_tokens.scss` — 글자 크기·두께·반경·레이어 맵
+  - `_functions.scss` — `rem()` `fs()` `fw()` `radius()` `layer()` `tint()` `token()` `ink()` `line()` `bg()`
+  - `_mixins.scss` — `flex()` `flex-between()` `flex-col()` `truncate()` `text()` `surface()`
+    `divider()` `badge()` `page-title` `page-subtitle` 등
+  - `_patterns.scss` — 목록 화면 조각: `result-row` `cell-meta` `cell-title` `amount-cell` `form-row` 등
+- 같은 값을 다시 적지 않습니다. `display:flex` 3종 세트, `font-size` + `font-weight` + `color`,
+  `border` + `border-radius` 조합은 믹스인으로 씁니다.
+- `font-size: 0.71875rem`처럼 계산된 rem을 직접 쓰지 않습니다. `fs(base)` 또는 `fs(11.5)`를 씁니다.
+- 반경은 `radius(8)`처럼 px 값을 넘깁니다. 공통 토큰이 있는 크기는 함수가 `var(--common-radius-*)`로 바꿔 줍니다.
+- 화면 고유 치수(카드 최소 폭, 칸 높이 등)는 파일 상단에 `$변수`로 모으고 필요하면 연산(`$pad + 2px`)합니다.
+- `template/src` 아래 `.module.scss`는 모두 이 라이브러리를 쓰도록 옮겨 두었습니다. 새 파일도 같은 방식으로 씁니다.
+  전역 `style.css`는 토큰 정의 파일이라 순수 CSS 문법 그대로 둡니다.
+- 이 라이브러리는 React 참고 디렉토리의 `template/src/styles/`와 함수/믹스인 이름·동작이 100% 동일합니다
+  (`--common-*` CSS 토큰이 두 프로젝트에서 같은 값이므로 그대로 포팅했습니다).
 
 ## 작업 시 체크리스트
 

package/template/package-lock.json

@@ -17,6 +17,7 @@
         "@types/node": "^24.13.3",
         "@vitejs/plugin-vue": "^6.0.8",
         "@vue/tsconfig": "^0.9.1",
+        "sass": "^1.105.1",
         "typescript": "~6.0.2",
         "vite": "^8.2.2",
         "vue-tsc": "^3.3.11"
@@ -392,6 +393,294 @@
         "url": "https://github.com/sponsors/oxc-project"
       }
     },
+    "node_modules/@parcel/watcher": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.6.0.tgz",
+      "integrity": "sha512-7FNeNl8NCE7aINx7WXiKQrPYZWC/hvrTsmk6zmxbI7LTXE7hVek/n8AfVgpe2y82zl3w0HvCHN0bVKMBoJcC0w==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "detect-libc": "^2.0.3",
+        "is-glob": "^4.0.3",
+        "node-addon-api": "^7.0.0",
+        "picomatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher-android-arm64": "2.6.0",
+        "@parcel/watcher-darwin-arm64": "2.6.0",
+        "@parcel/watcher-darwin-x64": "2.6.0",
+        "@parcel/watcher-freebsd-x64": "2.6.0",
+        "@parcel/watcher-linux-arm-glibc": "2.6.0",
+        "@parcel/watcher-linux-arm-musl": "2.6.0",
+        "@parcel/watcher-linux-arm64-glibc": "2.6.0",
+        "@parcel/watcher-linux-arm64-musl": "2.6.0",
+        "@parcel/watcher-linux-x64-glibc": "2.6.0",
+        "@parcel/watcher-linux-x64-musl": "2.6.0",
+        "@parcel/watcher-win32-arm64": "2.6.0",
+        "@parcel/watcher-win32-x64": "2.6.0"
+      }
+    },
+    "node_modules/@parcel/watcher-android-arm64": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.6.0.tgz",
+      "integrity": "sha512-trgpLSCKRC/huFjXX/Smh+0sWe4+YtKfktIToiMl59ghz7z+qkH6kMvNnUbLyRs9N11t8l4svSCs1+5B3rOAhA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-arm64": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.6.0.tgz",
+      "integrity": "sha512-Y3QV0gl7Q1zbfueunkWIERICbEojQFCgpyG7YqOGNFLsckXyI1xu9mAIUpKY9QBYzBtSkN8dBPwd3yiAO9ovMw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-x64": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.6.0.tgz",
+      "integrity": "sha512-Ohv6OpzhUfKYD7Beb8kDvG0jbIxORCYY1JRdZnaBtnjjkJxgD7ZVL0nw2sCYd0yTMKTvz3nnTnOF3cDifK+kvw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-freebsd-x64": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.6.0.tgz",
+      "integrity": "sha512-5HmXvDgs8VK+74jF9y9/2FE3/OnlcKmc56tjmSrEuZjpSZOGL+fvAu+HKJBdPs9uwoP2hE6TlSUpXZ/C5jUFmQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-glibc": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.6.0.tgz",
+      "integrity": "sha512-Ps/hui3A+vMbjdqlqAowK2ZL8+BO8dBjxeWXj6npTBs3jx4wWmbPpaLuqwrQrSqIVMCnpWo238bJ1U37GhQOYg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-musl": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.6.0.tgz",
+      "integrity": "sha512-9c6AUHgHoG+IY88MRIHupztQiQnrbqHYQjkM2btA+Bf/wQnQMuiD0Wfk1EVv3TlNT3x41uU71rn6E4xh/+zvkw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-glibc": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.6.0.tgz",
+      "integrity": "sha512-yHRqS2owEXe6Hic9z6Mh1ECsCd+ODVOGvZDyciqRd21+v+o+DnXMOrw50DSpIG2sb8GPEaPPmfeCAWKPJdq46g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-musl": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.6.0.tgz",
+      "integrity": "sha512-WhB2e/V7rqdHHWZusBSPuy5Ei8S6lSz6FE5TKKQz5h3a0O+C+mhY7vxU9b/stqvMb8beLnPY82ZrFTLKs+SrKA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-glibc": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.6.0.tgz",
+      "integrity": "sha512-ulGE6x6Oz6iAwg75T8YQSoguBWasniIbX+QWpaYPcCnDOpdWX3k+4xbEYPZVLxOuoJI+svJJPD3sEj8G7lrQ3A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-musl": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.6.0.tgz",
+      "integrity": "sha512-tkBYKt7YQrjIJWYDnto2YgO8MRkjlMTSNoRHzsXinBqbLdeOM3L32wPZJvIZxqaLMfSlS/4sUjH/6STVP/XDLw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-arm64": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.6.0.tgz",
+      "integrity": "sha512-gIZAP23jaHjGWasY/TY6yL7NHFClf0Ga7FN+iINvk+KN94rhm94lYZhFsbYFNcA04/onvGD9kKmiJLJB2HbNwQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-x64": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.6.0.tgz",
+      "integrity": "sha512-cA+/pXV2YkfxlIcXOQ5fSWqAzzPyD78/x5qbK/I0vUkrlYHA8TIz+MXjAbGouguKVSI4bOmkTSJ1/poVSsgt+A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
     "node_modules/@rolldown/binding-android-arm-eabi": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm-eabi/-/binding-android-arm-eabi-1.2.7.tgz",
@@ -1369,6 +1658,22 @@
         "node": ">=6"
       }
     },
+    "node_modules/chokidar": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz",
+      "integrity": "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "readdirp": "^5.0.0"
+      },
+      "engines": {
+        "node": ">= 20.19.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/commander": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
@@ -2072,6 +2377,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/immutable": {
+      "version": "5.1.9",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.9.tgz",
+      "integrity": "sha512-m8nVez3rwrgmWxtLMt1ZYXB2Lv7OKYn/disyxAlSDYAlKSlFoPPfIAmAM/M5xqL4m4C/wAPw7S2/CNaUii1Hxg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/import-fresh": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
@@ -2118,6 +2430,31 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -2545,6 +2882,14 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/node-addon-api": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -2674,6 +3019,20 @@
       "integrity": "sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g==",
       "license": "ISC"
     },
+    "node_modules/readdirp": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.1.1.tgz",
+      "integrity": "sha512-Kko+Y5XQ6fM+Ce3dq3m9YGxnacYZYl9cA1wZjaF3Vbry2L3i1qVg8+CAgNPsXRArPMUMCaOR7oa9Nqntc43JKA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 20.19.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/resolve": {
       "version": "1.22.12",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz",
@@ -2765,6 +3124,27 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "license": "MIT"
     },
+    "node_modules/sass": {
+      "version": "1.105.1",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.105.1.tgz",
+      "integrity": "sha512-1CnAWPyrrnVQzXGB/DUep1vYCKCm1CIBr+YxjjiW6wk9qtzemnGP4qicH56T2F9S4Hjtv/Ne3jDz8JqfdDU4oA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^5.0.0",
+        "immutable": "^5.1.5",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher": "^2.4.1"
+      }
+    },
     "node_modules/source-map": {
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",

package/template/package.json

@@ -9,15 +9,16 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.5.41",
-    "vue-router": "^4.6.4",
+    "lucide-vue-next": "^1.0.0",
     "m2m-uiux-vue": "^0.1.22",
-    "lucide-vue-next": "^1.0.0"
+    "vue": "^3.5.41",
+    "vue-router": "^4.6.4"
   },
   "devDependencies": {
     "@types/node": "^24.13.3",
     "@vitejs/plugin-vue": "^6.0.8",
     "@vue/tsconfig": "^0.9.1",
+    "sass": "^1.105.1",
     "typescript": "~6.0.2",
     "vite": "^8.2.2",
     "vue-tsc": "^3.3.11"

package/template/src/components/DataGrid/CellView/CellView.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Badge } from 'm2m-uiux-vue/Badge';
+import styles from '../DataGrid.module.scss';
+import RowMenuView from '../RowMenuView';
+import type { Cell } from '../types';
+
+defineProps<{ cell: Cell }>();
+
+const thumbFailed = ref(false);
+</script>
+
+<template>
+  <span
+    v-if="cell.kind === 'text'"
+    :title="cell.tip"
+    :class="styles.textCell"
+    :style="{ fontSize: cell.size ?? '0.75rem', color: cell.color, fontWeight: cell.weight, fontVariantNumeric: cell.numeric ? 'tabular-nums' : undefined }"
+  >{{ cell.text }}</span>
+
+  <div v-else-if="cell.kind === 'pillText'" style="min-width: 0">
+    <span :class="styles.pillTextValue" :style="{ background: cell.bg, color: cell.fg, padding: '2px 8px', fontSize: cell.size ?? '0.6875rem', fontWeight: cell.weight ?? 600 }">{{ cell.text }}</span>
+    <span v-if="cell.sub" :class="styles.pillTextSub">{{ cell.sub }}</span>
+  </div>
+
+  <Badge v-else-if="cell.kind === 'badge'" type="ghost" :style="{ background: cell.bg, color: cell.fg }">{{ cell.text }}</Badge>
+
+  <span v-else-if="cell.kind === 'badgeSub'">
+    <span :class="styles.badgeSub" :style="{ background: cell.bg, color: cell.fg }">{{ cell.text }}</span>
+    <span v-if="cell.subText" :class="styles.badgeSubText">{{ cell.subText }}</span>
+  </span>
+
+  <span v-else-if="cell.kind === 'badgeSquare'" :class="styles.badgeSquare" :style="{ background: cell.bg, color: cell.fg }">{{ cell.text }}</span>
+
+  <span v-else-if="cell.kind === 'checkGroup'" :class="styles.checkGroup">
+    <span v-for="item in cell.items" :key="`${item.label}-${item.tone}`" :class="[styles.checkChip, (styles as Record<string, string>)[`checkChip_${item.tone}`]]">
+      <i aria-hidden="true">{{ item.tone === 'success' ? '✓' : item.tone === 'error' ? '×' : item.tone === 'warning' ? '!' : '·' }}</i>
+      {{ item.label }}
+    </span>
+  </span>
+
+  <span v-else-if="cell.kind === 'statusDot'" :class="styles.statusDot" :style="{ color: cell.fg }">
+    <span :class="styles.dot" :style="{ background: cell.dot }" />
+    {{ cell.text }}
+  </span>
+
+  <div v-else-if="cell.kind === 'stack'" style="min-width: 0">
+    <div :class="styles.stackTitle">{{ cell.title }}</div>
+    <div :class="styles.stackSub">{{ cell.subtitle }}</div>
+  </div>
+
+  <div v-else-if="cell.kind === 'avatarText'" :class="styles.avatarText">
+    <div :class="styles.avatar" :style="{ width: '24px', height: '24px', background: cell.avatarBg, color: cell.avatarFg }">{{ cell.avatarChar }}</div>
+    <div :class="styles.avatarTitleRow">
+      <span :class="styles.avatarTitle">{{ cell.title }}</span>
+      <span :class="styles.avatarSub">{{ cell.subtitle }}</span>
+    </div>
+  </div>
+
+  <span v-else-if="cell.kind === 'link'" :class="styles.link">{{ cell.text }}</span>
+
+  <div v-else-if="cell.kind === 'progress'" :class="styles.progressWrap">
+    <span :class="styles.progressTrack"><span :class="styles.progressFill" :style="{ width: `${cell.pct}%` }" /></span>
+    <span :class="styles.progressLabel">{{ cell.label }}</span>
+  </div>
+
+  <div v-else-if="cell.kind === 'titleWarn'" :class="styles.titleWarn">
+    <span :class="styles.titleWarnText">{{ cell.title }}</span>
+    <span v-if="cell.hasIssue" :title="cell.issueTitle" :class="styles.warnIcon">⚠</span>
+  </div>
+
+  <div v-else-if="cell.kind === 'titleDesc'" :class="styles.titleWarn">
+    <div style="min-width: 0">
+      <div :class="styles.stackTitle">{{ cell.title }}</div>
+      <div :class="styles.stackSub">{{ cell.desc }}</div>
+    </div>
+    <span v-if="cell.issue" :title="cell.issueTitle" :class="styles.warnIcon">⚠</span>
+  </div>
+
+  <span v-else-if="cell.kind === 'noWarn'" :class="styles.noWarn">
+    <span :class="styles.noWarnText">{{ cell.no }}</span>
+    <span v-if="cell.hasIssue" :title="cell.issueTitle" :class="styles.warnIcon">⚠</span>
+  </span>
+
+  <span v-else-if="cell.kind === 'noTag'" :class="styles.noWarn">
+    <span :class="styles.noWarnText">{{ cell.no }}</span>
+    <span v-if="cell.hasTag" :class="styles.noTagTag" :style="{ color: cell.tagFg, background: cell.tagBg }">{{ cell.tagText }}</span>
+  </span>
+
+  <div v-else-if="cell.kind === 'thumbTitle'" :class="styles.thumbTitle">
+    <img
+      v-if="cell.imageSrc && !thumbFailed"
+      :class="[styles.thumb, styles.thumbImage]"
+      :src="cell.imageSrc"
+      alt=""
+      @error="thumbFailed = true"
+    />
+    <div v-else :class="styles.thumb" :style="{ background: `repeating-linear-gradient(135deg, ${cell.thumb} 0 6px, #fff 6px 12px)` }" aria-hidden="true" />
+    <div style="min-width: 0">
+      <button type="button" :class="styles.thumbTitleBtn" :style="{ color: cell.titleFg }" @click="cell.onClick?.()">{{ cell.title }}</button>
+      <span :class="styles.thumbTitleId">#{{ cell.id }}</span>
+    </div>
+  </div>
+
+  <RowMenuView v-else-if="cell.kind === 'rowMenu'" :cell="cell" />
+
+  <component :is="cell.content" v-else-if="cell.kind === 'custom'" />
+</template>

package/template/src/components/DataGrid/CellView/index.ts

@@ -0,0 +1,2 @@
+export { default } from './CellView.vue';
+export * from './CellView.vue';