Skip to content

Commit 994e1bd

Browse files
budiadionobudiadiono
committed
initial commit
0 parents  commit 994e1bd

File tree

191 files changed

+24600
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

191 files changed

+24600
-0
lines changed

‎.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules/
2+
bower_components/
3+
npm-debug.log
4+
demo/dist/bundle.*
5+
.vscode/

‎README.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
# VueTypedUI
2+
3+
> UI components made with [Semantic UI](http://semantic-ui.com/), [VueTyped](https://vue-typed.github.io/vue-typed) and friends
4+
5+
6+
## Install
7+
8+
```
9+
npm install vue-typed-ui
10+
```
11+
12+
13+
## Requirements
14+
15+
* [JQuery](https://github.com/jquery/jquery)
16+
* [Semantic UI](https://github.com/Semantic-Org/Semantic-UI)
17+
* [Semantic UI Calendar](https://github.com/mdehoog/Semantic-UI-Calendar)
18+
19+
20+
## Usage
21+
22+
```
23+
import * as VueTypedUI from 'vue-typed-ui';
24+
25+
Vue.use(VueTypedUI)
26+
```
27+
28+
29+
## License
30+
31+
MIT

‎demo/dist/lib/script.js‎

Whitespace-only changes.

‎demo/dist/lib/style.css‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
/*#app {
2+
margin-top: 0px;
3+
}
4+
5+
#article {
6+
padding: 25px;
7+
}*/
8+
9+
.main.container {
10+
margin-top: 50px;
11+
}
12+
13+
.demo-area .example {
14+
15+
}
16+
17+
.demo-area .source-code {
18+
margin-top: 50px
19+
}
20+
21+
.demo-area .source-code pre, .demo-area .source-code code {
22+
background-color: white;
23+
}
24+
25+
.clearfix:after {
26+
content: " ";
27+
display: block;
28+
height: 0;
29+
clear: both;
30+
}

‎demo/index.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>VueTypedUI - Demo</title>
6+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.css" />
7+
<link href="https://cdn.rawgit.com/mdehoog/Semantic-UI-Calendar/master/dist/calendar.min.css" rel="stylesheet" type="text/css">
8+
<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/styles/github.min.css" type="text/css" rel="stylesheet">
9+
<link href="dist/lib/style.css" rel="stylesheet" type="text/css">
10+
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
11+
</head>
12+
<body>
13+
<div id="app"></div>
14+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
15+
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.js"></script>
16+
<script src="https://cdn.rawgit.com/mdehoog/Semantic-UI-Calendar/master/dist/calendar.min.js"></script>
17+
<script src="dist/bundle.js"></script>
18+
<script src="dist/lib/script.js"></script>
19+
</body>
20+
</html>

‎demo/src/api/index.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<div>
2+
<div class="ui blue dividing header">
3+
<h2>{{api_name}} API</h2>
4+
</div>
5+
6+
<h4>Tag</h4> {{api_tag}}
7+
8+
<div v-if="api_props.length">
9+
<p></p>
10+
<ui-h4>Props</ui-h4>
11+
<table class="ui very basic striped table">
12+
<thead>
13+
<tr>
14+
<th class="three wide">Name</th>
15+
<th class="three wide">Type</th>
16+
<th class="two wide">Default</th>
17+
<th class="eight wide">Description</th>
18+
</tr>
19+
</thead>
20+
<tr v-for="p in api_props">
21+
<td>{{p.name}}</td>
22+
<td>{{p.type}}</td>
23+
<td>{{p.default}}</td>
24+
<td>{{p.description}}</td>
25+
</tr>
26+
</table>
27+
</div>
28+
29+
<div v-if="api_methods.length">
30+
<p></p>
31+
<ui-h4>Methods</ui-h4>
32+
<table class="ui very basic striped table">
33+
<thead>
34+
<tr>
35+
<th class="three wide">Name</th>
36+
<th class="three wide">Returns</th>
37+
<th class="three wide">Params</th>
38+
<th class="seven wide">Description</th>
39+
</tr>
40+
</thead>
41+
<tr v-for="p in api_methods">
42+
<td>{{p.name}}</td>
43+
<td>{{p.type}}</td>
44+
<td>
45+
<div class="ui list">
46+
<div class="item" v-for="prm in p.params">
47+
<div class="content">
48+
<div class="header">{{prm.name}}: {{prm.type}}</div>
49+
<div class="description">{{prm.description}}</div>
50+
</div>
51+
</div>
52+
</div>
53+
</td>
54+
<td>{{p.description}}</td>
55+
</tr>
56+
</table>
57+
</div>
58+
</div>

‎demo/src/api/index.ts‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { Component, Watch } from 'vue-typed';
2+
import * as Vue from 'vue'
3+
import * as _ from 'lodash'
4+
import { VueTypedUI } from '../../../src/index';
5+
6+
var api = require('../../../doc/api.json')
7+
8+
@Component({
9+
template: require('./index.html')
10+
})
11+
export class ApiPage extends Vue {
12+
13+
api_methods = {}
14+
api_props = {}
15+
api_name = ''
16+
api_tag = ''
17+
18+
@Watch('$route.params.component')
19+
onChange(p) {
20+
this.showApi(p)
21+
}
22+
23+
mounted() {
24+
this.showApi(this.$route.params['component'])
25+
}
26+
27+
showApi(component) {
28+
this.api_name = _.upperFirst(_.camelCase(component))
29+
this.api_tag = '<' + VueTypedUI.prefix + '-' + component + '>'
30+
this.api_props = _.map(api[component].props, function (v, k) {
31+
v['name'] = k
32+
return v;
33+
})
34+
this.api_methods = _.map(api[component].methods, function (v, k) {
35+
36+
let name = k + '('
37+
if (v['params']) {
38+
name += _.keys(v['params']).join(', ')
39+
40+
_.each(v['params'], function(vp, vk){
41+
vp['name'] = vk
42+
})
43+
}
44+
45+
name += ')'
46+
v['name'] = name
47+
return v;
48+
})
49+
}
50+
}

‎demo/src/demo/base.ts‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { Component } from 'vue-typed';
2+
import * as Vue from 'vue'
3+
import { sources } from './routes';
4+
var prettyHtml = require('pretty');
5+
var prettyTs = require('js-beautify').js_beautify;
6+
var demoAreaTemplate: string = require('./layout.html');
7+
8+
9+
10+
11+
12+
/**
13+
* Demo Page Base Class
14+
*
15+
* @export
16+
* @abstract
17+
* @class Demo
18+
* @extends {Vue}
19+
*/
20+
@Component()
21+
export abstract class Base extends Vue {
22+
23+
beforeCreate() {
24+
if (!sources) return;
25+
26+
var html = this.$options.template;
27+
var src = sources[this.$route.path];
28+
29+
this['title'] = src.title;
30+
this['html'] = prettyHtml(src.html)
31+
this['ts'] = src.source.replace(/\t/g, ' ')
32+
33+
this.$options.template = demoAreaTemplate.replace('<example/>', html);
34+
}
35+
}

‎demo/src/demo/button/index.html‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<div>
2+
<h4>Click event</h4>
3+
<ui-button v-on:click="updateStatus('Default button clicked')">Default</ui-button>
4+
<p>{{status}}</p>
5+
6+
<h4>Icons</h4>
7+
<ui-button icon="cloud">Button with icon</ui-button>
8+
<ui-button icon="cloud" icon-pos="right">Button with icon</ui-button>
9+
10+
<h4>Animations</h4>
11+
<ui-button>Hello
12+
<div slot="hidden">There!</div>
13+
</ui-button>
14+
<ui-button animation="fade">Hello
15+
<div slot="hidden">There!</div>
16+
</ui-button>
17+
18+
<h4>Enable/disable</h4>
19+
<ui-button :disabled="disabled" v-on:click="setDisable">Click to disable</ui-button>
20+
<ui-checkbox v-model="disabled">Uncheck to enable</ui-checkbox>
21+
22+
<h4>Sizes</h4>
23+
<ui-button size="mini">Mini</ui-button>
24+
<ui-button size="tiny">Tiny</ui-button>
25+
<ui-button size="small">Small</ui-button>
26+
<ui-button size="medium">Medium</ui-button>
27+
<ui-button size="large">Large</ui-button>
28+
<ui-button size="big">Big</ui-button>
29+
<ui-button size="huge">Huge</ui-button>
30+
<ui-button size="massive">Massive</ui-button>
31+
32+
<h4>Float</h4>
33+
<div class="clearfix">
34+
<ui-button float="left">Left</ui-button>
35+
<ui-button float="right">Right</ui-button>
36+
</div>
37+
38+
<h4>Color</h4>
39+
<ui-button color="red">Red</ui-button>
40+
<ui-button color="orange">Orange</ui-button>
41+
<ui-button color="yellow">Yellow</ui-button>
42+
<ui-button color="olive">Olive</ui-button>
43+
<ui-button color="green">Green</ui-button>
44+
<ui-button color="teal">Teal</ui-button>
45+
<ui-button color="blue">Blue</ui-button>
46+
<ui-button color="violet">Violet</ui-button>
47+
<ui-button color="purple">Purple</ui-button>
48+
<ui-button color="pink">Pink</ui-button>
49+
<ui-button color="brown">Brown</ui-button>
50+
<ui-button color="grey">Grey</ui-button>
51+
<ui-button color="black">Black</ui-button>
52+
53+
<h4>Loading</h4>
54+
<ui-button id="btn-loading" @click="loading">Click me</ui-button>
55+
</div>

‎demo/src/demo/button/index.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { Component, Prop } from 'vue-typed';
2+
import { Base } from '../base'
3+
import * as Vue from 'vue'
4+
5+
@Component({
6+
template: require('./index.html')
7+
})
8+
export class Button extends Base {
9+
10+
status: string = 'Click some buttons!'
11+
counter: number = 0;
12+
disabled: boolean = true
13+
14+
setDisable() {
15+
alert('I disable my self')
16+
this.disabled = true
17+
}
18+
19+
updateStatus(status) {
20+
this.counter++;
21+
this.status = status + ' ' + this.counter + ' times';
22+
}
23+
24+
loading() {
25+
this.$ui.button('#btn-loading').loading(true)
26+
setTimeout(() => {
27+
this.$ui.button('#btn-loading').loading(false)
28+
}, 1500);
29+
}
30+
31+
}

0 commit comments

Comments
 (0)