@inriver/inri 1.0.0

package/.eslintrc.js

@@ -0,0 +1,5 @@
+const baseConfig = require('./configs/base-eslint-config.js')
+
+module.exports = {
+  ...baseConfig
+}

package/componentProperties.d.ts

@@ -0,0 +1,8 @@
+import { ComponentCustomProperties as inriComponentCustomProperties } from './src/typings'
+
+declare module '@vue/runtime-core' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface ComponentCustomProperties extends inriComponentCustomProperties {}
+}
+
+export {}

package/configs/base-eslint-config.js

@@ -0,0 +1,36 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: [
+    'plugin:vue/vue3-recommended',
+    '@vue/standard',
+    '@vue/typescript/recommended',
+  ],
+  parserOptions: {
+    ecmaVersion: 2020,
+  },
+  globals: {
+    defineProps: 'readonly',
+    defineEmits: 'readonly',
+    defineExpose: 'readonly',
+    withDefaults: 'readonly',
+  },
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'comma-dangle': ['error', 'always-multiline'],
+    curly: ['error', 'all'],
+    'brace-style': ['error', '1tbs'],
+    'object-property-newline': ['error', { allowAllPropertiesOnSameLine: false }],
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/ban-types': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    'vue/object-curly-spacing': ['error', 'always'],
+    '@typescript-eslint/ban-ts-comment': 'off',
+    '@typescript-eslint/no-var-requires': 'off',
+    '@typescript-eslint/no-namespace': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+  },
+}

package/configs/base-tailwind-config.js

