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

package/README.md

@@ -10,59 +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
 ```
 
+## 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,
+    },
 
-### Auth Module
-    Frontend files to to work with the Hydrate Module.
-#### Installation
-
-##### Import Axios File 
-    import axios from "axios";
-    import "@fishawack/lab-velocity/AuthModule/js/AuthAxios.js";
-
-##### Import Routes File
-    Inside Router.js file
-    import { authRoutes, configureRoutes } from "@fishawack/lab-velocity/AuthModule/js/AuthRoutes";
-
-    let routes = require("./routes.js")(null, store).concat(authRoutes(null,store,store.state.auth.authBase));
-    Add routes to createRouter call
-
-    add method call after createRouter
-    configureRoutes(router);
-##### Import Store 
-    import AuthStore from "@fishawack/lab-velocity/AuthModule/js/AuthStore.js";
-    Inside createStore method add
-        modules: {
-            auth: AuthStore
-        },
-    Inside VuexPersistedState add
-        paths:["auth"]
-
-    At bottom of file set 
-        window.store = store;
-##### SVGS
-    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.
-
-##### ENV VARS
-    HYDRATE_LOGO=example-logo
-    HYDRATE_REDIRECT=index
-
-    HYDRATE_LOGO=example-logo(No Default set, name of svg logo to display on page)
-    HYDRATE_ROUTE=(Default auth if not configured)
-    HYDRATE_REDIRECT=(Default index if not configured)
-    HYDRATE_ADMIN=true (DO NOT use unless on Admin site and want to disable auth flows and only use sso login)
-    HYDRATE_CONTACT=(Default mailto:EP@avalerehealth, Email for contact us button)
-
-##### Verify dependencies are installed
-    Axios
-    form-backend-validation
+    // ...
+}
+```
+
+### 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.
+
+#### \_variables.scss
+
+```sass
+@import "@fishawack/lab-velocity/variables";
+
+// Set global variables here, e.g $color6: red;
+```
+
+#### \_defaults.scss
+
+```sass
+@use "variables";
+@import "@fishawack/lab-velocity/defaults";
+
+$colors: variables.dynamic("color", module-variables("variables"));
+
+// Override lab-ui defaults here, e.g $button: $color6;
+```
+
+### Route Styles
+
+There are two different set of sass imports for the admin and the frontend routes.
+
+#### Frontend
+
+```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";
+
+// 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";
+```
+
+#### 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";
+```
+
+### Icons
+
+Ensure Content has Velocity pulled in & copy out the svg folder contents into the svg files within vue.
+
+```json
+{
+    "lftp": "ftp-fishawack.egnyte.com",
+    "location": "Shared/FW/Knutsford/Digital/Auto-Content/Lab/Velocity"
+}
+```
+
+### ENV VARS (frontend)
+
+```env
+# Required
+HYDRATE_LOGO=example-logo
+
+# 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/{basic → _Build/vue/components/basic}/Button.vue

@@ -1,27 +1,25 @@
 <template>
-    <el-button 
-        :class="[`vel-button ${baseClass}__button`]" 
-        :name="name" 
-        :id="name" 
+    <el-button
+        :class="[`vel-button ${baseClass}__button`]"
+        :name="name"
+        :id="name"
         :disabled="disabled"
-        :round="round" 
-        :circle="circle" 
-        :size="size" 
-        :text="text" 
-        :tag="tag" 
+        :round="round"
+        :circle="circle"
+        :size="size"
+        :text="text"
+        :tag="tag"
         :autofocus="autofocus"
-        :native-type="nativeType" 
-        :type="type" 
-        :link="link" 
-        :plain="plain" 
+        :native-type="nativeType"
+        :type="type"
+        :link="link"
+        :plain="plain"
         :loading="loading"
-        :customIcon="customIcon" 
+        :customIcon="customIcon"
         :href="href"
         :target="target"
-        >
-        
+    >
         <slot />
-
     </el-button>
 </template>
 
@@ -36,7 +34,7 @@ export default {
         },
         type: {
             type: String,
-            default: null,
+            default: "default",
         },
         name: {
             type: String,
@@ -105,7 +103,7 @@ export default {
     },
 
     components: {
-        ElButton
+        ElButton,
     },
 };
 </script>

package/{basic → _Build/vue/components/basic}/link.vue

@@ -1,15 +1,16 @@
 <template>
-    <el-link 
-        :class="[`link ${baseClass} vel-link--${size} ${ underline ? 'vel-link--underline' : ''}`]" 
-        :name="name" 
-        :underline="underline" 
-        :id="name" 
+    <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>
 
@@ -28,7 +29,7 @@ export default {
         },
         underline: {
             type: Boolean,
-            default: true
+            default: true,
         },
         href: {
             type: String,

package/{form → _Build/vue/components/form}/Cascader.vue

@@ -12,14 +12,14 @@
             :show-all-levels="showAllLevels"
             :props="{
                 multiple: multiple,
-                checkStrictly:checkStrictly
+                checkStrictly: checkStrictly,
             }"
         />
     </XInput>
 </template>
 
 <script>
