@mptw/skylens-ui 1.5.0 → 1.5.2

package/app/components/SLRegionsMapChart.vue

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

package/app/components/SLRightSider.vue

@@ -199,44 +199,54 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.right-sider
-  @apply fixed top-0 right-0 h-full
-  z-index 9
-
-  &.show, &.hover
-    @apply z-50
-
-  &.show
-    .right-sider-modal
-      @apply block
-
-  &-modal
-    @apply fixed top-0 left-0 w-full h-full s('bg-mask/70') hidden
-
-  &-content
-    @apply absolute top-4 left-0 flex p-6 bg-white border-t border-l border-b border-primary-600 rounded-l-lg shadow-popup-lg transition-margin
-    max-width calc(100vw - 16px)
-    max-height calc(100% - theme('spacing.8'))
-
-    .sider-toggle
-      @apply absolute top-0 left-0 inline-flex p-3 rounded-l-full text-lg text-white
-      margin-top 123px
-      margin-left -44px
-
-      &-third
-        @apply bg-third-600
-
-      &-purple
-        @apply bg-edit
-
-    &-wrapper
-      @apply flex max-w-full overflow-hidden
-
-    .sider-close-button
-      @apply absolute top-0 right-0 inline-flex mt-6 mr-6 text-base text-primary
-
-  &-addition-content
-    @apply absolute top-4 right-0 flex bg-white border border-primary-600 rounded-lg overflow-hidden shadow-popup-lg transition-margin
-    max-height calc(100% - theme('spacing.8'))
+<style>
+@reference '~ui/app/assets/css/main.css';
+
+.right-sider {
+  @apply z-9 fixed top-0 right-0 h-full;
+}
+
+.right-sider.show,
+.right-sider.hover {
+  @apply z-50;
+}
+
+.right-sider.show .right-sider-modal {
+  @apply block;
+}
+
+.right-sider-modal {
+  @apply fixed top-0 left-0 w-full h-full bg-mask/70 hidden;
+}
+
+.right-sider-content {
+  @apply absolute top-4 left-0 flex p-6 bg-white border-t border-l border-b border-primary-600 rounded-l-lg shadow-popup-lg transition-[margin];
+  max-width: calc(100vw - var(--spacing) * 4);
+  max-height: calc(100% - var(--spacing) * 8);
+}
+
+.right-sider-content .sider-toggle {
+  @apply absolute top-0 left-0 inline-flex mt-30.75 -ml-11 p-3 rounded-l-full text-lg text-white;
+}
+
+.right-sider-content .sider-toggle.sider-toggle-third {
+  @apply bg-third-600;
+}
+
+.right-sider-content .sider-toggle.sider-toggle-purple {
+  @apply bg-edit;
+}
+
+.right-sider-content-wrapper {
+  @apply flex max-w-full overflow-hidden;
+}
+
+.right-sider-content .sider-close-button {
+  @apply absolute top-0 right-0 inline-flex mt-6 mr-6 text-base text-primary;
+}
+
+.right-sider-addition-content {
+  @apply absolute top-4 right-0 flex bg-white border border-primary-600 rounded-lg overflow-hidden shadow-popup-lg transition-[margin];
+  max-height: calc(100% - var(--spacing) * 8);
+}
 </style>

package/app/components/SLSearchInput.vue

@@ -71,29 +71,34 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.search-input
-  .is-focus
-    .button-group
-      @apply border-primary
+<style>
+@reference '~ui/app/assets/css/main.css';
 
-  &.search-input--sm
-    .button-group
-      @apply s('py-0.75')
+.search-input .is-focus .button-group {
+  @apply border-primary;
+}
+
+.search-input.search-input--sm .button-group {
+  @apply py-0.75;
+}
 
-      .btn
-        @apply text-sm
+.search-input.search-input--sm .button-group .btn {
+  @apply text-sm;
+}
 
