@mptw/skylens-ui 1.5.0 → 1.5.1

package/app/components/SLMultiEmailInput.vue

@@ -112,7 +112,7 @@ import Swiper from "swiper";
 import { FreeMode, Scrollbar, Mousewheel } from "swiper/modules";
 import "swiper/css";
 import "swiper/css/scrollbar";
-import { OrgUserRole } from "~ui/interface/IOrganization";
+import { OrgUserRole } from "~ui/app/interface/IOrganization";
 
 export default defineComponent({
   name: "SLMultiEmailInput",
@@ -445,13 +445,13 @@ export default defineComponent({
           case "ArrowDown":
             focusedAutoCompleteIndex.value = Math.min(
               autoCompletedMembers.value.length - 1,
-              focusedAutoCompleteIndex.value + 1
+              focusedAutoCompleteIndex.value + 1,
             );
             break;
           case "ArrowUp":
             focusedAutoCompleteIndex.value = Math.max(
               -1,
-              focusedAutoCompleteIndex.value - 1
+              focusedAutoCompleteIndex.value - 1,
             );
             break;
           default:
@@ -526,7 +526,7 @@ export default defineComponent({
             itemBottom - scrollBotttom + scrollTop,
             300,
             false,
-            false
+            false,
           );
         }
       });
@@ -564,7 +564,7 @@ export default defineComponent({
       setupPopper();
 
       keydownSubscription = fromEvent(window, "keydown").subscribe(
-        onWindowKeydown
+        onWindowKeydown,
       );
     });
 
@@ -605,115 +605,165 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus" scoped>
-.multi-email-input
-  @apply flex flex-col
-
-  &.collapsable
-    .multi-email-input-header
-      @apply cursor-pointer
-
-      .right-block
-        @apply flex
-
-  &.collapsed
-    .multi-email-input-header
-      .right-block
-        .icon
-          @apply rotate-0
-
-  &-header
-    @apply flex items-center justify-between mb-2 cursor-default
-
-    .left-block
-      @apply flex-grow-0 flex-shrink-0 flex items-center text-base text-pgray-2
-
-    .right-block
-      @apply flex-grow-0 flex-shrink-0 text-xs hidden
-      .icon
-        @apply transition-transform rotate-180
-
-  &-body
-
-    &-wrapper
-      @apply flex items-start space-x-4
-
-    .emails-input
-      @apply flex-grow flex items-center s('p-1.75') space-x-4 bg-white border border-primary-500 rounded overflow-hidden
-
-      &-wrapper
-        @apply flex-grow space-y-2 overflow-hidden
-
-      .emails-list
-        @apply s('max-h-[97px]')
-
-        &-wrapper
-          @apply flex flex-col items-start space-y-2 overflow-hidden
-
-          .email-item
-            @apply inline-flex items-center justify-start max-w-full s('px-1.75') s('py-0.5') space-x-2 bg-white border border-primary-300 rounded-full text-base text-pgray-2
-
-            &-email
-              @apply flex-grow truncate
+<style scoped>
+@reference '~ui/app/assets/css/main.css';
+
+.multi-email-input {
+  @apply flex flex-col;
+}
+
+.multi-email-input.collapsable .multi-email-input-header {
+  @apply cursor-pointer;
+}
+
+.multi-email-input.collapsable .multi-email-input-header .right-block {
+  @apply flex;
+}
+
+.multi-email-input.collapsed .multi-email-input-header .right-block .icon {
+  @apply rotate-0;
+}
+
+.multi-email-input-header {
+  @apply flex items-center justify-between mb-2 cursor-default;
+}
+
+.multi-email-input-header .left-block {
+  @apply grow-0 shrink-0 flex items-center text-base text-pgray-2;
+}
+
+.multi-email-input-header .right-block {
+  @apply grow-0 shrink-0 text-xs hidden;
+}
+
+.multi-email-input-header .right-block .icon {
+  @apply transition-transform rotate-180;
+}
+
+.multi-email-input-body-wrapper {
+  @apply flex items-start space-x-4;
+}
+
+.multi-email-input-body .emails-input {
+  @apply grow flex items-center p-1.75 space-x-4 bg-white border border-primary-500 rounded overflow-hidden;
+}
+
+.multi-email-input-body .emails-input-wrapper {
+  @apply grow space-y-2 overflow-hidden;
+}
+
+.multi-email-input-body .emails-input .emails-list {
+  @apply max-h-[97px];
+}
+
+.multi-email-input-body .emails-input .emails-list-wrapper {
+  @apply flex flex-col items-start space-y-2 overflow-hidden;
+}
+
+.multi-email-input-body .emails-input .emails-list-wrapper .email-item {
+  @apply inline-flex items-center justify-start max-w-full px-1.75 py-0.5 space-x-2 bg-white border border-primary-300 rounded-full text-base text-pgray-2;
+}
+
+.multi-email-input-body .emails-input .emails-list-wrapper .email-item-email {
+  @apply grow truncate;
+}
+
+.multi-email-input-body .emails-input .emails-list-wrapper .email-item-status {
+  @apply grow-0 shrink-0;
+}
+
+.multi-email-input-body
+  .emails-input
+  .emails-list-wrapper
+  .email-item-status
+  .icon-loading {
+  @apply text-third-500;
+}
+
+.multi-email-input-body
+  .emails-input
+  .emails-list-wrapper
+  .email-item-status
+  .icon-success {
+  @apply text-highlight-500;
+}
+
+.multi-email-input-body
+  .emails-input
+  .emails-list-wrapper
+  .email-item-status
+  .icon-warn {
+  @apply text-danger;
+}
+
+.multi-email-input-body
+  .emails-input
+  .emails-list-wrapper
+  .email-item-delete-button {
+  @apply text-xs;
+}
+
+.multi-email-input-body .emails-input textarea {
+  @apply grow-0 shrink-0 block w-full p-0 border-0 bg-white text-sm text-pgray-2 resize-none focus:outline-none;
+}
+
+.multi-email-input-body .multi-email-input-role {
+  @apply grow-0 shrink-0 flex;
+}
+
+.multi-email-input-body .multi-email-input-role :deep(.dropdown-toggle) {
+  @apply text-sm;
+}
+
+.multi-email-input .multi-email-input-actions {
+  @apply grow-0 shrink-0;
+}
+
+.multi-email-input .multi-email-input-actions .btn {
+  @apply text-sm;
+}
+
+.multi-email-input-autocomplete {
+  @apply z-50 max-h-[116px] p-1 bg-white rounded shadow-default hidden;
+}
+
+.multi-email-input-autocomplete[data-show] {
+  @apply flex;
+}
+
+.multi-email-input-autocomplete .swiper {
+  @apply w-full;
+}
+
+.multi-email-input-autocomplete .swiper-slide {
+  @apply h-auto;
+}
+
+.multi-email-input-autocomplete .swiper-scrollbar {
+  @apply top-0 right-0 h-full bg-transparent;
+}
+
+.multi-email-input-autocomplete :deep(.swiper-scrollbar-drag) {
+  @apply bg-primary-300;
+}
+
+.multi-email-input-autocomplete .autotcomplete-item {
+  @apply block w-full py-1 px-2 bg-white text-sm text-pgray-2;
+}
+
+.multi-email-input-autocomplete .autotcomplete-item:hover,
+.multi-email-input-autocomplete .autotcomplete-item.focused {
+  @apply bg-primary-100;
+}
+
+.dropdown-menu.multi-email-input-role-dropdown-menu {
+  @apply border-primary;
+}
 
-            &-status
-              @apply flex-grow-0 flex-shrink-0
-
-              .icon-loading
-                @apply text-third-500
-
-              .icon-success
-                @apply text-highlight-500
-
-              .icon-warn
-                @apply text-danger
-
-            &-delete-button
-              @apply text-xs
-
-      textarea
-        @apply flex-grow-0 flex-shrink-0 block w-full p-0 border-0 bg-white text-sm text-pgray-2 resize-none s('focus:outline-none')
-
-    .multi-email-input-role
-      @apply flex-grow-0 flex-shrink-0 flex
-
-      :deep(.dropdown-toggle)
-        @apply text-sm
-
-  .multi-email-input-actions
-    @apply flex-grow-0 flex-shrink-0
-
-    .btn
-      @apply text-sm
-
-.multi-email-input-autocomplete
-  @apply z-50 s('max-h-[116px]') p-1 bg-white rounded shadow hidden
-
-  &[data-show]
-    @apply flex
-
-  .swiper
-    @apply w-full
-
-  .swiper-slide
-    @apply h-auto
-  .swiper-scrollbar
-    @apply top-0 right-0 h-full bg-transparent
-
-  :deep(.swiper-scrollbar-drag)
-    @apply bg-primary-300
-  .autotcomplete-item
-    @apply block w-full py-1 px-2 bg-white text-sm text-pgray-2
-    &:hover, &.focused
-      @apply bg-primary-100
-</style>
-
-<style lang="stylus">
 .dropdown-menu.multi-email-input-role-dropdown-menu
-  @apply border-primary
-
   .dropdown-list-wrapper
-    .dropdown-list
-      .dropdown-item
-        @apply text-center
+  .dropdown-list
+  .dropdown-item {
+  @apply text-center;
+}
 </style>

package/app/components/SLMultiSelect.vue

@@ -16,7 +16,7 @@
 <script lang="ts">
 import type { PropType } from "vue";
 import { isEqual } from "lodash-es";
-import type IInputOption from "~ui/interface/IInputOption";
+import type IInputOption from "~ui/app/interface/IInputOption";
 
 export default defineComponent({
   name: "SLMultiSelect",
@@ -62,7 +62,7 @@ export default defineComponent({
       if (found) {
         emit(
           "update:modelValue",
-          modelValue.value.filter((v) => !isEqual(v, optionValue))
+          modelValue.value.filter((v) => !isEqual(v, optionValue)),
         );
         return;
       }
@@ -85,37 +85,48 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.custom-multi-select
-  @apply px-3 py-1 border border-primary-500 rounded
+<style>
+@reference '~ui/app/assets/css/main.css';
+
+.custom-multi-select {
+  @apply px-3 py-1 border border-primary-500 rounded;
+}
 
-  .options-wrapper
-    @apply relative overflow-auto
+.custom-multi-select .options-wrapper {
+  @apply relative overflow-auto;
+}
 
-  .options
-    @apply flex flex-col
+.custom-multi-select .options {
+  @apply flex flex-col;
+}
 
-    .option-button
-      @apply flex justify-between items-center px-2 py-1 bg-white shadow-inline s("hover:bg-primary-25")
+.custom-multi-select .options .option-button {
+  @apply flex justify-between items-center px-2 py-1 bg-white shadow-inline hover:bg-primary-25;
+}
 
-      &:hover
-        .btn
-          @apply opacity-100
+.custom-multi-select .options .option-button:hover .btn {
+  @apply opacity-100;
+}
 
-      &.selected
-        .option-label
-          @apply text-primary font-bold
+.custom-multi-select .options .option-button.selected .option-label {
+  @apply text-primary font-bold;
+}
 
-        .btn
-          @apply bg-primary-600 opacity-100
+.custom-multi-select .options .option-button.selected .btn {
+  @apply bg-primary-600 opacity-100;
+}
 
-        &:hover, &:active, &:focus
-          .btn
-            @apply bg-primary
+.custom-multi-select .options .option-button.selected:hover .btn,
+.custom-multi-select .options .option-button.selected:active .btn,
+.custom-multi-select .options .option-button.selected:focus .btn {
+  @apply bg-primary;
+}
 
-      .option-label
-        @apply flex-grow inline-block text-base leading-normal text-pgray-2 truncate
+.custom-multi-select .options .option-button .option-label {
+  @apply grow inline-block text-base leading-[1.3125] text-pgray-2 truncate;
+}
 
-      .btn
-        @apply flex-grow-0 flex-shrink-0 inline-block px-2 py-1 bg-primary rounded text-base leading-normal text-white opacity-0
+.custom-multi-select .options .option-button .btn {
+  @apply grow-0 shrink-0 inline-block px-2 py-1 bg-primary rounded text-base leading-[1.3125] text-white opacity-0;
+}
 </style>

package/app/components/SLNoData.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 .no-data(:class='{ "no-data--sm": size === "sm" }')
-  img(src="images/commons/empty-box.png")
+  img(src="~ui/app/assets/images/commons/empty-box.png")
   .no-data-title {{ title }}
   .no-data-reason(v-if='reason') 可能的原因：{{ reason }}
 </template>
@@ -27,17 +27,22 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus" scoped>
-.no-data
-  @apply flex flex-col items-center w-full py-8 px-4 space-y-3 bg-white rounded-lg
+<style scoped>
+@reference '~ui/app/assets/css/main.css';
 
-  &--sm
-    .no-data-title
-      @apply text-sm
+.no-data {
+  @apply flex flex-col items-center w-full py-8 px-4 space-y-3 bg-white rounded-lg;
+}
 
-  &-title
-    @apply text-lg text-primary-500
+.no-data--sm .no-data-title {
+  @apply text-sm;
+}
 
-  &-reason
-    @apply text-sm text-pgray-3
+.no-data-title {
+  @apply text-lg text-primary-500;
+}
+
+.no-data-reason {
+  @apply text-sm text-pgray-3;
+}
 </style>