From: Haoqun Jiang Date: Thu, 19 Aug 2021 08:35:37 +0000 (+0800) Subject: feat: new landing page design for default & typescript-default template X-Git-Tag: v3.0.0-alpha.3~2 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=ee804a0b541b8811f5de315fb9d4e2b679734be6;p=thirdparty%2Fvuejs%2Fcreate-vue.git feat: new landing page design for default & typescript-default template --- diff --git a/template/code/default/cypress/integration/example.spec.js b/template/code/default/cypress/integration/example.spec.js index 493bfcf0..7a8c909f 100644 --- a/template/code/default/cypress/integration/example.spec.js +++ b/template/code/default/cypress/integration/example.spec.js @@ -3,6 +3,6 @@ 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!') }) }) diff --git a/template/code/default/src/App.vue b/template/code/default/src/App.vue index a058d171..64c42595 100644 --- a/template/code/default/src/App.vue +++ b/template/code/default/src/App.vue @@ -1,22 +1,187 @@ - - + + diff --git a/template/code/default/src/assets/base.css b/template/code/default/src/assets/base.css new file mode 100644 index 00000000..e81bad15 --- /dev/null +++ b/template/code/default/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-2); + + --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/default/src/assets/logo.png b/template/code/default/src/assets/logo.png deleted file mode 100644 index f3d2503f..00000000 Binary files a/template/code/default/src/assets/logo.png and /dev/null differ diff --git a/template/code/default/src/assets/logo.svg b/template/code/default/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/template/code/default/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/template/code/default/src/components/ColorSchemeSwitch.vue b/template/code/default/src/components/ColorSchemeSwitch.vue new file mode 100644 index 00000000..a4007efe --- /dev/null +++ b/template/code/default/src/components/ColorSchemeSwitch.vue @@ -0,0 +1,137 @@ + + + + + diff --git a/template/code/default/src/components/HelloWorld.vue b/template/code/default/src/components/HelloWorld.vue index 51f81a8f..26672db0 100644 --- a/template/code/default/src/components/HelloWorld.vue +++ b/template/code/default/src/components/HelloWorld.vue @@ -1,57 +1,44 @@ - - + + diff --git a/template/code/default/src/components/IntroductionItem.vue b/template/code/default/src/components/IntroductionItem.vue new file mode 100644 index 00000000..58965058 --- /dev/null +++ b/template/code/default/src/components/IntroductionItem.vue @@ -0,0 +1,85 @@ + + + diff --git a/template/code/default/src/components/__tests__/ColorSchemeSwitch.spec.js b/template/code/default/src/components/__tests__/ColorSchemeSwitch.spec.js new file mode 100644 index 00000000..3842adf2 --- /dev/null +++ b/template/code/default/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/default/src/components/__tests__/HelloWorld.spec.js b/template/code/default/src/components/__tests__/HelloWorld.spec.js index 087c9561..a69f3a9d 100644 --- a/template/code/default/src/components/__tests__/HelloWorld.spec.js +++ b/template/code/default/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/default/src/components/icons/Community.vue b/template/code/default/src/components/icons/Community.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/template/code/default/src/components/icons/Community.vue @@ -0,0 +1,7 @@ + diff --git a/template/code/default/src/components/icons/Documentation.vue b/template/code/default/src/components/icons/Documentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/template/code/default/src/components/icons/Documentation.vue @@ -0,0 +1,7 @@ + diff --git a/template/code/default/src/components/icons/Ecosystem.vue b/template/code/default/src/components/icons/Ecosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/template/code/default/src/components/icons/Ecosystem.vue @@ -0,0 +1,7 @@ + diff --git a/template/code/default/src/components/icons/Moon.vue b/template/code/default/src/components/icons/Moon.vue new file mode 100644 index 00000000..8e02b917 --- /dev/null +++ b/template/code/default/src/components/icons/Moon.vue @@ -0,0 +1,18 @@ + + + diff --git a/template/code/default/src/components/icons/Sun.vue b/template/code/default/src/components/icons/Sun.vue new file mode 100644 index 00000000..577f8031 --- /dev/null +++ b/template/code/default/src/components/icons/Sun.vue @@ -0,0 +1,34 @@ + + + diff --git a/template/code/default/src/components/icons/Support.vue b/template/code/default/src/components/icons/Support.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/template/code/default/src/components/icons/Support.vue @@ -0,0 +1,7 @@ + diff --git a/template/code/default/src/components/icons/Tooling.vue b/template/code/default/src/components/icons/Tooling.vue new file mode 100644 index 00000000..660598d7 --- /dev/null +++ b/template/code/default/src/components/icons/Tooling.vue @@ -0,0 +1,19 @@ + + diff --git a/template/code/default/src/composables/__tests__/useMediaQuery.spec.js b/template/code/default/src/composables/__tests__/useMediaQuery.spec.js new file mode 100644 index 00000000..a7a5d024 --- /dev/null +++ b/template/code/default/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/default/src/composables/useColorScheme.js b/template/code/default/src/composables/useColorScheme.js new file mode 100644 index 00000000..be111aff --- /dev/null +++ b/template/code/default/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/default/src/composables/useMediaQuery.js b/template/code/default/src/composables/useMediaQuery.js new file mode 100644 index 00000000..bf288056 --- /dev/null +++ b/template/code/default/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/default/src/main.js b/template/code/default/src/main.js deleted file mode 100644 index 01433bca..00000000 --- a/template/code/default/src/main.js +++ /dev/null @@ -1,4 +0,0 @@ -import { createApp } from 'vue' -import App from './App.vue' - -createApp(App).mount('#app') diff --git a/template/code/router/src/main.js b/template/code/router/src/main.js deleted file mode 100644 index c8e37b03..00000000 --- a/template/code/router/src/main.js +++ /dev/null @@ -1,9 +0,0 @@ -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-default/cypress/integration/example.spec.ts b/template/code/typescript-default/cypress/integration/example.spec.ts index bbe8f52d..7a8c909f 100644 --- a/template/code/typescript-default/cypress/integration/example.spec.ts +++ b/template/code/typescript-default/cypress/integration/example.spec.ts @@ -3,6 +3,6 @@ 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!') }) }) diff --git a/template/code/typescript-default/src/App.vue b/template/code/typescript-default/src/App.vue index f1611b6f..1499f01b 100644 --- a/template/code/typescript-default/src/App.vue +++ b/template/code/typescript-default/src/App.vue @@ -1,19 +1,187 @@ - - + + diff --git a/template/code/typescript-default/src/assets/base.css b/template/code/typescript-default/src/assets/base.css new file mode 100644 index 00000000..e81bad15 --- /dev/null +++ b/template/code/typescript-default/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-2); + + --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-default/src/assets/logo.png b/template/code/typescript-default/src/assets/logo.png deleted file mode 100644 index f3d2503f..00000000 Binary files a/template/code/typescript-default/src/assets/logo.png and /dev/null differ diff --git a/template/code/typescript-default/src/assets/logo.svg b/template/code/typescript-default/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/template/code/typescript-default/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/template/code/typescript-default/src/components/ColorSchemeSwitch.vue b/template/code/typescript-default/src/components/ColorSchemeSwitch.vue new file mode 100644 index 00000000..a5188c22 --- /dev/null +++ b/template/code/typescript-default/src/components/ColorSchemeSwitch.vue @@ -0,0 +1,137 @@ + + + + + diff --git a/template/code/typescript-default/src/components/HelloWorld.vue b/template/code/typescript-default/src/components/HelloWorld.vue index 97b3d3da..8a759066 100644 --- a/template/code/typescript-default/src/components/HelloWorld.vue +++ b/template/code/typescript-default/src/components/HelloWorld.vue @@ -1,54 +1,41 @@ - - + + diff --git a/template/code/typescript-default/src/components/IntroductionItem.vue b/template/code/typescript-default/src/components/IntroductionItem.vue new file mode 100644 index 00000000..58965058 --- /dev/null +++ b/template/code/typescript-default/src/components/IntroductionItem.vue @@ -0,0 +1,85 @@ + + + diff --git a/template/code/typescript-default/src/components/__tests__/ColorSchemeSwitch.spec.ts b/template/code/typescript-default/src/components/__tests__/ColorSchemeSwitch.spec.ts new file mode 100644 index 00000000..3842adf2 --- /dev/null +++ b/template/code/typescript-default/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-default/src/components/__tests__/HelloWorld.spec.ts b/template/code/typescript-default/src/components/__tests__/HelloWorld.spec.ts index 087c9561..a69f3a9d 100644 --- a/template/code/typescript-default/src/components/__tests__/HelloWorld.spec.ts +++ b/template/code/typescript-default/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-default/src/components/icons/Community.vue b/template/code/typescript-default/src/components/icons/Community.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/template/code/typescript-default/src/components/icons/Community.vue @@ -0,0 +1,7 @@ + diff --git a/template/code/typescript-default/src/components/icons/Documentation.vue b/template/code/typescript-default/src/components/icons/Documentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/template/code/typescript-default/src/components/icons/Documentation.vue @@ -0,0 +1,7 @@ + diff --git a/template/code/typescript-default/src/components/icons/Ecosystem.vue b/template/code/typescript-default/src/components/icons/Ecosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/template/code/typescript-default/src/components/icons/Ecosystem.vue @@ -0,0 +1,7 @@ + diff --git a/template/code/typescript-default/src/components/icons/Moon.vue b/template/code/typescript-default/src/components/icons/Moon.vue new file mode 100644 index 00000000..8e02b917 --- /dev/null +++ b/template/code/typescript-default/src/components/icons/Moon.vue @@ -0,0 +1,18 @@ + + + diff --git a/template/code/typescript-default/src/components/icons/Sun.vue b/template/code/typescript-default/src/components/icons/Sun.vue new file mode 100644 index 00000000..577f8031 --- /dev/null +++ b/template/code/typescript-default/src/components/icons/Sun.vue @@ -0,0 +1,34 @@ + + + diff --git a/template/code/typescript-default/src/components/icons/Support.vue b/template/code/typescript-default/src/components/icons/Support.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/template/code/typescript-default/src/components/icons/Support.vue @@ -0,0 +1,7 @@ + diff --git a/template/code/typescript-default/src/components/icons/Tooling.vue b/template/code/typescript-default/src/components/icons/Tooling.vue new file mode 100644 index 00000000..660598d7 --- /dev/null +++ b/template/code/typescript-default/src/components/icons/Tooling.vue @@ -0,0 +1,19 @@ + + diff --git a/template/code/typescript-default/src/composables/__tests__/useMediaQuery.spec.ts b/template/code/typescript-default/src/composables/__tests__/useMediaQuery.spec.ts new file mode 100644 index 00000000..a7a5d024 --- /dev/null +++ b/template/code/typescript-default/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-default/src/composables/useColorScheme.ts b/template/code/typescript-default/src/composables/useColorScheme.ts new file mode 100644 index 00000000..6bc17800 --- /dev/null +++ b/template/code/typescript-default/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-default/src/composables/useMediaQuery.ts b/template/code/typescript-default/src/composables/useMediaQuery.ts new file mode 100644 index 00000000..559b4644 --- /dev/null +++ b/template/code/typescript-default/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-default/src/main.ts b/template/code/typescript-default/src/main.ts deleted file mode 100644 index 01433bca..00000000 --- a/template/code/typescript-default/src/main.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { createApp } from 'vue' -import App from './App.vue' - -createApp(App).mount('#app')