quasar-ui-danx 0.4.1 → 0.4.3

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

@@ -1,95 +1,55 @@
 <template>
-  <QDialog
-    :full-height="fullHeight"
-    :full-width="fullWidth"
-    :model-value="!!modelValue"
-    :no-backdrop-dismiss="!backdropDismiss"
-    :maximized="maximized"
-    @update:model-value="onClose"
+  <DialogLayout
+    class="dx-info-dialog"
+    v-bind="$props"
+    @close="onClose"
   >
-    <QCard class="flex flex-col flex-nowrap">
-      <QCardSection
-        v-if="title || $slots.title"
-        class="pl-6 pr-10 border-b border-gray-300"
-      >
-        <h3
-          class="font-normal flex items-center"
-          :class="titleClass"
+    <template
+      v-if="$slots.title"
+      #title
+    >
+      <slot name="title" />
+    </template>
+    <template
+      v-if="$slots.subtitle"
+      #subtitle
+    >
+      <slot name="subtitle" />
+    </template>
+    <template #actions>
+      <div class="flex-grow">
+        <QBtn
+          :label="doneText"
+          class="dx-dialog-button dx-dialog-button-done"
+          :class="doneClass"
+          @click="onClose"
         >
-          <slot name="title">
-            {{ title }}
-          </slot>
-        </h3>
-        <div
-          v-if="subtitle"
-          class="mt-1 text-sm"
-        >
-          {{ subtitle }}
-        </div>
-      </QCardSection>
-      <QCardSection
-        v-if="content || $slots.default"
-        class="px-6 bg-gray-100 flex-grow max-h-full overflow-y-auto"
-      >
-        <slot>{{ content }}</slot>
-      </QCardSection>
-      <div
-        class="flex items-center justify-center px-6 py-4 border-t border-gray-300"
-      >
-        <div class="flex-grow text-right">
-          <QBtn
-            :label="doneText"
-            class="action-btn btn-white-gray"
-            @click="onClose"
-          >
-            <slot name="done-text" />
-          </QBtn>
-        </div>
+          <slot name="done-text" />
+        </QBtn>
       </div>
-      <a
-        class="absolute top-0 right-0 p-4 text-black"
-        @click="onClose"
-      >
-        <CloseIcon class="w-5" />
-      </a>
-    </QCard>
-  </QDialog>
+      <slot name="actions" />
+    </template>
+  </DialogLayout>
 </template>
 
 <script setup>
-import { XIcon as CloseIcon } from "@heroicons/vue/outline";
+import DialogLayout from "./DialogLayout";
 
 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"
-  }
+	...DialogLayout.props,
+	doneClass: {
+		type: [String, Object],
+		default: ""
+	},
+	doneText: {
+		type: String,
+		default: "Done"
+	}
 });
 
 function onClose() {
-  emit("update:model-value", false);
-  emit("close");
+	emit("update:model-value", false);
+	emit("close");
 }
 </script>

package/src/components/Utility/Dialogs/index.ts

@@ -1,3 +1,4 @@
+export { default as ConfirmActionDialog } from "./ConfirmActionDialog.vue";
 export { default as ConfirmDialog } from "./ConfirmDialog.vue";
 export { default as FullScreenCarouselDialog } from "./FullscreenCarouselDialog.vue";
 export { default as FullScreenDialog } from "./FullScreenDialog.vue";

package/src/components/Utility/Files/FilePreview.vue

@@ -27,7 +27,7 @@
         </div>
         <QImg
           v-if="thumbUrl || isPreviewable"
-          fit="scale-down"
+          :fit="imageFit"
           class="non-selectable max-h-full max-w-full h-full"
           :src="(thumbUrl || previewUrl) + '#t=0.1'"
           preload="auto"
@@ -54,11 +54,11 @@
         <slot name="action-button" />
       </div>
       <div
-        v-if="image && image.progress !== undefined"
+        v-if="file && file.progress !== undefined"
         class="absolute-bottom w-full"
       >
         <QLinearProgress
-          :value="image.progress"
+          :value="file.progress"
           size="15px"
           color="green-600"
           stripe
@@ -78,7 +78,7 @@
       <QBtn
         v-if="downloadable && computedImage?.url"
         size="sm"
-        class="!p-1 opacity-70 hover:opacity-100"
+        class="dx-file-preview-download py-1 px-2 opacity-70 hover:opacity-100"
         :class="downloadButtonClass"
         @click.stop="download(computedImage.url)"
       >
@@ -88,7 +88,7 @@
       <QBtn
         v-if="removable"
         size="sm"
-        class="bg-red-900 text-white !p-1 opacity-50 hover:opacity-100"
+        class="dx-file-preview-remove bg-red-900 text-white opacity-50 hover:opacity-100 py-1 px-2"
         @click.stop="onRemove"
       >
         <div
@@ -107,106 +107,109 @@
     <FullScreenCarouselDialog
       v-if="showPreview && !disabled"
       :files="relatedFiles || [computedImage]"
