@mptw/skylens-ui 1.5.0 → 1.5.1

package/app/components/SLModal.vue

@@ -182,7 +182,7 @@ export default defineComponent({
           alpha: 1,
           duration: 0.5,
         },
-        0
+        0,
       );
       tl.to(
         modalContent,
@@ -191,7 +191,7 @@ export default defineComponent({
           alpha: 1,
           duration: 0.5,
         },
-        0.3
+        0.3,
       );
     }
 
@@ -231,7 +231,7 @@ export default defineComponent({
           alpha: 0,
           duration: 0.5,
         },
-        0
+        0,
       );
       tl.to(
         modalContent,
@@ -239,7 +239,7 @@ export default defineComponent({
           alpha: 0,
           duration: 0.5,
         },
-        0
+        0,
       );
     }
 
@@ -288,91 +288,115 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus" scoped>
-.modal
-  @apply z-50 fixed top-0 left-0 w-full h-full overflow-hidden
+<style scoped>
+@reference '~ui/app/assets/css/main.css';
 
-  &.modal-centered
-    @apply flex items-center
+.modal {
+  @apply z-50 fixed top-0 left-0 w-full h-full overflow-hidden;
+}
 
-  .modal-backdrop
-    @apply absolute top-0 left-0 w-full h-full
+.modal.modal-centered {
+  @apply flex items-center;
+}
 
-    &.show
-      @apply s('bg-mask/80')
+.modal .modal-backdrop {
+  @apply absolute top-0 left-0 w-full h-full;
+}
 
-  .modal-dialog
-    @apply relative w-full my-7 mx-auto
+.modal .modal-backdrop.show {
+  @apply bg-mask/80;
+}
 
-    &-xs
-      @apply s('max-w-[30rem]')
+.modal .modal-dialog {
+  @apply relative w-full my-7 mx-auto;
+}
 
-    &-sm
-      @apply s("max-w-149.5")
+.modal .modal-dialog-xs {
+  @apply max-w-[30rem];
+}
 
-    &-lg
-      @apply s('max-w-[39.75rem]')
+.modal .modal-dialog-sm {
+  @apply max-w-149.5;
+}
 
-    &-xl
-      @apply s('max-w-[39rem]')
-      @apply s("lg:max-w-208")
+.modal .modal-dialog-lg {
+  @apply max-w-[39.75rem];
+}
 
-    &-2xl
-      @apply s('max-w-[41rem]')
-      @apply s("lg:max-w-[55.125rem]")
+.modal .modal-dialog-xl {
+  @apply max-w-[39rem] lg:max-w-208;
+}
 
-    &-3xl
-      @apply s('max-w-[748px]')
-      @apply s("lg:max-w-[900px]")
+.modal .modal-dialog-2xl {
+  @apply max-w-[41rem] lg:max-w-[55.125rem];
+}
 
-    &-4xl
-      @apply s('max-w-[697px]')
-      @apply s('lg:max-w-[924px]')
+.modal .modal-dialog-3xl {
+  @apply max-w-[748px] lg:max-w-[900px];
+}
 
-    &-5xl
-      @apply s('max-w-[748px]')
-      @apply s("lg:max-w-[980px]")
+.modal .modal-dialog-4xl {
+  @apply max-w-[697px] lg:max-w-[924px];
+}
 
-    &-free
-      @apply w-auto
+.modal .modal-dialog-5xl {
+  @apply max-w-[748px] lg:max-w-[980px];
+}
 
-    &-centered
-      @apply flex
-      max-height calc(100% - (theme("spacing.7") * 2))
+.modal .modal-dialog-free {
+  @apply w-auto;
+}
 
-  .modal-content
-    @apply flex flex-col w-full max-h-full rounded-lg bg-white shadow-popup-lg
+.modal .modal-dialog-centered {
+  @apply flex;
+  max-height: calc(100% - (var(--spacing) * 7 * 2));
+}
 
