quasar-ui-danx 0.3.22 → 0.4.2

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/Layouts/CollapsableSidebar.vue

@@ -1,7 +1,7 @@
 <template>
   <div
+    class="dx-collapsable-sidebar overflow-y-auto overflow-x-hidden scroll-smooth flex-shrink-0 transition-all relative"
     :class="{
-      [cls['collapsable-sidebar']]: true,
       'is-collapsed': isCollapsed,
       'is-right-side': rightSide,
       [displayClass]: true,
@@ -81,7 +81,7 @@ const isCollapsed = ref(getItem(props.name + "-is-collapsed", props.collapse));
 
 function setCollapse(state) {
   isCollapsed.value = state;
-  setItem(props.name + "-is-collapsed", isCollapsed.value ? "1" : "");
+  setItem(props.name + "-is-collapsed", !!isCollapsed.value);
 }
 
 function toggleCollapse() {
@@ -104,9 +104,3 @@ watch(() => props.collapse, () => {
   setCollapse(props.collapse);
 });
 </script>
-
-<style module="cls" lang="scss">
-.collapsable-sidebar {
-  @apply overflow-y-auto overflow-x-hidden scroll-smooth flex-shrink-0 border-r border-gray-200 transition-all relative;
-}
-</style>

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

@@ -1,6 +1,6 @@
 <template>
   <a
-    class="p-3 actionable"
+    class="p-3 dx-popover-menu"
     :class="{'opacity-50 cursor-not-allowed': disabled}"
   >
     <QTooltip v-if="$slots.tooltip || tooltip">
@@ -16,7 +16,7 @@
       />
       <MenuIcon
         v-else
-        class="w-4 text-black"
+        class="w-4 dx-menu-icon"
       />
     </Transition>
     <QMenu
@@ -73,7 +73,7 @@ defineProps({
     type: [Function, Object],
     default: () => ({
       is: QSpinner,
-      props: { class: "w-4 h-4 text-black" }
+      props: { class: "w-4 h-4" }
     })
   }
 });

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>