quasar-ui-danx 0.3.22 → 0.4.1

package/src/components/ActionTable/listHelpers.ts

@@ -1,42 +1,44 @@
-import { onMounted } from "vue";
-import { getUrlParam } from "../../helpers";
+import { ListControlsPagination } from "src/components/ActionTable/listControls";
+import { TableColumn } from "src/components/ActionTable/tableColumns";
+import { onMounted, Ref } from "vue";
+import { AnyObject, getUrlParam } from "../../helpers";
 
-export function registerStickyScrolling(tableRef) {
-    onMounted(() => {
-        const scrollEl = tableRef.value.$el.getElementsByClassName("q-table__middle")[0];
-        scrollEl.addEventListener("scroll", onScroll);
+export function registerStickyScrolling(tableRef: Ref) {
+	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");
-            }
+		function onScroll({ target }: { target: HTMLElement }) {
+			// 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");
-            }
-        }
-    });
+			// 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;
+export function mapSortBy(pagination: ListControlsPagination, columns: TableColumn[]) {
+	if (!pagination.sortBy) return null;
 
-    const column = columns.find(c => c.name === pagination.sortBy);
-    if (!column) return null;
+	const column = columns.find(c => c.name === pagination.sortBy);
+	if (!column) return null;
 
-    return [
-        {
-            column: column.sortBy || column.name,
-            expression: column.sortByExpression || undefined,
-            order: pagination.descending ? "desc" : "asc"
-        }
-    ];
+	return [
+		{
+			column: column.sortBy || column.name,
+			expression: column.sortByExpression || undefined,
+			order: pagination.descending ? "desc" : "asc"
+		}
+	];
 }
 
 /**
@@ -44,16 +46,16 @@ export function mapSortBy(pagination, columns) {
  * @param url
  * @param allowedKeys
  */
