Skip to content

Commit 9aafa3a

Browse files
MarkusJohansenMarkusJohansen
committed
add all elements html to svelte and vue apps
1 parent e35e2b6 commit 9aafa3a

File tree

9 files changed

+378
-10
lines changed

9 files changed

+378
-10
lines changed

‎apps/vue-demo/src/App.vue‎

Lines changed: 65 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,74 @@
11
<script setup lang="ts">
22
import { ref } from 'vue'
3+
import ThemeSelector from './components/ThemeSelector.vue'
4+
import TypographyDemo from './components/TypographyDemo.vue'
5+
import FormsDemo from './components/FormsDemo.vue'
6+
import CodeDemo from './components/CodeDemo.vue'
7+
import TablesDemo from './components/TablesDemo.vue'
8+
import TextFormattingDemo from './components/TextFormattingDemo.vue'
9+
import UnimplementedDemo from './components/UnimplementedDemo.vue'
310
4-
const count = ref(0)
11+
const showUnimplemented = ref(false)
512
</script>
613

714
<template>
8-
<div class="app">
9-
<h1>Vue Counter Demo</h1>
10-
<div class="card">
11-
<button @click="count++">
12-
Count is {{ count }}
13-
</button>
14-
</div>
15-
</div>
15+
<main>
16+
<a href="https://github.com/MarkusJohansen/ChimeraCSS/">
17+
<h1>ChimeraCSS</h1>
18+
</a>
19+
<hr />
20+
21+
<p>
22+
Welcome to the ChimeraCSS Vue demo! This demo showcases all the features
23+
and components available in ChimeraCSS. You can switch between different
24+
themes to see how they affect the styling of all elements.
25+
</p>
26+
27+
<blockquote>
28+
<p>
29+
<strong>NOTE:</strong> This is a Vue demo of ChimeraCSS. For full documentation,
30+
please visit the <a href="https://github.com/MarkusJohansen/ChimeraCSS/">Github repository</a>
31+
or the <a href="https://www.npmjs.com/package/chimeracss">NPM page</a>.
32+
</p>
33+
</blockquote>
34+
35+
<ThemeSelector />
36+
<TypographyDemo />
37+
<FormsDemo />
38+
<CodeDemo />
39+
<TablesDemo />
40+
<TextFormattingDemo />
41+
42+
<h1>Unimplemented Elements</h1>
43+
<p>
44+
There are some elements that are not implemented yet, but will be in the future.
45+
This section can be very useful for testing when contributing to chimera!
46+
</p>
47+
48+
<button @click="showUnimplemented = !showUnimplemented">
49+
Toggle unimplemented elements
50+
</button>
51+
52+
<UnimplementedDemo v-if="showUnimplemented" />
53+
54+
<button @click="window.scrollTo(0, 0)">
55+
Scroll to top
56+
</button>
57+
</main>
1658
</template>
1759

60+
<style>
61+
main {
62+
max-width: 50%;
63+
margin: auto;
64+
padding: 1em;
65+
}
66+
67+
@media screen and (max-width: 800px) {
68+
main {
69+
max-width: 90%;
70+
}
71+
}
72+
</style>
73+
1874

‎apps/vue-demo/src/components/CodeDemo.vue‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<template>
2+
<div>
3+
<h1>Code and formatted text</h1>
4+
<p>
5+
Below is some code, you can copy it with <kbd>Ctrl-C</kbd>.
6+
Did you know, <code>alert(1)</code> can show an alert in JavaScript!
7+
</p>
8+
<pre>
9+
<code>{{ codeExample }}</code>
10+
</pre>
11+
<hr />
12+
</div>
13+
</template>
14+
15+
<script setup lang="ts">
16+
const codeExample = `function changeStylesheet(cssFile) {
17+
document.getElementById("stylesheet").href = cssFile;
18+
}`
19+
</script>

