@inriver/inri 1.0.0

package/src/styles/components/_forms.scss

@@ -0,0 +1,203 @@
+.c-input {
+  // Input, select etc overrides
+  &.q-field--outlined .q-field__control {
+    padding: 0 16px 0 12px;
+    border-radius: 5px;
+    background: var(--input-bg-color);
+
+    &::after {
+      border-width: 1px;
+    }
+  }
+
+  // Outline color
+  &.q-field--outlined .q-field__control::before {
+    border-color: var(--color-grey);
+  }
+
+  // Focus
+  &.q-field--highlighted:not(.q-field--error) {
+    &.q-field--outlined .q-field__control::after {
+      border-color: var(--q-accent);
+    }
+  }
+
+  // Padding below the input
+  &.q-field--with-bottom {
+    padding-bottom: 36px;
+  }
+
+  // Label
+  .q-field__label {
+    transition: all 0.3s !important;
+    font-size: 14px;
+    color: var(--color-grey-dark);
+  }
+
+  // Move the floated label
+  &.q-field--float .q-field__label {
+    top: 0 !important;
+    background: var(--input-bg-color);
+    padding: 0 4px;
+    left: -4px;
+    z-index: 1;
+  }
+
+  // Set label color
+  &.q-field--float:not(.q-field--focused):not(.q-field--error) {
+    .q-field__label {
+      color: var(--color-grey-darker);
+    }
+  }
+
+  // If you have a prepended icon then offset the label to the left on focus
+  &.q-field--float {
+    .q-field__prepend + .q-field__control-container {
+      .q-field__label {
+        left: -34px;
+      }
+    }
+  }
+
+  // Reset top padding on inputs to compensate for offset label
+  .q-field__native {
+    padding: 8px 0 !important;
+
+    // Smaller min-height than default
+    min-height: 40px !important;
+  }
+
+  // Reset top padding on select boxes to compensate for offset label
+  &.q-field--auto-height.q-field--labeled .q-field__control-container {
+    padding-top: 0;
+  }
+
+  .q-field--auto-height {
+    min-height: 50px !important;
+  }
+
+  // Field with errors and hints
+  .q-field__bottom {
+    padding-top: 4px;
+  }
+
+  // Textarea overrides
+  &.q-textarea {
+    .q-field__control-container {
+      padding-top: 8px !important;
+    }
+
+    .q-field__control {
+      padding: 0;
+    }
+
+    textarea {
+      resize: none !important;
+      padding: 8px 16px 8px 12px !important;
+      height: 138px;
+    }
+
+    .q-field__label {
+      left: 10px;
+    }
+
+    .q-field__append {
+      position: absolute;
+      right: 16px;
+    }
+  }
+
+  // Disabled input
+  &.q-field--disabled {
+    .q-field__control::before {
+      border-color: var(--color-grey-lighter) !important;
+    }
+
+    .q-field__native {
+      color: var(--color-grey-dark);
+    }
+  }
+
+  // Select overrides
+  .q-select__dropdown-icon {
+    color: var(--color-grey-dark);
+  }
+
+  &.q-select--with-input .q-field__control {
+    cursor: pointer;
+
+    input {
+      cursor: pointer;
+    }
+  }
+
+  // Error icon
+  .mdi-alert-circle-outline {
+    font-size: 18px;
+  }
+}
+
+// Default modifier
+.c-input.c-input--default:not(.q-textarea) {
+  .q-field__control {
+    height: auto;
+    min-height: 50px;
+  }
+
+  .q-field__label {
+    top: 15px;
+  }
+
+  .q-field__marginal {
+    height: 50px;
+  }
+}
+
+// Rounded
+.c-input.q-field--rounded .q-field__control {
+  border-radius: 25px;
+}
+
+// Dense modifier
+.c-input--dense {
+  // Outline color
+  &.q-field--outlined .q-field__control::before {
+    border-color: var(--color-grey);
+  }
+
+  .q-field__label {
+    color: var(--color-grey-darkest);
+  }
+
+  ::placeholder {
+    color: var(--color-text);
+  }
+
+  &.q-textarea {
+    .q-field__control {
+      padding: 0;
+    }
+
+    textarea {
+      padding: 8px 20px 8px 16px !important;
+      height: 80px;
+    }
+
+    .q-field__label {
+      left: 16px;
+    }
+
+    .q-field__append {
+      right: 20px;
+    }
+  }
+
+  &.q-field--float .q-field__label {
+    top: -2px !important;
+  }
+
+  // Dense rounded
+  &.q-field--rounded .q-field__control {
+    padding: 0 16px;
+  }
+}

