quasar-ui-danx 0.0.10 → 0.0.12

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

@@ -0,0 +1,92 @@
+<template>
+  <q-dialog
+    :full-height="fullHeight"
+    :full-width="fullWidth"
+    :model-value="!!modelValue"
+    :no-backdrop-dismiss="!backdropDismiss"
+    :maximized="maximized"
+    @update:model-value="onClose"
+  >
+    <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"
+        >
+          <slot name="title">{{ title }}</slot>
+        </h3>
+        <div
+          v-if="subtitle"
+          class="mt-1 text-sm"
+        >{{ subtitle }}
+        </div>
+      </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>
+      </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">
+          <q-btn
+            :label="doneText"
+            class="action-btn btn-white-gray"
+            @click="onClose"
+          >
+            <slot name="done-text" />
+          </q-btn>
+        </div>
+      </div>
+      <a
+        class="absolute top-0 right-0 p-4 text-black"
+        @click="onClose"
+      >
+        <CloseIcon class="w-5" />
+      </a>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup>
+import { XIcon as CloseIcon } from "@heroicons/vue/outline";
+
+const emit = defineEmits(["update:model-value", "close"]);
+defineProps({
+  modelValue: { type: [Boolean, Object], default: true },
+  title: {
+    type: String,
+    default: ""
+  },
+  titleClass: {
+    type: String,
+    default: ""
+  },
+  subtitle: {
+    type: String,
+    default: ""
+  },
+  content: {
+    type: String,
+    default: ""
+  },
+  backdropDismiss: Boolean,
+  maximized: Boolean,
+  fullWidth: Boolean,
+  fullHeight: Boolean,
+  doneText: {
+    type: String,
+    default: "Done"
+  }
+});
+
+function onClose() {
+  emit("update:model-value", false);
+  emit("close");
+}
+</script>

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

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

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>

package/src/components/Utility/Popover/PopoverMenu.vue

@@ -0,0 +1,64 @@
+<template>
+  <a
+      class="p-3 actionable"
+      :class="{'opacity-50 cursor-not-allowed': disabled}"
+  >
+    <Transition
+        mode="out-in"
+        :duration="150"
+    >
+      <q-spinner
+          v-if="loading"
+          class="w-4 h-4 text-black"
+      />
+      <MenuIcon
+          v-else
+          class="w-4 text-black"
+      />
+    </Transition>
+    <q-menu
+        v-if="!disabled"
+        auto-close
+    >
+      <q-list>
+        <template v-for="item in items">
+          <a
+              v-if="item.url"
+              :key="item.url"
+              class="q-item"
+              target="_blank"
+              :href="item.url"
+              :class="item.class"
+          >
+            {{ item.label }}
+          </a>
+          <q-item
+              v-else
+              :key="item.action"
+              clickable
+              :class="item.class"
+              @click="$emit('action', item.action)"
+          >
+            {{ item.label }}
+            </q-item>
+        </template>
+        </q-list>
+        </q-menu>
+  </a>
+</template>
+<script setup>
+import { DotsVerticalIcon as MenuIcon } from '@heroicons/vue/outline';
+
+defineEmits(['action']);
+defineProps({
+  items: {
+    type: Array,
+    required: true,
+    validator(items) {
+      return items.every((item) => item.label && (item.url || item.action));
+    }
+  },
+  disabled: Boolean,
+  loading: Boolean
+});
+</script>

package/src/components/Utility/Transitions/ListTransition.vue

@@ -0,0 +1,50 @@
+<template>
+  <TransitionGroup tag="div" :name="name" class="relative">
+    <slot />
+  </TransitionGroup>
+</template>
+
+<script setup>
+defineProps({
+  name: {
+    type: String,
+    default: "fade-list"
+  }
+});
+</script>
+
+<style lang="scss">
+[class*="list-move"], /* apply transition to moving elements */
+[class*="list-enter-active"],
+[class*=".list-leave-active"] {
+  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
+}
+
+/* ensure leaving items are taken out of layout flow so that moving
+   animations can be calculated correctly. */
+[class*="list-leave-active"] {
+  position: absolute !important;
+}
+
+/** Default List */
+.list-enter-from,
+.list-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+/** Fade */
+.fade-list-enter-from,
+.fade-list-leave-to {
+  opacity: 0;
+  transform: scaleY(0.01) translate(30px, 0);
+}
+
+/** Fade Down */
+.fade-down-list-enter-from,
+.fade-down-list-leave-to {
+  opacity: 0;
+  transform-origin: top;
+  transform: translateY(30px);
+}
+</style>

