{"version":3,"file":"aspect-ratio.mjs","sources":["../src/aspect-ratio/AspectRatio.ts","../src/aspect-ratio/AspectRatio.vue"],"sourcesContent":["import {\n  type IAttrsData,\n  mergePrimitiveAttrs,\n  type PrimitiveDefaultProps,\n  type PrimitiveElAttrs,\n  type RadixPrimitiveGetAttrs,\n  type RadixPrimitiveReturns,\n} from '../shared/index.ts'\n\nexport interface AspectRatioProps {\n  ratio?: number\n}\n\nexport const DEFAULT_ASPECT_RATIO_PROPS = {\n  ratio: 1,\n} satisfies PrimitiveDefaultProps<AspectRatioProps>\n\nexport interface UseAspectRatioProps {\n  ratio?: () => number\n}\n\nexport function useAspectRatio(props: UseAspectRatioProps = {}): RadixPrimitiveReturns<\n  {\n    wrapperAttrs: () => IAttrsData\n    attrs: RadixPrimitiveGetAttrs\n  }\n> {\n  const { ratio = () => 1 } = props\n\n  return {\n    wrapperAttrs() {\n      const attrs = {\n        'style': {\n        // ensures inner element is contained\n          position: 'relative',\n          // ensures padding bottom trick maths works\n          width: '100%',\n          paddingBottom: `${100 / (ratio())}%`,\n        },\n        'data-radix-aspect-ratio-wrapper': '',\n      }\n\n      return attrs\n    },\n    attrs(extraAttrs) {\n      const attrs: PrimitiveElAttrs = {\n        style: {\n          // ensures children expand in ratio\n          position: 'absolute',\n          top: 0,\n          right: 0,\n          bottom: 0,\n          left: 0,\n        },\n      }\n\n      if (extraAttrs && extraAttrs.length > 0) {\n        mergePrimitiveAttrs(attrs, extraAttrs)\n      }\n\n      return attrs\n    },\n  }\n}\n","<script setup lang=\"ts\">\nimport { Primitive } from '../primitive/index.ts'\nimport { convertPropsToHookProps, normalizeAttrs } from '../shared/index.ts'\nimport { type AspectRatioProps, DEFAULT_ASPECT_RATIO_PROPS, useAspectRatio } from './AspectRatio.ts'\n\ndefineOptions({\n  name: 'AspectRatio',\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<AspectRatioProps>(), DEFAULT_ASPECT_RATIO_PROPS)\n\nconst aspectRatio = useAspectRatio(convertPropsToHookProps(props, ['ratio']))\n</script>\n\n<template>\n  <div v-bind=\"aspectRatio.wrapperAttrs()\">\n    <Primitive v-bind=\"normalizeAttrs(aspectRatio.attrs([$attrs]))\">\n      <slot />\n    </Primitive>\n  </div>\n</template>\n"],"names":[],"mappings":";;;;AAaO,MAAM,0BAA6B,GAAA;AAAA,EACxC,KAAO,EAAA;AACT;AAMgB,SAAA,cAAA,CAAe,KAA6B,GAAA,EAK1D,EAAA;AACA,EAAA,MAAM,EAAE,KAAA,GAAQ,MAAM,CAAA,EAAM,GAAA,KAAA;AAE5B,EAAO,OAAA;AAAA,IACL,YAAe,GAAA;AACb,MAAA,MAAM,KAAQ,GAAA;AAAA,QACZ,OAAS,EAAA;AAAA;AAAA,UAEP,QAAU,EAAA,UAAA;AAAA;AAAA,UAEV,KAAO,EAAA,MAAA;AAAA,UACP,aAAe,EAAA,CAAA,EAAG,GAAO,GAAA,KAAA,EAAQ,CAAA,CAAA;AAAA,SACnC;AAAA,QACA,iCAAmC,EAAA;AAAA,OACrC;AAEA,MAAO,OAAA,KAAA;AAAA,KACT;AAAA,IACA,MAAM,UAAY,EAAA;AAChB,MAAA,MAAM,KAA0B,GAAA;AAAA,QAC9B,KAAO,EAAA;AAAA;AAAA,UAEL,QAAU,EAAA,UAAA;AAAA,UACV,GAAK,EAAA,CAAA;AAAA,UACL,KAAO,EAAA,CAAA;AAAA,UACP,MAAQ,EAAA,CAAA;AAAA,UACR,IAAM,EAAA;AAAA;AACR,OACF;AAEA,MAAI,IAAA,UAAA,IAAc,UAAW,CAAA,MAAA,GAAS,CAAG,EAAA;AACvC,QAAA,mBAAA,CAAoB,OAAO,UAAU,CAAA;AAAA;AAGvC,MAAO,OAAA,KAAA;AAAA;AACT,GACF;AACF;;;;;;;;;;;;ACrDA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAEd,IAAA,MAAM,cAAc,cAAe,CAAA,uBAAA,CAAwB,OAAO,CAAC,OAAO,CAAC,CAAC,CAAA;;;;;;;;;;;;;;;;"}