@mptw/skylens-ui 1.5.9 → 1.5.11

package/app/components/SLPopupMenuButton.vue

@@ -25,7 +25,7 @@ import type { PropType } from "vue";
 import { fromEvent } from "rxjs";
 import { createPopper } from "@popperjs/core";
 import type { Options as PopperOptions } from "@popperjs/core";
-import type IPopupMenuButton from "ui/app/interface/IPopupMenuButton";
+import type IPopupMenuButton from "~app/interface/IPopupMenuButton";
 
 export default defineComponent({
   name: "SLPopupMenuButton",
@@ -134,7 +134,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference 'ui/app/assets/css/main.css';
+@reference '~app/assets/css/main.css';
 
 .popup-menu-button {
   @apply inline-block relative;

package/app/components/SLProfileButton.vue

@@ -175,7 +175,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference 'ui/app/assets/css/main.css';
+@reference '~app/assets/css/main.css';
 
 .profile-button .toggle-button {
   @apply inline-flex items-center justify-center w-7 h-7 p-0 rounded-full bg-primary-400 text-lg text-white font-bold hover:bg-primary-600 active:bg-primary;

package/app/components/SLProjectShareItem.vue

@@ -24,7 +24,7 @@
 
 <script lang="ts">
 import type { PropType } from "vue";
-import { OrgUserRole } from "ui/app/interface/IOrganization";
+import { OrgUserRole } from "~app/interface/IOrganization";
 
 export default defineComponent({
   name: "SLProjectShareItem",
@@ -71,7 +71,7 @@ export default defineComponent({
 </script>
 
 <style scoped>
-@reference 'ui/app/assets/css/main.css';
+@reference '~app/assets/css/main.css';
 
 .project-share-item {
   @apply flex items-center justify-between space-x-4;

package/app/components/SLRadioButton.vue

@@ -18,7 +18,7 @@
 
 <script lang="ts">
 import { isEqual } from "lodash-es";
-import { getUID } from "ui/app/utils";
+import { getUID } from "~app/utils";
 
 export default defineComponent({
   name: "SLRadioButton",
@@ -68,7 +68,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference 'ui/app/assets/css/main.css';
+@reference '~app/assets/css/main.css';
 
 .radio-button {
   @apply inline-block relative text-base overflow-hidden;

package/app/components/SLRadioButtonGroup.vue

@@ -19,7 +19,7 @@
 
 <script lang="ts">
 import type { PropType } from "vue";
-import type IInputOption from "ui/app/interface/IInputOption";
+import type IInputOption from "~app/interface/IInputOption";
 
 export default defineComponent({
   name: "SLRadioButtonGroup",
@@ -83,7 +83,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference 'ui/app/assets/css/main.css';
+@reference '~app/assets/css/main.css';
 
 .radio-button-group .is-invalid .invalid-feedback {
   @apply block;

package/app/components/SLRadioGroup.vue

@@ -16,8 +16,8 @@ SLElementWithTitle(:title='disabled ? disabledHint : ""')
 
 <script lang="ts">
 import type { PropType } from "vue";
-import { getUID } from "ui/app/utils";
-import type IInputOption from "ui/app/interface/IInputOption";
+import { getUID } from "~app/utils";
+import type IInputOption from "~app/interface/IInputOption";
 
 export default defineComponent({
   name: "SLRadioGroup",
@@ -105,7 +105,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference 'ui/app/assets/css/main.css';
+@reference '~app/assets/css/main.css';
 
 .radio-group {
   @apply inline-flex p-0.5 bg-primary-100 border border-primary-200 rounded;

package/app/components/SLRangeInput.vue

@@ -164,7 +164,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference 'ui/app/assets/css/main.css';
+@reference '~app/assets/css/main.css';
 
 .range-input.inline {
   @apply flex;

package/app/components/SLRightSider.vue

@@ -200,7 +200,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference 'ui/app/assets/css/main.css';
+@reference '~app/assets/css/main.css';
 
 .right-sider {
   @apply z-9 fixed top-0 right-0 h-full;

package/app/components/SLSearchInput.vue

@@ -72,7 +72,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference 'ui/app/assets/css/main.css';
+@reference '~app/assets/css/main.css';
 
 .search-input .is-focus .button-group {
   @apply border-primary;

package/app/components/SLSelect.vue

@@ -47,8 +47,8 @@ import { createPopper } from "@popperjs/core";
 import type { Placement } from "@popperjs/core";
 import { gsap } from "gsap";
 import { ScrollToPlugin } from "gsap/ScrollToPlugin";
-import { getUID } from "ui/app/utils";
-import type IInputOption from "ui/app/interface/IInputOption";
+import { getUID } from "~app/utils";
+import type IInputOption from "~app/interface/IInputOption";
 
 gsap.registerPlugin(ScrollToPlugin);
 
@@ -455,7 +455,7 @@ export default defineComponent({
 </script>
 
 <style scoped>
-@reference 'ui/app/assets/css/main.css';
+@reference '~app/assets/css/main.css';
 
 .custom-select {
   @apply relative;

package/app/components/SLSelectAllToggle.vue

@@ -65,7 +65,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference 'ui/app/assets/css/main.css';
+@reference '~app/assets/css/main.css';
 
 .select-all-toggle {
   @apply inline-flex items-stretch border rounded-sm bg-white overflow-hidden;

package/app/components/SLSidebarNav.vue

@@ -5,10 +5,10 @@
   .sidebar-wrapper
     .sidebar-logo
       a.logo(href="javascript:;" @click="onClickedLogo")
-        img.color-big(src="~ui/app/assets/images/commons/app-logo-big.svg", @load='onLogoLoaded')
-        img.white-big(src="~ui/app/assets/images/commons/app-logo-big-white.svg", @load='onLogoLoaded')
-        img.color-small(src='~ui/app/assets/images/commons/app-logo-small.svg', @load='onLogoLoaded')
-        img.white-small(src='~ui/app/assets/images/commons/app-logo-small-white.svg', @load='onLogoLoaded')
+        img.color-big(src="~app/assets/images/commons/app-logo-big.svg", @load='onLogoLoaded')
+        img.white-big(src="~app/assets/images/commons/app-logo-big-white.svg", @load='onLogoLoaded')
+        img.color-small(src='~app/assets/images/commons/app-logo-small.svg', @load='onLogoLoaded')
+        img.white-small(src='~app/assets/images/commons/app-logo-small-white.svg', @load='onLogoLoaded')
     nav.site-nav
       .nav-wrapper.custom-scrollbar-y
         template(v-for='item in config')
@@ -66,7 +66,7 @@
 import type { PropType } from "vue";
 import { createPopper } from "@popperjs/core";
 import type { Instance as PopperInstance } from "@popperjs/core";
-import type { NavConfigType } from "ui/app/interface/NavConfigType";
+import type { NavConfigType } from "~app/interface/NavConfigType";
 
 export default defineComponent({
   name: "SLSidebarNav",
@@ -247,7 +247,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference 'ui/app/assets/css/main.css';
+@reference '~app/assets/css/main.css';
 
 .sidebar {
   @apply relative h-full;
@@ -472,7 +472,7 @@ export default defineComponent({
 .sidebar-nav-intro-arrow,
 .sidebar-nav-intro-arrow::before {
   @apply absolute w-[17px] h-[20px] bg-contain;
-  background: url("~ui/app/assets/images/commons/nav-intro-arrow.svg") top left
+  background: url("~app/assets/images/commons/nav-intro-arrow.svg") top left
     no-repeat;
 }
 

package/app/components/SLSidebarNavGroupItem.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script lang="ts">
-import type { NavItemGroup } from "ui/app/interface/NavConfigType";
+import type { NavItemGroup } from "~app/interface/NavConfigType";
 
 export default defineComponent({
   name: "SLSidebarNavGroupItem",
@@ -37,7 +37,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference 'ui/app/assets/css/main.css';
+@reference '~app/assets/css/main.css';
 
 .sidebar.dark .sidebar-nav-group-item {
   @apply bg-primary-900;

package/app/components/SLSidebarNavGroupItemSection.vue

@@ -86,7 +86,7 @@ import type { Instance as PopperInstance } from "@popperjs/core";
 import {
   NavItemStatus,
   type NavItemSection,
-} from "ui/app/interface/NavConfigType";
+} from "~app/interface/NavConfigType";
 
 export default defineComponent({
   name: "SLSidebarNavGroupItemSection",
@@ -381,7 +381,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference 'ui/app/assets/css/main.css';
+@reference '~app/assets/css/main.css';
 
 .sidebar.closure .sidebar-nav-group-item-section {
   @apply items-center;

package/app/components/SLSidebarNavLinkItem.vue

@@ -66,10 +66,7 @@ NuxtLink.sidebar-nav-link-item(
 import type { NuxtLink } from "#components";
 import { createPopper } from "@popperjs/core";
 import type { Instance as PopperInstance } from "@popperjs/core";
-import {
-  NavItemStatus,
-  type NavItemLink,
-} from "ui/app/interface/NavConfigType";
+import { NavItemStatus, type NavItemLink } from "~app/interface/NavConfigType";
 
 type NuxtLinkType = InstanceType<typeof NuxtLink>;
 
@@ -229,7 +226,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference 'ui/app/assets/css/main.css';
+@reference '~app/assets/css/main.css';
 
 .sidebar.closure .sidebar-nav-link-item {
   @apply lg:p-2 lg:text-lg;

package/app/components/SLSidebarNavSectionItem.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script lang="ts">
-import type { NavItemSection } from "ui/app/interface/NavConfigType";
+import type { NavItemSection } from "~app/interface/NavConfigType";
 
 export default defineComponent({
   name: "SLSidebarNavSectionItem",
@@ -42,7 +42,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference 'ui/app/assets/css/main.css';
+@reference '~app/assets/css/main.css';
 
 .sidebar.closure .sidebar-nav-section-item {
   @apply lg:items-center;

package/app/components/SLSitePage.vue

@@ -111,7 +111,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference 'ui/app/assets/css/main.css';
+@reference '~app/assets/css/main.css';
 
 .site-page {
   @apply flex flex-col w-full min-h-full pt-1.5 lg:pt-2;

package/app/components/SLSkyInsightSitePage.vue

@@ -16,7 +16,7 @@ export default {
 </script>
 
 <style>
-@reference 'ui/app/assets/css/main.css';
+@reference '~app/assets/css/main.css';
 
 .sky-insight-site-page {
   @apply grow flex flex-col;

package/app/components/SLSortByDropdown.vue

@@ -21,7 +21,7 @@ import type { PropType } from "vue";
 import { createPopper } from "@popperjs/core";
 import type { Instance as PopperInstance } from "@popperjs/core";
 import { fromEvent, type Subscription } from "rxjs";
-import type IInputOption from "ui/app/interface/IInputOption";
+import type IInputOption from "~app/interface/IInputOption";
 
 export default defineComponent({
   name: "SLSortByDropdown",
@@ -162,7 +162,7 @@ export default defineComponent({
 </script>
 
 <style scoped>
-@reference 'ui/app/assets/css/main.css';
+@reference '~app/assets/css/main.css';
 
 .sort-by-dropdown {
   @apply inline-flex;

package/app/components/SLSpinIcon.vue

@@ -19,7 +19,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference 'ui/app/assets/css/main.css';
+@reference '~app/assets/css/main.css';
 
 i.spin-icon {
   @apply animate-spin;

package/app/components/SLStayRangeInput.vue

@@ -54,8 +54,8 @@
 <script lang="ts">
 import type { PropType } from "vue";
 import type { SLSelect } from "#components";
-import type IStayRange from "ui/app/interface/IStayRange";
-import type { StayRangeLevel } from "ui/app/interface/IStayRange";
+import type IStayRange from "~app/interface/IStayRange";
+import type { StayRangeLevel } from "~app/interface/IStayRange";
 
 type SLSelectType = InstanceType<typeof SLSelect>;
 
@@ -256,7 +256,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference 'ui/app/assets/css/main.css';
+@reference '~app/assets/css/main.css';
 
 .stay-range-input {
   @apply flex flex-col;

package/app/components/SLTable.vue

@@ -90,7 +90,7 @@
               div(v-if="loading", style="min-height: 200px")
               slot(v-else name='noItems')
                 .flex.flex-col.items-center.py-8.px-4.space-y-3
-                  img(src="~ui/app/assets/images/commons/empty-box.png")
+                  img(src="~app/assets/images/commons/empty-box.png")
                   .text-lg.text-primary-600 {{ noItems }}
                   .text-sm.text-pgray-3(v-if="reason") 可能的原因：{{ reason }}
       SLLoading(
@@ -120,7 +120,7 @@ import type { PropType } from "vue";
 import { fromEvent, type Subscription } from "rxjs";
 import { createPopper } from "@popperjs/core";
 import type { Instance as PopperInstance } from "@popperjs/core";
-import type ITableField from "ui/app/interface/ITableField";
+import type ITableField from "~app/interface/ITableField";
 
 export default defineComponent({
   name: "SLTable",
@@ -381,7 +381,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference 'ui/app/assets/css/main.css';
+@reference '~app/assets/css/main.css';
 
 .table {
   @apply block relative w-full overflow-hidden;

package/app/components/SLTableTooltip.vue

@@ -21,9 +21,9 @@
 
 <script lang="ts">
 import type { PropType } from "vue";
-import { formatDateRange } from "ui/app/utils";
-import type IDateRange from "ui/app/interface/IDateRange";
-import type ITableField from "ui/app/interface/ITableField";
+import { formatDateRange } from "~app/utils";
+import type IDateRange from "~app/interface/IDateRange";
+import type ITableField from "~app/interface/ITableField";
 
 export default defineComponent({
   name: "SLTableTooltip",
@@ -71,7 +71,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference 'ui/app/assets/css/main.css';
+@reference '~app/assets/css/main.css';
 
 .table-tooltip {
   @apply inline-block p-4 border border-primary-600 rounded bg-white shadow-popup-sm pointer-events-none;

package/app/components/SLTabs.vue

@@ -185,7 +185,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference 'ui/app/assets/css/main.css';
+@reference '~app/assets/css/main.css';
 
 .tabs.tabs-sm.tabs-type-1 > .tabs-nav ul .tab-nav-item-link {
   @apply text-sm;

package/app/components/SLTextInput.vue

@@ -41,7 +41,7 @@
 
 <script lang="ts">
 import { debounce } from "lodash-es";
-import { getUID } from "ui/app/utils";
+import { getUID } from "~app/utils";
 
 export default defineComponent({
   name: "SLTextInput",
@@ -226,7 +226,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference 'ui/app/assets/css/main.css';
+@reference '~app/assets/css/main.css';
 
 .text-input.inline {
   @apply flex;

package/app/components/SLTextarea.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script lang="ts">
-import { getUID } from "ui/app/utils";
+import { getUID } from "~app/utils";
 
 export default defineComponent({
   name: "SLTextArea",
@@ -93,7 +93,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference 'ui/app/assets/css/main.css';
+@reference '~app/assets/css/main.css';
 
 .textarea.inline {
   @apply flex;

package/app/components/SLToast.vue

@@ -55,7 +55,7 @@ export default defineComponent({
 </script>
 
 <style scoped>
-@reference 'ui/app/assets/css/main.css';
+@reference '~app/assets/css/main.css';
 
 .toast {
   @apply z-100 fixed top-0 left-0 w-full h-full pointer-events-none;

package/app/components/SLToggleButton.vue

@@ -61,7 +61,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference 'ui/app/assets/css/main.css';
+@reference '~app/assets/css/main.css';
 
 .sl-toggle-button {
   @apply inline-flex items-center justify-center p-1.5 space-x-2 bg-primary-100 rounded text-base text-primary-600;

package/app/components/SLTwoLayerMultiSelect.vue

@@ -344,7 +344,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference 'ui/app/assets/css/main.css';
+@reference '~app/assets/css/main.css';
 
 .two-layer-multi-select {
   @apply relative w-full;

package/app/components/SLTwoLayerSelect.vue

@@ -215,7 +215,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference 'ui/app/assets/css/main.css';
+@reference '~app/assets/css/main.css';
 
 .tw-layer-select {
   @apply flex flex-col w-138 h-67.75 pt-2.75 px-2.75 bg-white border border-primary-100 rounded shadow-default;

package/app/components/SLTwoLayerSingleSelect.vue

@@ -297,7 +297,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference 'ui/app/assets/css/main.css';
+@reference '~app/assets/css/main.css';
 
 .two-layer-single-select {
   @apply relative w-full;

package/app/components/SLWarnModal.vue

@@ -65,7 +65,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference 'ui/app/assets/css/main.css';
+@reference '~app/assets/css/main.css';
 
 .warn-modal .modal-body-content {
   @apply flex flex-col items-center space-y-6 text-base text-pgray-2;

package/app/interface/IOrganization.ts

@@ -1,6 +1,6 @@
 export enum OrgUserRole {
-  Personal = 'personal',
-  Admin = 'admin',
-  Editor = 'editor',
-  Normal = 'normal',
+  Personal = "personal",
+  Admin = "admin",
+  Editor = "editor",
+  Normal = "normal",
 }

package/app/models/DateRange.ts

@@ -1,19 +1,19 @@
-import { format } from 'date-fns';
-import type IDateRange from '~ui/interface/IDateRange';
+import { format } from "date-fns";
+import type IDateRange from "~app/interface/IDateRange";
 
 class DateRange implements IDateRange {
   start: Date;
   end: Date;
-  
+
   constructor(start: Date, end: Date) {
     this.start = start;
     this.end = end;
   }
 
   toString() {
-    return `${format(this.start, 'yyyy/MM/dd')} - ${format(
+    return `${format(this.start, "yyyy/MM/dd")} - ${format(
       this.end,
-      'yyyy/MM/dd'
+      "yyyy/MM/dd",
     )}`;
   }
 }

package/app/utils/index.ts

@@ -17,11 +17,12 @@ import {
 } from "date-fns";
 import { sortBy, isEqual } from "lodash-es";
 import { HanRegex } from "#imports";
-import type IDateRange from "ui/app/interface/IDateRange";
-import { ScreenSize } from "ui/app/interface/commons";
+import type IDateRange from "~app/interface/IDateRange";
+import { ScreenSize } from "~app/interface/commons";
 import type ExcelJS from "exceljs";
 import { useGtm } from "@gtm-support/vue-gtm";
 import * as htmlToImage from "html-to-image";
+import WatermarkImage from "~public/assets/images/commons/watermark-2.svg";
 
 export const getUID = () => {
   return `uid-${Math.random().toString(36).substring(2)}`;
@@ -726,7 +727,7 @@ export const domToPngDataUrl = async (
   padding: number = 0,
   dateRanges: (IDateRange | null)[] = [],
   watermark: boolean = true,
-  watermarkImg: string = "/assets/images/commons/watermark-2.svg",
+  watermarkImg: string = WatermarkImage,
 ) => {
   if (!imageTarget) {
     console.log("Can not find target of htmlToImage!");

package/nuxt.config.ts

@@ -1,6 +1,9 @@
 import { fileURLToPath } from "node:url";
+import { dirname, join } from "node:path";
 import tailwindcss from "@tailwindcss/vite";
 
+const currentDir = dirname(fileURLToPath(import.meta.url));
+
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
@@ -9,7 +12,8 @@ export default defineNuxtConfig({
     name: "skylens-ui",
   },
   alias: {
-    ui: fileURLToPath(new URL("./", import.meta.url)),
+    "~app": join(currentDir, "./app"),
+    "~public": join(currentDir, "./public"),
   },
   runtimeConfig: {
     public: {
@@ -19,11 +23,11 @@ export default defineNuxtConfig({
     },
   },
   css: [
-    "ui/app/assets/css/main.css",
-    "ui/app/assets/css/icons.css",
-    "ui/app/assets/css/layout.css",
+    "~app/assets/css/main.css",
+    "~app/assets/css/icon.css",
+    "~app/assets/css/layout.css",
   ],
-  plugins: ["ui/app/plugins/v-calendar.ts"],
+  plugins: ["~app/plugins/v-calendar.ts"],
   vite: {
     plugins: [tailwindcss()],
   },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mptw/skylens-ui",
   "type": "module",
-  "version": "1.5.9",
+  "version": "1.5.11",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",
@@ -17,7 +17,9 @@
     "eslint": "^10.8.0",
     "nuxt": "^4.5.1",
     "typescript": "^6.0.3",
-    "vue": "^3.5.40",
+    "vue": "^3.5.40"
+  },
+  "dependencies": {
     "@gtm-support/vue-gtm": "^3.2.0",
     "@popperjs/core": "^2.11.8",
     "@tailwindcss/vite": "^4.3.3",