quasar-ui-danx 0.0.11 → 0.0.12

package/src/components/Utility/Dialogs/ConfirmDialog.vue

@@ -1,95 +1,95 @@
 <template>
-  <QDialog
-    :full-height="fullHeight"
-    :full-width="fullWidth"
-    :model-value="!!modelValue"
-    :no-backdrop-dismiss="!backdropDismiss"
-    :maximized="maximized"
-    @update:model-value="onClose"
+  <q-dialog
+      :full-height="fullHeight"
+      :full-width="fullWidth"
+      :model-value="!!modelValue"
+      :no-backdrop-dismiss="!backdropDismiss"
+      :maximized="maximized"
+      @update:model-value="onClose"
   >
-    <QCard class="flex flex-col flex-nowrap">
-      <QCardSection
-        v-if="title || $slots.title"
-        class="pl-6 pr-10 border-b border-gray-medium"
+    <q-card class="flex flex-col flex-nowrap">
+      <q-card-section
+          v-if="title || $slots.title"
+          class="pl-6 pr-10 border-b border-gray-medium"
       >
         <h3
-          class="font-normal flex items-center"
-          :class="titleClass"
+            class="font-normal flex items-center"
+            :class="titleClass"
         >
           <slot name="title">{{ title }}</slot>
         </h3>
         <div
-          v-if="subtitle"
-          class="mt-1 text-sm"
+            v-if="subtitle"
+            class="mt-1 text-sm"
         >{{ subtitle }}
         </div>
-      </QCardSection>
-      <QCardSection v-if="$slots.toolbar">
+      </q-card-section>
+      <q-card-section v-if="$slots.toolbar">
         <slot name="toolbar" />
-      </QCardSection>
-      <QCardSection
-        v-if="content || $slots.default"
-        class="px-6 bg-neutral-plus-7 flex-grow max-h-full overflow-y-auto"
-        :class="contentClass"
+      </q-card-section>
+      <q-card-section
+          v-if="content || $slots.default"
+          class="px-6 bg-neutral-plus-7 flex-grow max-h-full overflow-y-auto"
+          :class="contentClass"
       >
         <slot>{{ content }}</slot>
-      </QCardSection>
+      </q-card-section>
       <div class="flex px-6 py-4 border-t border-gray-medium">
         <div class="flex-grow">
-          <QBtn
-            :label="cancelText"
-            class="action-btn btn-white-gray"
-            @click="onClose"
+          <q-btn
+              :label="cancelText"
+              class="action-btn btn-white-gray"
+              @click="onClose"
           >
             <slot name="cancel-text" />
-          </QBtn>
+            </q-btn>
         </div>
         <slot name="actions" />
         <div v-if="!hideConfirm">
-          <QBtn
-            :label="$slots['confirm-text'] ? '' : confirmText"
-            class="action-btn ml-4"
-            :class="confirmClass"
-            :loading="isSaving"
-            :disable="disabled"
-            data-testid="confirm-button"
-            @click="onConfirm"
+          <q-btn
+              :label="$slots['confirm-text'] ? '' : confirmText"
+              class="action-btn ml-4"
+              :class="confirmClass"
+              :loading="isSaving"
+              :disable="disabled"
+              data-testid="confirm-button"
+              @click="onConfirm"
           >
             <slot name="confirm-text" />
-          </QBtn>
+          </q-btn>
         </div>
       </div>
       <a
-        class="absolute top-0 right-0 p-4 text-black"
-        @click="onClose"
+          class="absolute top-0 right-0 p-4 text-black"
+          @click="onClose"
       >
         <CloseIcon class="w-5" />
       </a>
-    </QCard>
-  </QDialog>
+    </q-card>
+  </q-dialog>
 </template>
 
 <script setup>
-import { XIcon as CloseIcon } from "@heroicons/vue/outline";
+import { XIcon as CloseIcon } from '@heroicons/vue/outline';
 
