@deot/vc-components 1.0.51 → 1.0.53

package/dist/index.cjs

@@ -73,6 +73,10 @@ const defaults$2 = {
   },
   TableColumn: {
     line: nil
+  },
+  Snapshot: {
+    source: nil,
+    download: nil
   }
 };
 
@@ -2383,23 +2387,23 @@ const InputNumber = /* @__PURE__ */ vue.defineComponent({
         ...listeners
       }), {
         prepend: slots.prepend && (() => slots.prepend?.()),
-        append: props.step ? slots.append ? () => slots.append?.() : () => {
+        append: slots.append ? () => slots.append?.() : props.step ? () => {
           return vue.createVNode("div", {
             "class": "vc-input-number__icon"
           }, [vue.createVNode("div", {
             "class": "vc-input-number__up",
-            "disabled": plusDisabled.value ? 'disabled' : undefined,
+            "disabled": plusDisabled.value ? 'disabled' : void 0,
             "onClick": e => handleStepper(e, 1)
           }, [vue.createVNode(Icon, {
             "type": "up"
           }, null)]), vue.createVNode("div", {
             "class": "vc-input-number__down",
-            "disabled": minusDisabled.value ? 'disabled' : undefined,
+            "disabled": minusDisabled.value ? 'disabled' : void 0,
             "onClick": e => handleStepper(e, -1)
           }, [vue.createVNode(Icon, {
             "type": "down"
           }, null)])]);
-        } : undefined
+        } : void 0
       });
     };
   }
