@mptw/skylens-ui 1.5.0 → 1.5.2

package/app/components/SLTwoLayerMultiSelect.vue

@@ -113,10 +113,10 @@ export default defineComponent({
     },
     query: {
       type: String,
-      default: '',
-    }
+      default: "",
+    },
   },
-  emits: ["update:modelValue", "update:selecting", 'update:query'],
+  emits: ["update:modelValue", "update:selecting", "update:query"],
   setup(props, { emit }) {
     const { size, modelValue, options, placement, query } = toRefs(props);
 
@@ -131,9 +131,11 @@ export default defineComponent({
     let clickSubscriber: any = null;
 
     const queryProxy = computed({
-      get() { return query.value || selfQuery.value },
+      get() {
+        return query.value || selfQuery.value;
+      },
       set(newValue: string) {
-        emit('update:query', newValue);
+        emit("update:query", newValue);
         selfQuery.value = newValue;
       },
     });
@@ -185,7 +187,7 @@ export default defineComponent({
     const secondOptions = computed(() => {
       const found = filteredOptions.value.find(
         (option) =>
-          selectedFirstOption.value && option.key === selectedFirstOption.value
+          selectedFirstOption.value && option.key === selectedFirstOption.value,
       );
       return found?.subOptions || [];
     });
@@ -341,105 +343,198 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.two-layer-multi-select
-  @apply relative w-full
-
-  &.two-layer-multi-select-sm
-    .toggle-button
-      @apply text-sm
-
-  &.bordered
-    .select-menu-popup
-      @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-600 rounded text-base text-pgray-4
-
-    &.selected
-      @apply text-pgray-2
-
-    .button-title
-      @apply flex-grow
+<style>
+@reference '~ui/app/assets/css/main.css';
 
-    .icon
-      @apply flex-grow-0 flex-shrink-0 inline-flex text-xs text-pgray-2 leading-none
+.two-layer-multi-select {
+  @apply relative w-full;
+}
 
-  .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-primary-100 rounded shadow invisible pointer-events-none
+.two-layer-multi-select.two-layer-multi-select-sm .toggle-button {
+  @apply text-sm;
+}
 
-    &[data-show]
-      @apply visible pointer-events-auto
+.two-layer-multi-select.bordered .select-menu-popup {
+  @apply border-primary-600;
+}
 
-    .select-header
-      @apply flex-grow-0 flex-shrink-0 mb-3
+.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;
+}
 
-      .search-input
-        .button-group
-          @apply s('py-0.75')
+.two-layer-multi-select .toggle-button.selected {
+  @apply text-pgray-2;
+}
 
-      .text-input
-        .input-group
-          .input
-            @apply s('py-1.25')
+.two-layer-multi-select .toggle-button .button-title {
+  @apply grow;
+}
 
-            input
-              @apply text-sm
+.two-layer-multi-select .toggle-button .icon {
+  @apply grow-0 shrink-0 inline-flex text-xs text-pgray-2 leading-none;
+}
 
-    .select-body
-      @apply flex-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
-        @apply flex-grow flex flex-col text-base leading-normal overflow-hidden
-        flex 1
+.two-layer-multi-select .select-menu-popup[data-show] {
+  @apply visible pointer-events-auto;
+}
 
-        &:hover
-          flex 1.5
+.two-layer-multi-select .select-menu-popup .select-header {
+  @apply grow-0 shrink-0 mb-3;
+}
 
-        &-2
-          .menu-body
-            .list
-              .item
-                .checkbox
-                  @apply flex-grow
-
-        &-header
-          @apply flex-grow-0 flex-shrink-0 w-full pb-2 text-primary border-b border-primary
+.two-layer-multi-select
+  .select-menu-popup
+  .select-header
+  .search-input
+  .button-group {
+  @apply py-0.75;
+}
 
-        &-body
-          @apply relative flex-grow
+.two-layer-multi-select
+  .select-menu-popup
+  .select-header
+  .text-input
+  .input-group
+  .input {
+  @apply py-1.25;
+}
 
-          .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-pgray-3
-              @apply s('hover:bg-primary-100')
+.two-layer-multi-select
+  .select-menu-popup
+  .select-header
+  .text-input
+  .input-group
+  .input
+  input {
+  @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;
+}
 
-              &.checked
-                @apply text-primary
+.two-layer-multi-select
+  .select-menu-popup
+  .select-body
+  .menu-2
+  .menu-body
+  .list
+  .item
+  .checkbox {
+  @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;
+}
 
-                .checkbox
-                  input:checked + label
-                    span
-                      @apply text-primary
+.two-layer-multi-select
+  .select-menu-popup
+  .select-body
+  .menu-body
+  .list
+  .item.checked {
+  @apply text-primary;
+}
 
-              &.selected
-                @apply bg-primary-100
+.two-layer-multi-select
+  .select-menu-popup
+  .select-body
+  .menu-body
+  .list
+  .item.checked
+  .checkbox
+  input:checked
+  + label
+  span {
+  @apply text-primary;
+}
 
-              .checkbox
-                @apply flex-grow-0 flex-shrink-0 inline-flex
+.two-layer-multi-select
+  .select-menu-popup
+  .select-body
+  .menu-body
+  .list
+  .item.selected {
+  @apply bg-primary-100;
+}
 
-                label
-                  @apply flex-grow flex-nowrap flex items-center
+.two-layer-multi-select
+  .select-menu-popup
+  .select-body
+  .menu-body
+  .list
+  .item
+  .checkbox {
+  @apply grow-0 shrink-0 inline-flex;
+}
 
-                  .icon
-                    @apply flex-grow-0 flex-shrink-0
+.two-layer-multi-select
+  .select-menu-popup
+  .select-body
+  .menu-body
+  .list
+  .item
+  .checkbox
+  label {
+  @apply grow flex-nowrap flex items-center;
+}
 
-                  span
-                    @apply flex-grow block truncate
+.two-layer-multi-select
+  .select-menu-popup
+  .select-body
+  .menu-body
+  .list
+  .item
+  .checkbox
+  label
+  .icon {
+  @apply grow-0 shrink-0;
+}
 
-              &-name
-                @apply flex-grow block truncate
+.two-layer-multi-select
+  .select-menu-popup
+  .select-body
+  .menu-body
+  .list
+  .item
+  .checkbox
+  label
+  span {
+  @apply grow block truncate;
+}
 
-      &-divider
-        @apply flex-grow-0 flex-shrink-0 w-px h-auto mb-3 s("mr-2.75") ml-3 bg-pgray-4
+.two-layer-multi-select
+  .select-menu-popup
+  .select-body
+  .menu-body
+  .list
+  .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

@@ -138,10 +138,10 @@ export default defineComponent({
 
       const { firstLayer, secondLayer } = modelValue.value;
       const firstLayerIndex = firstLayers.value.findIndex(
-        (l) => l.key === firstLayer
+        (l) => l.key === firstLayer,
       );
       const secondLayerKey = secondLayers.value.findIndex(
-        (l) => l.key === secondLayer
+        (l) => l.key === secondLayer,
       );
       const firstLayerItems = leftMenuEl.value?.querySelectorAll(".item");
       const secondLayerItems = rightMenuEl.value?.querySelectorAll(".item");
@@ -214,52 +214,62 @@ export default defineComponent({
 });
 </script>
 
-<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-primary-100 rounded shadow
-  width 552px
+<style>
+@reference '~ui/app/assets/css/main.css';
 
-  .select-header
-    @apply flex-grow-0 flex-shrink-0 mb-3
+.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;
+}
 
-    .search-input
-      .button-group
-        @apply s('py-0.75')
+.tw-layer-select .select-header {
+  @apply grow-0 shrink-0 mb-3;
+}
 
-    .text-input
-      .input-group
-        .input
-          @apply s('py-1.25')
+.tw-layer-select .select-header .search-input .button-group {
+  @apply py-0.75;
+}
 
-          input
-            @apply text-sm
+.tw-layer-select .select-header .text-input .input-group .input {
+  @apply py-1.25;
+}
 
-  .select-body
-    @apply flex-grow flex overflow-hidden
+.tw-layer-select .select-header .text-input .input-group .input input {
+  @apply text-sm;
+}
 
-    .menu
-      @apply flex-grow flex flex-col text-base leading-normal overflow-hidden
-      flex 1
+.tw-layer-select .select-body {
+  @apply grow flex overflow-hidden;
+}
 
-      &:hover
-        flex 1.5
+.tw-layer-select .select-body .menu {
+  @apply grow flex flex-col text-base leading-[1.3125] overflow-hidden;
+}
 
-      &-header
-        @apply flex-grow-0 flex-shrink-0 w-full pb-2 text-primary border-b border-primary
+.tw-layer-select .select-body .menu:hover {
+  @apply grow-[1.5];
+}
 
-      &-body
-        @apply relative flex-grow
+.tw-layer-select .select-body .menu-header {
+  @apply grow-0 shrink-0 w-full pb-2 text-primary border-b border-primary;
+}
 
-        .list
-          .item
-            @apply relative block s('py-1.5') px-2 s("hover:bg-primary-50") text-sm text-pgray-3 truncate
+.tw-layer-select .select-body .menu-body {
+  @apply relative grow;
+}
+
+.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;
+}
 
-            &.selected
-              @apply bg-primary-100 text-primary
+.tw-layer-select .select-body .menu-body .list .item.selected {
+  @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
+.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;
+}
 
-    &-divider
-      @apply flex-grow-0 flex-shrink-0 w-px h-auto mb-3 s("mr-2.75") ml-3 bg-pgray-4
+.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;
+}
 </style>

package/app/components/SLTwoLayerSingleSelect.vue

@@ -30,7 +30,7 @@ import type { PropType } from "vue";
 import { fromEvent } from "rxjs";
 import { createPopper } from "@popperjs/core";
 import type { Placement } from "@popperjs/core";
-import { SLTwoLayerSelect } from '#components';
+import { SLTwoLayerSelect } from "#components";
 
 type SLTwoLayerSelectType = InstanceType<typeof SLTwoLayerSelect>;
 
@@ -82,10 +82,10 @@ export default defineComponent({
     },
     query: {
       type: String,
-      default: '',
-    }
+      default: "",
+    },
   },
-  emits: ["update:modelValue", "update:selecting", 'update:query'],
+  emits: ["update:modelValue", "update:selecting", "update:query"],
   setup(props, { emit }) {
     const { size, options, placement, query } = toRefs(props);
 
@@ -100,9 +100,11 @@ export default defineComponent({
     let clickSubscriber: any = null;
 
     const queryProxy = computed({
-      get() { return selfQuery.value },
+      get() {
+        return selfQuery.value;
+      },
       set(newValue: string) {
-        emit('update:query', newValue);
+        emit("update:query", newValue);
         selfQuery.value = newValue;
       },
     });
@@ -130,12 +132,12 @@ export default defineComponent({
         .filter((option) => option.subOptions.length > 0);
     });
     const firstOptions = computed(() => {
-      return filteredOptions.value
+      return filteredOptions.value;
     });
     const secondOptions = computed(() => {
       const found = filteredOptions.value.find(
         (option) =>
-          selectedFirstOption.value && option.key === selectedFirstOption.value
+          selectedFirstOption.value && option.key === selectedFirstOption.value,
       );
       return found?.subOptions || [];
     });
@@ -148,10 +150,12 @@ export default defineComponent({
       selectedFirstOption.value = key;
     }
 
-    function onInputedSecondOption(newValue: {
-      firstLayer: string;
-      secondLayer: string;
-    } | null) {
+    function onInputedSecondOption(
+      newValue: {
+        firstLayer: string;
+        secondLayer: string;
+      } | null,
+    ) {
       emit("update:modelValue", newValue);
     }
 
@@ -208,7 +212,10 @@ export default defineComponent({
         body.classList.remove("popup");
       }
 
-      if (!popupComp.value?.$el || popupComp.value?.$el.getAttribute("data-show") === null)
+      if (
+        !popupComp.value?.$el ||
+        popupComp.value?.$el.getAttribute("data-show") === null
+      )
         return;
 
       isSelecting.value = false;
@@ -226,7 +233,10 @@ export default defineComponent({
     }
 
     function onClickedToggle() {
-      if (!popupComp.value?.$el || popupComp.value?.$el.getAttribute("data-show") !== null) {
+      if (
+        !popupComp.value?.$el ||
+        popupComp.value?.$el.getAttribute("data-show") !== null
+      ) {
         hide();
         return;
       }
@@ -235,7 +245,7 @@ export default defineComponent({
     }
 
     function onSearch(search: string) {
-      console.log("search", search === '');
+      console.log("search", search === "");
       queryProxy.value = search;
     }
 
@@ -286,29 +296,38 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.two-layer-single-select
-  @apply relative w-full
+<style>
+@reference '~ui/app/assets/css/main.css';
+
+.two-layer-single-select {
+  @apply relative w-full;
+}
 
-  &.two-layer-single-select-sm
-    .toggle-button
-      @apply text-sm
+.two-layer-single-select.two-layer-single-select-sm .toggle-button {
+  @apply text-sm;
+}
 
-  .toggle-button
-    @apply relative flex items-center w-full s('p-1.75') s('space-x-1.75') border border-primary-600 rounded text-base text-pgray-4
+.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;
+}
 
-    &.selected
-      @apply text-pgray-2
+.two-layer-single-select .toggle-button.selected {
+  @apply text-pgray-2;
+}
 
-    .button-title
-      @apply flex-grow
+.two-layer-single-select .toggle-button .button-title {
+  @apply grow;
+}
 
-    .icon
-      @apply flex-grow-0 flex-shrink-0 inline-flex text-xs text-pgray-2 leading-none
+.two-layer-single-select .toggle-button .icon {
+  @apply grow-0 shrink-0 inline-flex text-xs text-pgray-2 leading-none;
+}
 
-  .tw-layer-select
-    @apply z-10 invisible pointer-events-none
+.two-layer-single-select .tw-layer-select {
+  @apply z-10 invisible pointer-events-none;
+}
 
-    &[data-show]
-      @apply visible pointer-events-auto
+.two-layer-single-select .tw-layer-select[data-show] {
+  @apply visible pointer-events-auto;
+}
 </style>

package/app/components/SLWarnModal.vue

@@ -64,12 +64,14 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.warn-modal
-  .modal-body
-    &-content
-      @apply flex flex-col items-center space-y-6 text-base text-pgray-2
+<style>
+@reference '~ui/app/assets/css/main.css';
 
-      .icon
-        @apply text-16xl
+.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;
+}
 </style>

package/app/interface/commons.ts

@@ -0,0 +1,7 @@
+export enum ScreenSize {
+  md = "md",
+  lg = "lg",
+  xl = "xl",
+  "1.5xl" = "1.5xl",
+  "2xl" = "2xl",
+}