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,101 @@
.v-selection-control {
align-items: center;
contain: layout;
display: flex;
flex: 1 0;
grid-area: control;
position: relative;
user-select: none;
}
.v-selection-control .v-label {
white-space: normal;
word-break: break-word;
height: 100%;
}
.v-selection-control--disabled {
opacity: var(--v-disabled-opacity);
pointer-events: none;
}
.v-selection-control--error .v-label, .v-selection-control--disabled .v-label {
opacity: 1;
}
.v-selection-control--error:not(.v-selection-control--disabled) .v-label {
color: rgb(var(--v-theme-error));
}
.v-selection-control--inline {
display: inline-flex;
flex: 0 0 auto;
min-width: 0;
max-width: 100%;
}
.v-selection-control--inline .v-label {
width: auto;
}
.v-selection-control--density-default {
--v-selection-control-size: 40px;
}
.v-selection-control--density-comfortable {
--v-selection-control-size: 36px;
}
.v-selection-control--density-compact {
--v-selection-control-size: 28px;
}
.v-selection-control__wrapper {
width: var(--v-selection-control-size);
height: var(--v-selection-control-size);
display: inline-flex;
align-items: center;
position: relative;
justify-content: center;
flex: none;
}
.v-selection-control__input {
width: var(--v-selection-control-size);
height: var(--v-selection-control-size);
align-items: center;
display: flex;
flex: none;
justify-content: center;
position: relative;
border-radius: 50%;
}
.v-selection-control__input input {
cursor: pointer;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
}
.v-selection-control__input::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 100%;
background-color: currentColor;
opacity: 0;
pointer-events: none;
}
.v-selection-control__input:hover::before {
opacity: calc(var(--v-hover-opacity) * var(--v-theme-overlay-multiplier));
}
.v-selection-control__input > .v-icon {
opacity: var(--v-medium-emphasis-opacity);
}
.v-selection-control--disabled .v-selection-control__input > .v-icon, .v-selection-control--dirty .v-selection-control__input > .v-icon, .v-selection-control--error .v-selection-control__input > .v-icon {
opacity: 1;
}
.v-selection-control--error:not(.v-selection-control--disabled) .v-selection-control__input > .v-icon {
color: rgb(var(--v-theme-error));
}
.v-selection-control--focus-visible .v-selection-control__input::before {
opacity: calc(var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
}

View File

@ -0,0 +1,208 @@
import { withDirectives as _withDirectives, resolveDirective as _resolveDirective, Fragment as _Fragment, createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
// Styles
import "./VSelectionControl.css";
// Components
import { VIcon } from "../VIcon/index.mjs";
import { VLabel } from "../VLabel/index.mjs";
import { makeSelectionControlGroupProps, VSelectionControlGroupSymbol } from "../VSelectionControlGroup/VSelectionControlGroup.mjs"; // Composables
import { useBackgroundColor, useTextColor } from "../../composables/color.mjs";
import { makeComponentProps } from "../../composables/component.mjs";
import { useDensity } from "../../composables/density.mjs";
import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Directives
import { Ripple } from "../../directives/ripple/index.mjs"; // Utilities
import { computed, inject, nextTick, ref, shallowRef } from 'vue';
import { filterInputAttrs, genericComponent, getUid, matchesSelector, propsFactory, useRender, wrapInArray } from "../../util/index.mjs"; // Types
export const makeVSelectionControlProps = propsFactory({
label: String,
baseColor: String,
trueValue: null,
falseValue: null,
value: null,
...makeComponentProps(),
...makeSelectionControlGroupProps()
}, 'VSelectionControl');
export function useSelectionControl(props) {
const group = inject(VSelectionControlGroupSymbol, undefined);
const {
densityClasses
} = useDensity(props);
const modelValue = useProxiedModel(props, 'modelValue');
const trueValue = computed(() => props.trueValue !== undefined ? props.trueValue : props.value !== undefined ? props.value : true);
const falseValue = computed(() => props.falseValue !== undefined ? props.falseValue : false);
const isMultiple = computed(() => !!props.multiple || props.multiple == null && Array.isArray(modelValue.value));
const model = computed({
get() {
const val = group ? group.modelValue.value : modelValue.value;
return isMultiple.value ? wrapInArray(val).some(v => props.valueComparator(v, trueValue.value)) : props.valueComparator(val, trueValue.value);
},
set(val) {
if (props.readonly) return;
const currentValue = val ? trueValue.value : falseValue.value;
let newVal = currentValue;
if (isMultiple.value) {
newVal = val ? [...wrapInArray(modelValue.value), currentValue] : wrapInArray(modelValue.value).filter(item => !props.valueComparator(item, trueValue.value));
}
if (group) {
group.modelValue.value = newVal;
} else {
modelValue.value = newVal;
}
}
});
const {
textColorClasses,
textColorStyles
} = useTextColor(computed(() => {
if (props.error || props.disabled) return undefined;
return model.value ? props.color : props.baseColor;
}));
const {
backgroundColorClasses,
backgroundColorStyles
} = useBackgroundColor(computed(() => {
return model.value && !props.error && !props.disabled ? props.color : undefined;
}));
const icon = computed(() => model.value ? props.trueIcon : props.falseIcon);
return {
group,
densityClasses,
trueValue,
falseValue,
model,
textColorClasses,
textColorStyles,
backgroundColorClasses,
backgroundColorStyles,
icon
};
}
export const VSelectionControl = genericComponent()({
name: 'VSelectionControl',
directives: {
Ripple
},
inheritAttrs: false,
props: makeVSelectionControlProps(),
emits: {
'update:modelValue': value => true
},
setup(props, _ref) {
let {
attrs,
slots
} = _ref;
const {
group,
densityClasses,
icon,
model,
textColorClasses,
textColorStyles,
backgroundColorClasses,
backgroundColorStyles,
trueValue
} = useSelectionControl(props);
const uid = getUid();
const isFocused = shallowRef(false);
const isFocusVisible = shallowRef(false);
const input = ref();
const id = computed(() => props.id || `input-${uid}`);
const isInteractive = computed(() => !props.disabled && !props.readonly);
group?.onForceUpdate(() => {
if (input.value) {
input.value.checked = model.value;
}
});
function onFocus(e) {
if (!isInteractive.value) return;
isFocused.value = true;
if (matchesSelector(e.target, ':focus-visible') !== false) {
isFocusVisible.value = true;
}
}
function onBlur() {
isFocused.value = false;
isFocusVisible.value = false;
}
function onClickLabel(e) {
e.stopPropagation();
}
function onInput(e) {
if (!isInteractive.value) return;
if (props.readonly && group) {
nextTick(() => group.forceUpdate());
}
model.value = e.target.checked;
}
useRender(() => {
const label = slots.label ? slots.label({
label: props.label,
props: {
for: id.value
}
}) : props.label;
const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
const inputNode = _createVNode("input", _mergeProps({
"ref": input,
"checked": model.value,
"disabled": !!props.disabled,
"id": id.value,
"onBlur": onBlur,
"onFocus": onFocus,
"onInput": onInput,
"aria-disabled": !!props.disabled,
"type": props.type,
"value": trueValue.value,
"name": props.name,
"aria-checked": props.type === 'checkbox' ? model.value : undefined
}, inputAttrs), null);
return _createVNode("div", _mergeProps({
"class": ['v-selection-control', {
'v-selection-control--dirty': model.value,
'v-selection-control--disabled': props.disabled,
'v-selection-control--error': props.error,
'v-selection-control--focused': isFocused.value,
'v-selection-control--focus-visible': isFocusVisible.value,
'v-selection-control--inline': props.inline
}, densityClasses.value, props.class]
}, rootAttrs, {
"style": props.style
}), [_createVNode("div", {
"class": ['v-selection-control__wrapper', textColorClasses.value],
"style": textColorStyles.value
}, [slots.default?.({
backgroundColorClasses,
backgroundColorStyles
}), _withDirectives(_createVNode("div", {
"class": ['v-selection-control__input']
}, [slots.input?.({
model,
textColorClasses,
textColorStyles,
backgroundColorClasses,
backgroundColorStyles,
inputNode,
icon: icon.value,
props: {
onFocus,
onBlur,
id: id.value
}
}) ?? _createVNode(_Fragment, null, [icon.value && _createVNode(VIcon, {
"key": "icon",
"icon": icon.value
}, null), inputNode])]), [[_resolveDirective("ripple"), props.ripple && [!props.disabled && !props.readonly, null, ['center', 'circle']]]])]), label && _createVNode(VLabel, {
"for": id.value,
"onClick": onClickLabel
}, {
default: () => [label]
})]);
});
return {
isFocused,
input
};
}
});
//# sourceMappingURL=VSelectionControl.mjs.map

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,99 @@
@use 'sass:map'
@use 'sass:list'
@use '../../styles/settings'
@use '../../styles/tools'
@use './variables' as *
.v-selection-control
align-items: center
contain: layout
display: flex
flex: 1 0
grid-area: control
position: relative
user-select: none
.v-label
white-space: normal
word-break: break-word
height: 100%
&--disabled
opacity: var(--v-disabled-opacity)
pointer-events: none
&--error,
&--disabled
.v-label
opacity: 1
&--error:not(.v-selection-control--disabled)
.v-label
color: rgb(var(--v-theme-error))
&--inline
display: inline-flex
flex: 0 0 auto
min-width: 0
max-width: 100%
.v-label
width: auto
@at-root
@include tools.density('v-selection-control', $selection-control-density) using ($modifier)
--v-selection-control-size: #{$selection-control-size + $modifier}
.v-selection-control__wrapper
width: var(--v-selection-control-size)
height: var(--v-selection-control-size)
display: inline-flex
align-items: center
position: relative
justify-content: center
flex: none
.v-selection-control__input
width: var(--v-selection-control-size)
height: var(--v-selection-control-size)
align-items: center
display: flex
flex: none
justify-content: center
position: relative
border-radius: 50%
input
cursor: pointer
position: absolute
left: 0
top: 0
width: 100%
height: 100%
opacity: 0
&::before
@include tools.absolute(true)
border-radius: 100%
background-color: currentColor
opacity: 0
pointer-events: none
&:hover::before
opacity: calc(#{map.get(settings.$states, 'hover')} * var(--v-theme-overlay-multiplier))
> .v-icon
opacity: var(--v-medium-emphasis-opacity)
.v-selection-control--disabled &,
.v-selection-control--dirty &,
.v-selection-control--error &
> .v-icon
opacity: 1
.v-selection-control--error:not(.v-selection-control--disabled) &
> .v-icon
color: rgb(var(--v-theme-error))
.v-selection-control--focus-visible &::before
opacity: calc(#{map.get(settings.$states, 'focus')} * var(--v-theme-overlay-multiplier))

View File

@ -0,0 +1,10 @@
@use 'sass:map';
@use '../../styles/settings';
@use '../../styles/tools';
// VSelectionControl
$selection-control-disabled-color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) !default;
$selection-control-error-color: rgb(var(--v-theme-error)) !default;
$selection-control-density: ('default': 0, 'comfortable': -1, 'compact': -3) !default;
$selection-control-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !default;
$selection-control-size: 40px !default;

View File

@ -0,0 +1,355 @@
import * as vue from 'vue';
import { ComponentPropsOptions, ExtractPropTypes, VNodeChild, VNode, JSXComponent, PropType, Ref, CSSProperties, WritableComputedRef } from 'vue';
type SlotsToProps<U extends RawSlots, T = MakeInternalSlots<U>> = {
$children?: (VNodeChild | (T extends {
default: infer V;
} ? V : {}) | {
[K in keyof T]?: T[K];
});
'v-slots'?: {
[K in keyof T]?: T[K] | false;
};
} & {
[K in keyof T as `v-slot:${K & string}`]?: T[K] | false;
};
type RawSlots = Record<string, unknown>;
type Slot<T> = [T] extends [never] ? () => VNodeChild : (arg: T) => VNodeChild;
type VueSlot<T> = [T] extends [never] ? () => VNode[] : (arg: T) => VNode[];
type MakeInternalSlots<T extends RawSlots> = {
[K in keyof T]: Slot<T[K]>;
};
type MakeSlots<T extends RawSlots> = {
[K in keyof T]: VueSlot<T[K]>;
};
type GenericProps<Props, Slots extends Record<string, unknown>> = {
$props: Props & SlotsToProps<Slots>;
$slots: MakeSlots<Slots>;
};
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 function deepEqual(a: any, b: any): boolean;
type Density = null | 'default' | 'comfortable' | 'compact';
type IconValue = string | (string | [path: string, opacity: number])[] | JSXComponent;
declare const IconValue: PropType<IconValue>;
type SelectionControlSlot = {
model: WritableComputedRef<boolean>;
textColorClasses: Ref<string[]>;
textColorStyles: Ref<CSSProperties>;
backgroundColorClasses: Ref<string[]>;
backgroundColorStyles: Ref<CSSProperties>;
inputNode: VNode;
icon: IconValue | undefined;
props: {
onBlur: (e: Event) => void;
onFocus: (e: FocusEvent) => void;
id: string;
};
};
type VSelectionControlSlots = {
default: {
backgroundColorClasses: Ref<string[]>;
backgroundColorStyles: Ref<CSSProperties>;
};
label: {
label: string | undefined;
props: Record<string, unknown>;
};
input: SelectionControlSlot;
};
declare const VSelectionControl: {
new (...args: any[]): vue.CreateComponentPublicInstance<{
inline: boolean;
error: boolean;
style: vue.StyleValue;
disabled: boolean | null;
multiple: boolean | null;
readonly: boolean | null;
density: Density;
ripple: boolean;
valueComparator: typeof deepEqual;
} & {
type?: string | undefined;
id?: string | undefined;
name?: string | undefined;
color?: string | undefined;
value?: any;
label?: string | undefined;
class?: any;
theme?: string | undefined;
defaultsTarget?: string | undefined;
falseIcon?: IconValue | undefined;
trueIcon?: IconValue | undefined;
baseColor?: string | undefined;
trueValue?: any;
falseValue?: any;
} & {}, {
isFocused: vue.ShallowRef<boolean>;
input: Ref<HTMLInputElement | undefined>;
}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<{
'update:modelValue': (value: any) => boolean;
}, "$children" | "v-slot:default" | "v-slots" | "modelValue" | "update:modelValue" | "v-slot:input" | "v-slot:label">, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
inline: boolean;
error: boolean;
style: vue.StyleValue;
disabled: boolean | null;
multiple: boolean | null;
readonly: boolean | null;
density: Density;
ripple: boolean;
valueComparator: typeof deepEqual;
} & {
type?: string | undefined;
id?: string | undefined;
name?: string | undefined;
color?: string | undefined;
value?: any;
label?: string | undefined;
class?: any;
theme?: string | undefined;
defaultsTarget?: string | undefined;
falseIcon?: IconValue | undefined;
trueIcon?: IconValue | undefined;
baseColor?: string | undefined;
trueValue?: any;
falseValue?: any;
} & {}, {
inline: boolean;
error: boolean;
style: vue.StyleValue;
disabled: boolean | null;
multiple: boolean | null;
readonly: boolean | null;
density: Density;
ripple: boolean;
valueComparator: typeof deepEqual;
}, true, {}, vue.SlotsType<Partial<{
default: (arg: {
backgroundColorClasses: Ref<string[]>;
backgroundColorStyles: Ref<CSSProperties>;
}) => VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>[];
label: (arg: {
label: string | undefined;
props: Record<string, unknown>;
}) => VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>[];
input: (arg: SelectionControlSlot) => VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>[];
}>>, {
P: {};
B: {};
D: {};
C: {};
M: {};
Defaults: {};
}, {
inline: boolean;
error: boolean;
style: vue.StyleValue;
disabled: boolean | null;
multiple: boolean | null;
readonly: boolean | null;
density: Density;
ripple: boolean;
valueComparator: typeof deepEqual;
} & {
type?: string | undefined;
id?: string | undefined;
name?: string | undefined;
color?: string | undefined;
value?: any;
label?: string | undefined;
class?: any;
theme?: string | undefined;
defaultsTarget?: string | undefined;
falseIcon?: IconValue | undefined;
trueIcon?: IconValue | undefined;
baseColor?: string | undefined;
trueValue?: any;
falseValue?: any;
} & {}, {
isFocused: vue.ShallowRef<boolean>;
input: Ref<HTMLInputElement | undefined>;
}, {}, {}, {}, {
inline: boolean;
error: boolean;
style: vue.StyleValue;
disabled: boolean | null;
multiple: boolean | null;
readonly: boolean | null;
density: Density;
ripple: boolean;
valueComparator: typeof deepEqual;
}>;
__isFragment?: undefined;
__isTeleport?: undefined;
__isSuspense?: undefined;
} & vue.ComponentOptionsBase<{
inline: boolean;
error: boolean;
style: vue.StyleValue;
disabled: boolean | null;
multiple: boolean | null;
readonly: boolean | null;
density: Density;
ripple: boolean;
valueComparator: typeof deepEqual;
} & {
type?: string | undefined;
id?: string | undefined;
name?: string | undefined;
color?: string | undefined;
value?: any;
label?: string | undefined;
class?: any;
theme?: string | undefined;
defaultsTarget?: string | undefined;
falseIcon?: IconValue | undefined;
trueIcon?: IconValue | undefined;
baseColor?: string | undefined;
trueValue?: any;
falseValue?: any;
} & {}, {
isFocused: vue.ShallowRef<boolean>;
input: Ref<HTMLInputElement | undefined>;
}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<{
'update:modelValue': (value: any) => boolean;
}, "$children" | "v-slot:default" | "v-slots" | "modelValue" | "update:modelValue" | "v-slot:input" | "v-slot:label">, string, {
inline: boolean;
error: boolean;
style: vue.StyleValue;
disabled: boolean | null;
multiple: boolean | null;
readonly: boolean | null;
density: Density;
ripple: boolean;
valueComparator: typeof deepEqual;
}, {}, string, vue.SlotsType<Partial<{
default: (arg: {
backgroundColorClasses: Ref<string[]>;
backgroundColorStyles: Ref<CSSProperties>;
}) => VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>[];
label: (arg: {
label: string | undefined;
props: Record<string, unknown>;
}) => VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>[];
input: (arg: SelectionControlSlot) => VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>[];
}>>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new <T>(props: {
modelValue?: T | undefined;
'onUpdate:modelValue'?: ((value: T) => void) | undefined;
}, slots: VSelectionControlSlots) => GenericProps<{
modelValue?: T | undefined;
'onUpdate:modelValue'?: ((value: T) => void) | undefined;
}, VSelectionControlSlots>) & FilterPropsOptions<{
theme: StringConstructor;
density: {
type: vue.PropType<Density>;
default: string;
validator: (v: any) => boolean;
};
class: vue.PropType<any>;
style: {
type: vue.PropType<vue.StyleValue>;
default: null;
};
color: StringConstructor;
disabled: {
type: vue.PropType<boolean | null>;
default: null;
};
defaultsTarget: StringConstructor;
error: BooleanConstructor;
id: StringConstructor;
inline: BooleanConstructor;
falseIcon: vue.PropType<IconValue>;
trueIcon: vue.PropType<IconValue>;
ripple: {
type: BooleanConstructor;
default: boolean;
};
multiple: {
type: vue.PropType<boolean | null>;
default: null;
};
name: StringConstructor;
readonly: {
type: vue.PropType<boolean | null>;
default: null;
};
modelValue: null;
type: StringConstructor;
valueComparator: {
type: vue.PropType<typeof deepEqual>;
default: typeof deepEqual;
};
label: StringConstructor;
baseColor: StringConstructor;
trueValue: null;
falseValue: null;
value: null;
}, ExtractPropTypes<{
theme: StringConstructor;
density: {
type: vue.PropType<Density>;
default: string;
validator: (v: any) => boolean;
};
class: vue.PropType<any>;
style: {
type: vue.PropType<vue.StyleValue>;
default: null;
};
color: StringConstructor;
disabled: {
type: vue.PropType<boolean | null>;
default: null;
};
defaultsTarget: StringConstructor;
error: BooleanConstructor;
id: StringConstructor;
inline: BooleanConstructor;
falseIcon: vue.PropType<IconValue>;
trueIcon: vue.PropType<IconValue>;
ripple: {
type: BooleanConstructor;
default: boolean;
};
multiple: {
type: vue.PropType<boolean | null>;
default: null;
};
name: StringConstructor;
readonly: {
type: vue.PropType<boolean | null>;
default: null;
};
modelValue: null;
type: StringConstructor;
valueComparator: {
type: vue.PropType<typeof deepEqual>;
default: typeof deepEqual;
};
label: StringConstructor;
baseColor: StringConstructor;
trueValue: null;
falseValue: null;
value: null;
}>>;
type VSelectionControl = InstanceType<typeof VSelectionControl>;
export { VSelectionControl };

View File

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

View File

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