@3squared/forge-ui-3 0.1.0

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@3squared/forge-ui-3",
+  "repository": "https://github.com/3Squared/ForgeUI",
+  "description": "ForgeUI 3 is Vue 3 UI Library which combines a variety of popular packages to create a consistent UI for your application.",
+  "version": "0.1.0",
+  "license": "MIT",
+  "contributors": [
+    {
+      "name": "Jacob Minor",
+      "email": "jacob.minor@3squared.com"
+    }
+  ],
+  "main": "./dist/esm/forge-ui-3.mjs",
+  "module": "./dist/esm/forge-ui-3.mjs",
+  "types": "./dist/types/index.d.ts",
+  "files": [
+    "dist/*",
+    "src/styles/*"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "test": "cypress run --component --headed --browser chrome && vitest run --coverage && node ./scripts/merge.js",
+    "test:component": "cypress open --component --browser chrome",
+    "test:unit": "vitest --ui --coverage",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@azure/abort-controller": "^1.0.0",
+    "@azure/storage-blob": "^12.17.0",
+    "@popperjs/core": "^2.11.8",
+    "@iconify/vue": "^4.1.1",
+    "@vee-validate/zod": "^4.11.8",
+    "@vueuse/components": "^10.6.1",
+    "bootstrap": "5.3.2",
+    "primevue": "^3.48.1",
+    "vee-validate": "^4.11.8",
+    "vue": "^3.4.14",
+    "vue-multiselect": "^3.0.0-beta.3",
+    "zod": "^3.22.4"
+  },
+  "devDependencies": {
+    "@cypress/code-coverage": "3.12.26",
+    "@vitejs/plugin-vue": "5.0.4",
+    "@vitest/coverage-v8": "1.3.1",
+    "@vitest/ui": "1.3.1",
+    "cypress": "13.6.6",
+    "cypress-real-events": "1.12.0",
+    "vite-bundle-visualizer": "1.0.1",
+    "sass": "1.71.1",
+    "typescript": "5.3.3",
+    "unplugin-vue-components": "0.26.0",
+    "vite": "5.1.4",
+    "vite-plugin-istanbul": "5.0.0",
+    "vitest": "1.3.1",
+    "vue-tsc": "2.0.4"
+  },
+  "nyc": {
+    "all": true,
+    "report-dir": "coverage/cypress",
+    "include": "*",
+    "exclude": "**/*.cy.ts",
+    "extension": [
+      ".js",
+      ".cjs",
+      ".mjs",
+      ".ts",
+      ".tsx",
+      ".jsx",
+      ".vue"
+    ],
+    "reporter": [
+      "json",
+      "cobertura"
+    ]
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/styles/components/_alert.scss

@@ -0,0 +1,4 @@
+.alert-icon {
+  height: 1.5rem;
+  width: 1.5rem;
+}

package/src/styles/components/_badge.scss

@@ -0,0 +1,20 @@
+.badge-xl {
+  font-size: 1.5rem;
+  min-width: 3rem;
+  height: 3rem;
+  line-height: 3rem;
+}
+
+.badge-lg {
+  font-size: 1.125rem;
+  min-width: 2.25rem;
+  height: 2.25rem;
+  line-height: 2.25rem;
+}
+
+@each $color, $value in $base-colors {
+  .badge-#{$color} {
+    background-color: map-get($theme-colors, $color);
+    color: white;
+  }
+}

package/src/styles/components/_button.scss

@@ -0,0 +1,17 @@
+@each $color, $value in $base-colors {
+  .btn.btn-text-#{$color}{
+    &:hover, &:active:focus {
+      background-color: map-get($subtle-colors, '#{$color}-subtle');
+    }
+  }
+  
+  .badge.button-badge-#{$color} {
+    background-color: white;
+    color: map-get($theme-colors, $color);
+    
+    &.outlined {
+      background-color: map-get($theme-colors, $color);
+      color: white;
+    }
+  }
+}

package/src/styles/components/_datepicker.scss

@@ -0,0 +1,8 @@
+.datepicker-panel {
+    min-width: 350px;
+    width: 350px
+  }
+
+.p-datepicker-trigger {
+  display: none !important;
+}

package/src/styles/components/_dialog.scss

@@ -0,0 +1,3 @@
+.modal-open {
+  background-color: rgba($modal-backdrop-bg, $modal-backdrop-opacity);
+}

