docs(feat): PWA Builder

docs/.vitepress/components.d.ts

@@ -15,7 +15,15 @@ declare module '@vue/runtime-core' {
     HomePage: typeof import('./theme/components/HomePage.vue')['default']
     InjectManifestCleanupOutdatedCaches: typeof import('./theme/components/InjectManifestCleanupOutdatedCaches.md')['default']
     InjectManifestSourceMap: typeof import('./theme/components/InjectManifestSourceMap.md')['default']
+    PBArticle: typeof import('./theme/components/pwa-builder/PBArticle.vue')['default']
+    PBButton: typeof import('./theme/components/pwa-builder/PBButton.vue')['default']
+    PBErrors: typeof import('./theme/components/pwa-builder/PBErrors.vue')['default']
+    PBForm: typeof import('./theme/components/pwa-builder/PBForm.vue')['default']
+    PBInputColor: typeof import('./theme/components/pwa-builder/PBInputColor.vue')['default']
+    PBInputRadio: typeof import('./theme/components/pwa-builder/PBInputRadio.vue')['default']
+    PBInputText: typeof import('./theme/components/pwa-builder/PBInputText.vue')['default']
     PromptForUpdateImg: typeof import('./theme/components/PromptForUpdateImg.vue')['default']
+    PWABuilder: typeof import('./theme/components/pwa-builder/PWABuilder.vue')['default']
     ReloadPrompt: typeof import('./theme/components/ReloadPrompt.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

docs/.vitepress/config.ts

@@ -296,15 +296,19 @@ export default defineConfig({
             text: 'Examples',
             link: '/examples/',
           },
+          {
+            text: 'Deploy',
+            link: '/deploy/',
+          },
+          {
+            text: 'Workbox',
+            link: '/workbox/',
+          },
         ],
       },
       {
-        text: 'Deploy',
-        link: '/deployment/',
-      },
-      {
-        text: 'Workbox',
-        link: '/workbox/',
+        text: 'PWA Builder',
+        link: '/pwa-builder',
       },
       {
         text: `v${version}`,
@@ -326,6 +330,7 @@ export default defineConfig({
       '/examples/': prepareSidebar(2),
       '/deployment/': prepareSidebar(3),
       '/workbox/': prepareSidebar(4),
+      '/pwa-builder': prepareSidebar(-1),
     },
   },
 })

docs/.vitepress/theme/components/pwa-builder/PBArticle.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+defineProps<{
+  id: string
+  title: string
+}>()
+</script>
+
+<template>
+  <article :id="id" :aria-labelledby="`${id}-label`" grid="~ cols-[1fr] gap-y-1rem">
+    <h2 :id="`${id}-label`" important="border-none m-0 p-0">
+      {{ title }}
+    </h2>
+    <slot />
+  </article>
+</template>

