quasar-ui-danx 0.4.1 → 0.4.2

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

@@ -1,135 +1,89 @@
 <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>
+
+    <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";
+import { computed } from "vue";
+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: ""
-  }
+	...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 layoutProps = computed(() => ({ ...props, disabled: undefined }));
+const childSlots = computed(() => ["title", "subtitle", "default", "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,95 @@
+<template>
+  <QDialog
+    class="dx-dialog"
+    :full-height="fullHeight"
+    :full-width="fullWidth"
+    :model-value="!!modelValue"
+    :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>
+import { XIcon as CloseIcon } from "@heroicons/vue/outline";
+
+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: ""
+	}
+});
+
+function onClose() {
+	emit("close");
+}
+</script>

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/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(props.props);
+	}
 
-  if (typeof props.vnode === "function") {
-    return props.vnode();
-  }
-
-  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/helpers/actions.ts

@@ -9,7 +9,7 @@ export type ActionTargetItem = {
 	isSaving: Ref<boolean>;
 	[key: string]: any;
 };
-export type ActionTarget = ActionTargetItem[] | ActionTargetItem;
+export type ActionTarget = ActionTargetItem[] | ActionTargetItem | null;
 
 export interface ActionOptions {
 	name?: string;
@@ -23,9 +23,9 @@ export interface ActionOptions {
 	vnode?: ((target: ActionTarget) => VNode) | undefined;
 	enabled?: (target: object) => boolean;
 	batchEnabled?: (targets: object[]) => boolean;
-	optimistic?: (action: ActionOptions, target: object, input: any) => void;
-	onAction?: (action: string | null | undefined, target: object, input: any) => Promise<any>;
-	onBatchAction?: (action: string | null | undefined, targets: object[], input: any) => Promise<any>;
+	optimistic?: (action: ActionOptions, target: ActionTargetItem | null, input: any) => void;
+	onAction?: (action: string | null | undefined, target: ActionTargetItem | null, input: any) => Promise<any>;
+	onBatchAction?: (action: string | null | undefined, targets: ActionTargetItem[], input: any) => Promise<any>;
 	onStart?: (action: ActionOptions | null, targets: ActionTarget, input: any) => boolean;
 	onSuccess?: (result: any, targets: ActionTarget, input: any) => any;
 	onError?: (result: any, targets: ActionTarget, input: any) => any;
@@ -60,7 +60,7 @@ export function useActions(actions: ActionOptions[], globalOptions: ActionOption
 			for (const t of target) {
 				t.isSaving.value = saving;
 			}
-		} else {
+		} else if (target) {
 			target.isSaving.value = saving;
 		}
 	}
@@ -73,7 +73,7 @@ export function useActions(actions: ActionOptions[], globalOptions: ActionOption
 	 * @param {any} input - The input data to pass to the action handler
 	 * @param isTriggered - Whether the action was triggered by a trigger function
 	 */
-	async function performAction(name: string | object, target: ActionTarget, input: any = null, isTriggered = false) {
+	async function performAction(name: string | object, target: ActionTarget = null, input: any = null, isTriggered = false) {
 		const action: ActionOptions | null | undefined = typeof name === "string" ? mappedActions.find(a => a.name === name) : name;
 		if (!action) {
 			throw new Error(`Unknown action: ${name}`);

package/src/styles/quasar-reset.scss

@@ -1,80 +1,91 @@
 .danx-app {
-  .q-tab {
-    text-transform: capitalize
-  }
-
-  .q-table__card {
-    background: inherit;
-    color: inherit;
-  }
-
-  .q-checkbox__inner {
-    color: inherit;
-  }
-
-  .q-toolbar {
-    min-height: 0;
-    padding: 0;
-  }
-
-  .q-notification__actions {
-    color: inherit;
-  }
-
-  .q-date {
-    min-width: 100px;
-
-    .q-date__view {
-      min-height: 0;
-    }
-  }
-
-  .q-field {
-    &.q-field--auto-height {
-      .q-field__control {
-        min-height: 0;
-
-        .q-field__native {
-          min-height: 0;
-          color: inherit;
-        }
-      }
-
-    }
-
-    &.q-field--labeled {
-      .q-field__control-container {
-        padding-top: 1.1rem;
-      }
-    }
-
-    .q-field__marginal, .q-field__input, .q-field__label {
-      color: inherit;
-    }
-  }
+	.q-tab {
+		text-transform: capitalize
+	}
+
+	.q-table__card {
+		background: inherit;
+		color: inherit;
+	}
+
+	.q-checkbox__inner {
+		color: inherit;
+	}
+
+	.q-toolbar {
+		min-height: 0;
+		padding: 0;
+	}
+
+	.q-notification__actions {
+		color: inherit;
+	}
+
+	.q-date {
+		min-width: 100px;
+
+		.q-date__view {
+			min-height: 0;
+		}
+	}
+
+	.q-field {
+		&.q-field--auto-height {
+			.q-field__control {
+				min-height: 0;
+
+				.q-field__native {
+					min-height: 0;
+					color: inherit;
+				}
+			}
+
+		}
+
+		&.q-field--labeled {
+			.q-field__control-container {
+				padding-top: 1.1rem;
+			}
+		}
+
+		.q-field__marginal, .q-field__input, .q-field__label {
+			color: inherit;
+		}
+	}
+}
+
+.q-btn {
+	text-transform: inherit;
+	@apply bg-inherit text-inherit;
 }
 
 .q-item {
-  min-height: 0;
+	min-height: 0;
 }
 
 .q-tab-panels {
-  overflow: visible;
-  background: inherit;
+	overflow: visible;
+	background: inherit;
 
-  .q-panel {
-    overflow: visible;
+	.q-panel {
+		overflow: visible;
 
-    &.scroll {
-      overflow: auto;
-    }
+		&.scroll {
+			overflow: auto;
+		}
 
-    .q-tab-panel {
-      padding: 0;
-    }
-  }
+		.q-tab-panel {
+			padding: 0;
+		}
+	}
+
+	&.overflow-y-auto {
+		overflow-y: auto;
+	}
+}
 
-  &.overflow-y-auto {
-    overflow-y: auto;
-  }
+.dx-dialog {
+	.q-card__section--vert {
+		@apply p-0;
+	}
 }