@nuxt/scripts 0.10.5 → 0.11.0

package/dist/runtime/components/ScriptIntercom.vue

@@ -1,103 +1,103 @@
-<script setup lang="ts">
-import { ref, onMounted, watch, onBeforeUnmount, computed } from 'vue'
-import { useScriptIntercom } from '../registry/intercom'
-import { useScriptTriggerElement } from '../composables/useScriptTriggerElement'
-import type { ElementScriptTrigger } from '#nuxt-scripts/types'
-
-const props = withDefaults(defineProps<{
-  appId: string
-  apiBase?: string
-  name?: string
-  email?: string
-  userId?: string
-  // customizing the messenger
-  alignment?: 'left' | 'right'
-  horizontalPadding?: number
-  verticalPadding?: number
-  /**
-   * Defines the trigger event to load the script.
-   */
-  trigger?: ElementScriptTrigger
-}>(), {
-  trigger: 'click',
-})
-
-const emits = defineEmits<{
-  // our emit
-  ready: [e: ReturnType<typeof useScriptIntercom>]
-  error: []
-}>()
-
-const rootEl = ref(null)
-const trigger = useScriptTriggerElement({ trigger: props.trigger, el: rootEl })
-
-const isReady = ref(false)
-const intercom = useScriptIntercom({
-  app_id: props.appId,
-  // @ts-expect-error untyped
-  app_base: props.apiBase,
-  name: props.name,
-  email: props.email,
-  user_id: props.userId,
-  alignment: props.alignment,
-  horizontal_padding: props.horizontalPadding,
-  vertical_padding: props.verticalPadding,
-  scriptOptions: {
-    trigger,
-  },
-})
-const { status, onLoaded } = intercom
-if (props.trigger === 'click') {
-  onLoaded((instance) => {
-    instance.Intercom('show')
-  })
-}
-
-defineExpose({
-  intercom,
-})
-
-let observer: MutationObserver
-onMounted(() => {
-  watch(status, (status) => {
-    if (status === 'loading') {
-      observer = new MutationObserver(() => {
-        if (document.getElementById('intercom-frame')) {
-          isReady.value = true
-          emits('ready', intercom)
-          observer.disconnect()
-        }
-      })
-      observer.observe(document.body, { childList: true, subtree: true })
-    }
-    else if (status === 'error')
-      emits('error')
-  })
-})
-onBeforeUnmount(() => {
-  observer?.disconnect()
-})
-
-const rootAttrs = computed(() => {
-  return {
-    style: {
-      display: isReady.value ? 'none' : 'block',
-      bottom: `${props.verticalPadding || 20}px`,
-      [props.alignment || 'right']: `${props.horizontalPadding || 20}px`,
-    },
-    ...(trigger instanceof Promise ? trigger.ssrAttrs || {} : {}),
-  }
-})
-</script>
-
-<template>
-  <div
-    ref="rootEl"
-    v-bind="rootAttrs"
-  >
-    <slot :ready="isReady" />
-    <slot v-if="status === 'awaitingLoad'" name="awaitingLoad" />
-    <slot v-else-if="status === 'loading' || !isReady" name="loading" />
-    <slot v-else-if="status === 'error'" name="error" />
-  </div>
-</template>
+<script setup lang="ts">
+import { ref, onMounted, watch, onBeforeUnmount, computed } from 'vue'
+import { useScriptIntercom } from '../registry/intercom'
+import { useScriptTriggerElement } from '../composables/useScriptTriggerElement'
+import type { ElementScriptTrigger } from '#nuxt-scripts/types'
+
+const props = withDefaults(defineProps<{
+  appId: string
+  apiBase?: string
+  name?: string
+  email?: string
+  userId?: string
+  // customizing the messenger
+  alignment?: 'left' | 'right'
+  horizontalPadding?: number
+  verticalPadding?: number
+  /**
+   * Defines the trigger event to load the script.
+   */
+  trigger?: ElementScriptTrigger
+}>(), {
+  trigger: 'click',
+})
+
+const emits = defineEmits<{
+  // our emit
+  ready: [e: ReturnType<typeof useScriptIntercom>]
+  error: []
+}>()
+
+const rootEl = ref(null)
+const trigger = useScriptTriggerElement({ trigger: props.trigger, el: rootEl })
+
+const isReady = ref(false)
+const intercom = useScriptIntercom({
+  app_id: props.appId,
+  // @ts-expect-error untyped
+  app_base: props.apiBase,
+  name: props.name,
+  email: props.email,
+  user_id: props.userId,
+  alignment: props.alignment,
+  horizontal_padding: props.horizontalPadding,
+  vertical_padding: props.verticalPadding,
+  scriptOptions: {
+    trigger,
+  },
+})
+const { status, onLoaded } = intercom
+if (props.trigger === 'click') {
+  onLoaded((instance) => {
+    instance.Intercom('show')
+  })
+}
+
+defineExpose({
+  intercom,
+})
+
+let observer: MutationObserver
+onMounted(() => {
+  watch(status, (status) => {
+    if (status === 'loading') {
+      observer = new MutationObserver(() => {
+        if (document.getElementById('intercom-frame')) {
+          isReady.value = true
+          emits('ready', intercom)
+          observer.disconnect()
+        }
+      })
+      observer.observe(document.body, { childList: true, subtree: true })
+    }
+    else if (status === 'error')
+      emits('error')
+  })
+})
+onBeforeUnmount(() => {
+  observer?.disconnect()
+})
+
+const rootAttrs = computed(() => {
+  return {
+    style: {
+      display: isReady.value ? 'none' : 'block',
+      bottom: `${props.verticalPadding || 20}px`,
+      [props.alignment || 'right']: `${props.horizontalPadding || 20}px`,
+    },
+    ...(trigger instanceof Promise ? trigger.ssrAttrs || {} : {}),
+  }
+})
+</script>
+
+<template>
+  <div
+    ref="rootEl"
+    v-bind="rootAttrs"
+  >
+    <slot :ready="isReady" />
+    <slot v-if="status === 'awaitingLoad'" name="awaitingLoad" />
+    <slot v-else-if="status === 'loading' || !isReady" name="loading" />
+    <slot v-else-if="status === 'error'" name="error" />
+  </div>
+</template>

