@mptw/skylens-ui 1.4.109 → 1.5.1

package/app/components/SLButton.vue

@@ -0,0 +1,370 @@
+<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>
+@reference '~ui/app/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;
+}
+
+.btn.btn-lg {
+  @apply px-7.75;
+}
+
+.btn.btn-md {
+  @apply px-3.75;
+}
+
+.btn.btn-sm {
+  @apply py-0.75 px-1.75;
+}
+
+.btn.btn-sm .btn-content {
+  @apply space-x-1;
+}
+
+.btn.btn-xs {
+  @apply py-0.75 px-1.75 text-xs;
+}
+
+.btn.btn-xs .btn-content {
+  @apply space-x-1;
+}
+
+.btn.btn-xxs {
+  @apply p-0.75 text-sm;
+}
+
+.btn.btn-xxs .btn-content {
+  @apply space-x-1;
+}
+
+.btn.btn-xxs .btn-content .icon.btn-icon {
+  @apply text-sm leading-none;
+}
+
+.btn-white {
+  @apply bg-white border-white text-pgray-2 hover:bg-white hover:border-white;
+}
+
+.btn-white.btn-outline {
+  @apply text-pgray-2 hover:text-pgray-2;
+}
+
+.btn-white .btn-loading .loading div {
+  border-color: white transparent transparent transparent;
+}
+
+.btn-primary {
+  @apply bg-primary border-primary text-white hover:bg-primary-800 hover:border-primary-800;
+}
+
+.btn-primary.btn-outline {
+  @apply text-primary hover:text-primary-800;
+}
+
+.btn-primary .btn-loading .loading div {
+  border-color: var(--color-primary) transparent transparent transparent;
+}
+
+.btn-primary-600 {
+  @apply bg-primary-600 border-primary-600 text-white hover:bg-primary hover:border-primary;
+}
+
+.btn-primary-600.btn-outline {
+  @apply text-primary-600 hover:text-primary;
+}
+
+.btn-primary-600 .btn-loading .loading div {
+  border-color: var(--color-primary-600) transparent transparent transparent;
+}
+
+.btn-highlight-500 {
+  @apply bg-highlight-500 border-highlight-500 text-white hover:bg-highlight-400 hover:text-white hover:border-highlight-400;
+}
+
+.btn-highlight-500.btn-outline {
+  @apply text-highlight-500 hover:text-highlight-400;
+}
+
+.btn-highlight-500 .btn-loading .loading div {
+  border-color: var(--color-highlight-400) transparent transparent transparent;
+}
+
+.btn-third {
+  @apply bg-third border-third text-white hover:bg-third-600 hover:text-white hover:border-third-600;
+}
+
+.btn-third.btn-outline {
+  @apply text-third hover:text-third-600;
+}
+
+.btn-third .btn-loading .loading div {
+  border-color: var(--color-third-600) transparent transparent transparent;
+}
+
+.btn-danger {
+  @apply bg-danger border-danger text-white hover:bg-danger-light hover:border-danger-light;
+}
+
+.btn-danger.btn-outline {
+  @apply text-danger hover:text-danger-light;
+}
+
+.btn-danger .btn-loading .loading div {
+  border-color: var(--color-danger-light) transparent transparent transparent;
+}
+
+.btn-pgray-5 {
+  @apply bg-pgray-5 border-pgray-5 text-pgray-2 hover:bg-pgray-4p5 hover:border-pgray-4p5;
+}
+
+.btn-pgray-5.btn-outline {
+  @apply text-pgray-5 hover:text-pgray-4p5;
+}
+
+.btn-pgray-5 .btn-loading .loading div {
+  border-color: var(--color-pgray-4p5) transparent transparent transparent;
+}
+
+.btn-pgray-2 {
+  @apply bg-pgray-2 border-pgray-2 text-white hover:bg-pgray-3 hover:border-pgray-3;
+}
+
+.btn-pgray-2.btn-outline {
+  @apply text-pgray-2 hover:text-pgray-3;
+}
+
+.btn-pgray-2 .btn-loading .loading div {
+  border-color: var(--color-pgray-3) transparent transparent transparent;
+}
+
+.btn-secondary {
+  @apply bg-secondary border-secondary text-white hover:bg-secondary-800 hover:border-secondary-800;
+}
+
+.btn-secondary.btn-outline {
+  @apply text-secondary hover:text-secondary-800;
+}
+
+.btn-secondary .btn-loading .loading div {
+  border-color: var(--color-secondary-500) transparent transparent transparent;
+}
+
+.btn-secondary-200 {
+  @apply bg-secondary-200 border-secondary-200 text-secondary hover:bg-secondary hover:border-secondary hover:text-white;
+}
+
+.btn-secondary-200.btn-outline {
+  @apply text-secondary-200 hover:text-secondary;
+}
+
+.btn-secondary-200 .btn-loading .loading div {
+  border-color: var(--color-secondary-500) transparent transparent transparent;
+}
+
+.btn-secondary-600 {
+  @apply bg-secondary-600 border-secondary-600 text-white hover:bg-secondary hover:border-secondary;
+}
+
+.btn-secondary-600.btn-outline {
+  @apply text-secondary-600 hover:text-secondary;
+}
+
+.btn-secondary-600 .btn-loading .loading div {
+  border-color: var(--color-secondary-500) transparent transparent transparent;
+}
+
+.btn-blue-1 {
+  @apply bg-secondary border-secondary text-white hover:bg-blue-1 hover:border-blue-1;
+}
+
+.btn-blue-1.btn-outline {
+  @apply text-blue-1 hover:text-blue-1;
+}
+
+.btn-blue-1 .btn-loading .loading div {
+  border-color: var(--color-blue-1) transparent transparent transparent;
+}
+
+.btn-insight-title-line {
+  @apply bg-insight-title-line border-insight-title-line text-white hover:bg-insight-title-line hover:border-insight-title-line;
+}
+
+.btn-insight-title-line.btn-outline {
+  @apply text-insight-title hover:text-insight-title;
+}
+
+.btn-insight-title-line .btn-loading .loading div {
+  border-color: var(--color-blue-1) transparent transparent transparent;
+}
+
+.btn-outline {
+  @apply bg-transparent border hover:bg-white;
+}
+
+.btn-disabled {
+  @apply bg-pgray-5 border-pgray-5 text-white cursor-default hover:bg-pgray-5 hover:border-pgray-5 hover:text-white;
+}
+
+.btn-disabled.btn-outline {
+  @apply bg-white border-pgray-5 text-pgray-5 hover:bg-white hover:border-pgray-5 hover:text-pgray-5;
+}
+
+.btn-disabled.btn-icon {
+  @apply bg-transparent border-transparent text-pgray-5 hover:bg-transparent hover:border-transparent hover:text-pgray-5;
+}
+
+.btn.loading {
+  @apply bg-primary-200 border-primary-200 cursor-default;
+}
+
+.btn.loading .btn-content {
+  @apply opacity-0;
+}
+
+.btn.loading .btn-loading {
+  @apply block;
+}
+
+.btn-content {
+  @apply inline-flex items-center space-x-1;
+}
+
+.btn-content .icon.btn-icon {
+  @apply inline-flex text-xs leading-none;
+}
+
+.btn-loading {
+  @apply absolute top-1/2 left-1/2 w-4 h-4 -translate-x-1/2 -translate-y-1/2 pointer-events-none hidden;
+}
+
+.btn-loading .loading {
+  @apply relative inline-block w-4 h-4;
+}
+
+.btn-loading .loading div {
+  @apply absolute block w-4 h-4 border-2 rounded-full animate-loading;
+}
+
+.btn-loading .loading div:nth-child(1) {
+  animation-delay: -0.45s;
+}
+
+.btn-loading .loading div:nth-child(2) {
+  animation-delay: -0.3s;
+}
+
+.btn-loading .loading div:nth-child(3) {
+  animation-delay: -0.15s;
+}
+</style>