-  .input-group-append
-    @apply inline-flex border-t border-r border-b border-primary-600 rounded-r bg-white
+.search-input .input-group-append {
+  @apply inline-flex border-t border-r border-b border-primary-600 rounded-r bg-white;
+}
 
-  .button-group
-    @apply inline-flex items-center s('py-1.75') s('pr-1.75') s('space-x-1.75')
+.search-input .button-group {
+  @apply inline-flex items-center py-1.75 pr-1.75 space-x-1.75;
+}
 
-    &-divider
-      @apply w-px h-full my-px bg-primary-600
+.search-input .button-group-divider {
+  @apply w-px h-full my-px bg-primary-600;
+}
 
-    .btn
-      @apply p-0 border-0 text-pgray-3 s('focus:outline-none') s('active:outline-none')
+.search-input .button-group .btn {
+  @apply p-0 border-0 text-pgray-3 focus:outline-none active:outline-none;
+}
 </style>
-    

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/utils";
-import type IInputOption from "~ui/interface/IInputOption";
+import { getUID } from "~ui/app/utils";
+import type IInputOption from "~ui/app/interface/IInputOption";
 
 gsap.registerPlugin(ScrollToPlugin);
 
@@ -152,7 +152,9 @@ export default defineComponent({
     const select = shallowRef<HTMLElement | null>(null);
     const uid = ref<string | undefined>(undefined);
     const modelProxy = ref(
-      Array.isArray(modelValue.value) ? [...modelValue.value] : modelValue.value
+      Array.isArray(modelValue.value)
+        ? [...modelValue.value]
+        : modelValue.value,
     );
     const search = ref("");
     const isSelecting = ref(false);
@@ -342,7 +344,7 @@ export default defineComponent({
           )
             return;
           modelProxy.value = modelProxy.value.filter(
-            (v: any) => v !== newValue
+            (v: any) => v !== newValue,
           );
         } else {
           if (
@@ -452,111 +454,136 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus" scoped>
-.custom-select
-  @apply relative
+<style scoped>
+@reference '~ui/app/assets/css/main.css';
 
-  &.inline
-    @apply flex
+.custom-select {
+  @apply relative;
+}
 
-    .input-label
-      @apply flex-grow-0 flex-shrink-0 mb-0 mr-2 py-2 border-t border-b border-transparent
+.custom-select.inline {
+  @apply flex;
+}
 
-    .form-control
-      @apply flex-grow
+.custom-select.inline .input-label {
+  @apply grow-0 shrink-0 mb-0 mr-2 py-2 border-t border-b border-transparent;
+}
 
-  &.custom-select-xs
-    .form-control
-      label
-        @apply py-px s('px-0.75') text-xs
+.custom-select.inline .form-control {
+  @apply grow;
+}
 
-  &.custom-select-sm
-    .form-control
-      label
-        @apply s("py-0.75") text-sm
+.custom-select.custom-select-xs .form-control label {
+  @apply py-px px-0.75 text-xs;
+}
 
-  &.disabled, &.readonly
-    .form-control
-      label
-        @apply border-primary-600 bg-primary-100 text-pgray-4 cursor-default
+.custom-select.custom-select-sm .form-control label {
+  @apply py-0.75 text-sm;
+}
 
-        .icon
-          @apply text-pgray-4
+.custom-select.disabled .form-control label,
+.custom-select.readonly .form-control label {
+  @apply border-primary-600 bg-primary-100 text-pgray-4 cursor-default;
+}
 
-  .input-label
-    @apply mb-2 text-base leading-normal text-pgray-2
+.custom-select.disabled .form-control label .icon,
+.custom-select.readonly .form-control label .icon {
+  @apply text-pgray-4;
+}
 
-  .form-control
-    @apply relative block overflow-hidden
+.custom-select .input-label {
+  @apply mb-2 text-base leading-[1.3125] text-pgray-2;
+}
 
-    &.is-invalid
-      .toggle-button
-        @apply border-danger-light
+.custom-select .form-control {
+  @apply relative block overflow-hidden;
+}
 
-      .invalid-feedback
-        @apply block
+.custom-select .form-control.is-invalid .toggle-button {
+  @apply border-danger-light;
+}
 
-    select
-      @apply absolute outline-none
+.custom-select .form-control.is-invalid .invalid-feedback {
+  @apply block;
+}
 
-    label
-      @apply relative flex items-center s("p-1.75") bg-white border border-primary-600 rounded text-base leading-normal text-pgray-4 space-x-2 cursor-pointer
+.custom-select .form-control select {
+  @apply absolute outline-none;
+}
 
-      &.selected
-        @apply text-pgray-2
+.custom-select .form-control label {
+  @apply relative flex items-center p-1.75 bg-white border border-primary-600 rounded text-base leading-[1.3125] text-pgray-4 space-x-2 cursor-pointer;
+}
 
-      .button-title
-        @apply flex-grow truncate
+.custom-select .form-control label.selected {
+  @apply text-pgray-2;
+}
 
-      .icon
-        @apply flex-grow-0 flex-shrink-0 text-xs text-pgray-2
+.custom-select .form-control label .button-title {
+  @apply grow truncate;
+}
 
-  .invalid-feedback
-    @apply hidden text-danger text-xs
+.custom-select .form-control label .icon {
+  @apply grow-0 shrink-0 text-xs text-pgray-2;
+}
 
-.select-options
-  @apply flex flex-col z-60 absolute invisible border border-primary-600 rounded bg-white overflow-hidden pointer-events-none
+.custom-select .invalid-feedback {
+  @apply hidden text-danger text-xs;
+}
 
-  &.select-options--xs
-    .option-list
-      .option-button
-        @apply py-1 text-xs
+.select-options {
+  @apply flex flex-col z-60 absolute invisible border border-primary-600 rounded bg-white overflow-hidden pointer-events-none;
+}
 
-  &.select-options--sm
-    .option-list
-      .option-button
-        @apply py-1 text-sm
+.select-options.select-options--xs .option-list .option-button {
+  @apply py-1 text-xs;
+}
 
-  &[data-show]
-    @apply visible pointer-events-auto
+.select-options.select-options--sm .option-list .option-button {
+  @apply py-1 text-sm;
+}
 
-  .options-header
-    @apply p-1
+.select-options[data-show] {
+  @apply visible pointer-events-auto;
+}
 
-  .options-wrapper
-    @apply relative w-full s("max-h-[11.6875rem]") rounded overflow-auto
+.select-options .options-header {
+  @apply p-1;
+}
 
-  .option-list
-    @apply flex flex-col
-
-    .option-button
-      @apply block s("min-w-[10.125rem]") s('p-1.75') bg-white text-base leading-normal text-pgray-3 s("hover:bg-primary-100") s("hover:text-primary")
-
-      &.selected
-        @apply bg-primary-100 text-primary
-
-        .icon-square
-          @apply hidden
-
-        .icon-check-square
-          @apply inline-block
-
-      &.disabled
-        @apply cursor-default s("hover:bg-white") s("hover:text-pgray-3")
-
-      .icon
-        @apply mr-2
-
-        &-check-square
-          @apply hidden
+.select-options .options-wrapper {
+  @apply relative w-full max-h-[11.6875rem] rounded overflow-auto;
+}
+
+.select-options .option-list {
+  @apply flex flex-col;
+}
+
+.select-options .option-list .option-button {
+  @apply block min-w-[10.125rem] p-1.75 bg-white text-base leading-[1.3125] text-pgray-3 hover:bg-primary-100 hover:text-primary;
+}
+
+.select-options .option-list .option-button.selected {
+  @apply bg-primary-100 text-primary;
+}
+
+.select-options .option-list .option-button.selected .icon-square {
+  @apply hidden;
+}
+
+.select-options .option-list .option-button.selected .icon-check-square {
+  @apply inline-block;
+}
+
+.select-options .option-list .option-button.disabled {
+  @apply cursor-default hover:bg-white hover:text-pgray-3;
+}
+
+.select-options .option-list .option-button .icon {
+  @apply mr-2;
+}
+
+.select-options .option-list .option-button .icon-check-square {
+  @apply hidden;
+}
 </style>

package/app/components/SLSelectAllToggle.vue

@@ -30,8 +30,7 @@ export default defineComponent({
     color: {
       type: String,
       default: "primary-600",
-      validator: (val: string) =>
-        ["primary-600", "secondary"].includes(val),
+      validator: (val: string) => ["primary-600", "secondary"].includes(val),
     },
   },
   emits: ["select:all", "select:none"],
@@ -65,54 +64,70 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.select-all-toggle
-  @apply inline-flex items-stretch border rounded-sm bg-white overflow-hidden
+<style>
+@reference '~ui/app/assets/css/main.css';
 
-  &.select-all-toggle-xs
-    .select-all-option
-      @apply text-xs
+.select-all-toggle {
+  @apply inline-flex items-stretch border rounded-sm bg-white overflow-hidden;
+}
 
-  &.select-all-toggle-sm
-    .select-all-option
-      @apply s('py-1.25') text-xs
+.select-all-toggle.select-all-toggle-xs .select-all-option {
+  @apply text-xs;
+}
 
-  &.select-all-toggle-primary-600
-    @apply border-primary-600
+.select-all-toggle.select-all-toggle-sm .select-all-option {
+  @apply py-1.25 text-xs;
+}
 
-    .select-all-option
-      @apply text-primary-600
+.select-all-toggle.select-all-toggle-primary-600 {
+  @apply border-primary-600;
+}
 
-      &.active
-        @apply bg-primary
+.select-all-toggle.select-all-toggle-primary-600 .select-all-option {
+  @apply text-primary-600;
+}
 
-    .select-all-divider
-      @apply bg-primary-600
+.select-all-toggle.select-all-toggle-primary-600 .select-all-option.active {
+  @apply bg-primary;
+}
 
-  &.select-all-toggle-secondary
-    @apply border-secondary-400
+.select-all-toggle.select-all-toggle-primary-600 .select-all-divider {
+  @apply bg-primary-600;
+}
 
-    .select-all-option
-      @apply text-secondary-400
+.select-all-toggle.select-all-toggle-secondary {
+  @apply border-secondary-400;
+}
 
-      &.active
-        @apply bg-secondary
+.select-all-toggle.select-all-toggle-secondary .select-all-option {
+  @apply text-secondary-400;
+}
 
-    .select-all-divider
-      @apply bg-primary-600
+.select-all-toggle.select-all-toggle-secondary .select-all-option.active {
+  @apply bg-secondary;
+}
 
-  .select-all-option
-    @apply block py-1 bg-white text-sm
+.select-all-toggle.select-all-toggle-secondary .select-all-divider {
+  @apply bg-primary-600;
+}
 
-    &.active
-      @apply text-white
+.select-all-toggle .select-all-option {
+  @apply block py-1 bg-white text-sm;
+}
 
-    &-all
-      @apply px-2
+.select-all-toggle .select-all-option.active {
+  @apply text-white;
+}
 
-    &-none
-      @apply pr-2 s('pl-1.75')
+.select-all-toggle .select-all-option-all {
+  @apply px-2;
+}
 
-  .select-all-divider
-    @apply s('mt-0.5') s('mb-0.5') w-px
+.select-all-toggle .select-all-option-none {
+  @apply pr-2 pl-1.75;
+}
+
+.select-all-toggle .select-all-divider {
+  @apply mt-0.5 mb-0.5 w-px;
+}
 </style>