@vuepress/plugin-pwa 2.0.0-rc.80 → 2.0.0-rc.82
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{useLocaleConfig as h}from"@vuepress/helper/client";import{useEventListener as f,useToggle as C}from"@vueuse/core";import{defineComponent as g,shallowRef as b,h as e,onMounted as w,ref as u,computed as y}from"vue";import{withBase as k}from"vuepress/client";import{C as P,A as S,a as A}from"../icons-DQk7h1-3.js";import"../styles/modal.css";const O=g({name:"PwaInstallModal",props:{locales:{type:Object,required:!0},useHint:Boolean},emits:["canInstall","hint","close"],setup(c,{emit:l}){const o=h(c.locales),t=b({}),n=b(),r=async()=>{const a=localStorage.getItem("manifest");if(a)t.value=JSON.parse(a);else try{const m=await(await fetch(k("manifest.webmanifest"))).json();t.value=m,localStorage.setItem("manifest",JSON.stringify(m))}catch{console.error("[PWA]: Error getting manifest, check that you have a valid web manifest or network connection")}},v=()=>{const a=document.querySelector(".screenshot");a&&a.scrollBy({left:-a.clientWidth,top:0,behavior:"smooth"})},p=()=>{const a=document.querySelector(".screenshot");a&&a.scrollBy({left:a.clientWidth,top:0,behavior:"smooth"})},i=async()=>{n.value&&(n.value.prompt(),document.dispatchEvent(new CustomEvent("show")),(await n.value.userChoice).outcome==="accepted"?(console.info("PWA has been installed"),l("close",!1),l("canInstall",!1)):(console.info("You choose to not install PWA"),l("close",!1),l("canInstall",!1)))},d=()=>{console.info("You accepted the install hint"),l("hint")};return w(()=>{window.hasOwnProperty("BeforeInstallPromptEvent")&&(f(window,"beforeinstallprompt",a=>{n.value=a,l("canInstall",!0),a.preventDefault()}),f("keyup",a=>{a.key==="Escape"&&l("close",!1)}),r())}),()=>e("div",{id:"install-modal-wrapper"},[e("div",{class:"background",onClick:()=>{l("close",!1)}}),e("div",{class:"install-modal"},[e("div",{class:"header"},[e("button",{type:"button",class:"close-button","aria-label":o.value.close,onClick:()=>{l("close",!1)}},e(P)),e("div",{class:"logo"},[t.value.icons?e("img",{src:t.value.icons[0]?.src,alt:"App Logo"}):null,e("div",{class:"title"},[e("h1",t.value.short_name||t.value.name),e("p",{class:"desc"},o.value.explain)])])]),e("div",{class:"content"},[e("div",{class:"highlight"},[t.value.features?e("div",{class:"feature-wrapper"},[e("h3",o.value.feature),e("ul",t.value.features.map(a=>e("li",a)))]):null,t.value.screenshots?e("div",{class:"screenshot-wrapper"},[e("button",{type:"button","aria-label":o.value.prevImage,onClick:v},e(S)),e("section",{class:"screenshot"},[t.value.screenshots.map(a=>e("div",e("img",{src:a.src,alt:"App Screenshot"})))]),e("button",{type:"button","aria-label":o.value.nextImage,onClick:p},e(A))]):null]),e("div",{class:"description"},[e("h3",o.value.desc),e("p",t.value.description)])]),c.useHint?e("div",{class:"ios-text",onClick:d},[e("p",o.value.iOSInstall),e("button",{type:"button",class:"success"},"Got it!")]):e("div",{class:"button-wrapper"},[e("button",{type:"button",class:"install-button",onClick:i},[o.value.install,e("span",t.value.short_name)]),e("button",{type:"button",class:"cancel-button",onClick:()=>{l("close",!1)}},o.value.cancel)])])])}}),x=g({name:"PwaInstall",props:{locales:{type:Object,required:!0}},setup(c){const l=h(c.locales),[o,t]=C(
|
|
1
|
+
import{useLocaleConfig as h}from"@vuepress/helper/client";import{useEventListener as f,useToggle as C}from"@vueuse/core";import{defineComponent as g,shallowRef as b,h as e,onMounted as w,ref as u,computed as y}from"vue";import{withBase as k}from"vuepress/client";import{C as P,A as S,a as A}from"../icons-DQk7h1-3.js";import"../styles/modal.css";const O=g({name:"PwaInstallModal",props:{locales:{type:Object,required:!0},useHint:Boolean},emits:["canInstall","hint","close"],setup(c,{emit:l}){const o=h(c.locales),t=b({}),n=b(),r=async()=>{const a=localStorage.getItem("manifest");if(a)t.value=JSON.parse(a);else try{const m=await(await fetch(k("manifest.webmanifest"))).json();t.value=m,localStorage.setItem("manifest",JSON.stringify(m))}catch{console.error("[PWA]: Error getting manifest, check that you have a valid web manifest or network connection")}},v=()=>{const a=document.querySelector(".screenshot");a&&a.scrollBy({left:-a.clientWidth,top:0,behavior:"smooth"})},p=()=>{const a=document.querySelector(".screenshot");a&&a.scrollBy({left:a.clientWidth,top:0,behavior:"smooth"})},i=async()=>{n.value&&(n.value.prompt(),document.dispatchEvent(new CustomEvent("show")),(await n.value.userChoice).outcome==="accepted"?(console.info("PWA has been installed"),l("close",!1),l("canInstall",!1)):(console.info("You choose to not install PWA"),l("close",!1),l("canInstall",!1)))},d=()=>{console.info("You accepted the install hint"),l("hint")};return w(()=>{window.hasOwnProperty("BeforeInstallPromptEvent")&&(f(window,"beforeinstallprompt",a=>{n.value=a,l("canInstall",!0),a.preventDefault()}),f("keyup",a=>{a.key==="Escape"&&l("close",!1)}),r())}),()=>e("div",{id:"install-modal-wrapper"},[e("div",{class:"background",onClick:()=>{l("close",!1)}}),e("div",{class:"install-modal"},[e("div",{class:"header"},[e("button",{type:"button",class:"close-button","aria-label":o.value.close,onClick:()=>{l("close",!1)}},e(P)),e("div",{class:"logo"},[t.value.icons?e("img",{src:t.value.icons[0]?.src,alt:"App Logo"}):null,e("div",{class:"title"},[e("h1",t.value.short_name||t.value.name),e("p",{class:"desc"},o.value.explain)])])]),e("div",{class:"content"},[e("div",{class:"highlight"},[t.value.features?e("div",{class:"feature-wrapper"},[e("h3",o.value.feature),e("ul",t.value.features.map(a=>e("li",a)))]):null,t.value.screenshots?e("div",{class:"screenshot-wrapper"},[e("button",{type:"button","aria-label":o.value.prevImage,onClick:v},e(S)),e("section",{class:"screenshot"},[t.value.screenshots.map(a=>e("div",e("img",{src:a.src,alt:"App Screenshot"})))]),e("button",{type:"button","aria-label":o.value.nextImage,onClick:p},e(A))]):null]),e("div",{class:"description"},[e("h3",o.value.desc),e("p",t.value.description)])]),c.useHint?e("div",{class:"ios-text",onClick:d},[e("p",o.value.iOSInstall),e("button",{type:"button",class:"success"},"Got it!")]):e("div",{class:"button-wrapper"},[e("button",{type:"button",class:"install-button",onClick:i},[o.value.install,e("span",t.value.short_name)]),e("button",{type:"button",class:"cancel-button",onClick:()=>{l("close",!1)}},o.value.cancel)])])])}}),x=g({name:"PwaInstall",props:{locales:{type:Object,required:!0}},setup(c){const l=h(c.locales),[o,t]=C(),n=u(!1),r=u(!1),v=u(!1),p=u(!1),i=u(!1),d=y(()=>v.value&&p.value&&!i.value),a=y(()=>r.value&&n.value||d.value),m=()=>navigator.standalone?navigator.standalone:matchMedia("(display-mode: standalone)").matches,I=()=>{t(!1),i.value=!0,localStorage.setItem("iOS-pwa-hint","hinted")};return w(()=>{if(m()){const{userAgent:s}=navigator;v.value=s.includes("iPhone")||s.includes("iPad")||!!(s.includes("Macintosh")&&navigator.maxTouchPoints&&navigator.maxTouchPoints>2),p.value=navigator.userAgent.includes("Safari")&&!s.includes("Chrome"),i.value=!!localStorage.getItem("iOS-pwa-hint")}"getInstalledRelatedApps"in navigator&&navigator.getInstalledRelatedApps().then(s=>{r.value=s.length>0})}),()=>e("div",{id:"pwa-install"},[a.value?e("button",{type:"button",class:"modal-button",onClick:()=>{t(!0)}},l.value.install):null,e(O,{style:{display:o.value?"block":"none"},locales:c.locales,useHint:d.value,onCanInstall:s=>{n.value=s},onHint:()=>{I()},onClose:()=>t(!1)})])}});export{x as PwaInstall};
|
|
2
2
|
//# sourceMappingURL=PwaInstall.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PwaInstall.js","sources":["../../../src/client/components/PwaInstallModal.ts","../../../src/client/components/PwaInstall.ts"],"sourcesContent":["/* eslint-disable no-console */\nimport { useLocaleConfig } from '@vuepress/helper/client'\nimport { useEventListener } from '@vueuse/core'\nimport type { PropType, VNode } from 'vue'\nimport { defineComponent, h, onMounted, shallowRef } from 'vue'\nimport { withBase } from 'vuepress/client'\nimport type { AppManifest } from '../../shared/index.js'\nimport type { PwaPluginLocaleConfig } from '../types.js'\nimport { ArrowLeftIcon, ArrowRightIcon, CloseIcon } from './icons.js'\n\ninterface InstallPromptEvent extends Event {\n readonly platforms: string\n prompt: () => void\n readonly userChoice: Promise<{ outcome: 'accepted' | 'dismissed' }>\n}\n\nexport const PwaInstallModal = defineComponent({\n name: 'PwaInstallModal',\n\n props: {\n /** locale data */\n locales: {\n type: Object as PropType<PwaPluginLocaleConfig>,\n required: true,\n },\n\n /**\n * Whether use hint message instead of showing a button\n *\n * 是否使用提示\n */\n useHint: Boolean,\n },\n\n emits: ['canInstall', 'hint', 'close'],\n\n setup(props, { emit }) {\n const locale = useLocaleConfig(props.locales)\n\n const manifest = shallowRef<AppManifest>({})\n const deferredPrompt = shallowRef<InstallPromptEvent>()\n\n const getManifest = async (): Promise<void> => {\n const manifestContent = localStorage.getItem('manifest')\n\n if (manifestContent)\n manifest.value = JSON.parse(manifestContent) as AppManifest\n else\n try {\n const response = await fetch(withBase('manifest.webmanifest'))\n const data = (await response.json()) as AppManifest\n\n manifest.value = data\n localStorage.setItem('manifest', JSON.stringify(data))\n } catch {\n console.error(\n '[PWA]: Error getting manifest, check that you have a valid web manifest or network connection',\n )\n }\n }\n\n const scrollToLeft = (): void => {\n const screenshotsDiv = document.querySelector('.screenshot')\n\n if (screenshotsDiv)\n screenshotsDiv.scrollBy({\n left: -screenshotsDiv.clientWidth,\n top: 0,\n behavior: 'smooth',\n })\n }\n\n const scrollToRight = (): void => {\n const screenshotsDiv = document.querySelector('.screenshot')\n\n if (screenshotsDiv)\n screenshotsDiv.scrollBy({\n left: screenshotsDiv.clientWidth,\n top: 0,\n behavior: 'smooth',\n })\n }\n\n const install = async (): Promise<void> => {\n if (deferredPrompt.value) {\n deferredPrompt.value.prompt()\n\n document.dispatchEvent(new CustomEvent('show'))\n\n const choiceResult = await deferredPrompt.value.userChoice\n\n if (choiceResult.outcome === 'accepted') {\n console.info('PWA has been installed')\n\n emit('close', false)\n emit('canInstall', false)\n } else {\n console.info('You choose to not install PWA')\n\n emit('close', false)\n emit('canInstall', false)\n }\n }\n }\n\n const hint = (): void => {\n console.info('You accepted the install hint')\n emit('hint')\n }\n\n onMounted(() => {\n // eslint-disable-next-line no-prototype-builtins\n if (window.hasOwnProperty('BeforeInstallPromptEvent')) {\n useEventListener(window, 'beforeinstallprompt', (event) => {\n deferredPrompt.value = event as InstallPromptEvent\n\n emit('canInstall', true)\n event.preventDefault()\n })\n\n useEventListener('keyup', (event): void => {\n if (event.key === 'Escape') emit('close', false)\n })\n\n void getManifest()\n }\n })\n\n return (): VNode =>\n h('div', { id: 'install-modal-wrapper' }, [\n h('div', {\n class: 'background',\n onClick: () => {\n emit('close', false)\n },\n }),\n\n h('div', { class: 'install-modal' }, [\n h('div', { class: 'header' }, [\n // close button\n h(\n 'button',\n {\n 'type': 'button',\n 'class': 'close-button',\n 'aria-label': locale.value.close,\n 'onClick': () => {\n emit('close', false)\n },\n },\n h(CloseIcon),\n ),\n\n h('div', { class: 'logo' }, [\n manifest.value.icons\n ? h('img', {\n src: manifest.value.icons[0]?.src,\n alt: 'App Logo',\n })\n : null,\n h('div', { class: 'title' }, [\n h('h1', manifest.value.short_name || manifest.value.name),\n h('p', { class: 'desc' }, locale.value.explain),\n ]),\n ]),\n ]),\n\n h('div', { class: 'content' }, [\n h('div', { class: 'highlight' }, [\n manifest.value.features\n ? h('div', { class: 'feature-wrapper' }, [\n h('h3', locale.value.feature),\n h(\n 'ul',\n manifest.value.features.map((feature) =>\n h('li', feature),\n ),\n ),\n ])\n : null,\n\n manifest.value.screenshots\n ? h('div', { class: 'screenshot-wrapper' }, [\n h(\n 'button',\n {\n 'type': 'button',\n 'aria-label': locale.value.prevImage,\n 'onClick': scrollToLeft,\n },\n h(ArrowLeftIcon),\n ),\n h('section', { class: 'screenshot' }, [\n manifest.value.screenshots.map((screenshot) =>\n h(\n 'div',\n h('img', {\n src: screenshot.src,\n alt: 'App Screenshot',\n }),\n ),\n ),\n ]),\n h(\n 'button',\n {\n 'type': 'button',\n 'aria-label': locale.value.nextImage,\n 'onClick': scrollToRight,\n },\n h(ArrowRightIcon),\n ),\n ])\n : null,\n ]),\n\n h('div', { class: 'description' }, [\n h('h3', locale.value.desc),\n h('p', manifest.value.description),\n ]),\n ]),\n\n props.useHint\n ? h('div', { class: 'ios-text', onClick: hint }, [\n h('p', locale.value.iOSInstall),\n h('button', { type: 'button', class: 'success' }, 'Got it!'),\n ])\n : h('div', { class: 'button-wrapper' }, [\n h(\n 'button',\n { type: 'button', class: 'install-button', onClick: install },\n [locale.value.install, h('span', manifest.value.short_name)],\n ),\n h(\n 'button',\n {\n type: 'button',\n class: 'cancel-button',\n onClick: () => {\n emit('close', false)\n },\n },\n locale.value.cancel,\n ),\n ]),\n ]),\n ])\n },\n})\n","import { useLocaleConfig } from '@vuepress/helper/client'\nimport { useToggle } from '@vueuse/core'\nimport type { PropType, VNode } from 'vue'\nimport { computed, defineComponent, h, onMounted, ref } from 'vue'\nimport type { ManifestExternalApplicationResource } from '../../shared/index.js'\nimport type { PwaPluginLocaleConfig } from '../types.js'\nimport { PwaInstallModal } from './PwaInstallModal.js'\n\nimport '../styles/modal.css'\n\ninterface ModernNavigator extends Navigator {\n // Nonstandard Api\n getInstalledRelatedApps: () => Promise<ManifestExternalApplicationResource[]>\n}\n\ninterface SafariNavigator extends Navigator {\n // Available on Apple’s iOS Safari only.\n standalone: boolean\n}\n\nexport const PwaInstall = defineComponent({\n name: 'PwaInstall',\n\n props: {\n /** locale data */\n locales: {\n type: Object as PropType<PwaPluginLocaleConfig>,\n required: true,\n },\n },\n\n setup(props) {\n const locale = useLocaleConfig(props.locales)\n const [isOpen, toggleIsOpen] = useToggle(false)\n\n const canInstall = ref(false)\n const hasRelatedApps = ref(false)\n const isIOS = ref(false)\n const isSafari = ref(false)\n const hinted = ref(false)\n\n const useHint = computed(\n () => isIOS.value && isSafari.value && !hinted.value,\n )\n\n const showInstall = computed(\n () => (hasRelatedApps.value && canInstall.value) || useHint.value,\n )\n\n const getInstallStatus = (): boolean => {\n if ((navigator as SafariNavigator).standalone)\n return (navigator as SafariNavigator).standalone\n\n return matchMedia('(display-mode: standalone)').matches\n }\n\n const hint = (): void => {\n toggleIsOpen(false)\n hinted.value = true\n // do not notify again\n localStorage.setItem('iOS-pwa-hint', 'hinted')\n }\n\n onMounted(() => {\n if (getInstallStatus()) {\n const { userAgent } = navigator\n\n // handle iOS specifically\n isIOS.value =\n // regular iPhone\n userAgent.includes('iPhone') ||\n // regular iPad\n userAgent.includes('iPad') ||\n // iPad pro\n Boolean(\n userAgent.includes('Macintosh') &&\n navigator.maxTouchPoints &&\n navigator.maxTouchPoints > 2,\n )\n\n isSafari.value =\n navigator.userAgent.includes('Safari') &&\n !userAgent.includes('Chrome')\n\n hinted.value = Boolean(localStorage.getItem('iOS-pwa-hint'))\n }\n\n if ('getInstalledRelatedApps' in (navigator as ModernNavigator))\n void (navigator as ModernNavigator)\n .getInstalledRelatedApps()\n .then((result) => {\n hasRelatedApps.value = result.length > 0\n })\n })\n\n return (): VNode =>\n h('div', { id: 'pwa-install' }, [\n showInstall.value\n ? h(\n 'button',\n {\n type: 'button',\n class: 'modal-button',\n onClick: () => {\n toggleIsOpen(true)\n },\n },\n locale.value.install,\n )\n : null,\n h(PwaInstallModal, {\n style: {\n display: isOpen.value ? 'block' : 'none',\n },\n locales: props.locales,\n useHint: useHint.value,\n onCanInstall: (value: boolean) => {\n canInstall.value = value\n },\n onHint: () => {\n hint()\n },\n onClose: () => toggleIsOpen(false),\n }),\n ])\n },\n})\n"],"names":["PwaInstallModal","defineComponent","props","emit","locale","useLocaleConfig","manifest","shallowRef","deferredPrompt","getManifest","manifestContent","data","withBase","scrollToLeft","screenshotsDiv","scrollToRight","install","hint","onMounted","useEventListener","event","h","CloseIcon","feature","ArrowLeftIcon","screenshot","ArrowRightIcon","PwaInstall","isOpen","toggleIsOpen","useToggle","canInstall","ref","hasRelatedApps","isIOS","isSafari","hinted","useHint","computed","showInstall","getInstallStatus","userAgent","result","value"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"PwaInstall.js","sources":["../../../src/client/components/PwaInstallModal.ts","../../../src/client/components/PwaInstall.ts"],"sourcesContent":["/* eslint-disable no-console */\nimport { useLocaleConfig } from '@vuepress/helper/client'\nimport { useEventListener } from '@vueuse/core'\nimport type { PropType, VNode } from 'vue'\nimport { defineComponent, h, onMounted, shallowRef } from 'vue'\nimport { withBase } from 'vuepress/client'\nimport type { AppManifest } from '../../shared/index.js'\nimport type { PwaPluginLocaleConfig } from '../types.js'\nimport { ArrowLeftIcon, ArrowRightIcon, CloseIcon } from './icons.js'\n\ninterface InstallPromptEvent extends Event {\n readonly platforms: string\n prompt: () => void\n readonly userChoice: Promise<{ outcome: 'accepted' | 'dismissed' }>\n}\n\nexport const PwaInstallModal = defineComponent({\n name: 'PwaInstallModal',\n\n props: {\n /** locale data */\n locales: {\n type: Object as PropType<PwaPluginLocaleConfig>,\n required: true,\n },\n\n /**\n * Whether use hint message instead of showing a button\n *\n * 是否使用提示\n */\n useHint: Boolean,\n },\n\n emits: ['canInstall', 'hint', 'close'],\n\n setup(props, { emit }) {\n const locale = useLocaleConfig(props.locales)\n\n const manifest = shallowRef<AppManifest>({})\n const deferredPrompt = shallowRef<InstallPromptEvent>()\n\n const getManifest = async (): Promise<void> => {\n const manifestContent = localStorage.getItem('manifest')\n\n if (manifestContent)\n manifest.value = JSON.parse(manifestContent) as AppManifest\n else\n try {\n const response = await fetch(withBase('manifest.webmanifest'))\n const data = (await response.json()) as AppManifest\n\n manifest.value = data\n localStorage.setItem('manifest', JSON.stringify(data))\n } catch {\n console.error(\n '[PWA]: Error getting manifest, check that you have a valid web manifest or network connection',\n )\n }\n }\n\n const scrollToLeft = (): void => {\n const screenshotsDiv = document.querySelector('.screenshot')\n\n if (screenshotsDiv)\n screenshotsDiv.scrollBy({\n left: -screenshotsDiv.clientWidth,\n top: 0,\n behavior: 'smooth',\n })\n }\n\n const scrollToRight = (): void => {\n const screenshotsDiv = document.querySelector('.screenshot')\n\n if (screenshotsDiv)\n screenshotsDiv.scrollBy({\n left: screenshotsDiv.clientWidth,\n top: 0,\n behavior: 'smooth',\n })\n }\n\n const install = async (): Promise<void> => {\n if (deferredPrompt.value) {\n deferredPrompt.value.prompt()\n\n document.dispatchEvent(new CustomEvent('show'))\n\n const choiceResult = await deferredPrompt.value.userChoice\n\n if (choiceResult.outcome === 'accepted') {\n console.info('PWA has been installed')\n\n emit('close', false)\n emit('canInstall', false)\n } else {\n console.info('You choose to not install PWA')\n\n emit('close', false)\n emit('canInstall', false)\n }\n }\n }\n\n const hint = (): void => {\n console.info('You accepted the install hint')\n emit('hint')\n }\n\n onMounted(() => {\n // eslint-disable-next-line no-prototype-builtins\n if (window.hasOwnProperty('BeforeInstallPromptEvent')) {\n useEventListener(window, 'beforeinstallprompt', (event) => {\n deferredPrompt.value = event as InstallPromptEvent\n\n emit('canInstall', true)\n event.preventDefault()\n })\n\n useEventListener('keyup', (event): void => {\n if (event.key === 'Escape') emit('close', false)\n })\n\n void getManifest()\n }\n })\n\n return (): VNode =>\n h('div', { id: 'install-modal-wrapper' }, [\n h('div', {\n class: 'background',\n onClick: () => {\n emit('close', false)\n },\n }),\n\n h('div', { class: 'install-modal' }, [\n h('div', { class: 'header' }, [\n // close button\n h(\n 'button',\n {\n 'type': 'button',\n 'class': 'close-button',\n 'aria-label': locale.value.close,\n 'onClick': () => {\n emit('close', false)\n },\n },\n h(CloseIcon),\n ),\n\n h('div', { class: 'logo' }, [\n manifest.value.icons\n ? h('img', {\n src: manifest.value.icons[0]?.src,\n alt: 'App Logo',\n })\n : null,\n h('div', { class: 'title' }, [\n h('h1', manifest.value.short_name || manifest.value.name),\n h('p', { class: 'desc' }, locale.value.explain),\n ]),\n ]),\n ]),\n\n h('div', { class: 'content' }, [\n h('div', { class: 'highlight' }, [\n manifest.value.features\n ? h('div', { class: 'feature-wrapper' }, [\n h('h3', locale.value.feature),\n h(\n 'ul',\n manifest.value.features.map((feature) =>\n h('li', feature),\n ),\n ),\n ])\n : null,\n\n manifest.value.screenshots\n ? h('div', { class: 'screenshot-wrapper' }, [\n h(\n 'button',\n {\n 'type': 'button',\n 'aria-label': locale.value.prevImage,\n 'onClick': scrollToLeft,\n },\n h(ArrowLeftIcon),\n ),\n h('section', { class: 'screenshot' }, [\n manifest.value.screenshots.map((screenshot) =>\n h(\n 'div',\n h('img', {\n src: screenshot.src,\n alt: 'App Screenshot',\n }),\n ),\n ),\n ]),\n h(\n 'button',\n {\n 'type': 'button',\n 'aria-label': locale.value.nextImage,\n 'onClick': scrollToRight,\n },\n h(ArrowRightIcon),\n ),\n ])\n : null,\n ]),\n\n h('div', { class: 'description' }, [\n h('h3', locale.value.desc),\n h('p', manifest.value.description),\n ]),\n ]),\n\n props.useHint\n ? h('div', { class: 'ios-text', onClick: hint }, [\n h('p', locale.value.iOSInstall),\n h('button', { type: 'button', class: 'success' }, 'Got it!'),\n ])\n : h('div', { class: 'button-wrapper' }, [\n h(\n 'button',\n { type: 'button', class: 'install-button', onClick: install },\n [locale.value.install, h('span', manifest.value.short_name)],\n ),\n h(\n 'button',\n {\n type: 'button',\n class: 'cancel-button',\n onClick: () => {\n emit('close', false)\n },\n },\n locale.value.cancel,\n ),\n ]),\n ]),\n ])\n },\n})\n","import { useLocaleConfig } from '@vuepress/helper/client'\nimport { useToggle } from '@vueuse/core'\nimport type { PropType, VNode } from 'vue'\nimport { computed, defineComponent, h, onMounted, ref } from 'vue'\nimport type { ManifestExternalApplicationResource } from '../../shared/index.js'\nimport type { PwaPluginLocaleConfig } from '../types.js'\nimport { PwaInstallModal } from './PwaInstallModal.js'\n\nimport '../styles/modal.css'\n\ninterface ModernNavigator extends Navigator {\n // Nonstandard Api\n getInstalledRelatedApps: () => Promise<ManifestExternalApplicationResource[]>\n}\n\ninterface SafariNavigator extends Navigator {\n // Available on Apple’s iOS Safari only.\n standalone: boolean\n}\n\nexport const PwaInstall = defineComponent({\n name: 'PwaInstall',\n\n props: {\n /** locale data */\n locales: {\n type: Object as PropType<PwaPluginLocaleConfig>,\n required: true,\n },\n },\n\n setup(props) {\n const locale = useLocaleConfig(props.locales)\n const [isOpen, toggleIsOpen] = useToggle()\n\n const canInstall = ref(false)\n const hasRelatedApps = ref(false)\n const isIOS = ref(false)\n const isSafari = ref(false)\n const hinted = ref(false)\n\n const useHint = computed(\n () => isIOS.value && isSafari.value && !hinted.value,\n )\n\n const showInstall = computed(\n () => (hasRelatedApps.value && canInstall.value) || useHint.value,\n )\n\n const getInstallStatus = (): boolean => {\n if ((navigator as SafariNavigator).standalone)\n return (navigator as SafariNavigator).standalone\n\n return matchMedia('(display-mode: standalone)').matches\n }\n\n const hint = (): void => {\n toggleIsOpen(false)\n hinted.value = true\n // do not notify again\n localStorage.setItem('iOS-pwa-hint', 'hinted')\n }\n\n onMounted(() => {\n if (getInstallStatus()) {\n const { userAgent } = navigator\n\n // handle iOS specifically\n isIOS.value =\n // regular iPhone\n userAgent.includes('iPhone') ||\n // regular iPad\n userAgent.includes('iPad') ||\n // iPad pro\n Boolean(\n userAgent.includes('Macintosh') &&\n navigator.maxTouchPoints &&\n navigator.maxTouchPoints > 2,\n )\n\n isSafari.value =\n navigator.userAgent.includes('Safari') &&\n !userAgent.includes('Chrome')\n\n hinted.value = Boolean(localStorage.getItem('iOS-pwa-hint'))\n }\n\n if ('getInstalledRelatedApps' in (navigator as ModernNavigator))\n void (navigator as ModernNavigator)\n .getInstalledRelatedApps()\n .then((result) => {\n hasRelatedApps.value = result.length > 0\n })\n })\n\n return (): VNode =>\n h('div', { id: 'pwa-install' }, [\n showInstall.value\n ? h(\n 'button',\n {\n type: 'button',\n class: 'modal-button',\n onClick: () => {\n toggleIsOpen(true)\n },\n },\n locale.value.install,\n )\n : null,\n h(PwaInstallModal, {\n style: {\n display: isOpen.value ? 'block' : 'none',\n },\n locales: props.locales,\n useHint: useHint.value,\n onCanInstall: (value: boolean) => {\n canInstall.value = value\n },\n onHint: () => {\n hint()\n },\n onClose: () => toggleIsOpen(false),\n }),\n ])\n },\n})\n"],"names":["PwaInstallModal","defineComponent","props","emit","locale","useLocaleConfig","manifest","shallowRef","deferredPrompt","getManifest","manifestContent","data","withBase","scrollToLeft","screenshotsDiv","scrollToRight","install","hint","onMounted","useEventListener","event","h","CloseIcon","feature","ArrowLeftIcon","screenshot","ArrowRightIcon","PwaInstall","isOpen","toggleIsOpen","useToggle","canInstall","ref","hasRelatedApps","isIOS","isSafari","hinted","useHint","computed","showInstall","getInstallStatus","userAgent","result","value"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@keyframes pwa-opened{from{opacity:.4;transform:scale(0.8, 0.8)}to{opacity:1;transform:scale(1, 1)}}@keyframes pwa-mobile{from{opacity:.6}to{opacity:1}}@keyframes pwa-fade-in{from{opacity:.2}to{opacity:1}}.modal-button{position:fixed;
|
|
1
|
+
@keyframes pwa-opened{from{opacity:.4;transform:scale(0.8, 0.8)}to{opacity:1;transform:scale(1, 1)}}@keyframes pwa-mobile{from{opacity:.6}to{opacity:1}}@keyframes pwa-fade-in{from{opacity:.2}to{opacity:1}}.modal-button{position:fixed;inset-inline-end:1rem;bottom:1rem;z-index:50;padding:0 16px;border-width:0;border-radius:1.2rem;background:var(--pwa-c-accent-bg);color:var(--pwa-c-accent-text);outline:none;font-weight:600;line-height:2.2rem;cursor:pointer;transition:background .3s,color .3s}@media(display-mode: standalone){.modal-button{display:none}}@media print{.modal-button{display:none}}.modal-button:hover,.modal-button:active{background:var(--pwa-c-accent-hover)}#install-modal-wrapper{position:fixed;inset-inline-start:0;top:0;z-index:997;display:flex;align-items:center;justify-content:center;overflow:auto;width:100vw;height:100vh}@media print{#install-modal-wrapper{display:none}}#install-modal-wrapper button{border-width:0;background:rgba(0,0,0,0);cursor:pointer}#install-modal-wrapper .background{position:fixed;inset:0;z-index:998;backdrop-filter:blur(10px);animation:.25s pwa-fade-in}#install-modal-wrapper .install-modal{position:absolute;z-index:999;display:flex;flex-direction:column;max-width:56em;border-radius:10px;background:var(--pwa-c-bg);transition:background .3s;animation:.15s pwa-opened}@media(max-width: 1280px){#install-modal-wrapper .install-modal{width:92%;animation:.25s pwa-mobile}}@media(max-width: 419px){#install-modal-wrapper .install-modal{overflow-y:auto;max-height:80%}#install-modal-wrapper .install-modal::-webkit-scrollbar{display:none}}#install-modal-wrapper .header{margin:40px 40px 32px}@media(max-width: 959px){#install-modal-wrapper .header{margin-bottom:24px}}@media(max-width: 719px){#install-modal-wrapper .header{margin:20px}}#install-modal-wrapper .header .close-button{float:right;border-width:0;background:rgba(0,0,0,0);color:var(--pwa-c-text);cursor:pointer;transition:color .3s ease}[dir=rtl] #install-modal-wrapper .header .close-button{float:left}#install-modal-wrapper .header .close-button:hover,#install-modal-wrapper .header .close-button:focus{color:var(--pwa-c-text-mute)}#install-modal-wrapper .header .logo{display:flex}#install-modal-wrapper .header h1{margin-top:0;margin-bottom:7px;color:var(--pwa-c-text-mute);font-size:34px}@media(max-width: 959px){#install-modal-wrapper .header h1{margin-bottom:0}}@media(max-width: 419px){#install-modal-wrapper .header h1{font-size:26px}}#install-modal-wrapper .header img{width:122px;height:122px;margin-inline-end:24px;padding:12px;border-radius:24px}@media(max-width: 959px){#install-modal-wrapper .header img{width:60px;height:60px}}@media(max-width: 719px){#install-modal-wrapper .header img{margin-inline-end:12px;padding:8px}}@media(max-width: 419px){#install-modal-wrapper .header img{width:40px;height:40px;padding:6px}}#install-modal-wrapper .header .desc{overflow:hidden;max-width:40em;color:#888;font-size:14px;text-overflow:ellipsis;white-space:pre-wrap}@media(max-width: 959px){#install-modal-wrapper .header .desc{display:none}}#install-modal-wrapper .content{flex:1;margin:0 40px;color:var(--pwa-c-text)}@media(max-width: 719px){#install-modal-wrapper .content{margin:0 20px}}#install-modal-wrapper .content h3{margin-bottom:12px;font-size:22px}#install-modal-wrapper .content p{font-size:14px}#install-modal-wrapper .highlight{display:flex;align-items:center;justify-content:space-around;margin-inline-end:20px}@media(max-width: 719px){#install-modal-wrapper .highlight{flex-direction:column;align-items:flex-start;margin-inline-end:0}}#install-modal-wrapper .highlight h3{margin-top:0;font-weight:600;font-size:22px;line-height:225%}@media(max-width: 419px){#install-modal-wrapper .highlight h3{margin-bottom:0;font-size:18px}}#install-modal-wrapper .feature-wrapper{overflow:hidden;padding-inline-end:2em}#install-modal-wrapper .feature-wrapper ul{margin-block-start:12px;padding-inline-start:22px}@media(max-width: 419px){#install-modal-wrapper .feature-wrapper ul{margin-top:0}}#install-modal-wrapper .feature-wrapper li{color:var(--pwa-c-text-mute);font-weight:600;font-size:16px;line-height:29px;transition:color .3s}#install-modal-wrapper .screenshot-wrapper{display:flex;max-width:30em;max-height:220px}@media(max-width: 719px){#install-modal-wrapper .screenshot-wrapper{width:100%}}#install-modal-wrapper .screenshot-wrapper button{width:4em;border-width:0;background:rgba(0,0,0,0);cursor:pointer;transition:background .3s}#install-modal-wrapper .screenshot-wrapper button:hover,#install-modal-wrapper .screenshot-wrapper button:focus{background:#bbb}#install-modal-wrapper .screenshot-wrapper button svg{width:28px;fill:#6b6969}#install-modal-wrapper .screenshot{display:flex;flex-flow:column wrap;overflow-x:auto;width:22em;max-height:220px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}@media(max-width: 1280px){#install-modal-wrapper .screenshot{justify-content:center}}#install-modal-wrapper .screenshot::-webkit-scrollbar{display:none}#install-modal-wrapper .screenshot div{display:flex;align-items:center;justify-content:center;width:100%;height:14em;background:#efefef;scroll-snap-align:start}#install-modal-wrapper .screenshot img{object-fit:contain;height:100%}@media(max-width: 719px){#install-modal-wrapper .screenshot img{height:180px}}#install-modal-wrapper .description{margin-bottom:3em}#install-modal-wrapper .button-wrapper{width:100%;padding:1rem 0;text-align:end}@media(max-width: 719px){#install-modal-wrapper .button-wrapper{text-align:center}}#install-modal-wrapper .install-button,#install-modal-wrapper .cancel-button{display:inline-block;flex:0 0 auto;min-width:80px;margin:.5rem 1rem;padding:.5rem 1rem;border-radius:20px;background:rgba(0,0,0,0);font-weight:600;font-size:14px;cursor:pointer}#install-modal-wrapper .install-button{background:var(--pwa-c-accent-bg);color:var(--pwa-c-accent-text);transition:color .3s}#install-modal-wrapper .install-button:hover,#install-modal-wrapper .install-button:focus{background:var(--pwa-c-accent-hover)}@media(max-width: 419px){#install-modal-wrapper .install-button span{display:none}}#install-modal-wrapper .cancel-button{background:var(--pwa-c-control);color:var(--pwa-c-text)}#install-modal-wrapper .cancel-button:hover,#install-modal-wrapper .cancel-button:focus{background:var(--pwa-c-control-hover)}#install-modal-wrapper .ios-text{position:fixed;bottom:0;box-sizing:border-box;width:92%;margin:2em auto;padding:.5em 2em;border-radius:8px;background:var(--pwa-c-bg);box-shadow:0 2px 12px 0 var(--pwa-c-shadow);font-weight:bold;font-size:14px;text-align:center;transition:background .3s,box-shadow .3s}#install-modal-wrapper .ios-text::after{content:" ";position:absolute;inset-inline-start:calc(50% - .8em);bottom:-1em;width:0;height:0;border-inline:.8em solid rgba(0,0,0,0);border-top:1em solid var(--pwa-c-bg);transition:border-color .3s}#install-modal-wrapper .ios-text p{margin:0 0 .5em}#install-modal-wrapper .ios-text .success{margin-bottom:.5em;padding:.5em 1em;border:none;border-radius:1em;background:#07c160;color:var(--pwa-c-bg);cursor:pointer;transition:color .3s}/*# sourceMappingURL=modal.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../../src/client/styles/modal.scss"],"names":[],"mappings":"AAAA,sBACE,KACE,WACA,0BAGF,GACE,UACA,uBAIJ,sBACE,KACE,WAGF,GACE,WAIJ,uBACE,KACE,WAGF,GACE,WAIJ,cACE,eACA,
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../../src/client/styles/modal.scss"],"names":[],"mappings":"AAAA,sBACE,KACE,WACA,0BAGF,GACE,UACA,uBAIJ,sBACE,KACE,WAGF,GACE,WAIJ,uBACE,KACE,WAGF,GACE,WAIJ,cACE,eACA,sBACA,YACA,WAEA,eACA,eACA,qBAEA,kCACA,+BACA,aAEA,gBACA,mBAEA,eAEA,WACE,yBAGF,iCAvBF,cAwBI,cAGF,aA3BF,cA4BI,cAGF,yCAEE,qCAIJ,uBACE,eACA,qBACA,MACA,YAEA,aACA,mBACA,uBAEA,cAEA,YACA,aAEA,aAfF,uBAgBI,cAGF,8BACE,eACA,yBACA,eAGF,mCACE,eACA,QACA,YAEA,2BAEA,2BAGF,sCACE,kBACA,YAEA,aACA,sBAEA,eACA,mBAEA,2BAEA,0BAEA,0BAEA,0BAhBF,sCAiBI,UACA,2BAGF,yBArBF,sCAsBI,gBACA,eAEA,yDACE,cAKN,+BACE,sBAEA,yBAHF,+BAII,oBAGF,yBAPF,+BAQI,aAGF,6CACE,YAEA,eAEA,yBACA,wBAEA,eAEA,0BAEA,uDACE,WAGF,sGAEE,6BAIJ,qCACE,aAGF,kCACE,aACA,kBACA,6BACA,eAEA,yBANF,kCAOI,iBAGF,yBAVF,kCAWI,gBAIJ,mCACE,YACA,aACA,uBACA,aACA,mBAEA,yBAPF,mCAQI,WACA,aAGF,yBAZF,mCAaI,uBACA,aAGF,yBAjBF,mCAkBI,WACA,YACA,aAIJ,qCACE,gBAEA,eAEA,WAEA,eACA,uBACA,qBAEA,yBAXF,qCAYI,cAKN,gCACE,OACA,cACA,wBAEA,yBALF,gCAMI,eAGF,mCACE,mBACA,eAGF,kCACE,eAIJ,kCACE,aACA,mBACA,6BACA,uBAEA,yBANF,kCAOI,sBACA,uBACA,qBAGF,qCACE,aACA,gBACA,eACA,iBAEA,yBANF,qCAOI,gBACA,gBAKN,wCACE,gBACA,uBAEA,2CACE,wBACA,0BAEA,yBAJF,2CAKI,cAIJ,2CACE,6BAEA,gBACA,eACA,iBAEA,qBAIJ,2CACE,aACA,eACA,iBAEA,yBALF,2CAMI,YAGF,kDACE,UACA,eAEA,yBAEA,eAEA,0BAEA,gHAEE,gBAGF,sDACE,WACA,aAKN,mCACE,aACA,sBAEA,gBAEA,WACA,iBAEA,6BAEA,iCAEA,0BAbF,mCAcI,wBAGF,sDACE,aAGF,uCACE,aACA,mBACA,uBAEA,WACA,YAEA,mBAEA,wBAGF,uCACE,mBACA,YAEA,yBAJF,uCAKI,cAKN,oCACE,kBAGF,uCACE,WACA,eACA,eAEA,yBALF,uCAMI,mBAIJ,6EAEE,qBACA,cAEA,eACA,kBACA,mBACA,mBAEA,yBAEA,gBACA,eAEA,eAGF,uCACE,kCACA,+BACA,qBAEA,0FAEE,qCAIA,yBADF,4CAEI,cAKN,sCACE,gCACA,wBAEA,wFAEE,sCAIJ,iCACE,eACA,SAEA,sBACA,UACA,gBACA,iBACA,kBAEA,2BACA,4CAEA,iBACA,eACA,kBAEA,WACE,8BAGF,wCACE,YAEA,kBACA,oCACA,YAEA,QACA,SACA,uCACA,qCAEA,4BAGF,mCACE,gBAGF,0CACE,mBACA,iBACA,YACA,kBAEA,mBACA,sBAEA,eAEA","file":"modal.css","sourcesContent":["@keyframes pwa-opened {\n from {\n opacity: 0.4;\n transform: scale(0.8, 0.8);\n }\n\n to {\n opacity: 1;\n transform: scale(1, 1);\n }\n}\n\n@keyframes pwa-mobile {\n from {\n opacity: 0.6;\n }\n\n to {\n opacity: 1;\n }\n}\n\n@keyframes pwa-fade-in {\n from {\n opacity: 0.2;\n }\n\n to {\n opacity: 1;\n }\n}\n\n.modal-button {\n position: fixed;\n inset-inline-end: 1rem;\n bottom: 1rem;\n z-index: 50;\n\n padding: 0 16px;\n border-width: 0;\n border-radius: 1.2rem;\n\n background: var(--pwa-c-accent-bg);\n color: var(--pwa-c-accent-text);\n outline: none;\n\n font-weight: 600;\n line-height: 2.2rem;\n\n cursor: pointer;\n\n transition:\n background 0.3s,\n color 0.3s;\n\n @media (display-mode: standalone) {\n display: none;\n }\n\n @media print {\n display: none;\n }\n\n &:hover,\n &:active {\n background: var(--pwa-c-accent-hover);\n }\n}\n\n#install-modal-wrapper {\n position: fixed;\n inset-inline-start: 0;\n top: 0;\n z-index: 997;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n overflow: auto;\n\n width: 100vw;\n height: 100vh;\n\n @media print {\n display: none;\n }\n\n button {\n border-width: 0;\n background: transparent;\n cursor: pointer;\n }\n\n .background {\n position: fixed;\n inset: 0;\n z-index: 998;\n\n backdrop-filter: blur(10px);\n\n animation: 0.25s pwa-fade-in;\n }\n\n .install-modal {\n position: absolute;\n z-index: 999;\n\n display: flex;\n flex-direction: column;\n\n max-width: 56em;\n border-radius: 10px;\n\n background: var(--pwa-c-bg);\n\n transition: background 0.3s;\n\n animation: 0.15s pwa-opened;\n\n @media (max-width: 1280px) {\n width: 92%;\n animation: 0.25s pwa-mobile;\n }\n\n @media (max-width: 419px) {\n overflow-y: auto;\n max-height: 80%;\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n }\n\n .header {\n margin: 40px 40px 32px;\n\n @media (max-width: 959px) {\n margin-bottom: 24px;\n }\n\n @media (max-width: 719px) {\n margin: 20px;\n }\n\n .close-button {\n float: right;\n\n border-width: 0;\n\n background: transparent;\n color: var(--pwa-c-text);\n\n cursor: pointer;\n\n transition: color 0.3s ease;\n\n [dir='rtl'] & {\n float: left;\n }\n\n &:hover,\n &:focus {\n color: var(--pwa-c-text-mute);\n }\n }\n\n .logo {\n display: flex;\n }\n\n h1 {\n margin-top: 0;\n margin-bottom: 7px;\n color: var(--pwa-c-text-mute);\n font-size: 34px;\n\n @media (max-width: 959px) {\n margin-bottom: 0;\n }\n\n @media (max-width: 419px) {\n font-size: 26px;\n }\n }\n\n img {\n width: 122px;\n height: 122px;\n margin-inline-end: 24px;\n padding: 12px;\n border-radius: 24px;\n\n @media (max-width: 959px) {\n width: 60px;\n height: 60px;\n }\n\n @media (max-width: 719px) {\n margin-inline-end: 12px;\n padding: 8px;\n }\n\n @media (max-width: 419px) {\n width: 40px;\n height: 40px;\n padding: 6px;\n }\n }\n\n .desc {\n overflow: hidden;\n\n max-width: 40em;\n\n color: #888;\n\n font-size: 14px;\n text-overflow: ellipsis;\n white-space: pre-wrap;\n\n @media (max-width: 959px) {\n display: none;\n }\n }\n }\n\n .content {\n flex: 1;\n margin: 0 40px;\n color: var(--pwa-c-text);\n\n @media (max-width: 719px) {\n margin: 0 20px;\n }\n\n h3 {\n margin-bottom: 12px;\n font-size: 22px;\n }\n\n p {\n font-size: 14px;\n }\n }\n\n .highlight {\n display: flex;\n align-items: center;\n justify-content: space-around;\n margin-inline-end: 20px;\n\n @media (max-width: 719px) {\n flex-direction: column;\n align-items: flex-start;\n margin-inline-end: 0;\n }\n\n h3 {\n margin-top: 0;\n font-weight: 600;\n font-size: 22px;\n line-height: 225%;\n\n @media (max-width: 419px) {\n margin-bottom: 0;\n font-size: 18px;\n }\n }\n }\n\n .feature-wrapper {\n overflow: hidden;\n padding-inline-end: 2em;\n\n ul {\n margin-block-start: 12px;\n padding-inline-start: 22px;\n\n @media (max-width: 419px) {\n margin-top: 0;\n }\n }\n\n li {\n color: var(--pwa-c-text-mute);\n\n font-weight: 600;\n font-size: 16px;\n line-height: 29px;\n\n transition: color 0.3s;\n }\n }\n\n .screenshot-wrapper {\n display: flex;\n max-width: 30em;\n max-height: 220px;\n\n @media (max-width: 719px) {\n width: 100%;\n }\n\n button {\n width: 4em;\n border-width: 0;\n\n background: transparent;\n\n cursor: pointer;\n\n transition: background 0.3s;\n\n &:hover,\n &:focus {\n background: #bbb;\n }\n\n svg {\n width: 28px;\n fill: #6b6969;\n }\n }\n }\n\n .screenshot {\n display: flex;\n flex-flow: column wrap;\n\n overflow-x: auto;\n\n width: 22em;\n max-height: 220px;\n\n scroll-snap-type: x mandatory;\n\n -webkit-overflow-scrolling: touch;\n\n @media (max-width: 1280px) {\n justify-content: center;\n }\n\n &::-webkit-scrollbar {\n display: none;\n }\n\n div {\n display: flex;\n align-items: center;\n justify-content: center;\n\n width: 100%;\n height: 14em;\n\n background: #efefef;\n\n scroll-snap-align: start;\n }\n\n img {\n object-fit: contain;\n height: 100%;\n\n @media (max-width: 719px) {\n height: 180px;\n }\n }\n }\n\n .description {\n margin-bottom: 3em;\n }\n\n .button-wrapper {\n width: 100%;\n padding: 1rem 0;\n text-align: end;\n\n @media (max-width: 719px) {\n text-align: center;\n }\n }\n\n .install-button,\n .cancel-button {\n display: inline-block;\n flex: 0 0 auto;\n\n min-width: 80px;\n margin: 0.5rem 1rem;\n padding: 0.5rem 1rem;\n border-radius: 20px;\n\n background: transparent;\n\n font-weight: 600;\n font-size: 14px;\n\n cursor: pointer;\n }\n\n .install-button {\n background: var(--pwa-c-accent-bg);\n color: var(--pwa-c-accent-text);\n transition: color 0.3s;\n\n &:hover,\n &:focus {\n background: var(--pwa-c-accent-hover);\n }\n\n span {\n @media (max-width: 419px) {\n display: none;\n }\n }\n }\n\n .cancel-button {\n background: var(--pwa-c-control);\n color: var(--pwa-c-text);\n\n &:hover,\n &:focus {\n background: var(--pwa-c-control-hover);\n }\n }\n\n .ios-text {\n position: fixed;\n bottom: 0;\n\n box-sizing: border-box;\n width: 92%;\n margin: 2em auto;\n padding: 0.5em 2em;\n border-radius: 8px;\n\n background: var(--pwa-c-bg);\n box-shadow: 0 2px 12px 0 var(--pwa-c-shadow);\n\n font-weight: bold;\n font-size: 14px;\n text-align: center;\n\n transition:\n background 0.3s,\n box-shadow 0.3s;\n\n &::after {\n content: ' ';\n\n position: absolute;\n inset-inline-start: calc(50% - 0.8em);\n bottom: -1em;\n\n width: 0;\n height: 0;\n border-inline: 0.8em solid transparent;\n border-top: 1em solid var(--pwa-c-bg);\n\n transition: border-color 0.3s;\n }\n\n p {\n margin: 0 0 0.5em;\n }\n\n .success {\n margin-bottom: 0.5em;\n padding: 0.5em 1em;\n border: none;\n border-radius: 1em;\n\n background: #07c160;\n color: var(--pwa-c-bg);\n\n cursor: pointer;\n\n transition: color 0.3s;\n }\n }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vuepress/plugin-pwa",
|
|
3
|
-
"version": "2.0.0-rc.
|
|
3
|
+
"version": "2.0.0-rc.82",
|
|
4
4
|
"description": "VuePress plugin - progressive web application",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"vuepress-plugin",
|
|
@@ -36,8 +36,8 @@
|
|
|
36
36
|
"lib"
|
|
37
37
|
],
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@vuepress/helper": "2.0.0-rc.
|
|
40
|
-
"@vueuse/core": "^12.
|
|
39
|
+
"@vuepress/helper": "2.0.0-rc.82",
|
|
40
|
+
"@vueuse/core": "^12.8.2",
|
|
41
41
|
"mitt": "^3.0.1",
|
|
42
42
|
"register-service-worker": "^1.7.2",
|
|
43
43
|
"vue": "^3.5.13",
|
|
@@ -49,5 +49,5 @@
|
|
|
49
49
|
"publishConfig": {
|
|
50
50
|
"access": "public"
|
|
51
51
|
},
|
|
52
|
-
"gitHead": "
|
|
52
|
+
"gitHead": "638c0c2bc539b886de501c9ee74915caec280e00"
|
|
53
53
|
}
|