fix: change default export to named export

docs/components/demo/DemoEditor.vue

@@ -48,7 +48,7 @@
 <script lang="ts">
 import { Quill } from "@vueup/vue-quill";
 import { Delta } from "types-quill-delta";
-import { defineComponent, watch, onMounted, ref } from "vue";
+import { defineComponent, watch, ref } from "vue";
 import VOptions from "../VOptions.vue";
 import { deltaContent } from "./delta-content";
 

rollup.config2.ts

@@ -0,0 +1,91 @@
+import resolve from '@rollup/plugin-node-resolve'
+import commonjs from '@rollup/plugin-commonjs'
+import sourceMaps from 'rollup-plugin-sourcemaps'
+import camelCase from 'lodash.camelcase'
+import typescript from 'rollup-plugin-typescript2'
+import json from 'rollup-plugin-json'
+import copy from 'rollup-plugin-copy'
+import { terser } from 'rollup-plugin-terser';
+const csso = require('csso');
+
+const pkg = require('./package.json')
+
+const libraryName = 'vue-quill'
+const mainEntryFile = 'src/main.ts'
+
+export default {
+  input: mainEntryFile,
+  output: [
+    {
+      file: pkg.module,
+      format: 'es',
+      sourcemap: true
+    },
+    {
+      file: pkg.main,
+      format: 'cjs',
+      sourcemap: true,
+      exports: 'named'
+    },
+    {
+      file: pkg.browser,
+      format: 'umd',
+      sourcemap: true,
+      exports: 'named',
+      name: camelCase(libraryName),
+      globals: { vue: 'Vue' },
+      plugins: [
+        terser(),
+        // Copy Quill css theme files to 'dist' directory
+        copy({
+          targets: [{
+            src: './node_modules/quill/dist/quill.core.css',
+            dest: './dist',
+            rename: 'vue-quill.core.css',
+            transform: (contents, filename) => {
+              return csso.minify(contents.toString()).css
+            }
+          },
+          {
+            src: './node_modules/quill/dist/quill.bubble.css',
+            dest: './dist',
+            rename: 'vue-quill.bubble.css',
+            transform: (contents, filename) => {
+              return csso.minify(contents.toString()).css
+            }
+          },
+          {
+            src: './src/themes/css/vue-quill.snow.css',
+            dest: './dist',
+            transform: (contents, filename) => {
+              return csso.minify(contents.toString()).css
+            }
+          }],
+          hook: 'writeBundle',
+          verbose: true,
+          copyOnce: true
+        })
+      ]
+    },
+  ],
+  // Indicate here external modules you don't wanna include in your bundle (i.e.: 'vue')
+  external: ['vue'],
+  watch: {
+    include: 'src/**',
+  },
+  plugins: [
+    // Allow json resolution
+    json(),
+    // Compile TypeScript files
+    typescript({ useTsconfigDeclarationDir: true }),
+    // Allow bundling cjs modules (unlike webpack, rollup doesn't understand cjs)
+    commonjs(),
+    // Allow node_modules resolution, so you can use 'external' to control
+    // which external modules to include in the bundle
+    // https://github.com/rollup/rollup-plugin-node-resolve#usage
+    resolve(),
+
+    // Resolve source maps to the original source
+    sourceMaps(),
+  ],
+}

src/components/QuillEditor.ts

@@ -18,9 +18,9 @@ import {
   ref,
   h,
 } from "vue";
-import { toolbarOptions } from "./options";
+import { toolbarOptions, ToolbarOptions } from "./options";
 
-export default defineComponent({
+export const QuillEditor = defineComponent({
   name: "QuillEditor",
   props: {
     content: {
@@ -136,8 +136,9 @@ export default defineComponent({
               const str = props.toolbar as string
               return str.charAt(0) === "#"
                 ? props.toolbar
-                : toolbarOptions[props.toolbar]
+                : toolbarOptions[props.toolbar as keyof ToolbarOptions]
             }
+            return
           })()
         }
       }
@@ -167,7 +168,7 @@ export default defineComponent({
       else ctx.emit("blur", editor);
     })
 
-    const handleEditorChange: EditorChangeHandler = (name: "text-change" | "selection-change", ...args) => {
+    const handleEditorChange: EditorChangeHandler = (name: "text-change" | "selection-change", ...args: any[]) => {
       if (name === "text-change") {
         ctx.emit(
           "editorChange",