material 0.7.0 → 0.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/form.js +27 -0
- package/index.js +59 -58
- package/list.js +35 -0
- package/package.json +5 -1
- package/src/appbar.js +7 -204
- package/src/badge.js +27 -0
- package/src/button.js +155 -155
- package/src/calendar.js +0 -2
- package/src/card.js +0 -2
- package/src/checkbox.js +0 -2
- package/src/component.js +0 -2
- package/src/container.js +0 -2
- package/src/datehour.js +38 -0
- package/src/dialog.js +105 -152
- package/src/divider.js +0 -2
- package/src/drawer.js +0 -2
- package/src/{control/file.js → file.js} +15 -45
- package/src/form/verify.js +2 -2
- package/src/form.js +0 -2
- package/src/icon.js +0 -2
- package/src/image.js +39 -106
- package/src/item.js +0 -2
- package/src/{control/link.js → link.js} +13 -32
- package/src/list/build.js +2 -2
- package/src/list/collection.js +1 -1
- package/src/list/filter.js +2 -2
- package/src/list/request.js +1 -1
- package/src/list/search.js +5 -5
- package/src/list.js +29 -217
- package/src/loading.js +73 -0
- package/src/menu.js +60 -116
- package/src/mixin/display.js +0 -1
- package/src/mixin/insert.js +2 -24
- package/src/{control/module → module}/attributes.js +2 -2
- package/src/module/build.js +8 -5
- package/src/navigation.js +19 -0
- package/src/progress.js +0 -2
- package/src/search.js +71 -0
- package/src/select.js +57 -272
- package/src/{control/selecter.js → selecter.js} +5 -5
- package/src/skin/material/component/navigation.sass +1 -0
- package/src/skin/material/control/button.sass +10 -0
- package/src/slider.js +0 -2
- package/src/snackbar.js +72 -51
- package/src/switch.js +111 -103
- package/src/{control/switcher.js → switcher.js} +17 -20
- package/src/text.js +25 -74
- package/src/textfield.js +96 -233
- package/src/banner.js +0 -231
- package/src/control/button.js +0 -239
- package/src/control/button.new.js +0 -190
- package/src/control/datehour.js +0 -65
- package/src/control/dialog.js +0 -175
- package/src/control/image.js +0 -92
- package/src/control/list.js +0 -67
- package/src/control/loading.js +0 -128
- package/src/control/menu.js +0 -85
- package/src/control/search.js +0 -98
- package/src/control/select.js +0 -130
- package/src/control/snackbar.js +0 -91
- package/src/control/switch.js +0 -272
- package/src/control/text.js +0 -70
- package/src/control/textfield.js +0 -177
- package/src/tabs/setup.js +0 -0
- /package/src/{control/module → module}/addclass.js +0 -0
package/form.js
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import build from './src/form/build'
|
|
2
|
+
import cancel from './src/form/cancel'
|
|
3
|
+
import controller from './src/form/controller'
|
|
4
|
+
import create from './src/form/create'
|
|
5
|
+
import data from './src/form/data'
|
|
6
|
+
import del from './src/form/delete'
|
|
7
|
+
import fetch from './src/form/fetch'
|
|
8
|
+
import render from './src/form/render'
|
|
9
|
+
import set from './src/form/set'
|
|
10
|
+
import submit from './src/form/submit'
|
|
11
|
+
import update from './src/form/update'
|
|
12
|
+
import verify from './src/form/verify'
|
|
13
|
+
|
|
14
|
+
export {
|
|
15
|
+
build,
|
|
16
|
+
cancel,
|
|
17
|
+
controller,
|
|
18
|
+
create,
|
|
19
|
+
data,
|
|
20
|
+
del,
|
|
21
|
+
fetch,
|
|
22
|
+
render,
|
|
23
|
+
set,
|
|
24
|
+
submit,
|
|
25
|
+
update,
|
|
26
|
+
verify
|
|
27
|
+
}
|
package/index.js
CHANGED
|
@@ -1,72 +1,73 @@
|
|
|
1
|
-
import AppBar from '
|
|
2
|
-
import Button from '
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
import
|
|
12
|
-
import
|
|
13
|
-
import
|
|
14
|
-
import
|
|
15
|
-
import
|
|
16
|
-
import
|
|
17
|
-
import
|
|
18
|
-
import
|
|
19
|
-
import
|
|
20
|
-
import
|
|
21
|
-
import
|
|
22
|
-
import
|
|
23
|
-
import
|
|
24
|
-
import
|
|
25
|
-
import
|
|
26
|
-
import
|
|
27
|
-
import
|
|
28
|
-
import
|
|
29
|
-
import
|
|
30
|
-
|
|
31
|
-
import emitter from '
|
|
32
|
-
import
|
|
33
|
-
import
|
|
34
|
-
import
|
|
35
|
-
import
|
|
1
|
+
import AppBar from './src/appbar'
|
|
2
|
+
import Button from './src/button'
|
|
3
|
+
import Card from './src/card'
|
|
4
|
+
import Component from './src/component'
|
|
5
|
+
import DateHour from './src/control/datehour'
|
|
6
|
+
import Dialog from './src/dialog'
|
|
7
|
+
import File from './src/control/file'
|
|
8
|
+
import Loading from './src/control/loading'
|
|
9
|
+
import Menu from './src/control/menu'
|
|
10
|
+
import Select from './src/select'
|
|
11
|
+
import Selecter from './src/control/selecter'
|
|
12
|
+
import Snackbar from './src/snackbar'
|
|
13
|
+
import Switch from './src/switch'
|
|
14
|
+
import Switcher from './src/control/switcher'
|
|
15
|
+
import Text from './src/text'
|
|
16
|
+
import Textfield from './src/textfield'
|
|
17
|
+
import Element from './src/element'
|
|
18
|
+
import Layout from './src/layout'
|
|
19
|
+
import List from './src/list'
|
|
20
|
+
import Tabview from './src/tabview'
|
|
21
|
+
import TabView from './src/tabview'
|
|
22
|
+
import Text from './src/text'
|
|
23
|
+
import Toolbar from './src/toolbar'
|
|
24
|
+
import Tooltip from './src/tooltip'
|
|
25
|
+
import attach from './src/module/attach'
|
|
26
|
+
import attributes from './src/module/attributes'
|
|
27
|
+
import build from './src/module/build'
|
|
28
|
+
import dataset from './src/module/dataset'
|
|
29
|
+
import display from './src/module/display'
|
|
30
|
+
import events from './src/module/attach'
|
|
31
|
+
import emitter from './src/module/emitter'
|
|
32
|
+
import jsonToHTML from './src/module/jsontohtml'
|
|
33
|
+
import mediator from './src/module/mediator'
|
|
34
|
+
import observer from './src/module/observer'
|
|
35
|
+
import smoothscroll from './src/module/smoothscroll'
|
|
36
36
|
|
|
37
37
|
export {
|
|
38
|
-
AppBar
|
|
38
|
+
AppBar
|
|
39
39
|
Button,
|
|
40
|
-
|
|
41
|
-
|
|
40
|
+
DateHour,
|
|
41
|
+
Datehour,
|
|
42
|
+
Dialog,
|
|
42
43
|
Card,
|
|
43
|
-
Checkbox,
|
|
44
44
|
Component,
|
|
45
|
-
Container,
|
|
46
|
-
Dialog,
|
|
47
|
-
Divider,
|
|
48
|
-
Drawer,
|
|
49
45
|
Element,
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
Image,
|
|
53
|
-
Item,
|
|
54
|
-
Layout,
|
|
55
|
-
List,
|
|
46
|
+
File,
|
|
47
|
+
Loading,
|
|
56
48
|
Menu,
|
|
57
|
-
|
|
49
|
+
Select,
|
|
50
|
+
Selecter,
|
|
51
|
+
Snackbar,
|
|
58
52
|
Switch,
|
|
53
|
+
Switcher,
|
|
54
|
+
Tabview,
|
|
55
|
+
TabView,
|
|
59
56
|
Text,
|
|
60
57
|
Textfield,
|
|
61
58
|
Toolbar,
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
emitter,
|
|
68
|
-
display,
|
|
59
|
+
Tooltip,
|
|
60
|
+
Layout,
|
|
61
|
+
List,
|
|
62
|
+
attach,
|
|
63
|
+
attributes,
|
|
69
64
|
build,
|
|
65
|
+
dataset,
|
|
66
|
+
display,
|
|
67
|
+
events,
|
|
70
68
|
emitter,
|
|
71
|
-
|
|
69
|
+
jsonToHTML,
|
|
70
|
+
mediator,
|
|
71
|
+
observer,
|
|
72
|
+
smoothscroll
|
|
72
73
|
}
|
package/list.js
ADDED
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import add from './src/list/add'
|
|
2
|
+
import build from './src/list/build'
|
|
3
|
+
import click from './src/list/click'
|
|
4
|
+
import create from './src/list/create'
|
|
5
|
+
import display from './src/list/display'
|
|
6
|
+
import empty from './src/list/empty'
|
|
7
|
+
import filter from './src/list/filter'
|
|
8
|
+
import image from './src/list/image'
|
|
9
|
+
import load from './src/list/load'
|
|
10
|
+
import remove from './src/list/remove'
|
|
11
|
+
import render from './src/list/render'
|
|
12
|
+
import request from './src/list/request'
|
|
13
|
+
import search from './src/list/search'
|
|
14
|
+
import select from './src/list/select'
|
|
15
|
+
import status from './src/list/status'
|
|
16
|
+
import update from './src/list/update'
|
|
17
|
+
|
|
18
|
+
export {
|
|
19
|
+
add,
|
|
20
|
+
build,
|
|
21
|
+
click,
|
|
22
|
+
create,
|
|
23
|
+
display,
|
|
24
|
+
empty,
|
|
25
|
+
filter,
|
|
26
|
+
image,
|
|
27
|
+
load,
|
|
28
|
+
remove,
|
|
29
|
+
render,
|
|
30
|
+
request,
|
|
31
|
+
search,
|
|
32
|
+
select,
|
|
33
|
+
status,
|
|
34
|
+
update
|
|
35
|
+
}
|
package/package.json
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "material",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.1",
|
|
4
4
|
"description": "A lightweight implementation of Material Design Components - ES6",
|
|
5
5
|
"main": "index.js",
|
|
6
|
+
"type": "module",
|
|
6
7
|
"repository": {
|
|
7
8
|
"type": "git",
|
|
8
9
|
"url": "git+ssh://git@gitlab.com/alkaloid/material.git"
|
|
@@ -39,5 +40,8 @@
|
|
|
39
40
|
"watch": "npm-run-all --parallel reload dev",
|
|
40
41
|
"docs": "jsdoc src -r -d docs",
|
|
41
42
|
"test": "echo \"Error: no test specified\" && exit 1"
|
|
43
|
+
},
|
|
44
|
+
"dependencies": {
|
|
45
|
+
"fs-extra": "^11.1.1"
|
|
42
46
|
}
|
|
43
47
|
}
|
package/src/appbar.js
CHANGED
|
@@ -1,216 +1,19 @@
|
|
|
1
|
-
import
|
|
2
|
-
import create from './mixin/create'
|
|
3
|
-
import insert from './mixin/insert'
|
|
4
|
-
import offset from './element/offset'
|
|
5
|
-
|
|
6
|
-
const defaults = {
|
|
7
|
-
prefix: 'material',
|
|
8
|
-
class: 'appbar',
|
|
9
|
-
tag: 'header'
|
|
10
|
-
}
|
|
1
|
+
import build from './module/build'
|
|
11
2
|
|
|
12
3
|
class AppBar {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
*/
|
|
4
|
+
static defaults = {
|
|
5
|
+
class: 'appbar'
|
|
6
|
+
}
|
|
7
|
+
|
|
18
8
|
constructor (options) {
|
|
19
9
|
this.init(options)
|
|
20
10
|
this.build()
|
|
21
|
-
this.attach()
|
|
22
|
-
return this
|
|
23
11
|
}
|
|
24
12
|
|
|
25
13
|
init (options) {
|
|
26
|
-
this.options = Object.assign({}, defaults, options || {})
|
|
27
|
-
Object.assign(this,
|
|
28
|
-
|
|
29
|
-
/// console.log('waterfALL', this.options.waterfall)
|
|
30
|
-
|
|
31
|
-
this.waterfall = this.options.waterfall
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
/**
|
|
35
|
-
* Build Method
|
|
36
|
-
* @return {Object} This class instance
|
|
37
|
-
*/
|
|
38
|
-
build () {
|
|
39
|
-
this.element = create(this.options)
|
|
40
|
-
|
|
41
|
-
// console.log(this.options.height, this.options.fixed)
|
|
42
|
-
|
|
43
|
-
if (this.options.height) {
|
|
44
|
-
this.element.style.height = this.options.height + 'px'
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
if (this.options.fixed) {
|
|
48
|
-
// console.log('is-fixed')
|
|
49
|
-
this.element.classList.add('is-fixed')
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
if (this.options.flexible) {
|
|
53
|
-
this.element.classList.add('is-flexible')
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
// if (this.options.container) {
|
|
57
|
-
// this.insert(this.options.container)
|
|
58
|
-
// }
|
|
59
|
-
|
|
60
|
-
return this
|
|
14
|
+
this.options = Object.assign({}, AppBar.defaults, options || {})
|
|
15
|
+
Object.assign(this, build)
|
|
61
16
|
}
|
|
62
|
-
|
|
63
|
-
attach () {
|
|
64
|
-
this.element.addEventListener('DOMNodeInserted', (e) => {
|
|
65
|
-
var textNode = e.target
|
|
66
|
-
if (textNode !== this.element) return
|
|
67
|
-
|
|
68
|
-
var size = this.size = offset(this.element, 'height')
|
|
69
|
-
|
|
70
|
-
var view = this.view = this.element.parentNode
|
|
71
|
-
|
|
72
|
-
// console.log('view', view)
|
|
73
|
-
|
|
74
|
-
var p = 'top'
|
|
75
|
-
|
|
76
|
-
if (this.options.type == 'bottom') p = 'bottom'
|
|
77
|
-
|
|
78
|
-
var padding = window.getComputedStyle(view)['padding-' + p]
|
|
79
|
-
// console.log('paddingTop', padding)
|
|
80
|
-
// if (!padding) padding = window.getComputedStyle(this.element.parentNode, 'padding')
|
|
81
|
-
// console.log('padding', padding)
|
|
82
|
-
|
|
83
|
-
padding = parseInt(padding, 10)
|
|
84
|
-
// size = parseInt(size, 10)
|
|
85
|
-
|
|
86
|
-
this.padding = padding
|
|
87
|
-
|
|
88
|
-
// console.log(' toolbar inserted in', size, 'padding', padding)
|
|
89
|
-
var ptop = this.ptop = size + padding
|
|
90
|
-
|
|
91
|
-
// console.log('ptop', ptop)
|
|
92
|
-
|
|
93
|
-
if (document.body == view) {
|
|
94
|
-
// console.log('toolbar container body')
|
|
95
|
-
this.element.classList.add('toolbar-body')
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
// console.log('p', p)
|
|
99
|
-
|
|
100
|
-
view.setAttribute('style', 'padding-' + p + ': ' + ptop + 'px')
|
|
101
|
-
this.scroll(view)
|
|
102
|
-
})
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
/**
|
|
106
|
-
* Setter
|
|
107
|
-
* @param {string} prop
|
|
108
|
-
* @param {string} value
|
|
109
|
-
* @return {Object} The class instance
|
|
110
|
-
*/
|
|
111
|
-
set (prop, value) {
|
|
112
|
-
switch (prop) {
|
|
113
|
-
case 'minimize':
|
|
114
|
-
this.element.setAttribute('style', 'height: 64px')
|
|
115
|
-
break
|
|
116
|
-
case 'value':
|
|
117
|
-
this.setValue(value)
|
|
118
|
-
break
|
|
119
|
-
case 'label':
|
|
120
|
-
this.setLabel(value)
|
|
121
|
-
break
|
|
122
|
-
default:
|
|
123
|
-
this.check(prop)
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
return this
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
scroll (view) {
|
|
130
|
-
// console.log('initScroll')
|
|
131
|
-
|
|
132
|
-
var isBody = false
|
|
133
|
-
|
|
134
|
-
var element = view
|
|
135
|
-
|
|
136
|
-
this.scrolling = view
|
|
137
|
-
|
|
138
|
-
if (view === document.body) {
|
|
139
|
-
isBody = true
|
|
140
|
-
element = document
|
|
141
|
-
this.scrolling = document.body
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
view.classList.add()
|
|
145
|
-
|
|
146
|
-
element.addEventListener('scroll', (e) => {
|
|
147
|
-
var scrollTop
|
|
148
|
-
if (isBody) {
|
|
149
|
-
scrollTop = (document.documentElement ||
|
|
150
|
-
document.body.parentNode ||
|
|
151
|
-
document.body).scrollTop
|
|
152
|
-
} else {
|
|
153
|
-
scrollTop = view.scrollTop
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
if (scrollTop > 0) {
|
|
157
|
-
this.element.classList.add('is-scrolled')
|
|
158
|
-
} else {
|
|
159
|
-
this.element.classList.remove('is-scrolled')
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
// console.log('scroll', scrollTop)
|
|
163
|
-
|
|
164
|
-
this.update(e, scrollTop)
|
|
165
|
-
})
|
|
166
|
-
}
|
|
167
|
-
|
|
168
|
-
update (e, scrollTop) {
|
|
169
|
-
if (this.options.fixed) { this.fixed(e, scrollTop) }
|
|
170
|
-
if (this.options.flexible) { this.flexible(e, scrollTop) }
|
|
171
|
-
}
|
|
172
|
-
|
|
173
|
-
flexible (e, scrollTop) {
|
|
174
|
-
var size = offset(this.element, 'height')
|
|
175
|
-
// console.log('flexible', size, this.element.offsetHeight, scrollTop)
|
|
176
|
-
// if (scrollTop < this.size) {
|
|
177
|
-
//
|
|
178
|
-
var height = '64'
|
|
179
|
-
if (size < height) {
|
|
180
|
-
this.element.style.height = height + 'px'
|
|
181
|
-
} else {
|
|
182
|
-
height = this.size - scrollTop
|
|
183
|
-
if (height < 64) height = 64
|
|
184
|
-
this.element.style.height = height + 'px'
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
// console.log('scroll', this.element.style.top, scrollTop)
|
|
188
|
-
|
|
189
|
-
// if (scrollTop > 50) {
|
|
190
|
-
// this.element.style.trans = scrollTop + 'px'
|
|
191
|
-
// } else {
|
|
192
|
-
// this.element.style.top = scrollTop + 'px'
|
|
193
|
-
// }
|
|
194
|
-
// }
|
|
195
|
-
// this.element.style.top = scrollTop + 'px'
|
|
196
|
-
// this.element.style.height = this.size - scrollTop
|
|
197
|
-
// } else {
|
|
198
|
-
// console.log('size scroll', this.size, scrollTop)
|
|
199
|
-
|
|
200
|
-
// this.element.style.height = this.size - scrollTop + 'px'
|
|
201
|
-
// // this.element.style.top = scrollTop + 'px'
|
|
202
|
-
// }
|
|
203
|
-
}
|
|
204
|
-
|
|
205
|
-
fixed (e, scrollTop) {
|
|
206
|
-
if (scrollTop > 0) {
|
|
207
|
-
this.element.style.transform = 'translateY(' + scrollTop + 'px)'
|
|
208
|
-
} else {
|
|
209
|
-
this.element.style.transform = 'translateY(' + scrollTop + 'px)'
|
|
210
|
-
}
|
|
211
|
-
}
|
|
212
|
-
|
|
213
|
-
waterfall$ (e) {}
|
|
214
17
|
}
|
|
215
18
|
|
|
216
19
|
export default AppBar
|
package/src/badge.js
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import build from './module/build'
|
|
2
|
+
|
|
3
|
+
class Badge {
|
|
4
|
+
static defaults = {
|
|
5
|
+
class: 'badge'
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
constructor (options) {
|
|
9
|
+
this.init(options)
|
|
10
|
+
this.build()
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
init (options) {
|
|
14
|
+
this.options = Object.assign({}, Badge.defaults, options || {})
|
|
15
|
+
Object.assign(this, build)
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
set(text) {
|
|
19
|
+
if (text) {
|
|
20
|
+
this.element.innerHTML = text
|
|
21
|
+
} else {
|
|
22
|
+
this.element.innerHTML = ''
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
export default Badge
|