@decidables/decidables-elements 0.0.3 → 0.0.4

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 (3) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/README.md +259 -194
  3. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ### [0.0.4](https://github.com/decidables/decidables/compare/@decidables/decidables-elements@0.0.3...@decidables/decidables-elements@0.0.4) (2022-03-15)
7
+
8
+ **Note:** Version bump only for package @decidables/decidables-elements
9
+
10
+
11
+
12
+
13
+
6
14
  ### [0.0.3](https://github.com/decidables/decidables/compare/@decidables/decidables-elements@0.0.2...@decidables/decidables-elements@0.0.3) (2022-03-07)
7
15
 
8
16
  **Note:** Version bump only for package @decidables/decidables-elements
package/README.md CHANGED
@@ -2,201 +2,270 @@
2
2
 
3
3
  # decidables-elements: Basic UI Web Components for [**decidables**](https://github.com/decidables/decidables)
4
4
 
5
+ [![npm version](https://img.shields.io/npm/v/@decidables/decidables-elements?logo=npm)](https://www.npmjs.com/package/@decidables/decidables-elements)
6
+ [![license](https://img.shields.io/npm/l/@decidables/decidables-elements)](https://github.com/decidables/decidables/blob/main/LICENSE.md)
7
+
5
8
  ## Usage
6
9
 
7
- - Install:
8
- ```shell
9
- yarn add @decidables/decidables-elements
10
- ```
11
- - Use:
12
- ```javascript
13
- import '@decidables/decidables-elements';
14
- ```
15
- A bare import is used to register the elements in the custom registry, so they are then available
16
- for use in HTML.
10
+ ### Install
11
+
12
+ ```shell
13
+ yarn add @decidables/decidables-elements
14
+ ```
15
+
16
+ ### Use
17
+
18
+ ```javascript
19
+ import '@decidables/decidables-elements';
20
+ ```
21
+
22
+ A bare import is used to register the elements in the custom registry, so they are then available
23
+ for use in HTML.
17
24
 
18
25
  ## Contents
19
26
 
20
- - Components
21
- - `DecidablesButton`: Button for taking actions
22
- - `<decidables-button></decidables-button>`
23
- - Slot: *unnamed*
24
- - Inline content as label
25
- - Attribute: `disabled`
26
- - Boolean (default: `false`)
27
- - In disabled state user can't interact
28
- - Example:
29
- ```html
30
- <decidables-button disabled>
31
- Click me
32
- </decidables-button>
33
- ```
34
- - `DecidablesSlider`: Slider w/spinner for selecting a numeric value from a range
35
- - `<decidables-slider></decidables-slider>`
36
- - Slot: *unnamed*
37
- - Inline content as label
38
- - Attribute: `disabled`
39
- - Boolean (default: `false`)
40
- - In disabled state user can't interact
41
- - Attribute: `max`
42
- - Number (default: `undefined`)
43
- - Maximum value the slider can take
44
- - Attribute: `min`
45
- - Number (default: `undefined`)
46
- - Minimum value the slider can take
47
- - Attribute: `step`
48
- - Number (default: `undefined`)
49
- - Amount that value increments with smallest movement of the slider
50
- - Attribute: `value`
51
- - Number (default: `undefined`)
52
- - Initial value of the slider
53
- - Example:
54
- ```html
55
- <decidables-slider disabled max="0" min="100" step="2" value="50">
56
- Move me
57
- </decidables-slider>
58
- ```
59
- - `DecidablesSpinner`: Text field w/spinner arrows for selecting a continuous numeric value
60
- - `<decidables-spinner></decidables-spinner>`
61
- - Slot: *unnamed*
62
- - Inline content as label
63
- - Attribute: `disabled`
64
- - Boolean (default: `false`)
65
- - In disabled state user can't interact
66
- - Attribute: `max`
67
- - Number (default: `undefined`)
68
- - Maximum value the slider can take
69
- - Attribute: `min`
70
- - Number (default: `undefined`)
71
- - Minimum value the slider can take
72
- - Attribute: `step`
73
- - Number (default: `undefined`)
74
- - Amount that value increments with smallest movement of the slider
75
- - Attribute: `value`
76
- - Number (default: `undefined`)
77
- - Initial value of the slider
78
- - Example:
79
- ```html
80
- <decidables-spinner disabled max="0" min="100" step="2" value="50">
81
- Change me
82
- </decidables-spinner>
83
- ```
84
- - `DecidablesSwitch`: Switch for turning an option on or off
85
- - `<decidables-switch></decidables-switch>`
86
- - Slot: *unnamed*
87
- - Inline content as label for **on** state
88
- - Slot: `off-label`
89
- - Inline content as label for **off** state
90
- - Attribute: `disabled`
91
- - Boolean (default: `false`)
92
- - In disabled state user can't interact
93
- - Attribute: `checked`
94
- - Number (default: `false`)
95
- - Whether the switch is **on** (`true`) or **off** ('false`)
96
- - Example:
97
- ```html
98
- <decidables-switch disabled checked>
99
- <span>On</span>
100
- <span slot="off-label">Off</span>
101
- </decidables-switch>
102
- ```
103
- - `DecidablesToggleOption`: One option in a toggle set
104
- - `<decidables-toggle-option></decidables-toggle-option>`
105
- - Slot: *unnamed*
106
- - Inline content as label for option
107
- - Attribute: `disabled`
108
- - Boolean (default: `false`)
109
- - In disabled state user can't interact
110
- - Attribute: `checked`
111
- - Number (default: `false`)
112
- - Whether the option is selected (`true`) or not ('false`)
113
- - Attribute: `name`
114
- - String (default: `undefined`)
115
- - An identifier to be shared by all options in a mutually exclusive group
116
- - Attribute: `value`
117
- - String (default: `undefined`)
118
- - An identifier specific to this option to uniquely identify it in the group
119
- - Example:
120
- ```html
121
- <decidables-toggle-option disabled name="flavors" value="chocolate" checked>
122
- Chocolate
123
- </decidables-toggle-option>
124
- ```
125
- - `DecidablesToggle`: Toggle for selecting one option from a set
126
- - `<decidables-toggle></decidables-toggle>`
127
- - Slot: *unnamed*
128
- - Inline content as label for set
129
- - Slot: `label`
130
- - Inline content as legend for options
131
- - Attribute: `disabled`
132
- - Boolean (default: `false`)
133
- - In disabled state user can't interact
134
- - Example:
135
- ```html
136
- <decidables-toggle disabled>
137
- <span>Pick one</span>
138
- <span slot="label">Flavors</span>
139
- <decidables-toggle-option disabled name="flavors" value="chocolate">
140
- Chocolate
141
- </decidables-toggle-option>
142
- <decidables-toggle-option disabled name="flavors" value="strawberry">
143
- Strawberry
144
- </decidables-toggle-option>
145
- <decidables-toggle-option disabled name="flavors" value="vanilla" checked>
146
- Vanilla
147
- </decidables-toggle-option>
148
- </decidables-toggle>
149
- ```
150
- - Base class
151
- - `DecidablesElement`: Base class for all *decidables* web components
152
- - To define a new element:
153
- ```javascript
154
- export default class DecidablesSomething extends DecidablesElement {
155
- ...
156
- }
157
- ```
158
- - This library is built on `Lit`, so the resulting `DecidableElement` is also a `LitElement`
159
- - Utilities
160
- - `DecidablesConverterArray`: Utility for attributes that can take an array of values
161
- - If you are defining a `DecidablesElement` with an attribute that can take an array of numbers,
162
- then you can use this to automatically convert between a space-separated list as the attribute
163
- and an `Array` of numbers as the property:
164
- ```javascript
165
- static get properties() {
166
- return {
167
- stuff: {
168
- attribute: 'values',
169
- converter: DecidablesConverterArray,
170
- reflect: true,
171
- },
172
- };
173
- };
174
- ```
175
- ```html
176
- <decidables-something values="1.23 3.56 -2.97"></decidables-something>
177
- ```
178
- And `this.values` will be the `Array`: `[1.23 3.56 -2.97]`
179
- - `DecidablesConverterSet`: Utility for attributes that can take a set of values
180
- - If you are defining a `DecidablesElement` with an attribute that can take a set of string
181
- values, then you can use this to automatically convert between a space-separated list as the
182
- attribute and a `Set` of strings as the property:
183
- ```javascript
184
- static get properties() {
185
- return {
186
- stuff: {
187
- attribute: 'stuff',
188
- converter: DecidablesConverterSet,
189
- reflect: true,
190
- },
191
- };
192
- };
193
- ```
194
- ```html
195
- <decidables-something stuff="this that other"></decidables-something>
196
- ```
197
- And `this.stuff` will be a `Set` with members: `'this'`, `'that'`, and `'other'`
198
-
199
- ---
27
+ ### Components
28
+
29
+ #### `DecidablesButton` / `<decidables-button>`
30
+
31
+ Button for taking actions
32
+
33
+ ##### Slots
34
+
35
+ - *unnamed*
36
+ - Inline content as label
37
+
38
+ ##### Attributes
39
+
40
+ - `disabled: boolean = false`
41
+ - In disabled state user can't interact
42
+
43
+ ##### Example
44
+
45
+ ```html
46
+ <decidables-button disabled>
47
+ Click me
48
+ </decidables-button>
49
+ ```
50
+
51
+ #### `DecidablesSlider` / `<decidables-slider>`
52
+
53
+ Slider w/spinner for selecting a numeric value from a range
54
+
55
+ ##### Slots
56
+
57
+ - *unnamed*
58
+ - Inline content as label
59
+
60
+ ##### Attributes
61
+
62
+ - `disabled: boolean = false`
63
+ - In disabled state user can't interact
64
+ - `max: number = undefined`
65
+ - Maximum value the slider can take
66
+ - `min: number = undefined`
67
+ - Minimum value the slider can take
68
+ - `step: number = undefined`
69
+ - Amount that value increments with smallest movement of the slider
70
+ - `value: number = undefined`
71
+ - Initial value of the slider
72
+
73
+ ##### Example
74
+
75
+ ```html
76
+ <decidables-slider disabled max="0" min="100" step="2" value="50">
77
+ Move me
78
+ </decidables-slider>
79
+ ```
80
+
81
+ #### `DecidablesSpinner` / `<decidables-spinner>`
82
+
83
+ Text field w/spinner arrows for selecting a continuous numeric value
84
+
85
+ ##### Slots
86
+
87
+ - *unnamed*
88
+ - Inline content as label
89
+
90
+ ##### Attributes
91
+
92
+ - `disabled: boolean = false`
93
+ - In disabled state user can't interact
94
+ - `max: number = undefined`
95
+ - Maximum value the slider can take
96
+ - `min: number = undefined`
97
+ - Minimum value the slider can take
98
+ - `step: number = undefined`
99
+ - Amount that value increments with smallest movement of the slider
100
+ - `value: number = undefined`
101
+ - Initial value of the slider
102
+
103
+ ##### Example
104
+
105
+ ```html
106
+ <decidables-spinner disabled max="0" min="100" step="2" value="50">
107
+ Change me
108
+ </decidables-spinner>
109
+ ```
110
+
111
+ #### `DecidablesSwitch` / `<decidables-switch>`
112
+
113
+ Switch for turning an option on or off
114
+
115
+ ##### Slots
116
+
117
+ - *unnamed*
118
+ - Inline content as label for **on** state
119
+ - `off-label`
120
+ - Inline content as label for **off** state
121
+
122
+ ##### Attributes
123
+
124
+ - `disabled: boolean = false`
125
+ - In disabled state user can't interact
126
+ - `checked: number = false`
127
+ - Whether the switch is **on** (`true`) or **off** (`false`)
128
+
129
+ ##### Example
130
+
131
+ ```html
132
+ <decidables-switch disabled checked>
133
+ <span>On</span>
134
+ <span slot="off-label">Off</span>
135
+ </decidables-switch>
136
+ ```
137
+
138
+ #### `DecidablesToggleOption` / `<decidables-toggle-option>`
139
+
140
+ One option in a toggle set
141
+
142
+ ##### Slots
143
+
144
+ - *unnamed*
145
+ - Inline content as label for option
146
+
147
+ ##### Attributes
148
+
149
+ - `disabled: boolean = false`
150
+ - In disabled state user can't interact
151
+ - `checked: number = false`
152
+ - Whether the option is selected (`true`) or not ('false`)
153
+ - `name: string = undefined`
154
+ - An identifier to be shared by all options in a mutually exclusive group
155
+ - `value: string = undefined`
156
+ - An identifier specific to this option to uniquely identify it in the group
157
+
158
+ ##### Example
159
+
160
+ ```html
161
+ <decidables-toggle-option disabled name="flavors" value="chocolate" checked>
162
+ Chocolate
163
+ </decidables-toggle-option>
164
+ ```
165
+
166
+ #### `DecidablesToggle` / `<decidables-toggle>`
167
+
168
+ Toggle for selecting one option from a set
169
+
170
+ ##### Slots
171
+
172
+ - *unnamed*
173
+ - Inline content as label for set
174
+ - `label`
175
+ - Inline content as legend for options
176
+
177
+ ##### Attributes
178
+
179
+ - `disabled: boolean = false`
180
+ - In disabled state user can't interact
181
+
182
+ ##### Example
183
+
184
+ ```html
185
+ <decidables-toggle disabled>
186
+ <span>Pick one</span>
187
+ <span slot="label">Flavors</span>
188
+ <decidables-toggle-option disabled name="flavors" value="chocolate">
189
+ Chocolate
190
+ </decidables-toggle-option>
191
+ <decidables-toggle-option disabled name="flavors" value="strawberry">
192
+ Strawberry
193
+ </decidables-toggle-option>
194
+ <decidables-toggle-option disabled name="flavors" value="vanilla" checked>
195
+ Vanilla
196
+ </decidables-toggle-option>
197
+ </decidables-toggle>
198
+ ```
199
+
200
+ ### Base class
201
+
202
+ #### `DecidablesElement`
203
+
204
+ Base class for all *decidables* web components
205
+
206
+ To define a new element:
207
+
208
+ ```javascript
209
+ export default class DecidablesSomething extends DecidablesElement {
210
+ ...
211
+ }
212
+ ```
213
+
214
+ This library is built on `Lit`, so the resulting `DecidableElement` is also a `LitElement`
215
+
216
+ ### Utilities
217
+
218
+ #### `DecidablesConverterArray`
219
+
220
+ Utility for attributes that can take an array of values
221
+
222
+ If you are defining a `DecidablesElement` with an attribute that can take an array of numbers,
223
+ then you can use this to automatically convert between a space-separated list as the attribute
224
+ and an `Array` of numbers as the property:
225
+
226
+ ```javascript
227
+ static get properties() {
228
+ return {
229
+ stuff: {
230
+ attribute: 'values',
231
+ converter: DecidablesConverterArray,
232
+ reflect: true,
233
+ },
234
+ };
235
+ };
236
+ ```
237
+
238
+ ```html
239
+ <decidables-something values="1.23 3.56 -2.97"></decidables-something>
240
+ ```
241
+
242
+ And `this.values` will be the `Array`: `[1.23 3.56 -2.97]`
243
+
244
+ #### `DecidablesConverterSet`
245
+
246
+ Utility for attributes that can take a set of values
247
+
248
+ If you are defining a `DecidablesElement` with an attribute that can take a set of string
249
+ values, then you can use this to automatically convert between a space-separated list as the
250
+ attribute and a `Set` of strings as the property:
251
+
252
+ ```javascript
253
+ static get properties() {
254
+ return {
255
+ stuff: {
256
+ attribute: 'stuff',
257
+ converter: DecidablesConverterSet,
258
+ reflect: true,
259
+ },
260
+ };
261
+ };
262
+ ```
263
+
264
+ ```html
265
+ <decidables-something stuff="this that other"></decidables-something>
266
+ ```
267
+
268
+ And `this.stuff` will be a `Set` with members: `'this'`, `'that'`, and `'other'`
200
269
 
201
270
  ## Features/Bugs/Notes
202
271
 
@@ -206,8 +275,6 @@
206
275
  - Firefox - spinner arrows look ugly and asymmetrical
207
276
  - IE11 - No CSS variables outside custom elements (and not patched by ShadyCSS!)
208
277
 
209
- ---
210
-
211
278
  ## Development Tooling
212
279
 
213
280
  ### Local Scripts
@@ -223,8 +290,6 @@
223
290
  - `yarn build`
224
291
  - Builds bundles from `src/` to `lib/`
225
292
 
226
- ---
227
-
228
293
  ## File Organization
229
294
 
230
295
  - `decidables-elements/`
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@decidables/decidables-elements",
3
- "version": "0.0.3",
3
+ "version": "0.0.4",
4
4
  "description": "decidables-elements: Basic UI Web Components for the decidables project",
5
5
  "type": "module",
6
6
  "main": "./lib/decidablesElements.umd.min.js",
@@ -48,5 +48,5 @@
48
48
  "d3": "^7.3.0",
49
49
  "lit": "^2.1.2"
50
50
  },
51
- "gitHead": "316addbec77ac7c9b445b313ac4694e65164f104"
51
+ "gitHead": "f3e3115ad33a8e1ad5db8ae455b67f571f4561c6"
52
52
  }