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

package/README.md

@@ -10,65 +10,187 @@ Prevent code repetition.
 
 ## Getting started
 
+### Requirements
+
+```json
+"vue": "^3.3.4",
+"vue-router": "^4.2.4",
+"vuex": "^4.1.0",
+"vuex-persistedstate": "^4.1.0"
+"vue-loader": "^17.2.2"
+```
+
 ### Install
 
 ```bash
 npm install @fishawack/lab-velocity
 ```
 
-### Auth Module
+## Hydrate Views
+
+Frontend & Admin files to work with the Hydrate Module including routes, store, axios and components.
+
+### Installation
+
+### Configure axios
+
+##### script.js
+
+```js
+import { Auth } from "@fishawack/lab-velocity";
+
+// Call in your boot method
+Auth.Axios.setAxiosDefaults(process.env.APP_URL, router);
+```
+
+### Configure router
+
+##### router.js
+
+```js
+import { Auth } from "@fishawack/lab-velocity";
+import store from "./store.js";
+
+// ... initialize router
+
+Auth.Router.beforeEach(router, store);
+```
+
+### Configure routes
+
+There are two different set of routes for the admin and the frontend.
+
+##### routes.js
+
+```js
+import { Auth } from "@fishawack/lab-velocity";
+
+[
+    // ... other routes
+
+    // End user routes for login, register, chang password etc
+    ...Auth.Router.routes(node),
+
+    // Admin routes for headless login & managing users & companies
+    ...Auth.Router.adminRoutes(node),
+
+    // ... wildcard 404 routes etc
+];
+```
+
+### Configure store
+
+##### store.js
+
+```js
+import { Auth } from "@fishawack/lab-velocity";
+
+// Call in store
+{
+    plugins: [
+        VuexPersistedState({
+            // ...
+            paths: ["auth.user"],
+        }),
+    ],
+
+    modules: {
+        auth: Auth.Store,
+    },
+
+    // ...
+}
+```
+
+### Base Styles
+
+@fishawack/lab-velocity extends @fishawack/lab-ui, for this reason you should replace the two references to variables & defaults with @fishawack/lab-velocity ones.
 
-    Frontend files to to work with the Hydrate Module.
+#### \_variables.scss
 
-#### Installation
+```sass
+@import "@fishawack/lab-velocity/variables";
+
+// Set global variables here, e.g $color6: red;
+```
 
-##### Import Axios File
+#### \_defaults.scss
 
-    import axios from "axios";
-    import "@fishawack/lab-velocity/AuthModule/js/AuthAxios.js";
+```sass
+@use "variables";
+@import "@fishawack/lab-velocity/defaults";
 
-##### Import Routes File
+$colors: variables.dynamic("color", module-variables("variables"));
 
-    Inside Router.js file
-    import { authRoutes, configureRoutes } from "@fishawack/lab-velocity/AuthModule/js/AuthRoutes";
+// Override lab-ui defaults here, e.g $button: $color6;
+```
 
-    let routes = require("./routes.js")(null, store).concat(authRoutes(null,store,store.state.auth.authBase));
-    Add routes to createRouter call
+### Route Styles
 
-    add method call after createRouter
-    configureRoutes(router);
+There are two different set of sass imports for the admin and the frontend routes.
 
-##### Import Store
+#### Frontend
 
-    import AuthStore from "@fishawack/lab-velocity/AuthModule/js/AuthStore.js";
-    Inside createStore method add
-        modules: {
-            auth: AuthStore
-        },
-    Inside VuexPersistedState add
-        paths:["auth"]
+```sass
+// Vendor imports / Lab-ui imports
+@import "@fishawack/lab-ui/typography";
+@import "@fishawack/lab-ui/grid";
+@import "@fishawack/lab-ui/utilities";
+@import "@fishawack/lab-ui/icon";
 
-    At bottom of file set
-        window.store = store;
+// Lab velocity
+@import "@fishawack/lab-velocity/base";
+@import "@fishawack/lab-velocity/components/basic";
+@import "@fishawack/lab-velocity/components/button";
+@import "@fishawack/lab-velocity/components/form";
+@import "@fishawack/lab-velocity/components/auth";
+```
 
