@inriver/inri 1.13.0 → 1.15.0

package/src/components/internal-components/ConfirmDialog.vue

@@ -1,78 +1,78 @@
-<template>
-  <q-dialog
-    ref="dialogRef"
-    class="c-dialog"
-    @hide="onDialogHide"
-  >
-    <q-card
-      data-id="confirm-dialog"
-      class="dialog-card"
-    >
-      <q-card-section class="px-5 pt-6 pb-4">
-        <h3
-          v-if="title"
-          data-id="confirm-dialog-title"
-        >
-          {{ title }}
-        </h3>
-        <div
-          data-id="confirm-dialog-description"
-          class="mt-2px"
-        >
-          {{ text }}
-        </div>
-      </q-card-section>
-
-      <div class="dialog-card-action-buttons px-5 pt-2 pb-10">
-        <c-btn
-          data-id="confirm-dialog-ok-button"
-          :label="confirmButtonText || $t('inri.common.confirm')"
-          :color="confirmButtonColor"
-          @click="onDialogOK"
-        />
-        <c-btn
-          v-if="!hideCancelButton"
-          data-id="confirm-dialog-cancel-button"
-          :label="cancelButtonText || $t('inri.common.cancel')"
-          color="surface"
-          @click="onDialogCancel"
-        />
-      </div>
-    </q-card>
-  </q-dialog>
-</template>
-
-<script setup lang="ts">
-// For further documentation regarding custom programmatic dialogs:
-// https://quasar.dev/quasar-plugins/dialog
-
-import { useDialogPluginComponent } from 'quasar'
-
-defineProps({
-  title: {
-    type: String,
-    default: undefined,
-  },
-  text: {
-    type: String,
-    default: undefined,
-  },
-  confirmButtonText: {
-    type: String,
-    default: undefined,
-  },
-  cancelButtonText: {
-    type: String,
-    default: undefined,
-  },
-  confirmButtonColor: {
-    type: String,
-    default: 'primary',
-  },
-  hideCancelButton: Boolean,
-})
-
-defineEmits([...useDialogPluginComponent.emits])
-
-const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent()
-</script>
+<template>
+  <q-dialog
+    ref="dialogRef"
+    class="c-dialog"
+    @hide="onDialogHide"
+  >
+    <q-card
+      data-id="confirm-dialog"
+      class="dialog-card"
+    >
+      <q-card-section class="px-5 pt-6 pb-4">
+        <h3
+          v-if="title"
+          data-id="confirm-dialog-title"
+        >
+          {{ title }}
+        </h3>
+        <div
+          data-id="confirm-dialog-description"
+          class="mt-2px"
+        >
+          {{ text }}
+        </div>
+      </q-card-section>
+
+      <div class="dialog-card-action-buttons px-5 pt-2 pb-10">
+        <c-btn
+          data-id="confirm-dialog-ok-button"
+          :label="confirmButtonText || $t('inri.common.confirm')"
+          :color="confirmButtonColor"
+          @click="onDialogOK"
+        />
+        <c-btn
+          v-if="!hideCancelButton"
+          data-id="confirm-dialog-cancel-button"
+          :label="cancelButtonText || $t('inri.common.cancel')"
+          color="surface"
+          @click="onDialogCancel"
+        />
+      </div>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+// For further documentation regarding custom programmatic dialogs:
+// https://quasar.dev/quasar-plugins/dialog
+
+import { useDialogPluginComponent } from 'quasar'
+
+defineProps({
+  title: {
+    type: String,
+    default: undefined,
+  },
+  text: {
+    type: String,
+    default: undefined,
+  },
+  confirmButtonText: {
+    type: String,
+    default: undefined,
+  },
+  cancelButtonText: {
+    type: String,
+    default: undefined,
+  },
+  confirmButtonColor: {
+    type: String,
+    default: 'primary',
+  },
+  hideCancelButton: Boolean,
+})
+
+defineEmits([...useDialogPluginComponent.emits])
+
+const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent()
+</script>

package/src/composables/useDialog.ts

