@flux-ui/application 3.0.0-next.61 → 3.0.0-next.63

package/dist/index.css

@@ -8,11 +8,6 @@
   --application-top-height: 66px;
 }
 
-[dark] {
-  --application-menu-surface: color-mix(in srgb, var(--gray-25), black 25%);
-  --application-menu-surface-stroke: var(--gray-100);
-}
-
 .application {
   position: relative;
   display: flex;
@@ -43,7 +38,7 @@
   height: 100dvh;
   padding: 0;
   border: 0;
-  background: rgb(from var(--gray-200) r g b/0.5);
+  background: var(--overlay);
   backdrop-filter: blur(3px) saturate(180%);
   transition: var(--application-duration) var(--swift-out);
   transition-property: background, backdrop-filter, opacity;
@@ -74,6 +69,10 @@
     overflow: hidden;
     overscroll-behavior: contain;
   }
+}
+html[data-application-resizing] .application,
+html[data-application-resizing] .application-menu-backdrop {
+  transition: none;
 }.application-content {
   position: relative;
   display: flex;
@@ -269,48 +268,6 @@
   overflow-y: auto;
 }
 
-.application-menu-page-indicator {
-  display: flex;
-  flex-flow: row nowrap;
-  gap: 6px;
-  justify-content: center;
-  align-items: center;
-  padding: 9px 12px;
-  background: var(--application-menu-surface);
-  z-index: 1;
-}
-
-.application-menu-page-indicator-dot {
-  height: 6px;
-  width: 6px;
-  padding: 0;
-  cursor: pointer;
-  background: transparent;
-  border: 1.5px solid var(--application-menu-surface-stroke);
-  border-radius: 50%;
-  transition: 200ms var(--swift-out);
-  transition-property: background, border-color, transform;
-}
-@media (hover: hover) {
-  .application-menu-page-indicator-dot:hover {
-    border-color: var(--foreground-secondary);
-    transform: scale(1.2);
-  }
-}
-.application-menu-page-indicator-dot {
-  outline: 2px solid rgb(from var(--primary-600) r g b/0);
-  outline-offset: 0;
-}
-.application-menu-page-indicator-dot:focus-visible {
-  outline-color: var(--primary-600);
-  outline-offset: 0;
-}
-
-.application-menu-page-indicator-dot-active {
-  background: var(--foreground-prominent);
-  border-color: var(--foreground-prominent);
-}
-
 .application-menu-panel-enter-active,
 .application-menu-panel-enter-from,
 .application-menu-panel-leave-active,
@@ -580,6 +537,16 @@
   .application-menu[data-collapsed] {
     translate: -100% 0;
   }
