123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354 |
- import { createVNode as _createVNode } from "vue";
- // Styles
- import "./VResponsive.css";
- // Composables
- import { makeComponentProps } from "../../composables/component.mjs";
- import { makeDimensionProps, useDimension } from "../../composables/dimensions.mjs"; // Utilities
- import { computed } from 'vue';
- import { genericComponent, propsFactory, useRender } from "../../util/index.mjs";
- export function useAspectStyles(props) {
- return {
- aspectStyles: computed(() => {
- const ratio = Number(props.aspectRatio);
- return ratio ? {
- paddingBottom: String(1 / ratio * 100) + '%'
- } : undefined;
- })
- };
- }
- export const makeVResponsiveProps = propsFactory({
- aspectRatio: [String, Number],
- contentClass: null,
- inline: Boolean,
- ...makeComponentProps(),
- ...makeDimensionProps()
- }, 'VResponsive');
- export const VResponsive = genericComponent()({
- name: 'VResponsive',
- props: makeVResponsiveProps(),
- setup(props, _ref) {
- let {
- slots
- } = _ref;
- const {
- aspectStyles
- } = useAspectStyles(props);
- const {
- dimensionStyles
- } = useDimension(props);
- useRender(() => _createVNode("div", {
- "class": ['v-responsive', {
- 'v-responsive--inline': props.inline
- }, props.class],
- "style": [dimensionStyles.value, props.style]
- }, [_createVNode("div", {
- "class": "v-responsive__sizer",
- "style": aspectStyles.value
- }, null), slots.additional?.(), slots.default && _createVNode("div", {
- "class": ['v-responsive__content', props.contentClass]
- }, [slots.default()])]));
- return {};
- }
- });
- //# sourceMappingURL=VResponsive.mjs.map
|