@inriver/inri 1.0.0

package/src/components/CDialog.vue

@@ -0,0 +1,253 @@
+<template>
+  <q-dialog
+    data-id="dialog"
+    class="c-dialog"
+    :model-value="modelValue"
+    :position="position"
+    transition-show="fade"
+    transition-hide="fade"
+    no-refocus
+    @update:model-value="cancel"
+    @keydown.ctrl.s.prevent="confirm"
+  >
+    <c-dirty-check
+      :is-dirty="isDirty"
+      :is-dialog-open="modelValue"
+    />
+
+    <q-card
+      class="dialog-card"
+      :style="{ maxWidth: maxWidth ? maxWidth : false }"
+    >
+      <q-form
+        ref="dialogForm"
+        greedy
+        class="flex flex-col flex-nowrap max-h-full"
+        @submit.prevent=""
+      >
+        <q-card-section class="px-5 pt-6 pb-4">
+          <slot name="header">
+            <h3 data-id="dialog-title">
+              {{ title }}
+            </h3>
+          </slot>
+          <div
+            v-if="text"
+            class="mt-2px"
+          >
+            {{ text }}
+          </div>
+
+          <div class="absolute right-0 top-0">
+            <slot name="corner-buttons" />
+            <c-dialog-close-btn @click="cancel" />
+          </div>
+        </q-card-section>
+
+        <q-card-section
+          v-if="$slots.default"
+          class="px-5 pb-4 overflow-y-overlay flex-1"
+          :class="contentClass"
+        >
+          <slot />
+        </q-card-section>
+
+        <div class="dialog-card-action-buttons px-5 pt-2 pb-10">
+          <c-btn
+            v-if="!hideConfirmButton"
+            data-id="dialog-confirm-button"
+            :label="confirmButtonText || $t('inri.common.confirm')"
+            :disabled="confirmIsDisabled"
+            @click="confirm"
+          >
+            <q-tooltip v-if="confirmIsDisabled">
+              {{ disabledConfirmTooltip || $t('inri.dialog.confirm_tooltip_invalid_fields') }}
+            </q-tooltip>
+          </c-btn>
+          <c-btn
+            v-if="!hideCancelButton"
+            data-id="dialog-cancel-button"
+            :label="cancelButtonText || $t('inri.common.cancel')"
+            color="surface"
+            @click="cancel"
+          />
+        </div>
+      </q-form>
+
+      <q-inner-loading :showing="isLoading">
+        <c-spinner />
+      </q-inner-loading>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed, ref } from 'vue'
+import notify from '../plugins/notify'
+import dialog from '../plugins/dialog'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const props = defineProps({
+  modelValue: Boolean,
+  title: {
+    type: String,
+    default: '',
+  },
+  isDirty: {
+    type: Boolean,
+    default: undefined,
+  },
+  disableConfirm: Boolean,
+  disabledConfirmTooltip: {
+    type: String,
+    default: undefined,
+  },
+  confirmButtonText: {
+    type: String,
+    default: undefined,
+  },
+  cancelButtonText: {
+    type: String,
+    default: undefined,
+  },
+  hideConfirmButton: Boolean,
+  hideCancelButton: Boolean,
+  ignoreDirtyCheckOnConfirm: Boolean,
+  isLoading: Boolean,
+  confirmCancelTitle: {
+    type: String,
+    default: undefined,
+  },
+  confirmCancelMessage: {
+    type: String,
+    default: undefined,
+  },
+  maxWidth: {
+    type: [String, Number],
+    default: '100%',
+  },
+  contentClass: {
+    type: String,
+    default: '',
+  },
+  text: {
+    type: String,
+    default: undefined,
+  },
+  position: {
+    type: String as PropType<'top' | 'standard' | 'right' | 'bottom' | 'left' | undefined>,
+    default: 'top',
+  },
+})
+
+const emit = defineEmits([
+  'confirm',
+  'cancel',
+])
+
+// State etc.
+const confirmIsDisabled = computed(() => {
+  return (
+    props.disableConfirm ||
+    props.isLoading ||
+    (!props.ignoreDirtyCheckOnConfirm && props.isDirty === false)
+  )
+})
+const dialogForm = ref()
+
+// Functions
+function cancel () {
+  if (props.isDirty) {
+    dialog.confirm({
+      title: props.confirmCancelTitle || t('inri.dialog.unsaved_changes_title'),
+      text: props.confirmCancelMessage || t('inri.dialog.unsaved_changes_message'),
+    }).onOk(() => {
+      emit('cancel')
+    })
+  } else {
+    emit('cancel')
+  }
+}
+
+function confirm () {
+  if (!props.disableConfirm) {
+    dialogForm.value.validate().then(success => {
+      if (success) {
+        emit('confirm')
+      }
+    })
+  } else {
+    notify.error(props.disabledConfirmTooltip || t('inri.dialog.confirm_tooltip_invalid_fields'))
+  }
+}
+
+// So that we can trigger confirm/cancel from a component ref
+defineExpose({
+  confirm,
+  cancel,
+})
+</script>
+
+<style lang="scss">
+// This css is also shared by the programmatic dialogs
+.c-dialog {
+  .q-dialog__backdrop {
+    background: var(--dialog-backdrop-color);
+  }
+
+  .q-dialog__inner > div {
+    border-radius: 0;
+  }
+
+  .dialog-card {
+    display: flex;
+    max-height: 100vh;
+    flex-direction: column;
+    width: 100%;
+    box-shadow: var(--dialog-shadow);
+  }
+
+  .dialog-card-action-buttons {
+    .c-btn {
+      width: 100%;
+    }
+
+    .c-btn + .c-btn {
+      margin-top: 16px;
+    }
+  }
+}
+
+// 'sm' displays
+@media (min-width: 640px) {
+  .c-dialog {
+    .dialog-card-action-buttons {
+      .c-btn {
+        width: auto;
+      }
+
+      .c-btn + .c-btn {
+        margin-top: 0;
+        margin-left: 10px;
+      }
+    }
+  }
+}
+
+// 'md' displays
+@media (min-width: 1024px) {
+  .c-dialog {
+    // position="top" (default) should be offset with 60px from the top
+    .q-dialog__inner.fixed-top {
+      padding: 0 60px;
+
+      .dialog-card {
+        top: 61px;
+        max-height: calc(100vh - 120px);
+      }
+    }
+  }
+}
+</style>

