@inriver/inri 1.14.0 → 1.16.0

package/src/components/CSlideEffect.vue

@@ -1,62 +1,62 @@
-<template>
-  <!-- This will be create a white background behind the slide effect to make all colors work -->
-
-  <div class="absolute overflow-hidden inset-0">
-    <div
-      class="bg-white slide-box"
-      :class="slideOffsetClasses"
-    />
-
-    <!-- Slider -->
-    <div
-      class="slide-box"
-      :class="[transitionBg, slideOffsetClasses]"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { getRelatedColors } from '../utils/colorUtils'
-
-const props = defineProps({
-  parentColor: {
-    type: String,
-    default: 'primary',
-  },
-  slideEffectColor: {
-    type: String,
-    default: undefined,
-  },
-  slideRight: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const slideOffsetClasses = computed(() => {
-  if (props.slideRight) {
-    return '-left-full group-hover:left-0 group-focus:left-0'
-  }
-
-  return '-right-full group-hover:right-0 group-focus:right-0'
-})
-
-const transitionBg = computed(() => {
-  // Override calculated color effect
-  if (props.slideEffectColor) {
-    return 'bg-' + props.slideEffectColor
-  }
-
-  const color = props.parentColor
-  const relatedColors = getRelatedColors(color)
-
-  return relatedColors ? 'bg-' + relatedColors.effectColor : `bg-${color} opacity-60`
-})
-</script>
-
-<style scoped>
-.slide-box {
-  @apply absolute transition-all duration-500 w-full h-full top-0;
-}
-</style>
+<template>
+  <!-- This will be create a white background behind the slide effect to make all colors work -->
+
+  <div class="absolute overflow-hidden inset-0">
+    <div
+      class="bg-white slide-box"
+      :class="slideOffsetClasses"
+    />
+
+    <!-- Slider -->
+    <div
+      class="slide-box"
+      :class="[transitionBg, slideOffsetClasses]"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { getRelatedColors } from '../utils/colorUtils'
+
+const props = defineProps({
+  parentColor: {
+    type: String,
+    default: 'primary',
+  },
+  slideEffectColor: {
+    type: String,
+    default: undefined,
+  },
+  slideRight: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const slideOffsetClasses = computed(() => {
+  if (props.slideRight) {
+    return '-left-full group-hover:left-0 group-focus:left-0'
+  }
+
+  return '-right-full group-hover:right-0 group-focus:right-0'
+})
+
+const transitionBg = computed(() => {
+  // Override calculated color effect
+  if (props.slideEffectColor) {
+    return 'bg-' + props.slideEffectColor
+  }
+
+  const color = props.parentColor
+  const relatedColors = getRelatedColors(color)
+
+  return relatedColors ? 'bg-' + relatedColors.effectColor : `bg-${color} opacity-60`
+})
+</script>
+
+<style scoped>
+.slide-box {
+  @apply absolute transition-all duration-500 w-full h-full top-0;
+}
+</style>

package/src/components/CSpinner.vue

@@ -1,107 +1,107 @@
-<template>
-  <div
-    class="c-spinner"
-    :style="{
-      width: size + 'px',
-      height: size + 'px',
-      position: absolute ? 'absolute' : 'relative',
-      gridGap: gap + 'px',
-    }"
-    :class="transitionColor"
-  >
-    <div />
-    <div />
-    <div />
-    <div />
-    <div />
-    <div />
-    <div />
-    <div />
-    <div />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { getRelatedColors } from '../utils/colorUtils'
-
-const props = defineProps({
-  size: {
-    type: [String, Number],
-    default: 70,
-  },
-  absolute: Boolean,
-  gap: {
-    type: [String, Number],
-    default: 2,
-  },
-  parentColor: {
-    type: String,
-    default: 'primary',
-  },
-  color: {
-    type: String,
-    default: undefined,
-  },
-})
-
-// Return fixed color or calculated color based on parent color
-const transitionColor = computed(() => {
-  if (props.color) {
-    return 'text-' + props.color
-  }
-
-  const color = props.parentColor
-  const relatedColors = getRelatedColors(color)
-
-  return relatedColors ? 'text-' + relatedColors.effectColor : `text-${color} opacity-60`
-})
-
-</script>
-
-<style lang="scss">
-// Based on:
-// https://codepen.io/joshuaward/pen/XejbZv
-
-.c-spinner {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-
-  > div {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    background: currentColor;
-    transform: scale(0);
-    transform-origin: center center;
-    animation: loader 2s infinite linear;
-
-    &:nth-of-type(1),
-    &:nth-of-type(5),
-    &:nth-of-type(9) {
-      animation-delay: 0.4s;
-    }
-
-    &:nth-of-type(4),
-    &:nth-of-type(8) {
-      animation-delay: 0.2s;
-    }
-
-    &:nth-of-type(2),
-    &:nth-of-type(6) {
-      animation-delay: 0.6s;
-    }
-
-    &:nth-of-type(3) {
-      animation-delay: 0.8s;
-    }
-  }
-}
-
-@keyframes loader {
-  0% { transform: scale(0); }
-  40% { transform: scale(1); }
-  80% { transform: scale(1); }
-  100% { transform: scale(0); }
-}
-</style>
+<template>
+  <div
+    class="c-spinner"
+    :style="{
+      width: size + 'px',
+      height: size + 'px',
+      position: absolute ? 'absolute' : 'relative',
+      gridGap: gap + 'px',
+    }"
+    :class="transitionColor"
+  >
+    <div />
+    <div />
+    <div />
+    <div />
+    <div />
+    <div />
+    <div />
+    <div />
+    <div />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { getRelatedColors } from '../utils/colorUtils'
+
+const props = defineProps({
+  size: {
+    type: [String, Number],
+    default: 70,
+  },
+  absolute: Boolean,
+  gap: {
+    type: [String, Number],
+    default: 2,
+  },
+  parentColor: {
+    type: String,
+    default: 'primary',
+  },
+  color: {
+    type: String,
+    default: undefined,
+  },
+})
+
+// Return fixed color or calculated color based on parent color
+const transitionColor = computed(() => {
+  if (props.color) {
+    return 'text-' + props.color
+  }
+
+  const color = props.parentColor
+  const relatedColors = getRelatedColors(color)
+
+  return relatedColors ? 'text-' + relatedColors.effectColor : `text-${color} opacity-60`
+})
+
+</script>
+
+<style lang="scss">
+// Based on:
+// https://codepen.io/joshuaward/pen/XejbZv
+
+.c-spinner {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+
+  > div {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background: currentColor;
+    transform: scale(0);
+    transform-origin: center center;
+    animation: loader 2s infinite linear;
+
+    &:nth-of-type(1),
+    &:nth-of-type(5),
+    &:nth-of-type(9) {
+      animation-delay: 0.4s;
+    }
+
+    &:nth-of-type(4),
+    &:nth-of-type(8) {
+      animation-delay: 0.2s;
+    }
+
+    &:nth-of-type(2),
+    &:nth-of-type(6) {
+      animation-delay: 0.6s;
+    }
+
+    &:nth-of-type(3) {
+      animation-delay: 0.8s;
+    }
+  }
+}
+
+@keyframes loader {
+  0% { transform: scale(0); }
+  40% { transform: scale(1); }
+  80% { transform: scale(1); }
+  100% { transform: scale(0); }
+}
+</style>

package/src/components/CTableActions.vue

@@ -1,16 +1,16 @@
-<template>
-  <q-td v-bind="$attrs">
-    <div class="flex flex-nowrap justify-end">
-      <slot />
-    </div>
-  </q-td>
-</template>
-
-<script setup lang="ts">
-defineProps({
-  alwaysVisible: {
-    type: Boolean,
-    default: false,
-  },
-})
-</script>
+<template>
+  <q-td v-bind="$attrs">
+    <div class="flex flex-nowrap justify-end">
+      <slot />
+    </div>
+  </q-td>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  alwaysVisible: {
+    type: Boolean,
+    default: false,
+  },
+})
+</script>