memorial-ui-component-library 1.0.2 → 1.1.0

package/README.md

@@ -1,17 +1,17 @@
-# memorial-ui-component-library
-
-## Project setup
-```
-npm install
-```
-
-### Compiles and hot-reloads for development
-```
-npm run serve
-```
-
-### Compiles and minifies for production
-```
-npm run build
-```
-
+# memorial-ui-component-library
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+

package/package.json

@@ -1,62 +1,63 @@
-{
-  "name": "memorial-ui-component-library",
-  "description": "Memorial Health System Vue UI library.",
-  "private": false,
-  "version": "1.0.2",
-  "author": "Solutions Development",
-  "license": "MIT",
-  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "node build.js",
-    "build:lib": "vue-cli-service build --target lib --name memorial-ui-component-library --entry ./src/index.ts",
-    "lint": "vue-cli-service lint"
-  },
-  "main": "dist/memorial-ui-component-library.umd.min.js",
-  "module": "dist/memorial-ui-component-library.common.min.js",
-  "typings": "types/index.d.ts",
-  "files": [
-    "types/*",
-    "dist/*",
-    "src/assets/scss/*"
-  ],
-  "unpkg": "dist/memorial-ui-component-library.umd.min.js",
-  "peerDependencies": {
-    "vue": "^2.6.10"
-  },
-  "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.22",
-    "@fortawesome/free-regular-svg-icons": "^5.10.2",
-    "@fortawesome/free-solid-svg-icons": "^5.10.2",
-    "@fortawesome/vue-fontawesome": "^0.1.7",
-    "async-validator": "^1.11.5",
-    "core-js": "^3.8.3",
-    "vue": "^2.6.10",
-    "vue-class-component": "^7.2.3",
-    "vue-property-decorator": "^9.1.2",
-    "vue-spinner": "^1.0.3"
-  },
-  "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.4.0",
-    "@typescript-eslint/parser": "^5.4.0",
-    "@vue/cli-plugin-babel": "~5.0.0",
-    "@vue/cli-plugin-eslint": "~5.0.0",
-    "@vue/cli-plugin-typescript": "~5.0.0",
-    "@vue/cli-service": "~5.0.0",
-    "@vue/eslint-config-prettier": "^4.0.1",
-    "@vue/eslint-config-typescript": "^9.1.0",
-    "babel-eslint": "^10.0.1",
-    "chalk": "^2.4.2",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-vue": "^8.0.3",
-    "prettier": "^2.4.1",
-    "sass": "^1.81",
-    "sass-loader": "^10",
-    "style-resources-loader": "^1.5.0",
-    "typescript": "~4.5.5",
-    "vue-cli-plugin-style-resources-loader": "^0.1.2",
-    "vue-cli-plugin-webpack-bundle-analyzer": "^1.4.0",
-    "vue-template-compiler": "^2.6.14"
-  }
-}
+{
+  "name": "memorial-ui-component-library",
+  "description": "Memorial Health System Vue UI library.",
+  "private": false,
+  "version": "1.1.0",
+  "author": "Solutions Development",
+  "license": "MIT",
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "node build.js",
+    "build:lib": "vue-cli-service build --target lib --name memorial-ui-component-library --entry ./src/index.ts",
+    "lint": "vue-cli-service lint"
+  },
+  "main": "dist/memorial-ui-component-library.umd.min.js",
+  "module": "dist/memorial-ui-component-library.common.min.js",
+  "typings": "types/index.d.ts",
+  "files": [
+    "types/*",
+    "dist/*",
+    "src/assets/scss/*"
+  ],
+  "unpkg": "dist/memorial-ui-component-library.umd.min.js",
+  "peerDependencies": {
+    "vue": "^2.6.10"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.22",
+    "@fortawesome/free-regular-svg-icons": "^5.10.2",
+    "@fortawesome/free-solid-svg-icons": "^5.10.2",
+    "@fortawesome/vue-fontawesome": "^0.1.7",
+    "async-validator": "^1.11.5",
+    "core-js": "^3.8.3",
+    "element-ui": "^2.4.11",
+    "vue": "^2.6.10",
+    "vue-class-component": "^7.2.3",
+    "vue-property-decorator": "^9.1.2",
+    "vue-spinner": "^1.0.3"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^5.4.0",
+    "@typescript-eslint/parser": "^5.4.0",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-plugin-typescript": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "@vue/eslint-config-prettier": "^4.0.1",
+    "@vue/eslint-config-typescript": "^9.1.0",
+    "babel-eslint": "^10.0.1",
+    "chalk": "^2.4.2",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "prettier": "^2.4.1",
+    "sass": "^1.81",
+    "sass-loader": "^10",
+    "style-resources-loader": "^1.5.0",
+    "typescript": "~4.5.5",
+    "vue-cli-plugin-style-resources-loader": "^0.1.2",
+    "vue-cli-plugin-webpack-bundle-analyzer": "^1.4.0",
+    "vue-template-compiler": "^2.6.14"
+  }
+}

