@fishawack/lab-velocity 0.0.2

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/README.md

@@ -0,0 +1,17 @@
+## Background
+
+### What
+
+Avalere Health branded style system
+
+### Why
+
+Prevent code repetition.
+
+## Getting started
+
+### Install
+
+```bash
+npm install @fishawack/lab-velocity
+```

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/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/general.scss

@@ -0,0 +1,10 @@
+@import "_variables.scss";
+
+@import "_defaults.scss";
+
+// Local project imports
+@import "./components/_switch.scss";
+@import "./components/_basic.scss";
+@import "./components/_checkbox.scss";
+@import "./components/_icon.scss";
+@import "./components/_button.scss";

package/index.js

@@ -0,0 +1,8 @@
+import Basic from "./Form/Basic.vue";
+import Switch from "./Form/Switch.vue";
+import CheckboxGroup from "./Form/CheckboxGroup.vue";
+
+export const form = {
+    Basic,
+    Switch
+};

package/package.json

@@ -0,0 +1,54 @@
+{
+    "name": "@fishawack/lab-velocity",
+    "version": "0.0.2",
+    "description": "Avalere Health branded style system",
+    "scripts": {
+        "setup": "npm ci || npm i && npm run content",
+        "content": "npm run content --prefix node_modules/@fishawack/core/",
+        "start": "npm run production && npm run story:dev",
+        "production": "npm run production --prefix node_modules/@fishawack/core/ && npm run story:build",
+        "test": "npm test --prefix node_modules/@fishawack/core/",
+        "package": "npm run package --prefix node_modules/@fishawack/core/",
+        "deploy": "npm run deploy --prefix node_modules/@fishawack/core/",
+        "mail": "npm run mail --prefix node_modules/@fishawack/core/",
+        "story:dev": "histoire dev",
+        "story:build": "histoire build",
+        "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\""
+    },
+    "license": "BSD-3-Clause",
+    "author": {
+        "name": "Fishawack",
+        "url": "https://fishawack.com/"
+    },
+    "keywords": [
+        "css",
+        "components"
+    ],
+    "devDependencies": {
+        "@fishawack/core": "^8.16.1",
+        "@fishawack/lab-ui": "^12.5.0",
+        "@histoire/plugin-vue": "^0.17.17",
+        "@vitejs/plugin-vue": "^5.1.1",
+        "histoire": "^0.17.17",
+        "sass": "^1.77.8",
+        "vite": "^5.3.5",
+        "vite-svg-loader": "^5.1.0",
+        "vue": "^3.4.34",
+        "vue-loader": "^17.2.2",
+        "vue-router": "^4.4.0",
+        "vuex": "^4.1.0",
+        "vuex-persistedstate": "^4.1.0"
+    },
+    "dependencies": {
+        "element-plus": "^2.7.8"
+    },
+    "files": [
+        "*.scss",
+        "*.vue",
+        "form"
+    ],
+    "main": "index.js"
+}

package/vendor.scss

@@ -0,0 +1,22 @@
+@import "_variables.scss";
+
+@import "_defaults.scss";
+
+@import "normalize.css/normalize";
+
+#svgSprite{
+    position: absolute;
+    width: 0;
+    height: 0;
+    z-index: -1;
+}
+
+// Vendor imports / Lab-ui imports
+@import "@fishawack/lab-ui/_typography.scss";
+@import "@fishawack/lab-ui/_grid.scss";
+@import "@fishawack/lab-ui/_button.scss";
+
+@import "@fishawack/lab-ui/_utilities.scss";
+
+// Element-plus base style
+@import "./_base.scss";