-##### SVGS
+#### Admin
+
+##### vendor.scss
+
+```sass
+// Vendor imports / Lab-ui imports
+@import "@fishawack/lab-ui/typography";
+@import "@fishawack/lab-ui/grid";
+@import "@fishawack/lab-ui/utilities";
+
+// Lab velocity
+@import "@fishawack/lab-velocity/base";
+@import "@fishawack/lab-velocity/components/pageTitle";
+@import "@fishawack/lab-velocity/components/breadcrumbs";
+@import "@fishawack/lab-velocity/components/table";
+@import "@fishawack/lab-velocity/components/icon";
+@import "@fishawack/lab-velocity/components/basic";
+@import "@fishawack/lab-velocity/components/button";
+@import "@fishawack/lab-velocity/components/form";
+@import "@fishawack/lab-velocity/components/checkbox";
+@import "@fishawack/lab-velocity/components/select";
+@import "@fishawack/lab-velocity/components/loader";
+@import "@fishawack/lab-velocity/components/permissionLegend";
+@import "@fishawack/lab-velocity/components/chip";
+```
 
-    Ensure Content has Velocity pulled in
-    {
-        "lftp": "ftp-fishawack.egnyte.com",
-        "location": "Shared/FW/Knutsford/Digital/Auto-Content/Lab/Velocity"
-    }
-    Copy out the svg folder contents into the svg files within vue.
+### Icons
 
-##### ENV VARS
+Ensure Content has Velocity pulled in & copy out the svg folder contents into the svg files within vue.
 
-    HYDRATE_LOGO=example-logo
+```json
+{
+    "lftp": "ftp-fishawack.egnyte.com",
+    "location": "Shared/FW/Knutsford/Digital/Auto-Content/Lab/Velocity"
+}
+```
 
-    HYDRATE_LOGO=example-logo(No Default set, name of svg logo to display on page)
-    HYDRATE_REDIRECT=(Default index if not configured)
-    HYDRATE_CONTACT=(Default mailto:EP@avalerehealth, Email for contact us button)
+### ENV VARS (frontend)
 
-##### Verify dependencies are installed
+```env
+# Required
+HYDRATE_LOGO=example-logo
 
-    Axios
-    form-backend-validation
+# Descriptions
+HYDRATE_LOGO Name of svg logo to display on page
+HYDRATE_REDIRECT Default index if not configured
+HYDRATE_CONTACT Default mailto:EP@avalerehealth, Email for contact us button
+```

package/_Build/vue/components/Icon.vue

