@inriver/inri 1.14.0 → 1.16.0

package/src/components/CHeaderSearch.vue

@@ -1,142 +1,142 @@
-<template>
-  <c-tile-btn
-    icon="inri-search"
-    @click="toggleSearch"
-  />
-  <div class="bg-grey-lighter h-full flex content-center ">
-    <transition name="search-transition">
-      <div
-        v-if="showSearch"
-        class="pr-5"
-      >
-        <q-select
-          ref="selectRef"
-          v-model="selectedVal"
-          v-bind="$inri.inputDense"
-          class="w-74"
-          autofocus
-          use-input
-          hide-selected
-          hide-dropdown-icon
-          :options="options"
-          :loading="isLoading"
-          @filter="filter"
-          @blur="clearSearch"
-          @popup-show="onOpen"
-          @update:model-value="selectItem"
-        >
-          <template #append>
-            <q-icon
-              v-if="modelValue.length && !isLoading"
-              name="mdi-close"
-              color="grey-darker"
-              class="cursor-pointer"
-              size="18px"
-              @click.stop="clearSearch"
-            />
-            <q-icon
-              v-else-if="!isLoading"
-              name="inri-search"
-              color="grey-dark"
-              size="18px"
-            />
-          </template>
-
-          <template
-            v-if="modelValue.length && !isLoading"
-            #no-option
-          >
-            <q-item>
-              <q-item-section>
-                No results
-              </q-item-section>
-            </q-item>
-          </template>
-
-          <template #option="{ itemProps, opt }">
-            <q-item
-              v-bind="itemProps"
-              :to="opt"
-            >
-              <q-item-section>
-                {{ opt.meta.title }}
-              </q-item-section>
-            </q-item>
-          </template>
-        </q-select>
-      </div>
-    </transition>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, watch } from 'vue'
-import { useRouter } from 'vue-router'
-
-const emits = defineEmits(['update:modelValue'])
-
-const props = defineProps({
-  modelValue: {
-    type: String,
-    default: '',
-  },
-  options: {
-    type: Array,
-    default: undefined,
-  },
-  isLoading: Boolean,
-})
-
-const showSearch = ref(false)
-const selectedVal = ref(null)
-const selectRef = ref()
-const router = useRouter()
-
-watch(() => props.options, () => {
-  selectRef.value.refresh()
-})
-
-function onOpen () {
-  // Set first item as selected
-  selectRef.value.setOptionIndex(-1)
-  selectRef.value.moveOptionSelection(1, true)
-}
-
-function toggleSearch () {
-  showSearch.value = !showSearch.value
-}
-
-function clearSearch () {
-  selectRef.value.updateInputValue('', true, true)
-  emits('update:modelValue', '')
-}
-
-function filter (val, update) {
-  update(
-    () => {
-      emits('update:modelValue', val)
-    },
-  )
-}
-
-function selectItem () {
-  if (selectedVal.value) {
-    clearSearch()
-    showSearch.value = false
-    router.push(selectedVal.value)
-  }
-}
-</script>
-
-<style>
-.search-transition-enter-active,
-.search-transition-leave-active {
-  margin-right: 0;
-  transition: all 0.2s ease-in-out;
-}
-
-.search-transition-enter-from,
-.search-transition-leave-to {
-  margin-right: -320px;
-}
-</style>
+<template>
+  <c-tile-btn
+    icon="inri-search"
+    @click="toggleSearch"
+  />
+  <div class="bg-grey-lighter h-full flex content-center ">
+    <transition name="search-transition">
+      <div
+        v-if="showSearch"
+        class="pr-5"
+      >
+        <q-select
+          ref="selectRef"
+          v-model="selectedVal"
+          v-bind="$inri.inputDense"
+          class="w-74"
+          autofocus
+          use-input
+          hide-selected
+          hide-dropdown-icon
+          :options="options"
+          :loading="isLoading"
+          @filter="filter"
+          @blur="clearSearch"
+          @popup-show="onOpen"
+          @update:model-value="selectItem"
+        >
+          <template #append>
+            <q-icon
+              v-if="modelValue.length && !isLoading"
+              name="mdi-close"
+              color="grey-darker"
+              class="cursor-pointer"
+              size="18px"
+              @click.stop="clearSearch"
+            />
+            <q-icon
+              v-else-if="!isLoading"
+              name="inri-search"
+              color="grey-dark"
+              size="18px"
+            />
+          </template>
+
+          <template
+            v-if="modelValue.length && !isLoading"
+            #no-option
+          >
+            <q-item>
+              <q-item-section>
+                No results
+              </q-item-section>
+            </q-item>
+          </template>
+
+          <template #option="{ itemProps, opt }">
+            <q-item
+              v-bind="itemProps"
+              :to="opt"
+            >
+              <q-item-section>
+                {{ opt.meta.title }}
+              </q-item-section>
+            </q-item>
+          </template>
+        </q-select>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+
+const emits = defineEmits(['update:modelValue'])
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: '',
+  },
+  options: {
+    type: Array,
+    default: undefined,
+  },
+  isLoading: Boolean,
+})
+
+const showSearch = ref(false)
+const selectedVal = ref(null)
+const selectRef = ref()
+const router = useRouter()
+
+watch(() => props.options, () => {
+  selectRef.value.refresh()
+})
+
+function onOpen () {
+  // Set first item as selected
+  selectRef.value.setOptionIndex(-1)
+  selectRef.value.moveOptionSelection(1, true)
+}
+
+function toggleSearch () {
+  showSearch.value = !showSearch.value
+}
+
+function clearSearch () {
+  selectRef.value.updateInputValue('', true, true)
+  emits('update:modelValue', '')
+}
+
+function filter (val, update) {
+  update(
+    () => {
+      emits('update:modelValue', val)
+    },
+  )
+}
+
+function selectItem () {
+  if (selectedVal.value) {
+    clearSearch()
+    showSearch.value = false
+    router.push(selectedVal.value)
+  }
+}
+</script>
+
+<style>
+.search-transition-enter-active,
+.search-transition-leave-active {
+  margin-right: 0;
+  transition: all 0.2s ease-in-out;
+}
+
+.search-transition-enter-from,
+.search-transition-leave-to {
+  margin-right: -320px;
+}
+</style>