package/src/styles/components/_menu.scss

@@ -0,0 +1,12 @@
+.q-menu {
+  border: 1px solid var(--color-border-dark);
+
+  .q-item {
+    min-height: 40px;
+    padding: 4px 16px;
+  }
+
+  .q-item:not(:last-child) {
+    border-bottom: 1px solid var(--color-border-dark);
+  }
+}

package/src/styles/components/_notifications.scss

@@ -0,0 +1,24 @@
+.c-notify {
+  .c-spinner {
+    width: 18px !important;
+    height: 18px !important;
+    color: #fff !important;
+    margin-right: 20px !important;
+  }
+
+  .q-notification__icon--additional {
+    margin-right: 20px;
+  }
+
+  &.q-notification--standard {
+    .q-notification__actions {
+      padding: 0;
+      margin-right: 0;
+    }
+  }
+}
+
+.c-notify__btn {
+  padding: 8px;
+  margin-left: 12px;
+}

package/src/styles/components/_q-editor.scss

@@ -0,0 +1,14 @@
+.q-editor__toolbar-group + .q-editor__toolbar-group::before {
+  top: 0;
+  bottom: 0;
+}
+
+.q-editor .q-btn {
+  color: var(--color-grey-dark);
+  margin: 6px 0;
+  padding: 6px;
+}
+
+.q-editor__toolbar-group:first-child {
+  margin-left: 12px;
+}

package/src/styles/components/_radio-buttons.scss

@@ -0,0 +1,17 @@
+.c-radio {
+  &.q-radio[aria-label] {
+    max-width: max-content;
+  }
+
+  &.q-radio.disabled {
+    opacity: 0.4 !important;
+  }
+
+  .q-radio__inner--falsy .q-radio__icon {
+    color: var(--radio-border-color);
+  }
+
+  .q-radio__label {
+    padding: 4px 10px;
+  }
+}

package/src/styles/components/_tables.scss

@@ -0,0 +1,92 @@
+.c-table {
+  th {
+    padding: 7px 12px;
+    font-size: 14px;
+    font-weight: 500;
+    white-space: nowrap;
+  }
+
+  td {
+    padding: 7px 12px;
+    border-bottom: none !important;
+    border-top: 1px solid var(--color-border);
+  }
+
+  thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+
+  thead tr:first-child th {
+    top: 0;
+    background: var(--table-header-bg-color);
+  }
+
+  tbody tr:first-child td {
+    border-color: transparent;
+  }
+
+  tbody tr.selected {
+    background-color: var(--item-selected-bg-color);
+
+    td {
+      border-color: transparent;
+    }
+
+    td::after {
+      background: transparent;
+    }
+
+    // Also hide the border from the next sibling
+    & + tr {
+      td {
+        border-color: transparent;
+      }
+    }
+  }
+
+  // Hide the border on hovered items
+  tbody tr:hover {
+    td {
+      border-color: transparent;
+    }
+
+    // Also hide the border from the next sibling
+    & + tr {
+      td {
+        border-color: transparent;
+      }
+    }
+  }
+}
+
+// This will align the content to the top instead of being centered
+.c-table.align-top {
+  td {
+    padding: 14px 12px 13px;
+  }
+
+  td {
+    vertical-align: top;
+  }
+}
+
+// If the items are selectable then we want to hide the default checkboxes
+.c-table.hide-checkboxes {
+  th:first-child,
+  td:first-child {
+    display: none;
+  }
+
+  th:first-child + th,
+  td:first-child + td {
+    border-left: 0;
+  }
+}
+
+.c-table.with-action-buttons {
+  th:last-child,
+  td:last-child {
+    border-left: 0;
+  }
+}

