@mptw/skylens-ui 1.5.5 → 1.5.7

package/app/app.vue

@@ -1,4 +1,4 @@
 <template lang="pug">
   div
-    SLTable
+    SLCalendarButton
 </template>

package/app/assets/css/main.css

@@ -159,14 +159,8 @@
 
   --transition-input-focus: "margin, padding, color, font-size, line-height, background-color";
   --transition-app-header: "margin, width";
-  --transition-width: "width";
-  --transition-height: "height";
-  --transition-margin: "margin";
-  --transition-font-size: "font-size";
-  --transition-padding: "padding";
   --transition-sidebar-nav-item: "border-radius, width";
   --transition-sidebar-nav-item-icon: "width, height, font-size";
-  --transition-border-radius: "border-radius";
 
   --text-shadow-default: "0px 4px 4px rgba(0, 0, 0, 0.25)";
   --text-shadow-md: "0px 2px 8px rgba(88, 82, 103, 0.25)";

package/app/components/SLButton.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-button(:type='type', :class='btnClass' :disabled="disabled")
+button(:type='type', :class='btnClass' :disabled="disabled", @click='onClicked')
   .btn-content
     slot
       SLIcon.btn-icon(v-if='icon !== ""', :icon='icon')
@@ -78,6 +78,7 @@ export default defineComponent({
       default: false,
     },
   },
+  emits: ["click"],
   setup(props, { emit }) {
     const { size, color, variant, disabled, loading } = toRefs(props);
 
@@ -102,8 +103,13 @@ export default defineComponent({
       return btnClass.join(" ");
     });
 
+    function onClicked() {
+      emit("click");
+    }
+
     return {
       btnClass,
+      onClicked,
     };
   },
 });

package/app/components/SLCalendarButton.vue

@@ -34,15 +34,15 @@
 </template>
 
 <script lang="ts">
-import { SLCalendarPopup } from "#components";
+import type { SLCalendarPopup } from "#components";
 import type { PropType } from "vue";
 import { fromEvent } from "rxjs";
 import { differenceInCalendarDays, subDays } from "date-fns";
 import { createPopper } from "@popperjs/core";
 import type { Placement } from "@popperjs/core";
-import DateRange from "~ui/app/models/DateRange";
-import type IDateRange from "~ui/app/interface/IDateRange";
-import { OnlineSourceType } from "~ui/app/interface/IWeb";
+import DateRange from "ui/app/models/DateRange";
+import type IDateRange from "ui/app/interface/IDateRange";
+import { OnlineSourceType } from "ui/app/interface/IWeb";
 
 type SLCalendarPopupType = InstanceType<typeof SLCalendarPopup>;
 

package/app/components/SLCalendarPopup.vue

@@ -109,7 +109,6 @@ import type { PropType } from "vue";
 import {
   parse as parseDateString,
   format as formatDate,
-  addDays,
   subDays,
   differenceInCalendarDays,
   isBefore,
@@ -122,9 +121,9 @@ import {
   isPreviousDateRange,
   previousDateRange,
   isValidDate,
-} from "~ui/app/utils";
-import type IDateRange from "~ui/app/interface/IDateRange";
-import { OnlineSourceType } from "~ui/app/interface/IWeb";
+} from "ui/app/utils";
+import type IDateRange from "ui/app/interface/IDateRange";
+import { OnlineSourceType } from "ui/app/interface/IWeb";
 
 const DateStringRegexp = /[0-9]{4}\/[0-9]{2}\/[0-9]{2}/;
 

package/app/components/SLCheckbox.vue

@@ -16,8 +16,8 @@
 
 <script lang="ts">
 import { isEqual } from "lodash-es";