package/{components → 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 "~ui/models/DateRange";
-import type IDateRange from "~ui/interface/IDateRange";
-import { OnlineSourceType } from "~ui/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>;
 
@@ -60,12 +60,7 @@ export default defineComponent({
     },
     allowQuicks: {
       type: Array as PropType<Array<string>>,
-      default: () => [
-        'last7Days',
-        'last30Days',
-        'last90Days',
-        'lastMonth'
-      ],
+      default: () => ["last7Days", "last30Days", "last90Days", "lastMonth"],
     },
     showCompareSwitch: {
       type: Boolean,
@@ -165,7 +160,7 @@ export default defineComponent({
             },
           },
           { name: "eventListeners", enabled: true },
-          { name: 'preventOverflow', options: { altAxis: true } },
+          { name: "preventOverflow", options: { altAxis: true } },
         ],
       });
 
@@ -214,9 +209,9 @@ export default defineComponent({
               placement: placement.value as Placement,
               modifiers: [
                 { name: "eventListeners", enabled: false },
-                { name: 'preventOverflow', options: { altAxis: true } },
+                { name: "preventOverflow", options: { altAxis: true } },
               ],
-            }
+            },
           );
         }
       });
@@ -245,35 +240,46 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus" scoped>
-.calendar-button
-  @apply inline-block
+<style scoped>
+@reference '~ui/app/assets/css/main.css';
 