‎apps/vue-demo/src/components/FormsDemo.vue‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<script setup lang="ts">
2+
function handleSubmit(event: Event) {
3+
event.preventDefault()
4+
}
5+
</script>
6+
7+
<template>
8+
<div>
9+
<h1>Forms</h1>
10+
<p>
11+
<em>Forms</em> is a really important aspect of HTML. We offer accessible yet good looking forms
12+
with support for <code>:focus</code> CSS-selectors which allows for great keyboard navigation.
13+
</p>
14+
15+
<form @submit.prevent="handleSubmit">
16+
<label for="name">Name:</label><br />
17+
<input type="text" id="name" name="name" /><br />
18+
19+
<label for="disabled-email">Disabled Email:</label><br />
20+
<input
21+
disabled
22+
type="email"
23+
id="disabled-email"
24+
name="disabled-email"
25+
value="example@example.com"
26+
/><br />
27+
28+
<label for="email">Email:</label><br />
29+
<input type="email" id="email" name="email" /><br />
30+
31+
<label for="phone">Enter your phone number:</label><br />
32+
<input type="tel" id="phone" name="phone" /><br />
33+
34+
<label for="password">Password:</label><br />
35+
<input type="password" id="password" name="password" /><br />
36+
37+
<label for="birthdate">Birthdate:</label><br />
38+
<input type="date" id="birthdate" name="birthdate" /><br />
39+
40+
<label for="website">Website:</label><br />
41+
<input type="url" id="website" name="website" /><br />
42+
43+
<label for="quantity">Quantity (between 1 and 5):</label><br />
44+
<input
45+
type="number"
46+
id="quantity"
47+
name="quantity"
48+
min="1"
49+
max="5"
50+
/><br />
51+
52+
<label for="bio">Bio:</label><br />
53+
<textarea id="bio" name="bio"></textarea><br />
54+
55+
<div>
56+
<input type="radio" id="male" name="gender" value="male" />
57+
<label for="male">Male</label><br />
58+
</div>
59+
60+
<div>
61+
<input type="radio" id="female" name="gender" value="female" />
62+
<label for="female">Female</label><br />
63+
</div>
64+
65+
<div>
66+
<input type="checkbox" id="terms" name="terms" value="agree" />
67+
<label for="terms">I agree to the terms and conditions</label><br />
68+
</div>
69+
70+
<input type="submit" value="Submit" />
71+
<input type="reset" value="Reset" />
72+
<button disabled>Disabled button</button>
73+
</form>
74+
<hr />
75+
</div>
76+
</template>

‎apps/vue-demo/src/components/TablesDemo.vue‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<template>
2+
<div>
3+
<h1>Tables</h1>
4+
<p>
5+
Tables are a great way to display data which is why chimera provides you with
6+
beautiful table styles. Below is an example of a table with some data.
7+
</p>
8+
<table>
9+
<thead>
10+
<tr>
11+
<th>Firstname</th>
12+
<th>Lastname</th>
13+
<th>Age</th>
14+
</tr>
15+
</thead>
16+
<tbody>
17+
<tr v-for="person in people" :key="person.firstname">
18+
<td>{{ person.firstname }}</td>
19+
<td>{{ person.lastname }}</td>
20+
<td>{{ person.age }}</td>
21+
</tr>
22+
</tbody>
23+
</table>
24+
<hr />
25+
</div>
26+
</template>
27+
28+
<script setup lang="ts">
29+
const people = [
30+
{ firstname: 'John', lastname: 'Doe', age: 30 },
31+
{ firstname: 'Jane', lastname: 'Doe', age: 25 },
32+
{ firstname: 'Johnny', lastname: 'Doe', age: 15 }
33+
]
34+
</script>

‎apps/vue-demo/src/components/TextFormattingDemo.vue‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<div>
3+
<h1>Inline formatted text</h1>
4+
<p>
5+
You can use many different elements to format your text.
6+
You can make your text <small>small</small> or you can make it <strong>strong</strong> or <b>bold</b>.
7+
You can also make it <em>emphasized</em>.
8+
You can also make it <del>deleted</del> or <s>striked</s>.
9+
You can also make it <ins>inserted</ins> or <sub>subscripted</sub> or <sup>superscripted</sup>.
10+
You can also make it <cite>cited</cite> or <q>quoted</q>.
11+
You can also make it <dfn>defined</dfn> as well as
12+
<i>italic</i>
13+
<u>underline</u>
14+
<mark>Highlighting</mark>
15+
<abbr title="abbreviation">abbr</abbr>
16+
</p>
17+
<address>addressed</address>
18+
<hr />
19+
</div>
20+
</template>

