quasar-ui-danx 0.0.18 → 0.0.20

package/package.json

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

package/src/components/ActionTable/ActionTable.vue

@@ -49,27 +49,27 @@
     </template>
     <template #body-cell="rowProps">
       <q-td :key="rowProps.key" :props="rowProps">
-        <template v-if="rowProps.col.component">
-          <RenderComponentColumn
-              :row-props="rowProps"
-              @action="$emit('action', $event)"
-          />
-        </template>
-        <template v-else-if="rowProps.col.fieldList">
-          <div v-for="field in rowProps.col.fieldList" :key="field">
-            {{ rowProps.row[field] }}
-          </div>
-        </template>
-        <template v-else-if="rowProps.col.filterOnClick">
-          <a @click="$emit('filter', rowProps.col.filterOnClick(rowProps.row))">
-            {{ rowProps.value }}
-          </a>
-        </template>
-        <template v-else>
-          <slot v-bind="{name: rowProps.col.name, row: rowProps.row, value: rowProps.value}">
-            {{ rowProps.value }}
-          </slot>
-        </template>
+        <component
+            :is="rowProps.col.onClick ? 'a' : 'div'"
+            @click="() => rowProps.col.onClick && rowProps.col.onClick(rowProps.row)"
+        >
+          <template v-if="rowProps.col.component">
+            <RenderComponent
+                :row-props="rowProps"
+                @action="$emit('action', $event)"
+            />
+          </template>
+          <template v-else-if="rowProps.col.fieldList">
+            <div v-for="field in rowProps.col.fieldList" :key="field">
+              {{ rowProps.row[field] }}
+            </div>
+          </template>
+          <template v-else>
+            <slot v-bind="{name: rowProps.col.name, row: rowProps.row, value: rowProps.value}">
+              {{ rowProps.value }}
+            </slot>
+          </template>
+        </component>
       </q-td>
     </template>
   </q-table>
@@ -77,9 +77,9 @@
 
 <script setup>
 import { ref } from 'vue';
-import { EmptyTableState, registerStickyScrolling, RenderComponentColumn, TableSummaryRow } from '.';
 import { DragHandleIcon as RowResizeIcon } from '../../svg';
 import { HandleDraggable } from '../DragAndDrop';