docs/.vitepress/theme/components/pwa-builder/PBButton.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { withBase } from 'vitepress'
+
+const props = defineProps<{
+  tag?: string
+  size?: 'medium' | 'big'
+  theme?: 'brand' | 'alt' | 'sponsor'
+  text: string
+  href?: string
+}>()
+
+const classes = computed(() => [
+  props.size ?? 'medium',
+  props.theme ?? 'brand',
+])
+
+const isExternal = computed(() => props.href && /^[a-z]+:/i.test(props.href))
+
+const component = computed(() => {
+  if (props.tag)
+    return props.tag
+
+  return props.href ? 'a' : 'button'
+})
+</script>
+
+<template>
+  <component
+    :is="component"
+    class="VPButton"
+    :class="classes"
+    :href="href ? withBase(href) : undefined"
+    :target="isExternal ? '_blank' : undefined"
+    :rel="isExternal ? 'noopener noreferrer' : undefined"
+  >
+    {{ text }}
+  </component>
+</template>
+
+<style scoped>
+.VPButton {
+  display: inline-block;
+  border: 1px solid transparent;
+  text-align: center;
+  font-weight: 500;
+  white-space: nowrap;
+  transition: color 0.25s, border-color 0.25s, background-color 0.25s;
+}
+
+.VPButton:active {
+  transition: color 0.1s, border-color 0.1s, background-color 0.1s;
+}
+
+.VPButton.medium {
+  border-radius: 20px;
+  padding: 0 20px;
+  line-height: 38px;
+  font-size: 14px;
+}
+
+.VPButton.big {
+  border-radius: 24px;
+  padding: 0 24px;
+  line-height: 46px;
+  font-size: 16px;
+}
+
+.VPButton.brand {
+  border-color: var(--vp-button-brand-border);
+  color: var(--vp-button-brand-text);
+  background-color: var(--vp-button-brand-bg);
+}
+
+.VPButton.brand:hover {
+  border-color: var(--vp-button-brand-hover-border);
+  color: var(--vp-button-brand-hover-text);
+  background-color: var(--vp-button-brand-hover-bg);
+}
+
+.VPButton.brand:active {
+  border-color: var(--vp-button-brand-active-border);
+  color: var(--vp-button-brand-active-text);
+  background-color: var(--vp-button-brand-active-bg);
+}
+
+.VPButton.alt {
+  border-color: var(--vp-button-alt-border);
+  color: var(--vp-button-alt-text);
+  background-color: var(--vp-button-alt-bg);
+}
+
+.VPButton.alt:hover {
+  border-color: var(--vp-button-alt-hover-border);
+  color: var(--vp-button-alt-hover-text);
+  background-color: var(--vp-button-alt-hover-bg);
+}
+
+.VPButton.alt:active {
+  border-color: var(--vp-button-alt-active-border);
+  color: var(--vp-button-alt-active-text);
+  background-color: var(--vp-button-alt-active-bg);
+}
+
+.VPButton.sponsor {
+  border-color: var(--vp-button-sponsor-border);
+  color: var(--vp-button-sponsor-text);
+  background-color: var(--vp-button-sponsor-bg);
+}
+
+.VPButton.sponsor:hover {
+  border-color: var(--vp-button-sponsor-hover-border);
+  color: var(--vp-button-sponsor-hover-text);
+  background-color: var(--vp-button-sponsor-hover-bg);
+}
+
+.VPButton.sponsor:active {
+  border-color: var(--vp-button-sponsor-active-border);
+  color: var(--vp-button-sponsor-active-text);
+  background-color: var(--vp-button-sponsor-active-bg);
+}
+</style>

docs/.vitepress/theme/components/pwa-builder/PBErrors.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { errors } from '../../composables/pwaBuilder'
+
+const ulRef = ref<HTMLUListElement | undefined>(undefined)
+const hasErrors = computed(() => {
+  return errors && errors.value.length > 0
+})
+const focusFirstError = () => {
+  ulRef.value?.querySelector<HTMLAnchorElement>('li:first-of-type a')?.focus({
+    preventScroll: true,
+  })
+}
+</script>
+
+<template>
+  <transition
+    enter-active-class="animate-zoom-in animate-count-1 animate-duration-0.5s"
+    leave-active-class="animate-zoom-out animate-count-1 animate-duration-0.5s"
+  >
+    <div v-if="hasErrors" role="alert" aria-labelledby="errors" class="custom-block danger important-m-0">
+      <a id="errors" fw-bold href="#" @click.prevent="focusFirstError">
+        You must fill all the fields in the form:
+      </a>
+      <ul ref="ulRef">
+        <li v-for="error of errors" :key="error.key">
+          <a href="#" @click.prevent="error.focus()">{{ error.text }}</a>
+        </li>
+      </ul>
+    </div>
+  </transition>
+</template>

docs/.vitepress/theme/components/pwa-builder/PBForm.vue

@@ -0,0 +1,8 @@
+<template>
+  <form grid="~ cols-[1fr] gap-y-1rem" v-bind="$attrs" novalidate>
+    <PBErrors />
+    <slot name="inputs" />
+    <br border="~ solid">
+    <slot name="buttons" />
+  </form>
+</template>

