quasar-ui-danx 0.0.11 → 0.0.12

package/src/components/ActionTable/listHelpers.ts

@@ -0,0 +1,74 @@
+import { getUrlParam } from "@ui/helpers";
+import { onMounted, watch } from "vue";
+
+export function registerStickyScrolling(tableRef) {
+    onMounted(() => {
+        const scrollEl = tableRef.value.$el.getElementsByClassName("q-table__middle")[0];
+        scrollEl.addEventListener("scroll", onScroll);
+
+        function onScroll({ target }) {
+            // Add / remove scroll y class based on whether we're scrolling vertically
+            if (target.scrollTop > 0) {
+                scrollEl.classList.add("is-scrolling-y");
+            } else {
+                scrollEl.classList.remove("is-scrolling-y");
+            }
+
+            // Add / remove scroll x class based on whether we're scrolling horizontally
+            if (target.scrollLeft > 0) {
+                scrollEl.classList.add("is-scrolling-x");
+            } else {
+                scrollEl.classList.remove("is-scrolling-x");
+            }
+        }
+    });
+}
+
+export function mapSortBy(pagination, columns) {
+    if (!pagination.sortBy) return null;
+
+    const column = columns.find(c => c.name === pagination.sortBy);
+    return [
+        {
+            column: column.sortBy || column.name,
+            expression: column.sortByExpression || undefined,
+            order: pagination.descending ? "desc" : "asc"
+        }
+    ];
+}
+
+/**
+ * Wait for a ref to have a value and then resolve the promise
+ *
+ * @param ref
+ * @param value
+ * @returns {Promise<void>}
+ */
+export function waitForRef(ref, value) {
+    return new Promise<void>((resolve) => {
+        watch(ref, (newValue) => {
+            if (newValue === value) {
+                resolve();
+            }
+        });
+    });
+}
+
+/**
+ * Returns the filter from the URL if it is set
+ * @param url
+ * @param allowedKeys
+ */
+export function getFilterFromUrl(url, allowedKeys = null) {
+    const filter = {};
+    const urlFilter = getUrlParam("filter", url);
+    if (urlFilter) {
+        const fields = JSON.parse(urlFilter);
+        Object.keys(fields).forEach((key) => {
+            if (!allowedKeys || allowedKeys.includes(key)) {
+                filter[key] = fields[key];
+            }
+        });
+    }
+    return filter;
+}

package/src/components/ActionTable/tableColumns.ts

@@ -1,72 +1,72 @@
-import { getItem, setItem } from "danx/src/helpers";
+import { getItem, setItem } from "@ui/helpers";
 import { computed, ref, watch } from "vue";
 
 export function useTableColumns(name, columns, options = { titleMinWidth: 120, titleMaxWidth: 200 }) {
-  const COLUMN_ORDER_KEY = `${name}-column-order`;
-  const VISIBLE_COLUMNS_KEY = `${name}-visible-columns`;
-  const TITLE_COLUMNS_KEY = `${name}-title-columns`;
-  const TITLE_WIDTH_KEY = `${name}-title-width`;
+    const COLUMN_ORDER_KEY = `${name}-column-order`;
+    const VISIBLE_COLUMNS_KEY = `${name}-visible-columns`;
+    const TITLE_COLUMNS_KEY = `${name}-title-columns`;
+    const TITLE_WIDTH_KEY = `${name}-title-width`;
 
-  // The list that defines the order the columns should appear in
-  const columnOrder = ref(getItem(COLUMN_ORDER_KEY) || []);
+    // The list that defines the order the columns should appear in
+    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)));
+    // 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)));
 
-  // 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, []));
+    // 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, []));
 
-  // The width of the title column
-  const titleWidth = ref(getItem(TITLE_WIDTH_KEY, options.titleMinWidth));
+    // The width of the title column
+    const titleWidth = ref(getItem(TITLE_WIDTH_KEY, options.titleMinWidth));
 
