@fishawack/lab-velocity 2.0.0-beta.6 → 2.0.0-beta.8

package/README.md

@@ -10,65 +10,176 @@ 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
 
-    Frontend files to to work with the Hydrate Module.
+##### router.js
 
-#### Installation
+```js
+import { Auth } from "@fishawack/lab-velocity";
+import store from "./store.js";
 
-##### Import Axios File
+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";
 
-    import axios from "axios";
-    import "@fishawack/lab-velocity/AuthModule/js/AuthAxios.js";
+[
+    // ... other routes
 
-##### Import Routes File
+    // End user routes for login, register, chang password etc
+    ...Auth.Router.routes(node),
 
-    Inside Router.js file
-    import { authRoutes, configureRoutes } from "@fishawack/lab-velocity/AuthModule/js/AuthRoutes";
+    // Admin routes for headless login & managing users & companies
+    ...Auth.Router.adminRoutes(node),
 
-    let routes = require("./routes.js")(null, store).concat(authRoutes(null,store,store.state.auth.authBase));
-    Add routes to createRouter call
+    // ... wildcard 404 routes etc
+];
+```
+
+### Configure store
 
-    add method call after createRouter
-    configureRoutes(router);
+##### store.js
 
-##### Import Store
+```js
+import { Auth } from "@fishawack/lab-velocity";
 
-    import AuthStore from "@fishawack/lab-velocity/AuthModule/js/AuthStore.js";
-    Inside createStore method add
-        modules: {
-            auth: AuthStore
-        },
-    Inside VuexPersistedState add
-        paths:["auth"]
+// Call in store
+{
+    plugins: [
+        VuexPersistedState({
+            // ...
+            paths: ["auth.user"],
+        }),
+    ],
 
-    At bottom of file set
-        window.store = store;
+    modules: {
+        auth: Auth.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.
+### Base Styles (admin)
 
-##### ENV VARS
+For the **admin only** you should replace the two references to variables & defaults with @fishawack/lab-velocity ones.
 
-    HYDRATE_LOGO=example-logo
+#### \_variables.scss
 
-    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)
+```sass
+@import "@fishawack/lab-velocity/variables";
+
+// Set global variables here, e.g $color6: red;
+```
 
-##### Verify dependencies are installed
+#### \_defaults.scss
 
-    Axios
-    form-backend-validation
+```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.scss
+
+@import
+```
+
+#### 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/basic/Button.vue

@@ -34,7 +34,7 @@ export default {
         },
         type: {
             type: String,
-            default: null,
+            default: "default",
         },
         name: {
             type: String,

package/_Build/vue/modules/AuthModule/adminRoutes/PCompanies/Children/partials/form.vue

@@ -159,8 +159,8 @@ export default {
             type: Function,
         },
         method: {
-            required: true,
             type: String,
+            default: "post",
         },
     },
 

package/_Build/vue/modules/AuthModule/adminRoutes/PUsers/Children/partials/form.vue

@@ -2,7 +2,7 @@
 <template>
     <form class="" @submit.prevent="submit">
         <template v-if="method !== 'patch'">
-            <el-basic
+            <VelBasic
                 v-model="form.name"
                 name="name"
                 :error="form.errors"
@@ -11,7 +11,7 @@
                 label="Name"
             />
 
-            <el-basic
+            <VelBasic
                 v-model="form.email"
                 placeholder="Email"
                 label="Email"
@@ -43,7 +43,7 @@
                 label="Auto generate password"
             />
             <template v-if="!form.set_password">
-                <el-basic
+                <VelBasic
                     v-model="form.password"
                     name="password"
                     :error="form.errors"
@@ -51,7 +51,7 @@
                     placeholder="Password"
                     label="Password"
                 />
-                <el-basic
+                <VelBasic
                     v-model="form.password_confirmation"
                     name="password_confirmation"
                     :error="form.errors"
@@ -67,7 +67,6 @@
         <template v-if="$store.getters.can('edit roles')">
             <template v-if="enableRoles">
                 <VelButton
-                    type="secondary"
                     @click="
                         form.roles = [];
                         enableRoles = false;
@@ -98,6 +97,7 @@ import axios from "axios";
 import { debounce } from "lodash";
 import VelButton from "../../../../../../components/basic/Button.vue";
 import VelCheckbox from "../../../../../../components/form/Checkbox.vue";
+import VelBasic from "../../../../../../components/form/basic.vue";
 
 export default {
     components: {
@@ -105,6 +105,7 @@ export default {
         FormRole: require("../../../../components/FormRole.vue").default,
         VelCheckbox,
         VelButton,
+        VelBasic,
     },
     props: {
         form: {
@@ -116,8 +117,8 @@ export default {
             type: Function,
         },
         method: {
-            required: true,
             type: String,
+            default: "post",
         },
     },
 

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,5 +5,5 @@
 $colors: variables.dynamic("color", module-variables("variables"));
 
 // Override lab-ui defaults here, e.g $button: $color6;
-$fontColor: $color6 !default;
-$fontFamily: $primaryFont, sans-serif !default;
+$fontColor: $color1;
+$fontFamily: $primaryFont, sans-serif;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fishawack/lab-velocity",
-    "version": "2.0.0-beta.6",
+    "version": "2.0.0-beta.8",
     "description": "Avalere Health branded style system",
     "scripts": {
         "setup": "npm ci || npm i && npm run content",
@@ -62,7 +62,6 @@
     },
     "files": [
         "*.scss",
-        "modules",
         "components",
         "_Build/vue/components",
         "_Build/vue/modules/AuthModule"