@inriver/inri 1.0.0

package/src/plugins/validationRules.ts

@@ -0,0 +1,292 @@
+import { i18n } from './i18n'
+
+const $t = i18n.global.t
+
+/**
+ * The value is required.
+ * @param {string} [msg] - Override the default error message
+ */
+export function required (msg?: string) {
+  return (value): true | string => {
+    return !!value || msg || $t('inri.validation.required')
+  }
+}
+
+/**
+ * The value must have a minimum length.
+ * @param {string | number} length - Min length
+ * @param {string} [msg] - Override the default error message
+ */
+export function minLength (length: string | number, msg?: string) {
+  const parsedLength = typeof length === 'number' ? length : parseInt(length, 10)
+  return (value): true | string => {
+    if (!value) {
+      return true
+    }
+
+    return value.length >= parsedLength || msg || $t('inri.validation.minLength', { parsedLength: parsedLength })
+  }
+}
+
+/**
+ * The value can not exceed maximum length.
+ * @param {string | number} length - Max length
+ * @param {string} [msg] - Override the default error message
+ */
+export function maxLength (length: string | number, msg?: string) {
+  const parsedLength = typeof length === 'number' ? length : parseInt(length, 10)
+  return (value): true | string => {
+    if (!value) {
+      return true
+    }
+
+    return value.length <= parsedLength || msg || $t('inri.validation.maxLength', { parsedLength: parsedLength })
+  }
+}
+
+/**
+ * The value must be a valid email.
+ * @param {string} [msg] - Override the default error message
+ */
+export function email (msg?: string) {
+  // eslint-disable-next-line no-useless-escape
+  const regExp = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+  return (value): true | string => {
+    if (!value) {
+      return true
+    }
+
+    return regExp.test(String(value).toLowerCase()) || msg || $t('inri.validation.email')
+  }
+}
+
+/**
+ * The value must be a valid url.
+ * @param {string} [msg] - Override the default error message
+ */
+export function url (msg?: string) {
+  // eslint-disable-next-line no-useless-escape
+  const regExp = /^(https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,4}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*))$/
+  return (value): true | string => {
+    if (!value) {
+      return true
+    }
+
+    return regExp.test(String(value).toLowerCase()) || msg || $t('inri.validation.url')
+  }
+}
+
+/**
+ * The value must be a valid url using https.
+ * @param {string} [msg] - Override the default error message
+ */
+export function https (msg?: string) {
+  // eslint-disable-next-line no-useless-escape
+  const regExp = /^(https:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,4}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*))$/
+  return (value): true | string => {
+    if (!value) {
+      return true
+    }
+
+    return regExp.test(String(value).toLowerCase()) || msg || $t('inri.validation.https')
+  }
+}
+
+/**
+ * Validate file extensions. Supports single and multiple files.
+ * @param {string} fileExtensions - A string containing a single file extension, "jpg", or a comma separated string, "jpg,png".
+ * @param {string} [msg] - Override the default error message
+ */
+export function extension (fileExtensions: string, msg?: string) {
+  // Extension string cleanup and convert to array
+  const extensions = fileExtensions
+    .toLowerCase()
+    .replaceAll(' ', '')
+    .replaceAll('.', '')
+    .split(',')
+
+  return (value): true | string => {
+    if (!value) {
+      return true
+    }
+
+    let files: any[] = []
+    let isValid = true
+
+    // If single file then push it into an array for consistency
+    if (!value.length) {
+      files.push(value)
+    } else {
+      files = value
+    }
+
+    for (const file of files) {
+      const fileExt = file.name.substring(file.name.lastIndexOf('.') + 1).toLowerCase()
+      if (!extensions.includes(fileExt)) {
+        isValid = false
+        break
+      }
+    }
+
+    return isValid || msg || $t('inri.validation.extension', { extensions: extensions.join(', .') })
+  }
+}
+
+/**
+ * The value must contain all the strings in the array.
+ * @param {string[]} arr - Array of strings.
+ * @param {boolean} caseSensitive
+ * @param {string} [msg] - Override the default error message
+ */
+export function contains (arr: string[], caseSensitive = false, msg?: string) {
+  return (value): true | string => {
+    if (!value) {
+      return true
+    }
+
+    let foundItems
+
+    if (!caseSensitive) {
+      foundItems = arr.filter(item => !value.toUpperCase().includes(('' + item).toUpperCase()))
+    } else {
+      foundItems = arr.filter(item => !value.includes('' + item))
+    }
+
+    if (!foundItems.length) {
+      return true
+    }
+
+    return msg || $t('inri.validation.contains', { match: foundItems.join(', ') })
+  }
+}
+
+/**
+ * The value must not contain any of the strings in the array.
+ * @param {string[]} arr - Array of strings.
+ * @param {boolean} caseSensitive
+ * @param {string} [msg] - Override the default error message
+ */
+export function notContains (arr: string[], caseSensitive = false, msg?: string) {
+  return (value): true | string => {
+    if (!value) {
+      return true
+    }
+
+    const comparisonValue = value instanceof File ? value.name : value
+
+    let foundItems
+
+    if (!caseSensitive) {
+      foundItems = arr.filter(item => comparisonValue.toUpperCase().includes(('' + item).toUpperCase()))
+    } else {
+      foundItems = arr.filter(item => comparisonValue.includes('' + item))
+    }
+
+    if (!foundItems.length) {
+      return true
+    }
+
+    return msg || $t('inri.validation.notContains', { match: foundItems.join(', ') })
+  }
+}
+
+/**
+ * The value must not begin with any of the strings in the array.
+ * @param {string[]} arr - Array of strings.
+ * @param {boolean} caseSensitive
+ * @param {string} [msg] - Override the default error message
+ */
+export function notBeginsWith (arr: string[], caseSensitive = false, msg?: string) {
+  return (value): true | string => {
+    if (!value) {
+      return true
+    }
+
+    let foundItems
+
+    if (!caseSensitive) {
+      foundItems = arr.filter(item => value.toUpperCase().startsWith(('' + item).toUpperCase()))
+    } else {
+      foundItems = arr.filter(item => value.startsWith('' + item))
+    }
+
+    if (!foundItems.length) {
+      return true
+    }
+
+    return msg || $t('inri.validation.notBeginsWith', { match: foundItems.join(', ') })
+  }
+}
+
+/**
+ * The value must not end with any of the strings in the array.
+ * @param {string[]} arr - Array of strings.
+ * @param {boolean} caseSensitive
+ * @param {string} [msg] - Override the default error message
+ */
+export function notEndsWith (arr: string[], caseSensitive = false, msg?: string) {
+  return (value): true | string => {
+    if (!value) {
+      return true
+    }
+
+    let foundItems
+
+    if (!caseSensitive) {
+      foundItems = arr.filter(item => value.toUpperCase().endsWith(('' + item).toUpperCase()))
+    } else {
+      foundItems = arr.filter(item => value.endsWith('' + item))
+    }
+
+    if (!foundItems.length) {
+      return true
+    }
+
+    return msg || $t('inri.validation.notEndsWith', { match: foundItems.join(', ') })
+  }
+}
+
+/**
+ * The file(s) cannot exceed max size
+ * @param {string | number} size - Max size in bytes
+ * @param {string} [type] - Only validate against files with this MIME type
+ * @param {string} [msg] - Override the default error message
+ */
+export function maxFileSize (size: string | number, type?: string, msg?: string) {
+  const parsedFileSize = typeof size === 'number' ? size : parseInt(size, 10)
+
+  return (value): true | string => {
+    if (!value) {
+      return true
+    }
+
+    let files: any[] = []
+
+    if (!value.length) {
+      files.push(value)
+    } else {
+      files = value
+    }
+
+    if (type) {
+      files = files.filter(file => file.type.includes(type))
+    }
+
+    return files.every(file => file.size <= size) || msg || $t('inri.validation.maxFileSize', { parsedFileSize })
+  }
+}
+
+export const rules = {
+  required,
+  maxLength,
+  minLength,
+  email,
+  url,
+  https,
+  extension,
+  contains,
+  notContains,
+  notBeginsWith,
+  notEndsWith,
+  maxFileSize,
+}

