quasar-ui-danx 0.4.56 → 0.4.59

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-danx",
-  "version": "0.4.56",
+  "version": "0.4.59",
   "author": "Dan <dan@flytedesk.com>",
   "description": "DanX Vue / Quasar component library",
   "license": "MIT",
@@ -10,7 +10,10 @@
   "types": "types/index.d.ts",
   "scripts": {
     "dev": "cd dev && quasar dev && cd ..",
-    "build": "vite build",
+    "clean": "rimraf dist",
+    "build:types": "tsc -p tsconfig.build.json",
+    "build:bundle": "vite build",
+    "build": "yarn clean && yarn build:types && yarn build:bundle",
     "preview": "vite preview",
     "postversion": "yarn build && npm publish && cd .. && git add ui && git commit -m \"v$npm_package_version\" && git tag \"v$npm_package_version\" && git push"
   },

package/src/components/ActionTable/Form/Fields/SelectionMenuField.vue

@@ -18,7 +18,7 @@
       >
         <div>
           <div
-            v-for="option in options"
+            v-for="option in optionsPlusSelected"
             :key="option.id"
             v-ripple
             class="cursor-pointer flex items-center relative"
@@ -80,7 +80,6 @@
       :class="editClass"
       :size="size"
       :disabled="editDisabled"
-      class="opacity-0 group-hover:opacity-100 transition-all"
       :show-icon="EditIcon"
       :hide-icon="DoneEditingIcon"
       :tooltip="editDisabled ? 'You are not allowed to edit' : ''"
@@ -104,7 +103,7 @@ import {
 	FaSolidListCheck as DefaultSelectIcon,
 	FaSolidPencil as EditIcon
 } from "danx-icon";
-import { ref } from "vue";
+import { computed, ref } from "vue";
 import { ActionTargetItem } from "../../../../types";
 import { ShowHideButton } from "../../../Utility/Buttons";
 import { ActionButtonProps, default as ActionButton } from "../../../Utility/Buttons/ActionButton";
@@ -113,7 +112,7 @@ import EditableDiv from "./EditableDiv";
 defineEmits(["create", "update", "delete"]);
 const selected = defineModel<ActionTargetItem | null>("selected");
 const editing = defineModel<boolean>("editing");