package/src/styles/components/_tooltips.scss

@@ -0,0 +1,5 @@
+// More is defined in quasar.variables.scss
+
+.q-tooltip {
+  border: 1px solid var(--tooltip-border-color);
+}

package/src/styles/components/_tree.scss

@@ -0,0 +1,86 @@
+.c-tree.q-tree {
+  .q-icon {
+    font-size: 20px;
+    width: 12px;
+    margin-right: 8px;
+    color: var(--tree-icon-color);
+
+    &:hover {
+      color: var(--tree-text-color);
+    }
+  }
+
+  & > .q-tree__node--child > .q-tree__node-header {
+    padding-left: 36px !important;
+  }
+
+  // Remove the top margin on the first item in the list
+  & > .q-tree__node:first-child > .q-tree__node-header {
+    margin-top: 0;
+  }
+
+  // Make item content be on top of the q-focus-helper instead of below
+  .q-tree__node-header > * {
+    z-index: 1;
+  }
+
+  .q-tree__node {
+    padding-bottom: 0;
+  }
+
+  // Override relative to that we can extend the focus background to go from edge to edge
+  .q-tree__node.relative-position,
+  .q-tree__node-header.relative-position {
+    position: static;
+  }
+
+  .q-tree__node-header {
+    border-radius: 0;
+    margin-top: 8px;
+    padding: 2px 16px;
+    min-height: 32px;
+
+    &:hover .q-focus-helper,
+    &:focus .q-focus-helper {
+      opacity: 1 !important;
+    }
+  }
+
+  .q-tree__node-header-content {
+    color: var(--tree-text-color);
+    padding-left: 4px;
+  }
+
+  .q-tree__node-header-content div:first-child {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  // Do some overrides on the focus effect
+  .q-focus-helper {
+    background: var(--item-hover-bg-color) !important;
+    height: 32px !important;
+    top: auto !important;
+
+    &::before,
+    &::after {
+      opacity: 0 !important;
+    }
+  }
+
+  // Selected item
+  .q-tree__node--selected {
+    font-weight: 600;
+
+    .q-focus-helper {
+      background: var(--item-selected-bg-color) !important;
+      opacity: 1;
+    }
+
+    .q-icon {
+      pointer-events: all;
+      color: var(--tree-text-color);
+    }
+  }
+}

package/src/styles/components/_truncated-chips.scss

@@ -0,0 +1,39 @@
+// This is used when having chips/tags in tables. If there are more chips than fits the cell then hide chips and show some icons.
+// It is used together with the useTruncateChips composable function.
+
+// Only shown when more chips than fits in the cell
+.truncated-chips__ellipsis,
+.truncated-chips__show-more-btn {
+  display: none;
+}
+
+// This is the wrapper for all the chips
+.truncated-chips {
+  overflow: hidden;
+  max-width: 1px;
+  padding-left: 6px !important;
+}
+
+// When a chip is overflown truncate it and all the sibling chips. Toggle the status of some buttons/icons.
+.truncated-chip {
+  display: none !important;
+
+  & ~ .q-chip {
+    display: none;
+  }
+
+  & ~ .truncated-chips__show-more-btn {
+    display: inline-flex;
+  }
+
+  & ~ .truncated-chips__edit-btn {
+    display: none;
+  }
+
+  & ~ .truncated-chips__ellipsis {
+    display: inline-flex;
+    color: var(--color-grey);
+    position: relative;
+    top: 8px;
+  }
+}

package/src/styles/main.scss

@@ -0,0 +1,45 @@
+@import 'css-variables';
+@import './quasar.variables.scss';
+@import 'quasar/dist/quasar.sass';
+@import 'transitions';
+@import 'reset';
+@import 'components/forms';
+@import 'components/chips';
+@import 'components/checkboxes';
+@import 'components/radio-buttons';
+@import 'components/tables';
+@import 'components/q-editor';
+@import 'components/tree';
+@import 'components/tooltips';
+@import 'components/notifications';
+@import 'components/breadcrumbs';
+@import 'components/menu';
+@import 'components/truncated-chips';
+@import 'utils';
+
+@font-face {
+  font-family: 'Wallop';
+  src: url('/fonts/Wallop-Regular.woff2') format("woff2");
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Wallop';
+  src: url('/fonts/Wallop-Medium.woff2') format("woff2");
+  font-weight: 500;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Wallop';
+  src: url('/fonts/Wallop-SemiBold.woff2') format("woff2");
+  font-weight: 600;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Wallop';
+  src: url('/fonts/Wallop-Bold.woff2') format("woff2");
+  font-weight: 700;
+  font-display: swap;
+}

package/src/styles/quasar.variables.scss

@@ -0,0 +1,50 @@
+$primary   : #000;
+$secondary : var(--color-grey-lighter);
+$accent    : var(--color-green);
+
+$dark      : #1d1d1d;
+
+$positive  : var(--color-green);
+$negative  : var(--color-red);
+$info      : var(--color-blue);
+$warning   : var(--color-yellow);
+
+$typography-font-family: var(--font-family);
+
+$h1:        (size: 24px,     line-height: 1.45,     letter-spacing: normal, weight: 600) !default;
+$h2:        (size: 22px,     line-height: 1.45,     letter-spacing: normal, weight: 600) !default;
+$h3:        (size: 18px,     line-height: 1.45,     letter-spacing: normal, weight: 600) !default;
+$h4:        (size: 16px,     line-height: 1.45,     letter-spacing: normal, weight: 600) !default;
+
+// These should not be used but are always bundled by Quasar. Let's give them fallback sizes just in case (h4 clones)
+$h5:        (size: 16px,     line-height: 1.45,     letter-spacing: normal, weight: 600) !default;
+$h6:        (size: 16px,     line-height: 1.45,     letter-spacing: normal, weight: 600) !default;
+
+$body1:     (size: 14px,     line-height: 1,        letter-spacing: normal,  weight: 400) !default;
+$body2:     (size: 12px,     line-height: 1,        letter-spacing: normal,  weight: 400) !default;
+
+$separator-color: var(--color-border);
+
+$input-text-color: var(--color-grey-darker);
+
+$editor-border-color: var(--color-grey);
+
+$generic-border-radius: 0;
+
+$menu-box-shadow: 0;
+
+// Tooltips
+$tooltip-color: var(--tooltip-text-color);
+$tooltip-background: var(--tooltip-bg-color);
+$tooltip-fontsize: 14px;
+$tooltip-border-radius: 5px;
+$tooltip-padding: 4px 10px;
+
+// Override Quasar color palette
+$grey: var(--color-grey);
+$blue: var(--color-blue);
+$purple: var(--color-purple);
+$red: var(--color-red);
+$orange: var(--color-orange);
+$yellow: var(--color-yellow);
+$green: var(--color-green);

package/src/typings.d.ts

@@ -0,0 +1,70 @@
+interface Components {
+  CBannerCard: typeof import('./components/cards/CBannerCard.vue')['default'],
+  CSmallCard: typeof import('./components/cards/CSmallCard.vue')['default'],
+  ConfirmDialog: typeof import('./components/internal-components/ConfirmDialog.vue')['default'],
+  CAutoBreadcrumbs: typeof import('./components/CAutoBreadcrumbs.vue')['default'],
+  CBtn: typeof import('./components/CBtn.vue')['default'],
+  CColorPicker: typeof import('./components/CColorPicker.vue')['default'],
+  CContextMenu: typeof import('./components/CContextMenu.vue')['default'],
+  CDatePicker: typeof import('./components/CDatePicker.vue')['default'],
+  CDialog: typeof import('./components/CDialog.vue')['default'],
+  CDialogCloseBtn: typeof import('./components/CDialogCloseBtn.vue')['default'],
+  CDirtyCheck: typeof import('./components/CDirtyCheck.vue')['default'],
+  CDrawer: typeof import('./components/CDrawer.vue')['default'],
+  CDrawerButton: typeof import('./components/CDrawerButton.vue')['default'],
+  CExpansionItem: typeof import('./components/CExpansionItem.vue')['default'],
+  CExpansionItemWithCheckbox: typeof import('./components/CExpansionItemWithCheckbox.vue')['default'],
+  CGrid: typeof import('./components/CGrid.vue')['default'],
+  CHeader: typeof import('./components/CHeader.vue')['default'],
+  CHeaderLinks: typeof import('./components/CHeaderLinks.vue')['default'],
+  CHeaderMenuLink: typeof import('./components/CHeaderMenuLink.vue')['default'],
+  CHeaderSearch: typeof import('./components/CHeaderSearch.vue')['default'],
+  CIconBtn: typeof import('./components/CIconBtn.vue')['default'],
+  CMenuItem: typeof import('./components/CMenuItem.vue')['default'],
+  CPageContainer: typeof import('./components/CPageContainer.vue')['default'],
+  CPageError: typeof import('./components/CPageError.vue')['default'],
+  CPageSpinner: typeof import('./components/CPageSpinner.vue')['default'],
+  CSearch: typeof import('./components/CSearch.vue')['default'],
+  CSection: typeof import('./components/CSection.vue')['default'],
+  CSectionTitle: typeof import('./components/CSectionTitle.vue')['default'],
+  CSelect: typeof import('./components/CSelect.vue')['default'],
+  CSlideEffect: typeof import('./components/CSlideEffect.vue')['default'],
+  CSpinner: typeof import('./components/CSpinner.vue')['default'],
+  CTableActions: typeof import('./components/CTableActions.vue')['default'],
+  CTileBtn: typeof import('./components/CTileBtn.vue')['default'],
+  CTimePicker: typeof import('./components/CTimePicker.vue')['default'],
+  CToggleGridView: typeof import('./components/CToggleGridView.vue')['default'],
+  CToggleSidebarBtn: typeof import('./components/CToggleSidebarBtn.vue')['default'],
+  CTooltip: typeof import('./components/CTooltip.vue')['default'],
+  CTreeNode: typeof import('./components/CTreeNode.vue')['default'],
+  CDeleteTileBtn: typeof import('./components/CDeleteTileBtn.vue')['default'],
+  CFileDropzone: typeof import('./components/CFileDropzone.vue')['default'],
+}
+
+interface Layouts {
+  CLayoutBlank: typeof import('./layouts/CLayoutBlank.vue')['default'],
+  CLayoutWithBackButton: typeof import('./layouts/CLayoutWithBackButton.vue')['default'],
+  CLayoutWithSidebars: typeof import('./layouts/CLayoutWithSidebars.vue')['default'],
+}
+
+interface LayoutFragments {
+  CPageAutoBreadcrumbs: typeof import('./layouts/layout-fragments/CPageAutoBreadcrumbs.vue')['default'],
+  CPageBackButton: typeof import('./layouts/layout-fragments/CPageBackButton.vue')['default'],
+  CPageBlank: typeof import('./layouts/layout-fragments/CPageBlank.vue')['default'],
+  CPageFlexCol: typeof import('./layouts/layout-fragments/CPageFlexCol.vue')['default'],
+  CPageLeftSidebar: typeof import('./layouts/layout-fragments/CPageLeftSidebar.vue')['default'],
+  CPageMainContent: typeof import('./layouts/layout-fragments/CPageMainContent.vue')['default'],
+  CPageOuterWrapper: typeof import('./layouts/layout-fragments/CPageOuterWrapper.vue')['default'],
+  CPageRightSidebar: typeof import('./layouts/layout-fragments/CPageRightSidebar.vue')['default'],
+  CPageTitle: typeof import('./layouts/layout-fragments/CPageTitle.vue')['default'],
+}
+
+export interface GlobalComponents extends Components, Layouts, LayoutFragments {}
+
+export interface ComponentCustomProperties {
+  $validate: typeof import('./plugins/validationRules')['rules'],
+  $notify: typeof import('./plugins/notify')['default'],
+  $dialog: typeof import('./plugins/dialog')['default'],
+  $colors: typeof import('./utils/colorUtils')['colors'],
+  $inri: typeof import('./plugins/inriverQuasarComponentConfigurations')['quasarComponentConfigurations'],
+}