@inriver/inri 1.0.0

package/src/components/CSelect.vue

@@ -0,0 +1,208 @@
+<template>
+  <q-select
+    ref="selectRef"
+    class="c-select"
+    :model-value="modelValue"
+    v-bind="dense ? $inri.inputDense : $inri.input"
+    :options="internalOptions"
+    :multiple="multiple"
+    :use-input="dense || useInput"
+    :placeholder="selectedPlaceholder"
+    :hide-selected="dense"
+    :emit-value="emitValue"
+    :option-label="optionLabel"
+    :option-value="optionValue"
+    clear-icon="mdi-close"
+    @blur="clearInputValue"
+    @filter="filter"
+    @update:model-value="onModelUpdate"
+  >
+    <template #no-option>
+      <q-item>
+        <q-item-section>
+          {{ $t('inri.select.no_results') }}
+        </q-item-section>
+      </q-item>
+    </template>
+
+    <!-- select all-->
+    <template
+      v-if="multiple"
+      #before-options
+    >
+      <q-item>
+        <q-item-section>
+          <q-checkbox
+            :model-value="allSelectedStatus"
+            v-bind="$inri.checkbox"
+            :label="$t('inri.select.select_all')"
+            tabindex="-1"
+            @click="onToggleAll"
+          />
+        </q-item-section>
+      </q-item>
+    </template>
+
+    <!-- list item-->
+    <template #option="{ itemProps, opt, selected, toggleOption }">
+      <!-- multi -->
+      <q-item
+        v-if="multiple"
+        v-bind="itemProps"
+      >
+        <q-item-section>
+          <q-checkbox
+            :model-value="selected"
+            v-bind="$inri.checkbox"
+            :label="getOptionLabel(opt)"
+            tabindex="-1"
+            @click="toggleOption(opt)"
+          />
+        </q-item-section>
+      </q-item>
+
+      <!-- single -->
+      <q-item
+        v-else
+        v-bind="itemProps"
+      >
+        <q-item-section>
+          {{ getOptionLabel(opt) }}
+        </q-item-section>
+      </q-item>
+    </template>
+  </q-select>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, toRef, useAttrs } from 'vue'
+import { QSelect } from 'quasar'
+import useSelectable from '../composables/useSelectable'
+
+const emit = defineEmits(['update:modelValue'])
+const attrs = useAttrs()
+
+defineExpose({
+  clearInputValue,
+})
+
+const props = defineProps({
+  modelValue: {
+    type: [Object, String, Number, Boolean, Array],
+    default: undefined,
+  },
+  options: {
+    type: Array,
+    default: () => [],
+  },
+  multiple: Boolean,
+  dense: Boolean,
+  useInput: Boolean,
+  emitValue: Boolean,
+  optionLabel: {
+    type: String,
+    default: 'label',
+  },
+  optionValue: {
+    type: String,
+    default: 'value',
+  },
+  placeholder: {
+    type: String,
+    default: undefined,
+  },
+})
+
+// State etc.
+const internalOptions = ref(props.options)
+const selectRef = ref<QSelect>()
+const { allSelectedStatus, toggleAllItemsWithEmit } = useSelectable(toRef(props, 'options'), toRef(props, 'modelValue'))
+
+const selectedPlaceholder = computed(() => {
+  if (props.dense) {
+    const placeholder = props.placeholder || ''
+
+    if (!props.multiple) {
+      return props.modelValue ? getOptionLabel(props.modelValue) : placeholder
+    } else {
+      return Array.isArray(props.modelValue) && props.modelValue?.length ? `${placeholder} (${props.modelValue.length})` : placeholder
+    }
+  }
+
+  return props.placeholder
+})
+
+function getOptionLabel (opt) {
+  return opt[props.optionLabel] || opt
+}
+
+function filter (val, update) {
+  update(
+    () => {
+      const lowerCaseValue = val?.toLowerCase()
+      internalOptions.value = props.options.filter(option => getOptionLabel(option).toLowerCase().indexOf(lowerCaseValue) > -1)
+    },
+
+    // "ref" is the Vue reference to the QSelect
+    ref => {
+      if (val !== '' && ref.options.length > 0) {
+        // Reset optionIndex in case there is something selected
+        ref.setOptionIndex(-1)
+
+        // If it is possible to add new values then only try to focus on an exact match.
+        // If we can't add new values then always focus on the first item.
+        if (attrs.onNewValue) {
+          // Try to find a matched item.
+          const lowerCaseValue = val?.toLowerCase()
+          const optionsIndex = ref.options.findIndex(option => getOptionLabel(option).toLowerCase() === lowerCaseValue)
+
+          // If there is no exact match (casing excluded) then don't set focus.
+          // This is to allow adding new items, or it'll just toggle the focused item which can make it impossible to add new values.
+          if (optionsIndex > -1) {
+            // The q-select options starts at index 1.
+            ref.moveOptionSelection(optionsIndex + 1, true)
+          }
+        } else {
+          // The q-select options starts at index 1.
+          ref.moveOptionSelection(1, true)
+        }
+      }
+    },
+  )
+}
+
+function clearInputValue () {
+  if (selectRef.value) {
+    selectRef.value.updateInputValue('', true)
+  }
+}
+
+function onModelUpdate (val) {
+  emit('update:modelValue', val)
+}
+
+function onToggleAll (evt, emitString) {
+  if (selectRef.value) {
+    selectRef.value.hidePopup()
+  }
+
+  toggleAllItemsWithEmit(evt, emitString)
+}
+</script>
+
+<style lang="scss">
+.c-select {
+  ::placeholder {
+    color: var(--color-text);
+  }
+
+  // Prevent the 'input' text from being selected when navigating the list of options
+  ::selection {
+    background: none;
+  }
+
+  ::-moz-selection {
+    background: none;
+  }
+}
+</style>

package/src/components/CSlideEffect.vue

@@ -0,0 +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>

package/src/components/CSpinner.vue

@@ -0,0 +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>

package/src/components/CTableActions.vue

@@ -0,0 +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>

package/src/components/CTileBtn.vue

@@ -0,0 +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>

package/src/components/CTimePicker.vue

@@ -0,0 +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>

package/src/components/CToggleGridView.vue

@@ -0,0 +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>

package/src/components/CToggleSidebarBtn.vue

@@ -0,0 +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>

package/src/components/CTooltip.vue

@@ -0,0 +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>