quasar-ui-danx 0.4.2 → 0.4.3

package/src/components/PanelsDrawer/PanelsDrawerTabs.vue

@@ -28,37 +28,37 @@
     </template>
   </QTabs>
 </template>
-<script setup>
+<script setup lang="ts">
 import { QTab } from "quasar";
+import { ActionPanel } from "../../types";
 import { RenderVnode } from "../Utility";
 
 defineEmits(["update:model-value"]);
-defineProps({
-  modelValue: {
-    type: String,
-    default: "general"
-  },
-  panels: {
-    type: Array,
-    required: true
-  }
+
+interface Props {
+	modelValue?: string | number;
+	panels: ActionPanel[];
+}
+
+withDefaults(defineProps<Props>(), {
+	modelValue: "general"
 });
 </script>
 
 <style lang="scss" module="cls">
 .panel-tabs {
-  @apply p-4 h-auto;
+	@apply p-4 h-auto;
 
-  :global(.q-tab) {
-    justify-content: start !important;
+	:global(.q-tab) {
+		justify-content: start !important;
 
-    :global(.q-focus-helper), :global(.q-tab__indicator) {
-      display: none;
-    }
+		:global(.q-focus-helper), :global(.q-tab__indicator) {
+			display: none;
+		}
 
-    :global(.q-tab__content) {
-      @apply p-0;
-    }
-  }
+		:global(.q-tab__content) {
+			@apply p-0;
+		}
+	}
 }
 </style>

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

@@ -0,0 +1,39 @@
+<template>
+  <ConfirmDialog
+    class="dx-confirm-action-dialog"
+    v-bind="props"
+    :confirm-text="confirmText || computedConfirmText"
+    :title="title || computedTitle"
+    :content="content || computedContentText"
+    @confirm="$emit('confirm')"
+    @close="$emit('close')"
+  >
+    <template
+      v-for="slotName in childSlots"
+      #[slotName]
+    >
+      <slot :name="slotName" />
+    </template>
+    <slot />
+  </ConfirmDialog>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { fNameOrCount } from "../../../helpers";
+import { ConfirmActionDialogProps } from "../../../types";
+import { default as ConfirmDialog } from "./ConfirmDialog";
+
+defineEmits(["confirm", "close"]);
+
+const props = withDefaults(defineProps<ConfirmActionDialogProps>(), {
+	message: "Are you sure you want to"
+});
+
+const nameLabel = computed(() => fNameOrCount(props.target, props.label || props.action));
+const computedTitle = computed(() => `Confirm ${props.action}`);
+const computedConfirmText = computed(() => `${props.action}`);
+const computedContentText = computed(() => `${props.message} ${props.action.toLowerCase()}${nameLabel.value ? " " + nameLabel.value : ""}?`);
+
+const childSlots = computed(() => ["title", "subtitle", "default", "toolbar", "actions"]);
+</script>

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

@@ -10,6 +10,7 @@
     >
       <slot :name="slotName" />
     </template>
+    <slot />
 
     <template #actions>
       <div class="dx-dialog-button-cancel">
@@ -42,37 +43,22 @@
   </DialogLayout>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { computed } from "vue";
+import { ConfirmDialogProps } from "../../../types";
 import DialogLayout from "./DialogLayout";
 
 const emit = defineEmits(["update:model-value", "confirm", "close"]);
-const props = defineProps({
-	...DialogLayout.props,
-	disabled: Boolean,
-	isSaving: Boolean,
-	closeOnConfirm: Boolean,
-	hideConfirm: Boolean,
-	confirmText: {
-		type: String,
-		default: "Confirm"
-	},
-	cancelText: {
-		type: String,
-		default: "Cancel"
-	},
-	confirmClass: {
-		type: String,
-		default: ""
-	},
-	contentClass: {
-		type: String,
-		default: ""
-	}
+
+const props = withDefaults(defineProps<ConfirmDialogProps>(), {
+	confirmText: "Confirm",
+	cancelText: "Cancel",
+	confirmClass: "",
+	contentClass: ""
 });
 
 const layoutProps = computed(() => ({ ...props, disabled: undefined }));
-const childSlots = computed(() => ["title", "subtitle", "default", "toolbar"]);
+const childSlots = computed(() => ["title", "subtitle", "toolbar"]);
 
 function onConfirm() {
 	emit("confirm");

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

@@ -3,7 +3,7 @@
     class="dx-dialog"
     :full-height="fullHeight"
     :full-width="fullWidth"
-    :model-value="!!modelValue"
+    :model-value="true"
     :no-backdrop-dismiss="!backdropDismiss"
     :maximized="maximized"
     @update:model-value="onClose"
@@ -57,36 +57,18 @@
   </QDialog>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { XIcon as CloseIcon } from "@heroicons/vue/outline";
+import { DialogLayoutProps } from "../../../types";
 
 const emit = defineEmits(["close"]);
-defineProps({
-	modelValue: { type: [String, 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,
-	contentClass: {
-		type: String,
-		default: ""
-	}
+
+withDefaults(defineProps<DialogLayoutProps>(), {
+	title: "",
+	titleClass: "",
+	subtitle: "",
+	content: "",
+	contentClass: ""
 });
 
 function onClose() {

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

@@ -22,6 +22,7 @@
           :key="'file-' + file.id"
           :name="file.id"
           :img-src="getThumbUrl(file)"
+          class="bg-black"
         >
           <div :class="cls['slide-image']">
             <template v-if="isVideo(file)">
@@ -30,7 +31,7 @@
                 controls
               >
                 <source
-                  :src="file.url + '#t=0.1'"
+                  :src="getPreviewUrl(file) + '#t=0.1'"
                   :type="file.mime"
                 >
               </video>
@@ -38,7 +39,7 @@
             <img
               v-else
               :alt="file.filename"
-              :src="file.url"
+              :src="getPreviewUrl(file)"
             >
           </div>
         </QCarouselSlide>
@@ -56,54 +57,59 @@ import { XIcon as CloseIcon } from "../../../svg";
 
 defineEmits(["close"]);
 const props = defineProps({
-  files: {
-    type: Array,
-    default: () => []
-  },
-  defaultSlide: {
-    type: String,
-    default: ""
-  }
+	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");
+	return file.mime?.startsWith("video");
 }
+
+function getPreviewUrl(file) {
+	return file.transcodes?.compress?.url || file.blobUrl || file.url;
+}
+
 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;
-  }
+	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 getPreviewUrl(file);
+	}
 }
 </script>
 <style module="cls" lang="scss">
 .slide-image {
-  width: 100%;
-  height: 100%;
-  background: black;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+	width: 100%;
+	height: 100%;
+	background: black;
+	display: flex;
+	justify-content: center;
+	align-items: center;
 
-  img {
-    max-height: 100%;
-    max-width: 100%;
-    object-fit: contain;
-  }
+	img {
+		max-height: 100%;
+		max-width: 100%;
+		object-fit: contain;
+	}
 }
 
 .carousel {
-  :deep(.q-carousel__navigation--bottom) {
-    position: relative;
-    bottom: 8em;
-  }
+	:deep(.q-carousel__navigation--bottom) {
+		position: relative;
+		bottom: 8em;
+	}
 }
 </style>

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

@@ -5,7 +5,7 @@ const RenderVnode = (props) => {
 	if (isVNode(props.vnode)) {
 		return props.vnode;
 	}
-	
+
 	if (isRef(props.vnode)) {
 		return props.vnode.value;
 	}