quasar-ui-danx 0.3.13 → 0.3.21

package/package.json

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

package/src/components/ActionTable/ActionTable.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
-    class="dx-action-table overflow-hidden w-full"
-    :class="{'dx-no-data': !hasData}"
-  >
+  <div class="overflow-hidden w-full">
     <ActionVnode />
     <QTable
       ref="actionTable"
@@ -15,10 +12,10 @@
       selection="multiple"
       :rows-per-page-options="rowsPerPageOptions"
       class="sticky-column sticky-header w-full h-full !border-0"
-      :color="color"
+      color="blue-600"
       @update:selected="$emit('update:selected-rows', $event)"
       @update:pagination="() => {}"
-      @request="(e) => $emit('update:quasar-pagination', {...e.pagination, __sort: mapSortBy(e.pagination, columns)})"
+      @request="$emit('update:quasar-pagination', {...$event.pagination, __sort: mapSortBy($event.pagination, columns)})"
     >
       <template #no-data>
         <slot name="empty">
@@ -27,7 +24,6 @@
       </template>
       <template #top-row>
         <TableSummaryRow
-          v-if="hasData"
           :label="label"
           :item-count="summary?.count || 0"
           :selected-count="selectedRows.length"
@@ -64,7 +60,7 @@
 
 <script setup>
 import { QTable } from "quasar";
-import { computed, ref } from "vue";
+import { ref } from "vue";
 import { getItem, setItem } from "../../helpers";
 import { ActionVnode } from "../Utility";
 import ActionTableColumn from "./ActionTableColumn.vue";
@@ -83,10 +79,6 @@ const props = defineProps({
     type: String,
     required: true
   },
-  color: {
-    type: String,
-    default: "blue-600"
-  },
   selectedRows: {
     type: Array,
     required: true
@@ -117,21 +109,9 @@ const props = defineProps({
 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);
 }
 </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/Filters/CollapsableFiltersSidebar.vue

@@ -2,8 +2,8 @@
   <CollapsableSidebar
     :collapse="!showFilters"
     disabled
-    :min-width="minWidth"
-    :max-width="maxWidth"
+    min-width="0"
+    max-width="18rem"
     :name="name"
     @update:collapse="$emit('update:show-filters', !$event)"
   >
@@ -29,14 +29,6 @@ defineProps({
     type: Object,
     default: null
   },
-  minWidth: {
-    type: String,
-    default: "5rem"
-  },
-  maxWidth: {
-    type: String,
-    default: "18rem"
-  },
   filterFields: {
     type: Array,
     default: () => []

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

@@ -1,7 +1,10 @@
 <template>
   <div>
-    <div class="mb-2">
-      <FieldLabel :label="label" />
+    <div
+      v-if="label"
+      class="font-bold text-xs mb-2"
+    >
+      {{ label }}
     </div>
     <template v-if="inline">
       <QDate
@@ -38,7 +41,6 @@
 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

@@ -8,12 +8,13 @@
       {{ text }}
     </slot>
 
+    {{ "accept: " + ((geolocation && cameraOnly) ? "image/*;capture=camera" : undefined) }}
     <input
       ref="fileUpload"
       data-testid="file-upload"
       type="file"
-      :accept="geolocation ? 'image/*;capture=camera' : undefined"
-      :capture="geolocation ? 'environment' : undefined"
+      :accept="(geolocation && cameraOnly) ? 'image/*;capture=camera' : undefined"
+      :capture="(geolocation && cameraOnly) ? 'environment' : undefined"
       class="hidden"
       multiple
       @change="onAttachFiles"
@@ -28,28 +29,29 @@ 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..."
-  },
-  geolocation: Boolean
+	...QBtn.props,
+	text: {
+		type: String,
+		default: "Add File"
+	},
+	locationWaitMessage: {
+		type: String,
+		default: "Waiting for location..."
+	},
+	cameraOnly: Boolean,
+	geolocation: Boolean
 });
 
 const fileUpload = ref(null);
 
 function upload() {
-  fileUpload.value.click();
+	fileUpload.value.click();
 }
 
 /**
@@ -59,23 +61,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/Layouts/ActionTableLayout.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-grow flex-col flex-nowrap overflow-hidden h-full">
+  <div class="flex flex-grow flex-col flex-nowrap overflow-hidden h-full bg-white">
     <slot name="top" />
     <slot name="toolbar" />
     <div class="flex flex-nowrap flex-grow overflow-hidden w-full">

package/src/components/ActionTable/TableSummaryRow.vue

@@ -1,12 +1,12 @@
 <template>
   <QTr
-    class="dx-table-summary-tr sticky-column-1 transition-all sticky-row"
-    :class="{'has-selection': selectedCount, 'is-loading': loading}"
+    class="sticky-column-1 transition-all sticky-row"
+    :class="{'!bg-gray-100': !selectedCount, '!bg-blue-600 text-white selected': selectedCount, 'opacity-50': loading}"
   >
     <QTd
       :colspan="stickyColspan"
-      class="dx-table-summary-td transition-all"
-      :class="{'has-selection': selectedCount}"
+      class="font-bold transition-all"
+      :class="{'!bg-gray-100 !pl-5': !selectedCount, '!bg-blue-600 text-white !pl-4': selectedCount}"
     >
       <div class="flex flex-nowrap items-center">
         <div