bootstrap-vue-next
Version:
Seamless integration of Vue 3, Bootstrap 5, and TypeScript for modern, type-safe UI development
1 lines • 2.83 kB
Source Map (JSON)
{"version":3,"file":"BAspect-CwokVvvn.mjs","names":[],"sources":["../src/components/BAspect/BAspect.vue","../src/components/BAspect/BAspect.vue"],"sourcesContent":["<template>\n <component :is=\"props.tag\" class=\"b-aspect d-flex\">\n <div :style=\"{paddingBottom: computedPadding, height: 0}\" class=\"b-aspect-sizer flex-grow-1\" />\n <div class=\"b-aspect-content flex-grow-1 w-100 mw-100\" style=\"margin-left: -100%\">\n <slot />\n </div>\n </component>\n</template>\n\n<script setup lang=\"ts\">\nimport {computed} from 'vue'\nimport type {BAspectProps} from '../../types/ComponentProps'\nimport {useDefaults} from '../../composables/useDefaults'\n\nconst _props = withDefaults(defineProps<BAspectProps>(), {\n tag: 'div',\n aspect: '1:1',\n})\nconst props = useDefaults(_props, 'BAspect')\n\nconst computedPadding = computed(() => {\n const aspect = String(props.aspect)\n let ratio\n if (/^\\d+(\\.\\d*)?[/:x]\\d+(\\.\\d*)?$/.test(aspect)) {\n const [width = 1, height = 1] = aspect.split(/[/:x]/).map((v) => Number.parseFloat(v) || 1)\n ratio = width / height\n } else {\n ratio = Number.parseFloat(aspect) || 1\n }\n return `${100 / Math.abs(ratio)}%`\n})\n</script>\n","<template>\n <component :is=\"props.tag\" class=\"b-aspect d-flex\">\n <div :style=\"{paddingBottom: computedPadding, height: 0}\" class=\"b-aspect-sizer flex-grow-1\" />\n <div class=\"b-aspect-content flex-grow-1 w-100 mw-100\" style=\"margin-left: -100%\">\n <slot />\n </div>\n </component>\n</template>\n\n<script setup lang=\"ts\">\nimport {computed} from 'vue'\nimport type {BAspectProps} from '../../types/ComponentProps'\nimport {useDefaults} from '../../composables/useDefaults'\n\nconst _props = withDefaults(defineProps<BAspectProps>(), {\n tag: 'div',\n aspect: '1:1',\n})\nconst props = useDefaults(_props, 'BAspect')\n\nconst computedPadding = computed(() => {\n const aspect = String(props.aspect)\n let ratio\n if (/^\\d+(\\.\\d*)?[/:x]\\d+(\\.\\d*)?$/.test(aspect)) {\n const [width = 1, height = 1] = aspect.split(/[/:x]/).map((v) => Number.parseFloat(v) || 1)\n ratio = width / height\n } else {\n ratio = Number.parseFloat(aspect) || 1\n }\n return `${100 / Math.abs(ratio)}%`\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;EAkBA,MAAM,QAAQ,YAJC,SAImB,UAAS;EAE3C,MAAM,kBAAkB,eAAe;GACrC,MAAM,SAAS,OAAO,MAAM,OAAM;GAClC,IAAI;AACJ,OAAI,gCAAgC,KAAK,OAAO,EAAE;IAChD,MAAM,CAAC,QAAQ,GAAG,SAAS,KAAK,OAAO,MAAM,QAAQ,CAAC,KAAK,MAAM,OAAO,WAAW,EAAE,IAAI,EAAC;AAC1F,YAAQ,QAAQ;SAEhB,SAAQ,OAAO,WAAW,OAAO,IAAI;AAEvC,UAAO,GAAG,MAAM,KAAK,IAAI,MAAM,CAAC;IACjC;;uBA7BC,YAKY,wBALI,MAAA,MAAK,CAAC,IAAG,EAAA,EAAE,OAAM,mBAAiB,EAAA;2BAC+C,CAA/F,mBAA+F,OAAA;KAAzF,OAAK,eAAA;MAAA,eAAkB,gBAAA;MAAe,QAAA;MAAA,CAAA;KAAc,OAAM;iBAChE,mBAEM,OAFN,YAEM,CADJ,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA,CAAA,CAAA"}