@inriver/inri 1.0.0

package/src/components/CGrid.vue

@@ -0,0 +1,101 @@
+<template>
+  <div
+    class="grid"
+    :style="{
+      columnGap: `${colGap}px`,
+      rowGap: `${rowGap}px`,
+      gridTemplateColumns: computedColumns,
+      gridTemplateRows: computedRows,
+    }"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useQuasar } from 'quasar'
+
+const $q = useQuasar()
+
+const props = defineProps({
+  cols: {
+    type: [String, Number, Object],
+    default: undefined,
+  },
+  rows: {
+    type: [String, Number, Object],
+    default: undefined,
+  },
+  colGap: {
+    type: [Number, String],
+    default: 24,
+  },
+  rowGap: {
+    type: [Number, String],
+    default: 24,
+  },
+})
+
+// Computed
+const computedColumns = computed(() => {
+  if (typeof props.cols === 'object') {
+    if ($q.screen.xl && props.cols.xl) {
+      return generateColumnsTemplate(props.cols.xl)
+    } if ($q.screen.gt.md && props.cols.lg) {
+      return generateColumnsTemplate(props.cols.lg)
+    } else if ($q.screen.gt.sm && props.cols.md) {
+      return generateColumnsTemplate(props.cols.md)
+    } else if ($q.screen.gt.xs && props.cols.sm) {
+      return generateColumnsTemplate(props.cols.sm)
+    } else if (props.cols.xs) {
+      return generateColumnsTemplate(props.cols.xs)
+    }
+
+    return null
+  }
+
+  return generateColumnsTemplate(props.cols)
+})
+
+const computedRows = computed(() => {
+  if (typeof props.rows === 'object') {
+    if ($q.screen.xl && props.rows.xl) {
+      return generateRowsTemplate(props.rows.xl)
+    } if ($q.screen.gt.md && props.rows.lg) {
+      return generateRowsTemplate(props.rows.lg)
+    } else if ($q.screen.gt.sm && props.rows.md) {
+      return generateRowsTemplate(props.rows.md)
+    } else if ($q.screen.gt.xs && props.rows.sm) {
+      return generateRowsTemplate(props.rows.sm)
+    } else if (props.rows.xs) {
+      return generateRowsTemplate(props.rows.xs)
+    }
+
+    return null
+  }
+
+  return generateRowsTemplate(props.rows)
+})
+
+// Methods
+function isNumeric (num) {
+  return !isNaN(num)
+}
+
+function generateColumnsTemplate (template) {
+  if (isNumeric(template)) {
+    return `repeat(${template}, minmax(0, 1fr))`
+  }
+
+  return template
+}
+
+function generateRowsTemplate (template) {
+  if (isNumeric(template)) {
+    return `repeat(${template}, minmax(0, 1fr))`
+  }
+
+  return template
+}
+</script>

package/src/components/CHeader.vue

@@ -0,0 +1,10 @@
+<template>
+  <q-header
+    class="bg-surface"
+    data-id="site-header"
+  >
+    <q-toolbar class="p-0 h-15">
+      <slot />
+    </q-toolbar>
+  </q-header>
+</template>

package/src/components/CHeaderLinks.vue

@@ -0,0 +1,61 @@
+<template>
+  <div
+    v-if="showExtendedMenu"
+    class="header-links gt-sm"
+  >
+    <c-header-menu-link
+      v-for="link in links"
+      :key="link.href"
+      :text="link.text"
+      :href="link.href"
+      :is-active="link.isActive"
+    />
+  </div>
+
+  <!--  Toggle menu items with button on small devices-->
+  <c-tile-btn
+    icon="mdi-menu"
+    :class="showExtendedMenu ? 'lt-md' : ''"
+  >
+    <q-menu>
+      <q-list>
+        <c-menu-item
+          v-for="link in links"
+          :key="link.href"
+          :text="link.text"
+          :href="link.href"
+        />
+      </q-list>
+    </q-menu>
+  </c-tile-btn>
+</template>
+
+<script setup lang="ts">
+import { computed, withDefaults } from 'vue'
+
+interface Link {
+  text: string,
+  href: string,
+  isActive?: boolean,
+}
+
+interface Props {
+  maxVisible?: number,
+  links: Link[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  maxVisible: 12,
+})
+
+const showExtendedMenu = computed(() => props.maxVisible >= props.links.length)
+</script>
+
+<style scoped>
+.header-links {
+  margin-right: 32px;
+  height: 100%;
+  display: flex;
+  overflow: hidden;
+}
+</style>

package/src/components/CHeaderMenuLink.vue

