@mptw/skylens-ui 1.5.0 → 1.5.1

package/app/components/SLCollapsableMulitPillSelect.vue

@@ -23,7 +23,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: "SLCollapsableMultiPillSelect",
@@ -47,7 +47,7 @@ export default defineComponent({
     const filteredOptions = computed(() => {
       if (!showIndustryTypes.value) {
         return options.value.filter((option) =>
-          modelValue.value.includes(option.value)
+          modelValue.value.includes(option.value),
         );
       }
 
@@ -72,21 +72,26 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.collapsable-multi-pill-select
-  .toggle-button
-    @apply inline-flex items-center justify-between w-80 p-2 mb-2 border border-primary-500 rounded text-base text-pgray-2
+<style>
+@reference '~ui/app/assets/css/main.css';
 
-    &.active
-      .toggle-icon
-        @apply rotate-180
+.collapsable-multi-pill-select .toggle-button {
+  @apply inline-flex items-center justify-between w-80 p-2 mb-2 border border-primary-500 rounded text-base text-pgray-2;
+}
 
-    .toggle-icon
-      @apply transform origin-center
+.collapsable-multi-pill-select .toggle-button.active .toggle-icon {
+  @apply rotate-180;
+}
 
-  .pills
-    @apply s('-mx-1') mb-4 border-b border-primary-300
+.collapsable-multi-pill-select .toggle-button .toggle-icon {
+  @apply transform origin-center;
+}
+
+.collapsable-multi-pill-select .pills {
+  @apply -mx-1 mb-4 border-b border-primary-300;
+}
 
-    .pill-checkbox
-      @apply mx-1 mb-2
+.collapsable-multi-pill-select .pills .pill-checkbox {
+  @apply mx-1 mb-2;
+}
 </style>

package/app/components/SLConfirmModal.vue

@@ -112,11 +112,14 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.confirm-modal
-  .modal-backdrop
-    @apply s('bg-white/40') backdrop-blur-5
+<style>
+@reference '~ui/app/assets/css/main.css';
 
-  &-footer
-    @apply flex justify-center space-x-4
+.confirm-modal .modal-backdrop {
+  @apply bg-white/40 backdrop-blur-[5px];
+}
+
+.confirm-modal-footer {
+  @apply flex justify-center space-x-4;
+}
 </style>

package/app/components/SLContextMenu.vue

@@ -18,10 +18,10 @@
 </template>
 
 <script lang="ts">
-import { fromEvent, Subscription } from 'rxjs';
-import type IDateRange from '~/interface/IDateRange';
+import { fromEvent, Subscription } from "rxjs";
+import type IDateRange from "~ui/app/interface/IDateRange";
 
-const WatermarkImage = '/assets/images/commons/watermark-2.svg';
+const WatermarkImage = "/assets/images/commons/watermark-2.svg";
 const keys = { 37: 1, 38: 1, 30: 1, 40: 1 };
 
 function preventDefault(e: Event) {
@@ -36,7 +36,7 @@ function preventDefaultForScrollKeys(e: Event) {
 }
 
 export default defineComponent({
-  name: 'SLContextMenu',
+  name: "SLContextMenu",
   props: {
     target: {
       type: HTMLElement,
@@ -44,7 +44,7 @@ export default defineComponent({
     },
     filename: {
       type: String,
-      default: '',
+      default: "",
     },
     dateRanges: {
       type: Array as PropType<(IDateRange | null)[]>,
@@ -64,30 +64,45 @@ export default defineComponent({
     },
     customStyle: {
       type: Object as PropType<Partial<CSSStyleDeclaration>>,
-      default: () => { },
+      default: () => {},
     },
   },
-  emits: ['action'],
+  emits: ["action"],
   setup(props, { emit }) {
     let supportsPassive = false;
 
     try {
-      window.addEventListener("test", null, Object.defineProperty({}, 'passive', {
-        get: function () { supportsPassive = true; }
-      }));
-    } catch (e) { }
+      window.addEventListener(
+        "test",
+        null,
+        Object.defineProperty({}, "passive", {
+          get: function () {
+            supportsPassive = true;
+          },
+        }),
+      );
+    } catch (e) {}
 
     const wheelOpt = supportsPassive ? { passive: false } : false;
-    const wheelEvent = 'onwheel' in document.createElement('div') ? 'wheel' : 'mousewheel';
-
-    const { target, filename, dateRanges, padding, watermark, customFilter, customStyle } = toRefs(props);
+    const wheelEvent =
+      "onwheel" in document.createElement("div") ? "wheel" : "mousewheel";
+
+    const {
+      target,
+      filename,
+      dateRanges,
+      padding,
+      watermark,
+      customFilter,
+      customStyle,
+    } = toRefs(props);
 
     const el = shallowRef<HTMLDivElement | null>(null);
     const isShow = ref(false);
     const contextMenuX = ref(0);
     const contextMenuY = ref(0);
     const isShowCopyMsg = ref(false);
-    const copyMsg = ref('');
+    const copyMsg = ref("");
     const isCopySuccess = ref(false);
 
     let contextMenuSubscriber: Subscription | null = null;
@@ -95,8 +110,8 @@ export default defineComponent({
     let clearMsgTimeoutId: any = null;
 
     const contextMenuActions = computed(() => [
-      { key: 'saveAs', label: '另存圖檔(.png)' },
-      { key: 'copy', label: '複製圖檔' },
+      { key: "saveAs", label: "另存圖檔(.png)" },
+      { key: "copy", label: "複製圖檔" },
     ]);
     const contextMenuStyle = computed(() => ({
       top: `${contextMenuY.value}px`,
@@ -105,35 +120,51 @@ export default defineComponent({
 
     async function onClickAction(key: string) {
       hide();
-      if (key === 'saveAs') {
-        const dataURL = await domToPngDataUrl(target.value, customFilter.value, customStyle.value, padding.value, dateRanges.value, watermark.value, WatermarkImage);
+      if (key === "saveAs") {
+        const dataURL = await domToPngDataUrl(
+          target.value,
+          customFilter.value,
+          customStyle.value,
+          padding.value,
+          dateRanges.value,
+          watermark.value,
+          WatermarkImage,
+        );
         if (!dataURL) {
           console.log("Can not generate data URL!");
           return;
         }
         downloadURL(dataURL, `${filename.value}.png`);
-      } else if (key === 'copy') {
+      } else if (key === "copy") {
         if (!navigator.clipboard?.write || !window.ClipboardItem) {
           console.log("Can not copy image to clipboard!");
           return;
         }
 
-        const dataURL = await domToPngDataUrl(target.value, customFilter.value, customStyle.value, padding.value, dateRanges.value, watermark.value, WatermarkImage);
+        const dataURL = await domToPngDataUrl(
+          target.value,
+          customFilter.value,
+          customStyle.value,
+          padding.value,
+          dateRanges.value,
+          watermark.value,
+          WatermarkImage,
+        );
         if (!dataURL) {
           console.log("Can not generate data URL!");
           return;
         }
 
         const blob = dataURLtoBlob(dataURL);
-        const data = [new window.ClipboardItem({ 'image/png': blob })];
+        const data = [new window.ClipboardItem({ "image/png": blob })];
 
         try {
           await navigator.clipboard.write(data);
-          copyMsg.value = '成功複製圖檔到剪貼簿';
+          copyMsg.value = "成功複製圖檔到剪貼簿";
           isShowCopyMsg.value = true;
           isCopySuccess.value = true;
         } catch (e) {
-          copyMsg.value = '無法複製圖檔到剪貼簿';
+          copyMsg.value = "無法複製圖檔到剪貼簿";
           isShowCopyMsg.value = true;
           isCopySuccess.value = false;
         }
@@ -168,22 +199,22 @@ export default defineComponent({
         clearTimeout(clearMsgTimeoutId);
       }
       clearMsgTimeoutId = setTimeout(() => {
-        copyMsg.value = '';
+        copyMsg.value = "";
       }, 300);
     }
 
     function subscribeScrollEvents() {
-      window.addEventListener('DOMMouseScroll', preventDefault, false); // older FF
+      window.addEventListener("DOMMouseScroll", preventDefault, false); // older FF
       window.addEventListener(wheelEvent, preventDefault, wheelOpt); // modern desktop
-      window.addEventListener('touchmove', preventDefault, wheelOpt); // mobile
-      window.addEventListener('keydown', preventDefaultForScrollKeys, false);
+      window.addEventListener("touchmove", preventDefault, wheelOpt); // mobile
+      window.addEventListener("keydown", preventDefaultForScrollKeys, false);
     }
 
     function unsubscribeScrollEvents() {
-      window.removeEventListener('DOMMouseScroll', preventDefault, false);
+      window.removeEventListener("DOMMouseScroll", preventDefault, false);
       window.removeEventListener(wheelEvent, preventDefault, wheelOpt);
-      window.removeEventListener('touchmove', preventDefault, wheelOpt);
-      window.removeEventListener('keydown', preventDefaultForScrollKeys, false);
+      window.removeEventListener("touchmove", preventDefault, wheelOpt);
+      window.removeEventListener("keydown", preventDefaultForScrollKeys, false);
     }
 
     watch(isShow, () => {
@@ -202,7 +233,10 @@ export default defineComponent({
 
     onMounted(() => {
       if (el.value && el.value.parentElement) {
-        contextMenuSubscriber = fromEvent(el.value.parentElement, 'contextmenu').subscribe((e) => {
+        contextMenuSubscriber = fromEvent(
+          el.value.parentElement,
+          "contextmenu",
+        ).subscribe((e) => {
           onRightClick(e as PointerEvent);
         });
       }
@@ -232,25 +266,31 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus" scoped>
-.sl-context-menu-wrapper
-  @apply hidden
+<style scoped>
+@reference '~ui/app/assets/css/main.css';
 
-.sl-context-menu-container
-  @apply fixed top-0 left-0 w-full h-full
+.sl-context-menu-wrapper {
+  @apply hidden;
+}
 
-  &-modal
-    @apply absolute top-0 left-0 w-full h-full
+.sl-context-menu-container {
+  @apply fixed top-0 left-0 w-full h-full;
+}
 
-  .sl-context-menu
-    @apply absolute top-0 left-0 m-0 border border-primary-600 rounded overflow-hidden shadow-popup-sm
+.sl-context-menu-container-modal {
+  @apply absolute top-0 left-0 w-full h-full;
+}
 
-    &-item
-      @apply block s('min-w-[160px]') p-3 bg-white text-base text-gray-2
-      @apply s('hover:bg-primary-100') s('hover:text-primary')
+.sl-context-menu-container .sl-context-menu {
+  @apply absolute top-0 left-0 m-0 border border-primary-600 rounded overflow-hidden shadow-popup-sm;
+}
 
-.toast.copy-msg-toast
-  :deep(.toast-wrapper)
-    @apply s('bg-black/80') shadow-popup-sm
+.sl-context-menu-container .sl-context-menu-item {
+  @apply block min-w-[160px] p-3 bg-white text-base text-gray-2;
+  @apply hover:bg-primary-100 hover:text-primary;
+}
 
-</style>
+.toast.copy-msg-toast :deep(.toast-wrapper) {
+  @apply bg-black/80 shadow-popup-sm;
+}
+</style>

package/app/components/SLDateInput.vue

@@ -71,7 +71,7 @@ import { DatePicker } from "v-calendar";
 import "v-calendar/style.css";
 import type { PopoverVisibility } from "v-calendar/dist/types/src/utils/popovers";
 import { isDate, differenceInCalendarDays } from "date-fns";
-import type IDateRange from "~ui/interface/IDateRange";
+import type IDateRange from "~ui/app/interface/IDateRange";
 
 type DatePickerType = InstanceType<typeof DatePicker> & {
   hidePopover: () => void;
@@ -180,12 +180,12 @@ export default defineComponent({
     const startDate = ref<Date | null>(
       isDate(modelValue.value)
         ? (modelValue.value as Date)
-        : (modelValue.value as IDateRange)?.start || null
+        : (modelValue.value as IDateRange)?.start || null,
     );
     const endDate = ref<Date | null>(
       isDate(modelValue.value)
         ? null
-        : (modelValue.value as IDateRange)?.end || null
+        : (modelValue.value as IDateRange)?.end || null,
     );
 
     const dateInputClass = computed(() => {
@@ -364,98 +364,115 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.date-input
-  &.date-input-xs
-    .input-group
-      &-prepend
-        @apply s('pl-2.75') pr-4 rounded-l-lg
+<style>
+@reference '~ui/app/assets/css/main.css';
 
-      .inputs
-        @apply pl-0 rounded-r-lg
-
-    .input-group
-      .inputs
-        div
-          input
-            @apply s('w-[5.875rem]') text-center
-
-  &.date-input-range.date-input-dateTime
-    .input-group
-      .inputs
-        div
-          input
-            @apply s('w-[10.5rem]')
-
-  &.inline
-    @apply flex
-
-    & > label
-      @apply flex-grow-0 flex-shrink-0 mb-0 mr-2 py-2 border-t border-b border-transparent
+.date-input.date-input-xs .input-group-prepend {
+  @apply pl-2.75 pr-4 rounded-l-lg;
+}
 
-    .form-control
-      @apply flex-grow
-
-  &.disabled, &.readonly
-    .input-group
-      .input-group-prepend, .inputs
-        @apply border-primary-500 bg-primary-100
-
-
-  & > label
-    @apply mb-2 text-base leading-normal text-pgray-2
-
-  .is-invalid
-    .input-group, .input-group.is-focus
-      .input-group-prepend
-        @apply border-danger-light
-
-      .inputs
-        @apply border-danger-light
-
-        .icon
-          @apply inline-block
-
-    .invalid-feedback
-      @apply block
+.date-input.date-input-xs .input-group .inputs {
+  @apply pl-0 rounded-r-lg;
+}
 
+.date-input.date-input-xs .input-group .inputs div input {
+  @apply w-[5.875rem] text-center;
+}
 
+.date-input.date-input-range.date-input-dateTime
   .input-group
-    @apply flex flex-nowrap w-full text-base leading-normal
-
-    &.is-focus
-      .input
-        @apply border-primary
-
-    &.is-fill, &.is-focus
-      .input
-        .float-label
-          @apply s('ml-1.5') s('-mt-2.25') py-0 s('px-0.5') bg-white text-primary text-xs transition-input-focus
-
-    &-prepend
-      @apply flex-grow-0 flex-shrink-0 flex items-center relative pl-4 pr-6 rounded-l border border-r-0 border-primary-500 bg-white text-base leading-none
-
-      &:after
-        content ''
-        @apply block absolute top-2 s('right-1.75') bottom-2 w-px bg-primary
-
-    .inputs
-      @apply relative flex-grow flex items-center p-2 bg-white rounded-r border border-l-0 border-primary-500 text-base text-pgray-2
-
-      input
-        @apply flex-grow bg-transparent text-base text-pgray-2 text-left placeholder-pgray-4 s('focus:outline-none')
-        width: calc((100% - 25px) / 2)
-
-      .date-range-split
-        @apply flex-grow-0 flex-shrink-0 s('mx-0.5')
-
-      .icon
-        @apply absolute right-0 mr-2 text-danger-light hidden
-
-  .input-info
-    @apply mt-1 text-xs text-pgray-3
-
-  .invalid-feedback
-    @apply hidden text-danger text-xs
+  .inputs
+  div
+  input {
+  @apply w-[10.5rem];
+}
+
+.date-input.inline {
+  @apply flex;
+}
+
+.date-input.inline > label {
+  @apply grow-0 shrink-0 mb-0 mr-2 py-2 border-t border-b border-transparent;
+}
+
+.date-input.inline .form-control {
+  @apply grow;
+}
+
+.date-input.disabled .input-group .input-group-prepend,
+.date-input.disabled .input-group .inputs,
+.date-input.readonly .input-group .input-group-prepend,
+.date-input.readonly .input-group .inputs {
+  @apply border-primary-500 bg-primary-100;
+}
+
+.date-input > label {
+  @apply mb-2 text-base leading-[1.3125] text-pgray-2;
+}
+
+.date-input .is-invalid .input-group .input-group-prepend,
+.date-input .is-invalid .input-group.is-focus .input-group-prepend {
+  @apply border-danger-light;
+}
+
+.date-input .is-invalid .input-group .inputs,
+.date-input .is-invalid .input-group.is-focus .inputs {
+  @apply border-danger-light;
+}
+
+.date-input .is-invalid .input-group .inputs .icon,
+.date-input .is-invalid .input-group.is-focus .inputs .icon {
+  @apply inline-block;
+}
+
+.date-input .is-invalid .invalid-feedback {
+  @apply block;
+}
+
+.date-input .input-group {
+  @apply flex flex-nowrap w-full text-base leading-[1.3125];
+}
+
+.date-input .input-group.is-focus .input {
+  @apply border-primary;
+}
+
+.date-input .input-group.is-fill .input .float-label,
+.date-input .input-group.is-focus .input .float-label {
+  @apply ml-1.5 -mt-2.25 py-0 px-0.5 bg-white text-primary text-xs transition-(--transition-input-focus);
+}
+
+.date-input .input-group .input-group-prepend {
+  @apply grow-0 shrink-0 flex items-center relative pl-4 pr-6 rounded-l border border-r-0 border-primary-500 bg-white text-base leading-none;
+}
+
+.date-input .input-group .input-group-prepend::after {
+  content: "";
+  @apply block absolute top-2 right-1.75 bottom-2 w-px bg-primary;
+}
+
+.date-input .input-group .inputs {
+  @apply relative grow flex items-center p-2 bg-white rounded-r border border-l-0 border-primary-500 text-base text-pgray-2;
+}
+
+.date-input .input-group .inputs input {
+  @apply grow bg-transparent text-base text-pgray-2 text-left placeholder-pgray-4 focus:outline-none;
+  width: calc((100% - 25px) / 2);
+}
+
+.date-input .input-group .inputs .date-range-split {
+  @apply grow-0 shrink-0 mx-0.5;
+}
+
+.date-input .input-group .inputs .icon {
+  @apply absolute right-0 mr-2 text-danger-light hidden;
+}
+
+.date-input .input-info {
+  @apply mt-1 text-xs text-pgray-3;
+}
+
+.date-input .invalid-feedback {
+  @apply hidden text-danger text-xs;
+}
 </style>
-    

package/app/components/SLDatePicker.vue

@@ -29,7 +29,7 @@ import {
   max as dateMax,
   isDate,
 } from "date-fns";
-import type IDateRange from "~ui/interface/IDateRange";
+import type IDateRange from "~ui/app/interface/IDateRange";
 
 type DatePickerType = InstanceType<typeof DatePicker>;
 
@@ -83,7 +83,7 @@ export default defineComponent({
 
       const draggingMinDate = subDays(
         draggingStartDate.value as Date,
-        maxDays.value - 1
+        maxDays.value - 1,
       );
 
       return minDate.value
@@ -95,7 +95,7 @@ export default defineComponent({
 
       const draggingMaxDate = addDays(
         draggingStartDate.value as Date,
-        maxDays.value - 1
+        maxDays.value - 1,
       );
 
       return maxDate.value
@@ -136,8 +136,10 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus">
-.custom-date-picker
-  .vc-pane-container
-    @apply border-0
+<style>
+@reference '~ui/app/assets/css/main.css';
+
+.custom-date-picker .vc-pane-container {
+  @apply border-0;
+}
 </style>

package/app/components/SLDistributor.vue

@@ -27,4 +27,4 @@ export default defineComponent({
 });
 </script>
 
-<style lang="stylus"></style>
+<style></style>