quasar-ui-danx 0.0.20 → 0.0.22

package/package.json

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

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

@@ -31,20 +31,8 @@ const props = defineProps({
     type: Object,
     required: true
   },
-  filterGroups: {
-    type: Array,
-    required: true
-  },
   showFilters: Boolean
 });
 
-const filterNameDictionary = computed(() => {
-  return props.filterGroups.reduce((acc, fg) => {
-    fg.fields.forEach(f => {
-      acc[f.name] = true;
-    });
-    return acc;
-  }, {});
-});
-const activeCount = computed(() => Object.keys(props.filter).filter(key => props.filter[key] !== undefined && filterNameDictionary.value[key]).length);
+const activeCount = computed(() => Object.keys(props.filter).filter(key => props.filter[key] !== undefined).length);
 </script>

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

@@ -0,0 +1,33 @@
+<template>
+  <div class="w-full flex justify-end items-center flex-nowrap border-b">
+    <FilterListToggle
+      :show-filters="showFilters"
+      :filter="filter"
+      class="border-r p-4 flex-shrink-0"
+      @update:show-filters="$emit('update:show-filters', $event)"
+      @update:filter="$emit('update:filter', $event)"
+    />
+
+    <div class="flex-grow">
+      <slot />
+    </div>
+
+    <div v-if="$slots['right-side']" class="flex justify-end items-stretch flex-nowrap p-4">
+      <QSeparator vertical class="mx-4 h-10 self-center" />
+
+      <slot name="right-side" />
+    </div>
+  </div>
+</template>
+<script setup>
+import { FilterListToggle } from "quasar-ui-danx";
+
+defineEmits(["update:show-filters", "update:filter"]);
+defineProps({
+  filter: {
+    type: Object,
+    default: null
+  },
+  showFilters: Boolean
+});
+</script>

package/src/components/ActionTable/Filters/index.ts

@@ -3,3 +3,4 @@ export {
 } from "./CollapsableFiltersSidebar.vue";
 export { default as FilterGroupList } from "./FilterGroupList.vue";
 export { default as FilterListToggle } from "./FilterListToggle.vue";
+export { default as FilterToolbarLayout } from "./FilterToolbarLayout.vue";

package/src/components/Utility/Buttons/ExportButton.vue

@@ -0,0 +1,28 @@
+<template>
+  <QBtn class="bg-neutral-plus-6" :loading="isExporting" @click="onExport">
+    <ExportIcon class="w-5" />
+  </QBtn>
+</template>
+<script setup>
+import { DownloadIcon as ExportIcon } from '@heroicons/vue/solid';
+import { ref } from 'vue';
+import { FlashMessages } from '../../../helpers';
+
+const props = defineProps({
+  exporter: {
+    type: Function,
+    required: true
+  }
+});
+const isExporting = ref(false);
+async function onExport() {
+  isExporting.value = true;
+  try {
+    await props.exporter();
+  } catch (error) {
+    console.error(error);
+    FlashMessages.error('Failed to export data');
+  }
+  isExporting.value = false;
+}
+</script>

package/src/components/Utility/index.ts

@@ -1,6 +1,7 @@
 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 ExportButton } from "src/components/Utility/Buttons/ExportButton.vue";
 export { default as FlatList } from "./FlatList.vue";
 export { default as FullScreenCarouselDialog } from "./Dialogs/FullscreenCarouselDialog.vue";
 export { default as FullScreenDialog } from "./Dialogs/FullScreenDialog.vue";
@@ -8,6 +9,6 @@ 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 RefreshButton } from "src/components/Utility/Buttons/RefreshButton.vue";
 export { default as SlideTransition } from "./Transitions/SlideTransition.vue";
 export { default as StaggeredListTransition } from "./Transitions/StaggeredListTransition.vue";