@inriver/inri 1.14.0 → 1.15.0

package/src/components/CTileBtn.vue

@@ -1,178 +1,178 @@
-<template>
-  <q-btn
-    ref="button"
-    class="c-tile-btn group"
-    :class="{
-      'c-tile-btn--small': small,
-      'pointer-events-none': loading
-    }"
-    unelevated
-    :color="color"
-    :to="to"
-    :text-color="computedTextColor"
-    :disable="disable"
-    :aria-label="tooltip || tooltipLeft || tooltipRight"
-  >
-    <c-spinner
-      v-if="loading"
-      :parent-color="color"
-      :size="small ? 24 : 60"
-      absolute
-      gap="0"
-      class="-z-1"
-    />
-
-    <c-slide-effect
-      v-if="!disable"
-      :parent-color="color"
-      :slide-effect-color="slideEffectColor"
-      slide-right
-      class="-z-1"
-    />
-
-    <!-- MDI or inri icon -->
-    <template v-if="icon">
-      <q-icon
-        :name="icon"
-        :style="`font-size: ${iconSize}px`"
-        :class="iconClass"
-      />
-    </template>
-
-    <!-- Else SVG icon (or any other content)-->
-    <slot />
-
-    <c-tooltip
-      v-if="tooltip"
-      :data-id="tooltipDataId"
-    >
-      {{ tooltip }}
-    </c-tooltip>
-
-    <c-tooltip
-      v-if="tooltipLeft"
-      :data-id="tooltipLeftDataId"
-      left
-    >
-      {{ tooltipLeft }}
-    </c-tooltip>
-
-    <c-tooltip
-      v-if="tooltipRight"
-      :data-id="tooltipRightDataId"
-      right
-    >
-      {{ tooltipRight }}
-    </c-tooltip>
-  </q-btn>
-</template>
-
-<script setup lang="ts">
-import { QBtn } from 'quasar'
-import { ref, computed } from 'vue'
-import { getRelatedColors } from '../utils/colorUtils'
-
-const props = defineProps({
-  color: {
-    type: String,
-    default: 'secondary',
-  },
-  textColor: {
-    type: String,
-    default: undefined,
-  },
-  slideEffectColor: {
-    type: String,
-    default: undefined,
-  },
-  to: {
-    type: [String, Object],
-    default: undefined,
-  },
-  icon: {
-    type: String,
-    default: undefined,
-  },
-  iconSize: {
-    type: [String, Number],
-    default: undefined,
-  },
-  iconClass: {
-    type: String,
-    default: undefined,
-  },
-  tooltip: {
-    type: String,
-    default: undefined,
-  },
-  tooltipLeft: {
-    type: String,
-    default: undefined,
-  },
-  tooltipRight: {
-    type: String,
-    default: undefined,
-  },
-  small: Boolean,
-  disable: Boolean,
-  loading: Boolean,
-})
-
-const button = ref<InstanceType<typeof QBtn> | null>(null)
-
-const iconSize = computed(() => {
-  return props.iconSize || (props.small ? 18 : 24)
-})
-
-const computedTextColor = computed(() => {
-  if (props.textColor) {
-    return props.textColor
-  }
-
-  const color = props.color
-  const relatedColors = getRelatedColors(color)
-
-  return relatedColors ? relatedColors.onColor : 'grey-darkest'
-})
-
-const buttonDataId = computed(() => {
-  return button.value?.$el.dataset?.id
-})
-
-const tooltipDataId = computed(() => {
-  return buttonDataId.value ? `${buttonDataId.value}-tooltip` : 'tile-btn-tooltip'
-})
-
-const tooltipLeftDataId = computed(() => {
-  return buttonDataId.value ? `${buttonDataId.value}-tooltip-left` : 'tile-btn-tooltip-left'
-})
-
-const tooltipRightDataId = computed(() => {
-  return buttonDataId.value ? `${buttonDataId.value}-tooltip-right` : 'tile-btn-tooltip-right'
-})
-
-</script>
-
-<style lang="scss">
-.c-tile-btn {
-  padding: 0;
-  width: 60px;
-  height: 60px;
-  border-radius: 0;
-  vertical-align: top;
-
-  .q-focus-helper {
-    display: none;
-  }
-
-  &.disabled {
-    opacity: 0.3 !important;
-  }
-}
-
-.c-tile-btn--small {
-  min-height: 24px;
-  width: 24px;
-  height: 24px;
-}
-</style>
+<template>
+  <q-btn
+    ref="button"
+    class="c-tile-btn group"
+    :class="{
+      'c-tile-btn--small': small,
+      'pointer-events-none': loading
+    }"
+    unelevated
+    :color="color"
+    :to="to"
+    :text-color="computedTextColor"
+    :disable="disable"
+    :aria-label="tooltip || tooltipLeft || tooltipRight"
+  >
+    <c-spinner
+      v-if="loading"
+      :parent-color="color"
+      :size="small ? 24 : 60"
+      absolute
+      gap="0"
+      class="-z-1"
+    />
+
+    <c-slide-effect
+      v-if="!disable"
+      :parent-color="color"
+      :slide-effect-color="slideEffectColor"
+      slide-right
+      class="-z-1"
+    />
+
+    <!-- MDI or inri icon -->
+    <template v-if="icon">
+      <q-icon
+        :name="icon"
+        :style="`font-size: ${iconSize}px`"
+        :class="iconClass"
+      />
+    </template>
+
+    <!-- Else SVG icon (or any other content)-->
+    <slot />
+
+    <c-tooltip
+      v-if="tooltip"
+      :data-id="tooltipDataId"
+    >
+      {{ tooltip }}
+    </c-tooltip>
+
+    <c-tooltip
+      v-if="tooltipLeft"
+      :data-id="tooltipLeftDataId"
+      left
+    >
+      {{ tooltipLeft }}
+    </c-tooltip>
+
+    <c-tooltip
+      v-if="tooltipRight"
+      :data-id="tooltipRightDataId"
+      right
+    >
+      {{ tooltipRight }}
+    </c-tooltip>
+  </q-btn>
+</template>
+
+<script setup lang="ts">
+import { QBtn } from 'quasar'
+import { ref, computed } from 'vue'
+import { getRelatedColors } from '../utils/colorUtils'
+
+const props = defineProps({
+  color: {
+    type: String,
+    default: 'secondary',
+  },
+  textColor: {
+    type: String,
+    default: undefined,
+  },
+  slideEffectColor: {
+    type: String,
+    default: undefined,
+  },
+  to: {
+    type: [String, Object],
+    default: undefined,
+  },
+  icon: {
+    type: String,
+    default: undefined,
+  },
+  iconSize: {
+    type: [String, Number],
+    default: undefined,
+  },
+  iconClass: {
+    type: String,
+    default: undefined,
+  },
+  tooltip: {
+    type: String,
+    default: undefined,
+  },
+  tooltipLeft: {
+    type: String,
+    default: undefined,
+  },
+  tooltipRight: {
+    type: String,
+    default: undefined,
+  },
+  small: Boolean,
+  disable: Boolean,
+  loading: Boolean,
+})
+
+const button = ref<InstanceType<typeof QBtn> | null>(null)
+
+const iconSize = computed(() => {
+  return props.iconSize || (props.small ? 18 : 24)
+})
+
+const computedTextColor = computed(() => {
+  if (props.textColor) {
+    return props.textColor
+  }
+
+  const color = props.color
+  const relatedColors = getRelatedColors(color)
+
+  return relatedColors ? relatedColors.onColor : 'grey-darkest'
+})
+
+const buttonDataId = computed(() => {
+  return button.value?.$el.dataset?.id
+})
+
+const tooltipDataId = computed(() => {
+  return buttonDataId.value ? `${buttonDataId.value}-tooltip` : 'tile-btn-tooltip'
+})
+
+const tooltipLeftDataId = computed(() => {
+  return buttonDataId.value ? `${buttonDataId.value}-tooltip-left` : 'tile-btn-tooltip-left'
+})
+
+const tooltipRightDataId = computed(() => {
+  return buttonDataId.value ? `${buttonDataId.value}-tooltip-right` : 'tile-btn-tooltip-right'
+})
+
+</script>
+
+<style lang="scss">
+.c-tile-btn {
+  padding: 0;
+  width: 60px;
+  height: 60px;
+  border-radius: 0;
+  vertical-align: top;
+
+  .q-focus-helper {
+    display: none;
+  }
+
+  &.disabled {
+    opacity: 0.3 !important;
+  }
+}
+
+.c-tile-btn--small {
+  min-height: 24px;
+  width: 24px;
+  height: 24px;
+}
+</style>