+import { EmptyTableState, registerStickyScrolling, RenderComponent, TableSummaryRow } from './index';
 
 defineEmits(['action', 'filter', 'update:quasar-pagination', 'update:selected-rows']);
 defineProps({

package/src/components/ActionTable/index.ts

@@ -6,5 +6,5 @@ export * from "./tableColumns";
 export { default as ActionTable } from "./ActionTable.vue";
 export { default as BatchActionMenu } from "./BatchActionMenu.vue";
 export { default as EmptyTableState } from "./EmptyTableState.vue";
-export { default as RenderComponentColumn } from "./RenderComponentColumn.vue";
+export { default as RenderComponent } from "./RenderComponent.vue";
 export { default as TableSummaryRow } from "./TableSummaryRow.vue";

package/src/components/ActionTable/listActions.ts

@@ -16,9 +16,11 @@ export function useListActions(name, {
     urlPattern = null,
     filterDefaults = {}
 }) {
+    let isInitialized = false;
     const PAGE_SETTINGS_KEY = `${name}-pagination-settings`;
     const pagedItems = ref(null);
     const filter = ref({});
+    const globalFilter = ref({});
     const showFilters = ref(getItem(`${name}-show-filters`, true));
     const selectedRows = ref([]);
     const isLoadingList = ref(false);
@@ -39,7 +41,7 @@ export function useListActions(name, {
     const pager = computed(() => ({
         perPage: quasarPagination.value.rowsPerPage,
         page: quasarPagination.value.page,
-        filter: filter.value,
+        filter: { ...filter.value, ...globalFilter.value },
         sort: columns ? mapSortBy(quasarPagination.value, columns) : undefined
     }));
 
@@ -59,15 +61,17 @@ export function useListActions(name, {
     }
 
     async function loadList() {
-        isLoadingList.value = true;
-        setPagedItems(await listRoute(pager.value));
-        isLoadingList.value = false;
+        if (isInitialized) {
+            isLoadingList.value = true;
+            setPagedItems(await listRoute(pager.value));
+            isLoadingList.value = false;
+        }
     }
 
     async function loadSummary() {
-        if (summaryRoute) {
+        if (summaryRoute && isInitialized) {
             isLoadingSummary.value = true;
-            const summaryFilter = { id: null, ...filter.value };
+            const summaryFilter = { id: null, ...filter.value, ...globalFilter.value };
             if (selectedRows.value.length) {
                 summaryFilter.id = selectedRows.value.map((row) => row.id);
             }
@@ -146,7 +150,7 @@ export function useListActions(name, {
         const newItems = await moreRoute({
             page: index + 1,
             perPage,
-            filter: filter.value
+            filter: { ...filter.value, ...globalFilter.value }
         });
 
         if (newItems && newItems.length > 0) {
@@ -169,6 +173,9 @@ export function useListActions(name, {
      * Loads the filter and pagination settings from local storage.
      */
     function loadSettings() {
+        // Only load settings when the class is fully initialized
+        if (!isInitialized) return;
+
         const settings = getItem(PAGE_SETTINGS_KEY);
 
         // Load the filter settings from local storage
@@ -324,12 +331,16 @@ export function useListActions(name, {
     }
 
     // Async load the settings for this Action List
-    setTimeout(loadSettings, 1);
+    setTimeout(() => {
+        isInitialized = true;
+        loadSettings();
+    }, 1);
 
     return {
         // State
         pagedItems,
         filter,
+        globalFilter,
         filterActiveCount,
         showFilters,
         summary,

package/src/components/ActionTable/tableColumns.ts

@@ -11,7 +11,7 @@ export function useTableColumns(name, columns, options = { titleMinWidth: 120, t
     const columnOrder = ref(getItem(COLUMN_ORDER_KEY) || []);
 
     // Manages visible columns on the table
-    const hiddenColumnNames = ref(getItem(VISIBLE_COLUMNS_KEY, columns.filter(c => c.category !== "General" || c.name === "status").map(c => c.name)));
+    const hiddenColumnNames = ref(getItem(VISIBLE_COLUMNS_KEY, []));
 
     // Title columns will have their name appear on the first column of the table as part of the records' title
     const titleColumnNames = ref(getItem(TITLE_COLUMNS_KEY, []));

package/src/components/Utility/FlatList.vue

@@ -0,0 +1,19 @@
+<template>
+  <ul>
+    <li v-for="item in items" :key="item[column]">
+      {{ item[column] }}
+    </li>
+  </ul>
+</template>
+<script setup>
+defineProps({
+  items: {
+    type: Array,
+    required: true
+  },
+  column: {
+    type: String,
+    required: true
+  }
+});
+</script>

package/src/components/Utility/ImagePreview.vue

@@ -23,21 +23,21 @@
             <PlayIcon class="w-16" />
           </button>
         </div>
-        <div
-            v-if="isPdf && !thumbUrl"
-            class="flex items-center justify-center h-full"
-        >
-          <PdfIcon class="w-24" />
-        </div>
         <q-img
-            v-else
+            v-if="thumbUrl || isPreviewable"
             fit="scale-down"
             class="non-selectable max-h-full max-w-full h-full"
             :src="(thumbUrl || previewUrl) + '#t=0.1'"
             preload="auto"
             data-testid="previewed-image"
-            data-dusk="previewed-image"
         />
+        <div
+            v-else
+            class="flex items-center justify-center h-full"
+        >
+          <PdfIcon v-if="isPdf" class="w-24" />
+          <TextFileIcon v-else class="w-24" />
+        </div>
       </div>
       <div
           v-if="$slots['action-button']"
@@ -98,7 +98,7 @@
 </template>
 
 <script setup>
-import { DownloadIcon, PlayIcon } from '@heroicons/vue/outline';
+import { DocumentTextIcon as TextFileIcon, DownloadIcon, PlayIcon } from '@heroicons/vue/outline';
 import { computed, ref } from 'vue';
 import { FullScreenCarouselDialog } from '.';
 import { download } from '../../helpers';
@@ -148,6 +148,7 @@ const computedImage = computed(() => {
 const mimeType = computed(
     () => computedImage.value.type || computedImage.value.mime
 );
+const isImage = computed(() => mimeType.value.match(/^image\//));
 const isVideo = computed(() => mimeType.value.match(/^video\//));
 const isPdf = computed(() => mimeType.value.match(/^application\/pdf/));
 const previewUrl = computed(
@@ -156,7 +157,9 @@ const previewUrl = computed(
 const thumbUrl = computed(() => {
   return computedImage.value.transcodes?.thumb?.url;
 });
-
+const isPreviewable = computed(() => {
+  return !!thumbUrl.value || isVideo.value || isImage.value;
+});
 const isConfirmingRemove = ref(false);
 function onRemove() {
   if (!isConfirmingRemove.value) {

package/src/components/Utility/RefreshButton.vue

@@ -0,0 +1,16 @@
+<template>
+  <QBtn
+    class="bg-neutral-plus-6"
+    :loading="loading"
+  >
+    <RefreshIcon class="w-5" />
+  </QBtn>
+</template>
+<script setup>
+import { RefreshIcon } from "@heroicons/vue/solid";
+
+defineEmits(["refresh"]);
+defineProps({
+  loading: Boolean
+});
+</script>

package/src/components/Utility/index.ts

@@ -1,11 +1,13 @@
 export { default as CollapsableSidebar } from "./CollapsableSidebar.vue";
 export { default as ConfirmDialog } from "./Dialogs/ConfirmDialog.vue";
 export { default as ContentDrawer } from "./ContentDrawer.vue";
+export { default as FlatList } from "./FlatList.vue";
 export { default as FullScreenCarouselDialog } from "./Dialogs/FullscreenCarouselDialog.vue";
 export { default as FullScreenDialog } from "./Dialogs/FullScreenDialog.vue";
 export { default as ImagePreview } from "./ImagePreview.vue";
 export { default as InfoDialog } from "./Dialogs/InfoDialog.vue";
 export { default as InputDialog } from "./Dialogs/InputDialog.vue";
 export { default as ListTransition } from "./Transitions/ListTransition.vue";
+export { default as RefreshButton } from "./RefreshButton.vue";
 export { default as SlideTransition } from "./Transitions/SlideTransition.vue";
 export { default as StaggeredListTransition } from "./Transitions/StaggeredListTransition.vue";

package/src/config/index.ts

@@ -0,0 +1,14 @@
+export let danxOptions = {
+    fileUpload: {
+        directory: "file-upload",
+        presignedUploadUrl: null,
+        uploadCompletedUrl: null
+    }
+};
+
+export function configure(options) {
+    danxOptions = {
+        ...danxOptions,
+        ...options
+    };
+}

package/src/helpers/FileUpload.ts

@@ -1,4 +1,5 @@
 import { uid } from "quasar";
+import { danxOptions } from "../config";
 import { resolveFileLocation } from "./files";
 import { FlashMessages } from "./FlashMessages";
 
@@ -15,13 +16,9 @@ export class FileUpload {
     onProgressCb = null;
     onCompleteCb = null;
     onAllCompleteCb = null;
-    options: FileUploadOptions = {
-        directory: "file-upload",
-        presignedUploadUrl: null,
-        uploadCompletedUrl: null
-    };
+    options: FileUploadOptions = null;
 
-    constructor(files, options: FileUploadOptions) {
+    constructor(files, options: FileUploadOptions = null) {
         if (!Array.isArray(files) && !(files instanceof FileList)) {
             files = [files];
         }
@@ -33,9 +30,14 @@ export class FileUpload {
         this.onAllCompleteCb = null;
 
         this.options = {
+            ...danxOptions.fileUpload,
             ...this.options,
             ...options
         };
+
+        if (!this.options.presignedUploadUrl) {
+            throw new Error("Please configure the danxOptions: import { configure } from 'quasar-ui-danx';");
+        }
         this.prepare();
     }
 

package/src/helpers/singleFileUpload.ts

@@ -1,7 +1,7 @@
 import { computed, ref } from "vue";
 import { FileUpload, FileUploadOptions } from "./FileUpload";
 
-export function useSingleFileUpload(options: FileUploadOptions) {
+export function useSingleFileUpload(options: FileUploadOptions = null) {
     const uploadedFile = ref(null);
     const onCompleteCb = ref(null);
     const onFileChangeCb = ref(null);

package/src/vue-plugin.js

@@ -1,9 +1,7 @@
+export * from './config';
 export * from './helpers';
-export * from './components/DragAndDrop';
-export * from './components/ActionTable';
-export * from './components/Utility';
+export * from './components';
 export * from './svg';
-// export * from './components';
 
 import packageJson from '../package.json';