@inriver/inri 1.14.0 → 1.16.0

package/src/components/CAutoBreadcrumbs.vue

@@ -1,72 +1,72 @@
-<template>
-  <q-breadcrumbs
-    separator=">"
-    separator-color="grey"
-    active-color="grey-darkest"
-  >
-    <q-breadcrumbs-el
-      v-for="breadcrumb in breadcrumbs"
-      :key="breadcrumb.to.name"
-      :to="breadcrumb.to"
-      :label="breadcrumb.text"
-    />
-    <q-breadcrumbs-el
-      v-if="currentBreadcrumb"
-      :label="currentBreadcrumb"
-      class="font-bold"
-    />
-  </q-breadcrumbs>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import { getRouteTitle } from '../utils/routeUtils'
-import { useRouter, RouteRecordNormalized, RouteLocationNormalizedLoaded, RouteRecordName } from 'vue-router'
-
-interface Breadcrumb {
-  text: string,
-  to: {
-    name?: RouteRecordName
-  },
-  exact: boolean
-}
-
-const breadcrumbs = ref<Breadcrumb[]>([])
-const parentRoutes = ref<RouteRecordNormalized[]>([])
-const currentBreadcrumb = ref<string>()
-const router = useRouter()
-
-onMounted(() => {
-  generateBreadcrumbs(router.currentRoute.value)
-})
-
-function addParentRoutes (routeName: string) {
-  const parentRoute = router.getRoutes().find(route => route.name === routeName)
-
-  if (parentRoute) {
-    parentRoutes.value.push(parentRoute)
-
-    if (parentRoute.meta.parent) {
-      addParentRoutes(parentRoute.meta.parent as string)
-    }
-  }
-}
-
-function generateBreadcrumbs (to: RouteLocationNormalizedLoaded) {
-  if (to.meta.parent) {
-    addParentRoutes(to.meta.parent as string)
-  }
-
-  if (parentRoutes.value.length) {
-    breadcrumbs.value = parentRoutes.value.reverse().map(foundRoute => {
-      return {
-        text: getRouteTitle(foundRoute, to),
-        to: { name: foundRoute.name },
-        exact: true,
-      }
-    })
-  }
-
-  currentBreadcrumb.value = getRouteTitle(to, to)
-}
-</script>
+<template>
+  <q-breadcrumbs
+    separator=">"
+    separator-color="grey"
+    active-color="grey-darkest"
+  >
+    <q-breadcrumbs-el
+      v-for="breadcrumb in breadcrumbs"
+      :key="breadcrumb.to.name"
+      :to="breadcrumb.to"
+      :label="breadcrumb.text"
+    />
+    <q-breadcrumbs-el
+      v-if="currentBreadcrumb"
+      :label="currentBreadcrumb"
+      class="font-bold"
+    />
+  </q-breadcrumbs>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { getRouteTitle } from '../utils/routeUtils'
+import { useRouter, RouteRecordNormalized, RouteLocationNormalizedLoaded, RouteRecordName } from 'vue-router'
+
+interface Breadcrumb {
+  text: string,
+  to: {
+    name?: RouteRecordName
+  },
+  exact: boolean
+}
+
+const breadcrumbs = ref<Breadcrumb[]>([])
+const parentRoutes = ref<RouteRecordNormalized[]>([])
+const currentBreadcrumb = ref<string>()
+const router = useRouter()
+
+onMounted(() => {
+  generateBreadcrumbs(router.currentRoute.value)
+})
+
+function addParentRoutes (routeName: string) {
+  const parentRoute = router.getRoutes().find(route => route.name === routeName)
+
+  if (parentRoute) {
+    parentRoutes.value.push(parentRoute)
+
+    if (parentRoute.meta.parent) {
+      addParentRoutes(parentRoute.meta.parent as string)
+    }
+  }
+}
+
+function generateBreadcrumbs (to: RouteLocationNormalizedLoaded) {
+  if (to.meta.parent) {
+    addParentRoutes(to.meta.parent as string)
+  }
+
+  if (parentRoutes.value.length) {
+    breadcrumbs.value = parentRoutes.value.reverse().map(foundRoute => {
+      return {
+        text: getRouteTitle(foundRoute, to),
+        to: { name: foundRoute.name },
+        exact: true,
+      }
+    })
+  }
+
+  currentBreadcrumb.value = getRouteTitle(to, to)
+}
+</script>

package/src/components/CBtn.vue

