133 lines
4.6 KiB
JavaScript
133 lines
4.6 KiB
JavaScript
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
|