@symbo.ls/range 2.11.475 → 2.11.477

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 (2) hide show
  1. package/index.js +120 -134
  2. package/package.json +3 -3
package/index.js CHANGED
@@ -3,88 +3,97 @@
3
3
  import { isFunction } from '@domql/utils'
4
4
  import { opacify } from '@symbo.ls/scratch'
5
5
 
6
- const props = {
7
- appearance: 'none',
8
- width: '100%',
9
- height: '2px',
10
- outline: 'none',
11
- flex: 1,
12
-
13
- onInput: (ev, el, s) => s.update({ value: el.node.value }),
14
- onChange: (ev, el, s) => s.update({ value: el.node.value }),
15
-
16
- style: {
17
- appearance: 'none'
18
- },
19
-
20
- '::-webkit-slider-thumb': {
21
- boxSizing: 'content-box',
22
- width: '8px',
23
- height: '8px',
24
- borderWidth: '2px',
25
- borderStyle: 'solid',
26
- borderRadius: '100%',
27
- opacity: '.8',
28
-
29
- style: {
30
- appearance: 'none'
31
- }
32
- },
33
-
34
- '::-webkit-slider-runnable-track': {
35
- },
36
-
37
- '@dark': {
38
- background: 'white 0.2',
6
+ const returnPropertyValue = (el, property, def) => {
7
+ const val = el.props && el.props[property]
8
+ const r = (isFunction(val) ? val(el, el.state) : val !== undefined ? val : def !== undefined ? def : 0)
9
+ return r + ''
10
+ }
39
11
 
40
- '::-webkit-slider-thumb': {
41
- background: '#232526',
42
- borderColor: opacify('#454646', 0.75)
12
+ export const Range = {
13
+ props: {
14
+ appearance: 'none',
15
+ width: '100%',
16
+ height: '2px',
17
+ outline: 'none',
18
+ flex: 1,
19
+
20
+ onInput: (ev, el, s) => {
21
+ const props = el.props
22
+ if (isFunction(props.onInput)) {
23
+ props.onInput(ev, el, s)
24
+ } else {
25
+ s.update({ value: parseFloat(el.node.value) })
26
+ }
43
27
  },
44
-
45
- ':hover': {
46
- '::-webkit-slider-thumb': {
47
- borderColor: opacify('#fff', 0.35)
28
+ onChange: (ev, el, s) => {
29
+ const props = el.props
30
+ if (isFunction(props.onChange)) {
31
+ props.onChange(ev, el, s)
32
+ } else {
33
+ s.update({ value: parseFloat(el.node.value) })
48
34
  }
49
35
  },
50
36
 
51
- ':focus': {
52
- '::-webkit-slider-thumb': {
53
- borderColor: '#3C6AC0'
37
+ '::-webkit-slider-thumb': {
38
+ boxSizing: 'content-box',
39
+ width: '8px',
40
+ height: '8px',
41
+ borderWidth: '2px',
42
+ borderStyle: 'solid',
43
+ borderRadius: '100%',
44
+ opacity: '.8',
45
+
46
+ style: {
47
+ appearance: 'none'
54
48
  }
55
- }
56
- },
57
-
58
- '@light': {
59
- background: 'gray9',
49
+ },
60
50
 
61
- '::-webkit-slider-thumb': {
62
- background: 'white',
63
- borderColor: 'gray9'
51
+ '::-webkit-slider-runnable-track': {
64
52
  },
65
53
 
66
- ':hover': {
54
+ '@dark': {
55
+ background: 'white 0.2',
56
+
67
57
  '::-webkit-slider-thumb': {
68
- borderColor: 'gray7'
58
+ background: '#232526',
59
+ borderColor: opacify('#454646', 0.75)
60
+ },
61
+
62
+ ':hover': {
63
+ '::-webkit-slider-thumb': {
64
+ borderColor: opacify('#fff', 0.35)
65
+ }
66
+ },
67
+
68
+ ':focus': {
69
+ '::-webkit-slider-thumb': {
70
+ borderColor: '#3C6AC0'
71
+ }
69
72
  }
70
73
  },
71
74
 
72
- ':focus': {
75
+ '@light': {
76
+ background: 'gray9',
77
+
73
78
  '::-webkit-slider-thumb': {
74
- borderColor: 'blue'
79
+ background: 'white',
80
+ borderColor: 'gray9'
81
+ },
82
+
83
+ ':hover': {
84
+ '::-webkit-slider-thumb': {
85
+ borderColor: 'gray7'
86
+ }
87
+ },
88
+
89
+ ':focus': {
90
+ '::-webkit-slider-thumb': {
91
+ borderColor: 'blue'
92
+ }
75
93
  }
76
94
  }
77
- }
78
- }
79
-
80
- const returnPropertyValue = (el, property, def) => {
81
- const val = el.props && el.props[property]
82
- const r = (isFunction(val) ? val(el, el.state) : val !== undefined ? val : def !== undefined ? def : 0)
83
- return r + ''
84
- }
95
+ },
85
96
 
86
- export const Range = {
87
- props,
88
97
  tag: 'input',
89
98
 
90
99
  attr: {
@@ -93,98 +102,75 @@ export const Range = {
93
102
  min: (el, s) => returnPropertyValue(el, 'min', 0),
94
103
  max: (el, s) => returnPropertyValue(el, 'max', 100),
95
104
  step: (el, s) => returnPropertyValue(el, 'step', 1)
96
- },
97
-
98
- on: {
99
- input: (ev, el, s) => {
100
- const props = el.props
101
- if (isFunction(props.onInput)) {
102
- props.onInput(ev, el, s)
103
- } else {
104
- s.update({ value: parseFloat(el.node.value) })
105
- }
106
- },
107
- change: (ev, el, s) => {
108
- const props = el.props
109
- if (isFunction(props.onChange)) {
110
- props.onChange(ev, el, s)
111
- } else {
112
- s.update({ value: parseFloat(el.node.value) })
113
- }
114
- }
115
105
  }
116
106
  }
117
107
 
118
108
  export const RangeWithButtons = {
119
- minus: {
120
- extend: 'SquareButton',
121
- props: { theme: 'field', icon: 'minus' },
122
- on: {
123
- click: (ev, el, s) => {
124
- const parentProps = el.parent.props
125
- if (isFunction(parentProps.onDecrease)) {
126
- parentProps.onDecrease(ev, el.parent, s)
127
- } else {
128
- const value = parseFloat(s.value)
129
- const min = returnPropertyValue(el.parent, 'min', 1)
130
- const step = returnPropertyValue(el.parent, 'step', 1)
131
- if (value > min) {
132
- s.update({ value: value - step })
133
- }
109
+ SquareButton_minus: {
110
+ icon: 'minus',
111
+ theme: 'field',
112
+ onClick: (ev, el, s) => {
113
+ const parentProps = el.parent.props
114
+ if (isFunction(parentProps.onDecrease)) {
115
+ parentProps.onDecrease(ev, el.parent, s)
116
+ } else {
117
+ const value = parseFloat(s.value)
118
+ const min = returnPropertyValue(el.parent, 'min', 1)
119
+ const step = returnPropertyValue(el.parent, 'step', 1)
120
+ if (value > min) {
121
+ s.update({ value: value - step })
134
122
  }
135
123
  }
136
124
  }
137
125
  },
138
- value: {
139
- props: { width: '4ch' },
126
+
127
+ Value: {
140
128
  tag: 'span',
129
+ width: '4ch',
141
130
  text: ({ state, parent }) => {
142
131
  const unit = returnPropertyValue(parent, 'unit', '')
143
132
  return '' + (state.value || state.defaultValue || 0) + unit
144
133
  }
145
134
  },
146
- input: {
147
- extend: Range,
135
+
136
+ Range: {
148
137
  attr: {
149
138
  value: (el, s) => parseFloat(s.value || s.defaultValue),
150
139
  min: (el, s) => returnPropertyValue(el.parent, 'min', 0),
151
140
  max: (el, s) => returnPropertyValue(el.parent, 'max', 100),
152
141
  step: (el, s) => returnPropertyValue(el.parent, 'step', 1)
153
142
  },
154
- on: {
155
- input: (ev, el, s) => {
156
- const parentProps = el.parent.props
157
- if (isFunction(parentProps.onInput)) {
158
- parentProps.onInput(ev, el, s)
159
- } else {
160
- s.update({ value: parseFloat(el.node.value) })
161
- }
162
- },
163
- change: (ev, el, s) => {
164
- const parentProps = el.parent.props
165
- if (isFunction(parentProps.onChange)) {
166
- parentProps.onChange(ev, el, s)
167
- } else {
168
- s.update({ value: parseFloat(el.node.value) })
169
- }
143
+ onInput: (ev, el, s) => {
144
+ const parentProps = el.parent.props
145
+ if (isFunction(parentProps.onInput)) {
146
+ parentProps.onInput(ev, el, s)
147
+ } else {
148
+ s.update({ value: parseFloat(el.node.value) })
149
+ }
150
+ },
151
+ onChange: (ev, el, s) => {
152
+ const parentProps = el.parent.props
153
+ if (isFunction(parentProps.onChange)) {
154
+ parentProps.onChange(ev, el, s)
155
+ } else {
156
+ s.update({ value: parseFloat(el.node.value) })
170
157
  }
171
158
  }
172
159
  },
173
- plus: {
174
- extend: 'SquareButton',
175
- props: { theme: 'field', icon: 'plus' },
176
- on: {
177
- click: (ev, el, s) => {
178
- const parentProps = el.parent.props
179
- if (isFunction(parentProps.onIncrease)) {
180
- parentProps.onIncrease(ev, el.parent, s)
181
- } else {
182
- const value = parseFloat(s.value)
183
- const max = returnPropertyValue(el.parent, 'max', 1)
184
- const step = returnPropertyValue(el.parent, 'step', 1)
185
- if (value < max) {
186
- s.update({ value: value + step })
187
- }
160
+
161
+ SquareButton_plus: {
162
+ theme: 'field',
163
+ icon: 'plus',
164
+ onClick: (ev, el, s) => {
165
+ const parentProps = el.parent.props
166
+ if (isFunction(parentProps.onIncrease)) {
167
+ parentProps.onIncrease(ev, el.parent, s)
168
+ } else {
169
+ const value = parseFloat(s.value)
170
+ const max = returnPropertyValue(el.parent, 'max', 1)
171
+ const step = returnPropertyValue(el.parent, 'step', 1)
172
+ if (value < max) {
173
+ s.update({ value: value + step })
188
174
  }
189
175
  }
190
176
  }
package/package.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "@symbo.ls/range",
3
- "version": "2.11.475",
3
+ "version": "2.11.477",
4
4
  "main": "index.js",
5
5
  "license": "MIT",
6
- "gitHead": "d2198b5f44d161e2cf0dd8a9d88a5301192bcb02",
6
+ "gitHead": "47546f8e3e61900fb07e92c3faf7abf2bce919ae",
7
7
  "dependencies": {
8
8
  "@domql/utils": "^2.5.0",
9
- "@symbo.ls/button": "^2.11.475",
9
+ "@symbo.ls/button": "^2.11.477",
10
10
  "@symbo.ls/scratch": "^2.11.475"
11
11
  },
12
12
  "source": "src/index.js"