@inriver/inri 1.13.0 → 1.15.0

package/src/stores/inriStore.ts

@@ -1,54 +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,
-  }
-}
+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

@@ -1,27 +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)
-    },
-  },
-})
+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

@@ -1,101 +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);
-}
+: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

@@ -1,67 +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;
-}
+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

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

package/src/styles/_utils.scss

@@ -1,15 +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;
-}
+// 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

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

package/src/styles/components/_checkboxes.scss

@@ -1,17 +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;
-  }
-}
+.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

@@ -1,17 +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;
-}
+.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;
+}