quasar-ui-danx 0.3.22 → 0.4.2

package/package.json

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

package/src/components/ActionTable/ActionMenu.vue

@@ -1,6 +1,6 @@
 <template>
   <PopoverMenu
-    class="px-2 flex action-button"
+    class="px-2 flex dx-action-button"
     :items="activeActions"
     :disabled="!hasTarget"
     :tooltip="!hasTarget ? tooltip : null"

package/src/components/ActionTable/ActionTable.vue

@@ -1,21 +1,24 @@
 <template>
-  <div class="overflow-hidden w-full">
+  <div
+    class="dx-action-table overflow-hidden"
+    :class="{'dx-no-data': !hasData}"
+  >
     <ActionVnode />
     <QTable
       ref="actionTable"
       :selected="selectedRows"
-      :pagination="quasarPagination"
-      :columns="columns"
-      :loading="isLoadingList"
+      :pagination="pagination"
+      :columns="tableColumns"
+      :loading="loadingList"
       :rows="pagedItems?.data || []"
       :binary-state-sort="false"
       selection="multiple"
       :rows-per-page-options="rowsPerPageOptions"
       class="sticky-column sticky-header w-full h-full !border-0"
-      color="blue-600"
+      :color="color"
       @update:selected="$emit('update:selected-rows', $event)"
       @update:pagination="() => {}"
-      @request="$emit('update:quasar-pagination', {...$event.pagination, __sort: mapSortBy($event.pagination, columns)})"
+      @request="(e) => $emit('update:pagination', {...e.pagination, __sort: mapSortBy(e.pagination, tableColumns)})"
     >
       <template #no-data>
         <slot name="empty">
@@ -24,12 +27,13 @@
       </template>
       <template #top-row>
         <TableSummaryRow
+          v-if="hasData"
           :label="label"
           :item-count="summary?.count || 0"
           :selected-count="selectedRows.length"
-          :loading="isLoadingSummary"
+          :loading="loadingSummary"
           :summary="summary"
-          :columns="columns"
+          :columns="tableColumns"
           @clear="$emit('update:selected-rows', [])"
         />
       </template>
@@ -60,58 +64,74 @@
 
 <script setup>
 import { QTable } from "quasar";
-import { ref } from "vue";
+import { computed, ref } from "vue";
 import { getItem, setItem } from "../../helpers";
 import { ActionVnode } from "../Utility";
-import ActionTableColumn from "./ActionTableColumn.vue";
-import ActionTableHeaderColumn from "./ActionTableHeaderColumn";
+import { ActionTableColumn, ActionTableHeaderColumn } from "./Columns";
 import EmptyTableState from "./EmptyTableState.vue";
 import { mapSortBy, registerStickyScrolling } from "./listHelpers";
 import TableSummaryRow from "./TableSummaryRow.vue";
 
-defineEmits(["update:quasar-pagination", "update:selected-rows"]);
+defineEmits(["update:selected-rows", "update:pagination"]);
 const props = defineProps({
-  name: {
-    type: String,
-    required: true
-  },
-  label: {
-    type: String,
-    required: true
-  },
-  selectedRows: {
-    type: Array,
-    required: true
-  },
-  quasarPagination: {
-    type: Object,
-    required: true
-  },
-  isLoadingList: Boolean,
-  pagedItems: {
-    type: Object,
-    default: null
-  },
-  isLoadingSummary: Boolean,
-  summary: {
-    type: Object,
-    default: null
-  },
-  columns: {
-    type: Array,
-    required: true
-  },
-  rowsPerPageOptions: {
-    type: Array,
-    default: () => [10, 25, 50, 100]
-  }
+	name: {
+		type: String,
+		required: true
+	},
+	label: {
+		type: String,
+		required: true
+	},
+	color: {
+		type: String,
+		default: "blue-600"
+	},
+	selectedRows: {
+		type: Array,
+		required: true
+	},
+	pagination: {
+		type: Object,
+		required: true
+	},
+	loadingList: Boolean,
+	loadingSummary: Boolean,
+	pagedItems: {
+		type: Object,
+		default: null
+	},
+	summary: {
+		type: Object,
+		default: null
+	},
+	columns: {
+		type: Array,
+		required: true
+	},
+	rowsPerPageOptions: {
+		type: Array,
+		default: () => [10, 25, 50, 100]
+	}
 });
 const actionTable = ref(null);
 registerStickyScrolling(actionTable);
 
+const tableColumns = computed(() => props.columns.map((column) => ({ ...column, field: column.field || column.name })));
+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;
+		}
+	}
+}
+</style>

