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

Commit db8441e

Browse files
nainemomclarkdo
nainemom
and
clarkdo
committed
feat: add UI framework Framevuerk (#291)
Co-authored-by: Xin Du (Clark) <clark.duxin@gmail.com>
1 parent f735b63 commit db8441e

File tree

11 files changed

+449
-0
lines changed

11 files changed

+449
-0
lines changed

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ yarn create nuxt-app <my-project>
4949
- [Axios](https://github.com/nuxt-community/axios-module)
5050
3. Choose your favorite UI framework:
5151
- None (feel free to add one later)
52+
- [Framevuerk](https://framevuerk.com)
5253
- [Bootstrap](https://github.com/bootstrap-vue/bootstrap-vue)
5354
- [Vuetify](https://github.com/vuetifyjs/vuetify)
5455
- [Bulma](https://github.com/jgthms/bulma)

‎saofile.js

+1
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ module.exports = {
4747
{ name: 'Buefy', value: 'buefy' },
4848
{ name: 'Bulma', value: 'bulma' },
4949
{ name: 'Element', value: 'element-ui' },
50+
{ name: 'Framevuerk', value: 'framevuerk' },
5051
{ name: 'iView', value: 'iview' },
5152
{ name: 'Tachyons', value: 'tachyons' },
5253
{ name: 'Tailwind CSS', value: 'tailwind' },

‎template/_package.json

+8
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@
55
"author": "<%= author %>",
66
"private": true,
77
"scripts": {
8+
<%_ if (ui === 'framevuerk') { _%>
9+
"build:framevuerk": "framevuerk-builder -c ./framevuerk-config.js",
10+
"prepublish": "npm run build:framevuerk",
11+
<%_ } _%>
812
<%_ if (eslint) { _%>
913
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
1014
<%_ } _%>
@@ -83,6 +87,8 @@
8387
"nuxt-buefy": "^0.3.2",
8488
<%_ } else if (ui === 'iview') { _%>
8589
"iview": "^3.1.5",
90+
<%_ } else if (ui === 'framevuerk') { _%>
91+
"framevuerk": "^2.2.5",
8692
<%_ } _%>
8793
<%_ if (axios) { _%>
8894
"@nuxtjs/axios": "^5.3.6",
@@ -104,6 +110,8 @@
104110
"@nuxtjs/tailwindcss": "^1.0.0",
105111
<%_ } else if (ui === 'vuetify') { _%>
106112
"@nuxtjs/vuetify": "^1.0.0",
113+
<%_ } else if (ui === 'framevuerk') { _%>
114+
"framevuerk-builder": "^2.0.2",
107115
<%_ } _%>
108116
<%_ if (eslint) { _%>
109117
"@nuxtjs/eslint-config": "^1.0.1",

‎template/frameworks/framevuerk/components/FramevuerkLogo.vue

+75
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<template>
2+
<div class="logo" :class="{ready: isReady }">
3+
<svg
4+
id="Layer_2"
5+
version="1.1"
6+
xmlns="http://www.w3.org/2000/svg"
7+
xmlns:xlink="http://www.w3.org/1999/xlink"
8+
x="0px"
9+
y="0px"
10+
width="534px"
11+
height="420px"
12+
viewBox="0 0 534 420"
13+
enable-background="new 0 0 534 420"
14+
xml:space="preserve"
15+
>
16+
<path
17+
fill="#35495E"
18+
d="M320.296,71.189c0,0-16.014-0.447-22.081,3.909c0,0,6.068-14.188,20.215-25.191
19+
c2.799-2.177-19.282-19.904-49.138-19.904c-31.1,0-51.937,17.727-49.138,19.904c14.147,11.003,20.215,25.191,20.215,25.191
20+
c-6.067-4.356-22.081-3.909-22.081-3.909c1.801,9.907-13.913,46.987-13.913,46.987l64.917,101.488l64.917-101.488
21+
C334.209,118.176,318.494,81.096,320.296,71.189z M269.292,128.67c-3.732-16.092-14.928-36.155-14.928-41.288
22+
c0-5.133,9.796-21.458,14.928-21.458c3.732,0,14.928,16.326,14.928,21.458C284.22,92.514,273.024,112.578,269.292,128.67z"
23+
/>
24+
<polygon fill="#41B883" points="416.507,44 269.292,266.825 122.077,44 10.029,14 269.292,400.888 528.555,14 " />
25+
</svg>
26+
</div>
27+
</template>
28+
29+
<script>
30+
export default {
31+
data () {
32+
return {
33+
isReady: false
34+
}
35+
},
36+
mounted () {
37+
setTimeout(() => {
38+
this.isReady = true
39+
}, 1000)
40+
}
41+
}
42+
</script>
43+
44+
<style scoped>
45+
.logo {
46+
height: auto;
47+
display: inline-block;
48+
vertical-align: middle;
49+
width: 43px;
50+
}
51+
.logo svg {
52+
width: 100%;
53+
height: auto;
54+
max-height: 12em;
55+
margin: 0 auto;
56+
}
57+
.logo svg polygon {
58+
transform: translateY(-100%);
59+
transition-duration: 2s;
60+
}
61+
.logo svg path {
62+
fill: transparent;
63+
transition-delay: 0.6s;
64+
transition-duration: 1s;
65+
}
66+
.logo.ready svg polygon {
67+
transform: translateY(0);
68+
fill: #fff;
69+
}
70+
.logo.ready svg path {
71+
stroke: transparent;
72+
stroke-width: 0;
73+
fill: #fff;
74+
}
75+
</style>

‎template/frameworks/framevuerk/framevuerk-config.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
module.exports = {
2+
'config-name': 'nuxt',
3+
'direction': 'ltr', // or rtl
4+
'primary-color': '#41b883',
5+
'secondary-color': '#35495e',
6+
'danger-color': '#BF2B2B',
7+
'warning-color': '#BB8A2A',
8+
'info-color': '#22A4C1',
9+
'bg-color': '#333',
10+
'header-bg-color': '#292929',
11+
'sidebar-bg-color': '#313131',
12+
'footer-bg-color': '#16212D',
13+
'padding': '0.8em',
14+
'transition-speed': '0.3s',
15+
'border-radius': '0',
16+
'shadow-size': '0'
17+
}

‎template/frameworks/framevuerk/layouts/default.vue

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<template>
2+
<nuxt />
3+
</template>
4+
5+
<style>
6+
html {
7+
font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
8+
Roboto, 'Helvetica Neue', Arial, sans-serif;
9+
font-size: 15px;
10+
word-spacing: 1px;
11+
-ms-text-size-adjust: 100%;
12+
-webkit-text-size-adjust: 100%;
13+
-moz-osx-font-smoothing: grayscale;
14+
-webkit-font-smoothing: antialiased;
15+
box-sizing: border-box;
16+
}
17+
*,
18+
*:before,
19+
*:after {
20+
box-sizing: border-box;
21+
margin: 0;
22+
}
23+
html,
24+
body,
25+
#__nuxt,
26+
#__layout {
27+
min-height: 100%;
28+
height: 100%;
29+
position: initial;
30+
}
31+
body .material-icons {
32+
vertical-align: middle;
33+
}
34+
</style>

‎template/frameworks/framevuerk/pages/index.vue

+183
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
<template>
2+
<fvMain>
3+
<fvSidebar v-model="sidebar" class="sidebar">
4+
<div class="fv-text-center fv-padding">
5+
<fvAvatar name="Default User" src="https://randomuser.me/api/portraits/women/44.jpg" size="128px" />
6+
<h2 class="fv-padding-sm">
7+
Default User
8+
</h2>
9+
</div>
10+
<fvList parent>
11+
<fvListItem class="selected">
12+
<i class="material-icons">sentiment_very_satisfied</i> Welcome
13+
</fvListItem>
14+
<fvListItem disabled>
15+
<i class="material-icons">person</i> Profile
16+
</fvListItem>
17+
<fvListItem disabled>
18+
<i class="material-icons">mail</i> Messages
19+
</fvListItem>
20+
<fvListItem disabled>
21+
<i class="material-icons">event_available</i> Events
22+
</fvListItem>
23+
<fvListItem disabled>
24+
<i class="material-icons">photo</i> Pictures
25+
</fvListItem>
26+
</fvList>
27+
</fvSidebar>
28+
<fvContent>
29+
<fvHeader>
30+
<fvButton class="fv-margin-end fv-hidden-lg fv-hidden-xl" @click="toggleSidebar">
31+
<i class="material-icons">menu</i>
32+
</fvButton>
33+
<div class="fv-margin-end">
34+
<FramevuerkLogo />
35+
</div>
36+
<div class="fv-grow">
37+
<h2 class="fv-hidden-xs">
38+
Framevuerk
39+
</h2>
40+
<small class="fv-hidden-sm fv-hidden-xs"> Generated Nuxt + Framevuerk Template </small>
41+
</div>
42+
<fvButton class="fv-margin-end" @click.prevent="toggleDocsMenu">
43+
<i class="material-icons">list</i>
44+
<span class="fv-hidden-xs fv-hidden-sm"> Documents </span>
45+
<fvMenu v-model="docsMenu">
46+
<div>
47+
<div class="fv-border-bottom fv-padding">
48+
<label class="fv-text-light"> <i class="material-icons">list</i> Documents </label>
49+
</div>
50+
<div class="fv-padding">
51+
<a class="fv-link fv-block fv-margin-bottom" target="_blank" href="https://www.framevuerk.com/"><i class="material-icons">link</i> Framevuerk Docs</a>
52+
<a class="fv-link fv-block fv-margin-bottom" target="_blank" href="https://github.com/framevuerk/framevuerk"><i class="material-icons">link</i> Framevuerk on Github</a>
53+
<a class="fv-link fv-block fv-margin-bottom" target="_blank" href="https://nuxtjs.org/"><i class="material-icons">link</i> Nuxt Docs</a>
54+
<a class="fv-link fv-block" target="_blank" href="https://github.com/nuxt/nuxt.js"><i class="material-icons">link</i> Nuxt on GitHub</a>
55+
</div>
56+
</div>
57+
</fvMenu>
58+
</fvButton>
59+
<fvButton class="fv-margin-end">
60+
<i class="material-icons">clear</i>
61+
<span class="fv-hidden-xs fv-hidden-sm"> Cancel </span>
62+
</fvButton>
63+
<fvButton>
64+
<i class="material-icons">done</i>
65+
<span class="fv-hidden-xs fv-hidden-sm"> Submit </span>
66+
</fvButton>
67+
</fvHeader>
68+
<div class="content fv-padding">
69+
<div class="fv-margin-bottom fv-hidden-xs fv-hidden-sm" />
70+
<div class="content__header fv-margin-bottom fv-padding">
71+
<div class="fv-padding fv-margin-bottom fv-text-center">
72+
<Logo />
73+
</div>
74+
<p>
75+
<b>Framevuerk</b> is a Fast, Responsive, Without Dependencies, Both Direction Support and Configurable UI Framework based on <b>Vue.js</b>.
76+
In this template we just add it to <b>Nuxt.js</b> and put some of most usable component inside a form to show you how it's look like.
77+
</p>
78+
</div>
79+
<div class="content__body fv-border fv-radius fv-shadow">
80+
<label class="fv-control-label fv-padding"> <i class="material-icons">person_add</i> Create New User </label>
81+
<div class="fv-padding container">
82+
<fvForm class="fv-row">
83+
<fvFormElement class="fv-col-md-6" label="First Name">
84+
<fvInput v-model="exmps.firstName" placeholder="Enter First Name" />
85+
</fvFormElement>
86+
<fvFormElement class="fv-col-md-6" label="Last Name">
87+
<fvInput v-model="exmps.lastName" placeholder="Enter Last Name" />
88+
</fvFormElement>
89+
<fvFormElement class="fv-col-12" label="Gender" inline>
90+
<fvCheck v-model="exmps.gender" content="m">
91+
Men
92+
</fvCheck>
93+
<fvCheck v-model="exmps.gender" content="f">
94+
Women
95+
</fvCheck>
96+
<fvCheck v-model="exmps.gender" :content="null">
97+
Other
98+
</fvCheck>
99+
</fvFormElement>
100+
<fvFormElement class="fv-col-12" label="Home to Work Distance">
101+
<template slot="label" slot-scope="scope">
102+
{{ scope.label }}
103+
<span class="fv-margin-start-sm fv-text-primary">
104+
<span v-if="exmps.htw">~{{ exmps.htw }}km</span>
105+
</span>
106+
</template>
107+
<fvRange v-model="exmps.htw" :data="{from: 1, to: 35}" />
108+
</fvFormElement>
109+
<fvFormElement class="fv-col-sm-4" label="Is Maried?" inline>
110+
<fvSwitch v-model="exmps.married" @input="exmps.marriageDate = undefined" />
111+
</fvFormElement>
112+
<fvFormElement class="fv-col-sm-8" label="Date of Marriage">
113+
<fvDatepicker v-model="exmps.marriageDate" placeholder="Enter Date of Marriage" :disabled="!exmps.married" />
114+
</fvFormElement>
115+
<fvFormElement class="fv-col" label="Living Continent">
116+
<fvSelect
117+
v-model="exmps.continent"
118+
placeholder="Enter Living Continent"
119+
:options="['Africa','Antarctica','Asia','Europe','North America','Australia/Oceania','South America']"
120+
text-key=""
121+
value-key=""
122+
disabled-key=""
123+
/>
124+
</fvFormElement>
125+
<fvFormElement class="fv-col-12" label="Biography">
126+
<fvTextarea v-model="exmps.bio" placeholder="Enter Your Biography" auto-height />
127+
</fvFormElement>
128+
</fvForm>
129+
</div>
130+
</div>
131+
</div>
132+
</fvContent>
133+
</fvMain>
134+
</template>
135+
136+
<script>
137+
import Logo from '~/components/Logo.vue'
138+
import FramevuerkLogo from '~/components/FramevuerkLogo.vue'
139+
140+
export default {
141+
components: {
142+
Logo,
143+
FramevuerkLogo
144+
},
145+
data () {
146+
return {
147+
sidebar: false,
148+
docsMenu: false,
149+
slider: 'One',
150+
exmps: {
151+
htw: 13,
152+
firstName: undefined,
153+
lastName: undefined,
154+
gender: 'm',
155+
continent: undefined,
156+
married: undefined,
157+
marriageDate: undefined,
158+
bio: undefined
159+
}
160+
}
161+
},
162+
methods: {
163+
toggleSidebar () {
164+
this.sidebar = !this.sidebar
165+
},
166+
toggleDocsMenu () {
167+
setTimeout(() => {
168+
this.docsMenu = !this.docsMenu
169+
})
170+
}
171+
}
172+
}
173+
</script>
174+
175+
<style scoped>
176+
.content {
177+
margin: 0 auto;
178+
max-width: 768px;
179+
}
180+
.sidebar {
181+
min-width: 300px;
182+
}
183+
</style>

‎template/frameworks/framevuerk/plugins/framevuerk.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import Vue from 'vue'
2+
import Framevuerk from 'framevuerk/dist/framevuerk-nuxt.min.js'
3+
4+
export default () => {
5+
Vue.use(Framevuerk)
6+
}

‎template/nuxt/nuxt.config.js

+11
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,13 @@ module.exports = {
3636
],
3737
link: [
3838
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
39+
<%_ if (ui === 'framevuerk') { _%>,
40+
{
41+
rel: 'stylesheet',
42+
href:
43+
'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'
44+
}
45+
<%_ } _%>
3946
]
4047
},
4148
/*
@@ -54,6 +61,8 @@ module.exports = {
5461
'ant-design-vue/dist/antd.css'
5562
<%_ } else if (ui === 'tachyons') { _%>
5663
'tachyons/css/tachyons.css'
64+
<%_ } else if (ui === 'framevuerk') { _%>
65+
'framevuerk/dist/framevuerk-nuxt.min.css'
5766
<%_ } _%>
5867
],
5968
/*
@@ -66,6 +75,8 @@ module.exports = {
6675
'@/plugins/iview'
6776
<%_ } else if (ui === 'ant-design-vue') { _%>
6877
'@/plugins/antd-ui'
78+
<%_ } else if (ui === 'framevuerk') { _%>
79+
'@/plugins/framevuerk'
6980
<%_ } _%>
7081
],
7182
/*

0 commit comments

Comments
 (0)