@fishawack/lab-velocity 0.0.5 → 0.0.6

package/Icon.vue

@@ -0,0 +1,33 @@
+<template>
+	<div class="vel-icon">
+		<VSvg v-bind="$props" />
+	</div>
+</template>
+
+<script>
+	import VSvg from "../components/Svg.vue";
+	
+	export default {
+		props: {
+			name: {
+				type: String,
+				required: true,
+			},
+			embed: {
+				type: Boolean,
+				default: false,
+			},
+			asis: {
+				type: Boolean,
+				default: false,
+			},
+			artboard: {
+				type: Boolean,
+				default: false,
+			},
+		},
+		components: {
+			VSvg
+		},
+	}
+</script>

package/Svg.vue

@@ -0,0 +1,41 @@
+<template>
+	<component v-if="embed" :is="icon" class="vel-svg" />
+	<svg v-else class="vel-svg">
+		<use :xlink:href="`#${name}${artboard ? '--artboard' : ''}`" />
+	</svg>
+</template>
+
+<script>
+	import { defineAsyncComponent } from 'vue';
+	export default {
+
+		props: {
+			name: {
+				type: String,
+				required: true,
+			},
+			embed: {
+				type: Boolean,
+				default: false,
+			},
+			asis: {
+				type: Boolean,
+				default: false,
+			},
+			artboard: {
+				type: Boolean,
+				default: false,
+			}
+		},
+		data() {
+			return {
+				icons: import.meta.glob(`../../handlebars/generated/embed/**/*.svg`, { query: '?component' })
+			}
+		},
+		computed: {
+			icon() {
+				return defineAsyncComponent(() => this.icons[`../../handlebars/generated/embed/svg${this.asis ? '--asis' : ''}--${this.name}${this.artboard ? '--artboard' : ''}.svg`]())
+			},
+		}
+	}
+</script>

package/_base.scss

@@ -0,0 +1 @@
+@import "element-plus/theme-chalk/base.css";

package/_defaults.scss

@@ -0,0 +1,7 @@
+@use "_variables.scss";
+
+@import "@fishawack/lab-ui/_defaults.scss";
+
+$colors: variables.dynamic('color', module-variables("variables"));
+
+// Override lab-ui defaults here, e.g $button: $color6;

package/_variables.scss

@@ -0,0 +1,3 @@
+@import "@fishawack/lab-ui/_variables.scss";
+
+// Set global variables here, e.g $color6: red;

package/components/_basic.scss

@@ -0,0 +1 @@
+@import "element-plus/theme-chalk/el-input.css";

package/components/_button.scss

@@ -0,0 +1,27 @@
+@import "element-plus/theme-chalk/el-button.css";
+
+.vel-button {
+    &[disabled=true] {
+        pointer-events: none !important;
+    }
+    &--iconRight {
+        .vel-button__button {
+            .el-icon {
+                order: 2;
+            }
+            >span {
+                order: 1;
+                margin: 0 0.5rem 0 0;
+            }
+        }
+    }
+    &--iconOnly {
+        .vel-button__button {
+            >span {
+                margin: 0;
+                display: none;
+            }
+        }
+    }
+
+}

package/components/_checkbox.scss

@@ -0,0 +1 @@
+@import "element-plus/theme-chalk/el-checkbox.css";

package/components/_icon.scss

@@ -0,0 +1 @@
+@import "@fishawack/lab-ui/_icon.scss";

package/components/_switch.scss

@@ -0,0 +1 @@
+@import "element-plus/theme-chalk/el-switch.css";

package/form/Button.vue