package/src/components/Utility/Transitions/SlideTransition.vue

@@ -0,0 +1,63 @@
+<template>
+  <Transition :name="name">
+    <slot />
+  </Transition>
+</template>
+
+<script setup>
+defineProps({
+  name: {
+    type: String,
+    default: "slide"
+  }
+});
+</script>
+<style lang="scss">
+.slide-enter-active,
+.slide-leave-active,
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition: all 0.3s linear;
+  width: 100%;
+}
+
+.slide-right-enter-active,
+.slide-enter-active {
+  position: absolute !important;
+  top: 0;
+}
+
+/** Slide Left (default) */
+.slide-enter-from {
+  right: -120%;
+}
+
+.slide-enter-to {
+  right: 0;
+}
+
+.slide-leave-to {
+  left: -120%;
+}
+
+.slide-leave-from {
+  left: 0;
+}
+
+/** Slide Right */
+.slide-right-enter-from {
+  left: -120%;
+}
+
+.slide-right-enter-to {
+  left: 0;
+}
+
+.slide-right-leave-to {
+  right: -120%;
+}
+
+.slide-right-leave-from {
+  right: 0;
+}
+</style>

package/src/components/Utility/Transitions/StaggeredListTransition.vue

@@ -0,0 +1,97 @@
+<template>
+  <TransitionGroup
+      ref="list"
+      tag="div"
+      appear
+      :css="false"
+      @before-enter="onBeforeEnter"
+      @enter="onEnter"
+      @leave="onLeave"
+  >
+    <slot />
+  </TransitionGroup>
+</template>
+
+<script setup>
+import gsap from 'gsap';
+import { computed, ref } from 'vue';
+
+const props = defineProps({
+  height: {
+    type: [String, Number],
+    default: 'auto'
+  },
+  duration: {
+    type: Number,
+    default: 0.5
+  },
+  delayOffset: {
+    type: Number,
+    default: 0.5
+  },
+  disabled: Boolean
+});
+
+const list = ref(null);
+const indexDelay = computed(() => {
+  return props.delayOffset / list.value.$el.children.length;
+});
+
+function onBeforeEnter(el) {
+  if (props.disabled) {
+    return;
+  }
+  el.style.opacity = 0;
+  el.style.height = 0;
+}
+
+function onEnter(el, onComplete) {
+  if (props.disabled) {
+    onComplete();
+    return;
+  }
+
+  gsap.to(el, {
+    opacity: 1,
+    duration: props.duration,
+    height: props.height,
+    delay: el.dataset.index * indexDelay.value,
+    onComplete
+  });
+}
+
+function onLeave(el, onComplete) {
+  if (props.disabled) {
+    onComplete();
+    return;
+  }
+
+  gsap.to(el, {
+    opacity: 0,
+    height: 0,
+    duration: props.duration,
+    delay: el.dataset.index * indexDelay.value,
+    onComplete
+  });
+}
+</script>
+
+<style scoped lang="scss">
+.list-move,
+.list-enter-active,
+.list-leave-active {
+  transition: all 0.5s ease;
+}
+
+.list-enter-from,
+.list-leave-to {
+  opacity: 0;
+  transform: translateX(2em);
+}
+
+/* ensure leaving items are taken out of layout flow so that moving
+   animations can be calculated correctly. */
+.list-leave-active {
+  position: absolute;
+}
+</style>

package/src/components/Utility/index.ts

@@ -0,0 +1,11 @@
+export { default as CollapsableSidebar } from "./CollapsableSidebar.vue";
+export { default as ConfirmDialog } from "./Dialogs/ConfirmDialog.vue";
+export { default as ContentDrawer } from "./ContentDrawer.vue";
+export { default as FullScreenCarouselDialog } from "./Dialogs/FullscreenCarouselDialog.vue";
+export { default as FullScreenDialog } from "./Dialogs/FullScreenDialog.vue";
+export { default as ImagePreview } from "./ImagePreview.vue";
+export { default as InfoDialog } from "./Dialogs/InfoDialog.vue";
+export { default as InputDialog } from "./Dialogs/InputDialog.vue";
+export { default as ListTransition } from "./Transitions/ListTransition.vue";
+export { default as SlideTransition } from "./Transitions/SlideTransition.vue";
+export { default as StaggeredListTransition } from "./Transitions/StaggeredListTransition.vue";

package/src/components/index.ts

@@ -0,0 +1,3 @@
+export * from "./ActionTable";
+export * from "./Utility";
+export * from "./DragAndDrop";