package/src/components/CTimePicker.vue

@@ -1,42 +1,42 @@
-<template>
-  <q-input
-    v-bind="dense ? $inri.inputDense : $inri.input"
-    :model-value="modelValue"
-    :label="label"
-    mask="time"
-    :rules="modelValue ? ['time'] : undefined"
-    @update:model-value="$emit('update:model-value', $event)"
-  >
-    <template #append>
-      <q-icon
-        name="mdi-clock-outline"
-        class="cursor-pointer"
-        color="grey-dark"
-        size="19px"
-      />
-    </template>
-    <q-menu>
-      <q-time
-        :model-value="modelValue"
-        format24h
-        @update:model-value="$emit('update:model-value', $event)"
-      />
-    </q-menu>
-  </q-input>
-</template>
-
-<script setup lang="ts">
-defineEmits(['update:model-value'])
-
-defineProps({
-  modelValue: {
-    type: String,
-    default: undefined,
-  },
-  label: {
-    type: String,
-    default: undefined,
-  },
-  dense: Boolean,
-})
-</script>
+<template>
+  <q-input
+    v-bind="dense ? $inri.inputDense : $inri.input"
+    :model-value="modelValue"
+    :label="label"
+    mask="time"
+    :rules="modelValue ? ['time'] : undefined"
+    @update:model-value="$emit('update:model-value', $event)"
+  >
+    <template #append>
+      <q-icon
+        name="mdi-clock-outline"
+        class="cursor-pointer"
+        color="grey-dark"
+        size="19px"
+      />
+    </template>
+    <q-menu>
+      <q-time
+        :model-value="modelValue"
+        format24h
+        @update:model-value="$emit('update:model-value', $event)"
+      />
+    </q-menu>
+  </q-input>
+</template>
+
+<script setup lang="ts">
+defineEmits(['update:model-value'])
+
+defineProps({
+  modelValue: {
+    type: String,
+    default: undefined,
+  },
+  label: {
+    type: String,
+    default: undefined,
+  },
+  dense: Boolean,
+})
+</script>

