@mptw/skylens-ui 1.5.0 → 1.5.1

package/app/components/SLButton.vue

@@ -23,7 +23,8 @@ export default defineComponent({
     size: {
       type: String,
       default: "",
-      validator: (val: string) => ["", "lg", "md", "sm", "xs", 'xxs'].includes(val),
+      validator: (val: string) =>
+        ["", "lg", "md", "sm", "xs", "xxs"].includes(val),
     },
     color: {
       type: String,
@@ -108,230 +109,262 @@ export default defineComponent({
 });
 </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")
+<style>
+@reference '~ui/app/assets/css/main.css';
 
-  &.btn-md
-    @apply s("px-3.75")
+.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-sm
-    @apply s("py-0.75") s("px-1.75")
+.btn.btn-lg {
+  @apply px-7.75;
+}
 
-    .btn-content
-      @apply space-x-1
+.btn.btn-md {
+  @apply px-3.75;
+}
 
-  &.btn-xs
-    @apply s("py-0.75") s("px-1.75") text-xs
+.btn.btn-sm {
+  @apply py-0.75 px-1.75;
+}
 
-    .btn-content
-      @apply space-x-1
+.btn.btn-sm .btn-content {
+  @apply space-x-1;
+}
 
-  &.btn-xxs
-    @apply s("p-0.75") text-sm
+.btn.btn-xs {
+  @apply py-0.75 px-1.75 text-xs;
+}
 
-    .btn-content
-      @apply space-x-1
+.btn.btn-xs .btn-content {
+  @apply space-x-1;
+}
 
-      .icon.btn-icon
-        @apply text-sm leading-none
+.btn.btn-xxs {
+  @apply p-0.75 text-sm;
+}
 
-  &-white
-    @apply bg-white border-white text-pgray-2 s("hover:bg-white") s("hover:border-white")
+.btn.btn-xxs .btn-content {
+  @apply space-x-1;
+}
 
-    &.btn-outline
-      @apply text-pgray-2 s("hover:text-pgray-2")
+.btn.btn-xxs .btn-content .icon.btn-icon {
+  @apply text-sm leading-none;
+}
 
-    .btn-loading
-      .loading
-        div
-          border-color white transparent transparent transparent
+.btn-white {
+  @apply bg-white border-white text-pgray-2 hover:bg-white hover:border-white;
+}
 
-  &-primary
-    @apply bg-primary border-primary text-white s("hover:bg-primary-800") s("hover:border-primary-800")
+.btn-white.btn-outline {
+  @apply text-pgray-2 hover:text-pgray-2;
+}
 
-    &.btn-outline
-      @apply text-primary s("hover:text-primary-800")
+.btn-white .btn-loading .loading div {
+  border-color: white transparent transparent transparent;
+}
 
-    .btn-loading
-      .loading
-        div
-          border-color theme('colors.primary.DEFAULT') transparent transparent transparent
+.btn-primary {
+  @apply bg-primary border-primary text-white hover:bg-primary-800 hover:border-primary-800;
+}
 
-  &-primary-600
-    @apply bg-primary-600 border-primary-600 text-white s("hover:bg-primary") s("hover:border-primary")
+.btn-primary.btn-outline {
+  @apply text-primary hover:text-primary-800;
+}
 
-    &.btn-outline
-      @apply text-primary-600 s("hover:text-primary")
+.btn-primary .btn-loading .loading div {
+  border-color: var(--color-primary) transparent transparent transparent;
+}
 
-    .btn-loading
-      .loading
-        div
-          border-color theme('colors.primary.600') transparent transparent transparent
+.btn-primary-600 {
+  @apply bg-primary-600 border-primary-600 text-white hover:bg-primary hover:border-primary;
+}
 
-  &-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-primary-600.btn-outline {
+  @apply text-primary-600 hover:text-primary;
+}
 
-    &.btn-outline
-      @apply text-highlight-500 s("hover:text-highlight-400")
+.btn-primary-600 .btn-loading .loading div {
+  border-color: var(--color-primary-600) transparent transparent transparent;
+}
 
-    .btn-loading
-      .loading
-        div
-          border-color theme('colors.highlight.400') 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;
+}
 
-  &-third
-    @apply bg-third border-third text-white s("hover:bg-third-600") s("hover:text-white") s("hover:border-third-600")
+.btn-highlight-500.btn-outline {
+  @apply text-highlight-500 hover:text-highlight-400;
+}
 
-    &.btn-outline
-      @apply text-third s("hover:text-third-600")
+.btn-highlight-500 .btn-loading .loading div {
+  border-color: var(--color-highlight-400) transparent transparent transparent;
+}
 
-    .btn-loading
-      .loading
-        div
-          border-color theme('colors.third.600') transparent transparent transparent
+.btn-third {
+  @apply bg-third border-third text-white hover:bg-third-600 hover:text-white hover:border-third-600;
+}
 
-  &-danger
-    @apply bg-danger border-danger text-white s("hover:bg-danger-light") s("hover:border-danger-light")
+.btn-third.btn-outline {
+  @apply text-third hover:text-third-600;
+}
 
-    &.btn-outline
-      @apply text-danger s("hover:text-danger-light")
+.btn-third .btn-loading .loading div {
+  border-color: var(--color-third-600) transparent transparent transparent;
+}
 
-    .btn-loading
-      .loading
-        div
-          border-color theme('colors.danger.light') transparent transparent transparent
+.btn-danger {
+  @apply bg-danger border-danger text-white hover:bg-danger-light hover:border-danger-light;
+}
 
-  &-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-danger.btn-outline {
+  @apply text-danger hover:text-danger-light;
+}
 
-    &.btn-outline
-      @apply text-pgray-5 s("hover:text-pgray-4.5")
+.btn-danger .btn-loading .loading div {
+  border-color: var(--color-danger-light) transparent transparent transparent;
+}
 
-    .btn-loading
-      .loading
-        div
-          border-color theme('colors.pgray[4.5]') transparent transparent transparent
+.btn-pgray-5 {
+  @apply bg-pgray-5 border-pgray-5 text-pgray-2 hover:bg-pgray-4p5 hover:border-pgray-4p5;
+}
 
-  &-pgray-2
-    @apply bg-pgray-2 border-pgray-2 text-white s("hover:bg-pgray-3") s("hover:border-pgray-3")
+.btn-pgray-5.btn-outline {
+  @apply text-pgray-5 hover:text-pgray-4p5;
+}
 
-    &.btn-outline
-      @apply text-pgray-2 s("hover:text-pgray-3")
+.btn-pgray-5 .btn-loading .loading div {
+  border-color: var(--color-pgray-4p5) transparent transparent transparent;
+}
 
-    .btn-loading
-      .loading
-        div
-          border-color theme('colors.pgray.3') transparent transparent transparent
+.btn-pgray-2 {
+  @apply bg-pgray-2 border-pgray-2 text-white hover:bg-pgray-3 hover:border-pgray-3;
+}
 
-  &-secondary
-    @apply bg-secondary border-secondary text-white s("hover:bg-secondary-800") s("hover:border-secondary-800")
+.btn-pgray-2.btn-outline {
+  @apply text-pgray-2 hover:text-pgray-3;
+}
 
-    &.btn-outline
-      @apply text-secondary s("hover:text-secondary-800")
+.btn-pgray-2 .btn-loading .loading div {
+  border-color: var(--color-pgray-3) transparent transparent transparent;
+}
 
-    .btn-loading
-      .loading
-        div
-          border-color theme('colors.secondary.500') transparent transparent transparent
+.btn-secondary {
+  @apply bg-secondary border-secondary text-white hover:bg-secondary-800 hover:border-secondary-800;
+}
 
-  &-secondary-200
-    @apply bg-secondary-200 border-secondary-200 text-secondary s("hover:bg-secondary") s("hover:border-secondary") s("hover:text-white")
+.btn-secondary.btn-outline {
+  @apply text-secondary hover:text-secondary-800;
+}
 
-    &.btn-outline
-      @apply text-secondary-200 s("hover:text-secondary")
+.btn-secondary .btn-loading .loading div {
+  border-color: var(--color-secondary-500) transparent transparent transparent;
+}
 
-    .btn-loading
-      .loading
-        div
-          border-color theme('colors.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;
+}
 
-  &-secondary-600
-    @apply bg-secondary-600 border-secondary-600 text-white s("hover:bg-secondary") s("hover:border-secondary")
+.btn-secondary-200.btn-outline {
+  @apply text-secondary-200 hover:text-secondary;
+}
 
-    &.btn-outline
-      @apply text-secondary-600 s("hover:text-secondary")
+.btn-secondary-200 .btn-loading .loading div {
+  border-color: var(--color-secondary-500) transparent transparent transparent;
+}
 
-    .btn-loading
-      .loading
-        div
-          border-color theme('colors.secondary.500') transparent transparent transparent
+.btn-secondary-600 {
+  @apply bg-secondary-600 border-secondary-600 text-white hover:bg-secondary hover:border-secondary;
+}
 
-  &-blue-1
-    @apply bg-secondary border-secondary text-white s("hover:bg-blue-1") s("hover:border-blue-1")
+.btn-secondary-600.btn-outline {
+  @apply text-secondary-600 hover:text-secondary;
+}
 
-    &.btn-outline
-      @apply text-blue-1 s("hover:text-blue-1")
+.btn-secondary-600 .btn-loading .loading div {
+  border-color: var(--color-secondary-500) transparent transparent transparent;
+}
 
-    .btn-loading
-      .loading
-        div
-          border-color theme('colors.blue.1') transparent transparent transparent
+.btn-blue-1 {
+  @apply bg-secondary border-secondary text-white hover:bg-blue-1 hover:border-blue-1;
+}
 
-  &-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-blue-1.btn-outline {
+  @apply text-blue-1 hover:text-blue-1;
+}
 
-    &.btn-outline
-      @apply text-insight-title s("hover:text-insight-title")
+.btn-blue-1 .btn-loading .loading div {
+  border-color: var(--color-blue-1) transparent transparent transparent;
+}
 
-    .btn-loading
-      .loading
-        div
-          border-color theme('colors.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;
+}
 
-  &-outline
-    @apply bg-transparent border s("hover:bg-white")
+.btn-insight-title-line.btn-outline {
+  @apply text-insight-title hover:text-insight-title;
+}
 
-  &-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-insight-title-line .btn-loading .loading div {
+  border-color: var(--color-blue-1) transparent transparent transparent;
+}
 
-    &.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-outline {
+  @apply bg-transparent border hover:bg-white;
+}
 
-    &.btn-icon
-      @apply bg-transparent border-transparent text-pgray-5  s("hover:bg-transparent") s("hover:border-transparent") s("hover:text-pgray-5")
+.btn-disabled {
+  @apply bg-pgray-5 border-pgray-5 text-white cursor-default hover:bg-pgray-5 hover:border-pgray-5 hover:text-white;
+}
 
-  &.loading
-    @apply bg-primary-200 border-primary-200 cursor-default
+.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-content
-      @apply opacity-0
+.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 block
+.btn.loading {
+  @apply bg-primary-200 border-primary-200 cursor-default;
+}
 
-  .btn-content
-    @apply inline-flex items-center space-x-1
+.btn.loading .btn-content {
+  @apply opacity-0;
+}
 
-    .icon.btn-icon
-      @apply inline-flex text-xs leading-none
+.btn.loading .btn-loading {
+  @apply block;
+}
 
-  .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
+.btn-content {
+  @apply inline-flex items-center space-x-1;
+}
 
-    .loading
-      @apply relative inline-block w-4 h-4
+.btn-content .icon.btn-icon {
+  @apply inline-flex text-xs leading-none;
+}
 
-      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
+.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;
+}
 
-        &:nth-child(1)
-          animation-delay -0.45s
+.btn-loading .loading {
+  @apply relative inline-block w-4 h-4;
+}
 
-        &:nth-child(2)
-          animation-delay -0.3s
+.btn-loading .loading div {
+  @apply absolute block w-4 h-4 border-2 rounded-full animate-loading;
+}
 
-        &:nth-child(3)
-          animation-delay -0.15s
+.btn-loading .loading div:nth-child(1) {
+  animation-delay: -0.45s;
+}
 
-@keyframes loading
-  0%
-    transform rotate(0deg)
+.btn-loading .loading div:nth-child(2) {
+  animation-delay: -0.3s;
+}
 
-  100%
-    transform rotate(360deg)
+.btn-loading .loading div:nth-child(3) {
+  animation-delay: -0.15s;
+}
 </style>

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 "~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>