quasar-ui-danx 0.4.87 → 0.4.89

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-danx",
-  "version": "0.4.87",
+  "version": "0.4.89",
   "author": "Dan <dan@flytedesk.com>",
   "description": "DanX Vue / Quasar component library",
   "license": "MIT",

package/src/components/ActionTable/ActionTable.vue

@@ -5,7 +5,7 @@
   >
     <QTable
       ref="actionTable"
-      :selected="selectedRows"
+      :selected="selectedRows || []"
       :pagination="pagination"
       :columns="tableColumns"
       :loading="loadingList || loadingSummary"
@@ -29,7 +29,7 @@
           v-if="hasData"
           :label="label"
           :item-count="summary?.count || 0"
-          :selected-count="selectedRows.length"
+          :selected-count="selectedRows?.length"
           :sticky-colspan="summaryColSpan"
           :loading="loadingSummary"
           :summary="summary"
@@ -75,77 +75,78 @@ import TableSummaryRow from "./TableSummaryRow.vue";
 defineEmits(["update:selected-rows", "update:pagination"]);
 
 export interface Props {
-	name: string;
-	label: string;
-	color?: string;
-	selectedRows: ActionTargetItem[];
-	pagination: ListControlsPagination;
-	loadingList?: boolean;
-	loadingSummary?: boolean;
-	pagedItems?: any;
-	summary: any;
-	menuActions?: ResourceAction[];
-	columns: TableColumn[];
-	rowsPerPageOptions?: number[];
-	summaryColSpan?: number;
-	selection: "multiple" | "single";
+  name: string;
+  label: string;
+  color?: string;
+  selectedRows?: ActionTargetItem[];
+  pagination: ListControlsPagination;
+  loadingList?: boolean;
+  loadingSummary?: boolean;
+  pagedItems?: any;
+  summary: any;
+  menuActions?: ResourceAction[];
+  columns: TableColumn[];
+  rowsPerPageOptions?: number[];
+  summaryColSpan?: number;
+  selection?: "multiple" | "single";
 }
 
 const props = withDefaults(defineProps<Props>(), {
-	color: "",
-	pagedItems: null,
-	summary: null,
-	loadingSummary: false,
-	rowsPerPageOptions: () => [10, 25, 50, 100],
-	summaryColSpan: null,
-	selection: "multiple"
+  color: "",
+  pagedItems: null,
+  summary: null,
+  loadingSummary: false,
+  rowsPerPageOptions: () => [10, 25, 50, 100],
+  summaryColSpan: null,
+  selection: undefined
 });
 
 const actionTable = ref(null);
 registerStickyScrolling(actionTable);
 
 const tableColumns = computed<TableColumn[]>(() => {
-	const columns = [...props.columns].map((column: TableColumn) => ({
-		...column,
-		field: column.field || column.name
-	}));
+  const columns = [...props.columns].map((column: TableColumn) => ({
+    ...column,
+    field: column.field || column.name
+  }));
 
-	// Inject the Action Menu column if there are menu actions
-	if (props.menuActions?.length) {
-		const menuColumn = columns.find((column) => column.name === "menu");
-		const menuColumnOptions: TableColumn = {
-			name: "menu",
-			label: "",
-			required: true,
-			hideContent: true,
-			shrink: true,
-			actionMenu: props.menuActions
-		};
+  // Inject the Action Menu column if there are menu actions
+  if (props.menuActions?.length) {
+    const menuColumn = columns.find((column) => column.name === "menu");
+    const menuColumnOptions: TableColumn = {
+      name: "menu",
+      label: "",
+      required: true,
+      hideContent: true,
+      shrink: true,
+      actionMenu: props.menuActions
+    };
 
-		if (menuColumn) {
-			Object.assign(menuColumn, menuColumnOptions);
-		} else {
-			columns.unshift(menuColumnOptions);
-		}
-	}
+    if (menuColumn) {
+      Object.assign(menuColumn, menuColumnOptions);
+    } else {
+      columns.unshift(menuColumnOptions);
+    }
+  }
 
-	return columns;
+  return columns;
 });
 const hasData = computed(() => props.pagedItems?.data?.length);
 const COLUMN_SETTINGS_KEY = `column-settings-${props.name}`;
 const columnSettings = ref(getItem(COLUMN_SETTINGS_KEY) || {});
+
 function onUpdateColumnSettings() {
-	setItem(COLUMN_SETTINGS_KEY, columnSettings.value);
+  setItem(COLUMN_SETTINGS_KEY, columnSettings.value);
 }
 </script>
 
 <style scoped lang="scss">
 .dx-action-table {
-	&.dx-no-data {
-		:deep(.q-table__middle) {
-			flex-grow: 0;
-			flex-shrink: 1;
-		}
-	}
+  &.dx-no-data {
+    :deep(.q-table__middle) {
+      flex-grow: 0;
+      flex-shrink: 1;
+    }
+  }
 }
 </style>

package/src/components/ActionTable/Form/Fields/DateField.vue

@@ -42,22 +42,22 @@ import { fDate, parseDateTime } from "../../../../helpers";
 
 const emit = defineEmits(["update:model-value"]);
 const props = defineProps<{
-	modelValue?: string | null;
-	label: string | null;
-	clearable: boolean;
+  modelValue?: string | null;
+  label: string | null;
+  clearable?: boolean;
 }>();
 
 const formattedDate = computed(() => {
-	if (props.modelValue) {
-		return fDate(parseDateTime(props.modelValue || "0000-00-00"));
-	}
-	return "- -";
+  if (props.modelValue) {
+    return fDate(parseDateTime(props.modelValue || "0000-00-00"));
+  }
+  return "- -";
 });
 
 const date = ref(parseDateTime(props.modelValue));
 watch(() => props.modelValue, val => date.value = val);
 
 function onSave() {
-	emit("update:model-value", date.value);
+  emit("update:model-value", date.value);
 }
 </script>

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

@@ -65,6 +65,7 @@ import {
   FaSolidClock as ClockIcon,
   FaSolidCodeMerge as MergeIcon,
   FaSolidCopy as CopyIcon,
+  FaSolidDatabase as DatabaseIcon,
   FaSolidEye as ViewIcon,
   FaSolidFileExport as ExportIcon,
   FaSolidFileImport as ImportIcon,
@@ -82,7 +83,7 @@ import { computed, ref } from "vue";
 import { ActionTarget, ResourceAction } from "../../../types";
 
 export interface ActionButtonProps {
-  type?: "save" | "trash" | "back" | "create" | "edit" | "copy" | "folder" | "play" | "stop" | "pause" | "refresh" | "restart" | "confirm" | "cancel" | "export" | "import" | "minus" | "merge" | "check" | "clock" | "view";
+  type?: "save" | "trash" | "back" | "create" | "edit" | "copy" | "folder" | "play" | "stop" | "pause" | "refresh" | "restart" | "confirm" | "cancel" | "export" | "import" | "minus" | "merge" | "check" | "clock" | "view" | "database";
   color?: "red" | "blue" | "blue-invert" | "sky" | "sky-invert" | "green" | "green-invert" | "lime" | "white" | "gray" | "slate" | "slate-invert" | "yellow" | "orange";
   size?: "xxs" | "xs" | "sm" | "md" | "lg";
   icon?: object | string;
@@ -230,6 +231,8 @@ const typeOptions = computed(() => {
       return { icon: CheckIcon };
     case "view":
       return { icon: ViewIcon };
+    case "database":
+      return { icon: DatabaseIcon };
     default:
       return { icon: EditIcon };
   }