{"version":3,"file":"VResponsive.mjs","names":["makeComponentProps","makeDimensionProps","useDimension","computed","genericComponent","propsFactory","useRender","useAspectStyles","props","aspectStyles","ratio","Number","aspectRatio","paddingBottom","String","undefined","makeVResponsiveProps","contentClass","inline","Boolean","VResponsive","name","setup","_ref","slots","dimensionStyles","_createVNode","class","value","style","additional","default"],"sources":["../../../src/components/VResponsive/VResponsive.tsx"],"sourcesContent":["// Styles\nimport './VResponsive.sass'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\n\n// Utilities\nimport { computed } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\nexport type VResponsiveSlots = {\n  default: never\n  additional: never\n}\n\nexport function useAspectStyles (props: { aspectRatio?: string | number }) {\n  return {\n    aspectStyles: computed(() => {\n      const ratio = Number(props.aspectRatio)\n\n      return ratio\n        ? { paddingBottom: String(1 / ratio * 100) + '%' }\n        : undefined\n    }),\n  }\n}\n\nexport const makeVResponsiveProps = propsFactory({\n  aspectRatio: [String, Number],\n  contentClass: null,\n  inline: Boolean,\n\n  ...makeComponentProps(),\n  ...makeDimensionProps(),\n}, 'VResponsive')\n\nexport const VResponsive = genericComponent<VResponsiveSlots>()({\n  name: 'VResponsive',\n\n  props: makeVResponsiveProps(),\n\n  setup (props, { slots }) {\n    const { aspectStyles } = useAspectStyles(props)\n    const { dimensionStyles } = useDimension(props)\n\n    useRender(() => (\n      <div\n        class={[\n          'v-responsive',\n          { 'v-responsive--inline': props.inline },\n          props.class,\n        ]}\n        style={[\n          dimensionStyles.value,\n          props.style,\n        ]}\n      >\n        <div class=\"v-responsive__sizer\" style={ aspectStyles.value } />\n\n        { slots.additional?.() }\n\n        { slots.default && (\n          <div class={['v-responsive__content', props.contentClass]}>{ slots.default() }</div>\n        )}\n      </div>\n    ))\n\n    return {}\n  },\n})\n\nexport type VResponsive = InstanceType<typeof VResponsive>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,kBAAkB;AAAA,SAClBC,kBAAkB,EAAEC,YAAY,4CAEzC;AACA,SAASC,QAAQ,QAAQ,KAAK;AAAA,SACrBC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS;AAOlD,OAAO,SAASC,eAAeA,CAAEC,KAAwC,EAAE;EACzE,OAAO;IACLC,YAAY,EAAEN,QAAQ,CAAC,MAAM;MAC3B,MAAMO,KAAK,GAAGC,MAAM,CAACH,KAAK,CAACI,WAAW,CAAC;MAEvC,OAAOF,KAAK,GACR;QAAEG,aAAa,EAAEC,MAAM,CAAC,CAAC,GAAGJ,KAAK,GAAG,GAAG,CAAC,GAAG;MAAI,CAAC,GAChDK,SAAS;IACf,CAAC;EACH,CAAC;AACH;AAEA,OAAO,MAAMC,oBAAoB,GAAGX,YAAY,CAAC;EAC/CO,WAAW,EAAE,CAACE,MAAM,EAAEH,MAAM,CAAC;EAC7BM,YAAY,EAAE,IAAI;EAClBC,MAAM,EAAEC,OAAO;EAEf,GAAGnB,kBAAkB,CAAC,CAAC;EACvB,GAAGC,kBAAkB,CAAC;AACxB,CAAC,EAAE,aAAa,CAAC;AAEjB,OAAO,MAAMmB,WAAW,GAAGhB,gBAAgB,CAAmB,CAAC,CAAC;EAC9DiB,IAAI,EAAE,aAAa;EAEnBb,KAAK,EAAEQ,oBAAoB,CAAC,CAAC;EAE7BM,KAAKA,CAAEd,KAAK,EAAAe,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAM;MAAEd;IAAa,CAAC,GAAGF,eAAe,CAACC,KAAK,CAAC;IAC/C,MAAM;MAAEiB;IAAgB,CAAC,GAAGvB,YAAY,CAACM,KAAK,CAAC;IAE/CF,SAAS,CAAC,MAAAoB,YAAA;MAAA,SAEC,CACL,cAAc,EACd;QAAE,sBAAsB,EAAElB,KAAK,CAACU;MAAO,CAAC,EACxCV,KAAK,CAACmB,KAAK,CACZ;MAAA,SACM,CACLF,eAAe,CAACG,KAAK,EACrBpB,KAAK,CAACqB,KAAK;IACZ,IAAAH,YAAA;MAAA;MAAA,SAEwCjB,YAAY,CAACmB;IAAK,UAEzDJ,KAAK,CAACM,UAAU,GAAG,CAAC,EAEpBN,KAAK,CAACO,OAAO,IAAAL,YAAA;MAAA,SACD,CAAC,uBAAuB,EAAElB,KAAK,CAACS,YAAY;IAAC,IAAIO,KAAK,CAACO,OAAO,CAAC,CAAC,EAC7E,EAEJ,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC","ignoreList":[]}