quasar-ui-danx 0.3.22 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-danx",
-  "version": "0.3.22",
+  "version": "0.4.1",
   "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"
+      :pagination="pagination"
       :columns="columns"
-      :loading="isLoadingList"
+      :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, columns)})"
     >
       <template #no-data>
         <slot name="empty">
@@ -24,10 +27,11 @@
       </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"
           @clear="$emit('update:selected-rows', [])"
@@ -60,58 +64,73 @@
 
 <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 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

@@ -2,36 +2,37 @@
   <CollapsableSidebar
     :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/FileUploadButton.vue

@@ -12,8 +12,8 @@
       ref="fileUpload"
       data-testid="file-upload"
       type="file"
-      :accept="(geolocation && cameraOnly) ? 'image/*;capture=camera' : undefined"
-      :capture="(geolocation && cameraOnly) ? 'environment' : undefined"
+      :accept="geolocation ? 'image/*;capture=camera' : undefined"
+      :capture="geolocation ? 'environment' : undefined"
       class="hidden"
       multiple
       @change="onAttachFiles"
@@ -28,29 +28,28 @@ import { FileUpload } from "../../../../helpers";
 
 defineExpose({ upload });
 const emit = defineEmits([
-	"uploading",
-	"file-progress",
-	"file-complete",
-	"complete"
+  "uploading",
+  "file-progress",
+  "file-complete",
+  "complete"
 ]);
 const props = defineProps({
-	...QBtn.props,
-	text: {
-		type: String,
-		default: "Add File"
-	},
-	locationWaitMessage: {
-		type: String,
-		default: "Waiting for location..."
-	},
-	cameraOnly: Boolean,
-	geolocation: Boolean
+  ...QBtn.props,
+  text: {
+    type: String,
+    default: "Add File"
+  },
+  locationWaitMessage: {
+    type: String,
+    default: "Waiting for location..."
+  },
+  geolocation: Boolean
 });
 
 const fileUpload = ref(null);
 
 function upload() {
-	fileUpload.value.click();
+  fileUpload.value.click();
 }
 
 /**
@@ -60,23 +59,23 @@ function upload() {
  * @returns {Promise<void>}
  */
 async function onAttachFiles({ target: { files } }) {
-	emit("uploading", files);
-	let fileUpload = new FileUpload(files)
-		.onProgress(({ file, progress }) => {
-			file.progress = progress;
-			emit("file-progress", file);
-		})
-		.onComplete(({ file, uploadedFile }) => {
-			emit("file-complete", { file, uploadedFile });
-		})
-		.onAllComplete(() => {
-			emit("complete", fileUpload.files);
-		});
+  emit("uploading", files);
+  let fileUpload = new FileUpload(files)
+    .onProgress(({ file, progress }) => {
+      file.progress = progress;
+      emit("file-progress", file);
+    })
+    .onComplete(({ file, uploadedFile }) => {
+      emit("file-complete", { file, uploadedFile });
+    })
+    .onAllComplete(() => {
+      emit("complete", fileUpload.files);
+    });
 
-	if (props.geolocation) {
-		await fileUpload.resolveLocation(props.locationWaitMessage);
-	}
+  if (props.geolocation) {
+    await fileUpload.resolveLocation(props.locationWaitMessage);
+  }
 
-	fileUpload.upload();
+  fileUpload.upload();
 }
 </script>

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

@@ -42,41 +42,41 @@ import LabelValueBlock from "./LabelValueBlock";
 
 defineEmits(["update:model-value", "submit"]);
 defineProps({
-  modelValue: {
-    type: [String, Number],
-    default: ""
-  },
-  field: {
-    type: Object,
-    default: null
-  },
-  type: {
-    type: String,
-    default: "text"
-  },
-  label: {
-    type: String,
-    default: null
-  },
-  labelClass: {
-    type: String,
-    default: "text-sm text-gray-700"
-  },
-  parentClass: {
-    type: String,
-    default: ""
-  },
-  inputClass: {
-    type: String,
-    default: ""
-  },
-  noLabel: Boolean,
-  showName: Boolean,
-  disabled: Boolean,
-  readonly: Boolean,
-  debounce: {
-    type: [String, Number],
-    default: 0
-  }
+	modelValue: {
+		type: [String, Number],
+		default: ""
+	},
+	field: {
+		type: Object,
+		default: null
+	},
+	type: {
+		type: String,
+		default: "text"
+	},
+	label: {
+		type: String,
+		default: null
+	},
+	labelClass: {
+		type: String,
+		default: ""
+	},
+	parentClass: {
+		type: String,
+		default: ""
+	},
+	inputClass: {
+		type: String,
+		default: ""
+	},
+	noLabel: Boolean,
+	showName: Boolean,
+	disabled: Boolean,
+	readonly: Boolean,
+	debounce: {
+		type: [String, Number],
+		default: 0
+	}
 });
 </script>