@mptw/skylens-ui 1.5.0 → 1.5.1

package/app/components/SLNotification.vue

@@ -12,140 +12,144 @@
     .notification(v-if='isShow')
       .notification-wrapper {{ content }}
   </template>
-  
-  <script lang="ts">
-  import gsap from 'gsap';
-  
-  export default defineComponent({
-    name: 'SLNotification',
-    props: {
-      isShow: {
-        type: Boolean,
-        default: false,
-      },
-      content: {
-        type: String,
-        default: '',
-      },
+
+<script lang="ts">
+import gsap from "gsap";
+
+export default defineComponent({
+  name: "SLNotification",
+  props: {
+    isShow: {
+      type: Boolean,
+      default: false,
     },
-    emits: ['update:isShow'],
-    setup(props, { emit }) {
-      const { isShow } = toRefs(props);
-  
-      let timeoutId: any = null;
-  
-      function onBeforeEnter(el: Element) {
-        const wrapperEl = el.querySelector('.notification-wrapper');
-  
-        if (wrapperEl) {
-          gsap.set(wrapperEl, {
-            alpha: 0
-          });
-        }
+    content: {
+      type: String,
+      default: "",
+    },
+  },
+  emits: ["update:isShow"],
+  setup(props, { emit }) {
+    const { isShow } = toRefs(props);
+
+    let timeoutId: any = null;
+
+    function onBeforeEnter(el: Element) {
+      const wrapperEl = el.querySelector(".notification-wrapper");
+
+      if (wrapperEl) {
+        gsap.set(wrapperEl, {
+          alpha: 0,
+        });
       }
-  
-      function onEnter(el: Element, done: () => void) {
-        const wrapperEl = el.querySelector('.notification-wrapper');
-  
-        if (wrapperEl) {
-          gsap.to(wrapperEl, {
-            alpha: 1,
-            duration: 0.3,
-            onComplete: () => {
-              done();
-            }
-          })
-        } else {
-          done();
-        }
+    }
+
+    function onEnter(el: Element, done: () => void) {
+      const wrapperEl = el.querySelector(".notification-wrapper");
+
+      if (wrapperEl) {
+        gsap.to(wrapperEl, {
+          alpha: 1,
+          duration: 0.3,
+          onComplete: () => {
+            done();
+          },
+        });
+      } else {
+        done();
       }
-  
-      function onAfterEnter(el: Element) {
-        const wrapperEl = el.querySelector('.notification-wrapper');
-  
-        if (wrapperEl) {
-          gsap.set(wrapperEl, {
-            alpha: 1
-          });
-        }
+    }
+
+    function onAfterEnter(el: Element) {
+      const wrapperEl = el.querySelector(".notification-wrapper");
+
+      if (wrapperEl) {
+        gsap.set(wrapperEl, {
+          alpha: 1,
+        });
       }
-  
-      function onBeforeLeave(el: Element) {
-        const wrapperEl = el.querySelector('.notification-wrapper');
-  
-        if (wrapperEl) {
-          gsap.set(wrapperEl, {
-            alpha: 1
-          });
-        }
+    }
+
+    function onBeforeLeave(el: Element) {
+      const wrapperEl = el.querySelector(".notification-wrapper");
+
+      if (wrapperEl) {
+        gsap.set(wrapperEl, {
+          alpha: 1,
+        });
       }
-  
-      function onLeave(el: Element, done: () => void) {
-        const wrapperEl = el.querySelector('.notification-wrapper');
-  
-        if (wrapperEl) {
-          gsap.to(wrapperEl, {
-            alpha: 0,
-            duration: 0.3,
-            onComplete: () => {
-              done();
-            }
-          })
-        } else {
-          done();
-        }
+    }
+
+    function onLeave(el: Element, done: () => void) {
+      const wrapperEl = el.querySelector(".notification-wrapper");
+
+      if (wrapperEl) {
+        gsap.to(wrapperEl, {
+          alpha: 0,
+          duration: 0.3,
+          onComplete: () => {
+            done();
+          },
+        });
+      } else {
+        done();
       }
-  
-      function onAfterLeave(el: Element) {
-        const wrapperEl = el.querySelector('.notification-wrapper');
-  
-        if (wrapperEl) {
-          gsap.set(wrapperEl, {
-            alpha: 0
-          });
-        }
+    }
+
+    function onAfterLeave(el: Element) {
+      const wrapperEl = el.querySelector(".notification-wrapper");
+
+      if (wrapperEl) {
+        gsap.set(wrapperEl, {
+          alpha: 0,
+        });
       }
-  
-      function delayHide() {
-        if (timeoutId) {
-          clearTimeout(timeoutId);
-        }
-        timeoutId = null;
-  
-        timeoutId = setTimeout(() => {
-          emit('update:isShow', false);
-        }, 2000);
+    }
+
+    function delayHide() {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
       }
-  
-      watch(isShow, () => {
-        if (isShow.value) {
-          delayHide();
-        }
-      });
-  
-      onBeforeUnmount(() => {
-        if (timeoutId) {
-          clearTimeout(timeoutId);
-        }
-        timeoutId = null;
-      })
-  
-      return {
-        onBeforeEnter,
-        onEnter,
-        onAfterEnter,
-        onBeforeLeave,
-        onLeave,
-        onAfterLeave,
-      };
-    },
-  });
-  </script>
-  
-  <style lang="stylus">
-  .notification
-    @apply s('z-[100]') fixed top-0 left-0 w-full h-full pointer-events-none
-  
-    &-wrapper
-      @apply absolute s('top-1/2') s('left-1/2') p-4 s('bg-backdrop/80') rounded text-base text-white s('-translate-x-1/2') s('-translate-y-1/2') shadow-popup-sm
-  </style>
+      timeoutId = null;
+
+      timeoutId = setTimeout(() => {
+        emit("update:isShow", false);
+      }, 2000);
+    }
+
+    watch(isShow, () => {
+      if (isShow.value) {
+        delayHide();
+      }
+    });
+
+    onBeforeUnmount(() => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+      timeoutId = null;
+    });
+
+    return {
+      onBeforeEnter,
+      onEnter,
+      onAfterEnter,
+      onBeforeLeave,
+      onLeave,
+      onAfterLeave,
+    };
+  },
+});
+</script>
+
+<style lang="css">
+@reference '~ui/app/assets/css/main.css';
+
+.notification {
+  @apply z-100 fixed top-0 left-0 w-full h-full pointer-events-none;
+}
+
+.notification-wrapper {
+  @apply absolute top-1/2 left-1/2 p-4 bg-backdrop/80 rounded text-base text-white -translate-x-1/2 -translate-y-1/2 shadow-popup-sm;
+}
+</style>

package/app/components/SLPageModal.vue

@@ -50,15 +50,20 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.page-modal-backdrop
-  @apply fixed top-0 left-0 w-full h-full s('bg-white/70') backdrop-blur-8
+<style>
+@reference '~ui/app/assets/css/main.css';
 
-.page-modal
-  @apply fixed top-0 left-0 w-full h-full overflow-auto
+.page-modal-backdrop {
+  @apply fixed top-0 left-0 w-full h-full bg-white/70 backdrop-blur-[8px];
+}
 
-  .modal-dialog
-    @apply flex items-center justify-center relative m-8 rounded-lg bg-white shadow-popup-lg overflow-hidden
-    width calc(100% - theme('spacing.8') * 2)
-    height calc(100% - theme('spacing.8') * 2)
+.page-modal {
+  @apply fixed top-0 left-0 w-full h-full overflow-auto;
+}
+
+.page-modal .modal-dialog {
+  @apply flex items-center justify-center relative m-8 rounded-lg bg-white shadow-popup-lg overflow-hidden;
+  width: calc(100% - var(--spacing) * 8 * 2);
+  height: calc(100% - var(--spacing) * 8 * 2);
+}
 </style>

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