{"version":3,"file":"BXEB__lV.js","sources":["../../../../components/common/Skeleton.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\ntype Variant = 'text' | 'circular' | 'rectangular' | 'rounded';\r\ntype Size = number | string;\r\ntype Theme = 'dark' | 'light';\r\n\r\ntype Props = {\r\n  as?: string;\r\n  variant?: Variant;\r\n  width?: Size;\r\n  height?: Size;\r\n  theme: Theme;\r\n  styles?: Object;\r\n};\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n  as: 'span',\r\n  variant: 'rectangular',\r\n  width: undefined,\r\n  height: undefined,\r\n  styles: undefined,\r\n});\r\ndefineSlots<{\r\n  default(props: {}): any;\r\n}>();\r\n\r\nconst customStyles = computed(() => ({\r\n  ...(props.width && {\r\n    width: typeof props.width === 'string' ? props.width : `${props.width}px`,\r\n  }),\r\n  ...(props.height && {\r\n    height: typeof props.height === 'string' ? props.height : `${props.height}px`,\r\n  }),\r\n  ...(props.styles && typeof props.styles === 'object' && props.styles),\r\n}));\r\n</script>\r\n\r\n<template>\r\n  <component\r\n    :is=\"as\"\r\n    class=\"skeleton\"\r\n    :class=\"{\r\n      [`skeleton--${variant}`]: true,\r\n      [`skeleton--${theme}`]: true,\r\n    }\"\r\n    :style=\"customStyles\"\r\n  >\r\n    <slot />\r\n  </component>\r\n</template>\r\n\r\n<style lang=\"scss\" scoped>\r\n.skeleton {\r\n  display: block;\r\n\r\n  height: auto;\r\n  width: 100%;\r\n\r\n  animation: pulsate 1.5s ease-in-out 0.5s infinite;\r\n\r\n  &--light {\r\n    background-color: rgba(0, 0, 0, 0.11);\r\n  }\r\n\r\n  &--dark {\r\n    background-color: rgba(255, 255, 255, 0.13);\r\n  }\r\n\r\n  &--text {\r\n    height: fit-content;\r\n\r\n    border-top-left-radius: 0.25rem 0.4188rem;\r\n    border-top-right-radius: 0.25rem 0.4188rem;\r\n    border-bottom-right-radius: 0.25rem 0.4188rem;\r\n    border-bottom-left-radius: 0.25rem 0.4188rem;\r\n\r\n    &:empty::before {\r\n      content: '\\00a0';\r\n    }\r\n  }\r\n\r\n  &--circular {\r\n    border-radius: 50%;\r\n  }\r\n\r\n  &--rounded {\r\n    border-radius: 0.75rem;\r\n  }\r\n}\r\n\r\n@keyframes pulsate {\r\n  0% {\r\n    opacity: 1;\r\n  }\r\n  50% {\r\n    opacity: 0.4;\r\n  }\r\n  100% {\r\n    opacity: 1;\r\n  }\r\n}\r\n</style>\r\n"],"names":["props","__props","customStyles","computed"],"mappings":"sRAcA,MAAMA,EAAQC,EAWRC,EAAeC,EAAS,KAAO,CACnC,GAAIH,EAAM,OAAS,CACjB,MAAO,OAAOA,EAAM,OAAU,SAAWA,EAAM,MAAQ,GAAGA,EAAM,KAAK,IACvE,EACA,GAAIA,EAAM,QAAU,CAClB,OAAQ,OAAOA,EAAM,QAAW,SAAWA,EAAM,OAAS,GAAGA,EAAM,MAAM,IAC3E,EACA,GAAIA,EAAM,QAAU,OAAOA,EAAM,QAAW,UAAYA,EAAM,MAC9D,EAAA"}