@@ -0,0 +1,122 @@
+<template>
+    <XInput v-bind="$props">
+        <el-button 
+            :class="[`button ${baseClass}__button`]" 
+            :name="name" 
+            :label="label" 
+            :id="name" 
+            :disabled="disabled"
+            :round="round" 
+            :circle="circle" 
+            :size="size" 
+            :text="text" 
+            :tag="tag" 
+            :autofocus="autofocus"
+            :native-type="nativeType" 
+            :type="type" 
+            :link="link" 
+            :plain="plain" 
+            :loading="loading"
+            :customIcon="customIcon" 
+            v-model="content" 
+            @input="handleInput">
+
+            <template v-if="icon || customIcon " #icon>
+                <component :is="icon" v-if="icon" :class="iconClasses" />
+                <VIcon v-if="customIcon" :name="customIcon" :class="iconClasses" embed></VIcon>
+            </template>
+            <span v-if="label" v-html="label" :class="[`${baseClass}__label`]" />
+
+        </el-button>
+    </XInput>
+</template>
+
+<script>
+import { ElButton } from "element-plus";
+import { ElIcon } from "element-plus";
+import input from "./input.js";
+import XInput from "./input.vue";
+import VIcon from "../../components/Icon.vue";
+import {
+    Check,
+    Delete,
+    Edit,
+    Message,
+    Search,
+    Star,
+} from '@element-plus/icons-vue'
+
+export default {
+    mixins: [input],
+    props: {
+        ...input.props,
+        baseClass: {
+            type: String,
+            default: "vel-button",
+        },
+        inputType: {
+            type: String,
+            default: "button",
+        },
+        type: {
+            type: String,
+            default: null,
+        },
+        nativeType: {
+            type: String,
+            default: "button",
+        },
+        size: {
+            type: String,
+            default: "default",
+        },
+        round: {
+            type: Boolean,
+            default: false,
+        },
+        circle: {
+            type: Boolean,
+            default: false,
+        },
+        text: {
+            type: Boolean,
+            default: false,
+        },
+        link: {
+            type: Boolean,
+            default: false,
+        },
+        plain: {
+            type: Boolean,
+            default: false,
+        },
+        tag: {
+            type: String,
+            default: "button",
+        },
+        loading: {
+            type: Boolean,
+            default: false,
+        },
+        icon: {
+            type: ElIcon,
+            default: null,
+        },
+        customIcon: {
+            type: String,
+            default: null,
+        },
+        iconClasses: {
+            type: String,
+            default: "",
+        }
+    },
+
+    components: {
+        XInput,
+        ElButton,
+        VIcon,
+        ElIcon
+    },
+};
+</script>

package/form/basic.vue

@@ -0,0 +1,62 @@
+<template>
+    <XInput v-bind="$props">
+        <template #label>
+            <slot name="label" />
+        </template>
+
+        <el-input
+            :class="[`${baseClass}__textbox`]"
+            :name="name"
+            :id="name"
+            :disabled="disabled"
+            :minlength="minlength"
+            :maxlength="maxlength"
+            :type="type"
+            :placeholder="placeholder"
+            v-model="content"
+            :required="required"
+            @input="handleInput"
+        >
+            <template v-if="prepend" #prepend>{{ prepend }}</template>
+            <template v-if="append" #append>{{ append }}</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,
+        },
+    },
+
+    components: {
+        XInput,
+        ElInput,
+    },
+};
+</script>

package/form/checkbox-group.vue

@@ -0,0 +1,38 @@
+<template>
+    <XInput :errors="errors" :name="name">
+        <el-checkbox-group
+            v-model="content"
+            @change="handleInput"
+            :required="required"
+        >
+            <el-checkbox
+                :key="index"
+                v-for="({ label, value }, index) in options"
+                :label="label"
+                :value="value"
+            >
+                <slot name="label" :label="label" :value="value">
+                    <span v-html="label"></span>
+                </slot>
+            </el-checkbox>
+        </el-checkbox-group>
+    </XInput>
+</template>
+
+<script>
+import input from "./input.js";
+import XInput from "./input.vue";
+
+export default {
+    mixins: [input],
+
+    components: { XInput },
+
+    props: {
+        options: {
+            type: Array,
+            default: [],
+        },
+    },
+};
+</script>

package/form/checkbox.vue

@@ -0,0 +1,39 @@
+<template>
+    <XInput v-bind="$props">
+        <el-checkbox
+            :class="[`${baseClass}__checkbox`]"
+            :id="name"
+            :disabled="disabled"
+            v-model="content"
+            :required="required"
+            @change="handleInput"
+        >
+        </el-checkbox>
+    </XInput>
+</template>
+
+<script>
+import { ElCheckbox } 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-checkbox",
+        },
+    },
+
+    components: {
+        XInput,
+        ElCheckbox,
+    },
+};
+</script>

package/form/color.vue

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

