@fishawack/lab-velocity 2.0.0-beta.11 → 2.0.0-beta.13

package/_Build/vue/modules/resource/Children/show.vue

@@ -0,0 +1,145 @@
+<template>
+    <VBreadcrumbs
+        :items="addBreadcrumbs"
+        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/1">
+            <template v-if="model">
+                <div class="bg-0 p-3 box-shadow-1 border-r-4 mb-6">
+                    <VelPageHeader
+                        :icon="resource.icon"
+                        :title="`${model.name} ${model.last_name ?? ''}`"
+                    >
+                        <template
+                            v-for="(row, index) in resource.show.actions"
+                            :key="index"
+                        >
+                            <template v-if="row.render">
+                                <component :is="row.render(this)" />
+                            </template>
+                        </template>
+                        <VelButton
+                            v-if="resource.permissions.edit"
+                            tag="a"
+                            type="primary"
+                            @click="
+                                $router.push({
+                                    name: `${resource.name}.edit`,
+                                    param: model.id,
+                                })
+                            "
+                        >
+                            <GIcon
+                                class="fill-0 mr-0.5 icon--0.5"
+                                name="icon-edit"
+                                embed
+                                artboard
+                            />
+                            Edit {{ resource.singular }}
+                        </VelButton>
+                    </VelPageHeader>
+
+                    <hr class="my-3 hr-muted" />
+
+                    <template
+                        v-for="(row, index) in resource.show.structure"
+                        :key="index"
+                    >
+                        <template v-if="row.render">
+                            <component :is="row.render(this)" />
+                        </template>
+                        <el-descriptions v-else border column="1">
+                            <el-descriptions-item
+                                v-for="(item, i) in row"
+                                :key="i"
+                                :label-width="'20%'"
+                            >
+                                <template #label>
+                                    {{
+                                        item.label ||
+                                        item.key[0].toUpperCase() +
+                                            item.key.slice(1)
+                                    }}
+                                </template>
+
+                                <template v-if="item.render">
+                                    <component :is="item.render(this)" />
+                                </template>
+                                <template v-else>
+                                    {{ model[item.key] }}
+                                </template>
+                            </el-descriptions-item>
+                        </el-descriptions>
+
+                        <hr
+                            v-if="index < resource.show.structure.length - 1"
+                            class="my-3 hr-muted"
+                        />
+                    </template>
+                </div>
+            </template>
+
+            <div v-else class="absolute transform-center text-center">
+                <VelSpinner />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import axios from "axios";
+import VelSpinner from "../../../components/form/Spinner.vue";
+import VelButton from "../../../components/basic/Button.vue";
+import { ElDescriptions, ElDescriptionsItem } from "element-plus";
+
+export default {
+    components: {
+        VBreadcrumbs: require("../../../components/layout/Breadcrumbs.vue")
+            .default,
+        VelPageHeader: require("../../../components/layout/PageHeader.vue")
+            .default,
+        VelSpinner,
+        VelButton,
+        ElDescriptions,
+        ElDescriptionsItem,
+    },
+
+    props: {
+        breadcrumbs: {
+            type: Array,
+            required: true,
+        },
+        resource: {
+            type: Object,
+            required: true,
+        },
+    },
+
+    data() {
+        return {
+            model: null,
+            addBreadcrumbs: [...this.$props.breadcrumbs],
+        };
+    },
+
+    mounted() {
+        axios
+            .get(
+                `${this.resource.api}/${this.$route.params.id}?${this.resource.defaults}`,
+            )
+            .then((res) => {
+                this.model = res.data.data;
+                this.addBreadcrumbs.push({
+                    href: {
+                        name: `${this.resource.name}.show`,
+                        param: this.model.id,
+                    },
+                    text: this.model.name,
+                });
+            });
+    },
+};
+</script>

package/_Build/vue/modules/resource/index.js

@@ -0,0 +1,112 @@
+"use strict";
+
+import { merge } from "lodash";
+
+import { h } from "vue";
+
+import VTableSorter from "../../components/layout/TableSorter.vue";
+
+export function meta(name, properties = {}) {
+    const singular = properties.singular || name.slice(0, -1);
+
+    return merge(
+        {
+            name,
+            title: properties.title || name[0].toUpperCase() + name.slice(1),
+            singular,
+            label: singular,
+            multiLabel: name,
+            pageLink: name,
+            api: `/api/${name}`,
+            permissions: {
+                create: true,
+                edit: true,
+            },
+            searchable: {
+                value: "name",
+                label: `Search ${name}`,
+            },
+            form: {
+                component: null,
+                fields: () => ({}),
+            },
+            table: {
+                structure: [],
+            },
+            index: {
+                actions: [],
+                structure: [
+                    {
+                        render: ({ resource }) =>
+                            h(VTableSorter, {
+                                key: "PIndex",
+                                "json-data": {
+                                    ...resource,
+                                    tableStructure: resource.table.structure,
+                                },
+                                defaults: resource.defaults,
+                                "fixed-height": false,
+                                "display-edit-action":
+                                    resource.permissions.create,
+                            }),
+                    },
+                ],
+            },
+            show: {
+                actions: [],
+                structure: [],
+            },
+            defaults: "",
+            icon: `icon-${singular}`,
+        },
+        properties,
+    );
+}
+
+// Export resource
+export function routes(node, name, properties = {}) {
+    return [
+        {
+            path: `/${name}`,
+            component: node ? "" : require("../resource/parent.vue").default,
+            meta: {
+                resource: meta(name, properties),
+            },
+            children: [
+                {
+                    path: "",
+                    component: node
+                        ? ""
+                        : require("../resource/Children/index.vue").default,
+                    name: `${name}.index`,
+                },
+                {
+                    path: "create",
+                    component: node
+                        ? ""
+                        : require("../resource/Children/create.vue").default,
+                    name: `${name}.create`,
+                },
+                {
+                    path: ":id",
+                    component: node
+                        ? ""
+                        : require("../resource/Children/show.vue").default,
+                    name: `${name}.show`,
+                },
+                {
+                    path: ":id/edit",
+                    component: node
+                        ? ""
+                        : require("../resource/Children/edit.vue").default,
+                    name: `${name}.edit`,
+                },
+            ],
+        },
+    ];
+}
+
+export default {
+    routes,
+    meta,
+};

package/_Build/vue/modules/resource/parent.vue

@@ -0,0 +1,41 @@
+<template>
+    <PageTitle :title="resource.title" />
+
+    <router-view
+        :key="$route.path"
+        :breadcrumbs="breadcrumbs"
+        :resource="resource"
+    />
+</template>
+
+<script>
+import PageTitle from "../../components/layout/pageTitle.vue";
+
+export default {
+    components: {
+        PageTitle,
+    },
+
+    computed: {
+        resource() {
+            return this.$route.meta.resource;
+        },
+        breadcrumbs() {
+            return [
+                {
+                    href: {
+                        name: "index",
+                    },
+                    text: "Home",
+                },
+                {
+                    href: {
+                        name: `${this.resource.name}.index`,
+                    },
+                    text: this.resource.title,
+                },
+            ];
+        },
+    },
+};
+</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.11",
+    "version": "2.0.0-beta.13",
     "description": "Avalere Health branded style system",
     "scripts": {
         "setup": "npm ci || npm i && npm run content",
@@ -64,7 +64,8 @@
         "*.scss",
         "components",
         "_Build/vue/components",
-        "_Build/vue/modules/AuthModule"
+        "_Build/vue/modules/AuthModule",
+        "_Build/vue/modules/resource"
     ],
     "main": "index.js",
     "release": {

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>