package/src/components/CDialogCloseBtn.vue

@@ -0,0 +1,9 @@
+<template>
+  <c-tile-btn
+    icon="mdi-close"
+    data-id="dialog-close-button"
+    :tooltip="$t('inri.common.close')"
+    small
+    class="absolute right-0 top-0"
+  />
+</template>

package/src/components/CDirtyCheck.vue

@@ -0,0 +1,68 @@
+<!-- eslint-disable vue/valid-template-root -->
+<template />
+
+<script setup lang="ts">
+import { watch, onUnmounted, ref } from 'vue'
+import { useRouter, onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
+import { useInriStore } from '../stores/inriStore'
+import dialog from '../plugins/dialog'
+
+const props = defineProps({
+  isDirty: {
+    type: Boolean,
+    default: undefined,
+  },
+  isDialogOpen: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const privateId = `dirty-check_${Math.random()}`
+const dirtyDialogIsOpen = ref(false)
+const willRedirect = ref(false)
+const router = useRouter()
+const inriStore = useInriStore()
+
+watch(() => props.isDirty, value => {
+  inriStore.toggleDirtyComponent(privateId, value)
+}, { immediate: true })
+
+onUnmounted(() => {
+  inriStore.toggleDirtyComponent(privateId, false)
+})
+
+onBeforeRouteUpdate((to) => {
+  return handleRouteChange(to)
+})
+
+onBeforeRouteLeave((to) => {
+  return handleRouteChange(to)
+})
+
+function handleRouteChange (to) {
+  // If a dialog is open then just do nothing (prevent navigation)
+  if (props.isDialogOpen) {
+    return false
+  }
+
+  if (props.isDirty && !willRedirect.value) {
+    if (!dirtyDialogIsOpen.value) {
+      dirtyDialogIsOpen.value = true
+      dialog.confirm({
+        title: 'unsaved data',
+        text: 'are you sure you want to leave the page without saving your data?',
+        confirmButtonText: 'yes',
+      }).onOk(() => {
+        willRedirect.value = true
+        router.push(to)
+      }).onDismiss(() => {
+        dirtyDialogIsOpen.value = false
+      })
+      return false
+    } else {
+      return false
+    }
+  }
+}
+</script>

package/src/components/CDrawer.vue

@@ -0,0 +1,44 @@
+<template>
+  <q-drawer
+    :data-id="left ? 'left-drawer' : 'right-drawer'"
+    :model-value="isOpen"
+    :side="left ? 'left' : 'right'"
+    bordered
+    :width="340"
+    class="overflow-y-overlay"
+    :overlay="!left"
+    :breakpoint="600"
+    @update:model-value="toggle"
+  >
+    <slot />
+  </q-drawer>
+</template>
+
+<script setup lang="ts">
+import { useInriStore } from '../stores/inriStore'
+import { computed } from 'vue'
+
+const props = defineProps({
+  left: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const inriStore = useInriStore()
+const isOpen = computed(() => props.left ? inriStore.state.leftDrawerIsOpen : inriStore.state.rightDrawerIsOpen)
+
+function toggle () {
+  if (props.left) {
+    inriStore.toggleLeftDrawer()
+  } else {
+    inriStore.toggleRightDrawer()
+  }
+}
+</script>
+
+<style>
+  .q-drawer--right {
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
+  }
+</style>

package/src/components/CDrawerButton.vue

@@ -0,0 +1,91 @@
+<template>
+  <q-btn
+    ref="drawerButton"
+    data-id="drawer-btn"
+    class="drawer-button group"
+    :class="{
+      'is-left': left,
+      'w-60px sm:w-340px': isOpen,
+      'w-60px': !isOpen
+    }"
+    :color="color"
+    :text-color="textColor"
+    unelevated
+    :aria-label="$t('inri.toggle_drawer')"
+    @click="toggle"
+  >
+    <c-slide-effect
+      :parent-color="color"
+      slide-right
+      class="-z-1"
+    />
+
+    <q-icon
+      :name="!left ? 'mdi-chevron-left' : 'mdi-chevron-right'"
+      :class="isOpen ? 'rotate-180' : 'rotate-360'"
+    />
+  </q-btn>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useInriStore } from '../stores/inriStore'
+
+const props = defineProps({
+  left: {
+    type: Boolean,
+    default: false,
+  },
+  color: {
+    type: String,
+    default: 'primary',
+  },
+  textColor: {
+    type: String,
+    default: 'on-primary',
+  },
+})
+
+const drawerButton = ref()
+const inriStore = useInriStore()
+const isOpen = computed(() => props.left ? inriStore.state.leftDrawerIsOpen : inriStore.state.rightDrawerIsOpen)
+
+function toggle () {
+  if (props.left) {
+    inriStore.toggleLeftDrawer()
+  } else {
+    inriStore.toggleRightDrawer()
+  }
+
+  // Remove focus from button on click
+  drawerButton.value.$el.blur()
+}
+</script>
+
+<style lang="scss">
+.drawer-button {
+  height: 60px;
+  border-radius: 0;
+  transition: width 0.1s;
+
+  .q-focus-helper {
+    display: none;
+  }
+
+  .q-btn__content {
+    justify-content: start;
+  }
+
+  .mdi {
+    transition: all 0.3s;
+    font-size: 28px;
+  }
+}
+
+// Left side drawer button
+.drawer-button.is-left {
+  .q-btn__content {
+    justify-content: end;
+  }
+}
+</style>

package/src/components/CExpansionItem.vue

@@ -0,0 +1,57 @@
+<template>
+  <q-expansion-item
+    :label="label"
+    :header-class="headerClass"
+    class="c-expansion-item"
+  >
+    <slot />
+  </q-expansion-item>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  label: {
+    type: String,
+    default: undefined,
+  },
+  headerClass: {
+    type: String,
+    default: undefined,
+  },
+})
+</script>
+
+<style lang="scss">
+.c-expansion-item {
+  border-bottom: 1px solid var(--color-border);
+
+  .q-item__section {
+    padding: 0;
+  }
+
+  .q-expansion-item__container {
+    .q-item {
+      padding-right: 12px;
+    }
+  }
+
+  .q-item__label {
+    line-height: 1.5em !important;
+    font-weight: 600;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .q-expansion-item__toggle-icon {
+    color: var(--color-grey-darkest);
+    font-size: 22px;
+  }
+
+  // Selected link
+  .q-router-link--exact-active {
+    background: var(--item-selected-bg-color);
+    font-weight: 600;
+  }
+}
+</style>

package/src/components/CExpansionItemWithCheckbox.vue

@@ -0,0 +1,41 @@
+<template>
+  <q-expansion-item
+    :header-class="headerClass"
+    class="c-expansion-item"
+  >
+    <template #header>
+      <q-checkbox
+        :model-value="modelValue"
+        v-bind="$inri.checkbox"
+        @update:model-value="$emit('update:modelValue', $event)"
+      />
+      <div class="ml-3 flex-1 flex align-middle items-center overflow-hidden">
+        <span class="truncate">{{ label }}</span>
+      </div>
+    </template>
+    <slot />
+  </q-expansion-item>
+</template>
+
+<script setup lang="ts">
+defineEmits(['update:modelValue'])
+
+defineProps({
+  modelValue: {
+    type: Boolean,
+    default: undefined,
+  },
+  label: {
+    type: String,
+    default: undefined,
+  },
+  headerClass: {
+    type: String,
+    default: undefined,
+  },
+})
+</script>
+
+<style>
+/* shared */
+</style>

package/src/components/CFileDropzone.vue

@@ -0,0 +1,114 @@
+<template>
+  <div
+    v-show="isDragging"
+    :style="`height: ${height}; width: ${width}`"
+    :class="[
+      'absolute',
+      'inset-x-0',
+      'z-10',
+      isDragging && 'border-2 border-solid border-green bg-green-light-30',
+    ]"
+    @drop.prevent="handleDrop"
+  >
+    <div class="relative w-full h-full flex justify-center items-end p-8">
+      <div class="absolute flex items-center rounded bg-grey-darkest text-white px-5 py-4">
+        <q-icon
+          name="mdi-download-outline"
+          class="mr-5 rotate-180"
+          size="24px"
+        />
+        <i18n-t
+          v-if="hintLabel"
+          keypath="inri.dropzone.hint"
+          tag="span"
+          scope="global"
+        >
+          <b>{{ hintLabel }}</b>
+        </i18n-t>
+        <span v-else>{{ $t('inri.dropzone.hint_general') }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import notify from '../plugins/notify'
+
+const { t } = useI18n()
+
+defineProps({
+  hintLabel: {
+    type: String,
+    default: '',
+  },
+  height: {
+    type: String,
+    default: '100%',
+  },
+  width: {
+    type: String,
+    default: '100%',
+  },
+})
+
+const emit = defineEmits(['files-dropped'])
+
+const isDragging = ref(false)
+let isDraggingTimeout: ReturnType<typeof setTimeout>
+
+function setDraggingTimeout () {
+  isDraggingTimeout = setTimeout(() => {
+    isDragging.value = false
+  }, 50)
+}
+
+function isFileDrag (e: DragEvent) {
+  return e.dataTransfer?.items.length && e.dataTransfer?.items[0].kind === 'file'
+}
+
+function handleDragEnter (e) {
+  if (isFileDrag(e)) {
+    isDragging.value = true
+    clearTimeout(isDraggingTimeout)
+    e.preventDefault()
+  }
+}
+
+function handleDragOver (e) {
+  if (isFileDrag(e)) {
+    isDragging.value = true
+    clearTimeout(isDraggingTimeout)
+    e.preventDefault()
+  }
+}
+
+function handleDragLeave (e) {
+  setDraggingTimeout()
+  e.preventDefault()
+}
+
+onMounted(() => {
+  document.body.addEventListener('dragenter', handleDragEnter, false)
+  document.body.addEventListener('dragover', handleDragOver, false)
+  document.body.addEventListener('dragleave', handleDragLeave, false)
+})
+
+onUnmounted(() => {
+  document.body.removeEventListener('dragenter', handleDragEnter, false)
+  document.body.removeEventListener('dragover', handleDragOver, false)
+  document.body.removeEventListener('dragleave', handleDragLeave, false)
+})
+
+function handleDrop (e) {
+  setDraggingTimeout()
+
+  if (!e.dataTransfer.files) {
+    notify.error(t('dropzone.invalid_drop_items'))
+    return
+  }
+
+  emit('files-dropped', [...e.dataTransfer.files])
+}
+</script>