@inriver/inri 1.13.0 → 1.15.0

package/src/components/CDeleteTileBtn.vue

@@ -1,52 +1,52 @@
-<template>
-  <c-tile-btn
-    data-id="delete-btn"
-    v-bind="computedTooltip"
-    icon="mdi-delete-outline"
-    slide-effect-color="red-light"
-    icon-size="20"
-  />
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
-
-const props = defineProps({
-  tooltip: {
-    type: String,
-    default: undefined,
-  },
-  tooltipLeft: {
-    type: String,
-    default: undefined,
-  },
-  tooltipRight: {
-    type: String,
-    default: undefined,
-  },
-})
-
-const computedTooltip = computed(() => {
-  if (props.tooltip) {
-    return {
-      tooltip: props.tooltip,
-    }
-  } else if (props.tooltipRight) {
-    return {
-      tooltipRight: props.tooltipRight,
-    }
-  } else if (props.tooltipLeft) {
-    return {
-      tooltipLeft: props.tooltipLeft,
-    }
-  }
-
-  // Default is just "delete" to the left
-  return {
-    tooltipLeft: t('inri.common.delete'),
-  }
-})
-</script>
+<template>
+  <c-tile-btn
+    data-id="delete-btn"
+    v-bind="computedTooltip"
+    icon="mdi-delete-outline"
+    slide-effect-color="red-light"
+    icon-size="20"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const props = defineProps({
+  tooltip: {
+    type: String,
+    default: undefined,
+  },
+  tooltipLeft: {
+    type: String,
+    default: undefined,
+  },
+  tooltipRight: {
+    type: String,
+    default: undefined,
+  },
+})
+
+const computedTooltip = computed(() => {
+  if (props.tooltip) {
+    return {
+      tooltip: props.tooltip,
+    }
+  } else if (props.tooltipRight) {
+    return {
+      tooltipRight: props.tooltipRight,
+    }
+  } else if (props.tooltipLeft) {
+    return {
+      tooltipLeft: props.tooltipLeft,
+    }
+  }
+
+  // Default is just "delete" to the left
+  return {
+    tooltipLeft: t('inri.common.delete'),
+  }
+})
+</script>

package/src/components/CDialog.vue