package/src/assets/scss/_transitions.scss

@@ -1,71 +1,71 @@
-.fade-01 {
-  &-enter-active,
-  &-leave-active {
-    transition: all 0.1s ease;
-  }
-
-  &-enter,
-  &-leave-to {
-    opacity: 0;
-  }
-}
-
-.fade-02 {
-  &-enter-active,
-  &-leave-active {
-    transition: all 0.2s ease;
-  }
-
-  &-enter,
-  &-leave-to {
-    opacity: 0;
-  }
-}
-
-.fade-03 {
-  &-enter-active,
-  &-leave-active {
-    transition: all 0.3s ease;
-  }
-
-  &-enter,
-  &-leave-to {
-    opacity: 0;
-  }
-}
-
-.rotate-01 {
-  &-enter-active,
-  &-leave-active {
-    transition: all 0.1s ease;
-  }
-
-  &-enter,
-  &-leave-to {
-    transform: rotate(50deg);
-  }
-}
-
-.rotate-02 {
-  &-enter-active,
-  &-leave-active {
-    transition: all 0.2s ease;
-  }
-
-  &-enter,
-  &-leave-to {
-    transform: rotate(140deg);
-  }
-}
-
-.rotate-03 {
-  &-enter-active,
-  &-leave-active {
-    transition: all 0.3s ease;
-  }
-
-  &-enter,
-  &-leave-to {
-    transform: rotate(180deg);
-  }
-}
+.fade-01 {
+  &-enter-active,
+  &-leave-active {
+    transition: all 0.1s ease;
+  }
+
+  &-enter,
+  &-leave-to {
+    opacity: 0;
+  }
+}
+
+.fade-02 {
+  &-enter-active,
+  &-leave-active {
+    transition: all 0.2s ease;
+  }
+
+  &-enter,
+  &-leave-to {
+    opacity: 0;
+  }
+}
+
+.fade-03 {
+  &-enter-active,
+  &-leave-active {
+    transition: all 0.3s ease;
+  }
+
+  &-enter,
+  &-leave-to {
+    opacity: 0;
+  }
+}
+
+.rotate-01 {
+  &-enter-active,
+  &-leave-active {
+    transition: all 0.1s ease;
+  }
+
+  &-enter,
+  &-leave-to {
+    transform: rotate(50deg);
+  }
+}
+
+.rotate-02 {
+  &-enter-active,
+  &-leave-active {
+    transition: all 0.2s ease;
+  }
+
+  &-enter,
+  &-leave-to {
+    transform: rotate(140deg);
+  }
+}
+
+.rotate-03 {
+  &-enter-active,
+  &-leave-active {
+    transition: all 0.3s ease;
+  }
+
+  &-enter,
+  &-leave-to {
+    transform: rotate(180deg);
+  }
+}

package/src/assets/scss/_variables.module.scss

