From: Haoqun Jiang Date: Thu, 19 Aug 2021 13:20:53 +0000 (+0800) Subject: feat: router templates X-Git-Tag: v3.0.0-beta.0~2 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=590a82ce07509505cbde3a4f8124ac9102ffd990;p=thirdparty%2Fvuejs%2Fcreate-vue.git feat: router templates --- diff --git a/template/code/router/cypress/integration/example.spec.js b/template/code/router/cypress/integration/example.spec.js index ec952ec4..13a2922b 100644 --- a/template/code/router/cypress/integration/example.spec.js +++ b/template/code/router/cypress/integration/example.spec.js @@ -3,7 +3,7 @@ describe('My First Test', () => { it('visits the app root url', () => { cy.visit('/') - cy.contains('h1', 'Hello Vue 3 + Vite') + cy.contains('h1', 'You did it!') }) it('navigates to the about page', () => { diff --git a/template/code/router/src/App.vue b/template/code/router/src/App.vue index 6a65bcc1..523cdb78 100644 --- a/template/code/router/src/App.vue +++ b/template/code/router/src/App.vue @@ -1,30 +1,120 @@ + + diff --git a/template/code/router/src/assets/base.css b/template/code/router/src/assets/base.css new file mode 100644 index 00000000..6198c024 --- /dev/null +++ b/template/code/router/src/assets/base.css @@ -0,0 +1,72 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +[data-color-scheme='dark'] { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/template/code/router/src/assets/logo.png b/template/code/router/src/assets/logo.png deleted file mode 100644 index f3d2503f..00000000 Binary files a/template/code/router/src/assets/logo.png and /dev/null differ diff --git a/template/code/router/src/assets/logo.svg b/template/code/router/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/template/code/router/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/template/code/router/src/components/ColorSchemeSwitch.vue b/template/code/router/src/components/ColorSchemeSwitch.vue new file mode 100644 index 00000000..8e5bb4e2 --- /dev/null +++ b/template/code/router/src/components/ColorSchemeSwitch.vue @@ -0,0 +1,137 @@ + + + + + diff --git a/template/code/router/src/components/HelloWorld.vue b/template/code/router/src/components/HelloWorld.vue index 51f81a8f..aa16fa1f 100644 --- a/template/code/router/src/components/HelloWorld.vue +++ b/template/code/router/src/components/HelloWorld.vue @@ -1,57 +1,44 @@ - - + + diff --git a/template/code/router/src/components/IntroductionItem.vue b/template/code/router/src/components/IntroductionItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/template/code/router/src/components/IntroductionItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/template/code/router/src/components/__tests__/ColorSchemeSwitch.spec.js b/template/code/router/src/components/__tests__/ColorSchemeSwitch.spec.js new file mode 100644 index 00000000..3842adf2 --- /dev/null +++ b/template/code/router/src/components/__tests__/ColorSchemeSwitch.spec.js @@ -0,0 +1,34 @@ +import { mount } from '@cypress/vue' + +import ColorSchemeSwitch from '../ColorSchemeSwitch.vue' + +describe('ColorSchemeSwitch', () => { + beforeEach(() => { + cy.stub(window, 'matchMedia') + .withArgs('(prefers-color-scheme: light)') + .returns({ + matches: false, + addEventListener: () => {}, + removeEventListener: () => {}, + }) + .withArgs('(prefers-color-scheme: dark)') + .returns({ + matches: true, + addEventListener: () => {}, + removeEventListener: () => {}, + }) + }) + + it('use the preferred color scheme by default', () => { + mount(ColorSchemeSwitch) + + cy.get('body').should('have.attr', 'data-color-scheme', 'dark') + }) + + it('toggles the color scheme affter user clicks toggle', () => { + mount(ColorSchemeSwitch) + + cy.get('.color-scheme-switch').click() + cy.get('body').should('have.attr', 'data-color-scheme', 'light') + }) +}) diff --git a/template/code/router/src/components/__tests__/HelloWorld.spec.js b/template/code/router/src/components/__tests__/HelloWorld.spec.js index 087c9561..a69f3a9d 100644 --- a/template/code/router/src/components/__tests__/HelloWorld.spec.js +++ b/template/code/router/src/components/__tests__/HelloWorld.spec.js @@ -10,13 +10,4 @@ describe('HelloWorld', () => { mount(HelloWorld, { props: { msg: 'Hello Cypress' } }) cy.get('h1').should('contain', 'Hello Cypress') }) - - it('adds 1 when clicking the plus button', () => { - mount(HelloWorld, { props: { msg: 'Hello Cypress' } }) - - cy.get('button') - .should('contain', '0') - .click() - .should('contain', '1') - }) }) diff --git a/template/code/router/src/components/icons/Community.vue b/template/code/router/src/components/icons/Community.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/template/code/router/src/components/icons/Community.vue @@ -0,0 +1,7 @@ + diff --git a/template/code/router/src/components/icons/Documentation.vue b/template/code/router/src/components/icons/Documentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/template/code/router/src/components/icons/Documentation.vue @@ -0,0 +1,7 @@ + diff --git a/template/code/router/src/components/icons/Ecosystem.vue b/template/code/router/src/components/icons/Ecosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/template/code/router/src/components/icons/Ecosystem.vue @@ -0,0 +1,7 @@ + diff --git a/template/code/router/src/components/icons/Moon.vue b/template/code/router/src/components/icons/Moon.vue new file mode 100644 index 00000000..8e02b917 --- /dev/null +++ b/template/code/router/src/components/icons/Moon.vue @@ -0,0 +1,18 @@ + + + diff --git a/template/code/router/src/components/icons/Sun.vue b/template/code/router/src/components/icons/Sun.vue new file mode 100644 index 00000000..577f8031 --- /dev/null +++ b/template/code/router/src/components/icons/Sun.vue @@ -0,0 +1,34 @@ + + + diff --git a/template/code/router/src/components/icons/Support.vue b/template/code/router/src/components/icons/Support.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/template/code/router/src/components/icons/Support.vue @@ -0,0 +1,7 @@ + diff --git a/template/code/router/src/components/icons/Tooling.vue b/template/code/router/src/components/icons/Tooling.vue new file mode 100644 index 00000000..660598d7 --- /dev/null +++ b/template/code/router/src/components/icons/Tooling.vue @@ -0,0 +1,19 @@ + + diff --git a/template/code/router/src/composables/__tests__/useMediaQuery.spec.js b/template/code/router/src/composables/__tests__/useMediaQuery.spec.js new file mode 100644 index 00000000..a7a5d024 --- /dev/null +++ b/template/code/router/src/composables/__tests__/useMediaQuery.spec.js @@ -0,0 +1,33 @@ +import { defineComponent, h, createVNode } from 'vue' +import { mount } from '@cypress/vue' + +import useMediaQuery from '../useMediaQuery' + +const Wrapper = defineComponent({ + props: { + query: { + type: String, + required: true + } + }, + setup(props) { + const matches = useMediaQuery(props.query) + return () => h('div', { id: 'result' }, matches.value.toString() ) + } +}) + +describe('useMediaQuery', () => { + it('should correctly reflect the match result of a media query', () => { + mount(Wrapper, { + props: { + query: '(min-width: 800px)' + } + }) + + cy.viewport(1000, 660) + cy.get('#result').should('include.text', 'true') + + cy.viewport(660, 660) + cy.get('#result').should('include.text', 'false') + }) +}) diff --git a/template/code/router/src/composables/useColorScheme.js b/template/code/router/src/composables/useColorScheme.js new file mode 100644 index 00000000..be111aff --- /dev/null +++ b/template/code/router/src/composables/useColorScheme.js @@ -0,0 +1,31 @@ +import { ref, computed } from 'vue' +import useMediaQuery from './useMediaQuery' + +// Its value should be consistent when called multiple times. +// So we put it outside the composable function +const isUserToggledDark = ref() + +export default function useColorScheme() { + const isDefaultDark = useMediaQuery('(prefers-color-scheme: dark)') + + const isDark = computed(() => { + if (typeof isUserToggledDark.value !== 'undefined') { + return isUserToggledDark.value + } else { + return isDefaultDark.value + } + }) + + const toggle = () => { + if (typeof isUserToggledDark.value !== 'undefined') { + isUserToggledDark.value = !isUserToggledDark.value + } else { + isUserToggledDark.value = !isDefaultDark.value + } + } + + return { + toggle, + isDark + } +} diff --git a/template/code/router/src/composables/useMediaQuery.js b/template/code/router/src/composables/useMediaQuery.js new file mode 100644 index 00000000..bf288056 --- /dev/null +++ b/template/code/router/src/composables/useMediaQuery.js @@ -0,0 +1,28 @@ +import { ref, onUnmounted } from 'vue' + +export default function useMediaQuery(query) { + const mediaQueryList = window.matchMedia(query) + const matches = ref(mediaQueryList.matches) + + const handler = (event) => { + matches.value = event.matches + } + + // Safari < 14 does not support this + if (mediaQueryList.addEventListener) { + mediaQueryList.addEventListener('change', handler) + } else { + mediaQueryList.addListener(handler) + } + + onUnmounted(() => { + // Safari < 14 does not support this + if (mediaQueryList.removeEventListener) { + mediaQueryList.removeEventListener('change', handler) + } else { + mediaQueryList.removeListener(handler) + } + }) + + return matches +} diff --git a/template/code/router/src/views/About.vue b/template/code/router/src/views/About.vue index 3fa28070..756ad2a1 100644 --- a/template/code/router/src/views/About.vue +++ b/template/code/router/src/views/About.vue @@ -3,3 +3,13 @@

This is an about page

+ + diff --git a/template/code/router/src/views/Home.vue b/template/code/router/src/views/Home.vue index d74dda2c..d91fa611 100644 --- a/template/code/router/src/views/Home.vue +++ b/template/code/router/src/views/Home.vue @@ -1,19 +1,88 @@ - - - + diff --git a/template/code/typescript-router/cypress/integration/example.spec.ts b/template/code/typescript-router/cypress/integration/example.spec.ts index 3898b0ca..13a2922b 100644 --- a/template/code/typescript-router/cypress/integration/example.spec.ts +++ b/template/code/typescript-router/cypress/integration/example.spec.ts @@ -3,7 +3,7 @@ describe('My First Test', () => { it('visits the app root url', () => { cy.visit('/') - cy.contains('h1', 'Hello Vue 3 + TypeScript + Vite') + cy.contains('h1', 'You did it!') }) it('navigates to the about page', () => { diff --git a/template/code/typescript-router/src/App.vue b/template/code/typescript-router/src/App.vue index 6a65bcc1..ebe7e8c3 100644 --- a/template/code/typescript-router/src/App.vue +++ b/template/code/typescript-router/src/App.vue @@ -1,30 +1,120 @@ + + diff --git a/template/code/typescript-router/src/assets/base.css b/template/code/typescript-router/src/assets/base.css new file mode 100644 index 00000000..6198c024 --- /dev/null +++ b/template/code/typescript-router/src/assets/base.css @@ -0,0 +1,72 @@ +/* color palette from */ +:root { + --vt-c-white: #ffffff; + --vt-c-white-soft: #f8f8f8; + --vt-c-white-mute: #f2f2f2; + + --vt-c-black: #181818; + --vt-c-black-soft: #222222; + --vt-c-black-mute: #282828; + + --vt-c-indigo: #2c3e50; + + --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); + --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); + --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); + --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); + + --vt-c-text-light-1: var(--vt-c-indigo); + --vt-c-text-light-2: rgba(60, 60, 60, 0.66); + --vt-c-text-dark-1: var(--vt-c-white); + --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); +} + +/* semantic color variables for this project */ +:root { + --color-background: var(--vt-c-white); + --color-background-soft: var(--vt-c-white-soft); + --color-background-mute: var(--vt-c-white-mute); + + --color-border: var(--vt-c-divider-light-2); + --color-border-hover: var(--vt-c-divider-light-1); + + --color-heading: var(--vt-c-text-light-1); + --color-text: var(--vt-c-text-light-1); + + --section-gap: 160px; +} + +[data-color-scheme='dark'] { + --color-background: var(--vt-c-black); + --color-background-soft: var(--vt-c-black-soft); + --color-background-mute: var(--vt-c-black-mute); + + --color-border: var(--vt-c-divider-dark-2); + --color-border-hover: var(--vt-c-divider-dark-1); + + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + position: relative; + font-weight: normal; +} + +body { + min-height: 100vh; + color: var(--color-text); + background: var(--color-background); + transition: color 0.5s, background-color 0.5s; + line-height: 1.6; + font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/template/code/typescript-router/src/assets/logo.png b/template/code/typescript-router/src/assets/logo.png deleted file mode 100644 index f3d2503f..00000000 Binary files a/template/code/typescript-router/src/assets/logo.png and /dev/null differ diff --git a/template/code/typescript-router/src/assets/logo.svg b/template/code/typescript-router/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/template/code/typescript-router/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/template/code/typescript-router/src/components/ColorSchemeSwitch.vue b/template/code/typescript-router/src/components/ColorSchemeSwitch.vue new file mode 100644 index 00000000..894e6bfe --- /dev/null +++ b/template/code/typescript-router/src/components/ColorSchemeSwitch.vue @@ -0,0 +1,137 @@ + + + + + diff --git a/template/code/typescript-router/src/components/HelloWorld.vue b/template/code/typescript-router/src/components/HelloWorld.vue index 97b3d3da..c7352017 100644 --- a/template/code/typescript-router/src/components/HelloWorld.vue +++ b/template/code/typescript-router/src/components/HelloWorld.vue @@ -1,54 +1,41 @@ - - + + diff --git a/template/code/typescript-router/src/components/IntroductionItem.vue b/template/code/typescript-router/src/components/IntroductionItem.vue new file mode 100644 index 00000000..ba0def33 --- /dev/null +++ b/template/code/typescript-router/src/components/IntroductionItem.vue @@ -0,0 +1,86 @@ + + + diff --git a/template/code/typescript-router/src/components/__tests__/ColorSchemeSwitch.spec.ts b/template/code/typescript-router/src/components/__tests__/ColorSchemeSwitch.spec.ts new file mode 100644 index 00000000..3842adf2 --- /dev/null +++ b/template/code/typescript-router/src/components/__tests__/ColorSchemeSwitch.spec.ts @@ -0,0 +1,34 @@ +import { mount } from '@cypress/vue' + +import ColorSchemeSwitch from '../ColorSchemeSwitch.vue' + +describe('ColorSchemeSwitch', () => { + beforeEach(() => { + cy.stub(window, 'matchMedia') + .withArgs('(prefers-color-scheme: light)') + .returns({ + matches: false, + addEventListener: () => {}, + removeEventListener: () => {}, + }) + .withArgs('(prefers-color-scheme: dark)') + .returns({ + matches: true, + addEventListener: () => {}, + removeEventListener: () => {}, + }) + }) + + it('use the preferred color scheme by default', () => { + mount(ColorSchemeSwitch) + + cy.get('body').should('have.attr', 'data-color-scheme', 'dark') + }) + + it('toggles the color scheme affter user clicks toggle', () => { + mount(ColorSchemeSwitch) + + cy.get('.color-scheme-switch').click() + cy.get('body').should('have.attr', 'data-color-scheme', 'light') + }) +}) diff --git a/template/code/typescript-router/src/components/__tests__/HelloWorld.spec.ts b/template/code/typescript-router/src/components/__tests__/HelloWorld.spec.ts index 087c9561..a69f3a9d 100644 --- a/template/code/typescript-router/src/components/__tests__/HelloWorld.spec.ts +++ b/template/code/typescript-router/src/components/__tests__/HelloWorld.spec.ts @@ -10,13 +10,4 @@ describe('HelloWorld', () => { mount(HelloWorld, { props: { msg: 'Hello Cypress' } }) cy.get('h1').should('contain', 'Hello Cypress') }) - - it('adds 1 when clicking the plus button', () => { - mount(HelloWorld, { props: { msg: 'Hello Cypress' } }) - - cy.get('button') - .should('contain', '0') - .click() - .should('contain', '1') - }) }) diff --git a/template/code/typescript-router/src/components/icons/Community.vue b/template/code/typescript-router/src/components/icons/Community.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/template/code/typescript-router/src/components/icons/Community.vue @@ -0,0 +1,7 @@ + diff --git a/template/code/typescript-router/src/components/icons/Documentation.vue b/template/code/typescript-router/src/components/icons/Documentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/template/code/typescript-router/src/components/icons/Documentation.vue @@ -0,0 +1,7 @@ + diff --git a/template/code/typescript-router/src/components/icons/Ecosystem.vue b/template/code/typescript-router/src/components/icons/Ecosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/template/code/typescript-router/src/components/icons/Ecosystem.vue @@ -0,0 +1,7 @@ + diff --git a/template/code/typescript-router/src/components/icons/Moon.vue b/template/code/typescript-router/src/components/icons/Moon.vue new file mode 100644 index 00000000..8e02b917 --- /dev/null +++ b/template/code/typescript-router/src/components/icons/Moon.vue @@ -0,0 +1,18 @@ + + + diff --git a/template/code/typescript-router/src/components/icons/Sun.vue b/template/code/typescript-router/src/components/icons/Sun.vue new file mode 100644 index 00000000..577f8031 --- /dev/null +++ b/template/code/typescript-router/src/components/icons/Sun.vue @@ -0,0 +1,34 @@ + + + diff --git a/template/code/typescript-router/src/components/icons/Support.vue b/template/code/typescript-router/src/components/icons/Support.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/template/code/typescript-router/src/components/icons/Support.vue @@ -0,0 +1,7 @@ + diff --git a/template/code/typescript-router/src/components/icons/Tooling.vue b/template/code/typescript-router/src/components/icons/Tooling.vue new file mode 100644 index 00000000..660598d7 --- /dev/null +++ b/template/code/typescript-router/src/components/icons/Tooling.vue @@ -0,0 +1,19 @@ + + diff --git a/template/code/typescript-router/src/composables/__tests__/useMediaQuery.spec.ts b/template/code/typescript-router/src/composables/__tests__/useMediaQuery.spec.ts new file mode 100644 index 00000000..a7a5d024 --- /dev/null +++ b/template/code/typescript-router/src/composables/__tests__/useMediaQuery.spec.ts @@ -0,0 +1,33 @@ +import { defineComponent, h, createVNode } from 'vue' +import { mount } from '@cypress/vue' + +import useMediaQuery from '../useMediaQuery' + +const Wrapper = defineComponent({ + props: { + query: { + type: String, + required: true + } + }, + setup(props) { + const matches = useMediaQuery(props.query) + return () => h('div', { id: 'result' }, matches.value.toString() ) + } +}) + +describe('useMediaQuery', () => { + it('should correctly reflect the match result of a media query', () => { + mount(Wrapper, { + props: { + query: '(min-width: 800px)' + } + }) + + cy.viewport(1000, 660) + cy.get('#result').should('include.text', 'true') + + cy.viewport(660, 660) + cy.get('#result').should('include.text', 'false') + }) +}) diff --git a/template/code/typescript-router/src/composables/useColorScheme.ts b/template/code/typescript-router/src/composables/useColorScheme.ts new file mode 100644 index 00000000..6bc17800 --- /dev/null +++ b/template/code/typescript-router/src/composables/useColorScheme.ts @@ -0,0 +1,31 @@ +import { ref, computed } from 'vue' +import useMediaQuery from './useMediaQuery' + +// Its value should be consistent when called multiple times. +// So we put it outside the composable function +const isUserToggledDark = ref() + +export default function useColorScheme() { + const isDefaultDark = useMediaQuery('(prefers-color-scheme: dark)') + + const isDark = computed(() => { + if (typeof isUserToggledDark.value !== 'undefined') { + return isUserToggledDark.value + } else { + return isDefaultDark.value + } + }) + + const toggle = () => { + if (typeof isUserToggledDark.value !== 'undefined') { + isUserToggledDark.value = !isUserToggledDark.value + } else { + isUserToggledDark.value = !isDefaultDark.value + } + } + + return { + toggle, + isDark + } +} diff --git a/template/code/typescript-router/src/composables/useMediaQuery.ts b/template/code/typescript-router/src/composables/useMediaQuery.ts new file mode 100644 index 00000000..559b4644 --- /dev/null +++ b/template/code/typescript-router/src/composables/useMediaQuery.ts @@ -0,0 +1,28 @@ +import { ref, onUnmounted } from 'vue' + +export default function useMediaQuery(query: string) { + const mediaQueryList = window.matchMedia(query) + const matches = ref(mediaQueryList.matches) + + const handler = (event: MediaQueryListEvent) => { + matches.value = event.matches + } + + // @ts-ignore Safari < 14 does not support this + if (mediaQueryList.addEventListener) { + mediaQueryList.addEventListener('change', handler) + } else { + mediaQueryList.addListener(handler) + } + + onUnmounted(() => { + // @ts-ignore Safari < 14 does not support this + if (mediaQueryList.removeEventListener) { + mediaQueryList.removeEventListener('change', handler) + } else { + mediaQueryList.removeListener(handler) + } + }) + + return matches +} diff --git a/template/code/typescript-router/src/main.ts b/template/code/typescript-router/src/main.ts new file mode 100644 index 00000000..c8e37b03 --- /dev/null +++ b/template/code/typescript-router/src/main.ts @@ -0,0 +1,9 @@ +import { createApp } from 'vue' +import App from './App.vue' +import router from './router' + +const app = createApp(App) + +app.use(router) + +app.mount('#app') diff --git a/template/code/typescript-router/src/views/About.vue b/template/code/typescript-router/src/views/About.vue index 3fa28070..756ad2a1 100644 --- a/template/code/typescript-router/src/views/About.vue +++ b/template/code/typescript-router/src/views/About.vue @@ -3,3 +3,13 @@

This is an about page

+ + diff --git a/template/code/typescript-router/src/views/Home.vue b/template/code/typescript-router/src/views/Home.vue index 4ade1db6..2912eebc 100644 --- a/template/code/typescript-router/src/views/Home.vue +++ b/template/code/typescript-router/src/views/Home.vue @@ -1,19 +1,88 @@ - - - +