@mptw/skylens-ui 1.4.86 → 1.4.88

package/components/SLContextMenu.vue

@@ -1,75 +1,183 @@
 <template lang="pug">
-  .sl-context-menu-avatar(ref='el')
-    ClientOnly
-      Teleport(to='body')
-        .sl-context-menu-wrapper.hidden(ref='menuWrapperEl', @mousedown='onMouseDown')
-          .sl-context-menu(ref='menuEl')
-            a.sl-context-menu-item(
-              v-for='action in actions',
-              href='javascript:;',
-              :key='action.key',
-              @click='onClickAction(action.key)',
-            ) {{ action.label }}
+  .sl-context-menu-wrapper(ref='el')
+    Teleport(to="#popup")
+      .sl-context-menu-container(v-if='isShow')
+        .sl-context-menu-container-modal(@click='onClickModal')
+        .sl-context-menu(:style='contextMenuStyle')
+          a.sl-context-menu-item(
+            v-for='action in contextMenuActions',
+            href='javascript:;',
+            :key='action.key',
+            @click='onClickAction(action.key)',
+          ) {{ action.label }}
+      SLToast.copy-msg-toast(v-model:show='isShowCopyMsg', :message='copyMsg')
+        template(#message)
+          .inline-flex.items-center(class='space-x-2.5')
+            SLIcon(:icon='isCopySuccess ? "check-circle" : "exclamation-circle"')
+            span {{ copyMsg }}
 </template>
 
 <script lang="ts">
 import { fromEvent, Subscription } from 'rxjs';
+import type IDateRange from '~/interface/IDateRange';
+
+const WatermarkImage = '/assets/images/commons/watermark-2.svg';
 
 export default defineComponent({
   name: 'SLContextMenu',
   props: {
-    actions: {
-      type: Array as PropType<{
-        key: string,
-        label: string,
-      }[]>,
-      default: () => [{
-        key: 'saveAs',
-        label: '另存圖檔 (.png)',
-      }, {
-        key: 'copy',
-        label: '複製圖檔',
-      }],
+    target: {
+      type: HTMLElement,
+      default: () => null,
+    },
+    filename: {
+      type: String,
+      default: '',
+    },
+    dateRanges: {
+      type: Array as PropType<(IDateRange | null)[]>,
+      default: () => [],
+    },
+    padding: {
+      type: Number,
+      default: 0,
+    },
+    watermark: {
+      type: Boolean,
+      default: true,
+    },
+    customFilter: {
+      type: Function,
+      default: null,
+    },
+    customStyle: {
+      type: Object as PropType<Partial<CSSStyleDeclaration>>,
+      default: () => { },
     },
   },
   emits: ['action'],
   setup(props, { emit }) {
-    const { actions } = toRefs(props);
+    const { target, filename, dateRanges, padding, watermark, customFilter, customStyle } = toRefs(props);
 
     const el = shallowRef<HTMLDivElement | null>(null);
-    const menuWrapperEl = shallowRef<HTMLDivElement | null>(null);
-    const menuEl = shallowRef<HTMLDivElement | null>(null);
+    const isShow = ref(false);
+    const contextMenuX = ref(0);
+    const contextMenuY = ref(0);
+    const isShowCopyMsg = ref(false);
+    const copyMsg = ref('');
+    const isCopySuccess = ref(false);
 
     let contextMenuSubscriber: Subscription | null = null;
-
-    function onClickAction(key: string) {
-      emit('action', key);
+    let windowScrollSubscriber: Subscription | null = null;
+    let clearMsgTimeoutId: any = null;
+
+    const contextMenuActions = computed(() => [
+      { key: 'saveAs', label: '另存圖檔(.png)' },
+      { key: 'copy', label: '複製圖檔' },
+    ]);
+    const contextMenuStyle = computed(() => ({
+      top: `${contextMenuY.value}px`,
+      left: `${contextMenuX.value}px`,
+    }));
+
+    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 (!dataURL) {
+          console.log("Can not generate data URL!");
+          return;
+        }
+        downloadURL(dataURL, `${filename.value}.png`);
+      } 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);
+        if (!dataURL) {
+          console.log("Can not generate data URL!");
+          return;
+        }
+
+        const blob = dataURLtoBlob(dataURL);
+        const data = [new window.ClipboardItem({ 'image/png': blob })];
+
+        try {
+          await navigator.clipboard.write(data);
+          copyMsg.value = '成功複製圖檔到剪貼簿';
+          isShowCopyMsg.value = true;
+          isCopySuccess.value = true;
+        } catch (e) {
+          copyMsg.value = '無法複製圖檔到剪貼簿';
+          isShowCopyMsg.value = true;
+          isCopySuccess.value = false;
+        }
+      }
     }
 
     function show() {
-      menuWrapperEl.value?.classList.remove('hidden');
+      isShow.value = true;
     }
 
     function hide() {
-      menuWrapperEl.value?.classList.add('hidden');
+      isShow.value = false;
     }
 
     function onRightClick(e: PointerEvent) {
-      console.log(menuEl.value, actions.value);
-      if (!menuEl.value || !actions.value.length) {
+      if (!el.value || !el.value.parentElement) {
         return;
       }
 
       e.preventDefault();
-      menuEl.value.setAttribute('style', `top: ${e.clientY}px; left: ${e.clientX}px;`);
+      contextMenuX.value = e.clientX;
+      contextMenuY.value = e.clientY;
       show();
     }
 
-    function onMouseDown() {
+    function onClickModal() {
       hide();
     }
 
+    function timeoutClearMessage() {
+      if (clearMsgTimeoutId) {
+        clearTimeout(clearMsgTimeoutId);
+      }
+      clearMsgTimeoutId = setTimeout(() => {
+        copyMsg.value = '';
+      }, 300);
+    }
+
+    function subscribeScroll() {
+      if (window) {
+        windowScrollSubscriber = fromEvent(window, 'scroll').subscribe((e: Event) => {
+          e.preventDefault();
+        });
+      }
+    }
+
+    function unsubscribeScroll() {
+      if (windowScrollSubscriber) {
+        windowScrollSubscriber.unsubscribe();
+        windowScrollSubscriber = null;
+      }
+    }
+
+    watch(isShow, () => {
+      if (isShow.value) {
+        subscribeScroll();
+      } else {
+        unsubscribeScroll();
+      }
+    });
+
+    watch(isShowCopyMsg, () => {
+      if (!isShowCopyMsg.value) {
+        timeoutClearMessage();
+      }
+    });
+
     onMounted(() => {
       if (el.value && el.value.parentElement) {
         contextMenuSubscriber = fromEvent(el.value.parentElement, 'contextmenu').subscribe((e) => {
@@ -83,27 +191,41 @@ export default defineComponent({
         contextMenuSubscriber.unsubscribe();
       }
       contextMenuSubscriber = null;
+
+      unsubscribeScroll();
     });
 
     return {
       el,
-      menuWrapperEl,
-      menuEl,
+      isShow,
+      copyMsg,
+      isCopySuccess,
+      isShowCopyMsg,
+      contextMenuActions,
+      contextMenuStyle,
       onClickAction,
-      onMouseDown,
+      onClickModal,
     };
   },
 });
 </script>
 
-<style lang="stylus">
-.sl-context-menu-wrapper
-  @apply s('z-[9999]') fixed top-0 left-0 w-full h-full
+<style lang="stylus" scoped>
+.sl-context-menu-container
+  @apply fixed top-0 left-0 w-full h-full
+
+  &-modal
+    @apply absolute 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
+
+    &-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
-  @apply absolute 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
 
-  &-item
-    @apply block w-auto s('min-w-[160px]') p-3 bg-white text-base text-gray-2
-    @apply s('hover:bg-primary-100') s('hover:text-primary')
 </style>

package/components/SLDownloadButton.vue

@@ -30,10 +30,8 @@ import type { PropType } from "vue";
 import { fromEvent, Subscription } from "rxjs";
 import { createPopper } from "@popperjs/core";
 import type { Instance as PopperInstance, Placement } from "@popperjs/core";
-import * as htmlToImage from "html-to-image";
 import ExcelJS from "exceljs";
 import {
-  formatDateRange,
   downloadURL,
   downloadBlob,
   gaev,
@@ -243,20 +241,6 @@ export default defineComponent({
       }
     }
 
-    async function copyImageToClipboard() {
-      if (!navigator.clipboard) {
-        console.log("Can not copy image to clipboard!");
-        return;
-      }
-      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;
-      }
-
-      await navigator.clipboard.writeText(dataURL);
-    }
-
     onMounted(() => {
       nextTick(() => {
         if (buttonEl.value && popupEl.value) {
@@ -280,7 +264,6 @@ export default defineComponent({
       popupEl,
       onClickedToggle,
       onClickedOption,
-      copyImageToClipboard,
     };
   },
 });

package/components/SLToast.vue

@@ -1,7 +1,8 @@
 <template lang="pug">
 Transition(name='toast-fade')
   .toast(v-if='show')
-    .toast-wrapper {{ message }}
+    .toast-wrapper
+      slot(name='message') {{ message }}
 </template>
 
 <script lang="ts">

package/package.json

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

package/utils/index.ts

@@ -702,4 +702,16 @@ export const domToPngDataUrl = async (
     dataURL = await addDateRanges(dataURL, [...dateRanges].reverse());
   if (watermark) dataURL = await addWatermark(dataURL, watermarkImg);
   return dataURL;
-}
+}
+
+export const dataURLtoBlob = (dataurl: string) => {
+  const arr = dataurl.split(',');
+  const mime = arr[0].match(/:(.*?);/)[1];
+  const bstr = atob(arr[1]);
+  let n = bstr.length;
+  const u8arr = new Uint8Array(n);
+  while (n--) {
+    u8arr[n] = bstr.charCodeAt(n);
+  }
+  return new Blob([u8arr], { type: mime });
+}