-  /**
-   * When the title column is resized, update the titleWidth
-   * @param val
-   */
-  function onResizeTitleColumn(val) {
-    titleWidth.value = Math.max(Math.min(val.distance + val.startDropZoneSize, options.titleMaxWidth), options.titleMinWidth);
-  }
+    /**
+     * When the title column is resized, update the titleWidth
+     * @param val
+     */
+    function onResizeTitleColumn(val) {
+        titleWidth.value = Math.max(Math.min(val.distance + val.startDropZoneSize, options.titleMaxWidth), options.titleMinWidth);
+    }
 
-  // Columns that should be locked to the left side of the table
-  const lockedColumns = computed(() => orderedColumns.value.slice(0, 1));
+    // Columns that should be locked to the left side of the table
+    const lockedColumns = computed(() => orderedColumns.value.slice(0, 1));
 
-  // The resolved list of columns in the order they should appear in
-  const orderedColumns = computed(() => [...columns].sort((a, b) => {
-    const aIndex = columnOrder.value.indexOf(a.name);
-    const bIndex = columnOrder.value.indexOf(b.name);
-    return aIndex === -1 ? 1 : bIndex === -1 ? -1 : aIndex - bIndex;
-  }));
+    // The resolved list of columns in the order they should appear in
+    const orderedColumns = computed(() => [...columns].sort((a, b) => {
+        const aIndex = columnOrder.value.indexOf(a.name);
+        const bIndex = columnOrder.value.indexOf(b.name);
+        return aIndex === -1 ? 1 : bIndex === -1 ? -1 : aIndex - bIndex;
+    }));
 
-  // The ordered list of columns. The ordering of this list is editable and will be stored in localStorage
-  const sortableColumns = computed({
-    get() {
-      return orderedColumns.value.slice(1);
-    },
-    set(newColumns) {
-      columnOrder.value = [...lockedColumns.value.map(c => c.name), ...newColumns.map(c => c.name)];
-      setItem(COLUMN_ORDER_KEY, columnOrder.value);
-    }
-  });
+    // The ordered list of columns. The ordering of this list is editable and will be stored in localStorage
+    const sortableColumns = computed({
+        get() {
+            return orderedColumns.value.slice(1);
+        },
+        set(newColumns) {
+            columnOrder.value = [...lockedColumns.value.map(c => c.name), ...newColumns.map(c => c.name)];
+            setItem(COLUMN_ORDER_KEY, columnOrder.value);
+        }
+    });
 
-  // The list of columns that are visible. To edit the visible columns, edit the hiddenColumnNames list
-  const visibleColumns = computed(() => orderedColumns.value.filter(c => !hiddenColumnNames.value.includes(c.name)));
+    // The list of columns that are visible. To edit the visible columns, edit the hiddenColumnNames list
+    const visibleColumns = computed(() => orderedColumns.value.filter(c => !hiddenColumnNames.value.includes(c.name)));
 
-  // The list of columns that should be included in the title of a row
-  const orderedTitleColumns = computed(() => orderedColumns.value.filter(c => titleColumnNames.value.includes(c.name)));
+    // The list of columns that should be included in the title of a row
+    const orderedTitleColumns = computed(() => orderedColumns.value.filter(c => titleColumnNames.value.includes(c.name)));
 
-  // Save changes to the list of hidden columns in localStorage
-  watch(() => hiddenColumnNames.value, () => setItem(VISIBLE_COLUMNS_KEY, hiddenColumnNames.value));
-  watch(() => titleColumnNames.value, () => setItem(TITLE_COLUMNS_KEY, titleColumnNames.value));
-  watch(() => titleWidth.value, () => setItem(TITLE_WIDTH_KEY, titleWidth.value));
+    // Save changes to the list of hidden columns in localStorage
+    watch(() => hiddenColumnNames.value, () => setItem(VISIBLE_COLUMNS_KEY, hiddenColumnNames.value));
+    watch(() => titleColumnNames.value, () => setItem(TITLE_COLUMNS_KEY, titleColumnNames.value));
+    watch(() => titleWidth.value, () => setItem(TITLE_WIDTH_KEY, titleWidth.value));
 
