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.
Files changed (65) hide show
  1. package/form.js +27 -0
  2. package/index.js +59 -58
  3. package/list.js +35 -0
  4. package/package.json +5 -1
  5. package/src/appbar.js +7 -204
  6. package/src/badge.js +27 -0
  7. package/src/button.js +155 -155
  8. package/src/calendar.js +0 -2
  9. package/src/card.js +0 -2
  10. package/src/checkbox.js +0 -2
  11. package/src/component.js +0 -2
  12. package/src/container.js +0 -2
  13. package/src/datehour.js +38 -0
  14. package/src/dialog.js +105 -152
  15. package/src/divider.js +0 -2
  16. package/src/drawer.js +0 -2
  17. package/src/{control/file.js → file.js} +15 -45
  18. package/src/form/verify.js +2 -2
  19. package/src/form.js +0 -2
  20. package/src/icon.js +0 -2
  21. package/src/image.js +39 -106
  22. package/src/item.js +0 -2
  23. package/src/{control/link.js → link.js} +13 -32
  24. package/src/list/build.js +2 -2
  25. package/src/list/collection.js +1 -1
  26. package/src/list/filter.js +2 -2
  27. package/src/list/request.js +1 -1
  28. package/src/list/search.js +5 -5
  29. package/src/list.js +29 -217
  30. package/src/loading.js +73 -0
  31. package/src/menu.js +60 -116
  32. package/src/mixin/display.js +0 -1
  33. package/src/mixin/insert.js +2 -24
  34. package/src/{control/module → module}/attributes.js +2 -2
  35. package/src/module/build.js +8 -5
  36. package/src/navigation.js +19 -0
  37. package/src/progress.js +0 -2
  38. package/src/search.js +71 -0
  39. package/src/select.js +57 -272
  40. package/src/{control/selecter.js → selecter.js} +5 -5
  41. package/src/skin/material/component/navigation.sass +1 -0
  42. package/src/skin/material/control/button.sass +10 -0
  43. package/src/slider.js +0 -2
  44. package/src/snackbar.js +72 -51
  45. package/src/switch.js +111 -103
  46. package/src/{control/switcher.js → switcher.js} +17 -20
  47. package/src/text.js +25 -74
  48. package/src/textfield.js +96 -233
  49. package/src/banner.js +0 -231
  50. package/src/control/button.js +0 -239
  51. package/src/control/button.new.js +0 -190
  52. package/src/control/datehour.js +0 -65
  53. package/src/control/dialog.js +0 -175
  54. package/src/control/image.js +0 -92
  55. package/src/control/list.js +0 -67
  56. package/src/control/loading.js +0 -128
  57. package/src/control/menu.js +0 -85
  58. package/src/control/search.js +0 -98
  59. package/src/control/select.js +0 -130
  60. package/src/control/snackbar.js +0 -91
  61. package/src/control/switch.js +0 -272
  62. package/src/control/text.js +0 -70
  63. package/src/control/textfield.js +0 -177
  64. package/src/tabs/setup.js +0 -0
  65. /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 'material/src/appbar'
2
- import Button from 'material/src/control/button'
3
- import Banner from 'material/src/banner'
4
- import Calendar from 'material/src/calendar'
5
- import Card from 'material/src/card'
6
- import Component from 'material/src/component'
7
- import Container from 'material/src/container'
8
- import Checkbox from 'material/src/checkbox'
9
- import Dialog from 'material/src/dialog'
10
- import Divider from 'material/src/divider'
11
- import Drawer from 'material/src/drawer'
12
- import Element from 'material/src/element'
13
- import Form from 'material/src/form'
14
- import Icon from 'material/src/icon'
15
- import Image from 'material/src/image'
16
- import Item from 'material/src/item'
17
- import Layout from 'material/src/layout'
18
- import List from 'material/src/list'
19
- import Menu from 'material/src/menu'
20
- import Progress from 'material/src/progress'
21
- import Slider from 'material/src/slider'
22
- import Snackbar from 'material/src/snackbar'
23
- import Switch from 'material/src/switch'
24
- import Tabs from 'material/src/tabs'
25
- import Text from 'material/src/text'
26
- import Textfield from 'material/src/textfield'
27
- import Toolbar from 'material/src/toolbar'
28
- import View from 'material/src/view'
29
- import Tree from 'material/src/tree'
30
-
31
- import emitter from 'material/src/module/emitter'
32
- import mediator from 'material/src/module/mediator'
33
- import display from 'material/src/mixin/display'
34
- import build from 'material/src/module/build'
35
- import jsontohtml from 'material/src/module/jsontohtml'
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
- Banner,
41
- Calendar,
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
- Form,
51
- Icon,
52
- Image,
53
- Item,
54
- Layout,
55
- List,
46
+ File,
47
+ Loading,
56
48
  Menu,
57
- Slider,
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
- Tree,
63
- Tabs,
64
- View,
65
- Snackbar,
66
- Progress,
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
- mediator
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.0",
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 passiveEvents from './module/passive'
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
- * Constructor
15
- * @param {Object} options - Component options
16
- * @return {Object} Class instance
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, insert)
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