package/form/datetime.vue

@@ -0,0 +1,58 @@
+<template>
+    <XInput v-bind="$props">
+        <template #label>
+            <slot name="label" />
+        </template>
+
+        <el-date-picker
+            type="date"
+            :placeholder="placeholder"
+            :disabled-date="disabledDate"
+            :shortcuts="shortcuts"
+            class="w-100"
+            v-model="content"
+            @change="handleInput"
+            value-format="YYYY-MM-DD"
+        />
+    </XInput>
+</template>
+
+<script>
+import dayjs from "dayjs";
+
+import input from "./input.js";
+import XInput from "./input.vue";
+
+export default {
+    mixins: [input],
+
+    components: { XInput },
+
+    props: {
+        minDate: {
+            type: [Date, String],
+        },
+        maxDate: {
+            type: [Date, String],
+        },
+        shortcuts: {
+            type: Array,
+            default: [],
+        },
+    },
+
+    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/form/file.vue

@@ -0,0 +1,89 @@
+<template>
+    <XInput v-bind="$props">
+        <template #label>
+            <slot name="label" />
+        </template>
+
+        <input
+            ref="input"
+            type="file"
+            class="absolute invisible top-0 left-0"
+            @change="onImageChange"
+        />
+        <div class="border-solid border border-color-6">
+            <el-empty
+                @click.prevent="$refs.input.click()"
+                class="p-0 w-100 block mx-auto cursor"
+                style="max-width: 150px"
+                :image="hasPreview && imgSrc"
+                :description="hasPreview ? 'Preview' : 'No preview available'"
+            />
+        </div>
+        <div class="text-center mt-0.5">
+            <el-button v-if="content" type="danger" @click="cancel"
+                >Clear</el-button
+            >
+        </div>
+    </XInput>
+</template>
+
+<script>
+import input from "./input.js";
+import XInput from "./input.vue";
+
+export default {
+    mixins: [input],
+
+    components: { XInput },
+
+    props: {
+        preview: {},
+    },
+
+    data() {
+        return {
+            imgSrc: null,
+        };
+    },
+
+    mounted() {
+        this.imgSrc = this.preview;
+    },
+
+    computed: {
+        hasPreview() {
+            return this.imgSrc &&
+                [".svg", ".jpg", ".png", "data:image/"].some((d) =>
+                    this.imgSrc.includes(d)
+                )
+                ? this.imgSrc
+                : "";
+        },
+    },
+
+    methods: {
+        onImageChange(e) {
+            if (!e.target.files.length) return;
+
+            let file = e.target.files[0];
+            let reader = new FileReader();
+
+            reader.readAsDataURL(file);
+
+            reader.onload = (e) => {
+                this.imgSrc = reader.result;
+            };
+
+            this.content = file;
+
+            this.handleInput();
+        },
+        cancel() {
+            this.$refs.input.value = null;
+            this.content = null;
+            this.imgSrc = this.preview;
+            this.handleInput();
+        },
+    },
+};
+</script>

package/form/input.js

@@ -0,0 +1,71 @@
+export default {
+    props: {
+        type: {
+            type: String,
+            default: "text",
+        },
+        placeholder: {
+            type: String,
+            default: null,
+        },
+        required: {
+            type: Boolean,
+            default: false,
+        },
+        disabled: {
+            type: Boolean,
+            default: false,
+        },
+        autofocus: {
+            type: Boolean,
+            default: false,
+        },
+        modelValue: {
+            type: String,
+            default: null,
+        },
+        label: {
+            type: String,
+            default: null,
+        },
+        name: {
+            type: String,
+            default: null,
+        },
+        error: {
+            type: String,
+            default: null,
+        },
+        baseClass: {
+            type: String,
+            default: null,
+        },
+        classes: {
+            type: String,
+            default: null,
+        },
+    },
+
+    emits: ["update:modelValue"],
+
+    data() {
+        return {
+            content: "",
+        };
+    },
+
+    watch: {
+        modelValue: {
+            immediate: true,
+            handler(val) {
+                this.content = val;
+            },
+        },
+    },
+
+    methods: {
+        handleInput() {
+            this.$emit("update:modelValue", this.content);
+        },
+    },
+};

package/form/input.vue

@@ -0,0 +1,51 @@
+<template>
+    <div class="form__group" :class="{ [baseClass]: baseClass, 'form__group--error': error, [classes]: classes }">
+        <label v-if="(label || $slots.label) && inputType !== 'button'" :class="{ [baseClass + '__label']: baseClass }"
+            :for="name">
+            <slot name="label">
+                <span v-html="label"></span>
+            </slot>
+        </label>
+
+        <slot />
+
+        <div v-if="error" class="form__error" :class="{ [baseClass + '__error']: baseClass }">
+            <small v-text="error"></small>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        label: {
+            type: String,
+            default: null,
+        },
+        name: {
+            type: String,
+            default: null,
+        },
+        error: {
+            type: String,
+            default: null,
+        },
+        baseClass: {
+            type: String,
+            default: null,
+        },
+        classes: {
+            type: String,
+            default: null,
+        },
+        type: {
+            type: String,
+            default: null,
+        },
+        inputType: {
+            type: String,
+            default: "text",
+        },
+    },
+};
+</script>