-  return {
-    sortableColumns,
-    lockedColumns,
-    visibleColumns,
-    hiddenColumnNames,
-    titleColumnNames,
-    titleWidth,
-    orderedTitleColumns,
-    onResizeTitleColumn
-  };
+    return {
+        sortableColumns,
+        lockedColumns,
+        visibleColumns,
+        hiddenColumnNames,
+        titleColumnNames,
+        titleWidth,
+        orderedTitleColumns,
+        onResizeTitleColumn
+    };
 }

package/src/components/DragAndDrop/HandleDraggable.vue

@@ -1,53 +1,53 @@
 <template>
   <div
-    :class="{
+      :class="{
       'cursor-ew-resize': direction === 'horizontal',
       'cursor-ns-resize': direction === 'vertical',
     }"
-    class="flex justify-center items-center w-full h-full"
-    draggable="true"
-    @dragstart="dragAndDrop.dragStart"
-    @dragend="dragAndDrop.dragEnd"
+      class="flex justify-center items-center w-full h-full"
+      draggable="true"
+      @dragstart="dragAndDrop.dragStart"
+      @dragend="dragAndDrop.dragEnd"
   >
     <slot />
   </div>
 </template>
 <script setup>
-import { useDebounceFn } from "@vueuse/core";
-import { DragAndDrop } from "./dragAndDrop";
+import { DragAndDrop } from '@ui/components';
+import { useDebounceFn } from '@vueuse/core';
 
-const emit = defineEmits(["start", "end", "resize"]);
+const emit = defineEmits(['start', 'end', 'resize']);
 const props = defineProps({
   initialValue: {
     type: Number,
-    default: null,
+    default: null
   },
   dropZone: {
     type: [Function, String],
-    required: true,
+    required: true
   },
   direction: {
     type: String,
-    default: "horizontal",
-    validator: (value) => ["vertical", "horizontal"].includes(value),
-  },
+    default: 'horizontal',
+    validator: (value) => ['vertical', 'horizontal'].includes(value)
+  }
 });
 
 const dragAndDrop = new DragAndDrop()
-  .setDropZone(props.dropZone)
-  .setOptions({
-    showPlaceholder: true,
-    direction: props.direction,
-    hideDragImage: true,
-  })
-  .onDragging(useDebounceFn(() => {
-    emit("resize", {
-      distance: dragAndDrop.getDistance(),
-      percent: dragAndDrop.getPercentChange(),
-      startDropZoneSize: dragAndDrop.startSize,
-      dropZoneSize: dragAndDrop.getDropZoneSize(),
-    });
-  }, 20, { maxWait: 30 }))
-  .onStart(() => emit("start"))
-  .onEnd(() => emit("end"));
+    .setDropZone(props.dropZone)
+    .setOptions({
+      showPlaceholder: true,
+      direction: props.direction,
+      hideDragImage: true
+    })
+    .onDragging(useDebounceFn(() => {
+      emit('resize', {
+        distance: dragAndDrop.getDistance(),
+        percent: dragAndDrop.getPercentChange(),
+        startDropZoneSize: dragAndDrop.startSize,
+        dropZoneSize: dragAndDrop.getDropZoneSize()
+      });
+    }, 20, { maxWait: 30 }))
+    .onStart(() => emit('start'))
+    .onEnd(() => emit('end'));
 </script>

package/src/components/DragAndDrop/ListItemDraggable.vue

@@ -16,25 +16,25 @@
   </div>
 </template>
 <script setup>
-import SvgImg from "../Utility/SvgImg";
-import { HandleDraggableDotsIcon as DragHandleIcon } from "./Icons";
-import { ListDragAndDrop } from "./listDragAndDrop";
+import { ListDragAndDrop } from '@ui/components';
+import { DragHandleDotsIcon as DragHandleIcon } from '@ui/svg';
+import SvgImg from '../Utility/SvgImg';
 
-const emit = defineEmits(["position", "update:list-items"]);
+const emit = defineEmits(['position', 'update:list-items']);
 const props = defineProps({
   dropZone: {
     type: [Function, String],
-    required: true,
+    required: true
   },
   direction: {
     type: String,
-    default: "vertical",
-    validator: (value) => ["vertical", "horizontal"].includes(value),
+    default: 'vertical',
+    validator: (value) => ['vertical', 'horizontal'].includes(value)
   },
   showHandle: Boolean,
   listItems: {
     type: Array,
-    default: null,
+    default: null
   }
 });
 
