@fishawack/lab-velocity 2.0.0-beta.5 → 2.0.0-beta.50

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

@@ -0,0 +1,104 @@
+import axios from "axios";
+import { h } from "vue";
+
+import VelTableSorter from "../../components/layout/TableSorter.vue";
+import { ElNotification } from "element-plus";
+import VelButton from "../../components/basic/Button.vue";
+import VelCheckbox from "../../components/form/Checkbox.vue";
+
+export function applyTrashable(result) {
+    const originalStructure = result.index.structure;
+    result.index.structure = (props) => {
+        const structure = originalStructure(props);
+        structure["json-data"].rowClassName = ({ row }) =>
+            row.deleted_at ? "el-table__row--trashed" : "";
+        return structure;
+    };
+
+    result.table.actions.push(({ model, resource }, props) => {
+        const { $emit } = props;
+
+        if (resource.permissions.delete(props, { model }) && model.deleted_at) {
+            return h({
+                data: () => ({
+                    loading: false,
+                }),
+                render() {
+                    return h(
+                        VelButton,
+                        {
+                            tag: "a",
+                            type: "success",
+                            size: "small",
+                            loading: this.loading,
+                            onClick: async () => {
+                                this.loading = true;
+
+                                await axios.post(
+                                    `${resource.api.endpoint(props)}/${model.id}/restore`,
+                                );
+
+                                $emit("reload");
+
+                                ElNotification({
+                                    title: "Success",
+                                    message: `${resource.singularTitle} restored.`,
+                                    type: "success",
+                                });
+
+                                this.loading = false;
+                            },
+                        },
+                        () => "Restore",
+                    );
+                },
+            });
+        }
+    });
+
+    const originalLayout = [...result.index.layout];
+    result.index.layout = [
+        (props) => {
+            const { resource } = props;
+
+            return h({
+                data: () => ({
+                    showTrashed: false,
+                }),
+                methods: {
+                    reload() {
+                        this.$refs.table?.reload();
+                    },
+                },
+                render() {
+                    const structureProps = resource.index.structure(props);
+
+                    if (this.showTrashed) {
+                        structureProps.apiParams = {
+                            ...structureProps.apiParams,
+                            "filter[withTrashed]": 1,
+                        };
+                    }
+
+                    return h("div", [
+                        resource.permissions.delete(props) &&
+                            h(VelCheckbox, {
+                                label: `Show trashed ${resource.name}`,
+                                modelValue: this.showTrashed,
+                                class: "mt-3",
+                                "onUpdate:modelValue": (val) => {
+                                    this.showTrashed = val;
+                                    this.$nextTick(() => this.reload());
+                                },
+                            }),
+                        h(VelTableSorter, {
+                            ...structureProps,
+                            ref: "table",
+                        }),
+                    ]);
+                },
+            });
+        },
+        ...originalLayout.slice(1),
+    ];
+}

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/{modules/_AuthModule.scss → components/_auth.scss}

@@ -1,11 +1,3 @@
-@import "./AuthVariables";
-@import "element-plus/theme-chalk/base";
-@import "../components/input.scss";
-@import "../components/button";
-@import "../components/basic";
-@import "./modal";
-
-// AuthModule
 .AuthModule {
     position: fixed;
     background-color: black;
@@ -20,10 +12,12 @@
         width: 13.3rem;
         z-index: 99;
     }
+
     @include breakpoint(max-width $tabletMax) {
         background: url("../media/content/images/hero-auth-background-tablet.jpg")
             center top no-repeat;
     }
+
     @include breakpoint(max-width $mobileMax) {
         background: url("../media/content/images/hero-auth-background-mobile.jpg")
             center top no-repeat;
@@ -46,6 +40,7 @@
         transform: translate(-50%, 0);
         padding: 24px;
         width: calc(100% - 80px);
+
         h2 .h2 {
             font-size: 24px;
             line-height: 32px;
@@ -57,6 +52,7 @@
         line-height: 50px;
         font-size: 48px;
     }
+
     .h2--small {
         font-size: 36px;
         line-height: 44px;
@@ -67,14 +63,17 @@
         line-height: 20px;
         margin-bottom: 24px;
         letter-spacing: -0.1px;
+
         &.disclaimer {
             font-size: 12px;
             color: rgba($color1, 0.5);
             margin: 0;
         }
+
         a {
             color: $color1;
         }
+
         &.form__error {
             font-size: 12px;
             line-height: 18px;
@@ -86,6 +85,7 @@
         width: 200px;
         padding: 9px 23.5px;
         font-size: 14px;
+
         @include breakpoint(max-width $mobileMax) {
             max-width: unset;
             width: 100%;
@@ -99,43 +99,38 @@
                     border: 0.4px solid red;
                 }
             }
+
             .form__input.error {
                 border: none;
+
                 .el-input__wrapper {
                     border: 0.4px solid red;
                 }
             }
         }
-        // &__icon-container{
-        //     position: absolute;
-        //     top: 50%;
-        //     right: $spacing * 1.5;
-        //     transform: translateY(-50%);
-        //     display: flex;
-        // }
-        // &__action-icon {
-        //     margin-left: $spacing * 0.5;
-        //     cursor: pointer;
-        // }
     }