@@ -0,0 +1,33 @@
+<template>
+    <div class="vel-icon">
+        <VSvg v-bind="$props" />
+    </div>
+</template>
+
+<script>
+import VSvg from "./Svg.vue";
+
+export default {
+    props: {
+        name: {
+            type: String,
+            required: true,
+        },
+        embed: {
+            type: Boolean,
+            default: false,
+        },
+        asis: {
+            type: Boolean,
+            default: false,
+        },
+        artboard: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    components: {
+        VSvg,
+    },
+};
+</script>

package/_Build/vue/components/Svg.vue

@@ -0,0 +1,45 @@
+<template>
+    <div v-if="embed">
+        <component v-if="embed" :is="icon" class="vel-svg" />
+    </div>
+    <svg v-else class="vel-svg">
+        <use :xlink:href="'#' + name" />
+    </svg>
+</template>
+
+<script>
+import { defineAsyncComponent } from "vue";
+export default {
+    props: {
+        name: {
+            type: String,
+            required: true,
+        },
+        embed: {
+            type: Boolean,
+            default: false,
+        },
+        asis: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    data() {
+        return {
+            icons: import.meta.glob(
+                `../../handlebars/generated/embed/**/*.svg`,
+                { query: "?component" },
+            ),
+        };
+    },
+    computed: {
+        icon() {
+            return defineAsyncComponent(() =>
+                this.icons[
+                    `../../handlebars/generated/embed/svg${this.asis ? "--asis" : ""}--${this.name}.svg`
+                ](),
+            );
+        },
+    },
+};
+</script>

package/_Build/vue/components/basic/Button.vue

@@ -0,0 +1,109 @@
+<template>
+    <el-button
+        :class="[`vel-button ${baseClass}__button`]"
+        :name="name"
+        :id="name"
+        :disabled="disabled"
+        :round="round"
+        :circle="circle"
+        :size="size"
+        :text="text"
+        :tag="tag"
+        :autofocus="autofocus"
+        :native-type="nativeType"
+        :type="type"
+        :link="link"
+        :plain="plain"
+        :loading="loading"
+        :customIcon="customIcon"
+        :href="href"
+        :target="target"
+    >
+        <slot />
+    </el-button>
+</template>
+
+<script>
+import { ElButton } from "element-plus";
+
+export default {
+    props: {
+        baseClass: {
+            type: String,
+            default: "vel-button",
+        },
+        type: {
+            type: String,
+            default: "default",
+        },
+        name: {
+            type: String,
+            default: null,
+        },
+        nativeType: {
+            type: String,
+            default: "button",
+        },
+        size: {
+            type: String,
+            default: "default",
+        },
+        round: {
+            type: Boolean,
+            default: false,
+        },
+        circle: {
+            type: Boolean,
+            default: false,
+        },
+        disabled: {
+            type: Boolean,
+            default: false,
+        },
+        autofocus: {
+            type: Boolean,
+            default: false,
+        },
+        text: {
+            type: Boolean,
+            default: false,
+        },
+        link: {
+            type: Boolean,
+            default: false,
+        },
+        plain: {
+            type: Boolean,
+            default: false,
+        },
+        tag: {
+            type: String,
+            default: "button",
+        },
+        loading: {
+            type: Boolean,
+            default: false,
+        },
+        customIcon: {
+            type: String,
+            default: null,
+        },
+        iconClasses: {
+            type: String,
+            default: "",
+        },
+        href: {
+            type: String,
+            default: null,
+        },
+        target: {
+            type: String,
+            default: null,
+        },
+    },
+
+    components: {
+        ElButton,
+    },
+};
+</script>

package/_Build/vue/components/basic/link.vue

@@ -0,0 +1,64 @@
+<template>
+    <el-link
+        :class="[
+            `link ${baseClass} vel-link--${size} ${underline ? 'vel-link--underline' : ''}`,
+        ]"
+        :name="name"
+        :underline="underline"
+        :id="name"
+        :disabled="disabled"
+        :href="href"
+        :target="target"
+    >
+        <slot />
+    </el-link>
+</template>
+
+<script>
+import { ElLink } from "element-plus";
+
+export default {
+    props: {
+        baseClass: {
+            type: String,
+            default: "vel-link",
+        },
+        type: {
+            type: String,
+            default: null,
+        },
+        underline: {
+            type: Boolean,
+            default: true,
+        },
+        href: {
+            type: String,
+            default: null,
+        },
+        target: {
+            type: String,
+            default: null,
+        },
+        size: {
+            type: String,
+            default: "default",
+        },
+        name: {
+            type: String,
+            default: null,
+        },
+        disabled: {
+            type: Boolean,
+            default: false,
+        },
+        autofocus: {
+            type: Boolean,
+            default: false,
+        },
+    },
+
+    components: {
+        ElLink,
+    },
+};
+</script>

package/_Build/vue/components/form/Cascader.vue

@@ -0,0 +1,85 @@
+<template>
+    <XInput v-bind="$props">
+        <template #label>
+            <slot name="label" />
+        </template>
+        <el-cascader
+            class="block"
+            v-model="content"
+            :options="options"
+            :placeholder="placeholder"
+            :clearable="clearable"
+            :show-all-levels="showAllLevels"
+            :props="{
+                multiple: multiple,
+                checkStrictly: checkStrictly,
+            }"
+        />
+    </XInput>
+</template>
+
+<script>
+import { ElCascader } from "element-plus";
+import input from "./input.js";
+import XInput from "./input.vue";
+
+export default {
+    mixins: [input],
+    props: {
+        baseClass: {
+            type: String,
+            default: "vel-cascader",
+        },
+        multiple: {
+            type: Boolean,
+            default: false,
+        },
+        checkStrictly: {
+            type: Boolean,
+            default: false,
+        },
+        clearable: {
+            type: Boolean,
+            default: false,
+        },
+        showAllLevels: {
+            type: Boolean,
+            default: false,
+        },
+        options: {
+            type: Array,
+            default: [],
+        },
+        ...input.props,
+    },
+    components: {
+        XInput,
+        ElCascader,
+    },
+
+    emits: ["change", "clear", "blur"],
+    methods: {
+        castValue(value) {
+            if (
+                !_.isNull(value) &&
+                typeof value === "string" &&
+                !isNaN(Number(value))
+            ) {
+                return parseInt(value);
+            }
+            return value;
+        },
+        handleInput(value, $event) {
+            this.$emit("change", value);
+        },
+    },
+
+    data() {
+        return {
+            pr: {
+                multiple: true,
+            },
+        };
+    },
+};
+</script>

