Skip to content

Commit 2ca8109

Browse files
budiadionobudiadiono
committed
refactor + change demo site. close #20 
1 parent 366248f commit 2ca8109

File tree

294 files changed

+2632
-3312
lines changed

Some content is hidden

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

294 files changed

+2632
-3312
lines changed

‎.gitignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,5 @@ bower_components/
33
npm-debug.log
44
demo/dist/bundle.*
55
.vscode/
6-
debug.log
6+
debug.log
7+
npm-debug.log.*

‎README.md‎

Lines changed: 140 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,153 @@
1-
# VueTypedUI
1+
# [VueTypedUI](https://vue-typed.github.io/vue-typed-ui)
22

3-
> UI components made with [Semantic UI](http://semantic-ui.com/), [VueTyped](https://vue-typed.github.io/vue-typed) and [friends](#credits)
3+
> Is sets of UI components made with [Semantic UI](http://semantic-ui.com/), [VueTyped](https://vue-typed.github.io/vue-typed) and friends
44
5+
### Install
56

6-
## Install
7-
8-
```
9-
npm install vue-typed-ui
7+
```bash
8+
npm install vue-typed-ui --save-dev
109
```
1110

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-
11+
### Usage
12+
```typescript
13+
import * as Vue from 'vue'
14+
import * as VueTypedUI from 'VueTypedUI'
15+
Vue.use(VueTypedUI /* optional */ ,{
16+
prefix: 'ui',
17+
settings: { /* see options/settings section bellow */ }
18+
})
2219
```
23-
import * as VueTypedUI from 'vue-typed-ui';
2420

25-
Vue.use(VueTypedUI)
21+
### Options
22+
23+
#### prefix
24+
25+
Components tag prefix. Default is 'ui'
26+
27+
#### settings
28+
29+
Some components may have some individual settings
30+
31+
<table>
32+
<thead>
33+
<tr>
34+
<th>Name</th>
35+
<th>Default</th>
36+
<th>Description</th>
37+
</tr>
38+
</thead>
39+
<tbody>
40+
<tr>
41+
<td colspan="3"><strong>Date / Time</strong></td>
42+
</tr>
43+
<tr>
44+
<td>dateFormat</td>
45+
<td>'MM/DD/YYYY'</td>
46+
<td>Date / DateTime format. You can change this format by follow <a href="https://momentjs.com/">momentjs</a> formats.</td>
47+
</tr>
48+
<tr>
49+
<td>timeFormat</td>
50+
<td>'HH:mm'</td>
51+
<td>Time format. You can change this format by follow <a href="https://momentjs.com/">momentjs</a> formats.</td>
52+
</tr>
53+
<tr>
54+
<td colspan="3"><strong>Numeric</strong></td>
55+
</tr>
56+
<tr>
57+
<td>decimalPlaces</td>
58+
<td>2</td>
59+
<td>Decimal places</td>
60+
</tr>
61+
<tr>
62+
<td>decimalSeparator</td>
63+
<td>'.'</td>
64+
<td>Decimal separator</td>
65+
</tr>
66+
<tr>
67+
<td>groupSeparator</td>
68+
<td>','</td>
69+
<td>Group separator</td>
70+
</tr>
71+
<tr>
72+
<td>max</td>
73+
<td>9999999999999.99</td>
74+
<td>Maximum number that component can handle</td>
75+
</tr>
76+
<tr>
77+
<td>min</td>
78+
<td>-9999999999999.99</td>
79+
<td>Minimum number that component can handle</td>
80+
</tr>
81+
<tr>
82+
<td colspan="3"><strong>Currency</strong></td>
83+
</tr>
84+
<tr>
85+
<td>sign</td>
86+
<td>'USD'</td>
87+
<td>Currency sign</td>
88+
</tr>
89+
<tr>
90+
<td>signPos</td>
91+
<td>'right'</td>
92+
<td>Currency symbol position</td>
93+
</tr>
94+
<tr>
95+
<td colspan="3"><strong>Toastr</strong></td>
96+
</tr>
97+
<tr>
98+
<td>toastr</td>
99+
<td>Official toastr default settings</td>
100+
<td>Settings for toastr component to get more detail see: <a href="http://codeseven.github.io/toastr/">http://codeseven.github.io/toastr/</a></td>
101+
</tr>
102+
</tbody>
103+
</table>
104+
105+
106+
### Requirements
107+
108+
* [JQuery](https://github.com/jquery/jquery)
109+
* [Semantic UI](https://github.com/Semantic-Org/Semantic-UI)
110+
* [Semantic UI Calendar](https://github.com/mdehoog/Semantic-UI-Calendar)
111+
112+
These requirements must be referenced in your main HTML file. For example:
113+
114+
```html
115+
<!DOCTYPE html>
116+
<html lang="en">
117+
118+
<head>
119+
<meta charset="utf-8">
120+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
121+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
122+
<title>Awesome App</title>
123+
<!-- requirement css-->
124+
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.css" rel="stylesheet" type="text/css">
125+
<link href="https://cdn.rawgit.com/mdehoog/Semantic-UI-Calendar/master/dist/calendar.min.css" rel="stylesheet" type="text/css">
126+
</head>
127+
128+
<body>
129+
<!-- main app here-->
130+
<div id="app"></div>
131+
<!-- requirement scripts-->
132+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
133+
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.js"></script>
134+
<script src="https://cdn.rawgit.com/mdehoog/Semantic-UI-Calendar/master/dist/calendar.min.js"></script>
135+
</body>
136+
137+
</html>
26138
```
27139

140+
### Credits
28141

29-
## Demo
30-
31-
Quick dirty demo in [here](https://vue-typed.github.io/vue-typed-ui).
32-
33-
34-
## Credits
35-
36-
* [JQuery](https://github.com/jquery/jquery)
37-
* [Lodash](https://lodash.com/)
38-
* [Moment.js](http://momentjs.com/)
39-
* [Semantic UI](https://github.com/Semantic-Org/Semantic-UI)
40-
* [Semantic UI Calendar](https://github.com/mdehoog/Semantic-UI-Calendar)
41-
* [SweetAlert](http://t4t5.github.io/sweetalert/)
42-
* [Toastr](http://codeseven.github.io/toastr/)
43-
142+
* [autoNumeric](https://github.com/BobKnothe/autoNumeric)
143+
* [JQuery](https://github.com/jquery/jquery)
144+
* [Lodash](https://lodash.com/)
145+
* [Moment.js](http://momentjs.com/)
146+
* [Semantic UI](https://github.com/Semantic-Org/Semantic-UI)
147+
* [Semantic UI Calendar](https://github.com/mdehoog/Semantic-UI-Calendar)
148+
* [SweetAlert](http://t4t5.github.io/sweetalert/)
149+
* [Toastr](http://codeseven.github.io/toastr/)
44150

45-
## License
151+
### <a id="License_44"></a>License
46152

47153
MIT

‎demo/dist/android-chrome-512x512.png‎ renamed to ‎demo/assets/favicon.png‎

File renamed without changes.

‎demo/dist/assets/logo-80.png‎ renamed to ‎demo/assets/logo-80.png‎

File renamed without changes.

‎demo/dist/assets/logo-full.png‎ renamed to ‎demo/assets/logo-full.png‎

File renamed without changes.

‎demo/assets/logo-home.png‎

6.69 KB
Loading

‎demo/dist/assets/logo.png‎ renamed to ‎demo/assets/logo.png‎

File renamed without changes.

‎demo/dev-client.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/* eslint-disable */
2+
require('eventsource-polyfill')
3+
var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
4+
5+
hotClient.subscribe(function(event) {
6+
if (event.action === 'reload') {
7+
window.location.reload()
8+
}
9+
})

‎demo/dev-server.js‎

Lines changed: 64 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,70 @@
1-
var WebpackDevServer = require('webpack-dev-server')
1+
var path = require('path')
2+
var express = require('express')
23
var webpack = require('webpack')
3-
var config = require('./webpack.config.js')
4+
var opn = require('opn')
5+
var proxyMiddleware = require('http-proxy-middleware')
6+
var webpackConfig = require('./webpack.dev.config')
47

5-
config.entry.bundle.unshift("webpack-dev-server/client?http://localhost:8080/", "webpack/hot/dev-server")
6-
config.plugins = [
7-
new webpack.HotModuleReplacementPlugin({
8-
multiStep: true
8+
// default port where dev server listens for incoming traffic
9+
var port = 8080
10+
// Define HTTP proxies to your custom API backend
11+
// https://github.com/chimurai/http-proxy-middleware
12+
var proxyTable = {}
13+
var app = express()
14+
var compiler = webpack(webpackConfig)
15+
var devMiddleware = require('webpack-dev-middleware')(compiler, {
16+
// publicPath: webpackConfig.output.path,
17+
// quiet: true
18+
})
19+
20+
var hotMiddleware = require('webpack-hot-middleware')(compiler, {
21+
log: () => {}
922
})
10-
]
11-
var compiler = webpack(config)
12-
13-
var server = new WebpackDevServer(compiler, {
14-
contentBase: './demo/dist',
15-
// filename: 'bundle.js',
16-
hot: true,
17-
// inline: true,
18-
publicPath: '/',
19-
stats: {
20-
// colors: true,
21-
// hash: false,
22-
// version: false,
23-
// timings: false,
24-
// assets: false,
25-
chunks: false,
26-
// modules: false,
27-
// reasons: false,
28-
// children: false,
29-
// source: false,
30-
// errors: false,
31-
// errorDetails: false,
32-
// warnings: false,
33-
// publicPath: false
23+
// force page reload when html-webpack-plugin template changes
24+
compiler.plugin('compilation', function(compilation) {
25+
compilation.plugin('html-webpack-plugin-after-emit', function(data, cb) {
26+
hotMiddleware.publish({ action: 'reload' })
27+
cb()
28+
})
29+
})
30+
31+
// proxy api requests
32+
Object.keys(proxyTable).forEach(function(context) {
33+
var options = proxyTable[context]
34+
if (typeof options === 'string') {
35+
options = { target: options }
3436
}
37+
app.use(proxyMiddleware(context, options))
3538
})
3639

37-
server.listen(8080, 'localhost', function () {})
40+
// handle fallback for HTML5 history API
41+
app.use(require('connect-history-api-fallback')())
42+
43+
// serve webpack bundle output
44+
app.use(devMiddleware)
45+
46+
// enable hot-reload and state-preserving
47+
// compilation error display
48+
app.use(hotMiddleware)
49+
50+
// serve pure static assets
51+
// var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
52+
// app.use(staticPath, express.static('./static'))
53+
54+
var uri = 'http://localhost:' + port
55+
56+
devMiddleware.waitUntilValid(function() {
57+
console.log('> Listening at ' + uri + '\n')
58+
})
59+
60+
module.exports = app.listen(port, function(err) {
61+
if (err) {
62+
console.log(err)
63+
return
64+
}
65+
66+
// when env is testing, don't need open it
67+
if (process.env.NODE_ENV !== 'testing') {
68+
opn(uri)
69+
}
70+
})

‎demo/dist/android-chrome-192x192.png‎

-3.33 KB
Binary file not shown.

0 commit comments

Comments
 (0)