@fishawack/lab-velocity 2.0.0-beta.2 → 2.0.0-beta.21

package/components/_typography.scss

@@ -0,0 +1,162 @@
+@import "@fishawack/lab-ui/_typography.scss";
+/* Primary font
+-------------------------------------------------- */
+@font-face {
+    font-family: $primaryFont;
+    font-weight: 400;
+    font-style: normal;
+
+    src:
+        resolve($primaryFontRegular + ".woff2") format("woff2"),
+        resolve($primaryFontRegular + ".woff") format("woff");
+}
+
+@font-face {
+    font-family: $primaryFont;
+    font-weight: 100;
+    font-style: normal;
+
+    src:
+        resolve($primaryFontThin + ".woff2") format("woff2"),
+        resolve($primaryFontThin + ".woff") format("woff");
+}
+
+@font-face {
+    font-family: $primaryFont;
+    font-weight: 200;
+    font-style: normal;
+
+    src:
+        resolve($primaryFontExtraLight + ".woff2") format("woff2"),
+        resolve($primaryFontExtraLight + ".woff") format("woff");
+}
+
+@font-face {
+    font-family: $primaryFont;
+    font-weight: 300;
+    font-style: normal;
+
+    src:
+        resolve($primaryFontLight + ".woff2") format("woff2"),
+        resolve($primaryFontLight + ".woff") format("woff");
+}
+
+@font-face {
+    font-family: $primaryFont;
+    font-weight: 500;
+    font-style: normal;
+
+    src:
+        resolve($primaryFontMedium + ".woff2") format("woff2"),
+        resolve($primaryFontMedium + ".woff") format("woff");
+}
+
+@font-face {
+    font-family: $primaryFont;
+    font-weight: 600;
+    font-style: normal;
+
+    src:
+        resolve($primaryFontSemiBold + ".woff2") format("woff2"),
+        resolve($primaryFontSemiBold + ".woff") format("woff");
+}
+
+@font-face {
+    font-family: $primaryFont;
+    font-weight: 700;
+    font-style: normal;
+
+    src:
+        resolve($primaryFontBold + ".woff2") format("woff2"),
+        resolve($primaryFontBold + ".woff2") format("woff2");
+}
+
+@font-face {
+    font-family: $secondaryFont;
+    font-weight: 500;
+    font-style: normal;
+
+    src: resolve($secondaryFontMedium + ".ttf") format("truetype");
+}
+
+h1,
+.h1 {
+    font-size: get-ratio(48px);
+    line-height: get-ratio(56px);
+    font-family: $primaryFont;
+}
+
+h2,
+.h2 {
+    font-size: get-ratio(36px);
+    line-height: get-ratio(48px);
+    font-family: $secondaryFont;
+}
+
+h3,
+.h3 {
+    font-size: get-ratio(32px);
+    line-height: get-ratio(42px);
+    font-family: $primaryFont;
+}
+
+h4,
+.h4 {
+    font-size: get-ratio(24px);
+    line-height: get-ratio(32px);
+    font-family: $primaryFont;
+}
+
+h5,
+.h5 {
+    font-size: get-ratio(20px);
+    line-height: get-ratio(24px);
+    font-weight: 700;
+    font-family: $primaryFont;
+}
+h1,
+.h1,
+h2,
+.h2,
+h3,
+.h3,
+h4,
+.h4,
+h5,
+.h5 {
+    font-weight: 500;
+}
+
+// may be project specific
+
+.font-secondary {
+    font-family: $secondaryFont;
+}
+
+.font-primary {
+    font-family: $primaryFont;
+}
+
+.text-10 {
+    font-size: get-ratio(10px);
+    line-height: get-ratio(16px);
+}
+.text-12 {
+    font-size: get-ratio(12px);
+    line-height: get-ratio(18px);
+}
+.text-14 {
+    font-size: get-ratio(14px);
+    line-height: get-ratio(20px);
+}
+.font-16 {
+    font-size: get-ratio(16px);
+    line-height: get-ratio(24px);
+}
+
+.text-60 {
+    font-size: get-ratio(60px);
+    line-height: get-ratio(68px);
+    font-weight: 500;
+    font-family: $primaryFont;
+}

package/components/_upload.scss

