@deot/vc-components 1.0.51 → 1.0.53

package/dist/index.js

@@ -51,6 +51,10 @@ const defaults$2 = {
   },
   TableColumn: {
     line: nil
+  },
+  Snapshot: {
+    source: nil,
+    download: nil
   }
 };
 
@@ -2361,23 +2365,23 @@ const InputNumber = /* @__PURE__ */ defineComponent({
         ...listeners
       }), {
         prepend: slots.prepend && (() => slots.prepend?.()),
-        append: props.step ? slots.append ? () => slots.append?.() : () => {
+        append: slots.append ? () => slots.append?.() : props.step ? () => {
           return createVNode("div", {
             "class": "vc-input-number__icon"
           }, [createVNode("div", {
             "class": "vc-input-number__up",
-            "disabled": plusDisabled.value ? 'disabled' : undefined,
+            "disabled": plusDisabled.value ? 'disabled' : void 0,
             "onClick": e => handleStepper(e, 1)
           }, [createVNode(Icon, {
             "type": "up"
           }, null)]), createVNode("div", {
             "class": "vc-input-number__down",
-            "disabled": minusDisabled.value ? 'disabled' : undefined,
+            "disabled": minusDisabled.value ? 'disabled' : void 0,
             "onClick": e => handleStepper(e, -1)
           }, [createVNode(Icon, {
             "type": "down"
           }, null)])]);
-        } : undefined
+        } : void 0
       });
     };
   }
@@ -12092,27 +12096,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__ */ defineComponent({
+const COMPONENT_NAME$Z = 'vc-snapshot';
+const Snapshot = /* @__PURE__ */ defineComponent({
   name: COMPONENT_NAME$Z,
   props: props$H,
+  emits: ['ready'],
   setup(props, {
-    slots
+    emit,
+    slots,
+    expose
   }) {
+    const instance = getCurrentInstance();
+    const current = ref();
+    const snapdom = 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
+    });
+    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 createVNode("div", {
-        "class": "vc-html-to-image"
+        "ref": current,
+        "class": "vc-snapshot"
       }, [slots?.default?.()]);
     };
   }
 });
 
-const MHTMLToImage = HTMLToImage;
+const MSnapshot = Snapshot;
 
 const MIcon = Icon;
 
