@fishawack/lab-velocity 0.2.1 → 0.3.0

package/_variables.scss

@@ -27,4 +27,5 @@ $color7: #666666;
 $color8: #f2f2f2; //Used
 $color9: #ff0000;
 $color10: #dcdbdb;
-$color11: #8C8C8C; //Used
+$color11: #8C8C8C; //Used
+$color12: #5C5C5C;

package/components/_breadcrumbs.scss

@@ -0,0 +1,38 @@
+@import "element-plus/theme-chalk/el-breadcrumb";
+@import "element-plus/theme-chalk/el-breadcrumb-item";
+
+.el-breadcrumb__separator {
+    display: none;
+    margin:0px .8rem;
+}
+
+.el-breadcrumb__separator,
+.el-breadcrumb__inner {
+    font-size: 1.6rem;
+    line-height: 2.4rem;
+}
+
+.el-breadcrumb__inner {
+    &.is-link {
+        text-decoration: underline;
+        font-weight: 500;
+        color: $color2;
+        text-transform: capitalize;
+
+        &:hover {
+            color:$color12;
+        }
+    }
+}
+
+.el-breadcrumb__item {
+    &:last-child {
+        .el-breadcrumb__inner {
+            &.is-link {
+                color: $color2;
+                font-weight: 400;
+                text-decoration: none;
+            }
+        }
+    }
+}

package/components/_button.scss

@@ -1,37 +1,5 @@
 @import "element-plus/theme-chalk/el-button";
 
-.vel-button {
-    border-radius: 0px;
-    &[disabled=true] {
-        pointer-events: none !important;
-    }
-    &--iconRight {
-        .vel-button__button {
-            .el-icon {
-                order: 2;
-            }
-            >span {
-                order: 1;
-                margin: 0 0.5rem 0 0;
-            }
-        }
-    }
-    &--iconOnly {
-        .vel-button__button {
-            > span {
-                margin: 0;
-            }
-            .vel-icon{
-                width: 1rem;
-                height: 1rem;
-            }
-            svg {
-                width: 100%;
-                height: 100%;
-            }
-        }
-    }
-}
 
 .el-button--default {
     border: solid 1px $color5;
@@ -152,4 +120,49 @@
 .el-button {
     height: auto;
     --el-border-radius-base: 0px;
+
+    &.is-circle {
+        width: auto;
+        padding: 1.5rem;
+    }
+}
+
+.vel-button {
+    &[disabled=true] {
+        pointer-events: none !important;
+    }
+    &--iconRight {
+        .vel-button__button {
+            .el-icon {
+                order: 2;
+            }
+            >span {
+                order: 1;
+                margin: 0 0.5rem 0 0;
+            }
+        }
+    }
+    &--iconOnly {
+        // padding: 1.5rem;
+        
+        > span {
+            margin: 0;
+        }
+        .vel-icon{
+            width: 1.138rem;
+            height: 1.138rem;
+        }
+        svg {
+            width: 100%;
+            height: 100%;
+        }
+
+        &.el-button--small {
+            padding: .6rem 1.2rem;
+        }
+
+        &.el-button--large {
+            padding: 1.7rem 2rem;
+        }
+    }
 }

package/components/_select.scss

@@ -1,5 +1,9 @@
-@import "element-plus/theme-chalk/el-select";
 @import "element-plus/theme-chalk/el-tag";
+@import "element-plus/theme-chalk/el-option";
+@import "element-plus/theme-chalk/el-option-group";
+@import "element-plus/theme-chalk/el-scrollbar";
+@import "element-plus/theme-chalk/el-popper";
+@import "element-plus/theme-chalk/el-select";
 
 .vel-select {   
-}
+}

package/components/_wysiwyg.scss

@@ -0,0 +1,2 @@
+@import "quill/dist/quill.snow";
+@import "quill/dist/quill.core";

package/form/Select.vue

@@ -19,7 +19,7 @@
             @blur="this.$emit('blur')"
         >
             <el-option
-                v-if="!object"
+                v-if="!options[0]?.value"
                 v-for="(label, value) in options"
                 :key="value"
                 :label="label"
@@ -27,7 +27,7 @@
             >
             </el-option>
             <el-option
-                v-else-if="object"
+                v-else
                 v-for="option in options"
                 :key="option.value"
                 :label="option.label"
