@deot/vc 1.0.54 → 1.0.56

package/dist/index.d.ts

@@ -4110,10 +4110,18 @@ export declare const Components: {
     crossOrigin: {
     type: StringConstructor;
     default: string;
-    validator: (v: any) => boolean;
+    validator: (v: string) => boolean;
     };
     source: FunctionConstructor;
     download: FunctionConstructor;
+    lazy: {
+    type: BooleanConstructor;
+    default: boolean;
+    };
+    showLoading: {
+    type: BooleanConstructor;
+    default: boolean;
+    };
     options: {
     type: ObjectConstructor;
     default: () => {};
@@ -4126,10 +4134,18 @@ export declare const Components: {
     crossOrigin: {
     type: StringConstructor;
     default: string;
-    validator: (v: any) => boolean;
+    validator: (v: string) => boolean;
     };
     source: FunctionConstructor;
     download: FunctionConstructor;
+    lazy: {
+    type: BooleanConstructor;
+    default: boolean;
+    };
+    showLoading: {
+    type: BooleanConstructor;
+    default: boolean;
+    };
     options: {
     type: ObjectConstructor;
     default: () => {};
@@ -4139,7 +4155,9 @@ export declare const Components: {
     }>, {
     tag: string;
     options: Record<string, any>;
+    showLoading: boolean;
     crossOrigin: string;
+    lazy: boolean;
     }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
     MSnapshot: DefineComponent<ExtractPropTypes<    {
     tag: {
@@ -4149,10 +4167,18 @@ export declare const Components: {
     crossOrigin: {
     type: StringConstructor;
     default: string;
-    validator: (v: any) => boolean;
+    validator: (v: string) => boolean;
     };
     source: FunctionConstructor;
     download: FunctionConstructor;
+    lazy: {
+    type: BooleanConstructor;
+    default: boolean;
+    };
+    showLoading: {
+    type: BooleanConstructor;
+    default: boolean;
+    };
     options: {
     type: ObjectConstructor;
     default: () => {};
@@ -4165,10 +4191,18 @@ export declare const Components: {
     crossOrigin: {
     type: StringConstructor;
     default: string;
-    validator: (v: any) => boolean;
+    validator: (v: string) => boolean;
     };
     source: FunctionConstructor;
     download: FunctionConstructor;
+    lazy: {
+    type: BooleanConstructor;
+    default: boolean;
+    };
+    showLoading: {
+    type: BooleanConstructor;
+    default: boolean;
+    };
     options: {
     type: ObjectConstructor;
     default: () => {};
@@ -4178,7 +4212,9 @@ export declare const Components: {
     }>, {
     tag: string;
     options: Record<string, any>;
+    showLoading: boolean;
     crossOrigin: string;
+    lazy: boolean;
     }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
     Icon: DefineComponent<ExtractPropTypes<    {
     type: StringConstructor;

package/dist/index.iife.js

@@ -9104,6 +9104,7 @@ var Vc = (function (exports, vue) {
       line: nil
     },
     Snapshot: {
+      options: nil,
       source: nil,
       download: nil
     }
@@ -18573,23 +18574,16 @@ var Vc = (function (exports, vue) {
 				.ql-snow .ql-font-size.ql-picker .ql-picker-label[data-value="${fontSize}"]:before {
 					content: "${fontSize}"
 				}`;
-      pre += `.ql-editor .ql-font-size-${fontSize} {
-					font-size: ${fontSize};
-				}`;
       return pre;
     }, "");
     return style(code, { id });
   };
   const insertLineHeightStyle = (value, id) => {
     const code = value.reduce((pre, lineHeight) => {
-      const classLineHeightValue = +lineHeight * 10;
-      pre += `.ql-snow .ql-line-height.ql-picker .ql-picker-item[data-value="${classLineHeightValue}"]:before,
-				.ql-snow .ql-line-height.ql-picker .ql-picker-label[data-value="${classLineHeightValue}"]:before {
+      pre += `.ql-snow .ql-line-height.ql-picker .ql-picker-item[data-value="${lineHeight}"]:before,
+				.ql-snow .ql-line-height.ql-picker .ql-picker-label[data-value="${lineHeight}"]:before {
 					content: "${+lineHeight}" 
 				}`;
-      pre += `.ql-editor .ql-line-height-${classLineHeightValue} {
-					line-height: ${+lineHeight};
-				}`;
       return pre;
     }, "");
     return style(code, { id });
@@ -18600,9 +18594,6 @@ var Vc = (function (exports, vue) {
 				.ql-snow .ql-letter-spacing.ql-picker .ql-picker-label[data-value="${letterSpacing}"]:before {
 					content: "${letterSpacing}"
 				}`;
-      pre += `.ql-editor .ql-letter-spacing-${letterSpacing} {
-					letter-spacing: ${letterSpacing};
-				}`;
       return pre;
     }, "");
     return style(code, { id });
@@ -18786,9 +18777,8 @@ var Vc = (function (exports, vue) {
                     "selected": true
                   }, null);
                 }
-                const v = key === "line-height" ? +it * 10 : it;
                 return vue.createVNode("option", {
-                  "value": `${v}`
+                  "value": `${it}`
                 }, null);
               })]);
             }
@@ -18801,16 +18791,18 @@ var Vc = (function (exports, vue) {
           if (Array.isArray(item)) {
             return insertStyle(item);
           }
+          let key = item;
+          let value = [];
           if (typeof item === "object") {
-            const [key, value] = Object.entries(item)[0];
-            const options = value.length && value || toolbarDefaultsMap[key];
-            if (key === "font-size") {
-              insertFontSizeStyle(options, styleId);
-            } else if (key === "line-height") {
-              insertLineHeightStyle(options, lineHeightStyleId);
-            } else if (key === "letter-spacing") {
-              insertLetterSpacingStyle(options, letterSpacingStyleId);
-            }
+            [key, value] = Object.entries(item)[0];
+          }
+          value = value.length && value || toolbarDefaultsMap[key];
+          if (key === "font-size" && Array.isArray(value)) {
+            insertFontSizeStyle(value, styleId);
+          } else if (key === "line-height") {
+            insertLineHeightStyle(value, lineHeightStyleId);
+          } else if (key === "letter-spacing") {
+            insertLetterSpacingStyle(value, letterSpacingStyleId);
           }
         });
       };
@@ -18888,20 +18880,19 @@ var Vc = (function (exports, vue) {
   };
   const registerLineHeight = (quillInstance) => {
     const lineHeight = toolbarDefaultsMap["line-height"];
-    const whitelist = lineHeight.map((i) => String(+i * 10));
     const Parchment = quillInstance.import("parchment");
-    const lineHeightStyle = new Parchment.ClassAttributor(
+    const lineHeightStyle = new Parchment.StyleAttributor(
+      "line-height",
       "line-height",
-      "ql-line-height",
-      { scope: Parchment.Scope.INLINE, whitelist }
+      { scope: Parchment.Scope.INLINE, whitelist: lineHeight }
     );
     quillInstance.register({ "formats/line-height": lineHeightStyle }, true);
   };
   const registerLetterSpacing = (quillInstance) => {
     const Parchment = quillInstance.import("parchment");
-    const letterSpacingStyle = new Parchment.ClassAttributor(
+    const letterSpacingStyle = new Parchment.StyleAttributor(
+      "letter-spacing",
       "letter-spacing",
-      "ql-letter-spacing",
       {
         scope: Parchment.Scope.INLINE,
         whitelist: toolbarDefaultsMap["letter-spacing"]
@@ -19570,18 +19561,12 @@ var Vc = (function (exports, vue) {
   const registerFontSize = (editor) => {
     const Parchment = editor.import("parchment");
     const fontSize = toolbarDefaultsMap["font-size"];
-    const SizeClass = new Parchment.ClassAttributor("font-size", "ql-font-size", {
-      scope: Parchment.Scope.INLINE,
-      whitelist: fontSize
-    });
     const SizeStyle = new Parchment.StyleAttributor("font-size", "font-size", {
       scope: Parchment.Scope.INLINE,
       whitelist: fontSize
     });
     editor.register({
-      "formats/font-size": SizeClass,
-      "attributors/class/font-size": SizeClass,
-      "attributors/style/font-size": SizeStyle
+      "formats/font-size": SizeStyle
     }, true);
   };
   const registerExtends = (e) => {
@@ -19634,6 +19619,7 @@ var Vc = (function (exports, vue) {
   const Editor$1 = /* @__PURE__ */ vue.defineComponent({
     name: COMPONENT_NAME$14,
     props: props$M,
+    defaults: defaults$3,
     emits: ["ready", "blur", "focus", "input", "update:modelValue", "change"],
     setup(props2, {
       slots,
@@ -20557,6 +20543,14 @@ var Vc = (function (exports, vue) {
     },
     source: Function,
     download: Function,
+    lazy: {
+      type: Boolean,
+      default: true
+    },
+    showLoading: {
+      type: Boolean,
+      default: true
+    },
     // 传递给snap-dom的配置项
     options: {
       type: Object,
@@ -20576,34 +20570,59 @@ var Vc = (function (exports, vue) {
       let snapDOM;
       const instance = vue.getCurrentInstance();
       const current = vue.ref();
-      const snapdom = vue.ref();
+      const snapshot = vue.ref();
       const refresh = async () => {
         await vue.nextTick();
-        snapdom.value = await snapDOM(current.value, props2.options);
-        return snapdom.value;
+        snapshot.value = await snapDOM(current.value, {
+          fast: false,
+          // dom太大时会卡死一会儿
+          ...VcInstance.options.Snapshot?.options,
+          ...props2.options
+        });
+        return snapshot.value;
+      };
+      const onLoad = () => {
+        return props2.showLoading && Message.loading("正在生成...");
+      };
+      const onLoaded = (ctx) => {
+        ctx?.destroy?.();
       };
       const toDataURL = async () => {
+        const loadContext = onLoad();
+        try {
+          await refresh();
+          return snapshot.value.toRaw();
+        } finally {
+          onLoaded(loadContext);
+        }
+      };
+      const downloadByDefault = async (options) => {
         await refresh();
-        return snapdom.value.toRaw();
+        return snapshot.value.download(options);
       };
       const download = async (options) => {
-        await refresh();
-        const _download = props2.download || VcInstance.options.Snapshot?.download || (() => false);
-        const skip = _download(instance, options);
+        const loadContext = onLoad();
+        const downloadByUser = props2.download || VcInstance.options.Snapshot?.download || (() => false);
+        const skip = downloadByUser(instance, options);
+        const done = async (v) => {
+          try {
+            v || await downloadByDefault(options);
+          } finally {
+            onLoaded(loadContext);
+          }
+        };
         if (skip && skip.then) {
           let skip$ = false;
           skip.then((v) => {
             skip$ = typeof v === "undefined" ? true : !!v;
             return v;
-          }).finally(() => {
-            skip$ || snapdom.value.download(options);
-          });
+          }).finally(() => done(skip$));
           return;
         }
-        skip || snapdom.value.download(options);
+        done(skip);
       };
       expose({
-        snapdom,
+        snapshot,
         refresh,
         toDataURL,
         download
@@ -20612,7 +20631,7 @@ var Vc = (function (exports, vue) {
         try {
           snapDOM = window.snapdom || await Promise.resolve().then(() => snapdom$1);
           snapDOM = snapDOM.snapdom || snapDOM;
-          await refresh();
+          !props2.lazy && await refresh();
           emit("ready", {
             instance,
             dependencies: {

package/dist/index.umd.cjs

@@ -9107,6 +9107,7 @@
       line: nil
     },
     Snapshot: {
+      options: nil,
       source: nil,
       download: nil
     }
@@ -18576,23 +18577,16 @@
 				.ql-snow .ql-font-size.ql-picker .ql-picker-label[data-value="${fontSize}"]:before {
 					content: "${fontSize}"
 				}`;
-      pre += `.ql-editor .ql-font-size-${fontSize} {
-					font-size: ${fontSize};
-				}`;
       return pre;
     }, "");
     return style(code, { id });
   };
   const insertLineHeightStyle = (value, id) => {
     const code = value.reduce((pre, lineHeight) => {
-      const classLineHeightValue = +lineHeight * 10;
-      pre += `.ql-snow .ql-line-height.ql-picker .ql-picker-item[data-value="${classLineHeightValue}"]:before,
-				.ql-snow .ql-line-height.ql-picker .ql-picker-label[data-value="${classLineHeightValue}"]:before {
+      pre += `.ql-snow .ql-line-height.ql-picker .ql-picker-item[data-value="${lineHeight}"]:before,
+				.ql-snow .ql-line-height.ql-picker .ql-picker-label[data-value="${lineHeight}"]:before {
 					content: "${+lineHeight}" 
 				}`;
-      pre += `.ql-editor .ql-line-height-${classLineHeightValue} {
-					line-height: ${+lineHeight};
-				}`;
       return pre;
     }, "");
     return style(code, { id });
@@ -18603,9 +18597,6 @@
 				.ql-snow .ql-letter-spacing.ql-picker .ql-picker-label[data-value="${letterSpacing}"]:before {
 					content: "${letterSpacing}"
 				}`;
-      pre += `.ql-editor .ql-letter-spacing-${letterSpacing} {
-					letter-spacing: ${letterSpacing};
-				}`;
       return pre;
     }, "");
     return style(code, { id });
@@ -18789,9 +18780,8 @@
                     "selected": true
                   }, null);
                 }
-                const v = key === "line-height" ? +it * 10 : it;
                 return vue.createVNode("option", {
-                  "value": `${v}`
+                  "value": `${it}`
                 }, null);
               })]);
             }
@@ -18804,16 +18794,18 @@
           if (Array.isArray(item)) {
             return insertStyle(item);
           }
+          let key = item;
+          let value = [];
           if (typeof item === "object") {
-            const [key, value] = Object.entries(item)[0];
-            const options = value.length && value || toolbarDefaultsMap[key];
-            if (key === "font-size") {
-              insertFontSizeStyle(options, styleId);
-            } else if (key === "line-height") {
-              insertLineHeightStyle(options, lineHeightStyleId);
-            } else if (key === "letter-spacing") {
-              insertLetterSpacingStyle(options, letterSpacingStyleId);
-            }
+            [key, value] = Object.entries(item)[0];
+          }
+          value = value.length && value || toolbarDefaultsMap[key];
+          if (key === "font-size" && Array.isArray(value)) {
+            insertFontSizeStyle(value, styleId);
+          } else if (key === "line-height") {
+            insertLineHeightStyle(value, lineHeightStyleId);
+          } else if (key === "letter-spacing") {
+            insertLetterSpacingStyle(value, letterSpacingStyleId);
           }
         });
       };
@@ -18891,20 +18883,19 @@
   };
   const registerLineHeight = (quillInstance) => {
     const lineHeight = toolbarDefaultsMap["line-height"];
-    const whitelist = lineHeight.map((i) => String(+i * 10));
     const Parchment = quillInstance.import("parchment");
-    const lineHeightStyle = new Parchment.ClassAttributor(
+    const lineHeightStyle = new Parchment.StyleAttributor(
+      "line-height",
       "line-height",
-      "ql-line-height",
-      { scope: Parchment.Scope.INLINE, whitelist }
+      { scope: Parchment.Scope.INLINE, whitelist: lineHeight }
     );
     quillInstance.register({ "formats/line-height": lineHeightStyle }, true);
   };
   const registerLetterSpacing = (quillInstance) => {
     const Parchment = quillInstance.import("parchment");
-    const letterSpacingStyle = new Parchment.ClassAttributor(
+    const letterSpacingStyle = new Parchment.StyleAttributor(
+      "letter-spacing",
       "letter-spacing",
-      "ql-letter-spacing",
       {
         scope: Parchment.Scope.INLINE,
         whitelist: toolbarDefaultsMap["letter-spacing"]
@@ -19573,18 +19564,12 @@
   const registerFontSize = (editor) => {
     const Parchment = editor.import("parchment");
     const fontSize = toolbarDefaultsMap["font-size"];
-    const SizeClass = new Parchment.ClassAttributor("font-size", "ql-font-size", {
-      scope: Parchment.Scope.INLINE,
-      whitelist: fontSize
-    });
     const SizeStyle = new Parchment.StyleAttributor("font-size", "font-size", {
       scope: Parchment.Scope.INLINE,
       whitelist: fontSize
     });
     editor.register({
-      "formats/font-size": SizeClass,
-      "attributors/class/font-size": SizeClass,
-      "attributors/style/font-size": SizeStyle
+      "formats/font-size": SizeStyle
     }, true);
   };
   const registerExtends = (e) => {
@@ -19637,6 +19622,7 @@
   const Editor$1 = /* @__PURE__ */ vue.defineComponent({
     name: COMPONENT_NAME$14,
     props: props$M,
+    defaults: defaults$3,
     emits: ["ready", "blur", "focus", "input", "update:modelValue", "change"],
     setup(props2, {
       slots,
@@ -20560,6 +20546,14 @@
     },
     source: Function,
     download: Function,
+    lazy: {
+      type: Boolean,
+      default: true
+    },
+    showLoading: {
+      type: Boolean,
+      default: true
+    },
     // 传递给snap-dom的配置项
     options: {
       type: Object,
@@ -20579,34 +20573,59 @@
       let snapDOM;
       const instance = vue.getCurrentInstance();
       const current = vue.ref();
-      const snapdom = vue.ref();
+      const snapshot = vue.ref();
       const refresh = async () => {
         await vue.nextTick();
-        snapdom.value = await snapDOM(current.value, props2.options);
-        return snapdom.value;
+        snapshot.value = await snapDOM(current.value, {
+          fast: false,
+          // dom太大时会卡死一会儿
+          ...VcInstance.options.Snapshot?.options,
+          ...props2.options
+        });
+        return snapshot.value;
+      };
+      const onLoad = () => {
+        return props2.showLoading && Message.loading("正在生成...");
+      };
+      const onLoaded = (ctx) => {
+        ctx?.destroy?.();
       };
       const toDataURL = async () => {
+        const loadContext = onLoad();
+        try {
+          await refresh();
+          return snapshot.value.toRaw();
+        } finally {
+          onLoaded(loadContext);
+        }
+      };
+      const downloadByDefault = async (options) => {
         await refresh();
-        return snapdom.value.toRaw();
+        return snapshot.value.download(options);
       };
       const download = async (options) => {
-        await refresh();
-        const _download = props2.download || VcInstance.options.Snapshot?.download || (() => false);
-        const skip = _download(instance, options);
+        const loadContext = onLoad();
+        const downloadByUser = props2.download || VcInstance.options.Snapshot?.download || (() => false);
+        const skip = downloadByUser(instance, options);
+        const done = async (v) => {
+          try {
+            v || await downloadByDefault(options);
+          } finally {
+            onLoaded(loadContext);
+          }
+        };
         if (skip && skip.then) {
           let skip$ = false;
           skip.then((v) => {
             skip$ = typeof v === "undefined" ? true : !!v;
             return v;
-          }).finally(() => {
-            skip$ || snapdom.value.download(options);
-          });
+          }).finally(() => done(skip$));
           return;
         }
-        skip || snapdom.value.download(options);
+        done(skip);
       };
       expose({
-        snapdom,
+        snapshot,
         refresh,
         toDataURL,
         download
@@ -20615,7 +20634,7 @@
         try {
           snapDOM = window.snapdom || await Promise.resolve().then(() => snapdom$1);
           snapDOM = snapDOM.snapdom || snapDOM;
-          await refresh();
+          !props2.lazy && await refresh();
           emit("ready", {
             instance,
             dependencies: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deot/vc",
-  "version": "1.0.54",
+  "version": "1.0.56",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -19,9 +19,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@deot/vc-components": "^1.0.54",
-    "@deot/vc-hooks": "^1.0.54",
-    "@deot/vc-shared": "^1.0.54"
+    "@deot/vc-components": "^1.0.56",
+    "@deot/vc-hooks": "^1.0.56",
+    "@deot/vc-shared": "^1.0.56"
   },
   "peerDependencies": {
     "vue": "*"