@@ -12114,27 +12118,111 @@ const props$H = {
   tag: {
     type: String,
     default: "div"
+  },
+  // useCORS
+  crossOrigin: {
+    type: String,
+    // ''. 'anonymous', 'use-credentials'
+    default: "anonymous",
+    validator: (v) => /^(|anonymous|use-credentials)$/.test(v)
+  },
+  source: Function,
+  download: Function,
+  // 传递给snap-dom的配置项
+  options: {
+    type: Object,
+    default: () => ({})
   }
 };
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$Z = 'vc-html-to-image';
-const HTMLToImage = /* @__PURE__ */ vue.defineComponent({
+const COMPONENT_NAME$Z = 'vc-snapshot';
+const Snapshot = /* @__PURE__ */ vue.defineComponent({
   name: COMPONENT_NAME$Z,
   props: props$H,
+  emits: ['ready'],
   setup(props, {
-    slots
+    emit,
+    slots,
+    expose
   }) {
+    const instance = vue.getCurrentInstance();
+    const current = vue.ref();
+    const snapdom = vue.ref();
+
+    // 网络的图片如果没有加上crossOrigin，且没有放在第一个就会出现问题（Safari）
+    const refresh = async () => {
+      if (!props.crossOrigin) return;
+      const transformSource = props.source || VcInstance.options.Snapshot?.source || (v => v);
+      return Promise.all(Array.from(current.value.querySelectorAll('img')).map(node => {
+        return new Promise(resolve => {
+          (async () => {
+            let url;
+            try {
+              url = await transformSource(node.src, 'image');
+            } catch (e) {
+              console.error(e);
+            }
+            const image = new Image();
+            image.crossOrigin = props.crossOrigin;
+            image.src = `${url}?=${new Date().getTime()}`; // 强制不缓存
+            image.onload = () => {
+              node.src = image.src;
+              resolve(1);
+            };
+            image.onerror = () => resolve(0);
+          })();
+        });
+      }));
+    };
+    const toDataURL = async () => {
+      await refresh();
+      return snapdom.value.toRaw();
+    };
+    const download = async options => {
+      await refresh();
+      const _download = props.download || VcInstance.options.Snapshot?.download || (() => false);
+      const allow = _download(instance, options);
+      if (allow && allow.then) {
+        allow.catch(() => {
+          snapdom.value.download(options);
+        });
+        return;
+      }
+      allow || snapdom.value.download(options);
+    };
+    expose({
+      snapdom,
+      refresh,
+      toDataURL,
+      download
+    });
+    vue.onMounted(async () => {
+      try {
+        let snapDOM = window.snapdom || (await import('@zumer/snapdom'));
+        snapDOM = snapDOM.snapdom || snapDOM;
+        snapdom.value = await snapDOM(current.value, props.options);
+        emit('ready', {
+          instance,
+          dependencies: {
+            snapDOM
+          }
+        });
+      } catch (e) {
+        throw new VcError('snapshot', e);
+      }
+    });
     return () => {
       return vue.createVNode("div", {
-        "class": "vc-html-to-image"
+        "ref": current,
+        "class": "vc-snapshot"
       }, [slots?.default?.()]);
     };
   }
 });
 
-const MHTMLToImage = HTMLToImage;
+const MSnapshot = Snapshot;
 
 const MIcon = Icon;
 
@@ -23962,7 +24050,6 @@ exports.Expand = Expand$1;
 exports.Form = Form;
 exports.FormItem = FormItem;
 exports.Fragment = Fragment;
-exports.HTMLToImage = HTMLToImage;
 exports.Icon = Icon;
 exports.IconManager = IconManager;
 exports.Image = Image$1;
@@ -24007,7 +24094,6 @@ exports.MExpand = MExpand;
 exports.MForm = MForm;
 exports.MFormItem = MFormItem;
 exports.MFragment = MFragment;
-exports.MHTMLToImage = MHTMLToImage;
 exports.MIcon = MIcon;
 exports.MImage = MImage;
 exports.MImageCrop = MImageCrop;
@@ -24041,6 +24127,7 @@ exports.MResizer = MResizer;
 exports.MScroller = MScroller;
 exports.MSelect = MSelect;
 exports.MSlider = MSlider;
+exports.MSnapshot = MSnapshot;
 exports.MSortList = MSortList;
 exports.MSpin = MSpin;
 exports.MSteps = MSteps;
@@ -24094,6 +24181,7 @@ exports.Scroller = Scroller;
 exports.ScrollerWheel = ScrollerWheel;
 exports.Select = Select;
 exports.Slider = Slider;
+exports.Snapshot = Snapshot;
 exports.SortList = SortList;
 exports.Spin = Spin;
 exports.Steps = Steps;

package/dist/index.d.ts

@@ -2082,20 +2082,6 @@ export declare const Fragment: DefineComponent<    {}, () => VNode<RendererNode,
 [key: string]: any;
 }>, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
-export declare const HTMLToImage: DefineComponent<ExtractPropTypes<    {
-tag: {
-type: StringConstructor;
-default: string;
-};
-}>, () => JSX_2.Element, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
-tag: {
-type: StringConstructor;
-default: string;
-};
-}>> & Readonly<{}>, {
-tag: string;
-}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
-
 export declare const Icon: DefineComponent<ExtractPropTypes<    {
 type: StringConstructor;
 inherit: {
@@ -5001,20 +4987,6 @@ export declare const MFragment: DefineComponent<    {}, () => VNode<RendererNode
 [key: string]: any;
 }>, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
-export declare const MHTMLToImage: DefineComponent<ExtractPropTypes<    {
-tag: {
-type: StringConstructor;
-default: string;
-};
-}>, () => JSX_2.Element, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
-tag: {
-type: StringConstructor;
-default: string;
-};
-}>> & Readonly<{}>, {
-tag: string;
-}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
-
 export declare const MIcon: DefineComponent<ExtractPropTypes<    {
 type: StringConstructor;
 inherit: {
@@ -8445,6 +8417,46 @@ default: string;
 tag: string;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
+export declare const MSnapshot: DefineComponent<ExtractPropTypes<    {
+tag: {
+type: StringConstructor;
+default: string;
+};
+crossOrigin: {
+type: StringConstructor;
+default: string;
+validator: (v: any) => boolean;
+};
+source: FunctionConstructor;
+download: FunctionConstructor;
+options: {
+type: ObjectConstructor;
+default: () => {};
+};
+}>, () => JSX_2.Element, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, "ready"[], "ready", PublicProps, Readonly<ExtractPropTypes<    {
+tag: {
+type: StringConstructor;
+default: string;
+};
+crossOrigin: {
+type: StringConstructor;
+default: string;
+validator: (v: any) => boolean;
+};
+source: FunctionConstructor;
+download: FunctionConstructor;
+options: {
+type: ObjectConstructor;
+default: () => {};
+};
+}>> & Readonly<{
+onReady?: ((...args: any[]) => any) | undefined;
+}>, {
+tag: string;
+options: Record<string, any>;
+crossOrigin: string;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+
 export declare const MSortList: DefineComponent<ExtractPropTypes<    {
 tag: {
 type: StringConstructor;
@@ -13288,6 +13300,46 @@ default: string;
 tag: string;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
+export declare const Snapshot: DefineComponent<ExtractPropTypes<    {
+tag: {
+type: StringConstructor;
+default: string;
+};
+crossOrigin: {
+type: StringConstructor;
+default: string;
+validator: (v: any) => boolean;
+};
+source: FunctionConstructor;
+download: FunctionConstructor;
+options: {
+type: ObjectConstructor;
+default: () => {};
+};
+}>, () => JSX_2.Element, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, "ready"[], "ready", PublicProps, Readonly<ExtractPropTypes<    {
+tag: {
+type: StringConstructor;
+default: string;
+};
+crossOrigin: {
+type: StringConstructor;
+default: string;
+validator: (v: any) => boolean;
+};
+source: FunctionConstructor;
+download: FunctionConstructor;
+options: {
+type: ObjectConstructor;
+default: () => {};
+};
+}>> & Readonly<{
+onReady?: ((...args: any[]) => any) | undefined;
+}>, {
+tag: string;
+options: Record<string, any>;
+crossOrigin: string;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+
 export declare const SortList: DefineComponent<ExtractPropTypes<    {
 tag: {
 type: StringConstructor;