package/src/components/CToggleGridView.vue

@@ -1,26 +1,26 @@
-<template>
-  <c-tile-btn
-    data-id="toggle-grid-view-btn"
-    :icon="icon"
-    :tooltip-left="modelValue ? $t('inri.toggle_actions.table_view') : $t('inri.toggle_actions.grid_view')"
-    @click="toggleGridView"
-  />
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = defineProps({
-  modelValue: Boolean,
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const icon = computed(() => {
-  return props.modelValue ? 'inri-table-view' : 'inri-grid-view'
-})
-
-function toggleGridView () {
-  emit('update:modelValue', !props.modelValue)
-}
-</script>
+<template>
+  <c-tile-btn
+    data-id="toggle-grid-view-btn"
+    :icon="icon"
+    :tooltip-left="modelValue ? $t('inri.toggle_actions.table_view') : $t('inri.toggle_actions.grid_view')"
+    @click="toggleGridView"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps({
+  modelValue: Boolean,
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const icon = computed(() => {
+  return props.modelValue ? 'inri-table-view' : 'inri-grid-view'
+})
+
+function toggleGridView () {
+  emit('update:modelValue', !props.modelValue)
+}
+</script>

package/src/components/CToggleSidebarBtn.vue

@@ -1,19 +1,19 @@
-<template>
-  <c-tile-btn
-    data-id="toggle-sidebar-btn"
-    :icon="icon"
-    :tooltip-left="$t('inri.toggle_actions.sidebar')"
-    @click="inriStore.toggleSidebar"
-  />
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useInriStore } from '../stores/inriStore'
-
-const inriStore = useInriStore()
-
-const icon = computed(() => {
-  return inriStore.state.showSidebar ? 'mdi-fullscreen' : 'mdi-fullscreen-exit'
-})
-</script>
+<template>
+  <c-tile-btn
+    data-id="toggle-sidebar-btn"
+    :icon="icon"
+    :tooltip-left="$t('inri.toggle_actions.sidebar')"
+    @click="inriStore.toggleSidebar"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useInriStore } from '../stores/inriStore'
+
+const inriStore = useInriStore()
+
+const icon = computed(() => {
+  return inriStore.state.showSidebar ? 'mdi-fullscreen' : 'mdi-fullscreen-exit'
+})
+</script>

package/src/components/CTooltip.vue

@@ -1,44 +1,44 @@
-<template>
-  <q-tooltip
-    v-bind="position"
-  >
-    <slot />
-  </q-tooltip>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = defineProps({
-  left: Boolean,
-  right: Boolean,
-  top: Boolean,
-  bottom: Boolean,
-})
-
-const position = computed(() => {
-  if (props.left) {
-    return {
-      anchor: 'center left' as const,
-      self: 'center right' as const,
-    }
-  } else if (props.right) {
-    return {
-      anchor: 'center right' as const,
-      self: 'center left' as const,
-    }
-  } else if (props.top) {
-    return {
-      anchor: 'top middle' as const,
-      self: 'bottom middle' as const,
-    }
-  } else if (props.bottom) {
-    return {
-      anchor: 'bottom middle' as const,
-      self: 'top middle' as const,
-    }
-  }
-
-  return null
-})
-</script>
+<template>
+  <q-tooltip
+    v-bind="position"
+  >
+    <slot />
+  </q-tooltip>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps({
+  left: Boolean,
+  right: Boolean,
+  top: Boolean,
+  bottom: Boolean,
+})
+
+const position = computed(() => {
+  if (props.left) {
+    return {
+      anchor: 'center left' as const,
+      self: 'center right' as const,
+    }
+  } else if (props.right) {
+    return {
+      anchor: 'center right' as const,
+      self: 'center left' as const,
+    }
+  } else if (props.top) {
+    return {
+      anchor: 'top middle' as const,
+      self: 'bottom middle' as const,
+    }
+  } else if (props.bottom) {
+    return {
+      anchor: 'bottom middle' as const,
+      self: 'top middle' as const,
+    }
+  }
+
+  return null
+})
+</script>