@nuxt/scripts 0.3.2 → 0.3.4

package/dist/runtime/components/ScriptGoogleMaps.vue

@@ -0,0 +1,264 @@
+<script lang="ts" setup>
+/// <reference types="google.maps" />
+import {
+  type HTMLAttributes,
+  type ImgHTMLAttributes,
+  type Ref,
+  type ReservedProps,
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch,
+} from 'vue'
+import { type QueryObject, withQuery } from 'ufo'
+import { defu } from 'defu'
+import type { ElementScriptTrigger } from '../composables/useElementScriptTrigger'
+import { scriptRuntimeConfig } from '../utils'
+import { resolveComponent, useElementScriptTrigger, useHead, useScriptGoogleMaps } from '#imports'
+
+interface PlaceholderOptions {
+  width?: string | number
+  height?: string | number
+  center?: string
+  zoom?: number
+  size?: string
+  scale?: number
+  format?: 'png' | 'jpg' | 'gif' | 'png8' | 'png32' | 'jpg-baseline'
+  maptype?: 'roadmap' | 'satellite' | 'terrain' | 'hybrid'
+  language?: string
+  region?: string
+  markers?: string
+  path?: string
+  visible?: string
+  style?: string
+  map_id?: string
+  key?: string
+  signature?: string
+}
+
+const props = withDefaults(defineProps<{
+  /**
+   * Defines the trigger event to load the script.
+   */
+  trigger?: ElementScriptTrigger
+  /**
+   * Is Google Maps being rendered above the fold?
+   * This will load the placeholder image with higher priority.
+   */
+  aboveTheFold?: boolean
+  /**
+   * Defines the Google Maps API key. Must have access to the Static Maps API as well.
+   */
+  apiKey: string
+  /**
+   * Defines map marker location.
+   */
+  query?: string
+  /**
+   * Options for the map.
+   */
+  options?: google.maps.MapOptions
+  /**
+   * Defines the width of the map.
+   */
+  width?: number | string
+  /**
+   * Defines the height of the map
+   */
+  height?: number | string
+  /**
+   * Customize the placeholder image attributes.
+   *
+   * @see https://developers.google.com/maps/documentation/maps-static/start.
+   */
+  placeholderOptions?: PlaceholderOptions
+  /**
+   * Customize the placeholder image attributes.
+   */
+  placeholderAttrs?: ImgHTMLAttributes & ReservedProps & Record<string, unknown>
+  /**
+   * Customize the root element attributes.
+   */
+  rootAttrs?: HTMLAttributes & ReservedProps & Record<string, unknown>
+}>(), {
+  // @ts-expect-error untyped
+  trigger: ['mouseenter', 'mouseover', 'mousedown'],
+  width: 600,
+  height: 400,
+})
+
+const emits = defineEmits<{
+  // our emit
+  ready: [e: Ref<google.maps.Map | undefined>]
+}>()
+
+const apiKey = props.apiKey || scriptRuntimeConfig('googleMaps')?.apiKey
+
+if (!apiKey)
+  throw new Error('GoogleMaps requires an API key. Please provide `apiKey` on the <ScriptGoogleMaps> or globally via `runtimeConfig.public.scripts.googleMaps.apiKey`.')
+if (!props.query && !props.options?.center)
+  throw new Error('GoogleMaps requires either a query or center prop to be set.')
+
+const rootEl = ref<HTMLElement>()
+const mapEl = ref<HTMLElement>()
+
+const { $script } = useScriptGoogleMaps({
+  apiKey: props.apiKey,
+  scriptOptions: {
+    trigger: useElementScriptTrigger({ trigger: props.trigger, el: rootEl }),
+  },
+})
+
+const options = computed(() => {
+  return defu(props.options, {
+    zoom: 15,
+    mapId: 'map',
+  })
+})
+const ready = ref(false)
+
+function queryToLocation(service: google.maps.places.PlacesService, query: string) {
+  return new Promise<google.maps.LatLng>((resolve, reject) => {
+    service.findPlaceFromQuery({
+      query,
+      fields: ['name', 'geometry'],
+    }, (results, status) => {
+      if (status === 'OK' && results?.[0]?.geometry?.location)
+        return resolve(results[0].geometry.location)
+      return reject(new Error(`No location found for ${query}`))
+    })
+  })
+}
+
+const map: Ref<google.maps.Map | undefined> = ref()
+const markers: Ref<google.maps.marker.AdvancedMarkerElement[]> = ref([])
+defineExpose({
+  map,
+  markers,
+})
+
+onMounted(() => {
+  watch(ready, (v) => {
+    v && emits('ready', map)
+  })
+  // create the map
+  $script.then(async (instance) => {
+    const maps = await instance.maps as typeof google.maps
+    const _map = new maps.Map(mapEl.value!, options.value)
+    const placesService = new maps.places.PlacesService(_map)
+
+    watch(options, () => _map.setOptions(options.value))
+    watch(() => props.query, async (query) => {
+      // always clear old markers
+      markers.value.forEach(marker => marker.remove())
+      markers.value = []
+      if (query) {
+        const marker = await maps.importLibrary('marker') as google.maps.MarkerLibrary
+        const location = await queryToLocation(placesService, query).catch((err) => {
+          console.warn(err)
+          return {
+            lat: 0,
+            lng: 0,
+          }
+        })
+        _map.setCenter(location)
+        markers.value.push(new marker.AdvancedMarkerElement({
+          map: _map,
+          position: location,
+        }))
+        ready.value = true
+      }
+    }, {
+      immediate: !!props.query,
+    })
+    if (!props.query)
+      ready.value = true
+    map.value = _map
+  })
+})
+
+if (import.meta.server) {
+  useHead({
+    link: [
+      {
+        rel: props.aboveTheFold ? 'preconnect' : 'dns-prefetch',
+        href: 'https://maps.googleapis.com',
+      },
+    ],
+  })
+}
+
+const placeholder = computed(() => {
+  const placeholderOptions: PlaceholderOptions = defu(props.placeholderOptions, {
+    // only map option values
+    zoom: options.value.zoom,
+    center: options.value.center?.toString() || '',
+  }, {
+    size: `${props.width}x${props.height}`,
+    key: apiKey,
+    scale: 2, // we assume a high DPI to avoid hydration issues
+    markers: `color:red|${props.query}`,
+  })
+  return withQuery('https://maps.googleapis.com/maps/api/staticmap', placeholderOptions as QueryObject)
+})
+
+const placeholderAttrs = computed(() => {
+  return defu(props.placeholderAttrs, {
+    src: placeholder.value,
+    alt: props.query || '',
+    loading: props.aboveTheFold ? 'eager' : 'lazy',
+    style: {
+      cursor: 'pointer',
+      width: '100%',
+      objectFit: 'cover',
+      height: '100%',
+    },
+  } satisfies ImgHTMLAttributes)
+})
+
+const rootAttrs = computed(() => {
+  return defu(props.rootAttrs, {
+    'aria-busy': $script.status.value === 'loading',
+    'aria-label': $script.status.value === 'awaitingLoad'
+      ? 'Google Maps Static Map'
+      : $script.status.value === 'loading'
+        ? 'Google Maps Map Embed Loading'
+        : 'Google Maps Embed',
+    'aria-live': 'polite',
+    'role': 'application',
+    'style': {
+      cursor: 'pointer',
+      position: 'relative',
+      maxWidth: '100%',
+      width: `${props.width}px`,
+      height: `'auto'`,
+      aspectRatio: `${props.width}/${props.height}`,
+    },
+  }) as HTMLAttributes
+})
+
+const ScriptLoadingIndicator = resolveComponent('ScriptLoadingIndicator')
+
+onBeforeUnmount(() => {
+  markers.value.forEach(marker => marker.remove())
+  markers.value = []
+  map.value?.unbindAll()
+  map.value = undefined
+  mapEl.value?.firstChild?.remove()
+})
+</script>
+
+<template>
+  <div ref="rootEl" v-bind="rootAttrs">
+    <div v-show="ready" ref="mapEl" class="script-google-maps__map" :style="{ width: '100%', height: '100%', maxWidth: '100%' }" />
+    <slot v-if="!ready" :placeholder="placeholder" name="placeholder">
+      <img v-bind="placeholderAttrs">
+    </slot>
+    <slot v-if="$script.status.value === 'loading'" name="loading">
+      <ScriptLoadingIndicator color="black" />
+    </slot>
+    <slot v-if="$script.status.value === 'awaitingLoad'" name="awaitingLoad" />
+    <slot />
+  </div>
+</template>

