import { createVNode, computed } from "vue";
import "./styles/responsive.scss";
import { makeDimensionProps, useDimension } from "../../composables/dimension/index.mjs";
import { genericComponent } from "../../utils/define-component.mjs";
function useAspectStyles(props) {
  return {
    aspectStyles: computed(() => {
      const ratio = Number(props.aspectRatio);
      return ratio ? {
        paddingBottom: `${String(1 / ratio * 100)}%`
      } : void 0;
    })
  };
}
const Responsive = genericComponent()({
  name: "VeResponsive",
  props: {
    aspectRatio: [String, Number],
    contentClass: String,
    ...makeDimensionProps()
  },
  setup(props, {
    slots
  }) {
    const {
      dimensionStyles
    } = useDimension(props);
    const {
      aspectStyles
    } = useAspectStyles(props);
    return () => {
      var _a;
      return createVNode("div", {
        "class": "ve-responsive",
        "style": dimensionStyles.value
      }, [createVNode("div", {
        "class": "ve-responsive__sizer",
        "style": aspectStyles.value
      }, null), (_a = slots.additional) == null ? void 0 : _a.call(slots), slots.default && createVNode("div", {
        "class": ["ve-responsive__content", props.contentClass]
      }, [slots.default()])]);
    };
  }
});
export {
  Responsive,
  useAspectStyles
};
//# sourceMappingURL=responsive.mjs.map