package/src/styles/components/_dropdown.scss

@@ -0,0 +1,11 @@
+.item {
+    background-color: white;
+    
+    &:hover {
+        background-color: $primary-light;   
+    }
+}
+
+.dropdown-input {
+    min-width: 200px;
+}

package/src/styles/components/_file-uploader.scss

@@ -0,0 +1,35 @@
+.file-container {
+  max-height: 500px;
+  overflow-y: auto;
+  border: var(--bs-border-width) dashed var(--bs-border-color);
+  border-radius: 0.25rem;
+}
+
+.preview-button {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  border: none;
+  padding: 0;
+  color: white;
+
+  &:hover {
+    opacity: 1;
+    cursor: pointer;
+    background-color: rgba(0, 0, 0, .5);
+  }
+}
+
+.mask {
+  background-color: rgba(0, 0, 0, .9)
+}
+
+.preview {
+  background-color: rgba(255, 255, 255, .9)
+}

package/src/styles/components/_loader.scss

@@ -0,0 +1,13 @@
+.forge-loader {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  background-color: #fff;
+  opacity: 0.7;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+}

package/src/styles/components/_multiselect-preview.scss

@@ -0,0 +1,9 @@
+.alternating-item-list {
+  & .item:nth-child(odd) {
+    background-color: $gray-200;
+  }
+
+  & .close-icon {
+    fill: $gray-700;
+  }
+}

package/src/styles/components/_multiselect.scss