@@ -1,253 +1,253 @@
-<template>
-  <q-dialog
-    data-id="dialog"
-    class="c-dialog"
-    :model-value="modelValue"
-    :position="position"
-    transition-show="fade"
-    transition-hide="fade"
-    no-refocus
-    @update:model-value="cancel"
-    @keydown.ctrl.s.prevent="confirm"
-  >
-    <c-dirty-check
-      :is-dirty="isDirty"
-      :is-dialog-open="modelValue"
-    />
-
-    <q-card
-      class="dialog-card"
-      :style="{ maxWidth: maxWidth ? maxWidth : false }"
-    >
-      <q-form
-        ref="dialogForm"
-        greedy
-        class="flex flex-col flex-nowrap max-h-full"
-        @submit.prevent=""
-      >
-        <q-card-section class="px-5 pt-6 pb-4">
-          <slot name="header">
-            <h3 data-id="dialog-title">
-              {{ title }}
-            </h3>
-          </slot>
-          <div
-            v-if="text"
-            class="mt-2px"
-          >
-            {{ text }}
-          </div>
-
-          <div class="absolute right-0 top-0">
-            <slot name="corner-buttons" />
-            <c-dialog-close-btn @click="cancel" />
-          </div>
-        </q-card-section>
-
-        <q-card-section
-          v-if="$slots.default"
-          class="px-5 pb-4 overflow-y-overlay flex-1"
-          :class="contentClass"
-        >
-          <slot />
-        </q-card-section>
-
-        <div class="dialog-card-action-buttons px-5 pt-2 pb-10">
-          <c-btn
-            v-if="!hideConfirmButton"
-            data-id="dialog-confirm-button"
-            :label="confirmButtonText || $t('inri.common.confirm')"
-            :disabled="confirmIsDisabled"
-            @click="confirm"
-          >
-            <q-tooltip v-if="confirmIsDisabled">
-              {{ disabledConfirmTooltip || $t('inri.dialog.confirm_tooltip_invalid_fields') }}
-            </q-tooltip>
-          </c-btn>
-          <c-btn
-            v-if="!hideCancelButton"
-            data-id="dialog-cancel-button"
-            :label="cancelButtonText || $t('inri.common.cancel')"
-            color="surface"
-            @click="cancel"
-          />
-        </div>
-      </q-form>
-
-      <q-inner-loading :showing="isLoading">
-        <c-spinner />
-      </q-inner-loading>
-    </q-card>
-  </q-dialog>
-</template>
-
-<script setup lang="ts">
-import { PropType, computed, ref } from 'vue'
-import notify from '../plugins/notify'
-import dialog from '../plugins/dialog'
-import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
-
-const props = defineProps({
-  modelValue: Boolean,
-  title: {
-    type: String,
-    default: '',
-  },
-  isDirty: {
-    type: Boolean,
-    default: undefined,
-  },
-  disableConfirm: Boolean,
-  disabledConfirmTooltip: {
-    type: String,
-    default: undefined,
-  },
-  confirmButtonText: {
-    type: String,
-    default: undefined,
-  },
-  cancelButtonText: {
-    type: String,
-    default: undefined,
-  },
-  hideConfirmButton: Boolean,
-  hideCancelButton: Boolean,
-  ignoreDirtyCheckOnConfirm: Boolean,
-  isLoading: Boolean,
-  confirmCancelTitle: {
-    type: String,
-    default: undefined,
-  },
-  confirmCancelMessage: {
-    type: String,
-    default: undefined,
-  },
-  maxWidth: {
-    type: [String, Number],
-    default: '100%',
-  },
-  contentClass: {
-    type: String,
-    default: '',
-  },
-  text: {
-    type: String,
-    default: undefined,
-  },
-  position: {
-    type: String as PropType<'top' | 'standard' | 'right' | 'bottom' | 'left' | undefined>,
-    default: 'top',
-  },
-})
-
-const emit = defineEmits([
-  'confirm',
-  'cancel',
-])
-
-// State etc.
-const confirmIsDisabled = computed(() => {
-  return (
-    props.disableConfirm ||
-    props.isLoading ||
-    (!props.ignoreDirtyCheckOnConfirm && props.isDirty === false)
-  )
-})
-const dialogForm = ref()
-
-// Functions
-function cancel () {
-  if (props.isDirty) {
-    dialog.confirm({
-      title: props.confirmCancelTitle || t('inri.dialog.unsaved_changes_title'),
-      text: props.confirmCancelMessage || t('inri.dialog.unsaved_changes_message'),
-    }).onOk(() => {
-      emit('cancel')
-    })
-  } else {
-    emit('cancel')
-  }
-}
-
-function confirm () {
-  if (!props.disableConfirm) {
-    dialogForm.value.validate().then(success => {
-      if (success) {
-        emit('confirm')
-      }
-    })
-  } else {
-    notify.error(props.disabledConfirmTooltip || t('inri.dialog.confirm_tooltip_invalid_fields'))
-  }
-}
-
-// So that we can trigger confirm/cancel from a component ref
-defineExpose({
-  confirm,
-  cancel,
-})
-</script>
-
-<style lang="scss">
-// This css is also shared by the programmatic dialogs
-.c-dialog {
-  .q-dialog__backdrop {
-    background: var(--dialog-backdrop-color);
-  }
-
-  .q-dialog__inner > div {
-    border-radius: 0;
-  }
-
-  .dialog-card {
-    display: flex;
-    max-height: 100vh;
-    flex-direction: column;
-    width: 100%;
-    box-shadow: var(--dialog-shadow);
-  }
-
-  .dialog-card-action-buttons {
-    .c-btn {
-      width: 100%;
-    }
-
-    .c-btn + .c-btn {
-      margin-top: 16px;
-    }
-  }
-}
-
-// 'sm' displays
-@media (min-width: 640px) {
-  .c-dialog {
-    .dialog-card-action-buttons {
-      .c-btn {
-        width: auto;
-      }
-
-      .c-btn + .c-btn {
-        margin-top: 0;
-        margin-left: 10px;
-      }
-    }
-  }
-}
-
-// 'md' displays
-@media (min-width: 1024px) {
-  .c-dialog {
-    // position="top" (default) should be offset with 60px from the top
-    .q-dialog__inner.fixed-top {
-      padding: 0 60px;
-
-      .dialog-card {
-        top: 61px;
-        max-height: calc(100vh - 120px);
-      }
-    }
-  }
-}
-</style>
+<template>
+  <q-dialog
+    data-id="dialog"
+    class="c-dialog"
+    :model-value="modelValue"
+    :position="position"
+    transition-show="fade"
+    transition-hide="fade"
+    no-refocus
+    @update:model-value="cancel"
+    @keydown.ctrl.s.prevent="confirm"
+  >
+    <c-dirty-check
+      :is-dirty="isDirty"
+      :is-dialog-open="modelValue"
+    />
+
+    <q-card
+      class="dialog-card"
+      :style="{ maxWidth: maxWidth ? maxWidth : false }"
+    >
+      <q-form
+        ref="dialogForm"
+        greedy
+        class="flex flex-col flex-nowrap max-h-full"
+        @submit.prevent=""
+      >
+        <q-card-section class="px-5 pt-6 pb-4">
+          <slot name="header">
+            <h3 data-id="dialog-title">
+              {{ title }}
+            </h3>
+          </slot>
+          <div
+            v-if="text"
+            class="mt-2px"
+          >
+            {{ text }}
+          </div>
+
+          <div class="absolute right-0 top-0">
+            <slot name="corner-buttons" />
+            <c-dialog-close-btn @click="cancel" />
+          </div>
+        </q-card-section>
+
+        <q-card-section
+          v-if="$slots.default"
+          class="px-5 pb-4 overflow-y-overlay flex-1"
+          :class="contentClass"
+        >
+          <slot />
+        </q-card-section>
+
+        <div class="dialog-card-action-buttons px-5 pt-2 pb-10">
+          <c-btn
+            v-if="!hideConfirmButton"
+            data-id="dialog-confirm-button"
+            :label="confirmButtonText || $t('inri.common.confirm')"
+            :disabled="confirmIsDisabled"
+            @click="confirm"
+          >
+            <q-tooltip v-if="confirmIsDisabled">
+              {{ disabledConfirmTooltip || $t('inri.dialog.confirm_tooltip_invalid_fields') }}
+            </q-tooltip>
+          </c-btn>
+          <c-btn
+            v-if="!hideCancelButton"
+            data-id="dialog-cancel-button"
+            :label="cancelButtonText || $t('inri.common.cancel')"
+            color="surface"
+            @click="cancel"
+          />
+        </div>
+      </q-form>
+
+      <q-inner-loading :showing="isLoading">
+        <c-spinner />
+      </q-inner-loading>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed, ref } from 'vue'
+import notify from '../plugins/notify'
+import dialog from '../plugins/dialog'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const props = defineProps({
+  modelValue: Boolean,
+  title: {
+    type: String,
+    default: '',
+  },
+  isDirty: {
+    type: Boolean,
+    default: undefined,
+  },
+  disableConfirm: Boolean,
+  disabledConfirmTooltip: {
+    type: String,
+    default: undefined,
+  },
+  confirmButtonText: {
+    type: String,
+    default: undefined,
+  },
+  cancelButtonText: {
+    type: String,
+    default: undefined,
+  },
+  hideConfirmButton: Boolean,
+  hideCancelButton: Boolean,
+  ignoreDirtyCheckOnConfirm: Boolean,
+  isLoading: Boolean,
+  confirmCancelTitle: {
+    type: String,
+    default: undefined,
+  },
+  confirmCancelMessage: {
+    type: String,
+    default: undefined,
+  },
+  maxWidth: {
+    type: [String, Number],
+    default: '100%',
+  },
+  contentClass: {
+    type: String,
+    default: '',
+  },
+  text: {
+    type: String,
+    default: undefined,
+  },
+  position: {
+    type: String as PropType<'top' | 'standard' | 'right' | 'bottom' | 'left' | undefined>,
+    default: 'top',
+  },
+})
+
+const emit = defineEmits([
+  'confirm',
+  'cancel',
+])
+
+// State etc.
+const confirmIsDisabled = computed(() => {
+  return (
+    props.disableConfirm ||
+    props.isLoading ||
+    (!props.ignoreDirtyCheckOnConfirm && props.isDirty === false)
+  )
+})
+const dialogForm = ref()
+
+// Functions
+function cancel () {
+  if (props.isDirty) {
+    dialog.confirm({
+      title: props.confirmCancelTitle || t('inri.dialog.unsaved_changes_title'),
+      text: props.confirmCancelMessage || t('inri.dialog.unsaved_changes_message'),
+    }).onOk(() => {
+      emit('cancel')
+    })
+  } else {
+    emit('cancel')
+  }
+}
+
+function confirm () {
+  if (!props.disableConfirm) {
+    dialogForm.value.validate().then(success => {
+      if (success) {
+        emit('confirm')
+      }
+    })
+  } else {
+    notify.error(props.disabledConfirmTooltip || t('inri.dialog.confirm_tooltip_invalid_fields'))
+  }
+}
+
+// So that we can trigger confirm/cancel from a component ref
+defineExpose({
+  confirm,
+  cancel,
+})
+</script>
+
+<style lang="scss">
+// This css is also shared by the programmatic dialogs
+.c-dialog {
+  .q-dialog__backdrop {
+    background: var(--dialog-backdrop-color);
+  }
+
+  .q-dialog__inner > div {
+    border-radius: 0;
+  }
+
+  .dialog-card {
+    display: flex;
+    max-height: 100vh;
+    flex-direction: column;
+    width: 100%;
+    box-shadow: var(--dialog-shadow);
+  }
+
+  .dialog-card-action-buttons {
+    .c-btn {
+      width: 100%;
+    }
+
+    .c-btn + .c-btn {
+      margin-top: 16px;
+    }
+  }
+}
+
+// 'sm' displays
+@media (min-width: 640px) {
+  .c-dialog {
+    .dialog-card-action-buttons {
+      .c-btn {
+        width: auto;
+      }
+
+      .c-btn + .c-btn {
+        margin-top: 0;
+        margin-left: 10px;
+      }
+    }
+  }
+}
+
+// 'md' displays
+@media (min-width: 1024px) {
+  .c-dialog {
+    // position="top" (default) should be offset with 60px from the top
+    .q-dialog__inner.fixed-top {
+      padding: 0 60px;
+
+      .dialog-card {
+        top: 61px;
+        max-height: calc(100vh - 120px);
+      }
+    }
+  }
+}
+</style>

package/src/components/CDialogCloseBtn.vue

@@ -1,9 +1,9 @@
-<template>
-  <c-tile-btn
-    icon="mdi-close"
-    data-id="dialog-close-button"
-    :tooltip="$t('inri.common.close')"
-    small
-    class="absolute right-0 top-0"
-  />
-</template>
+<template>
+  <c-tile-btn
+    icon="mdi-close"
+    data-id="dialog-close-button"
+    :tooltip="$t('inri.common.close')"
+    small
+    class="absolute right-0 top-0"
+  />
+</template>