@@ -42,12 +42,12 @@ const dragAndDrop = new ListDragAndDrop()
     .setDropZone(props.dropZone)
     .setOptions({ showPlaceholder: true, direction: props.direction })
     .onPositionChange((newPosition, oldPosition) => {
-      emit("position", newPosition);
+      emit('position', newPosition);
 
       if (props.listItems) {
         const items = [...props.listItems];
         items.splice(newPosition, 0, items.splice(oldPosition, 1)[0]);
-        emit("update:list-items", items);
+        emit('update:list-items', items);
       }
     });
 </script>

package/src/components/DragAndDrop/index.ts

@@ -2,4 +2,3 @@ export { default as HandleDraggable } from "./HandleDraggable.vue";
 export { default as ListItemDraggable } from "./ListItemDraggable.vue";
 export { DragAndDrop } from "./dragAndDrop";
 export { ListDragAndDrop } from "./listDragAndDrop";
-export * from "./Icons";

package/src/components/DragAndDrop/listDragAndDrop.ts

@@ -1,4 +1,4 @@
-import { DragAndDrop } from "./dragAndDrop";
+import { DragAndDrop } from "@ui/components";
 
 /**
  * ListDragAndDrop supports dragging elements in a list to new positions in the same list.

package/src/components/Utility/CollapsableSidebar.vue

@@ -1,102 +1,102 @@
 <template>
   <div
-    class="collapsable-sidebar overflow-x-hidden overflow-y-scroll relative"
-    :class="{
+      class="collapsable-sidebar overflow-x-hidden overflow-y-scroll relative"
+      :class="{
       'is-collapsed': isCollapsed,
       'is-right-side': rightSide,
       [displayClass]: true,
     }"
-    :style="style"
+      :style="style"
   >
     <div class="flex-grow max-w-full">
       <slot :is-collapsed="isCollapsed" />
     </div>
     <template v-if="!disabled && (!hideToggleOnCollapse || !isCollapsed)">
       <div
-        v-if="!toggleAtTop"
-        class="flex w-full p-4"
-        :class="rightSide ? 'justify-start' : 'justify-end'"
+          v-if="!toggleAtTop"
+          class="flex w-full p-4"
+          :class="rightSide ? 'justify-start' : 'justify-end'"
       >
         <slot name="toggle">
-          <QBtn
-            class="btn-white-gray"
-            @click="toggleCollapse"
+          <q-btn
+              class="btn-secondary"
+              @click="toggleCollapse"
           >
             <ToggleIcon
-              class="w-5 transition-all"
-              :class="{ 'rotate-180': rightSide ? !isCollapsed : isCollapsed }"
+                class="w-5 transition-all"
+                :class="{ 'rotate-180': rightSide ? !isCollapsed : isCollapsed }"
             />
-          </QBtn>
+          </q-btn>
         </slot>
       </div>
       <div
-        v-else
-        class="absolute top-0 right-0 cursor-pointer p-2"
-        :class="toggleClass"
-        @click="toggleCollapse"
+          v-else
+          class="absolute top-0 right-0 cursor-pointer p-2"
+          :class="toggleClass"
+          @click="toggleCollapse"
       >
         <ToggleIcon
-          class="w-5 transition-all"
-          :class="{ 'rotate-180': rightSide ? !isCollapsed : isCollapsed }"
+            class="w-5 transition-all"
+            :class="{ 'rotate-180': rightSide ? !isCollapsed : isCollapsed }"
         />
       </div>
     </template>
   </div>
 </template>
 <script setup>
-import { ChevronLeftIcon as ToggleIcon } from "@heroicons/vue/outline";
-import { computed, onMounted, ref, watch } from "vue";
+import { ChevronLeftIcon as ToggleIcon } from '@heroicons/vue/outline';
+import { computed, onMounted, ref, watch } from 'vue';
 
-const emit = defineEmits(["collapse", "update:collapse"]);
+const emit = defineEmits(['collapse', 'update:collapse']);
 const props = defineProps({
   rightSide: Boolean,
   displayClass: {
     type: String,
-    default: "flex flex-col"
+    default: 'flex flex-col'
   },
   maxWidth: {
     type: String,
-    default: "13.5rem"
+    default: '13.5rem'
   },
   minWidth: {
     type: String,
-    default: "5.5rem"
+    default: '5.5rem'
   },
   disabled: Boolean,
   collapse: Boolean,
   name: {
     type: String,
-    default: "sidebar"
+    default: 'sidebar'
   },
   toggleAtTop: Boolean,
   toggleClass: {
     type: String,
-    default: ""
+    default: ''
   },
   hideToggleOnCollapse: Boolean
 });
 
 const isCollapsed = ref(props.collapse);
 
-const stored = localStorage.getItem(props.name + "-is-collapsed");
+const stored = localStorage.getItem(props.name + '-is-collapsed');
 
 if (stored !== null) {
-  isCollapsed.value = stored === "1";
+  isCollapsed.value = stored === '1';
 }
 function toggleCollapse() {
   setCollapse(!isCollapsed.value);
-  emit("collapse", isCollapsed.value);
-  emit("update:collapse", 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" : "");
+  localStorage.setItem(props.name + '-is-collapsed', isCollapsed.value ? '1' : '');
 }
 
 onMounted(() => {
-  emit("collapse", isCollapsed.value);
-  emit("update:collapse", isCollapsed.value);
+  emit('collapse', isCollapsed.value);
+  emit('update:collapse', isCollapsed.value);
 });
 const style = computed(() => {
   return {
@@ -110,8 +110,8 @@ watch(() => props.collapse, () => {
 </script>
 
 <style
-  scoped
-  lang="scss"
+    scoped
+    lang="scss"
 >
 .collapsable-sidebar {
   @apply overflow-y-auto scroll-smooth flex-shrink-0 border-r border-neutral-plus-5 transition-all;

package/src/components/Utility/ContentDrawer.vue

@@ -1,33 +1,33 @@
 <template>
-  <QDialog
-    v-model="isShowing"
-    maximized
-    :position="position"
-    :seamless="seamless"
-    :class="{'hide-backdrop': !overlay}"
+  <q-dialog
+      v-model="isShowing"
+      maximized
+      :position="position"
+      :seamless="seamless"
+      :class="{'hide-backdrop': !overlay}"
   >
     <div>
       <div
-        v-if="title"
-        class="dialog-title"
-        @click.stop.prevent
+          v-if="title"
+          class="dialog-title"
+          @click.stop.prevent
       >
         {{ title }}
       </div>
       <div
-        class="dialog-content bg-white"
-        :class="{ [contentClass]: true }"
+          class="dialog-content bg-white"
+          :class="{ [contentClass]: true }"
       >
         <slot />
       </div>
     </div>
-  </QDialog>
+    </q-dialog>
 </template>
 
 <script setup>
-import { computed } from "vue";
+import { computed } from 'vue';
 
-const emit = defineEmits(["update:show"]);
+const emit = defineEmits(['update:show']);
 
 const props = defineProps({
   show: Boolean,
@@ -35,27 +35,27 @@ const props = defineProps({
   overlay: Boolean,
   position: {
     type: String,
-    default: "bottom"
+    default: 'bottom'
   },
   contentClass: {
     type: String,
-    default: "py-8 px-12"
+    default: 'py-8 px-12'
   },
   title: {
     type: String,
-    default: "Edit"
+    default: 'Edit'
   }
 });
 
 const isShowing = computed({
   get: () => props.show,
-  set: (value) => emit("update:show", value)
+  set: (value) => emit('update:show', value)
 });
 </script>
 
 <style
-  lang="scss"
-  scoped
+    lang="scss"
+    scoped
 >
 .dialog-title {
   @apply bg-gray-very-light text-gray-default font-medium uppercase text-xs px-6 py-3 border-b border-neutral-plus-5 rounded-t-md;