@fishawack/lab-velocity 2.0.0-beta.4 → 2.0.0-beta.41

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

@@ -0,0 +1,545 @@
+"use strict";
+
+import { merge, kebabCase, snakeCase, cloneDeepWith } from "lodash";
+import axios from "axios";
+import { h, resolveComponent } from "vue";
+
+import VelTableSorter from "../../components/layout/TableSorter.vue";
+import {
+    ElDescriptions,
+    ElDescriptionsItem,
+    ElPopconfirm,
+    ElNotification,
+} from "element-plus";
+import VelButton from "../../components/basic/Button.vue";
+
+export const defaultResource = meta();
+
+export function meta(name = "default", properties = {}) {
+    const singular = properties.singular || name.slice(0, -1);
+    const slug = properties.slug || kebabCase(name);
+
+    return merge(
+        {
+            name,
+            title: properties.title || name[0].toUpperCase() + name.slice(1),
+            singular,
+            singularTitle:
+                properties.singularTitle ||
+                singular[0].toUpperCase() + singular.slice(1),
+            label: singular,
+            multiLabel: name,
+            slug,
+            path: properties.path || `/${slug}`,
+            routeName: properties.routeName || slug,
+            id: properties.id || `${snakeCase(slug)}Id`,
+            icon: `icon-${singular}`,
+            api: {
+                endpoint: () => `/api/${properties.slug || kebabCase(name)}`,
+                params: {
+                    index: () => ({}),
+                    show: () => ({}),
+                },
+            },
+            permissions: {
+                create: () => true,
+                edit: () => true,
+                delete: () => false,
+            },
+            searchable: {
+                value: "name",
+                label: `Search ${name}`,
+            },
+            form: {
+                component: null,
+                submit: null,
+                fields: () => ({}),
+                preparation: ({ form }) => form.data(),
+                structure: [],
+            },
+            table: {
+                actions: [
+                    ({ model, resource }, { $router }) =>
+                        !model.deleted_at &&
+                        h(
+                            VelButton,
+                            {
+                                tag: "a",
+                                size: "small",
+                                type: "primary",
+                                onClick: () => {
+                                    $router.push({
+                                        name: `${resource.routeName}.show`,
+                                        params: {
+                                            [resource.id]: model.id,
+                                        },
+                                    });
+                                },
+                            },
+                            () => "View",
+                        ),
+                    ({ model, resource }, props) => {
+                        const { $router } = props;
+
+                        if (resource.permissions.edit(props, { model })) {
+                            return (
+                                !model.deleted_at &&
+                                h(
+                                    VelButton,
+                                    {
+                                        tag: "a",
+                                        size: "small",
+                                        onClick: () => {
+                                            $router.push({
+                                                name: `${resource.routeName}.edit`,
+                                                params: {
+                                                    [resource.id]: model.id,
+                                                },
+                                            });
+                                        },
+                                    },
+                                    () => "Edit",
+                                )
+                            );
+                        }
+                    },
+                    ({ model, resource }, props) => {
+                        const { $emit } = props;
+
+                        if (resource.permissions.delete(props, { model })) {
+                            return (
+                                !model.deleted_at &&
+                                h({
+                                    data: () => ({
+                                        loading: false,
+                                    }),
+                                    render() {
+                                        return h(
+                                            ElPopconfirm,
+                                            {
+                                                title: `Are you sure you want to delete this ${resource.singular}?`,
+                                                confirmButtonText: "Delete",
+                                                cancelButtonText: "Cancel",
+                                                confirmButtonType: "danger",
+                                                onConfirm: async () => {
+                                                    this.loading = true;
+
+                                                    await axios.delete(
+                                                        `${resource.api.endpoint(props)}/${model.id}`,
+                                                    );
+
+                                                    $emit("reload");
+
+                                                    ElNotification({
+                                                        title: "Success",
+                                                        message: `${resource.singularTitle} with id ${model.id} deleted.`,
+                                                        type: "success",
+                                                    });
+
+                                                    this.loading = false;
+                                                },
+                                            },
+                                            {
+                                                reference: () =>
+                                                    h(
+                                                        VelButton,
+                                                        {
+                                                            tag: "a",
+                                                            type: "danger",
+                                                            size: "small",
+                                                            loading:
+                                                                this.loading,
+                                                        },
+                                                        () => `Delete`,
+                                                    ),
+                                            },
+                                        );
+                                    },
+                                })
+                            );
+                        }
+                    },
+                ],
+                structure: [
+                    {
+                        key: "id",
+                    },
+                ],
+            },
+            description: {
+                structure: [
+                    {
+                        key: "id",
+                    },
+                ],
+            },
+            index: {
+                structure: (props) => {
+                    const { resource } = props;
+
+                    return {
+                        key: "PIndex",
+                        "json-data": {
+                            ...resource,
+                            tableStructure: resource.table
+                                .structure(props)
+                                .concat(
+                                    resource.table.actions.length
+                                        ? [
+                                              {
+                                                  key: "actions",
+                                                  render: ({ model }, props) =>
+                                                      h(
+                                                          "div",
+                                                          {
+                                                              class: "flex gap-2",
+                                                          },
+                                                          resource.table.actions.map(
+                                                              (d) =>
+                                                                  d(
+                                                                      {
+                                                                          model,
+                                                                          resource,
+                                                                      },
+                                                                      props,
+                                                                  ),
+                                                          ),
+                                                      ),
+                                              },
+                                          ]
+                                        : [],
+                                ),
+                            api: resource.api.endpoint(props),
+                        },
+                        apiParams: resource.api.params.index(props),
+                        idKey: resource.id,
+                        "fixed-height": false,
+                        displayActions: false,
+                    };
+                },
+                actions: [
+                    (props) => {
+                        const { resource, $router } = props;
+
+                        if (resource.permissions.create(props)) {
+                            return h(
+                                VelButton,
+                                {
+                                    tag: "a",
+                                    type: "primary",
+                                    size: "large",
+                                    onClick: () => {
+                                        $router.push({
+                                            name: `${resource.routeName}.create`,
+                                        });
+                                    },
+                                },
+                                () => [
+                                    h(resolveComponent("GIcon"), {
+                                        class: "fill-0 mr-0.5 icon--0.5",
+                                        name: "icon-plus",
+                                        embed: true,
+                                        artboard: true,
+                                    }),
+                                    `Create ${resource.singular}`,
+                                ],
+                            );
+                        }
+                    },
+                ],
+                layout: [
+                    (props) => {
+                        const { resource } = props;
+
+                        return h(
+                            VelTableSorter,
+                            resource.index.structure(props),
+                        );
+                    },
+                ],
+            },
+            show: {
+                actions: [
+                    (props) => {
+                        const { resource, model, $router } = props;
+
+                        if (resource.permissions.edit(props, { model })) {
+                            return h(
+                                VelButton,
+                                {
+                                    tag: "a",
+                                    type: "primary",
+                                    onClick: () => {
+                                        $router.push({
+                                            name: `${resource.routeName}.edit`,
+                                            params: {
+                                                [resource.id]: model.id,
+                                            },
+                                        });
+                                    },
+                                },
+                                () => [
+                                    h(resolveComponent("GIcon"), {
+                                        class: "fill-0 mr-0.5 icon--0.5",
+                                        name: "icon-edit",
+                                        embed: true,
+                                        artboard: true,
+                                    }),
+                                    `Edit ${resource.singular}`,
+                                ],
+                            );
+                        }
+                    },
+                    (props) => {
+                        const { resource, model, $router } = props;
+
+                        if (resource.permissions.delete(props, { model })) {
+                            return h(
+                                ElPopconfirm,
+                                {
+                                    title: `Are you sure you want to delete this ${resource.singular}?`,
+                                    confirmButtonText: "Delete",
+                                    cancelButtonText: "Cancel",
+                                    confirmButtonType: "danger",
+                                    onConfirm: async () => {
+                                        await axios.delete(
+                                            `${resource.api.endpoint(props)}/${model.id}`,
+                                        );
+
+                                        $router.push({
+                                            name: `${resource.routeName}.index`,
+                                        });
+                                    },
+                                },
+                                {
+                                    reference: () =>
+                                        h(
+                                            VelButton,
+                                            {
+                                                tag: "a",
+                                                type: "danger",
+                                            },
+                                            () => [
+                                                h(resolveComponent("GIcon"), {
+                                                    class: "fill-0 mr-0.5 icon--0.5",
+                                                    name: "icon-trash",
+                                                    embed: true,
+                                                    artboard: true,
+                                                }),
+                                                `Delete ${resource.singular}`,
+                                            ],
+                                        ),
+                                },
+                            );
+                        }
+                    },
+                ],
+                tabs: [
+                    (props) => {
+                        const { resource } = props;
+
+                        return {
+                            label: "Details",
+                            component: h(
+                                "div",
+                                resource.show.layout
+                                    .map((render) => render(props))
+                                    .filter((d) => d),
+                            ),
+                        };
+                    },
+                ],
+                layout: [
+                    (props) => {
+                        const { resource, model } = props;
+
+                        return h(
+                            ElDescriptions,
+                            {
+                                border: true,
+                                column: 1,
+                            },
+                            () =>
+                                resource.description
+                                    .structure(props)
+                                    .map((item, index) =>
+                                        h(
+                                            ElDescriptionsItem,
+                                            {
+                                                key: index,
+                                                labelWidth: "20%",
+                                            },
+                                            {
+                                                label: () =>
+                                                    item.label ||
+                                                    item.key[0].toUpperCase() +
+                                                        item.key.slice(1),
+                                                default: () =>
+                                                    item.render
+                                                        ? h(item.render(props))
+                                                        : model?.[item.key] ||
+                                                          "",
+                                            },
+                                        ),
+                                    ),
+                        );
+                    },
+                ],
+            },
+        },
+        properties,
+    );
+}
+
+export function columns(columns = []) {
+    return {
+        table: {
+            structure: (props) =>
+                columns
+                    .filter(
+                        (column) =>
+                            resolveProperty(column.condition?.table, props) !==
+                            false,
+                    )
+                    .map((column) => ({
+                        ...column,
+                        render: column.render?.read || column.render?.table,
+                    })),
+        },
+        description: {
+            structure: (props) =>
+                columns
+                    .filter(
+                        (column) =>
+                            resolveProperty(
+                                column.condition?.description,
+                                props,
+                            ) !== false,
+                    )
+                    .map((column) => ({
+                        ...column,
+                        render:
+                            column.render?.read || column.render?.description,
+                    })),
+        },
+        form: {
+            fields: (props) =>
+                columns
+                    .filter(
+                        (column) =>
+                            resolveProperty(column.condition?.form, props) !==
+                            false,
+                    )
+                    .reduce((fields, column) => {
+                        fields[column.key] = column.initial
+                            ? column.initial(props)
+                            : (props.model?.[column.key] ?? null);
+                        return fields;
+                    }, {}),
+            preparation: (props) =>
+                columns
+                    .filter(
+                        (column) =>
+                            resolveProperty(column.condition?.form, props) !==
+                            false,
+                    )
+                    .reduce((fields, column) => {
+                        fields[column.key] = column.preparation
+                            ? column.preparation(props)
+                            : props.form[column.key];
+                        return fields;
+                    }, {}),
+            structure: (props) =>
+                columns
+                    .filter(
+                        (column) =>
+                            resolveProperty(
+                                column.condition?.form?.write ??
+                                    column.condition?.form,
+                                props,
+                            ) !== false,
+                    )
+                    .map((column) => ({
+                        ...column,
+                        render: column.render?.write || column.render?.form,
+                    })),
+        },
+    };
+}
+
+// Export resource
+export function routes(node, name, properties = {}, children = []) {
+    const resource = meta(name, properties);
+
+    return [
+        {
+            path: resource.path,
+            component: node ? "" : require("../resource/parent.vue").default,
+            name: `${resource.routeName}`,
+            meta: {
+                resource,
+                title: resource.title,
+                icon: resource.icon,
+                breadcrumb: () => resource.title,
+                ...properties.meta,
+            },
+            children: [
+                {
+                    path: "",
+                    component: node
+                        ? ""
+                        : require("../resource/Children/index.vue").default,
+                    name: `${resource.routeName}.index`,
+                },
+                {
+                    path: "create",
+                    component: node
+                        ? ""
+                        : require("../resource/Children/create.vue").default,
+                    name: `${resource.routeName}.create`,
+                },
+                {
+                    path: `:${resource.id}`,
+                    component: node
+                        ? ""
+                        : require("../resource/Children/show.vue").default,
+                    name: `${resource.routeName}.show`,
+                    // Remove leading / for nested routes or they'll resolve to the root of the site
+                    children: cloneDeepWith(children, (value, key) => {
+                        if (
+                            key === "path" &&
+                            typeof value === "string" &&
+                            value.startsWith("/")
+                        ) {
+                            return value.slice(1);
+                        }
+                    }),
+                    meta: {
+                        breadcrumb: ({ $route }) => $route.params[resource.id],
+                    },
+                },
+                {
+                    path: `:${resource.id}/edit`,
+                    component: node
+                        ? ""
+                        : require("../resource/Children/edit.vue").default,
+                    name: `${resource.routeName}.edit`,
+                    meta: {
+                        breadcrumb: ({ $route }) => $route.params[resource.id],
+                    },
+                },
+            ],
+        },
+    ];
+}
+
+export function resolveProperty(value, context) {
+    return typeof value === "function" ? value(context) : value;
+}
+
+export default {
+    routes,
+    meta,
+    columns,
+    defaultResource,
+};

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

