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,43 @@
.v-slide-group {
display: flex;
overflow: hidden;
}
.v-slide-group__next,
.v-slide-group__prev {
align-items: center;
display: flex;
flex: 0 1 52px;
justify-content: center;
min-width: 52px;
cursor: pointer;
}
.v-slide-group__next--disabled,
.v-slide-group__prev--disabled {
pointer-events: none;
opacity: var(--v-disabled-opacity);
}
.v-slide-group__content {
display: flex;
flex: 1 0 auto;
position: relative;
transition: 0.2s all cubic-bezier(0.4, 0, 0.2, 1);
white-space: nowrap;
}
.v-slide-group__content > * {
white-space: initial;
}
.v-slide-group__container {
contain: content;
display: flex;
flex: 1 1 auto;
overflow: hidden;
}
.v-slide-group--vertical,
.v-slide-group--vertical .v-slide-group__container,
.v-slide-group--vertical .v-slide-group__content {
flex-direction: column;
}

View File

@ -0,0 +1,334 @@
import { createVNode as _createVNode } from "vue";
// Styles
import "./VSlideGroup.css";
// Components
import { VFadeTransition } from "../transitions/index.mjs";
import { VIcon } from "../VIcon/index.mjs"; // Composables
import { makeComponentProps } from "../../composables/component.mjs";
import { makeDisplayProps, useDisplay } from "../../composables/display.mjs";
import { makeGroupProps, useGroup } from "../../composables/group.mjs";
import { IconValue } from "../../composables/icons.mjs";
import { useRtl } from "../../composables/locale.mjs";
import { useResizeObserver } from "../../composables/resizeObserver.mjs";
import { makeTagProps } from "../../composables/tag.mjs"; // Utilities
import { computed, shallowRef, watch } from 'vue';
import { bias, calculateCenteredOffset, calculateUpdatedOffset } from "./helpers.mjs";
import { clamp, focusableChildren, genericComponent, IN_BROWSER, propsFactory, useRender } from "../../util/index.mjs"; // Types
export const VSlideGroupSymbol = Symbol.for('vuetify:v-slide-group');
export const makeVSlideGroupProps = propsFactory({
centerActive: Boolean,
direction: {
type: String,
default: 'horizontal'
},
symbol: {
type: null,
default: VSlideGroupSymbol
},
nextIcon: {
type: IconValue,
default: '$next'
},
prevIcon: {
type: IconValue,
default: '$prev'
},
showArrows: {
type: [Boolean, String],
validator: v => typeof v === 'boolean' || ['always', 'desktop', 'mobile'].includes(v)
},
...makeComponentProps(),
...makeDisplayProps(),
...makeTagProps(),
...makeGroupProps({
selectedClass: 'v-slide-group-item--active'
})
}, 'VSlideGroup');
export const VSlideGroup = genericComponent()({
name: 'VSlideGroup',
props: makeVSlideGroupProps(),
emits: {
'update:modelValue': value => true
},
setup(props, _ref) {
let {
slots
} = _ref;
const {
isRtl
} = useRtl();
const {
displayClasses,
mobile
} = useDisplay(props);
const group = useGroup(props, props.symbol);
const isOverflowing = shallowRef(false);
const scrollOffset = shallowRef(0);
const containerSize = shallowRef(0);
const contentSize = shallowRef(0);
const isHorizontal = computed(() => props.direction === 'horizontal');
const {
resizeRef: containerRef,
contentRect: containerRect
} = useResizeObserver();
const {
resizeRef: contentRef,
contentRect
} = useResizeObserver();
const firstSelectedIndex = computed(() => {
if (!group.selected.value.length) return -1;
return group.items.value.findIndex(item => item.id === group.selected.value[0]);
});
const lastSelectedIndex = computed(() => {
if (!group.selected.value.length) return -1;
return group.items.value.findIndex(item => item.id === group.selected.value[group.selected.value.length - 1]);
});
if (IN_BROWSER) {
let frame = -1;
watch(() => [group.selected.value, containerRect.value, contentRect.value, isHorizontal.value], () => {
cancelAnimationFrame(frame);
frame = requestAnimationFrame(() => {
if (containerRect.value && contentRect.value) {
const sizeProperty = isHorizontal.value ? 'width' : 'height';
containerSize.value = containerRect.value[sizeProperty];
contentSize.value = contentRect.value[sizeProperty];
isOverflowing.value = containerSize.value + 1 < contentSize.value;
}
if (firstSelectedIndex.value >= 0 && contentRef.value) {
// TODO: Is this too naive? Should we store element references in group composable?
const selectedElement = contentRef.value.children[lastSelectedIndex.value];
if (firstSelectedIndex.value === 0 || !isOverflowing.value) {
scrollOffset.value = 0;
} else if (props.centerActive) {
scrollOffset.value = calculateCenteredOffset({
selectedElement,
containerSize: containerSize.value,
contentSize: contentSize.value,
isRtl: isRtl.value,
isHorizontal: isHorizontal.value
});
} else if (isOverflowing.value) {
scrollOffset.value = calculateUpdatedOffset({
selectedElement,
containerSize: containerSize.value,
contentSize: contentSize.value,
isRtl: isRtl.value,
currentScrollOffset: scrollOffset.value,
isHorizontal: isHorizontal.value
});
}
}
});
});
}
const disableTransition = shallowRef(false);
let startTouch = 0;
let startOffset = 0;
function onTouchstart(e) {
const sizeProperty = isHorizontal.value ? 'clientX' : 'clientY';
const sign = isRtl.value && isHorizontal.value ? -1 : 1;
startOffset = sign * scrollOffset.value;
startTouch = e.touches[0][sizeProperty];
disableTransition.value = true;
}
function onTouchmove(e) {
if (!isOverflowing.value) return;
const sizeProperty = isHorizontal.value ? 'clientX' : 'clientY';
const sign = isRtl.value && isHorizontal.value ? -1 : 1;
scrollOffset.value = sign * (startOffset + startTouch - e.touches[0][sizeProperty]);
}
function onTouchend(e) {
const maxScrollOffset = contentSize.value - containerSize.value;
if (scrollOffset.value < 0 || !isOverflowing.value) {
scrollOffset.value = 0;
} else if (scrollOffset.value >= maxScrollOffset) {
scrollOffset.value = maxScrollOffset;
}
disableTransition.value = false;
}
function onScroll() {
if (!containerRef.value) return;
containerRef.value[isHorizontal.value ? 'scrollLeft' : 'scrollTop'] = 0;
}
const isFocused = shallowRef(false);
function onFocusin(e) {
isFocused.value = true;
if (!isOverflowing.value || !contentRef.value) return;
// Focused element is likely to be the root of an item, so a
// breadth-first search will probably find it in the first iteration
for (const el of e.composedPath()) {
for (const item of contentRef.value.children) {
if (item === el) {
scrollOffset.value = calculateUpdatedOffset({
selectedElement: item,
containerSize: containerSize.value,
contentSize: contentSize.value,
isRtl: isRtl.value,
currentScrollOffset: scrollOffset.value,
isHorizontal: isHorizontal.value
});
return;
}
}
}
}
function onFocusout(e) {
isFocused.value = false;
}
function onFocus(e) {
if (!isFocused.value && !(e.relatedTarget && contentRef.value?.contains(e.relatedTarget))) focus();
}
function onKeydown(e) {
if (!contentRef.value) return;
if (isHorizontal.value) {
if (e.key === 'ArrowRight') {
focus(isRtl.value ? 'prev' : 'next');
} else if (e.key === 'ArrowLeft') {
focus(isRtl.value ? 'next' : 'prev');
}
} else {
if (e.key === 'ArrowDown') {
focus('next');
} else if (e.key === 'ArrowUp') {
focus('prev');
}
}
if (e.key === 'Home') {
focus('first');
} else if (e.key === 'End') {
focus('last');
}
}
function focus(location) {
if (!contentRef.value) return;
if (!location) {
const focusable = focusableChildren(contentRef.value);
focusable[0]?.focus();
} else if (location === 'next') {
const el = contentRef.value.querySelector(':focus')?.nextElementSibling;
if (el) el.focus();else focus('first');
} else if (location === 'prev') {
const el = contentRef.value.querySelector(':focus')?.previousElementSibling;
if (el) el.focus();else focus('last');
} else if (location === 'first') {
contentRef.value.firstElementChild?.focus();
} else if (location === 'last') {
contentRef.value.lastElementChild?.focus();
}
}
function scrollTo(location) {
const newAbsoluteOffset = scrollOffset.value + (location === 'prev' ? -1 : 1) * containerSize.value;
scrollOffset.value = clamp(newAbsoluteOffset, 0, contentSize.value - containerSize.value);
}
const contentStyles = computed(() => {
// This adds friction when scrolling the 'wrong' way when at max offset
let scrollAmount = scrollOffset.value > contentSize.value - containerSize.value ? -(contentSize.value - containerSize.value) + bias(contentSize.value - containerSize.value - scrollOffset.value) : -scrollOffset.value;
// This adds friction when scrolling the 'wrong' way when at min offset
if (scrollOffset.value <= 0) {
scrollAmount = bias(-scrollOffset.value);
}
const sign = isRtl.value && isHorizontal.value ? -1 : 1;
return {
transform: `translate${isHorizontal.value ? 'X' : 'Y'}(${sign * scrollAmount}px)`,
transition: disableTransition.value ? 'none' : '',
willChange: disableTransition.value ? 'transform' : ''
};
});
const slotProps = computed(() => ({
next: group.next,
prev: group.prev,
select: group.select,
isSelected: group.isSelected
}));
const hasAffixes = computed(() => {
switch (props.showArrows) {
// Always show arrows on desktop & mobile
case 'always':
return true;
// Always show arrows on desktop
case 'desktop':
return !mobile.value;
// Show arrows on mobile when overflowing.
// This matches the default 2.2 behavior
case true:
return isOverflowing.value || Math.abs(scrollOffset.value) > 0;
// Always show on mobile
case 'mobile':
return mobile.value || isOverflowing.value || Math.abs(scrollOffset.value) > 0;
// https://material.io/components/tabs#scrollable-tabs
// Always show arrows when
// overflowed on desktop
default:
return !mobile.value && (isOverflowing.value || Math.abs(scrollOffset.value) > 0);
}
});
const hasPrev = computed(() => {
return Math.abs(scrollOffset.value) > 0;
});
const hasNext = computed(() => {
// Check one scroll ahead to know the width of right-most item
return contentSize.value > Math.abs(scrollOffset.value) + containerSize.value;
});
useRender(() => _createVNode(props.tag, {
"class": ['v-slide-group', {
'v-slide-group--vertical': !isHorizontal.value,
'v-slide-group--has-affixes': hasAffixes.value,
'v-slide-group--is-overflowing': isOverflowing.value
}, displayClasses.value, props.class],
"style": props.style,
"tabindex": isFocused.value || group.selected.value.length ? -1 : 0,
"onFocus": onFocus
}, {
default: () => [hasAffixes.value && _createVNode("div", {
"key": "prev",
"class": ['v-slide-group__prev', {
'v-slide-group__prev--disabled': !hasPrev.value
}],
"onClick": () => hasPrev.value && scrollTo('prev')
}, [slots.prev?.(slotProps.value) ?? _createVNode(VFadeTransition, null, {
default: () => [_createVNode(VIcon, {
"icon": isRtl.value ? props.nextIcon : props.prevIcon
}, null)]
})]), _createVNode("div", {
"key": "container",
"ref": containerRef,
"class": "v-slide-group__container",
"onScroll": onScroll
}, [_createVNode("div", {
"ref": contentRef,
"class": "v-slide-group__content",
"style": contentStyles.value,
"onTouchstartPassive": onTouchstart,
"onTouchmovePassive": onTouchmove,
"onTouchendPassive": onTouchend,
"onFocusin": onFocusin,
"onFocusout": onFocusout,
"onKeydown": onKeydown
}, [slots.default?.(slotProps.value)])]), hasAffixes.value && _createVNode("div", {
"key": "next",
"class": ['v-slide-group__next', {
'v-slide-group__next--disabled': !hasNext.value
}],
"onClick": () => hasNext.value && scrollTo('next')
}, [slots.next?.(slotProps.value) ?? _createVNode(VFadeTransition, null, {
default: () => [_createVNode(VIcon, {
"icon": isRtl.value ? props.prevIcon : props.nextIcon
}, null)]
})])]
}));
return {
selected: group.selected,
scrollTo,
scrollOffset,
focus
};
}
});
//# sourceMappingURL=VSlideGroup.mjs.map

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,47 @@
@use 'sass:math'
@use 'sass:map'
@use '../../styles/settings'
@use '../../styles/tools'
@use './variables' as *
// Block
.v-slide-group
display: flex
overflow: hidden
// Element
.v-slide-group__next,
.v-slide-group__prev
align-items: center
display: flex
flex: 0 1 $slide-group-prev-basis
justify-content: center
min-width: $slide-group-prev-basis
cursor: pointer
&--disabled
pointer-events: none
opacity: var(--v-disabled-opacity)
.v-slide-group__content
display: flex
flex: 1 0 auto
position: relative
transition: 0.2s all settings.$standard-easing
white-space: nowrap
> *
white-space: initial
.v-slide-group__container
contain: content
display: flex
flex: 1 1 auto
overflow: hidden
// Modifiers
.v-slide-group--vertical
&,
.v-slide-group__container,
.v-slide-group__content
flex-direction: column

