From: Haoqun Jiang Date: Thu, 19 Aug 2021 08:40:03 +0000 (+0800) Subject: 3.0.0-alpha.3 X-Git-Tag: v3.0.0-alpha.3^0 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=0c00dee100727764df33e3e537af157c09940709;p=thirdparty%2Fvuejs%2Fcreate-vue.git 3.0.0-alpha.3 --- diff --git a/package.json b/package.json index 06426afe..f05b675a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "create-vue", - "version": "3.0.0-alpha.2", + "version": "3.0.0-alpha.3", "description": "An easy way to start a Vue project", "type": "module", "main": "index.js", diff --git a/playground/default/jsconfig.json b/playground/default/jsconfig.json index 6f98acfa..d02eb051 100644 --- a/playground/default/jsconfig.json +++ b/playground/default/jsconfig.json @@ -16,6 +16,5 @@ "lib": ["esnext", "dom", "dom.iterable", "scripthost"], "skipLibCheck": true }, - "include": ["vite.config.*", "vite-env.d.ts", "src/**/*", "src/**/*.vue"], - "exclude": ["src/**/__tests__/**"] + "include": ["vite.config.*", "vite-env.d.ts", "src/**/*", "src/**/*.vue"] } diff --git a/playground/default/src/App.vue b/playground/default/src/App.vue index a058d171..64c42595 100644 --- a/playground/default/src/App.vue +++ b/playground/default/src/App.vue @@ -1,22 +1,187 @@ - - + + diff --git a/playground/default/src/assets/base.css b/playground/default/src/assets/base.css new file mode 100644 index 00000000..e81bad15 --- /dev/null +++ b/playground/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/playground/default/src/assets/logo.svg b/playground/default/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/playground/default/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/playground/default/src/components/ColorSchemeSwitch.vue b/playground/default/src/components/ColorSchemeSwitch.vue new file mode 100644 index 00000000..a4007efe --- /dev/null +++ b/playground/default/src/components/ColorSchemeSwitch.vue @@ -0,0 +1,137 @@ + + + + + diff --git a/playground/default/src/components/HelloWorld.vue b/playground/default/src/components/HelloWorld.vue index 51f81a8f..26672db0 100644 --- a/playground/default/src/components/HelloWorld.vue +++ b/playground/default/src/components/HelloWorld.vue @@ -1,57 +1,44 @@ - - + + diff --git a/playground/default/src/components/IntroductionItem.vue b/playground/default/src/components/IntroductionItem.vue new file mode 100644 index 00000000..58965058 --- /dev/null +++ b/playground/default/src/components/IntroductionItem.vue @@ -0,0 +1,85 @@ + + + diff --git a/playground/default/src/components/icons/Community.vue b/playground/default/src/components/icons/Community.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/playground/default/src/components/icons/Community.vue @@ -0,0 +1,7 @@ + diff --git a/playground/default/src/components/icons/Documentation.vue b/playground/default/src/components/icons/Documentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/playground/default/src/components/icons/Documentation.vue @@ -0,0 +1,7 @@ + diff --git a/playground/default/src/components/icons/Ecosystem.vue b/playground/default/src/components/icons/Ecosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/playground/default/src/components/icons/Ecosystem.vue @@ -0,0 +1,7 @@ + diff --git a/playground/default/src/components/icons/Moon.vue b/playground/default/src/components/icons/Moon.vue new file mode 100644 index 00000000..8e02b917 --- /dev/null +++ b/playground/default/src/components/icons/Moon.vue @@ -0,0 +1,18 @@ + + + diff --git a/playground/default/src/components/icons/Sun.vue b/playground/default/src/components/icons/Sun.vue new file mode 100644 index 00000000..577f8031 --- /dev/null +++ b/playground/default/src/components/icons/Sun.vue @@ -0,0 +1,34 @@ + + + diff --git a/playground/default/src/components/icons/Support.vue b/playground/default/src/components/icons/Support.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/playground/default/src/components/icons/Support.vue @@ -0,0 +1,7 @@ + diff --git a/playground/default/src/components/icons/Tooling.vue b/playground/default/src/components/icons/Tooling.vue new file mode 100644 index 00000000..660598d7 --- /dev/null +++ b/playground/default/src/components/icons/Tooling.vue @@ -0,0 +1,19 @@ + + diff --git a/playground/default/src/composables/useColorScheme.js b/playground/default/src/composables/useColorScheme.js new file mode 100644 index 00000000..be111aff --- /dev/null +++ b/playground/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/playground/default/src/composables/useMediaQuery.js b/playground/default/src/composables/useMediaQuery.js new file mode 100644 index 00000000..bf288056 --- /dev/null +++ b/playground/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/playground/jsx-router-vuex-with-tests/jsconfig.json b/playground/jsx-router-vuex-with-tests/jsconfig.json index 6f98acfa..d02eb051 100644 --- a/playground/jsx-router-vuex-with-tests/jsconfig.json +++ b/playground/jsx-router-vuex-with-tests/jsconfig.json @@ -16,6 +16,5 @@ "lib": ["esnext", "dom", "dom.iterable", "scripthost"], "skipLibCheck": true }, - "include": ["vite.config.*", "vite-env.d.ts", "src/**/*", "src/**/*.vue"], - "exclude": ["src/**/__tests__/**"] + "include": ["vite.config.*", "vite-env.d.ts", "src/**/*", "src/**/*.vue"] } diff --git a/playground/jsx-router-vuex-with-tests/package.json b/playground/jsx-router-vuex-with-tests/package.json index 81e25b4f..09e46e33 100644 --- a/playground/jsx-router-vuex-with-tests/package.json +++ b/playground/jsx-router-vuex-with-tests/package.json @@ -17,13 +17,13 @@ "vuex": "^4.0.2" }, "devDependencies": { - "@cypress/vite-dev-server": "^2.0.7", - "@cypress/vue": "^3.0.3", "@vitejs/plugin-vue": "^1.4.0", - "@vitejs/plugin-vue-jsx": "^1.1.7", "@vue/compiler-sfc": "^3.2.2", + "vite": "^2.5.0", + "@vitejs/plugin-vue-jsx": "^1.1.7", + "@cypress/vite-dev-server": "^2.0.7", + "@cypress/vue": "^3.0.3", "cypress": "^8.2.0", - "start-server-and-test": "^1.13.1", - "vite": "^2.5.0" + "start-server-and-test": "^1.13.1" } } diff --git a/playground/jsx-router-vuex/jsconfig.json b/playground/jsx-router-vuex/jsconfig.json index 6f98acfa..d02eb051 100644 --- a/playground/jsx-router-vuex/jsconfig.json +++ b/playground/jsx-router-vuex/jsconfig.json @@ -16,6 +16,5 @@ "lib": ["esnext", "dom", "dom.iterable", "scripthost"], "skipLibCheck": true }, - "include": ["vite.config.*", "vite-env.d.ts", "src/**/*", "src/**/*.vue"], - "exclude": ["src/**/__tests__/**"] + "include": ["vite.config.*", "vite-env.d.ts", "src/**/*", "src/**/*.vue"] } diff --git a/playground/jsx-router-vuex/package.json b/playground/jsx-router-vuex/package.json index 5af4dd34..6024a9df 100644 --- a/playground/jsx-router-vuex/package.json +++ b/playground/jsx-router-vuex/package.json @@ -14,8 +14,8 @@ }, "devDependencies": { "@vitejs/plugin-vue": "^1.4.0", - "@vitejs/plugin-vue-jsx": "^1.1.7", "@vue/compiler-sfc": "^3.2.2", - "vite": "^2.5.0" + "vite": "^2.5.0", + "@vitejs/plugin-vue-jsx": "^1.1.7" } } diff --git a/playground/jsx-router/jsconfig.json b/playground/jsx-router/jsconfig.json index 6f98acfa..d02eb051 100644 --- a/playground/jsx-router/jsconfig.json +++ b/playground/jsx-router/jsconfig.json @@ -16,6 +16,5 @@ "lib": ["esnext", "dom", "dom.iterable", "scripthost"], "skipLibCheck": true }, - "include": ["vite.config.*", "vite-env.d.ts", "src/**/*", "src/**/*.vue"], - "exclude": ["src/**/__tests__/**"] + "include": ["vite.config.*", "vite-env.d.ts", "src/**/*", "src/**/*.vue"] } diff --git a/playground/jsx-router/package.json b/playground/jsx-router/package.json index 19d22530..bf1d8c51 100644 --- a/playground/jsx-router/package.json +++ b/playground/jsx-router/package.json @@ -13,8 +13,8 @@ }, "devDependencies": { "@vitejs/plugin-vue": "^1.4.0", - "@vitejs/plugin-vue-jsx": "^1.1.7", "@vue/compiler-sfc": "^3.2.2", - "vite": "^2.5.0" + "vite": "^2.5.0", + "@vitejs/plugin-vue-jsx": "^1.1.7" } } diff --git a/playground/jsx/jsconfig.json b/playground/jsx/jsconfig.json index 6f98acfa..d02eb051 100644 --- a/playground/jsx/jsconfig.json +++ b/playground/jsx/jsconfig.json @@ -16,6 +16,5 @@ "lib": ["esnext", "dom", "dom.iterable", "scripthost"], "skipLibCheck": true }, - "include": ["vite.config.*", "vite-env.d.ts", "src/**/*", "src/**/*.vue"], - "exclude": ["src/**/__tests__/**"] + "include": ["vite.config.*", "vite-env.d.ts", "src/**/*", "src/**/*.vue"] } diff --git a/playground/jsx/package.json b/playground/jsx/package.json index 9313d088..6874db4f 100644 --- a/playground/jsx/package.json +++ b/playground/jsx/package.json @@ -12,8 +12,8 @@ }, "devDependencies": { "@vitejs/plugin-vue": "^1.4.0", - "@vitejs/plugin-vue-jsx": "^1.1.7", "@vue/compiler-sfc": "^3.2.2", - "vite": "^2.5.0" + "vite": "^2.5.0", + "@vitejs/plugin-vue-jsx": "^1.1.7" } } diff --git a/playground/jsx/src/App.vue b/playground/jsx/src/App.vue index a058d171..64c42595 100644 --- a/playground/jsx/src/App.vue +++ b/playground/jsx/src/App.vue @@ -1,22 +1,187 @@ - - + + diff --git a/playground/jsx/src/assets/base.css b/playground/jsx/src/assets/base.css new file mode 100644 index 00000000..e81bad15 --- /dev/null +++ b/playground/jsx/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/playground/jsx/src/assets/logo.svg b/playground/jsx/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/playground/jsx/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/playground/jsx/src/components/ColorSchemeSwitch.vue b/playground/jsx/src/components/ColorSchemeSwitch.vue new file mode 100644 index 00000000..a4007efe --- /dev/null +++ b/playground/jsx/src/components/ColorSchemeSwitch.vue @@ -0,0 +1,137 @@ + + + + + diff --git a/playground/jsx/src/components/HelloWorld.vue b/playground/jsx/src/components/HelloWorld.vue index 51f81a8f..26672db0 100644 --- a/playground/jsx/src/components/HelloWorld.vue +++ b/playground/jsx/src/components/HelloWorld.vue @@ -1,57 +1,44 @@ - - + + diff --git a/playground/jsx/src/components/IntroductionItem.vue b/playground/jsx/src/components/IntroductionItem.vue new file mode 100644 index 00000000..58965058 --- /dev/null +++ b/playground/jsx/src/components/IntroductionItem.vue @@ -0,0 +1,85 @@ + + + diff --git a/playground/jsx/src/components/icons/Community.vue b/playground/jsx/src/components/icons/Community.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/playground/jsx/src/components/icons/Community.vue @@ -0,0 +1,7 @@ + diff --git a/playground/jsx/src/components/icons/Documentation.vue b/playground/jsx/src/components/icons/Documentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/playground/jsx/src/components/icons/Documentation.vue @@ -0,0 +1,7 @@ + diff --git a/playground/jsx/src/components/icons/Ecosystem.vue b/playground/jsx/src/components/icons/Ecosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/playground/jsx/src/components/icons/Ecosystem.vue @@ -0,0 +1,7 @@ + diff --git a/playground/jsx/src/components/icons/Moon.vue b/playground/jsx/src/components/icons/Moon.vue new file mode 100644 index 00000000..8e02b917 --- /dev/null +++ b/playground/jsx/src/components/icons/Moon.vue @@ -0,0 +1,18 @@ + + + diff --git a/playground/jsx/src/components/icons/Sun.vue b/playground/jsx/src/components/icons/Sun.vue new file mode 100644 index 00000000..577f8031 --- /dev/null +++ b/playground/jsx/src/components/icons/Sun.vue @@ -0,0 +1,34 @@ + + + diff --git a/playground/jsx/src/components/icons/Support.vue b/playground/jsx/src/components/icons/Support.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/playground/jsx/src/components/icons/Support.vue @@ -0,0 +1,7 @@ + diff --git a/playground/jsx/src/components/icons/Tooling.vue b/playground/jsx/src/components/icons/Tooling.vue new file mode 100644 index 00000000..660598d7 --- /dev/null +++ b/playground/jsx/src/components/icons/Tooling.vue @@ -0,0 +1,19 @@ + + diff --git a/playground/jsx/src/composables/useColorScheme.js b/playground/jsx/src/composables/useColorScheme.js new file mode 100644 index 00000000..be111aff --- /dev/null +++ b/playground/jsx/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/playground/jsx/src/composables/useMediaQuery.js b/playground/jsx/src/composables/useMediaQuery.js new file mode 100644 index 00000000..bf288056 --- /dev/null +++ b/playground/jsx/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/playground/router-vuex-with-tests/jsconfig.json b/playground/router-vuex-with-tests/jsconfig.json index 6f98acfa..d02eb051 100644 --- a/playground/router-vuex-with-tests/jsconfig.json +++ b/playground/router-vuex-with-tests/jsconfig.json @@ -16,6 +16,5 @@ "lib": ["esnext", "dom", "dom.iterable", "scripthost"], "skipLibCheck": true }, - "include": ["vite.config.*", "vite-env.d.ts", "src/**/*", "src/**/*.vue"], - "exclude": ["src/**/__tests__/**"] + "include": ["vite.config.*", "vite-env.d.ts", "src/**/*", "src/**/*.vue"] } diff --git a/playground/router-vuex-with-tests/package.json b/playground/router-vuex-with-tests/package.json index d575a3eb..eaadc5f8 100644 --- a/playground/router-vuex-with-tests/package.json +++ b/playground/router-vuex-with-tests/package.json @@ -17,12 +17,12 @@ "vuex": "^4.0.2" }, "devDependencies": { - "@cypress/vite-dev-server": "^2.0.7", - "@cypress/vue": "^3.0.3", "@vitejs/plugin-vue": "^1.4.0", "@vue/compiler-sfc": "^3.2.2", + "vite": "^2.5.0", + "@cypress/vite-dev-server": "^2.0.7", + "@cypress/vue": "^3.0.3", "cypress": "^8.2.0", - "start-server-and-test": "^1.13.1", - "vite": "^2.5.0" + "start-server-and-test": "^1.13.1" } } diff --git a/playground/router-vuex/jsconfig.json b/playground/router-vuex/jsconfig.json index 6f98acfa..d02eb051 100644 --- a/playground/router-vuex/jsconfig.json +++ b/playground/router-vuex/jsconfig.json @@ -16,6 +16,5 @@ "lib": ["esnext", "dom", "dom.iterable", "scripthost"], "skipLibCheck": true }, - "include": ["vite.config.*", "vite-env.d.ts", "src/**/*", "src/**/*.vue"], - "exclude": ["src/**/__tests__/**"] + "include": ["vite.config.*", "vite-env.d.ts", "src/**/*", "src/**/*.vue"] } diff --git a/playground/router/jsconfig.json b/playground/router/jsconfig.json index 6f98acfa..d02eb051 100644 --- a/playground/router/jsconfig.json +++ b/playground/router/jsconfig.json @@ -16,6 +16,5 @@ "lib": ["esnext", "dom", "dom.iterable", "scripthost"], "skipLibCheck": true }, - "include": ["vite.config.*", "vite-env.d.ts", "src/**/*", "src/**/*.vue"], - "exclude": ["src/**/__tests__/**"] + "include": ["vite.config.*", "vite-env.d.ts", "src/**/*", "src/**/*.vue"] } diff --git a/playground/typescript-jsx-router-vuex-with-tests/package.json b/playground/typescript-jsx-router-vuex-with-tests/package.json index c7e60314..b802f567 100644 --- a/playground/typescript-jsx-router-vuex-with-tests/package.json +++ b/playground/typescript-jsx-router-vuex-with-tests/package.json @@ -18,15 +18,15 @@ "vuex": "^4.0.2" }, "devDependencies": { - "@cypress/vite-dev-server": "^2.0.7", - "@cypress/vue": "^3.0.3", "@vitejs/plugin-vue": "^1.4.0", - "@vitejs/plugin-vue-jsx": "^1.1.7", "@vue/compiler-sfc": "^3.2.2", + "vite": "^2.5.0", + "@vitejs/plugin-vue-jsx": "^1.1.7", + "@cypress/vite-dev-server": "^2.0.7", + "@cypress/vue": "^3.0.3", "cypress": "^8.2.0", "start-server-and-test": "^1.13.1", "typescript": "~4.3.5", - "vite": "^2.5.0", "vue-tsc": "^0.2.3" } } diff --git a/playground/typescript-jsx-router-vuex-with-tests/tsconfig.json b/playground/typescript-jsx-router-vuex-with-tests/tsconfig.json index 6f98acfa..d02eb051 100644 --- a/playground/typescript-jsx-router-vuex-with-tests/tsconfig.json +++ b/playground/typescript-jsx-router-vuex-with-tests/tsconfig.json @@ -16,6 +16,5 @@ "lib": ["esnext", "dom", "dom.iterable", "scripthost"], "skipLibCheck": true }, - "include": ["vite.config.*", "vite-env.d.ts", "src/**/*", "src/**/*.vue"], - "exclude": ["src/**/__tests__/**"] + "include": ["vite.config.*", "vite-env.d.ts", "src/**/*", "src/**/*.vue"] } diff --git a/playground/typescript-jsx-router-vuex/package.json b/playground/typescript-jsx-router-vuex/package.json index 3ad47772..716ab2c8 100644 --- a/playground/typescript-jsx-router-vuex/package.json +++ b/playground/typescript-jsx-router-vuex/package.json @@ -15,10 +15,10 @@ }, "devDependencies": { "@vitejs/plugin-vue": "^1.4.0", - "@vitejs/plugin-vue-jsx": "^1.1.7", "@vue/compiler-sfc": "^3.2.2", - "typescript": "~4.3.5", "vite": "^2.5.0", + "@vitejs/plugin-vue-jsx": "^1.1.7", + "typescript": "~4.3.5", "vue-tsc": "^0.2.3" } } diff --git a/playground/typescript-jsx-router-vuex/tsconfig.json b/playground/typescript-jsx-router-vuex/tsconfig.json index 6f98acfa..d02eb051 100644 --- a/playground/typescript-jsx-router-vuex/tsconfig.json +++ b/playground/typescript-jsx-router-vuex/tsconfig.json @@ -16,6 +16,5 @@ "lib": ["esnext", "dom", "dom.iterable", "scripthost"], "skipLibCheck": true }, - "include": ["vite.config.*", "vite-env.d.ts", "src/**/*", "src/**/*.vue"], - "exclude": ["src/**/__tests__/**"] + "include": ["vite.config.*", "vite-env.d.ts", "src/**/*", "src/**/*.vue"] } diff --git a/playground/typescript-jsx-router/package.json b/playground/typescript-jsx-router/package.json index 49967375..e9fb8684 100644 --- a/playground/typescript-jsx-router/package.json +++ b/playground/typescript-jsx-router/package.json @@ -14,10 +14,10 @@ }, "devDependencies": { "@vitejs/plugin-vue": "^1.4.0", - "@vitejs/plugin-vue-jsx": "^1.1.7", "@vue/compiler-sfc": "^3.2.2", - "typescript": "~4.3.5", "vite": "^2.5.0", + "@vitejs/plugin-vue-jsx": "^1.1.7", + "typescript": "~4.3.5", "vue-tsc": "^0.2.3" } } diff --git a/playground/typescript-jsx-router/tsconfig.json b/playground/typescript-jsx-router/tsconfig.json index 6f98acfa..d02eb051 100644 --- a/playground/typescript-jsx-router/tsconfig.json +++ b/playground/typescript-jsx-router/tsconfig.json @@ -16,6 +16,5 @@ "lib": ["esnext", "dom", "dom.iterable", "scripthost"], "skipLibCheck": true }, - "include": ["vite.config.*", "vite-env.d.ts", "src/**/*", "src/**/*.vue"], - "exclude": ["src/**/__tests__/**"] + "include": ["vite.config.*", "vite-env.d.ts", "src/**/*", "src/**/*.vue"] } diff --git a/playground/typescript-jsx/package.json b/playground/typescript-jsx/package.json index 3eede173..74c96bfa 100644 --- a/playground/typescript-jsx/package.json +++ b/playground/typescript-jsx/package.json @@ -13,10 +13,10 @@ }, "devDependencies": { "@vitejs/plugin-vue": "^1.4.0", - "@vitejs/plugin-vue-jsx": "^1.1.7", "@vue/compiler-sfc": "^3.2.2", - "typescript": "~4.3.5", "vite": "^2.5.0", + "@vitejs/plugin-vue-jsx": "^1.1.7", + "typescript": "~4.3.5", "vue-tsc": "^0.2.3" } } diff --git a/playground/typescript-jsx/src/App.vue b/playground/typescript-jsx/src/App.vue index f1611b6f..1499f01b 100644 --- a/playground/typescript-jsx/src/App.vue +++ b/playground/typescript-jsx/src/App.vue @@ -1,19 +1,187 @@ - - + + diff --git a/playground/typescript-jsx/src/assets/base.css b/playground/typescript-jsx/src/assets/base.css new file mode 100644 index 00000000..e81bad15 --- /dev/null +++ b/playground/typescript-jsx/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/playground/typescript-jsx/src/assets/logo.svg b/playground/typescript-jsx/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/playground/typescript-jsx/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/playground/typescript-jsx/src/components/ColorSchemeSwitch.vue b/playground/typescript-jsx/src/components/ColorSchemeSwitch.vue new file mode 100644 index 00000000..a5188c22 --- /dev/null +++ b/playground/typescript-jsx/src/components/ColorSchemeSwitch.vue @@ -0,0 +1,137 @@ + + + + + diff --git a/playground/typescript-jsx/src/components/HelloWorld.vue b/playground/typescript-jsx/src/components/HelloWorld.vue index 97b3d3da..8a759066 100644 --- a/playground/typescript-jsx/src/components/HelloWorld.vue +++ b/playground/typescript-jsx/src/components/HelloWorld.vue @@ -1,54 +1,41 @@ - - + + diff --git a/playground/typescript-jsx/src/components/IntroductionItem.vue b/playground/typescript-jsx/src/components/IntroductionItem.vue new file mode 100644 index 00000000..58965058 --- /dev/null +++ b/playground/typescript-jsx/src/components/IntroductionItem.vue @@ -0,0 +1,85 @@ + + + diff --git a/playground/typescript-jsx/src/components/icons/Community.vue b/playground/typescript-jsx/src/components/icons/Community.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/playground/typescript-jsx/src/components/icons/Community.vue @@ -0,0 +1,7 @@ + diff --git a/playground/typescript-jsx/src/components/icons/Documentation.vue b/playground/typescript-jsx/src/components/icons/Documentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/playground/typescript-jsx/src/components/icons/Documentation.vue @@ -0,0 +1,7 @@ + diff --git a/playground/typescript-jsx/src/components/icons/Ecosystem.vue b/playground/typescript-jsx/src/components/icons/Ecosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/playground/typescript-jsx/src/components/icons/Ecosystem.vue @@ -0,0 +1,7 @@ + diff --git a/playground/typescript-jsx/src/components/icons/Moon.vue b/playground/typescript-jsx/src/components/icons/Moon.vue new file mode 100644 index 00000000..8e02b917 --- /dev/null +++ b/playground/typescript-jsx/src/components/icons/Moon.vue @@ -0,0 +1,18 @@ + + + diff --git a/playground/typescript-jsx/src/components/icons/Sun.vue b/playground/typescript-jsx/src/components/icons/Sun.vue new file mode 100644 index 00000000..577f8031 --- /dev/null +++ b/playground/typescript-jsx/src/components/icons/Sun.vue @@ -0,0 +1,34 @@ + + + diff --git a/playground/typescript-jsx/src/components/icons/Support.vue b/playground/typescript-jsx/src/components/icons/Support.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/playground/typescript-jsx/src/components/icons/Support.vue @@ -0,0 +1,7 @@ + diff --git a/playground/typescript-jsx/src/components/icons/Tooling.vue b/playground/typescript-jsx/src/components/icons/Tooling.vue new file mode 100644 index 00000000..660598d7 --- /dev/null +++ b/playground/typescript-jsx/src/components/icons/Tooling.vue @@ -0,0 +1,19 @@ + + diff --git a/playground/typescript-jsx/src/composables/useColorScheme.ts b/playground/typescript-jsx/src/composables/useColorScheme.ts new file mode 100644 index 00000000..6bc17800 --- /dev/null +++ b/playground/typescript-jsx/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/playground/typescript-jsx/src/composables/useMediaQuery.ts b/playground/typescript-jsx/src/composables/useMediaQuery.ts new file mode 100644 index 00000000..559b4644 --- /dev/null +++ b/playground/typescript-jsx/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/playground/typescript-jsx/tsconfig.json b/playground/typescript-jsx/tsconfig.json index 6f98acfa..d02eb051 100644 --- a/playground/typescript-jsx/tsconfig.json +++ b/playground/typescript-jsx/tsconfig.json @@ -16,6 +16,5 @@ "lib": ["esnext", "dom", "dom.iterable", "scripthost"], "skipLibCheck": true }, - "include": ["vite.config.*", "vite-env.d.ts", "src/**/*", "src/**/*.vue"], - "exclude": ["src/**/__tests__/**"] + "include": ["vite.config.*", "vite-env.d.ts", "src/**/*", "src/**/*.vue"] } diff --git a/playground/typescript/package.json b/playground/typescript/package.json index eef56ef2..708333e4 100644 --- a/playground/typescript/package.json +++ b/playground/typescript/package.json @@ -14,8 +14,8 @@ "devDependencies": { "@vitejs/plugin-vue": "^1.4.0", "@vue/compiler-sfc": "^3.2.2", - "typescript": "~4.3.5", "vite": "^2.5.0", + "typescript": "~4.3.5", "vue-tsc": "^0.2.3" } } diff --git a/playground/typescript/src/App.vue b/playground/typescript/src/App.vue index f1611b6f..1499f01b 100644 --- a/playground/typescript/src/App.vue +++ b/playground/typescript/src/App.vue @@ -1,19 +1,187 @@ - - + + diff --git a/playground/typescript/src/assets/base.css b/playground/typescript/src/assets/base.css new file mode 100644 index 00000000..e81bad15 --- /dev/null +++ b/playground/typescript/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/playground/typescript/src/assets/logo.svg b/playground/typescript/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/playground/typescript/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/playground/typescript/src/components/ColorSchemeSwitch.vue b/playground/typescript/src/components/ColorSchemeSwitch.vue new file mode 100644 index 00000000..a5188c22 --- /dev/null +++ b/playground/typescript/src/components/ColorSchemeSwitch.vue @@ -0,0 +1,137 @@ + + + + + diff --git a/playground/typescript/src/components/HelloWorld.vue b/playground/typescript/src/components/HelloWorld.vue index 97b3d3da..8a759066 100644 --- a/playground/typescript/src/components/HelloWorld.vue +++ b/playground/typescript/src/components/HelloWorld.vue @@ -1,54 +1,41 @@ - - + + diff --git a/playground/typescript/src/components/IntroductionItem.vue b/playground/typescript/src/components/IntroductionItem.vue new file mode 100644 index 00000000..58965058 --- /dev/null +++ b/playground/typescript/src/components/IntroductionItem.vue @@ -0,0 +1,85 @@ + + + diff --git a/playground/typescript/src/components/icons/Community.vue b/playground/typescript/src/components/icons/Community.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/playground/typescript/src/components/icons/Community.vue @@ -0,0 +1,7 @@ + diff --git a/playground/typescript/src/components/icons/Documentation.vue b/playground/typescript/src/components/icons/Documentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/playground/typescript/src/components/icons/Documentation.vue @@ -0,0 +1,7 @@ + diff --git a/playground/typescript/src/components/icons/Ecosystem.vue b/playground/typescript/src/components/icons/Ecosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/playground/typescript/src/components/icons/Ecosystem.vue @@ -0,0 +1,7 @@ + diff --git a/playground/typescript/src/components/icons/Moon.vue b/playground/typescript/src/components/icons/Moon.vue new file mode 100644 index 00000000..8e02b917 --- /dev/null +++ b/playground/typescript/src/components/icons/Moon.vue @@ -0,0 +1,18 @@ + + + diff --git a/playground/typescript/src/components/icons/Sun.vue b/playground/typescript/src/components/icons/Sun.vue new file mode 100644 index 00000000..577f8031 --- /dev/null +++ b/playground/typescript/src/components/icons/Sun.vue @@ -0,0 +1,34 @@ + + + diff --git a/playground/typescript/src/components/icons/Support.vue b/playground/typescript/src/components/icons/Support.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/playground/typescript/src/components/icons/Support.vue @@ -0,0 +1,7 @@ + diff --git a/playground/typescript/src/components/icons/Tooling.vue b/playground/typescript/src/components/icons/Tooling.vue new file mode 100644 index 00000000..660598d7 --- /dev/null +++ b/playground/typescript/src/components/icons/Tooling.vue @@ -0,0 +1,19 @@ + + diff --git a/playground/typescript/src/composables/useColorScheme.ts b/playground/typescript/src/composables/useColorScheme.ts new file mode 100644 index 00000000..6bc17800 --- /dev/null +++ b/playground/typescript/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/playground/typescript/src/composables/useMediaQuery.ts b/playground/typescript/src/composables/useMediaQuery.ts new file mode 100644 index 00000000..559b4644 --- /dev/null +++ b/playground/typescript/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/playground/typescript/tsconfig.json b/playground/typescript/tsconfig.json index 6f98acfa..d02eb051 100644 --- a/playground/typescript/tsconfig.json +++ b/playground/typescript/tsconfig.json @@ -16,6 +16,5 @@ "lib": ["esnext", "dom", "dom.iterable", "scripthost"], "skipLibCheck": true }, - "include": ["vite.config.*", "vite-env.d.ts", "src/**/*", "src/**/*.vue"], - "exclude": ["src/**/__tests__/**"] + "include": ["vite.config.*", "vite-env.d.ts", "src/**/*", "src/**/*.vue"] } diff --git a/playground/vuex-with-tests/cypress/integration/example.spec.js b/playground/vuex-with-tests/cypress/integration/example.spec.js index 493bfcf0..7a8c909f 100644 --- a/playground/vuex-with-tests/cypress/integration/example.spec.js +++ b/playground/vuex-with-tests/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/playground/vuex-with-tests/jsconfig.json b/playground/vuex-with-tests/jsconfig.json index 6f98acfa..d02eb051 100644 --- a/playground/vuex-with-tests/jsconfig.json +++ b/playground/vuex-with-tests/jsconfig.json @@ -16,6 +16,5 @@ "lib": ["esnext", "dom", "dom.iterable", "scripthost"], "skipLibCheck": true }, - "include": ["vite.config.*", "vite-env.d.ts", "src/**/*", "src/**/*.vue"], - "exclude": ["src/**/__tests__/**"] + "include": ["vite.config.*", "vite-env.d.ts", "src/**/*", "src/**/*.vue"] } diff --git a/playground/vuex-with-tests/package.json b/playground/vuex-with-tests/package.json index bfbf38f2..600fac3e 100644 --- a/playground/vuex-with-tests/package.json +++ b/playground/vuex-with-tests/package.json @@ -16,12 +16,12 @@ "vuex": "^4.0.2" }, "devDependencies": { - "@cypress/vite-dev-server": "^2.0.7", - "@cypress/vue": "^3.0.3", "@vitejs/plugin-vue": "^1.4.0", "@vue/compiler-sfc": "^3.2.2", + "vite": "^2.5.0", + "@cypress/vite-dev-server": "^2.0.7", + "@cypress/vue": "^3.0.3", "cypress": "^8.2.0", - "start-server-and-test": "^1.13.1", - "vite": "^2.5.0" + "start-server-and-test": "^1.13.1" } } diff --git a/playground/vuex-with-tests/src/App.vue b/playground/vuex-with-tests/src/App.vue index a058d171..64c42595 100644 --- a/playground/vuex-with-tests/src/App.vue +++ b/playground/vuex-with-tests/src/App.vue @@ -1,22 +1,187 @@ - - + + diff --git a/playground/vuex-with-tests/src/assets/base.css b/playground/vuex-with-tests/src/assets/base.css new file mode 100644 index 00000000..e81bad15 --- /dev/null +++ b/playground/vuex-with-tests/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/playground/vuex-with-tests/src/assets/logo.svg b/playground/vuex-with-tests/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/playground/vuex-with-tests/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/playground/vuex-with-tests/src/components/ColorSchemeSwitch.vue b/playground/vuex-with-tests/src/components/ColorSchemeSwitch.vue new file mode 100644 index 00000000..a4007efe --- /dev/null +++ b/playground/vuex-with-tests/src/components/ColorSchemeSwitch.vue @@ -0,0 +1,137 @@ + + + + + diff --git a/playground/vuex-with-tests/src/components/HelloWorld.vue b/playground/vuex-with-tests/src/components/HelloWorld.vue index 51f81a8f..26672db0 100644 --- a/playground/vuex-with-tests/src/components/HelloWorld.vue +++ b/playground/vuex-with-tests/src/components/HelloWorld.vue @@ -1,57 +1,44 @@ - - + + diff --git a/playground/vuex-with-tests/src/components/IntroductionItem.vue b/playground/vuex-with-tests/src/components/IntroductionItem.vue new file mode 100644 index 00000000..58965058 --- /dev/null +++ b/playground/vuex-with-tests/src/components/IntroductionItem.vue @@ -0,0 +1,85 @@ + + + diff --git a/playground/vuex-with-tests/src/components/__tests__/ColorSchemeSwitch.spec.js b/playground/vuex-with-tests/src/components/__tests__/ColorSchemeSwitch.spec.js new file mode 100644 index 00000000..3842adf2 --- /dev/null +++ b/playground/vuex-with-tests/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/playground/vuex-with-tests/src/components/__tests__/HelloWorld.spec.js b/playground/vuex-with-tests/src/components/__tests__/HelloWorld.spec.js index 087c9561..a69f3a9d 100644 --- a/playground/vuex-with-tests/src/components/__tests__/HelloWorld.spec.js +++ b/playground/vuex-with-tests/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/playground/vuex-with-tests/src/components/icons/Community.vue b/playground/vuex-with-tests/src/components/icons/Community.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/playground/vuex-with-tests/src/components/icons/Community.vue @@ -0,0 +1,7 @@ + diff --git a/playground/vuex-with-tests/src/components/icons/Documentation.vue b/playground/vuex-with-tests/src/components/icons/Documentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/playground/vuex-with-tests/src/components/icons/Documentation.vue @@ -0,0 +1,7 @@ + diff --git a/playground/vuex-with-tests/src/components/icons/Ecosystem.vue b/playground/vuex-with-tests/src/components/icons/Ecosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/playground/vuex-with-tests/src/components/icons/Ecosystem.vue @@ -0,0 +1,7 @@ + diff --git a/playground/vuex-with-tests/src/components/icons/Moon.vue b/playground/vuex-with-tests/src/components/icons/Moon.vue new file mode 100644 index 00000000..8e02b917 --- /dev/null +++ b/playground/vuex-with-tests/src/components/icons/Moon.vue @@ -0,0 +1,18 @@ + + + diff --git a/playground/vuex-with-tests/src/components/icons/Sun.vue b/playground/vuex-with-tests/src/components/icons/Sun.vue new file mode 100644 index 00000000..577f8031 --- /dev/null +++ b/playground/vuex-with-tests/src/components/icons/Sun.vue @@ -0,0 +1,34 @@ + + + diff --git a/playground/vuex-with-tests/src/components/icons/Support.vue b/playground/vuex-with-tests/src/components/icons/Support.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/playground/vuex-with-tests/src/components/icons/Support.vue @@ -0,0 +1,7 @@ + diff --git a/playground/vuex-with-tests/src/components/icons/Tooling.vue b/playground/vuex-with-tests/src/components/icons/Tooling.vue new file mode 100644 index 00000000..660598d7 --- /dev/null +++ b/playground/vuex-with-tests/src/components/icons/Tooling.vue @@ -0,0 +1,19 @@ + + diff --git a/playground/vuex-with-tests/src/composables/__tests__/useMediaQuery.spec.js b/playground/vuex-with-tests/src/composables/__tests__/useMediaQuery.spec.js new file mode 100644 index 00000000..a7a5d024 --- /dev/null +++ b/playground/vuex-with-tests/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/playground/vuex-with-tests/src/composables/useColorScheme.js b/playground/vuex-with-tests/src/composables/useColorScheme.js new file mode 100644 index 00000000..be111aff --- /dev/null +++ b/playground/vuex-with-tests/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/playground/vuex-with-tests/src/composables/useMediaQuery.js b/playground/vuex-with-tests/src/composables/useMediaQuery.js new file mode 100644 index 00000000..bf288056 --- /dev/null +++ b/playground/vuex-with-tests/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/playground/vuex/jsconfig.json b/playground/vuex/jsconfig.json index 6f98acfa..d02eb051 100644 --- a/playground/vuex/jsconfig.json +++ b/playground/vuex/jsconfig.json @@ -16,6 +16,5 @@ "lib": ["esnext", "dom", "dom.iterable", "scripthost"], "skipLibCheck": true }, - "include": ["vite.config.*", "vite-env.d.ts", "src/**/*", "src/**/*.vue"], - "exclude": ["src/**/__tests__/**"] + "include": ["vite.config.*", "vite-env.d.ts", "src/**/*", "src/**/*.vue"] } diff --git a/playground/vuex/src/App.vue b/playground/vuex/src/App.vue index a058d171..64c42595 100644 --- a/playground/vuex/src/App.vue +++ b/playground/vuex/src/App.vue @@ -1,22 +1,187 @@ - - + + diff --git a/playground/vuex/src/assets/base.css b/playground/vuex/src/assets/base.css new file mode 100644 index 00000000..e81bad15 --- /dev/null +++ b/playground/vuex/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/playground/vuex/src/assets/logo.svg b/playground/vuex/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/playground/vuex/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/playground/vuex/src/components/ColorSchemeSwitch.vue b/playground/vuex/src/components/ColorSchemeSwitch.vue new file mode 100644 index 00000000..a4007efe --- /dev/null +++ b/playground/vuex/src/components/ColorSchemeSwitch.vue @@ -0,0 +1,137 @@ + + + + + diff --git a/playground/vuex/src/components/HelloWorld.vue b/playground/vuex/src/components/HelloWorld.vue index 51f81a8f..26672db0 100644 --- a/playground/vuex/src/components/HelloWorld.vue +++ b/playground/vuex/src/components/HelloWorld.vue @@ -1,57 +1,44 @@ - - + + diff --git a/playground/vuex/src/components/IntroductionItem.vue b/playground/vuex/src/components/IntroductionItem.vue new file mode 100644 index 00000000..58965058 --- /dev/null +++ b/playground/vuex/src/components/IntroductionItem.vue @@ -0,0 +1,85 @@ + + + diff --git a/playground/vuex/src/components/icons/Community.vue b/playground/vuex/src/components/icons/Community.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/playground/vuex/src/components/icons/Community.vue @@ -0,0 +1,7 @@ + diff --git a/playground/vuex/src/components/icons/Documentation.vue b/playground/vuex/src/components/icons/Documentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/playground/vuex/src/components/icons/Documentation.vue @@ -0,0 +1,7 @@ + diff --git a/playground/vuex/src/components/icons/Ecosystem.vue b/playground/vuex/src/components/icons/Ecosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/playground/vuex/src/components/icons/Ecosystem.vue @@ -0,0 +1,7 @@ + diff --git a/playground/vuex/src/components/icons/Moon.vue b/playground/vuex/src/components/icons/Moon.vue new file mode 100644 index 00000000..8e02b917 --- /dev/null +++ b/playground/vuex/src/components/icons/Moon.vue @@ -0,0 +1,18 @@ + + + diff --git a/playground/vuex/src/components/icons/Sun.vue b/playground/vuex/src/components/icons/Sun.vue new file mode 100644 index 00000000..577f8031 --- /dev/null +++ b/playground/vuex/src/components/icons/Sun.vue @@ -0,0 +1,34 @@ + + + diff --git a/playground/vuex/src/components/icons/Support.vue b/playground/vuex/src/components/icons/Support.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/playground/vuex/src/components/icons/Support.vue @@ -0,0 +1,7 @@ + diff --git a/playground/vuex/src/components/icons/Tooling.vue b/playground/vuex/src/components/icons/Tooling.vue new file mode 100644 index 00000000..660598d7 --- /dev/null +++ b/playground/vuex/src/components/icons/Tooling.vue @@ -0,0 +1,19 @@ + + diff --git a/playground/vuex/src/composables/useColorScheme.js b/playground/vuex/src/composables/useColorScheme.js new file mode 100644 index 00000000..be111aff --- /dev/null +++ b/playground/vuex/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/playground/vuex/src/composables/useMediaQuery.js b/playground/vuex/src/composables/useMediaQuery.js new file mode 100644 index 00000000..bf288056 --- /dev/null +++ b/playground/vuex/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/playground/with-tests/cypress/integration/example.spec.js b/playground/with-tests/cypress/integration/example.spec.js index 493bfcf0..7a8c909f 100644 --- a/playground/with-tests/cypress/integration/example.spec.js +++ b/playground/with-tests/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/playground/with-tests/jsconfig.json b/playground/with-tests/jsconfig.json index 6f98acfa..d02eb051 100644 --- a/playground/with-tests/jsconfig.json +++ b/playground/with-tests/jsconfig.json @@ -16,6 +16,5 @@ "lib": ["esnext", "dom", "dom.iterable", "scripthost"], "skipLibCheck": true }, - "include": ["vite.config.*", "vite-env.d.ts", "src/**/*", "src/**/*.vue"], - "exclude": ["src/**/__tests__/**"] + "include": ["vite.config.*", "vite-env.d.ts", "src/**/*", "src/**/*.vue"] } diff --git a/playground/with-tests/package.json b/playground/with-tests/package.json index f3d717b3..0f23b81c 100644 --- a/playground/with-tests/package.json +++ b/playground/with-tests/package.json @@ -15,12 +15,12 @@ "vue": "^3.2.2" }, "devDependencies": { - "@cypress/vite-dev-server": "^2.0.7", - "@cypress/vue": "^3.0.3", "@vitejs/plugin-vue": "^1.4.0", "@vue/compiler-sfc": "^3.2.2", + "vite": "^2.5.0", + "@cypress/vite-dev-server": "^2.0.7", + "@cypress/vue": "^3.0.3", "cypress": "^8.2.0", - "start-server-and-test": "^1.13.1", - "vite": "^2.5.0" + "start-server-and-test": "^1.13.1" } } diff --git a/playground/with-tests/src/App.vue b/playground/with-tests/src/App.vue index a058d171..64c42595 100644 --- a/playground/with-tests/src/App.vue +++ b/playground/with-tests/src/App.vue @@ -1,22 +1,187 @@ - - + + diff --git a/playground/with-tests/src/assets/base.css b/playground/with-tests/src/assets/base.css new file mode 100644 index 00000000..e81bad15 --- /dev/null +++ b/playground/with-tests/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/playground/with-tests/src/assets/logo.svg b/playground/with-tests/src/assets/logo.svg new file mode 100644 index 00000000..bc826fed --- /dev/null +++ b/playground/with-tests/src/assets/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/playground/with-tests/src/components/ColorSchemeSwitch.vue b/playground/with-tests/src/components/ColorSchemeSwitch.vue new file mode 100644 index 00000000..a4007efe --- /dev/null +++ b/playground/with-tests/src/components/ColorSchemeSwitch.vue @@ -0,0 +1,137 @@ + + + + + diff --git a/playground/with-tests/src/components/HelloWorld.vue b/playground/with-tests/src/components/HelloWorld.vue index 51f81a8f..26672db0 100644 --- a/playground/with-tests/src/components/HelloWorld.vue +++ b/playground/with-tests/src/components/HelloWorld.vue @@ -1,57 +1,44 @@ - - + + diff --git a/playground/with-tests/src/components/IntroductionItem.vue b/playground/with-tests/src/components/IntroductionItem.vue new file mode 100644 index 00000000..58965058 --- /dev/null +++ b/playground/with-tests/src/components/IntroductionItem.vue @@ -0,0 +1,85 @@ + + + diff --git a/playground/with-tests/src/components/__tests__/ColorSchemeSwitch.spec.js b/playground/with-tests/src/components/__tests__/ColorSchemeSwitch.spec.js new file mode 100644 index 00000000..3842adf2 --- /dev/null +++ b/playground/with-tests/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/playground/with-tests/src/components/__tests__/HelloWorld.spec.js b/playground/with-tests/src/components/__tests__/HelloWorld.spec.js index 087c9561..a69f3a9d 100644 --- a/playground/with-tests/src/components/__tests__/HelloWorld.spec.js +++ b/playground/with-tests/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/playground/with-tests/src/components/icons/Community.vue b/playground/with-tests/src/components/icons/Community.vue new file mode 100644 index 00000000..2dc8b055 --- /dev/null +++ b/playground/with-tests/src/components/icons/Community.vue @@ -0,0 +1,7 @@ + diff --git a/playground/with-tests/src/components/icons/Documentation.vue b/playground/with-tests/src/components/icons/Documentation.vue new file mode 100644 index 00000000..6d4791cf --- /dev/null +++ b/playground/with-tests/src/components/icons/Documentation.vue @@ -0,0 +1,7 @@ + diff --git a/playground/with-tests/src/components/icons/Ecosystem.vue b/playground/with-tests/src/components/icons/Ecosystem.vue new file mode 100644 index 00000000..c3a4f078 --- /dev/null +++ b/playground/with-tests/src/components/icons/Ecosystem.vue @@ -0,0 +1,7 @@ + diff --git a/playground/with-tests/src/components/icons/Moon.vue b/playground/with-tests/src/components/icons/Moon.vue new file mode 100644 index 00000000..8e02b917 --- /dev/null +++ b/playground/with-tests/src/components/icons/Moon.vue @@ -0,0 +1,18 @@ + + + diff --git a/playground/with-tests/src/components/icons/Sun.vue b/playground/with-tests/src/components/icons/Sun.vue new file mode 100644 index 00000000..577f8031 --- /dev/null +++ b/playground/with-tests/src/components/icons/Sun.vue @@ -0,0 +1,34 @@ + + + diff --git a/playground/with-tests/src/components/icons/Support.vue b/playground/with-tests/src/components/icons/Support.vue new file mode 100644 index 00000000..7452834d --- /dev/null +++ b/playground/with-tests/src/components/icons/Support.vue @@ -0,0 +1,7 @@ + diff --git a/playground/with-tests/src/components/icons/Tooling.vue b/playground/with-tests/src/components/icons/Tooling.vue new file mode 100644 index 00000000..660598d7 --- /dev/null +++ b/playground/with-tests/src/components/icons/Tooling.vue @@ -0,0 +1,19 @@ + + diff --git a/playground/with-tests/src/composables/__tests__/useMediaQuery.spec.js b/playground/with-tests/src/composables/__tests__/useMediaQuery.spec.js new file mode 100644 index 00000000..a7a5d024 --- /dev/null +++ b/playground/with-tests/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/playground/with-tests/src/composables/useColorScheme.js b/playground/with-tests/src/composables/useColorScheme.js new file mode 100644 index 00000000..be111aff --- /dev/null +++ b/playground/with-tests/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/playground/with-tests/src/composables/useMediaQuery.js b/playground/with-tests/src/composables/useMediaQuery.js new file mode 100644 index 00000000..bf288056 --- /dev/null +++ b/playground/with-tests/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 +}