@@ -0,0 +1,149 @@
+module.exports = {
+  preflight: false,
+  darkMode: false,
+  theme: {
+    extend: {
+      zIndex: {
+        '-1': '-1',
+      },
+    },
+    colors: {
+      current: 'currentColor',
+
+      grey: 'var(--color-grey)',
+      'grey-light': 'var(--color-grey-light)',
+      'grey-lighter': 'var(--color-grey-lighter)',
+      'grey-dark': 'var(--color-grey-dark)',
+      'grey-darker': 'var(--color-grey-darker)',
+      'grey-darkest': 'var(--color-grey-darkest)',
+
+      blue: 'var(--color-blue)',
+      'blue-light': 'var(--color-blue-light)',
+      purple: 'var(--color-purple)',
+      'purple-light': 'var(--color-purple-light)',
+      red: 'var(--color-red)',
+      'red-light': 'var(--color-red-light)',
+      orange: 'var(--color-orange)',
+      'orange-light': 'var(--color-orange-light)',
+      yellow: 'var(--color-yellow)',
+      'yellow-light': 'var(--color-yellow-light)',
+      green: 'var(--color-green)',
+      'green-light': 'var(--color-green-light)',
+      'green-light-30': 'var(--color-green-light-30)',
+
+      primary: 'var(--q-primary)',
+      'on-primary': 'var(--on-primary-color)',
+      'on-primary-alt': 'var(--on-primary-alt-color)',
+      'primary-effect': 'var(--primary-effect-color)',
+
+      secondary: 'var(--q-secondary)',
+      'on-secondary': 'var(--on-secondary-color)',
+      'on-secondary-alt': 'var(--on-secondary-alt-color)',
+      'secondary-effect': 'var(--secondary-effect-color)',
+
+      accent: 'var(--q-accent)',
+      'on-accent': 'var(--on-accent-color)',
+      'on-accent-alt': 'var(--on-accent-alt-color)',
+      'accent-effect': 'var(--accent-effect-color)',
+
+      surface: 'var(--surface-color)',
+      'on-surface': 'var(--on-surface-color)',
+      'surface-effect': 'var(--surface-effect-color)',
+      'surface-border': 'var(--surface-border-color)',
+
+      // Color aliases
+      'border-default': 'var(--color-border)',
+    },
+    // Make sure that these match the Quasar breakpoints
+    screens: {
+      sm: '600px',
+      md: '1024px',
+      lg: '1440px',
+      xl: '1920px',
+    },
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+
+  // These are colors that can be used by Quasar, but are generated at runtime. These must always be included.
+  // For example color="blue-light" will generate "bg-blue-light" so it has to be included in this list.
+  safelist: [
+    'bg-grey-light',
+    'bg-grey-lighter',
+    'bg-grey-dark',
+    'bg-grey-darker',
+    'bg-grey-darkest',
+
+    'text-grey-light',
+    'text-grey-lighter',
+    'text-grey-dark',
+    'text-grey-darker',
+    'text-grey-darkest',
+
+    'bg-blue-light',
+    'bg-purple-light',
+    'bg-red-light',
+    'bg-orange-light',
+    'bg-yellow-light',
+    'bg-green-light',
+    'bg-green-light-30',
+
+    'text-blue-light',
+    'text-purple-light',
+    'text-red-light',
+    'text-orange-light',
+    'text-yellow-light',
+    'text-green-light',
+
+    'bg-on-primary',
+    'bg-on-primary-alt',
+    'bg-primary-effect',
+    'bg-on-secondary',
+    'bg-on-secondary-alt',
+    'bg-secondary-effect',
+    'bg-on-accent',
+    'bg-on-accent-alt',
+    'bg-accent-effect',
+    'bg-on-surface',
+    'bg-surface-effect',
+
+    'text-on-primary',
+    'text-on-primary-alt',
+    'text-primary-effect',
+    'text-on-secondary',
+    'text-on-secondary-alt',
+    'text-secondary-effect',
+    'text-on-accent',
+    'text-on-accent-alt',
+    'text-accent-effect',
+    'text-on-surface',
+    'text-surface-effect',
+  ],
+
+  // These are already included in Quasar so we don't have to create them again
+  blocklist: [
+    'bg-primary',
+    'bg-secondary',
+    'bg-accent',
+    'bg-grey',
+    'bg-blue',
+    'bg-purple',
+    'bg-red',
+    'bg-orange',
+    'bg-yellow',
+    'bg-green',
+
+    'text-primary',
+    'text-secondary',
+    'text-accent',
+    'text-grey',
+    'text-blue',
+    'text-purple',
+    'text-red',
+    'text-orange',
+    'text-yellow',
+    'text-green',
+  ],
+}

package/i18n.ts

@@ -0,0 +1,11 @@
+import en from './src/i18n/en'
+import de from './src/i18n/de'
+import fr from './src/i18n/fr'
+import es from './src/i18n/es'
+
+export {
+  en,
+  de,
+  fr,
+  es,
+}

package/index.ts

@@ -0,0 +1,25 @@
+import { useInriStore } from './src/stores/inriStore'
+import { useInterfaceLanguageStore } from './src/stores/interfaceLanguageStore'
+import useInriApp from './src/init/useInriApp'
+import { initInriFramework } from './src/init/initInriFramework'
+import dialog from './src/plugins/dialog'
+import notify from './src/plugins/notify'
+import useSelectable from './src/composables/useSelectable'
+import { useDialog } from './src/composables/useDialog'
+import { useDoubleClickListener } from './src/composables/useDoubleClickListener'
+import { useDirtyCheck } from './src/composables/useDirtyCheck'
+import { useTruncateChips } from './src/composables/useTruncateChips'
+
+export {
+  useInriStore,
+  useInterfaceLanguageStore,
+  useInriApp,
+  initInriFramework,
+  dialog,
+  notify,
+  useSelectable,
+  useDialog,
+  useDoubleClickListener,
+  useDirtyCheck,
+  useTruncateChips,
+}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@inriver/inri",
+  "version": "1.0.0",
+  "peerDependencies": {
+    "quasar": "^2.7.4",
+    "vue": "^3.2.12",
+    "vue-i18n": "^9.1.7",
+    "vue-router": "^4.0.12"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^4.18.0",
+    "@typescript-eslint/parser": "^4.18.0",
+    "@vue/cli-plugin-babel": "~4.5.15",
+    "@vue/cli-plugin-eslint": "~4.5.15",
+    "@vue/cli-plugin-router": "~4.5.15",
+    "@vue/cli-plugin-typescript": "~4.5.15",
+    "@vue/cli-service": "~4.5.15",
+    "@vue/compiler-sfc": "^3.2.12",
+    "@vue/eslint-config-standard": "^5.1.2",
+    "@vue/eslint-config-typescript": "^7.0.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-standard": "^4.0.0",
+    "eslint-plugin-vue": "^7.0.0",
+    "lint-staged": "^9.5.0",
+    "sass": "1.32.12",
+    "sass-loader": "^10.1.0",
+    "stylelint": "^13.13.1",
+    "stylelint-config-standard": "^22.0.0",
+    "stylelint-webpack-plugin": "^3.0.1",
+    "typescript": "~4.1.5",
+    "vue-cli-plugin-quasar": "~4.0.4"
+  }
+}