package/dist/runtime/components/ScriptLemonSqueezyButton.vue

@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import { type ElementScriptTrigger, onMounted, ref, useElementScriptTrigger, useScriptLemonSqueezy } from '#imports'
+
+const props = withDefaults(defineProps<{
+  trigger?: ElementScriptTrigger
+  href: string
+}>(), {
+  trigger: 'visible',
+})
+
+const emits = defineEmits<{
+  event: [{ event: string, data?: Record<string, any> }]
+}>()
+
+const rootEl = ref<HTMLElement | null>(null)
+const { $script } = useScriptLemonSqueezy({
+  scriptOptions: {
+    trigger: useElementScriptTrigger({ trigger: props.trigger, el: rootEl }),
+  },
+})
+onMounted(() => {
+  // @ts-expect-error untyped
+  $script.then(({ Setup }) => {
+    Setup({
+      // @ts-expect-error untyped
+      eventHandler(event) {
+        emits('event', event)
+      },
+    })
+  })
+})
+</script>
+
+<template>
+  <div ref="rootEl">
+    <slot v-bind="{ class: 'lemonsqueezy-button', href }">
+      <a :href="href" class="lemonsqueezy-button">
+        Buy me
+      </a>
+    </slot>
+  </div>
+</template>

package/dist/runtime/components/ScriptLoadingIndicator.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+withDefaults(defineProps<{
+  color?: string
+}>(), {
+  color: 'currentColor',
+})
+</script>
+
+<template>
+  <div class="loader" 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%;bottom:12px;box-sizing:border-box;display:inline-block;height:30px;left:12px;opacity:.5;position:absolute;width:30px}@keyframes rotation{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
+</style>

package/dist/runtime/components/ScriptStripePricingTable.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { ElementScriptTrigger } from '../composables/useElementScriptTrigger'
+import { useElementScriptTrigger, 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: []
+}>()
+
+const rootEl = ref()
+const { $script } = useScript(`https://js.stripe.com/v3/pricing-table.js`, {
+  trigger: useElementScriptTrigger({ trigger: props.trigger, el: rootEl }),
+})
+
+$script.then(() => {
+  emit('ready')
+})
+</script>
+
+<template>
+  <div ref="rootEl">
+    <ClientOnly>
+      <stripe-pricing-table
+        v-bind="$attrs"
+        :publishable-key="publishableKey"
+        :pricing-table-id="pricingTableId"
+        :client-reference-id="clientReferenceId"
+        :customer-email="customerEmail"
+        :customer-session-client-secret="customerSessionClientSecret"
+      />
+    </ClientOnly>
+    <slot v-if="$script.status.value === 'loading'" name="loading" />
+    <slot v-if="$script.status.value === 'awaitingLoad'" name="awaitingLoad" />
+    <slot />
+  </div>
+</template>

package/dist/runtime/components/ScriptVimeoPlayer.vue

@@ -0,0 +1,243 @@
+<script setup lang="ts">
+import { type HTMLAttributes, type ImgHTMLAttributes, computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import type Player from 'vimeo__player'
+import type { EventMap, VimeoVideoQuality } from 'vimeo__player'
+import { defu } from 'defu'
+import type { ElementScriptTrigger } from '../composables/useElementScriptTrigger'
+import { useAsyncData, useElementScriptTrigger, useHead, useScriptVimeoPlayer } from '#imports'
+
+const props = withDefaults(defineProps<{
+  // custom
+  trigger?: ElementScriptTrigger
+  placeholderAttrs?: ImgHTMLAttributes
+  rootAttrs?: HTMLAttributes
+  aboveTheFold?: boolean
+  // copied from @types/vimeo__player
+  id: string | number | undefined
+  url?: string | undefined
+  autopause?: boolean | undefined
+  autoplay?: boolean | undefined
+  background?: boolean | undefined
+  byline?: boolean | undefined
+  color?: string | undefined
+  controls?: boolean | undefined
+  dnt?: boolean | undefined
+  height?: number | undefined
+  // eslint-disable-next-line vue/prop-name-casing
+  interactive_params?: string | undefined
+  keyboard?: boolean | undefined
+  loop?: boolean | undefined
+  maxheight?: number | undefined
+  maxwidth?: number | undefined
+  muted?: boolean | undefined
+  pip?: boolean | undefined
+  playsinline?: boolean | undefined
+  portrait?: boolean | undefined
+  responsive?: boolean | undefined
+  speed?: boolean | undefined
+  quality?: VimeoVideoQuality | undefined
+  texttrack?: string | undefined
+  title?: boolean | undefined
+  transparent?: boolean | undefined
+  width?: number | undefined
+}>(), {
+  trigger: 'mousedown',
+  width: 640,
+  height: 480,
+  loop: false,
+  controls: true,
+})
+
+const emits = defineEmits<{
+  play: [e: EventMap['play'], player: Player]
+  playing: [e: EventMap['playing'], player: Player]
+  pause: [e: EventMap['pause'], player: Player]
+  ended: [e: EventMap['ended'], player: Player]
+  timeupdate: [e: EventMap['timeupdate'], player: Player]
+  progress: [e: EventMap['progress'], player: Player]
+  seeking: [e: EventMap['seeking'], player: Player]
+  seeked: [e: EventMap['seeked'], player: Player]
+  texttrackchange: [e: EventMap['texttrackchange'], player: Player]
+  chapterchange: [e: EventMap['chapterchange'], player: Player]
+  cuechange: [e: EventMap['cuechange'], player: Player]
+  cuepoint: [e: EventMap['cuepoint'], player: Player]
+  volumechange: [e: EventMap['volumechange'], player: Player]
+  playbackratechange: [e: EventMap['playbackratechange'], player: Player]
+  bufferstart: [e: EventMap['bufferstart'], player: Player]
+  bufferend: [e: EventMap['bufferend'], player: Player]
+  error: [e: EventMap['error'], player: Player]
+  loaded: [e: EventMap['loaded'], player: Player]
+  durationchange: [e: EventMap['durationchange'], player: Player]
+  fullscreenchange: [e: EventMap['fullscreenchange'], player: Player]
+  qualitychange: [e: EventMap['qualitychange'], player: Player]
+  camerachange: [e: EventMap['camerachange'], player: Player]
+  resize: [e: EventMap['resize'], player: Player]
+  enterpictureinpicture: [e: EventMap['enterpictureinpicture'], player: Player]
+  leavepictureinpicture: [e: EventMap['leavepictureinpicture'], player: Player]
+}>()
+
+const events = [
+  'play',
+  'playing',
+  'pause',
+  'ended',
+  'timeupdate',
+  'progress',
+  'seeking',
+  'seeked',
+  'texttrackchange',
+  'chapterchange',
+  'cuechange',
+  'cuepoint',
+  'volumechange',
+  'playbackratechange',
+  'bufferstart',
+  'bufferend',
+  'error',
+  'loaded',
+  'durationchange',
+  'fullscreenchange',
+  'qualitychange',
+  'camerachange',
+  'resize',
+]
+
+const elVimeo = ref()
+const rootEl = ref()
+
+const trigger = useElementScriptTrigger({ trigger: props.trigger, el: rootEl })
+let clickTriggered = false
+if (props.trigger === 'mousedown') {
+  trigger.then(() => {
+    clickTriggered = true
+  })
+}
+const ready = ref(false)
+const { $script } = useScriptVimeoPlayer({
+  scriptOptions: {
+    trigger,
+  },
+})
+
+if (import.meta.server) {
+  // dns-prefetch https://i.vimeocdn.com
+  useHead({
+    link: [
+      {
+        rel: props.aboveTheFold ? 'preconnect' : 'dns-prefetch',
+        href: 'https://i.vimeocdn.com',
+      },
+    ],
+  })
+}
+
+const { data: payload } = useAsyncData(
+  `vimeo-embed:${props.id}`,
+  // TODO ideally we cache this
+  () => $fetch(`https://vimeo.com/api/v2/video/${props.id}.json`).then(res => res[0]),
+  {
+    watch: [() => props.id],
+  },
+)
+
+const placeholder = computed(() => payload.value?.thumbnail_large)
+
+let player: Player | undefined
+// we can't directly expose the player as vue will break the proxy
+defineExpose({
+  play: () => player?.play(),
+  pause: () => player?.pause(),
+  getDuration: () => player?.getDuration(),
+  getCurrentTime: () => player?.getCurrentTime(),
+  setCurrentTime: (time: number) => player?.setCurrentTime(time),
+  getVolume: () => player?.getVolume(),
+  setVolume: (volume: number) => player?.setVolume(volume),
+  getPaused: () => player?.getPaused(),
+  getEnded: () => player?.getEnded(),
+  getLoop: () => player?.getLoop(),
+  setLoop: (loop: boolean) => player?.setLoop(loop),
+  getPlaybackRate: () => player?.getPlaybackRate(),
+  setPlaybackRate: (rate: number) => player?.setPlaybackRate(rate),
+})
+onMounted(() => {
+  $script.then(async ({ Vimeo }) => {
+    // filter props for false values
+    player = new Vimeo.Player(elVimeo.value, {
+      ...props,
+      url: encodeURI(`https://vimeo.com/${props.id}`),
+    })
+    if (clickTriggered) {
+      player!.play()
+      clickTriggered = false
+    }
+    for (const event of events) {
+      player!.on(event, (e) => {
+        emits(event, e, player)
+        if (event === 'loaded')
+          ready.value = true
+      })
+    }
+  })
+
+  watch(() => props.id, (v) => {
+    v && player?.loadVideo(Number(v))
+  })
+})
+
+const rootAttrs = computed(() => {
+  return defu(props.rootAttrs, {
+    'aria-busy': $script.status.value === 'loading',
+    'aria-label': $script.status.value === 'awaitingLoad'
+      ? 'Vimeo Player - Placeholder'
+      : $script.status.value === 'loading'
+        ? 'Vimeo Player - Loading'
+        : 'Vimeo Player - Loaded',
+    'aria-live': 'polite',
+    'role': 'application',
+    'style': {
+      maxWidth: '100%',
+      width: `${props.width}px`,
+      height: `'auto'`,
+      aspectRatio: `${props.width}/${props.height}`,
+      position: 'relative',
+      backgroundColor: 'black',
+    },
+  }) as HTMLAttributes
+})
+
+const placeholderAttrs = computed(() => {
+  return defu(props.placeholderAttrs, {
+    src: placeholder.value,
+    alt: '',
+    loading: props.aboveTheFold ? 'eager' : 'lazy',
+    // @ts-expect-error untyped
+    fetchpriority: props.aboveTheFold ? 'high' : undefined,
+    style: {
+      cursor: 'pointer',
+      width: '100%',
+      objectFit: 'contain',
+      height: '100%',
+    },
+  } satisfies ImgHTMLAttributes)
+})
+
+onBeforeUnmount(() => player?.unload())
+</script>
+
+<template>
+  <div ref="rootEl" v-bind="rootAttrs">
+    <div v-show="ready" ref="elVimeo" class="vimeo-player" style="width: 100%; height: 100%; max-width: 100%;" />
+    <slot v-if="!ready" v-bind="payload" :placeholder="placeholder" name="placeholder">
+      <img v-if="placeholder" v-bind="placeholderAttrs">
+    </slot>
+    <slot v-if="$script.status.value === 'loading'" name="loading">
+      <ScriptLoadingIndicator color="white" />
+    </slot>
+    <slot v-if="$script.status.value === 'awaitingLoad'" name="awaitingLoad" />
+    <slot />
+  </div>
+</template>
+
+<style>
+.vimeo-player iframe{max-width:100%!important}
+</style>