quasar-ui-danx 0.3.11 → 0.3.13

package/package.json

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

package/src/components/ActionTable/ActionMenu.vue

@@ -1,12 +1,12 @@
 <template>
   <PopoverMenu
-      class="px-2 flex action-button"
-      :items="activeActions"
-      :disabled="!hasTarget"
-      :tooltip="!hasTarget ? tooltip : null"
-      :loading="isSaving || loading"
-      :loading-component="loadingComponent"
-      @action-item="onAction"
+    class="px-2 flex action-button"
+    :items="activeActions"
+    :disabled="!hasTarget"
+    :tooltip="!hasTarget ? tooltip : null"
+    :loading="isSaving || loading"
+    :loading-component="loadingComponent"
+    @action-item="onAction"
   />
 </template>
 <script setup>

package/src/components/ActionTable/ActionTable.vue

@@ -1,21 +1,24 @@
 <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"
-        :selected="selectedRows"
-        :pagination="quasarPagination"
-        :columns="columns"
-        :loading="isLoadingList"
-        :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"
-        @update:selected="$emit('update:selected-rows', $event)"
-        @update:pagination="() => {}"
-        @request="$emit('update:quasar-pagination', {...$event.pagination, __sort: mapSortBy($event.pagination, columns)})"
+      ref="actionTable"
+      :selected="selectedRows"
+      :pagination="quasarPagination"
+      :columns="columns"
+      :loading="isLoadingList"
+      :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="color"
+      @update:selected="$emit('update:selected-rows', $event)"
+      @update:pagination="() => {}"
+      @request="(e) => $emit('update:quasar-pagination', {...e.pagination, __sort: mapSortBy(e.pagination, columns)})"
     >
       <template #no-data>
         <slot name="empty">
@@ -24,30 +27,35 @@
       </template>
       <template #top-row>
         <TableSummaryRow
-            :label="label"
-            :item-count="summary?.count || 0"
-            :selected-count="selectedRows.length"
-            :loading="isLoadingSummary"
-            :summary="summary"
-            :columns="columns"
-            @clear="$emit('update:selected-rows',  [])"
+          v-if="hasData"
+          :label="label"
+          :item-count="summary?.count || 0"
+          :selected-count="selectedRows.length"
+          :loading="isLoadingSummary"
+          :summary="summary"
+          :columns="columns"
+          @clear="$emit('update:selected-rows', [])"
         />
       </template>
       <template #header-cell="rowProps">
         <ActionTableHeaderColumn
-            v-model="columnSettings"
-            :row-props="rowProps"
-            :name="name"
-            @update:model-value="onUpdateColumnSettings"
+          v-model="columnSettings"
+          :row-props="rowProps"
+          :name="name"
+          @update:model-value="onUpdateColumnSettings"
         />
       </template>
       <template #body-cell="rowProps">
         <ActionTableColumn
-            :key="rowProps.key"
-            :row-props="rowProps"
-            :settings="columnSettings[rowProps.col.name]"
+          :key="rowProps.key"
+          :row-props="rowProps"
+          :settings="columnSettings[rowProps.col.name]"
         >
-          <slot :column-name="rowProps.col.name" :row="rowProps.row" :value="rowProps.value" />
+          <slot
+            :column-name="rowProps.col.name"
+            :row="rowProps.row"
+            :value="rowProps.value"
+          />
         </ActionTableColumn>
       </template>
     </QTable>
