@inriver/inri 1.14.0 → 1.16.0

package/src/components/CSearch.vue

@@ -1,45 +1,45 @@
-<template>
-  <q-input
-    v-bind="dense ? $inri.inputDense : $inri.input"
-    :model-value="modelValue"
-    :label="label"
-    :placeholder="placeholder"
-    @update:model-value="$emit('update:model-value', $event)"
-  >
-    <template #append>
-      <q-icon
-        v-if="modelValue?.length"
-        name="mdi-close"
-        color="grey-darker"
-        class="cursor-pointer"
-        size="18px"
-        @click.stop="$emit('update:model-value', '')"
-      />
-      <q-icon
-        v-else
-        name="inri-search"
-        color="grey-dark"
-        size="18px"
-      />
-    </template>
-  </q-input>
-</template>
-
-<script setup lang="ts">
-import type { QInputProps } from 'quasar'
-
-defineEmits(['update:model-value'])
-
-interface Props extends QInputProps {
-  modelValue: string,
-  label: string,
-  placeholder?: string,
-  dense?: boolean,
-}
-
-withDefaults(defineProps<Props>(), {
-  modelValue: undefined,
-  label: undefined,
-  placeholder: undefined,
-})
-</script>
+<template>
+  <q-input
+    v-bind="dense ? $inri.inputDense : $inri.input"
+    :model-value="modelValue"
+    :label="label"
+    :placeholder="placeholder"
+    @update:model-value="$emit('update:model-value', $event)"
+  >
+    <template #append>
+      <q-icon
+        v-if="modelValue?.length"
+        name="mdi-close"
+        color="grey-darker"
+        class="cursor-pointer"
+        size="18px"
+        @click.stop="$emit('update:model-value', '')"
+      />
+      <q-icon
+        v-else
+        name="inri-search"
+        color="grey-dark"
+        size="18px"
+      />
+    </template>
+  </q-input>
+</template>
+
+<script setup lang="ts">
+import type { QInputProps } from 'quasar'
+
+defineEmits(['update:model-value'])
+
+interface Props extends QInputProps {
+  modelValue: string,
+  label: string,
+  placeholder?: string,
+  dense?: boolean,
+}
+
+withDefaults(defineProps<Props>(), {
+  modelValue: undefined,
+  label: undefined,
+  placeholder: undefined,
+})
+</script>

package/src/components/CSection.vue

@@ -1,29 +1,29 @@
-<template>
-  <section
-    class="c-section"
-    :class="{
-      'overflow-y-overlay': scroll || main,
-      'flex-1': flex || main,
-      'border-t': borderT,
-      'border-b': borderB,
-    }"
-  >
-    <slot />
-  </section>
-</template>
-
-<script setup lang="ts">
-defineProps({
-  scroll: Boolean,
-  flex: Boolean,
-  main: Boolean,
-  borderT: Boolean,
-  borderB: Boolean,
-})
-</script>
-
-<style>
-.c-section {
-  @apply py-7 px-6;
-}
-</style>
+<template>
+  <section
+    class="c-section"
+    :class="{
+      'overflow-y-overlay': scroll || main,
+      'flex-1': flex || main,
+      'border-t': borderT,
+      'border-b': borderB,
+    }"
+  >
+    <slot />
+  </section>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  scroll: Boolean,
+  flex: Boolean,
+  main: Boolean,
+  borderT: Boolean,
+  borderB: Boolean,
+})
+</script>
+
+<style>
+.c-section {
+  @apply py-7 px-6;
+}
+</style>

package/src/components/CSectionTitle.vue

@@ -1,8 +1,8 @@
-<template>
-  <div
-    class="text-h3 mb-4"
-    data-id="section-title"
-  >
-    <slot />
-  </div>
-</template>
+<template>
+  <div
+    class="text-h3 mb-4"
+    data-id="section-title"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/CSelect.vue

@@ -1,208 +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>
+<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>