@@ -1,47 +1,47 @@
-import { getCurrentInstance, reactive, toRefs } from 'vue'
-import notify from '../plugins/notify'
-import { useDirtyCheck } from './useDirtyCheck'
-
-export function useDialog (data?: object, immediate = true) {
-  const { isDirty, freezeCleanData } = useDirtyCheck(data, immediate)
-  const { emit } = getCurrentInstance() as any
-
-  const state = reactive({
-    isLoading: false,
-    showDialog: true,
-  })
-
-  // Functions
-  function closeAfterTimeout () {
-    state.showDialog = false
-
-    // Let the q-dialog close transition finish before we tell our parent to close.
-    // This way we can use v-if on our parent to destroy the component but still have graceful transitions.
-    setTimeout(() => {
-      emit('update:show', false)
-    }, 500)
-  }
-
-  function cancel () {
-    closeAfterTimeout()
-    emit('after-cancel')
-  }
-
-  function confirmSuccess (msg: string | null | undefined, returnValue: any | undefined = undefined) {
-    closeAfterTimeout()
-    state.isLoading = false
-    emit('after-confirm', returnValue)
-
-    if (msg) {
+import { getCurrentInstance, reactive, toRefs } from 'vue'
+import notify from '../plugins/notify'
+import { useDirtyCheck } from './useDirtyCheck'
+
+export function useDialog (data?: object, immediate = true) {
+  const { isDirty, freezeCleanData } = useDirtyCheck(data, immediate)
+  const { emit } = getCurrentInstance() as any
+
+  const state = reactive({
+    isLoading: false,
+    showDialog: true,
+  })
+
+  // Functions
+  function closeAfterTimeout () {
+    state.showDialog = false
+
+    // Let the q-dialog close transition finish before we tell our parent to close.
+    // This way we can use v-if on our parent to destroy the component but still have graceful transitions.
+    setTimeout(() => {
+      emit('update:show', false)
+    }, 500)
+  }
+
+  function cancel () {
+    closeAfterTimeout()
+    emit('after-cancel')
+  }
+
+  function confirmSuccess (msg: string | null | undefined, returnValue: any | undefined = undefined) {
+    closeAfterTimeout()
+    state.isLoading = false
+    emit('after-confirm', returnValue)
+
+    if (msg) {
       notify.success(msg)
-    }
-  }
-
-  return {
-    ...toRefs(state),
-    cancel,
-    confirmSuccess,
-    isDirty,
-    freezeCleanData,
-  }
-}
+    }
+  }
+
+  return {
+    ...toRefs(state),
+    cancel,
+    confirmSuccess,
+    isDirty,
+    freezeCleanData,
+  }
+}

package/src/composables/useDirtyCheck.ts

@@ -1,25 +1,25 @@
-import { computed, reactive, ref } from 'vue'
-
-export function useDirtyCheck (data?: object, immediate = true) {
-  const isEnabled = ref(immediate)
-  const reactiveData = reactive(data || {})
-  const initialData = ref(JSON.stringify(reactiveData))
-
-  const isDirty = computed(() => {
-    if (!data || !isEnabled.value) {
-      return false
-    }
-
-    return JSON.stringify(reactiveData) !== initialData.value
-  })
-
-  function freezeCleanData () {
-    isEnabled.value = true
-    initialData.value = JSON.stringify(reactiveData)
-  }
-
-  return {
-    isDirty,
-    freezeCleanData,
-  }
-}
+import { computed, reactive, ref } from 'vue'
+
+export function useDirtyCheck (data?: object, immediate = true) {
+  const isEnabled = ref(immediate)
+  const reactiveData = reactive(data || {})
+  const initialData = ref(JSON.stringify(reactiveData))
+
+  const isDirty = computed(() => {
+    if (!data || !isEnabled.value) {
+      return false
+    }
+
+    return JSON.stringify(reactiveData) !== initialData.value
+  })
+
+  function freezeCleanData () {
+    isEnabled.value = true
+    initialData.value = JSON.stringify(reactiveData)
+  }
+
+  return {
+    isDirty,
+    freezeCleanData,
+  }
+}

package/src/composables/useDoubleClickListener.ts

