@mptw/skylens-ui 1.4.14 → 1.4.16

package/components/SLSiderbarNav.vue

@@ -120,11 +120,11 @@ export default defineComponent({
 
             & > .nav-item-container
               .nav-item-wrapper
-                @apply bg-card-primary-light
+                @apply bg-card-primary-600
 
       .siderbar-toggle
         &:hover
-          @apply bg-primary-lighter text-white
+          @apply bg-primary-300 text-white
 
     .siderbar-logo
       .logo
@@ -153,10 +153,10 @@ export default defineComponent({
           & > .nav-item-container
             &:hover
               .nav-item-wrapper
-                @apply bg-card-primary-light
+                @apply bg-card-primary-600
 
             .nav-item-wrapper
-              @apply bg-card-primary-light
+              @apply bg-card-primary-600
 
         .nav-item-container
           &:hover
@@ -176,13 +176,13 @@ export default defineComponent({
           background #2D2F57
 
           &:before
-            @apply border-2 border-primary-hover bg-primary-lighter
+            @apply border-2 border-primary-hover bg-primary-300
 
     .siderbar-toggle
-      @apply bg-primary-lighter text-white
+      @apply bg-primary-300 text-white
 
       &:hover
-        @apply bg-card-primary-light text-primary
+        @apply bg-primary-25 text-primary
 
   &.closure
     margin-left -188px
@@ -200,7 +200,7 @@ export default defineComponent({
       border-radius 0px 12px 12px 0px
 
       &:hover
-        @apply bg-primary-lighter text-white
+        @apply bg-primary-300 text-white
 
       .icon-chevron-left
         @apply hidden
@@ -259,7 +259,7 @@ export default defineComponent({
         @apply hidden
 
   nav + nav
-    @apply border-t border-primary-lighter
+    @apply border-t border-primary-300
 
   nav
     @apply flex-grow relative flex flex-col overflow-hidden
@@ -323,7 +323,7 @@ export default defineComponent({
 
         &:hover
           .nav-item-wrapper
-            @apply bg-bg
+            @apply bg-primary-100
 
           .nav-item-button
             @apply font-bold
@@ -374,20 +374,20 @@ export default defineComponent({
       @apply flex-grow
 
       label
-        @apply border-bg bg-card-primary-light
+        @apply border-primary-100 bg-primary-25
 
         &:before
-          @apply border-2 border-bg
+          @apply border-2 border-primary-100
 
   &-toggle
-    @apply absolute top-0 right-0 flex justify-center items-center bg-bg-middle text-sm text-primary-light leading-none transition-all
+    @apply absolute top-0 right-0 flex justify-center items-center bg-primary-50 text-sm text-primary-600 leading-none transition-all
     width 20px
     height 40px
     margin-top 25px
     border-radius 12px 0px 0px 12px
 
     &:hover
-      @apply bg-primary-lighter text-white
+      @apply bg-primary-300 text-white
 
     .icon-chevron-right
       @apply hidden

package/components/SLSkyInsightSitePage.vue

@@ -23,5 +23,5 @@ export default {
     @apply s('-mx-4')
 
   &-content
-    @apply flex flex-col flex-grow w-full p-4 rounded bg-bg-middle
+    @apply flex flex-col flex-grow w-full p-4 rounded bg-primary-50
 </style>

package/components/SLSortByDropdown.vue

@@ -172,12 +172,12 @@ export default defineComponent({
         @apply hidden
 
   &-toggle
-    @apply inline-flex items-center px-1 s('py-0.5') space-x-2 bg-bg-middle rounded text-sm text-primary
+    @apply inline-flex items-center px-1 s('py-0.5') space-x-2 bg-primary-50 rounded text-sm text-primary
     .icon
       @apply text-xs
 
   &-menu
-    @apply s('z-[2]') flex-col s('min-w-[84px]') bg-white border border-primary-light rounded overflow-hidden hidden
+    @apply s('z-[2]') flex-col s('min-w-[84px]') bg-white border border-primary-600 rounded overflow-hidden hidden
 
     &[data-show]
       @apply inline-flex
@@ -185,5 +185,5 @@ export default defineComponent({
     .sort-by-dropdown-item
       @apply inline-flex p-2 bg-white text-sm text-gray-3
       &.active
-        @apply bg-bg text-primary
+        @apply bg-primary-100 text-primary
 </style>

package/components/SLStayRangeInput.vue

@@ -271,7 +271,7 @@ export default defineComponent({
   &.disabled, &.readonly
     .input-group
       input[type=text]
-        @apply border-primary-light bg-bg
+        @apply border-primary-600 bg-primary-100
 
 
   & > label
@@ -293,7 +293,7 @@ export default defineComponent({
     @apply flex-grow flex flex-nowrap space-x-2
 
     input[type=text]
-      @apply flex-grow-0 flex-shrink-0 w-11 border border-primary-light rounded text-base text-center text-gray-2 outline-none
+      @apply flex-grow-0 flex-shrink-0 w-11 border border-primary-600 rounded text-base text-center text-gray-2 outline-none
 
     .custom-select
       @apply w-full

package/components/SLTab.vue

@@ -7,7 +7,8 @@ li(
     ref='tabPaneEl'
   )
   a(
-      href="javascript:;"
+      href="javascript:;",
+      :class='{ disabled: disabled }'
     ).tab-nav-item-link
     .tab-nav-item-link-title
       .inline-flex.items-center.justify-center.w-full.space-x-1
@@ -63,9 +64,13 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
   setup(props) {
-    const { order, activeTabBorderColor, single } = toRefs(props);
+    const { order, activeTabBorderColor, single, disabled } = toRefs(props);
 
     const distributed = inject<{
       header: boolean;
@@ -98,11 +103,15 @@ export default defineComponent({
         classes.push("single");
       }
 
+      if (disabled.value) {
+        classes.push("disabled");
+      }
+
       return classes.join(" ");
     });
 
     function navClick() {
-      if (!isActive.value && distributed && distributed.changeTabTo) {
+      if (!isActive.value && distributed && distributed.changeTabTo && !disabled.value) {
         distributed.changeTabTo(index.value || 0);
       }
     }

package/components/SLTable.vue

@@ -57,7 +57,7 @@
                     :name="field.key"
                     :item="item"
                     :index="itemIndex"
-                  ).border-border
+                  ).border-primary-600
                 td(
                   v-else
                   :colspan="columnSpans[index]"
@@ -78,7 +78,7 @@
                     :name="field.key"
                     :item="item"
                     :index="itemIndex"
-                  ).border-border
+                  ).border-primary-600
                 td(
                   v-else
                   :colspan="columnSpans[index]"
@@ -91,7 +91,7 @@
               slot(v-else name='noItems')
                 .flex.flex-col.items-center.py-8.px-4.space-y-3
                   img(src="~/assets/images/commons/empty-box.png")
-                  .text-lg.text-primary-light {{ noItems }}
+                  .text-lg.text-primary-600 {{ noItems }}
                   .text-sm.text-gray-3(v-if="reason") 可能的原因：{{ reason }}
       SLLoading(
         v-if="loading"
@@ -173,11 +173,11 @@
       },
       tdBorderColor: {
         type: String,
-        default: 'border-border',
+        default: 'border-primary-600',
       },
       tdHoverColor: {
         type: String,
-        default: 'bg-bg',
+        default: 'bg-primary-100',
       },
       noItems: {
         type: String,
@@ -396,7 +396,7 @@
   
       thead
         tr
-          @apply border-b border-primary-light bg-white
+          @apply border-b border-primary-600 bg-white
   
           th
             @apply px-2 pb-2 text-base font-normal text-primary whitespace-nowrap
@@ -422,7 +422,7 @@
         tr
           &.body-header-row
             td
-              @apply bg-bg-middle text-lg font-bold shadow-inline
+              @apply bg-primary-50 text-lg font-bold shadow-inline
 
           td
             @apply p-2 border-b border-opacity-50 text-base text-gray-2
@@ -431,7 +431,7 @@
                 @apply pr-8
 
   .table-header-filter-popup
-    @apply z-10 flex border border-primary-light rounded overflow-hidden invisible pointer-events-none
+    @apply z-10 flex border border-primary-600 rounded overflow-hidden invisible pointer-events-none
 
     &[data-show]
       @apply visible pointer-events-auto
@@ -441,10 +441,10 @@
 
       .table-header-filter-item
         @apply inline-flex justify-center p-2 bg-white text-sm text-gray-3
-        @apply s('hover:bg-bg-middle')
+        @apply s('hover:bg-primary-50')
 
         &.active
-          @apply bg-bg text-primary
+          @apply bg-primary-100 text-primary
 
           .icon
             @apply text-primary

package/components/SLTableTooltip.vue

@@ -51,7 +51,7 @@ export default defineComponent({
     },
     headerBorderColor: {
       type: String,
-      default: "border-primary-light",
+      default: "border-primary-600",
     },
   },
   setup(props) {
@@ -72,7 +72,7 @@ export default defineComponent({
 
 <style lang="stylus">
 .table-tooltip
-  @apply inline-block p-4 border border-border rounded bg-white shadow-popup-sm pointer-events-none
+  @apply inline-block p-4 border border-primary-600 rounded bg-white shadow-popup-sm pointer-events-none
 
   &-title
     @apply mb-4 text-base text-gray-2 font-bold

package/components/SLTabs.vue

@@ -235,20 +235,20 @@ export default defineComponent({
             .tab-nav-item-link
               &:after
                 content ""
-                @apply absolute bottom-0 left-0 w-px h-3 s("-mb-3") s("-ml-px") bg-border
+                @apply absolute bottom-0 left-0 w-px h-3 s("-mb-3") s("-ml-px") bg-primary-600
 
           &.active
             @apply s("pb-1.75")
 
             &:before
               content ""
-              @apply block absolute s("top-0.5") s("right-0.75") s("left-0.75") h-1 bg-secondary-hover
+              @apply block absolute s("top-0.5") s("right-0.75") s("left-0.75") h-1 bg-highlight-400
 
             .tab-nav-item-link
               @apply text-primary cursor-default
 
           &-link
-            @apply relative block s("py-1.75") s("px-3.75") border-t border-r border-l border-border rounded-t text-lg text-primary-light
+            @apply relative block s("py-1.75") s("px-3.75") border-t border-r border-l border-primary-600 rounded-t text-lg text-primary-600
 
             &-title
               @apply truncate
@@ -257,7 +257,7 @@ export default defineComponent({
           @apply space-y-8
 
     & > .tabs-content
-      @apply p-4 border border-border rounded-lg bg-white overflow-hidden
+      @apply p-4 border border-primary-600 rounded-lg bg-white overflow-hidden
 
       .tabs-content-header
         @apply flex items-start justify-between mb-4
@@ -271,7 +271,7 @@ export default defineComponent({
         @apply s('lg:px-6') s('lg:space-x-14')
 
         .tab-nav-item
-          @apply relative flex-grow s('py-6') rounded bg-bg text-lg text-primary-hover text-center
+          @apply relative flex-grow s('py-6') rounded bg-primary-100 text-lg text-primary-hover text-center
           @apply s('lg:py-5.5')
 
           &:before
@@ -282,7 +282,7 @@ export default defineComponent({
 
           &:after
             content ""
-            @apply absolute left-0 bottom-0 s('-ml-4') s('-mb-5') block w-full h-3 rounded-t bg-primary-lighter opacity-0
+            @apply absolute left-0 bottom-0 s('-ml-4') s('-mb-5') block w-full h-3 rounded-t bg-primary-300 opacity-0
             width calc(100% + theme('spacing.4') * 2)
 
           &.active
@@ -327,7 +327,7 @@ export default defineComponent({
         @apply inline-flex items-start space-x-2
 
         .tab-nav-item
-          @apply relative rounded-t bg-bg
+          @apply relative rounded-t bg-primary-100
 
           &.active
             @apply bg-primary
@@ -364,7 +364,7 @@ export default defineComponent({
           @apply flex flex-col s('space-y-0.5')
 
           .tab-nav-item
-            @apply flex justify-between s('w-[184px]') py-3 pl-3 pr-5 bg-bg-middle rounded-l-lg text-xs
+            @apply flex justify-between s('w-[184px]') py-3 pl-3 pr-5 bg-primary-50 rounded-l-lg text-xs
 
             &.active
               @apply bg-primary-hover text-white font-bold shadow-md
@@ -373,7 +373,7 @@ export default defineComponent({
               @apply block w-full
 
     .tabs-content
-      @apply flex-grow s('-ml-2') p-4 bg-white border border-border rounded-lg shadow-md
+      @apply flex-grow s('-ml-2') p-4 bg-white border border-primary-600 rounded-lg shadow-md
 
       & > div
         @apply flex min-h-full
@@ -392,7 +392,7 @@ export default defineComponent({
         .tabs-nav-left
           &:before
             content ""
-            @apply absolute right-0 bottom-0 left-0 h-px s('rounded-[1px]') bg-primary-lighter
+            @apply absolute right-0 bottom-0 left-0 h-px s('rounded-[1px]') bg-primary-300
 
       .tabs-nav-left
         @apply relative flex-grow overflow-hidden
@@ -414,6 +414,10 @@ export default defineComponent({
             .tab-nav-item-link
               @apply cursor-default
 
+          &.disabled
+            .tab-nav-item-link
+              @apply s('text-[#BCBFCF]') cursor-default
+
           &-link
             @apply relative block  px-4 pb-2 text-lg text-gray-2
 

package/components/SLTextInput.vue

@@ -243,14 +243,14 @@ export default defineComponent({
     .input-group
       &.is-fill
         .input
-          @apply bg-white border-primary-lighter
+          @apply bg-white border-primary-300
 
       &.is-focus
         .input
           @apply bg-white border-primary
 
       .input
-        @apply relative bg-bg-middle border-bg-middle
+        @apply relative bg-primary-50 border-primary-50
 
         .float-label
           @apply inline-block
@@ -258,7 +258,7 @@ export default defineComponent({
     .is-invalid
       .input-group
         .input, .input.is-focus
-          @apply border-danger-hover
+          @apply border-danger-light
 
   &.is-fixed-float
     & > label
@@ -274,16 +274,16 @@ export default defineComponent({
     .is-invalid
       .input-group
         .input, .input.is-focus
-          @apply border-danger-hover
+          @apply border-danger-light
 
   &.disabled, &.readonly
     .input-group
       &.is-focus
         .input
-          @apply border-primary-light
+          @apply border-primary-600
 
       .input
-        @apply border-primary-light bg-bg
+        @apply border-primary-600 bg-primary-100
 
   & > label
     @apply w-full mb-2 text-base leading-normal text-gray-2
@@ -294,7 +294,7 @@ export default defineComponent({
   .is-invalid
     .input-group, .input-group.is-focus
       .input
-        @apply border-danger-hover
+        @apply border-danger-light
 
         &.input-sm, &.input-xs
           .icon
@@ -323,7 +323,7 @@ export default defineComponent({
       @apply flex-grow-0 flex-shrink-0
 
     .input
-      @apply flex-grow flex items-center s('p-1.75') bg-white rounded border border-primary-light
+      @apply flex-grow flex items-center s('p-1.75') bg-white rounded border border-primary-600
 
       &.input-sm
         @apply s('py-0.75')
@@ -347,7 +347,7 @@ export default defineComponent({
         @apply flex-grow w-full bg-transparent text-gray-2 placeholder-gray-4 s('focus:outline-none')
 
       .icon
-        @apply flex-grow-0 flex-shrink-0 hidden text-danger-hover
+        @apply flex-grow-0 flex-shrink-0 hidden text-danger-light
 
       .float-label
         @apply hidden absolute top-0 left-0 s('p-1.75') border-t border-b border-transparent text-gray-3 cursor-text

package/components/SLTextarea.vue

@@ -105,14 +105,14 @@ export default defineComponent({
 
   &.disabled
     textarea
-      @apply border-primary-light bg-bg
+      @apply border-primary-600 bg-primary-100
 
   label
     @apply mb-2 text-base leading-normal text-gray-2
 
   .is-invalid
     textarea
-      @apply border-danger-hover
+      @apply border-danger-light
 
     .invalid-feedback
       @apply block
@@ -121,7 +121,7 @@ export default defineComponent({
     @apply relative
 
   textarea
-    @apply block w-full p-2 border border-primary-light rounded bg-white text-base text-gray-2 resize-none s('focus:border-primary') s('focus:outline-none')
+    @apply block w-full p-2 border border-primary-600 rounded bg-white text-base text-gray-2 resize-none s('focus:border-primary') s('focus:outline-none')
 
   textarea:focus + .textarea-placeholder
     @apply invisible

package/components/SLToast.vue

@@ -58,7 +58,7 @@ export default defineComponent({
   @apply s('z-[100]') fixed top-0 left-0 w-full h-full pointer-events-none
 
   &-wrapper
-    @apply absolute s('top-1/2') s('left-1/2') py-4 px-6 s('bg-backdrop/80') rounded text-base text-white s('-translate-x-1/2') s('-translate-y-1/2')
+    @apply absolute s('top-1/2') s('left-1/2') py-4 px-6 s('bg-mask/80') rounded text-base text-white s('-translate-x-1/2') s('-translate-y-1/2')
 
 .toast-fade-enter-active
   @apply transition-opacity duration-300 ease-linear

package/components/SLToggleButton.vue

@@ -62,7 +62,7 @@ export default defineComponent({
 
 <style lang="stylus">
 .sl-toggle-button
-  @apply inline-flex items-center justify-center s('p-1.5') space-x-2 bg-bg rounded text-base text-primary-hover
+  @apply inline-flex items-center justify-center s('p-1.5') space-x-2 bg-primary-100 rounded text-base text-primary-hover
 
   &.sl-toggle-button-sm
     @apply s('h-[29px]') px-1 py-0 text-sm
@@ -74,5 +74,5 @@ export default defineComponent({
     @apply bg-primary-hover text-white
 
   &.disabled
-    @apply bg-cancel text-white cursor-default
+    @apply bg-gray-5 text-white cursor-default
 </style>

package/components/SLTwoLayerMultiSelect.vue

@@ -351,10 +351,10 @@ export default defineComponent({
 
   &.bordered
     .select-menu-popup
-      @apply border-primary-light
+      @apply border-primary-600
 
   .toggle-button
-    @apply relative flex items-center w-full s('p-1.75') s('space-x-1.75') border border-primary-light rounded text-base text-gray-4
+    @apply relative flex items-center w-full s('p-1.75') s('space-x-1.75') border border-primary-600 rounded text-base text-gray-4
 
     &.selected
       @apply text-gray-2
@@ -366,7 +366,7 @@ export default defineComponent({
       @apply flex-grow-0 flex-shrink-0 inline-flex text-xs text-gray-2 leading-none
 
   .select-menu-popup
-    @apply z-10 flex flex-col s("h-67.75") s('min-w-[552px]') w-full s("pt-2.75") s("px-2.75") bg-white border border-bg rounded shadow invisible pointer-events-none
+    @apply z-10 flex flex-col s("h-67.75") s('min-w-[552px]') w-full s("pt-2.75") s("px-2.75") bg-white border border-primary-100 rounded shadow invisible pointer-events-none
 
     &[data-show]
       @apply visible pointer-events-auto
@@ -412,7 +412,7 @@ export default defineComponent({
           .list
             .item
               @apply relative flex items-center justify-start flex-nowrap s('py-1.5') px-2 s('space-x-2.5') text-sm text-gray-3
-              @apply s('hover:bg-bg')
+              @apply s('hover:bg-primary-100')
 
               &.checked
                 @apply text-primary
@@ -423,7 +423,7 @@ export default defineComponent({
                       @apply text-primary
 
               &.selected
-                @apply bg-bg
+                @apply bg-primary-100
 
               .checkbox
                 @apply flex-grow-0 flex-shrink-0 inline-flex

package/components/SLTwoLayerSelect.vue

@@ -216,7 +216,7 @@ export default defineComponent({
 
 <style lang="stylus">
 .tw-layer-select
-  @apply flex flex-col s("h-67.75") s("pt-2.75") s("px-2.75") bg-white border border-bg rounded shadow
+  @apply flex flex-col s("h-67.75") s("pt-2.75") s("px-2.75") bg-white border border-primary-100 rounded shadow
   width 552px
 
   .select-header
@@ -252,10 +252,10 @@ export default defineComponent({
 
         .list
           .item
-            @apply relative block s('py-1.5') px-2 s("hover:bg-bg-middle") text-sm text-gray-3 truncate
+            @apply relative block s('py-1.5') px-2 s("hover:bg-primary-50") text-sm text-gray-3 truncate
 
             &.selected
-              @apply bg-bg text-primary
+              @apply bg-primary-100 text-primary
 
             .highlight-dot
               @apply absolute top-0 left-0 s('w-1.5') s('h-1.5') mt-2 ml-1 bg-red rounded-full

package/components/SLTwoLayerSingleSelect.vue

@@ -294,7 +294,7 @@ export default defineComponent({
       @apply text-sm
 
   .toggle-button
-    @apply relative flex items-center w-full s('p-1.75') s('space-x-1.75') border border-primary-light rounded text-base text-gray-4
+    @apply relative flex items-center w-full s('p-1.75') s('space-x-1.75') border border-primary-600 rounded text-base text-gray-4
 
     &.selected
       @apply text-gray-2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mptw/skylens-ui",
   "type": "module",
-  "version": "1.4.14",
+  "version": "1.4.16",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",