@fishawack/lab-velocity 0.1.0 → 0.1.1

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,37 @@
+@import "element-plus/theme-chalk/el-checkbox.css";
+@import "element-plus/theme-chalk/el-checkbox-button.css";
+
+.vel-checkbox {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: .5rem;
+        flex-wrap: wrap ;
+        &__label{
+            order: 2;
+        }
+        &__checkbox {
+            order: 1;
+            .el-checkbox__input {
+                &.is-checked {
+                    .el-checkbox__inner {
+                        background-color: black;
+                    }
+                }
+            }
+        }
+        &__error {
+           order: 3;
+           flex-basis: 100%;
+        }        
+}
+
+.vel-checkbox-group {
+    &--vertical {
+        .vel-checkbox-group__wrapper {
+            display: flex;
+            flex-direction: column;
+        }
+    }
+
+}

package/components/_datepicker.scss

@@ -0,0 +1,8 @@
+@import "element-plus/theme-chalk/el-date-picker.css";
+
+.vel-datepicker {   
+}
+
+.vel-popper {
+    border-color: red !important;
+}

package/components/_icon.scss

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

package/components/_select.scss

@@ -0,0 +1,5 @@
+@import "element-plus/theme-chalk/el-select.css";
+@import "element-plus/theme-chalk/el-tag.css";
+
+.vel-select {   
+}

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/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/CheckboxGroup.vue

@@ -0,0 +1,69 @@
+<template>
+    <XInput v-bind="$props">
+        <el-checkbox-group :class="[`${baseClass}__wrapper`]" :id="name" :disabled="disabled" :size="size" :min="min"
+            :max="max" v-model="content" :required="required" @change="handleInput" :checkboxButton="checkboxButton">
+            <el-checkbox v-if="!checkboxButton" :key="index" v-for="({ label, value, disabled }, index) in options"
+                :label="label" :value="value" :disabled="disabled">
+                <slot name="label" :label="label" :value="value">
+                    <span v-html="label"></span>
+                </slot>
+            </el-checkbox>
+            <el-checkbox-button v-else :key="indexB" v-for="({ label, value, disabled }, indexB) in options"
+                :label="label" :value="value" :disabled="disabled">
+                <slot name="label" :label="label" :value="value">
+                    <span v-html="label"></span>
+                </slot>
+            </el-checkbox-button>
+        </el-checkbox-group>
+    </XInput>
+</template>
+
+<script>
+import { ElCheckbox } from "element-plus";
+import { ElCheckboxButton } from "element-plus";
+import { ElCheckboxGroup } from "element-plus";
+import input from "./input.js";
+import XInput from "./input.vue";
+
+export default {
+    mixins: [input],
+    props: {
+        ...input.props,
+        modelValue: {
+            type: Array,
+            default: [],
+        },
+        baseClass: {
+            type: String,
+            default: "vel-checkbox-group",
+        },
+        checkboxButton: {
+            type: Boolean,
+            default: false,
+        },
+        size: {
+            type: String,
+            default: "default",
+        },
+        min: {
+            type: Number,
+            default: 0,
+        },
+        max: {
+            type: Number,
+            default: 100,
+        },
+        options: {
+            type: Array,
+            default: [],
+        },
+    },
+
+    components: {
+        XInput,
+        ElCheckbox,
+        ElCheckboxButton,
+        ElCheckboxGroup,
+    },
+};
+</script>

package/form/DatePicker.vue

@@ -0,0 +1,78 @@
+<template>
+    <XInput v-bind="$props">
+        <template #label>
+            <slot name="label" />
+        </template>
+
+        <el-date-picker v-bind="$attrs"
+            :type="type"
+            :disabled="disabled"
+            :disabled-date="disabledDate"
+-           :placeholder="placeholder"
+            :shortcuts="shortcuts"
+            class="w-100"
+            v-model="content"
+            @change="handleInput"
+            :value-format="valueFormat"
+            :format="format"
+        />
+    </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
+        },
+        baseClass: {
+            type: String,
+            default: "vel-datepicker",
+        },
+        minDate: {
+            type: [Date, String],
+        },
+        maxDate: {
+            type: [Date, String],
+        },
+        shortcuts: {
+            type: Array,
+            default: [],
+        },
+    },
+    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/form/Select.vue

@@ -0,0 +1,111 @@
+<template>
+    <XInput v-bind="$props">
+        <template #label>
+            <slot name="label" />
+        </template>
+
+        <el-select
+            v-model="content"
+            class="block"
+            :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')"
+        >
+            <el-option
+                v-if="!object"
+                v-for="(label, value) in options"
+                :key="value"
+                :label="label"
+                :value="castValue(value)"
+            >
+            </el-option>
+            <el-option
+                v-else-if="object"
+                v-for="option in options"
+                :key="option.value"
+                :label="option.label"
+                :disabled="option.disabled"
+                :value="castValue(option.value)"
+            >
+            </el-option>
+        </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,
+        },
+        object: {
+            type: Boolean,
+            default: false,
+        },
+    },
+
+    components: {
+        XInput,
+        ElOption,
+        ElSelect,
+    },
+
+    emits: ['change', 'clear', 'blur'],
+    methods: {
+        castValue(value) {
+            if (
+                !_.isNull(value) &&
+                typeof value === "string" &&
+                !isNaN(Number(value))
+            ) {
+                return parseInt(value);
+            }
+            return value;
+        },
+        handleInput(value, $event) {
+            this.$emit('change', 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/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/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/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/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,12 @@
+@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";
+@import "./components/_select.scss";
+@import "./components/_datepicker.scss";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fishawack/lab-velocity",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Avalere Health branded style system",
   "scripts": {
     "setup": "npm ci || npm i && npm run content",
@@ -13,7 +13,7 @@
     "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": "cp -r _Build/sass/** ./ && cp -r _Build/vue/components/** ./"
   },
   "license": "BSD-3-Clause",
   "author": {

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";