@mptw/skylens-ui 1.5.0 → 1.5.2

package/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>

package/app/components/SLCard.vue

@@ -62,62 +62,78 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.tabs
-  .tabs
-    .card
-      @apply border-0 rounded-none shadow-none
+<style>
+@reference '~ui/app/assets/css/main.css';
 
-  .card
-    @apply rounded-lg border-primary-300 shadow-md
+.tabs .tabs .card {
+  @apply border-0 rounded-none shadow-none;
+}
 
-    .card
-      @apply border-0 rounded-none shadow-none
+.tabs .card {
+  @apply rounded-lg border-primary-300 shadow-md;
+}
 
-.card
-  @apply p-4 border border-primary-600 rounded bg-white shadow
+.tabs .card .card {
+  @apply border-0 rounded-none shadow-none;
+}
 
-  .card-prepend
-    @apply mb-4
+.card {
+  @apply p-4 border border-primary-600 rounded bg-white shadow-default;
+}
 
-  .card-header
-    @apply flex justify-between mb-4
+.card .card-prepend {
+  @apply mb-4;
+}
 
-    .card-title
-      @apply inline-flex flex-col
+.card .card-header {
+  @apply flex justify-between mb-4;
+}
 
-      &-container
-        @apply inline-flex items-center mb-2 text-lg text-primary
+.card .card-header .card-title {
+  @apply inline-flex flex-col;
+}
 
-        .title-icon
-          @apply ml-2
+.card .card-header .card-title-container {
+  @apply inline-flex items-center mb-2 text-lg text-primary;
+}
 
-      &-border
-        @apply s('h-0.5') rounded-full bg-highlight-500
+.card .card-header .card-title-container .title-icon {
+  @apply ml-2;
+}
 
-    .card-desc
-      @apply text-base text-pgray-2
+.card .card-header .card-title-border {
+  @apply h-0.5 rounded-full bg-highlight-500;
+}
 
-      .date-range
-        @apply ml-2 text-sm text-pgray-3
+.card .card-header .card-desc {
+  @apply text-base text-pgray-2;
+}
 
-    .inline-info
-      @apply mt-2 text-sm text-pgray-3
+.card .card-header .card-desc .date-range {
+  @apply ml-2 text-sm text-pgray-3;
+}
 
-  .card-body
-    @apply relative
+.card .card-header .inline-info {
+  @apply mt-2 text-sm text-pgray-3;
+}
+
+.card .card-body {
+  @apply relative;
+}
 
-  .card-footer
-    @apply mt-4 pb-2 border-b s('border-primary-300/30')
+.card .card-footer {
+  @apply mt-4 pb-2 border-b border-primary-300/30;
+}
 
-  .card
-    @apply border-primary-300 rounded-lg shadow-md
+.card {
+  @apply border-primary-300 rounded-lg shadow-md;
+}
 
-    .card-header
-      .card-title
-        &-container
-          @apply mb-0 text-base text-pgray-2
+.card .card-header .card-title-container {
+  @apply mb-0 text-base text-pgray-2;
+}
 
-        &-border
-          @apply hidden
+.card .card-header .card-title-border {
+  @apply hidden;
+}
 </style>

package/app/components/SLChart.vue

@@ -187,7 +187,10 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.chart
-  @apply flex w-full h-52 min-h-52 overflow-hidden
+<style>
+@reference '~ui/app/assets/css/main.css';
+
+.chart {
+  @apply flex w-full h-52 min-h-52 overflow-hidden;
+}
 </style>

package/app/components/SLCheckbox.vue

@@ -16,8 +16,8 @@
 
 <script lang="ts">
 import { isEqual } from "lodash-es";