package/src/components/CIconBtn.vue

@@ -1,70 +1,70 @@
-<template>
-  <q-btn
-    class="c-icon-btn"
-    flat
-    round
-    :color="color"
-    :to="to"
-    :icon="icon"
-    :aria-label="tooltip || tooltipLeft || tooltipRight"
-  >
-    <c-tooltip v-if="tooltip">
-      {{ tooltip }}
-    </c-tooltip>
-
-    <c-tooltip
-      v-if="tooltipLeft"
-      left
-    >
-      {{ tooltipLeft }}
-    </c-tooltip>
-
-    <c-tooltip
-      v-if="tooltipRight"
-      right
-    >
-      {{ tooltipRight }}
-    </c-tooltip>
-    <slot />
-  </q-btn>
-</template>
-
-<script setup lang="ts">
-defineProps({
-  color: {
-    type: String,
-    default: undefined,
-  },
-  to: {
-    type: [String, Object],
-    default: undefined,
-  },
-  icon: {
-    type: String,
-    default: undefined,
-  },
-  tooltip: {
-    type: String,
-    default: undefined,
-  },
-  tooltipLeft: {
-    type: String,
-    default: undefined,
-  },
-  tooltipRight: {
-    type: String,
-    default: undefined,
-  },
-})
-</script>
-
-<style scoped lang="scss">
-$size: 32px;
-
-.c-icon-btn {
-  height: $size;
-  width: $size;
-  min-height: $size;
-  min-width: $size;
-}
-</style>
+<template>
+  <q-btn
+    class="c-icon-btn"
+    flat
+    round
+    :color="color"
+    :to="to"
+    :icon="icon"
+    :aria-label="tooltip || tooltipLeft || tooltipRight"
+  >
+    <c-tooltip v-if="tooltip">
+      {{ tooltip }}
+    </c-tooltip>
+
+    <c-tooltip
+      v-if="tooltipLeft"
+      left
+    >
+      {{ tooltipLeft }}
+    </c-tooltip>
+
+    <c-tooltip
+      v-if="tooltipRight"
+      right
+    >
+      {{ tooltipRight }}
+    </c-tooltip>
+    <slot />
+  </q-btn>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  color: {
+    type: String,
+    default: undefined,
+  },
+  to: {
+    type: [String, Object],
+    default: undefined,
+  },
+  icon: {
+    type: String,
+    default: undefined,
+  },
+  tooltip: {
+    type: String,
+    default: undefined,
+  },
+  tooltipLeft: {
+    type: String,
+    default: undefined,
+  },
+  tooltipRight: {
+    type: String,
+    default: undefined,
+  },
+})
+</script>
+
+<style scoped lang="scss">
+$size: 32px;
+
+.c-icon-btn {
+  height: $size;
+  width: $size;
+  min-height: $size;
+  min-width: $size;
+}
+</style>

package/src/components/CMenuItem.vue

