@mptw/skylens-ui 1.4.80 → 1.4.82

package/components/SLDownloadButton.vue

@@ -46,21 +46,7 @@ function safeSheetName(name: string) {
   return name.replace(/[\\/*?:[\]]/g, "").substring(0, 31);
 }
 
-function loadImage(url: string) {
-  return new Promise<HTMLImageElement>((resolve) => {
-    const img = new Image();
-    img.onload = function () {
-      resolve(img);
-    };
-    img.src = url;
-  });
-}
-
-const DEFAULT_STYLE = {
-  marginTop: 0,
-  marginBottom: 9,
-  border: 0,
-};
+const WatermarkImage = '/assets/images/commons/watermark-2.svg';
 
 export default defineComponent({
   name: "SLDownloadButton",
@@ -137,22 +123,6 @@ export default defineComponent({
     let clickSubscriber: Subscription | null = null;
     let popperInstance: PopperInstance | null = null;
 
-    const watermarkImg = computed(() => '/assets/images/commons/watermark-2.svg')
-    const styleOption = computed(() => {
-      return Object.assign({}, DEFAULT_STYLE, customStyle.value);
-    });
-    const filterOption = computed(() => {
-      return (node: HTMLElement) => {
-        return (
-          !(
-            node?.getAttribute && node.getAttribute("data-skip-download") === ""
-          ) &&
-          (typeof customFilter.value !== "function" ||
-            (customFilter.value && customFilter.value(node)))
-        );
-      };
-    });
-
     function subscribeClick() {
       clickSubscriber = fromEvent(window, "click").subscribe((e) => {
         const { target } = e;
@@ -252,10 +222,8 @@ export default defineComponent({
         return;
       }
 
-      if (!imageTarget.value) {
-        console.log("Can not find target of htmlToImage!");
-        return;
-      }
+      const dataURL = await domToPngDataUrl(imageTarget.value, customFilter.value, customStyle.value, padding.value, dateRanges.value, watermark.value, WatermarkImage);
+      downloadURL(dataURL, `${fileName.value}.png`);
 
       if (evCategory.value !== "") {
         gaev({
@@ -269,93 +237,6 @@ export default defineComponent({
           label: "下載圖片",
         });
       }
-
-      const options = {
-        pixelRatio: 1,
-        filter: filterOption.value,
-        style: styleOption.value,
-      };
-
-      let dataURL = await htmlToImage.toPng(imageTarget.value, options);
-      if (padding.value) dataURL = await addPadding(dataURL, padding.value);
-      if (dateRanges.value?.length > 0)
-        dataURL = await addDateRanges(dataURL, [...dateRanges.value].reverse());
-      if (watermark.value) dataURL = await addWatermark(dataURL, watermarkImg.value);
-      downloadURL(dataURL, `${fileName.value}.png`);
-    }
-
-    async function addPadding(dataURL: string, padding: number) {
-      const canvas = document.createElement("canvas");
-      const ctx = canvas.getContext("2d");
-      if (!ctx) return "";
-
-      const img = await loadImage(dataURL);
-      const { width, height } = img;
-      canvas.width = width + padding * 2;
-      canvas.height = height + padding * 2;
-      ctx.fillStyle = "#FFFFFF";
-      ctx.fillRect(0, 0, canvas.width, canvas.height);
-      ctx.drawImage(img, padding, padding);
-
-      return canvas.toDataURL();
-    }
-
-    async function addDateRanges(
-      dataURL: string,
-      dateRanges: (IDateRange | null)[]
-    ) {
-      const fontSize = 16;
-      const canvas = document.createElement("canvas");
-      const ctx = canvas.getContext("2d");
-      if (!ctx) return "";
-
-      const img = await loadImage(dataURL);
-      const { width, height } = img;
-      canvas.width = width;
-      canvas.height = height + fontSize * 3;
-      ctx.fillStyle = "#FFFFFF";
-      ctx.fillRect(0, 0, canvas.width, canvas.height);
-      ctx.drawImage(img, 0, 0);
-
-      const text = `時間區間：${dateRanges
-        .filter((dateRange) => !!dateRange)
-        .map((dateRange) => formatDateRange(dateRange))
-        .join(" v.s. ")}`;
-      ctx.fillStyle = "#333333";
-      ctx.font = `${fontSize}px "Microsoft JhengHei"`;
-      ctx.fillText(text, fontSize, canvas.height - fontSize);
-
-      return canvas.toDataURL();
-    }
-
-    async function addWatermark(dataURL: string, watermarkImg: any) {
-      const canvas = document.createElement("canvas");
-      const ctx = canvas.getContext("2d");
-      if (!ctx) return "";
-
-      const img = await loadImage(dataURL);
-      const watermark = await loadImage(watermarkImg);
-
-      const { width, height } = img;
-      canvas.width = width;
-      canvas.height = height;
-
-      ctx.fillStyle = "#FFFFFF";
-      ctx.fillRect(0, 0, canvas.width, canvas.height);
-      ctx.drawImage(img, 0, 0);
-
-      // const matrix = new DOMMatrix();
-      // const pattern = ctx.createPattern(watermark, "repeat");
-      // if (!pattern) return "";
-
-      // pattern.setTransform(matrix.rotate(-20).scale(0.5));
-      // ctx.globalAlpha = 0.05;
-      // ctx.fillStyle = pattern;
-      // ctx.fillRect(0, 0, canvas.width, canvas.height);
-
-      ctx.drawImage(watermark, canvas.width - watermark.width - 12, canvas.height - watermark.height - 12);
-
-      return canvas.toDataURL();
     }
 
     onMounted(() => {

package/components/SLIOSSwitch.vue

@@ -4,12 +4,12 @@
   ref="el"
 )
   input(
-      type="checkbox"
-      :id="uid"
-      v-model="modelProxy"
-      :true-value="trueValue",
-      :false-value="falseValue",
-    )
+    type="checkbox"
+    :id="uid"
+    v-model="modelProxy"
+    :true-value="trueValue",
+    :false-value="falseValue",
+)
   label(:for="uid" :style="`width: ${labelWidth}px;`" ref="labelEl")
     span(ref="trueLabelEl").true-label {{ size === '' ? trueLabel : minTrueLabel }}
     span(ref="falseLabelEl").false-label {{ size === '' ? falseLabel : minFalseLabel }}
@@ -52,7 +52,7 @@ export default defineComponent({
     size: {
       type: String,
       default: "",
-      validator: (val: string) => ["", "min", "sm"].includes(val),
+      validator: (val: string) => ["", "min", "sm", "xs"].includes(val),
     },
     color: {
       type: String,
@@ -198,6 +198,19 @@ export default defineComponent({
       .false-label
         @apply s('pl-[31px]')
 
+  &.ios-switch-xs
+    label
+      @apply s('min-w-[60px]') s('h-[24px]') text-xs
+
+      &:before
+        @apply s('inset-y-0.75') s('left-0.75') s('w-[16px]') border border-primary-100 rounded-full shadow-none
+
+      .true-label
+        @apply s('pr-[27px]')
+
+      .false-label
+        @apply s('pl-[27px]')
+
   &.ios-switch-primary-600
     input:checked + label
       @apply bg-primary-600 border-primary

package/components/SLSidebarNav.vue

@@ -35,14 +35,14 @@
             v-else
           )
     .sidebar-mode-setting
-      .sidebar-mode-setting-title 模式
+      .sidebar-mode-setting-title 選單模式
       SLIOSSwitch(
         :modelValue="dark"
         trueLabel="深色"
         minTrueLabel="深"
         falseLabel="淺色"
         minFalseLabel="淺"
-        :size="closuredProxy ? 'min' : ''"
+        :size="closuredProxy ? 'min' : 'xs'"
         :color='switchColor'
         @update:modelValue="onUpdatedMode"
       )
@@ -51,7 +51,7 @@
       SLIcon(icon="chevron-right")
   .sidebar-nav-intro(ref='introEl')
     .sidebar-nav-intro-header {{ navLinkIntro ? navLinkIntro.title : '' }}
-    .sidebar-nav-intro-body {{ navLinkIntro ? navLinkIntro.content : ''}}
+    .sidebar-nav-intro-body {{ navLinkIntro ? navLinkIntro.content : '' }}
     .sidebar-nav-intro-footer
       SLButton(
         title='我知道了',
@@ -81,7 +81,7 @@ export default defineComponent({
     },
     config: {
       type: Array as PropType<NavConfigType>,
-        default: () => [],
+      default: () => [],
     },
     navIntros: {
       type: Array as PropType<{
@@ -116,7 +116,7 @@ export default defineComponent({
 
     function onClickedToggle() {
       if (introing.value) return;
-      
+
       closuredProxy.value = !closuredProxy.value;
     }
 
@@ -287,7 +287,7 @@ export default defineComponent({
           @apply bg-nav-color-switch-bg border-primary-600
 
           &:before
-            @apply border-2 border-primary-600 bg-primary-300
+            @apply border-primary-600 bg-primary-300
 
     .sidebar-toggle
       @apply bg-primary-900 text-white
@@ -373,19 +373,19 @@ export default defineComponent({
         @apply w-full h-px my-2 bg-primary-200
 
   .sidebar-mode-setting
-    @apply flex-grow-0 flex-shrink-0 flex items-center justify-end my-4 pr-4 s('pl-[42px]') space-x-2 text-base text-primary
+    @apply flex-grow-0 flex-shrink-0 flex items-center justify-start my-4 pl-4 space-x-2 text-xs text-primary
 
     &-title
       @apply flex-grow-0 flex-shrink-0
 
     .ios-switch
-      @apply flex-grow
+      @apply flex-grow-0 flex-shrink-0
 
       label
         @apply border-primary-100 bg-primary-25
 
         &:before
-          @apply border-2 border-primary-100
+          @apply border-primary-100
 
   &-toggle
     @apply absolute top-0 right-0 flex justify-center items-center w-5 h-10 s('mt-2.5') bg-primary-50 rounded-l-xl text-sm text-primary-500 leading-none transition-all
@@ -424,5 +424,4 @@ export default defineComponent({
       &:before
         content ''
         @apply visible
-</style>
-  
+</style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mptw/skylens-ui",
   "type": "module",
-  "version": "1.4.80",
+  "version": "1.4.82",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",

package/utils/index.ts

@@ -21,6 +21,7 @@ import type IDateRange from '~ui/interface/IDateRange';
 import { ScreenSize } from '~ui/interface/commons';
 import ExcelJS from 'exceljs';
 import { useGtm } from '@gtm-support/vue-gtm';
+import * as htmlToImage from "html-to-image";
 
 export const getUID = () => {
   return `uid-${Math.random().toString(36).substring(2)}`;
@@ -574,4 +575,131 @@ export const waitFor = async (condition: () => boolean, pollInterval = 50, timeo
 
     await new Promise(r => setTimeout(r, pollInterval));
   }
+}
+
+function loadImage(url: string) {
+  return new Promise<HTMLImageElement>((resolve) => {
+    const img = new Image();
+    img.onload = function () {
+      resolve(img);
+    };
+    img.src = url;
+  });
+}
+
+async function addPadding(dataURL: string, padding: number) {
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return "";
+
+  const img = await loadImage(dataURL);
+  const { width, height } = img;
+  canvas.width = width + padding * 2;
+  canvas.height = height + padding * 2;
+  ctx.fillStyle = "#FFFFFF";
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  ctx.drawImage(img, padding, padding);
+
+  return canvas.toDataURL();
+}
+
+async function addDateRanges(
+  dataURL: string,
+  dateRanges: (IDateRange | null)[]
+) {
+  const fontSize = 16;
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return "";
+
+  const img = await loadImage(dataURL);
+  const { width, height } = img;
+  canvas.width = width;
+  canvas.height = height + fontSize * 3;
+  ctx.fillStyle = "#FFFFFF";
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  ctx.drawImage(img, 0, 0);
+
+  const text = `時間區間：${dateRanges
+    .filter((dateRange) => !!dateRange)
+    .map((dateRange) => formatDateRange(dateRange))
+    .join(" v.s. ")}`;
+  ctx.fillStyle = "#333333";
+  ctx.font = `${fontSize}px "Microsoft JhengHei"`;
+  ctx.fillText(text, fontSize, canvas.height - fontSize);
+
+  return canvas.toDataURL();
+}
+
+async function addWatermark(dataURL: string, watermarkImg: string) {
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return "";
+
+  const img = await loadImage(dataURL);
+  const watermark = await loadImage(watermarkImg);
+
+  const { width, height } = img;
+  canvas.width = width;
+  canvas.height = height;
+
+  ctx.fillStyle = "#FFFFFF";
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  ctx.drawImage(img, 0, 0);
+
+  // const matrix = new DOMMatrix();
+  // const pattern = ctx.createPattern(watermark, "repeat");
+  // if (!pattern) return "";
+
+  // pattern.setTransform(matrix.rotate(-20).scale(0.5));
+  // ctx.globalAlpha = 0.05;
+  // ctx.fillStyle = pattern;
+  // ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+  ctx.drawImage(watermark, canvas.width - watermark.width - 12, canvas.height - watermark.height - 12);
+
+  return canvas.toDataURL();
+}
+
+export const domToPngDataUrl = async (
+  imageTarget: HTMLElement | null,
+  customFilter: Function | null,
+  customStyle: CSSStyleDeclaration | null,
+  padding: number = 0,
+  dateRanges: (IDateRange | null)[] = [],
+  watermark: boolean = true,
+  watermarkImg: string = '/assets/images/commons/watermark-2.svg',
+) => {
+  if (!imageTarget) {
+    console.log("Can not find target of htmlToImage!");
+    return;
+  }
+
+  const filterOption = (node: HTMLElement) => {
+    return (
+      !(
+        node?.getAttribute && node.getAttribute("data-skip-download") === ""
+      ) &&
+      (typeof customFilter !== "function" ||
+        (customFilter && customFilter(node)))
+    );
+  };
+  const styleOption = Object.assign({}, {
+    marginTop: '0px',
+    marginBottom: '9px',
+    border: 'none',
+  }, customStyle || {});
+
+  const options = {
+    pixelRatio: 1,
+    filter: filterOption,
+    style: styleOption,
+  };
+
+  let dataURL = await htmlToImage.toPng(imageTarget, options);
+  if (padding) dataURL = await addPadding(dataURL, padding);
+  if (dateRanges?.length)
+    dataURL = await addDateRanges(dataURL, [...dateRanges].reverse());
+  if (watermark) dataURL = await addWatermark(dataURL, watermarkImg);
+  return dataURL;
 }