@mptw/skylens-ui 1.4.109 → 1.5.1

package/AGENTS.md

@@ -0,0 +1,59 @@
+# AGENTS.md
+
+This file provides context, development standards, and instructions for AI agents working in this repository.
+
+## Overview
+
+`@mptw/skylens-ui` is a **Nuxt Layer** library designed to be extended by other Nuxt applications. The core UI components and reusable logic reside in the repository root (`/app`), while the `.playground` directory serves as a local implementation environment for development, testing, and previewing.
+
+## Technical Stack
+
+- **Framework**: Nuxt 4 (`nuxt` v4.x) / Vue 3 Composition API (`vue` v3.5+)
+- **Styling**: Tailwind CSS v4 (`tailwindcss` v4.x + `@tailwindcss/vite`)
+- **Templating**: Pug (`pug` / `@vue/language-plugin-pug`) for Vue component templates
+- **Data Visualization**: ECharts (`echarts` + `vue-echarts`)
+- **Key Libraries**: GSAP, Swiper, V-Calendar, Date-fns, Lodash-es, RxJS, SortableJS, CommonMark, DOMPurify, ExcelJS
+
+## Architecture & File Structure
+
+```
+.
+├── app/                  # Core Nuxt Layer source code
+│   ├── assets/           # Global styles and static design assets
+│   ├── components/       # Reusable UI components (prefixed with `SL`, e.g., `SLButton.vue`)
+│   ├── interface/        # TypeScript interface & type definitions
+│   ├── models/           # Data models, domain logic, and state management
+│   ├── plugins/          # Nuxt framework plugins
+│   └── utils/            # Utility functions and shared helpers
+├── .playground/          # Sandbox Nuxt app used to test & demo layer components
+├── nuxt.config.ts        # Main Nuxt layer configuration
+├── package.json          # Package dependencies & scripts
+└── eslint.config.js      # ESLint configuration
+```
+
+## Development Commands
+
+Execute development scripts using `npm` or `pnpm`:
+
+- **Development Server** (boots `.playground`): `npm run dev`
+- **Prepare Playground**: `npm run dev:prepare`
+- **Production Build**: `npm run build`
+- **Static Generation**: `npm run generate`
+- **Preview Production Build**: `npm run preview`
+- **Lint Codebase**: `npm run lint`
+
+## Code Guidelines & Best Practices
+
+1. **Component Conventions**:
+   - Write components using Vue 3 Composition API with `<script setup lang="ts">`.
+   - Use Pug for templates (`<template lang="pug">`).
+   - Name reusable UI components in `app/components/` with the `SL` prefix (e.g., `SLButton.vue`).
+
+2. **Styling**:
+   - Use Tailwind CSS v4 for styling.
+   - Maintain global design system tokens and assets inside `app/assets/`.
+
+3. **Development Workflow**:
+   - Implement reusable layer code inside `app/`.
+   - Verify features and component renders within the `.playground/` environment via `npm run dev`.
+   - Run `npm run lint` before committing code changes.

package/CLAUDE.md

@@ -0,0 +1,36 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Development Commands
+
+- Dev server (boots .playground): `npm run dev`
+- Prepare playground: `npm run dev:prepare`
+- Build for production: `npm run build`
+- Statically generate: `npm run generate`
+- Preview production build: `npm run preview`
+- Lint codebase: `npm run lint`
+
+## Architecture & Structure
+
+This repository is a **Nuxt Layer**, designed to be extended by other Nuxt projects. The reusable logic and UI reside in the root, while the `.playground` directory serves as a local implementation for development and testing.
+
+### Core Layer Structure (`/app`)
+
+- `components/`: UI components, mostly prefixed with `SL` (e.g., `SLButton.vue`).
+- `interface/`: TypeScript interface definitions.
+- `models/`: Data models and state definitions.
+- `plugins/`: Nuxt plugins for extending framework functionality.
+- `utils/`: Shared utility functions.
+- `assets/`: Global styles and static assets.
+
+### Technical Stack
+
+- **Framework**: Nuxt 4 / Vue 3
+- **Styling**: Tailwind CSS v4
+- **Templating**: Pug is used for Vue templates.
+- **Visualization**: ECharts (`vue-echarts`) is used for charts and maps.
+
+### Development Workflow
+
+When adding or modifying components, implement them in `app/components/` and verify their behavior by running the development server (`npm run dev`), which renders the layer within the `.playground` environment.

