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,88 @@
.v-dialog {
align-items: center;
justify-content: center;
margin: auto;
}
.v-dialog > .v-overlay__content {
max-height: calc(100% - 48px);
width: calc(100% - 48px);
max-width: calc(100% - 48px);
margin: 24px;
}
.v-dialog > .v-overlay__content,
.v-dialog > .v-overlay__content > form {
display: flex;
flex-direction: column;
min-height: 0;
}
.v-dialog > .v-overlay__content > .v-card,
.v-dialog > .v-overlay__content > .v-sheet,
.v-dialog > .v-overlay__content > form > .v-card,
.v-dialog > .v-overlay__content > form > .v-sheet {
--v-scrollbar-offset: 0px;
border-radius: 4px;
overflow-y: auto;
box-shadow: 0px 11px 15px -7px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 24px 38px 3px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 9px 46px 8px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
}
.v-dialog > .v-overlay__content > .v-card,
.v-dialog > .v-overlay__content > form > .v-card {
display: flex;
flex-direction: column;
}
.v-dialog > .v-overlay__content > .v-card > .v-card-item,
.v-dialog > .v-overlay__content > form > .v-card > .v-card-item {
padding: 14px 24px 0;
}
.v-dialog > .v-overlay__content > .v-card > .v-card-item + .v-card-text,
.v-dialog > .v-overlay__content > form > .v-card > .v-card-item + .v-card-text {
padding-top: 10px;
}
.v-dialog > .v-overlay__content > .v-card > .v-card-text,
.v-dialog > .v-overlay__content > form > .v-card > .v-card-text {
font-size: inherit;
letter-spacing: 0.03125em;
line-height: inherit;
padding: 16px 24px 10px;
}
.v-dialog--fullscreen {
--v-scrollbar-offset: 0px;
}
.v-dialog--fullscreen > .v-overlay__content {
border-radius: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
overflow-y: auto;
top: 0;
left: 0;
}
.v-dialog--fullscreen > .v-overlay__content > .v-card,
.v-dialog--fullscreen > .v-overlay__content > .v-sheet,
.v-dialog--fullscreen > .v-overlay__content > form > .v-card,
.v-dialog--fullscreen > .v-overlay__content > form > .v-sheet {
min-height: 100%;
min-width: 100%;
border-radius: 0;
}
.v-dialog--scrollable > .v-overlay__content,
.v-dialog--scrollable > .v-overlay__content > form {
display: flex;
}
.v-dialog--scrollable > .v-overlay__content > .v-card,
.v-dialog--scrollable > .v-overlay__content > form > .v-card {
display: flex;
flex: 1 1 100%;
flex-direction: column;
max-height: 100%;
max-width: 100%;
}
.v-dialog--scrollable > .v-overlay__content > .v-card > .v-card-text,
.v-dialog--scrollable > .v-overlay__content > form > .v-card > .v-card-text {
backface-visibility: hidden;
overflow-y: auto;
}

View File

