Tracking de l'application VApp (IHM du jeu)

This commit is contained in:
2025-05-11 18:04:12 +02:00
commit 89e9db9b62
17763 changed files with 3718499 additions and 0 deletions

View File

@ -0,0 +1,29 @@
.v-footer {
align-items: center;
display: flex;
flex: 1 1 auto;
padding: 8px 16px;
position: relative;
transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
transition-property: height, width, transform, max-width, left, right, top, bottom;
border-color: rgba(var(--v-border-color), var(--v-border-opacity));
border-style: solid;
border-width: 0;
box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
border-radius: 0;
background: rgb(var(--v-theme-surface));
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
}
.v-footer--border {
border-width: thin;
box-shadow: none;
}
.v-footer--absolute {
position: absolute;
}
.v-footer--fixed {
position: fixed;
}
.v-footer--rounded {
border-radius: 4px;
}

View File

@ -0,0 +1,86 @@
import { createVNode as _createVNode, resolveDirective as _resolveDirective } from "vue";
// Styles
import "./VFooter.css";
// Composables
import { makeBorderProps, useBorder } from "../../composables/border.mjs";
import { useBackgroundColor } from "../../composables/color.mjs";
import { makeComponentProps } from "../../composables/component.mjs";
import { makeElevationProps, useElevation } from "../../composables/elevation.mjs";
import { makeLayoutItemProps, useLayoutItem } from "../../composables/layout.mjs";
import { useResizeObserver } from "../../composables/resizeObserver.mjs";
import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
import { makeTagProps } from "../../composables/tag.mjs";
import { makeThemeProps, provideTheme } from "../../composables/theme.mjs"; // Utilities
import { computed, shallowRef, toRef } from 'vue';
import { convertToUnit, genericComponent, propsFactory, useRender } from "../../util/index.mjs";
export const makeVFooterProps = propsFactory({
app: Boolean,
color: String,
height: {
type: [Number, String],
default: 'auto'
},
...makeBorderProps(),
...makeComponentProps(),
...makeElevationProps(),
...makeLayoutItemProps(),
...makeRoundedProps(),
...makeTagProps({
tag: 'footer'
}),
...makeThemeProps()
}, 'VFooter');
export const VFooter = genericComponent()({
name: 'VFooter',
props: makeVFooterProps(),
setup(props, _ref) {
let {
slots
} = _ref;
const {
themeClasses
} = provideTheme(props);
const {
backgroundColorClasses,
backgroundColorStyles
} = useBackgroundColor(toRef(props, 'color'));
const {
borderClasses
} = useBorder(props);
const {
elevationClasses
} = useElevation(props);
const {
roundedClasses
} = useRounded(props);
const autoHeight = shallowRef(32);
const {
resizeRef
} = useResizeObserver(entries => {
if (!entries.length) return;
autoHeight.value = entries[0].target.clientHeight;
});
const height = computed(() => props.height === 'auto' ? autoHeight.value : parseInt(props.height, 10));
const {
layoutItemStyles
} = useLayoutItem({
id: props.name,
order: computed(() => parseInt(props.order, 10)),
position: computed(() => 'bottom'),
layoutSize: height,
elementSize: computed(() => props.height === 'auto' ? undefined : height.value),
active: computed(() => props.app),
absolute: toRef(props, 'absolute')
});
useRender(() => _createVNode(props.tag, {
"ref": resizeRef,
"class": ['v-footer', themeClasses.value, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, roundedClasses.value, props.class],
"style": [backgroundColorStyles.value, props.app ? layoutItemStyles.value : {
height: convertToUnit(props.height)
}, props.style]
}, slots));
return {};
}
});
//# sourceMappingURL=VFooter.mjs.map

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,21 @@
@use '../../styles/tools'
@use './variables' as *
.v-footer
align-items: center
display: flex
flex: $footer-flex
padding: $footer-padding
position: relative
transition: $footer-transition
transition-property: height, width, transform, max-width, left, right, top, bottom
// missing from variables
@include tools.border($footer-border...)
@include tools.elevation($footer-elevation)
@include tools.position($footer-positions)
@include tools.rounded($footer-border-radius)
@include tools.theme($footer-theme...)
&--rounded
@include tools.rounded($footer-rounded-border-radius)

View File

@ -0,0 +1,32 @@
@use 'sass:map';
@use '../../styles/settings';
@use "../../styles/settings/variables";
// VFooter
$footer-background: rgb(var(--v-theme-surface)) !default;
$footer-border-color: settings.$border-color-root !default;
$footer-border-style: settings.$border-style-root !default;
$footer-border-thin-width: thin !default;
$footer-border-width: 0 !default;
$footer-border-radius: map.get(settings.$rounded, 0) !default;
$footer-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !default;
$footer-flex: 1 1 auto !default;
$footer-font-size: 14px !default;
$footer-elevation: 0 !default;
$footer-padding: 8px 16px !default;
$footer-positions: absolute fixed !default;
$footer-rounded-border-radius: settings.$border-radius-root !default;
$footer-transition: .2s variables.$standard-easing !default;
// Lists
$footer-border: (
$footer-border-color,
$footer-border-style,
$footer-border-width,
$footer-border-thin-width
) !default;
$footer-theme: (
$footer-background,
$footer-color
) !default;

View File

