@fishawack/lab-velocity 1.11.1 → 2.0.0-beta.10

package/{form → _Build/vue/components/form}/Upload.vue

@@ -28,8 +28,7 @@
             <template #tip>
                 <slot name="tip" />
             </template>
-            <slot name="default">
-            </slot>
+            <slot name="default"> </slot>
         </el-upload>
     </XInput>
 </template>
@@ -58,7 +57,7 @@ export default {
         },
         autoUpload: {
             type: Boolean,
-            default: false
+            default: false,
         },
         onExceed: {
             type: Function,
@@ -96,8 +95,7 @@ export default {
         },
         handleStart(file) {
             this.$refs.upload.handleStart(file);
-        }
-    }
-
+        },
+    },
 };
 </script>

package/{form → _Build/vue/components/form}/Wysiwyg.vue

@@ -11,7 +11,7 @@
 import Quill from "quill";
 import input from "./input.js";
 import XInput from "./input.vue";
-import sanitizeHtml from 'sanitize-html';
+import sanitizeHtml from "sanitize-html";
 
 export default {
     mixins: [input],
@@ -51,10 +51,10 @@ export default {
             return this.editor.getText().trim() === "" // Quill leaves <p></br></p> on empty input so ignore
                 ? ""
                 : this.simple // Simple editor removes outer tags and only allows inner phrasing tags
-                ? [...this.editor.root.children]
-                      .map((d) => d.innerHTML)
-                      .join("\n")
-                : this.editor.root.innerHTML;
+                  ? [...this.editor.root.children]
+                        .map((d) => d.innerHTML)
+                        .join("\n")
+                  : this.editor.root.innerHTML;
         },
         setValue() {
             const temp =
@@ -65,19 +65,19 @@ export default {
         },
         // Function to remove p tags from inside li tags, breaks the wysiwyg
         formatCleaner(unformmatted) {
-            if(!unformmatted) {
+            if (!unformmatted) {
                 return "";
             }
-            let parser = document.createElement('div');
-            parser.innerHTML = unformmatted.replace(/(\r\n|\n|\r|\t)/gm,"");
-            const lists = parser.getElementsByTagName('ul');
-            for(var x = 0; x < lists.length; x++) {
+            let parser = document.createElement("div");
+            parser.innerHTML = unformmatted.replace(/(\r\n|\n|\r|\t)/gm, "");
+            const lists = parser.getElementsByTagName("ul");
+            for (var x = 0; x < lists.length; x++) {
                 lists[x].innerHTML = sanitizeHtml(lists[x].innerHTML, {
-                    allowedTags: [ 'b', 'i', 'em', 'strong', 'a','li']
+                    allowedTags: ["b", "i", "em", "strong", "a", "li"],
                 });
             }
             return parser.innerHTML;
-        }
+        },
     },
 
     mounted() {
@@ -100,7 +100,7 @@ export default {
                         this.simple ? undefined : { list: "ordered" },
                         this.simple ? undefined : { list: "bullet" },
                         "clean",
-                        "link"
+                        "link",
                     ],
                 ],
             },
@@ -120,7 +120,7 @@ export default {
 
         // Disable tab index on toolbar buttons
         [...this.$el.querySelectorAll(".ql-toolbar button")].forEach((d) =>
-            d.setAttribute("tabindex", -1)
+            d.setAttribute("tabindex", -1),
         );
     },
 };

package/_Build/vue/components/form/Wysiwyg2.vue