@@ -1,56 +1,56 @@
-$--transition-all: all .3s cubic-bezier(.645,.045,.355,1);
-$--transition-all-ease: all .3s ease;
-
-$--border-radius: 10px;
-
-$--padding-base: 10px;
-
-$--color-white: #ffffff;
-$--color-black: #000000;
-$--color-primary: #00284f;
-$--color-secondary: #6EAFCC;
-$--color-red-primary: #DE2414;
-$--color-green-primary:#2cc197;
-$--color-yellow-primary: #ffdd9a;
-$--color-grey-primary: #e7e7e7;
-$--color-grey-secondary: #9fa7b3;
-
-$--color-font-default: #2c353f;
-$--color-component-bg: $--color-grey-primary;
-
-$--color-grey-focus: mix($--color-black, $--color-grey-primary, 10%);
-
-$color--grey-primary: #f4f3f3;
-$color--grey-light-1: #e7e7e8;
-$color--grey-light-2: #d8d8d8;
-$color--grey-light-3: #9fa7b3;
-$color--grey-dark-1: #485563;
-$color--grey-dark-2: #4a5562;
-$color--grey-dark-3: #2c353f;
-
-$--font-size-extra-large: 20px;
-$--font-size-large: 18px;
-$--font-size-medium: 16px;
-$--font-size-base: 14px;
-$--font-size-small: 13px;
-$--font-size-extra-small: 12px;
-
-// Primary - "#00284f";
-// Primary  Light - "#37507b";
-// Primary  Dark - "#000027";
-// Secondary - "#6eafcc";
-// Secondary Light - "#a0e1ff";
-// Secondary Dark - "#3b809b";
-
-:export {
-  paddingPx: 10;
-  colorWhite: $--color-white;
-  colorBlack: $--color-black;
-  colorPrimary: $--color-primary;
-  colorGreenPrimary: $--color-green-primary;
-  colorYellowPrimary: $--color-yellow-primary;
-  colorGreyPrimary: $--color-grey-primary;
-  colorGreySecondary: $--color-grey-secondary;
-  colorGreyAccent: $--color-grey-focus;
-  colorComponentBG: $--color-component-bg;
-}
+$--transition-all: all .3s cubic-bezier(.645,.045,.355,1);
+$--transition-all-ease: all .3s ease;
+
+$--border-radius: 10px;
+
+$--padding-base: 10px;
+
+$--color-white: #ffffff;
+$--color-black: #000000;
+$--color-primary: #00284f;
+$--color-secondary: #6EAFCC;
+$--color-red-primary: #DE2414;
+$--color-green-primary:#2cc197;
+$--color-yellow-primary: #ffdd9a;
+$--color-grey-primary: #e7e7e7;
+$--color-grey-secondary: #9fa7b3;
+
+$--color-font-default: #2c353f;
+$--color-component-bg: $--color-grey-primary;
+
+$--color-grey-focus: mix($--color-black, $--color-grey-primary, 10%);
+
+$color--grey-primary: #f4f3f3;
+$color--grey-light-1: #e7e7e8;
+$color--grey-light-2: #d8d8d8;
+$color--grey-light-3: #9fa7b3;
+$color--grey-dark-1: #485563;
+$color--grey-dark-2: #4a5562;
+$color--grey-dark-3: #2c353f;
+
+$--font-size-extra-large: 20px;
+$--font-size-large: 18px;
+$--font-size-medium: 16px;
+$--font-size-base: 14px;
+$--font-size-small: 13px;
+$--font-size-extra-small: 12px;
+
+// Primary - "#00284f";
+// Primary  Light - "#37507b";
+// Primary  Dark - "#000027";
+// Secondary - "#6eafcc";
+// Secondary Light - "#a0e1ff";
+// Secondary Dark - "#3b809b";
+
+:export {
+  paddingPx: 10;
+  colorWhite: $--color-white;
+  colorBlack: $--color-black;
+  colorPrimary: $--color-primary;
+  colorGreenPrimary: $--color-green-primary;
+  colorYellowPrimary: $--color-yellow-primary;
+  colorGreyPrimary: $--color-grey-primary;
+  colorGreySecondary: $--color-grey-secondary;
+  colorGreyAccent: $--color-grey-focus;
+  colorComponentBG: $--color-component-bg;
+}

package/src/assets/scss/main.scss

@@ -1,12 +1,12 @@
-// @import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
-
-* {
-  font-family: 'Lato', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-}
-
-.aria-instructions-hidden {
-  max-height: 0;
-  max-width: 0;
-  opacity: 0;
-  position: absolute;
-}
+// @import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
+
+* {
+  font-family: 'Montserrat';
+}
+
+.aria-instructions-hidden {
+  max-height: 0;
+  max-width: 0;
+  opacity: 0;
+  position: absolute;
+}

package/src/assets/scss/scrollbar.scss

@@ -1,33 +1,33 @@
-@mixin scrollbar {
-
-  &::-webkit-scrollbar {
-    width: 14px;
-    height: 14px;
-  }
-
-  &::-webkit-scrollbar-button {
-    width: 0;
-    height: 0;
-    display: none;
-  }
-
-  &::-webkit-scrollbar-corner {
-    background-color: transparent;
-  }
-
-  &::-webkit-scrollbar-track {
-    border: 4px solid $--color-component-bg;
-    background-color: $--color-component-bg;
-    border-radius: 10px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    height: 6px;
-    width: 6px;
-    border: 4px solid $--color-component-bg;
-    background-clip: padding-box;
-    border-radius: 10px;
-    background-color: $color--grey-light-3;
-    box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
-  }
-}
+@mixin scrollbar {
+
+  &::-webkit-scrollbar {
+    width: 14px;
+    height: 14px;
+  }
+
+  &::-webkit-scrollbar-button {
+    width: 0;
+    height: 0;
+    display: none;
+  }
+
+  &::-webkit-scrollbar-corner {
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-track {
+    border: 4px solid $--color-component-bg;
+    background-color: $--color-component-bg;
+    border-radius: 10px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    height: 6px;
+    width: 6px;
+    border: 4px solid $--color-component-bg;
+    background-clip: padding-box;
+    border-radius: 10px;
+    background-color: $color--grey-light-3;
+    box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
+  }
+}