@stsdti/funky-ui-kit 1.8.4 → 1.8.6

package/dist/funky-ui-kit.esm.js

@@ -67832,7 +67832,7 @@ function normalizePosition(position) {
 function startTimer(item) {
 	item.startedAt = Date.now();
 	item.timer = setTimeout(() => {
-		remove(item.id);
+		remove$1(item.id);
 	}, item.remaining);
 }
 function open(options = {}) {
@@ -67893,7 +67893,7 @@ function recomputeHeights() {
 		if (element && element.style.overflow !== "hidden") setHeight(id, element.offsetHeight);
 	});
 }
-async function remove(idOrItem) {
+async function remove$1(idOrItem) {
 	const id = typeof idOrItem === "object" ? idOrItem?.id : idOrItem;
 	if (!toastState.toasts[id]) return;
 	const item = toastState.toasts[id];
@@ -68080,7 +68080,7 @@ var ToastUtils = class {
 		return open(options);
 	}
 	static remove(idOrItem) {
-		remove(idOrItem);
+		remove$1(idOrItem);
 	}
 	static removeAll() {
 		removeAll();
@@ -68409,7 +68409,7 @@ var trim = (str) => str.trim ? str.trim() : str.replace(/^[\s\uFEFF\xA0]+|[\s\uF
 * @param {Boolean} [allOwnKeys = false]
 * @returns {any}
 */
-function forEach$1(obj, fn, { allOwnKeys = false } = {}) {
+function forEach$2(obj, fn, { allOwnKeys = false } = {}) {
 	if (obj === null || typeof obj === "undefined") return;
 	let i;
 	let l;
@@ -68469,7 +68469,7 @@ function merge$1() {
 		else if (isArray$3(val)) result[targetKey] = val.slice();
 		else result[targetKey] = val;
 	};
-	for (let i = 0, l = arguments.length; i < l; i++) arguments[i] && forEach$1(arguments[i], assignValue);
+	for (let i = 0, l = arguments.length; i < l; i++) arguments[i] && forEach$2(arguments[i], assignValue);
 	return result;
 }
 /**
@@ -68483,7 +68483,7 @@ function merge$1() {
 * @returns {Object} The resulting value of object a
 */
 var extend = (a, b, thisArg, { allOwnKeys } = {}) => {
-	forEach$1(b, (val, key) => {
+	forEach$2(b, (val, key) => {
 		if (thisArg && isFunction(val)) a[key] = bind(val, thisArg);
 		else a[key] = val;
 	}, { allOwnKeys });
@@ -68638,7 +68638,7 @@ var isRegExp = kindOfTest("RegExp");
 var reduceDescriptors = (obj, reducer) => {
 	const descriptors = Object.getOwnPropertyDescriptors(obj);
 	const reducedDescriptors = {};
-	forEach$1(descriptors, (descriptor, name) => {
+	forEach$2(descriptors, (descriptor, name) => {
 		let ret;
 		if ((ret = reducer(descriptor, name, obj)) !== false) reducedDescriptors[name] = ret || descriptor;
 	});
@@ -68699,7 +68699,7 @@ var toJSONObject = (obj) => {
 			if (!("toJSON" in source)) {
 				stack[i] = source;
 				const target = isArray$3(source) ? [] : {};
-				forEach$1(source, (value, key) => {
+				forEach$2(source, (value, key) => {
 					const reducedValue = visit(value, i + 1);
 					!isUndefined(reducedValue) && (target[key] = reducedValue);
 				});
@@ -68750,7 +68750,7 @@ var utils_default = {
 	isURLSearchParams,
 	isTypedArray,
 	isFileList,
-	forEach: forEach$1,
+	forEach: forEach$2,
 	merge: merge$1,
 	extend,
 	trim,
@@ -73228,22 +73228,23 @@ var AppInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default({
 	}),
 	emits: /*@__PURE__*/ mergeModels(["onSubmit", "blur"], ["update:modelValue"]),
 	setup(__props, { expose: __expose, emit: __emit }) {
-		useSlots();
+		const slots = useSlots();
 		let modelValue = useModel(__props, "modelValue");
 		const props = __props;
 		const emits = __emit;
+		const hasLeftIcon = computed(() => !!props.leftIcon || !!slots.iconLeft);
 		const clearStyle = computed(() => ({ "margin-right": isTypeNumber.value ? "2px" : "8px" }));
 		const inputClass = computed(() => ({
 			"input-empty no-spinner flex-1": true,
-			"pl-15": !props.leftIcon
+			"pl-15": !hasLeftIcon.value
 		}));
 		const inputContainerClass = computed(() => {
 			return {
 				"flex-center-vertical form-control": true,
 				"disabled-element": props.disabled,
-				"p-0": !props.leftIcon,
-				"no-padding-right": !!props.leftIcon,
-				"gap-1": !!props.leftIcon
+				"p-0": !hasLeftIcon.value,
+				"no-padding-right": !!hasLeftIcon.value,
+				"gap-1": !!hasLeftIcon.value
 			};
 		});
 		const isTypeNumber = computed(() => props.type === "number");
@@ -73289,7 +73290,7 @@ var AppInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default({
 			return openBlock(), createBlock(AppFormElement_default, normalizeProps(guardReactiveProps(unref(formElementProps))), createSlots({
 				"help-block": withCtx(() => [renderSlot(_ctx.$slots, "help-block", {}, void 0, true)]),
 				default: withCtx(() => [createElementVNode("div", { class: normalizeClass(inputContainerClass.value) }, [
-					__props.leftIcon ? (openBlock(), createElementBlock("div", _hoisted_1$59, [createVNode(_component_app_icon, { value: __props.leftIcon }, null, 8, ["value"])])) : createCommentVNode("", true),
+					hasLeftIcon.value ? (openBlock(), createElementBlock("div", _hoisted_1$59, [renderSlot(_ctx.$slots, "iconLeft", {}, () => [createVNode(_component_app_icon, { value: __props.leftIcon }, null, 8, ["value"])], true)])) : createCommentVNode("", true),
 					withDirectives(createElementVNode("input", mergeProps({
 						ref_key: "inputElement",
 						ref: inputElement,
@@ -73327,7 +73328,7 @@ var AppInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default({
 			})]), 1040);
 		};
 	}
-}, [["__scopeId", "data-v-5dd82e85"]]);
+}, [["__scopeId", "data-v-7a5068b0"]]);
 //#endregion
 //#region src/components/small/app-link/AppLink.vue
 var _hoisted_1$58 = {
@@ -77908,7 +77909,7 @@ function addMonths(date, amount, options) {
 *   .toString();
 * //=> "2017-06-15T15:29:20"
 */
-function add(date, duration, options) {
+function add$1(date, duration, options) {
 	const { years = 0, months = 0, weeks = 0, days = 0, hours = 0, minutes = 0, seconds = 0 } = duration;
 	const _date = toDate(date, options?.in);
 	const dateWithMonths = months || years ? addMonths(_date, months + years * 12) : _date;
@@ -86378,7 +86379,7 @@ var St = {
 				return !m.validateTime(e, r);
 			}
 			return !1;
-		}, K = computed(() => (e) => !Y(+m[e] + +D.value[`${e}Increment`], e) || G(e, !0) || m.disabled), J = computed(() => (e) => !Y(m[e] - +D.value[`${e}Increment`], e) || G(e, !1) || m.disabled), se = (e, t) => add(set$2(h(), e), t), ce = (e, t) => sub(set$2(h(), e), t), le = computed(() => ({
+		}, K = computed(() => (e) => !Y(+m[e] + +D.value[`${e}Increment`], e) || G(e, !0) || m.disabled), J = computed(() => (e) => !Y(m[e] - +D.value[`${e}Increment`], e) || G(e, !1) || m.disabled), se = (e, t) => add$1(set$2(h(), e), t), ce = (e, t) => sub(set$2(h(), e), t), le = computed(() => ({
 			"dp--time-col": !0,
 			"dp--time-col-block": !D.value.timePickerInline,
 			"dp--time-col-reg-block": !D.value.enableSeconds && D.value.is24 && !D.value.timePickerInline,
@@ -87432,7 +87433,7 @@ var St = {
 		};
 	}, me = (e = o(), t = !1) => {
 		if ((!v.value.count || !v.value.static || t) && G(0, getMonth(e), getYear(e), t), v.value.count && (!p.value || fe() || !v.value.solo) && (!v.value.solo || t)) for (let e = 1; e < v.value.count; e++) {
-			let t = add(set$2(o(), {
+			let t = add$1(set$2(o(), {
 				month: u.value(e - 1),
 				year: d.value(e - 1)
 			}), { months: 1 });
@@ -125164,8 +125165,9 @@ var _sfc_main$63 = {
 		"download",
 		"removed"
 	],
-	setup(__props) {
+	setup(__props, { emit: __emit }) {
 		const props = __props;
+		const fileUploadContext = inject("fileUploadContext", null);
 		const { getFilename, getFileTypeClass, getStatus, getExtension } = AppFileNewUtils_default;
 		const getFileStatusLabel = (file) => getStatus(file)?.label;
 		const actions = [
@@ -125185,6 +125187,7 @@ var _sfc_main$63 = {
 				emit: "removed"
 			}
 		];
+		const passthroughSlots = computed(() => Object.keys(useSlots()).filter((slotName) => !["status", "actions"].includes(slotName)));
 		const gridStyles = computed(() => ({
 			display: "grid",
 			gridTemplateColumns: `repeat(${props.columns}, minmax(0, 1fr))`,
@@ -125213,22 +125216,25 @@ var _sfc_main$63 = {
 						class: "file-name"
 					}, null, 8, ["value"]), createElementVNode("div", _hoisted_2$4, [
 						createElementVNode("span", null, toDisplayString(file?.size ? (file.size / (1024 * 1024)).toFixed(2) + " MB" : "N/A"), 1),
-						createElementVNode("span", { class: normalizeClass(getFileStatusClass(file)) }, [createVNode(_component_app_icon, {
+						renderSlot(_ctx.$slots, "status", { file }, () => [createElementVNode("span", { class: normalizeClass(getFileStatusClass(file)) }, [createVNode(_component_app_icon, {
 							value: getFileStatusIcon(file),
 							class: "status-icon"
-						}, null, 8, ["value"]), createTextVNode(" " + toDisplayString(getFileStatusLabel(file)), 1)], 2),
-						(openBlock(true), createElementBlock(Fragment, null, renderList(Object.keys(_ctx.$slots), (slotName) => {
+						}, null, 8, ["value"]), createTextVNode(" " + toDisplayString(getFileStatusLabel(file)), 1)], 2)]),
+						(openBlock(true), createElementBlock(Fragment, null, renderList(passthroughSlots.value, (slotName) => {
 							return renderSlot(_ctx.$slots, slotName, {
 								key: slotName,
-								file
+								file,
+								fileUpload: _ctx.fileUpload
 							});
 						}), 128))
 					])]),
 					unref(getStatus)(file) === unref(fileStatus).uploaded ? (openBlock(), createElementBlock("div", _hoisted_3$3, [(openBlock(), createElementBlock(Fragment, null, renderList(actions, (action) => {
 						return renderSlot(_ctx.$slots, action.name, {
 							key: action.name,
+							action,
 							file,
-							index
+							index,
+							fileUploadContext: unref(fileUploadContext)
 						}, () => [createVNode(_component_app_button, {
 							disabled: action.name === "removed" && __props.disabled,
 							class: "btn-transparent",
@@ -125392,6 +125398,7 @@ var _sfc_main$16 = {
 		const emit = __emit;
 		const previewModal = ref(null);
 		const fileUpload = useFileUpload(modelValue, props, emit);
+		provide("fileUploadContext", fileUpload);
 		const fileInput = fileUpload.fileInput;
 		const appFileNewUtils = AppFileNewUtils_default;
 		const appFileNewRepository = AppFileNewRepository_default(props);
@@ -126408,6 +126415,734 @@ var _sfc_main$58 = {
 	}
 };
 //#endregion
+//#region node_modules/@formkit/auto-animate/index.mjs
+/**
+* A set of all the parents currently being observe. This is the only non weak
+* registry.
+*/
+var parents = /* @__PURE__ */ new Set();
+/**
+* Element coordinates that is constantly kept up to date.
+*/
+var coords = /* @__PURE__ */ new WeakMap();
+/**
+* Siblings of elements that have been removed from the dom.
+*/
+var siblings = /* @__PURE__ */ new WeakMap();
+/**
+* Animations that are currently running.
+*/
+var animations = /* @__PURE__ */ new WeakMap();
+/**
+* A map of existing intersection observers used to track element movements.
+*/
+var intersections = /* @__PURE__ */ new WeakMap();
+/**
+* A map of existing mutation observers used to track element movements.
+*/
+var mutationObservers = /* @__PURE__ */ new WeakMap();
+/**
+* Intervals for automatically checking the position of elements occasionally.
+*/
+var intervals = /* @__PURE__ */ new WeakMap();
+/**
+* The configuration options for each group of elements.
+*/
+var options = /* @__PURE__ */ new WeakMap();
+/**
+* Debounce counters by id, used to debounce calls to update positions.
+*/
+var debounces = /* @__PURE__ */ new WeakMap();
+/**
+* All parents that are currently enabled are tracked here.
+*/
+var enabled = /* @__PURE__ */ new WeakSet();
+/**
+* The document used to calculate transitions.
+*/
+var root;
+/**
+* The root’s XY scroll positions.
+*/
+var scrollX = 0;
+var scrollY = 0;
+/**
+* Used to sign an element as the target.
+*/
+var TGT = "__aa_tgt";
+/**
+* Used to sign an element as being part of a removal.
+*/
+var DEL = "__aa_del";
+/**
+* Used to sign an element as being "new". When an element is removed from the
+* dom, but may cycle back in we can sign it with new to ensure the next time
+* it is recognized we consider it new.
+*/
+var NEW = "__aa_new";
+/**
+* Callback for handling all mutations.
+* @param mutations - A mutation list
+*/
+var handleMutations = (mutations) => {
+	const elements = getElements(mutations);
+	if (elements) elements.forEach((el) => animate(el));
+};
+/**
+*
+* @param entries - Elements that have been resized.
+*/
+var handleResizes = (entries) => {
+	entries.forEach((entry) => {
+		if (entry.target === root) updateAllPos();
+		if (coords.has(entry.target)) updatePos(entry.target);
+	});
+};
+/**
+* Determine if an element is fully outside of the current viewport.
+* @param el - Element to test
+*/
+function isOffscreen(el) {
+	const rect = el.getBoundingClientRect();
+	const vw = (root === null || root === void 0 ? void 0 : root.clientWidth) || 0;
+	const vh = (root === null || root === void 0 ? void 0 : root.clientHeight) || 0;
+	return rect.bottom < 0 || rect.top > vh || rect.right < 0 || rect.left > vw;
+}
+/**
+* Observe this elements position.
+* @param el - The element to observe the position of.
+*/
+function observePosition(el) {
+	const oldObserver = intersections.get(el);
+	oldObserver === null || oldObserver === void 0 || oldObserver.disconnect();
+	let rect = coords.get(el);
+	let invocations = 0;
+	const buffer = 5;
+	if (!rect) {
+		rect = getCoords(el);
+		coords.set(el, rect);
+	}
+	const { offsetWidth, offsetHeight } = root;
+	const rootMargin = [
+		rect.top - buffer,
+		offsetWidth - (rect.left + buffer + rect.width),
+		offsetHeight - (rect.top + buffer + rect.height),
+		rect.left - buffer
+	].map((px) => `${-1 * Math.floor(px)}px`).join(" ");
+	const observer = new IntersectionObserver(() => {
+		++invocations > 1 && updatePos(el);
+	}, {
+		root,
+		threshold: 1,
+		rootMargin
+	});
+	observer.observe(el);
+	intersections.set(el, observer);
+}
+/**
+* Update the exact position of a given element.
+* @param el - An element to update the position of.
+* @param debounce - Whether or not to debounce the update. After an animation is finished, it should update as soon as possible to prevent flickering on quick toggles.
+*/
+function updatePos(el, debounce = true) {
+	clearTimeout(debounces.get(el));
+	const optionsOrPlugin = getOptions(el);
+	const delay = debounce ? isPlugin(optionsOrPlugin) ? 500 : optionsOrPlugin.duration : 0;
+	debounces.set(el, setTimeout(async () => {
+		const currentAnimation = animations.get(el);
+		try {
+			await (currentAnimation === null || currentAnimation === void 0 ? void 0 : currentAnimation.finished);
+			coords.set(el, getCoords(el));
+			observePosition(el);
+		} catch {}
+	}, delay));
+}
+/**
+* Updates all positions that are currently being tracked.
+*/
+function updateAllPos() {
+	clearTimeout(debounces.get(root));
+	debounces.set(root, setTimeout(() => {
+		parents.forEach((parent) => forEach(parent, (el) => lowPriority(() => updatePos(el))));
+	}, 100));
+}
+/**
+* Its possible for a quick scroll or other fast events to get past the
+* intersection observer, so occasionally we need want "cold-poll" for the
+* latests and greatest position. We try to do this in the most non-disruptive
+* fashion possible. First we only do this ever couple seconds, staggard by a
+* random offset.
+* @param el - Element
+*/
+function poll(el) {
+	setTimeout(() => {
+		intervals.set(el, setInterval(() => lowPriority(updatePos.bind(null, el)), 2e3));
+	}, Math.round(2e3 * Math.random()));
+}
+/**
+* Perform some operation that is non critical at some point.
+* @param callback
+*/
+function lowPriority(callback) {
+	if (typeof requestIdleCallback === "function") requestIdleCallback(() => callback());
+	else requestAnimationFrame(() => callback());
+}
+/**
+* A resize observer, responsible for recalculating elements on resize.
+*/
+var resize;
+/**
+* Ensure the browser is supported.
+*/
+var supportedBrowser = typeof window !== "undefined" && "ResizeObserver" in window;
+/**
+* If this is in a browser, initialize our Web APIs
+*/
+if (supportedBrowser) {
+	root = document.documentElement;
+	new MutationObserver(handleMutations);
+	resize = new ResizeObserver(handleResizes);
+	window.addEventListener("scroll", () => {
+		scrollY = window.scrollY;
+		scrollX = window.scrollX;
+	});
+	resize.observe(root);
+}
+/**
+* Retrieves all the elements that may have been affected by the last mutation
+* including ones that have been removed and are no longer in the DOM.
+* @param mutations - A mutation list.
+* @returns
+*/
+function getElements(mutations) {
+	if (mutations.reduce((nodes, mutation) => {
+		return [
+			...nodes,
+			...Array.from(mutation.addedNodes),
+			...Array.from(mutation.removedNodes)
+		];
+	}, []).every((node) => node.nodeName === "#comment")) return false;
+	return mutations.reduce((elements, mutation) => {
+		if (elements === false) return false;
+		if (mutation.target instanceof Element) {
+			target(mutation.target);
+			if (!elements.has(mutation.target)) {
+				elements.add(mutation.target);
+				for (let i = 0; i < mutation.target.children.length; i++) {
+					const child = mutation.target.children.item(i);
+					if (!child) continue;
+					if (DEL in child) return false;
+					target(mutation.target, child);
+					elements.add(child);
+				}
+			}
+			if (mutation.removedNodes.length) for (let i = 0; i < mutation.removedNodes.length; i++) {
+				const child = mutation.removedNodes[i];
+				if (DEL in child) return false;
+				if (child instanceof Element) {
+					elements.add(child);
+					target(mutation.target, child);
+					siblings.set(child, [mutation.previousSibling, mutation.nextSibling]);
+				}
+			}
+		}
+		return elements;
+	}, /* @__PURE__ */ new Set());
+}
+/**
+* Assign the target to an element.
+* @param el - The root element
+* @param child
+*/
+function target(el, child) {
+	if (!child && !(TGT in el)) Object.defineProperty(el, TGT, { value: el });
+	else if (child && !(TGT in child)) Object.defineProperty(child, TGT, { value: el });
+}
+/**
+* Determines what kind of change took place on the given element and then
+* performs the proper animation based on that.
+* @param el - The specific element to animate.
+*/
+function animate(el) {
+	var _a, _b;
+	const isMounted = el.isConnected;
+	const preExisting = coords.has(el);
+	if (isMounted && siblings.has(el)) siblings.delete(el);
+	if (((_a = animations.get(el)) === null || _a === void 0 ? void 0 : _a.playState) !== "finished") (_b = animations.get(el)) === null || _b === void 0 || _b.cancel();
+	if (NEW in el) add(el);
+	else if (preExisting && isMounted) remain(el);
+	else if (preExisting && !isMounted) remove(el);
+	else add(el);
+}
+/**
+* Removes all non-digits from a string and casts to a number.
+* @param str - A string containing a pixel value.
+* @returns
+*/
+function raw(str) {
+	return Number(str.replace(/[^0-9.\-]/g, ""));
+}
+/**
+* Get the scroll offset of elements
+* @param el - Element
+* @returns
+*/
+function getScrollOffset(el) {
+	let p = el.parentElement;
+	while (p) {
+		if (p.scrollLeft || p.scrollTop) return {
+			x: p.scrollLeft,
+			y: p.scrollTop
+		};
+		p = p.parentElement;
+	}
+	return {
+		x: 0,
+		y: 0
+	};
+}
+/**
+* Get the coordinates of elements adjusted for scroll position.
+* @param el - Element
+* @returns
+*/
+function getCoords(el) {
+	const rect = el.getBoundingClientRect();
+	const { x, y } = getScrollOffset(el);
+	return {
+		top: rect.top + y,
+		left: rect.left + x,
+		width: rect.width,
+		height: rect.height
+	};
+}
+/**
+* Returns the width/height that the element should be transitioned between.
+* This takes into account box-sizing.
+* @param el - Element being animated
+* @param oldCoords - Old set of Coordinates coordinates
+* @param newCoords - New set of Coordinates coordinates
+* @returns
+*/
+function getTransitionSizes(el, oldCoords, newCoords) {
+	let widthFrom = oldCoords.width;
+	let heightFrom = oldCoords.height;
+	let widthTo = newCoords.width;
+	let heightTo = newCoords.height;
+	const styles = getComputedStyle(el);
+	if (styles.getPropertyValue("box-sizing") === "content-box") {
+		const paddingY = raw(styles.paddingTop) + raw(styles.paddingBottom) + raw(styles.borderTopWidth) + raw(styles.borderBottomWidth);
+		const paddingX = raw(styles.paddingLeft) + raw(styles.paddingRight) + raw(styles.borderRightWidth) + raw(styles.borderLeftWidth);
+		widthFrom -= paddingX;
+		widthTo -= paddingX;
+		heightFrom -= paddingY;
+		heightTo -= paddingY;
+	}
+	return [
+		widthFrom,
+		widthTo,
+		heightFrom,
+		heightTo
+	].map(Math.round);
+}
+/**
+* Retrieves animation options for the current element.
+* @param el - Element to retrieve options for.
+* @returns
+*/
+function getOptions(el) {
+	return TGT in el && options.has(el[TGT]) ? options.get(el[TGT]) : {
+		duration: 250,
+		easing: "ease-in-out"
+	};
+}
+/**
+* Returns the target of a given animation (generally the parent).
+* @param el - An element to check for a target
+* @returns
+*/
+function getTarget(el) {
+	if (TGT in el) return el[TGT];
+}
+/**
+* Checks if animations are enabled or disabled for a given element.
+* @param el - Any element
+* @returns
+*/
+function isEnabled(el) {
+	const target = getTarget(el);
+	return target ? enabled.has(target) : false;
+}
+/**
+* Iterate over the children of a given parent.
+* @param parent - A parent element
+* @param callback - A callback
+*/
+function forEach(parent, ...callbacks) {
+	callbacks.forEach((callback) => callback(parent, options.has(parent)));
+	for (let i = 0; i < parent.children.length; i++) {
+		const child = parent.children.item(i);
+		if (child) callbacks.forEach((callback) => callback(child, options.has(child)));
+	}
+}
+/**
+* Always return tuple to provide consistent interface
+*/
+function getPluginTuple(pluginReturn) {
+	if (Array.isArray(pluginReturn)) return pluginReturn;
+	return [pluginReturn];
+}
+/**
+* Determine if config is plugin
+*/
+function isPlugin(config) {
+	return typeof config === "function";
+}
+/**
+* The element in question is remaining in the DOM.
+* @param el - Element to flip
+* @returns
+*/
+function remain(el) {
+	const oldCoords = coords.get(el);
+	const newCoords = getCoords(el);
+	if (!isEnabled(el)) return coords.set(el, newCoords);
+	if (isOffscreen(el)) {
+		coords.set(el, newCoords);
+		observePosition(el);
+		return;
+	}
+	let animation;
+	if (!oldCoords) return;
+	const pluginOrOptions = getOptions(el);
+	if (typeof pluginOrOptions !== "function") {
+		let deltaLeft = oldCoords.left - newCoords.left;
+		let deltaTop = oldCoords.top - newCoords.top;
+		const deltaRight = oldCoords.left + oldCoords.width - (newCoords.left + newCoords.width);
+		if (oldCoords.top + oldCoords.height - (newCoords.top + newCoords.height) == 0) deltaTop = 0;
+		if (deltaRight == 0) deltaLeft = 0;
+		const [widthFrom, widthTo, heightFrom, heightTo] = getTransitionSizes(el, oldCoords, newCoords);
+		const start = { transform: `translate(${deltaLeft}px, ${deltaTop}px)` };
+		const end = { transform: `translate(0, 0)` };
+		if (widthFrom !== widthTo) {
+			start.width = `${widthFrom}px`;
+			end.width = `${widthTo}px`;
+		}
+		if (heightFrom !== heightTo) {
+			start.height = `${heightFrom}px`;
+			end.height = `${heightTo}px`;
+		}
+		animation = el.animate([start, end], {
+			duration: pluginOrOptions.duration,
+			easing: pluginOrOptions.easing
+		});
+	} else {
+		const [keyframes] = getPluginTuple(pluginOrOptions(el, "remain", oldCoords, newCoords));
+		animation = new Animation(keyframes);
+		animation.play();
+	}
+	animations.set(el, animation);
+	coords.set(el, newCoords);
+	animation.addEventListener("finish", updatePos.bind(null, el, false), { once: true });
+}
+/**
+* Adds the element with a transition.
+* @param el - Animates the element being added.
+*/
+function add(el) {
+	if (NEW in el) delete el[NEW];
+	const newCoords = getCoords(el);
+	coords.set(el, newCoords);
+	const pluginOrOptions = getOptions(el);
+	if (!isEnabled(el)) return;
+	if (isOffscreen(el)) {
+		observePosition(el);
+		return;
+	}
+	let animation;
+	if (typeof pluginOrOptions !== "function") animation = el.animate([
+		{
+			transform: "scale(.98)",
+			opacity: 0
+		},
+		{
+			transform: "scale(0.98)",
+			opacity: 0,
+			offset: .5
+		},
+		{
+			transform: "scale(1)",
+			opacity: 1
+		}
+	], {
+		duration: pluginOrOptions.duration * 1.5,
+		easing: "ease-in"
+	});
+	else {
+		const [keyframes] = getPluginTuple(pluginOrOptions(el, "add", newCoords));
+		animation = new Animation(keyframes);
+		animation.play();
+	}
+	animations.set(el, animation);
+	animation.addEventListener("finish", updatePos.bind(null, el, false), { once: true });
+}
+/**
+* Clean up after removing an element from the dom.
+* @param el - Element being removed
+* @param styles - Optional styles that should be removed from the element.
+*/
+function cleanUp(el, styles) {
+	var _a;
+	el.remove();
+	coords.delete(el);
+	siblings.delete(el);
+	animations.delete(el);
+	(_a = intersections.get(el)) === null || _a === void 0 || _a.disconnect();
+	setTimeout(() => {
+		if (DEL in el) delete el[DEL];
+		Object.defineProperty(el, NEW, {
+			value: true,
+			configurable: true
+		});
+		if (styles && el instanceof HTMLElement) for (const style in styles) el.style[style] = "";
+	}, 0);
+}
+/**
+* Animates the removal of an element.
+* @param el - Element to remove
+*/
+function remove(el) {
+	var _a;
+	if (!siblings.has(el) || !coords.has(el)) return;
+	const [prev, next] = siblings.get(el);
+	Object.defineProperty(el, DEL, {
+		value: true,
+		configurable: true
+	});
+	const finalX = window.scrollX;
+	const finalY = window.scrollY;
+	if (next && next.parentNode && next.parentNode instanceof Element) next.parentNode.insertBefore(el, next);
+	else if (prev && prev.parentNode) prev.parentNode.appendChild(el);
+	else (_a = getTarget(el)) === null || _a === void 0 || _a.appendChild(el);
+	if (!isEnabled(el)) return cleanUp(el);
+	const [top, left, width, height] = deletePosition(el);
+	const optionsOrPlugin = getOptions(el);
+	const oldCoords = coords.get(el);
+	if (finalX !== scrollX || finalY !== scrollY) adjustScroll(el, finalX, finalY, optionsOrPlugin);
+	let animation;
+	let styleReset = {
+		position: "absolute",
+		top: `${top}px`,
+		left: `${left}px`,
+		width: `${width}px`,
+		height: `${height}px`,
+		margin: "0",
+		pointerEvents: "none",
+		transformOrigin: "center",
+		zIndex: "100"
+	};
+	if (!isPlugin(optionsOrPlugin)) {
+		Object.assign(el.style, styleReset);
+		animation = el.animate([{
+			transform: "scale(1)",
+			opacity: 1
+		}, {
+			transform: "scale(.98)",
+			opacity: 0
+		}], {
+			duration: optionsOrPlugin.duration,
+			easing: "ease-out"
+		});
+	} else {
+		const [keyframes, options] = getPluginTuple(optionsOrPlugin(el, "remove", oldCoords));
+		if ((options === null || options === void 0 ? void 0 : options.styleReset) !== false) {
+			styleReset = (options === null || options === void 0 ? void 0 : options.styleReset) || styleReset;
+			Object.assign(el.style, styleReset);
+		}
+		animation = new Animation(keyframes);
+		animation.play();
+	}
+	animations.set(el, animation);
+	animation.addEventListener("finish", () => cleanUp(el, styleReset), { once: true });
+}
+/**
+* If the element being removed is at the very bottom of the page, and the
+* the page was scrolled into a space being "made available" by the element
+* that was removed, the page scroll will have jumped up some amount. We need
+* to offset the jump by the amount that the page was "automatically" scrolled
+* up. We can do this by comparing the scroll position before and after the
+* element was removed, and then offsetting by that amount.
+*
+* @param el - The element being deleted
+* @param finalX - The final X scroll position
+* @param finalY - The final Y scroll position
+* @param optionsOrPlugin - The options or plugin
+* @returns
+*/
+function adjustScroll(el, finalX, finalY, optionsOrPlugin) {
+	const scrollDeltaX = scrollX - finalX;
+	const scrollDeltaY = scrollY - finalY;
+	const scrollBefore = document.documentElement.style.scrollBehavior;
+	if (getComputedStyle(root).scrollBehavior === "smooth") document.documentElement.style.scrollBehavior = "auto";
+	window.scrollTo(window.scrollX + scrollDeltaX, window.scrollY + scrollDeltaY);
+	if (!el.parentElement) return;
+	const parent = el.parentElement;
+	let lastHeight = parent.clientHeight;
+	let lastWidth = parent.clientWidth;
+	const startScroll = performance.now();
+	function smoothScroll() {
+		requestAnimationFrame(() => {
+			if (!isPlugin(optionsOrPlugin)) {
+				const deltaY = lastHeight - parent.clientHeight;
+				const deltaX = lastWidth - parent.clientWidth;
+				if (startScroll + optionsOrPlugin.duration > performance.now()) {
+					window.scrollTo({
+						left: window.scrollX - deltaX,
+						top: window.scrollY - deltaY
+					});
+					lastHeight = parent.clientHeight;
+					lastWidth = parent.clientWidth;
+					smoothScroll();
+				} else document.documentElement.style.scrollBehavior = scrollBefore;
+			}
+		});
+	}
+	smoothScroll();
+}
+/**
+* Determines the position of the element being removed.
+* @param el - The element being deleted
+* @returns
+*/
+function deletePosition(el) {
+	var _a;
+	const oldCoords = coords.get(el);
+	const [width, , height] = getTransitionSizes(el, oldCoords, getCoords(el));
+	let offsetParent = el.parentElement;
+	while (offsetParent && (getComputedStyle(offsetParent).position === "static" || offsetParent instanceof HTMLBodyElement)) offsetParent = offsetParent.parentElement;
+	if (!offsetParent) offsetParent = document.body;
+	const parentStyles = getComputedStyle(offsetParent);
+	const parentCoords = !animations.has(el) || ((_a = animations.get(el)) === null || _a === void 0 ? void 0 : _a.playState) === "finished" ? getCoords(offsetParent) : coords.get(offsetParent);
+	return [
+		Math.round(oldCoords.top - parentCoords.top) - raw(parentStyles.borderTopWidth),
+		Math.round(oldCoords.left - parentCoords.left) - raw(parentStyles.borderLeftWidth),
+		width,
+		height
+	];
+}
+/**
+* A function that automatically adds animation effects to itself and its
+* immediate children. Specifically it adds effects for adding, moving, and
+* removing DOM elements.
+* @param el - A parent element to add animations to.
+* @param options - An optional object of options.
+*/
+function autoAnimate(el, config = {}) {
+	if (supportedBrowser && resize) {
+		if (!(window.matchMedia("(prefers-reduced-motion: reduce)").matches && !isPlugin(config) && !config.disrespectUserMotionPreference)) {
+			enabled.add(el);
+			if (getComputedStyle(el).position === "static") Object.assign(el.style, { position: "relative" });
+			forEach(el, updatePos, poll, (element) => resize === null || resize === void 0 ? void 0 : resize.observe(element));
+			if (isPlugin(config)) options.set(el, config);
+			else options.set(el, {
+				duration: 250,
+				easing: "ease-in-out",
+				...config
+			});
+			const mo = new MutationObserver(handleMutations);
+			mo.observe(el, { childList: true });
+			mutationObservers.set(el, mo);
+			parents.add(el);
+		}
+	}
+	return Object.freeze({
+		parent: el,
+		enable: () => {
+			enabled.add(el);
+		},
+		disable: () => {
+			enabled.delete(el);
+			forEach(el, (node) => {
+				const a = animations.get(node);
+				try {
+					a === null || a === void 0 || a.cancel();
+				} catch {}
+				animations.delete(node);
+				const d = debounces.get(node);
+				if (d) clearTimeout(d);
+				debounces.delete(node);
+				const i = intervals.get(node);
+				if (i) clearInterval(i);
+				intervals.delete(node);
+			});
+		},
+		isEnabled: () => enabled.has(el),
+		destroy: () => {
+			enabled.delete(el);
+			parents.delete(el);
+			options.delete(el);
+			const mo = mutationObservers.get(el);
+			mo === null || mo === void 0 || mo.disconnect();
+			mutationObservers.delete(el);
+			forEach(el, (node) => {
+				resize === null || resize === void 0 || resize.unobserve(node);
+				const a = animations.get(node);
+				try {
+					a === null || a === void 0 || a.cancel();
+				} catch {}
+				animations.delete(node);
+				const io = intersections.get(node);
+				io === null || io === void 0 || io.disconnect();
+				intersections.delete(node);
+				const i = intervals.get(node);
+				if (i) clearInterval(i);
+				intervals.delete(node);
+				const d = debounces.get(node);
+				if (d) clearTimeout(d);
+				debounces.delete(node);
+				coords.delete(node);
+				siblings.delete(node);
+			});
+		}
+	});
+}
+//#endregion
+//#region node_modules/@formkit/auto-animate/vue/index.mjs
+/**
+* AutoAnimate hook for adding dead-simple transitions and animations to Vue.
+* @param options - Auto animate options or a plugin
+* @returns A template ref. Use the `ref` attribute of your parent element
+* to store the element in this template ref.
+*/
+function useAutoAnimate(options) {
+	const element = ref();
+	let controller;
+	function setEnabled(enabled) {
+		if (controller) enabled ? controller.enable() : controller.disable();
+	}
+	onMounted(() => {
+		watchEffect((onCleanup) => {
+			let el;
+			if (element.value instanceof HTMLElement) el = element.value;
+			else if (element.value && "$el" in element.value && element.value.$el instanceof HTMLElement) el = element.value.$el;
+			if (el) {
+				controller = autoAnimate(el, options || {});
+				onCleanup(() => {
+					var _a;
+					(_a = controller === null || controller === void 0 ? void 0 : controller.destroy) === null || _a === void 0 || _a.call(controller);
+					controller = void 0;
+				});
+			}
+		});
+	});
+	onBeforeUnmount(() => {
+		var _a;
+		(_a = controller === null || controller === void 0 ? void 0 : controller.destroy) === null || _a === void 0 || _a.call(controller);
+		controller = void 0;
+	});
+	return [element, setEnabled];
+}
+//#endregion
 //#region src/components/small/app-card-grid/AppBoard.vue
 var _hoisted_1$1 = { key: 0 };
 var _sfc_main$1 = {
@@ -126425,6 +127160,10 @@ var _sfc_main$1 = {
 		disabled: {
 			default: false,
 			type: Boolean
+		},
+		isAnimated: {
+			default: false,
+			type: Boolean
 		}
 	}, {
 		"modelValue": {},
@@ -126441,6 +127180,7 @@ var _sfc_main$1 = {
 				return props.isMultiSelect ? value : (0, import_lodash.head)(value);
 			}
 		});
+		const [parent, enableAnimation] = useAutoAnimate();
 		const isSelected = (item) => {
 			return modelValue.value.some((selectedItem) => (0, import_lodash.isEqual)(selectedItem, item));
 		};
@@ -126449,18 +127189,26 @@ var _sfc_main$1 = {
 			newValue = props.isMultiSelect ? newValue : [(0, import_lodash.last)(newValue)];
 			modelValue.value = newValue;
 		};
-		const boardStyle = computed(() => ({ gridTemplateColumns: `repeat(auto-fill, ${props.cellWidth}px)` }));
+		const boardStyle = computed(() => ({
+			gridTemplateColumns: `repeat(auto-fill, ${props.cellWidth}px)`,
+			minHeight: "200px"
+		}));
 		const computedClass = computed(() => {
 			return { "disabled-element": props.disabled };
 		});
 		const getCellClass = (item) => {
 			return { selected: isSelected(item) };
 		};
+		onMounted(() => {
+			enableAnimation(props.isAnimated);
+		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
 				style: { "min-height": "100px" },
 				class: normalizeClass(computedClass.value)
 			}, [_ctx.$slots.header ? (openBlock(), createElementBlock("div", _hoisted_1$1, [renderSlot(_ctx.$slots, "header")])) : createCommentVNode("", true), createElementVNode("div", {
+				ref_key: "parent",
+				ref: parent,
 				class: "app-board",
 				style: normalizeStyle(boardStyle.value)
 			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.list, (item, index) => {