@@ -0,0 +1,577 @@
+<template>
+    <XInput v-bind="$props" class="vel-wysiwyg">
+        <template #label>
+            <slot name="label" />
+        </template>
+        <div class="control-group vel-wysiwyg__controls" v-if="editor">
+            <el-dropdown>
+                Heading
+                <template #dropdown>
+                    <el-dropdown-menu>
+                        <el-dropdown-item
+                            @click="
+                                editor
+                                    .chain()
+                                    .focus()
+                                    .toggleHeading({ level: 1 })
+                                    .run()
+                            "
+                            :class="{
+                                'is-active': editor.isActive('heading', {
+                                    level: 1,
+                                }),
+                            }"
+                        >
+                            H1
+                        </el-dropdown-item>
+                        <el-dropdown-item
+                            @click="
+                                editor
+                                    .chain()
+                                    .focus()
+                                    .toggleHeading({ level: 2 })
+                                    .run()
+                            "
+                            :class="{
+                                'is-active': editor.isActive('heading', {
+                                    level: 2,
+                                }),
+                            }"
+                        >
+                            H2
+                        </el-dropdown-item>
+                        <el-dropdown-item
+                            @click="
+                                editor
+                                    .chain()
+                                    .focus()
+                                    .toggleHeading({ level: 3 })
+                                    .run()
+                            "
+                            :class="{
+                                'is-active': editor.isActive('heading', {
+                                    level: 3,
+                                }),
+                            }"
+                        >
+                            H3
+                        </el-dropdown-item>
+                        <el-dropdown-item
+                            @click="
+                                editor
+                                    .chain()
+                                    .focus()
+                                    .toggleHeading({ level: 4 })
+                                    .run()
+                            "
+                            :class="{
+                                'is-active': editor.isActive('heading', {
+                                    level: 4,
+                                }),
+                            }"
+                        >
+                            H4
+                        </el-dropdown-item>
+                        <el-dropdown-item
+                            @click="
+                                editor
+                                    .chain()
+                                    .focus()
+                                    .toggleHeading({ level: 5 })
+                                    .run()
+                            "
+                            :class="{
+                                'is-active': editor.isActive('heading', {
+                                    level: 5,
+                                }),
+                            }"
+                        >
+                            H5
+                        </el-dropdown-item>
+                        <el-dropdown-item
+                            @click="
+                                editor
+                                    .chain()
+                                    .focus()
+                                    .toggleHeading({ level: 6 })
+                                    .run()
+                            "
+                            :class="{
+                                'is-active': editor.isActive('heading', {
+                                    level: 6,
+                                }),
+                            }"
+                        >
+                            H6
+                        </el-dropdown-item>
+                        <el-dropdown-item
+                            @click="editor.chain().focus().setParagraph().run()"
+                            :class="{
+                                'is-active': editor.isActive('paragraph'),
+                            }"
+                        >
+                            Paragraph
+                        </el-dropdown-item>
+                    </el-dropdown-menu>
+                </template>
+            </el-dropdown>
+            <el-dropdown>
+                Style
+                <template #dropdown>
+                    <el-dropdown-menu>
+                        <el-dropdown-item
+                            class="vel-wysiwyg__button"
+                            @click="editor.chain().focus().toggleBold().run()"
+                            :disabled="
+                                !editor.can().chain().focus().toggleBold().run()
+                            "
+                            :class="{ 'is-active': editor.isActive('bold') }"
+                            >Bold</el-dropdown-item
+                        >
+                        <el-dropdown-item
+                            class="vel-wysiwyg__button"
+                            @click="editor.chain().focus().toggleItalic().run()"
+                            :disabled="
+                                !editor
+                                    .can()
+                                    .chain()
+                                    .focus()
+                                    .toggleItalic()
+                                    .run()
+                            "
+                            :class="{ 'is-active': editor.isActive('italic') }"
+                            >Italic</el-dropdown-item
+                        >
+                        <el-dropdown-item
+                            class="vel-wysiwyg__button"
+                            @click="
+                                editor.chain().focus().toggleUnderline().run()
+                            "
+                            :disabled="
+                                !editor
+                                    .can()
+                                    .chain()
+                                    .focus()
+                                    .toggleUnderline()
+                                    .run()
+                            "
+                            :class="{
+                                'is-active': editor.isActive('underline'),
+                            }"
+                            >Underline</el-dropdown-item
+                        >
+                    </el-dropdown-menu>
+                </template>
+            </el-dropdown>
+            <el-dropdown v-if="table">
+                Table
+                <template #dropdown>
+                    <el-dropdown-menu>
+                        <el-dropdown-item
+                            @click="
+                                editor
+                                    .chain()
+                                    .focus()
+                                    .insertTable({
+                                        rows: 3,
+                                        cols: 3,
+                                        withHeaderRow: true,
+                                    })
+                                    .run()
+                            "
+                        >
+                            Insert table
+                        </el-dropdown-item>
+                        <el-dropdown-item
+                            @click="
+                                editor.chain().focus().addColumnBefore().run()
+                            "
+                        >
+                            Add column before
+                        </el-dropdown-item>
+                        <el-dropdown-item
+                            @click="
+                                editor.chain().focus().addColumnAfter().run()
+                            "
+                        >
+                            Add column after
+                        </el-dropdown-item>
+                        <el-dropdown-item
+                            @click="editor.chain().focus().deleteColumn().run()"
+                        >
+                            Delete column
+                        </el-dropdown-item>
+                        <el-dropdown-item
+                            @click="editor.chain().focus().addRowBefore().run()"
+                        >
+                            Add row before
+                        </el-dropdown-item>
+                        <el-dropdown-item
+                            @click="editor.chain().focus().addRowAfter().run()"
+                        >
+                            Add row after
+                        </el-dropdown-item>
+                        <el-dropdown-item
+                            @click="editor.chain().focus().deleteRow().run()"
+                        >
+                            Delete row
+                        </el-dropdown-item>
+                        <el-dropdown-item
+                            @click="editor.chain().focus().deleteTable().run()"
+                        >
+                            Delete table
+                        </el-dropdown-item>
+                        <el-dropdown-item
+                            @click="editor.chain().focus().mergeCells().run()"
+                        >
+                            Merge cells
+                        </el-dropdown-item>
+                        <el-dropdown-item
+                            @click="editor.chain().focus().splitCell().run()"
+                        >
+                            Split cell
+                        </el-dropdown-item>
+                        <el-dropdown-item
+                            @click="
+                                editor
+                                    .chain()
+                                    .focus()
+                                    .toggleHeaderColumn()
+                                    .run()
+                            "
+                        >
+                            Toggle header column
+                        </el-dropdown-item>
+                        <el-dropdown-item
+                            @click="
+                                editor.chain().focus().toggleHeaderRow().run()
+                            "
+                        >
+                            Toggle header row
+                        </el-dropdown-item>
+                        <el-dropdown-item
+                            @click="
+                                editor.chain().focus().toggleHeaderCell().run()
+                            "
+                        >
+                            Toggle header cell
+                        </el-dropdown-item>
+                        <el-dropdown-item
+                            @click="editor.chain().focus().mergeOrSplit().run()"
+                        >
+                            Merge or split
+                        </el-dropdown-item>
+                        <el-dropdown-item
+                            @click="
+                                editor
+                                    .chain()
+                                    .focus()
+                                    .setCellAttribute('colspan', 2)
+                                    .run()
+                            "
+                        >
+                            Set cell attribute
+                        </el-dropdown-item>
+                        <el-dropdown-item
+                            @click="editor.chain().focus().fixTables().run()"
+                        >
+                            Fix tables
+                        </el-dropdown-item>
+                    </el-dropdown-menu>
+                </template>
+            </el-dropdown>
+            <button
+                type="button"
+                @click="editor.chain().focus().toggleBulletList().run()"
+                :class="{ 'is-active': editor.isActive('bulletList') }"
+            >
+                <svg viewBox="0 0 18 18">
+                    <line class="ql-stroke" x1="6" x2="15" y1="4" y2="4"></line>
+                    <line class="ql-stroke" x1="6" x2="15" y1="9" y2="9"></line>
+                    <line
+                        class="ql-stroke"
+                        x1="6"
+                        x2="15"
+                        y1="14"
+                        y2="14"
+                    ></line>
+                    <line class="ql-stroke" x1="3" x2="3" y1="4" y2="4"></line>
+                    <line class="ql-stroke" x1="3" x2="3" y1="9" y2="9"></line>
+                    <line
+                        class="ql-stroke"
+                        x1="3"
+                        x2="3"
+                        y1="14"
+                        y2="14"
+                    ></line>
+                </svg>
+            </button>
+            <button
+                type="button"
+                @click="editor.chain().focus().toggleOrderedList().run()"
+                :class="{ 'is-active': editor.isActive('orderedList') }"
+            >
+                <svg viewBox="0 0 18 18">
+                    <line class="ql-stroke" x1="7" x2="15" y1="4" y2="4"></line>
+                    <line class="ql-stroke" x1="7" x2="15" y1="9" y2="9"></line>
+                    <line
+                        class="ql-stroke"
+                        x1="7"
+                        x2="15"
+                        y1="14"
+                        y2="14"
+                    ></line>
+                    <line
+                        class="ql-stroke ql-thin"
+                        x1="2.5"
+                        x2="4.5"
+                        y1="5.5"
+                        y2="5.5"
+                    ></line>
+                    <path
+                        class="ql-fill"
+                        d="M3.5,6A0.5,0.5,0,0,1,3,5.5V3.085l-0.276.138A0.5,0.5,0,0,1,2.053,3c-0.124-.247-0.023-0.324.224-0.447l1-.5A0.5,0.5,0,0,1,4,2.5v3A0.5,0.5,0,0,1,3.5,6Z"
+                    ></path>
+                    <path
+                        class="ql-stroke ql-thin"
+                        d="M4.5,10.5h-2c0-.234,1.85-1.076,1.85-2.234A0.959,0.959,0,0,0,2.5,8.156"
+                    ></path>
+                    <path
+                        class="ql-stroke ql-thin"
+                        d="M2.5,14.846a0.959,0.959,0,0,0,1.85-.109A0.7,0.7,0,0,0,3.75,14a0.688,0.688,0,0,0,.6-0.736,0.959,0.959,0,0,0-1.85-.109"
+                    ></path>
+                </svg>
+            </button>
+            <button
+                type="button"
+                @click="editor.chain().focus().toggleCodeBlock().run()"
+                :class="{ 'is-active': editor.isActive('codeBlock') }"
+            >
+                Code block
+            </button>
+            <button
+                type="button"
+                @click="editor.chain().focus().toggleBlockquote().run()"
+                :class="{ 'is-active': editor.isActive('blockquote') }"
+            >
+                Blockquote
+            </button>
+            <button
+                type="button"
+                @click="editor.chain().focus().setHorizontalRule().run()"
+            >
+                Horizontal rule
+            </button>
+            <button
+                type="button"
+                @click="editor.chain().focus().toggleSuperscript().run()"
+                :class="{ 'is-active': editor.isActive('superscript') }"
+            >
+                <svg viewBox="0 0 18 18">
+                    <path
+                        class="ql-fill"
+                        d="M15.5,7H13.861a4.015,4.015,0,0,0,1.914-2.975,1.8,1.8,0,0,0-1.6-1.751A1.922,1.922,0,0,0,12.021,3.7a0.5,0.5,0,1,0,.957.291,0.917,0.917,0,0,1,1.053-.725,0.81,0.81,0,0,1,.744.762c0,1.077-1.164,1.925-1.934,2.486A1.423,1.423,0,0,0,12,7.5a0.5,0.5,0,0,0,.5.5h3A0.5,0.5,0,0,0,15.5,7Z"
+                    ></path>
+                    <path
+                        class="ql-fill"
+                        d="M9.651,5.241a1,1,0,0,0-1.41.108L6,7.964,3.759,5.349a1,1,0,1,0-1.519,1.3L4.683,9.5,2.241,12.35a1,1,0,1,0,1.519,1.3L6,11.036,8.241,13.65a1,1,0,0,0,1.519-1.3L7.317,9.5,9.759,6.651A1,1,0,0,0,9.651,5.241Z"
+                    ></path>
+                </svg>
+            </button>
+            <button
+                type="button"
+                @click="editor.chain().focus().toggleSubscript().run()"
+                :class="{ 'is-active': editor.isActive('subscript') }"
+            >
+                <svg viewBox="0 0 18 18">
+                    <path
+                        class="ql-fill"
+                        d="M15.5,15H13.861a3.858,3.858,0,0,0,1.914-2.975,1.8,1.8,0,0,0-1.6-1.751A1.921,1.921,0,0,0,12.021,11.7a0.50013,0.50013,0,1,0,.957.291h0a0.914,0.914,0,0,1,1.053-.725,0.81,0.81,0,0,1,.744.762c0,1.076-1.16971,1.86982-1.93971,2.43082A1.45639,1.45639,0,0,0,12,15.5a0.5,0.5,0,0,0,.5.5h3A0.5,0.5,0,0,0,15.5,15Z"
+                    ></path>
+                    <path
+                        class="ql-fill"
+                        d="M9.65,5.241a1,1,0,0,0-1.409.108L6,7.964,3.759,5.349A1,1,0,0,0,2.192,6.59178Q2.21541,6.6213,2.241,6.649L4.684,9.5,2.241,12.35A1,1,0,0,0,3.71,13.70722q0.02557-.02768.049-0.05722L6,11.036,8.241,13.65a1,1,0,1,0,1.567-1.24277Q9.78459,12.3777,9.759,12.35L7.316,9.5,9.759,6.651A1,1,0,0,0,9.65,5.241Z"
+                    ></path>
+                </svg>
+            </button>
+            <button
+                type="button"
+                @click="setLink"
+                :class="{ 'is-active': editor.isActive('link') }"
+            >
+                <svg viewBox="0 0 18 18">
+                    <line
+                        class="ql-stroke"
+                        x1="7"
+                        x2="11"
+                        y1="7"
+                        y2="11"
+                    ></line>
+                    <path
+                        class="ql-even ql-stroke"
+                        d="M8.9,4.577a3.476,3.476,0,0,1,.36,4.679A3.476,3.476,0,0,1,4.577,8.9C3.185,7.5,2.035,6.4,4.217,4.217S7.5,3.185,8.9,4.577Z"
+                    ></path>
+                    <path
+                        class="ql-even ql-stroke"
+                        d="M13.423,9.1a3.476,3.476,0,0,0-4.679-.36,3.476,3.476,0,0,0,.36,4.679c1.392,1.392,2.5,2.542,4.679.36S14.815,10.5,13.423,9.1Z"
+                    ></path>
+                </svg>
+            </button>
+        </div>
+        <editor-content :editor="editor" />
+        <el-dialog v-model="dialogVisible" title="URL" width="500">
+            <label>Enter URL</label>
+            <el-input v-model="newUrl" type="url" />
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="dialogVisible = false">Cancel</el-button>
+                    <el-button type="primary" @click="updateURL">
+                        Confirm
+                    </el-button>
+                </div>
+            </template>
+        </el-dialog>
+    </XInput>
+</template>
+
+<script>
+import input from "./input.js";
+import XInput from "./input.vue";
+import sanitizeHtml from "sanitize-html";
+import {
+    ElDropdown,
+    ElDropdownItem,
+    ElDropdownMenu,
+    ElDialog,
+    ElButton,
+    ElInput,
+} from "element-plus";
+import { Editor, EditorContent } from "@tiptap/vue-3";
+import StarterKit from "@tiptap/starter-kit";
+import Underline from "@tiptap/extension-underline";
+import Table from "@tiptap/extension-table";
+import TableCell from "@tiptap/extension-table-cell";
+import TableHeader from "@tiptap/extension-table-header";
+import TableRow from "@tiptap/extension-table-row";
+import Superscript from "@tiptap/extension-superscript";
+import Subscript from "@tiptap/extension-subscript";
+import Link from "@tiptap/extension-link";
+
+export default {
+    mixins: [input],
+
+    components: {
+        XInput,
+        EditorContent,
+        ElDropdown,
+        ElDropdownItem,
+        ElDropdownMenu,
+        ElDialog,
+        ElButton,
+        ElInput,
+    },
+
+    props: {
+        table: {
+            type: Boolean,
+            default: false,
+        },
+        baseClass: {
+            type: String,
+            default: "vel-wysiwyg",
+        },
+    },
+
+    data: () => ({
+        editor: null,
+        hold: null,
+        previousUrl: null,
+        newUrl: null,
+        dialogVisible: false,
+    }),
+
+    watch: {
+        modelValue: {
+            handler(val) {
+                if (this.hold !== val) {
+                    this.setValue();
+                }
+            },
+        },
+    },
+
+    methods: {
+        setValue() {
+            this.editor.commands.setContent(this.modelValue);
+        },
+        setLink() {
+            this.previousUrl = this.editor.getAttributes("link").href;
+            this.newUrl = this.previousUrl;
+            this.dialogVisible = true;
+        },
+        updateURL() {
+            // cancelled
+            this.dialogVisible = false;
+            let url = this.newUrl;
+            if (url === this.previousUrl) {
+                return;
+            }
+
+            // empty
+            if (url === "") {
+                this.editor
+                    .chain()
+                    .focus()
+                    .extendMarkRange("link")
+                    .unsetLink()
+                    .run();
+
+                return;
+            }
+            // update link
+            this.editor
+                .chain()
+                .focus()
+                .extendMarkRange("link")
+                .setLink({ href: url })
+                .run();
+        },
+    },
+
+    mounted() {
+        let extensions = [
+            StarterKit,
+            Underline,
+            Superscript,
+            Subscript,
+            Link.configure({
+                openOnClick: false,
+                defaultProtocol: "https",
+            }),
+        ];
+        if (this.$props.table) {
+            extensions.push(
+                Table.configure({
+                    resizable: true,
+                }),
+                TableRow,
+                TableHeader,
+                TableCell,
+            );
+        }
+
+        this.editor = new Editor({
+            extensions: extensions,
+        });
+        this.setValue();
+
+        this.editor.on("blur", ({ editor, event }) => {
+            const value = editor.isEmpty ? "" : event.srcElement.innerHTML;
+            if (this.hold !== value) {
+                this.hold = value;
+                this.$emit("update:modelValue", this.hold);
+            }
+        });
+    },
+};
+</script>