File size: 982 Bytes
8059bf0 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <template>
<div
:class="[
'animate-pulse bg-gray-200 dark:bg-dark-700',
variant === 'circle' ? 'rounded-full' : 'rounded-lg',
customClass
]"
:style="style"
></div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
interface Props {
variant?: 'rect' | 'circle' | 'text'
width?: string | number
height?: string | number
class?: string
}
const props = withDefaults(defineProps<Props>(), {
variant: 'rect',
width: '100%'
})
const customClass = computed(() => props.class || '')
const style = computed(() => {
const s: Record<string, string> = {}
if (props.width) {
s.width = typeof props.width === 'number' ? `${props.width}px` : props.width
}
if (props.height) {
s.height = typeof props.height === 'number' ? `${props.height}px` : props.height
} else if (props.variant === 'text') {
s.height = '1em'
s.marginTop = '0.25em'
s.marginBottom = '0.25em'
}
return s
})
</script>
|