@@ -1,98 +1,98 @@
-<template>
-  <q-btn
-    v-bind="$inri.button"
-    :color="color"
-    :label="label"
-    :disable="disable"
-    class="group overflow-hidden"
-  >
-    <template #loading>
-      <c-spinner
-        size="28"
-        :parent-color="color"
-      />
-    </template>
-
-    <c-slide-effect
-      v-if="!disable"
-      :parent-color="color"
-      :slide-effect-color="slideEffectColor"
-      slide-right
-      class="-z-1"
-    />
-
-    <slot />
-
-    <c-tooltip v-if="tooltip">
-      {{ tooltip }}
-    </c-tooltip>
-  </q-btn>
-</template>
-
-<script setup lang="ts">
-defineProps({
-  label: {
-    type: String,
-    default: undefined,
-  },
-  color: {
-    type: String,
-    default: 'primary',
-  },
-  slideEffectColor: {
-    type: String,
-    default: undefined,
-  },
-  disable: Boolean,
-  tooltip: {
-    type: String,
-    default: undefined,
-  },
-})
-</script>
-
-<style lang="scss">
-.c-btn {
-  height: 40px;
-  font-weight: 600;
-  padding: 4px 56px !important;
-
-  &.disabled {
-    opacity: 0.3 !important;
-  }
-
-  .q-icon {
-    font-size: 1rem;
-  }
-
-  .q-focus-helper {
-    display: none;
-  }
-
-  &.bg-primary {
-    color: var(--on-primary-color);
-  }
-
-  &.bg-secondary {
-    color: var(--on-secondary-color);
-  }
-
-  &.bg-accent {
-    color: var(--on-accent-color);
-  }
-
-  &.bg-surface {
-    color: var(--on-surface-color);
-    border: 1px solid var(--surface-border-color);
-  }
-
-  // Special css for specific colors
-  &.bg-white {
-    border: 1px solid var(--color-grey);
-  }
-
-  &.bg-black {
-    color: white;
-  }
-}
-</style>
+<template>
+  <q-btn
+    v-bind="$inri.button"
+    :color="color"
+    :label="label"
+    :disable="disable"
+    class="group overflow-hidden"
+  >
+    <template #loading>
+      <c-spinner
+        size="28"
+        :parent-color="color"
+      />
+    </template>
+
+    <c-slide-effect
+      v-if="!disable"
+      :parent-color="color"
+      :slide-effect-color="slideEffectColor"
+      slide-right
+      class="-z-1"
+    />
+
+    <slot />
+
+    <c-tooltip v-if="tooltip">
+      {{ tooltip }}
+    </c-tooltip>
+  </q-btn>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  label: {
+    type: String,
+    default: undefined,
+  },
+  color: {
+    type: String,
+    default: 'primary',
+  },
+  slideEffectColor: {
+    type: String,
+    default: undefined,
+  },
+  disable: Boolean,
+  tooltip: {
+    type: String,
+    default: undefined,
+  },
+})
+</script>
+
+<style lang="scss">
+.c-btn {
+  height: 40px;
+  font-weight: 600;
+  padding: 4px 56px !important;
+
+  &.disabled {
+    opacity: 0.3 !important;
+  }
+
+  .q-icon {
+    font-size: 1rem;
+  }
+
+  .q-focus-helper {
+    display: none;
+  }
+
+  &.bg-primary {
+    color: var(--on-primary-color);
+  }
+
+  &.bg-secondary {
+    color: var(--on-secondary-color);
+  }
+
+  &.bg-accent {
+    color: var(--on-accent-color);
+  }
+
+  &.bg-surface {
+    color: var(--on-surface-color);
+    border: 1px solid var(--surface-border-color);
+  }
+
+  // Special css for specific colors
+  &.bg-white {
+    border: 1px solid var(--color-grey);
+  }
+
+  &.bg-black {
+    color: white;
+  }
+}
+</style>

package/src/components/CColorPicker.vue

@@ -1,55 +1,55 @@
-<template>
-  <label
-    tabindex="0"
-    class="flex items-center cursor-pointer h-10 group max-w-max"
-    :class="{ 'cursor-not-allowed text-grey-dark': disabled }"
-  >
-    <div
-      class="rounded-full h-[30px] w-[30px] mr-2"
-      :class="{ 'border': border }"
-      :style="{ background: modelValue }"
-    />
-    <span>{{ (!staticLabel ? modelValue?.toLowerCase() : false) || label || 'not selected' }}</span>
-    <q-icon
-      v-if="clearable && modelValue && !disabled"
-      name="mdi-close"
-      color="grey-darker"
-      class="cursor-pointer ml-2 opacity-0 group-hover:opacity-100"
-      size="18px"
-      @click.stop="$emit('update:model-value', null)"
-    />
-    <q-menu v-if="!disabled">
-      <q-color
-        :model-value="modelValue"
-        no-header-tabs
-        no-footer
-        style="width: 290px;"
-        @update:model-value="$emit('update:model-value', $event)"
-      />
-    </q-menu>
-    <slot />
-  </label>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-defineEmits(['update:model-value'])
-
-const props = defineProps({
-  modelValue: {
-    type: String,
-    default: undefined,
-  },
-  label: {
-    type: String,
-    default: undefined,
-  },
-  staticLabel: Boolean,
-  clearable: Boolean,
-  disabled: Boolean,
-})
-
-// Show a border if no value or fully white
-const border = computed(() => (!props.modelValue || props.modelValue.toLowerCase() === '#ffffff') ? 'border border-grey-dark' : '')
-</script>
+<template>
+  <label
+    tabindex="0"
+    class="flex items-center cursor-pointer h-10 group max-w-max"
+    :class="{ 'cursor-not-allowed text-grey-dark': disabled }"
+  >
+    <div
+      class="rounded-full h-[30px] w-[30px] mr-2"
+      :class="{ 'border': border }"
+      :style="{ background: modelValue }"
+    />
+    <span>{{ (!staticLabel ? modelValue?.toLowerCase() : false) || label || 'not selected' }}</span>
+    <q-icon
+      v-if="clearable && modelValue && !disabled"
+      name="mdi-close"
+      color="grey-darker"
+      class="cursor-pointer ml-2 opacity-0 group-hover:opacity-100"
+      size="18px"
+      @click.stop="$emit('update:model-value', null)"
+    />
+    <q-menu v-if="!disabled">
+      <q-color
+        :model-value="modelValue"
+        no-header-tabs
+        no-footer
+        style="width: 290px;"
+        @update:model-value="$emit('update:model-value', $event)"
+      />
+    </q-menu>
+    <slot />
+  </label>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+defineEmits(['update:model-value'])
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: undefined,
+  },
+  label: {
+    type: String,
+    default: undefined,
+  },
+  staticLabel: Boolean,
+  clearable: Boolean,
+  disabled: Boolean,
+})
+
+// Show a border if no value or fully white
+const border = computed(() => (!props.modelValue || props.modelValue.toLowerCase() === '#ffffff') ? 'border border-grey-dark' : '')
+</script>