@@ -0,0 +1,51 @@
+<template>
+  <a
+    class="link"
+    :class="{ 'is-active': isActive }"
+    :href="href"
+  >
+    <span class="truncate">
+      {{ text }}
+    </span>
+  </a>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  text: string,
+  href: string,
+  isActive?: boolean
+}
+
+defineProps<Props>()
+</script>
+
+<style scoped>
+.link {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  font-weight: 500;
+  padding: 0 20px 4px;
+  position: relative;
+  min-width: 0;
+}
+
+.link:hover {
+  text-decoration: underline;
+}
+
+.is-active {
+  font-weight: 600;
+}
+
+.is-active::before {
+  content: '';
+  width: 8px;
+  height: 8px;
+  background: var(--q-accent);
+  position: absolute;
+  top: calc(50% - 4px);
+  left: 8px;
+}
+</style>

package/src/components/CHeaderSearch.vue

@@ -0,0 +1,142 @@
+<template>
+  <c-tile-btn
+    icon="inri-search"
+    @click="toggleSearch"
+  />
+  <div class="bg-grey-lighter h-full flex content-center ">
+    <transition name="search-transition">
+      <div
+        v-if="showSearch"
+        class="pr-5"
+      >
+        <q-select
+          ref="selectRef"
+          v-model="selectedVal"
+          v-bind="$inri.inputDense"
+          class="w-74"
+          autofocus
+          use-input
+          hide-selected
+          hide-dropdown-icon
+          :options="options"
+          :loading="isLoading"
+          @filter="filter"
+          @blur="clearSearch"
+          @popup-show="onOpen"
+          @update:model-value="selectItem"
+        >
+          <template #append>
+            <q-icon
+              v-if="modelValue.length && !isLoading"
+              name="mdi-close"
+              color="grey-darker"
+              class="cursor-pointer"
+              size="18px"
+              @click.stop="clearSearch"
+            />
+            <q-icon
+              v-else-if="!isLoading"
+              name="inri-search"
+              color="grey-dark"
+              size="18px"
+            />
+          </template>
+
+          <template
+            v-if="modelValue.length && !isLoading"
+            #no-option
+          >
+            <q-item>
+              <q-item-section>
+                No results
+              </q-item-section>
+            </q-item>
+          </template>
+
+          <template #option="{ itemProps, opt }">
+            <q-item
+              v-bind="itemProps"
+              :to="opt"
+            >
+              <q-item-section>
+                {{ opt.meta.title }}
+              </q-item-section>
+            </q-item>
+          </template>
+        </q-select>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+
+const emits = defineEmits(['update:modelValue'])
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: '',
+  },
+  options: {
+    type: Array,
+    default: undefined,
+  },
+  isLoading: Boolean,
+})
+
+const showSearch = ref(false)
+const selectedVal = ref(null)
+const selectRef = ref()
+const router = useRouter()
+
+watch(() => props.options, () => {
+  selectRef.value.refresh()
+})
+
+function onOpen () {
+  // Set first item as selected
+  selectRef.value.setOptionIndex(-1)
+  selectRef.value.moveOptionSelection(1, true)
+}
+
+function toggleSearch () {
+  showSearch.value = !showSearch.value
+}
+
+function clearSearch () {
+  selectRef.value.updateInputValue('', true, true)
+  emits('update:modelValue', '')
+}
+
+function filter (val, update) {
+  update(
+    () => {
+      emits('update:modelValue', val)
+    },
+  )
+}
+
+function selectItem () {
+  if (selectedVal.value) {
+    clearSearch()
+    showSearch.value = false
+    router.push(selectedVal.value)
+  }
+}
+</script>
+
+<style>
+.search-transition-enter-active,
+.search-transition-leave-active {
+  margin-right: 0;
+  transition: all 0.2s ease-in-out;
+}
+
+.search-transition-enter-from,
+.search-transition-leave-to {
+  margin-right: -320px;
+}
+</style>

package/src/components/CIconBtn.vue

@@ -0,0 +1,70 @@
+<template>
+  <q-btn
+    class="c-icon-btn"
+    flat
+    round
+    :color="color"
+    :to="to"
+    :icon="icon"
+    :aria-label="tooltip || tooltipLeft || tooltipRight"
+  >
+    <c-tooltip v-if="tooltip">
+      {{ tooltip }}
+    </c-tooltip>
+
+    <c-tooltip
+      v-if="tooltipLeft"
+      left
+    >
+      {{ tooltipLeft }}
+    </c-tooltip>
+
+    <c-tooltip
+      v-if="tooltipRight"
+      right
+    >
+      {{ tooltipRight }}
+    </c-tooltip>
+    <slot />
+  </q-btn>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  color: {
+    type: String,
+    default: undefined,
+  },
+  to: {
+    type: [String, Object],
+    default: undefined,
+  },
+  icon: {
+    type: String,
+    default: undefined,
+  },
+  tooltip: {
+    type: String,
+    default: undefined,
+  },
+  tooltipLeft: {
+    type: String,
+    default: undefined,
+  },
+  tooltipRight: {
+    type: String,
+    default: undefined,
+  },
+})
+</script>
+
+<style scoped lang="scss">
+$size: 32px;
+
+.c-icon-btn {
+  height: $size;
+  width: $size;
+  min-height: $size;
+  min-width: $size;
+}
+</style>