-  &.calendar-button--compact
-    .toggle-button
-      @apply s('h-[37px]')
+.calendar-button {
+  @apply inline-block;
+}
 
-  .toggle-button
-    @apply inline-flex flex-col justify-center s('h-[58px]') s('px-2.75')  space-y-1 border s('border-white/20') rounded bg-white text-sm leading-normal text-pgray-2
+.calendar-button.calendar-button--compact .toggle-button {
+  @apply h-[37px];
+}
 
-    .date-range
-      @apply flex items-center
+.calendar-button .toggle-button {
+  @apply inline-flex flex-col justify-center h-[58px] px-2.75 space-y-1 border border-white/20 rounded bg-white text-sm leading-[1.3125] text-pgray-2;
+}
+
+.calendar-button .toggle-button .date-range {
+  @apply flex items-center;
+}
 
-      .icon
-        @apply flex-grow-0 flex-shrink-0 text-base text-primary leading-none
+.calendar-button .toggle-button .date-range .icon {
+  @apply grow-0 shrink-0 text-base text-primary leading-none;
+}
 
-      .divider
-        @apply flex-grow-0 flex-shrink-0 block w-px s('h-4.75') ml-2 s('mr-1.75') bg-primary
+.calendar-button .toggle-button .date-range .divider {
+  @apply grow-0 shrink-0 block w-px h-4.75 ml-2 mr-1.75 bg-primary;
+}
 
-      .range-days
-        @apply block s('ml-0.5') px-1 s('py-0.5') bg-primary-50 rounded text-xs text-primary
+.calendar-button .toggle-button .date-range .range-days {
+  @apply block ml-0.5 px-1 py-0.5 bg-primary-50 rounded text-xs text-primary;
+}
 
-    .compare-date-range
-      @apply pl-1 space-x-2 text-sm text-pgray-3
+.calendar-button .toggle-button .compare-date-range {
+  @apply pl-1 space-x-2 text-sm text-pgray-3;
+}
 
-.calendar-popup
-  @apply z-60 absolute invisible pointer-events-none
+.calendar-popup {
+  @apply z-60 absolute invisible pointer-events-none;
+}
 
-  &[data-show]
-    @apply visible pointer-events-auto
+.calendar-popup[data-show] {
+  @apply visible pointer-events-auto;
+}
 </style>

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

@@ -122,9 +122,9 @@ import {
   isPreviousDateRange,
   previousDateRange,
   isValidDate,
-} from "~ui/utils";
-import type IDateRange from "~ui/interface/IDateRange";
-import { OnlineSourceType } from "~ui/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}/;
 
@@ -774,76 +774,102 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.calendar-popup
-  @apply w-auto py-4 border border-primary-100 rounded-lg bg-white shadow-md overflow-hidden
+<style>
+@reference '~ui/app/assets/css/main.css';
 
