UNPKG

reka-ui

Version:

Vue port for Radix UI Primitives.

1 lines 2.06 kB
{"version":3,"file":"AvatarFallback.cjs","sources":["../../src/Avatar/AvatarFallback.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface AvatarFallbackProps extends PrimitiveProps {\n /** Useful for delaying rendering so it only appears for those with slower connections. */\n delayMs?: number\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, watch } from 'vue'\nimport { Primitive } from '@/Primitive'\nimport { injectAvatarRootContext } from './AvatarRoot.vue'\n\nconst props = withDefaults(defineProps<AvatarFallbackProps>(), {\n delayMs: 0,\n as: 'span',\n})\n\nconst rootContext = injectAvatarRootContext()\nuseForwardExpose()\n\nconst canRender = ref(false)\nlet timeout: ReturnType<typeof setTimeout> | undefined\n\nwatch(rootContext.imageLoadingStatus, (value) => {\n if (value === 'loading') {\n canRender.value = false\n if (props.delayMs) {\n timeout = setTimeout(() => {\n canRender.value = true\n clearTimeout(timeout)\n }, props.delayMs)\n }\n else {\n canRender.value = true\n }\n }\n}, { immediate: true })\n</script>\n\n<template>\n <Primitive\n v-if=\"canRender && rootContext.imageLoadingStatus.value !== 'loaded'\"\n :as-child=\"asChild\"\n :as=\"as\"\n >\n <slot />\n </Primitive>\n</template>\n"],"names":["injectAvatarRootContext","useForwardExpose","ref","watch"],"mappings":";;;;;;;;;;;;;;;AAeA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAKd,IAAA,MAAM,cAAcA,yCAAwB,EAAA;AAC5C,IAAiBC,wCAAA,EAAA;AAEjB,IAAM,MAAA,SAAA,GAAYC,QAAI,KAAK,CAAA;AAC3B,IAAI,IAAA,OAAA;AAEJ,IAAMC,SAAA,CAAA,WAAA,CAAY,kBAAoB,EAAA,CAAC,KAAU,KAAA;AAC/C,MAAA,IAAI,UAAU,SAAW,EAAA;AACvB,QAAA,SAAA,CAAU,KAAQ,GAAA,KAAA;AAClB,QAAA,IAAI,MAAM,OAAS,EAAA;AACjB,UAAA,OAAA,GAAU,WAAW,MAAM;AACzB,YAAA,SAAA,CAAU,KAAQ,GAAA,IAAA;AAClB,YAAA,YAAA,CAAa,OAAO,CAAA;AAAA,WACtB,EAAG,MAAM,OAAO,CAAA;AAAA,SAEb,MAAA;AACH,UAAA,SAAA,CAAU,KAAQ,GAAA,IAAA;AAAA;AACpB;AACF,KACC,EAAA,EAAE,SAAW,EAAA,IAAA,EAAM,CAAA;;;;;;;;;;;;;;;;;;"}