quasar-ui-danx 0.4.1 → 0.4.3

package/src/components/PanelsDrawer/PanelsDrawer.vue

@@ -6,6 +6,7 @@
     content-class="h-full"
     class="dx-panels-drawer"
     title=""
+    no-route-dismiss
     @update:show="$emit('close')"
   >
     <div class="flex flex-col flex-nowrap h-full">
@@ -33,15 +34,17 @@
       <div class="dx-panels-drawer-body flex-grow overflow-hidden h-full">
         <div class="flex items-stretch flex-nowrap h-full">
           <PanelsDrawerTabs
+            :key="'pd-tabs:' + activeItem.id"
             v-model="activePanel"
             :class="tabsClass"
             :panels="panels"
             @update:model-value="$emit('update:model-value', $event)"
           />
           <PanelsDrawerPanels
+            :key="'pd-panels:' + activeItem.id"
             :panels="panels"
             :active-panel="activePanel"
-            :class="panelsClass"
+            :class="activePanelOptions?.class || panelsClass"
           />
           <div
             v-if="$slots['right-sidebar']"
@@ -55,16 +58,17 @@
   </ContentDrawer>
 </template>
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
 import { XIcon as CloseIcon } from "../../svg";
-import { ActionPanel } from "../ActionTable";
+import { ActionPanel, ActionTargetItem } from "../../types";
 import { ContentDrawer } from "../Utility";
 import PanelsDrawerPanels from "./PanelsDrawerPanels";
 import PanelsDrawerTabs from "./PanelsDrawerTabs";
 
 export interface Props {
 	title?: string,
-	modelValue?: string,
+	modelValue?: string | number,
+	activeItem?: ActionTargetItem;
 	tabsClass?: string | object,
 	panelsClass?: string | object,
 	panels: ActionPanel[]
@@ -74,10 +78,19 @@ defineEmits(["update:model-value", "close"]);
 const props = withDefaults(defineProps<Props>(), {
 	title: "",
 	modelValue: null,
+	activeItem: null,
 	tabsClass: "w-[13.5rem]",
 	panelsClass: "w-[35.5rem]"
 });
 
 const activePanel = ref(props.modelValue);
+const activePanelOptions = computed(() => props.panels.find((panel) => panel.name === activePanel.value));
 watch(() => props.modelValue, (value) => activePanel.value = value);
+
+onMounted(() => {
+	// Resolve the default panel if a panel has not been selected
+	if (!activePanel.value && props.panels.length) {
+		activePanel.value = props.panels[0].name;
+	}
+});
 </script>

package/src/components/PanelsDrawer/PanelsDrawerPanels.vue

@@ -16,17 +16,12 @@
   </QTabPanels>
 </template>
 
-<script setup>
+<script setup lang="ts">
+import { ActionPanel } from "../../types";
 import { RenderVnode } from "../Utility";
 
-defineProps({
-  activePanel: {
-    type: String,
-    default: null
-  },
-  panels: {
-    type: Array,
-    required: true
-  }
-});
+defineProps<{
+	activePanel?: string | number,
+	panels: ActionPanel[]
+}>();
 </script>

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

@@ -1,135 +1,75 @@
 <template>
-  <QDialog
-    :full-height="fullHeight"
-    :full-width="fullWidth"
-    :model-value="!!modelValue"
-    :no-backdrop-dismiss="!backdropDismiss"
-    :maximized="maximized"
-    @update:model-value="onClose"
+  <DialogLayout
+    class="dx-confirm-dialog"
+    v-bind="layoutProps"
+    @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"
-        >
-          <slot name="title">
-            {{ title }}
-          </slot>
-        </h3>
-        <div
-          v-if="subtitle"
-          class="mt-1 text-sm"
+    <template
+      v-for="slotName in childSlots"
+      #[slotName]
+    >
+      <slot :name="slotName" />
+    </template>
+    <slot />
+
+    <template #actions>
+      <div class="dx-dialog-button-cancel">
+        <QBtn
+          :label="cancelText"
+          class="dx-dialog-button"
+          @click="onClose"
         >
-          {{ subtitle }}
-        </div>
-      </QCardSection>
-      <QCardSection v-if="$slots.toolbar">
-        <slot name="toolbar" />
-      </QCardSection>
-      <QCardSection
-        v-if="content || $slots.default"
-        class="px-6 bg-gray-100 flex-grow max-h-full overflow-y-auto"
-        :class="contentClass"
-      >
-        <slot>{{ content }}</slot>
-      </QCardSection>
-      <div class="flex px-6 py-4 border-t border-gray-300">
-        <div class="flex-grow">
-          <QBtn
-            :label="cancelText"
-            class="action-btn btn-white-gray"
-            @click="onClose"
-          >
-            <slot name="cancel-text" />
-          </QBtn>
-        </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"
-          >
-            <slot name="confirm-text" />
-          </QBtn>
-        </div>
+          <slot name="cancel-text" />
+        </QBtn>
       </div>
-      <a
-        class="absolute top-0 right-0 p-4 text-black"
-        @click="onClose"
+      <slot name="actions" />
+      <div
+        v-if="!hideConfirm"
+        class="dx-dialog-button-confirm"
       >
-        <CloseIcon class="w-5" />
-      </a>
-    </QCard>
-  </QDialog>
+        <QBtn
+          :label="$slots['confirm-text'] ? '' : confirmText"
+          class="dx-dialog-button"
+          :class="confirmClass"
+          :loading="isSaving"
+          :disable="disabled"
+          data-testid="confirm-button"
+          @click="onConfirm"
+        >
+          <slot name="confirm-text" />
+        </QBtn>
+      </div>
+    </template>
+  </DialogLayout>
 </template>
 
-<script setup>
-import { XIcon as CloseIcon } from "@heroicons/vue/outline";
+<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({
-  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,
-  disabled: Boolean,
-  isSaving: Boolean,
-  closeOnConfirm: Boolean,
-  hideConfirm: Boolean,
-  confirmText: {
-    type: String,
-    default: "Confirm"
-  },
-  cancelText: {
-    type: String,
-    default: "Cancel"
-  },
-  confirmClass: {
-    type: String,
-    default: "bg-blue-600 text-white"
-  },
-  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", "toolbar"]);
+
 function onConfirm() {
-  emit("confirm");
+	emit("confirm");
 
-  if (props.closeOnConfirm) {
-    emit("close");
-  }
+	if (props.closeOnConfirm) {
+		emit("close");
+	}
 }
 
 function onClose() {
-  emit("update:model-value", false);
-  emit("close");
+	emit("update:model-value", false);
+	emit("close");
 }
 </script>

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

@@ -0,0 +1,77 @@
+<template>
+  <QDialog
+    class="dx-dialog"
+    :full-height="fullHeight"
+    :full-width="fullWidth"
+    :model-value="true"
+    :no-backdrop-dismiss="!backdropDismiss"
+    :maximized="maximized"
+    @update:model-value="onClose"
+  >
+    <QCard class="dx-dialog-card flex flex-col flex-nowrap">
+      <QCardSection
+        class="dx-dialog-header flex items-center"
+      >
+        <div class="flex-grow">
+          <h3
+            v-if="title || $slots.title"
+            class="dx-dialog-title flex items-center"
+            :class="titleClass"
+          >
+            <slot name="title">
+              {{ title }}
+            </slot>
+          </h3>
+          <div
+            v-if="subtitle || $slots.subtitle"
+            class="dx-dialog-subtitle"
+          >
+            <slot name="subtitle">
+              {{ subtitle }}
+            </slot>
+          </div>
+        </div>
+        <div>
+          <div
+            class="dx-close-button cursor-pointer"
+            @click="onClose"
+          >
+            <CloseIcon class="w-5" />
+          </div>
+        </div>
+      </QCardSection>
+      <QCardSection v-if="$slots.toolbar">
+        <slot name="toolbar" />
+      </QCardSection>
+      <QCardSection
+        v-if="content || $slots.default"
+        class="dx-dialog-content flex-grow max-h-full overflow-y-auto"
+        :class="contentClass"
+      >
+        <slot>{{ content }}</slot>
+      </QCardSection>
+      <div class="flex dx-dialog-actions">
+        <slot name="actions" />
+      </div>
+    </QCard>
+  </QDialog>
+</template>
+
+<script setup lang="ts">
+import { XIcon as CloseIcon } from "@heroicons/vue/outline";
+import { DialogLayoutProps } from "../../../types";
+
+const emit = defineEmits(["close"]);
+
+withDefaults(defineProps<DialogLayoutProps>(), {
+	title: "",
+	titleClass: "",
+	subtitle: "",
+	content: "",
+	contentClass: ""
+});
+
+function onClose() {
+	emit("close");
+}
+</script>

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>