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

package/README.md

@@ -16,16 +16,19 @@ Prevent code repetition.
 npm install @fishawack/lab-velocity
 ```
 
-
 ### Auth Module
+
     Frontend files to to work with the Hydrate Module.
+
 #### Installation
 
-##### Import Axios File 
+##### 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";
 
@@ -34,7 +37,9 @@ npm install @fishawack/lab-velocity
 
     add method call after createRouter
     configureRoutes(router);
-##### Import Store 
+
+##### Import Store
+
     import AuthStore from "@fishawack/lab-velocity/AuthModule/js/AuthStore.js";
     Inside createStore method add
         modules: {
@@ -43,9 +48,11 @@ npm install @fishawack/lab-velocity
     Inside VuexPersistedState add
         paths:["auth"]
 
-    At bottom of file set 
+    At bottom of file set
         window.store = store;
+
 ##### SVGS
+
     Ensure Content has Velocity pulled in
     {
         "lftp": "ftp-fishawack.egnyte.com",
@@ -54,15 +61,14 @@ npm install @fishawack/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

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>
 
@@ -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,7 +49,7 @@ 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],
@@ -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/{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"

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

@@ -28,8 +28,7 @@
             <template #tip>
                 <slot name="tip" />
             </template>
-            <slot name="default">
-            </slot>
+            <slot name="default"> </slot>
         </el-upload>
     </XInput>
 </template>
@@ -58,7 +57,7 @@ export default {
         },
         autoUpload: {
             type: Boolean,
-            default: false
+            default: false,
         },
         onExceed: {
             type: Function,
@@ -96,8 +95,7 @@ export default {
         },
         handleStart(file) {
             this.$refs.upload.handleStart(file);
-        }
-    }
-
+        },
+    },
 };
 </script>

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

@@ -11,7 +11,7 @@
 import Quill from "quill";
 import input from "./input.js";
 import XInput from "./input.vue";
-import sanitizeHtml from 'sanitize-html';
+import sanitizeHtml from "sanitize-html";
 
 export default {
     mixins: [input],
@@ -51,10 +51,10 @@ export default {
             return this.editor.getText().trim() === "" // Quill leaves <p></br></p> on empty input so ignore
                 ? ""
                 : this.simple // Simple editor removes outer tags and only allows inner phrasing tags
-                ? [...this.editor.root.children]
-                      .map((d) => d.innerHTML)
-                      .join("\n")
-                : this.editor.root.innerHTML;
+                  ? [...this.editor.root.children]
+                        .map((d) => d.innerHTML)
+                        .join("\n")
+                  : this.editor.root.innerHTML;
         },
         setValue() {
             const temp =
@@ -65,19 +65,19 @@ export default {
         },
         // Function to remove p tags from inside li tags, breaks the wysiwyg
         formatCleaner(unformmatted) {
-            if(!unformmatted) {
+            if (!unformmatted) {
                 return "";
             }
-            let parser = document.createElement('div');
-            parser.innerHTML = unformmatted.replace(/(\r\n|\n|\r|\t)/gm,"");
-            const lists = parser.getElementsByTagName('ul');
-            for(var x = 0; x < lists.length; x++) {
+            let parser = document.createElement("div");
+            parser.innerHTML = unformmatted.replace(/(\r\n|\n|\r|\t)/gm, "");
+            const lists = parser.getElementsByTagName("ul");
+            for (var x = 0; x < lists.length; x++) {
                 lists[x].innerHTML = sanitizeHtml(lists[x].innerHTML, {
-                    allowedTags: [ 'b', 'i', 'em', 'strong', 'a','li']
+                    allowedTags: ["b", "i", "em", "strong", "a", "li"],
                 });
             }
             return parser.innerHTML;
-        }
+        },
     },
 
     mounted() {
@@ -100,7 +100,7 @@ export default {
                         this.simple ? undefined : { list: "ordered" },
                         this.simple ? undefined : { list: "bullet" },
                         "clean",
-                        "link"
+                        "link",
                     ],
                 ],
             },
@@ -120,7 +120,7 @@ export default {
 
         // Disable tab index on toolbar buttons
         [...this.$el.querySelectorAll(".ql-toolbar button")].forEach((d) =>
-            d.setAttribute("tabindex", -1)
+            d.setAttribute("tabindex", -1),
         );
     },
 };