@@ -23907,4 +23995,4 @@ const UploadPicker = /* @__PURE__ */ defineComponent({
 
 const MUploadPicker = UploadPicker;
 
-export { ActionSheet, Affix, Alert, Artboard, Button, ButtonGroup, Calendar, Card, Carousel, Cascader, Chart, Checkbox, CheckboxGroup, Clipboard, Collapse, CollapseItem, ColorPicker, Countdown, Customer, DatePicker, Debounce, Divider, Drawer, DrawerView, Dropdown, DropdownItem, DropdownMenu, Editor, EditorView, Expand$1 as Expand, Form, FormItem, Fragment, HTMLToImage, Icon, IconManager, Image$1 as Image, ImageCrop, ImagePreview, ImageProcessing, Input, InputNumber, InputSearch, MList as List, MListItem as ListItem, MActionSheet, MAffix, MAlert, MArtboard, MButton, MButtonGroup, MCalendar, MCard, MCarousel, MCascader, MChart, MCheckbox, MCheckboxGroup, MClipboard, MCollapse, MCollapseItem, MColorPicker, MCountdown, MCustomer, MDatePicker, Debounce as MDebounce, MDivider, MDrawer, MDrawerView, MDropdown, MDropdownItem, MDropdownMenu, MEditor, MEditorView, MExpand, MForm, MFormItem, MFragment, MHTMLToImage, MIcon, MImage, MImageCrop, MImagePreview, MImageProcessing, MInput, MInputNumber, MInputSearch, MList, MListItem, MMarquee, MMessage, modal as MModal, MModalView, MNotice, MOption, MPagination, MPicker, MPopconfirm, MPopover, MPopup, MPortal, MPrint, MProgress, MRadio, MRadioButton, MRadioGroup, MRate, MRecycleList, MResizer, MScroller, MSelect, MSlider, MSortList, MSpin, MSteps, MSwitch, MTable, MTableColumn, MTabs, MTabsPane, MTag, MText, MTextarea, MTimePicker, MTimeline, MToast, MToastView, MTouch, MTransition, MTransitionCollapse, MTransitionFade, MTransitionScale, MTransitionSlide, MTransitionZoom, MTree, MTreeSelect, MUpload, MUploadPicker, Marquee, Message, MessageView, Modal, ModalView, Notice, NoticeView, Option$1 as Option, Pagination, Picker, Popconfirm, Popover, Popup, Portal, PortalView, Print, Progress, Radio, RadioButton, RadioGroup, Rate, RecycleList, Resizer, Scroller, ScrollerWheel, Select, Slider, SortList, Spin, Steps, Switch, Table, TableColumn, Tabs, TabsPane, Tag, Text, Textarea, Theme, ThemeImage, ThemeText, ThemeView, TimePicker, Timeline, Toast, ToastView, Touch, Transition, TransitionCollapse, TransitionFade, TransitionScale, TransitionSlide, TransitionZoom, Tree, TreeSelect, Upload, UploadPicker, VcError, VcInstance };
+export { ActionSheet, Affix, Alert, Artboard, Button, ButtonGroup, Calendar, Card, Carousel, Cascader, Chart, Checkbox, CheckboxGroup, Clipboard, Collapse, CollapseItem, ColorPicker, Countdown, Customer, DatePicker, Debounce, Divider, Drawer, DrawerView, Dropdown, DropdownItem, DropdownMenu, Editor, EditorView, Expand$1 as Expand, Form, FormItem, Fragment, Icon, IconManager, Image$1 as Image, ImageCrop, ImagePreview, ImageProcessing, Input, InputNumber, InputSearch, MList as List, MListItem as ListItem, MActionSheet, MAffix, MAlert, MArtboard, MButton, MButtonGroup, MCalendar, MCard, MCarousel, MCascader, MChart, MCheckbox, MCheckboxGroup, MClipboard, MCollapse, MCollapseItem, MColorPicker, MCountdown, MCustomer, MDatePicker, Debounce as MDebounce, MDivider, MDrawer, MDrawerView, MDropdown, MDropdownItem, MDropdownMenu, MEditor, MEditorView, MExpand, MForm, MFormItem, MFragment, MIcon, MImage, MImageCrop, MImagePreview, MImageProcessing, MInput, MInputNumber, MInputSearch, MList, MListItem, MMarquee, MMessage, modal as MModal, MModalView, MNotice, MOption, MPagination, MPicker, MPopconfirm, MPopover, MPopup, MPortal, MPrint, MProgress, MRadio, MRadioButton, MRadioGroup, MRate, MRecycleList, MResizer, MScroller, MSelect, MSlider, MSnapshot, MSortList, MSpin, MSteps, MSwitch, MTable, MTableColumn, MTabs, MTabsPane, MTag, MText, MTextarea, MTimePicker, MTimeline, MToast, MToastView, MTouch, MTransition, MTransitionCollapse, MTransitionFade, MTransitionScale, MTransitionSlide, MTransitionZoom, MTree, MTreeSelect, MUpload, MUploadPicker, Marquee, Message, MessageView, Modal, ModalView, Notice, NoticeView, Option$1 as Option, Pagination, Picker, Popconfirm, Popover, Popup, Portal, PortalView, Print, Progress, Radio, RadioButton, RadioGroup, Rate, RecycleList, Resizer, Scroller, ScrollerWheel, Select, Slider, Snapshot, SortList, Spin, Steps, Switch, Table, TableColumn, Tabs, TabsPane, Tag, Text, Textarea, Theme, ThemeImage, ThemeText, ThemeView, TimePicker, Timeline, Toast, ToastView, Touch, Transition, TransitionCollapse, TransitionFade, TransitionScale, TransitionSlide, TransitionZoom, Tree, TreeSelect, Upload, UploadPicker, VcError, VcInstance };