package/src/components/CContextMenu.vue

@@ -1,29 +1,29 @@
-<template>
-  <c-icon-btn
-    data-id="context-menu-btn"
-    icon="mdi-dots-vertical"
-    :tooltip-right="tooltip || $t('inri.common.more')"
-    @click.prevent
-  >
-    <q-menu>
-      <q-list class="menu-list pb-0">
-        <slot />
-      </q-list>
-    </q-menu>
-  </c-icon-btn>
-</template>
-
-<script setup lang="ts">
-defineProps({
-  tooltip: {
-    type: String,
-    default: undefined,
-  },
-})
-</script>
-
-<style scoped lang="scss">
-.menu-list {
-  min-width: 146px;
-}
-</style>
+<template>
+  <c-icon-btn
+    data-id="context-menu-btn"
+    icon="mdi-dots-vertical"
+    :tooltip-right="tooltip || $t('inri.common.more')"
+    @click.prevent
+  >
+    <q-menu>
+      <q-list class="menu-list pb-0">
+        <slot />
+      </q-list>
+    </q-menu>
+  </c-icon-btn>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  tooltip: {
+    type: String,
+    default: undefined,
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.menu-list {
+  min-width: 146px;
+}
+</style>

package/src/components/CDatePicker.vue

@@ -1,51 +1,51 @@
-<template>
-  <q-input
-    v-bind="dense ? $inri.inputDense : $inri.input"
-    :model-value="modelValue"
-    :label="label"
-    :stack-label="datePickerIsOpen"
-    mask="date"
-    :rules="modelValue ? ['date'] : undefined"
-    @update:model-value="$emit('update:model-value', $event)"
-  >
-    <template #append>
-      <q-icon
-        ref="icon"
-        name="mdi-calendar-outline"
-        class="cursor-pointer"
-        color="grey-dark"
-        size="19px"
-        @click="datePickerIsOpen = true"
-      />
-    </template>
-    <q-menu
-      v-model="datePickerIsOpen"
-      no-parent-event
-    >
-      <q-date
-        :model-value="modelValue"
-        @update:model-value="$emit('update:model-value', $event)"
-      />
-    </q-menu>
-  </q-input>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-defineEmits(['update:model-value'])
-
-defineProps({
-  modelValue: {
-    type: String,
-    default: undefined,
-  },
-  label: {
-    type: String,
-    default: undefined,
-  },
-  dense: Boolean,
-})
-
-const datePickerIsOpen = ref(false)
-</script>
+<template>
+  <q-input
+    v-bind="dense ? $inri.inputDense : $inri.input"
+    :model-value="modelValue"
+    :label="label"
+    :stack-label="datePickerIsOpen"
+    mask="date"
+    :rules="modelValue ? ['date'] : undefined"
+    @update:model-value="$emit('update:model-value', $event)"
+  >
+    <template #append>
+      <q-icon
+        ref="icon"
+        name="mdi-calendar-outline"
+        class="cursor-pointer"
+        color="grey-dark"
+        size="19px"
+        @click="datePickerIsOpen = true"
+      />
+    </template>
+    <q-menu
+      v-model="datePickerIsOpen"
+      no-parent-event
+    >
+      <q-date
+        :model-value="modelValue"
+        @update:model-value="$emit('update:model-value', $event)"
+      />
+    </q-menu>
+  </q-input>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineEmits(['update:model-value'])
+
+defineProps({
+  modelValue: {
+    type: String,
+    default: undefined,
+  },
+  label: {
+    type: String,
+    default: undefined,
+  },
+  dense: Boolean,
+})
+
+const datePickerIsOpen = ref(false)
+</script>