@mptw/skylens-ui 1.5.11 → 1.5.12

package/app/app.config.ts

@@ -1,14 +1,5 @@
-export default defineAppConfig({
-  "skylens-ui": {
-    name: "SkylensUI",
-  },
-});
+export default defineAppConfig({});
 
 declare module "@nuxt/schema" {
-  interface AppConfigInput {
-    "skylens-ui"?: {
-      /** Project name */
-      name?: string;
-    };
-  }
+  interface AppConfigInput {}
 }

package/app/app.vue

@@ -1,4 +1,26 @@
 <template lang="pug">
-  div
-    SLCalendarButton
+div {{ screenSizeString }}
 </template>
+
+<script setup lang="ts">
+import { ScreenSize } from "./interface/commons";
+
+const screenSize = ref<ScreenSize>(ScreenSize["2xl"]);
+
+const screenSizeString = computed(() => {
+  switch (screenSize.value) {
+    case ScreenSize.md:
+      return "md";
+    case ScreenSize.lg:
+      return "lg";
+    case ScreenSize["1.5xl"]:
+      return "1.5xl";
+    case ScreenSize["2xl"]:
+      return "2xl";
+    case ScreenSize.xl:
+      return "xl";
+    default:
+      return "";
+  }
+});
+</script>

package/app/assets/css/icons.css

@@ -1,18 +1,20 @@
 @font-face {
-  font-family: 'MEShPlus-font-icon';
-  src:  url('fonts/MEShPlus-font-icon.eot?63gs52');
-  src:  url('fonts/MEShPlus-font-icon.eot?63gs52#iefix') format('embedded-opentype'),
-    url('fonts/MEShPlus-font-icon.ttf?63gs52') format('truetype'),
-    url('fonts/MEShPlus-font-icon.woff?63gs52') format('woff'),
-    url('fonts/MEShPlus-font-icon.svg?63gs52#MEShPlus-font-icon') format('svg');
+  font-family: "MEShPlus-font-icon";
+  src: url("fonts/MEShPlus-font-icon.eot?63gs52");
+  src:
+    url("fonts/MEShPlus-font-icon.eot?63gs52#iefix") format("embedded-opentype"),
+    url("fonts/MEShPlus-font-icon.ttf?63gs52") format("truetype"),
+    url("fonts/MEShPlus-font-icon.woff?63gs52") format("woff"),
+    url("fonts/MEShPlus-font-icon.svg?63gs52#MEShPlus-font-icon") format("svg");
   font-weight: normal;
   font-style: normal;
   font-display: block;
 }
 