@@ -1,66 +1,66 @@
-<template>
-  <q-item
-    v-close-popup
-    :clickable="!disable && !isTitle"
-    :disable="disable"
-    :to="to"
-    :class="{
-      'is-delete': isDelete,
-      'font-weight-bold': isTitle
-    }"
-    @click="triggerClick"
-  >
-    <q-item-section
-      v-if="icon && icon.length"
-      avatar
-      class="min-w-8"
-    >
-      <q-icon
-        class="inherit-text"
-        :name="icon"
-      />
-    </q-item-section>
-    <q-item-section>
-      <template v-if="text">
-        {{ text }}
-      </template>
-      <slot v-else />
-    </q-item-section>
-  </q-item>
-</template>
-
-<script setup lang="ts">
-defineProps({
-  icon: {
-    type: String,
-    default: undefined,
-  },
-  text: {
-    type: String,
-    default: undefined,
-  },
-  to: {
-    type: String,
-    default: undefined,
-  },
-  isDelete: Boolean,
-  isTitle: Boolean,
-  disable: Boolean,
-})
-
-const emit = defineEmits(['click'])
-
-function triggerClick (e) {
-  emit('click', e)
-}
-</script>
-
-<style scoped lang="scss">
-.is-delete:hover {
-  background: var(--color-red);
-
-  > * {
-    color: white;
-  }
-}
-</style>
+<template>
+  <q-item
+    v-close-popup
+    :clickable="!disable && !isTitle"
+    :disable="disable"
+    :to="to"
+    :class="{
+      'is-delete': isDelete,
+      'font-weight-bold': isTitle
+    }"
+    @click="triggerClick"
+  >
+    <q-item-section
+      v-if="icon && icon.length"
+      avatar
+      class="min-w-8"
+    >
+      <q-icon
+        class="inherit-text"
+        :name="icon"
+      />
+    </q-item-section>
+    <q-item-section>
+      <template v-if="text">
+        {{ text }}
+      </template>
+      <slot v-else />
+    </q-item-section>
+  </q-item>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  icon: {
+    type: String,
+    default: undefined,
+  },
+  text: {
+    type: String,
+    default: undefined,
+  },
+  to: {
+    type: String,
+    default: undefined,
+  },
+  isDelete: Boolean,
+  isTitle: Boolean,
+  disable: Boolean,
+})
+
+const emit = defineEmits(['click'])
+
+function triggerClick (e) {
+  emit('click', e)
+}
+</script>
+
+<style scoped lang="scss">
+.is-delete:hover {
+  background: var(--color-red);
+
+  > * {
+    color: white;
+  }
+}
+</style>

package/src/components/CPageContainer.vue

@@ -1,11 +1,11 @@
-<template>
-  <q-page-container>
-    <div class="relative">
-      <q-page class="overflow-hidden">
-        <router-view v-slot="{ Component }">
-          <component :is="Component" />
-        </router-view>
-      </q-page>
-    </div>
-  </q-page-container>
-</template>
+<template>
+  <q-page-container>
+    <div class="relative">
+      <q-page class="overflow-hidden">
+        <router-view v-slot="{ Component }">
+          <component :is="Component" />
+        </router-view>
+      </q-page>
+    </div>
+  </q-page-container>
+</template>

package/src/components/CPageError.vue

@@ -1,24 +1,24 @@
-<template>
-  <div class="h-full flex items-center justify-center">
-    <h1 class="text-primary text-center mb-20">
-      {{ error.title }}
-      <br>
-      {{ error.msg }}
-      <br>
-      <span
-        v-if="error.isAxiosError"
-        class="text-grey-dark text-body1"
-      >
-        {{ $t('inri.error.error_code', { code: error.status }) }}
-      </span>
-    </h1>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { BaseError } from '../plugins/errors/Errors'
-
-defineProps <{
-  error: BaseError
-}>()
-</script>
+<template>
+  <div class="h-full flex items-center justify-center">
+    <h1 class="text-primary text-center mb-20">
+      {{ error.title }}
+      <br>
+      {{ error.msg }}
+      <br>
+      <span
+        v-if="error.isAxiosError"
+        class="text-grey-dark text-body1"
+      >
+        {{ $t('inri.error.error_code', { code: error.status }) }}
+      </span>
+    </h1>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { BaseError } from '../plugins/errors/Errors'
+
+defineProps <{
+  error: BaseError
+}>()
+</script>

package/src/components/CPageSpinner.vue

@@ -1,18 +1,18 @@
-<template>
-  <q-inner-loading
-    :showing="showing || inriStore.state.showPageSpinner"
-    class="z-max"
-  >
-    <c-spinner />
-  </q-inner-loading>
-</template>
-
-<script setup lang="ts">
-import { useInriStore } from '../stores/inriStore'
-
-defineProps({
-  showing: Boolean,
-})
-
-const inriStore = useInriStore()
-</script>
+<template>
+  <q-inner-loading
+    :showing="showing || inriStore.state.showPageSpinner"
+    class="z-max"
+  >
+    <c-spinner />
+  </q-inner-loading>
+</template>
+
+<script setup lang="ts">
+import { useInriStore } from '../stores/inriStore'
+
+defineProps({
+  showing: Boolean,
+})
+
+const inriStore = useInriStore()
+</script>