package/src/shims-vue.d.ts

@@ -0,0 +1,6 @@
+/* eslint-disable */
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

package/src/stores/inriStore.ts

@@ -0,0 +1,54 @@
+import { computed, reactive } from 'vue'
+
+interface State {
+  dirtyComponents: any[],
+  leftDrawerIsOpen: boolean,
+  rightDrawerIsOpen: boolean,
+  showSidebar: boolean,
+  showPageSpinner: boolean,
+  isGridView: boolean
+}
+
+const state = reactive<State>({
+  dirtyComponents: [],
+  leftDrawerIsOpen: false,
+  rightDrawerIsOpen: false,
+  showSidebar: true,
+  showPageSpinner: false,
+  isGridView: true,
+})
+
+const isAnyDirty = computed(() => {
+  return !!state.dirtyComponents.length
+})
+
+function toggleLeftDrawer () {
+  state.leftDrawerIsOpen = !state.leftDrawerIsOpen
+}
+
+function toggleRightDrawer () {
+  state.rightDrawerIsOpen = !state.rightDrawerIsOpen
+}
+
+function toggleSidebar () {
+  state.showSidebar = !state.showSidebar
+}
+
+function toggleDirtyComponent (item: any, add: boolean | undefined) {
+  if (add && !state.dirtyComponents.find(i => i === item)) {
+    state.dirtyComponents.push(item)
+  } else {
+    state.dirtyComponents = state.dirtyComponents.filter(i => i !== item)
+  }
+}
+
+export const useInriStore = () => {
+  return {
+    state,
+    isAnyDirty,
+    toggleLeftDrawer,
+    toggleRightDrawer,
+    toggleSidebar,
+    toggleDirtyComponent,
+  }
+}

