Skip to content
This repository was archived by the owner on Jun 27, 2023. It is now read-only.

Commit 0cea0ca

Browse files
alvarosabualvarosabu
authored
Merge pull request #232 from asigloo/feature/221-add-important-links-to-demo-header
feat(demos): added links to header and restyle home cards
2 parents 196c7d3 + 641ef82 commit 0cea0ca

File tree

6 files changed

+118
-12
lines changed

6 files changed

+118
-12
lines changed

‎README.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<a href="https://bundlephobia.com/result?p=@asigloo/vue-dynamic-forms">
1111
<img src="https://flat.badgen.net/bundlephobia/min/@asigloo/vue-dynamic-forms" alt="Minified size">
1212
</a>
13-
13+
1414
<a href="https://vuejs.org">
1515
<img src="https://flat.badgen.net/badge/vue.js/3.x.x/4fc08d?icon=github" alt="Vue.js version">
1616
</a>
@@ -35,9 +35,9 @@ This is the Vue `3.x.x` compatible version. Out of the box `Typescript` support,
3535

3636
Complete documentation and examples available at
3737

38-
- **[Documentation](https://vue-dynamic-forms.netlify.app)**
39-
- **[Demos](#demos)** or if you prefer online [here](https://vue-dynamic-forms.netlify.app/)
40-
- **[Migration Guide](https://vue-dynamic-forms-docs.netlify.app/v3/guide/migration-guide.html)**
38+
- **[Documentation](https://vue-dynamic-forms.alvarosaburido.dev/)**
39+
- **[Demos](#demos)** or if you prefer online [here](https://vue-dynamic-forms-demos.alvarosaburido.dev/)
40+
- **[Migration Guide](https://vue-dynamic-forms.alvarosaburido.dev/v3/guide/migration-guide.html)**
4141

4242
## Installation
4343

‎demos/vue-3/public/assets/docs.svg

+6
Loading

‎demos/vue-3/public/assets/github.svg

+3
Loading

‎demos/vue-3/src/components/Icon.vue

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<template>
2+
<svg
3+
width="24"
4+
height="24"
5+
viewBox="0 0 24 24"
6+
fill="none"
7+
xmlns="http://www.w3.org/2000/svg"
8+
v-if="name === 'github'"
9+
>
10+
<path
11+
d="M12 2C10.6868 2 9.38642 2.25866 8.17317 2.7612C6.95991 3.26375 5.85752 4.00035 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 16.42 4.87 20.17 8.84 21.5C9.34 21.58 9.5 21.27 9.5 21V19.31C6.73 19.91 6.14 17.97 6.14 17.97C5.68 16.81 5.03 16.5 5.03 16.5C4.12 15.88 5.1 15.9 5.1 15.9C6.1 15.97 6.63 16.93 6.63 16.93C7.5 18.45 8.97 18 9.54 17.76C9.63 17.11 9.89 16.67 10.17 16.42C7.95 16.17 5.62 15.31 5.62 11.5C5.62 10.39 6 9.5 6.65 8.79C6.55 8.54 6.2 7.5 6.75 6.15C6.75 6.15 7.59 5.88 9.5 7.17C10.29 6.95 11.15 6.84 12 6.84C12.85 6.84 13.71 6.95 14.5 7.17C16.41 5.88 17.25 6.15 17.25 6.15C17.8 7.5 17.45 8.54 17.35 8.79C18 9.5 18.38 10.39 18.38 11.5C18.38 15.32 16.04 16.16 13.81 16.41C14.17 16.72 14.5 17.33 14.5 18.26V21C14.5 21.27 14.66 21.59 15.17 21.5C19.14 20.16 22 16.42 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2Z"
12+
fill="currentColor"
13+
/>
14+
</svg>
15+
<svg
16+
width="24"
17+
height="24"
18+
viewBox="0 0 24 24"
19+
fill="none"
20+
xmlns="http://www.w3.org/2000/svg"
21+
v-if="name === 'docs'"
22+
>
23+
<path
24+
d="M4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8.342C20 8.07556 19.9467 7.81181 19.8433 7.56624C19.7399 7.32068 19.5885 7.09824 19.398 6.912L14.958 2.57C14.5844 2.20466 14.0826 2.00007 13.56 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V4Z"
25+
stroke="currentColor"
26+
stroke-width="2"
27+
stroke-linecap="round"
28+
stroke-linejoin="round"
29+
/>
30+
<path
31+
d="M9 13H15"
32+
stroke="currentColor"
33+
stroke-width="2"
34+
stroke-linecap="round"
35+
stroke-linejoin="round"
36+
/>
37+
<path
38+
d="M9 17H12"
39+
stroke="currentColor"
40+
stroke-width="2"
41+
stroke-linecap="round"
42+
stroke-linejoin="round"
43+
/>
44+
<path
45+
d="M14 2V6C14 6.53043 14.2107 7.03914 14.5858 7.41421C14.9609 7.78929 15.4696 8 16 8H20"
46+
stroke="currentColor"
47+
stroke-width="2"
48+
stroke-linejoin="round"
49+
/>
50+
</svg>
51+
</template>
52+
53+
<script lang="ts">
54+
import { defineComponent } from 'vue';
55+
56+
const props = {
57+
name: String,
58+
};
59+
export default defineComponent({
60+
name: 'icon',
61+
props,
62+
});
63+
</script>
64+
65+
<style></style>

‎demos/vue-3/src/components/Toolbar.vue

+39-7
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,55 @@
11
<template>
2-
<header class="toolbar flex px-8 py-4 border-b border-gray-100">
3-
<img src="../assets/logo.svg" class="logo mr-8" />
4-
<h1 class="text-bg text-xl font-bold font-display text-gray-700">
5-
{{ title }}
6-
</h1>
2+
<header
3+
class="toolbar flex justify-between px-8 py-4 border-b border-gray-100"
4+
>
5+
<div class="left-nav flex align-center">
6+
<img src="../assets/logo.svg" class="logo mr-8" />
7+
<h1 class="text-bg text-xl font-bold font-display text-gray-700">
8+
{{ title }}
9+
</h1>
10+
</div>
11+
<div class="right-nav">
12+
<ul class="flex align-center">
13+
<li v-for="nav in navs" :key="nav.name" class="ml-4">
14+
<a :href="nav.href" class="hover:text-green-400 transition-colors">
15+
<Icon :name="nav.icon" :alt="nav.name" />
16+
</a>
17+
</li>
18+
</ul>
19+
</div>
720
</header>
821
</template>
922

1023
<script lang="ts">
11-
import { computed, defineComponent } from 'vue';
24+
import { computed, defineComponent, ref } from 'vue';
25+
import Icon from './Icon.vue';
1226
import { useRoute } from 'vue-router';
1327
28+
const components = {
29+
Icon,
30+
};
31+
1432
export default defineComponent({
1533
name: 'toolbar',
34+
components,
1635
setup() {
1736
const route = useRoute();
1837
const title = computed(() => route.meta.title || 'Vue Dynamic Forms');
1938
20-
return { title };
39+
const navs = ref([
40+
{
41+
icon: 'github',
42+
name: 'Repo',
43+
href: 'https://github.com/asigloo/vue-dynamic-forms',
44+
},
45+
{
46+
icon: 'docs',
47+
name: 'Docs',
48+
href: 'https://vue-dynamic-forms.alvarosaburido.dev/',
49+
},
50+
]);
51+
52+
return { title, navs };
2153
},
2254
});
2355
</script>

‎demos/vue-3/src/views/Home.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<li class="p-4 w-full sm:w-1/2" v-for="demo in demos" :key="demo.name">
1313
<router-link
1414
:to="demo.route"
15-
class="p-4 block rounded-md bg-gray-200 text-gray-400 hover:bg-gray-300 hover:text-gray-500 transition-colors"
15+
class="p-4 block rounded-md border border-gray-200 hover:border-green-400 transition-colors"
1616
><p>{{ demo.name }}</p>
1717
<ul class="flex flex-wrap mt-4" v-if="demo.tags?.length > 0">
1818
<li v-for="tag in demo.tags" :key="tag">

0 commit comments

Comments
 (0)