‎apps/vue-demo/src/components/ThemeSelector.vue‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<script setup lang="ts">
2+
import { ref, onMounted } from 'vue'
3+
4+
const THEMES = [
5+
{ name: 'No CSS', url: '' },
6+
{ name: 'Chimera', url: 'https://unpkg.com/chimeracss/build/chimera.css' },
7+
{ name: 'Chimera Dark', url: 'https://unpkg.com/chimeracss/build/chimera-dark.css' },
8+
{ name: 'Chimera Golden', url: 'https://unpkg.com/chimeracss/build/chimera-golden.css' },
9+
{ name: 'Chimera Autumn', url: 'https://unpkg.com/chimeracss/build/chimera-autumn.css' },
10+
{ name: 'Chimera Blues', url: 'https://unpkg.com/chimeracss/build/chimera-blues.css' },
11+
{ name: 'Chimera Plain', url: 'https://unpkg.com/chimeracss/build/chimera-plain.css' },
12+
{ name: 'Chimera Nightsky', url: 'https://unpkg.com/chimeracss/build/chimera-nightsky.css' }
13+
]
14+
15+
const currentTheme = ref(THEMES[1].url)
16+
17+
onMounted(() => {
18+
// Preload all theme stylesheets
19+
THEMES.forEach(theme => {
20+
if (theme.url) {
21+
const link = document.createElement('link')
22+
link.rel = 'preload'
23+
link.as = 'style'
24+
link.href = theme.url
25+
document.head.appendChild(link)
26+
}
27+
})
28+
29+
// Set initial theme
30+
const stylesheet = document.getElementById('stylesheet') as HTMLLinkElement
31+
if (stylesheet) {
32+
stylesheet.href = currentTheme.value
33+
}
34+
})
35+
36+
function changeTheme(themeUrl: string) {
37+
const stylesheet = document.getElementById('stylesheet') as HTMLLinkElement
38+
if (stylesheet) {
39+
stylesheet.href = themeUrl
40+
currentTheme.value = themeUrl
41+
}
42+
}
43+
</script>
44+
45+
<template>
46+
<div>
47+
<h2>Change Theme</h2>
48+
<p>
49+
Click on one of the links below to change the theme of this page.
50+
The only thing that will change is the stylesheet, so you can see how the different themes look.
51+
It is also possible to create your own theme, and use it on this page, or on your own website.
52+
<a href="https://github.com/MarkusJohansen/ChimeraCSS/blob/main/GUIDE.md">Here</a> is a guide on
53+
how chimera works as well as how to create your own themes.
54+
</p>
55+
<ul>
56+
<li v-for="theme in THEMES" :key="theme.name">
57+
<a
58+
href="#"
59+
@click.prevent="changeTheme(theme.url)"
60+
:style="{ fontWeight: theme.url === currentTheme ? 'bold' : 'normal' }"
61+
>
62+
{{ theme.name }}
63+
</a>
64+
</li>
65+
</ul>
66+
<hr />
67+
</div>
68+
</template>

‎apps/vue-demo/src/components/TypographyDemo.vue‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<template>
2+
<div>
3+
<h1>Typography</h1>
4+
<h1>h1 <small>small h1</small></h1>
5+
<h2>h2 <small>small h2</small></h2>
6+
<h3>h3 <small>small h3</small></h3>
7+
<h4>h4 <small>small h4</small></h4>
8+
<h5>h5 <small>small h5</small></h5>
9+
<h6>h6 <small>small h6</small></h6>
10+
<hr />
11+
</div>
12+
</template>

0 commit comments

Comments
 (0)