package/dist/runtime/components/ScriptLemonSqueezy.vue

@@ -1,52 +1,52 @@
-<script lang="ts" setup>
-import { computed, onMounted, ref } from 'vue'
-import type { ElementScriptTrigger } from '../types'
-import { useScriptTriggerElement } from '../composables/useScriptTriggerElement'
-import { useScriptLemonSqueezy } from '../registry/lemon-squeezy'
-import type { LemonSqueezyEventPayload } from '../registry/lemon-squeezy'
-
-const props = withDefaults(defineProps<{
-  trigger?: ElementScriptTrigger
-}>(), {
-  trigger: 'visible',
-})
-
-const emits = defineEmits<{
-  ready: [ReturnType<typeof useScriptLemonSqueezy>]
-  lemonSqueezyEvent: [LemonSqueezyEventPayload]
-}>()
-
-const rootEl = ref<HTMLElement | null>(null)
-const trigger = useScriptTriggerElement({ trigger: props.trigger, el: rootEl })
-const instance = useScriptLemonSqueezy({
-  scriptOptions: {
-    trigger,
-  },
-})
-onMounted(() => {
-  rootEl.value?.querySelectorAll('a[href]').forEach((a) => {
-    a.classList.add('lemonsqueezy-button')
-  })
-  instance.onLoaded(({ Setup, Refresh }) => {
-    Setup({
-      eventHandler(event) {
-        emits('lemonSqueezyEvent', event)
-      },
-    })
-    Refresh()
-    emits('ready', instance)
-  })
-})
-
-const rootAttrs = computed(() => {
-  return {
-    ...(trigger instanceof Promise ? trigger.ssrAttrs || {} : {}),
-  }
-})
-</script>
-
-<template>
-  <div ref="rootEl" v-bind="rootAttrs">
-    <slot />
-  </div>
-</template>
+<script lang="ts" setup>
+import { computed, onMounted, ref } from 'vue'
+import type { ElementScriptTrigger } from '../types'
+import { useScriptTriggerElement } from '../composables/useScriptTriggerElement'
+import { useScriptLemonSqueezy } from '../registry/lemon-squeezy'
+import type { LemonSqueezyEventPayload } from '../registry/lemon-squeezy'
+
+const props = withDefaults(defineProps<{
+  trigger?: ElementScriptTrigger
+}>(), {
+  trigger: 'visible',
+})
+
+const emits = defineEmits<{
+  ready: [ReturnType<typeof useScriptLemonSqueezy>]
+  lemonSqueezyEvent: [LemonSqueezyEventPayload]
+}>()
+
+const rootEl = ref<HTMLElement | null>(null)
+const trigger = useScriptTriggerElement({ trigger: props.trigger, el: rootEl })
+const instance = useScriptLemonSqueezy({
+  scriptOptions: {
+    trigger,
+  },
+})
+onMounted(() => {
+  rootEl.value?.querySelectorAll('a[href]').forEach((a) => {
+    a.classList.add('lemonsqueezy-button')
+  })
+  instance.onLoaded(({ Setup, Refresh }) => {
+    Setup({
+      eventHandler(event) {
+        emits('lemonSqueezyEvent', event)
+      },
+    })
+    Refresh()
+    emits('ready', instance)
+  })
+})
+
+const rootAttrs = computed(() => {
+  return {
+    ...(trigger instanceof Promise ? trigger.ssrAttrs || {} : {}),
+  }
+})
+</script>
+
+<template>
+  <div ref="rootEl" v-bind="rootAttrs">
+    <slot />
+  </div>
+</template>

