VResponsive.mjs 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. import { createVNode as _createVNode } from "vue";
  2. // Styles
  3. import "./VResponsive.css";
  4. // Composables
  5. import { makeComponentProps } from "../../composables/component.mjs";
  6. import { makeDimensionProps, useDimension } from "../../composables/dimensions.mjs"; // Utilities
  7. import { computed } from 'vue';
  8. import { genericComponent, propsFactory, useRender } from "../../util/index.mjs";
  9. export function useAspectStyles(props) {
  10. return {
  11. aspectStyles: computed(() => {
  12. const ratio = Number(props.aspectRatio);
  13. return ratio ? {
  14. paddingBottom: String(1 / ratio * 100) + '%'
  15. } : undefined;
  16. })
  17. };
  18. }
  19. export const makeVResponsiveProps = propsFactory({
  20. aspectRatio: [String, Number],
  21. contentClass: null,
  22. inline: Boolean,
  23. ...makeComponentProps(),
  24. ...makeDimensionProps()
  25. }, 'VResponsive');
  26. export const VResponsive = genericComponent()({
  27. name: 'VResponsive',
  28. props: makeVResponsiveProps(),
  29. setup(props, _ref) {
  30. let {
  31. slots
  32. } = _ref;
  33. const {
  34. aspectStyles
  35. } = useAspectStyles(props);
  36. const {
  37. dimensionStyles
  38. } = useDimension(props);
  39. useRender(() => _createVNode("div", {
  40. "class": ['v-responsive', {
  41. 'v-responsive--inline': props.inline
  42. }, props.class],
  43. "style": [dimensionStyles.value, props.style]
  44. }, [_createVNode("div", {
  45. "class": "v-responsive__sizer",
  46. "style": aspectStyles.value
  47. }, null), slots.additional?.(), slots.default && _createVNode("div", {
  48. "class": ['v-responsive__content', props.contentClass]
  49. }, [slots.default()])]));
  50. return {};
  51. }
  52. });
  53. //# sourceMappingURL=VResponsive.mjs.map