@mptw/skylens-ui 1.5.16 → 1.5.17

package/app/components/SLTextInput.vue

@@ -230,14 +230,14 @@ export default defineComponent({
 
 .text-input.inline {
   @apply flex;
-}
 
-.text-input.inline > label {
-  @apply grow-0 shrink-0 mb-0 mr-2 py-2 border-t border-b border-transparent;
-}
+  .form-control {
+    @apply grow;
+  }
 
-.text-input.inline .form-control {
-  @apply grow;
+  > label {
+    @apply grow-0 shrink-0 mb-0 mr-2 py-2 border-t border-b border-transparent;
+  }
 }
 
 .text-input.is-float > label {
@@ -254,14 +254,13 @@ export default defineComponent({
 
 .text-input.is-float .input-group .input {
   @apply relative bg-primary-50 border-primary-50;
-}
 
-.text-input.is-float .input-group .input .float-label {
-  @apply inline-block;
+  .float-label {
+    @apply inline-block;
+  }
 }
 
-.text-input.is-float .is-invalid .input-group .input,
-.text-input.is-float .is-invalid .input-group .input.is-focus {
+.text-input.is-float .is-invalid .input-group .input, .text-input.is-float .is-invalid .input-group .input.is-focus {
   @apply border-danger-light;
 }
 
@@ -271,50 +270,42 @@ export default defineComponent({
 
 .text-input.is-fixed-float .input-group .input {
   @apply relative bg-white border-primary;
-}
 
-.text-input.is-fixed-float .input-group .input .float-label {
-  @apply inline-block ml-1.5 -mt-2.25 py-0 px-0.5 bg-white text-primary text-xs transition-(--transition-input-focus);
+  .float-label {
+    @apply inline-block ml-1.5 -mt-2.25 py-0 px-0.5 bg-white text-primary text-xs transition-(--transition-input-focus);
+  }
 }
 
-.text-input.is-fixed-float .is-invalid .input-group .input,
-.text-input.is-fixed-float .is-invalid .input-group .input.is-focus {
+.text-input.is-fixed-float .is-invalid .input-group .input, .text-input.is-fixed-float .is-invalid .input-group .input.is-focus {
   @apply border-danger-light;
 }
 
-.text-input.disabled .input-group.is-focus .input,
-.text-input.readonly .input-group.is-focus .input {
+.text-input.disabled .input-group.is-focus .input, .text-input.readonly .input-group.is-focus .input {
   @apply border-primary-600;
 }
 
-.text-input.disabled .input-group .input,
-.text-input.readonly .input-group .input {
+.text-input.disabled .input-group .input, .text-input.readonly .input-group .input {
   @apply border-primary-600 bg-primary-100;
 }
 
 .text-input > label {
   @apply w-full mb-2 text-base leading-[1.3125] text-pgray-2;
-}
 
-.text-input > label .required {
-  @apply text-danger;
+  .required {
+    @apply text-danger;
+  }
 }
 
-.text-input .is-invalid .input-group .input,
-.text-input .is-invalid .input-group.is-focus .input {
+.text-input .is-invalid .input-group .input, .text-input .is-invalid .input-group.is-focus .input {
   @apply border-danger-light;
-}
 
-.text-input .is-invalid .input-group .input.input-sm .icon,
-.text-input .is-invalid .input-group .input.input-xs .icon,
-.text-input .is-invalid .input-group.is-focus .input.input-sm .icon,
-.text-input .is-invalid .input-group.is-focus .input.input-xs .icon {
-  @apply hidden;
-}
+  &.input-sm .icon, &.input-xs .icon, &.input-sm .icon, &.input-xs .icon {
+    @apply hidden;
+  }
 
-.text-input .is-invalid .input-group .input .icon,
-.text-input .is-invalid .input-group.is-focus .input .icon {
-  @apply inline-block;
+  .icon, .icon {
+    @apply inline-block;
+  }
 }
 
 .text-input .is-invalid .invalid-feedback {
@@ -323,59 +314,58 @@ export default defineComponent({
 
 .text-input .input-group {
   @apply flex flex-nowrap text-base leading-[1.3125];
-}
 
-.text-input .input-group.is-focus .input {
-  @apply border-primary;
-}
+  &.is-fill .input .float-label, &.is-focus .input .float-label {
+    @apply ml-1.5 -mt-2.25 py-0 px-0.5 bg-white text-primary text-xs transition-(--transition-input-focus);
+  }
 
-.text-input .input-group.is-fill .input .float-label,
-.text-input .input-group.is-focus .input .float-label {
-  @apply ml-1.5 -mt-2.25 py-0 px-0.5 bg-white text-primary text-xs transition-(--transition-input-focus);
-}
+  &.is-focus .input {
+    @apply border-primary;
+  }
 
-.text-input .input-group-prepend {
-  @apply grow-0 shrink-0;
-}
+  .input {
+    @apply grow flex items-center p-1.75 bg-white rounded border border-primary-600;
 
-.text-input .input-group .input {
-  @apply grow flex items-center p-1.75 bg-white rounded border border-primary-600;
-}
+    &:not(:first-child) {
+      @apply rounded-l-none border-l-0;
+    }
 
-.text-input .input-group .input.input-sm {
-  @apply py-0.75;
-}
+    &:not(:last-child) {
+      @apply rounded-r-none border-r-0;
+    }
 
-.text-input .input-group .input.input-sm input {
-  @apply text-base;
-}
+    .float-label {
+      @apply hidden absolute top-0 left-0 p-1.75 border-t border-b border-transparent text-pgray-3 cursor-text;
+    }
 
-.text-input .input-group .input.input-xs {
-  @apply py-px px-0.75;
-}
+    &.input-sm {
+      @apply py-0.75;
 
-.text-input .input-group .input.input-xs input {
-  @apply text-base;
-}
+      input {
+        @apply text-base;
+      }
+    }
 
-.text-input .input-group .input:not(:first-child) {
-  @apply rounded-l-none border-l-0;
-}
+    &.input-xs {
+      @apply py-px px-0.75;
 
-.text-input .input-group .input:not(:last-child) {
-  @apply rounded-r-none border-r-0;
-}
+      input {
+        @apply text-base;
+      }
+    }
 
-.text-input .input-group .input input {
-  @apply grow w-full bg-transparent text-pgray-2 placeholder-pgray-4 focus:outline-none;
-}
+    input {
+      @apply grow w-full bg-transparent text-pgray-2 placeholder-pgray-4 focus:outline-none;
+    }
 
-.text-input .input-group .input .icon {
-  @apply grow-0 shrink-0 hidden text-danger-light;
+    .icon {
+      @apply grow-0 shrink-0 hidden text-danger-light;
+    }
+  }
 }
 
-.text-input .input-group .input .float-label {
-  @apply hidden absolute top-0 left-0 p-1.75 border-t border-b border-transparent text-pgray-3 cursor-text;
+.text-input .input-group-prepend {
+  @apply grow-0 shrink-0;
 }
 
 .text-input .input-group-append {

package/app/components/SLTextarea.vue

@@ -97,14 +97,14 @@ export default defineComponent({
 
 .textarea.inline {
   @apply flex;
-}
 
-.textarea.inline label {
-  @apply grow-0 shrink-0 mb-0 mr-2 py-2 border-t border-b border-transparent;
-}
+  .form-control {
+    @apply grow;
+  }
 
-.textarea.inline .form-control {
-  @apply grow;
+  label {
+    @apply grow-0 shrink-0 mb-0 mr-2 py-2 border-t border-b border-transparent;
+  }
 }
 
 .textarea.disabled textarea {
@@ -129,10 +129,10 @@ export default defineComponent({
 
 .textarea textarea {
   @apply block w-full p-2 border border-primary-600 rounded bg-white text-base text-pgray-2 resize-none focus:border-primary focus:outline-none;
-}
 
-.textarea textarea:focus + .textarea-placeholder {
-  @apply invisible;
+  &:focus + .textarea-placeholder {
+    @apply invisible;
+  }
 }
 
 .textarea .form-control-notice {

package/app/components/SLToast.vue

@@ -73,8 +73,7 @@ export default defineComponent({
   @apply transition-opacity duration-200 ease-linear;
 }
 
-.toast-fade-enter-from,
-.toast-fade-leave-to {
+.toast-fade-enter-from, .toast-fade-leave-to {
   @apply opacity-0;
 }
 </style>

package/app/components/SLToggleButton.vue

@@ -65,21 +65,21 @@ export default defineComponent({
 
 .sl-toggle-button {
   @apply inline-flex items-center justify-center p-1.5 space-x-2 bg-primary-100 rounded text-base text-primary-600;
-}
 
-.sl-toggle-button.sl-toggle-button-sm {
-  @apply h-7.25 px-1 py-0 text-sm;
-}
+  &.sl-toggle-button-sm {
+    @apply h-7.25 px-1 py-0 text-sm;
 
-.sl-toggle-button.sl-toggle-button-sm .icon {
-  @apply text-lg leading-none;
-}
+    .icon {
+      @apply text-lg leading-none;
+    }
+  }
 
-.sl-toggle-button.active {
-  @apply bg-primary-600 text-white;
-}
+  &.disabled {
+    @apply bg-pgray-5 text-white cursor-default;
+  }
 
-.sl-toggle-button.disabled {
-  @apply bg-pgray-5 text-white cursor-default;
+  &.active {
+    @apply bg-primary-600 text-white;
+  }
 }
 </style>

package/app/components/SLTwoLayerMultiSelect.vue

@@ -348,42 +348,71 @@ export default defineComponent({
 
 .two-layer-multi-select {
   @apply relative w-full;
-}
 
-.two-layer-multi-select.two-layer-multi-select-sm .toggle-button {
-  @apply text-sm;
-}
+  &.two-layer-multi-select-sm .toggle-button {
+    @apply text-sm;
+  }
 
-.two-layer-multi-select.bordered .select-menu-popup {
-  @apply border-primary-600;
-}
+  &.bordered .select-menu-popup {
+    @apply border-primary-600;
+  }
 
-.two-layer-multi-select .toggle-button {
-  @apply relative flex items-center w-full p-1.75 space-x-1.75 border border-primary-600 rounded text-base text-pgray-4;
-}
+  .select-menu-popup {
+    @apply z-10 flex flex-col h-67.75 min-w-[552px] w-full pt-2.75 px-2.75 bg-white border border-primary-100 rounded shadow-default invisible pointer-events-none;
 
-.two-layer-multi-select .toggle-button.selected {
-  @apply text-pgray-2;
-}
+    .select-body-divider {
+      @apply grow-0 shrink-0 w-px h-auto mb-3 mr-2.75 ml-3 bg-pgray-4;
+    }
 
-.two-layer-multi-select .toggle-button .button-title {
-  @apply grow;
-}
+    .select-header {
+      @apply grow-0 shrink-0 mb-3;
+    }
 
-.two-layer-multi-select .toggle-button .icon {
-  @apply grow-0 shrink-0 inline-flex text-xs text-pgray-2 leading-none;
-}
+    .select-body {
+      @apply grow flex overflow-hidden;
 
-.two-layer-multi-select .select-menu-popup {
-  @apply z-10 flex flex-col h-67.75 min-w-[552px] w-full pt-2.75 px-2.75 bg-white border border-primary-100 rounded shadow-default invisible pointer-events-none;
-}
+      .menu-header {
+        @apply grow-0 shrink-0 w-full pb-2 text-primary border-b border-primary;
+      }
 
-.two-layer-multi-select .select-menu-popup[data-show] {
-  @apply visible pointer-events-auto;
-}
+      .menu-body {
+        @apply relative grow;
+
+        .list .item {
+          @apply relative flex items-center justify-start flex-nowrap py-1.5 px-2 space-x-2.5 text-sm text-pgray-3 hover:bg-primary-100;
+        }
+      }
+
+      .menu {
+        @apply grow flex flex-col text-base leading-[1.3125] overflow-hidden;
+        flex: 1;
+
+        &:hover {
+          flex: 1.5;
+        }
+      }
+    }
 
-.two-layer-multi-select .select-menu-popup .select-header {
-  @apply grow-0 shrink-0 mb-3;
+    &[data-show] {
+      @apply visible pointer-events-auto;
+    }
+  }
+
+  .toggle-button {
+    @apply relative flex items-center w-full p-1.75 space-x-1.75 border border-primary-600 rounded text-base text-pgray-4;
+
+    .button-title {
+      @apply grow;
+    }
+
+    &.selected {
+      @apply text-pgray-2;
+    }
+
+    .icon {
+      @apply grow-0 shrink-0 inline-flex text-xs text-pgray-2 leading-none;
+    }
+  }
 }
 
 .two-layer-multi-select
@@ -413,19 +442,6 @@ export default defineComponent({
   @apply text-sm;
 }
 
-.two-layer-multi-select .select-menu-popup .select-body {
-  @apply grow flex overflow-hidden;
-}
-
-.two-layer-multi-select .select-menu-popup .select-body .menu {
-  @apply grow flex flex-col text-base leading-[1.3125] overflow-hidden;
-  flex: 1;
-}
-
-.two-layer-multi-select .select-menu-popup .select-body .menu:hover {
-  flex: 1.5;
-}
-
 .two-layer-multi-select
   .select-menu-popup
   .select-body
@@ -437,18 +453,6 @@ export default defineComponent({
   @apply grow;
 }
 
-.two-layer-multi-select .select-menu-popup .select-body .menu-header {
-  @apply grow-0 shrink-0 w-full pb-2 text-primary border-b border-primary;
-}
-
-.two-layer-multi-select .select-menu-popup .select-body .menu-body {
-  @apply relative grow;
-}
-
-.two-layer-multi-select .select-menu-popup .select-body .menu-body .list .item {
-  @apply relative flex items-center justify-start flex-nowrap py-1.5 px-2 space-x-2.5 text-sm text-pgray-3 hover:bg-primary-100;
-}
-
 .two-layer-multi-select
   .select-menu-popup
   .select-body
@@ -533,8 +537,4 @@ export default defineComponent({
   .item-name {
   @apply grow block truncate;
 }
-
-.two-layer-multi-select .select-menu-popup .select-body-divider {
-  @apply grow-0 shrink-0 w-px h-auto mb-3 mr-2.75 ml-3 bg-pgray-4;
-}
 </style>

package/app/components/SLTwoLayerSelect.vue

@@ -219,57 +219,57 @@ export default defineComponent({
 
 .tw-layer-select {
   @apply flex flex-col w-138 h-67.75 pt-2.75 px-2.75 bg-white border border-primary-100 rounded shadow-default;
-}
 
-.tw-layer-select .select-header {
-  @apply grow-0 shrink-0 mb-3;
-}
+  .select-body-divider {
+    @apply grow-0 shrink-0 w-px h-auto mb-3 mr-2.75 ml-3 bg-pgray-4;
+  }
 
-.tw-layer-select .select-header .search-input .button-group {
-  @apply py-0.75;
-}
+  .select-header {
+    @apply grow-0 shrink-0 mb-3;
 
-.tw-layer-select .select-header .text-input .input-group .input {
-  @apply py-1.25;
-}
+    .text-input .input-group .input {
+      @apply py-1.25;
 
-.tw-layer-select .select-header .text-input .input-group .input input {
-  @apply text-sm;
-}
+      input {
+        @apply text-sm;
+      }
+    }
 
-.tw-layer-select .select-body {
-  @apply grow flex overflow-hidden;
-}
+    .search-input .button-group {
+      @apply py-0.75;
+    }
+  }
 
-.tw-layer-select .select-body .menu {
-  @apply grow flex flex-col text-base leading-[1.3125] overflow-hidden;
-}
+  .select-body {
+    @apply grow flex overflow-hidden;
 
-.tw-layer-select .select-body .menu:hover {
-  @apply grow-[1.5];
-}
+    .menu-header {
+      @apply grow-0 shrink-0 w-full pb-2 text-primary border-b border-primary;
+    }
 
-.tw-layer-select .select-body .menu-header {
-  @apply grow-0 shrink-0 w-full pb-2 text-primary border-b border-primary;
-}
+    .menu-body {
+      @apply relative grow;
 
-.tw-layer-select .select-body .menu-body {
-  @apply relative grow;
-}
+      .list .item {
+        @apply relative block py-1.5 px-2 hover:bg-primary-50 text-sm text-pgray-3 truncate;
 
-.tw-layer-select .select-body .menu-body .list .item {
-  @apply relative block py-1.5 px-2 hover:bg-primary-50 text-sm text-pgray-3 truncate;
-}
+        .highlight-dot {
+          @apply absolute top-0 left-0 w-1.5 h-1.5 mt-2 ml-1 bg-red rounded-full;
+        }
 
-.tw-layer-select .select-body .menu-body .list .item.selected {
-  @apply bg-primary-100 text-primary;
-}
+        &.selected {
+          @apply bg-primary-100 text-primary;
+        }
+      }
+    }
 
-.tw-layer-select .select-body .menu-body .list .item .highlight-dot {
-  @apply absolute top-0 left-0 w-1.5 h-1.5 mt-2 ml-1 bg-red rounded-full;
-}
+    .menu {
+      @apply grow flex flex-col text-base leading-[1.3125] overflow-hidden;
 
-.tw-layer-select .select-body-divider {
-  @apply grow-0 shrink-0 w-px h-auto mb-3 mr-2.75 ml-3 bg-pgray-4;
+      &:hover {
+        @apply grow-[1.5];
+      }
+    }
+  }
 }
 </style>

package/app/components/SLTwoLayerSingleSelect.vue

@@ -301,33 +301,33 @@ export default defineComponent({
 
 .two-layer-single-select {
   @apply relative w-full;
-}
 
-.two-layer-single-select.two-layer-single-select-sm .toggle-button {
-  @apply text-sm;
-}
+  &.two-layer-single-select-sm .toggle-button {
+    @apply text-sm;
+  }
 
-.two-layer-single-select .toggle-button {
-  @apply relative flex items-center w-full p-1.75 space-x-1.75 border border-primary-600 rounded text-base text-pgray-4;
-}
+  .tw-layer-select {
+    @apply z-10 invisible pointer-events-none;
 
-.two-layer-single-select .toggle-button.selected {
-  @apply text-pgray-2;
-}
+    &[data-show] {
+      @apply visible pointer-events-auto;
+    }
+  }
 
-.two-layer-single-select .toggle-button .button-title {
-  @apply grow;
-}
+  .toggle-button {
+    @apply relative flex items-center w-full p-1.75 space-x-1.75 border border-primary-600 rounded text-base text-pgray-4;
 
-.two-layer-single-select .toggle-button .icon {
-  @apply grow-0 shrink-0 inline-flex text-xs text-pgray-2 leading-none;
-}
+    .button-title {
+      @apply grow;
+    }
 
-.two-layer-single-select .tw-layer-select {
-  @apply z-10 invisible pointer-events-none;
-}
+    &.selected {
+      @apply text-pgray-2;
+    }
 
-.two-layer-single-select .tw-layer-select[data-show] {
-  @apply visible pointer-events-auto;
+    .icon {
+      @apply grow-0 shrink-0 inline-flex text-xs text-pgray-2 leading-none;
+    }
+  }
 }
 </style>

package/app/components/SLWarnModal.vue

@@ -69,9 +69,9 @@ export default defineComponent({
 
 .warn-modal .modal-body-content {
   @apply flex flex-col items-center space-y-6 text-base text-pgray-2;
-}
 
-.warn-modal .modal-body-content .icon {
-  @apply text-16xl;
+  .icon {
+    @apply text-16xl;
+  }
 }
 </style>

package/package.json

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