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

import { computed, defineComponent } from 'vue';
import { makeDimensionProps, useDimension } from "../../composables/dimensions.mjs";
import { makeProps } from "../../util/index.mjs"; // Composables

export function useAspectStyles(props) {
  return {
    aspectStyles: computed(() => {
      const ratio = Number(props.aspectRatio);
      return ratio ? {
        paddingBottom: String(1 / ratio * 100) + '%'
      } : undefined;
    })
  };
}
export default defineComponent({
  name: 'VResponsive',
  props: makeProps({
    aspectRatio: [String, Number],
    contentClass: String,
    ...makeDimensionProps()
  }),

  setup(props, {
    slots
  }) {
    const {
      dimensionStyles
    } = useDimension(props);
    const {
      aspectStyles
    } = useAspectStyles(props);
    return () => _createVNode("div", {
      "class": "v-responsive",
      "style": dimensionStyles.value
    }, [_createVNode("div", {
      "class": "v-responsive__sizer",
      "style": aspectStyles.value
    }, null, 4), slots.additional == null ? void 0 : slots.additional(), _createVNode("div", {
      "class": ['v-responsive__content', props.contentClass]
    }, [slots.default == null ? void 0 : slots.default()], 2)], 4);
  }

});
//# sourceMappingURL=VResponsive.mjs.map