-  .popup-body
-    @apply flex s('mb-2.5') divide-x divide-pgray-4
+.calendar-popup {
+  @apply w-auto py-4 border border-primary-100 rounded-lg bg-white shadow-md overflow-hidden;
 
-  .popup-footer
-    @apply s('mx-3.75') border-t border-pgray-4 text-center
+  .popup-body {
+    @apply flex mb-2.5 divide-x divide-pgray-4;
+  }
 
-    .compare
-      @apply pt-4 text-base leading-normal text-pgray-2
+  .popup-footer {
+    @apply mx-3.75 border-t border-pgray-4 text-center;
 
-      .range1
-        @apply  text-primary font-bold
+    .compare {
+      @apply pt-4 text-base leading-[1.3125] text-pgray-2;
 
-      .range2
-        @apply text-pgray-2 font-bold
+      .range1 {
+        @apply text-primary font-bold;
+      }
 
-    .actions
-      @apply pt-4 space-x-8
+      .range2 {
+        @apply text-pgray-2 font-bold;
+      }
+    }
 
-  .quicks
-    @apply relative
+    .actions {
+      @apply pt-4 space-x-8;
+    }
+  }
 
-    .quick-button
-      @apply relative block s('w-[7.4375rem]') s('pl-6.5') s('py-2') space-y-1 bg-white text-pgray-3 s('hover:bg-primary-100') s('hover:text-pgray-2')
+  .quicks {
+    @apply relative;
 
-      &.selected
-        @apply bg-primary-100 text-primary s('hover:text-primary')
+    .quick-button {
+      @apply relative block w-[7.4375rem] pl-6.5 py-2 space-y-1 bg-white text-pgray-3 hover:bg-primary-100 hover:text-pgray-2;
 
-        &:before
-          content ''
-          @apply block absolute s('top-1/2') s('left-0') s('w-1.5') s('h-1.5') s('ml-3') rounded-full bg-primary transform s('-translate-y-1/2')
+      &.selected {
+        @apply bg-primary-100 text-primary hover:text-primary;
 
-      &-title
-        @apply text-base
+        &:before {
+          content: "";
+          @apply block absolute top-1/2 left-0 w-1.5 h-1.5 ml-3 rounded-full bg-primary transform -translate-y-1/2;
+        }
+      }
 
-      &-notice
-        @apply text-xs
+      .quick-button-title {
+        @apply text-base;
+      }
 
-    .quicks-divide
-      @apply h-px ml-1 my-1 bg-pgray-4
-      width calc(100% - theme('spacing.1'))
+      .quick-button-notice {
+        @apply text-xs;
+      }
+    }
 
-    .compare-switch
-      @apply absolute bottom-0 left-0 s('ml-4.75')
+    .quicks-divide {
+      @apply h-px ml-1 my-1 bg-pgray-4;
+      width: calc(100% - theme("spacing.1"));
+    }
 
-  .calendar
-    @apply s('pl-[1.4375rem]') s('pr-6')
+    .compare-switch {
+      @apply absolute bottom-0 left-0 ml-4.75;
+    }
+  }
 
-    .vc-header
-      @apply pt-2
+  .calendar {
+    @apply pl-[1.4375rem] pr-6;
 
-    &-compare
-      .calendar-header
-        @apply text-pgray-2
+    .vc-header {
+      @apply pt-2;
+    }
+  }
 
-    &-header
-      @apply s('pt-1.5') s('pb-1.75') s('space-y-0.5') border-b border-primary text-sm s('leading-4.75') text-primary
+  .calendar-compare {
+    .calendar-header {
+      @apply text-pgray-2;
+    }
+  }
 
-      .date-range
-        @apply flex justify-start items-center space-x-1 text-sm
+  .calendar-header {
+    @apply pt-1.5 pb-1.75 space-y-0.5 border-b border-primary text-sm leading-4.75 text-primary;
 
-        .text-input
-          @apply flex-grow-0 flex-shrink-0 s('w-[6.5rem]')
+    .date-range {
+      @apply flex justify-start items-center space-x-1 text-sm;
 
-    &-body
-      @apply space-y-2
+      .text-input {
+        @apply grow-0 shrink-0 w-[6.5rem];
+      }
+    }
+  }
 
-      .data-date
-        @apply text-xs text-pgray-2 text-right
+  .calendar-body {
+    @apply space-y-2;
+
+    .data-date {
+      @apply text-xs text-pgray-2 text-right;
+    }
+  }
+}
 </style>