@mptw/skylens-ui 1.5.0 → 1.5.1

package/app/components/SLIOSSwitch.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script lang="ts">
-import { getUID } from "~ui/utils";
+import { getUID } from "~ui/app/utils";
 
 export default defineComponent({
   name: "SLIOSSwitch",
@@ -104,7 +104,7 @@ export default defineComponent({
           size.value !== "min"
         ) {
           width = Math.ceil(
-            Math.max(trueLabelRect.width, falseLabelRect.width, elRect.width)
+            Math.max(trueLabelRect.width, falseLabelRect.width, elRect.width),
           );
         }
 
@@ -169,85 +169,106 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.ios-switch
-  @apply inline-block relative overflow-hidden
+<style>
+@reference '~ui/app/assets/css/main.css';
 
-  &.ios-switch-min
-    label
-      @apply min-w-0 border-2 text-sm
-      width 23px
-      height 23px
+.ios-switch {
+  @apply inline-block relative overflow-hidden;
+}
 
-      &:before
-        @apply hidden
+.ios-switch.ios-switch-min label {
+  @apply min-w-0 border-2 text-sm;
+  width: 23px;
+  height: 23px;
+}
 
-      .true-label, .false-label
-        @apply p-0
+.ios-switch.ios-switch-min label::before {
+  @apply hidden;
+}
 
-  &.ios-switch-sm
-    label
-      @apply s('min-w-[52px]') s('h-[28px]') text-sm
+.ios-switch.ios-switch-min label .true-label,
+.ios-switch.ios-switch-min label .false-label {
+  @apply p-0;
+}
 
-      &:before
-        @apply s('w-[20px]')
+.ios-switch.ios-switch-sm label {
+  @apply min-w-[52px] h-[28px] text-sm;
+}
 
-      .true-label
-        @apply s('pr-[31px]')
+.ios-switch.ios-switch-sm label::before {
+  @apply w-[20px];
+}
 
-      .false-label
-        @apply s('pl-[31px]')
+.ios-switch.ios-switch-sm label .true-label {
+  @apply pr-[31px];
+}
 
-  &.ios-switch-xs
-    label
-      @apply s('min-w-[60px]') s('h-[24px]') text-xs
+.ios-switch.ios-switch-sm label .false-label {
+  @apply pl-[31px];
+}
 
-      &:before
-        @apply s('inset-y-0.75') s('left-0.75') s('w-[16px]') border border-primary-100 rounded-full shadow-none
+.ios-switch.ios-switch-xs label {
+  @apply min-w-[60px] h-[24px] text-xs;
+}
 
-      .true-label
-        @apply s('pr-[27px]')
+.ios-switch.ios-switch-xs label::before {
+  @apply inset-y-0.75 left-0.75 w-[16px] border border-primary-100 rounded-full shadow-none;
+}
 
-      .false-label
-        @apply s('pl-[27px]')
+.ios-switch.ios-switch-xs label .true-label {
+  @apply pr-[27px];
+}
 
-  &.ios-switch-primary-600
-    input:checked + label
-      @apply bg-primary-600 border-primary
+.ios-switch.ios-switch-xs label .false-label {
+  @apply pl-[27px];
+}
 
-  &.ios-switch-primary
-    label
-      .false-label
-        @apply text-primary
+.ios-switch.ios-switch-primary-600 input:checked + label {
+  @apply bg-primary-600 border-primary;
+}
 
-  input
-    @apply absolute s('left-1/2') s('top-1/2') transform s('-translate-x-1/2') s('-translate-y-1/2')
+.ios-switch.ios-switch-primary label .false-label {
+  @apply text-primary;
+}
 
-  label
-    @apply relative min-w-full s('h-[2.3125rem]') bg-primary-100 border border-primary-200 rounded-full text-base leading-normal align-top cursor-pointer transition-colors
+.ios-switch input {
+  @apply absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2;
+}
 
-    &:before
-      content ''
-      @apply block absolute s('left-0.75') s('inset-y-0.75') s('w-7.25') bg-white rounded-full shadow
+.ios-switch label {
+  @apply relative min-w-full h-[2.3125rem] bg-primary-100 border border-primary-200 rounded-full text-base leading-[1.3125] align-top cursor-pointer transition-colors;
+}
 
-    span
-      @apply flex items-center justify-center absolute top-0 left-0 min-w-full h-full whitespace-nowrap
+.ios-switch label::before {
+  content: '';
+  @apply block absolute left-0.75 inset-y-0.75 w-7.25 bg-white rounded-full shadow-default;
+}
 
-    .true-label
-      @apply pl-2 s('pr-[35px]') text-white opacity-0
+.ios-switch label span {
+  @apply flex items-center justify-center absolute top-0 left-0 min-w-full h-full whitespace-nowrap;
+}
 
-    .false-label
-      @apply s('pl-[35px]') pr-2 text-primary-600 opacity-100
+.ios-switch label .true-label {
+  @apply pl-2 pr-[35px] text-white opacity-0;
+}
 
-  input:checked + label
-    @apply bg-primary border-primary-800
+.ios-switch label .false-label {
+  @apply pl-[35px] pr-2 text-primary-600 opacity-100;
+}
 
-    &:before
-      @apply left-auto s('right-0.75')
+.ios-switch input:checked + label {
+  @apply bg-primary border-primary-800;
+}
 
-    .true-label
-      @apply opacity-100
+.ios-switch input:checked + label::before {
+  @apply left-auto right-0.75;
+}
 
-    .false-label
-      @apply opacity-0
+.ios-switch input:checked + label .true-label {
+  @apply opacity-100;
+}
+
+.ios-switch input:checked + label .false-label {
+  @apply opacity-0;
+}
 </style>

package/app/components/SLIcon.vue

@@ -29,7 +29,8 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-i.icon
-  @apply inline-block leading-none
+<style>
+i.icon {
+  @apply inline-block leading-none;
+}
 </style>

package/app/components/SLIconButton.vue

@@ -24,8 +24,7 @@ export default defineComponent({
     color: {
       type: String,
       default: "",
-      validator: (val: string) =>
-        ["", "primary", "secondary"].includes(val),
+      validator: (val: string) => ["", "primary", "secondary"].includes(val),
     },
     variant: {
       type: String,
@@ -100,31 +99,34 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus" scoped>
-.icon-btn
-  @apply inline-flex flex-nowrap justify-start items-center s('p-[0.59375rem]') border rounded-full text-base text-white overflow-hidden transition-width duration-300
-  &:hover
-    .icon-btn-title
-      @apply opacity-100
-
-  &.icon-btn--primary
-    @apply bg-primary border-primary
-
-    &.icon-btn--outline
-      @apply text-primary
-
-  &.icon-btn--secondary
-    @apply bg-secondary border-secondary
-
-    &.icon-btn--outline
-      @apply text-secondary
-
-  &.icon-btn--outline
-    @apply bg-transparent
-
-  .icon
-    @apply flex-grow-0 flex-shrink-0
-
-  &-title
-    @apply flex-grow-0 flex-shrink-0 pl-2 opacity-0 transition-opacity duration-300
+<style scoped>
+@reference '~ui/app/assets/css/main.css';
+
+.icon-btn {
+  @apply inline-flex flex-nowrap justify-start items-center p-[0.59375rem] border rounded-full text-base text-white overflow-hidden transition-[width] duration-300;
+}
+.icon-btn:hover .icon-btn-title {
+  @apply opacity-100;
+}
+.icon-btn.icon-btn--primary {
+  @apply bg-primary border-primary;
+}
+.icon-btn.icon-btn--primary.icon-btn--outline {
+  @apply text-primary;
+}
+.icon-btn.icon-btn--secondary {
+  @apply bg-secondary border-secondary;
+}
+.icon-btn.icon-btn--secondary.icon-btn--outline {
+  @apply text-secondary;
+}
+.icon-btn.icon-btn--outline {
+  @apply bg-transparent;
+}
+.icon-btn .icon {
+  @apply grow-0 shrink-0;
+}
+.icon-btn-title {
+  @apply grow-0 shrink-0 pl-2 opacity-0 transition-opacity duration-300;
+}
 </style>

package/app/components/SLInfoTip.vue

@@ -79,7 +79,7 @@ export default defineComponent({
 
           maxWidth.value = Math.min(
             365,
-            windowWidth - toggleRect.left - toggleRect.width - 11
+            windowWidth - toggleRect.left - toggleRect.width - 11,
           );
         });
     }
@@ -105,8 +105,8 @@ export default defineComponent({
             },
           },
           {
-            name: 'preventOverflow',
-            options: { 
+            name: "preventOverflow",
+            options: {
               altAxis: true,
             },
           },
@@ -118,7 +118,11 @@ export default defineComponent({
     }
 
     function hide() {
-      if (!popupEl.value || popupEl.value.getAttribute("data-show") === null || isPinned.value)
+      if (
+        !popupEl.value ||
+        popupEl.value.getAttribute("data-show") === null ||
+        isPinned.value
+      )
         return;
       popupEl.value.removeAttribute("data-show");
       popperInstance.setOptions({
@@ -176,52 +180,59 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.info-tip
-  @apply inline-flex ml-2 text-base s('leading-4.5') text-primary s('hover:text-primary-600') cursor-default
+<style>
+@reference '~ui/app/assets/css/main.css';
+
+.info-tip {
+  @apply inline-flex ml-2 text-base leading-4.5 text-primary hover:text-primary-600 cursor-default;
+}
 
-  &--xs
-    @apply ml-1 text-xs
+.info-tip--xs {
+  @apply ml-1 text-xs;
+}
 
-  .info-tip-toggle
-    @apply inline-flex cursor-default
+.info-tip .info-tip-toggle {
+  @apply inline-flex cursor-default;
+}
 
-  .info
-    @apply z-10 absolute invisible
+.info-tip .info {
+  @apply z-10 absolute invisible;
+}
 
-    &[data-popper-placement^='bottom']
-      @apply pt-1
+.info-tip .info[data-popper-placement^="bottom"] {
+  @apply pt-1;
+}
 
-    &[data-popper-placement^='right']
-      @apply pl-3
+.info-tip .info[data-popper-placement^="right"] {
+  @apply pl-3;
+}
 
-    &[data-show], &.pinned
-      @apply visible
+.info-tip .info[data-show],
+.info-tip .info.pinned {
+  @apply visible;
+}
 
-    &.pinned
-      .info-content
-        .pin-toggle
-          &:hover
-            .icon
-              &:before
-                content '\e943'
+.info-tip .info.pinned .info-content .pin-toggle:hover .icon:before {
+  content: "\\e943";
+}
 
-          .icon
-            &:before
-              content '\e943'
+.info-tip .info.pinned .info-content .pin-toggle .icon:before {
+  content: "\\e943";
+}
 
-    &-content
-      @apply relative py-5 pl-4 pr-6 border s('border-primary-600/50') rounded-lg bg-white text-sm text-pgray-2 text-left font-normal whitespace-normal shadow-popup-sm
+.info-tip .info-content {
+  @apply relative py-5 pl-4 pr-6 border border-primary-600/50 rounded-lg bg-white text-sm text-pgray-2 text-left font-normal whitespace-normal shadow-popup-sm;
+}
 
-      .pin-toggle
-        @apply absolute top-0 right-0 mt-2 mr-2 text-base text-primary-600
+.info-tip .info-content .pin-toggle {
+  @apply absolute top-0 right-0 mt-2 mr-2 text-base text-primary-600;
+}
 
-        &:hover
-          .icon
-            &:before
-              content '\e967'
+.info-tip .info-content .pin-toggle:hover .icon:before {
+  content: "\\e967";
+}
 
-        .icon
-          &:before
-            content '\e980'
+.info-tip .info-content .pin-toggle .icon:before {
+  content: "\\e980";
+}
 </style>

package/app/components/SLInsightSitePage.vue

@@ -15,13 +15,18 @@ export default {
 };
 </script>
 
-<style lang="stylus">
-.insight-site-page
-  @apply flex-grow flex flex-col
+<style>
+@reference '~ui/app/assets/css/main.css';
+
+.insight-site-page {
+  @apply grow flex flex-col;
+}
 
-  &-header
-    @apply s('-mx-4')
+.insight-site-page-header {
+  @apply -mx-4;
+}
 
-  &-content
-    @apply flex flex-col flex-grow w-full p-4 rounded bg-primary-50
+.insight-site-page-content {
+  @apply flex flex-col grow w-full p-4 rounded bg-primary-50;
+}
 </style>

package/app/components/SLLegend.vue

@@ -24,7 +24,7 @@
 
 <script lang="ts">
 import type { PropType } from "vue";
-import type ILegendItem from "~ui/interface/ILegendItem";
+import type ILegendItem from "~ui/app/interface/ILegendItem";
 
 export default defineComponent({
   name: "SLLegend",
@@ -58,19 +58,26 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.chart-legend
-  @apply text-center
+<style>
+@reference '~ui/app/assets/css/main.css';
+
+.chart-legend {
+  @apply text-center;
+}
 
-  &-item
-    @apply inline-flex items-center mx-2 text-base text-pgray-2
+.chart-legend-item {
+  @apply inline-flex items-center mx-2 text-base text-pgray-2;
+}
 
-    &.unactive
-      @apply text-pgray-5
+.chart-legend-item.unactive {
+  @apply text-pgray-5;
+}
 
-    .item-icon
-      @apply mr-1
+.chart-legend-item .item-icon {
+  @apply mr-1;
+}
 
-    .item-marker
-      @apply inline-block w-3 h-3 mr-1 rounded-full
+.chart-legend-item .item-marker {
+  @apply inline-block w-3 h-3 mr-1 rounded-full;
+}
 </style>

package/app/components/SLLinearProgressBar.vue

@@ -9,27 +9,14 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus" scoped>
-.linear-progress-bar
-  @apply w-full h-2 overflow-hidden
-  background-color #D3D3D3
-  border-radius 1px
+<style scoped>
+@reference '~ui/app/assets/css/main.css';
 
-  &-value
-    @apply w-full h-full
-    background linear-gradient(270deg, rgba(211, 211, 211, 0.62) 0.08%, #E1E1E1 46.69%, rgba(211, 211, 211, 0.62) 100%)
-    animation indeterminateAnimation 1s infinite linear
-    transform-origin 0% 50%
+.linear-progress-bar {
+  @apply w-full h-2 bg-[#D3D3D3] rounded-[1px] overflow-hidden;
+}
 
-@keyframes indeterminateAnimation {
-  0% {
-    transform  translateX(0) scaleX(0)
-  }
-  40% {
-    transform  translateX(0) scaleX(0.4)
-  }
-  100% {
-    transform  translateX(100%) scaleX(0.5)
-  }
+.linear-progress-bar-value {
+  @apply w-full h-full bg-linear-progress-bar animate-indeterminate origin-[0%_50%];
 }
 </style>

package/app/components/SLLink.vue

@@ -149,14 +149,18 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.sl-link
-  *
-    @apply pointer-events-none
+<style>
+@reference '~ui/app/assets/css/main.css';
 
-  &-tooltip
-    @apply p-1 bg-pgray-2 text-xs text-white whitespace-nowrap shadow invisible
+.sl-link * {
+  @apply pointer-events-none;
+}
 
-    &[data-show]
-      @apply visible
+.sl-link-tooltip {
+  @apply p-1 bg-pgray-2 text-xs text-white whitespace-nowrap shadow-default invisible;
+}
+
+.sl-link-tooltip[data-show] {
+  @apply visible;
+}
 </style>

package/app/components/SLLoading.vue

@@ -27,7 +27,8 @@ export default defineComponent({
     color: {
       type: String,
       default: "primary",
-      validator: (value: string) => ["primary", "highlight-500"].includes(value),
+      validator: (value: string) =>
+        ["primary", "highlight-500"].includes(value),
     },
     bgAlpha: {
       type: Number,
@@ -84,44 +85,46 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.loading-modal
-  @apply z-10
+<style>
+@reference '~ui/app/assets/css/main.css';
 
-  &-primary
-    @apply s('bg-primary-300/20')
+.loading-modal {
+  @apply z-10;
+}
 
-    .loading
-      div
-        border-color theme('colors.primary.DEFAULT') transparent transparent transparent
-
-  &-highlight-500
-    @apply s('bg-highlight-500/20')
+.loading-modal-primary {
+  @apply bg-primary-300/20;
+}
 
-    .loading
-      div
-        border-color theme('colors.highlight.500') transparent transparent transparent
+.loading-modal-primary .loading div {
+  border-color: var(--color-primary) transparent transparent transparent;
+}
 
-  .loading
-    @apply relative inline-block w-12 h-12
+.loading-modal-highlight-500 {
+  @apply bg-highlight-500/20;
+}
 
-    div
-      @apply absolute block w-8 h-8 m-2 border-4 rounded-full
-      animation loading 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite
+.loading-modal-highlight-500 .loading div {
+  border-color: var(--color-highlight-500) transparent transparent transparent;
+}
 
-      &:nth-child(1)
-        animation-delay -0.45s
+.loading-modal .loading {
+  @apply relative inline-block w-12 h-12;
+}
 
-      &:nth-child(2)
-        animation-delay -0.3s
+.loading-modal .loading div {
+  @apply absolute block w-8 h-8 m-2 border-4 rounded-full animate-loading;
+}
 
-      &:nth-child(3)
-        animation-delay -0.15s
+.loading-modal .loading div:nth-child(1) {
+  animation-delay: -0.45s;
+}
 
-@keyframes loading
-  0%
-    transform rotate(0deg)
+.loading-modal .loading div:nth-child(2) {
+  animation-delay: -0.3s;
+}
 
-  100%
-    transform rotate(360deg)
+.loading-modal .loading div:nth-child(3) {
+  animation-delay: -0.15s;
+}
 </style>

package/app/components/SLMapChart.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-.chart
+.map-chart
   ECharts(
     :loading="loading"
     :option="formatedOption"
@@ -166,7 +166,8 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.chart
-  @apply h-52
+<style scoped>
+.map-chart {
+  @apply h-52;
+}
 </style>