package/src/stores/interfaceLanguageStore.ts

@@ -0,0 +1,27 @@
+import { defineStore } from 'pinia'
+import { Quasar } from 'quasar'
+import { loadi18nLanguageAsync } from '../plugins/i18n'
+
+export const useInterfaceLanguageStore = defineStore({
+  id: 'interfaceLanguage',
+  state: () => ({}),
+  actions: {
+    async loadQuasarLanguageAsync (lang: string) {
+      // IMPORTANT: Quasar uses "en-US" instead of "en"
+      const qLangCode = lang === 'en' ? 'en-US' : lang
+
+      const qLang = await import(
+        /* webpackInclude: /(de|en-US|fr|es)\.js$/ */
+        'quasar/lang/' + qLangCode
+      )
+      Quasar.lang.set(qLang.default)
+    },
+    async setLanguage (lang : string) {
+      await loadi18nLanguageAsync(lang)
+      await this.loadQuasarLanguageAsync(lang)
+    },
+    async init (lang: string) {
+      await this.setLanguage(lang)
+    },
+  },
+})

package/src/styles/_css-variables.scss

@@ -0,0 +1,101 @@
+:root {
+  /* stylelint-disable-next-line */
+  --font-family: 'Wallop', 'Roboto', '-apple-system', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+
+  // Color palette
+  --color-grey: #ccc;
+  --color-grey-light: #ddd;
+  --color-grey-lighter: #eaeaea;
+  --color-grey-10: #f3f3f3;
+  --color-grey-dark: #888;
+  --color-grey-darker: #444;
+  --color-grey-darkest: #2d2d2c;
+  --color-blue: #4799fc;
+  --color-blue-light: #91c2fd;
+  --color-purple: #ad66f2;
+  --color-purple-light: #cea3f7;
+  --color-red: #ff3838;
+  --color-red-light: #ff8888;
+  --color-orange: #ff7a20;
+  --color-orange-light: #ffa874;
+  --color-yellow: #ffbf2e;
+  --color-yellow-light: #ffd982;
+  --color-green: #00b06e;
+  --color-green-light: #66d0a8;
+  --color-green-light-30: rgba(102,208,168,0.3);
+  --color-green-10: #e5f7f0;
+
+  // Surface is a special color defined in Material Design but not part of Quasar. We still want to use it though.
+  // This is any plain surface, like a card or dialog background.
+  --surface-color: #fff;
+  --on-surface-color: var(--color-grey-darkest);
+  --surface-effect-color: var(--color-grey-lighter);
+  --surface-border-color: var(--color-grey);
+
+  // ** Primary, secondary and accent colors **
+  // Quasar base colors, like primary, are defined in quasar.variables.scss but can be overwritten like this: "--q-primary: orange !important;"
+
+  // primary = black
+  --on-primary-color: #fff;
+  --on-primary-alt-color: #fff; // This alt color is used in some scenarios, like for the context menu on banner cards.
+  --primary-effect-color: var(--color-grey-darker);
+
+  // secondary = grey-lighter
+  --on-secondary-color: var(--color-grey-darkest);
+  --on-secondary-alt-color: var(--color-grey-darkest);
+  --secondary-effect-color: var(--color-grey-light);
+
+  // accent = green
+  --on-accent-color: var(--color-grey-darkest);
+  --on-accent-alt-color: #fff;
+  --accent-effect-color: var(--color-green-light);
+
+  // Color aliases
+  --color-text: var(--color-grey-darkest);
+  --color-border: var(--color-grey-light);
+  --color-border-dark: var(--color-grey);
+
+  // Form elements
+  --input-bg-color: var(--surface-color);
+  --checkbox-border-color: var(--color-grey);
+  --radio-border-color: var(--color-grey);
+
+  // Table
+  --table-header-bg-color: var(--surface-color);
+  --table-image-size-width: 45px;
+  --table-image-size-height: 35px;
+
+  // Tree
+  --tree-icon-color: var(--color-grey-dark);
+  --tree-text-color: var(--color-text);
+
+  // Small card
+  --small-card-image-size: 86px;
+
+  // Tooltip
+  --tooltip-bg-color: #fff;
+  --tooltip-text-color: var(--color-grey-darkest);
+  --tooltip-border-color: var(--color-grey);
+
+  // Generic item states (lists/tables/trees etc.)
+  --item-selected-bg-color: var(--color-green-10);
+  --item-hover-bg-color: var(--color-grey-10);
+
+  // Dialog
+  --dialog-shadow: 0 2px 27px rgba(0, 0, 0, 0.25);
+  --dialog-backdrop-color: rgba(0, 0, 0, 0.25);
+
+  // Chips
+  --chip-bg-color: var(--color-grey-lighter);
+  --chip-text-color: var(--color-grey-darkest);
+
+  // Misc
+  --breadcrumbs-separator-color: var(--color-grey);
+}
+
+// Themes for different sections of the application
+[theme='route-demo-theme'] {
+  --q-primary: var(--color-green);
+  --q-secondary: var(--color-green-light);
+  --q-accent: var(--color-green-light);
+}

