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

package/form/Switch.vue

@@ -1,63 +0,0 @@
-<template>
-    <XInput v-bind="$props">
-        <template #label v-if="label">
-            <slot name="label" />
-        </template>
-
-        <el-switch
-            :class="[`${baseClass}__control`]"
-            :name="name"
-            :id="id ? id: name"
-            :size="size" 
-            :disabled="disabled"
-            :inline-prompt="inlinePrompt"
-            :active-icon="activeIcon"
-            :inactive-icon="inactiveIcon"
-            v-model="content"
-            :required="required"
-            @input="handleInput"
-        />
-    </XInput>
-</template>
-
-<script>
-import { ElSwitch } from "element-plus";
-import input from "./input.js";
-import XInput from "./input.vue";
-
-export default {
-    mixins: [input],
-    props: {
-        ...input.props,
-        modelValue: {
-            type: Boolean,
-            default: null,
-        },
-        baseClass: {
-            type: String,
-            default: "vel-switch",
-        },
-        size: {
-            type: String,
-            default: "default",
-        },
-        inlinePrompt: {
-            type: Boolean,
-            default: false,
-        },
-        activeIcon: {
-            type: String,
-            default: "",
-        },
-        inactiveIcon: {
-            type: String,
-            default: "",
-        },
-    },
-
-    components: {
-        XInput,
-        ElSwitch,
-    },
-};
-</script>

package/form/Upload.vue

@@ -1,103 +0,0 @@
-<template>
-    <XInput v-bind="$props">
-        <template #label>
-            <slot name="label" />
-        </template>
-
-        <el-upload
-            ref="upload"
-            v-bind="$attrs.props"
-            :class="[`${baseClass}`]"
-            :name="name"
-            :id="name"
-            :disabled="disabled"
-            :limit="limit"
-            :action="action"
-            :on-exceed="onExceed"
-            v-model:file-list="content"
-            :auto-upload="autoUpload"
-            :required="required"
-            :list-type="listType"
-            :accept="accept"
-        >
-            <template #trigger>
-                <slot name="trigger">
-                    <el-button type="primary">Select file</el-button>
-                </slot>
-            </template>
-            <template #tip>
-                <slot name="tip" />
-            </template>
-            <slot name="default">
-            </slot>
-        </el-upload>
-    </XInput>
-</template>
-
-<script>
-import { ElUpload } from "element-plus";
-import input from "./input.js";
-import ElButton from "../basic/Button.vue";
-import XInput from "./input.vue";
-
-export default {
-    mixins: [input],
-    props: {
-        ...input.props,
-        baseClass: {
-            type: String,
-            default: "vel-upload",
-        },
-        limit: {
-            type: Number,
-            default: 1,
-        },
-        action: {
-            type: Function,
-            default: null,
-        },
-        autoUpload: {
-            type: Boolean,
-            default: false
-        },
-        onExceed: {
-            type: Function,
-            default: null,
-        },
-        listType: {
-            type: String,
-            default: "text",
-        },
-        accept: {
-            type: String,
-            default: "",
-        },
-    },
-
-    components: {
-        XInput,
-        ElUpload,
-        ElButton,
-    },
-
-    emits: ["upload"],
-
-    watch: {
-        content: {
-            immediate: true,
-            handler(val) {
-                this.handleInput();
-            },
-        },
-    },
-    methods: {
-        clearFiles() {
-            this.$refs.upload.clearFiles();
-        },
-        handleStart(file) {
-            this.$refs.upload.handleStart(file);
-        }
-    }
-
-};
-</script>

package/form/Wysiwyg.vue