-import { ElCascader } from 'element-plus';
+import { ElCascader } from "element-plus";
 import input from "./input.js";
 import XInput from "./input.vue";
 
@@ -32,19 +32,19 @@ export default {
         },
         multiple: {
             type: Boolean,
-            default: false
+            default: false,
         },
         checkStrictly: {
             type: Boolean,
-            default: false
+            default: false,
         },
         clearable: {
             type: Boolean,
-            default: false
+            default: false,
         },
         showAllLevels: {
             type: Boolean,
-            default: false
+            default: false,
         },
         options: {
             type: Array,
@@ -57,7 +57,7 @@ export default {
         ElCascader,
     },
 
-    emits: ['change', 'clear', 'blur'],
+    emits: ["change", "clear", "blur"],
     methods: {
         castValue(value) {
             if (
@@ -70,16 +70,16 @@ export default {
             return value;
         },
         handleInput(value, $event) {
-            this.$emit('change', value);
-        }
+            this.$emit("change", value);
+        },
     },
 
     data() {
         return {
             pr: {
-                multiple:true
-            }
-        }
-    }
+                multiple: true,
+            },
+        };
+    },
 };
 </script>

package/{form → _Build/vue/components/form}/CheckboxGroup.vue

@@ -1,15 +1,37 @@
 <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">
+        <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">
+            <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>

package/{form → _Build/vue/components/form}/DatePicker.vue

@@ -9,9 +9,10 @@
             :type="type"
             :disabled="disabled"
             :disabled-date="disabledDate"
--           :placeholder="placeholder"
+            -
+            :placeholder="placeholder"
             :shortcuts="shortcuts"
-            :size="size" 
+            :size="size"
             class="w-100 vel-datepicker"
             v-model="content"
             @change="handleInput"
@@ -37,20 +38,35 @@ export default {
         ...input.props,
         type: {
             type: String,
-            validator: (value) => ['date', 'year', 'years', 'month', 'months', 'date', 'dates', 'datetime', 'week', 'datetimerange', 'daterange', 'monthrange', 'yearrange'].includes(value),
+            validator: (value) =>
+                [
+                    "date",
+                    "year",
+                    "years",
+                    "month",
+                    "months",
+                    "date",
+                    "dates",
+                    "datetime",
+                    "week",
+                    "datetimerange",
+                    "daterange",
+                    "monthrange",
+                    "yearrange",
+                ].includes(value),
             default: "date",
         },
         format: {
-            type: String
+            type: String,
         },
         valueFormat: {
-            type: String
+            type: String,
         },
         dateFormat: {
-            type: String
+            type: String,
         },
         timeFormat: {
-            type: String
+            type: String,
         },
         baseClass: {
             type: String,

package/{form → _Build/vue/components/form}/InputNumber.vue

@@ -22,7 +22,6 @@
             :required="required"
             @input="handleInput"
         >
-
             <template #prefix>
                 <slot name="prefix" />
             </template>
@@ -79,7 +78,7 @@ export default {
         controls: {
             type: Boolean,
             default: true,
-        }
+        },
     },
 
     components: {

package/{form → _Build/vue/components/form}/Select.vue

@@ -49,15 +49,15 @@ import { ElSelect } from "element-plus";
 import { ElOption } from "element-plus";
 import input from "./input.js";
 import XInput from "./input.vue";
-import _ from 'lodash';
+import _ from "lodash";
 
 export default {
     mixins: [input],
     props: {
         ...input.props,
         modelValue: {
-            type: Array,
-            default: [],
+            type: [Array, Number],
+            default: () => [],
         },
         baseClass: {
             type: String,
@@ -82,7 +82,7 @@ export default {
         multiple: {
             type: Boolean,
             default: false,
-        }
+        },
     },
 
     components: {
@@ -91,20 +91,19 @@ export default {
         ElSelect,
     },
 
-    emits: ['change', 'clear', 'blur'],
+    emits: ["change", "clear", "blur"],
     methods: {
         castValue(value) {
-             if (
+            if (
                 !_.isNull(value) &&
                 typeof value === "string" &&
                 value !== "" &&
-                 !isNaN(Number(value))
-             ) {
-                 return parseInt(value);
+                !isNaN(Number(value))
+            ) {
+                return parseInt(value);
             }
             return value;
-        }
+        },
     },
-    
 };
 </script>

package/_Build/vue/components/form/Spinner.vue

@@ -0,0 +1,5 @@
+<template>
+    <p>Loading...</p>
+</template>
+
+<script></script>

package/{form → _Build/vue/components/form}/Switch.vue

@@ -7,8 +7,8 @@
         <el-switch
             :class="[`${baseClass}__control`]"
             :name="name"
-            :id="id ? id: name"
-            :size="size" 
+            :id="id ? id : name"
+            :size="size"
             :disabled="disabled"
             :inline-prompt="inlinePrompt"
             :active-icon="activeIcon"