@mptw/skylens-ui 1.4.109 → 1.5.1

package/{components → app/components}/SLPagination.vue

@@ -143,50 +143,62 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.pagination
-  @apply flex items-center justify-end
+<style>
+@reference '~ui/app/assets/css/main.css';
+
+.pagination {
+  @apply flex items-center justify-end;
+}
 
-  &-info
-    @apply inline-flex items-center mr-4 s('space-x-0.5') text-base text-pgray-2
+.pagination-info {
+  @apply inline-flex items-center mr-4 space-x-0.5 text-base text-pgray-2;
+}
 
-    .custom-select
-      @apply s('min-w-[2.3125rem]')
+.pagination-info .custom-select {
+  @apply min-w-[2.3125rem];
+}
 
-      .form-control
-        label
-          @apply text-center
+.pagination-info .custom-select .form-control label {
+  @apply text-center;
+}
 
-          .icon
-            @apply hidden
+.pagination-info .custom-select .form-control label .icon {
+  @apply hidden;
+}
 
-      .select-options
-        .option-list
-          .option-button
-            @apply s('min-w-0') text-center
+.pagination-info .custom-select .select-options .option-list .option-button {
+  @apply min-w-0 text-center;
+}
 
-  &-items
-    @apply inline-flex items-center
+.pagination-items {
+  @apply inline-flex items-center;
+}
 
-  &-item + &-item
-    @apply border-l
+.pagination-item + .pagination-item {
+  @apply border-l;
+}
 
-  &-item
-    @apply inline-flex items-center justify-center s('min-w-[1.5rem]') s('min-h-[1.5rem]') p-1 border-t border-b border-primary bg-white text-xs text-primary
-    @apply s('hover:text-primary-600') s('focus:text-primary')
+.pagination-item {
+  @apply inline-flex items-center justify-center min-w-[1.5rem] min-h-[1.5rem] p-1 border-t border-b border-primary bg-white text-xs text-primary hover:text-primary-600 focus:text-primary;
+}
 
-    &--icon
-      @apply s('py-1.5')
+.pagination-item.pagination-item--icon {
+  @apply py-1.5;
+}
 
-    &:first-child
-      @apply border-l rounded-l-sm
+.pagination-item:first-child {
+  @apply border-l rounded-l-sm;
+}
 
-    &:last-child
-      @apply border-r rounded-r-sm
+.pagination-item:last-child {
+  @apply border-r rounded-r-sm;
+}
 
-    &.active
-      @apply bg-primary text-white
+.pagination-item.active {
+  @apply bg-primary text-white;
+}
 
-    &.more
-      @apply cursor-default s('hover:text-primary-600')
+.pagination-item.more {
+  @apply cursor-default hover:text-primary-600;
+}
 </style>

package/{components → app/components}/SLPillCheckbox.vue

@@ -16,7 +16,7 @@
 <script lang="ts">
 import type { PropType } from "vue";
 import { isEqual } from "lodash-es";
