docs(feat): PWA Builder

docs/.vitepress/components.d.ts

@@ -15,7 +15,18 @@ 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']
+    PBRequiredField: typeof import('./theme/components/pwa-builder/PBRequiredField.vue')['default']
+    PBResult: typeof import('./theme/components/pwa-builder/PBResult.vue')['default']
+    PBResultEntry: typeof import('./theme/components/pwa-builder/PBResultEntry.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/PromptForUpdateImg.vue

@@ -1,14 +1,12 @@
 <template>
-  <p class="prompt-img">
-    <img src="/prompt-update.png" alt="Prompt for update for new content dialog image with the update and cancel button" width="922" height="228">
+  <p text-center class="prompt-img">
+    <img
+      src="/prompt-update.png"
+      alt="Prompt for update for new content dialog image with the update and cancel button"
+      width="922"
+      height="228"
+      object-scale-down
+    >
   </p>
 </template>
 
-<style scoped>
-.prompt-img {
-  text-align: center;
-}
-.prompt-img img {
-  object-fit: scale-down;
-}
-</style>

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,110 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  size?: 'medium' | 'big'
+  theme?: 'brand' | 'alt' | 'sponsor'
+}>()
+
+const classes = computed(() => [
+  props.size ?? 'medium',
+  props.theme ?? 'brand',
+])
+</script>
+
+<template>
+  <button
+    class="PBButton"
+    :class="classes"
+    v-bind="$attrs"
+  >
+    <slot />
+  </button>
+</template>
+
+<style scoped>
+.PBButton {
+  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;
+}
+
+.PBButton:active {
+  transition: color 0.1s, border-color 0.1s, background-color 0.1s;
+}
+
+.PBButton.medium {
+  border-radius: 20px;
+  padding: 0 20px;
+  line-height: 38px;
+  font-size: 14px;
+}
+
+.PBButton.big {
+  border-radius: 24px;
+  padding: 0 24px;
+  line-height: 46px;
+  font-size: 16px;
+}
+
+.PBButton.brand {
+  border-color: var(--vp-button-brand-border);
+  color: var(--vp-button-brand-text);
+  background-color: var(--vp-button-brand-bg);
+}
+
+.PBButton.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);
+}
+
+.PBButton.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);
+}
+
+.PBButton.alt {
+  border-color: var(--vp-button-alt-border);
+  color: var(--vp-button-alt-text);
+  background-color: var(--vp-button-alt-bg);
+}
+
+.PBButton.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);
+}
+
+.PBButton.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);
+}
+
+.PBButton.sponsor {
+  border-color: var(--vp-button-sponsor-border);
+  color: var(--vp-button-sponsor-text);
+  background-color: var(--vp-button-sponsor-bg);
+}
+
+.PBButton.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);
+}
+
+.PBButton.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);
+}
+
+.PBButton[disabled] {
+  cursor: unset !important;
+}
+</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="pb-errors-enter"
+    leave-active-class="pb-errors-leave"
+  >
+    <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 in all the fields of 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,13 @@
+<template>
+  <form grid="~ cols-[1fr] gap-y-1rem" v-bind="$attrs" novalidate>
+    <PBErrors />
+    <slot name="inputs" />
+    <div
+      pt-6 mt-6
+      border-t="~ base $vp-c-divider-light"
+      grid="~ cols-[minmax(auto,9em)_minmax(auto,9em)] gap-x-1rem lt-xs:cols-[1fr] lt-xs:gap-y-1rem"
+    >
+      <slot name="buttons" />
+    </div>
+  </form>
+</template>

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

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useState } from '../../composables/useState'
+import PBRequiredField from './PBRequiredField.vue'
+
+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>
+      <PBRequiredField>{{ title }}</PBRequiredField>
+    </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,64 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import type { RadioData } from '../../types'
+import { useState } from '../../composables/useState'
+import PBRequiredField from './PBRequiredField.vue'
+
+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>
+      <PBRequiredField>
+        {{ title }}
+      </PBRequiredField>
+    </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>