@@ -77,11 +77,7 @@ export default {
         multiple: {
             type: Boolean,
             default: false,
-        },
-        object: {
-            type: Boolean,
-            default: false,
-        },
+        }
     },
 
     components: {

package/form/input.vue

@@ -10,7 +10,7 @@
         <slot />
 
         <div v-if="error" class="form__error" :class="{ [baseClass + '__error']: baseClass }">
-            <small v-text="error"></small>
+            <small v-text="(error && typeof error === 'object' && error[name][0]) || (error || 'nbsp;')" />
         </div>
     </div>
 </template>
@@ -27,7 +27,7 @@ export default {
             default: null,
         },
         error: {
-            type: String,
+            type: [String,Object],
             default: null,
         },
         baseClass: {

package/general.scss

@@ -12,7 +12,9 @@
 @import "./components/_datepicker.scss";
 @import "./components/_link.scss";
 @import "./components/_cascader.scss";
+@import "./components/_wysiwyg.scss";
 
+@import "./components/_breadcrumbs.scss";
 @import "./components/_sidebar.scss";
 @import "./components/_typography.scss";
 @import "./components/_footer.scss";

package/index.js

@@ -1,13 +1,16 @@
+export { default as Button } from "./basic/Button.vue";
+export { default as Link } from "./basic/link.vue";
+
 export { default as Basic } from "./form/basic.vue";
-export { default as Button } from "./form/Button.vue";
 export { default as Checkbox } from "./form/Checkbox.vue";
 export { default as CheckboxGroup } from "./form/CheckboxGroup.vue";
-export { default as color } from "./form/color.vue";
+export { default as Color } from "./form/color.vue";
 export { default as DatePicker } from "./form/DatePicker.vue";
 export { default as file } from "./form/file.vue";
 export { default as Select } from "./form/Select.vue";
 export { default as Switch } from "./form/Switch.vue";
-export { default as wysiwyg } from "./form/wysiwyg.vue";
+export { default as Wysiwyg } from "./form/wysiwyg.vue";
+
 export { default as SideBar } from "./layout/sideBar.vue";
 export { default as Footer } from "./layout/Footer.vue";
 export { default as Header } from "./layout/Header.vue";
@@ -16,6 +19,8 @@ export { default as Menu } from "./navigation/Menu.vue";
 export { default as MenuItem } from "./navigation/MenuItem.vue";
 export { default as MenuItemGroup } from "./navigation/MenuItemGroup.vue";
 export { default as SubMenu } from "./navigation/SubMenu.vue";
+export { default as Breadcrumbs } from "./navigation/Breadcrumbs.vue";
+export { default as BreadcrumbsItem } from "./navigation/BreadcrumbsItem.vue";
 
 export { default as Icon } from "./Icon.vue";
 export { default as Svg } from "./Svg.vue";

package/navigation/Breadcrumbs.vue

@@ -0,0 +1,32 @@
+<template>
+    <el-breadcrumb :seperator="''">
+        <slot name="default">
+            <template v-for="(crumb,index) in crumbs">
+                <el-breadcrumb-item :to="crumb.href">{{ crumb.text }} </el-breadcrumb-item> 
+                <template v-if="index !== crumbs.length -1">
+                    <span class="el-breadcrumb__item">
+                        <span class="el-breadcrumb__separator inline-block" role="presentation">
+                            <slot name="seperator">/</slot>
+                        </span>
+                    </span>
+                </template>
+            </template>
+        </slot>
+    </el-breadcrumb>
+</template>
+
+<script>
+import { ElBreadcrumb } from "element-plus";
+import ElBreadcrumbItem from "./BreadcrumbsItem.vue";
+export default {
+    props: {
+        crumbs: {
+            required: false
+        }
+    },
+    components: {
+        ElBreadcrumb,
+        ElBreadcrumbItem
+    }
+}
+</script>

package/navigation/BreadcrumbsItem.vue

@@ -0,0 +1,19 @@
+<template>
+    <el-breadcrumb-item v-bind="$props">
+        <slot></slot>
+    </el-breadcrumb-item>
+</template>
+
+<script>
+import { ElBreadcrumbItem } from "element-plus";
+export default {
+    props: {
+        crumbs: {
+            required: false
+        }
+    },
+    components: {
+        ElBreadcrumbItem
+    }
+}
+</script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fishawack/lab-velocity",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Avalere Health branded style system",
   "scripts": {
     "setup": "npm ci || npm i && npm run content",

package/form/Button.vue

@@ -1,118 +0,0 @@
-<template>
-    <XInput v-bind="$props">
-        <el-button 
-            :class="[`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" 
-            v-model="content" 
-            :href="href"
-            :target="target"
-            @input="handleInput">
-            <slot />
-
-        </el-button>
-    </XInput>
-</template>
-
-<script>
-import { ElButton } from "element-plus";
-import input from "./input.js";
-import XInput from "./input.vue";
-import {
-    Check,
-    Delete,
-    Edit,
-    Message,
-    Search,
-    Star,
-} from '@element-plus/icons-vue'
-
-export default {
-    mixins: [input],
-    props: {
-        ...input.props,
-        baseClass: {
-            type: String,
-            default: "vel-button",
-        },
-        inputType: {
-            type: String,
-            default: "button",
-        },
-        type: {
-            type: String,
-            default: null,
-        },
-        nativeType: {
-            type: String,
-            default: "button",
-        },
-        size: {
-            type: String,
-            default: "default",
-        },
-        round: {
-            type: Boolean,
-            default: false,
-        },
-        circle: {
-            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: {
-        XInput,
-        ElButton
-    },
-};
-</script>