docs/.vitepress/theme/components/pwa-builder/PBInputColor.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useState } from '../../composables/useState'
+
+const props = defineProps<{
+  id: string
+  title: string
+  error: string
+  modelValue?: string
+}>()
+
+defineEmits<{
+  (event: 'update:modelValue', value: any): void
+}>()
+
+const validate = () => {
+  const value = props.modelValue
+  if (!value || value.trim().length === 0)
+    return { isValid: false, message: props.error }
+  else
+    return { isValid: true }
+}
+
+const input = ref(undefined)
+const { error } = useState(props.id, input, validate)
+const errorClass = computed(() => {
+  return error.value ? 'pb-error custom-block danger' : undefined
+})
+</script>
+
+<template>
+  <label pb-input>
+    <span fw-500 text-lg>{{ title }}:</span>
+    <input
+      :id="id"
+      ref="input"
+      type="color"
+      v-bind="$attrs"
+      :value="modelValue"
+      :class="errorClass"
+      border="~ rounded base"
+      h-34px
+      p="x2 y1"
+      @input="$emit('update:modelValue', $event.target.value)"
+    >
+  </label>
+</template>

docs/.vitepress/theme/components/pwa-builder/PBInputRadio.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import type { RadioData } from '../../composables/pwaBuilder'
+import { useState } from '../../composables/useState'
+
+const props = defineProps<{
+  id: string
+  title: string
+  error: string
+  options: RadioData<any>[]
+  modelValue?: any
+}>()
+defineEmits<{
+  (event: 'update:modelValue', value: any): void
+}>()
+
+const validate = () => {
+  const value = props.modelValue
+  if (!value || value.trim().length === 0)
+    return { isValid: false, message: props.error }
+  else
+    return { isValid: true }
+}
+
+const input = ref(undefined)
+const { error } = useState(props.id, input, validate)
+const errorClass = computed(() => {
+  return error.value ? 'pb-error text-$vp-custom-block-danger-text' : undefined
+})
+</script>
+
+<template>
+  <div
+    :id="id"
+    ref="input"
+    :aria-labelledby="`${id}-label`"
+    :class="error ? 'text-$vp-custom-block-danger-text' : undefined"
+    grid="~ rows-[auto_1fr] gap-y-1rem"
+    tabindex="-1"
+  >
+    <div :id="`${id}-label`" fw-500 text-lg>
+      {{ title }}
+    </div>
+    <div grid="~ cols-1fr gap-y-0.5rem" items-center :class="errorClass">
+      <label v-for="option of options" :key="option.value" grid="~ cols-[min-content_1fr] gap-x-0.8rem" items-center>
+        <input
+          v-model="/* eslint-disable */ modelValue"
+          text-2rem
+          w="0.7em"
+          h="0.7em"
+          m="0"
+          :value="option.value"
+          type="radio"
+          :disabled="option.disabled"
+          @change="$emit('update:modelValue', $event.target.value)"
+        >
+        <span fw-400 w-full>{{ option.text }}</span>
+      </label>
+    </div>
+  </div>
+</template>

docs/.vitepress/theme/components/pwa-builder/PBInputText.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useDebounceFn } from '@vueuse/shared'
+import { useState } from '../../composables/useState'
+import type { BuilderError } from '../../composables/pwaBuilder'
+
+const props = defineProps<{
+  id: string
+  title: string
+  error: string
+  modelValue?: string
+}>()
+
+defineEmits<{
+  (event: 'update:modelValue', value: any): void
+}>()
+
+const validate = () => {
+  const value = props.modelValue
+  if (!value || value.trim().length === 0)
+    return { isValid: false, message: props.error }
+  else
+    return { isValid: true }
+}
+
+const input = ref(undefined)
+const { error, validateField } = useState(props.id, input, validate)
+const errorClass = computed(() => {
+  return error.value ? 'pb-error custom-block danger important-m-0' : undefined
+})
+</script>
+
+<template>
+  <label pb-input>
+    <span
+      fw-500
+      text-lg
+      block
+      :class="error ? 'text-$vp-custom-block-danger-text' : undefined"
+    >{{ title }}</span>
+    <input
+      :id="id"
+      ref="input"
+      type="text"
+      autocomplete="off"
+      v-bind="$attrs"
+      :value="modelValue"
+      :class="errorClass"
+      border="~ rounded base"
+      p="x2 y1"
+      @blur="validateField"
+      @input="$emit('update:modelValue', $event.target.value)"
+    >
+  </label>
+</template>