quasar-ui-danx 0.0.20 → 0.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-danx",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "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";