-    .modal-header + .modal-body
-      @apply rounded-t-none
+.modal .modal-content {
+  @apply flex flex-col w-full max-h-full rounded-lg bg-white shadow-popup-lg;
+}
 
-    .modal-header
-      @apply flex-grow-0 flex-shrink-0 flex items-center justify-between py-2 px-4 bg-primary rounded-t-lg text-xl s("leading-6.75") text-white
+.modal .modal-content .modal-header + .modal-body {
+  @apply rounded-t-none;
+}
 
-      &-left
-        @apply flex items-center
+.modal .modal-content .modal-header {
+  @apply grow-0 shrink-0 flex items-center justify-between py-2 px-4 bg-primary rounded-t-lg text-xl leading-6.75 text-white;
+}
 
-      &-right
-        @apply flex items-baseline ml-6
+.modal .modal-content .modal-header-left {
+  @apply flex items-center;
+}
 
-      .modal-title
-        @apply inline-flex items-baseline space-x-2 font-normal
+.modal .modal-content .modal-header-right {
+  @apply flex items-baseline ml-6;
+}
 
-        &-notice
-          @apply text-xs font-normal
+.modal .modal-content .modal-title {
+  @apply inline-flex items-baseline space-x-2 font-normal;
+}
 
-      .close-button
-        @apply inline-flex text-base text-white
+.modal .modal-content .modal-title-notice {
+  @apply text-xs font-normal;
+}
 
-        .icon
-          @apply inline-flex
+.modal .modal-content .close-button {
+  @apply inline-flex text-base text-white;
+}
 
-    .modal-body
-      @apply flex-grow relative w-full pt-4 pr-4 pl-4 bg-white rounded-lg
+.modal .modal-content .close-button .icon {
+  @apply inline-flex;
+}
 
-      &:last-child
-        @apply pb-4
-
-    .modal-footer
-      @apply flex-grow-0 flex-shrink-0 p-6 rounded-b-lg
+.modal .modal-body {
+  @apply grow relative w-full pt-4 pr-4 pl-4 bg-white rounded-lg;
+}
+
+.modal .modal-body:last-child {
+  @apply pb-4;
+}
+
+.modal .modal-footer {
+  @apply grow-0 shrink-0 p-6 rounded-b-lg;
+}
 </style>

package/app/components/SLMonthCalendarButton.vue

@@ -61,7 +61,7 @@ import {
 } from "date-fns";
 import { createPopper } from "@popperjs/core";
 import type { Instance as PopperInstance } from "@popperjs/core";