@@ -0,0 +1,15 @@
+@import "element-plus/theme-chalk/el-upload";
+
+.vel-upload {
+    .el-upload__tip {
+        color: $color11;
+    }
+    &.form__group--error {
+        .el-upload__tip {
+            color: $colorAlert;
+        }
+    }
+    &__error {
+        color: $colorAlert;
+    }
+}

package/components/_wysiwyg.scss

@@ -0,0 +1,7 @@
+@import "quill/dist/quill.snow";
+@import "quill/dist/quill.core";
+
+.ql-container,
+.ql-toolbar {
+    background-color: $color0;
+}

package/components/_wysiwyg2.scss

@@ -0,0 +1,142 @@
+@import "element-plus/theme-chalk/el-dropdown";
+@import "element-plus/theme-chalk/el-dropdown-item";
+@import "element-plus/theme-chalk/el-dialog";
+@import "./button.scss";
+
+.vel-wysiwyg__controls {
+    background-color: $color0;
+    display: flex;
+    flex-grow: 1;
+    border: solid $color5 2px;
+    border-bottom: none;
+    // margin-bottom: .5 * $spacing;
+    font-size: get-ratio(14px);
+    padding: 0 0.5 * $spacing;
+    > * {
+        padding: 0.5 * $spacing;
+        padding-right: $spacing;
+        --el-font-size-base: get-ratio(14px);
+        &:not(:last-child) {
+            border-right: solid 1px $color5;
+        }
+    }
+
+    button {
+        // border: solid 1px $color1;
+        background-color: transparent;
+        cursor: pointer;
+        min-width: 28px;
+        padding: 3px 5px;
+        line-height: 1;
+        border: none;
+        &.is-active,
+        &:hover {
+            background-color: $color5;
+        }
+        svg {
+            height: 90%;
+        }
+    }
+    .el-dropdown {
+        line-height: 1.15;
+    }
+
+    .ql-stroke {
+        fill: none;
+        stroke: #444;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        stroke-width: 2;
+    }
+
+    .ql-stroke-miter {
+        fill: none;
+        stroke: #444;
+        stroke-miterlimit: 10;
+        stroke-width: 2;
+    }
+
+    .ql-fill,
+    .ql-stroke.ql-fill {
+        fill: #444;
+    }
+
+    .ql-empty {
+        fill: none;
+    }
+
+    .ql-even {
+        fill-rule: evenodd;
+    }
+
+    .ql-thin,
+    .ql-stroke.ql-thin {
+        stroke-width: 1;
+    }
+
+    .ql-transparent {
+        opacity: 0.4;
+    }
+
+    ~ div {
+        // margin-top: $spacing;
+        border: solid $color5 2px;
+        background-color: $color0;
+        > div {
+            padding: 2 * $spacing;
+        }
+    }
+}
+.vel-wysiwyg__button {
+    // border: solid 1px $color1;
+    background-color: transparent;
+    // cursor: pointer;
+
+    &.is-active,
+    &:hover {
+        background-color: $color5;
+    }
+}
+
+.vel-wysiwyg {
+    // border: solid $color1 1px;
+    // padding: $spacing * 1.5;
+
+    table,
+    td,
+    th {
+        border: solid 0.5px $color1;
+    }
+    th {
+        background-color: $color5;
+    }
+    hr {
+        height: 1px;
+        background-color: $color1;
+    }
+    a {
+        text-decoration: underline;
+    }
+}
+
+.lab-table,
+.lab-table-cell,
+.lab-table-header {
+    border: solid 0.5px $color1;
+}
+.lab-table-header {
+    background-color: $color5;
+}
+
+.lab-table {
+    a {
+        text-decoration: underline;
+    }
+}
+.lab-table-cell {
+    &:active,
+    &:focus-within,
+    &.selectedCell {
+        background-color: transparentize($color: $color5, $amount: 0.8);
+    }
+}

package/index.js

@@ -8,6 +8,8 @@ export const Auth = {
     Store,
 };
 
+export { default as Resource } from "./_Build/vue/modules/resource/index.js";
+
 export { default as Button } from "./_Build/vue/components/basic/Button.vue";
 export { default as Link } from "./_Build/vue/components/basic/link.vue";
 