@ -0,0 +1,225 @@
import * as vue from 'vue';
import { ComponentPropsOptions, ExtractPropTypes } from 'vue';
interface FilterPropsOptions<PropsOptions extends Readonly<ComponentPropsOptions>, Props = ExtractPropTypes<PropsOptions>> {
filterProps<T extends Partial<Props>, U extends Exclude<keyof Props, Exclude<keyof Props, keyof T>>>(props: T): Partial<Pick<T, U>>;
}
declare const VFooter: {
new (...args: any[]): vue.CreateComponentPublicInstance<{
absolute: boolean;
height: string | number;
order: string | number;
style: vue.StyleValue;
tag: string;
app: boolean;
} & {
name?: string | undefined;
border?: string | number | boolean | undefined;
color?: string | undefined;
class?: any;
elevation?: string | number | undefined;
theme?: string | undefined;
rounded?: string | number | boolean | undefined;
} & {
$children?: vue.VNodeChild | (() => vue.VNodeChild) | {
default?: (() => vue.VNodeChild) | undefined;
};
'v-slots'?: {
default?: false | (() => vue.VNodeChild) | undefined;
} | undefined;
} & {
"v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
absolute: boolean;
height: string | number;
order: string | number;
style: vue.StyleValue;
tag: string;
app: boolean;
} & {
name?: string | undefined;
border?: string | number | boolean | undefined;
color?: string | undefined;
class?: any;
elevation?: string | number | undefined;
theme?: string | undefined;
rounded?: string | number | boolean | undefined;
} & {
$children?: vue.VNodeChild | (() => vue.VNodeChild) | {
default?: (() => vue.VNodeChild) | undefined;
};
'v-slots'?: {
default?: false | (() => vue.VNodeChild) | undefined;
} | undefined;
} & {
"v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
}, {
absolute: boolean;
height: string | number;
order: string | number;
style: vue.StyleValue;
tag: string;
app: boolean;
rounded: string | number | boolean;
}, true, {}, vue.SlotsType<Partial<{
default: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>[];
}>>, {
P: {};
B: {};
D: {};
C: {};
M: {};
Defaults: {};
}, {
absolute: boolean;
height: string | number;
order: string | number;
style: vue.StyleValue;
tag: string;
app: boolean;
} & {
name?: string | undefined;
border?: string | number | boolean | undefined;
color?: string | undefined;
class?: any;
elevation?: string | number | undefined;
theme?: string | undefined;
rounded?: string | number | boolean | undefined;
} & {
$children?: vue.VNodeChild | (() => vue.VNodeChild) | {
default?: (() => vue.VNodeChild) | undefined;
};
'v-slots'?: {
default?: false | (() => vue.VNodeChild) | undefined;
} | undefined;
} & {
"v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
}, {}, {}, {}, {}, {
absolute: boolean;
height: string | number;
order: string | number;
style: vue.StyleValue;
tag: string;
app: boolean;
rounded: string | number | boolean;
}>;
__isFragment?: undefined;
__isTeleport?: undefined;
__isSuspense?: undefined;
} & vue.ComponentOptionsBase<{
absolute: boolean;
height: string | number;
order: string | number;
style: vue.StyleValue;
tag: string;
app: boolean;
} & {
name?: string | undefined;
border?: string | number | boolean | undefined;
color?: string | undefined;
class?: any;
elevation?: string | number | undefined;
theme?: string | undefined;
rounded?: string | number | boolean | undefined;
} & {
$children?: vue.VNodeChild | (() => vue.VNodeChild) | {
default?: (() => vue.VNodeChild) | undefined;
};
'v-slots'?: {
default?: false | (() => vue.VNodeChild) | undefined;
} | undefined;
} & {
"v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
absolute: boolean;
height: string | number;
order: string | number;
style: vue.StyleValue;
tag: string;
app: boolean;
rounded: string | number | boolean;
}, {}, string, vue.SlotsType<Partial<{
default: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>[];
}>>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
theme: StringConstructor;
tag: Omit<{
type: StringConstructor;
default: string;
}, "type" | "default"> & {
type: vue.PropType<string>;
default: string;
};
rounded: {
type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
default: undefined;
};
name: {
type: StringConstructor;
};
order: {
type: (StringConstructor | NumberConstructor)[];
default: number;
};
absolute: BooleanConstructor;
elevation: {
type: (StringConstructor | NumberConstructor)[];
validator(v: any): boolean;
};
class: vue.PropType<any>;
style: {
type: vue.PropType<vue.StyleValue>;
default: null;
};
border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
app: BooleanConstructor;
color: StringConstructor;
height: {
type: (StringConstructor | NumberConstructor)[];
default: string;
};
}, vue.ExtractPropTypes<{
theme: StringConstructor;
tag: Omit<{
type: StringConstructor;
default: string;
}, "type" | "default"> & {
type: vue.PropType<string>;
default: string;
};
rounded: {
type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
default: undefined;
};
name: {
type: StringConstructor;
};
order: {
type: (StringConstructor | NumberConstructor)[];
default: number;
};
absolute: BooleanConstructor;
elevation: {
type: (StringConstructor | NumberConstructor)[];
validator(v: any): boolean;
};
class: vue.PropType<any>;
style: {
type: vue.PropType<vue.StyleValue>;
default: null;
};
border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
app: BooleanConstructor;
color: StringConstructor;
height: {
type: (StringConstructor | NumberConstructor)[];
default: string;
};
}>>;
type VFooter = InstanceType<typeof VFooter>;
export { VFooter };

View File

@ -0,0 +1,2 @@
export { VFooter } from "./VFooter.mjs";
//# sourceMappingURL=index.mjs.map

View File

@ -0,0 +1 @@
{"version":3,"file":"index.mjs","names":["VFooter"],"sources":["../../../src/components/VFooter/index.ts"],"sourcesContent":["export { VFooter } from './VFooter'\n"],"mappings":"SAASA,OAAO"}