Vulture/VApp/node_modules/vuetify/lib/components/VWindow/VWindowItem.mjs

122 lines
4.2 KiB
JavaScript
Raw Permalink Normal View History

import { withDirectives as _withDirectives, createVNode as _createVNode, vShow as _vShow } from "vue";
// Composables
import { makeComponentProps } from "../../composables/component.mjs";
import { makeGroupItemProps, useGroupItem } from "../../composables/group.mjs";
import { makeLazyProps, useLazy } from "../../composables/lazy.mjs";
import { useSsrBoot } from "../../composables/ssrBoot.mjs";
import { MaybeTransition } from "../../composables/transition.mjs"; // Directives
import Touch from "../../directives/touch/index.mjs"; // Utilities
import { computed, inject, nextTick, shallowRef } from 'vue';
import { convertToUnit, genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
import { VWindowGroupSymbol, VWindowSymbol } from "./VWindow.mjs";
export const makeVWindowItemProps = propsFactory({
reverseTransition: {
type: [Boolean, String],
default: undefined
},
transition: {
type: [Boolean, String],
default: undefined
},
...makeComponentProps(),
...makeGroupItemProps(),
...makeLazyProps()
}, 'VWindowItem');
export const VWindowItem = genericComponent()({
name: 'VWindowItem',
directives: {
Touch
},
props: makeVWindowItemProps(),
emits: {
'group:selected': val => true
},
setup(props, _ref) {
let {
slots
} = _ref;
const window = inject(VWindowSymbol);
const groupItem = useGroupItem(props, VWindowGroupSymbol);
const {
isBooted
} = useSsrBoot();
if (!window || !groupItem) throw new Error('[Vuetify] VWindowItem must be used inside VWindow');
const isTransitioning = shallowRef(false);
const hasTransition = computed(() => isBooted.value && (window.isReversed.value ? props.reverseTransition !== false : props.transition !== false));
function onAfterTransition() {
if (!isTransitioning.value || !window) {
return;
}
// Finalize transition state.
isTransitioning.value = false;
if (window.transitionCount.value > 0) {
window.transitionCount.value -= 1;
// Remove container height if we are out of transition.
if (window.transitionCount.value === 0) {
window.transitionHeight.value = undefined;
}
}
}
function onBeforeTransition() {
if (isTransitioning.value || !window) {
return;
}
// Initialize transition state here.
isTransitioning.value = true;
if (window.transitionCount.value === 0) {
// Set initial height for height transition.
window.transitionHeight.value = convertToUnit(window.rootRef.value?.clientHeight);
}
window.transitionCount.value += 1;
}
function onTransitionCancelled() {
onAfterTransition(); // This should have the same path as normal transition end.
}
function onEnterTransition(el) {
if (!isTransitioning.value) {
return;
}
nextTick(() => {
// Do not set height if no transition or cancelled.
if (!hasTransition.value || !isTransitioning.value || !window) {
return;
}
// Set transition target height.
window.transitionHeight.value = convertToUnit(el.clientHeight);
});
}
const transition = computed(() => {
const name = window.isReversed.value ? props.reverseTransition : props.transition;
return !hasTransition.value ? false : {
name: typeof name !== 'string' ? window.transition.value : name,
onBeforeEnter: onBeforeTransition,
onAfterEnter: onAfterTransition,
onEnterCancelled: onTransitionCancelled,
onBeforeLeave: onBeforeTransition,
onAfterLeave: onAfterTransition,
onLeaveCancelled: onTransitionCancelled,
onEnter: onEnterTransition
};
});
const {
hasContent
} = useLazy(props, groupItem.isSelected);
useRender(() => _createVNode(MaybeTransition, {
"transition": transition.value,
"disabled": !isBooted.value
}, {
default: () => [_withDirectives(_createVNode("div", {
"class": ['v-window-item', groupItem.selectedClass.value, props.class],
"style": props.style
}, [hasContent.value && slots.default?.()]), [[_vShow, groupItem.isSelected.value]])]
}));
return {
groupItem
};
}
});
//# sourceMappingURL=VWindowItem.mjs.map