-withDefaults(defineProps<{
+const props = withDefaults(defineProps<{
 	options: ActionTargetItem[];
 	showEdit?: boolean;
 	loading?: boolean;
@@ -153,4 +152,10 @@ withDefaults(defineProps<{
 });
 
 const isSelecting = ref(false);
+
+// If the selected option is not in the options list, it should be added in
+const optionsPlusSelected = computed(() => {
+	if (!selected.value || props.options.find((o) => o.id === selected.value?.id)) return props.options;
+	return [selected.value, ...props.options];
+});
 </script>

package/src/components/ActionTable/controls.ts

@@ -1,4 +1,4 @@
-import { computed, ref, shallowRef, watch } from "vue";
+import { computed, Ref, ref, shallowRef, watch } from "vue";
 import { RouteParams, Router } from "vue-router";
 import { danxOptions } from "../../config";
 import { getItem, latestCallOnly, setItem, storeObject, waitForRef } from "../../helpers";
@@ -10,8 +10,7 @@ import {
 	ListControlsFilter,
 	ListControlsOptions,
 	ListControlsPagination,
-	PagedItems,
-	Ref
+	PagedItems
 } from "../../types";
 import { getFilterFromUrl } from "./listHelpers";
 

package/src/components/PanelsDrawer/PanelsDrawer.vue

@@ -46,6 +46,7 @@
           class="flex items-stretch flex-nowrap h-full"
         >
           <PanelsDrawerTabs
+            v-if="!hideTabs"
             :key="'pd-tabs:' + target.id"
             v-model="activePanel"
             :target="target"
@@ -53,13 +54,31 @@
             :panels="panels"
             @update:model-value="$emit('update:model-value', $event)"
           />
-          <PanelsDrawerPanels
+
+          <QTabPanels
             :key="'pd-panels:' + target.id"
-            :panels="panels"
-            :active-panel="activePanel"
-            :active-item="target"
+            :model-value="activePanel"
             :class="activePanelOptions?.class || panelsClass"
-          />
+            class="dx-panels-drawer-panels overflow-y-auto h-full transition-all"
+          >
+            <slot
+              name="panels"
+              :active-panel="activePanel"
+            >
+              <QTabPanel
+                v-for="panel in panels"
+                :key="panel.name"
+                :name="panel.name"
+              >
+                <RenderVnode
+                  v-if="panel.vnode"
+                  :vnode="panel.vnode"
+                  :props="target"
+                />
+              </QTabPanel>
+            </slot>
+          </QTabPanels>
+
           <div
             v-if="$slots['right-sidebar']"
             class="border-l overflow-y-auto"
@@ -81,8 +100,7 @@
 import { computed, onMounted, ref, watch } from "vue";
 import { XIcon as CloseIcon } from "../../svg";
 import { ActionPanel, ActionTargetItem } from "../../types";
-import { ContentDrawer } from "../Utility";
-import PanelsDrawerPanels from "./PanelsDrawerPanels";
+import { ContentDrawer, RenderVnode } from "../Utility";
 import PanelsDrawerTabs from "./PanelsDrawerTabs";
 
 export interface PanelsDrawerProps {
@@ -93,7 +111,8 @@ export interface PanelsDrawerProps {
 	panelsClass?: string | object,
 	drawerClass?: string | object,
 	position?: "standard" | "right" | "left";
-	panels: ActionPanel[]
+	panels: ActionPanel[];
+	hideTabs?: boolean;
 }
 
 defineEmits(["update:model-value", "close"]);

package/src/components/PanelsDrawer/index.ts

@@ -1,3 +1,2 @@
 export { default as PanelsDrawer } from "./PanelsDrawer.vue";
-export { default as PanelsDrawerPanels } from "./PanelsDrawerPanels.vue";
 export { default as PanelsDrawerTabs } from "./PanelsDrawerTabs.vue";

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

@@ -1,58 +1,58 @@
 <template>
-  <QBtn
-    :loading="isSaving"
-    class="shadow-none py-0"
-    :class="buttonClass"
-    :disable="disabled"
-    @click="()=> onAction()"
-  >
-    <div class="flex items-center flex-nowrap">
-      <component
-        :is="icon || typeOptions.icon"
-        class="transition-all"
-        :class="resolvedIconClass"
-      />
-      <slot>
-        <div
-          v-if="label || label === 0"
-          class="ml-2"
-          :class="labelClass"
-        >
-          {{ label }}
-        </div>
-      </slot>
-    </div>
-    <QTooltip
-      v-if="tooltip"
-      class="whitespace-nowrap"
-    >
-      <slot name="tooltip">
-        {{ tooltip }}
-      </slot>
-    </QTooltip>
-    <QMenu
-      v-if="isConfirming"
-      :model-value="true"
-    >
-      <div class="p-4 bg-slate-600">
-        <div>{{ confirmText }}</div>
-        <div class="flex items-center flex-nowrap mt-2">
-          <div class="flex-grow">
-            <ActionButton
-              type="cancel"
-              color="gray"
-              @click="isConfirming = false"
-            />
-          </div>
-          <ActionButton
-            type="confirm"
-            color="green"
-            @click="()=> onAction(true)"
-          />
-        </div>
-      </div>
-    </QMenu>
-  </QBtn>
+	<QBtn
+		:loading="isSaving"
+		class="shadow-none py-0"
+		:class="buttonClass"
+		:disable="disabled"
+		@click="()=> onAction()"
+	>
+		<div class="flex items-center flex-nowrap">
+			<component
+				:is="icon || typeOptions.icon"
+				class="transition-all"
+				:class="resolvedIconClass"
+			/>
+			<div
+				v-if="label || label === 0"
+				class="ml-2"
+				:class="labelClass"
+			>
+				{{ label }}
+			</div>
+			<slot />
+		</div>
+		<QTooltip
+			v-if="tooltip"
+			class="whitespace-nowrap"
+			:class="tooltipClass"
+		>
+			<slot name="tooltip">
+				{{ tooltip }}
+			</slot>
+		</QTooltip>
+		<QMenu
+			v-if="isConfirming"
+			:model-value="true"
+		>
+			<div class="p-4 bg-slate-600">
+				<div>{{ confirmText }}</div>
+				<div class="flex items-center flex-nowrap mt-2">
+					<div class="flex-grow">
+						<ActionButton
+							type="cancel"
+							color="gray"
+							@click="isConfirming = false"
+						/>
+					</div>
+					<ActionButton
+						type="confirm"
+						color="green"
+						@click="()=> onAction(true)"
+					/>
+				</div>
+			</div>
+		</QMenu>
+	</QBtn>
 </template>
 <script setup lang="ts">
 import {
@@ -62,6 +62,7 @@ import {
 	FaSolidCopy as CopyIcon,
 	FaSolidFileExport as ExportIcon,
 	FaSolidFileImport as ImportIcon,
+	FaSolidMinus as MinusIcon,
 	FaSolidPause as PauseIcon,
 	FaSolidPencil as EditIcon,
 	FaSolidPlay as PlayIcon,
@@ -73,8 +74,8 @@ import { computed, ref } from "vue";
 import { ActionTarget, ResourceAction } from "../../../types";
 
 export interface ActionButtonProps {
-	type?: "trash" | "trash-red" | "create" | "edit" | "copy" | "play" | "stop" | "pause" | "refresh" | "confirm" | "cancel" | "export" | "import";
-	color?: "red" | "blue" | "sky" | "sky-invert" | "green" | "green-invert" | "lime" | "white" | "gray";
+	type?: "trash" | "create" | "edit" | "copy" | "play" | "stop" | "pause" | "refresh" | "confirm" | "cancel" | "export" | "import" | "minus";
+	color?: "red" | "blue" | "sky" | "sky-invert" | "green" | "green-invert" | "lime" | "white" | "gray" | "yellow" | "orange";
 	size?: "xxs" | "xs" | "sm" | "md" | "lg";
 	icon?: object | string;
 	iconClass?: string;
@@ -89,6 +90,7 @@ export interface ActionButtonProps {
 	disabledClass?: string;
 	confirm?: boolean;
 	confirmText?: string;
+	tooltipClass?: string;
 }
 
 const emit = defineEmits(["success", "error", "always"]);
@@ -105,7 +107,8 @@ const props = withDefaults(defineProps<ActionButtonProps>(), {
 	target: null,
 	input: null,
 	confirmText: "Are you sure?",
-	disabledClass: "text-slate-800 bg-slate-500 opacity-50"
+	disabledClass: "text-slate-800 bg-slate-500 opacity-50",
+	tooltipClass: ""
 });
 
 const mappedSizeClass = {
@@ -156,6 +159,10 @@ const colorClass = computed(() => {
 			return "text-sky-400 bg-sky-800 hover:bg-sky-900";
 		case "white":
 			return "text-white bg-gray-800 hover:bg-gray-200";
+		case "yellow":
+			return "text-yellow-300 bg-yellow-800 hover:bg-yellow-700";
+		case "orange":
+			return "text-orange-400 bg-orange-900 hover:bg-orange-800";
 		case "gray":
 			return "text-slate-200 bg-slate-800 hover:bg-slate-900";
 		default:
@@ -191,6 +198,8 @@ const typeOptions = computed(() => {
 			return { icon: PauseIcon };
 		case "refresh":
 			return { icon: RefreshIcon };
+		case "minus":
+			return { icon: MinusIcon };
 		default:
 			return { icon: EditIcon };
 	}

package/src/helpers/actionStore.ts

@@ -0,0 +1,29 @@
+import { ref, shallowRef } from "vue";
+import { ActionStore, ActionTargetItem, ListControlsRoutes } from "../types";
+
+export function useActionStore(routes: ListControlsRoutes): ActionStore {
+	const listItems = shallowRef<ActionTargetItem[]>([]);
+	const isRefreshing = ref(false);
+	const hasLoadedItems = ref(false);
+
+	async function loadItems() {
+		if (hasLoadedItems.value) return;
+		await refreshItems();
+		hasLoadedItems.value = true;
+	}
+
+	async function refreshItems() {
+		if (isRefreshing.value) return;
+		isRefreshing.value = true;
+		listItems.value = (await routes.list({ sort: [{ column: "name" }] })).data || [];
+		isRefreshing.value = false;
+	}
+
+	return {
+		listItems,
+		isRefreshing,
+		hasLoadedItems,
+		loadItems,
+		refreshItems
+	};
+}

package/src/helpers/compatibility.ts

@@ -1,64 +1,65 @@
 import { useGeolocation } from "@vueuse/core";
-import { computed } from "vue";
+import { computed, ShallowRef } from "vue";
+import { Ref } from "vue-demi";
 import { sleep } from "./utils";
 
 let isLoaded = false;
 let hasAlreadyWaited = false;
-let geolocationError = null;
-let hasLocation = null;
-let geolocation = null;
+let geolocationError: ShallowRef<GeolocationPositionError | null> | null = null;
+let hasLocation: Ref<number | null> | null = null;
+let geolocation: Ref<GeolocationCoordinates> | null = null;
 
 export function useCompatibility(requestLocation = true) {
-    if (!isLoaded && requestLocation) {
-        const { coords, error, locatedAt } = useGeolocation();
-        geolocationError = error;
-        hasLocation = locatedAt;
-        geolocation = coords;
-        isLoaded = true;
-    }
+	if (!isLoaded && requestLocation) {
+		const { coords, error, locatedAt } = useGeolocation();
+		geolocationError = error;
+		hasLocation = locatedAt;
+		geolocation = coords;
+		isLoaded = true;
+	}
 
-    const isLocationSupported = "geolocation" in navigator;
+	const isLocationSupported = "geolocation" in navigator;
 
-    const location = computed(() => {
-        if (hasLocation?.value) {
-            return geolocation?.value;
-        }
-        return null;
-    });
+	const location = computed(() => {
+		if (hasLocation?.value) {
+			return geolocation?.value;
+		}
+		return null;
+	});
 
-    const isCompatible = computed(() => !geolocationError?.value && !!hasLocation?.value);
+	const isCompatible = computed(() => !geolocationError?.value && !!hasLocation?.value);
 
-    /**
-     * Wait for location to be available and returns the location when it is or null after the wait period times out.
-     * @param maxWait
-     */
-    const waitForLocation = async (maxWait = 3000) => {
-        // We only should wait once, if we already waited and failed, its unlikely the location will be available at a
-        // later time
-        if (hasAlreadyWaited) {
-            return location;
-        }
+	/**
+	 * Wait for location to be available and returns the location when it is or null after the wait period times out.
+	 * @param maxWait
+	 */
+	const waitForLocation = async (maxWait = 3000) => {
+		// We only should wait once, if we already waited and failed, its unlikely the location will be available at a
+		// later time
+		if (hasAlreadyWaited) {
+			return location;
+		}
 
-        hasAlreadyWaited = true;
-        let waitTime = 0;
-        while (!location.value) {
-            await sleep(100);
-            waitTime += 100;
+		hasAlreadyWaited = true;
+		let waitTime = 0;
+		while (!location.value) {
+			await sleep(100);
+			waitTime += 100;
 
-            if (waitTime > maxWait) {
-                return null;
-            }
-        }
+			if (waitTime > maxWait) {
+				return null;
+			}
+		}
 
-        return location;
-    };
+		return location;
+	};
 
-    return {
-        isLocationSupported,
-        isCompatible,
-        geolocationError,
-        hasLocation,
-        location,
-        waitForLocation
-    };
+	return {
+		isLocationSupported,
+		isCompatible,
+		geolocationError,
+		hasLocation,
+		location,
+		waitForLocation
+	};
 }

package/src/helpers/date.ts

@@ -1,5 +1,6 @@
+import { DateTime } from "luxon";
 import { parseDateTime } from "./formats";
 
 export function diffInDays(date1: string, date2: string) {
-	return parseDateTime(date2).diff(parseDateTime(date1), ["days"]).days;
+	return parseDateTime(date2)?.diff(parseDateTime(date1) || DateTime.now(), ["days"]).days;
 }

package/src/helpers/index.ts

@@ -1,4 +1,5 @@
 export * from "./actions";
+export * from "./actionStore";
 export * from "./app";
 export * from "./array";
 export * from "./compatibility";

package/src/styles/quasar-reset.scss

@@ -87,10 +87,6 @@
 		&.scroll {
 			overflow: auto;
 		}
-
-		.q-tab-panel {
-			padding: 0;
-		}
 	}
 
 	&.overflow-y-auto {

package/src/types/actions.d.ts

@@ -1,8 +1,8 @@
 import { FilterGroup, ListController, ListControlsRoutes } from "src/types/controls";
 import { FormField } from "src/types/forms";
 import { TableColumn } from "src/types/tables";
-import { VNode } from "vue";
-import { AnyObject, ComputedRef, TypedObject } from "./shared";
+import { ComputedRef, Ref, ShallowRef, VNode } from "vue";
+import { AnyObject, TypedObject } from "./shared";
 
 export interface ActionTargetItem extends TypedObject {
 	isSaving?: boolean;
@@ -58,6 +58,14 @@ export interface ResourceAction<T = ActionTargetItem> extends ActionOptions<T> {
 	__type: string;
 }
 
+export interface ActionStore {
+	listItems: ShallowRef<ActionTargetItem[]>;
+	isRefreshing: Ref<boolean>;
+	hasLoadedItems: Ref<boolean>;
+	loadItems: () => Promise<void>;
+	refreshItems: () => Promise<void>;
+}
+
 export interface ActionController<T = ActionTargetItem> {
 	// Actions
 	action?: (actionName: string, target?: T | null, input?: any) => Promise<any | void>;
@@ -68,8 +76,9 @@ export interface ActionController<T = ActionTargetItem> {
 	batchActions?: ResourceAction[];
 	menuActions?: ResourceAction[];
 	columns?: TableColumn[];
-	filters?: ComputedRef<FilterGroup[]>;
+	filters?: ComputedRef<FilterGroup[]> | FilterGroup[];
 	fields?: FormField[];
 	panels?: ActionPanel[];
 	routes?: ListControlsRoutes;
+	store?: ActionStore;
 }

package/src/types/controls.d.ts

@@ -1,6 +1,7 @@
 import { RequestCallOptions } from "src/types/requests";
+import { ComputedRef, Ref, ShallowRef } from "vue";
 import { ActionOptions, ActionTargetItem, ResourceAction } from "./actions";
-import { AnyObject, ComputedRef, LabelValueItem, Ref } from "./shared";
+import { AnyObject, LabelValueItem } from "./shared";
 
 export interface ListControlsFilter {
 	[key: string]: object | object[] | null | undefined | string | number | boolean;
@@ -52,6 +53,7 @@ export interface ListControlsOptions {
 
 export interface ListControlsPagination {
 	__sort?: object[] | null;
+	sort?: object[] | null;
 	sortBy?: string | null;
 	descending?: boolean;
 	page?: number;
@@ -77,7 +79,7 @@ export interface PagedItems<T = ActionTargetItem> {
 export interface ListController<T = ActionTargetItem> {
 	name: string;
 	label: string;
-	pagedItems: Ref<PagedItems<T> | null>;
+	pagedItems: ShallowRef<PagedItems<T> | null>;
 	activeFilter: Ref<ListControlsFilter>;
 	globalFilter: Ref<ListControlsFilter>;
 	filterActiveCount: ComputedRef<number>;

package/src/types/shared.d.ts

@@ -14,12 +14,3 @@ export interface LabelValueItem {
 	label: string;
 	value: string | number | boolean;
 }
-
-/** Define Vue 3 Types here for better type checking in PHPStorm */
-export interface Ref<T = any> {
-	value: T;
-}
-
-export interface ComputedRef<T = any> {
-	readonly value: T;
-}

package/tsconfig.build.json

@@ -0,0 +1,48 @@
+{
+  "compilerOptions": {
+    // Compile down to ESNext (or choose your target version)
+    "target": "esnext",
+    // Use ES modules
+    "module": "esnext",
+    // Library files to be included in the compilation
+    "lib": [
+      "dom",
+      "esnext"
+    ],
+    // Generate corresponding '.d.ts' file
+    "declaration": true,
+    // Output directory for the compiled files
+    "outDir": "./dist",
+    // Root directory of your source files
+    "rootDir": "./src",
+    // Enable all strict type-checking options
+    "strict": true,
+    // Enables compatibility with Babel-style module imports
+    "esModuleInterop": true,
+    // Skip type checking of all declaration files (*.d.ts)
+    "skipLibCheck": true,
+    // Disallow inconsistently-cased references to the same file
+    "forceConsistentCasingInFileNames": true,
+    // Resolve modules using Node.js style
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    // Allow default imports from modules with no default export
+    "allowSyntheticDefaultImports": true,
+    // Enables experimental support for decorators
+    "experimentalDecorators": true,
+    // Enables source map generation for the compiled files (useful for debugging)
+    "sourceMap": true,
+    // Base directory to resolve non-relative module names,
+    "baseUrl": "./"
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.vue",
+    "src/**/*.svg",
+    "types/**/*.d.ts"
+  ],
+  "exclude": [
+    "dist",
+    "**/*.spec.ts"
+  ]
+}