@mptw/skylens-ui 1.5.0 → 1.5.2

package/app/components/SLDownloadButton.vue

@@ -31,20 +31,15 @@ import { fromEvent, Subscription } from "rxjs";
 import { createPopper } from "@popperjs/core";
 import type { Instance as PopperInstance, Placement } from "@popperjs/core";
 import ExcelJS from "exceljs";
-import {
-  downloadURL,
-  downloadBlob,
-  gaev,
-  ga4ev,
-} from "~ui/utils";
-import type IDateRange from "~ui/interface/IDateRange";
+import { downloadURL, downloadBlob, gaev, ga4ev } from "~ui/app/utils";
+import type IDateRange from "~ui/app/interface/IDateRange";
 
 // http://www.excelcodex.com/2012/06/worksheets-naming-conventions/
 function safeSheetName(name: string) {
   return name.replace(/[\\/*?:[\]]/g, "").substring(0, 31);
 }
 
-const WatermarkImage = '/assets/images/commons/watermark-2.svg';
+const WatermarkImage = "/assets/images/commons/watermark-2.svg";
 
 export default defineComponent({
   name: "SLDownloadButton",
@@ -93,7 +88,7 @@ export default defineComponent({
     },
     customStyle: {
       type: Object as PropType<Partial<CSSStyleDeclaration>>,
-      default: () => { },
+      default: () => {},
     },
     evCategory: {
       type: String,
@@ -204,7 +199,7 @@ export default defineComponent({
         const workbook = new ExcelJS.Workbook();
         sheets.value.map((sheetData) => {
           const sheet = workbook.addWorksheet(
-            sheetData?.sheetName ? safeSheetName(sheetData.sheetName) : ""
+            sheetData?.sheetName ? safeSheetName(sheetData.sheetName) : "",
           );
           (sheetData?.sheetData || []).forEach((rowData) => {
             sheet.addRow(rowData);
@@ -215,12 +210,20 @@ export default defineComponent({
         downloadBlob(
           buffer,
           `${fileName.value}.xlsx`,
-          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
         );
         return;
       }
 
-      const dataURL = await domToPngDataUrl(imageTarget.value, customFilter.value, customStyle.value, padding.value, dateRanges.value, watermark.value, WatermarkImage);
+      const dataURL = await domToPngDataUrl(
+        imageTarget.value,
+        customFilter.value,
+        customStyle.value,
+        padding.value,
+        dateRanges.value,
+        watermark.value,
+        WatermarkImage,
+      );
       if (!dataURL) {
         console.log("Can not generate data URL!");
         return;
@@ -269,27 +272,34 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.download-button
-  @apply inline-block
+<style>
+@reference '~ui/app/assets/css/main.css';
 
-  &.disabled
-    .download-button-toggle
-      @apply border-pgray-5 text-pgray-5 cursor-default
+.download-button {
+  @apply inline-block;
+}
+
+.download-button.disabled .download-button-toggle {
+  @apply border-pgray-5 text-pgray-5 cursor-default;
+}
 
-  &-toggle
-    @apply inline-flex justify-center items-center s('w-[28px]') s('h-[28px]') bg-white border border-primary-600 rounded text-lg text-primary-600
+.download-button-toggle {
+  @apply inline-flex justify-center items-center w-[28px] h-[28px] bg-white border border-primary-600 rounded text-lg text-primary-600;
+}
 
-    &.active
-      @apply bg-primary-600 text-white
+.download-button-toggle.active {
+  @apply bg-primary-600 text-white;
+}
 
-.download-button-popup
-  @apply z-60 absolute flex flex-col bg-white border border-primary-500 rounded overflow-hidden shadow invisible pointer-events-none
+.download-button-popup {
+  @apply z-60 absolute flex flex-col bg-white border border-primary-500 rounded overflow-hidden shadow-default invisible pointer-events-none;
+}
 
-  &[data-show]
-    @apply visible pointer-events-auto
+.download-button-popup[data-show] {
+  @apply visible pointer-events-auto;
+}
 
-  .download-option
-    @apply block p-2 bg-white text-sm text-pgray-3
-    @apply s('hover:bg-primary-100') s('hover:text-primary')
+.download-button-popup .download-option {
+  @apply block p-2 bg-white text-sm text-pgray-3 hover:bg-primary-100 hover:text-primary;
+}
 </style>

package/app/components/SLDraggable.vue

@@ -58,7 +58,7 @@ export default defineComponent({
             }
 
             const elIndex = Array.from(draggableEl.value.children).indexOf(
-              dragEl
+              dragEl,
             );
 
             if (elIndex === -1) {
@@ -148,4 +148,4 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus"></style>
+<style></style>

package/app/components/SLDropdown.vue

@@ -178,7 +178,7 @@ export default defineComponent({
         }
         emit("update:showDropdown", visible.value);
       },
-      { immediate: true }
+      { immediate: true },
     );
     watch(search, () => {
       emit("update:search", search.value);
@@ -240,38 +240,46 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.dropdown
-  @apply inline-block relative
+<style>
+@reference '~ui/app/assets/css/main.css';
 
-  &.active
-    .dropdown-toggle
+.dropdown {
+  @apply inline-block relative;
+}
 
-      .toggle-icon
-        @apply text-primary-600 rotate-180
+.dropdown.active .dropdown-toggle .toggle-icon {
+  @apply text-primary-600 rotate-180;
+}
 
-  &-toggle
-    @apply flex items-center s('p-1.75') border border-primary-500 rounded bg-white space-x-2 text-base text-pgray-2 whitespace-nowrap
+.dropdown-toggle {
+  @apply flex items-center p-1.75 border border-primary-500 rounded bg-white space-x-2 text-base text-pgray-2 whitespace-nowrap;
+}
 
-    .toggle-icon
-      @apply text-xs leading-none text-pgray-2 transition-transform transform
+.dropdown-toggle .toggle-icon {
+  @apply text-xs leading-none text-pgray-2 transition-transform transform;
+}
 
-  &-menu
-    @apply z-50 flex flex-col max-h-48 border border-primary-500 rounded bg-white shadow-md overflow-hidden invisible pointer-events-none
+.dropdown-menu {
+  @apply z-50 flex flex-col max-h-48 border border-primary-500 rounded bg-white shadow-md overflow-hidden invisible pointer-events-none;
+}
 
-    &[data-show]
-      @apply visible pointer-events-auto
+.dropdown-menu[data-show] {
+  @apply visible pointer-events-auto;
+}
 
-      .dropdown-list-wrapper
-        .dropdown-list
-          @apply relative
+.dropdown-menu[data-show] .dropdown-list-wrapper .dropdown-list {
+  @apply relative;
+}
 
-    .dropdown-search
-      @apply flex-grow-0 flex-shrink-0 mb-1 p-1
+.dropdown-menu .dropdown-search {
+  @apply grow-0 shrink-0 mb-1 p-1;
+}
 
-    .dropdown-list-wrapper
-      @apply flex-grow
+.dropdown-menu .dropdown-list-wrapper {
+  @apply grow;
+}
 
-      .dropdown-list
-        @apply absolute
+.dropdown-menu .dropdown-list-wrapper .dropdown-list {
+  @apply absolute;
+}
 </style>

package/app/components/SLDropdownItem.vue

@@ -22,10 +22,14 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.dropdown-item
-  @apply block p-2 bg-white text-sm text-primary whitespace-nowrap s('hover:text-primary') s('hover:bg-primary-50') s('focus:text-primary') s('focus:bg-primary-50') s('active:text-primary') s('active:bg-primary-50')
+<style>
+@reference '~ui/app/assets/css/main.css';
 
-  &.active
-    @apply text-primary bg-primary-50
+.dropdown-item {
+  @apply block p-2 bg-white text-sm text-primary whitespace-nowrap hover:text-primary hover:bg-primary-50 focus:text-primary focus:bg-primary-50 active:text-primary active:bg-primary-50;
+}
+
+.dropdown-item.active {
+  @apply text-primary bg-primary-50;
+}
 </style>

package/app/components/SLElementWithTitle.vue

@@ -169,13 +169,18 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.element-with-title
-  @apply inline-flex
+<style>
+@reference '~ui/app/assets/css/main.css';
 
-  &-tooltip
-    @apply s('z-[10]') p-2 s('bg-mask/70') rounded text-xs text-white whitespace-pre shadow invisible pointer-events-none
+.element-with-title {
+  @apply inline-flex;
+}
 
-    &[data-show]
-      @apply visible
+.element-with-title-tooltip {
+  @apply z-10 p-2 bg-mask/70 rounded text-xs text-white whitespace-pre shadow-default invisible pointer-events-none;
+}
+
+.element-with-title-tooltip[data-show] {
+  @apply visible;
+}
 </style>

package/app/components/SLEyeCheckbox.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: "SLEyeCheckbox",
@@ -99,7 +99,7 @@ export default defineComponent({
       } else {
         emit(
           "update:modelValue",
-          isChecked ? trueValue.value : falseValue.value
+          isChecked ? trueValue.value : falseValue.value,
         );
       }
     }
@@ -118,45 +118,58 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.eye-checkbox
-  @apply inline-block relative text-base align-top overflow-hidden
+<style>
+@reference '~ui/app/assets/css/main.css';
 
-  &.checkbox-sm
-    @apply text-sm
+.eye-checkbox {
+  @apply inline-block relative text-base align-top overflow-hidden;
+}
 
-    label
-      @apply text-sm
+.eye-checkbox.checkbox-sm {
+  @apply text-sm;
+}
 
-  input
-    @apply absolute s('-top-10') s('-left-10')
+.eye-checkbox.checkbox-sm label {
+  @apply text-sm;
+}
 
-  label
-    @apply relative inline-flex items-center text-base text-pgray-2 cursor-pointer
+.eye-checkbox input {
+  @apply absolute -top-10 -left-10;
+}
 
-    .icon
-      @apply hidden text-primary
+.eye-checkbox label {
+  @apply relative inline-flex items-center text-base text-pgray-2 cursor-pointer;
+}
 
-    span
-      @apply ml-2
+.eye-checkbox label .icon {
+  @apply hidden text-primary;
+}
 
-  input:checked + label
-    .icon-eye
-      @apply inline-block
+.eye-checkbox label span {
+  @apply ml-2;
+}
 
-  input:not(:checked) + label
-    .icon-eye-slash
-      @apply inline-block
+.eye-checkbox input:checked + label .icon-eye {
+  @apply inline-block;
+}
 
-  input:not(:checked):disabled + label
-    @apply text-pgray-4 cursor-default
+.eye-checkbox input:not(:checked) + label .icon-eye-slash {
+  @apply inline-block;
+}
 
-    .icon-eye-slash
-      @apply inline-block text-pgray-4
+.eye-checkbox input:not(:checked):disabled + label {
+  @apply text-pgray-4 cursor-default;
+}
 
-  input:checked:disabled + label
-    @apply text-pgray-3 cursor-default
+.eye-checkbox input:not(:checked):disabled + label .icon-eye-slash {
+  @apply inline-block text-pgray-4;
+}
 
-    .icon-eye
-      @apply inline-block text-pgray-3
+.eye-checkbox input:checked:disabled + label {
+  @apply text-pgray-3 cursor-default;
+}
+
+.eye-checkbox input:checked:disabled + label .icon-eye {
+  @apply inline-block text-pgray-3;
+}
 </style>

package/app/components/SLFileInput.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script lang="ts">
-import { getUID } from "~ui/utils";
+import { getUID } from "~ui/app/utils";
 
 export default defineComponent({
   name: "SLFileInput",
@@ -78,24 +78,31 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.custom-file-input
-  @apply inline-flex items-center s('space-x-3.5')
+<style>
+@reference '~ui/app/assets/css/main.css';
+
+.custom-file-input {
+  @apply inline-flex items-center space-x-3.5;
+}
 
-  .file-button
-    @apply relative overflow-hidden
+.custom-file-input .file-button {
+  @apply relative overflow-hidden;
+}
 
-    &.uploaded
-      label
-        @apply bg-white border text-primary s("hover:text-primary-600") s("hover:bg-white")
+.custom-file-input .file-button.uploaded label {
+  @apply bg-white border text-primary hover:text-primary-600 hover:bg-white;
+}
 
-    label
-      @apply relative inline-block s("py-1.75") s("px-3.75") border border-transparent rounded bg-transparent text-base leading-normal space-x-2 cursor-pointer s("focus:outline-none")
-      @apply bg-primary border-primary text-white s("hover:bg-primary-600") s("hover:border-primary-600")
+.custom-file-input .file-button label {
+  @apply relative inline-block py-1.75 px-3.75 border border-transparent rounded bg-transparent text-base leading-[1.3125] space-x-2 cursor-pointer focus:outline-none;
+  @apply bg-primary border-primary text-white hover:bg-primary-600 hover:border-primary-600;
+}
 
-    input[type="file"]
-      @apply absolute top-0 left-0
+.custom-file-input .file-button input[type="file"] {
+  @apply absolute top-0 left-0;
+}
 
-  .filename
-    @apply s("p-1.75") border border-primary-300 rounded bg-primary-50 text-base text-pgray-2
+.custom-file-input .filename {
+  @apply p-1.75 border border-primary-300 rounded bg-primary-50 text-base text-pgray-2;
+}
 </style>

package/app/components/SLGenderAgeSelect.vue

@@ -42,7 +42,7 @@ import type { PropType } from "vue";
 import { fromEvent, Subscription } from "rxjs";
 import { createPopper } from "@popperjs/core";
 import type { Instance as PopperInstance } from "@popperjs/core";
-import { AGE_RANGE_NAME } from "~ui/utils/constants";
+import { AGE_RANGE_NAME } from "~ui/app/utils/constants";
 
 export default defineComponent({
   name: "SLGenderAgeSelect",
@@ -92,7 +92,7 @@ export default defineComponent({
       AGE_RANGE_NAME.map((name, i) => ({
         label: name,
         value: i + 1,
-      }))
+      })),
     );
     const genderProxy = computed({
       get: () => {
@@ -234,50 +234,66 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.gender-age-select
-  @apply relative inline-flex
+<style>
+@reference '~ui/app/assets/css/main.css';
 
-  .toggle-button
-    @apply inline-flex items-center justify-between w-full s('p-1.75') border border-primary-500 rounded space-x-4 text-sm text-pgray-2
+.gender-age-select {
+  @apply relative inline-flex;
+}
 
-    .toggle-title
-      @apply flex-grow truncate
+.gender-age-select .toggle-button {
+  @apply inline-flex items-center justify-between w-full p-1.75 border border-primary-500 rounded space-x-4 text-sm text-pgray-2;
+}
 
-    .icon
-      @apply flex-grow-0 flex-shrink-0 text-xs leading-none
+.gender-age-select .toggle-button .toggle-title {
+  @apply grow truncate;
+}
 
-.options-popup
-  @apply z-60 absolute flex s('max-h-[196px]') s('p-2.75') bg-white border border-primary-500 rounded shadow pointer-events-none invisible
+.gender-age-select .toggle-button .icon {
+  @apply grow-0 shrink-0 text-xs leading-none;
+}
 
-  &[data-show]
-    @apply pointer-events-auto visible
+.options-popup {
+  @apply z-60 absolute flex max-h-[196px] p-2.75 bg-white border border-primary-500 rounded shadow-default pointer-events-none invisible;
+}
 
-  .options-block
-    @apply flex flex-col
-    &-gender
-      @apply flex-grow-0 flex-shrink-0
-      width 37%
+.options-popup[data-show] {
+  @apply pointer-events-auto visible;
+}
 
-    &-age
-      @apply flex-grow
+.options-popup .options-block {
+  @apply flex flex-col;
+}
 
-    &-header
-      @apply s('pb-1.75') border-b border-primary text-base text-primary
+.options-popup .options-block-gender {
+  @apply grow-0 shrink-0 w-[37%];
+}
 
-    &-body
-      @apply overflow-hidden
-      .options-list
-        @apply flex flex-col
+.options-popup .options-block-age {
+  @apply grow;
+}
 
-        .checkbox
-          label
-            @apply w-full s('py-1.5') px-2 text-sm
-            @apply s('hover:bg-primary-100')
+.options-popup .options-block-header {
+  @apply pb-1.75 border-b border-primary text-base text-primary;
+}
 
-            span
-              @apply ml-1
+.options-popup .options-block-body {
+  @apply overflow-hidden;
+}
 
-  .options-divide
-    @apply flex-grow-0 flex-shrink-0 w-px ml-3 s('mr-2.75') bg-pgray-4
+.options-popup .options-block-body .options-list {
+  @apply flex flex-col;
+}
+
+.options-popup .options-block-body .options-list .checkbox label {
+  @apply w-full py-1.5 px-2 text-sm hover:bg-primary-100;
+}
+
+.options-popup .options-block-body .options-list .checkbox label span {
+  @apply ml-1;
+}
+
+.options-popup .options-divide {
+  @apply grow-0 shrink-0 w-px ml-3 mr-2.75 bg-pgray-4;
+}
 </style>

package/app/components/SLHourRangeInput.vue

@@ -33,7 +33,7 @@
 
 <script lang="ts">
 import type { PropType } from "vue";
-import type IHourRange from "~ui/interface/IHourRange";
+import type IHourRange from "~ui/app/interface/IHourRange";
 
 export default defineComponent({
   name: "SLHourRangeInput",
@@ -72,12 +72,12 @@ export default defineComponent({
     const startHour = ref(
       modelValue.value && modelValue.value.start !== null
         ? modelValue.value.start
-        : ""
+        : "",
     );
     const endHour = ref(
       modelValue.value && modelValue.value.end !== null
         ? modelValue.value.end
-        : ""
+        : "",
     );
     const isStartHourInvalid = ref(false);
     const isEndHourInvalid = ref(false);
@@ -166,46 +166,59 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.hour-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
+.hour-range-input.inline {
+  @apply flex;
+}
 
-    .form-control
-      @apply flex-grow
+.hour-range-input.inline > label {
+  @apply grow-0 shrink-0 mb-0 mr-2 py-2 border-t border-b border-transparent;
+}
 
-  &.disabled, &.readonly
-    .input-group
-      @apply border-primary-500 bg-primary-100
+.hour-range-input.inline .form-control {
+  @apply grow;
+}
 
+.hour-range-input.disabled .input-group,
+.hour-range-input.readonly .input-group {
+  @apply border-primary-500 bg-primary-100;
+}
 
-  & > label
-    @apply flex items-center mb-2 space-x-2 text-base leading-normal text-pgray-2
+.hour-range-input > label {
+  @apply flex items-center mb-2 space-x-2 text-base leading-[1.3125] text-pgray-2;
+}
 
-    .icon
-      @apply text-xs leading-none
+.hour-range-input > label .icon {
+  @apply text-xs leading-none;
+}
 
-  .form-control
-    @apply flex items-center space-x-2
+.hour-range-input .form-control {
+  @apply flex items-center space-x-2;
+}
 
-  .input-group
-    @apply flex items-center flex-nowrap p-2 bg-white border border-primary-500 rounded text-base space-x-1
+.hour-range-input .input-group {
+  @apply flex items-center flex-nowrap p-2 bg-white border border-primary-500 rounded text-base space-x-1;
+}
 
-    &.invalid
-      @apply border-danger
+.hour-range-input .input-group.invalid {
+  @apply border-danger;
+}
 
-    input[type=text]
-      @apply flex-grow-0 flex-shrink-0 s('w-4.75') border-0 bg-transparent text-base text-center text-pgray-2 outline-none
+.hour-range-input .input-group input[type="text"] {
+  @apply grow-0 shrink-0 w-4.75 border-0 bg-transparent text-base text-center text-pgray-2 outline-none;
+}
 
-    .minutes-label
-      @apply flex-grow-0 flex-shrink-0
+.hour-range-input .input-group .minutes-label {
+  @apply grow-0 shrink-0;
+}
 
-  .input-group-splitter
-    @apply w-4 h-px bg-primary
+.hour-range-input .input-group-splitter {
+  @apply w-4 h-px bg-primary;
+}
 
-  .invalid-feedback
-    @apply mt-1 text-danger text-xs
+.hour-range-input .invalid-feedback {
+  @apply mt-1 text-danger text-xs;
+}
 </style>