-export function getFilterFromUrl(url: string, 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;
+export function getFilterFromUrl(url: string, allowedKeys: string[] | null = null) {
+	const filter: AnyObject = {};
+	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/PanelsDrawer/PanelsDrawer.vue

@@ -4,30 +4,40 @@
     :show="true"
     overlay
     content-class="h-full"
+    class="dx-panels-drawer"
     title=""
     @update:show="$emit('close')"
   >
     <div class="flex flex-col flex-nowrap h-full">
-      <div class="flex items-center px-6 py-4 border-b">
+      <div class="dx-panels-drawer-header flex items-center px-6 py-4">
         <div class="flex-grow">
-          <slot name="header" />
+          <slot name="header">
+            <h2>{{ title }}</h2>
+          </slot>
+        </div>
+        <div
+          v-if="$slots.controls"
+          class="mr-4"
+        >
+          <slot name="controls" />
         </div>
-
         <div>
-          <QBtn @click="$emit('close')">
+          <QBtn
+            class="dx-close-button"
+            @click="$emit('close')"
+          >
             <CloseIcon class="w-4" />
           </QBtn>
         </div>
       </div>
-      <div class="flex-grow overflow-hidden h-full">
+      <div class="dx-panels-drawer-body flex-grow overflow-hidden h-full">
         <div class="flex items-stretch flex-nowrap h-full">
-          <div class="border-r w-[13.5rem] overflow-y-auto">
-            <PanelsDrawerTabs
-              v-model="activePanel"
-              :panels="panels"
-              @update:model-value="$emit('update:model-value', $event)"
-            />
-          </div>
+          <PanelsDrawerTabs
+            v-model="activePanel"
+            :class="tabsClass"
+            :panels="panels"
+            @update:model-value="$emit('update:model-value', $event)"
+          />
           <PanelsDrawerPanels
             :panels="panels"
             :active-panel="activePanel"
@@ -44,27 +54,28 @@
     </div>
   </ContentDrawer>
 </template>
-<script setup>
+<script setup lang="ts">
 import { ref, watch } from "vue";
 import { XIcon as CloseIcon } from "../../svg";
+import { ActionPanel } from "../ActionTable";
 import { ContentDrawer } from "../Utility";
 import PanelsDrawerPanels from "./PanelsDrawerPanels";
 import PanelsDrawerTabs from "./PanelsDrawerTabs";
 
+export interface Props {
+	title?: string,
+	modelValue?: string,
+	tabsClass?: string | object,
+	panelsClass?: string | object,
+	panels: ActionPanel[]
+}
+
 defineEmits(["update:model-value", "close"]);
-const props = defineProps({
-  modelValue: {
-    type: String,
-    default: null
-  },
-  panelsClass: {
-    type: [Object, String],
-    default: "w-[35.5rem]"
-  },
-  panels: {
-    type: Array,
-    required: true
-  }
+const props = withDefaults(defineProps<Props>(), {
+	title: "",
+	modelValue: null,
+	tabsClass: "w-[13.5rem]",
+	panelsClass: "w-[35.5rem]"
 });
 
 const activePanel = ref(props.modelValue);

package/src/components/PanelsDrawer/PanelsDrawerPanels.vue

@@ -1,7 +1,7 @@
 <template>
   <QTabPanels
     :model-value="activePanel"
-    class="overflow-y-auto bg-gray-100 h-full transition-all"
+    class="dx-panels-drawer-panels overflow-y-auto h-full transition-all"
   >
     <QTabPanel
       v-for="panel in panels"

package/src/components/PanelsDrawer/PanelsDrawerTabs.vue

@@ -1,5 +1,6 @@
 <template>
   <QTabs
+    class="dx-panels-drawer-tabs overflow-y-auto"
     :model-value="modelValue"
     vertical
     align="left"
@@ -50,8 +51,6 @@ defineProps({
 
   :global(.q-tab) {
     justify-content: start !important;
-    padding: 0;
-    @apply text-left py-2.5 px-2 rounded-lg hover:bg-slate-200;
 
     :global(.q-focus-helper), :global(.q-tab__indicator) {
       display: none;
@@ -61,9 +60,5 @@ defineProps({
       @apply p-0;
     }
   }
-
-  :global(.q-tab.q-tab--active) {
-    @apply text-white bg-blue-600;
-  }
 }
 </style>

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

@@ -1,6 +1,6 @@
 <template>
   <QBtn
-    class="bg-slate-200"
+    class="dx-export-button dx-action-button"
     :loading="isExporting"
     @click="onExport"
   >

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

@@ -1,16 +1,16 @@
 <template>
   <QBtn
-    class="bg-slate-200"
+    class="dx-refresh-button dx-action-button"
     :loading="loading"
   >
     <RefreshIcon class="w-5" />
   </QBtn>
 </template>
-<script setup>
+<script setup lang="ts">
 import { RefreshIcon } from "@heroicons/vue/solid";
 
 defineEmits(["refresh"]);
-defineProps({
-  loading: Boolean
-});
+defineProps<{
+  loading?: boolean
+}>();
 </script>

package/src/components/Utility/Controls/PreviousNextControls.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="previous-next-controls">
+  <div class="dx-previous-next-controls">
     <QBtn
-      class="bg-slate-200 border-gray-300 border border-solid !rounded-r-none !p-2 !min-w-0"
+      class="dx-control dx-control-previous border border-solid !rounded-r-none !p-2 !min-w-0"
       :disable="isLoading"
       :loading="isLoading"
       @click="$emit('next', -1)"
@@ -9,7 +9,7 @@
       <SkipPreviousIcon class="w-6" />
     </QBtn>
     <QBtn
-      class="bg-slate-200 border-gray-300 border border-solid border-l-0 !rounded-l-none !p-2 !min-w-0"
+      class="dx-control dx-control-next border border-solid border-l-0 !rounded-l-none !p-2 !min-w-0"
       :disable="isLoading"
       :loading="isLoading"
       @click="$emit('next', 1)"
@@ -23,6 +23,6 @@ import { SkipNextIcon, SkipPreviousIcon } from "../../../svg";
 
 defineEmits(["next"]);
 defineProps({
-  isLoading: Boolean
+	isLoading: Boolean
 });
 </script>

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

@@ -1,7 +1,7 @@
 <template>
   <div
+    class="dx-collapsable-sidebar overflow-y-auto overflow-x-hidden scroll-smooth flex-shrink-0 transition-all relative"
     :class="{
-      [cls['collapsable-sidebar']]: true,
       'is-collapsed': isCollapsed,
       'is-right-side': rightSide,
       [displayClass]: true,
@@ -81,7 +81,7 @@ const isCollapsed = ref(getItem(props.name + "-is-collapsed", props.collapse));
 
 function setCollapse(state) {
   isCollapsed.value = state;
-  setItem(props.name + "-is-collapsed", isCollapsed.value ? "1" : "");
+  setItem(props.name + "-is-collapsed", !!isCollapsed.value);
 }
 
 function toggleCollapse() {
@@ -104,9 +104,3 @@ watch(() => props.collapse, () => {
   setCollapse(props.collapse);
 });
 </script>
-
-<style module="cls" lang="scss">
-.collapsable-sidebar {
-  @apply overflow-y-auto overflow-x-hidden scroll-smooth flex-shrink-0 border-r border-gray-200 transition-all relative;
-}
-</style>

package/src/components/Utility/Popovers/PopoverMenu.vue

@@ -1,6 +1,6 @@
 <template>
   <a
-    class="p-3 actionable"
+    class="p-3 dx-popover-menu"
     :class="{'opacity-50 cursor-not-allowed': disabled}"
   >
     <QTooltip v-if="$slots.tooltip || tooltip">
@@ -16,7 +16,7 @@
       />
       <MenuIcon
         v-else
-        class="w-4 text-black"
+        class="w-4 dx-menu-icon"
       />
     </Transition>
     <QMenu
@@ -73,7 +73,7 @@ defineProps({
     type: [Function, Object],
     default: () => ({
       is: QSpinner,
-      props: { class: "w-4 h-4 text-black" }
+      props: { class: "w-4 h-4" }
     })
   }
 });