package/README.md

@@ -10,15 +10,15 @@ Make sure to install the dependencies:
 pnpm install
 ```
 
-## Working on your theme
+## Working on your layer
 
-Your theme is at the root of this repository, it is exactly like a regular Nuxt project, except you can publish it on NPM.
+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 theme during development.
+The `.playground` directory should help you on trying your layer during development.
 
-Running `pnpm dev` will prepare and boot `.playground` directory, which imports your theme itself.
+Running `pnpm dev` will prepare and boot `.playground` directory, which imports your layer itself.
 
-## Distributing your theme
+## Distributing your layer
 
 Your Nuxt layer is shaped exactly the same as any other Nuxt project, except you can publish it on NPM.
 
@@ -31,14 +31,14 @@ npm publish --access public
 Once done, your users will only have to run:
 
 ```bash
-npm install --save your-theme
+npm install --save your-layer
 ```
 
 Then add the dependency to their `extends` in `nuxt.config`:
 
 ```ts
 defineNuxtConfig({
-  extends: 'your-theme'
+  extends: 'your-layer'
 })
 ```
 

package/app/app.config.ts

@@ -0,0 +1,14 @@
+export default defineAppConfig({
+  myLayer: {
+    name: 'Hello from Nuxt layer'
+  }
+})
+
+declare module '@nuxt/schema' {
+  interface AppConfigInput {
+    myLayer?: {
+      /** Project name */
+      name?: string
+    }
+  }
+}

package/app/app.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <SLCheckbox />
+  </div>
+</template>

package/app/assets/css/layout.css

@@ -0,0 +1,134 @@
+@reference '~ui/app/assets/css/main.css';
+
+@layer base {
+  body {
+    font-family:
+      "微軟正黑體",
+      "Microsoft JhengHei",
+      ui-sans-serif,
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      "Segoe UI",
+      Roboto,
+      "Helvetica Neue",
+      Arial,
+      "Noto Sans",
+      sans-serif,
+      "Apple Color Emoji",
+      "Segoe UI Emoji",
+      "Segoe UI Symbol",
+      "Noto Color Emoji";
+    background-color: #f3f4f8;
+  }
+
+  label {
+    @apply inline-block;
+  }
+}
+
+@layer components {
+  .vc-skylens-purple {
+    --vc-accent-200: var(--color-primary-100);
+    --vc-accent-600: var(--color-primary);
+    --vc-accent-500: var(--color-primary-300);
+    --vc-accent-700: var(--color-primary-600);
+    --vc-accent-900: var(--color-primary-800);
+  }
+
+  .vc-skylens-gray {
+    --vc-accent-200: var(--color-pgray-5);
+    --vc-accent-500: var(--color-pgray-4);
+    --vc-accent-600: var(--color-pgray-3);
+    --vc-accent-700: var(--color-pgray-3);
+    --vc-accent-900: var(--color-pgray-2);
+  }
+
+  .vc-container .vc-weeks {
+    @apply px-0;
+  }
+
+  .scrollbar-y {
+    @apply absolute top-0 right-0 bottom-0 w-1 rounded-full;
+  }
+
+  .scrollbar-y .indicator {
+    @apply w-full h-12 bg-primary-300 rounded-full;
+  }
+
+  .markdown-content {
+    @apply text-base leading-relaxed;
+  }
+
+  .markdown-content ol {
+    @apply list-decimal list-inside;
+  }
+
+  .markdown-content ol li {
+    @apply font-bold;
+  }
+
+  .markdown-content ol li ul {
+    @apply ml-3 list-disc list-inside;
+  }
+
+  .markdown-content ol li ul li {
+    @apply font-normal;
+  }
+
+  .markdown-content ol li ul li ul {
+    @apply ml-5 list-none;
+  }
+
+  .custom-scrollbar-y {
+    @apply overflow-x-hidden overflow-y-auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .custom-scrollbar-y::-webkit-scrollbar {
+    @apply w-1;
+  }
+
+  .custom-scrollbar-y::-webkit-scrollbar-track {
+    @apply bg-transparent;
+  }
+
+  .custom-scrollbar-y::-webkit-scrollbar-thumb {
+    @apply bg-primary-300 rounded;
+  }
+
+  .custom-scrollbar-y::-webkit-scrollbar-thumb:hover {
+    @apply bg-primary-500;
+  }
+
+  .custom-scrollbar-x {
+    @apply overflow-x-auto overflow-y-hidden;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .custom-scrollbar-x::-webkit-scrollbar {
+    @apply h-1;
+  }
+
+  .custom-scrollbar-x::-webkit-scrollbar-track {
+    @apply bg-transparent;
+  }
+
+  .custom-scrollbar-x::-webkit-scrollbar-thumb {
+    @apply bg-secondary rounded;
+  }
+
+  .custom-scrollbar-x::-webkit-scrollbar-thumb:hover {
+    @apply bg-secondary;
+  }
+
+  .fade-enter-active,
+  .fade-leave-active {
+    @apply transition-opacity;
+  }
+
+  .fade-enter,
+  .fade-leave-to {
+    @apply opacity-0;
+  }
+}

package/app/assets/css/main.css

@@ -0,0 +1,189 @@
+@import "tailwindcss";
+
+@theme {
+  --font-login-title: "Roboto";
+
+  --color-primary: "#626493";
+  --color-primary-15: "#FAFAFD";
+  --color-primary-25: "#F9F9FF";
+  --color-primary-50: "#F3F4F8";
+  --color-primary-100: "#E8EAF2";
+  --color-primary-200: "#DDE1F3";
+  --color-primary-300: "#BABBE1";
+  --color-primary-400: "#A1A3D0";
+  --color-primary-500: "#9193C1";
+  --color-primary-600: "#8486B4";
+  --color-primary-700: "#626493";
+  --color-primary-800: "#4E5076";
+  --color-primary-900: "#3B3C58";
+
+  --color-secondary: "#6182C3";
+  --color-secondary-50: "#F1F5FC";
+  --color-secondary-200: "#EAF1FF";
+  --color-secondary-400: "#A9BADB";
+  --color-secondary-500: "#90A8D7";
+  --color-secondary-600: "#7996CF";
+  --color-secondary-700: "#6182C3";
+  --color-secondary-800: "#4E689C";
+  --color-secondary-new-dark: "#445B89";
+
+  --color-third: "#4C8098";
+  --color-third-50: "#F9FFF1";
+  --color-third-100: "#E8F2EB";
+  --color-third-400: "#B3D9C7";
+  --color-third-500: "#82CDDB";
+  --color-third-600: "#4EA3B6";
+  --color-third-700: "#4C8098";
+
+  --color-four-100: "#FAE7F0";
+  --color-four-400: "#FEABBF";
+  --color-four-500: "#EC6F8D";
+
+  --color-highlight: "#EEB13C";
+  --color-highlight-50: "#FFFBF1";
+  --color-highlight-100: "#F2EFE8";
+  --color-highlight-300: "#F6D79D";
+  --color-highlight-400: "#FFD874";
+  --color-highlight-500: "#FBBE21";
+  --color-highlight-600: "#FDB242";
+  --color-highlight-700: "#EEB13C";
+
+  --color-poi: "#D35092";
+  --color-poi-100: "#F1AFCE";
+  --color-poi-300: "#EB8CB9";
+  --color-poi-700: "#D35092";
+  --color-poi-900: "#AA5488";
+  --color-poi-1000: "#7E4E77";
+
+  --color-danger: "#F35A5A";
+  --color-danger-700: "#F35A5A";
+  --color-danger-light: "#FE8678";
+
+  --color-red: "#EB5757";
+  --color-red-2: "#F34141";
+  --color-red-700: "#EB5757";
+
+  --color-pgray-1: "#2C2D31";
+  --color-pgray-2: "#4D4F55";
+  --color-pgray-3: "#858792";
+  --color-pgray-4: "#BCBFCF";
+  --color-pgray-4p5: "#C7C5D0";
+  --color-pgray-5: "#DFE1E9";
+  --color-pgray-6: "#ECECF2";
+
+  --color-gray-1: "#333333";
+  --color-gray-2: "#4F4F4F";
+  --color-gray-3: "#828282";
+  --color-gray-4: "#BDBDBD";
+  --color-gray-5: "#E0E0E0";
+  --color-gray-6: "#F2F2F2";
+
+  --color-green: "#27AE60";
+  --color-green-2: "#6EC393";
+  --color-green-700: "#27AE60";
+
+  --color-blue-1: "#2F80ED";
+  --color-blue-2: "#110DFB";
+  --color-blue-3: "#332FED";
+
+  --color-orange: "#F48A28";
+  --color-orange-700: "#F48A28";
+
+  --color-edit: "#6E6BDD";
+  --color-edit-700: "#6E6BDD";
+
+  --color-card-lightpr-bg: "#FBFCFF";
+
+  --color-insight-title: "#696CBA";
+  --color-insight-title-line: "#9B74DA";
+  --color-insight-hint-line: "#ADB4F5";
+  --color-insight-web-title-start: "#39BBE4";
+  --color-insight-web-title-end: "rgb(144 128 241/0.74)";
+  --color-insight-poi-title-start: "rgb(255 131 92/0.7)";
+  --color-insight-poi-title-end: "rgb(120 91 207/0.74)";
+
+  --color-mask: "#47485A";
+  --color-mask-700: "#47485A";
+
+  --color-login-bg: "#fefefe";
+  --color-login-bg-700: "#fefefe";
+
+  --color-nav-color-switch-bg: "#2D2F57";
+  --color-nav-color-switch-bg-700: "#2D2F57";
+
+  --color-linear-progress-bar: linear-gradient(
+    270deg,
+    rgba(211, 211, 211, 0.62) 0.08%,
+    #e1e1e1 46.69%,
+    rgba(211, 211, 211, 0.62) 100%
+  );
+
+  --shadow-default: "0px 2px 4px rgba(111, 111, 111, 0.2)";
+  --shadow-md: "0px 2px 8px rgba(88, 82, 103, 0.25)";
+  --shadow-inline: "inset 0px -1px 0px rgba(186, 187, 225, 0.8)";
+  --shadow-second-inline: "inset 0px -1px 0px rgba(238, 177, 60, 0.8)";
+  --shadow-header-drop: "0px 5px 12px rgba(88, 82, 103, 0.45)";
+  --shadow-popup-sm: "0px 5px 5px -3px rgba(88, 82, 103, 0.2), 0px 3px 14px 2px rgba(88, 82, 103, 0.12)";
+  --shadow-popup-lg: "0px 5px 12px rgba(88, 82, 103, 0.45)";
+  --shadow-login: "2px 5px 20px rgba(107, 91, 141, 0.45)";
+  --shadow-insight-layer: "0px 4px 4px rgba(70, 56, 107, 0.25)";
+  --shadow-insight-comment: "0px 4px 12px rgba(37, 35, 143, 0.25)";
+  --shadow-insight-card: "0px 4px 12px rgba(77, 45, 147, 0.25)";
+  --shadow-insight-card-lg: "0px 4px 20px 0px rgba(0, 0, 0, 0.10)";
+  --shadow-small-card: "2px 2px 4px rgba(0, 0, 0, 0.1)";
+  --shadow-float-actions: "0px -6px 12px 0px rgba(90, 92, 133, 0.10)";
+
+  --text-sm: "0.875rem";
+  --text-sm--line-height: "1.1875rem";
+  --text-md: "0.9375rem";
+  --text-md--line-height: "1.25rem";
+  --text-base: "1rem";
+  --text-base--line-height: "1.3125rem";
+  --text-lg: "1.25rem";
+  --text-lg--line-height: "1.6875rem";
+  --text-0p75xl: "1.0625rem";
+  --text-0p75xl--line-height: "1.75rem";
+  --text-2p25xl: "1.5625rem";
+  --text-2p25xl--line-height: "1.8125rem";
+  --text-2p67xl: "1.75rem";
+  --text-2p67xl--line-height: "2rem";
+  --text-3p33xl: "2rem";
+  --text-3p33xl--line-height: "2.6875rem";
+  --text-3p67xl: "2.125rem";
+  --text-3p67xl--line-height: "2.4175rem";
+  --text-7p17xl: "4.75rem";
+  --text-16xl: "4rem";
+  --text-16xl--line-height: "4.625rem";
+  --text-18xl: "4.5rem";
+  --text-18xl--line-height: "6rem";
+
+  --transition-input-focus: "margin, padding, color, font-size, line-height, background-color";
+  --transition-app-header: "margin, width";
+
+  --text-shadow-default: "0px 4px 4px rgba(0, 0, 0, 0.25)";
+  --text-shadow-md: "0px 2px 8px rgba(88, 82, 103, 0.25)";
+
+  --animate-indeterminate: indeterminateAnimation 1s infinite linear;
+  --animate-loading: loading 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+
+  @keyframes indeterminateAnimation {
+    0% {
+      transform: translateX(0) scaleX(0);
+    }
+    40% {
+      transform: translateX(0) scaleX(0.4);
+    }
+    100% {
+      transform: translateX(100%) scaleX(0.5);
+    }
+  }
+
+  @keyframes loading {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+}

package/{components → app/components}/SLAlertModal.vue

@@ -74,26 +74,34 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.alert-modal
-  @apply z-60
+<style>
+@reference '~ui/app/assets/css/main.css';
 
-  .modal-backdrop
-    @apply s('bg-white/40') backdrop-blur-5
+.alert-modal {
+  @apply z-60;
+}
 
-    &.show
-      @apply s('bg-white/40')
+.alert-modal .modal-backdrop {
+  @apply bg-white/40 backdrop-blur-[5px];
+}
 
-  .modal-body
-    &-content
-      @apply text-base leading-6 text-pgray-2 text-center space-y-4
+.alert-modal .modal-backdrop.show {
+  @apply bg-white/40;
+}
 
-      .icon
-        @apply s('text-7.17xl')
+.alert-modal .modal-body-content {
+  @apply text-base leading-6 text-pgray-2 text-center space-y-4;
+}
 
-      p
-        @apply whitespace-pre-wrap
+.alert-modal .modal-body-content .icon {
+  @apply text-7.17xl;
+}
 
-  .modal-footer
-    @apply flex justify-center
+.alert-modal .modal-body-content p {
+  @apply whitespace-pre-wrap;
+}
+
+.alert-modal .modal-footer {
+  @apply flex justify-center;
+}
 </style>

package/{components → app/components}/SLBreadcrumbs.vue

@@ -29,14 +29,18 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.breadcrumbs
-  @apply flex flex-wrap items-center justify-start text-lg text-primary font-bold
+<style>
+@reference '~ui/app/assets/css/main.css';
+
+.breadcrumbs {
+  @apply flex flex-wrap items-center justify-start text-lg text-primary font-bold;
+}
 
-  &-container
-    .breadcrumb-item:not(:last-child)
-      @apply text-base font-normal
+.breadcrumbs-container .breadcrumb-item:not(:last-child) {
+  @apply text-base font-normal;
+}
 
-  &-notice
-    @apply inline-flex items-center
+.breadcrumbs-notice {
+  @apply inline-flex items-center;
+}
 </style>