package/src/components/CAutoBreadcrumbs.vue

@@ -0,0 +1,72 @@
+<template>
+  <q-breadcrumbs
+    separator=">"
+    separator-color="grey"
+    active-color="grey-darkest"
+  >
+    <q-breadcrumbs-el
+      v-for="breadcrumb in breadcrumbs"
+      :key="breadcrumb.to.name"
+      :to="breadcrumb.to"
+      :label="breadcrumb.text"
+    />
+    <q-breadcrumbs-el
+      v-if="currentBreadcrumb"
+      :label="currentBreadcrumb"
+      class="font-bold"
+    />
+  </q-breadcrumbs>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { getRouteTitle } from '../utils/routeUtils'
+import { useRouter, RouteRecordNormalized, RouteLocationNormalizedLoaded, RouteRecordName } from 'vue-router'
+
+interface Breadcrumb {
+  text: string,
+  to: {
+    name?: RouteRecordName
+  },
+  exact: boolean
+}
+
+const breadcrumbs = ref<Breadcrumb[]>([])
+const parentRoutes = ref<RouteRecordNormalized[]>([])
+const currentBreadcrumb = ref<string>()
+const router = useRouter()
+
+onMounted(() => {
+  generateBreadcrumbs(router.currentRoute.value)
+})
+
+function addParentRoutes (routeName: string) {
+  const parentRoute = router.getRoutes().find(route => route.name === routeName)
+
+  if (parentRoute) {
+    parentRoutes.value.push(parentRoute)
+
+    if (parentRoute.meta.parent) {
+      addParentRoutes(parentRoute.meta.parent as string)
+    }
+  }
+}
+
+function generateBreadcrumbs (to: RouteLocationNormalizedLoaded) {
+  if (to.meta.parent) {
+    addParentRoutes(to.meta.parent as string)
+  }
+
+  if (parentRoutes.value.length) {
+    breadcrumbs.value = parentRoutes.value.reverse().map(foundRoute => {
+      return {
+        text: getRouteTitle(foundRoute, to),
+        to: { name: foundRoute.name },
+        exact: true,
+      }
+    })
+  }
+
+  currentBreadcrumb.value = getRouteTitle(to, to)
+}
+</script>

package/src/components/CBtn.vue

@@ -0,0 +1,98 @@
+<template>
+  <q-btn
+    v-bind="$inri.button"
+    :color="color"
+    :label="label"
+    :disable="disable"
+    class="group overflow-hidden"
+  >
+    <template #loading>
+      <c-spinner
+        size="28"
+        :parent-color="color"
+      />
+    </template>
+
+    <c-slide-effect
+      v-if="!disable"
+      :parent-color="color"
+      :slide-effect-color="slideEffectColor"
+      slide-right
+      class="-z-1"
+    />
+
+    <slot />
+
+    <c-tooltip v-if="tooltip">
+      {{ tooltip }}
+    </c-tooltip>
+  </q-btn>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  label: {
+    type: String,
+    default: undefined,
+  },
+  color: {
+    type: String,
+    default: 'primary',
+  },
+  slideEffectColor: {
+    type: String,
+    default: undefined,
+  },
+  disable: Boolean,
+  tooltip: {
+    type: String,
+    default: undefined,
+  },
+})
+</script>
+
+<style lang="scss">
+.c-btn {
+  height: 40px;
+  font-weight: 600;
+  padding: 4px 56px !important;
+
+  &.disabled {
+    opacity: 0.3 !important;
+  }
+
+  .q-icon {
+    font-size: 1rem;
+  }
+
+  .q-focus-helper {
+    display: none;
+  }
+
+  &.bg-primary {
+    color: var(--on-primary-color);
+  }
+
+  &.bg-secondary {
+    color: var(--on-secondary-color);
+  }
+
+  &.bg-accent {
+    color: var(--on-accent-color);
+  }
+
+  &.bg-surface {
+    color: var(--on-surface-color);
+    border: 1px solid var(--surface-border-color);
+  }
+
+  // Special css for specific colors
+  &.bg-white {
+    border: 1px solid var(--color-grey);
+  }
+
+  &.bg-black {
+    color: white;
+  }
+}
+</style>

package/src/components/CColorPicker.vue