View File

@ -0,0 +1,24 @@
// Composables
import { makeGroupItemProps, useGroupItem } from "../../composables/group.mjs"; // Utilities
import { VSlideGroupSymbol } from "./VSlideGroup.mjs";
import { genericComponent } from "../../util/index.mjs"; // Types
export const VSlideGroupItem = genericComponent()({
name: 'VSlideGroupItem',
props: makeGroupItemProps(),
emits: {
'group:selected': val => true
},
setup(props, _ref) {
let {
slots
} = _ref;
const slideGroupItem = useGroupItem(props, VSlideGroupSymbol);
return () => slots.default?.({
isSelected: slideGroupItem.isSelected.value,
select: slideGroupItem.select,
toggle: slideGroupItem.toggle,
selectedClass: slideGroupItem.selectedClass.value
});
}
});
//# sourceMappingURL=VSlideGroupItem.mjs.map

View File

@ -0,0 +1 @@
{"version":3,"file":"VSlideGroupItem.mjs","names":["makeGroupItemProps","useGroupItem","VSlideGroupSymbol","genericComponent","VSlideGroupItem","name","props","emits","val","setup","_ref","slots","slideGroupItem","default","isSelected","value","select","toggle","selectedClass"],"sources":["../../../src/components/VSlideGroup/VSlideGroupItem.tsx"],"sourcesContent":["// Composables\nimport { makeGroupItemProps, useGroupItem } from '@/composables/group'\n\n// Utilities\nimport { VSlideGroupSymbol } from './VSlideGroup'\nimport { genericComponent } from '@/util'\n\n// Types\nimport type { UnwrapRef } from 'vue'\nimport type { GroupItemProvide } from '@/composables/group'\n\ntype VSlideGroupItemSlots = {\n default: {\n isSelected: UnwrapRef<GroupItemProvide['isSelected']>\n select: GroupItemProvide['select']\n toggle: GroupItemProvide['toggle']\n selectedClass: UnwrapRef<GroupItemProvide['selectedClass']>\n }\n}\n\nexport const VSlideGroupItem = genericComponent<VSlideGroupItemSlots>()({\n name: 'VSlideGroupItem',\n\n props: makeGroupItemProps(),\n\n emits: {\n 'group:selected': (val: { value: boolean }) => true,\n },\n\n setup (props, { slots }) {\n const slideGroupItem = useGroupItem(props, VSlideGroupSymbol)\n\n return () => slots.default?.({\n isSelected: slideGroupItem.isSelected.value,\n select: slideGroupItem.select,\n toggle: slideGroupItem.toggle,\n selectedClass: slideGroupItem.selectedClass.value,\n })\n },\n})\n\nexport type VSlideGroupItem = InstanceType<typeof VSlideGroupItem>\n"],"mappings":"AAAA;AAAA,SACSA,kBAAkB,EAAEC,YAAY,uCAEzC;AAAA,SACSC,iBAAiB;AAAA,SACjBC,gBAAgB,gCAEzB;AAaA,OAAO,MAAMC,eAAe,GAAGD,gBAAgB,CAAuB,CAAC,CAAC;EACtEE,IAAI,EAAE,iBAAiB;EAEvBC,KAAK,EAAEN,kBAAkB,CAAC,CAAC;EAE3BO,KAAK,EAAE;IACL,gBAAgB,EAAGC,GAAuB,IAAK;EACjD,CAAC;EAEDC,KAAKA,CAAEH,KAAK,EAAAI,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAME,cAAc,GAAGX,YAAY,CAACK,KAAK,EAAEJ,iBAAiB,CAAC;IAE7D,OAAO,MAAMS,KAAK,CAACE,OAAO,GAAG;MAC3BC,UAAU,EAAEF,cAAc,CAACE,UAAU,CAACC,KAAK;MAC3CC,MAAM,EAAEJ,cAAc,CAACI,MAAM;MAC7BC,MAAM,EAAEL,cAAc,CAACK,MAAM;MAC7BC,aAAa,EAAEN,cAAc,CAACM,aAAa,CAACH;IAC9C,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}

View File

@ -0,0 +1 @@
$slide-group-prev-basis: 52px !default;

View File

@ -0,0 +1,41 @@
export function bias(val) {
const c = 0.501;
const x = Math.abs(val);
return Math.sign(val) * (x / ((1 / c - 2) * (1 - x) + 1));
}
export function calculateUpdatedOffset(_ref) {
let {
selectedElement,
containerSize,
contentSize,
isRtl,
currentScrollOffset,
isHorizontal
} = _ref;
const clientSize = isHorizontal ? selectedElement.clientWidth : selectedElement.clientHeight;
const offsetStart = isHorizontal ? selectedElement.offsetLeft : selectedElement.offsetTop;
const adjustedOffsetStart = isRtl && isHorizontal ? contentSize - offsetStart - clientSize : offsetStart;
const totalSize = containerSize + currentScrollOffset;
const itemOffset = clientSize + adjustedOffsetStart;
const additionalOffset = clientSize * 0.4;
if (adjustedOffsetStart <= currentScrollOffset) {
currentScrollOffset = Math.max(adjustedOffsetStart - additionalOffset, 0);
} else if (totalSize <= itemOffset) {
currentScrollOffset = Math.min(currentScrollOffset - (totalSize - itemOffset - additionalOffset), contentSize - containerSize);
}
return currentScrollOffset;
}
export function calculateCenteredOffset(_ref2) {
let {
selectedElement,
containerSize,
contentSize,
isRtl,
isHorizontal
} = _ref2;
const clientSize = isHorizontal ? selectedElement.clientWidth : selectedElement.clientHeight;
const offsetStart = isHorizontal ? selectedElement.offsetLeft : selectedElement.offsetTop;
const offsetCentered = isRtl && isHorizontal ? contentSize - offsetStart - clientSize / 2 - containerSize / 2 : offsetStart + clientSize / 2 - containerSize / 2;
return Math.min(contentSize - containerSize, Math.max(0, offsetCentered));
}
//# sourceMappingURL=helpers.mjs.map

View File

@ -0,0 +1 @@
{"version":3,"file":"helpers.mjs","names":["bias","val","c","x","Math","abs","sign","calculateUpdatedOffset","_ref","selectedElement","containerSize","contentSize","isRtl","currentScrollOffset","isHorizontal","clientSize","clientWidth","clientHeight","offsetStart","offsetLeft","offsetTop","adjustedOffsetStart","totalSize","itemOffset","additionalOffset","max","min","calculateCenteredOffset","_ref2","offsetCentered"],"sources":["../../../src/components/VSlideGroup/helpers.ts"],"sourcesContent":["export function bias (val: number) {\n const c = 0.501\n const x = Math.abs(val)\n return Math.sign(val) * (x / ((1 / c - 2) * (1 - x) + 1))\n}\n\nexport function calculateUpdatedOffset ({\n selectedElement,\n containerSize,\n contentSize,\n isRtl,\n currentScrollOffset,\n isHorizontal,\n}: {\n selectedElement: HTMLElement\n containerSize: number\n contentSize: number\n isRtl: boolean\n currentScrollOffset: number\n isHorizontal: boolean\n}): number {\n const clientSize = isHorizontal ? selectedElement.clientWidth : selectedElement.clientHeight\n const offsetStart = isHorizontal ? selectedElement.offsetLeft : selectedElement.offsetTop\n const adjustedOffsetStart = isRtl && isHorizontal ? (contentSize - offsetStart - clientSize) : offsetStart\n\n const totalSize = containerSize + currentScrollOffset\n const itemOffset = clientSize + adjustedOffsetStart\n const additionalOffset = clientSize * 0.4\n\n if (adjustedOffsetStart <= currentScrollOffset) {\n currentScrollOffset = Math.max(adjustedOffsetStart - additionalOffset, 0)\n } else if (totalSize <= itemOffset) {\n currentScrollOffset = Math.min(currentScrollOffset - (totalSize - itemOffset - additionalOffset), contentSize - containerSize)\n }\n\n return currentScrollOffset\n}\n\nexport function calculateCenteredOffset ({\n selectedElement,\n containerSize,\n contentSize,\n isRtl,\n isHorizontal,\n}: {\n selectedElement: HTMLElement\n containerSize: number\n contentSize: number\n isRtl: boolean\n isHorizontal: boolean\n}): number {\n const clientSize = isHorizontal ? selectedElement.clientWidth : selectedElement.clientHeight\n const offsetStart = isHorizontal ? selectedElement.offsetLeft : selectedElement.offsetTop\n\n const offsetCentered = isRtl && isHorizontal\n ? contentSize - offsetStart - clientSize / 2 - containerSize / 2\n : offsetStart + clientSize / 2 - containerSize / 2\n\n return Math.min(contentSize - containerSize, Math.max(0, offsetCentered))\n}\n"],"mappings":"AAAA,OAAO,SAASA,IAAIA,CAAEC,GAAW,EAAE;EACjC,MAAMC,CAAC,GAAG,KAAK;EACf,MAAMC,CAAC,GAAGC,IAAI,CAACC,GAAG,CAACJ,GAAG,CAAC;EACvB,OAAOG,IAAI,CAACE,IAAI,CAACL,GAAG,CAAC,IAAIE,CAAC,IAAI,CAAC,CAAC,GAAGD,CAAC,GAAG,CAAC,KAAK,CAAC,GAAGC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;AAC3D;AAEA,OAAO,SAASI,sBAAsBA,CAAAC,IAAA,EAc3B;EAAA,IAd6B;IACtCC,eAAe;IACfC,aAAa;IACbC,WAAW;IACXC,KAAK;IACLC,mBAAmB;IACnBC;EAQF,CAAC,GAAAN,IAAA;EACC,MAAMO,UAAU,GAAGD,YAAY,GAAGL,eAAe,CAACO,WAAW,GAAGP,eAAe,CAACQ,YAAY;EAC5F,MAAMC,WAAW,GAAGJ,YAAY,GAAGL,eAAe,CAACU,UAAU,GAAGV,eAAe,CAACW,SAAS;EACzF,MAAMC,mBAAmB,GAAGT,KAAK,IAAIE,YAAY,GAAIH,WAAW,GAAGO,WAAW,GAAGH,UAAU,GAAIG,WAAW;EAE1G,MAAMI,SAAS,GAAGZ,aAAa,GAAGG,mBAAmB;EACrD,MAAMU,UAAU,GAAGR,UAAU,GAAGM,mBAAmB;EACnD,MAAMG,gBAAgB,GAAGT,UAAU,GAAG,GAAG;EAEzC,IAAIM,mBAAmB,IAAIR,mBAAmB,EAAE;IAC9CA,mBAAmB,GAAGT,IAAI,CAACqB,GAAG,CAACJ,mBAAmB,GAAGG,gBAAgB,EAAE,CAAC,CAAC;EAC3E,CAAC,MAAM,IAAIF,SAAS,IAAIC,UAAU,EAAE;IAClCV,mBAAmB,GAAGT,IAAI,CAACsB,GAAG,CAACb,mBAAmB,IAAIS,SAAS,GAAGC,UAAU,GAAGC,gBAAgB,CAAC,EAAEb,WAAW,GAAGD,aAAa,CAAC;EAChI;EAEA,OAAOG,mBAAmB;AAC5B;AAEA,OAAO,SAASc,uBAAuBA,CAAAC,KAAA,EAY5B;EAAA,IAZ8B;IACvCnB,eAAe;IACfC,aAAa;IACbC,WAAW;IACXC,KAAK;IACLE;EAOF,CAAC,GAAAc,KAAA;EACC,MAAMb,UAAU,GAAGD,YAAY,GAAGL,eAAe,CAACO,WAAW,GAAGP,eAAe,CAACQ,YAAY;EAC5F,MAAMC,WAAW,GAAGJ,YAAY,GAAGL,eAAe,CAACU,UAAU,GAAGV,eAAe,CAACW,SAAS;EAEzF,MAAMS,cAAc,GAAGjB,KAAK,IAAIE,YAAY,GACxCH,WAAW,GAAGO,WAAW,GAAGH,UAAU,GAAG,CAAC,GAAGL,aAAa,GAAG,CAAC,GAC9DQ,WAAW,GAAGH,UAAU,GAAG,CAAC,GAAGL,aAAa,GAAG,CAAC;EAEpD,OAAON,IAAI,CAACsB,GAAG,CAACf,WAAW,GAAGD,aAAa,EAAEN,IAAI,CAACqB,GAAG,CAAC,CAAC,EAAEI,cAAc,CAAC,CAAC;AAC3E"}

View File

@ -0,0 +1,546 @@
import * as vue from 'vue';
import { ComponentPropsOptions, ExtractPropTypes, VNodeChild, VNode, JSXComponent, PropType, ComponentInternalInstance, Ref, ComputedRef, InjectionKey, UnwrapRef } 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 const breakpoints: readonly ["sm", "md", "lg", "xl", "xxl"];
type Breakpoint = typeof breakpoints[number];
type DisplayBreakpoint = 'xs' | Breakpoint;
type IconValue = string | (string | [path: string, opacity: number])[] | JSXComponent;
declare const IconValue: PropType<IconValue>;
interface GroupItem {
id: number;
value: Ref<unknown>;
disabled: Ref<boolean | undefined>;
}
interface GroupProvide {
register: (item: GroupItem, cmp: ComponentInternalInstance) => void;
unregister: (id: number) => void;
select: (id: number, value: boolean) => void;
selected: Ref<Readonly<number[]>>;
isSelected: (id: number) => boolean;
prev: () => void;
next: () => void;
selectedClass: Ref<string | undefined>;
items: ComputedRef<{
id: number;
value: unknown;
disabled: boolean | undefined;
}[]>;
disabled: Ref<boolean | undefined>;
getItemIndex: (value: unknown) => number;
}
interface GroupItemProvide {
id: number;
isSelected: Ref<boolean>;
toggle: () => void;
select: (value: boolean) => void;
selectedClass: Ref<(string | undefined)[] | false>;
value: Ref<unknown>;
disabled: Ref<boolean | undefined>;
group: GroupProvide;
}
interface SlideGroupSlot {
next: GroupProvide['next'];
prev: GroupProvide['prev'];
select: GroupProvide['select'];
isSelected: GroupProvide['isSelected'];
}
type VSlideGroupSlots = {
default: SlideGroupSlot;
prev: SlideGroupSlot;
next: SlideGroupSlot;
};
declare const VSlideGroup: {
new (...args: any[]): vue.CreateComponentPublicInstance<{
symbol: any;
direction: "horizontal" | "vertical";
style: vue.StyleValue;
disabled: boolean;
multiple: boolean;
tag: string;
selectedClass: string;
centerActive: boolean;
nextIcon: IconValue;
prevIcon: IconValue;
} & {
max?: number | undefined;
class?: any;
mandatory?: boolean | "force" | undefined;
mobileBreakpoint?: number | DisplayBreakpoint | undefined;
showArrows?: string | boolean | undefined;
} & {}, {
selected: vue.Ref<readonly number[]>;
scrollTo: (location: 'prev' | 'next') => void;
scrollOffset: vue.ShallowRef<number>;
focus: (location?: 'next' | 'prev' | 'first' | 'last') => void;
}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<{
'update:modelValue': (value: any) => boolean;
}, "$children" | "v-slot:default" | "v-slots" | "modelValue" | "update:modelValue" | "v-slot:next" | "v-slot:prev">, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
symbol: any;
direction: "horizontal" | "vertical";
style: vue.StyleValue;
disabled: boolean;
multiple: boolean;
tag: string;
selectedClass: string;
centerActive: boolean;
nextIcon: IconValue;
prevIcon: IconValue;
} & {
max?: number | undefined;
class?: any;
mandatory?: boolean | "force" | undefined;
mobileBreakpoint?: number | DisplayBreakpoint | undefined;
showArrows?: string | boolean | undefined;
} & {}, {
symbol: any;
direction: "horizontal" | "vertical";
style: vue.StyleValue;
disabled: boolean;
multiple: boolean;
tag: string;
selectedClass: string;
centerActive: boolean;
nextIcon: IconValue;
prevIcon: IconValue;
}, true, {}, vue.SlotsType<Partial<{
default: (arg: SlideGroupSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>[];
prev: (arg: SlideGroupSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>[];
next: (arg: SlideGroupSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>[];
}>>, {
P: {};
B: {};
D: {};
C: {};
M: {};
Defaults: {};
}, {
symbol: any;
direction: "horizontal" | "vertical";
style: vue.StyleValue;
disabled: boolean;
multiple: boolean;
tag: string;
selectedClass: string;
centerActive: boolean;
nextIcon: IconValue;
prevIcon: IconValue;
} & {
max?: number | undefined;
class?: any;
mandatory?: boolean | "force" | undefined;
mobileBreakpoint?: number | DisplayBreakpoint | undefined;
showArrows?: string | boolean | undefined;
} & {}, {
selected: vue.Ref<readonly number[]>;
scrollTo: (location: 'prev' | 'next') => void;
scrollOffset: vue.ShallowRef<number>;
focus: (location?: 'next' | 'prev' | 'first' | 'last') => void;
}, {}, {}, {}, {
symbol: any;
direction: "horizontal" | "vertical";
style: vue.StyleValue;
disabled: boolean;
multiple: boolean;
tag: string;
selectedClass: string;
centerActive: boolean;
nextIcon: IconValue;
prevIcon: IconValue;
}>;
__isFragment?: undefined;
__isTeleport?: undefined;
__isSuspense?: undefined;
} & vue.ComponentOptionsBase<{
symbol: any;
direction: "horizontal" | "vertical";
style: vue.StyleValue;
disabled: boolean;
multiple: boolean;
tag: string;
selectedClass: string;
centerActive: boolean;
nextIcon: IconValue;
prevIcon: IconValue;
} & {
max?: number | undefined;
class?: any;
mandatory?: boolean | "force" | undefined;
mobileBreakpoint?: number | DisplayBreakpoint | undefined;
showArrows?: string | boolean | undefined;
} & {}, {
selected: vue.Ref<readonly number[]>;
scrollTo: (location: 'prev' | 'next') => void;
scrollOffset: vue.ShallowRef<number>;
focus: (location?: 'next' | 'prev' | 'first' | 'last') => void;
}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Omit<{
'update:modelValue': (value: any) => boolean;
}, "$children" | "v-slot:default" | "v-slots" | "modelValue" | "update:modelValue" | "v-slot:next" | "v-slot:prev">, string, {
symbol: any;
direction: "horizontal" | "vertical";
style: vue.StyleValue;
disabled: boolean;
multiple: boolean;
tag: string;
selectedClass: string;
centerActive: boolean;
nextIcon: IconValue;
prevIcon: IconValue;
}, {}, string, vue.SlotsType<Partial<{
default: (arg: SlideGroupSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>[];
prev: (arg: SlideGroupSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>[];
next: (arg: SlideGroupSlot) => vue.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: VSlideGroupSlots) => GenericProps<{
modelValue?: T | undefined;
'onUpdate:modelValue'?: ((value: T) => void) | undefined;
}, VSlideGroupSlots>) & FilterPropsOptions<{
modelValue: {
type: null;
default: undefined;
};
multiple: BooleanConstructor;
mandatory: PropType<boolean | "force">;
max: NumberConstructor;
selectedClass: {
type: PropType<string>;
default: string;
};
disabled: BooleanConstructor;
tag: {
type: StringConstructor;
default: string;
};
mobileBreakpoint: PropType<number | DisplayBreakpoint>;
class: PropType<any>;
style: {
type: PropType<vue.StyleValue>;
default: null;
};
centerActive: BooleanConstructor;
direction: {
type: PropType<"horizontal" | "vertical">;
default: string;
};
symbol: {
type: null;
default: InjectionKey<GroupProvide>;
};
nextIcon: {
type: PropType<IconValue>;
default: string;
};
prevIcon: {
type: PropType<IconValue>;
default: string;
};
showArrows: {
type: (StringConstructor | BooleanConstructor)[];
validator: (v: any) => boolean;
};
}, vue.ExtractPropTypes<{
modelValue: {
type: null;
default: undefined;
};
multiple: BooleanConstructor;
mandatory: PropType<boolean | "force">;
max: NumberConstructor;
selectedClass: {
type: PropType<string>;
default: string;
};
disabled: BooleanConstructor;
tag: {
type: StringConstructor;
default: string;
};
mobileBreakpoint: PropType<number | DisplayBreakpoint>;
class: PropType<any>;
style: {
type: PropType<vue.StyleValue>;
default: null;
};
centerActive: BooleanConstructor;
direction: {
type: PropType<"horizontal" | "vertical">;
default: string;
};
symbol: {
type: null;
default: InjectionKey<GroupProvide>;
};
nextIcon: {
type: PropType<IconValue>;
default: string;
};
prevIcon: {
type: PropType<IconValue>;
default: string;
};
showArrows: {
type: (StringConstructor | BooleanConstructor)[];
validator: (v: any) => boolean;
};
}>>;
type VSlideGroup = InstanceType<typeof VSlideGroup>;
declare const VSlideGroupItem: {
new (...args: any[]): vue.CreateComponentPublicInstance<{
disabled: boolean;
} & {
value?: any;
selectedClass?: string | undefined;
} & {
$children?: vue.VNodeChild | {
default?: ((arg: {
isSelected: UnwrapRef<GroupItemProvide['isSelected']>;
select: GroupItemProvide['select'];
toggle: GroupItemProvide['toggle'];
selectedClass: UnwrapRef<GroupItemProvide['selectedClass']>;
}) => vue.VNodeChild) | undefined;
} | ((arg: {
isSelected: UnwrapRef<GroupItemProvide['isSelected']>;
select: GroupItemProvide['select'];
toggle: GroupItemProvide['toggle'];
selectedClass: UnwrapRef<GroupItemProvide['selectedClass']>;
}) => vue.VNodeChild);
'v-slots'?: {
default?: false | ((arg: {
isSelected: UnwrapRef<GroupItemProvide['isSelected']>;
select: GroupItemProvide['select'];
toggle: GroupItemProvide['toggle'];
selectedClass: UnwrapRef<GroupItemProvide['selectedClass']>;
}) => vue.VNodeChild) | undefined;
} | undefined;
} & {
"v-slot:default"?: false | ((arg: {
isSelected: UnwrapRef<GroupItemProvide['isSelected']>;
select: GroupItemProvide['select'];
toggle: GroupItemProvide['toggle'];
selectedClass: UnwrapRef<GroupItemProvide['selectedClass']>;
}) => vue.VNodeChild) | undefined;
} & {
"onGroup:selected"?: ((val: {
value: boolean;
}) => any) | undefined;
}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>[] | undefined, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
'group:selected': (val: {
value: boolean;
}) => true;
}, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
disabled: boolean;
} & {
value?: any;
selectedClass?: string | undefined;
} & {
$children?: vue.VNodeChild | {
default?: ((arg: {
isSelected: UnwrapRef<GroupItemProvide['isSelected']>;
select: GroupItemProvide['select'];
toggle: GroupItemProvide['toggle'];
selectedClass: UnwrapRef<GroupItemProvide['selectedClass']>;
}) => vue.VNodeChild) | undefined;
} | ((arg: {
isSelected: UnwrapRef<GroupItemProvide['isSelected']>;
select: GroupItemProvide['select'];
toggle: GroupItemProvide['toggle'];
selectedClass: UnwrapRef<GroupItemProvide['selectedClass']>;
}) => vue.VNodeChild);
'v-slots'?: {
default?: false | ((arg: {
isSelected: UnwrapRef<GroupItemProvide['isSelected']>;
select: GroupItemProvide['select'];
toggle: GroupItemProvide['toggle'];
selectedClass: UnwrapRef<GroupItemProvide['selectedClass']>;
}) => vue.VNodeChild) | undefined;
} | undefined;
} & {
"v-slot:default"?: false | ((arg: {
isSelected: UnwrapRef<GroupItemProvide['isSelected']>;
select: GroupItemProvide['select'];
toggle: GroupItemProvide['toggle'];
selectedClass: UnwrapRef<GroupItemProvide['selectedClass']>;
}) => vue.VNodeChild) | undefined;
} & {
"onGroup:selected"?: ((val: {
value: boolean;
}) => any) | undefined;
}, {
disabled: boolean;
}, true, {}, vue.SlotsType<Partial<{
default: (arg: {
isSelected: UnwrapRef<GroupItemProvide['isSelected']>;
select: GroupItemProvide['select'];
toggle: GroupItemProvide['toggle'];
selectedClass: UnwrapRef<GroupItemProvide['selectedClass']>;
}) => vue.VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>[];
}>>, {
P: {};
B: {};
D: {};
C: {};
M: {};
Defaults: {};
}, {
disabled: boolean;
} & {
value?: any;
selectedClass?: string | undefined;
} & {
$children?: vue.VNodeChild | {
default?: ((arg: {
isSelected: UnwrapRef<GroupItemProvide['isSelected']>;
select: GroupItemProvide['select'];
toggle: GroupItemProvide['toggle'];
selectedClass: UnwrapRef<GroupItemProvide['selectedClass']>;
}) => vue.VNodeChild) | undefined;
} | ((arg: {
isSelected: UnwrapRef<GroupItemProvide['isSelected']>;
select: GroupItemProvide['select'];
toggle: GroupItemProvide['toggle'];
selectedClass: UnwrapRef<GroupItemProvide['selectedClass']>;
}) => vue.VNodeChild);
'v-slots'?: {
default?: false | ((arg: {
isSelected: UnwrapRef<GroupItemProvide['isSelected']>;
select: GroupItemProvide['select'];
toggle: GroupItemProvide['toggle'];
selectedClass: UnwrapRef<GroupItemProvide['selectedClass']>;
}) => vue.VNodeChild) | undefined;
} | undefined;
} & {
"v-slot:default"?: false | ((arg: {
isSelected: UnwrapRef<GroupItemProvide['isSelected']>;
select: GroupItemProvide['select'];
toggle: GroupItemProvide['toggle'];
selectedClass: UnwrapRef<GroupItemProvide['selectedClass']>;
}) => vue.VNodeChild) | undefined;
} & {
"onGroup:selected"?: ((val: {
value: boolean;
}) => any) | undefined;
}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>[] | undefined, {}, {}, {}, {
disabled: boolean;
}>;
__isFragment?: undefined;
__isTeleport?: undefined;
__isSuspense?: undefined;
} & vue.ComponentOptionsBase<{
disabled: boolean;
} & {
value?: any;
selectedClass?: string | undefined;
} & {
$children?: vue.VNodeChild | {
default?: ((arg: {
isSelected: UnwrapRef<GroupItemProvide['isSelected']>;
select: GroupItemProvide['select'];
toggle: GroupItemProvide['toggle'];
selectedClass: UnwrapRef<GroupItemProvide['selectedClass']>;
}) => vue.VNodeChild) | undefined;
} | ((arg: {
isSelected: UnwrapRef<GroupItemProvide['isSelected']>;
select: GroupItemProvide['select'];
toggle: GroupItemProvide['toggle'];
selectedClass: UnwrapRef<GroupItemProvide['selectedClass']>;
}) => vue.VNodeChild);
'v-slots'?: {
default?: false | ((arg: {
isSelected: UnwrapRef<GroupItemProvide['isSelected']>;
select: GroupItemProvide['select'];
toggle: GroupItemProvide['toggle'];
selectedClass: UnwrapRef<GroupItemProvide['selectedClass']>;
}) => vue.VNodeChild) | undefined;
} | undefined;
} & {
"v-slot:default"?: false | ((arg: {
isSelected: UnwrapRef<GroupItemProvide['isSelected']>;
select: GroupItemProvide['select'];
toggle: GroupItemProvide['toggle'];
selectedClass: UnwrapRef<GroupItemProvide['selectedClass']>;
}) => vue.VNodeChild) | undefined;
} & {
"onGroup:selected"?: ((val: {
value: boolean;
}) => any) | undefined;
}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>[] | undefined, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
'group:selected': (val: {
value: boolean;
}) => true;
}, string, {
disabled: boolean;
}, {}, string, vue.SlotsType<Partial<{
default: (arg: {
isSelected: UnwrapRef<GroupItemProvide['isSelected']>;
select: GroupItemProvide['select'];
toggle: GroupItemProvide['toggle'];
selectedClass: UnwrapRef<GroupItemProvide['selectedClass']>;
}) => vue.VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}>[];
}>>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
value: null;
disabled: BooleanConstructor;
selectedClass: StringConstructor;
}, vue.ExtractPropTypes<{
value: null;
disabled: BooleanConstructor;
selectedClass: StringConstructor;
}>>;
type VSlideGroupItem = InstanceType<typeof VSlideGroupItem>;
export { VSlideGroup, VSlideGroupItem };

View File

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

View File

@ -0,0 +1 @@
{"version":3,"file":"index.mjs","names":["VSlideGroup","VSlideGroupItem"],"sources":["../../../src/components/VSlideGroup/index.ts"],"sourcesContent":["export { VSlideGroup } from './VSlideGroup'\nexport { VSlideGroupItem } from './VSlideGroupItem'\n"],"mappings":"SAASA,WAAW;AAAA,SACXC,eAAe"}