-[class^="icon-"], [class*=" icon-"] {
+[class^="icon-"],
+[class*=" icon-"] {
   /* use !important to prevent issues with browser extensions that change fonts */
-  font-family: 'MEShPlus-font-icon' !important;
+  font-family: "MEShPlus-font-icon" !important;
   speak: never;
   font-style: normal;
   font-weight: normal;

package/app/assets/css/layout.css

@@ -1,4 +1,4 @@
-@reference '~app/assets/css/main.css';
+@reference '~uiApp/assets/css/main.css';
 
 @layer base {
   body {

package/app/assets/css/main.css

@@ -1,115 +1,116 @@
 @import "tailwindcss";
+@source "../../**/*.{vue,ts,html}";
 
 @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";
+  --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,
@@ -118,52 +119,55 @@
     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";
-  --transition-sidebar-nav-item: "border-radius, width";
-  --transition-sidebar-nav-item-icon: "width, height, font-size";
-
-  --text-shadow-default: "0px 4px 4px rgba(0, 0, 0, 0.25)";
-  --text-shadow-md: "0px 2px 8px rgba(88, 82, 103, 0.25)";
+  --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.1);
+  --shadow-small-card: 2px 2px 4px rgba(0, 0, 0, 0.1);
+  --shadow-float-actions: 0px -6px 12px 0px rgba(90, 92, 133, 0.1);
+
+  --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;
+  --transition-sidebar-nav-item: border-radius, width;
+  --transition-sidebar-nav-item-icon: width, height, font-size;
+
+  --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;

package/app/components/SLAlertModal.vue

@@ -75,7 +75,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~app/assets/css/main.css';
+@reference '~uiApp/assets/css/main.css';
 
 .alert-modal {
   @apply z-60;

package/app/components/SLBreadcrumbs.vue

@@ -30,7 +30,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~app/assets/css/main.css';
+@reference '~uiApp/assets/css/main.css';
 
 .breadcrumbs {
   @apply flex flex-wrap items-center justify-start text-lg text-primary font-bold;

package/app/components/SLButton.vue

@@ -116,7 +116,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~app/assets/css/main.css';
+@reference '~uiApp/assets/css/main.css';
 
 .btn {
   @apply relative inline-flex items-center justify-center p-1.75 border border-transparent rounded bg-transparent text-base leading-[1.3125] focus:outline-none;

package/app/components/SLCalendarButton.vue

@@ -40,9 +40,9 @@ import { fromEvent } from "rxjs";
 import { differenceInCalendarDays, subDays } from "date-fns";
 import { createPopper } from "@popperjs/core";
 import type { Placement } from "@popperjs/core";
-import DateRange from "~app/models/DateRange";
-import type IDateRange from "~app/interface/IDateRange";
-import { OnlineSourceType } from "~app/interface/IWeb";
+import DateRange from "~uiApp/models/DateRange";
+import type IDateRange from "~uiApp/interface/IDateRange";
+import { OnlineSourceType } from "~uiApp/interface/IWeb";
 
 type SLCalendarPopupType = InstanceType<typeof SLCalendarPopup>;
 
@@ -241,7 +241,7 @@ export default defineComponent({
 </script>
 
 <style scoped>
-@reference '~app/assets/css/main.css';
+@reference '~uiApp/assets/css/main.css';
 
 .calendar-button {
   @apply inline-block;

package/app/components/SLCalendarPopup.vue

@@ -121,9 +121,9 @@ import {
   isPreviousDateRange,
   previousDateRange,
   isValidDate,
-} from "~app/utils";
-import type IDateRange from "~app/interface/IDateRange";
-import { OnlineSourceType } from "~app/interface/IWeb";
+} from "~uiApp/utils";
+import type IDateRange from "~uiApp/interface/IDateRange";
+import { OnlineSourceType } from "~uiApp/interface/IWeb";
 
 const DateStringRegexp = /[0-9]{4}\/[0-9]{2}\/[0-9]{2}/;
 
@@ -774,7 +774,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~app/assets/css/main.css';
+@reference '~uiApp/assets/css/main.css';
 
 .calendar-popup {
   @apply w-auto py-4 border border-primary-100 rounded-lg bg-white shadow-md overflow-hidden;

package/app/components/SLCard.vue

@@ -63,7 +63,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~app/assets/css/main.css';
+@reference '~uiApp/assets/css/main.css';
 
 .tabs .tabs .card {
   @apply border-0 rounded-none shadow-none;

package/app/components/SLChart.vue

@@ -188,7 +188,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~app/assets/css/main.css';
+@reference '~uiApp/assets/css/main.css';
 
 .chart {
   @apply flex w-full h-52 min-h-52 overflow-hidden;

package/app/components/SLCheckbox.vue

@@ -16,8 +16,8 @@
 
 <script lang="ts">
 import { isEqual } from "lodash-es";
-import type IInputOption from "~app/interface/IInputOption";
-import { getUID } from "~app/utils";
+import type IInputOption from "~uiApp/interface/IInputOption";
+import { getUID } from "~uiApp/utils";
 
 export default defineComponent({
   name: "SLCheckbox",
@@ -181,7 +181,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~app/assets/css/main.css';
+@reference '~uiApp/assets/css/main.css';
 
 .checkbox {
   @apply inline-flex relative text-base align-top overflow-hidden;

package/app/components/SLCircleButton.vue

@@ -72,7 +72,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~app/assets/css/main.css';
+@reference '~uiApp/assets/css/main.css';
 
 .circle-button {
   @apply inline-flex items-center justify-center relative w-10 h-10 rounded-full bg-white text-xl leading-5.75 text-white;

package/app/components/SLCollapsableBlock.vue

@@ -96,7 +96,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~app/assets/css/main.css';
+@reference '~uiApp/assets/css/main.css';
 
 .sl-collapsable-block {
   @apply p-3.75 border border-secondary-400 rounded-lg;

package/app/components/SLCollapsableMulitPillSelect.vue

@@ -23,7 +23,7 @@
 
 <script lang="ts">
 import type { PropType } from "vue";
-import type IInputOption from "~app/interface/IInputOption";
+import type IInputOption from "~uiApp/interface/IInputOption";
 
 export default defineComponent({
   name: "SLCollapsableMultiPillSelect",
@@ -73,7 +73,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~app/assets/css/main.css';
+@reference '~uiApp/assets/css/main.css';
 
 .collapsable-multi-pill-select .toggle-button {
   @apply inline-flex items-center justify-between w-80 p-2 mb-2 border border-primary-500 rounded text-base text-pgray-2;

package/app/components/SLConfirmModal.vue

@@ -113,7 +113,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~app/assets/css/main.css';
+@reference '~uiApp/assets/css/main.css';
 
 .confirm-modal .modal-backdrop {
   @apply bg-white/40 backdrop-blur-[5px];

package/app/components/SLContextMenu.vue

@@ -19,8 +19,8 @@
 
 <script lang="ts">
 import { fromEvent, type Subscription } from "rxjs";
-import type IDateRange from "~app/interface/IDateRange";
-import WatermarkImage from "~public/assets/images/commons/watermark-2.svg";
+import type IDateRange from "~uiApp/interface/IDateRange";
+import WatermarkImage from "~uiPublic/assets/images/commons/watermark-2.svg";
 
 // const WatermarkImage = "/assets/images/commons/watermark-2.svg";
 const keys = { 37: 1, 38: 1, 30: 1, 40: 1 };
@@ -268,7 +268,7 @@ export default defineComponent({
 </script>
 
 <style scoped>
-@reference '~app/assets/css/main.css';
+@reference '~uiApp/assets/css/main.css';
 
 .sl-context-menu-wrapper {
   @apply hidden;

package/app/components/SLDateInput.vue

@@ -70,7 +70,7 @@ import type { PropType } from "vue";
 import { DatePicker } from "v-calendar";
 import "v-calendar/style.css";
 import { isDate, differenceInCalendarDays } from "date-fns";
-import type IDateRange from "~app/interface/IDateRange";
+import type IDateRange from "~uiApp/interface/IDateRange";
 
 type DatePickerType = InstanceType<typeof DatePicker> & {
   hidePopover: () => void;
@@ -363,7 +363,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~app/assets/css/main.css';
+@reference '~uiApp/assets/css/main.css';
 
 .date-input.date-input-xs .input-group-prepend {
   @apply pl-2.75 pr-4 rounded-l-lg;

package/app/components/SLDatePicker.vue

@@ -29,7 +29,7 @@ import {
   max as dateMax,
   isDate,
 } from "date-fns";
-import type IDateRange from "~app/interface/IDateRange";
+import type IDateRange from "~uiApp/interface/IDateRange";
 
 type DatePickerType = InstanceType<typeof DatePicker>;
 
@@ -137,7 +137,7 @@ export default defineComponent({
 </script>
 
 <style>
-@reference '~app/assets/css/main.css';
+@reference '~uiApp/assets/css/main.css';
 
 .custom-date-picker .vc-pane-container {
   @apply border-0;