@@ -0,0 +1,55 @@
+<template>
+  <label
+    tabindex="0"
+    class="flex items-center cursor-pointer h-10 group max-w-max"
+    :class="{ 'cursor-not-allowed text-grey-dark': disabled }"
+  >
+    <div
+      class="rounded-full h-[30px] w-[30px] mr-2"
+      :class="{ 'border': border }"
+      :style="{ background: modelValue }"
+    />
+    <span>{{ (!staticLabel ? modelValue?.toLowerCase() : false) || label || 'not selected' }}</span>
+    <q-icon
+      v-if="clearable && modelValue && !disabled"
+      name="mdi-close"
+      color="grey-darker"
+      class="cursor-pointer ml-2 opacity-0 group-hover:opacity-100"
+      size="18px"
+      @click.stop="$emit('update:model-value', null)"
+    />
+    <q-menu v-if="!disabled">
+      <q-color
+        :model-value="modelValue"
+        no-header-tabs
+        no-footer
+        style="width: 290px;"
+        @update:model-value="$emit('update:model-value', $event)"
+      />
+    </q-menu>
+    <slot />
+  </label>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+defineEmits(['update:model-value'])
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: undefined,
+  },
+  label: {
+    type: String,
+    default: undefined,
+  },
+  staticLabel: Boolean,
+  clearable: Boolean,
+  disabled: Boolean,
+})
+
+// Show a border if no value or fully white
+const border = computed(() => (!props.modelValue || props.modelValue.toLowerCase() === '#ffffff') ? 'border border-grey-dark' : '')
+</script>

package/src/components/CContextMenu.vue

@@ -0,0 +1,29 @@
+<template>
+  <c-icon-btn
+    data-id="context-menu-btn"
+    icon="mdi-dots-vertical"
+    :tooltip-right="tooltip || $t('inri.common.more')"
+    @click.prevent
+  >
+    <q-menu>
+      <q-list class="menu-list pb-0">
+        <slot />
+      </q-list>
+    </q-menu>
+  </c-icon-btn>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  tooltip: {
+    type: String,
+    default: undefined,
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.menu-list {
+  min-width: 146px;
+}
+</style>

package/src/components/CDatePicker.vue

@@ -0,0 +1,51 @@
+<template>
+  <q-input
+    v-bind="dense ? $inri.inputDense : $inri.input"
+    :model-value="modelValue"
+    :label="label"
+    :stack-label="datePickerIsOpen"
+    mask="date"
+    :rules="modelValue ? ['date'] : undefined"
+    @update:model-value="$emit('update:model-value', $event)"
+  >
+    <template #append>
+      <q-icon
+        ref="icon"
+        name="mdi-calendar-outline"
+        class="cursor-pointer"
+        color="grey-dark"
+        size="19px"
+        @click="datePickerIsOpen = true"
+      />
+    </template>
+    <q-menu
+      v-model="datePickerIsOpen"
+      no-parent-event
+    >
+      <q-date
+        :model-value="modelValue"
+        @update:model-value="$emit('update:model-value', $event)"
+      />
+    </q-menu>
+  </q-input>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineEmits(['update:model-value'])
+
+defineProps({
+  modelValue: {
+    type: String,
+    default: undefined,
+  },
+  label: {
+    type: String,
+    default: undefined,
+  },
+  dense: Boolean,
+})
+
+const datePickerIsOpen = ref(false)
+</script>

package/src/components/CDeleteTileBtn.vue

@@ -0,0 +1,52 @@
+<template>
+  <c-tile-btn
+    data-id="delete-btn"
+    v-bind="computedTooltip"
+    icon="mdi-delete-outline"
+    slide-effect-color="red-light"
+    icon-size="20"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const props = defineProps({
+  tooltip: {
+    type: String,
+    default: undefined,
+  },
+  tooltipLeft: {
+    type: String,
+    default: undefined,
+  },
+  tooltipRight: {
+    type: String,
+    default: undefined,
+  },
+})
+
+const computedTooltip = computed(() => {
+  if (props.tooltip) {
+    return {
+      tooltip: props.tooltip,
+    }
+  } else if (props.tooltipRight) {
+    return {
+      tooltipRight: props.tooltipRight,
+    }
+  } else if (props.tooltipLeft) {
+    return {
+      tooltipLeft: props.tooltipLeft,
+    }
+  }
+
+  // Default is just "delete" to the left
+  return {
+    tooltipLeft: t('inri.common.delete'),
+  }
+})
+</script>