@@ -0,0 +1,122 @@
import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
// Styles
import "./VDialog.css";
// Components
import { VDialogTransition } from "../transitions/index.mjs";
import { VDefaultsProvider } from "../VDefaultsProvider/index.mjs";
import { VOverlay } from "../VOverlay/index.mjs";
import { makeVOverlayProps } from "../VOverlay/VOverlay.mjs"; // Composables
import { forwardRefs } from "../../composables/forwardRefs.mjs";
import { useProxiedModel } from "../../composables/proxiedModel.mjs";
import { useScopeId } from "../../composables/scopeId.mjs"; // Utilities
import { computed, mergeProps, nextTick, ref, watch } from 'vue';
import { focusableChildren, genericComponent, IN_BROWSER, propsFactory, useRender } from "../../util/index.mjs"; // Types
export const makeVDialogProps = propsFactory({
fullscreen: Boolean,
retainFocus: {
type: Boolean,
default: true
},
scrollable: Boolean,
...makeVOverlayProps({
origin: 'center center',
scrollStrategy: 'block',
transition: {
component: VDialogTransition
},
zIndex: 2400
})
}, 'VDialog');
export const VDialog = genericComponent()({
name: 'VDialog',
props: makeVDialogProps(),
emits: {
'update:modelValue': value => true
},
setup(props, _ref) {
let {
slots
} = _ref;
const isActive = useProxiedModel(props, 'modelValue');
const {
scopeId
} = useScopeId();
const overlay = ref();
function onFocusin(e) {
const before = e.relatedTarget;
const after = e.target;
if (before !== after && overlay.value?.contentEl &&
// We're the topmost dialog
overlay.value?.globalTop &&
// It isn't the document or the dialog body
![document, overlay.value.contentEl].includes(after) &&
// It isn't inside the dialog body
!overlay.value.contentEl.contains(after)) {
const focusable = focusableChildren(overlay.value.contentEl);
if (!focusable.length) return;
const firstElement = focusable[0];
const lastElement = focusable[focusable.length - 1];
if (before === firstElement) {
lastElement.focus();
} else {
firstElement.focus();
}
}
}
if (IN_BROWSER) {
watch(() => isActive.value && props.retainFocus, val => {
val ? document.addEventListener('focusin', onFocusin) : document.removeEventListener('focusin', onFocusin);
}, {
immediate: true
});
}
watch(isActive, async val => {
await nextTick();
if (val) {
overlay.value.contentEl?.focus({
preventScroll: true
});
} else {
overlay.value.activatorEl?.focus({
preventScroll: true
});
}
});
const activatorProps = computed(() => mergeProps({
'aria-haspopup': 'dialog',
'aria-expanded': String(isActive.value)
}, props.activatorProps));
useRender(() => {
const overlayProps = VOverlay.filterProps(props);
return _createVNode(VOverlay, _mergeProps({
"ref": overlay,
"class": ['v-dialog', {
'v-dialog--fullscreen': props.fullscreen,
'v-dialog--scrollable': props.scrollable
}, props.class],
"style": props.style
}, overlayProps, {
"modelValue": isActive.value,
"onUpdate:modelValue": $event => isActive.value = $event,
"aria-modal": "true",
"activatorProps": activatorProps.value,
"role": "dialog"
}, scopeId), {
activator: slots.activator,
default: function () {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _createVNode(VDefaultsProvider, {
"root": "VDialog"
}, {
default: () => [slots.default?.(...args)]
});
}
});
});
return forwardRefs({}, overlay);
}
});
//# sourceMappingURL=VDialog.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,83 @@
@use '../../styles/tools'
@use './variables' as *
// Block
.v-dialog
align-items: center
justify-content: center
margin: auto
> .v-overlay__content
max-height: calc(100% - #{$dialog-margin * 2})
width: calc(100% - #{$dialog-margin * 2})
max-width: calc(100% - #{$dialog-margin * 2})
margin: $dialog-margin
&,
> form
display: flex
flex-direction: column
min-height: 0
> .v-card,
> .v-sheet
--v-scrollbar-offset: 0px
border-radius: $dialog-border-radius
overflow-y: auto
@include tools.elevation($dialog-elevation)
> .v-card
display: flex
flex-direction: column
> .v-card-item
padding: $dialog-card-header-padding
+ .v-card-text
padding-top: $dialog-card-header-text-padding-top
> .v-card-text
font-size: inherit
letter-spacing: $dialog-card-text-letter-spacing
line-height: inherit
padding: $dialog-card-text-padding
.v-dialog--fullscreen
--v-scrollbar-offset: 0px
> .v-overlay__content
border-radius: 0
margin: 0
padding: 0
width: 100%
height: 100%
max-width: 100%
max-height: 100%
overflow-y: auto
top: 0
left: 0
&,
> form
> .v-card,
> .v-sheet
min-height: 100%
min-width: 100%
border-radius: 0
.v-dialog--scrollable > .v-overlay__content
&,
> form
display: flex
> .v-card
display: flex
flex: 1 1 100%
flex-direction: column
max-height: 100%
max-width: 100%
> .v-card-text
backface-visibility: hidden
overflow-y: auto

View File

@@ -0,0 +1,13 @@
@use 'sass:map';
@use '../../styles/settings';
@use '../../styles/tools';
// Defaults
$dialog-elevation: 24 !default;
$dialog-border-radius: settings.$border-radius-root !default;
$dialog-margin: 24px !default;
$dialog-card-header-padding: 14px 24px 0 !default;
$dialog-card-header-text-padding-top: 10px !default;
$dialog-card-text-padding: 16px 24px 10px !default;
$dialog-card-text-letter-spacing: tools.map-deep-get(settings.$typography, 'body-1', 'letter-spacing') !default;

File diff suppressed because it is too large Load Diff

View File

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

View File

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