@@ -0,0 +1,305 @@
+@import 'vue-multiselect/dist/vue-multiselect.css';
+
+.multiselect {
+  cursor: pointer;
+  box-sizing: content-box;
+  display: block;
+  position: relative;
+  width: 100%;
+  min-height: 31px !important;
+  text-align: left;
+  color: #35495e;
+
+  &.is-invalid {
+
+    .multiselect__select {
+      right: 25px;
+      z-index: 10;
+    }
+
+    .multiselect__clear-icon {
+      right: 50px;
+      z-index: 10;
+    }
+
+    .multiselect__tags,
+    .multiselect__tags:hover,
+    &:not(.multiselect--disabled):not(.multiselect--active) .multiselect__tags:hover {
+      @extend .is-invalid;
+      @extend .form-control;
+    }
+  }
+}
+
+.multiselect,
+.multiselect__input,
+.multiselect__single {
+  font-family: inherit;
+  font-size: 14px !important;
+  font-weight: 400;
+  touch-action: manipulation;
+}
+
+.multiselect__input:hover,
+.multiselect__single:hover {
+  font-size: 14px;
+  border-color: $input-border-color;
+}
+
+.multiselect__input:focus,
+.multiselect__single:focus {
+  font-size: 14px;
+  border-color: $input-border-color;
+  outline: none;
+}
+
+.multiselect__input,
+.multiselect__single {
+  position: relative;
+  display: inline-block;
+  min-height: 20px;
+  line-height: 21px;
+  border: none;
+  border-radius: 5px;
+  background: #fff;
+  padding: 0 0 0 5px;
+  width: calc(100%);
+  transition: border 0.1s ease;
+  box-sizing: border-box;
+  margin-top: 3px !important;
+  margin-bottom: 3px !important;
+  vertical-align: top;
+}
+
+.multiselect--left .multiselect__content-wrapper {
+  right: 0;
+}
+
+.multiselect--showClearSelection .multiselect__tags {
+  padding: 2px 35px 0 2px !important;
+}
+
+@each $color, $value in $theme-colors {
+  .forge-multiselect-#{$color} {
+    .multiselect,
+    .multiselect__input,
+    .multiselect__single {
+      font-family: inherit;
+      font-size: 14px !important;
+      font-weight: 400;
+      touch-action: manipulation;
+      margin: 0 !important;
+    }
+
+    .multiselect__placeholder {
+      color: #000000;
+      display: inline-block;
+      margin-bottom: 0;
+      padding-left: 5px;
+      padding-top: 0;
+      font-weight: 400;
+    }
+
+    .multiselect__select {
+      line-height: 16px;
+      display: block;
+      position: absolute;
+      box-sizing: border-box;
+      width: 25px;
+      height: 25px;
+      right: 1px;
+      top: 4px;
+      padding: unset;
+      margin: 0;
+      margin-top: auto;
+      margin-bottom: auto;
+      text-decoration: none;
+      text-align: center;
+      cursor: pointer;
+      transition: transform 0.2s ease;
+    }
+
+    .multiselect__select:before {
+      position: relative;
+      right: 0;
+      top: 65%;
+      color: $gray-700;
+      margin-top: 3px;
+      border-style: solid;
+      border-width: 5px 5px 0 5px;
+      border-color: #999999 transparent transparent transparent;
+      content: "";
+    }
+
+    .multiselect__tags {
+      min-height: 31px;
+      display: block;
+      padding: 3px 26px 0 3px;
+      border-radius: 5px;
+      border: 1px solid $input-border-color;
+      background: #fff;
+    }
+
+    .multiselect__content-wrapper {
+      position: absolute;
+      display: block;
+      background: #fff;
+      width: unset !important;
+      min-width: 100%;
+      font-weight: initial;
+      min-height: unset;
+      overflow: auto;
+      border: $input-border-width solid $input-border-color;
+      z-index: 50;
+      -webkit-overflow-scrolling: touch;
+    }
+
+    .multiselect__tag {
+      background: $value;
+      position: relative;
+      display: inline-block;
+      padding: 4px 26px 4px 8px;
+      border-radius: 0;
+      color: #fff;
+      line-height: 1;
+      margin: 2.5px;
+      white-space: normal;
+      overflow: hidden;
+      max-width: 100%;
+      text-overflow: ellipsis;
+      font-weight: 400;
+      z-index: 2;
+    }
+
+    .multiselect__option {
+      display: block;
+      padding: 5px;
+      min-height: 26px;
+      line-height: 21px;
+      text-decoration: none;
+      text-transform: none;
+      vertical-align: middle;
+      position: relative;
+      cursor: pointer;
+      white-space: nowrap;
+    }
+
+    .multiselect__option:after {
+      top: 0;
+      right: 0;
+      position: absolute;
+      line-height: 21px;
+      padding-right: 12px;
+      padding-left: 20px;
+      font-size: 14px;
+    }
+
+    .multiselect__option--selected {
+      background: white;
+      color: black;
+      font-weight: normal;
+    }
+
+    .multiselect__option--selected:after {
+      content: "";
+      color: silver;
+    }
+
+    .multiselect__option--selected.multiselect__option--highlight {
+      background: lightgray;
+      color: black;
+    }
+
+    .multiselect__option--selected.multiselect__option--highlight:after {
+      background: lightgray;
+      content: "";
+      color: #fff;
+    }
+
+    .multiselect__option--highlight {
+      background: lightgray;
+      outline: none;
+      color: black;
+    }
+
+    .multiselect__option--highlight:after {
+      content: "";
+      background: gray;
+      color: white;
+    }
+
+    .multiselect__option--checkbox {
+      accent-color: $value;
+    }
+
+    .multiselect__tag-icon {
+      cursor: pointer;
+      margin-left: 7px;
+      position: absolute;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      font-weight: 400;
+      font-style: initial;
+      width: 22px;
+      text-align: center;
+      line-height: 21px;
+      transition: all 0.2s ease;
+      border-radius: 0;
+      border-left: 1px solid #ffffff
+    }
+
+    .multiselect__tag-icon:after {
+      content: "×";
+      color: #ffffff;
+      font-size: 14px;
+    }
+
+    .multiselect__tag-icon:focus,
+    .multiselect__tag-icon:hover {
+      background: none;
+    }
+
+    .multiselect__tag-icon:focus:after,
+    .multiselect__tag-icon:hover:after {
+      color: #ff0000;
+    }
+
+    .multiselect__clear-icon {
+      cursor: pointer;
+      position: absolute;
+      right: 20px;
+      top: 1px;
+      bottom: 0;
+      font-weight: 400;
+      font-style: initial;
+      width: 22px;
+      text-align: center;
+      line-height: 21px;
+      transition: all 0.2s ease;
+      border-radius: 0;
+      z-index: 1;
+    }
+
+    .multiselect__clear-icon:after {
+      content: "×";
+      color: $gray-800;
+      font-size: 14px;
+    }
+
+    .multiselect__clear-icon:focus,
+    .multiselect__clear-icon:hover {
+      background: none;
+    }
+
+    .multiselect__clear-icon:focus:after,
+    .multiselect__clear-icon:hover:after {
+      color: #ff0000;
+    }
+  }
+}
+
+.filter-header-multiselect__check-icon {
+  top: 1px;
+  left: 1px;
+}