-import type IInputOption from "~ui/app/interface/IInputOption";
-import { getUID } from "~ui/app/utils";
+import type IInputOption from "ui/app/interface/IInputOption";
+import { getUID } from "ui/app/utils";
 
 export default defineComponent({
   name: "SLCheckbox",

package/app/components/SLCollapsableMulitPillSelect.vue

@@ -23,7 +23,7 @@
 
 <script lang="ts">
 import type { PropType } from "vue";
-import type IInputOption from "~ui/app/interface/IInputOption";
+import type IInputOption from "ui/app/interface/IInputOption";
 
 export default defineComponent({
   name: "SLCollapsableMultiPillSelect",

package/app/components/SLContextMenu.vue

@@ -18,8 +18,8 @@
 </template>
 
 <script lang="ts">
-import { fromEvent, Subscription } from "rxjs";
-import type IDateRange from "~ui/app/interface/IDateRange";
+import { fromEvent, type Subscription } from "rxjs";
+import type IDateRange from "ui/app/interface/IDateRange";
 
 const WatermarkImage = "/assets/images/commons/watermark-2.svg";
 const keys = { 37: 1, 38: 1, 30: 1, 40: 1 };

package/app/components/SLDateInput.vue

@@ -69,9 +69,8 @@
 import type { PropType } from "vue";
 import { DatePicker } from "v-calendar";
 import "v-calendar/style.css";
-import type { PopoverVisibility } from "v-calendar/dist/types/src/utils/popovers";
 import { isDate, differenceInCalendarDays } from "date-fns";
-import type IDateRange from "~ui/app/interface/IDateRange";
+import type IDateRange from "ui/app/interface/IDateRange";
 
 type DatePickerType = InstanceType<typeof DatePicker> & {
   hidePopover: () => void;
@@ -165,7 +164,6 @@ export default defineComponent({
       maxRangeDays,
       is24hr,
       minDate,
-      maxDate,
       disabled,
       mode,
       startPlaceholder,
@@ -233,7 +231,7 @@ export default defineComponent({
       return beReadonly.value
         ? false
         : {
-            visibility: "click" as PopoverVisibility,
+            visibility: "click",
           };
     });
     const endMinDate = computed(() => {

package/app/components/SLDatePicker.vue

@@ -29,7 +29,7 @@ import {
   max as dateMax,
   isDate,
 } from "date-fns";
-import type IDateRange from "~ui/app/interface/IDateRange";
+import type IDateRange from "ui/app/interface/IDateRange";
 
 type DatePickerType = InstanceType<typeof DatePicker>;
 

package/app/components/SLDownloadButton.vue

@@ -27,12 +27,12 @@
 
 <script lang="ts">
 import type { PropType } from "vue";
-import { fromEvent, Subscription } from "rxjs";
+import { fromEvent, type Subscription } from "rxjs";
 import { createPopper } from "@popperjs/core";
 import type { Instance as PopperInstance, Placement } from "@popperjs/core";
 import ExcelJS from "exceljs";
-import { downloadURL, downloadBlob, gaev, ga4ev } from "~ui/app/utils";
-import type IDateRange from "~ui/app/interface/IDateRange";
+import { downloadURL, downloadBlob, gaev, ga4ev } from "ui/app/utils";
+import type IDateRange from "ui/app/interface/IDateRange";
 
 // http://www.excelcodex.com/2012/06/worksheets-naming-conventions/
 function safeSheetName(name: string) {

package/app/components/SLEyeCheckbox.vue

@@ -18,7 +18,7 @@
 
 <script lang="ts">
 import { isEqual } from "lodash-es";
-import { getUID } from "~ui/app/utils";
+import { getUID } from "ui/app/utils";
 
 export default defineComponent({
   name: "SLEyeCheckbox",

package/app/components/SLFileInput.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script lang="ts">
-import { getUID } from "~ui/app/utils";
+import { getUID } from "ui/app/utils";
 
 export default defineComponent({
   name: "SLFileInput",

package/app/components/SLGenderAgeSelect.vue

@@ -39,10 +39,10 @@
 
 <script lang="ts">
 import type { PropType } from "vue";
-import { fromEvent, Subscription } from "rxjs";
+import { fromEvent, type Subscription } from "rxjs";
 import { createPopper } from "@popperjs/core";
 import type { Instance as PopperInstance } from "@popperjs/core";
-import { AGE_RANGE_NAME } from "~ui/app/utils/constants";
+import { AGE_RANGE_NAME } from "ui/app/utils/constants";
 
 export default defineComponent({
   name: "SLGenderAgeSelect",

package/app/components/SLHourRangeInput.vue

@@ -33,7 +33,7 @@
 
 <script lang="ts">
 import type { PropType } from "vue";
-import type IHourRange from "~ui/app/interface/IHourRange";
+import type IHourRange from "ui/app/interface/IHourRange";
 
 export default defineComponent({
   name: "SLHourRangeInput",

package/app/components/SLIOSSwitch.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script lang="ts">
-import { getUID } from "~ui/app/utils";
+import { getUID } from "ui/app/utils";
 
 export default defineComponent({
   name: "SLIOSSwitch",

package/app/components/SLLegend.vue

@@ -24,7 +24,7 @@
 
 <script lang="ts">
 import type { PropType } from "vue";
-import type ILegendItem from "~ui/app/interface/ILegendItem";
+import type ILegendItem from "ui/app/interface/ILegendItem";
 
 export default defineComponent({
   name: "SLLegend",

package/app/components/SLMapChart.vue

@@ -16,8 +16,7 @@
 import type { PropType } from "vue";
 import axios from "axios";
 import ECharts from "vue-echarts";
-import { use } from "echarts/core";
-import { registerMap } from "echarts/core";
+import { use, registerMap } from "echarts/core";
 import { MapChart } from "echarts/charts";
 import {
   GridComponent,

package/app/components/SLModal.vue

@@ -38,7 +38,7 @@ Transition(
   </template>
 
 <script lang="ts">
-import { fromEvent, Subscription } from "rxjs";
+import { fromEvent, type Subscription } from "rxjs";
 import { gsap } from "gsap";
 
 export default defineComponent({

package/app/components/SLMonthCalendarButton.vue

@@ -53,7 +53,7 @@
 
 <script lang="ts">
 import type { PropType } from "vue";
-import { fromEvent, Subscription } from "rxjs";
+import { fromEvent, type Subscription } from "rxjs";
 import {
   subMonths,
   differenceInCalendarMonths,
@@ -61,7 +61,7 @@ import {
 } from "date-fns";
 import { createPopper } from "@popperjs/core";
 import type { Instance as PopperInstance } from "@popperjs/core";
-import { gaev, ga4ev } from "~ui/app/utils";
+import { gaev, ga4ev } from "ui/app/utils";
 
 export default defineComponent({
   name: "SLMonthCalendarButton",

package/app/components/SLMultiEmailInput.vue

@@ -107,12 +107,12 @@
 import type { PropType } from "vue";
 import { createPopper } from "@popperjs/core";
 import type { Instance as PopperInstance } from "@popperjs/core";
-import { fromEvent, Subscription } from "rxjs";
+import { fromEvent, type Subscription } from "rxjs";
 import Swiper from "swiper";
 import { FreeMode, Scrollbar, Mousewheel } from "swiper/modules";
 import "swiper/css";
 import "swiper/css/scrollbar";
-import { OrgUserRole } from "~ui/app/interface/IOrganization";
+import { OrgUserRole } from "ui/app/interface/IOrganization";
 
 export default defineComponent({
   name: "SLMultiEmailInput",

package/app/components/SLMultiSelect.vue

@@ -16,7 +16,7 @@
 <script lang="ts">
 import type { PropType } from "vue";
 import { isEqual } from "lodash-es";
-import type IInputOption from "~ui/app/interface/IInputOption";
+import type IInputOption from "ui/app/interface/IInputOption";
 
 export default defineComponent({
   name: "SLMultiSelect",

package/app/components/SLPillCheckbox.vue

@@ -16,7 +16,7 @@
 <script lang="ts">
 import type { PropType } from "vue";
 import { isEqual } from "lodash-es";
-import { getUID } from "~ui/app/utils";
+import { getUID } from "ui/app/utils";
 
 export default defineComponent({
   name: "SLPillCheckbox",

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 "ui/app/interface/IPopupMenuButton";
 
 export default defineComponent({
   name: "SLPopupMenuButton",

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 "ui/app/interface/IOrganization";
 
 export default defineComponent({
   name: "SLProjectShareItem",

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 "ui/app/utils";
 
 export default defineComponent({
   name: "SLRadioButton",

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 "ui/app/interface/IInputOption";
 
 export default defineComponent({
   name: "SLRadioButtonGroup",

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 "ui/app/utils";
+import type IInputOption from "ui/app/interface/IInputOption";
 
 export default defineComponent({
   name: "SLRadioGroup",

package/app/components/SLRegionsMapChart.vue

@@ -13,8 +13,7 @@
 import type { PropType } from "vue";
 import axios from "axios";
 import ECharts from "vue-echarts";
-import { use } from "echarts/core";
-import { registerMap } from "echarts/core";
+import { use, registerMap } from "echarts/core";
 import { MapChart } from "echarts/charts";
 import {
   GridComponent,

package/app/components/SLRightSider.vue

@@ -29,7 +29,7 @@
 </template>
 
 <script lang="ts">
-import { fromEvent, interval, Subscription } from "rxjs";
+import { fromEvent, interval, type Subscription } from "rxjs";
 import { debounce, startWith } from "rxjs/operators";
 
 export default defineComponent({

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 "ui/app/utils";
+import type IInputOption from "ui/app/interface/IInputOption";
 
 gsap.registerPlugin(ScrollToPlugin);
 

package/app/components/SLSidebarNav.vue

@@ -66,7 +66,7 @@
 import type { PropType } from "vue";
 import { createPopper } from "@popperjs/core";
 import type { Instance as PopperInstance } from "@popperjs/core";
-import { NavType, type NavConfigType } from "~ui/app/interface/NavConfigType";
+import type { NavConfigType } from "ui/app/interface/NavConfigType";
 
 export default defineComponent({
   name: "SLSidebarNav",

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 "ui/app/interface/NavConfigType";
 
 export default defineComponent({
   name: "SLSidebarNavGroupItem",

package/app/components/SLSidebarNavGroupItemSection.vue

@@ -79,14 +79,14 @@
 </template>
 
 <script lang="ts">
-import { fromEvent, Subscription } from "rxjs";
+import { fromEvent, type Subscription } from "rxjs";
 import gsap from "gsap";
 import { createPopper } from "@popperjs/core";
 import type { Instance as PopperInstance } from "@popperjs/core";
 import {
   NavItemStatus,
   type NavItemSection,
-} from "~ui/app/interface/NavConfigType";
+} from "ui/app/interface/NavConfigType";
 
 export default defineComponent({
   name: "SLSidebarNavGroupItemSection",

package/app/components/SLSidebarNavLinkItem.vue

@@ -63,13 +63,13 @@ NuxtLink.sidebar-nav-link-item(
 </template>
 
 <script lang="ts">
-import { NuxtLink } from "#components";
+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";
+} from "ui/app/interface/NavConfigType";
 
 type NuxtLinkType = InstanceType<typeof NuxtLink>;
 

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 "ui/app/interface/NavConfigType";
 
 export default defineComponent({
   name: "SLSidebarNavSectionItem",

package/app/components/SLSortByDropdown.vue

@@ -20,8 +20,8 @@
 import type { PropType } from "vue";
 import { createPopper } from "@popperjs/core";
 import type { Instance as PopperInstance } from "@popperjs/core";
-import { fromEvent, Subscription } from "rxjs";
-import type IInputOption from "~ui/app/interface/IInputOption";
+import { fromEvent, type Subscription } from "rxjs";
+import type IInputOption from "ui/app/interface/IInputOption";
 
 export default defineComponent({
   name: "SLSortByDropdown",

package/app/components/SLStayRangeInput.vue

@@ -53,9 +53,9 @@
 
 <script lang="ts">
 import type { PropType } from "vue";
-import { SLSelect } from "#components";
-import type IStayRange from "~ui/app/interface/IStayRange";
-import { StayRangeLevel } from "~ui/app/interface/IStayRange";
+import type { SLSelect } from "#components";
+import type IStayRange from "ui/app/interface/IStayRange";
+import type { StayRangeLevel } from "ui/app/interface/IStayRange";
 
 type SLSelectType = InstanceType<typeof SLSelect>;
 

package/app/components/SLTable.vue

@@ -117,10 +117,10 @@
 
 <script lang="ts">
 import type { PropType } from "vue";
-import { fromEvent, Subscription } from "rxjs";
+import { fromEvent, type Subscription } from "rxjs";
 import { createPopper } from "@popperjs/core";
 import type { Instance as PopperInstance } from "@popperjs/core";
-import type ITableField from "@/interface/ITableField";
+import type ITableField from "ui/app/interface/ITableField";
 
 export default defineComponent({
   name: "SLTable",

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 "ui/app/utils";
+import type IDateRange from "ui/app/interface/IDateRange";
+import type ITableField from "ui/app/interface/ITableField";
 
 export default defineComponent({
   name: "SLTableTooltip",

package/app/components/SLTabs.vue

@@ -37,9 +37,9 @@
 </template>
 
 <script lang="ts">
-import { fromEvent, interval, Subscription } from "rxjs";
+import { fromEvent, interval, type Subscription } from "rxjs";
 import { debounce, startWith } from "rxjs/operators";
-import { SLDistributor } from "#components";
+import type { SLDistributor } from "#components";
 
 type SLDistributorType = InstanceType<typeof SLDistributor>;
 

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 "ui/app/utils";
 
 export default defineComponent({
   name: "SLTextInput",

package/app/components/SLTextarea.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script lang="ts">
-import { getUID } from "~ui/app/utils";
+import { getUID } from "ui/app/utils";
 
 export default defineComponent({
   name: "SLTextArea",

package/app/components/SLTwoLayerSingleSelect.vue

@@ -30,7 +30,7 @@ import type { PropType } from "vue";
 import { fromEvent } from "rxjs";
 import { createPopper } from "@popperjs/core";
 import type { Placement } from "@popperjs/core";
-import { SLTwoLayerSelect } from "#components";
+import type { SLTwoLayerSelect } from "#components";
 
 type SLTwoLayerSelectType = InstanceType<typeof SLTwoLayerSelect>;
 

package/app/utils/index.ts

@@ -17,9 +17,9 @@ 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 ExcelJS from "exceljs";
+import type IDateRange from "ui/app/interface/IDateRange";
+import { ScreenSize } from "ui/app/interface/commons";
+import type ExcelJS from "exceljs";
 import { useGtm } from "@gtm-support/vue-gtm";
 import * as htmlToImage from "html-to-image";
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mptw/skylens-ui",
   "type": "module",
-  "version": "1.5.5",
+  "version": "1.5.7",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",
@@ -28,6 +28,7 @@
     "@types/lodash-es": "^4.17.12",
     "@types/sortablejs": "^1.15.9",
     "@vue/language-plugin-pug": "^3.3.8",
+    "axios": "^1.19.0",
     "commonmark": "^0.31.2",
     "date-fns": "^4.4.0",
     "dompurify": "^3.4.12",