@flux-ui/application 3.1.9 → 3.2.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.css CHANGED
@@ -304,9 +304,6 @@ html[data-application-resizing] .application-menu-backdrop {
304
304
  @starting-style {
305
305
  .application-menu .menu-sub-header {
306
306
  height: 0;
307
- /* Match the collapsed state's negative margins (sum -12px = one panel gap)
308
- so the expand-in animation starts exactly where the collapsed sub-header
309
- sat — no jump at the start of the expand. */
310
307
  margin-top: -9px;
311
308
  margin-bottom: -3px;
312
309
  padding-top: 0;
@@ -520,6 +517,10 @@ html[data-application-resizing] .application-menu-backdrop {
520
517
  translate: -100% 0;
521
518
  }
522
519
  }
520
+ html:not([data-application-ready]) .application-menu .menu-sub-header {
521
+ transition: none;
522
+ }
523
+
523
524
  html[data-application-resizing] .application-menu,
524
525
  html[data-application-resizing] .application-menu-footer,
525
526
  html[data-application-resizing] .application-menu-footer::before,
package/dist/index.js CHANGED
@@ -2,7 +2,7 @@ import { Fragment, TransitionGroup, computed, createBlock, createCommentVNode, c
2
2
  import { FluxFadeTransition, FluxFlyout, FluxIcon, FluxMenu, FluxMenuItem, FluxPane, FluxRouteTransition, FluxSecondaryButton, FluxSpacer, FluxTabBar, useBreakpoints } from "@flux-ui/components";
3
3
  import { DateTime } from "luxon";
4
4
  import { RouterView, matchedRouteKey, useRoute, viewDepthKey } from "vue-router";
5
- //#region ../../node_modules/.bun/@basmilius+utils@3.43.0+f2ed1ec6a4c7f7fd/node_modules/@basmilius/utils/dist/index.mjs
5
+ //#region ../../node_modules/.bun/@basmilius+utils@3.45.0+f2ed1ec6a4c7f7fd/node_modules/@basmilius/utils/dist/index.mjs
6
6
  function x(e) {
7
7
  let t = {};
8
8
  do {
@@ -3150,7 +3150,7 @@ useMode(definition$2);
3150
3150
  useMode(definition$1);
3151
3151
  useMode(definition);
3152
3152
  //#endregion
3153
- //#region ../../node_modules/.bun/@basmilius+http-client@3.43.0+8e5bcfeee95dacb4/node_modules/@basmilius/http-client/dist/index.mjs
3153
+ //#region ../../node_modules/.bun/@basmilius+http-client@3.45.0+4ee6465b33b5b900/node_modules/@basmilius/http-client/dist/index.mjs
3154
3154
  function adapter_default(Parent) {
3155
3155
  return class extends Parent {
3156
3156
  constructor(...args) {
@@ -3802,6 +3802,7 @@ var FluxApplication_default = /* @__PURE__ */ defineComponent({
3802
3802
  }
3803
3803
  },
3804
3804
  setup(__props) {
3805
+ let readyFrame;
3805
3806
  let resizeTimer;
3806
3807
  const isMenuCollapsed = A("application-menu-collapsed", true);
3807
3808
  const matchedMenuRoutes = useNamedRoutes_default(toRef(() => __props.contextMenuName));
@@ -3816,15 +3817,26 @@ var FluxApplication_default = /* @__PURE__ */ defineComponent({
3816
3817
  onMounted(() => {
3817
3818
  if (typeof window === "undefined") return;
3818
3819
  window.addEventListener("resize", onResize, { passive: true });
3820
+ readyFrame = requestAnimationFrame(() => {
3821
+ readyFrame = requestAnimationFrame(() => {
3822
+ readyFrame = void 0;
3823
+ document.documentElement.dataset.applicationReady = "";
3824
+ });
3825
+ });
3819
3826
  });
3820
3827
  onUnmounted(() => {
3821
3828
  if (typeof window !== "undefined") window.removeEventListener("resize", onResize);
3829
+ if (readyFrame !== void 0) {
3830
+ cancelAnimationFrame(readyFrame);
3831
+ readyFrame = void 0;
3832
+ }
3822
3833
  if (resizeTimer !== void 0) {
3823
3834
  clearTimeout(resizeTimer);
3824
3835
  resizeTimer = void 0;
3825
3836
  }
3826
3837
  if (typeof document !== "undefined") {
3827
3838
  delete document.documentElement.dataset.applicationMenuOpen;
3839
+ delete document.documentElement.dataset.applicationReady;
3828
3840
  delete document.documentElement.dataset.applicationResizing;
3829
3841
  }
3830
3842
  });
@@ -4023,10 +4035,7 @@ var FluxApplicationContent_default = /* @__PURE__ */ defineComponent({
4023
4035
  const { layout: layoutRef } = useApplicationInjection_default();
4024
4036
  watch(() => __props.layout, () => layoutRef.value = __props.layout, { immediate: true });
4025
4037
  return (_ctx, _cache) => {
4026
- return openBlock(), createElementBlock("main", {
4027
- class: normalizeClass(unref(clsx)(__props.layout === "default" && unref(ApplicationContent_module_default).applicationContentDefault, __props.layout === "dashboard" && unref(ApplicationContent_module_default).applicationContentDashboard, __props.layout === "full" && unref(ApplicationContent_module_default).applicationContentFull, __props.layout === "medium" && unref(ApplicationContent_module_default).applicationContentMedium, __props.layout === "narrow" && unref(ApplicationContent_module_default).applicationContentNarrow)),
4028
- "aria-label": "Application Content"
4029
- }, [renderSlot(_ctx.$slots, "default")], 2);
4038
+ return openBlock(), createElementBlock("main", { class: normalizeClass(unref(clsx)(__props.layout === "default" && unref(ApplicationContent_module_default).applicationContentDefault, __props.layout === "dashboard" && unref(ApplicationContent_module_default).applicationContentDashboard, __props.layout === "full" && unref(ApplicationContent_module_default).applicationContentFull, __props.layout === "medium" && unref(ApplicationContent_module_default).applicationContentMedium, __props.layout === "narrow" && unref(ApplicationContent_module_default).applicationContentNarrow)) }, [renderSlot(_ctx.$slots, "default")], 2);
4030
4039
  };
4031
4040
  }
4032
4041
  });