|
| 1 | +<script setup lang="ts"> |
| 2 | +importtype { ElementScriptTrigger } from'#nuxt-scripts/types' |
| 3 | +import { useMutationObserver } from'@vueuse/core' |
| 4 | +import { computed, onMounted, ref, shallowRef, watch } from'vue' |
| 5 | +import { useScriptTriggerElement } from'../composables/useScriptTriggerElement' |
| 6 | +import { useScriptDeskCrew } from'../registry/deskcrew' |
| 7 | +
|
| 8 | +const props =withDefaults(defineProps<{ |
| 9 | +/** |
| 10 | + * Defines the trigger event to load the script. |
| 11 | +*/ |
| 12 | + trigger?:ElementScriptTrigger |
| 13 | + widgetKey:string |
| 14 | + board?:string |
| 15 | + color?:string |
| 16 | + position?:'left'|'right' |
| 17 | + greeting?:string |
| 18 | + launcher?:'logo' |
| 19 | +}>(), { |
| 20 | + trigger: 'click', |
| 21 | +}) |
| 22 | +
|
| 23 | +const emits =defineEmits<{ |
| 24 | + ready: [e: ReturnType<typeofuseScriptDeskCrew>] |
| 25 | + error: [] |
| 26 | +}>() |
| 27 | +
|
| 28 | +defineSlots<{ |
| 29 | + default?: (props: { ready:boolean }) =>any |
| 30 | + awaitingLoad?: () =>any |
| 31 | + loading?: () =>any |
| 32 | + error?: () =>any |
| 33 | +}>() |
| 34 | +
|
| 35 | +const rootEl =ref(null) |
| 36 | +const trigger =useScriptTriggerElement({ trigger: props.trigger, el: rootEl }) |
| 37 | +
|
| 38 | +const isReady =ref(false) |
| 39 | +const deskcrew =useScriptDeskCrew({ |
| 40 | + widgetKey: props.widgetKey, |
| 41 | + board: props.board, |
| 42 | + color: props.color, |
| 43 | + position: props.position, |
| 44 | + greeting: props.greeting, |
| 45 | + launcher: props.launcher, |
| 46 | + scriptOptions: { |
| 47 | +trigger, |
| 48 | + }, |
| 49 | +}) |
| 50 | +const { onLoaded, status } =deskcrew |
| 51 | +if (props.trigger==='click') { |
| 52 | +onLoaded((instance) => { |
| 53 | +instance.open() |
| 54 | + }) |
| 55 | +} |
| 56 | +
|
| 57 | +defineExpose({ |
| 58 | +deskcrew, |
| 59 | +}) |
| 60 | +
|
| 61 | +const observerTarget =shallowRef<HTMLElement|null>(null) |
| 62 | +function markReady() { |
| 63 | +if (isReady.value) |
| 64 | +returntrue |
| 65 | +// The widget mounts a Shadow DOM host into document.body with this id, so its |
| 66 | +// presence is the only reliable signal that the UI actually exists. Waiting on |
| 67 | +// script load alone would flip the facade away before anything is rendered. |
| 68 | +if (!document.getElementById('deskcrew-root')) |
| 69 | +returnfalse |
| 70 | +isReady.value=true |
| 71 | +observerTarget.value=null |
| 72 | +emits('ready', deskcrew) |
| 73 | +returntrue |
| 74 | +} |
| 75 | +useMutationObserver(observerTarget, markReady, { childList: true, subtree: true }) |
| 76 | +
|
| 77 | +onMounted(() => { |
| 78 | +watch(status, (status) => { |
| 79 | +if (status==='loaded') { |
| 80 | +if (!markReady()) |
| 81 | +observerTarget.value=document.body |
| 82 | + } |
| 83 | +elseif (status==='error') { |
| 84 | +observerTarget.value=null |
| 85 | +isReady.value=false |
| 86 | +emits('error') |
| 87 | + } |
| 88 | + }, { immediate: true }) |
| 89 | +}) |
| 90 | +
|
| 91 | +const rootAttrs =computed(() => { |
| 92 | +return { |
| 93 | +...(triggerinstanceofPromise?trigger.ssrAttrs|| {} : {}), |
| 94 | + } |
| 95 | +}) |
| 96 | +</script> |
| 97 | + |
| 98 | +<template> |
| 99 | + <div |
| 100 | +ref="rootEl" |
| 101 | +:style="{ display: isReady ? 'none' : 'block' }" |
| 102 | +v-bind="rootAttrs" |
| 103 | + > |
| 104 | + <slot:ready="isReady" /> |
| 105 | + <slotv-if="status === 'awaitingLoad'"name="awaitingLoad" /> |
| 106 | + <slotv-else-if="status === 'error'"name="error" /> |
| 107 | + <slotv-else-if="status === 'loading' || !isReady"name="loading" /> |
| 108 | + </div> |
| 109 | +</template> |
0 commit comments