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

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>

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

@@ -6,7 +6,10 @@
 
         <el-input
             v-bind="{ ...$attrs, class: undefined }"
-            :class="[`${baseClass}__textbox`, type=== 'password' ? 'input--password': '']"
+            :class="[
+                `${baseClass}__textbox`,
+                type === 'password' ? 'input--password' : '',
+            ]"
             :name="name"
             :id="name"
             :disabled="disabled"
@@ -20,7 +23,6 @@
             :parser="parser"
             :formatter="formatter"
         >
-            
             <template v-if="prepend" #prepend>
                 <slot name="prepend" />
             </template>
@@ -28,8 +30,24 @@
                 <slot name="append" />
 
                 <div v-if="type === 'password'" class="form__icon-container">
-                    <GSvg name="icon-error" class="form__error-icon icon" embed artboard v-if="error && error.first(name)" />
-                    <GSvg :name="visibility ? 'icon-visibility' : 'icon-visibility-off'" class="form__action-icon icon  pointer" embed artboard @click="visibility = !visibility" />
+                    <GSvg
+                        name="icon-error"
+                        class="form__error-icon icon"
+                        embed
+                        artboard
+                        v-if="error && error.first(name)"
+                    />
+                    <GSvg
+                        :name="
+                            visibility
+                                ? 'icon-visibility'
+                                : 'icon-visibility-off'
+                        "
+                        class="form__action-icon icon pointer"
+                        embed
+                        artboard
+                        @click="visibility = !visibility"
+                    />
                 </div>
             </template>
         </el-input>
@@ -72,12 +90,12 @@ export default {
         formatter: {
             type: Function,
             default: null,
-        }
+        },
     },
     data() {
         return {
-            visibility: false
-        }
+            visibility: false,
+        };
     },
 
     components: {

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

@@ -54,7 +54,7 @@ export default {
         hasPreview() {
             return this.imgSrc &&
                 [".svg", ".jpg", ".png", "data:image/"].some((d) =>
-                    this.imgSrc.includes(d)
+                    this.imgSrc.includes(d),
                 )
                 ? this.imgSrc
                 : "";

package/{form → _Build/vue/components/form}/input.js

@@ -21,7 +21,7 @@ export default {
             default: false,
         },
         modelValue: {
-            type: [String,Number,Array],
+            type: [String, Number, Array],
             default: null,
         },
         label: {
@@ -41,7 +41,7 @@ export default {
             default: null,
         },
         error: {
-            type: [String,Object],
+            type: [String, Object],
             default: null,
         },
         baseClass: {