@@ -0,0 +1,63 @@
+<template>
+    <!-- Only render title once at the shallowest route -->
+    <template v-if="depth === 1">
+        <VelPageTitle :title="resource.title" />
+        <VelBreadcrumbs
+            :items="breadcrumbs"
+            class="mb-8"
+            container-classes="m-0"
+        />
+    </template>
+
+    <router-view
+        :key="$route.path"
+        v-slot="{ Component }"
+        :breadcrumbs="breadcrumbs"
+        :resource="resource"
+    >
+        <component :is="Component" :depth="depth + 1" />
+    </router-view>
+</template>
+
+<script>
+import VelPageTitle from "../../components/layout/pageTitle.vue";
+import VelBreadcrumbs from "../../components/layout/Breadcrumbs.vue";
+
+export default {
+    components: {
+        VelPageTitle,
+        VelBreadcrumbs,
+    },
+
+    props: {
+        depth: {
+            type: Number,
+            default: 1,
+        },
+    },
+
+    computed: {
+        resource() {
+            return this.$route.meta.resource;
+        },
+        breadcrumbs() {
+            return [
+                {
+                    text: "Home",
+                    href: { name: "index" },
+                },
+            ].concat(
+                this.$route.matched
+                    .filter((route) => route.meta?.breadcrumb)
+                    .map((route) => ({
+                        text: route.meta.breadcrumb(this),
+                        href: {
+                            name: route.name,
+                            params: this.$route.params,
+                        },
+                    })),
+            );
+        },
+    },
+};
+</script>

