@symbo.ls/range 3.1.1 → 3.2.3

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 +72 -71
  2. package/package.json +5 -5
package/index.js CHANGED
@@ -3,86 +3,82 @@
3
3
  import { opacify } from '@symbo.ls/scratch'
4
4
 
5
5
  export const Range = {
6
- props: {
7
- appearance: 'none',
8
- width: '100%',
9
- height: '2px',
10
- outline: 'none',
11
- flex: 1,
12
-
13
- onInput: (ev, el, s) => {
14
- const props = el.props
15
- if (el.call('isFunction', props.onInput)) {
16
- props.onInput(ev, el, s)
17
- } else {
18
- s.update({ value: parseFloat(el.node.value) })
19
- }
6
+ tag: 'input',
7
+
8
+ appearance: 'none',
9
+ width: '100%',
10
+ height: '2px',
11
+ outline: 'none',
12
+ flex: 1,
13
+
14
+ onInput: (ev, el, s) => {
15
+ const props = el.props
16
+ if (el.call('isFunction', props.onInput)) {
17
+ props.onInput(ev, el, s)
18
+ } else {
19
+ s.update({ value: parseFloat(el.node.value) })
20
+ }
21
+ },
22
+ onChange: (ev, el, s) => {
23
+ const props = el.props
24
+ if (el.call('isFunction', props.onChange)) {
25
+ props.onChange(ev, el, s)
26
+ } else {
27
+ s.update({ value: parseFloat(el.node.value) })
28
+ }
29
+ },
30
+
31
+ '::-webkit-slider-thumb': {
32
+ boxSizing: 'content-box',
33
+ width: '8px',
34
+ height: '8px',
35
+ borderWidth: '2px',
36
+ borderStyle: 'solid',
37
+ borderRadius: '100%',
38
+ opacity: '.8',
39
+ appearance: 'none'
40
+ },
41
+
42
+ '::-webkit-slider-runnable-track': {},
43
+
44
+ '@dark': {
45
+ background: 'white 0.2',
46
+
47
+ '::-webkit-slider-thumb': {
48
+ background: '#232526',
49
+ borderColor: opacify('#454646', 0.75)
20
50
  },
21
- onChange: (ev, el, s) => {
22
- const props = el.props
23
- if (el.call('isFunction', props.onChange)) {
24
- props.onChange(ev, el, s)
25
- } else {
26
- s.update({ value: parseFloat(el.node.value) })
51
+
52
+ ':hover': {
53
+ '::-webkit-slider-thumb': {
54
+ borderColor: opacify('#fff', 0.35)
27
55
  }
28
56
  },
29
57
 
30
- '::-webkit-slider-thumb': {
31
- boxSizing: 'content-box',
32
- width: '8px',
33
- height: '8px',
34
- borderWidth: '2px',
35
- borderStyle: 'solid',
36
- borderRadius: '100%',
37
- opacity: '.8',
38
-
39
- style: {
40
- appearance: 'none'
58
+ ':focus': {
59
+ '::-webkit-slider-thumb': {
60
+ borderColor: '#3C6AC0'
41
61
  }
42
- },
62
+ }
63
+ },
43
64
 
44
- '::-webkit-slider-runnable-track': {
45
- },
65
+ '@light': {
66
+ background: 'gray9',
46
67
 
47
- '@dark': {
48
- background: 'white 0.2',
68
+ '::-webkit-slider-thumb': {
69
+ background: 'white',
70
+ borderColor: 'gray9'
71
+ },
49
72
 
73
+ ':hover': {
50
74
  '::-webkit-slider-thumb': {
51
- background: '#232526',
52
- borderColor: opacify('#454646', 0.75)
53
- },
54
-
55
- ':hover': {
56
- '::-webkit-slider-thumb': {
57
- borderColor: opacify('#fff', 0.35)
58
- }
59
- },
60
-
61
- ':focus': {
62
- '::-webkit-slider-thumb': {
63
- borderColor: '#3C6AC0'
64
- }
75
+ borderColor: 'gray7'
65
76
  }
66
77
  },
67
78
 
68
- '@light': {
69
- background: 'gray9',
70
-
79
+ ':focus': {
71
80
  '::-webkit-slider-thumb': {
72
- background: 'white',
73
- borderColor: 'gray9'
74
- },
75
-
76
- ':hover': {
77
- '::-webkit-slider-thumb': {
78
- borderColor: 'gray7'
79
- }
80
- },
81
-
82
- ':focus': {
83
- '::-webkit-slider-thumb': {
84
- borderColor: 'blue'
85
- }
81
+ borderColor: 'blue'
86
82
  }
87
83
  }
88
84
  },
@@ -90,16 +86,21 @@ export const Range = {
90
86
  deps: {
91
87
  returnPropertyValue: (el, property, def) => {
92
88
  const val = el.props && el.call('exec', el.props[property], el)
93
- const r = (el.call('isFunction', val) ? val(el, el.state) : val !== undefined ? val : def !== undefined ? def : 0)
89
+ const r = el.call('isFunction', val)
90
+ ? val(el, el.state)
91
+ : val !== undefined
92
+ ? val
93
+ : def !== undefined
94
+ ? def
95
+ : 0
94
96
  return r + ''
95
97
  }
96
98
  },
97
99
 
98
- tag: 'input',
99
-
100
100
  attr: {
101
101
  type: 'range',
102
- value: (el, s) => el.call('exec', s.value || el.props.value || el.props.defaultValue, el),
102
+ value: (el, s) =>
103
+ el.call('exec', s.value || el.props.value || el.props.defaultValue, el),
103
104
  min: (el, s) => el.deps.returnPropertyValue(el, 'min', 0),
104
105
  max: (el, s) => el.deps.returnPropertyValue(el, 'max', 100),
105
106
  step: (el, s) => el.deps.returnPropertyValue(el, 'step', 1)
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@symbo.ls/range",
3
- "version": "3.1.1",
3
+ "version": "3.2.3",
4
4
  "main": "index.js",
5
5
  "license": "MIT",
6
- "gitHead": "39fb7a8c07355468ccce79e2f787ca3fa0715692",
6
+ "gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681",
7
7
  "dependencies": {
8
- "@domql/utils": "^3.1.1",
9
- "@symbo.ls/button": "^3.1.1",
10
- "@symbo.ls/scratch": "^3.1.1"
8
+ "@domql/utils": "^3.2.3",
9
+ "@symbo.ls/button": "^3.2.3",
10
+ "@symbo.ls/scratch": "^3.2.3"
11
11
  },
12
12
  "source": "src/index.js"
13
13
  }