Skip to content

Commit 40702ec

Browse files
crashmax-devcrashmax-dev
authored
Merge pull request #9 from crashmax-dev/feat/weird-bugs
feat: weird bugs
2 parents 97c4245 + 7b5ffff commit 40702ec

16 files changed

Lines changed: 1915 additions & 891 deletions

‎apps/weird-bugs/auto-imports.d.ts‎

Lines changed: 615 additions & 0 deletions
Large diffs are not rendered by default.

‎apps/weird-bugs/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>weird-bugs</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.ts"></script>
12+
</body>
13+
</html>

‎apps/weird-bugs/package.json‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "weird-bugs",
3+
"type": "module",
4+
"version": "0.0.0",
5+
"private": true,
6+
"scripts": {
7+
"_dev": "vite --host",
8+
"_build": "vue-tsc -b && vite build",
9+
"_preview": "vite preview"
10+
},
11+
"dependencies": {
12+
"@vueuse/core": "14.0.0",
13+
"pinia": "3.0.4",
14+
"vue": "3.5.25"
15+
},
16+
"devDependencies": {
17+
"@types/node": "^24.10.1",
18+
"@vitejs/plugin-vue": "6.0.2",
19+
"@vue/tsconfig": "0.8.1",
20+
"typescript": "5.9.3",
21+
"unplugin-auto-import": "19.1.1",
22+
"vite": "7.2.4",
23+
"vue-tsc": "3.1.5"
24+
}
25+
}

‎apps/weird-bugs/public/vite.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎apps/weird-bugs/src/App.vue‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<script setup lang="ts">
2+
import HelloWorld from './components/hello-world.vue'
3+
</script>
4+
5+
<template>
6+
<div>
7+
<a href="https://vite.dev" target="_blank">
8+
<img src="/vite.svg" class="logo" alt="Vite logo">
9+
</a>
10+
<a href="https://vuejs.org/" target="_blank">
11+
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo">
12+
</a>
13+
</div>
14+
<HelloWorld msg="Vite + Vue" />
15+
</template>
16+
17+
<style scoped>
18+
.logo {
19+
height: 6em;
20+
padding: 1.5em;
21+
will-change: filter;
22+
transition: filter 300ms;
23+
}
24+
.logo:hover {
25+
filter: drop-shadow(0 0 2em #646cffaa);
26+
}
27+
.logo.vue:hover {
28+
filter: drop-shadow(0 0 2em #42b883aa);
29+
}
30+
</style>

‎apps/weird-bugs/src/assets/vue.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎apps/weird-bugs/src/components/hello-world.vue‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<script setup lang="ts">
2+
import InputProvide from './input-provide.vue'
3+
4+
defineProps<{
5+
msg: string
6+
}>()
7+
8+
const text = ref('')
9+
const count = ref(0)
10+
</script>
11+
12+
<template>
13+
<h1>{{ msg }}</h1>
14+
15+
<div class="card">
16+
<InputProvide
17+
v-model="text"
18+
:provide="console.log"
19+
/>
20+
21+
<button
22+
type="button"
23+
@click="count++"
24+
>
25+
count is {{ count }}
26+
</button>
27+
<p>
28+
Edit
29+
<code>components/HelloWorld.vue</code> to test HMR
30+
</p>
31+
</div>
32+
33+
<p>
34+
Check out
35+
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank">create-vue</a>, the official Vue + Vite starter
36+
</p>
37+
<p>
38+
Learn more about IDE Support for Vue in the
39+
<a
40+
href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
41+
target="_blank"
42+
>Vue Docs Scaling up Guide</a>.
43+
</p>
44+
<p class="read-the-docs">
45+
Click on the Vite and Vue logos to learn more
46+
</p>
47+
</template>
48+
49+
<style scoped>
50+
.read-the-docs {
51+
color: #888;
52+
}
53+
</style>

‎apps/weird-bugs/src/components/input-provide.vue‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<template>
2+
<input
3+
v-model="value"
4+
placeholder="Type text..."
5+
:readonly="readonly"
6+
@update:model-value="provide?.(value, prevValue)"
7+
>
8+
</template>
9+
10+
<script setup lang="ts" generic="T extends any">
11+
// Fixed https://github.com/vuejs/language-tools/pull/5790
12+
13+
type ProvideFn<T> = (value: T, prevValue?: T) => void
14+
15+
defineProps<{
16+
readonly?: boolean
17+
provide?: ProvideFn<T>
18+
}>()
19+
20+
const value = defineModel<T>({ required: true })
21+
const prevValue = usePrevious(value)
22+
</script>

‎apps/weird-bugs/src/main.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { createApp } from 'vue'
2+
import App from './app.vue'
3+
4+
import './style.css'
5+
6+
createApp(App).mount('#app')

‎apps/weird-bugs/src/style.css‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
:root {
2+
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
3+
line-height: 1.5;
4+
font-weight: 400;
5+
6+
color-scheme: light dark;
7+
color: rgba(255, 255, 255, 0.87);
8+
background-color: #242424;
9+
10+
font-synthesis: none;
11+
text-rendering: optimizeLegibility;
12+
-webkit-font-smoothing: antialiased;
13+
-moz-osx-font-smoothing: grayscale;
14+
}
15+
16+
a {
17+
font-weight: 500;
18+
color: #646cff;
19+
text-decoration: inherit;
20+
}
21+
a:hover {
22+
color: #535bf2;
23+
}
24+
25+
body {
26+
margin: 0;
27+
display: flex;
28+
place-items: center;
29+
min-width: 320px;
30+
min-height: 100vh;
31+
}
32+
33+
h1 {
34+
font-size: 3.2em;
35+
line-height: 1.1;
36+
}
37+
38+
input, button {
39+
border-radius: 8px;
40+
border: 1px solid transparent;
41+
padding: 0.6em 1.2em;
42+
font-size: 1em;
43+
font-weight: 500;
44+
font-family: inherit;
45+
background-color: #1a1a1a;
46+
cursor: pointer;
47+
transition: border-color 0.25s;
48+
}
49+
button:hover {
50+
border-color: #646cff;
51+
}
52+
button:focus,
53+
button:focus-visible {
54+
outline: 4px auto -webkit-focus-ring-color;
55+
}
56+
57+
.card {
58+
padding: 2em;
59+
}
60+
61+
#app {
62+
max-width: 1280px;
63+
margin: 0 auto;
64+
padding: 2rem;
65+
text-align: center;
66+
}
67+
68+
@media (prefers-color-scheme: light) {
69+
:root {
70+
color: #213547;
71+
background-color: #ffffff;
72+
}
73+
a:hover {
74+
color: #747bff;
75+
}
76+
button {
77+
background-color: #f9f9f9;
78+
}
79+
}

0 commit comments

Comments
 (0)