quasar-ui-danx 0.2.20 → 0.2.22

package/package.json

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

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

@@ -4,7 +4,7 @@
       disabled
       min-width="0"
       max-width="18rem"
-      name="admin-ads"
+      :name="name"
       @update:collapse="$emit('update:show-filters', !$event)"
   >
     <FilterFieldList

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

@@ -15,7 +15,7 @@
       </QBtn>
     </div>
     <a
-        v-if="activeCount > 0"
+        v-if="activeCount > 0 && showFilters"
         class="text-blue-600 hover:text-blue-plus-1 text-sm ml-4"
         @click="$emit('update:filter', {})"
     >Clear All</a>

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

@@ -4,7 +4,7 @@
         :show-filters="showFilters"
         :filter="filter"
         class="border-r p-4 flex-shrink-0"
-        @update:show-filters="$emit('update:show-filters', $event)"
+        @update:show-filters="onFilter"
         @update:filter="$emit('update:filter', $event)"
     />
 
@@ -22,12 +22,15 @@
 import { QSeparator } from "quasar";
 import { FilterListToggle } from "../Filters";
 
-defineEmits(["update:show-filters", "update:filter"]);
-defineProps({
+const emit = defineEmits(["update:show-filters", "update:filter"]);
+const props = defineProps({
   filter: {
     type: Object,
     default: null
   },
   showFilters: Boolean
 });
+function onFilter() {
+  emit("update:show-filters", !props.showFilters);
+}
 </script>

package/src/components/ActionTable/listControls.ts

@@ -28,12 +28,17 @@ export function useListControls(name: string, {
     const pagedItems = ref(null);
     const filter = ref({});
     const globalFilter = ref({});
-    const showFilters = ref(getItem(`${name}-show-filters`, true));
+    const showFilters = ref(false);
     const selectedRows = ref([]);
     const isLoadingList = ref(false);
     const isLoadingSummary = ref(false);
     const summary = ref(null);
 
+    // Filter fields are the field values available for the currently applied filter on Creative Groups
+    // (ie: all states available under the current filter)
+    const filterFieldOptions = ref({});
+    const isLoadingFilters = ref(false);
+
     const filterActiveCount = computed(() => Object.keys(filter.value).filter(key => filter.value[key] !== undefined).length);
 
     const PAGING_DEFAULT = {
@@ -87,15 +92,11 @@ export function useListControls(name: string, {
         isLoadingSummary.value = false;
     }
 
-    // Filter fields are the field values available for the currently applied filter on Creative Groups
-    // (ie: all states available under the current filter)
-    const filterFieldOptions = ref({});
-    const isLoadingFilters = ref(false);
-
-    watch(() => showFilters.value, (show) => {
-        setItem(`${name}-show-filters`, show);
-    });
-
+    /**
+     * Loads the filter field options for the current filter.
+     *
+     * @returns {Promise<void>}
+     */
     async function loadFilterFieldOptions() {
         if (!filterFieldOptionsRoute || !isInitialized) return;
         isLoadingFilters.value = true;

package/src/components/Utility/Layouts/CollapsableSidebar.vue

@@ -46,6 +46,7 @@
 <script setup>
 import { ChevronLeftIcon as ToggleIcon } from "@heroicons/vue/outline";
 import { computed, onMounted, ref, watch } from "vue";
+import { getItem, setItem } from "../../../helpers";
 
 const emit = defineEmits(["collapse", "update:collapse"]);
 const props = defineProps({
@@ -76,24 +77,19 @@ const props = defineProps({
   hideToggleOnCollapse: Boolean
 });
 
-const isCollapsed = ref(props.collapse);
+const isCollapsed = ref(getItem(props.name + "-is-collapsed", props.collapse));
 
-const stored = localStorage.getItem(props.name + "-is-collapsed");
-
-if (stored !== null) {
-  isCollapsed.value = stored === "1";
+function setCollapse(state) {
+  isCollapsed.value = state;
+  setItem(props.name + "-is-collapsed", isCollapsed.value ? "1" : "");
 }
+
 function toggleCollapse() {
   setCollapse(!isCollapsed.value);
   emit("collapse", isCollapsed.value);
   emit("update:collapse", isCollapsed.value);
 }
 
-function setCollapse(state) {
-  isCollapsed.value = state;
-  localStorage.setItem(props.name + "-is-collapsed", isCollapsed.value ? "1" : "");
-}
-
 onMounted(() => {
   emit("collapse", isCollapsed.value);
   emit("update:collapse", isCollapsed.value);

package/tailwind.config.js

@@ -1,8 +1,10 @@
 /** @type {import("tailwindcss").Config} */
 import twColors from "tailwindcss/colors";
 
+const ignore = ["lightBlue", "warmGray", "trueGray", "coolGray", "blueGray"];
+
 // Convert all TW colors to CSS Variables
-const colorKeys = Object.keys(twColors).filter(c => twColors[c].hasOwnProperty("500"));
+const colorKeys = Object.keys(twColors).filter(c => !ignore.includes(c) && twColors[c].hasOwnProperty("500"));
 const colors = {};
 
 for (const name of colorKeys) {

package/tsconfig.json

@@ -33,11 +33,7 @@
     "sourceMap": true,
     // Base directory to resolve non-relative module names,
     "baseUrl": "./",
-    "paths": {
-      "@/*": [
-        "./src/*"
-      ]
-    }
+    "paths": {}
   },
   "include": [
     "src/**/*.ts",