Skip to content
This repository was archived by the owner on Oct 7, 2025. It is now read-only.

Commit e449fd5

Browse files
junnersjunners
committed
feat: use vscode elements to do a little abstraction
1 parent e9faa08 commit e449fd5

File tree

6 files changed

+977
-25
lines changed

6 files changed

+977
-25
lines changed

‎beta-webview/App.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<script setup lang="ts">
22
import HelloWorld from './components/HelloWorld.vue'
3+
import FormDemo from './components/FormDemo.vue'
34
</script>
45

56
<template>
@@ -12,6 +13,7 @@ import HelloWorld from './components/HelloWorld.vue'
1213
</a>
1314
</div>
1415
<HelloWorld msg="Vite + Vue" />
16+
<FormDemo />
1517

1618
</template>
1719

‎beta-webview/components/FormDemo.vue‎

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
<script setup lang="ts">
2+
import { ref } from 'vue';
3+
4+
const name = ref<string>('')
5+
const email = ref('')
6+
const message = ref('');
7+
const fruit = ref('Banana');
8+
const color = ref('red');
9+
const topics = ref(['IT']);
10+
const terms = ref(true);
11+
const newsletter = ref(false);
12+
</script>
13+
14+
<template>
15+
<h1>Controlled components</h1>
16+
<div class="forms">
17+
<div class="vscode-form">
18+
<h2>A form created using VSCode Elements</h2>
19+
<form action="./">
20+
<vscode-form-group variant="vertical">
21+
<vscode-label for="name">Name</vscode-label>
22+
<vscode-textfield id="name" v-model="name" name="name"></vscode-textfield>
23+
</vscode-form-group>
24+
<vscode-form-group variant="vertical">
25+
<vscode-label for="email">E-mail</vscode-label>
26+
<vscode-textfield type="email" id="email" v-model="email" name="email"></vscode-textfield>
27+
</vscode-form-group>
28+
<vscode-form-group variant="vertical">
29+
<vscode-label for="fruit">Favorite fruit</vscode-label>
30+
<vscode-single-select v-model="fruit" id="fruit" name="fruit">
31+
<vscode-option>Apple</vscode-option>
32+
<vscode-option>Banana</vscode-option>
33+
<vscode-option>Cherry</vscode-option>
34+
</vscode-single-select>
35+
</vscode-form-group>
36+
<vscode-form-group variant="vertical">
37+
<vscode-label for="radio-1">Favorite color</vscode-label>
38+
<vscode-radio-group>
39+
<vscode-radio type="radio" name="color" v-model="color" value="red" id="radio-1">Red</vscode-radio>
40+
<vscode-radio type="radio" name="color" v-model="color" value="green">Green</vscode-radio>
41+
<vscode-radio type="radio" name="color" v-model="color" value="blue">Blue</vscode-radio>
42+
</vscode-radio-group>
43+
</vscode-form-group>
44+
<vscode-form-group variant="vertical">
45+
<vscode-label for="topics">Favorite topics</vscode-label>
46+
<vscode-multi-select v-model="topics" name="topics" id="topics">
47+
<vscode-option>IT</vscode-option>
48+
<vscode-option>Art</vscode-option>
49+
<vscode-option>Sport</vscode-option>
50+
<vscode-option>History</vscode-option>
51+
<vscode-option>Business</vscode-option>
52+
<vscode-option>Science</vscode-option>
53+
</vscode-multi-select>
54+
</vscode-form-group>
55+
<vscode-form-group>
56+
<vscode-checkbox type="checkbox" v-model="terms">Accept terms & conditions</vscode-checkbox>
57+
</vscode-form-group>
58+
<vscode-form-group>
59+
<vscode-checkbox type="checkbox" v-model="newsletter">Subscribe to newsletter</vscode-checkbox>
60+
</vscode-form-group>
61+
<vscode-form-group variant="vertical">
62+
<vscode-label for="textarea">Message</vscode-label>
63+
<vscode-textarea id="textarea" v-model="message"></vscode-textarea>
64+
</vscode-form-group>
65+
<vscode-form-group variant="vertical">
66+
<vscode-button type="submit">Submit</vscode-button>
67+
<vscode-button type="reset" secondary>Reset</vscode-button>
68+
</vscode-form-group>
69+
</form>
70+
</div>
71+
<div class="native-form">
72+
<h2>A native form</h2>
73+
<form action="./">
74+
<div>
75+
<label for="n-name">Name</label>
76+
<input type="text" id="n-name" v-model="name" name="name">
77+
</div>
78+
<div>
79+
<label for="n-email">E-mail</label>
80+
<input type="text" id="n-email" v-model="email" name="email">
81+
</div>
82+
<div>
83+
<label for="n-fruit">Favorite fruit</label>
84+
<select name="fruit" id="n-fruit" v-model="fruit">
85+
<option>Apple</option>
86+
<option>Banana</option>
87+
<option>Cherry</option>
88+
</select>
89+
</div>
90+
<div>
91+
<label>Favorite color</label>
92+
<div class="radio-group">
93+
<div>
94+
<input type="radio" name="color" v-model="color" value="red" id="n-radio-1">
95+
<label for="n-radio-1">Red</label>
96+
</div>
97+
<div>
98+
<input type="radio" name="color" v-model="color" value="green" id="n-radio-2">
99+
<label for="n-radio-2">Green</label>
100+
</div>
101+
<div>
102+
<input type="radio" name="color" v-model="color" value="blue" id="n-radio-3">
103+
<label for="n-radio-3">Blue</label>
104+
</div>
105+
</div>
106+
</div>
107+
<div>
108+
<label for="n-topics">Favorite topics</label>
109+
<select name="topics" id="n-topics" v-model="topics" multiple>
110+
<option>IT</option>
111+
<option>Art</option>
112+
<option>Sport</option>
113+
<option>History</option>
114+
<option>Business</option>
115+
<option>Science</option>
116+
</select>
117+
</div>
118+
<div>
119+
<input type="checkbox" v-model="terms" name="terms" id="n-terms">
120+
<label for="n-terms">Accept terms & conditions</label>
121+
</div>
122+
<div>
123+
<input type="checkbox" v-model="newsletter" name="newsletter" id="n-newsletter">
124+
<label for="n-newsletter">Subscribe to newsletter</label>
125+
</div>
126+
<div>
127+
<button type="submit">Submit</button>
128+
<button type="reset">Reset</button>
129+
</div>
130+
</form>
131+
</div>
132+
</div>
133+
<div>
134+
<p>Name: {{ name }}</p>
135+
<p>E-mail: {{ email }}</p>
136+
<p>Favorite fruit: {{ fruit }}</p>
137+
<p>Favorite color: {{ color }}</p>
138+
<p>Message: {{ message }}</p>
139+
<p>Favorite topics:</p>
140+
<ul>
141+
<li v-for="f in topics" :key="f">
142+
{{ f }}
143+
</li>
144+
</ul>
145+
<p>Terms & conditions: {{ terms }}</p>
146+
<p>Newsletter: {{ newsletter }}</p>
147+
</div>
148+
</template>
149+
150+
<style>
151+
h1 {
152+
margin-left: auto;
153+
margin-right: auto;
154+
max-width: 800px;
155+
}
156+
157+
.forms {
158+
display: flex;
159+
flex-wrap: wrap;
160+
justify-content: space-around;
161+
margin: 0 auto;
162+
max-width: 800px;
163+
}
164+
165+
form {
166+
border: 1px solid var(--vscode-widget-border);
167+
border-radius: 5px;
168+
padding: 20px;
169+
width: 320px;
170+
}
171+
172+
.native-form label {
173+
display: block;
174+
font-weight: 600;
175+
padding: 5px 0;
176+
}
177+
178+
.native-form input[type="radio"] + label,
179+
.native-form input[type="checkbox"] + label {
180+
display: inline-block;
181+
font-weight: normal;
182+
}
183+
</style>

‎beta-webview/main.ts‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,19 @@
1-
import { createApp } from 'vue';
21
import './style.css';
2+
import '@vscode-elements/elements/dist/vscode-button';
3+
import '@vscode-elements/elements/dist/vscode-checkbox';
4+
import '@vscode-elements/elements/dist/vscode-form-group';
5+
import '@vscode-elements/elements/dist/vscode-label';
6+
import '@vscode-elements/elements/dist/vscode-single-select';
7+
import '@vscode-elements/elements/dist/vscode-multi-select';
8+
import '@vscode-elements/elements/dist/vscode-option';
9+
import '@vscode-elements/elements/dist/vscode-radio';
10+
import '@vscode-elements/elements/dist/vscode-radio-group';
11+
import '@vscode-elements/elements/dist/vscode-textfield';
12+
import { createApp } from 'vue';
313
import App from './App.vue';
414

15+
if (import.meta.env.DEV) {
16+
await import('@vscode-elements/webview-playground');
17+
}
18+
519
createApp(App).mount('#app');

0 commit comments

Comments
 (0)