-import type IInputOption from "~ui/interface/IInputOption";
-import { getUID } from "~ui/utils";
+import type IInputOption from "~ui/app/interface/IInputOption";
+import { getUID } from "~ui/app/utils";
 
 export default defineComponent({
   name: "SLCheckbox",
@@ -77,10 +77,18 @@ export default defineComponent({
       default: null,
     },
   },
-  emits: ["update:modelValue", 'update:lastCheckValue'],
+  emits: ["update:modelValue", "update:lastCheckValue"],
   setup(props, { emit }) {
-    const { size, disabled, modelValue, trueValue, falseValue, value, options, lastCheckValue } =
-      toRefs(props);
+    const {
+      size,
+      disabled,
+      modelValue,
+      trueValue,
+      falseValue,
+      value,
+      options,
+      lastCheckValue,
+    } = toRefs(props);
     const uid = ref<string | undefined>(undefined);
 
     const checkboxClass = computed(() => {
@@ -109,21 +117,40 @@ export default defineComponent({
       if (Array.isArray(modelValue.value)) {
         const valueSet: Set<any> = new Set(modelValue.value);
 
-        const lastCheckIndex = lastCheckValue.value === null || lastCheckValue.value === undefined || !options.value ? -1 : options.value.findIndex((o) => isEqual(o.value, lastCheckValue.value));
-        const currentCheckIndex = options.value?.findIndex((o) => isEqual(o.value, value.value)) || -1;
-
-        if (!options.value || lastCheckIndex === -1 || lastCheckIndex === currentCheckIndex || !e.shiftKey) {
+        const lastCheckIndex =
+          lastCheckValue.value === null ||
+          lastCheckValue.value === undefined ||
+          !options.value
+            ? -1
+            : options.value.findIndex((o) =>
+                isEqual(o.value, lastCheckValue.value),
+              );
+        const currentCheckIndex =
+          options.value?.findIndex((o) => isEqual(o.value, value.value)) || -1;
+
+        if (
+          !options.value ||
+          lastCheckIndex === -1 ||
+          lastCheckIndex === currentCheckIndex ||
+          !e.shiftKey
+        ) {
           if (isChecked.value) {
             valueSet.delete(value.value);
             emit("update:lastCheckValue", null);
           } else {
             valueSet.add(value.value);
-            emit('update:lastCheckValue', value.value);
+            emit("update:lastCheckValue", value.value);
           }
         } else {
           emit("update:lastCheckValue", null);
-          const start = lastCheckIndex < currentCheckIndex ? lastCheckIndex : currentCheckIndex;
-          const end = lastCheckIndex < currentCheckIndex ? currentCheckIndex : lastCheckIndex;
+          const start =
+            lastCheckIndex < currentCheckIndex
+              ? lastCheckIndex
+              : currentCheckIndex;
+          const end =
+            lastCheckIndex < currentCheckIndex
+              ? currentCheckIndex
+              : lastCheckIndex;
           options.value.slice(start, end + 1).forEach((o) => {
             if (o.disabled) return;
             valueSet.add(o.value);
@@ -135,7 +162,7 @@ export default defineComponent({
 
       emit(
         "update:modelValue",
-        isChecked.value ? falseValue.value : trueValue.value
+        isChecked.value ? falseValue.value : trueValue.value,
       );
     }
 
@@ -153,55 +180,71 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.checkbox
-  @apply inline-flex relative text-base align-top overflow-hidden
+<style>
+@reference '~ui/app/assets/css/main.css';
+
+.checkbox {
+  @apply inline-flex relative text-base align-top overflow-hidden;
+}
 
-  &.inactive
-    label
-      @apply pointer-events-none
+.checkbox.inactive label {
+  @apply pointer-events-none;
+}
 
-  &.checkbox-sm
-    @apply text-sm
+.checkbox.checkbox-sm {
+  @apply text-sm;
+}
 
-    label
-      @apply text-sm
+.checkbox.checkbox-sm label {
+  @apply text-sm;
+}
 
-  input
-    @apply absolute s("-top-10") s("-left-10")
+.checkbox input {
+  @apply absolute -top-10 -left-10;
+}
 
-  label
-    @apply relative text-base text-pgray-3 cursor-pointer
+.checkbox label {
+  @apply relative text-base text-pgray-3 cursor-pointer;
+}
 
-    .icon
-      @apply hidden
+.checkbox label .icon {
+  @apply hidden;
+}
 
-    span
-      @apply ml-2
+.checkbox label span {
+  @apply ml-2;
+}
 
-  input:not(:checked) + label:not(.is-check-some)
-    .icon-square
-      @apply inline-block
+.checkbox input:not(:checked) + label:not(.is-check-some) .icon-square {
+  @apply inline-block;
+}
 
-  input:not(:checked) + label.is-check-some
-    @apply text-primary
+.checkbox input:not(:checked) + label.is-check-some {
+  @apply text-primary;
+}
 
-    .icon-square
-      @apply hidden
+.checkbox input:not(:checked) + label.is-check-some .icon-square {
+  @apply hidden;
+}
 
-    .icon-minus-square
-      @apply inline-block
+.checkbox input:not(:checked) + label.is-check-some .icon-minus-square {
+  @apply inline-block;
+}
 
-  input:checked + label, &.is-check-some
-    @apply text-primary
+.checkbox input:checked + label,
+.checkbox.is-check-some {
+  @apply text-primary;
+}
 
-  input:checked + label
-    .icon-check-square
-      @apply inline-block
+.checkbox input:checked + label .icon-check-square {
+  @apply inline-block;
+}
 
-  input:not(:checked):disabled + label
-    @apply text-pgray-4 cursor-default pointer-events-none
+.checkbox input:not(:checked):disabled + label {
+  @apply text-pgray-4 cursor-default pointer-events-none;
+}
 
-  input:checked:disabled + label
-    @apply text-pgray-3 cursor-default pointer-events-none
+.checkbox input:checked:disabled + label {
+  @apply text-pgray-3 cursor-default pointer-events-none;
+}
 </style>

package/app/components/SLCircleButton.vue

@@ -51,7 +51,7 @@ export default defineComponent({
         btnClass.push(`circle-button-${color.value}`);
       }
       if (shadow.value) {
-        btnClass.push("shadow");
+        btnClass.push("shadow-default");
       }
       if (active.value) {
         btnClass.push("active");
@@ -71,25 +71,34 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.circle-button
-  @apply inline-flex items-center justify-center relative w-10 h-10 rounded-full bg-white text-xl s('leading-5.75') text-white
+<style>
+@reference '~ui/app/assets/css/main.css';
 
-  &&-lg
-    @apply s('w-13.5') s('h-13.5') s('text-2.67xl')
+.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;
+}
 
-    .badge
-      @apply s('top-1.75') right-3 w-1 h-1
+.circle-button-lg {
+  @apply w-13.5 h-13.5 text-2p67xl;
+}
 
-  &&-highlight-400
-    @apply bg-highlight-400
+.circle-button-lg .badge {
+  @apply top-1.75 right-3 w-1 h-1;
+}
 
-    &.shadow
-      @apply shadow-md
+.circle-button-highlight-400 {
+  @apply bg-highlight-400;
+}
 
-    &.active
-      @apply border border-highlight text-highlight
+.circle-button-highlight-400.shadow {
+  @apply shadow-md;
+}
 
-  .badge
-    @apply absolute s('top-1.5') right-2 block s('w-0.75') s('h-0.75') rounded-full bg-highlight
+.circle-button-highlight-400.active {
+  @apply border border-highlight text-highlight;
+}
+
+.circle-button .badge {
+  @apply absolute top-1.5 right-2 block w-0.75 h-0.75 rounded-full bg-highlight;
+}
 </style>

package/app/components/SLCollapsableBlock.vue

@@ -24,7 +24,7 @@ export default defineComponent({
   props: {
     blockTitleIcon: {
       type: String,
-      default: '',
+      default: "",
     },
     blockTitle: {
       type: String,
@@ -95,38 +95,49 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.sl-collapsable-block
-  @apply s('p-3.75') border border-secondary-400 rounded-lg
-
-  &.collapsed
-    .sl-collapsable-block-header
-      .toggle-collapse-button
-        .icon
-          @apply rotate-0
-
-    .sl-collapsable-block-body
-      @apply pt-0
-
-  &-header
-    .collapse-block-title-icon
-      @apply text-sm text-primary
-
-    .collapse-block-title
-      @apply text-base text-pgray-1 font-bold
+<style>
+@reference '~ui/app/assets/css/main.css';
 
-    .toggle-collapse-button
-      @apply inline-flex items-center space-x-2
+.sl-collapsable-block {
+  @apply p-3.75 border border-secondary-400 rounded-lg;
+}
 
-      .button-title
-        @apply text-sm text-primary
-
-      .icon
-        @apply text-xs leading-none text-primary-600 rotate-180 transition-transform
-
-  &-body
-    @apply relative pt-4 overflow-hidden transition-all
-
-    .collapsable-block-wrapper
-      @apply absolute top-4 left-0 w-full
+.sl-collapsable-block.collapsed
+  .sl-collapsable-block-header
+  .toggle-collapse-button
+  .icon {
+  @apply rotate-0;
+}
+
+.sl-collapsable-block.collapsed .sl-collapsable-block-body {
+  @apply pt-0;
+}
+
+.sl-collapsable-block-header .collapse-block-title-icon {
+  @apply text-sm text-primary;
+}
+
+.sl-collapsable-block-header .collapse-block-title {
+  @apply text-base text-pgray-1 font-bold;
+}
+
+.sl-collapsable-block-header .toggle-collapse-button {
+  @apply inline-flex items-center space-x-2;
+}
+
+.sl-collapsable-block-header .toggle-collapse-button .button-title {
+  @apply text-sm text-primary;
+}
+
+.sl-collapsable-block-header .toggle-collapse-button .icon {
+  @apply text-xs leading-none text-primary-600 rotate-180 transition-transform;
+}
+
+.sl-collapsable-block-body {
+  @apply relative pt-4 overflow-hidden transition-all;
+}
+
+.sl-collapsable-block-body .collapsable-block-wrapper {
+  @apply absolute top-4 left-0 w-full;
+}
 </style>