-const emit = defineEmits(["update:model-value", "confirm", "close"]);
+const emit = defineEmits(['update:model-value', 'confirm', 'close']);
 const props = defineProps({
   modelValue: { type: [String, Boolean, Object], default: true },
   title: {
     type: String,
-    default: ""
+    default: ''
   },
   titleClass: {
     type: String,
-    default: ""
+    default: ''
   },
   subtitle: {
     type: String,
-    default: ""
+    default: ''
   },
   content: {
     type: String,
-    default: ""
+    default: ''
   },
   backdropDismiss: Boolean,
   maximized: Boolean,
@@ -101,32 +101,32 @@ const props = defineProps({
   hideConfirm: Boolean,
   confirmText: {
     type: String,
-    default: "Confirm"
+    default: 'Confirm'
   },
   cancelText: {
     type: String,
-    default: "Cancel"
+    default: 'Cancel'
   },
   confirmClass: {
     type: String,
-    default: "bg-blue-base text-white"
+    default: 'bg-blue-base text-white'
   },
   contentClass: {
     type: String,
-    default: ""
+    default: ''
   }
 });
 
 function onConfirm() {
-  emit("confirm");
+  emit('confirm');
 
   if (props.closeOnConfirm) {
-    emit("close");
+    emit('close');
   }
 }
 
 function onClose() {
-  emit("update:model-value", false);
-  emit("close");
+  emit('update:model-value', false);
+  emit('close');
 }
 </script>

package/src/components/Utility/Dialogs/FullScreenDialog.vue

@@ -1,29 +1,29 @@
 <template>
-  <QDialog
-    :model-value="modelValue"
-    maximized
-    transition-show="slide-up"
-    transition-hide="slide-down"
-    @update:model-value="onClose"
+  <q-dialog
+      :model-value="modelValue"
+      maximized
+      transition-show="slide-up"
+      transition-hide="slide-down"
+      @update:model-value="onClose"
   >
     <div class="flex justify-center min-w-xs" :class="computedClass">
       <div
-        v-if="closeable"
-        v-close-popup
-        class="p-4 m-4 absolute-top-right top right cursor-pointer"
+          v-if="closeable"
+          v-close-popup
+          class="p-4 m-4 absolute-top-right top right cursor-pointer"
       >
         <XIcon class="w-5 h-5" />
       </div>
       <slot />
     </div>
-  </QDialog>
+    </q-dialog>
 </template>
 
 <script setup>
-import { XIcon } from "src/svg";
-import { computed } from "vue";
+import { XIcon } from '@ui/svg';
+import { computed } from 'vue';
 
-const emit = defineEmits(["update:model-value", "close"]);
+const emit = defineEmits(['update:model-value', 'close']);
 const props = defineProps({
   modelValue: Boolean,
   center: Boolean,
@@ -33,14 +33,14 @@ const props = defineProps({
 
 let computedClass = computed(() => {
   return {
-    "bg-blue-base text-white": props.blue,
-    "bg-white text-gray-base": !props.blue,
-    "items-center": props.center
+    'bg-blue-base text-white': props.blue,
+    'bg-white text-gray-base': !props.blue,
+    'items-center': props.center
   };
 });
 
 function onClose() {
-  emit("update:model-value", false);
-  emit("close");
+  emit('update:model-value', false);
+  emit('close');
 }
 </script>

package/src/components/Utility/Dialogs/FullscreenCarouselDialog.vue

@@ -0,0 +1,105 @@
+<template>
+  <q-dialog
+      :model-value="true"
+      maximized
+      @update:model-value="$emit('close')"
+      @keyup.left="carousel.previous()"
+      @keyup.right="carousel.next()"
+  >
+    <div class="absolute top-0 left-0 w-full h-full">
+      <q-carousel
+          ref="carousel"
+          v-model="currentSlide"
+          height="100%"
+          swipeable
+          animated
+          :thumbnails="files.length > 1"
+          infinite
+          class="carousel"
+      >
+        <q-carousel-slide
+            v-for="file in files"
+            :key="'file-' + file.id"
+            :name="file.id"
+            :img-src="getThumbUrl(file)"
+        >
+          <div class="slide-image">
+            <template v-if="isVideo(file)">
+              <video
+                  class="max-h-full w-full"
+                  controls
+              >
+                <source
+                    :src="file.url + '#t=0.1'"
+                    :type="file.mime"
+                />
+              </video>
+            </template>
+            <img v-else :alt="file.filename" :src="file.url" />
+          </div>
+        </q-carousel-slide>
+        </q-carousel>
+        <CloseIcon
+            class="absolute top-4 right-4 cursor-pointer text-white w-8 h-8"
+            @click="$emit('close')"
+        />
+    </div>
+    </q-dialog>
+</template>
+<script setup>
+import { XIcon as CloseIcon } from '@ui/svg';
+import { ref } from 'vue';
+
+defineEmits(['close']);
+const props = defineProps({
+  files: {
+    type: Array,
+    default: () => []
+  },
+  defaultSlide: {
+    type: String,
+    default: ''
+  }
+});
+
+const carousel = ref(null);
+const currentSlide = ref(props.defaultSlide);
+function isVideo(file) {
+  return file.mime?.startsWith('video');
+}
+function getThumbUrl(file) {
+  if (file.thumb) {
+    return file.thumb.url;
+  } else if (isVideo(file)) {
+    // Base64 encode a PlayIcon for the placeholder image
+    return `data:image/svg+xml;base64,${btoa(
+        `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M0 0h24v24H0z" fill="none"/><path d="M8 5v14l11-7z"/></svg>`
+    )}`;
+  } else {
+    return file.url;
+  }
+}
+</script>
+<style scoped lang="scss">
+.slide-image {
+  width: 100%;
+  height: 100%;
+  background: black;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  img {
+    max-height: 100%;
+    max-width: 100%;
+    object-fit: contain;
+  }
+}
+
+.carousel {
+  :deep(.q-carousel__navigation--bottom) {
+    position: relative;
+    bottom: 8em;
+  }
+}
+</style>

package/src/components/Utility/Dialogs/InfoDialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <QDialog
+  <q-dialog
     :full-height="fullHeight"
     :full-width="fullWidth"
     :model-value="!!modelValue"
@@ -7,8 +7,8 @@
     :maximized="maximized"
     @update:model-value="onClose"
   >
-    <QCard class="flex flex-col flex-nowrap">
-      <QCardSection
+    <q-card class="flex flex-col flex-nowrap">
+      <q-card-section
         v-if="title || $slots.title"
         class="pl-6 pr-10 border-b border-gray-medium"
       >
@@ -23,24 +23,24 @@
           class="mt-1 text-sm"
         >{{ subtitle }}
         </div>
-      </QCardSection>
-      <QCardSection
+      </q-card-section>
+      <q-card-section
         v-if="content || $slots.default"
         class="px-6 bg-neutral-plus-7 flex-grow max-h-full overflow-y-auto"
       >
         <slot>{{ content }}</slot>
-      </QCardSection>
+      </q-card-section>
       <div
         class="flex items-center justify-center px-6 py-4 border-t border-gray-medium"
       >
         <div class="flex-grow text-right">
-          <QBtn
+          <q-btn
             :label="doneText"
             class="action-btn btn-white-gray"
             @click="onClose"
           >
             <slot name="done-text" />
-          </QBtn>
+          </q-btn>
         </div>
       </div>
       <a
@@ -49,8 +49,8 @@
       >
         <CloseIcon class="w-5" />
       </a>
-    </QCard>
-  </QDialog>
+    </q-card>
+  </q-dialog>
 </template>
 
 <script setup>

package/src/components/Utility/Dialogs/InputDialog.vue

@@ -1,33 +1,33 @@
 <template>
   <ConfirmDialog
-    v-bind="$props"
-    @confirm="$emit('confirm', newInput)"
-    @close="$emit('close', $event)"
+      v-bind="$props"
+      @confirm="$emit('confirm', newInput)"
+      @close="$emit('close', $event)"
   >
     <slot>
-      <QInput
-        v-model="newInput"
-        type="number"
-        class="w-full"
-        @input="$emit('update:input', $event)"
+      <q-input
+          v-model="newInput"
+          type="number"
+          class="w-full"
+          @input="$emit('update:input', $event)"
       />
     </slot>
   </ConfirmDialog>
 </template>
 <script setup>
-import ConfirmDialog from "danx/src/components/Utility/Dialogs/ConfirmDialog";
-import { ref } from "vue";
+import { ref } from 'vue';
+import ConfirmDialog from './ConfirmDialog';
 
-defineEmits(["confirm", "close", "update:input"]);
+defineEmits(['confirm', 'close', 'update:input']);
 const props = defineProps({
   ...ConfirmDialog.props,
   title: {
     type: String,
-    default: "Enter Value"
+    default: 'Enter Value'
   },
   input: {
     type: [Number, String],
-    default: ""
+    default: ''
   }
 });
 

package/src/components/Utility/ImagePreview.vue

@@ -0,0 +1,192 @@
+<template>
+  <div class="relative flex justify-center bg-neutral-plus-7" :class="{'rounded-2xl': !square}">
+    <template v-if="computedImage">
+      <div
+          class="grow h-full overflow-hidden"
+          :class="{'rounded-2xl': !square}"
+          @click="showPreview = true"
+      >
+        <div
+            v-if="isVideo"
+            class="relative max-h-full max-w-full w-full flex justify-center"
+        >
+          <video
+              class="max-h-full"
+              preload="auto"
+          >
+            <source
+                :src="previewUrl + '#t=0.1'"
+                :type="mimeType"
+            />
+          </video>
+          <button class="play-button text-blue-lighter">
+            <PlayIcon class="w-16" />
+          </button>
+        </div>
+        <div
+            v-if="isPdf && !thumbUrl"
+            class="flex items-center justify-center h-full"
+        >
+          <PdfIcon class="w-24" />
+        </div>
+        <q-img
+            v-else
+            fit="scale-down"
+            class="non-selectable max-h-full max-w-full h-full"
+            :src="(thumbUrl || previewUrl) + '#t=0.1'"
+            preload="auto"
+            data-testid="previewed-image"
+            data-dusk="previewed-image"
+        />
+      </div>
+      <div
+          v-if="$slots['action-button']"
+          class="action-button"
+      >
+        <slot name="action-button" />
+      </div>
+      <div
+          v-if="image && image.progress !== undefined"
+          class="absolute-bottom w-full"
+      >
+        <q-linear-progress
+            :value="image.progress"
+            size="15px"
+            color="green-base"
+            stripe
+        />
+      </div>
+    </template>
+    <template v-else>
+      <slot name="missing">
+        <component
+            :is="missingIcon"
+            class="w-full h-full p-2 text-gray-medium"
+        />
+      </slot>
+    </template>
+
+    <div class="absolute top-1 right-1 flex items-center justify-between space-x-1">
+      <q-btn
+          v-if="downloadable && computedImage?.url"
+          size="sm"
+          class="!p-1 opacity-70 hover:opacity-100"
+          :class="downloadButtonClass"
+          @click.stop="download(computedImage.url)"
+      >
+        <DownloadIcon class="w-4 h-5" />
+        </q-btn>
+
+        <q-btn
+            v-if="removable"
+            size="sm"
+            class="bg-red-dark text-white !p-1 opacity-50 hover:opacity-100"
+            @click.stop="onRemove"
+        >
+          <div v-if="isConfirmingRemove" class="font-bold text-[1rem] leading-[1.2rem]">?</div>
+          <RemoveIcon v-else class="w-3" />
+          </q-btn>
+    </div>
+
+    <FullScreenCarouselDialog
+        v-if="showPreview && !disabled"
+        :files="relatedFiles || [computedImage]"
+        :default-slide="computedImage.id"
+        @close="showPreview = false"
+    />
+  </div>
+</template>
+
+<script setup>
+import { DownloadIcon, PlayIcon } from '@heroicons/vue/outline';
+import { FullScreenCarouselDialog } from '@ui/components';
+import { download } from '@ui/helpers';
+import { ImageIcon, PdfIcon, TrashIcon as RemoveIcon } from '@ui/svg';
+import { computed, ref } from 'vue';
+
+const emit = defineEmits(['remove']);
+const props = defineProps({
+  src: {
+    type: String,
+    default: ''
+  },
+  image: {
+    type: Object,
+    default: null
+  },
+  relatedFiles: {
+    type: Array,
+    default: null
+  },
+  missingIcon: {
+    type: [Function, Object],
+    default: ImageIcon
+  },
+  downloadButtonClass: {
+    type: String,
+    default: 'bg-blue-base text-white'
+  },
+  downloadable: Boolean,
+  removable: Boolean,
+  disabled: Boolean,
+  square: Boolean
+});
+
+const showPreview = ref(false);
+const computedImage = computed(() => {
+  if (props.image) {
+    return props.image;
+  } else if (props.src) {
+    return {
+      id: props.src,
+      url: props.src,
+      type: 'image/' + props.src.split('.').pop().toLowerCase()
+    };
+  }
+  return null;
+});
+const mimeType = computed(
+    () => computedImage.value.type || computedImage.value.mime
+);
+const isVideo = computed(() => mimeType.value.match(/^video\//));
+const isPdf = computed(() => mimeType.value.match(/^application\/pdf/));
+const previewUrl = computed(
+    () => computedImage.value.transcodes?.compress?.url || computedImage.value.blobUrl || computedImage.value.url
+);
+const thumbUrl = computed(() => {
+  return computedImage.value.transcodes?.thumb?.url;
+});
+
+const isConfirmingRemove = ref(false);
+function onRemove() {
+  if (!isConfirmingRemove.value) {
+    isConfirmingRemove.value = true;
+    setTimeout(() => {
+      isConfirmingRemove.value = false;
+    }, 2000);
+  } else {
+    emit('remove');
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.action-button {
+  position: absolute;
+  bottom: 1.5em;
+  right: 1em;
+  z-index: 1;
+}
+
+.play-button {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+</style>