@inriver/inri 1.14.0 → 1.16.0

package/src/components/CTreeNode.vue

@@ -1,39 +1,39 @@
-<template>
-  <div
-    class="flex flex-1 no-wrap items-center"
-    :title="text"
-  >
-    <span class="truncate flex-1">{{ text }}</span>
-    <span
-      v-if="showCount"
-      class="text-body2 font-bold bg-white rounded-full border border-green ml-1 px-2 h-6 min-w-6 flex items-center justify-center"
-    >
-      {{ count }}
-    </span>
-
-    <!-- Used for context menus -->
-    <slot />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = defineProps({
-  text: {
-    type: String,
-    default: undefined,
-  },
-  count: {
-    type: [String, Number],
-    default: undefined,
-  },
-  hideZeroCount: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-// If we want to hide the chip when the count is 0 then hide if null/undefined/0. Else only hide if null/undefined.
-const showCount = computed(() => props.hideZeroCount ? props.count : (props.count !== null && props.count !== undefined))
-</script>
+<template>
+  <div
+    class="flex flex-1 no-wrap items-center"
+    :title="text"
+  >
+    <span class="truncate flex-1">{{ text }}</span>
+    <span
+      v-if="showCount"
+      class="text-body2 font-bold bg-white rounded-full border border-green ml-1 px-2 h-6 min-w-6 flex items-center justify-center"
+    >
+      {{ count }}
+    </span>
+
+    <!-- Used for context menus -->
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps({
+  text: {
+    type: String,
+    default: undefined,
+  },
+  count: {
+    type: [String, Number],
+    default: undefined,
+  },
+  hideZeroCount: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+// If we want to hide the chip when the count is 0 then hide if null/undefined/0. Else only hide if null/undefined.
+const showCount = computed(() => props.hideZeroCount ? props.count : (props.count !== null && props.count !== undefined))
+</script>

package/src/components/cards/CBannerCard.vue

@@ -1,103 +1,103 @@
-<template>
-  <component
-    :is="to ? 'router-link' : 'div'"
-    :to="to"
-    class="block p-5 h-[220px] relative group cursor-pointer no-underline"
-    :class="[`bg-${color}`, specialModifierClasses.card]"
-  >
-    <c-slide-effect :parent-color="color" />
-
-    <c-context-menu
-      class="absolute right-2 top-3"
-      :class="specialModifierClasses.contextMenu"
-    >
-      <c-menu-item>
-        menu item
-      </c-menu-item>
-    </c-context-menu>
-
-    <div
-      class="relative"
-      :class="specialModifierClasses.text"
-    >
-      <div
-        class="mt-16 text-grey-darker"
-        :class="specialModifierClasses.text"
-      >
-        {{ title1 }}
-      </div>
-      <div class="text-h1 leading-none mb-4">
-        {{ title2 }}
-      </div>
-      <div class="line-clamp-2">
-        {{ description }}
-      </div>
-    </div>
-  </component>
-</template>
-
-<script setup>
-import { computed } from 'vue'
-import { getRelatedColors } from '../../utils/colorUtils'
-
-const props = defineProps({
-  color: {
-    type: String,
-    default: 'secondary',
-  },
-  title1: {
-    type: String,
-    default: '',
-  },
-  title2: {
-    type: String,
-    default: '',
-  },
-  description: {
-    type: String,
-    default: '',
-  },
-  to: {
-    type: [String, Object],
-    default: undefined,
-  },
-})
-
-const specialModifierClasses = computed(() => {
-  const color = props.color
-  const relatedColors = getRelatedColors(color)
-
-  if (color === 'primary' || color === 'secondary' || color === 'accent') {
-    return {
-      card: '',
-      contextMenu: 'text-' + relatedColors.onAltColor,
-      text: 'text-' + relatedColors.onColor,
-    }
-  } else if (color === 'surface') {
-    return {
-      card: 'border border-surface-border',
-      contextMenu: 'text-' + relatedColors.onColor,
-      text: 'text-' + relatedColors.onColor,
-    }
-  } else if (color === 'white') {
-    return {
-      card: 'border border-grey',
-      contextMenu: 'text-grey-darkest',
-      text: 'text-grey-darkest',
-    }
-  } else if (color === 'black') {
-    return {
-      card: '',
-      contextMenu: 'text-white',
-      text: 'text-white',
-    }
-  }
-
-  // Default for the rest
-  return {
-    card: '',
-    contextMenu: 'text-white',
-    text: 'text-grey-darkest',
-  }
-})
-</script>
+<template>
+  <component
+    :is="to ? 'router-link' : 'div'"
+    :to="to"
+    class="block p-5 h-[220px] relative group cursor-pointer no-underline"
+    :class="[`bg-${color}`, specialModifierClasses.card]"
+  >
+    <c-slide-effect :parent-color="color" />
+
+    <c-context-menu
+      class="absolute right-2 top-3"
+      :class="specialModifierClasses.contextMenu"
+    >
+      <c-menu-item>
+        menu item
+      </c-menu-item>
+    </c-context-menu>
+
+    <div
+      class="relative"
+      :class="specialModifierClasses.text"
+    >
+      <div
+        class="mt-16 text-grey-darker"
+        :class="specialModifierClasses.text"
+      >
+        {{ title1 }}
+      </div>
+      <div class="text-h1 leading-none mb-4">
+        {{ title2 }}
+      </div>
+      <div class="line-clamp-2">
+        {{ description }}
+      </div>
+    </div>
+  </component>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { getRelatedColors } from '../../utils/colorUtils'
+
+const props = defineProps({
+  color: {
+    type: String,
+    default: 'secondary',
+  },
+  title1: {
+    type: String,
+    default: '',
+  },
+  title2: {
+    type: String,
+    default: '',
+  },
+  description: {
+    type: String,
+    default: '',
+  },
+  to: {
+    type: [String, Object],
+    default: undefined,
+  },
+})
+
+const specialModifierClasses = computed(() => {
+  const color = props.color
+  const relatedColors = getRelatedColors(color)
+
+  if (color === 'primary' || color === 'secondary' || color === 'accent') {
+    return {
+      card: '',
+      contextMenu: 'text-' + relatedColors.onAltColor,
+      text: 'text-' + relatedColors.onColor,
+    }
+  } else if (color === 'surface') {
+    return {
+      card: 'border border-surface-border',
+      contextMenu: 'text-' + relatedColors.onColor,
+      text: 'text-' + relatedColors.onColor,
+    }
+  } else if (color === 'white') {
+    return {
+      card: 'border border-grey',
+      contextMenu: 'text-grey-darkest',
+      text: 'text-grey-darkest',
+    }
+  } else if (color === 'black') {
+    return {
+      card: '',
+      contextMenu: 'text-white',
+      text: 'text-white',
+    }
+  }
+
+  // Default for the rest
+  return {
+    card: '',
+    contextMenu: 'text-white',
+    text: 'text-grey-darkest',
+  }
+})
+</script>

package/src/components/cards/CSmallCard.vue

@@ -1,149 +1,149 @@
-<template>
-  <div
-    ref="card"
-    class="c-small-card"
-    @mouseover="isHoveredOver = true"
-    @mouseleave="isHoveredOver = false"
-    @click="$emit('click', $event)"
-  >
-    <div
-      class="content flex items-center justify-center"
-      :class="[
-        `bg-${backgroundColor}`,
-        selected ? 'is-selected' : ''
-      ]"
-    >
-      <img
-        v-if="imageSrc"
-        :src="imageSrc"
-        class="image"
-      >
-
-      <q-icon
-        v-else
-        :name="icon"
-        :style="`font-size: ${iconSize}px`"
-        :class="iconClass"
-      />
-
-      <transition name="fade">
-        <c-context-menu
-          v-if="$slots['context-menu-items']"
-          v-show="isHoveredOver"
-          class="absolute right-0 top-0"
-          @click.stop
-        >
-          <slot name="context-menu-items" />
-        </c-context-menu>
-      </transition>
-    </div>
-
-    <div
-      v-if="text"
-      class="text mt-8px line-clamp-2 break-words"
-      :class="{ 'font-semibold': selected }"
-      :title="text"
-    >
-      {{ text }}
-    </div>
-
-    <div
-      v-if="description"
-      class="description"
-    >
-      {{ description }}
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import { useDoubleClickListener } from '../../composables/useDoubleClickListener'
-
-const emit = defineEmits(['click', 'double-click'])
-const card = ref<HTMLDivElement>()
-
-const isHoveredOver = ref(false)
-
-useDoubleClickListener(card, () => {
-  emit('double-click')
-})
-
-defineProps({
-  imageSrc: {
-    type: String,
-    default: undefined,
-  },
-  text: {
-    type: String,
-    default: undefined,
-  },
-  description: {
-    type: String,
-    default: undefined,
-  },
-  selected: {
-    type: Boolean,
-    default: false,
-  },
-  icon: {
-    type: String,
-    default: undefined,
-  },
-  iconClass: {
-    type: String,
-    default: undefined,
-  },
-  iconSize: {
-    type: [String, Number],
-    default: 18,
-  },
-  backgroundColor: {
-    type: String,
-    default: 'grey-lighter',
-  },
-})
-</script>
-
-<style scoped lang="scss">
-.c-small-card {
-  width: var(--small-card-image-size);
-  min-height: 100px;
-
-  &:hover {
-    cursor: pointer;
-
-    .content {
-      box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
-    }
-  }
-
-  .content {
-    position: relative;
-    width: var(--small-card-image-size);
-    height: var(--small-card-image-size);
-    transition: box-shadow 0.2s ease-in-out;
-  }
-
-  .image {
-    width: var(--small-card-image-size);
-    height: var(--small-card-image-size);
-    object-fit: cover;
-  }
-}
-
-.is-selected {
-  outline: 2px solid var(--q-accent);
-  outline-offset: -2px;
-  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
-
-  &::before {
-    content: "";
-    width: 100%;
-    height: 100%;
-    background: var(--q-accent);
-    opacity: 0.1;
-    position: absolute;
-  }
-}
-</style>
+<template>
+  <div
+    ref="card"
+    class="c-small-card"
+    @mouseover="isHoveredOver = true"
+    @mouseleave="isHoveredOver = false"
+    @click="$emit('click', $event)"
+  >
+    <div
+      class="content flex items-center justify-center"
+      :class="[
+        `bg-${backgroundColor}`,
+        selected ? 'is-selected' : ''
+      ]"
+    >
+      <img
+        v-if="imageSrc"
+        :src="imageSrc"
+        class="image"
+      >
+
+      <q-icon
+        v-else
+        :name="icon"
+        :style="`font-size: ${iconSize}px`"
+        :class="iconClass"
+      />
+
+      <transition name="fade">
+        <c-context-menu
+          v-if="$slots['context-menu-items']"
+          v-show="isHoveredOver"
+          class="absolute right-0 top-0"
+          @click.stop
+        >
+          <slot name="context-menu-items" />
+        </c-context-menu>
+      </transition>
+    </div>
+
+    <div
+      v-if="text"
+      class="text mt-8px line-clamp-2 break-words"
+      :class="{ 'font-semibold': selected }"
+      :title="text"
+    >
+      {{ text }}
+    </div>
+
+    <div
+      v-if="description"
+      class="description"
+    >
+      {{ description }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useDoubleClickListener } from '../../composables/useDoubleClickListener'
+
+const emit = defineEmits(['click', 'double-click'])
+const card = ref<HTMLDivElement>()
+
+const isHoveredOver = ref(false)
+
+useDoubleClickListener(card, () => {
+  emit('double-click')
+})
+
+defineProps({
+  imageSrc: {
+    type: String,
+    default: undefined,
+  },
+  text: {
+    type: String,
+    default: undefined,
+  },
+  description: {
+    type: String,
+    default: undefined,
+  },
+  selected: {
+    type: Boolean,
+    default: false,
+  },
+  icon: {
+    type: String,
+    default: undefined,
+  },
+  iconClass: {
+    type: String,
+    default: undefined,
+  },
+  iconSize: {
+    type: [String, Number],
+    default: 18,
+  },
+  backgroundColor: {
+    type: String,
+    default: 'grey-lighter',
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.c-small-card {
+  width: var(--small-card-image-size);
+  min-height: 100px;
+
+  &:hover {
+    cursor: pointer;
+
+    .content {
+      box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+    }
+  }
+
+  .content {
+    position: relative;
+    width: var(--small-card-image-size);
+    height: var(--small-card-image-size);
+    transition: box-shadow 0.2s ease-in-out;
+  }
+
+  .image {
+    width: var(--small-card-image-size);
+    height: var(--small-card-image-size);
+    object-fit: cover;
+  }
+}
+
+.is-selected {
+  outline: 2px solid var(--q-accent);
+  outline-offset: -2px;
+  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+
+  &::before {
+    content: "";
+    width: 100%;
+    height: 100%;
+    background: var(--q-accent);
+    opacity: 0.1;
+    position: absolute;
+  }
+}
+</style>