-      :default-slide="computedImage.id"
+      :default-slide="computedImage?.id || ''"
       @close="showPreview = false"
     />
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { DocumentTextIcon as TextFileIcon, DownloadIcon, PlayIcon } from "@heroicons/vue/outline";
-import { computed, ref } from "vue";
+import { UploadedFile } from "src/types";
+import { computed, ComputedRef, ref } from "vue";
 import { download } from "../../../helpers";
 import { ImageIcon, PdfIcon, TrashIcon as RemoveIcon } from "../../../svg";
 import { FullScreenCarouselDialog } from "../Dialogs";
 
+export interface FilePreviewProps {
+	src?: string;
+	file?: UploadedFile;
+	relatedFiles?: UploadedFile[];
+	missingIcon?: any;
+	downloadButtonClass?: string;
+	imageFit?: "cover" | "contain" | "fill" | "none" | "scale-down";
+	downloadable?: boolean;
+	removable?: boolean;
+	disabled?: boolean;
+	square?: boolean;
+}
+
 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-600 text-white"
-  },
-  downloadable: Boolean,
-  removable: Boolean,
-  disabled: Boolean,
-  square: Boolean
+
+const props = withDefaults(defineProps<FilePreviewProps>(), {
+	src: "",
+	file: null,
+	relatedFiles: null,
+	missingIcon: ImageIcon,
+	downloadButtonClass: "bg-blue-600 text-white",
+	imageFit: "cover",
+	downloadable: false,
+	removable: false,
+	disabled: false,
+	square: false
 });
 
 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 computedImage: ComputedRef<UploadedFile | null> = computed(() => {
+	if (props.file) {
+		return props.file;
+	} else if (props.src) {
+		return {
+			id: props.src,
+			url: props.src,
+			type: "image/" + props.src.split(".").pop()?.toLowerCase(),
+			name: "",
+			size: 0
+		};
+	}
+	return null;
 });
 const mimeType = computed(
-  () => computedImage.value.type || computedImage.value.mime
+	() => computedImage.value?.type || computedImage.value?.mime || ""
 );