package/src/components/ActionTable/{ActionTableColumn.vue → Columns/ActionTableColumn.vue}

@@ -44,6 +44,7 @@
           class="flex flex-shrink-0 pl-2"
         >
           <ActionMenu
+            class="dx-column-action-menu"
             :actions="column.actionMenu"
             :target="row"
             :loading="isSaving"
@@ -56,9 +57,9 @@
 <script setup>
 import { QTd } from "quasar";
 import { computed } from "vue";
-import { RenderVnode } from "../Utility";
-import ActionMenu from "./ActionMenu";
-import { TitleColumnFormat } from "./Columns";
+import { RenderVnode } from "../../Utility";
+import ActionMenu from "../ActionMenu";
+import { TitleColumnFormat } from "./";
 
 const props = defineProps({
   rowProps: {

package/src/components/ActionTable/{ActionTableHeaderColumn.vue → Columns/ActionTableHeaderColumn.vue}

@@ -20,8 +20,8 @@
 <script setup>
 import { QTh } from "quasar";
 import { computed } from "vue";
-import { DragHandleIcon as RowResizeIcon } from "../../svg";
-import { HandleDraggable } from "../DragAndDrop";
+import { DragHandleIcon as RowResizeIcon } from "../../../svg";
+import { HandleDraggable } from "../../DragAndDrop";
 
 const emit = defineEmits(["update:model-value"]);
 const props = defineProps({

package/src/components/ActionTable/Columns/index.ts

@@ -1,3 +1,5 @@
+export { default as ActionTableColumn } from "./ActionTableColumn.vue";
+export { default as ActionTableHeaderColumn } from "./ActionTableHeaderColumn.vue";
 export { default as ColumnListItem } from "./ColumnListItem.vue";
 export { default as ColumnSettingsDialog } from "./ColumnSettingsDialog.vue";
 export { default as TitleColumnFormat } from "./TitleColumnFormat.vue";

package/src/components/ActionTable/Filters/CollapsableFiltersSidebar.vue

@@ -1,37 +1,39 @@
 <template>
   <CollapsableSidebar
+    class="dx-collapsable-filters-sidebar"
     :collapse="!showFilters"
     disabled
-    min-width="0"
-    max-width="18rem"
+    :min-width="minWidth"
+    :max-width="maxWidth"
     :name="name"
     @update:collapse="$emit('update:show-filters', !$event)"
   >
     <FilterFieldList
-      :filter="filter"
-      :filter-fields="filterFields"
-      @update:filter="$emit('update:filter', $event)"
+      :filter="activeFilter"
+      :filter-fields="filters"
+      @update:filter="$emit('update:active-filter', $event)"
     />
   </CollapsableSidebar>
 </template>
-<script setup>
+<script setup lang="ts">
+import { FilterField, ListControlsFilter } from "src/components/ActionTable/listControls";
 import { FilterFieldList } from ".";
 import { CollapsableSidebar } from "../../Utility";
 
-defineEmits(["update:filter", "update:show-filters"]);
-defineProps({
-  name: {
-    type: String,
-    required: true
-  },
-  showFilters: Boolean,
-  filter: {
-    type: Object,
-    default: null
-  },
-  filterFields: {
-    type: Array,
-    default: () => []
-  }
+defineEmits(["update:active-filter", "update:show-filters"]);
+
+export interface Props {
+	name: string,
+	showFilters?: boolean,
+	activeFilter: ListControlsFilter,
+	minWidth?: string,
+	maxWidth?: string,
+	filters?: FilterField[]
+}
+
+withDefaults(defineProps<Props>(), {
+	minWidth: "5rem",
+	maxWidth: "18rem",
+	filters: () => []
 });
 </script>

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

@@ -1,10 +1,7 @@
 <template>
   <div>
-    <div
-      v-if="label"
-      class="font-bold text-xs mb-2"
-    >
-      {{ label }}
+    <div class="mb-2">
+      <FieldLabel :label="label" />
     </div>
     <template v-if="inline">
       <QDate
@@ -41,6 +38,7 @@
 import { CalendarIcon as DateIcon } from "@heroicons/vue/outline";
 import { computed, ref, watch } from "vue";
 import { fDate, parseQDate, parseQDateTime } from "../../../../helpers";
+import FieldLabel from "./FieldLabel";
 
 const emit = defineEmits(["update:model-value"]);
 const props = defineProps({

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

@@ -1,13 +1,14 @@
 <template>
   <QInput
+    class="dx-number-field max-w-full"
+    :class="{'dx-no-prepend-label': hidePrependLabel, 'dx-prepend-label': !hidePrependLabel}"
     :model-value="numberVal"
     :data-testid="'number-field-' + fieldOptions.id"
     :placeholder="fieldOptions.placeholder"
     outlined
     dense
     inputmode="numeric"
-    :input-class="{[inputClass]: true, 'text-right bg-white': !hidePrependLabel, 'text-right !text-xs text-black font-normal': hidePrependLabel}"
-    :class="{'no-prepend-icon w-32 max-w-full': hidePrependLabel, 'prepend-label': !hidePrependLabel}"
+    :input-class="inputClass"
     @update:model-value="onInput"
   >
     <template #prepend>
@@ -27,33 +28,33 @@ import FieldLabel from "./FieldLabel";
 
 const emit = defineEmits(["update:model-value", "update"]);
 const props = defineProps({
-  modelValue: {
-    type: [String, Number],
-    default: ""
-  },
-  precision: {
-    type: Number,
-    default: 2
-  },
-  label: {
-    type: String,
-    default: undefined
-  },
-  field: {
-    type: Object,
-    default: null
-  },
-  inputClass: {
-    type: String,
-    default: ""
-  },
-  delay: {
-    type: Number,
-    default: 1000
-  },
-  hidePrependLabel: Boolean,
-  currency: Boolean,
-  showName: Boolean
+	modelValue: {
+		type: [String, Number],
+		default: ""
+	},
+	precision: {
+		type: Number,
+		default: 2
+	},
+	label: {
+		type: String,
+		default: undefined
+	},
+	field: {
+		type: Object,
+		default: null
+	},
+	inputClass: {
+		type: [String, Object],
+		default: ""
+	},
+	delay: {
+		type: Number,
+		default: 1000
+	},
+	hidePrependLabel: Boolean,
+	currency: Boolean,
+	showName: Boolean
 });
 
 const numberVal = ref(format(props.modelValue));
@@ -62,46 +63,46 @@ watch(() => props.modelValue, () => numberVal.value = format(props.modelValue));
 const fieldOptions = computed(() => props.field || { label: props.label || "", placeholder: "", id: "" });
 
 function format(number) {
-  if (!number && number !== 0 && number !== "0") return number;
+	if (!number && number !== 0 && number !== "0") return number;
 
-  const minimumFractionDigits = Math.min(props.precision, ("" + number).split(".")[1]?.length || 0);
-  let options = {
-    minimumFractionDigits
-  };
+	const minimumFractionDigits = Math.min(props.precision, ("" + number).split(".")[1]?.length || 0);
+	let options = {
+		minimumFractionDigits
+	};
 
-  if (props.currency) {
-    options = {
-      style: "currency",
-      currency: "USD",
-      minimumFractionDigits
-    };
-  }
-  return fNumber(number, options);
+	if (props.currency) {
+		options = {
+			style: "currency",
+			currency: "USD",
+			minimumFractionDigits
+		};
+	}
+	return fNumber(number, options);
 }
 
 const onUpdateDebounced = useDebounceFn((val) => emit("update", val), props.delay);
 
 function onInput(value) {
-  let number = "";
+	let number = "";
 
-  // Prevent invalid characters
-  if (value.match(/[^\d.,$]/)) {
-    const oldVal = numberVal.value;
-    // XXX: To get QInput to show only the value we want
-    numberVal.value += " ";
-    return nextTick(() => numberVal.value = oldVal);
-  }
+	// Prevent invalid characters
+	if (value.match(/[^\d.,$]/)) {
+		const oldVal = numberVal.value;
+		// XXX: To get QInput to show only the value we want
+		numberVal.value += " ";
+		return nextTick(() => numberVal.value = oldVal);
+	}
 
-  if (value !== "") {
-    value = value.replace(/[^\d.]/g, "");
-    number = Number(value);
-    numberVal.value = format(number);
-  }
+	if (value !== "") {
+		value = value.replace(/[^\d.]/g, "");
+		number = Number(value);
+		numberVal.value = format(number);
+	}
 
-  number = number === "" ? undefined : number;
-  emit("update:model-value", number);
+	number = number === "" ? undefined : number;
+	emit("update:model-value", number);
 
-  // Delay the change event, so we only see the value after the user has finished
-  onUpdateDebounced(number);
+	// Delay the change event, so we only see the value after the user has finished
+	onUpdateDebounced(number);
 }
 </script>