@@ -24,9 +26,13 @@ export { default as Wysiwyg2 } from "./_Build/vue/components/form/Wysiwyg2.vue";
 export { default as Upload } from "./_Build/vue/components/form/Upload.vue";
 export { default as InputNumber } from "./_Build/vue/components/form/InputNumber.vue";
 
-export { default as SideBar } from "./_Build/vue/components/layout/sideBar.vue";
+export { default as Chip } from "./_Build/vue/components/layout/Chip.vue";
+export { default as Chips } from "./_Build/vue/components/layout/Chips.vue";
+export { default as SideBar } from "./_Build/vue/components/layout/SideBar.vue";
 export { default as Footer } from "./_Build/vue/components/layout/Footer.vue";
 export { default as Header } from "./_Build/vue/components/layout/Header.vue";
+export { default as Layout } from "./_Build/vue/components/layout/Layout.vue";
+export { default as Navigation } from "./_Build/vue/components/layout/Navigation.vue";
 export { default as PageTitle } from "./_Build/vue/components/layout/pageTitle.vue";
 export { default as Alert } from "./_Build/vue/components/layout/Alert.vue";
 export { default as Tooltip } from "./_Build/vue/components/layout/Tooltip.vue";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fishawack/lab-velocity",
-    "version": "2.0.0-beta.2",
+    "version": "2.0.0-beta.21",
     "description": "Avalere Health branded style system",
     "scripts": {
         "setup": "npm ci || npm i && npm run content",
@@ -62,8 +62,10 @@
     },
     "files": [
         "*.scss",
+        "components",
         "_Build/vue/components",
-        "_Build/vue/modules/AuthModule"
+        "_Build/vue/modules/AuthModule",
+        "_Build/vue/modules/resource"
     ],
     "main": "index.js",
     "release": {

package/vendor.scss

@@ -15,7 +15,6 @@
 @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

package/_Build/vue/components/layout/sideBar.vue

@@ -1,25 +0,0 @@
-<template>
-    <div class="vel-side-bar" :class="{ active: active }">
-        <div>
-            <slot name="navigation" />
-        </div>
-
-        <div class="vel-side-bar__bottom">
-            <button class="vel-side-bar__button" @click="active = !active">
-                <slot name="expand"> > </slot>
-            </button>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    name: "SideBar",
-
-    data() {
-        return {
-            active: true,
-        };
-    },
-};
-</script>

package/_Build/vue/modules/AuthModule/adminRoutes/PCompanies/Children/Upload/upload.vue