package/_Build/vue/components/form/Checkbox.vue

@@ -0,0 +1,39 @@
+<template>
+    <XInput v-bind="$props">
+        <el-checkbox
+            :class="[`${baseClass}__checkbox`]"
+            :id="name"
+            :disabled="disabled"
+            v-model="content"
+            :required="required"
+            @change="handleInput"
+        >
+        </el-checkbox>
+    </XInput>
+</template>
+
+<script>
+import { ElCheckbox } from "element-plus";
+import input from "./input.js";
+import XInput from "./input.vue";
+
+export default {
+    mixins: [input],
+    props: {
+        ...input.props,
+        modelValue: {
+            type: Boolean,
+            default: null,
+        },
+        baseClass: {
+            type: String,
+            default: "vel-checkbox",
+        },
+    },
+
+    components: {
+        XInput,
+        ElCheckbox,
+    },
+};
+</script>

package/_Build/vue/components/form/CheckboxGroup.vue

@@ -0,0 +1,91 @@
+<template>
+    <XInput v-bind="$props">
+        <el-checkbox-group
+            :class="[`${baseClass}__wrapper`]"
+            :id="name"
+            :disabled="disabled"
+            :size="size"
+            :min="min"
+            :max="max"
+            v-model="content"
+            :required="required"
+            @change="handleInput"
+            :checkboxButton="checkboxButton"
+        >
+            <el-checkbox
+                v-if="!checkboxButton"
+                :key="index"
+                v-for="({ label, value, disabled }, index) in options"
+                :label="label"
+                :value="value"
+                :disabled="disabled"
+            >
+                <slot name="label" :label="label" :value="value">
+                    <span v-html="label"></span>
+                </slot>
+            </el-checkbox>
+            <el-checkbox-button
+                v-else
+                :key="indexB"
+                v-for="({ label, value, disabled }, indexB) in options"
+                :label="label"
+                :value="value"
+                :disabled="disabled"
+            >
+                <slot name="label" :label="label" :value="value">
+                    <span v-html="label"></span>
+                </slot>
+            </el-checkbox-button>
+        </el-checkbox-group>
+    </XInput>
+</template>
+
+<script>
+import { ElCheckbox } from "element-plus";
+import { ElCheckboxButton } from "element-plus";
+import { ElCheckboxGroup } from "element-plus";
+import input from "./input.js";
+import XInput from "./input.vue";
+
+export default {
+    mixins: [input],
+    props: {
+        ...input.props,
+        modelValue: {
+            type: Array,
+            default: [],
+        },
+        baseClass: {
+            type: String,
+            default: "vel-checkbox-group",
+        },
+        checkboxButton: {
+            type: Boolean,
+            default: false,
+        },
+        size: {
+            type: String,
+            default: "default",
+        },
+        min: {
+            type: Number,
+            default: 0,
+        },
+        max: {
+            type: Number,
+            default: 100,
+        },
+        options: {
+            type: Array,
+            default: [],
+        },
+    },
+
+    components: {
+        XInput,
+        ElCheckbox,
+        ElCheckboxButton,
+        ElCheckboxGroup,
+    },
+};
+</script>