@mptw/skylens-ui 1.4.109 → 1.5.1

package/eslint.config.js

@@ -0,0 +1,3 @@
+import withNuxt from './.playground/.nuxt/eslint.config.mjs'
+
+export default withNuxt()

package/nuxt.config.ts

@@ -1,15 +1,16 @@
-// https://nuxt.com/docs/api/configuration/nuxt-config
-import { fileURLToPath } from "url";
-import { dirname } from "path";
-
-const currentDir = dirname(fileURLToPath(import.meta.url));
+import { fileURLToPath } from "node:url";
+import tailwindcss from "@tailwindcss/vite";
 
+// https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
+  devtools: { enabled: true },
+  compatibilityDate: "2026-07-28",
+  $meta: {
+    name: "skylens-ui",
+  },
   alias: {
-    "~ui": currentDir,
-    images: fileURLToPath(new URL("./assets/images", import.meta.url)),
+    "~ui": fileURLToPath(new URL("./", import.meta.url)),
   },
-  devtools: { enabled: true },
   runtimeConfig: {
     public: {
       defaultCableEndDateBeforeNow: 5,
@@ -17,11 +18,13 @@ export default defineNuxtConfig({
       icoUrl: "https://skylens-mng-dev-1087511617183.asia-east1.run.app",
     },
   },
-  components: [{ path: "~ui/components" }],
-  css: ["~ui/assets/css/icons.css", "~ui/assets/css/layout.styl"],
-  modules: ["@nuxtjs/tailwindcss"],
-  plugins: ["~ui/plugins/v-calendar.ts"],
-  tailwindcss: {
-    exposeConfig: true,
+  css: [
+    "~ui/app/assets/css/main.css",
+    "~ui/app/assets/css/icons.css",
+    "~ui/app/assets/css/layout.css",
+  ],
+  plugins: ["~ui/app/plugins/v-calendar.ts"],
+  vite: {
+    plugins: [tailwindcss()],
   },
 });

package/package.json

@@ -1,26 +1,28 @@
 {
   "name": "@mptw/skylens-ui",
   "type": "module",
-  "version": "1.4.109",
+  "version": "1.5.1",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",
+    "dev:prepare": "nuxt prepare .playground",
     "build": "nuxt build .playground",
     "generate": "nuxt generate .playground",
     "preview": "nuxt preview .playground",
-    "lint": "eslint .",
-    "postinstall": "nuxt prepare .playground"
+    "lint": "eslint ."
   },
   "devDependencies": {
-    "@nuxt/eslint-config": "^1.16.0",
+    "@nuxt/eslint": "^1.16.0",
+    "@types/node": "^24.13.3",
     "eslint": "^10.8.0",
-    "nuxt": "^3.21.9",
-    "typescript": "^7.0.2"
+    "nuxt": "^4.5.1",
+    "typescript": "^6.0.3",
+    "vue": "^3.5.40"
   },
   "dependencies": {
     "@gtm-support/vue-gtm": "^3.2.0",
-    "@nuxtjs/tailwindcss": "^6.14.0",
     "@popperjs/core": "^2.11.8",
+    "@tailwindcss/vite": "^4.3.3",
     "@types/commonmark": "^0.27.10",
     "@types/dompurify": "^3.2.0",
     "@types/lodash-es": "^4.17.12",
@@ -37,9 +39,8 @@
     "pug": "^3.0.4",
     "rxjs": "^7.8.2",
     "sortablejs": "^1.15.7",
-    "stylus": "^0.64.0",
     "swiper": "^14.0.6",
-    "tailwindcss-textshadow": "^2.1.3",
+    "tailwindcss": "^4.3.3",
     "v-calendar": "^3.1.2",
     "vue": "^3.5.40",
     "vue-3-slider-component": "^1.0.2",

package/skills-lock.json

@@ -0,0 +1,59 @@
+{
+  "version": 1,
+  "skills": {
+    "nitro": {
+      "source": "antfu/skills",
+      "sourceType": "github",
+      "skillPath": "skills/nitro/SKILL.md",
+      "computedHash": "f8341eaf6fbdc604c2c8123a275407acea5a74ad3b0870cdd0ed2a3007e36c12"
+    },
+    "nuxt": {
+      "source": "antfu/skills",
+      "sourceType": "github",
+      "skillPath": "skills/nuxt/SKILL.md",
+      "computedHash": "96dbdbfc06bf7045aeb9a463b972d5c0b5679d6dadf196d8ef6b98dc6defed2d"
+    },
+    "tsdown": {
+      "source": "antfu/skills",
+      "sourceType": "github",
+      "skillPath": "skills/tsdown/SKILL.md",
+      "computedHash": "2183b9019058744215ab8b1261e34833653b5864da159bc022e3b9ad2f706aa5"
+    },
+    "vite": {
+      "source": "antfu/skills",
+      "sourceType": "github",
+      "skillPath": "skills/vite/SKILL.md",
+      "computedHash": "867ff66238f3152e9c494339ad08dc432dd0df5bcf5cc7a00b61a72b580eb908"
+    },
+    "vitest": {
+      "source": "antfu/skills",
+      "sourceType": "github",
+      "skillPath": "skills/vitest/SKILL.md",
+      "computedHash": "943d436114c677802426741980146c07560bf375297666b03062444f4b98a785"
+    },
+    "vue": {
+      "source": "antfu/skills",
+      "sourceType": "github",
+      "skillPath": "skills/vue/SKILL.md",
+      "computedHash": "9c241141e07e836e4f0537c63e8f929fba3767c2997250be38e699f19b75e3f2"
+    },
+    "vue-best-practices": {
+      "source": "antfu/skills",
+      "sourceType": "github",
+      "skillPath": "skills/vue-best-practices/SKILL.md",
+      "computedHash": "d7d22c8cb343583c3904692c4d1d7b50382945e433e4f6e053f4aabb9846cbc3"
+    },
+    "vue-testing-best-practices": {
+      "source": "antfu/skills",
+      "sourceType": "github",
+      "skillPath": "skills/vue-testing-best-practices/SKILL.md",
+      "computedHash": "18c7d8f42f350f927e37de055e34c97b8cfb9f79c12cf942f7f3d2a0821057b5"
+    },
+    "vueuse-functions": {
+      "source": "antfu/skills",
+      "sourceType": "github",
+      "skillPath": "skills/vueuse-functions/SKILL.md",
+      "computedHash": "5f32cd5f744671178284887c9ffc27a080e0e3316c0f7c3b22f4459c760daf49"
+    }
+  }
+}

package/tsconfig.json

@@ -1,8 +1,3 @@
 {
-  "extends": "./.playground/.nuxt/tsconfig.json",
-  "vueCompilerOptions": {
-    "plugins": [
-      "@vue/language-plugin-pug"
-    ]
-  }
+  "extends": "./.playground/.nuxt/tsconfig.json"
 }

package/.eslintrc.cjs

@@ -1,4 +0,0 @@
-module.exports = {
-  root: true,
-  extends: ["@nuxt/eslint-config"],
-};

package/app.config.ts

@@ -1,5 +0,0 @@
-export default defineAppConfig({})
-
-declare module '@nuxt/schema' {
-  interface AppConfigInput {}
-}

package/assets/css/layout.styl

@@ -1,98 +0,0 @@
-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: #f3f4f8;
-}
-
-label
-  @apply inline-block
-
-.vc-skylens-purple
-  --vc-accent-200 theme('colors.primary.100')
-  --vc-accent-600 theme('colors.primary.DEFAULT')
-  --vc-accent-500 theme('colors.primary.300')
-  --vc-accent-700 theme('colors.primary.600')
-  --vc-accent-900 theme('colors.primary.800')
-
-.vc-skylens-gray
-  --vc-accent-200 theme('colors.pgray.5')
-  --vc-accent-500 theme('colors.pgray.4')
-  --vc-accent-600 theme('colors.pgray.3')
-  --vc-accent-700 theme('colors.pgray.3')
-  --vc-accent-900 theme('colors.pgray.2')
-
-.vc-container
-  .vc-weeks
-    @apply px-0
-
-.scrollbar-y
-  @apply absolute top-0 right-0 bottom-0 w-1 rounded-full
-
-  .indicator
-    @apply w-full h-12 bg-primary-300 rounded-full
-
-.markdown-content
-  @apply text-base leading-relaxed
-
-  ol
-    @apply list-decimal list-inside
-
-    li
-      @apply font-bold
-
-      ul
-        @apply ml-3 list-disc list-inside
-
-        li
-          @apply font-normal
-
-          ul
-            @apply ml-5 list-none
-
-.custom-scrollbar-y
-  @apply overflow-x-hidden overflow-y-auto
-  -webkit-overflow-scrolling touch
-
-  /* width */
-  &::-webkit-scrollbar
-    @apply w-1
-
-  /* Track */
-  &::-webkit-scrollbar-track
-    @apply bg-transparent
-
-  /* Handle */
-  &::-webkit-scrollbar-thumb
-    @apply bg-primary-300 rounded
-
-  /* Handle on hover */
-  &::-webkit-scrollbar-thumb:hover
-    @apply bg-primary-500
-
-.custom-scrollbar-x
-  @apply overflow-x-auto overflow-y-hidden
-  -webkit-overflow-scrolling touch
-
-  /* width */
-  &::-webkit-scrollbar
-    @apply h-1
-
-  /* Track */
-  &::-webkit-scrollbar-track
-    @apply bg-transparent
-
-  /* Handle */
-  &::-webkit-scrollbar-thumb
-    @apply bg-secondary rounded
-
-  /* Handle on hover */
-  &::-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/assets/css/tailwind.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

package/components/SLButton.vue

@@ -1,337 +0,0 @@
-<template lang="pug">
-button(:type='type', :class='btnClass' :disabled="disabled")
-  .btn-content
-    slot
-      SLIcon.btn-icon(v-if='icon !== ""', :icon='icon')
-      span(v-if='title !== ""') {{ title }}
-      SLIcon.btn-icon(v-if='postIcon !== ""', :icon='postIcon')
-  .btn-loading
-    .loading
-      div
-      div
-      div
-      div
-</template>
-
-<script lang="ts">
-import type { PropType } from "vue";
-
-export default defineComponent({
-  name: "SLButton",
-  components: {},
-  props: {
-    size: {
-      type: String,
-      default: "",
-      validator: (val: string) => ["", "lg", "md", "sm", "xs", 'xxs'].includes(val),
-    },
-    color: {
-      type: String,
-      default: "",
-      validator: (val: string) =>
-        [
-          "",
-          "white",
-          "primary",
-          "primary-600",
-          "highlight-500",
-          "third",
-          "danger",
-          "pgray-5",
-          "pgray-2",
-          "secondary",
-          "secondary-200",
-          "secondary-600",
-          "blue-1",
-          "insight-title-line",
-        ].includes(val),
-    },
-    variant: {
-      type: String,
-      default: "",
-      validator: (val: string) => ["", "outline", "icon"].includes(val),
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    icon: {
-      type: String,
-      default: "",
-    },
-    postIcon: {
-      type: String,
-      default: "",
-    },
-    title: {
-      type: String,
-      default: "",
-    },
-    type: {
-      type: String as PropType<"submit" | "reset" | "button">,
-      default: "button",
-      validator: (val: string) => ["submit", "reset", "button"].includes(val),
-    },
-    loading: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  setup(props, { emit }) {
-    const { size, color, variant, disabled, loading } = toRefs(props);
-
-    const btnClass = computed(() => {
-      const btnClass = ["btn"];
-      if (size.value !== "") {
-        btnClass.push(`btn-${size.value}`);
-      }
-      if (color.value !== "") {
-        btnClass.push(`btn-${color.value}`);
-      }
-      if (variant.value !== "") {
-        btnClass.push(`btn-${variant.value}`);
-      }
-      if (disabled.value) {
-        btnClass.push("btn-disabled");
-      }
-      if (loading.value) {
-        btnClass.push("loading");
-      }
-
-      return btnClass.join(" ");
-    });
-
-    return {
-      btnClass,
-    };
-  },
-});
-</script>
-
-<style lang="stylus">
-.btn
-  @apply relative inline-flex items-center justify-center s("p-1.75") border border-transparent rounded bg-transparent text-base leading-normal s("focus:outline-none")
-
-  &.btn-lg
-    @apply s("px-7.75")
-
-  &.btn-md
-    @apply s("px-3.75")
-
-  &.btn-sm
-    @apply s("py-0.75") s("px-1.75")
-
-    .btn-content
-      @apply space-x-1
-
-  &.btn-xs
-    @apply s("py-0.75") s("px-1.75") text-xs
-
-    .btn-content
-      @apply space-x-1
-
-  &.btn-xxs
-    @apply s("p-0.75") text-sm
-
-    .btn-content
-      @apply space-x-1
-
-      .icon.btn-icon
-        @apply text-sm leading-none
-
-  &-white
-    @apply bg-white border-white text-pgray-2 s("hover:bg-white") s("hover:border-white")
-
-    &.btn-outline
-      @apply text-pgray-2 s("hover:text-pgray-2")
-
-    .btn-loading
-      .loading
-        div
-          border-color white transparent transparent transparent
-
-  &-primary
-    @apply bg-primary border-primary text-white s("hover:bg-primary-800") s("hover:border-primary-800")
-
-    &.btn-outline
-      @apply text-primary s("hover:text-primary-800")
-
-    .btn-loading
-      .loading
-        div
-          border-color theme('colors.primary.DEFAULT') transparent transparent transparent
-
-  &-primary-600
-    @apply bg-primary-600 border-primary-600 text-white s("hover:bg-primary") s("hover:border-primary")
-
-    &.btn-outline
-      @apply text-primary-600 s("hover:text-primary")
-
-    .btn-loading
-      .loading
-        div
-          border-color theme('colors.primary.600') transparent transparent transparent
-
-  &-highlight-500
-    @apply bg-highlight-500 border-highlight-500 text-white s("hover:bg-highlight-400") s("hover:text-white") s("hover:border-highlight-400")
-
-    &.btn-outline
-      @apply text-highlight-500 s("hover:text-highlight-400")
-
-    .btn-loading
-      .loading
-        div
-          border-color theme('colors.highlight.400') transparent transparent transparent
-
-  &-third
-    @apply bg-third border-third text-white s("hover:bg-third-600") s("hover:text-white") s("hover:border-third-600")
-
-    &.btn-outline
-      @apply text-third s("hover:text-third-600")
-
-    .btn-loading
-      .loading
-        div
-          border-color theme('colors.third.600') transparent transparent transparent
-
-  &-danger
-    @apply bg-danger border-danger text-white s("hover:bg-danger-light") s("hover:border-danger-light")
-
-    &.btn-outline
-      @apply text-danger s("hover:text-danger-light")
-
-    .btn-loading
-      .loading
-        div
-          border-color theme('colors.danger.light') transparent transparent transparent
-
-  &-pgray-5
-    @apply bg-pgray-5 border-pgray-5 text-pgray-2 s("hover:bg-pgray-4.5") s("hover:border-pgray-4.5")
-
-    &.btn-outline
-      @apply text-pgray-5 s("hover:text-pgray-4.5")
-
-    .btn-loading
-      .loading
-        div
-          border-color theme('colors.pgray[4.5]') transparent transparent transparent
-
-  &-pgray-2
-    @apply bg-pgray-2 border-pgray-2 text-white s("hover:bg-pgray-3") s("hover:border-pgray-3")
-
-    &.btn-outline
-      @apply text-pgray-2 s("hover:text-pgray-3")
-
-    .btn-loading
-      .loading
-        div
-          border-color theme('colors.pgray.3') transparent transparent transparent
-
-  &-secondary
-    @apply bg-secondary border-secondary text-white s("hover:bg-secondary-800") s("hover:border-secondary-800")
-
-    &.btn-outline
-      @apply text-secondary s("hover:text-secondary-800")
-
-    .btn-loading
-      .loading
-        div
-          border-color theme('colors.secondary.500') transparent transparent transparent
-
-  &-secondary-200
-    @apply bg-secondary-200 border-secondary-200 text-secondary s("hover:bg-secondary") s("hover:border-secondary") s("hover:text-white")
-
-    &.btn-outline
-      @apply text-secondary-200 s("hover:text-secondary")
-
-    .btn-loading
-      .loading
-        div
-          border-color theme('colors.secondary.500') transparent transparent transparent
-
-  &-secondary-600
-    @apply bg-secondary-600 border-secondary-600 text-white s("hover:bg-secondary") s("hover:border-secondary")
-
-    &.btn-outline
-      @apply text-secondary-600 s("hover:text-secondary")
-
-    .btn-loading
-      .loading
-        div
-          border-color theme('colors.secondary.500') transparent transparent transparent
-
-  &-blue-1
-    @apply bg-secondary border-secondary text-white s("hover:bg-blue-1") s("hover:border-blue-1")
-
-    &.btn-outline
-      @apply text-blue-1 s("hover:text-blue-1")
-
-    .btn-loading
-      .loading
-        div
-          border-color theme('colors.blue.1') transparent transparent transparent
-
-  &-insight-title-line
-    @apply bg-insight-title-line border-insight-title-line text-white s("hover:bg-insight-title-line") s("hover:border-insight-title-line")
-
-    &.btn-outline
-      @apply text-insight-title s("hover:text-insight-title")
-
-    .btn-loading
-      .loading
-        div
-          border-color theme('colors.blue.1') transparent transparent transparent
-
-  &-outline
-    @apply bg-transparent border s("hover:bg-white")
-
-  &-disabled
-    @apply bg-pgray-5 border-pgray-5 text-white cursor-default s("hover:bg-pgray-5") s("hover:border-pgray-5") s("hover:text-white")
-
-    &.btn-outline
-      @apply bg-white border-pgray-5 text-pgray-5 s("hover:bg-white") s("hover:border-pgray-5") s("hover:text-pgray-5")
-
-    &.btn-icon
-      @apply bg-transparent border-transparent text-pgray-5  s("hover:bg-transparent") s("hover:border-transparent") s("hover:text-pgray-5")
-
-  &.loading
-    @apply bg-primary-200 border-primary-200 cursor-default
-
-    .btn-content
-      @apply opacity-0
-
-    .btn-loading
-      @apply block
-
-  .btn-content
-    @apply inline-flex items-center space-x-1
-
-    .icon.btn-icon
-      @apply inline-flex text-xs leading-none
-
-  .btn-loading
-    @apply absolute s('top-1/2') s('left-1/2') w-4 h-4 s('-translate-x-1/2') s('-translate-y-1/2') pointer-events-none hidden
-
-    .loading
-      @apply relative inline-block w-4 h-4
-
-      div
-        @apply absolute block w-4 h-4 border-2 rounded-full
-        animation loading 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite
-
-        &:nth-child(1)
-          animation-delay -0.45s
-
-        &:nth-child(2)
-          animation-delay -0.3s
-
-        &:nth-child(3)
-          animation-delay -0.15s
-
-@keyframes loading
-  0%
-    transform rotate(0deg)
-
-  100%
-    transform rotate(360deg)
-</style>

package/components/SLLinearProgressBar.vue

@@ -1,35 +0,0 @@
-<template lang="pug">
-.linear-progress-bar
-  .linear-progress-bar-value
-</template>
-
-<script lang="ts">
-export default defineComponent({
-  name: "SLLinearProgressBar",
-});
-</script>
-
-<style lang="stylus" scoped>
-.linear-progress-bar
-  @apply w-full h-2 overflow-hidden
-  background-color #D3D3D3
-  border-radius 1px
-
-  &-value
-    @apply w-full h-full
-    background linear-gradient(270deg, rgba(211, 211, 211, 0.62) 0.08%, #E1E1E1 46.69%, rgba(211, 211, 211, 0.62) 100%)
-    animation indeterminateAnimation 1s infinite linear
-    transform-origin 0% 50%
-
-@keyframes indeterminateAnimation {
-  0% {
-    transform  translateX(0) scaleX(0)
-  }
-  40% {
-    transform  translateX(0) scaleX(0.4)
-  }
-  100% {
-    transform  translateX(100%) scaleX(0.5)
-  }
-}
-</style>