-import { getUID } from "~ui/utils";
+import { getUID } from "~ui/app/utils";
 
 export default defineComponent({
   name: "SLPillCheckbox",
@@ -120,7 +120,7 @@ export default defineComponent({
       } else {
         emit(
           "update:modelValue",
-          isTargetChecked ? trueValue.value : falseValue.value
+          isTargetChecked ? trueValue.value : falseValue.value,
         );
       }
     }
@@ -139,58 +139,66 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.pill-checkbox
-  @apply inline-block relative
+<style>
+@reference '~ui/app/assets/css/main.css';
 
-  &.pill-checkbox-xs
-    label
-      @apply py-px text-xs
+.pill-checkbox {
+  @apply inline-block relative;
+}
 
-  &.pill-checkbox-third-500
-    input:checked + label
-      @apply bg-third-500 border-third-500
+.pill-checkbox.pill-checkbox-xs label {
+  @apply py-px text-xs;
+}
 
-  &.pill-checkbox-third
-    input:checked + label
-      @apply bg-third border-third
+.pill-checkbox.pill-checkbox-third-500 input:checked + label {
+  @apply bg-third-500 border-third-500;
+}
 
-  &.pill-checkbox-primary
-    input:checked + label
-      @apply bg-primary border-primary
+.pill-checkbox.pill-checkbox-third input:checked + label {
+  @apply bg-third border-third;
+}
 
-  &.pill-checkbox-primary-600
-    input:checked + label
-      @apply bg-primary-600 border-primary-600
+.pill-checkbox.pill-checkbox-primary input:checked + label {
+  @apply bg-primary border-primary;
+}
 
-  &.pill-checkbox-highlight
-    input:checked + label
-      @apply bg-highlight border-highlight
+.pill-checkbox.pill-checkbox-primary-600 input:checked + label {
+  @apply bg-primary-600 border-primary-600;
+}
 
-  &.pill-checkbox-blue-1
-    input:checked + label
-      @apply bg-blue-1 border-blue-1
+.pill-checkbox.pill-checkbox-highlight input:checked + label {
+  @apply bg-highlight border-highlight;
+}
 
-  &.pill-checkbox-secondary-400
-    input:checked + label
-      @apply bg-secondary-400 border-secondary-400
+.pill-checkbox.pill-checkbox-blue-1 input:checked + label {
+  @apply bg-blue-1 border-blue-1;
+}
 
-  input
-    @apply absolute s('left-1/2') s('top-1/2') transform s('-translate-x-1/2') s('-translate-y-1/2')
+.pill-checkbox.pill-checkbox-secondary-400 input:checked + label {
+  @apply bg-secondary-400 border-secondary-400;
+}
 
-  label
-    @apply inline-flex justify-center items-center relative s('px-1.75') s('py-0.75')
-    @apply bg-white border border-primary-300 rounded-full text-sm s('leading-4.75') text-pgray-2 align-top cursor-pointer
+.pill-checkbox input {
+  @apply absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2;
+}
 
-    .icon
-      @apply hidden ml-2
+.pill-checkbox label {
+  @apply inline-flex justify-center items-center relative px-1.75 py-0.75 bg-white border border-primary-300 rounded-full text-sm leading-4.75 text-pgray-2 align-top cursor-pointer;
+}
 
-  input:checked + label
-    @apply bg-white border-white text-white font-bold
+.pill-checkbox label .icon {
+  @apply hidden ml-2;
+}
 
-    .icon
-      @apply inline-block
+.pill-checkbox input:checked + label {
+  @apply bg-white border-white text-white font-bold;
+}
 
-  input:disabled + label
-    @apply bg-white border-pgray-5 text-pgray-4 font-normal cursor-default
+.pill-checkbox input:checked + label .icon {
+  @apply inline-block;
+}
+
+.pill-checkbox input:disabled + label {
+  @apply bg-white border-pgray-5 text-pgray-4 font-normal cursor-default;
+}
 </style>

package/{components → app/components}/SLPillLabel.vue

@@ -62,44 +62,59 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.pill-label
-  @apply inline-flex justify-center items-center relative s('px-1.75') s('py-0.75')
-  @apply bg-white border border-white rounded-full text-sm s('leading-4.75') text-white font-bold align-top whitespace-nowrap
+<style>
+@reference '~ui/app/assets/css/main.css';
 
-  &.pill-label-xs
-    @apply py-px text-xs
+.pill-label {
+  @apply inline-flex justify-center items-center relative px-1.75 py-0.75;
+  @apply bg-white border border-white rounded-full text-sm leading-4.75 text-white font-bold align-top whitespace-nowrap;
+}
 
-  &.pill-label-sm
-    @apply py-px text-sm
+.pill-label.pill-label-xs {
+  @apply py-px text-xs;
+}
 
-  &.pill-label-white
-    @apply text-pgray-2
+.pill-label.pill-label-sm {
+  @apply py-px text-sm;
+}
 
-  &.pill-label-third-500
-    @apply bg-third-500 border-third-500
+.pill-label.pill-label-white {
+  @apply text-pgray-2;
+}
 
-  &.pill-label-third-600
-    @apply bg-third-600 border-third-600
+.pill-label.pill-label-third-500 {
+  @apply bg-third-500 border-third-500;
+}
 
-  &.pill-label-third
-    @apply bg-third border-third
+.pill-label.pill-label-third-600 {
+  @apply bg-third-600 border-third-600;
+}
 
-  &.pill-label-primary
-    @apply bg-primary border-primary
+.pill-label.pill-label-third {
+  @apply bg-third border-third;
+}
 
-  &.pill-label-primary-600
-    @apply bg-primary-600 border-primary-600
+.pill-label.pill-label-primary {
+  @apply bg-primary border-primary;
+}
 
-  &.pill-label-highlight
-    @apply bg-highlight border-highlight
+.pill-label.pill-label-primary-600 {
+  @apply bg-primary-600 border-primary-600;
+}
 
-  &.pill-label-blue-1
-    @apply bg-blue-1 border-blue-1
+.pill-label.pill-label-highlight {
+  @apply bg-highlight border-highlight;
+}
 
-  &.pill-label-secondary
-    @apply bg-secondary border-secondary
+.pill-label.pill-label-blue-1 {
+  @apply bg-blue-1 border-blue-1;
+}
 
-  .icon
-    @apply inline-block ml-2
+.pill-label.pill-label-secondary {
+  @apply bg-secondary border-secondary;
+}
+
+.pill-label .icon {
+  @apply inline-block ml-2;
+}
 </style>

package/{components → app/components}/SLPopupMenuButton.vue

@@ -25,7 +25,7 @@ import type { PropType } from "vue";
 import { fromEvent } from "rxjs";
 import { createPopper } from "@popperjs/core";
 import type { Options as PopperOptions } from "@popperjs/core";
-import type IPopupMenuButton from "~ui/interface/IPopupMenuButton";
+import type IPopupMenuButton from "~ui/app/interface/IPopupMenuButton";
 
 export default defineComponent({
   name: "SLPopupMenuButton",
@@ -133,26 +133,35 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.popup-menu-button
-  @apply inline-block relative
+<style>
+@reference '~ui/app/assets/css/main.css';
 
-.buttons-popup
-  @apply z-60 flex-col items-stretch border border-primary-300 rounded bg-white shadow-md hidden
+.popup-menu-button {
+  @apply inline-block relative;
+}
 
-  &[data-show]
-    @apply flex
+.buttons-popup {
+  @apply z-60 flex-col items-stretch border border-primary-300 rounded bg-white shadow-md hidden;
+}
 
-  .menu-button
-    @apply inline-flex flex-row flex-nowrap items-center justify-center px-2 py-1 space-x-2 text-base text-primary whitespace-nowrap
+.buttons-popup[data-show] {
+  @apply flex;
+}
 
-    &:first-child
-      @apply pt-2
+.buttons-popup .menu-button {
+  @apply inline-flex flex-row flex-nowrap items-center justify-center px-2 py-1 space-x-2 text-base text-primary whitespace-nowrap;
+}
 
-    &:last-child
-      @apply pb-2
+.buttons-popup .menu-button:first-child {
+  @apply pt-2;
+}
 
-  .menu-button-splitter
-    @apply h-px mx-auto my-1 bg-primary-100
-    width calc(100% - theme("spacing.4"))
+.buttons-popup .menu-button:last-child {
+  @apply pb-2;
+}
+
+.buttons-popup .menu-button-splitter {
+  @apply h-px mx-auto my-1 bg-primary-100;
+  width: calc(100% - var(--spacing) * 4);
+}
 </style>

package/{components → app/components}/SLProfileButton.vue

@@ -38,7 +38,7 @@ export default defineComponent({
     },
     gitTag: {
       type: String,
-      default: '',
+      default: "",
     },
   },
   emits: ["edit", "logout"],
@@ -174,30 +174,38 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.profile-button
-  .toggle-button
-    @apply inline-flex items-center justify-center w-7 h-7 p-0 rounded-full bg-primary-400 text-lg text-white font-bold
-    @apply s('hover:bg-primary-600') s('active:bg-primary')
+<style>
+@reference '~ui/app/assets/css/main.css';
 
-    &.active
-      @apply bg-primary
+.profile-button .toggle-button {
+  @apply inline-flex items-center justify-center w-7 h-7 p-0 rounded-full bg-primary-400 text-lg text-white font-bold hover:bg-primary-600 active:bg-primary;
+}
 
-.profile-nav-popup
-  @apply z-60 absolute s('min-w-[10.25rem]') p-4 border border-primary bg-primary-50 rounded shadow-popup-lg pointer-events-none invisible
+.profile-button .toggle-button.active {
+  @apply bg-primary;
+}
 
-  &[data-show]
-    @apply visible pointer-events-auto
+.profile-nav-popup {
+  @apply z-60 absolute min-w-[10.25rem] p-4 border border-primary bg-primary-50 rounded shadow-popup-lg pointer-events-none invisible;
+}
 
-  &-body
-    @apply flex flex-col space-y-2
+.profile-nav-popup[data-show] {
+  @apply visible pointer-events-auto;
+}
 
-  .profile-nav-item
-    @apply inline-flex items-center space-x-2 text-base text-primary-600 s('hover:text-primary')
+.profile-nav-popup-body {
+  @apply flex flex-col space-y-2;
+}
 
-  .profile-nav-divider
-    @apply w-full h-px bg-primary-600
+.profile-nav-popup .profile-nav-item {
+  @apply inline-flex items-center space-x-2 text-base text-primary-600 hover:text-primary;
+}
 
-  .app-version
-    @apply text-xs text-primary-600 text-right
+.profile-nav-popup .profile-nav-divider {
+  @apply w-full h-px bg-primary-600;
+}
+
+.profile-nav-popup .app-version {
+  @apply text-xs text-primary-600 text-right;
+}
 </style>

package/{components → app/components}/SLProjectShareItem.vue

@@ -24,7 +24,7 @@
 
 <script lang="ts">
 import type { PropType } from "vue";
-import { OrgUserRole } from "~ui/interface/IOrganization";
+import { OrgUserRole } from "~ui/app/interface/IOrganization";
 
 export default defineComponent({
   name: "SLProjectShareItem",
@@ -70,25 +70,38 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus" scoped>
-.project-share-item
-  @apply flex items-center justify-between space-x-4
+<style scoped>
+@reference '~ui/app/assets/css/main.css';
 
-  .item-info
-    @apply flex-grow text-sm text-pgray-2 truncate
+.project-share-item {
+  @apply flex items-center justify-between space-x-4;
+}
 
-  .item-actions
-    @apply flex-grow-0 flex-shrink-0
+.project-share-item .item-info {
+  @apply grow text-sm text-pgray-2 truncate;
+}
+
+.project-share-item .item-actions {
+  @apply grow-0 shrink-0;
+}
 
-    :deep(.dropdown-menu)
-      @apply border-primary-600
-      .dropdown-list-wrapper
-        .dropdown-list
-          @apply s('min-w-[74px]') divide-y divide-primary-100
+.project-share-item .item-actions :deep(.dropdown-menu) {
+  @apply border-primary-600;
+}
+
+.project-share-item
+  .item-actions
+  :deep(.dropdown-menu)
+  .dropdown-list-wrapper
+  .dropdown-list {
+  @apply min-w-[74px] divide-y divide-primary-100;
+}
 
-    :deep(.dropdown-toggle)
-      @apply s('py-0.75') border-primary-600 bg-white text-sm
+.project-share-item .item-actions :deep(.dropdown-toggle) {
+  @apply py-0.75 border-primary-600 bg-white text-sm;
+}
 
-    .dropdown-item
-      @apply text-center
+.project-share-item .item-actions .dropdown-item {
+  @apply text-center;
+}
 </style>

package/{components → app/components}/SLRadioButton.vue

@@ -18,7 +18,7 @@
 
 <script lang="ts">
 import { isEqual } from "lodash-es";
-import { getUID } from "~ui/utils";
+import { getUID } from "~ui/app/utils";
 
 export default defineComponent({
   name: "SLRadioButton",
@@ -42,7 +42,7 @@ export default defineComponent({
     },
     desc: {
       type: String,
-      default: '',
+      default: "",
     },
   },
   emits: ["update:modelValue"],
@@ -67,46 +67,54 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.radio-button
-  @apply inline-block relative text-base overflow-hidden
+<style>
+@reference '~ui/app/assets/css/main.css';
 
-  input
-    @apply absolute s('-top-10') s('-left-10')
+.radio-button {
+  @apply inline-block relative text-base overflow-hidden;
+}
 
-  label
-    @apply relative inline-flex flex-col items-start space-y-1 cursor-pointer
+.radio-button input {
+  @apply absolute -top-10 -left-10;
+}
 
-    .radio-button-wrapper
-      @apply inline-flex items-center text-base text-pgray-3
+.radio-button label {
+  @apply relative inline-flex flex-col items-start space-y-1 cursor-pointer;
+}
 
-      .icon
-        @apply hidden
+.radio-button label .radio-button-wrapper {
+  @apply inline-flex items-center text-base text-pgray-3;
+}
 
-      span
-        @apply ml-1 text-base text-pgray-2
+.radio-button label .radio-button-wrapper .icon {
+  @apply hidden;
+}
 
-    .radio-button-desc
-      @apply pl-5 text-xs text-pgray-2
+.radio-button label .radio-button-wrapper span {
+  @apply ml-1 text-base text-pgray-2;
+}
 
-  input:not(:checked) + label
-    .radio-button-wrapper
-      .icon-circle
-        @apply inline-block text-primary
+.radio-button label .radio-button-desc {
+  @apply pl-5 text-xs text-pgray-2;
+}
 
-  input:checked + label
-    .radio-button-wrapper
-      .icon-dot-circle
-        @apply inline-block text-primary
+.radio-button input:not(:checked) + label .radio-button-wrapper .icon-circle {
+  @apply inline-block text-primary;
+}
 
-  input:disabled + label
-    .radio-button-wrapper
-      span
-        @apply text-pgray-3
+.radio-button input:checked + label .radio-button-wrapper .icon-dot-circle {
+  @apply inline-block text-primary;
+}
+
+.radio-button input:disabled + label .radio-button-wrapper span {
+  @apply text-pgray-3;
+}
 
-      .icon-circle
-        @apply text-pgray-3
+.radio-button input:disabled + label .radio-button-wrapper .icon-circle {
+  @apply text-pgray-3;
+}
 
-      .icon-dot-circle
-        @apply text-pgray-3
+.radio-button input:disabled + label .radio-button-wrapper .icon-dot-circle {
+  @apply text-pgray-3;
+}
 </style>