@inriver/inri 1.14.0 → 1.16.0

package/src/components/CDirtyCheck.vue

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

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

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

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

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