quasar-ui-danx 0.4.57 → 0.4.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-danx",
-  "version": "0.4.57",
+  "version": "0.4.60",
   "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/ActionForm.vue

@@ -11,7 +11,7 @@
   </RenderedForm>
 </template>
 <script setup lang="ts">
-import { Ref, ref, watch } from "vue";
+import { computed, Ref, ref, watch } from "vue";
 import { ActionTargetItem, AnyObject, Form, ResourceAction } from "../../../types";
 import RenderedForm from "./RenderedForm.vue";
 
@@ -59,8 +59,21 @@ watch(() => props.target, (target: ActionTargetItem) => {
 	}
 });
 
+const isValid = computed(() => {
+	for (let field of props.form.fields) {
+		const value = input.value[field.name];
+
+		if (field.required && !value && value !== false) {
+			return false;
+		}
+	}
+	return true;
+});
+
 async function onUpdate() {
-	await props.action.trigger(props.target, input.value);
-	emit("saved");
+	if (isValid.value) {
+		await props.action.trigger(props.target, input.value);
+		emit("saved");
+	}
 }
 </script>

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

@@ -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' : ''"

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/Utility/Buttons/ActionButton.vue

@@ -1,59 +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"
-      :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>
+	<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 {
@@ -63,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,
@@ -74,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;
@@ -159,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:
@@ -194,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/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"
+  ]
+}

package/tsconfig.json

@@ -1,49 +1,11 @@
 {
+  "extends": "./tsconfig.build.json",
   "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": "./",
-    "paths": {}
-  },
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.vue",
-    "src/**/*.svg",
-    "types/**/*.d.ts"
-  ],
-  "exclude": [
-    "dist",
-    "**/*.spec.ts"
-  ]
+    "paths": {
+      "vue": [
+        "../../gpt-manager/spa/node_modules/vue"
+      ]
+    }
+  }
 }
+

package/vite.config.js

@@ -1,39 +1,39 @@
-import vue from '@vitejs/plugin-vue';
-import { resolve } from 'path';
-import { defineConfig } from 'vite';
-import svgLoader from 'vite-svg-loader';
+import vue from "@vitejs/plugin-vue";
+import { resolve } from "path";
+import { defineConfig } from "vite";
+import svgLoader from "vite-svg-loader";
 
 export default defineConfig({
-    plugins: [vue(), svgLoader()],
-    resolve: {
-        extensions: ['.mjs', '.js', '.ts', '.mts', '.jsx', '.tsx', '.json', '.vue', '.svg']
-    },
-    build: {
-        sourcemap: true,
-        lib: {
-            entry: resolve(__dirname, './src/index.esm.js'),
-            name: 'Danx',
-            // the proper extensions will be added
-            fileName: (format) => `danx.${format}.js`
-        },
-        // Add rollupOptions only if you need to customize the build further
-        rollupOptions: {
-            // Externalize deps that shouldn't be bundled into your library
-            external: ['vue', 'quasar'],
-            output: {
-                // Provide globals here
-                globals: {
-                    vue: 'Vue',
-                    quasar: 'Quasar'
-                }
-            }
-        }
-    },
-    css: {
-        preprocessorOptions: {
-            scss: {
-                additionalData: `@import "./src/styles/index.scss";`
-            }
-        }
-    }
+	plugins: [vue(), svgLoader()],
+	resolve: {
+		extensions: [".mjs", ".js", ".ts", ".mts", ".jsx", ".tsx", ".json", ".vue", ".svg"]
+	},
+	build: {
+		sourcemap: true,
+		lib: {
+			entry: resolve(__dirname, "./src/index.esm.js"),
+			name: "Danx",
+			// the proper extensions will be added
+			fileName: (format) => `danx.${format}.js`
+		},
+		// Add rollupOptions only if you need to customize the build further
+		rollupOptions: {
+			// Externalize deps that shouldn't be bundled into your library
+			external: ["vue", "quasar"],
+			output: {
+				// Provide globals here
+				globals: {
+					vue: "Vue",
+					quasar: "Quasar"
+				}
+			}
+		}
+	},
+	css: {
+		preprocessorOptions: {
+			scss: {
+				additionalData: `@import "./src/styles/index.scss";`
+			}
+		}
+	}
 });