@@ -1,251 +0,0 @@
-<template>
-    <VBreadcrumbs :items="breadcrumbs" class="mb-8" container-classes="m-0" />
-
-    <div class="container px-6 tablet:px-4 mobile:px-2 mb-8 ml-0 mr-0">
-        <div class="grid__1/2">
-            <div class="grid__1/1 grid justify-between mb-4 items-end">
-                <h2 class="h1">User import</h2>
-                <div>
-                    <el-button
-                        tag="a"
-                        type="secondary"
-                        href="/media/content/files/example.csv"
-                        download
-                    >
-                        <GIcon
-                            class="fill-1 mr-0.5"
-                            name="icon-download"
-                            embed
-                            artboard
-                        />
-                        Download example file
-                    </el-button>
-                </div>
-            </div>
-            <div class="grid__1/1">
-                <el-select
-                    v-model="form.roles"
-                    placeholder="Select"
-                    multiple
-                    name="roles"
-                    :error="form.errors"
-                    label="Roles"
-                    :options="[
-                        {
-                            label: 'Administrator',
-                            value: '1',
-                        },
-                        {
-                            label: 'Subscriber',
-                            value: '2',
-                        },
-                    ]"
-                />
-
-                <el-select
-                    v-if="form.roles && form.roles.length"
-                    v-model="form.permissions"
-                    placeholder="Select"
-                    multiple
-                    name="permissions"
-                    :error="form.errors"
-                    label="Permissions"
-                    :options="[
-                        {
-                            label: `Inherit Permissions`,
-                            value: null,
-                        },
-                        //{ // temporarily disabled as not used yet
-                        //    label: &quot;Approve Content&quot;,
-                        //    value: &quot;2&quot;
-                        //},
-                        {
-                            label: 'View content',
-                            value: '3',
-                        },
-                        {
-                            label: 'Write content',
-                            value: '4',
-                            disabled: !form.roles.includes(1),
-                        },
-                        {
-                            label: 'Delete content',
-                            value: '5',
-                            disabled: !form.roles.includes(1),
-                        },
-                    ]"
-                />
-            </div>
-            <div class="grid__1/1">
-                <hr class="my-3 hr-muted" />
-
-                <el-upload
-                    ref="upload"
-                    v-model="form.files"
-                    name="files"
-                    label="Upload spreadsheet"
-                    :auto-upload="false"
-                    :limit="1"
-                    :on-exceed="handleExceed"
-                >
-                    <template #trigger>
-                        <el-button
-                            class="mt"
-                            type="primary"
-                            :disabled="form.processing || form.files.length"
-                            >Select file</el-button
-                        >
-                    </template>
-
-                    <el-button
-                        class="ml relative button--spinner"
-                        type="success"
-                        :disabled="form.processing || !form.files.length"
-                        @click="submitUpload"
-                    >
-                        <span :class="{ active: !form.processing }"
-                            >Upload</span
-                        >
-                        <GSpinner :class="{ active: form.processing }" />
-                    </el-button>
-
-                    <small class="block my color-muted"
-                        >Upload one spreadsheet with a size less than
-                        50MB</small
-                    >
-                </el-upload>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-"use strict";
-
-import Form from "form-backend-validation";
-import { ElMessageBox, genFileId } from "element-plus";
-
-export default {
-    name: "Create",
-
-    components: {
-        VBreadcrumbs: require("../../../../components/VBreadcrumbs.vue")
-            .default,
-    },
-
-    data() {
-        return {
-            id: null,
-            breadcrumbs: [
-                {
-                    href: {
-                        name: "index",
-                    },
-                    text: "Home",
-                },
-            ],
-            form: new Form(
-                {
-                    step: 0,
-                    files: [],
-                    roles: [2],
-                    permissions: [null],
-                    company_id: null,
-                },
-                {
-                    http: window.axios,
-                },
-            ),
-        };
-    },
-
-    watch: {
-        "form.roles": {
-            handler(newVal) {
-                const subscriptions = [
-                    3, // view content
-                    4, // write content
-                    5, // delete content
-                ];
-
-                if (!newVal.includes(1)) {
-                    this.form.permissions = this.form.permissions.filter(
-                        (item) => subscriptions.includes(item),
-                    );
-
-                    if (!newVal.includes(2)) {
-                        this.form.permissions = this.form.permissions.filter(
-                            (item) => !subscriptions.includes(item),
-                        );
-                    }
-                }
-            },
-        },
-    },
-
-    async mounted() {
-        this.id = this.$route.params.id;
-        this.form.company_id = this.id;
-        window.axios.get(`/api/companies/${this.id}`).then((res) => {
-            const company = res.data.data;
-            this.breadcrumbs.push(
-                {
-                    href: {
-                        name: "companies.show",
-                        param: this.id,
-                    },
-                    text: company.name,
-                },
-                {
-                    href: {
-                        name: "companies.pload",
-                    },
-                    text: "User upload",
-                },
-            );
-        });
-    },
-
-    methods: {
-        submitUpload() {
-            this.form.post(`/api/users/import`).then(({ data }) => {
-                this.open(data);
-            });
-        },
-
-        handleExceed(files) {
-            this.$refs.upload.clearFiles();
-
-            const file = files[0];
-            file.uid = genFileId();
-
-            this.$refs.upload.handleStart(file);
-        },
-
-        open(data) {
-            let html = "Succesfully imported all users";
-
-            if (data.length > 0) {
-                html =
-                    "Errors detected on upload following emails were not added to the system<table>";
-                for (let x = 0; x < data.length; x++) {
-                    html += `<tr><td>${data[x].email}</td></tr>`;
-                }
-                html += "</table>";
-            }
-
-            ElMessageBox.alert(html, {
-                confirmButtonText: "Ok",
-                dangerouslyUseHTMLString: true,
-            })
-                .then(() => {
-                    this.$router.replace({
-                        name: "companies.show",
-                        params: { id: this.id },
-                    });
-                })
-                .catch(() => {});
-        },
-    },
-};
-</script>