@@ -1,28 +1,28 @@
-import { Ref } from 'vue'
-import { useEventListener } from '@vueuse/core'
-
-export function useDoubleClickListener (
-  target: Ref<HTMLElement | undefined> | HTMLElement,
-  callback: (e: Event) => any,
-) {
-  let clickCounter = 0
-  let clickTimer
-
-  function clickHandler (e) {
-    clickCounter++
-
-    if (clickCounter === 1) {
-      clickTimer = window.setTimeout(function () {
-        clickCounter = 0
-      }, 500)
-    }
-
-    if (clickCounter > 1) {
-      clearTimeout(clickTimer)
-      clickCounter = 0
-      callback(e)
-    }
-  }
-
-  useEventListener(target as any, 'click', clickHandler)
-}
+import { Ref } from 'vue'
+import { useEventListener } from '@vueuse/core'
+
+export function useDoubleClickListener (
+  target: Ref<HTMLElement | undefined> | HTMLElement,
+  callback: (e: Event) => any,
+) {
+  let clickCounter = 0
+  let clickTimer
+
+  function clickHandler (e) {
+    clickCounter++
+
+    if (clickCounter === 1) {
+      clickTimer = window.setTimeout(function () {
+        clickCounter = 0
+      }, 500)
+    }
+
+    if (clickCounter > 1) {
+      clearTimeout(clickTimer)
+      clickCounter = 0
+      callback(e)
+    }
+  }
+
+  useEventListener(target as any, 'click', clickHandler)
+}

package/src/composables/useSelectable.ts

@@ -1,62 +1,62 @@
-import { getCurrentInstance, computed, ref } from 'vue'
-
-export default function useSelectable (allItems, selectedItems) {
-  const { emit } = getCurrentInstance() as any
-
-  // This will convert a "reactive" array to "ref". "ref"s will still be a ref.
-  // This lets us use a reactive -or- ref array as a parameter.
-  const _allItems = ref(allItems)
-
-  const allSelectedStatus = computed(() => {
-    if (!selectedItems.value || !selectedItems.value.length) {
-      return false
-    } else if (_allItems.value.length === selectedItems.value.length) {
-      return true
-    }
-
-    return undefined
-  })
-
-  function toggleItem (evt, item = undefined) {
-    // If someone passes just one parameter we assume it's the item that we want to toggle instead of the event.
-    // The evt parameter is not actually used here, but is automatically passed along on a Q-Table row click.
-    const _item = item || evt
-    const existingItemIndex = selectedItems.value.findIndex(i => JSON.stringify(i) === JSON.stringify(_item))
-
-    if (existingItemIndex >= 0) {
-      // Remove item
-      selectedItems.value.splice(existingItemIndex, 1)
-    } else {
-      // Add item
-      selectedItems.value.push(_item)
-    }
-  }
-
-  function toggleAllItems () {
-    if (allSelectedStatus.value === false) {
-      selectedItems.value = [..._allItems.value]
-    } else {
-      selectedItems.value = []
-    }
-  }
-
-  function toggleAllItemsWithEmit (evt, emitString = 'update:modelValue') {
-    if (allSelectedStatus.value === false) {
-      emit(emitString, [..._allItems.value])
-    } else {
-      emit(emitString, [])
-    }
-  }
-
-  function isSelected (item) {
-    return selectedItems.value.includes(item)
-  }
-
-  return {
-    allSelectedStatus,
-    toggleItem,
-    toggleAllItems,
-    toggleAllItemsWithEmit,
-    isSelected,
-  }
-}
+import { getCurrentInstance, computed, ref } from 'vue'
+
+export default function useSelectable (allItems, selectedItems) {
+  const { emit } = getCurrentInstance() as any
+
+  // This will convert a "reactive" array to "ref". "ref"s will still be a ref.
+  // This lets us use a reactive -or- ref array as a parameter.
+  const _allItems = ref(allItems)
+
+  const allSelectedStatus = computed(() => {
+    if (!selectedItems.value || !selectedItems.value.length) {
+      return false
+    } else if (_allItems.value.length === selectedItems.value.length) {
+      return true
+    }
+
+    return undefined
+  })
+
+  function toggleItem (evt, item = undefined) {
+    // If someone passes just one parameter we assume it's the item that we want to toggle instead of the event.
+    // The evt parameter is not actually used here, but is automatically passed along on a Q-Table row click.
+    const _item = item || evt
+    const existingItemIndex = selectedItems.value.findIndex(i => JSON.stringify(i) === JSON.stringify(_item))
+
+    if (existingItemIndex >= 0) {
+      // Remove item
+      selectedItems.value.splice(existingItemIndex, 1)
+    } else {
+      // Add item
+      selectedItems.value.push(_item)
+    }
+  }
+
+  function toggleAllItems () {
+    if (allSelectedStatus.value === false) {
+      selectedItems.value = [..._allItems.value]
+    } else {
+      selectedItems.value = []
+    }
+  }
+
+  function toggleAllItemsWithEmit (evt, emitString = 'update:modelValue') {
+    if (allSelectedStatus.value === false) {
+      emit(emitString, [..._allItems.value])
+    } else {
+      emit(emitString, [])
+    }
+  }
+
+  function isSelected (item) {
+    return selectedItems.value.includes(item)
+  }
+
+  return {
+    allSelectedStatus,
+    toggleItem,
+    toggleAllItems,
+    toggleAllItemsWithEmit,
+    isSelected,
+  }
+}