+}
+html[data-application-resizing] .application-menu,
+html[data-application-resizing] .application-menu-footer,
+html[data-application-resizing] .application-menu-footer::before,
+html[data-application-resizing] .application-menu-header,
+html[data-application-resizing] .application-menu-track,
+html[data-application-resizing] .application-menu .menu-item-label,
+html[data-application-resizing] .application-menu-context-pill-content strong,
+html[data-application-resizing] .application-menu-context-pill-content span {
+  transition: none;
 }.application-section {
   display: flex;
   flex-flow: column;

package/dist/index.js

@@ -1,8 +1,8 @@
 import { Fragment, TransitionGroup, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, customRef, defineComponent, h, inject, markRaw, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onUnmounted, openBlock, provide, ref, renderList, renderSlot, shallowRef, toDisplayString, toRef, unref, useSlots, watch, withCtx, withDirectives } from "vue";
+import { FluxFadeTransition, FluxFlyout, FluxIcon, FluxMenu, FluxMenuItem, FluxPane, FluxRouteTransition, FluxSecondaryButton, FluxSpacer, FluxTabBar, useBreakpoints } from "@flux-ui/components";
 import { DateTime } from "luxon";
 import { RouterView, matchedRouteKey, useRoute, viewDepthKey } from "vue-router";
-import { FluxFadeTransition, FluxFlyout, FluxIcon, FluxMenu, FluxMenuItem, FluxPane, FluxRouteTransition, FluxSecondaryButton, FluxSpacer, FluxTabBar } from "@flux-ui/components";
-//#region ../../node_modules/.bun/@basmilius+utils@3.24.0/node_modules/@basmilius/utils/dist/index.mjs
+//#region ../../node_modules/.bun/@basmilius+utils@3.25.0/node_modules/@basmilius/utils/dist/index.mjs
 function x$1(e) {
 	let t = {};
 	do {
@@ -3103,7 +3103,7 @@ useMode(definition$2);
 useMode(definition$1);
 useMode(definition);
 //#endregion
-//#region ../../node_modules/.bun/@basmilius+http-client@3.24.0+96a7401e32316653/node_modules/@basmilius/http-client/dist/index.mjs
+//#region ../../node_modules/.bun/@basmilius+http-client@3.25.0+96a7401e32316653/node_modules/@basmilius/http-client/dist/index.mjs
 function c(e) {
 	return class extends e {
 		constructor(...e) {
@@ -3404,7 +3404,7 @@ X = Y = B([c], X);
 converter(`oklch`);
 RegExp(`[a-z]`), RegExp(`[A-Z]`), RegExp(`[0-9]`), RegExp(`[!"#$%&'()*+,-./:;<=>?@[\\\\\\]^_\`{|}~]`);
 //#endregion
-//#region ../internals/dist/composable-Cp0PgZry.js
+//#region ../internals/dist/composable-DaZozn_3.js
 function D(e, t, n, r = { passive: !0 }) {
 	watch(e, (e, i, a) => {
 		e && (e.addEventListener(t, n, r), a(() => e.removeEventListener(t, n)));
@@ -3533,12 +3533,32 @@ var FluxApplication_default = /* @__PURE__ */ defineComponent({
 		}
 	},
 	setup(__props) {
-		const route = useRoute_default();
-		const matchedMenuRoutes = useNamedRoutes_default(toRef(() => __props.contextMenuName));
+		let resizeTimer;
 		const isMenuCollapsed = k("application-menu-collapsed", true);
+		const matchedMenuRoutes = useNamedRoutes_default(toRef(() => __props.contextMenuName));
+		const route = useRoute_default();
+		const { lg, xl } = useBreakpoints();
+		const contextStack = shallowRef([]);
 		const layout = ref("default");
-		const totalLevels = computed(() => 1 + matchedMenuRoutes.value.length);
 		const viewIndex = ref(0);
+		const activeContext = computed(() => contextStack.value.at(-1));
+		const contexts = computed(() => contextStack.value);
+		const totalLevels = computed(() => 1 + matchedMenuRoutes.value.length);
+		onMounted(() => {
+			if (typeof window === "undefined") return;
+			window.addEventListener("resize", onResize, { passive: true });
+		});
+		onUnmounted(() => {
+			if (typeof window !== "undefined") window.removeEventListener("resize", onResize);
+			if (resizeTimer !== void 0) {
+				clearTimeout(resizeTimer);
+				resizeTimer = void 0;
+			}
+			if (typeof document !== "undefined") {
+				delete document.documentElement.dataset.applicationMenuOpen;
+				delete document.documentElement.dataset.applicationResizing;
+			}
+		});
 		function clampViewIndex(target) {
 			if (target < 0) return 0;
 			const max = totalLevels.value - 1;
@@ -3560,15 +3580,34 @@ var FluxApplication_default = /* @__PURE__ */ defineComponent({
 		function goToChild() {
 			viewIndex.value = clampViewIndex(viewIndex.value + 1);
 		}
-		const contextStack = shallowRef([]);
-		const contexts = computed(() => contextStack.value);
-		const activeContext = computed(() => contextStack.value.at(-1));
+		function onResize() {
+			if (typeof document === "undefined") return;
+			document.documentElement.dataset.applicationResizing = "";
+			if (resizeTimer !== void 0) clearTimeout(resizeTimer);
+			resizeTimer = setTimeout(() => {
+				delete document.documentElement.dataset.applicationResizing;
+				resizeTimer = void 0;
+			}, 150);
+		}
 		function pushContext(info) {
 			contextStack.value = [...contextStack.value, info];
 		}
 		function removeContext(id) {
 			contextStack.value = contextStack.value.filter((entry) => entry.id !== id);
 		}
+		watch(() => route.fullPath, () => {
+			viewIndex.value = totalLevels.value - 1;
+			if (!lg.value && !xl.value) isMenuCollapsed.value = true;
+		});
+		watch(totalLevels, (next) => {
+			viewIndex.value = clampViewIndex(viewIndex.value);
+			if (viewIndex.value === 0 && next > 1) viewIndex.value = next - 1;
+		}, { immediate: true });
+		watch(isMenuCollapsed, (collapsed) => {
+			if (typeof document === "undefined") return;
+			if (collapsed) delete document.documentElement.dataset.applicationMenuOpen;
+			else document.documentElement.dataset.applicationMenuOpen = "";
+		}, { immediate: true });
 		provide(FluxApplicationInjectionKey, {
 			activeContext,
 			contexts,
@@ -3585,21 +3624,6 @@ var FluxApplication_default = /* @__PURE__ */ defineComponent({
 			pushContext,
 			removeContext
 		});
-		watch(() => route.fullPath, () => {
-			viewIndex.value = totalLevels.value - 1;
-		});
-		watch(totalLevels, (next) => {
-			viewIndex.value = clampViewIndex(viewIndex.value);
-			if (viewIndex.value === 0 && next > 1) viewIndex.value = next - 1;
-		}, { immediate: true });
-		watch(isMenuCollapsed, (collapsed) => {
-			if (typeof document === "undefined") return;
-			if (collapsed) delete document.documentElement.dataset.applicationMenuOpen;
-			else document.documentElement.dataset.applicationMenuOpen = "";
-		}, { immediate: true });
-		onUnmounted(() => {
-			if (typeof document !== "undefined") delete document.documentElement.dataset.applicationMenuOpen;
-		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(Application_module_default).application) }, [
 				renderSlot(_ctx.$slots, "menu"),
@@ -3768,9 +3792,6 @@ var ApplicationMenu_module_default = {
 	applicationMenuPanel: `application-menu-panel`,
 	applicationMenuStage: `application-menu-stage`,
 	applicationMenuTrack: `application-menu-track`,
-	applicationMenuPageIndicator: `application-menu-page-indicator`,
-	applicationMenuPageIndicatorDot: `application-menu-page-indicator-dot`,
-	applicationMenuPageIndicatorDotActive: `application-menu-page-indicator-dot-active`,
 	applicationMenuPanelEnterActive: `application-menu-panel-enter-active`,
 	applicationMenuPanelEnterFrom: `application-menu-panel-enter-from`,
 	applicationMenuPanelLeaveActive: `application-menu-panel-leave-active`,