quasar-ui-danx 0.3.22 → 0.4.2

package/src/components/ActionTable/listHelpers.ts

@@ -1,42 +1,44 @@
-import { onMounted } from "vue";
-import { getUrlParam } from "../../helpers";
+import { ListControlsPagination } from "src/components/ActionTable/listControls";
+import { TableColumn } from "src/components/ActionTable/tableColumns";
+import { onMounted, Ref } from "vue";
+import { AnyObject, getUrlParam } from "../../helpers";
 
-export function registerStickyScrolling(tableRef) {
-    onMounted(() => {
-        const scrollEl = tableRef.value.$el.getElementsByClassName("q-table__middle")[0];
-        scrollEl.addEventListener("scroll", onScroll);
+export function registerStickyScrolling(tableRef: Ref) {
+	onMounted(() => {
+		const scrollEl = tableRef.value.$el.getElementsByClassName("q-table__middle")[0];
+		scrollEl.addEventListener("scroll", onScroll);
 
-        function onScroll({ target }) {
-            // Add / remove scroll y class based on whether we're scrolling vertically
-            if (target.scrollTop > 0) {
-                scrollEl.classList.add("is-scrolling-y");
-            } else {
-                scrollEl.classList.remove("is-scrolling-y");
-            }
+		function onScroll({ target }: { target: HTMLElement }) {
+			// Add / remove scroll y class based on whether we're scrolling vertically
+			if (target.scrollTop > 0) {
+				scrollEl.classList.add("is-scrolling-y");
+			} else {
+				scrollEl.classList.remove("is-scrolling-y");
+			}
 
-            // Add / remove scroll x class based on whether we're scrolling horizontally
-            if (target.scrollLeft > 0) {
-                scrollEl.classList.add("is-scrolling-x");
-            } else {
-                scrollEl.classList.remove("is-scrolling-x");
-            }
-        }
-    });
+			// Add / remove scroll x class based on whether we're scrolling horizontally
+			if (target.scrollLeft > 0) {
+				scrollEl.classList.add("is-scrolling-x");
+			} else {
+				scrollEl.classList.remove("is-scrolling-x");
+			}
+		}
+	});
 }
 
-export function mapSortBy(pagination, columns) {
-    if (!pagination.sortBy) return null;
+export function mapSortBy(pagination: ListControlsPagination, columns: TableColumn[]) {
+	if (!pagination.sortBy) return null;
 
-    const column = columns.find(c => c.name === pagination.sortBy);
-    if (!column) return null;
+	const column = columns.find(c => c.name === pagination.sortBy);
+	if (!column) return null;
 
-    return [
-        {
-            column: column.sortBy || column.name,
-            expression: column.sortByExpression || undefined,
-            order: pagination.descending ? "desc" : "asc"
-        }
-    ];
+	return [
+		{
+			column: column.sortBy || column.name,
+			expression: column.sortByExpression || undefined,
+			order: pagination.descending ? "desc" : "asc"
+		}
+	];
 }
 
 /**
@@ -44,16 +46,16 @@ export function mapSortBy(pagination, columns) {
  * @param url
  * @param allowedKeys
  */
-export function getFilterFromUrl(url: string, allowedKeys = null) {
-    const filter = {};
-    const urlFilter = getUrlParam("filter", url);
-    if (urlFilter) {
-        const fields = JSON.parse(urlFilter);
-        Object.keys(fields).forEach((key) => {
-            if (!allowedKeys || allowedKeys.includes(key)) {
-                filter[key] = fields[key];
-            }
-        });
-    }
-    return filter;
+export function getFilterFromUrl(url: string, allowedKeys: string[] | null = null) {
+	const filter: AnyObject = {};
+	const urlFilter = getUrlParam("filter", url);
+	if (urlFilter) {
+		const fields = JSON.parse(urlFilter);
+		Object.keys(fields).forEach((key) => {
+			if (!allowedKeys || allowedKeys.includes(key)) {
+				filter[key] = fields[key];
+			}
+		});
+	}
+	return filter;
 }

package/src/components/ActionTable/tableColumns.ts

@@ -1,82 +1,82 @@
-import { computed, ref, watch } from "vue";
-import { getItem, setItem } from "../../helpers";
+import { computed, ref, VNode, watch } from "vue";
+import { ActionOptions, getItem, setItem } from "../../helpers";
 
 export interface TableColumn {
-    actionMenu?: object,
-    align?: string,
-    category?: string,
-    class?: string | object,
-    field: string,
-    format?: Function,
-    innerClass?: string | object,
-    style?: string | object,
-    headerStyle?: string | object,
-    isSavingRow?: boolean | Function,
-    label: string,
-    maxWidth?: number,
-    minWidth?: number,
-    name: string,
-    onClick?: Function,
-    required?: boolean,
-    resizeable?: boolean,
-    sortable?: boolean,
-    sortBy?: string,
-    sortByExpression?: string,
-    titleColumns?: Function,
-    vnode?: Function,
+	actionMenu?: ActionOptions[],
+	align?: string,
+	category?: string,
+	class?: string | object,
+	field: string,
+	format?: (value: any, options: any) => any,
+	innerClass?: string | object,
+	style?: string | object,
+	headerStyle?: string | object,
+	isSavingRow?: boolean | (() => boolean),
+	label: string,
+	maxWidth?: number,
+	minWidth?: number,
+	name: string,
+	onClick?: (target: any) => void,
+	required?: boolean,
+	resizeable?: boolean,
+	sortable?: boolean,
+	sortBy?: string,
+	sortByExpression?: string,
+	titleColumns?: () => string[],
+	vnode?: () => VNode,
 }
 
 export function useTableColumns(name: string, columns: TableColumn[]) {
-    const COLUMN_ORDER_KEY = `${name}-column-order`;
-    const VISIBLE_COLUMNS_KEY = `${name}-visible-columns`;
-    const TITLE_COLUMNS_KEY = `${name}-title-columns`;
+	const COLUMN_ORDER_KEY = `${name}-column-order`;
+	const VISIBLE_COLUMNS_KEY = `${name}-visible-columns`;
+	const TITLE_COLUMNS_KEY = `${name}-title-columns`;
 
-    // The list that defines the order the columns should appear in
-    const columnOrder = ref(getItem(COLUMN_ORDER_KEY) || []);
+	// The list that defines the order the columns should appear in
+	const columnOrder = ref(getItem(COLUMN_ORDER_KEY) || []);
 
-    // Manages visible columns on the table
-    const hiddenColumnNames = ref(getItem(VISIBLE_COLUMNS_KEY, []));
+	// Manages visible columns on the table
+	const hiddenColumnNames = ref(getItem(VISIBLE_COLUMNS_KEY, []));
 
-    // Title columns will have their name appear on the first column of the table as part of the records' title
-    const titleColumnNames = ref(getItem(TITLE_COLUMNS_KEY, []));
+	// Title columns will have their name appear on the first column of the table as part of the records' title
+	const titleColumnNames = ref(getItem(TITLE_COLUMNS_KEY, []));
 
-    // Columns that should be locked to the left side of the table
-    const lockedColumns = computed(() => orderedColumns.value.slice(0, 1));
+	// Columns that should be locked to the left side of the table
+	const lockedColumns = computed(() => orderedColumns.value.slice(0, 1));
 
-    // The resolved list of columns in the order they should appear in
-    const orderedColumns = computed(() => [...columns].sort((a, b) => {
-        const aIndex = columnOrder.value.indexOf(a.name);
-        const bIndex = columnOrder.value.indexOf(b.name);
-        return aIndex === -1 ? 1 : bIndex === -1 ? -1 : aIndex - bIndex;
-    }));
+	// The resolved list of columns in the order they should appear in
+	const orderedColumns = computed(() => [...columns].sort((a, b) => {
+		const aIndex = columnOrder.value.indexOf(a.name);
+		const bIndex = columnOrder.value.indexOf(b.name);
+		return aIndex === -1 ? 1 : bIndex === -1 ? -1 : aIndex - bIndex;
+	}));
 
-    // The ordered list of columns. The ordering of this list is editable and will be stored in localStorage
-    const sortableColumns = computed({
-        get() {
-            return orderedColumns.value.slice(1);
-        },
-        set(newColumns) {
-            columnOrder.value = [...lockedColumns.value.map(c => c.name), ...newColumns.map(c => c.name)];
-            setItem(COLUMN_ORDER_KEY, columnOrder.value);
-        }
-    });
+	// The ordered list of columns. The ordering of this list is editable and will be stored in localStorage
+	const sortableColumns = computed({
+		get() {
+			return orderedColumns.value.slice(1);
+		},
+		set(newColumns) {
+			columnOrder.value = [...lockedColumns.value.map(c => c.name), ...newColumns.map(c => c.name)];
+			setItem(COLUMN_ORDER_KEY, columnOrder.value);
+		}
+	});
 
-    // The list of columns that are visible. To edit the visible columns, edit the hiddenColumnNames list
-    const visibleColumns = computed(() => orderedColumns.value.filter(c => !hiddenColumnNames.value.includes(c.name)));
+	// The list of columns that are visible. To edit the visible columns, edit the hiddenColumnNames list
+	const visibleColumns = computed(() => orderedColumns.value.filter(c => !hiddenColumnNames.value.includes(c.name)));
 
-    // The list of columns that should be included in the title of a row
-    const orderedTitleColumns = computed(() => orderedColumns.value.filter(c => titleColumnNames.value.includes(c.name)));
+	// The list of columns that should be included in the title of a row
+	const orderedTitleColumns = computed(() => orderedColumns.value.filter(c => titleColumnNames.value.includes(c.name)));
 
-    // Save changes to the list of hidden columns in localStorage
-    watch(() => hiddenColumnNames.value, () => setItem(VISIBLE_COLUMNS_KEY, hiddenColumnNames.value));
-    watch(() => titleColumnNames.value, () => setItem(TITLE_COLUMNS_KEY, titleColumnNames.value));
+	// Save changes to the list of hidden columns in localStorage
+	watch(() => hiddenColumnNames.value, () => setItem(VISIBLE_COLUMNS_KEY, hiddenColumnNames.value));
+	watch(() => titleColumnNames.value, () => setItem(TITLE_COLUMNS_KEY, titleColumnNames.value));
 
-    return {
-        sortableColumns,
-        lockedColumns,
-        visibleColumns,
-        hiddenColumnNames,
-        titleColumnNames,
-        orderedTitleColumns
-    };
+	return {
+		sortableColumns,
+		lockedColumns,
+		visibleColumns,
+		hiddenColumnNames,
+		titleColumnNames,
+		orderedTitleColumns
+	};
 }

package/src/components/PanelsDrawer/PanelsDrawer.vue

@@ -4,30 +4,40 @@
     :show="true"
     overlay
     content-class="h-full"
+    class="dx-panels-drawer"
     title=""
     @update:show="$emit('close')"
   >
     <div class="flex flex-col flex-nowrap h-full">
-      <div class="flex items-center px-6 py-4 border-b">
+      <div class="dx-panels-drawer-header flex items-center px-6 py-4">
         <div class="flex-grow">
-          <slot name="header" />
+          <slot name="header">
+            <h2>{{ title }}</h2>
+          </slot>
+        </div>
+        <div
+          v-if="$slots.controls"
+          class="mr-4"
+        >
+          <slot name="controls" />
         </div>
-
         <div>
-          <QBtn @click="$emit('close')">
+          <QBtn
+            class="dx-close-button"
+            @click="$emit('close')"
+          >
             <CloseIcon class="w-4" />
           </QBtn>
         </div>
       </div>
-      <div class="flex-grow overflow-hidden h-full">
+      <div class="dx-panels-drawer-body flex-grow overflow-hidden h-full">
         <div class="flex items-stretch flex-nowrap h-full">
-          <div class="border-r w-[13.5rem] overflow-y-auto">
-            <PanelsDrawerTabs
-              v-model="activePanel"
-              :panels="panels"
-              @update:model-value="$emit('update:model-value', $event)"
-            />
-          </div>
+          <PanelsDrawerTabs
+            v-model="activePanel"
+            :class="tabsClass"
+            :panels="panels"
+            @update:model-value="$emit('update:model-value', $event)"
+          />
           <PanelsDrawerPanels
             :panels="panels"
             :active-panel="activePanel"
@@ -44,27 +54,28 @@
     </div>
   </ContentDrawer>
 </template>
-<script setup>
+<script setup lang="ts">
 import { ref, watch } from "vue";
 import { XIcon as CloseIcon } from "../../svg";
+import { ActionPanel } from "../ActionTable";
 import { ContentDrawer } from "../Utility";
 import PanelsDrawerPanels from "./PanelsDrawerPanels";
 import PanelsDrawerTabs from "./PanelsDrawerTabs";
 
+export interface Props {
+	title?: string,
+	modelValue?: string,
+	tabsClass?: string | object,
+	panelsClass?: string | object,
+	panels: ActionPanel[]
+}
+
 defineEmits(["update:model-value", "close"]);
-const props = defineProps({
-  modelValue: {
-    type: String,
-    default: null
-  },
-  panelsClass: {
-    type: [Object, String],
-    default: "w-[35.5rem]"
-  },
-  panels: {
-    type: Array,
-    required: true
-  }
+const props = withDefaults(defineProps<Props>(), {
+	title: "",
+	modelValue: null,
+	tabsClass: "w-[13.5rem]",
+	panelsClass: "w-[35.5rem]"
 });
 
 const activePanel = ref(props.modelValue);

package/src/components/PanelsDrawer/PanelsDrawerPanels.vue

@@ -1,7 +1,7 @@
 <template>
   <QTabPanels
     :model-value="activePanel"
-    class="overflow-y-auto bg-gray-100 h-full transition-all"
+    class="dx-panels-drawer-panels overflow-y-auto h-full transition-all"
   >
     <QTabPanel
       v-for="panel in panels"

package/src/components/PanelsDrawer/PanelsDrawerTabs.vue

@@ -1,5 +1,6 @@
 <template>
   <QTabs
+    class="dx-panels-drawer-tabs overflow-y-auto"
     :model-value="modelValue"
     vertical
     align="left"
@@ -50,8 +51,6 @@ defineProps({
 
   :global(.q-tab) {
     justify-content: start !important;
-    padding: 0;
-    @apply text-left py-2.5 px-2 rounded-lg hover:bg-slate-200;
 
     :global(.q-focus-helper), :global(.q-tab__indicator) {
       display: none;
@@ -61,9 +60,5 @@ defineProps({
       @apply p-0;
     }
   }
-
-  :global(.q-tab.q-tab--active) {
-    @apply text-white bg-blue-600;
-  }
 }
 </style>

package/src/components/Utility/Buttons/ExportButton.vue

@@ -1,6 +1,6 @@
 <template>
   <QBtn
-    class="bg-slate-200"
+    class="dx-export-button dx-action-button"
     :loading="isExporting"
     @click="onExport"
   >

package/src/components/Utility/Buttons/RefreshButton.vue

@@ -1,16 +1,16 @@
 <template>
   <QBtn
-    class="bg-slate-200"
+    class="dx-refresh-button dx-action-button"
     :loading="loading"
   >
     <RefreshIcon class="w-5" />
   </QBtn>
 </template>
-<script setup>
+<script setup lang="ts">
 import { RefreshIcon } from "@heroicons/vue/solid";
 
 defineEmits(["refresh"]);
-defineProps({
-  loading: Boolean
-});
+defineProps<{
+  loading?: boolean
+}>();
 </script>

package/src/components/Utility/Controls/PreviousNextControls.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="previous-next-controls">
+  <div class="dx-previous-next-controls">
     <QBtn
-      class="bg-slate-200 border-gray-300 border border-solid !rounded-r-none !p-2 !min-w-0"
+      class="dx-control dx-control-previous border border-solid !rounded-r-none !p-2 !min-w-0"
       :disable="isLoading"
       :loading="isLoading"
       @click="$emit('next', -1)"
@@ -9,7 +9,7 @@
       <SkipPreviousIcon class="w-6" />
     </QBtn>
     <QBtn
-      class="bg-slate-200 border-gray-300 border border-solid border-l-0 !rounded-l-none !p-2 !min-w-0"
+      class="dx-control dx-control-next border border-solid border-l-0 !rounded-l-none !p-2 !min-w-0"
       :disable="isLoading"
       :loading="isLoading"
       @click="$emit('next', 1)"
@@ -23,6 +23,6 @@ import { SkipNextIcon, SkipPreviousIcon } from "../../../svg";
 
 defineEmits(["next"]);
 defineProps({
-  isLoading: Boolean
+	isLoading: Boolean
 });
 </script>

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>