package/_base.scss

@@ -3,4 +3,3 @@
 @import "element-plus/theme-chalk/el-message";
 @import "element-plus/theme-chalk/el-notification";
 @import "element-plus/theme-chalk/el-overlay";
-@import "./components/input.scss";

package/_defaults.scss

@@ -5,16 +5,5 @@
 $colors: variables.dynamic("color", module-variables("variables"));
 
 // Override lab-ui defaults here, e.g $button: $color6;
-$spacing: 8px;
-.container {
-    margin-left: 0;
-    padding: 0px 5 * $spacing;
-}
-
-body {
-    font-family: $primaryFont, sans-serif;
-    font-size: get-ratio(16px);
-    line-height: 1.5;
-    color: $color1;
-    background-color: $color3;
-}
+$fontColor: $color1;
+$fontFamily: $primaryFont, sans-serif;

package/_variables.scss

@@ -1,7 +1,6 @@
 @import "@fishawack/lab-ui/_variables.scss";
-// Set global variables here, e.g $color6: red;
-@import "./modules/AuthVariables";
 
+// Set global variables here, e.g $color6: red;
 $primaryFont: "Inter";
 $primaryFontThin: "Inter-Thin";
 $primaryFontExtraLight: "Inter-ExtraLight";
@@ -10,11 +9,10 @@ $primaryFontRegular: "Inter-Regular";
 $primaryFontMedium: "Inter-Medium";
 $primaryFontSemiBold: "Inter-SemiBold";
 $primaryFontBold: "Inter-Bold";
-
 $secondaryFont: "NotoSerif";
 $secondaryFontMedium: "NotoSerif-Medium";
-// Colors
 
+// Colors
 $color1: #2d2d2d;
 $color2: #333333;
 $color3: #f7f7f7;
@@ -29,3 +27,10 @@ $color11: #8c8c8c; //Used
 $color12: #5c5c5c;
 $color13: #3c976e;
 $colorAlert: #d53a3a;
+
+// Spacing
+$spacing: 8px;
+
+// Auth
+$am-spacing: 8px;
+$am-highlight: #3c976e;

package/components/_alert.scss

@@ -0,0 +1,5 @@
+@import "element-plus/theme-chalk/el-alert";
+
+.vel-alert {
+    --el-color-error: #d53a3a;
+}