package/dist/runtime/components/ScriptLoadingIndicator.vue

@@ -1,24 +1,24 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = withDefaults(defineProps<{
-  color?: string
-  size?: number
-}>(), {
-  color: 'currentColor',
-  size: 30,
-})
-
-const styles = computed(() => ({
-  width: `${props.size}px`,
-  height: `${props.size}px`,
-}))
-</script>
-
-<template>
-  <div class="loader" :styles="styles" aria-label="Loading..." role="status" />
-</template>
-
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<{
+  color?: string
+  size?: number
+}>(), {
+  color: 'currentColor',
+  size: 30,
+})
+
+const styles = computed(() => ({
+  width: `${props.size}px`,
+  height: `${props.size}px`,
+}))
+</script>
+
+<template>
+  <div class="loader" :styles="styles" aria-label="Loading..." role="status" />
+</template>
+
 <style scoped>
 .loader{animation:rotation 1s linear infinite;border:5px solid v-bind(color);border-bottom-color:transparent;border-radius:50%;box-sizing:border-box;display:inline-block;opacity:.5}@keyframes rotation{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
-</style>
+</style>

package/dist/runtime/components/ScriptStripePricingTable.vue

@@ -1,74 +1,74 @@
-<script setup lang="ts">
-import { ref, computed, onBeforeUnmount, onMounted, watch } from 'vue'
-import type { ElementScriptTrigger } from '../types'
-import { useScriptTriggerElement } from '../composables/useScriptTriggerElement'
-import { useScript } from '../composables/useScript'
-
-const props = withDefaults(defineProps<{
-  trigger?: ElementScriptTrigger
-  publishableKey: string
-  pricingTableId: string
-  clientReferenceId?: string
-  customerEmail?: string
-  customerSessionClientSecret?: string
-}>(), {
-  trigger: 'visible',
-})
-
-const emit = defineEmits<{
-  ready: [ReturnType<typeof useScript>]
-  error: []
-}>()
-
-const rootEl = ref<HTMLDivElement | undefined>()
-const containerEl = ref<HTMLDivElement | undefined>()
-const trigger = useScriptTriggerElement({ trigger: props.trigger, el: rootEl })
-const instance = useScript(`https://js.stripe.com/v3/pricing-table.js`, {
-  trigger,
-})
-const { onLoaded, status } = instance
-
-const pricingTable = ref<HTMLElement | undefined>()
-onMounted(() => {
-  onLoaded(() => {
-    const StripePricingTable = window.customElements.get('stripe-pricing-table')!
-    const stripePricingTable = new StripePricingTable()
-    stripePricingTable.setAttribute('publishable-key', props.publishableKey)
-    stripePricingTable.setAttribute('pricing-table-id', props.pricingTableId)
-    if (props.clientReferenceId)
-      stripePricingTable.setAttribute('client-reference-id', props.clientReferenceId)
-    if (props.customerEmail)
-      stripePricingTable.setAttribute('customer-email', props.customerEmail)
-    if (props.customerSessionClientSecret)
-      stripePricingTable.setAttribute('customer-session-client-secret', props.customerSessionClientSecret)
-    pricingTable.value = stripePricingTable
-    rootEl.value!.appendChild(stripePricingTable)
-    emit('ready', instance)
-  })
-  watch(status, (status) => {
-    if (status === 'error') {
-      emit('error')
-    }
-  })
-})
-
-onBeforeUnmount(() => {
-  pricingTable.value?.remove()
-})
-
-const rootAttrs = computed(() => {
-  return {
-    ...(trigger instanceof Promise ? trigger.ssrAttrs || {} : {}),
-  }
-})
-</script>
-
-<template>
-  <div ref="rootEl" v-bind="rootAttrs">
-    <div ref="containerEl" />
-    <slot v-if="status === 'loading'" name="loading" />
-    <slot v-if="status === 'awaitingLoad'" name="awaitingLoad" />
-    <slot v-else-if="status === 'error'" name="error" />
-    <slot />
-  </div>
-</template>
+<script setup lang="ts">
+import { ref, computed, onBeforeUnmount, onMounted, watch } from 'vue'
+import type { ElementScriptTrigger } from '../types'
+import { useScriptTriggerElement } from '../composables/useScriptTriggerElement'
+import { useScript } from '#imports'
+
+const props = withDefaults(defineProps<{
+  trigger?: ElementScriptTrigger
+  publishableKey: string
+  pricingTableId: string
+  clientReferenceId?: string
+  customerEmail?: string
+  customerSessionClientSecret?: string
+}>(), {
+  trigger: 'visible',
+})
+
+const emit = defineEmits<{
+  ready: [ReturnType<typeof useScript>]
+  error: []
+}>()
+
+const rootEl = ref<HTMLDivElement | undefined>()
+const containerEl = ref<HTMLDivElement | undefined>()
+const trigger = useScriptTriggerElement({ trigger: props.trigger, el: rootEl })
+const instance = useScript(`https://js.stripe.com/v3/pricing-table.js`, {
+  trigger,
+})
+const { onLoaded, status } = instance
+
+const pricingTable = ref<HTMLElement | undefined>()
+onMounted(() => {
+  onLoaded(() => {
+    const StripePricingTable = window.customElements.get('stripe-pricing-table')!
+    const stripePricingTable = new StripePricingTable()
+    stripePricingTable.setAttribute('publishable-key', props.publishableKey)
+    stripePricingTable.setAttribute('pricing-table-id', props.pricingTableId)
+    if (props.clientReferenceId)
+      stripePricingTable.setAttribute('client-reference-id', props.clientReferenceId)
+    if (props.customerEmail)
+      stripePricingTable.setAttribute('customer-email', props.customerEmail)
+    if (props.customerSessionClientSecret)
+      stripePricingTable.setAttribute('customer-session-client-secret', props.customerSessionClientSecret)
+    pricingTable.value = stripePricingTable
+    rootEl.value!.appendChild(stripePricingTable)
+    emit('ready', instance)
+  })
+  watch(status, (status) => {
+    if (status === 'error') {
+      emit('error')
+    }
+  })
+})
+
+onBeforeUnmount(() => {
+  pricingTable.value?.remove()
+})
+
+const rootAttrs = computed(() => {
+  return {
+    ...(trigger instanceof Promise ? trigger.ssrAttrs || {} : {}),
+  }
+})
+</script>
+
+<template>
+  <div ref="rootEl" v-bind="rootAttrs">
+    <div ref="containerEl" />
+    <slot v-if="status === 'loading'" name="loading" />
+    <slot v-if="status === 'awaitingLoad'" name="awaitingLoad" />
+    <slot v-else-if="status === 'error'" name="error" />
+    <slot />
+  </div>
+</template>