@@ -56,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";
@@ -75,6 +83,10 @@ const props = defineProps({
     type: String,
     required: true
   },
+  color: {
+    type: String,
+    default: "blue-600"
+  },
   selectedRows: {
     type: Array,
     required: true
@@ -105,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/ActionTableColumn.vue

@@ -1,30 +1,52 @@
 <template>
-  <QTd :key="rowProps.key" :props="rowProps" :style="columnStyle">
+  <QTd
+    :key="rowProps.key"
+    :props="rowProps"
+    :style="columnStyle"
+  >
     <div :style="columnStyle">
       <div
-          class="flex items-center flex-nowrap"
-          :class="columnClass"
+        class="flex items-center flex-nowrap"
+        :class="columnClass"
       >
         <div class="flex-grow overflow-hidden">
           <a
-              v-if="column.onClick"
-              @click="column.onClick(row)"
-              :class="column.innerClass"
+            v-if="column.onClick"
+            :class="column.innerClass"
+            @click="column.onClick(row)"
           >
-            <RenderVnode v-if="column.vnode" :vnode="column.vnode(row)" />
+            <RenderVnode
+              v-if="column.vnode"
+              :vnode="column.vnode(row)"
+            />
             <slot v-else>{{ value }}</slot>
           </a>
-          <div v-else :class="column.innerClass">
-            <RenderVnode v-if="column.vnode" :vnode="column.vnode(row)" />
-            <slot v-else>{{ value }}</slot>
+          <div
+            v-else
+            :class="column.innerClass"
+          >
+            <RenderVnode
+              v-if="column.vnode"
+              :vnode="column.vnode(row)"
+            />
+            <slot v-else>
+              {{ value }}
+            </slot>
           </div>
-          <TitleColumnFormat v-if="column.titleColumns" :row="row" :columns="column.titleColumns()" />
+          <TitleColumnFormat
+            v-if="column.titleColumns"
+            :row="row"
+            :columns="column.titleColumns()"
+          />
         </div>
-        <div v-if="column.actionMenu" class="flex flex-shrink-0 pl-2">
+        <div
+          v-if="column.actionMenu"
+          class="flex flex-shrink-0 pl-2"
+        >
           <ActionMenu
-              :actions="column.actionMenu"
-              :target="row"
-              :loading="isSaving"
+            :actions="column.actionMenu"
+            :target="row"
+            :loading="isSaving"
           />
         </div>
       </div>

package/src/components/ActionTable/ActionTableHeaderColumn.vue

@@ -1,17 +1,17 @@
 <template>
   <QTh
-      :key="rowProps.key"
-      :props="rowProps"
-      :data-drop-zone="isResizeable && `resize-column-` + column.name"
-      :class="isResizeable && cls['handle-drop-zone']"
-      :style="columnStyle"
+    :key="rowProps.key"
+    :props="rowProps"
+    :data-drop-zone="isResizeable && `resize-column-` + column.name"
+    :class="isResizeable && cls['handle-drop-zone']"
+    :style="columnStyle"
   >
     {{ column.label }}
     <HandleDraggable
-        v-if="isResizeable"
-        :drop-zone="`resize-column-` + column.name"
-        :class="cls['resize-handle']"
-        @resize="onResizeColumn"
+      v-if="isResizeable"
+      :drop-zone="`resize-column-` + column.name"
+      :class="cls['resize-handle']"
+      @resize="onResizeColumn"
     >
       <RowResizeIcon class="w-4 text-gray-600" />
     </HandleDraggable>

package/src/components/ActionTable/Columns/ColumnListItem.vue

@@ -1,19 +1,42 @@
 <template>
   <div
-      class="flex items-center w-full"
-      :class="{'cursor-not-allowed': locked}"
+    class="flex items-center w-full"
+    :class="{'cursor-not-allowed': locked}"
   >
-    <a v-if="locked" class="text-zinc-800 cursor-not-allowed">
+    <a
+      v-if="locked"
+      class="text-zinc-800 cursor-not-allowed"
+    >
       <LockedIcon class="w-4" />
     </a>
-    <div class="font-semibold text-sm ml-5 py-3 flex-grow">{{ column.label }}</div>
-    <div v-if="!locked" class="flex items-center">
-      <a class="py-2 px-1" @click="$emit('visible', !visible)">
-        <VisibleIcon v-if="visible" class="w-4" />
-        <HiddenIcon v-else class="w-4 text-zinc-800" />
+    <div class="font-semibold text-sm ml-5 py-3 flex-grow">
+      {{ column.label }}
+    </div>
+    <div
+      v-if="!locked"
+      class="flex items-center"
+    >
+      <a
+        class="py-2 px-1"
+        @click="$emit('visible', !visible)"
+      >
+        <VisibleIcon
+          v-if="visible"
+          class="w-4"
+        />
+        <HiddenIcon
+          v-else
+          class="w-4 text-zinc-800"
+        />
       </a>
-      <a class="py-2 px-1" @click="$emit('is-title', !isTitle)">
-        <IsTitleIcon class="w-4" :class="isTitle ? '' : 'text-gray-400'" />
+      <a
+        class="py-2 px-1"
+        @click="$emit('is-title', !isTitle)"
+      >
+        <IsTitleIcon
+          class="w-4"
+          :class="isTitle ? '' : 'text-gray-400'"
+        />
         <QTooltip>
           <template v-if="!isTitle">Add to priority list</template>
           <template v-else>Remove from priority list</template>

package/src/components/ActionTable/Columns/ColumnSettingsDialog.vue

@@ -1,35 +1,39 @@
 <template>
   <InfoDialog
-      title="Column Settings"
-      @close="$emit('close')"
+    title="Column Settings"
+    @close="$emit('close')"
   >
     <div class="mb-4 text-sm">
       Customize columns by visibility, order, or priority (maximum 3 additional).
     </div>
     <ColumnListItem
-        v-for="column in lockedColumns" :key="column.name" locked visible :column="column"
-        class="px-2.5 border border-gray-200 bg-white rounded-t-lg"
+      v-for="column in lockedColumns"
+      :key="column.name"
+      locked
+      visible
+      :column="column"
+      class="px-2.5 border border-gray-200 bg-white rounded-t-lg"
     />
     <ListTransition
-        name="fade-down-list"
-        data-drop-zone="column-list"
+      name="fade-down-list"
+      data-drop-zone="column-list"
     >
       <ListItemDraggable
-          v-for="(column, index) in sortableColumns"
-          :key="column.name"
-          :list-items="sortableColumns"
-          drop-zone="column-list"
-          class="px-2 border border-gray-200 bg-white"
-          :class="{'rounded-b-lg': index === sortableColumns.length - 1}"
-          show-handle
-          @update:list-items="$emit('update:sortable-columns', $event)"
+        v-for="(column, index) in sortableColumns"
+        :key="column.name"
+        :list-items="sortableColumns"
+        drop-zone="column-list"
+        class="px-2 border border-gray-200 bg-white"
+        :class="{'rounded-b-lg': index === sortableColumns.length - 1}"
+        show-handle
+        @update:list-items="$emit('update:sortable-columns', $event)"
       >
         <ColumnListItem
-            :column="column"
-            :visible="isVisible(column)"
-            :is-title="isTitleColumn(column)"
-            @visible="onVisibilityChange(column, $event)"
-            @is-title="onTitleColumnChange(column, $event)"
+          :column="column"
+          :visible="isVisible(column)"
+          :is-title="isTitleColumn(column)"
+          @visible="onVisibilityChange(column, $event)"
+          @is-title="onTitleColumnChange(column, $event)"
         />
       </ListItemDraggable>
     </ListTransition>

package/src/components/ActionTable/Columns/TitleColumnFormat.vue

@@ -1,9 +1,11 @@
 <template>
   <div>
     <div
-        v-for="column in columns" :key="column.name"
-        class="overflow-hidden overflow-ellipsis text-xs text-gray-400"
-    >{{ format(row[column.name], column.format) }}
+      v-for="column in columns"
+      :key="column.name"
+      class="overflow-hidden overflow-ellipsis text-xs text-gray-400"
+    >
+      {{ format(row[column.name], column.format) }}
     </div>
   </div>
 </template>

package/src/components/ActionTable/Columns/VisibleColumnsToggleButtons.vue

@@ -1,43 +1,45 @@
 <template>
   <div class="flex items-center flex-nowrap">
     <div
-        v-for="category in categories"
-        :key="category"
-        :class="getCategoryClass(category)"
+      v-for="category in categories"
+      :key="category"
+      :class="getCategoryClass(category)"
     >
       <QCheckbox
-          toggle-indeterminate
-          size="20px"
-          :model-value="getCategoryCheckboxState(category)"
-          class="mr-2 cb-white-border"
-          @click="toggleColumns(columnsInCategory(category), !categoryHasVisibleColumns(category))"
+        toggle-indeterminate
+        size="20px"
+        :model-value="getCategoryCheckboxState(category)"
+        class="mr-2 cb-white-border"
+        @click="toggleColumns(columnsInCategory(category), !categoryHasVisibleColumns(category))"
       />
       <div>
         {{ category }}
       </div>
       <CaretDownIcon
-          class="ml-2 w-5 transition-all"
-          :class="{'rotate-180' : isShowingColumnToggle === category}"
+        class="ml-2 w-5 transition-all"
+        :class="{'rotate-180' : isShowingColumnToggle === category}"
       />
       <QMenu
-          @update:model-value="isShowingColumnToggle = $event ? category : ''"
+        @update:model-value="isShowingColumnToggle = $event ? category : ''"
       >
         <QList>
           <div
-              v-for="column in columnsInCategory(category)"
-              :key="column"
-              class="flex items-center flex-nowrap px-2 py-3 cursor-pointer"
-              @click="toggleColumn(column.name)"
+            v-for="column in columnsInCategory(category)"
+            :key="column"
+            class="flex items-center flex-nowrap px-2 py-3 cursor-pointer"
+            @click="toggleColumn(column.name)"
           >
             <QCheckbox
-                :model-value="!hiddenColumnNames.includes(column.name)"
-                class="mr-3 cb-white-border"
-                size="20px"
-                :color="column.required ? 'gray-400': 'blue-600'"
-                :disable="column.required"
-                @click="toggleColumn(column.name)"
+              :model-value="!hiddenColumnNames.includes(column.name)"
+              class="mr-3 cb-white-border"
+              size="20px"
+              :color="column.required ? 'gray-400': 'blue-600'"
+              :disable="column.required"
+              @click="toggleColumn(column.name)"
             />
-            <div class="text-xs">{{ column.label }}</div>
+            <div class="text-xs">
+              {{ column.label }}
+            </div>
           </div>
         </QList>
       </QMenu>

package/src/components/ActionTable/EmptyTableState.vue

@@ -1,12 +1,14 @@
 <template>
   <div class="flex items-center justify-center text-sm py-14 w-full">
     <div v-if="loading">
-      <slot name="loading">{{ loadingText }}
+      <slot name="loading">
+        {{ loadingText }}
         <QSpinnerBall class="w-4 ml-2" />
       </slot>
     </div>
     <div v-if="saving">
-      <slot name="saving">{{ savingText }}
+      <slot name="saving">
+        {{ savingText }}
         <QSpinnerBall class="w-4 ml-2" />
       </slot>
     </div>

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

@@ -1,16 +1,16 @@
 <template>
   <CollapsableSidebar
-      :collapse="!showFilters"
-      disabled
-      min-width="0"
-      max-width="18rem"
-      :name="name"
-      @update:collapse="$emit('update:show-filters', !$event)"
+    :collapse="!showFilters"
+    disabled
+    :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="filter"
+      :filter-fields="filterFields"
+      @update:filter="$emit('update:filter', $event)"
     />
   </CollapsableSidebar>
 </template>
@@ -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/Filters/FilterFieldItem.vue

@@ -2,12 +2,14 @@
   <QExpansionItem>
     <template #header>
       <div class="flex items-center flex-nowrap flex-grow">
-        <div class="whitespace-nowrap flex-grow text-left text-sm font-bold">{{ name }}</div>
+        <div class="whitespace-nowrap flex-grow text-left text-sm font-bold">
+          {{ name }}
+        </div>
         <QBadge
-            :label="count"
-            rounded
-            class="ml-2 transition-all"
-            :class="{'bg-gray-400': !count, 'bg-blue-600': count}"
+          :label="count"
+          rounded
+          class="ml-2 transition-all"
+          :class="{'bg-gray-400': !count, 'bg-blue-600': count}"
         />
       </div>
     </template>

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

@@ -2,40 +2,40 @@
   <QList>
     <div class="px-4 py-2 max-w-full">
       <template
-          v-for="(group, index) in filterFields"
-          :key="'group-' + group.name"
+        v-for="(group, index) in filterFields"
+        :key="'group-' + group.name"
       >
         <template v-if="group.flat">
           <FilterableField
-              v-for="field in group.fields"
-              :key="'field-' + field.name"
-              :model-value="field.calcValue ? field.calcValue(filter) : filter[field.name]"
-              :field="field"
-              :loading="loading"
-              class="mb-4"
-              @update:model-value="updateFilter(field, $event)"
+            v-for="field in group.fields"
+            :key="'field-' + field.name"
+            :model-value="field.calcValue ? field.calcValue(filter) : filter[field.name]"
+            :field="field"
+            :loading="loading"
+            class="mb-4"
+            @update:model-value="updateFilter(field, $event)"
           />
         </template>
 
         <FilterFieldItem
-            v-else
-            :name="group.name"
-            :count="activeCountByGroup[group.name]"
+          v-else
+          :name="group.name"
+          :count="activeCountByGroup[group.name]"
         >
           <FilterableField
-              v-for="field in group.fields"
-              :key="'field-' + field.name"
-              :model-value="field.calcValue ? field.calcValue(filter) : filter[field.name]"
-              :field="field"
-              :loading="loading"
-              class="mb-4"
-              @update:model-value="updateFilter(field, $event)"
+            v-for="field in group.fields"
+            :key="'field-' + field.name"
+            :model-value="field.calcValue ? field.calcValue(filter) : filter[field.name]"
+            :field="field"
+            :loading="loading"
+            class="mb-4"
+            @update:model-value="updateFilter(field, $event)"
           />
         </FilterFieldItem>
 
         <QSeparator
-            v-if="index < (filterFields.length - 1)"
-            class="my-2"
+          v-if="index < (filterFields.length - 1)"
+          class="my-2"
         />
       </template>
     </div>

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

@@ -1,24 +1,27 @@
 <template>
-  <div class="flex items-center transition-all" :class="{'w-72': showFilters, 'w-[6.5rem]': !showFilters}">
+  <div
+    class="flex items-center transition-all"
+    :class="{'w-72': showFilters, 'w-[6.5rem]': !showFilters}"
+  >
     <div class="flex-grow">
       <QBtn
-          class="btn-blue-highlight border-blue-700"
-          :class="{'highlighted': showFilters}"
-          @click="$emit('update:show-filters', !showFilters)"
+        class="btn-blue-highlight border-blue-700"
+        :class="{'highlighted': showFilters}"
+        @click="$emit('update:show-filters', !showFilters)"
       >
         <FilterIcon class="w-5 mr-2" />
         <QBadge
-            :label="'' + activeCount"
-            rounded
+          :label="'' + activeCount"
+          rounded
 
-            :color="activeCount > 0 ? 'blue-600' : 'gray-400'"
+          :color="activeCount > 0 ? 'blue-600' : 'gray-400'"
         />
       </QBtn>
     </div>
     <a
-        v-if="activeCount > 0 && showFilters"
-        class="text-blue-600 hover:text-blue-500 text-sm ml-4"
-        @click="$emit('update:filter', {})"
+      v-if="activeCount > 0 && showFilters"
+      class="text-blue-600 hover:text-blue-500 text-sm ml-4"
+      @click="$emit('update:filter', {})"
     >Clear All</a>
   </div>
 </template>