@hybridly/vue 0.10.0-beta.1 → 0.10.0-beta.10

package/dist/index.mjs

@@ -1,16 +1,127 @@
-import { computed, createApp, defineComponent, getCurrentInstance, h, isRef, nextTick, onUnmounted, reactive, readonly, ref, shallowRef, toRaw, toValue, triggerRef, unref, watch } from "vue";
+import { n as __reExport, t as __exportAll } from "./_chunks/chunk.mjs";
 import { can, createRouter, definePlugin, makeUrl, registerHook as registerHook$1, route, route as route$1, router, router as router$1 } from "@hybridly/core";
 import { clone, debounce, debug, merge, random, setValueAtPath, showViewComponentErrorModal, unsetPropertyAtPath } from "@hybridly/utils";
+import qs from "qs";
+import { computed, createApp, defineComponent, getCurrentInstance, h, isRef, nextTick, onUnmounted, reactive, readonly, ref, shallowRef, toRaw, toValue, triggerRef, unref, watch } from "vue";
 import nprogress from "nprogress";
 import { setupDevtoolsPlugin } from "@vue/devtools-api";
-import qs from "qs";
 import { getByPath, setByPath } from "@clickbar/dot-diver";
 import isEqual from "lodash.isequal";
-
-//#region src/plugins/progress.ts
-/**
-* A plugin to display a progress bar.
-*/
+const RouterLink = defineComponent({
+	name: "RouterLink",
+	setup(_, { slots, attrs }) {
+		return (props) => {
+			let data = props.data ?? {};
+			const preloads = props.preload ?? false;
+			const preserveScroll = props.preserveScroll;
+			const preserveState = props.preserveState;
+			const url = makeUrl(props.href ?? "");
+			const method = props.method?.toUpperCase() ?? "GET";
+			const as = typeof props.as === "object" ? props.as : props.as?.toLowerCase() ?? "a";
+			if (method === "GET") {
+				debug.adapter("vue", "Moving data object to URL parameters.");
+				url.search = qs.stringify(merge(data, qs.parse(url.search, { ignoreQueryPrefix: true })), {
+					encodeValuesOnly: true,
+					arrayFormat: "indices"
+				});
+				data = {};
+			}
+			if (as === "a" && method !== "GET") debug.adapter("vue", `Creating POST/PUT/PATCH/DELETE <a> links is discouraged as it causes "Open Link in New Tab/Window" accessibility issues.\n\nPlease specify a more appropriate element using the "as" attribute. For example:\n\n<RouterLink href="${url}" method="${method}" as="button">...</RouterLink>`);
+			function performPreload(type) {
+				if (!preloads) return;
+				if (props.external) return;
+				if (method !== "GET") return;
+				if (type !== "mount" && props.disabled) return;
+				if (type === "hover" && preloads === "mount") return;
+				if (type === "mount" && preloads !== "mount") return;
+				router$1.preload(url, {
+					data,
+					preserveScroll,
+					preserveState,
+					...props.options
+				});
+			}
+			performPreload("mount");
+			return h(props.as, {
+				...attrs,
+				...as === "a" ? { href: url } : {},
+				...props.disabled ? { disabled: props.disabled } : {},
+				onMouseenter: () => performPreload("hover"),
+				onAuxclick: (event) => {
+					if (props.disabled) event.preventDefault();
+				},
+				onClick: (event) => {
+					if (props.disabled) {
+						event.preventDefault();
+						return;
+					}
+					if (props.external) return;
+					if (!shouldIntercept(event)) return;
+					event.preventDefault();
+					router$1.navigate({
+						url,
+						data,
+						method,
+						preserveState: method !== "GET",
+						...props.options
+					});
+				}
+			}, slots.default ? slots : props.text);
+		};
+	},
+	props: {
+		href: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		as: {
+			type: [String, Object],
+			default: "a"
+		},
+		method: {
+			type: String,
+			default: "GET"
+		},
+		data: {
+			type: Object,
+			default: () => ({})
+		},
+		external: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		options: {
+			type: Object,
+			default: () => ({})
+		},
+		text: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		preload: {
+			type: [Boolean, String],
+			default: false
+		},
+		preserveScroll: {
+			type: Boolean,
+			default: void 0
+		},
+		preserveState: {
+			type: Boolean,
+			default: void 0
+		}
+	}
+});
+function shouldIntercept(event) {
+	const isLink = event.currentTarget.tagName.toLowerCase() === "a";
+	return !(event.target && (event?.target).isContentEditable || event.defaultPrevented || isLink && event.which > 1 || isLink && event.altKey || isLink && event.ctrlKey || isLink && event.metaKey || isLink && event.shiftKey);
+}
 function progress(options) {
 	const resolved = {
 		delay: 250,
@@ -43,8 +154,8 @@ function progress(options) {
 			clearTimeout(timeout);
 			timeout = setTimeout(() => startProgress(), resolved.delay);
 		},
-		progress: (progress$1) => {
-			if (nprogress.isStarted() && progress$1.percentage) nprogress.set(Math.max(nprogress.status, progress$1.percentage / 100 * .9));
+		progress: (progress) => {
+			if (nprogress.isStarted() && progress.percentage) nprogress.set(Math.max(nprogress.status, progress.percentage / 100 * .9));
 		},
 		after: () => finishProgress()
 	});
@@ -114,9 +225,6 @@ function injectCSS(color) {
   `;
 	document.head.appendChild(element);
 }
-
-//#endregion
-//#region src/stores/dialog.ts
 const DEBUG_KEY = "vue:state:dialog";
 const dialogStore = {
 	state: {
@@ -159,16 +267,7 @@ const dialogStore = {
 		}
 	}
 };
-
-//#endregion
-//#region src/stores/mount.ts
-/**
-* These callbacks are run on the first stick after the view component is mounted.
-*/
 const onMountedCallbacks = [];
-
-//#endregion
-//#region src/stores/state.ts
 const state = {
 	context: shallowRef(),
 	view: shallowRef(),
@@ -192,9 +291,6 @@ const state = {
 		state.viewKey.value = unref(key);
 	}
 };
-
-//#endregion
-//#region src/components/wrapper.ts
 const wrapper = defineComponent({
 	name: "Hybridly",
 	setup() {
@@ -255,9 +351,6 @@ const wrapper = defineComponent({
 		};
 	}
 });
-
-//#endregion
-//#region src/devtools.ts
 const hybridlyStateType = "hybridly";
 const hybridlyEventsTimelineLayerId = "Hybridly";
 function setupDevtools(app) {
@@ -364,9 +457,6 @@ function setupDevtools(app) {
 const devtools = { install(app) {
 	if (process.env.NODE_ENV === "development" || __VUE_PROD_DEVTOOLS__) setupDevtools(app);
 } };
-
-//#endregion
-//#region src/plugins/view-transition.ts
 function viewTransition() {
 	if (!document.startViewTransition) return { name: "view-transition" };
 	let domUpdated;
@@ -389,9 +479,6 @@ function viewTransition() {
 		}
 	};
 }
-
-//#endregion
-//#region src/stores/form.ts
 const formStore = {
 	defaultConfig: {},
 	setDefaultConfig: (config) => {
@@ -401,12 +488,6 @@ const formStore = {
 		return clone(formStore.defaultConfig);
 	}
 };
-
-//#endregion
-//#region src/initialize.ts
-/**
-* Initializes Hybridly's router and context.
-*/
 async function initializeHybridly(options = {}) {
 	const resolved = options;
 	const { element, payload, resolve } = prepare(resolved);
@@ -428,18 +509,18 @@ async function initializeHybridly(options = {}) {
 			onContextUpdate: (context) => {
 				state.setContext(context);
 			},
-			onViewSwap: async (options$1) => {
-				if (options$1.component) {
-					onMountedCallbacks.push(() => options$1.onMounted?.({ isDialog: false }));
-					state.setView(options$1.component);
+			onViewSwap: async (options) => {
+				if (options.component) {
+					onMountedCallbacks.push(() => options.onMounted?.({ isDialog: false }));
+					state.setView(options.component);
 				}
-				state.setProperties(options$1.properties);
-				if (!options$1.preserveState && !options$1.dialog) state.setViewKey(random());
-				if (options$1.dialog) {
-					onMountedCallbacks.push(() => options$1.onMounted?.({ isDialog: true }));
-					dialogStore.setComponent(await resolve(options$1.dialog.component));
-					dialogStore.setProperties(options$1.dialog.properties);
-					dialogStore.setKey(options$1.dialog.key);
+				state.setProperties(options.properties);
+				if (!options.preserveState && !options.dialog) state.setViewKey(random());
+				if (options.dialog) {
+					onMountedCallbacks.push(() => options.onMounted?.({ isDialog: true }));
+					dialogStore.setComponent(await resolve(options.dialog.component));
+					dialogStore.setProperties(options.dialog.properties);
+					dialogStore.setKey(options.dialog.key);
 					dialogStore.show();
 				} else dialogStore.hide();
 			}
@@ -490,13 +571,10 @@ function prepare(options) {
 		resolve
 	};
 }
-/**
-* Resolves a view by its name.
-*/
 async function resolveViewComponent(name, options) {
 	const components = options.imported;
 	const result = options.components.views.find((view) => name === view.identifier);
-	const path = Object.keys(components).sort((a, b) => a.length - b.length).find((path$1) => result ? path$1.endsWith(result?.path) : false);
+	const path = Object.keys(components).sort((a, b) => a.length - b.length).find((path) => result ? path.endsWith(result?.path) : false);
 	if (!result || !path) {
 		console.warn(`View component [${name}] not found. Available components: `, options.components.views.map(({ identifier }) => identifier));
 		showViewComponentErrorModal(name);
@@ -506,133 +584,6 @@ async function resolveViewComponent(name, options) {
 	component = component.default ?? component;
 	return component;
 }
-
-//#endregion
-//#region src/components/link.ts
-const RouterLink = defineComponent({
-	name: "RouterLink",
-	setup(_, { slots, attrs }) {
-		return (props) => {
-			let data = props.data ?? {};
-			const preloads = props.preload ?? false;
-			const preserveScroll = props.preserveScroll;
-			const preserveState = props.preserveState;
-			const url = makeUrl(props.href ?? "");
-			const method = props.method?.toUpperCase() ?? "GET";
-			const as = typeof props.as === "object" ? props.as : props.as?.toLowerCase() ?? "a";
-			if (method === "GET") {
-				debug.adapter("vue", "Moving data object to URL parameters.");
-				url.search = qs.stringify(merge(data, qs.parse(url.search, { ignoreQueryPrefix: true })), {
-					encodeValuesOnly: true,
-					arrayFormat: "indices"
-				});
-				data = {};
-			}
-			if (as === "a" && method !== "GET") debug.adapter("vue", `Creating POST/PUT/PATCH/DELETE <a> links is discouraged as it causes "Open Link in New Tab/Window" accessibility issues.\n\nPlease specify a more appropriate element using the "as" attribute. For example:\n\n<RouterLink href="${url}" method="${method}" as="button">...</RouterLink>`);
-			function performPreload(type) {
-				if (!preloads) return;
-				if (props.external) return;
-				if (method !== "GET") return;
-				if (type !== "mount" && props.disabled) return;
-				if (type === "hover" && preloads === "mount") return;
-				if (type === "mount" && preloads !== "mount") return;
-				router$1.preload(url, {
-					data,
-					preserveScroll,
-					preserveState,
-					...props.options
-				});
-			}
-			performPreload("mount");
-			return h(props.as, {
-				...attrs,
-				...as === "a" ? { href: url } : {},
-				...props.disabled ? { disabled: props.disabled } : {},
-				onMouseenter: () => performPreload("hover"),
-				onAuxclick: (event) => {
-					if (props.disabled) event.preventDefault();
-				},
-				onClick: (event) => {
-					if (props.disabled) {
-						event.preventDefault();
-						return;
-					}
-					if (props.external) return;
-					if (!shouldIntercept(event)) return;
-					event.preventDefault();
-					router$1.navigate({
-						url,
-						data,
-						method,
-						preserveState: method !== "GET",
-						...props.options
-					});
-				}
-			}, slots.default ? slots : props.text);
-		};
-	},
-	props: {
-		href: {
-			type: String,
-			required: false,
-			default: void 0
-		},
-		as: {
-			type: [String, Object],
-			default: "a"
-		},
-		method: {
-			type: String,
-			default: "GET"
-		},
-		data: {
-			type: Object,
-			default: () => ({})
-		},
-		external: {
-			type: Boolean,
-			default: false
-		},
-		disabled: {
-			type: Boolean,
-			default: false
-		},
-		options: {
-			type: Object,
-			default: () => ({})
-		},
-		text: {
-			type: String,
-			required: false,
-			default: void 0
-		},
-		preload: {
-			type: [Boolean, String],
-			default: false
-		},
-		preserveScroll: {
-			type: Boolean,
-			default: void 0
-		},
-		preserveState: {
-			type: Boolean,
-			default: void 0
-		}
-	}
-});
-function shouldIntercept(event) {
-	const isLink = event.currentTarget.tagName.toLowerCase() === "a";
-	return !(event.target && (event?.target).isContentEditable || event.defaultPrevented || isLink && event.which > 1 || isLink && event.altKey || isLink && event.ctrlKey || isLink && event.metaKey || isLink && event.shiftKey);
-}
-
-//#endregion
-//#region src/utils.ts
-/**
-* Converts ref to reactive.
-*
-* @see https://vueuse.org/toReactive
-* @param objectRef A ref of object
-*/
 function toReactive(objectRef) {
 	if (!isRef(objectRef)) return reactive(objectRef);
 	return reactive(new Proxy({}, {
@@ -661,29 +612,17 @@ function toReactive(objectRef) {
 		}
 	}));
 }
-
-//#endregion
-//#region src/composables/property.ts
-/** Accesses all current properties. */
 function useProperties() {
 	return readonly(toReactive(computed(() => state.properties.value)));
 }
-/** Accesses a property with a dot notation. */
 function useProperty(path) {
 	return computed(() => getByPath(state.properties.value, path));
 }
-/**
-* Sets the property at the given path to the given value.
-* Note: this helper is experimental and may change in the future.
-*/
 function setProperty(path, value) {
 	if (!state.properties.value) return;
 	setByPath(state.properties.value, path, toValue(value));
 	if (state.context.value?.view.properties) setByPath(state.context.value.view.properties, path, toValue(value));
 }
-
-//#endregion
-//#region src/composables/form.ts
 function safeClone(obj) {
 	return clone(toRaw(obj));
 }
@@ -695,39 +634,22 @@ function useForm(options) {
 		recentlyFailed: void 0,
 		recentlySuccessful: void 0
 	};
-	/** Fields that were initially set up. */
 	const initial = safeClone(options.fields);
-	/** Fields as they were when loaded. */
 	const loaded = safeClone(historyData?.fields ?? options.fields);
-	/** Current fields. */
 	const fields = reactive(safeClone(loaded));
-	/** Validation errors for each field. */
 	const errors = ref(historyData?.errors ?? {});
-	/** Whether the form is dirty. */
 	const isDirty = ref(false);
-	/** Whether the submission was recently successful. */
 	const recentlySuccessful = ref(false);
-	/** Whether the submission is successful. */
 	const successful = ref(false);
-	/** Whether the submission was recently failed. */
 	const recentlyFailed = ref(false);
-	/** Whether the submission is failed. */
 	const failed = ref(false);
-	/** Whether the submission is being processed. */
 	const processing = ref(false);
-	/** The current request's progress. */
-	const progress$1 = ref();
-	/**
-	* Sets new initial values for the form, so subsequent resets will use thse values.
-	*/
+	const progress = ref();
 	function setInitial(newInitial) {
 		Object.entries(newInitial).forEach(([key, value]) => {
 			Reflect.set(initial, key, safeClone(value));
 		});
 	}
-	/**
-	* Resets the form's failed and successful flags.
-	*/
 	function resetSubmissionState() {
 		successful.value = false;
 		failed.value = false;
@@ -735,37 +657,25 @@ function useForm(options) {
 		recentlySuccessful.value = false;
 		clearTimeout(timeoutIds.recentlySuccessful);
 		clearTimeout(timeoutIds.recentlyFailed);
-		progress$1.value = void 0;
+		progress.value = void 0;
 	}
-	/**
-	* Resets the fields, errors and submission state.
-	*/
 	function reset() {
 		resetSubmissionState();
 		clearErrors();
 		resetFields();
 	}
-	/**
-	* Resets the fields to their initial values.
-	*/
 	function resetFields(...keys) {
 		if (keys.length === 0) keys = Object.keys(fields);
 		keys.forEach((key) => {
 			Reflect.set(fields, key, safeClone(Reflect.get(initial, key)));
 		});
 	}
-	/**
-	* Clear the form fields.
-	*/
 	function clear(...keys) {
 		if (keys.length === 0) keys = Object.keys(fields);
 		keys.forEach((key) => {
 			delete fields[key];
 		});
 	}
-	/**
-	* Submits the form.
-	*/
 	function submit(optionsOverrides) {
 		const { fields: _f, key: _k, ...optionsWithoutFields } = options;
 		const resolvedOptions = optionsOverrides ? merge(optionsWithoutFields, optionsOverrides, { mergePlainObjects: true }) : optionsWithoutFields;
@@ -790,7 +700,7 @@ function useForm(options) {
 					return hooks.start?.(context);
 				},
 				progress: (incoming, context) => {
-					progress$1.value = incoming;
+					progress.value = incoming;
 					return hooks.progress?.(incoming, context);
 				},
 				error: (incoming, context) => {
@@ -810,47 +720,32 @@ function useForm(options) {
 					return hooks.success?.(payload, context);
 				},
 				after: (context) => {
-					progress$1.value = void 0;
+					progress.value = void 0;
 					processing.value = false;
 					return hooks.after?.(context);
 				}
 			}
 		});
 	}
-	/**
-	* Clears all errors.
-	*/
 	function clearErrors(...keys) {
 		if (keys.length === 0) keys = Object.keys(fields);
 		keys.forEach((key) => {
 			clearError(key);
 		});
 	}
-	/**
-	* Checks if the given keys are dirty in the form.
-	*/
 	function hasDirty(...keys) {
 		if (keys.length === 0) return isDirty.value;
 		return keys.some((key) => !isEqual(toRaw(getByPath(fields, key)), toRaw(getByPath(initial, key))));
 	}
-	/**
-	* Clears the given field's error.
-	*/
 	function clearError(key) {
 		unsetPropertyAtPath(errors.value, key);
 	}
-	/**
-	* Sets current errors.
-	*/
 	function setErrors(incoming) {
 		clearErrors();
 		Object.entries(incoming).forEach(([path, value]) => {
 			setValueAtPath(errors.value, path, value);
 		});
 	}
-	/**
-	* Aborts the submission.
-	*/
 	function abort() {
 		router$1.abort();
 	}
@@ -886,7 +781,7 @@ function useForm(options) {
 		hasErrors: computed(() => Object.values(errors.value ?? {}).length > 0),
 		initial,
 		loaded,
-		progress: progress$1,
+		progress,
 		isDirty,
 		errors,
 		processing,
@@ -896,45 +791,29 @@ function useForm(options) {
 		recentlyFailed
 	});
 }
-
-//#endregion
-//#region src/composables/history.ts
-/**
-* Returns a ref with a value saved in the history state through Hybridly.
-* The state is linked to a specific browser history entry.
-*/
 function useHistoryState(key, initial) {
 	const value = ref(router$1.history.get(key) ?? initial);
-	watch(value, (value$1) => {
-		router$1.history.remember(key, toRaw(value$1));
+	watch(value, (value) => {
+		router$1.history.remember(key, toRaw(value));
 	}, {
 		immediate: true,
 		deep: true
 	});
 	return value;
 }
-
-//#endregion
-//#region src/composables/back-forward.ts
 function useBackForward(options) {
 	const callbacks = [];
-	registerHook$1("navigated", (options$1) => {
-		if (options$1.type === "back-forward") {
+	registerHook$1("navigated", (options) => {
+		if (options.type === "back-forward") {
 			callbacks.forEach((fn) => fn(state.context.value));
 			callbacks.splice(0, callbacks.length);
 		}
 	});
-	/**
-	* Applies the given callback on back-forward navigations.
-	*/
 	function onBackForward(fn) {
 		callbacks.push(fn);
 	}
-	/**
-	* Reloads the page on back-forward navigations.
-	*/
-	function reloadOnBackForward(options$1) {
-		onBackForward(() => router$1.reload(options$1));
+	function reloadOnBackForward(options) {
+		onBackForward(() => router$1.reload(options));
 	}
 	if (options?.reload) reloadOnBackForward(options.reload === true ? void 0 : options.reload);
 	return {
@@ -942,24 +821,31 @@ function useBackForward(options) {
 		reloadOnBackForward
 	};
 }
-
-//#endregion
-//#region src/composables/register-hook.ts
-/**
-* Registers a global hook.
-* If called inside a component, unregisters after the component is unmounted.
-*/
+var src_exports = /* @__PURE__ */ __exportAll({});
+import * as import__hybridly_core from "@hybridly/core";
+__reExport(src_exports, import__hybridly_core);
+function createPaginator(paginator, defaultOptions) {
+	const isPaginator = (p) => {
+		return "links" in p && "meta" in p && "last_page" in p.meta;
+	};
+	if (isPaginator(paginator)) return {
+		...paginator,
+		to: (page, options) => {
+			const link = paginator.links.find((l) => l.page === page);
+			if (link?.url) return src_exports.router.get(link.url, {
+				preserveState: true,
+				...defaultOptions,
+				...options
+			});
+		}
+	};
+	return paginator;
+}
 const registerHook = (hook, fn, options) => {
 	const unregister = registerHook$1(hook, fn, options);
 	if (getCurrentInstance()) onUnmounted(() => unregister());
 	return unregister;
 };
-
-//#endregion
-//#region src/composables/dialog.ts
-/**
-* Exposes utilities related to the dialogs.
-*/
 function useDialog() {
 	return {
 		close: () => router$1.dialog.close(),
@@ -972,22 +858,69 @@ function useDialog() {
 		properties: computed(() => state.context.value?.dialog?.properties)
 	};
 }
-
-//#endregion
-//#region src/composables/refinements.ts
-function useRefinements(properties, refinementsKeys, defaultOptions = {}) {
-	const refinements = computed(() => properties[refinementsKeys]);
+function isTextFilter(filter) {
+	return filter.type === "text";
+}
+function isDateFilter(filter) {
+	return filter.type === "date";
+}
+function isSelectFilter(filter) {
+	return filter.type === "select";
+}
+function isTernaryFilter(filter) {
+	return filter.type === "ternary";
+}
+function isBooleanFilter(filter) {
+	return filter.type === "boolean";
+}
+function isTrashedFilter(filter) {
+	return filter.type === "trashed";
+}
+function isCallbackFilter(filter) {
+	return filter.type === "callback" || ![
+		"text",
+		"select",
+		"ternary",
+		"boolean",
+		"trashed"
+	].includes(filter.type);
+}
+function useRefinements(input, defaultOptions = {}) {
+	const refinements = computed(() => toValue(input));
 	const sortsKey = computed(() => refinements.value.keys.sorts);
 	const filtersKey = computed(() => refinements.value.keys.filters);
 	defaultOptions = {
 		replace: false,
 		...defaultOptions
 	};
+	const sorts = computed(() => {
+		return refinements.value.sorts.map((sort) => ({
+			...sort,
+			toggle: (options) => toggleSort(sort.name, options),
+			isSorting: (direction) => isSorting(sort.name, direction),
+			clear: (options) => clearSorts(options)
+		}));
+	});
+	const filters = computed(() => {
+		return refinements.value.filters.map((filter) => ({
+			...filter,
+			apply: (value, options) => applyFilter(filter.name, value, options),
+			clear: (options) => clearFilter(filter.name, options),
+			search: (query, options) => searchFilter(filter.name, query, options),
+			isSelectFilter: () => isSelectFilter(filter),
+			isDateFilter: () => isDateFilter(filter),
+			isSearchFilter: () => isTextFilter(filter),
+			isTernaryFilter: () => isTernaryFilter(filter),
+			isBooleanFilter: () => isBooleanFilter(filter),
+			isTrashedFilter: () => isTrashedFilter(filter),
+			isCallbackFilter: () => isCallbackFilter(filter)
+		}));
+	});
 	function getSort(name) {
-		return refinements.value.sorts.find((sort) => sort.name === name);
+		return sorts.value.find((sort) => sort.name === name);
 	}
 	function getFilter(name) {
-		return refinements.value.filters.find((sort) => sort.name === name);
+		return filters.value.find((sort) => sort.name === name);
 	}
 	async function reset(options = {}) {
 		return await router$1.reload({
@@ -1013,6 +946,18 @@ function useRefinements(properties, refinementsKeys, defaultOptions = {}) {
 			data: { [filtersKey.value]: { [filter]: void 0 } }
 		});
 	}
+	async function searchFilter(name, query, options = {}) {
+		if (!getFilter(name)) {
+			console.warn(`[Refinement] Filter "${name}" does not exist.`);
+			return;
+		}
+		if (["", null].includes(query?.toString() || null)) query = void 0;
+		return await router$1.reload({
+			...defaultOptions,
+			...options,
+			data: { [filtersKey.value]: { [name]: { search: query } } }
+		});
+	}
 	async function applyFilter(name, value, options = {}) {
 		const filter = getFilter(name);
 		if (!filter) {
@@ -1020,10 +965,20 @@ function useRefinements(properties, refinementsKeys, defaultOptions = {}) {
 			return;
 		}
 		if (["", null].includes(value) || value === filter.default) value = void 0;
+		const operator = (() => {
+			const operator = options.operator ?? filter.operator;
+			if (operator === filter.default_operator) return;
+			return operator;
+		})();
 		return await router$1.reload({
 			...defaultOptions,
 			...options,
-			data: { [filtersKey.value]: { [name]: value } }
+			data: { [filtersKey.value]: { [name]: {
+				value,
+				search: void 0,
+				operator,
+				options: options.options ?? void 0
+			} } }
 		});
 	}
 	async function clearSorts(options = {}) {
@@ -1094,18 +1049,10 @@ function useRefinements(properties, refinementsKeys, defaultOptions = {}) {
 	}
 	return {
 		bindFilter,
-		filters: toReactive(refinements.value.filters.map((filter) => ({
-			...filter,
-			apply: (value, options) => applyFilter(filter.name, value, options),
-			clear: (options) => clearFilter(filter.name, options)
-		}))),
-		sorts: toReactive(refinements.value.sorts.map((sort) => ({
-			...sort,
-			toggle: (options) => toggleSort(sort.name, options),
-			isSorting: (direction) => isSorting(sort.name, direction),
-			clear: (options) => clearSorts(options)
-		}))),
+		filters,
+		sorts,
 		filtersKey,
+		sortsKey,
 		getFilter,
 		getSort,
 		reset,
@@ -1120,9 +1067,6 @@ function useRefinements(properties, refinementsKeys, defaultOptions = {}) {
 		applyFilter
 	};
 }
-
-//#endregion
-//#region src/composables/current-route.ts
 const isNavigating = ref(false);
 function useRoute() {
 	const current = ref(router$1.current());
@@ -1140,68 +1084,48 @@ function useRoute() {
 		matches
 	};
 }
-
-//#endregion
-//#region src/composables/bulk-select.ts
 function useBulkSelect() {
 	const selection = ref({
 		all: false,
 		only: /* @__PURE__ */ new Set(),
 		except: /* @__PURE__ */ new Set()
 	});
-	/**
-	* Selects all records.
-	*/
+	function toggleAll(force) {
+		if (!selection.value.all || force === true) selectAll();
+		else deselectAll();
+	}
 	function selectAll() {
 		selection.value.all = true;
 		selection.value.only.clear();
 		selection.value.except.clear();
 	}
-	/**
-	* Deselects all records.
-	*/
 	function deselectAll() {
 		selection.value.all = false;
 		selection.value.only.clear();
 		selection.value.except.clear();
 	}
-	/**
-	* Selects the given records.
-	*/
 	function select(...records) {
 		records.forEach((record) => selection.value.except.delete(record));
 		records.forEach((record) => selection.value.only.add(record));
 	}
-	/**
-	* Deselects the given records.
-	*/
 	function deselect(...records) {
 		records.forEach((record) => selection.value.except.add(record));
 		records.forEach((record) => selection.value.only.delete(record));
 	}
-	/**
-	* Toggles selection for the given records.
-	*/
 	function toggle(record, force) {
 		if (selected(record) || force === false) return deselect(record);
 		if (!selected(record) || force === true) return select(record);
 	}
-	/**
-	* Checks whether the given record is selected.
-	*/
 	function selected(record) {
 		if (selection.value.all) return !selection.value.except.has(record);
 		return selection.value.only.has(record);
 	}
-	/**
-	* Checks whether all records are selected.
-	*/
 	const allSelected = computed(() => {
 		return selection.value.all && selection.value.except.size === 0;
 	});
-	/**
-	* Binds a checkbox's properties.
-	*/
+	const anySelected = computed(() => {
+		return selection.value.all || selection.value.only.size > 0;
+	});
 	function bindCheckbox(key) {
 		return {
 			onChange: (event) => {
@@ -1215,6 +1139,8 @@ function useBulkSelect() {
 	}
 	return {
 		allSelected,
+		anySelected,
+		toggleAll,
 		selectAll,
 		deselectAll,
 		select,
@@ -1225,44 +1151,31 @@ function useBulkSelect() {
 		bindCheckbox
 	};
 }
-
-//#endregion
-//#region src/composables/query-parameters.ts
-/**
-* Access reactive query parameters.
-*
-* @see https://hybridly.dev/api/utils/use-query-parameters.html
-*/
 function useQueryParameters() {
-	const state$1 = reactive({});
+	const state = reactive({});
 	function updateState() {
 		const params = new URLSearchParams(window.location.search);
-		const unusedKeys = new Set(Object.keys(state$1));
+		const unusedKeys = new Set(Object.keys(state));
 		for (const key of params.keys()) {
 			const paramsForKey = params.getAll(key);
-			state$1[key] = paramsForKey.length > 1 ? paramsForKey : params.get(key) || "";
+			state[key] = paramsForKey.length > 1 ? paramsForKey : params.get(key) || "";
 			unusedKeys.delete(key);
 		}
-		Array.from(unusedKeys).forEach((key) => delete state$1[key]);
+		Array.from(unusedKeys).forEach((key) => delete state[key]);
 	}
 	updateState();
 	registerHook$1("navigated", updateState);
-	return state$1;
+	return state;
 }
-/**
-* Makes the specified query parameter reactive.
-*
-* @see https://hybridly.dev/api/utils/use-query-parameter.html
-*/
 function useQueryParameter(name, options = {}) {
 	const query = useQueryParameters();
-	const transform = (value$1) => {
-		if (options.transform === "bool") return value$1 === true || value$1 === "true" || value$1 === "1" || value$1 === "yes";
-		else if (options.transform === "number") return Number(value$1);
-		else if (options.transform === "string") return String(value$1);
-		else if (options.transform === "date") return new Date(value$1);
-		else if (typeof options.transform === "function") return options.transform(value$1);
-		return value$1;
+	const transform = (value) => {
+		if (options.transform === "bool") return value === true || value === "true" || value === "1" || value === "yes";
+		else if (options.transform === "number") return Number(value);
+		else if (options.transform === "string") return String(value);
+		else if (options.transform === "date") return new Date(value);
+		else if (typeof options.transform === "function") return options.transform(value);
+		return value;
 	};
 	const value = ref();
 	watch(query, () => {
@@ -1273,58 +1186,65 @@ function useQueryParameter(name, options = {}) {
 	});
 	return value;
 }
-
-//#endregion
-//#region src/composables/table.ts
-/**
-* Provides utilities for working with tables.
-*/
-function useTable(props, key, defaultOptions = {}) {
-	const table = computed(() => props[key]);
+function useTable(input, defaultOptions = {}) {
+	const table = computed(() => toValue(input));
 	const bulk = useBulkSelect();
-	const refinements = useRefinements(toReactive(table), "refinements", defaultOptions);
-	/**
-	* Gets additionnal data to send with the request.
-	*/
-	function getAdditionnalData() {
+	const refinements = useRefinements(() => toValue(input).refinements, defaultOptions);
+	function getAdditionnalData(options) {
 		const data = {};
+		options = {
+			...defaultOptions,
+			...options
+		};
 		if (defaultOptions?.includeQueryParameters !== false) Object.assign(data, structuredClone(toRaw(useQueryParameters())));
-		if (defaultOptions?.data) Object.assign(data, defaultOptions.data);
+		if (options?.data) Object.assign(data, options.data);
 		return data;
 	}
-	/**
-	* Gets the actual identifier for a record.
-	*/
 	function getRecordKey(record) {
 		if (typeof record !== "object") return record;
 		if (Reflect.has(record, "__hybridId")) return Reflect.get(record, "__hybridId");
-		return Reflect.get(record, table.value.keyName).value;
+		if (!table.value.keyName) throw new Error("Record key cannot be fetched because the table has no defined key.");
+		const value = Reflect.get(record, table.value.keyName);
+		if (typeof value === "object" && Reflect.has(value, "value")) return value.value;
+		return value;
+	}
+	function resolveInlineAction(action) {
+		if (typeof action !== "string") return action;
+		return table.value.inlineActions.find(({ name }) => name === action);
+	}
+	function resolveBulkAction(action) {
+		if (typeof action !== "string") return action;
+		return table.value.bulkActions.find(({ name }) => name === action);
 	}
-	function getActionName(action) {
-		return typeof action === "string" ? action : action.name;
+	function getActionUrl(action, table) {
+		if (action.url) return action.url;
+		return route$1(table.endpoint);
 	}
-	/**
-	* Executes the given inline action by name.
-	*/
-	async function executeInlineAction(action, record) {
+	async function executeInlineAction(action, options) {
+		const resolvedAction = resolveInlineAction(action);
+		if (!resolvedAction) {
+			console.warn(`Action [${action}] is not defined`);
+			return;
+		}
 		return await router$1.navigate({
 			method: "post",
-			url: route$1(table.value.endpoint),
+			url: getActionUrl(resolvedAction, table.value),
 			preserveState: true,
 			data: {
-				...getAdditionnalData(),
+				...getAdditionnalData(options),
 				type: "action:inline",
-				action: getActionName(action),
+				action: resolvedAction.name,
 				tableId: table.value.id,
-				recordId: getRecordKey(record)
+				recordId: getRecordKey(options.record)
 			}
 		});
 	}
-	/**
-	* Executes the given bulk action for the given records.
-	*/
-	async function executeBulkAction(action, options) {
-		const actionName = getActionName(action);
+	async function executeBulkAction(action, options = {}) {
+		const resolvedAction = resolveBulkAction(action);
+		if (!resolvedAction) {
+			console.warn(`Action [${action}] is not defined`);
+			return;
+		}
 		const filterParameters = refinements.currentFilters().reduce((carry, filter) => {
 			return {
 				...carry,
@@ -1333,12 +1253,12 @@ function useTable(props, key, defaultOptions = {}) {
 		}, {});
 		return await router$1.navigate({
 			method: "post",
-			url: route$1(table.value.endpoint),
+			url: getActionUrl(resolvedAction, table.value),
 			preserveState: true,
 			data: {
-				...getAdditionnalData(),
+				...getAdditionnalData(options),
 				type: "action:bulk",
-				action: actionName,
+				action: resolvedAction.name,
 				tableId: table.value.id,
 				all: bulk.selection.value.all,
 				only: [...bulk.selection.value.only],
@@ -1346,7 +1266,7 @@ function useTable(props, key, defaultOptions = {}) {
 				[refinements.filtersKey.value]: filterParameters
 			},
 			hooks: { after: () => {
-				if (options?.deselect === true || table.value.bulkActions.find(({ name }) => name === actionName)?.deselect !== false) bulk.deselectAll();
+				if (options?.deselect === true || resolvedAction.deselect !== false) bulk.deselectAll();
 			} }
 		});
 	}
@@ -1358,17 +1278,19 @@ function useTable(props, key, defaultOptions = {}) {
 		isPageSelected: computed(() => table.value.records.length > 0 && table.value.records.every((record) => bulk.selected(getRecordKey(record)))),
 		isSelected: (record) => bulk.selected(getRecordKey(record)),
 		allSelected: bulk.allSelected,
+		anySelected: bulk.anySelected,
 		selection: bulk.selection,
-		bindCheckbox: (key$1) => bulk.bindCheckbox(key$1),
-		toggle: (record) => bulk.toggle(getRecordKey(record)),
+		bindCheckbox: (key) => bulk.bindCheckbox(key),
+		toggle: (record, force) => bulk.toggle(getRecordKey(record), force),
+		toggleAll: (force) => bulk.toggleAll(force),
 		select: (record) => bulk.select(getRecordKey(record)),
 		deselect: (record) => bulk.deselect(getRecordKey(record)),
 		inlineActions: computed(() => table.value.inlineActions.map((action) => ({
-			execute: (record) => executeInlineAction(action.name, record),
+			execute: (record) => executeInlineAction(action, { record }),
 			...action
 		}))),
 		bulkActions: computed(() => table.value.bulkActions.map((action) => ({
-			execute: (options) => executeBulkAction(action.name, options),
+			execute: (options) => executeBulkAction(action, options),
 			...action
 		}))),
 		executeInlineAction,
@@ -1379,31 +1301,36 @@ function useTable(props, key, defaultOptions = {}) {
 			isSorting: (direction) => refinements.isSorting(column.name, direction),
 			applyFilter: (value, options) => refinements.applyFilter(column.name, value, options),
 			clearFilter: (options) => refinements.clearFilter(column.name, options),
-			isSortable: !!refinements.sorts.find((sort) => sort.name === column.name),
-			isFilterable: !!refinements.filters.find((filters) => filters.name === column.name)
+			isSortable: !!refinements.sorts.value.find((sort) => sort.name === column.name),
+			isFilterable: !!refinements.filters.value.find((filters) => filters.name === column.name)
 		}))),
-		data: computed(() => table.value.records.map((record) => {
-			return Object.fromEntries(Object.entries(record).map(([key$1, value]) => [key$1, value.value]));
+		data: computed(() => {
+			return table.value.records.map((record) => {
+				const entries = Object.entries(record).map(([key, value]) => [key, value.value]).filter(([key]) => key !== "__hybridId");
+				if (entries.length === 0) return;
+				return Object.fromEntries(entries);
+			}).filter(Boolean);
+		}),
+		records: computed(() => table.value.records.map((record) => {
+			const entries = Object.entries(record).map(([key, value]) => [key, value.value]).filter(([key]) => key !== "__hybridId");
+			return {
+				record: entries.length > 0 ? Object.fromEntries(entries) : {},
+				key: getRecordKey(record),
+				execute: (action) => executeInlineAction(action, { record: getRecordKey(record) }),
+				actions: table.value.inlineActions.map((action) => ({
+					...action,
+					execute: () => executeInlineAction(action.name, { record: getRecordKey(record) })
+				})),
+				select: () => bulk.select(getRecordKey(record)),
+				deselect: () => bulk.deselect(getRecordKey(record)),
+				toggle: (force) => bulk.toggle(getRecordKey(record), force),
+				selected: bulk.selected(getRecordKey(record)),
+				value: (column) => record[typeof column === "string" ? column : column.name].value,
+				extra: (column, path) => getByPath(record[typeof column === "string" ? column : column.name].extra, path)
+			};
 		})),
-		records: computed(() => table.value.records.map((record) => ({
-			record: Object.values(record).map((record$1) => record$1.value),
-			key: getRecordKey(record),
-			execute: (action) => executeInlineAction(getActionName(action), getRecordKey(record)),
-			actions: table.value.inlineActions.map((action) => ({
-				...action,
-				execute: () => executeInlineAction(action.name, getRecordKey(record))
-			})),
-			select: () => bulk.select(getRecordKey(record)),
-			deselect: () => bulk.deselect(getRecordKey(record)),
-			toggle: (force) => bulk.toggle(getRecordKey(record), force),
-			selected: bulk.selected(getRecordKey(record)),
-			value: (column) => record[typeof column === "string" ? column : column.name].value,
-			extra: (column, path) => getByPath(record[typeof column === "string" ? column : column.name].extra, path)
-		}))),
-		paginator: computed(() => table.value.paginator),
+		paginator: computed(() => createPaginator(table.value.paginator, defaultOptions)),
 		...refinements
 	});
 }
-
-//#endregion
-export { RouterLink, can, initializeHybridly, registerHook, route, router, setProperty, useBackForward, useBulkSelect, useDialog, useForm, useHistoryState, useProperties, useProperty, useQueryParameter, useQueryParameters, useRefinements, useRoute, useTable };
+export { RouterLink, can, createPaginator, initializeHybridly, isBooleanFilter, isCallbackFilter, isDateFilter, isSelectFilter, isTernaryFilter, isTextFilter, isTrashedFilter, registerHook, route, router, setProperty, useBackForward, useBulkSelect, useDialog, useForm, useHistoryState, useProperties, useProperty, useQueryParameter, useQueryParameters, useRefinements, useRoute, useTable };