@fishawack/lab-velocity 2.0.0-beta.10 → 2.0.0-beta.12

package/_Build/vue/modules/AuthModule/routes/change-password.vue

@@ -36,7 +36,7 @@
                         :password="true"
                     />
 
-                    <VPasswordValidation
+                    <VelPasswordValidation
                         :password="form.password"
                         @passwordValid="updatePasswordValidity"
                     />
@@ -83,6 +83,14 @@
 import Form from "form-backend-validation";
 
 export default {
+    components: {
+        VelPasswordValidation:
+            require("../../../components/layout/PasswordValidation.vue")
+                .default,
+        elInput: require("../../../components/form/basic.vue").default,
+        elButton: require("../../../components/basic/Button.vue").default,
+    },
+
     data() {
         return {
             form: new Form(
@@ -152,12 +160,5 @@ export default {
             title: "Reset Password",
         };
     },
-
-    components: {
-        VPasswordValidation: require("./../components/VPasswordValidation.vue")
-            .default,
-        elInput: require("../../../components/form/basic.vue").default,
-        elButton: require("../../../components/basic/Button.vue").default,
-    },
 };
 </script>

package/_Build/vue/modules/AuthModule/routes/container.vue

@@ -5,7 +5,7 @@
                 <router-link to="/" class="logo" aria-label="Go to home page">
                     <GSvg
                         class="AuthModule__logo"
-                        :name="logoName"
+                        :name="$store.state.auth.logo"
                         embed
                         asis
                         role="presentation"
@@ -21,14 +21,5 @@
 </template>
 
 <script>
-export default {
-    mounted() {},
-    data() {
-        return {
-            logoName: process.env.HYDRATE_LOGO,
-        };
-    },
-
-    components: {},
-};
+export default {};
 </script>

package/_Build/vue/modules/AuthModule/routes/force-reset.vue

@@ -33,7 +33,7 @@
                         required
                     />
 
-                    <VPasswordValidation
+                    <VelPasswordValidation
                         :password="form.password"
                         @passwordValid="updatePasswordValidity"
                     />
@@ -71,6 +71,14 @@
 import Form from "form-backend-validation";
 
 export default {
+    components: {
+        VelPasswordValidation:
+            require("../../../components/layout/PasswordValidation.vue")
+                .default,
+        elInput: require("../../../components/form/basic.vue").default,
+        elButton: require("../../../components/basic/Button.vue").default,
+    },
+
     data() {
         return {
             form: new Form(
@@ -136,12 +144,5 @@ export default {
             title: "Reset Password",
         };
     },
-
-    components: {
-        VPasswordValidation: require("./../components/VPasswordValidation.vue")
-            .default,
-        elInput: require("../../../components/form/basic.vue").default,
-        elButton: require("../../../components/basic/Button.vue").default,
-    },
 };
 </script>

package/_Build/vue/modules/AuthModule/routes/register.vue

@@ -42,7 +42,7 @@
             :error="form.errors"
         />
 
-        <VPasswordValidation
+        <VelPasswordValidation
             :password="form.password"
             @passwordValid="updatePasswordValidity"
         />
@@ -86,6 +86,14 @@ import Form from "form-backend-validation";
 import { ElNotification } from "element-plus";
 
 export default {
+    components: {
+        VelPasswordValidation:
+            require("../../../components/layout/PasswordValidation.vue")
+                .default,
+        elInput: require("../../../components/form/basic.vue").default,
+        elButton: require("../../../components/basic/Button.vue").default,
+    },
+
     data() {
         return {
             form: new Form(
@@ -160,12 +168,5 @@ export default {
             this.isPasswordValid = isValid;
         },
     },
-
-    components: {
-        VPasswordValidation: require("./../components/VPasswordValidation.vue")
-            .default,
-        elInput: require("../../../components/form/basic.vue").default,
-        elButton: require("../../../components/basic/Button.vue").default,
-    },
 };
 </script>

package/_Build/vue/modules/AuthModule/routes/reset.vue

@@ -23,7 +23,7 @@
                         required
                     />
 
-                    <VPasswordValidation
+                    <VelPasswordValidation
                         :password="form.password"
                         @passwordValid="updatePasswordValidity"
                     />
@@ -68,6 +68,14 @@
 import Form from "form-backend-validation";
 
 export default {
+    components: {
+        VelPasswordValidation:
+            require("../../../components/layout/PasswordValidation.vue")
+                .default,
+        elInput: require("../../../components/form/basic.vue").default,
+        elButton: require("../../../components/basic/Button.vue").default,
+    },
+
     data() {
         return {
             form: new Form(
@@ -122,12 +130,5 @@ export default {
             title: "Reset Password",
         };
     },
-
-    components: {
-        VPasswordValidation: require("./../components/VPasswordValidation.vue")
-            .default,
-        elInput: require("../../../components/form/basic.vue").default,
-        elButton: require("../../../components/basic/Button.vue").default,
-    },
 };
 </script>

package/components/_descriptions.scss

@@ -0,0 +1,2 @@
+@import "element-plus/theme-chalk/el-descriptions";
+@import "element-plus/theme-chalk/el-descriptions-item";

package/components/_footer.scss

@@ -3,6 +3,7 @@
     padding: $spacing * 3 $spacing * 3 $spacing * 2 $spacing * 3;
     box-sizing: border-box;
     width: 100%;
+    margin-top: 6 * $spacing;
 
     svg {
         // width: 3 * $spacing;

package/components/_header.scss

@@ -1,45 +1,21 @@
 .vel-header {
     border-bottom: solid get-ratio(1px) $color4;
     background-color: $color0;
-    width: 100%;
-    box-sizing: border-box;
     display: flex;
-    flex-wrap: wrap;
     align-items: center;
-    align-content: center;
-    flex-basis: 100%;
     justify-content: space-between;
     padding: 1.5 * $spacing 3 * $spacing;
-
-    > * {
-        max-width: 50%;
-        flex-basis: 50%;
-        justify-content: flex-end !important;
-    }
-
-    .icon {
-        min-width: $spacing * 2.5;
-        max-width: $spacing * 2.5;
-        width: $spacing * 2.5;
-        height: $spacing * 2.5;
-        margin-right: 0.5 * $spacing;
-    }
 }
 
 .vel-header__list {
     display: flex;
-    flex-wrap: wrap;
-    align-items: stretch;
-    align-content: stretch;
-    flex-basis: 100%;
-    padding-right: 1.5 * $spacing;
-    margin-left: -1.5 * $spacing;
-    margin-right: -1.5 * $spacing;
 
     > div {
         align-items: center;
+
         &:not(:last-child) {
             position: relative;
+
             &::after {
                 position: absolute;
                 content: "";
@@ -47,7 +23,7 @@
                 height: 75%;
                 transform: translateY(-50%);
                 top: 50%;
-                right: 0px;
+                right: 0;
             }
         }
     }

package/components/_layout.scss

@@ -0,0 +1,56 @@
+html,
+body {
+    height: 100%;
+    margin: 0;
+}
+
+.vel-app {
+    display: flex;
+    flex-direction: column;
+    height: 100dvh;
+}
+
+.vel-header {
+    flex: 0 0 auto;
+}
+
+.vel-content {
+    flex: 1 1 auto;
+    min-height: 0; /* allow shrinking */
+    display: flex;
+    overflow: auto; /* main scroll container */
+}
+
+.vel-sidebar {
+    min-height: 0;
+}
+
+.vel-sidebar__inner {
+    position: sticky;
+    top: 0;
+    display: flex;
+    flex-direction: column;
+    max-height: 100%;
+}
+
+.vel-sidebar__top {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: auto; /* optional scroll */
+}
+
+.vel-sidebar__bottom {
+    flex: 0 0 auto;
+}
+
+.vel-main {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+}
+
+.vel-main__inner {
+    flex-grow: 1;
+}

package/components/_sidebar.scss

@@ -1,56 +1,41 @@
-.vel-side-bar {
-    flex-basis: $spacing * 7.5;
+.vel-sidebar {
+    width: $spacing * 7.5;
+    padding-top: $spacing * 2;
     display: flex;
     flex-direction: column;
-    box-shadow: 0px $spacing * 0.5 $spacing * 0.5 0px hsla(0, 0%, 0%, 0.251);
-    min-height: 10vh;
-    max-height: 100vh;
-    overflow: hidden;
-    transition: flex-basis 0.3s ease-in-out;
+    box-shadow: 0 $spacing * 0.5 $spacing * 0.5 0 hsla(0, 0, 0, 0.251);
+    transition: width 0.3s ease-in-out;
     background-color: $color0;
 
-    position: sticky;
-    top: 0vh;
-    padding-top: 2 * $spacing;
-    min-width: get-ratio(64px);
-    flex-basis: get-ratio(64px);
-
     > div {
         &:first-child {
-            flex-grow: 0.8;
-        }
-        &:last-child {
-            margin-bottom: 5.5vh;
+            flex: 1;
         }
     }
 
     &.active {
-        flex-basis: 31.5 * $spacing;
-        min-width: 31.5 * $spacing;
+        width: 31.5 * $spacing;
 
-        .vel-side-bar__button {
+        .vel-sidebar__button {
             transform: rotateY(180deg);
         }
     }
 }
 
-.vel-side-bar__button {
+.vel-sidebar__button {
     outline: none;
     background-color: transparent;
     border: none;
     cursor: pointer;
+
     &:focus {
         outline: 1px solid;
     }
 }
 
-.vel-side-bar__bottom {
+.vel-sidebar__bottom {
     display: flex;
     justify-content: flex-end;
     border-top: solid 1px #e6e6e6;
-    padding: $spacing $spacing * 1.5;
-}
-
-main {
-    overflow: hidden;
+    padding: $spacing * 2;
 }

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.10",
+    "version": "2.0.0-beta.12",
     "description": "Avalere Health branded style system",
     "scripts": {
         "setup": "npm ci || npm i && npm run content",

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,259 +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>
-                    <VelButton
-                        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
-                    </VelButton>
-                </div>
-            </div>
-            <div class="grid__1/1">
-                <VelSelect
-                    v-model="form.roles"
-                    placeholder="Select"
-                    multiple
-                    name="roles"
-                    :error="form.errors"
-                    label="Roles"
-                    :options="[
-                        {
-                            label: 'Administrator',
-                            value: '1',
-                        },
-                        {
-                            label: 'Subscriber',
-                            value: '2',
-                        },
-                    ]"
-                />
-
-                <VelSelect
-                    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" />
-
-                <VelUpload
-                    ref="upload"
-                    v-model="form.files"
-                    name="files"
-                    label="Upload spreadsheet"
-                    :auto-upload="false"
-                    :limit="1"
-                    :on-exceed="handleExceed"
-                >
-                    <template #trigger>
-                        <VelButton
-                            class="mt"
-                            type="primary"
-                            :disabled="form.processing || form.files.length"
-                            >Select file</VelButton
-                        >
-                    </template>
-
-                    <VelButton
-                        class="ml relative button--spinner"
-                        type="success"
-                        :disabled="form.processing || !form.files.length"
-                        @click="submitUpload"
-                    >
-                        <span :class="{ active: !form.processing }"
-                            >Upload</span
-                        >
-                        <VelSpinner :class="{ active: form.processing }" />
-                    </VelButton>
-
-                    <small class="block my color-muted"
-                        >Upload one spreadsheet with a size less than
-                        50MB</small
-                    >
-                </VelUpload>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-"use strict";
-
-import Form from "form-backend-validation";
-import { ElMessageBox, genFileId } from "element-plus";
-import VelButton from "../../../../../../components/basic/Button.vue";
-import VelSelect from "../../../../../../components/form/Select.vue";
-import VelUpload from "../../../../../../components/form/Upload.vue";
-import VelSpinner from "../../../../../../components/form/Spinner.vue";
-
-export default {
-    name: "Create",
-
-    components: {
-        VBreadcrumbs: require("../../../../components/VBreadcrumbs.vue")
-            .default,
-        VelButton,
-        VelSelect,
-        VelUpload,
-        VelSpinner,
-    },
-
-    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>