package/src/composables/useTruncateChips.ts

@@ -1,46 +1,46 @@
-import { nextTick } from 'vue'
-
-export function useTruncateChips () {
-  const chipsColumnHeaderSelector = '.js-chips-column-header'
-  const chipsWrapperSelector = '.truncated-chips'
-  const chipSelector = '.q-chip'
-  const truncatedChipClass = 'truncated-chip'
-  const arrowBtnOffset = 32
-
-  function onResize () {
-    truncateChips()
-  }
-
-  function truncateChips () {
-    nextTick(() => {
-      const chipsHeaderRect = document.querySelector(chipsColumnHeaderSelector)?.getBoundingClientRect() as DOMRect
-      const chipsWrappers = document.querySelectorAll(chipsWrapperSelector)
-
-      // There is one chips wrapper for every row in a table
-      chipsWrappers.forEach(wrapper => {
-        const renderedChips = Array.from(wrapper.querySelectorAll(chipSelector))
-
-        // Reset hidden
-        renderedChips.forEach(chip => chip.classList.remove(truncatedChipClass))
-
-        // Check coordinates
-        renderedChips.every((chip) => {
-          const chipRect = chip.getBoundingClientRect()
-
-          // As soon as you find a chip that goes outside the boundaries then hide it (and all the following chips in the list)
-          if (chipRect.right > (chipsHeaderRect.right - arrowBtnOffset)) {
-            chip.classList.add(truncatedChipClass)
-            return false
-          }
-
-          return true
-        })
-      })
-    })
-  }
-
-  return {
-    onResize,
-    truncateChips,
-  }
-}
+import { nextTick } from 'vue'
+
+export function useTruncateChips () {
+  const chipsColumnHeaderSelector = '.js-chips-column-header'
+  const chipsWrapperSelector = '.truncated-chips'
+  const chipSelector = '.q-chip'
+  const truncatedChipClass = 'truncated-chip'
+  const arrowBtnOffset = 32
+
+  function onResize () {
+    truncateChips()
+  }
+
+  function truncateChips () {
+    nextTick(() => {
+      const chipsHeaderRect = document.querySelector(chipsColumnHeaderSelector)?.getBoundingClientRect() as DOMRect
+      const chipsWrappers = document.querySelectorAll(chipsWrapperSelector)
+
+      // There is one chips wrapper for every row in a table
+      chipsWrappers.forEach(wrapper => {
+        const renderedChips = Array.from(wrapper.querySelectorAll(chipSelector))
+
+        // Reset hidden
+        renderedChips.forEach(chip => chip.classList.remove(truncatedChipClass))
+
+        // Check coordinates
+        renderedChips.every((chip) => {
+          const chipRect = chip.getBoundingClientRect()
+
+          // As soon as you find a chip that goes outside the boundaries then hide it (and all the following chips in the list)
+          if (chipRect.right > (chipsHeaderRect.right - arrowBtnOffset)) {
+            chip.classList.add(truncatedChipClass)
+            return false
+          }
+
+          return true
+        })
+      })
+    })
+  }
+
+  return {
+    onResize,
+    truncateChips,
+  }
+}

package/src/i18n/de/index.ts

@@ -1,17 +1,17 @@
-export default {
-  inri: {
-    common: {
-      ok: 'OK',
-      save: 'Speichern',
-      cancel: 'Abbrechen',
-      confirm: 'Bestätigen',
-      yes: 'Ja',
-    },
-    languages: {
-      en: 'englisch',
-      de: 'deutsch',
-      fr: 'französisch',
-      es: 'spanisch',
-    },
-  },
-}
+export default {
+  inri: {
+    common: {
+      ok: 'OK',
+      save: 'Speichern',
+      cancel: 'Abbrechen',
+      confirm: 'Bestätigen',
+      yes: 'Ja',
+    },
+    languages: {
+      en: 'englisch',
+      de: 'deutsch',
+      fr: 'französisch',
+      es: 'spanisch',
+    },
+  },
+}