@@ -1,127 +0,0 @@
-<template>
-    <XInput v-bind="$props">
-        <template #label>
-            <slot name="label" />
-        </template>
-        <div class="el-input__inner px-0" ref="input" />
-    </XInput>
-</template>
-
-<script>
-import Quill from "quill";
-import input from "./input.js";
-import XInput from "./input.vue";
-import sanitizeHtml from 'sanitize-html';
-
-export default {
-    mixins: [input],
-
-    components: {
-        XInput,
-    },
-
-    props: {
-        simple: {
-            type: Boolean,
-            default: false,
-        },
-        baseClass: {
-            type: String,
-            default: "vel-wysiwyg",
-        },
-    },
-
-    data: () => ({
-        editor: null,
-        hold: null,
-    }),
-
-    watch: {
-        modelValue: {
-            handler(val) {
-                if (val !== this.hold) {
-                    this.setValue();
-                }
-            },
-        },
-    },
-
-    methods: {
-        getValue() {
-            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;
-        },
-        setValue() {
-            const temp =
-                this.simple && this.modelValue // Surround text in p tags to keep it grouped correctly on simple strings. Ignore if modelValue empty otherwise you'll end up with <p>null</p>
-                    ? `<p>${this.modelValue}</p>`
-                    : this.modelValue;
-            this.editor.root.innerHTML = this.formatCleaner(temp);
-        },
-        // Function to remove p tags from inside li tags, breaks the wysiwyg
-        formatCleaner(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++) {
-                lists[x].innerHTML = sanitizeHtml(lists[x].innerHTML, {
-                    allowedTags: [ 'b', 'i', 'em', 'strong', 'a','li']
-                });
-            }
-            return parser.innerHTML;
-        }
-    },
-
-    mounted() {
-        this.editor = new Quill(this.$refs.input, {
-            modules: {
-                clipboard: {
-                    matchVisual: false,
-                },
-                toolbar: [
-                    [
-                        this.simple
-                            ? undefined
-                            : { header: [1, 2, 3, 4, 5, 6, false] },
-                        "bold",
-                        "italic",
-                        "underline",
-                        "strike",
-                        { script: "sub" },
-                        { script: "super" },
-                        this.simple ? undefined : { list: "ordered" },
-                        this.simple ? undefined : { list: "bullet" },
-                        "clean",
-                        "link"
-                    ],
-                ],
-            },
-            placeholder: this.placeholder,
-            theme: "snow",
-        });
-
-        this.setValue();
-
-        this.editor.on("text-change", (delta, oldDelta, source) => {
-            this.hold = this.getValue();
-            this.$emit("update:modelValue", this.hold);
-        });
-
-        // Disable tab
-        // delete this.editor.getModule("keyboard").bindings["9"];
-
-        // Disable tab index on toolbar buttons
-        [...this.$el.querySelectorAll(".ql-toolbar button")].forEach((d) =>
-            d.setAttribute("tabindex", -1)
-        );
-    },
-};
-</script>

package/form/Wysiwyg2.vue

@@ -1,278 +0,0 @@
-<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/basic.vue

@@ -1,88 +0,0 @@
-<template>
-    <XInput v-bind="$props">
-        <template #label>
-            <slot name="label" />
-        </template>
-
-        <el-input
-            v-bind="{ ...$attrs, class: undefined }"
-            :class="[`${baseClass}__textbox`, type=== 'password' ? 'input--password': '']"
-            :name="name"
-            :id="name"
-            :disabled="disabled"
-            :minlength="minlength"
-            :maxlength="maxlength"
-            :type="type === 'password' && visibility ? 'text' : type"
-            :placeholder="placeholder"
-            v-model="content"
-            :required="required"
-            @input="handleInput"
-            :parser="parser"
-            :formatter="formatter"
-        >
-            
-            <template v-if="prepend" #prepend>
-                <slot name="prepend" />
-            </template>
-            <template v-if="append || type === 'password'" #append>
-                <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" />
-                </div>
-            </template>
-        </el-input>
-    </XInput>
-</template>
-
-<script>
-import { ElInput } from "element-plus";
-import input from "./input.js";
-import XInput from "./input.vue";
-
-export default {
-    mixins: [input],
-    props: {
-        ...input.props,
-        baseClass: {
-            type: String,
-            default: "vel-basic",
-        },
-        minlength: {
-            type: Number,
-            default: null,
-        },
-        maxlength: {
-            type: Number,
-            default: null,
-        },
-        prepend: {
-            type: String,
-            default: null,
-        },
-        append: {
-            type: String,
-            default: null,
-        },
-        parser: {
-            type: Function,
-            default: null,
-        },
-        formatter: {
-            type: Function,
-            default: null,
-        }
-    },
-    data() {
-        return {
-            visibility: false
-        }
-    },
-
-    components: {
-        XInput,
-        ElInput,
-    },
-};
-</script>

package/form/color.vue

@@ -1,22 +0,0 @@
-<template>
-    <XInput v-bind="$props">
-        <template #label>
-            <slot name="label" />
-        </template>
-
-        <el-color-picker v-model="content" @change="handleInput" />
-    </XInput>
-</template>
-
-<script>
-import input from "./input.js";
-import XInput from "./input.vue";
-
-export default {
-    mixins: [input],
-
-    components: {
-        XInput,
-    },
-};
-</script>