quasar-ui-danx 0.3.12 → 0.3.13

package/package.json

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

package/src/components/ActionTable/ActionTable.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="overflow-hidden w-full">
+  <div
+    class="dx-action-table overflow-hidden w-full"
+    :class="{'dx-no-data': !hasData}"
+  >
     <ActionVnode />
     <QTable
       ref="actionTable"
@@ -12,10 +15,10 @@
       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:quasar-pagination', {...e.pagination, __sort: mapSortBy(e.pagination, columns)})"
     >
       <template #no-data>
         <slot name="empty">
@@ -24,6 +27,7 @@
       </template>
       <template #top-row>
         <TableSummaryRow
+          v-if="hasData"
           :label="label"
           :item-count="summary?.count || 0"
           :selected-count="selectedRows.length"
@@ -60,7 +64,7 @@
 
 <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";
@@ -79,6 +83,10 @@ const props = defineProps({
     type: String,
     required: true
   },
+  color: {
+    type: String,
+    default: "blue-600"
+  },
   selectedRows: {
     type: Array,
     required: true
@@ -109,9 +117,21 @@ 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="0"
-    max-width="18rem"
+    :min-width="minWidth"
+    :max-width="maxWidth"
     :name="name"
     @update:collapse="$emit('update:show-filters', !$event)"
   >
@@ -29,6 +29,14 @@ 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,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/Layouts/ActionTableLayout.vue

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