quasar-ui-danx 0.2.21 → 0.2.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-danx",
-  "version": "0.2.21",
+  "version": "0.2.23",
   "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/src/helpers/index.ts

@@ -8,9 +8,9 @@ export * from "./files";
 export * from "./FileUpload";
 export * from "./FlashMessages";
 export * from "./formats";
-export * from "./http";
 export * from "./multiFileUpload";
 export * from "./singleFileUpload";
 export * from "./storage";
 export * from "./styles";
 export * from "./utils";
+export * from "./request";

package/src/helpers/{http.ts → request.ts}

@@ -1,6 +1,30 @@
+import { ref, Ref, UnwrapRef } from "vue";
+
+interface RequestOptions {
+    baseUrl: string;
+}
+
+const requestOptions: Ref<UnwrapRef<RequestOptions>> = ref({
+    baseUrl: ""
+});
+/**
+ * A simple request helper that wraps the fetch API
+ * to make GET and POST requests easier w/ JSON payloads
+ */
 export const request = {
-    async get(url, options = {}) {
-        return fetch(url, {
+    configure(options: RequestOptions) {
+        requestOptions.value = options;
+    },
+
+    url(url: string) {
+        if (url.startsWith("http")) {
+            return url;
+        }
+        return requestOptions.value.baseUrl + url;
+    },
+
+    async get(url: string, options = {}): Promise<object> {
+        return fetch(request.url(url), {
             method: "get",
             headers: {
                 Accept: "application/json",
@@ -10,8 +34,8 @@ export const request = {
         }).then((r) => r.json());
     },
 
-    async post(url, data = {}, options = {}) {
-        return fetch(url, {
+    async post(url: string, data = {}, options = {}) {
+        return fetch(request.url(url), {
             method: "post",
             body: JSON.stringify(data),
             headers: {
@@ -29,34 +53,27 @@ export const request = {
  * also fetches that resource record from the endpoint, then adds it to the list if it
  * does not exist in the filtered list
  *
- * @param fetchFn
- * @param list
- * @param id
- * @param filter
- * @returns {Promise<void>}
  */
-export async function fetchResourceListWithSelected(fetchFn, list, id, filter) {
+export async function fetchResourceListWithSelected(fetchFn: (filter: object) => Promise<any[]>, list: Ref, id: string, filter: object): Promise<void> {
     // First make sure we have the selected record, so we can always add it to the list
     let selectedResource;
     if (id) {
-        selectedResource = list.value.find((c) => c.id === id) || (await fetchFn({ id }))[0];
+        selectedResource = list.value.find((c: { id: string }) => c.id === id) || (await fetchFn({ id }))[0];
     }
 
     // Get the filtered campaign list
     list.value = await fetchFn(filter);
 
     // If our selected campaign is not in the filtered list, add it
-    if (selectedResource && !list.value.find((c) => c.id === id)) {
+    if (selectedResource && !list.value.find((c: { id: string }) => c.id === id)) {
         list.value.push(selectedResource);
     }
 }
 
 /**
  * Returns the value of the URL parameter (if it is set)
- * @param key
- * @param url
  */
-export function getUrlParam(key, url = undefined) {
+export function getUrlParam(key: string, url?: string) {
     const params = new URLSearchParams(url?.replace(/.*\?/, "") || window.location.search);
     return params.get(key);
 }

package/tsconfig.json

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