vuetify/lib/components/VResponsive/VResponsive.mjs

Vue Material Component Framework

import { createVNode as _createVNode } from "vue";
// Styles
import "./VResponsive.css";

// Composables
import { makeDimensionProps, useDimension } from "../../composables/dimensions.mjs"; // Utilities
import { computed } from 'vue';
import { genericComponent, 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 VResponsive = genericComponent()({
  name: 'VResponsive',
  props: {
    aspectRatio: [String, Number],
    contentClass: String,
    ...makeDimensionProps()
  },
  setup(props, _ref) {
    let {
      slots
    } = _ref;
    const {
      aspectStyles
    } = useAspectStyles(props);
    const {
      dimensionStyles
    } = useDimension(props);
    useRender(() => _createVNode("div", {
      "class": "v-responsive",
      "style": dimensionStyles.value
    }, [_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