+
     .vel-basic__label {
         font-size: 12px;
         color: rgba($color1, 0.5);
     }
+
     .vel-basic__textbox {
         --el-border-color: #cfd8dd;
         --el-input-text-color: #666666;
         --el-input-focus-border-color: #cfd8dd;
         --el-input-hover-border-color: #cfd8dd;
         font-size: 14px;
-        padding-bottom: $am-spacing * 2.5;
+
         .el-input__inner {
             --el-input-inner-height: 38px;
         }
     }
+
     .el-button--primary {
         --el-button-text-color: #ffffff;
     }
+
     input,
     input:focus {
         @extend .el-input__inner;
@@ -147,9 +142,11 @@
     top: 48px;
     left: 0%;
 }
+
 .AuthModule__logo {
     position: relative;
 }
+
 .AuthModule__Content {
     position: absolute;
     z-index: 1;
@@ -161,52 +158,6 @@
     height: 100%;
 }
 
-.AM-mb {
-    margin-bottom: $am-spacing !important;
-}
-.AM-mt {
-    margin-top: $am-spacing !important;
-}
-.AM-pb {
-    padding-bottom: $am-spacing !important;
-}
-.AM-pt {
-    padding-top: $am-spacing !important;
-}
-@for $i from 1 through 5 {
-    .AM-mb-#{$i - 1} {
-        margin-bottom: ($i - 1) * $am-spacing !important;
-    }
-
-    .AM-mb-#{$i - 1}\.5 {
-        margin-bottom: ($i - 0.5) * $am-spacing !important;
-    }
-
-    .AM-mt-#{$i - 1} {
-        margin-top: ($i - 1) * $am-spacing !important;
-    }
-
-    .AM-mt-#{$i - 1}\.5 {
-        margin-top: ($i - 0.5) * $am-spacing !important;
-    }
-
-    .AM-pt-#{$i - 1} {
-        padding-top: ($i - 1) * $am-spacing !important;
-    }
-
-    .AM-pt-#{$i - 1}\.5 {
-        padding-top: ($i - 0.5) * $am-spacing !important;
-    }
-
-    .AM-pb-#{$i - 1} {
-        padding-bottom: ($i - 1) * $am-spacing !important;
-    }
-
-    .AM-pb-#{$i - 1}\.5 {
-        padding-bottom: ($i - 0.5) * $am-spacing !important;
-    }
-}
-
-.AM-color-highlight {
-    color: $am-highlight;
+.color-highlight {
+    color: green;
 }

package/components/_datepicker.scss

@@ -1,4 +1,5 @@
 @import "element-plus/theme-chalk/el-date-picker";
+@import "element-plus/theme-chalk/el-date-picker-panel";
 
 .vel-datepicker {
     // --el-input-height:38px;

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/_form.scss

@@ -22,3 +22,21 @@
         }
     }
 }
+
+.vel-resource-form {
+    display: flex;
+    flex-direction: column;
+    gap: 2.5 * $spacing;
+}
+
+.vel-form-group {
+    border: 1px solid lighten($color4, 3%);
+    border-radius: $spacing * 0.5;
+    padding: 2 * $spacing;
+
+    legend {
+        font-weight: 600;
+        font-size: get-ratio(16px);
+        padding: 0 $spacing * 0.5;
+    }
+}

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/_menu.scss

@@ -93,11 +93,6 @@ ul.vel-menu {
     flex-direction: column;
     height: 100%;
 
-    li:last-child {
-        margin-top: auto;
-        margin-bottom: 0px;
-    }
-
     .el-sub-menu {
         .vel-menu-item {
             a.active {

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/components/_table.scss

@@ -10,6 +10,9 @@
     .el-table__cell {
         padding: get-ratio(8px) get-ratio(12px);
     }
+    .el-table__row--trashed {
+        color: var(--el-color-danger);
+    }
 }
 
 .table-wrapper {

package/components/_token-display.scss

@@ -0,0 +1,41 @@
+.token-display {
+    &__warning {
+        font-size: 14px;
+        color: #606266;
+        margin: 0 0 16px;
+        line-height: 1.6;
+    }
+
+    &__block {
+        margin-top: 16px;
+    }
+
+    &__header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 8px;
+    }
+
+    &__label {
+        font-size: 11px;
+        font-weight: 600;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        color: #909399;
+    }
+
+    &__value {
+        background: #1a1a2e;
+        color: #a8ff78;
+        border-radius: 6px;
+        padding: 16px 20px;
+        font-size: 13px;
+        line-height: 1.7;
+        overflow-x: auto;
+        white-space: pre-wrap;
+        word-break: break-all;
+        font-family: monospace;
+        margin: 0;
+    }
+}

package/general.scss

@@ -29,6 +29,7 @@
 @import "./components/_collapse.scss";
 @import "./components/_tooltip.scss";
 @import "./components/_loader.scss";
+@import "./components/_token-display.scss";
 @import "./modules/_AuthModule.scss";
 
 @import "./_base.scss";