@fishawack/lab-velocity 0.0.6 → 0.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fishawack/lab-velocity",
-  "version": "0.0.6",
+  "version": "0.1.0",
   "description": "Avalere Health branded style system",
   "scripts": {
     "setup": "npm ci || npm i && npm run content",
@@ -13,10 +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": "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'"
+    "pretest": "cp -r _Build/sass/** ./ && cp -r _Build/vue/components/** ./"
   },
   "license": "BSD-3-Clause",
   "author": {
@@ -34,6 +31,7 @@
     "@vitejs/plugin-vue": "^5.1.1",
     "histoire": "^0.17.17",
     "sass": "^1.77.8",
+    "semantic-release": "^22.0.12",
     "vite": "^5.3.5",
     "vite-svg-loader": "^5.1.0",
     "vue": "^3.4.34",

package/Icon.vue

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

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

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

package/_defaults.scss

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

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

package/components/_basic.scss

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

package/components/_button.scss

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

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

package/components/_icon.scss

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

package/components/_switch.scss

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

package/form/Button.vue

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,10 +0,0 @@
-@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/vendor.scss

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