package/src/styles/_reset.scss

@@ -0,0 +1,67 @@
+body {
+  color: var(--color-text);
+  font-variant-ligatures: none;
+}
+
+// Reset browser heading margin
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+}
+
+code {
+  background: var(--color-grey-darkest);
+  color: white;
+  border-radius: 4px;
+  padding: 0 4px;
+}
+
+pre {
+  margin: 0;
+}
+
+// Copied from Preflight/Windi reset
+*,
+::before,
+::after {
+  border-width: 0;
+  border-style: solid;
+  border-color: var(--color-border);
+}
+
+[placeholder]::placeholder {
+  color: var(--color-grey);
+  opacity: 1; /* Firefox */
+}
+
+// Custom scrollbar in Firefox
+* {
+  scrollbar-width: thin;
+}
+
+// Custom scrollbar in Chrome/Webkit
+::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background-color: var(--color-grey);
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+a {
+  text-decoration: none;
+  color: var(--on-surface-color);
+}
+
+ol,
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}

package/src/styles/_transitions.scss

@@ -0,0 +1,9 @@
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}

package/src/styles/_utils.scss

@@ -0,0 +1,15 @@
+// There is a plugin in windi for this, but for some reason it breaks code completion
+.line-clamp-2 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.overflow-y-overlay {
+  // Fallback to auto in Firefox
+  overflow-y: auto;
+
+  // Overlay in Chrome
+  overflow-y: overlay;
+}

package/src/styles/components/_breadcrumbs.scss

@@ -0,0 +1,3 @@
+.q-breadcrumbs__separator {
+  color: var(--breadcrumbs-separator-color);
+}

package/src/styles/components/_checkboxes.scss

@@ -0,0 +1,17 @@
+.c-checkbox {
+  &.q-checkbox[aria-label] {
+    max-width: max-content;
+  }
+
+  &.q-checkbox.disabled {
+    opacity: 0.4 !important;
+  }
+
+  .q-checkbox__inner--falsy .q-checkbox__bg {
+    border: 2px solid var(--checkbox-border-color);
+  }
+
+  .q-checkbox__label {
+    padding: 4px 10px;
+  }
+}

package/src/styles/components/_chips.scss

@@ -0,0 +1,17 @@
+.q-chip {
+  background: var(--chip-bg-color);
+  color: var(--chip-text-color);
+  height: 26px;
+
+  .q-chip__icon--remove {
+    margin-left: 8px;
+  }
+
+  .q-chip__icon {
+    opacity: 0.25;
+  }
+}
+
+.q-chip--dense {
+  padding: 0 8px;
+}