package/form/select.vue

@@ -0,0 +1,73 @@
+<template>
+    <XInput v-bind="$props">
+        <template #label>
+            <slot name="label" />
+        </template>
+
+        <el-select
+            v-model="content"
+            @change="handleInput"
+            class="block"
+            :multiple="multiple"
+            :placeholder="placeholder"
+            :disabled="disabled"
+            collapse-tags
+            filterable
+            clearable
+            :value-on-clear="null"
+        >
+            <el-option
+                v-if="object"
+                v-for="(label, value) in options"
+                :key="value"
+                :label="label"
+                :value="castValue(value)"
+            >
+            </el-option>
+            <el-option
+                v-if="!object"
+                v-for="option in options"
+                :key="option.value"
+                :label="option.label"
+                :value="castValue(option.value)"
+            >
+            </el-option>
+        </el-select>
+    </XInput>
+</template>
+
+<script>
+import input from "./input.js";
+import XInput from "./input.vue";
+
+export default {
+    mixins: [input],
+
+    components: {
+        XInput,
+    },
+
+    props: {
+        options: {},
+        multiple: {
+            default: false,
+        },
+        object: {
+            default: true,
+        },
+    },
+
+    methods: {
+        castValue(value) {
+            if (
+                !_.isNull(value) &&
+                typeof value === "string" &&
+                !isNaN(Number(value))
+            ) {
+                return parseInt(value);
+            }
+            return value;
+        },
+    },
+};
+</script>

package/form/switch.vue

@@ -0,0 +1,43 @@
+<template>
+    <XInput v-bind="$props">
+        <template #label>
+            <slot name="label" />
+        </template>
+
+        <el-switch
+            :class="[`${baseClass}__control`]"
+            :name="name"
+            :id="name"
+            :disabled="disabled"
+            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",
+        },
+    },
+
+    components: {
+        XInput,
+        ElSwitch,
+    },
+};
+</script>

package/form/wysiwyg.vue

@@ -0,0 +1,105 @@
+<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";
+
+export default {
+    mixins: [input],
+
+    components: {
+        XInput,
+    },
+
+    props: {
+        simple: {
+            type: Boolean,
+            default: false,
+        },
+    },
+
+    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() {
+            this.editor.root.innerHTML =
+                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;
+        },
+    },
+
+    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",
+                    ],
+                ],
+            },
+            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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fishawack/lab-velocity",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "Avalere Health branded style system",
   "scripts": {
     "setup": "npm ci || npm i && npm run content",
@@ -16,7 +16,7 @@
     "pretest": "cp -r _Build/sass/** ./ && cp -r _Build/vue/components/** ./",
     "preversion": "lab-env test",
     "postversion": "git push && git push --tags && npm publish",
-    "postpublish": "bash -c '(rm -rf _*.scss components form *.vue; true) 2>/dev/null && git checkout development && git merge master && git push' || echo 'Failed to execute postpublish script'"
+    "postpublish": "bash -c '(rm -rf *.scss components form *.vue; true) 2>/dev/null && git checkout development && git merge master && git push' || echo 'Failed to execute postpublish script'"
   },
   "license": "BSD-3-Clause",
   "author": {