Tracking de l'application VApp (IHM du jeu)

VApp/node_modules/vuetify/lib/components/VAppBar/VAppBar.mjs

@@ -0,0 +1,130 @@
+import { createVNode as _createVNode, mergeProps as _mergeProps, resolveDirective as _resolveDirective } from "vue";
+// Styles
+import "./VAppBar.css";
+
+// Components
+import { makeVToolbarProps, VToolbar } from "../VToolbar/VToolbar.mjs"; // Composables
+import { makeLayoutItemProps, useLayoutItem } from "../../composables/layout.mjs";
+import { useProxiedModel } from "../../composables/proxiedModel.mjs";
+import { makeScrollProps, useScroll } from "../../composables/scroll.mjs";
+import { useSsrBoot } from "../../composables/ssrBoot.mjs";
+import { useToggleScope } from "../../composables/toggleScope.mjs"; // Utilities
+import { computed, ref, shallowRef, toRef, watchEffect } from 'vue';
+import { genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
+export const makeVAppBarProps = propsFactory({
+  scrollBehavior: String,
+  modelValue: {
+    type: Boolean,
+    default: true
+  },
+  location: {
+    type: String,
+    default: 'top',
+    validator: value => ['top', 'bottom'].includes(value)
+  },
+  ...makeVToolbarProps(),
+  ...makeLayoutItemProps(),
+  ...makeScrollProps(),
+  height: {
+    type: [Number, String],
+    default: 64
+  }
+}, 'VAppBar');
+export const VAppBar = genericComponent()({
+  name: 'VAppBar',
+  props: makeVAppBarProps(),
+  emits: {
+    'update:modelValue': value => true
+  },
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const vToolbarRef = ref();
+    const isActive = useProxiedModel(props, 'modelValue');
+    const scrollBehavior = computed(() => {
+      const behavior = new Set(props.scrollBehavior?.split(' ') ?? []);
+      return {
+        hide: behavior.has('hide'),
+        // fullyHide: behavior.has('fully-hide'),
+        inverted: behavior.has('inverted'),
+        collapse: behavior.has('collapse'),
+        elevate: behavior.has('elevate'),
+        fadeImage: behavior.has('fade-image')
+        // shrink: behavior.has('shrink'),
+      };
+    });
+    const canScroll = computed(() => {
+      const behavior = scrollBehavior.value;
+      return behavior.hide ||
+      // behavior.fullyHide ||
+      behavior.inverted || behavior.collapse || behavior.elevate || behavior.fadeImage ||
+      // behavior.shrink ||
+      !isActive.value;
+    });
+    const {
+      currentScroll,
+      scrollThreshold,
+      isScrollingUp,
+      scrollRatio
+    } = useScroll(props, {
+      canScroll
+    });
+    const isCollapsed = computed(() => props.collapse || scrollBehavior.value.collapse && (scrollBehavior.value.inverted ? scrollRatio.value > 0 : scrollRatio.value === 0));
+    const isFlat = computed(() => props.flat || scrollBehavior.value.elevate && (scrollBehavior.value.inverted ? currentScroll.value > 0 : currentScroll.value === 0));
+    const opacity = computed(() => scrollBehavior.value.fadeImage ? scrollBehavior.value.inverted ? 1 - scrollRatio.value : scrollRatio.value : undefined);
+    const height = computed(() => {
+      if (scrollBehavior.value.hide && scrollBehavior.value.inverted) return 0;
+      const height = vToolbarRef.value?.contentHeight ?? 0;
+      const extensionHeight = vToolbarRef.value?.extensionHeight ?? 0;
+      return height + extensionHeight;
+    });
+    useToggleScope(computed(() => !!props.scrollBehavior), () => {
+      watchEffect(() => {
+        if (scrollBehavior.value.hide) {
+          if (scrollBehavior.value.inverted) {
+            isActive.value = currentScroll.value > scrollThreshold.value;
+          } else {
+            isActive.value = isScrollingUp.value || currentScroll.value < scrollThreshold.value;
+          }
+        } else {
+          isActive.value = true;
+        }
+      });
+    });
+    const {
+      ssrBootStyles
+    } = useSsrBoot();
+    const {
+      layoutItemStyles
+    } = useLayoutItem({
+      id: props.name,
+      order: computed(() => parseInt(props.order, 10)),
+      position: toRef(props, 'location'),
+      layoutSize: height,
+      elementSize: shallowRef(undefined),
+      active: isActive,
+      absolute: toRef(props, 'absolute')
+    });
+    useRender(() => {
+      const toolbarProps = VToolbar.filterProps(props);
+      return _createVNode(VToolbar, _mergeProps({
+        "ref": vToolbarRef,
+        "class": ['v-app-bar', {
+          'v-app-bar--bottom': props.location === 'bottom'
+        }, props.class],
+        "style": [{
+          ...layoutItemStyles.value,
+          '--v-toolbar-image-opacity': opacity.value,
+          height: undefined,
+          ...ssrBootStyles.value
+        }, props.style]
+      }, toolbarProps, {
+        "collapse": isCollapsed.value,
+        "flat": isFlat.value
+      }), slots);
+    });
+    return {};
+  }
+});
+//# sourceMappingURL=VAppBar.mjs.map