package/src/components/CMenuItem.vue

@@ -0,0 +1,66 @@
+<template>
+  <q-item
+    v-close-popup
+    :clickable="!disable && !isTitle"
+    :disable="disable"
+    :to="to"
+    :class="{
+      'is-delete': isDelete,
+      'font-weight-bold': isTitle
+    }"
+    @click="triggerClick"
+  >
+    <q-item-section
+      v-if="icon && icon.length"
+      avatar
+      class="min-w-8"
+    >
+      <q-icon
+        class="inherit-text"
+        :name="icon"
+      />
+    </q-item-section>
+    <q-item-section>
+      <template v-if="text">
+        {{ text }}
+      </template>
+      <slot v-else />
+    </q-item-section>
+  </q-item>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  icon: {
+    type: String,
+    default: undefined,
+  },
+  text: {
+    type: String,
+    default: undefined,
+  },
+  to: {
+    type: String,
+    default: undefined,
+  },
+  isDelete: Boolean,
+  isTitle: Boolean,
+  disable: Boolean,
+})
+
+const emit = defineEmits(['click'])
+
+function triggerClick (e) {
+  emit('click', e)
+}
+</script>
+
+<style scoped lang="scss">
+.is-delete:hover {
+  background: var(--color-red);
+
+  > * {
+    color: white;
+  }
+}
+</style>

package/src/components/CPageContainer.vue

@@ -0,0 +1,11 @@
+<template>
+  <q-page-container>
+    <div class="relative">
+      <q-page class="overflow-hidden">
+        <router-view v-slot="{ Component }">
+          <component :is="Component" />
+        </router-view>
+      </q-page>
+    </div>
+  </q-page-container>
+</template>

package/src/components/CPageError.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="h-full flex items-center justify-center">
+    <h1 class="text-primary text-center mb-20">
+      {{ error.title }}
+      <br>
+      {{ error.msg }}
+      <br>
+      <span
+        v-if="error.isAxiosError"
+        class="text-grey-dark text-body1"
+      >
+        {{ $t('inri.error.error_code', { code: error.status }) }}
+      </span>
+    </h1>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { BaseError } from '../plugins/errors/Errors'
+
+defineProps <{
+  error: BaseError
+}>()
+</script>

package/src/components/CPageSpinner.vue

@@ -0,0 +1,18 @@
+<template>
+  <q-inner-loading
+    :showing="showing || inriStore.state.showPageSpinner"
+    class="z-max"
+  >
+    <c-spinner />
+  </q-inner-loading>
+</template>
+
+<script setup lang="ts">
+import { useInriStore } from '../stores/inriStore'
+
+defineProps({
+  showing: Boolean,
+})
+
+const inriStore = useInriStore()
+</script>

package/src/components/CSearch.vue

@@ -0,0 +1,45 @@
+<template>
+  <q-input
+    v-bind="dense ? $inri.inputDense : $inri.input"
+    :model-value="modelValue"
+    :label="label"
+    :placeholder="placeholder"
+    @update:model-value="$emit('update:model-value', $event)"
+  >
+    <template #append>
+      <q-icon
+        v-if="modelValue?.length"
+        name="mdi-close"
+        color="grey-darker"
+        class="cursor-pointer"
+        size="18px"
+        @click.stop="$emit('update:model-value', '')"
+      />
+      <q-icon
+        v-else
+        name="inri-search"
+        color="grey-dark"
+        size="18px"
+      />
+    </template>
+  </q-input>
+</template>
+
+<script setup lang="ts">
+import type { QInputProps } from 'quasar'
+
+defineEmits(['update:model-value'])
+
+interface Props extends QInputProps {
+  modelValue: string,
+  label: string,
+  placeholder?: string,
+  dense?: boolean,
+}
+
+withDefaults(defineProps<Props>(), {
+  modelValue: undefined,
+  label: undefined,
+  placeholder: undefined,
+})
+</script>

package/src/components/CSection.vue

@@ -0,0 +1,29 @@
+<template>
+  <section
+    class="c-section"
+    :class="{
+      'overflow-y-overlay': scroll || main,
+      'flex-1': flex || main,
+      'border-t': borderT,
+      'border-b': borderB,
+    }"
+  >
+    <slot />
+  </section>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  scroll: Boolean,
+  flex: Boolean,
+  main: Boolean,
+  borderT: Boolean,
+  borderB: Boolean,
+})
+</script>
+
+<style>
+.c-section {
+  @apply py-7 px-6;
+}
+</style>

package/src/components/CSectionTitle.vue

@@ -0,0 +1,8 @@
+<template>
+  <div
+    class="text-h3 mb-4"
+    data-id="section-title"
+  >
+    <slot />
+  </div>
+</template>