-const isImage = computed(() => mimeType.value.match(/^image\//));
-const isVideo = computed(() => mimeType.value.match(/^video\//));
-const isPdf = computed(() => mimeType.value.match(/^application\/pdf/));
+const isImage = computed(() => !!mimeType.value.match(/^image\//));
+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
+	() => computedImage.value?.transcodes?.compress?.url || computedImage.value?.blobUrl || computedImage.value?.url
 );
 const thumbUrl = computed(() => {
-  return computedImage.value.transcodes?.thumb?.url;
+	return computedImage.value?.transcodes?.thumb?.url;
 });
 const isPreviewable = computed(() => {
-  return !!thumbUrl.value || isVideo.value || isImage.value;
+	return !!thumbUrl.value || isVideo.value || isImage.value;
 });
 const isConfirmingRemove = ref(false);
 function onRemove() {
-  if (!isConfirmingRemove.value) {
-    isConfirmingRemove.value = true;
-    setTimeout(() => {
-      isConfirmingRemove.value = false;
-    }, 2000);
-  } else {
-    emit("remove");
-  }
+	if (!isConfirmingRemove.value) {
+		isConfirmingRemove.value = true;
+		setTimeout(() => {
+			isConfirmingRemove.value = false;
+		}, 2000);
+	} else {
+		emit("remove");
+	}
 }
 </script>
 
 <style module="cls" lang="scss">
 .action-button {
-  position: absolute;
-  bottom: 1.5em;
-  right: 1em;
-  z-index: 1;
+	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;
-  @apply text-blue-200;
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	height: 100%;
+	pointer-events: none;
+	@apply text-blue-200;
 }
 </style>

package/src/components/Utility/Layouts/ContentDrawer.vue

@@ -1,10 +1,11 @@
 <template>
   <QDialog
-    v-model="isShowing"
+    :model-value="show"
     maximized
     :position="position"
     :seamless="seamless"
     :class="{'hide-backdrop': !overlay}"
+    @hide="$emit('update:show', false)"
   >
     <div>
       <div
@@ -21,45 +22,37 @@
   </QDialog>
 </template>
 
-<script setup>
-import { computed } from "vue";
+<script setup lang="ts">
+import { QDialogProps } from "quasar";
 
-const emit = defineEmits(["update:show"]);
-
-const props = defineProps({
-  show: Boolean,
-  seamless: Boolean,
-  overlay: Boolean,
-  position: {
-    type: String,
-    default: "bottom"
-  },
-  contentClass: {
-    type: String,
-    default: "py-8 px-12"
-  },
-  title: {
-    type: String,
-    default: "Edit"
-  }
-});
+export interface ContentDrawerProps {
+	show?: boolean,
+	overlay?: boolean,
+	position?: QDialogProps["position"],
+	seamless?: boolean,
+	contentClass?: string,
+	title?: string
+}
 
-const isShowing = computed({
-  get: () => props.show,
-  set: (value) => emit("update:show", value)
+defineEmits(["update:show"]);
+withDefaults(defineProps<ContentDrawerProps>(), {
+	show: false,
+	position: "bottom",
+	contentClass: "py-8 px-12",
+	title: "Edit"
 });
 </script>
 
 <style lang="scss" module="cls">
 .dialog-title {
-  @apply font-medium uppercase text-xs px-6 py-3 border-b rounded-t-md bg-slate-100 text-gray-500 border-gray-200;
-  font-family: "Roboto", sans-serif;
-  letter-spacing: 0.05em;
-  box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.25);
+	@apply font-medium uppercase text-xs px-6 py-3 border-b rounded-t-md bg-slate-100 text-gray-500 border-gray-200;
+	font-family: "Roboto", sans-serif;
+	letter-spacing: 0.05em;
+	box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.25);
 }
 
 .dialog-content {
-  @apply bg-white;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
+	@apply bg-white;
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
 }
 </style>

package/src/components/Utility/Tools/ActionVnode.vue

@@ -16,8 +16,8 @@ import RenderVnode from "./RenderVnode";
 
 const isSaving = ref(false);
 async function onConfirm(input) {
-  isSaving.value = true;
-  await activeActionVnode.value.confirm(input);
-  isSaving.value = false;
+	isSaving.value = true;
+	await activeActionVnode.value.confirm(input);
+	isSaving.value = false;
 }
 </script>

package/src/components/Utility/Tools/RenderVnode.vue

@@ -2,20 +2,29 @@
 import { isRef, isVNode } from "vue";
 
 const RenderVnode = (props) => {
-  if (isVNode(props.vnode)) {
-    return props.vnode;
-  }
+	if (isVNode(props.vnode)) {
+		return props.vnode;
+	}
 
-  if (isRef(props.vnode)) {
-    return props.vnode.value;
-  }
+	if (isRef(props.vnode)) {
+		return props.vnode.value;
+	}
 
-  if (typeof props.vnode === "function") {
-    return props.vnode();
-  }
+	if (typeof props.vnode === "function") {
+		return props.vnode(props.props);
+	}
 
-  return null;
+	return null;
+};
+RenderVnode.props = {
+	vnode: {
+		type: [Function, Object],
+		required: true
+	},
+	props: {
+		type: Object,
+		default: () => ({})
+	}
 };
-RenderVnode.props = { vnode: { type: [Function, Object], required: true } };
 export default RenderVnode;
 </script>

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

@@ -0,0 +1,26 @@
+<template>
+  <Transition name="maxHeight">
+    <slot />
+  </Transition>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+	maxHeight: string,
+}>();
+</script>
+<style lang="scss">
+.maxHeight-enter-active,
+.maxHeight-leave-active {
+	transition: all .3s linear;
+	max-height: v-bind(maxHeight);
+}
+
+.maxHeight-enter-to, .maxHeight-leave-from {
+	max-height: v-bind(maxHeight);
+}
+
+.maxHeight-enter-from, .maxHeight-leave-to {
+	max-height: 0;
+}
+</style>

package/src/components/Utility/Transitions/index.ts

@@ -1,3 +1,4 @@
 export { default as ListTransition } from "./ListTransition.vue";
+export { default as MaxHeightTransition } from "./MaxHeightTransition.vue";
 export { default as SlideTransition } from "./SlideTransition.vue";
 export { default as StaggeredListTransition } from "./StaggeredListTransition.vue";

package/src/config/index.ts

@@ -1,36 +1,41 @@
-import { QNotifyCreateOptions } from "quasar";
-import { Ref, shallowRef } from "vue";
-import { FileUploadOptions } from "../helpers";
+import { shallowRef } from "vue";
+import { DanxOptions } from "../types";
 
-export interface DanxOptions {
-    tinyMceApiKey: string;
-    fileUpload: FileUploadOptions;
-    flashMessages: {
-        default: QNotifyCreateOptions;
-        success: QNotifyCreateOptions;
-        warning: QNotifyCreateOptions;
-        error: QNotifyCreateOptions;
-    };
-}
-
-export const danxOptions: Ref<DanxOptions> = shallowRef({
-    tinyMceApiKey: "set-api-key-in-danx-options",
-    fileUpload: {
-        directory: "file-upload",
-        presignedUploadUrl: null,
-        uploadCompletedUrl: null
-    },
-    flashMessages: {
-        default: {},
-        success: {},
-        warning: {},
-        error: {}
-    }
+export const danxOptions = shallowRef<DanxOptions>({
+	tinyMceApiKey: "set-api-key-in-danx-options",
+	request: {
+		baseUrl: "",
+		headers: {},
+		onUnauthorized: undefined
+	},
+	fileUpload: {
+		directory: "file-upload",
+		createPresignedUpload: null,
+		completePresignedUpload: null
+	},
+	flashMessages: {
+		default: {},
+		success: {},
+		warning: {},
+		error: {}
+	}
 });
 
 export function configure(options: DanxOptions) {
-    danxOptions.value = {
-        ...danxOptions.value,
-        ...options
-    };
+	danxOptions.value = {
+		...danxOptions.value,
+		...options,
+		fileUpload: {
+			...danxOptions.value.fileUpload,
+			...options.fileUpload
+		},
+		flashMessages: {
+			...danxOptions.value.flashMessages,
+			...options.flashMessages
+		},
+		request: {
+			...danxOptions.value.request,
+			...options.request
+		}
+	};
 }