Vulture/VApp/node_modules/vuetify/lib/components/VCarousel/VCarousel.mjs

133 lines
4.6 KiB
JavaScript
Raw Permalink Normal View History

import { createVNode as _createVNode, mergeProps as _mergeProps, Fragment as _Fragment } from "vue";
// Styles
import "./VCarousel.css";
// Components
import { VBtn } from "../VBtn/index.mjs";
import { VDefaultsProvider } from "../VDefaultsProvider/index.mjs";
import { VProgressLinear } from "../VProgressLinear/index.mjs";
import { makeVWindowProps, VWindow } from "../VWindow/VWindow.mjs"; // Composables
import { IconValue } from "../../composables/icons.mjs";
import { useLocale } from "../../composables/locale.mjs";
import { useProxiedModel } from "../../composables/proxiedModel.mjs"; // Utilities
import { onMounted, ref, watch } from 'vue';
import { convertToUnit, genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
export const makeVCarouselProps = propsFactory({
color: String,
cycle: Boolean,
delimiterIcon: {
type: IconValue,
default: '$delimiter'
},
height: {
type: [Number, String],
default: 500
},
hideDelimiters: Boolean,
hideDelimiterBackground: Boolean,
interval: {
type: [Number, String],
default: 6000,
validator: value => Number(value) > 0
},
progress: [Boolean, String],
verticalDelimiters: [Boolean, String],
...makeVWindowProps({
continuous: true,
mandatory: 'force',
showArrows: true
})
}, 'VCarousel');
export const VCarousel = genericComponent()({
name: 'VCarousel',
props: makeVCarouselProps(),
emits: {
'update:modelValue': value => true
},
setup(props, _ref) {
let {
slots
} = _ref;
const model = useProxiedModel(props, 'modelValue');
const {
t
} = useLocale();
const windowRef = ref();
let slideTimeout = -1;
watch(model, restartTimeout);
watch(() => props.interval, restartTimeout);
watch(() => props.cycle, val => {
if (val) restartTimeout();else window.clearTimeout(slideTimeout);
});
onMounted(startTimeout);
function startTimeout() {
if (!props.cycle || !windowRef.value) return;
slideTimeout = window.setTimeout(windowRef.value.group.next, +props.interval > 0 ? +props.interval : 6000);
}
function restartTimeout() {
window.clearTimeout(slideTimeout);
window.requestAnimationFrame(startTimeout);
}
useRender(() => {
const windowProps = VWindow.filterProps(props);
return _createVNode(VWindow, _mergeProps({
"ref": windowRef
}, windowProps, {
"modelValue": model.value,
"onUpdate:modelValue": $event => model.value = $event,
"class": ['v-carousel', {
'v-carousel--hide-delimiter-background': props.hideDelimiterBackground,
'v-carousel--vertical-delimiters': props.verticalDelimiters
}, props.class],
"style": [{
height: convertToUnit(props.height)
}, props.style]
}), {
default: slots.default,
additional: _ref2 => {
let {
group
} = _ref2;
return _createVNode(_Fragment, null, [!props.hideDelimiters && _createVNode("div", {
"class": "v-carousel__controls",
"style": {
left: props.verticalDelimiters === 'left' && props.verticalDelimiters ? 0 : 'auto',
right: props.verticalDelimiters === 'right' ? 0 : 'auto'
}
}, [group.items.value.length > 0 && _createVNode(VDefaultsProvider, {
"defaults": {
VBtn: {
color: props.color,
icon: props.delimiterIcon,
size: 'x-small',
variant: 'text'
}
},
"scoped": true
}, {
default: () => [group.items.value.map((item, index) => {
const props = {
id: `carousel-item-${item.id}`,
'aria-label': t('$vuetify.carousel.ariaLabel.delimiter', index + 1, group.items.value.length),
class: ['v-carousel__controls__item', group.isSelected(item.id) && 'v-btn--active'],
onClick: () => group.select(item.id, true)
};
return slots.item ? slots.item({
props,
item
}) : _createVNode(VBtn, _mergeProps(item, props), null);
})]
})]), props.progress && _createVNode(VProgressLinear, {
"class": "v-carousel__progress",
"color": typeof props.progress === 'string' ? props.progress : undefined,
"modelValue": (group.getItemIndex(model.value) + 1) / group.items.value.length * 100
}, null)]);
},
prev: slots.prev,
next: slots.next
});
});
return {};
}
});
//# sourceMappingURL=VCarousel.mjs.map