reka-ui/dist/AspectRatio/AspectRatio.cjs.map

Vue port for Radix UI Primitives.

{"version":3,"file":"AspectRatio.cjs","sources":["../../src/AspectRatio/AspectRatio.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface AspectRatioProps extends PrimitiveProps {\n  /**\n   * The desired ratio. Eg: 16/9\n   * @defaultValue 1\n   */\n  ratio?: number\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { Primitive } from '@/Primitive'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<AspectRatioProps>(), {\n  ratio: 1,\n})\ndefineSlots<{\n  default: (props: {\n    /** Current aspect ratio (in %) */\n    aspect: typeof aspect.value\n  }) => any\n}>()\n\nconst { forwardRef } = useForwardExpose()\n\nconst aspect = computed(() => {\n  return (1 / props.ratio) * 100\n})\n</script>\n\n<template>\n  <div\n    :style=\"`position: relative; width: 100%; padding-bottom: ${aspect}%`\"\n    data-reka-aspect-ratio-wrapper\n  >\n    <Primitive\n      :ref=\"forwardRef\"\n      :as-child=\"asChild\"\n      :as=\"as\"\n      style=\"position: absolute; inset: 0px\"\n      v-bind=\"$attrs\"\n    >\n      <slot :aspect=\"aspect\" />\n    </Primitive>\n  </div>\n</template>\n"],"names":["useForwardExpose","computed"],"mappings":";;;;;;;;;;;;;;;;;AAqBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAUd,IAAM,MAAA,EAAE,UAAW,EAAA,GAAIA,wCAAiB,EAAA;AAExC,IAAM,MAAA,MAAA,GAASC,aAAS,MAAM;AAC5B,MAAQ,OAAA,CAAA,GAAI,MAAM,KAAS,GAAA,GAAA;AAAA,KAC5B,CAAA;;;;;;;;;;;;;;;;;;;;;;;;"}