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

package/_Build/vue/components/form/Select.vue

@@ -0,0 +1,109 @@
+<template>
+    <XInput v-bind="$props">
+        <template #label>
+            <slot name="label" />
+        </template>
+
+        <el-select
+            v-model="content"
+            :class="baseClass"
+            :multiple="multiple"
+            :placeholder="placeholder"
+            :disabled="disabled"
+            :clearable="clearable"
+            :collapse-tags="collapseTags"
+            :filterable="filterable"
+            :value-on-clear="null"
+            @change="handleInput"
+            @clear="this.$emit('clear')"
+            @blur="this.$emit('blur')"
+            :empty-values="[null, undefined]"
+        >
+            <template #default>
+                <slot name="default">
+                    <el-option
+                        v-if="!options[0]?.label"
+                        v-for="(label, value) in options"
+                        :key="value"
+                        :label="label"
+                        :value="castValue(value)"
+                    >
+                    </el-option>
+                    <el-option
+                        v-else
+                        v-for="option in options"
+                        :key="option.value"
+                        :label="option.label"
+                        :disabled="option.disabled"
+                        :value="castValue(option.value)"
+                    >
+                    </el-option>
+                </slot>
+            </template>
+        </el-select>
+    </XInput>
+</template>
+
+<script>
+import { ElSelect } from "element-plus";
+import { ElOption } from "element-plus";
+import input from "./input.js";
+import XInput from "./input.vue";
+import _ from "lodash";
+
+export default {
+    mixins: [input],
+    props: {
+        ...input.props,
+        modelValue: {
+            type: Array,
+            default: [],
+        },
+        baseClass: {
+            type: String,
+            default: "vel-select",
+        },
+        clearable: {
+            type: Boolean,
+            default: false,
+        },
+        collapseTags: {
+            type: Boolean,
+            default: false,
+        },
+        filterable: {
+            type: Boolean,
+            default: false,
+        },
+        options: {
+            type: Array,
+            default: [],
+        },
+        multiple: {
+            type: Boolean,
+            default: false,
+        },
+    },
+
+    components: {
+        XInput,
+        ElOption,
+        ElSelect,
+    },
+
+    emits: ["change", "clear", "blur"],
+    methods: {
+        castValue(value) {
+            if (
+                !_.isNull(value) &&
+                typeof value === "string" &&
+                value !== "" &&
+                !isNaN(Number(value))
+            ) {
+                return parseInt(value);
+            }
+            return value;
+        },
+    },
+};
+</script>

package/_Build/vue/components/form/Switch.vue

@@ -0,0 +1,63 @@
+<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/_Build/vue/components/form/Upload.vue

@@ -0,0 +1,101 @@
+<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/_Build/vue/components/form/Wysiwyg.vue

@@ -0,0 +1,127 @@
+<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>