@mptw/skylens-ui 1.5.0 → 1.5.1

package/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/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/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/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>

package/app/components/SLRadioButtonGroup.vue

@@ -19,7 +19,7 @@
 
 <script lang="ts">
 import type { PropType } from "vue";
-import type IInputOption from "~ui/interface/IInputOption";
+import type IInputOption from "~ui/app/interface/IInputOption";
 
 export default defineComponent({
   name: "SLRadioButtonGroup",
@@ -82,33 +82,38 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.radio-button-group
-  .is-invalid
-    .invalid-feedback
-      @apply block
+<style>
+@reference '~ui/app/assets/css/main.css';
+
+.radio-button-group .is-invalid .invalid-feedback {
+  @apply block;
+}
 
-  & > label
-    @apply mb-2 text-base text-pgray-2 align-top
+.radio-button-group > label {
+  @apply mb-2 text-base text-pgray-2 align-top;
+}
 
-  .form-control
-    @apply flex flex-col space-y-1
+.radio-button-group .form-control {
+  @apply flex flex-col space-y-1;
+}
 
-    &.inline
-      @apply flex flex-row flex-wrap space-x-6 space-y-0
+.radio-button-group .form-control.inline {
+  @apply flex flex-row flex-wrap space-x-6 space-y-0;
+}
 
-  .invalid-feedback
-    @apply hidden text-danger text-xs
+.radio-button-group .invalid-feedback {
+  @apply hidden text-danger text-xs;
+}
 
-  &--lg
-    .form-control
-      &.inline
-        @apply space-x-8
+.radio-button-group--lg .form-control.inline {
+  @apply space-x-8;
+}
 
-      .radio-button
-        label
-          @apply text-sm
+.radio-button-group--lg .form-control .radio-button label {
+  @apply text-sm;
+}
 
-          span
-            @apply ml-2 text-sm
+.radio-button-group--lg .form-control .radio-button label span {
+  @apply ml-2 text-sm;
+}
 </style>

package/app/components/SLRadioGroup.vue

@@ -16,8 +16,8 @@ SLElementWithTitle(:title='disabled ? disabledHint : ""')
 
 <script lang="ts">
 import type { PropType } from "vue";
-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";
 
 export default defineComponent({
   name: "SLRadioGroup",
@@ -104,106 +104,118 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.radio-group
-  @apply inline-flex s('p-0.5') bg-primary-100 border border-primary-200 rounded
+<style>
+@reference '~ui/app/assets/css/main.css';
 
-  &.radio-group--sm
-    .radio
-      label
-        @apply px-2 s('py-1.5')
+.radio-group {
+  @apply inline-flex p-0.5 bg-primary-100 border border-primary-200 rounded;
+}
 
-  &.radio-group--xs
-    .radio
-      label
-        @apply px-4 s('py-0.5') text-sm
+.radio-group.radio-group--sm .radio label {
+  @apply px-2 py-1.5;
+}
 
-  &.radio-group--xxs
-    @apply s('p-0.75')
+.radio-group.radio-group--xs .radio label {
+  @apply px-4 py-0.5 text-sm;
+}
 
-    .radio
-      label
-        @apply px-2 s('py-0.75') text-sm
+.radio-group.radio-group--xxs {
+  @apply p-0.75;
+}
 
-  &.radio-group--3xs
-    @apply s('p-0.75')
+.radio-group.radio-group--xxs .radio label {
+  @apply px-2 py-0.75 text-sm;
+}
 
-    .radio
-      label
-        @apply px-2 py-px text-sm
+.radio-group.radio-group--3xs {
+  @apply p-0.75;
+}
 
-  &.radio-group--third-600
-    @apply bg-third-600 border-third-500
+.radio-group.radio-group--3xs .radio label {
+  @apply px-2 py-px text-sm;
+}
 
-    .radio
-      label
-        @apply bg-third-600 text-white
+.radio-group.radio-group--third-600 {
+  @apply bg-third-600 border-third-500;
+}
 
-      input:checked + .element-with-title
-        label
-          @apply text-third
+.radio-group.radio-group--third-600 .radio label {
+  @apply bg-third-600 text-white;
+}
 
-  &.radio-group--edit
-    @apply bg-edit border-primary
+.radio-group.radio-group--third-600 .radio input:checked + .element-with-title label {
+  @apply text-third;
+}
 
-    &.color-invert
-      @apply bg-card-lightpr-bg border-primary-300
+.radio-group.radio-group--edit {
+  @apply bg-edit border-primary;
+}
 
-      .radio
-        label
-          @apply bg-card-lightpr-bg text-primary-600
+.radio-group.radio-group--edit.color-invert {
+  @apply bg-card-lightpr-bg border-primary-300;
+}
 
-        input:checked + .element-with-title
-          label
-            @apply bg-edit text-white
+.radio-group.radio-group--edit.color-invert .radio label {
+  @apply bg-card-lightpr-bg text-primary-600;
+}
 
-    .radio
-      label
-        @apply bg-edit text-white
+.radio-group.radio-group--edit.color-invert .radio input:checked + .element-with-title label {
+  @apply bg-edit text-white;
+}
 
-      input:checked + .element-with-title
-        label
-          @apply text-primary
+.radio-group.radio-group--edit .radio label {
+  @apply bg-edit text-white;
+}
 
-  &.radio-group--insight-title
-    @apply bg-primary-100 border-primary-100
+.radio-group.radio-group--edit .radio input:checked + .element-with-title label {
+  @apply text-primary;
+}
 
-    &.color-invert
-      @apply bg-card-lightpr-bg border-primary-300
+.radio-group.radio-group--insight-title {
+  @apply bg-primary-100 border-primary-100;
+}
 
-      .radio
-        label
-          @apply bg-card-lightpr-bg text-primary-600
+.radio-group.radio-group--insight-title.color-invert {
+  @apply bg-card-lightpr-bg border-primary-300;
+}
 
-        input:checked + .element-with-title
-          label
-            @apply bg-edit text-white
+.radio-group.radio-group--insight-title.color-invert .radio label {
+  @apply bg-card-lightpr-bg text-primary-600;
+}
 
-    .radio
-      label
-        @apply bg-primary-100 text-primary
+.radio-group.radio-group--insight-title.color-invert .radio input:checked + .element-with-title label {
+  @apply bg-edit text-white;
+}
 
-      input:checked + .element-with-title
-        label
-          @apply bg-insight-title text-white
+.radio-group.radio-group--insight-title .radio label {
+  @apply bg-primary-100 text-primary;
+}
 
-  &.disabled
-    @apply bg-pgray-6 border-pgray-6
+.radio-group.radio-group--insight-title .radio input:checked + .element-with-title label {
+  @apply bg-insight-title text-white;
+}
 
-  .radio
-    @apply relative inline-flex
+.radio-group.disabled {
+  @apply bg-pgray-6 border-pgray-6;
+}
 
-    input
-      @apply absolute s('left-1/2') s('top-1/2') transform s('-translate-x-1/2') s('-translate-y-1/2')
+.radio-group .radio {
+  @apply relative inline-flex;
+}
 
-    label
-      @apply inline-flex justify-center items-center relative px-3 s('py-1.25') bg-primary-100 rounded text-base leading-normal text-primary-600 cursor-pointer transition
+.radio-group .radio input {
+  @apply absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2;
+}
 
-    input:checked + .element-with-title
-      label
-        @apply bg-white text-primary shadow
+.radio-group .radio label {
+  @apply inline-flex justify-center items-center relative px-3 py-1.25 bg-primary-100 rounded text-base leading-[1.3125] text-primary-600 cursor-pointer transition;
+}
 
-    input:disabled + .element-with-title
-      label
-        @apply bg-pgray-6 text-pgray-4 cursor-default
-</style>  
+.radio-group .radio input:checked + .element-with-title label {
+  @apply bg-white text-primary shadow-default;
+}
+
+.radio-group .radio input:disabled + .element-with-title label {
+  @apply bg-pgray-6 text-pgray-4 cursor-default;
+}
+</style>

package/app/components/SLRangeInput.vue

@@ -163,47 +163,62 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.range-input
-  &.inline
-    @apply flex
+<style>
+@reference '~ui/app/assets/css/main.css';
 
-    & > label
-      @apply flex-grow-0 flex-shrink-0 mb-0 mr-2 py-2 border-t border-b border-transparent
+.range-input.inline {
+  @apply flex;
+}
 
-    .form-control
-      @apply flex-grow
-
-  &.disabled, &.readonly
-    .input-group
-      .input-range-group
-        .range-input-accept-values
-          @apply text-pgray-4
-
-      input[type=text]
-        @apply border-primary-600 bg-primary-100
-
-  & > label
-    @apply mb-2 text-base leading-normal text-pgray-2
-
-  .is-invalid
-    .invalid-feedback
-      @apply block
+.range-input.inline > label {
+  @apply grow-0 shrink-0 mb-0 mr-2 py-2 border-t border-b border-transparent;
+}
 
+.range-input.inline .form-control {
+  @apply grow;
+}
 
+.range-input.disabled
   .input-group
-    @apply flex flex-nowrap text-base leading-normal space-x-4
-
-    .input-range-group
-      @apply flex-grow
-
-      .range-input-accept-values
-        @apply flex justify-between mb-1 text-sm text-pgray-3
-
-    input[type=text]
-      @apply flex-grow-0 flex-shrink-0 w-11 bg-white border border-primary-600 rounded text-base text-center text-pgray-2
-      @apply s('focus:outline-none')
-
-  .invalid-feedback
-    @apply hidden text-danger text-xs
+  .input-range-group
+  .range-input-accept-values,
+.range-input.readonly
+  .input-group
+  .input-range-group
+  .range-input-accept-values {
+  @apply text-pgray-4;
+}
+
+.range-input.disabled .input-group input[type="text"],
+.range-input.readonly .input-group input[type="text"] {
+  @apply border-primary-600 bg-primary-100;
+}
+
+.range-input > label {
+  @apply mb-2 text-base leading-[1.3125] text-pgray-2;
+}
+
+.range-input .is-invalid .invalid-feedback {
+  @apply block;
+}
+
+.range-input .input-group {
+  @apply flex flex-nowrap text-base leading-[1.3125] space-x-4;
+}
+
+.range-input .input-group .input-range-group {
+  @apply grow;
+}
+
+.range-input .input-group .input-range-group .range-input-accept-values {
+  @apply flex justify-between mb-1 text-sm text-pgray-3;
+}
+
+.range-input .input-group input[type="text"] {
+  @apply grow-0 shrink-0 w-11 bg-white border border-primary-600 rounded text-base text-center text-pgray-2 focus:outline-none;
+}
+
+.range-input .invalid-feedback {
+  @apply hidden text-danger text-xs;
+}
 </style>