@inriver/inri 1.14.0 → 1.15.0

package/src/components/CFileDropzone.vue

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

package/src/components/CGrid.vue

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

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

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

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