From: Haoqun Jiang Date: Tue, 7 Sep 2021 07:02:07 +0000 (+0800) Subject: chore: simplify the folder structure of default templates X-Git-Tag: v3.0.0-beta.1~9 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=6fabade430f7a663c1c66c7692e2bf11f38e5173;p=thirdparty%2Fvuejs%2Fcreate-vue.git chore: simplify the folder structure of default templates --- diff --git a/template/code/default/src/App.vue b/template/code/default/src/App.vue index 381b2cf8..945ae423 100644 --- a/template/code/default/src/App.vue +++ b/template/code/default/src/App.vue @@ -1,13 +1,6 @@ diff --git a/template/code/default/src/assets/base.css b/template/code/default/src/assets/base.css index 6198c024..5427a030 100644 --- a/template/code/default/src/assets/base.css +++ b/template/code/default/src/assets/base.css @@ -12,7 +12,7 @@ --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-dadarkrk-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); @@ -36,16 +36,18 @@ --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); +@media (prefers-color-scheme: dark) { + :root { + --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-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); + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } } *, diff --git a/template/code/default/src/components/ColorSchemeSwitch.vue b/template/code/default/src/components/ColorSchemeSwitch.vue deleted file mode 100644 index e7bf9383..00000000 --- a/template/code/default/src/components/ColorSchemeSwitch.vue +++ /dev/null @@ -1,137 +0,0 @@ - - - - - diff --git a/template/code/default/src/components/Welcome.vue b/template/code/default/src/components/Welcome.vue new file mode 100644 index 00000000..9f3cdf4c --- /dev/null +++ b/template/code/default/src/components/Welcome.vue @@ -0,0 +1,85 @@ + + + diff --git a/template/code/default/src/components/IntroductionItem.vue b/template/code/default/src/components/WelcomeItem.vue similarity index 100% rename from template/code/default/src/components/IntroductionItem.vue rename to template/code/default/src/components/WelcomeItem.vue diff --git a/template/code/default/src/components/__tests__/ColorSchemeSwitch.spec.js b/template/code/default/src/components/__tests__/ColorSchemeSwitch.spec.js deleted file mode 100644 index 3842adf2..00000000 --- a/template/code/default/src/components/__tests__/ColorSchemeSwitch.spec.js +++ /dev/null @@ -1,34 +0,0 @@ -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/icons/IconMoon.vue b/template/code/default/src/components/icons/IconMoon.vue deleted file mode 100644 index 8e02b917..00000000 --- a/template/code/default/src/components/icons/IconMoon.vue +++ /dev/null @@ -1,18 +0,0 @@ - - - diff --git a/template/code/default/src/components/icons/IconSun.vue b/template/code/default/src/components/icons/IconSun.vue deleted file mode 100644 index 577f8031..00000000 --- a/template/code/default/src/components/icons/IconSun.vue +++ /dev/null @@ -1,34 +0,0 @@ - - - diff --git a/template/code/default/src/composables/__tests__/useMediaQuery.spec.js b/template/code/default/src/composables/__tests__/useMediaQuery.spec.js deleted file mode 100644 index a7a5d024..00000000 --- a/template/code/default/src/composables/__tests__/useMediaQuery.spec.js +++ /dev/null @@ -1,33 +0,0 @@ -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 deleted file mode 100644 index be111aff..00000000 --- a/template/code/default/src/composables/useColorScheme.js +++ /dev/null @@ -1,31 +0,0 @@ -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 deleted file mode 100644 index bf288056..00000000 --- a/template/code/default/src/composables/useMediaQuery.js +++ /dev/null @@ -1,28 +0,0 @@ -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/typescript-default/src/App.vue b/template/code/typescript-default/src/App.vue index 3a6ebe60..adcd6fe7 100644 --- a/template/code/typescript-default/src/App.vue +++ b/template/code/typescript-default/src/App.vue @@ -1,13 +1,6 @@ diff --git a/template/code/typescript-default/src/assets/base.css b/template/code/typescript-default/src/assets/base.css index 6198c024..5427a030 100644 --- a/template/code/typescript-default/src/assets/base.css +++ b/template/code/typescript-default/src/assets/base.css @@ -12,7 +12,7 @@ --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-dadarkrk-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); @@ -36,16 +36,18 @@ --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); +@media (prefers-color-scheme: dark) { + :root { + --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-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); + --color-heading: var(--vt-c-text-dark-1); + --color-text: var(--vt-c-text-dark-2); + } } *, diff --git a/template/code/typescript-default/src/components/ColorSchemeSwitch.vue b/template/code/typescript-default/src/components/ColorSchemeSwitch.vue deleted file mode 100644 index 7662aa2b..00000000 --- a/template/code/typescript-default/src/components/ColorSchemeSwitch.vue +++ /dev/null @@ -1,137 +0,0 @@ - - - - - diff --git a/template/code/typescript-default/src/components/Welcome.vue b/template/code/typescript-default/src/components/Welcome.vue new file mode 100644 index 00000000..a4ee9e88 --- /dev/null +++ b/template/code/typescript-default/src/components/Welcome.vue @@ -0,0 +1,85 @@ + + + diff --git a/template/code/typescript-default/src/components/IntroductionItem.vue b/template/code/typescript-default/src/components/WelcomeItem.vue similarity index 100% rename from template/code/typescript-default/src/components/IntroductionItem.vue rename to template/code/typescript-default/src/components/WelcomeItem.vue diff --git a/template/code/typescript-default/src/components/__tests__/ColorSchemeSwitch.spec.ts b/template/code/typescript-default/src/components/__tests__/ColorSchemeSwitch.spec.ts deleted file mode 100644 index 3842adf2..00000000 --- a/template/code/typescript-default/src/components/__tests__/ColorSchemeSwitch.spec.ts +++ /dev/null @@ -1,34 +0,0 @@ -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/icons/IconMoon.vue b/template/code/typescript-default/src/components/icons/IconMoon.vue deleted file mode 100644 index 8e02b917..00000000 --- a/template/code/typescript-default/src/components/icons/IconMoon.vue +++ /dev/null @@ -1,18 +0,0 @@ - - - diff --git a/template/code/typescript-default/src/components/icons/IconSun.vue b/template/code/typescript-default/src/components/icons/IconSun.vue deleted file mode 100644 index 577f8031..00000000 --- a/template/code/typescript-default/src/components/icons/IconSun.vue +++ /dev/null @@ -1,34 +0,0 @@ - - - diff --git a/template/code/typescript-default/src/composables/__tests__/useMediaQuery.spec.ts b/template/code/typescript-default/src/composables/__tests__/useMediaQuery.spec.ts deleted file mode 100644 index a7a5d024..00000000 --- a/template/code/typescript-default/src/composables/__tests__/useMediaQuery.spec.ts +++ /dev/null @@ -1,33 +0,0 @@ -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 deleted file mode 100644 index 6bc17800..00000000 --- a/template/code/typescript-default/src/composables/useColorScheme.ts +++ /dev/null @@ -1,31 +0,0 @@ -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 deleted file mode 100644 index 559b4644..00000000 --- a/template/code/typescript-default/src/composables/useMediaQuery.ts +++ /dev/null @@ -1,28 +0,0 @@ -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 -}