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

package/_Build/vue/components/form/DatePicker.vue

@@ -0,0 +1,116 @@
+<template>
+    <XInput v-bind="$props">
+        <template #label>
+            <slot name="label" />
+        </template>
+
+        <el-date-picker
+            v-bind="$attrs.props"
+            :type="type"
+            :disabled="disabled"
+            :disabled-date="disabledDate"
+            -
+            :placeholder="placeholder"
+            :shortcuts="shortcuts"
+            :size="size"
+            class="w-100 vel-datepicker"
+            v-model="content"
+            @change="handleInput"
+            :value-format="valueFormat"
+            :date-format="dateFormat"
+            :time-format="timeFormat"
+            :format="format"
+            :popper-class="popperClass"
+            :prefix-icon="prefixIcon"
+        />
+    </XInput>
+</template>
+<script>
+import dayjs from "dayjs";
+import { ElDatePicker } from "element-plus";
+
+import input from "./input.js";
+import XInput from "./input.vue";
+
+export default {
+    mixins: [input],
+    props: {
+        ...input.props,
+        type: {
+            type: String,
+            validator: (value) =>
+                [
+                    "date",
+                    "year",
+                    "years",
+                    "month",
+                    "months",
+                    "date",
+                    "dates",
+                    "datetime",
+                    "week",
+                    "datetimerange",
+                    "daterange",
+                    "monthrange",
+                    "yearrange",
+                ].includes(value),
+            default: "date",
+        },
+        format: {
+            type: String,
+        },
+        valueFormat: {
+            type: String,
+        },
+        dateFormat: {
+            type: String,
+        },
+        timeFormat: {
+            type: String,
+        },
+        baseClass: {
+            type: String,
+            default: "vel-datepicker",
+        },
+        minDate: {
+            type: [Date, String],
+        },
+        maxDate: {
+            type: [Date, String],
+        },
+        shortcuts: {
+            type: Array,
+            default: [],
+        },
+        size: {
+            type: String,
+            default: "default",
+        },
+        popperClass: {
+            type: String,
+            default: "vel-popper",
+        },
+        prefixIcon: {
+            type: String,
+        },
+    },
+    components: {
+        XInput,
+        ElDatePicker,
+    },
+
+    methods: {
+        disabledDate(date) {
+            if (this.minDate && dayjs(date).isBefore(this.minDate)) {
+                return true;
+            }
+
+            if (this.maxDate && dayjs(date).isAfter(this.maxDate)) {
+                return true;
+            }
+
+            return false;
+        },
+    },
+};
+</script>

package/_Build/vue/components/form/InputNumber.vue

@@ -0,0 +1,89 @@
+<template>
+    <XInput v-bind="$props">
+        <template #label>
+            <slot name="label" />
+        </template>
+
+        <el-input-number
+            v-bind="{ ...$attrs, class: undefined }"
+            :class="[`${baseClass}`]"
+            :name="name"
+            :id="name"
+            :disabled="disabled"
+            :min="min"
+            :max="max"
+            :size="size"
+            :precision="precision"
+            :step="step"
+            :controls="controls"
+            :step-strictly="stepStrictly"
+            :placeholder="placeholder"
+            v-model="content"
+            :required="required"
+            @input="handleInput"
+        >
+            <template #prefix>
+                <slot name="prefix" />
+            </template>
+            <template #suffix>
+                <slot name="suffix" />
+            </template>
+            <template #decrease-icon>
+                <slot name="decrease-icon" />
+            </template>
+            <template #increase-icon>
+                <slot name="increase-icon" />
+            </template>
+        </el-input-number>
+    </XInput>
+</template>
+
+<script>
+import { ElInputNumber } 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-input-number",
+        },
+        min: {
+            type: Number,
+            default: -Infinity,
+        },
+        max: {
+            type: Number,
+            default: Infinity,
+        },
+        precision: {
+            type: Number,
+            default: null,
+        },
+        step: {
+            type: Number,
+            default: 1,
+        },
+        stepStrictly: {
+            type: Boolean,
+            default: true,
+        },
+        size: {
+            type: String,
+            default: "default",
+        },
+        controls: {
+            type: Boolean,
+            default: true,
+        },
+    },
+
+    components: {
+        XInput,
+        ElInputNumber,
+    },
+};
+</script>

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, Number],
+            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/Spinner.vue

@@ -0,0 +1,5 @@
+<template>
+    <p>Loading...</p>
+</template>
+
+<script></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>