package/src/styles/components/_stat-widget.scss

@@ -0,0 +1,32 @@
+@mixin widgetSize($sizeMultipler) {
+  $height: 100px;
+  $width: 100px;
+  height: $height * $sizeMultipler;
+  width: $width * $sizeMultipler;
+}
+
+.widget {
+  &--sm {
+    @include widgetSize(1);
+
+    .value {
+      font-size: 3em;
+    }
+  }
+
+  &--md {
+    @include widgetSize(2);
+
+    .value {
+      font-size: 4em;
+    }
+  }
+
+  &--lg {
+    @include widgetSize(3);
+
+    .value {
+      font-size: 5em;
+    }
+  }
+}

package/src/styles/components/_stepper.scss

@@ -0,0 +1,27 @@
+.step {
+  @extend .border, .fs-5, .rounded-circle;
+  height: 50px;
+  width: 50px;
+  background-color: white;
+  
+  &.inactive {
+    background-color: $gray-300;
+    border-color: $gray-300;
+  }
+
+}
+
+.line {
+  position: relative;
+  
+  &::before {
+    display: block;
+    content: "";
+    width: 99%;
+    z-index: -1;
+    border-bottom: $gray-300 1px solid;
+    position: absolute;
+    margin: 0;
+    top: 30%;
+  }
+}

package/src/styles/components/_table.scss

@@ -0,0 +1,44 @@
+table.table-lg {
+  // stylelint-disable-next-line selector-max-universal
+  > :not(caption) > * > * {
+    padding: 1rem 1rem;
+  }
+}
+
+.table-spinner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+}
+
+.table-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.sticky-header {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+
+.bg-clip-padding {
+  background-clip: padding-box;
+}
+
+.filter-input {
+  flex: 1 1 auto;
+  width: 1%;
+}
+
+[data-pc-section="headercheckbox.icon"], [data-pc-section="rowcheckbox.icon"] {
+  display: none;
+}
+
+[data-pc-name="rowradiobutton"] > [data-pc-section="input"] {
+  @extend .form-check-input;
+}

package/src/styles/components/_tile.scss

@@ -0,0 +1,63 @@
+@function getHoverColour($color) {
+  @if $color == danger {
+    @return #F9D9D5;
+  } @else if $color == warning {
+    @return #FFEFCF;
+  } @else if $color == success {
+    @return #C3E7D5;
+  } @else if $color == secondary {
+    @return #E5E5E5;
+  } @else {
+    @return #B9D5E7;
+  }
+}
+
+@each $color, $value in $base-colors {
+ .tile-#{$color} {
+   @if $color == secondary {
+     background-color: map-get($base-colors, "light") !important;
+     border-color: black !important;
+   } @else {
+     background-color: map-get($subtle-colors, $color + "-subtle") !important;
+     border-color: map-get($base-colors, $color) !important;
+   }
+   
+   color: $black !important;
+   text-align: start !important;
+   border: none;
+ }
+
+  .btn.btn-#{$color}.tile-#{$color} {
+    &:hover {
+      background-color: getHoverColour($color) !important;
+    }
+  
+    &:active {
+      background-color: map-get($subtle-colors, $color + "-subtle") !important;
+    }
+  
+    &.tile-bar-left, &.tile-bar-top {
+      border-color: map-get($base-colors, $color) !important
+    }
+  
+    &:focus {
+      @if $color == secondary {
+        background-color: map-get($base-colors, "light") !important;
+      } @else {
+        background-color: map-get($subtle-colors, $color + "-subtle") !important;
+      }
+    }
+  }
+}
+
+.tile-bar-top {
+  @extend .rounded-top;
+  border: none !important;
+  border-top: 8px solid !important;
+}
+
+.tile-bar-left {
+  @extend .rounded-start;
+  border: none !important;
+  border-left: 8px solid !important;
+}

package/src/styles/components/_toast.scss

@@ -0,0 +1,8 @@
+.toast-icon {
+  height: 30px;
+  width: 30px;
+}
+
+.toast-close-icon {
+  font-size: 0.6rem;
+}