-import { gaev, ga4ev } from "~ui/utils";
+import { gaev, ga4ev } from "~ui/app/utils";
 
 export default defineComponent({
   name: "SLMonthCalendarButton",
@@ -93,7 +93,7 @@ export default defineComponent({
     const isShowPopup = ref(false);
     const modelValueProxy = ref<(Date | null)[]>([...modelValue.value]);
     const isCompare = ref(
-      modelValue.value[1] && enableCompare.value ? true : false
+      modelValue.value[1] && enableCompare.value ? true : false,
     );
 
     let popperInstance: PopperInstance | null = null;
@@ -129,10 +129,10 @@ export default defineComponent({
       return maxCompareDate;
     });
     const currentMonthString = computed(() =>
-      modelValue.value[0] ? formatDate(modelValue.value[0], "yyyy/ MM") : ""
+      modelValue.value[0] ? formatDate(modelValue.value[0], "yyyy/ MM") : "",
     );
     const compareMonthString = computed(() =>
-      modelValue.value[1] ? formatDate(modelValue.value[1], "yyyy/ MM") : ""
+      modelValue.value[1] ? formatDate(modelValue.value[1], "yyyy/ MM") : "",
     );
 
     function onClickedCompare() {
@@ -330,49 +330,95 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus" scoped>
-.month-calendar-button
-  @apply inline-flex
+<style lang="css" scoped>
+@reference '~ui/app/assets/css/main.css';
+
+.month-calendar-button {
+  @apply inline-flex;
+}
+
+.month-calendar-button-toggle {
+  @apply inline-flex items-center justify-center min-w-[163px] min-h-[58px] py-1 px-4 bg-white border border-primary-500 rounded shadow-default;
+}
+
+.month-calendar-button-toggle .toggle-wrapper {
+  @apply inline-flex items-center;
+}
+
+.month-calendar-button-toggle .toggle-wrapper .icon {
+  @apply text-base leading-none text-primary;
+}
+
+.month-calendar-button-toggle .toggle-wrapper .toggle-divide {
+  @apply self-stretch w-px ml-4 mr-3.75 bg-primary rounded-full;
+}
+
+.month-calendar-button-toggle .toggle-wrapper .button-title {
+  @apply space-y-1 text-end;
+}
+
+.month-calendar-button-toggle .toggle-wrapper .button-title .current-month {
+  @apply text-lg text-pgray-2;
+}
+
+.month-calendar-button-toggle .toggle-wrapper .button-title .compare-month {
+  @apply text-xs text-pgray-3;
+}
+
+.month-calendar-popup {
+  @apply z-50 p-3.75 space-y-4 bg-white border border-primary-100 rounded-lg shadow-md hidden;
+}
+
+.month-calendar-popup[data-show] {
+  @apply block;
+}
+
+.month-calendar-popup .popup-header {
+  @apply text-center;
+}
+
+.month-calendar-popup .popup-header .compare-switch {
+  @apply inline-flex items-center space-x-px;
+}
+
+.month-calendar-popup .popup-header .compare-switch .compare-switch-button {
+  @apply block py-0.75 px-3.75 bg-white border border-primary-300 text-sm text-insight-title;
+}
 
-  &-toggle
-    @apply inline-flex items-center justify-center s('min-w-[163px]') s('min-h-[58px]') py-1 px-4 bg-white border border-primary-500 rounded shadow
-    .toggle-wrapper
-      @apply inline-flex items-center
-      .icon
-        @apply text-base leading-none text-primary
-      .toggle-divide
-        @apply self-stretch w-px ml-4 s('mr-3.75') bg-primary rounded-full
-      .button-title
-        @apply space-y-1 text-end
-        .current-month
-          @apply text-lg text-pgray-2
-        .compare-month
-          @apply text-xs text-pgray-3
 .month-calendar-popup
-  @apply z-50 s('p-3.75') space-y-4 bg-white border border-primary-100 rounded-lg shadow-md hidden
+  .popup-header
+  .compare-switch
+  .compare-switch-button:first-child {
+  @apply rounded-l rounded-r-[1px];
+}
 
-  &[data-show]
-    @apply block
+.month-calendar-popup
+  .popup-header
+  .compare-switch
+  .compare-switch-button:last-child {
+  @apply rounded-l-[1px] rounded-r;
+}
+
+.month-calendar-popup
   .popup-header
-    @apply text-center
-    .compare-switch
-      @apply inline-flex items-center space-x-px
-      .compare-switch-button
-        @apply block s('py-0.75') s('px-3.75') bg-white border border-primary-300 text-sm text-insight-title
-
-        &:first-child
-          @apply rounded-l s('rounded-r-[1px]')
-
-        &:last-child
-          @apply s('rounded-l-[1px]') rounded-r
-        &.selected
-          @apply bg-insight-title border-insight-title text-white
-  .popup-body
-    @apply flex
-    .calendar-divide
-      @apply w-px s('ml-4') s('mr-3.75') bg-pgray-4
-  .popup-footer
-    @apply pt-4 space-x-6 border-t border-pgray-4 text-center
-    .cancel-button
-      @apply text-base text-pgray-3
+  .compare-switch
+  .compare-switch-button.selected {
+  @apply bg-insight-title border-insight-title text-white;
+}
+
+.month-calendar-popup .popup-body {
+  @apply flex;
+}
+
+.month-calendar-popup .popup-body .calendar-divide {
+  @apply w-px ml-4 mr-3.75 bg-pgray-4;
+}
+
+.month-calendar-popup .popup-footer {
+  @apply pt-4 space-x-6 border-t border-pgray-4 text-center;
+}
+
+.month-calendar-popup .popup-footer .cancel-button {
+  @apply text-base text-pgray-3;
+}
 </style>

package/app/components/SLMonthPicker.vue

@@ -54,20 +54,20 @@ export default defineComponent({
     const { minDate, maxDate, modelValue } = toRefs(props);
 
     const yearProxy = ref(
-      modelValue.value?.getFullYear() || new Date().getFullYear()
+      modelValue.value?.getFullYear() || new Date().getFullYear(),
     );
 
     const minYear = computed(() => minDate.value?.getFullYear() || null);
     const minMonth = computed(() =>
-      minDate.value ? minDate.value.getMonth() + 1 : null
+      minDate.value ? minDate.value.getMonth() + 1 : null,
     );
     const maxYear = computed(() => maxDate.value?.getFullYear() || null);
     const maxMonth = computed(() =>
-      maxDate.value ? maxDate.value.getMonth() + 1 : null
+      maxDate.value ? maxDate.value.getMonth() + 1 : null,
     );
     const year = computed(() => modelValue.value?.getFullYear() || null);
     const month = computed(() =>
-      modelValue.value ? modelValue.value.getMonth() + 1 : null
+      modelValue.value ? modelValue.value.getMonth() + 1 : null,
     );
 
     function onClickedPrevYear() {
@@ -105,47 +105,52 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus" scoped>
-.month-picker
-  @apply s('w-[190px]') space-y-4
+<style scoped>
+@reference '~ui/app/assets/css/main.css';
 
-  &--insight-title
-    .month-select
-      &-wrapper
-        .month-button
-          &.selected
-            @apply bg-insight-title
+.month-picker {
+  @apply w-47.5 space-y-4;
+}
 
-  &--primary-600
-    .month-select
-      &-wrapper
-        .month-button
-          &.selected
-            @apply bg-primary-600
+.month-picker--insight-title .month-select-wrapper .month-button.selected {
+  @apply bg-insight-title;
+}
 
-  .year-select
-    @apply flex items-center justify-center space-x-10
+.month-picker--primary-600 .month-select-wrapper .month-button.selected {
+  @apply bg-primary-600;
+}
 
-    .prev-button, .next-button
-      @apply inline-flex items-center text-xs text-pgray-3
+.month-picker .year-select {
+  @apply flex items-center justify-center space-x-10;
+}
 
-      &.disabled
-        @apply text-pgray-5 cursor-default
+.month-picker .year-select .prev-button,
+.month-picker .year-select .next-button {
+  @apply inline-flex items-center text-xs text-pgray-3;
+}
 
-    .year
-      @apply text-sm text-pgray-2
+.month-picker .year-select .prev-button.disabled,
+.month-picker .year-select .next-button.disabled {
+  @apply text-pgray-5 cursor-default;
+}
 
-  .month-select
-    &-wrapper
-      @apply flex flex-wrap s('-my-2') s('-mx-4')
+.month-picker .year-select .year {
+  @apply text-sm text-pgray-2;
+}
+
+.month-picker .month-select-wrapper {
+  @apply flex flex-wrap -my-2 -mx-4;
+}
 
-      .month-button
-        @apply flex items-center justify-center s('w-[42px]') s('h-[27px]') s('my-2') s('mx-4') bg-white rounded text-sm text-pgray-3
-        @apply s('hover:bg-primary-300') s('hover:text-white')
+.month-picker .month-select-wrapper .month-button {
+  @apply flex items-center justify-center w-10.5 h-6.75 my-2 mx-4 bg-white rounded text-sm text-pgray-3 hover:bg-primary-300 hover:text-white;
+}
 
-        &.selected
-          @apply text-white
+.month-picker .month-select-wrapper .month-button.selected {
+  @apply text-white;
+}
 
-        &.disabled
-          @apply bg-white text-pgray-5
+.month-picker .month-select-wrapper .month-button.disabled {
+  @apply bg-white text-pgray-5;
+}
 </style>