@stanko/ctrls 0.1.4 → 0.1.5

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 (8) hide show
  1. package/README.md +1 -1
  2. package/dist/ctrls/ctrl-dual-range.d.ts +2 -0
  3. package/dist/ctrls/ctrl-dual-range.js +9 -3
  4. package/dist/ctrls/ctrl-range.d.ts +2 -0
  5. package/dist/ctrls/ctrl-range.js +8 -3
  6. package/dist/ctrls.css +6 -0
  7. package/dist/ctrls.css.map +1 -1
  8. package/package.json +1 -1
package/README.md CHANGED
@@ -375,8 +375,8 @@ Thank you for stopping by! If you end up using Ctrls, please let me know, I woul
375
375
 
376
376
  * [ ] Allow users to pass a custom PRNG lib
377
377
  * [ ] Hash storage - check if there is an instance using hash storage already
378
- * [x] Add title which collapses the controls
379
378
  * [ ] Storage - local storage
379
+ * [x] Add title which collapses the controls
380
380
  * [x] Prefix input names' with `ctrl_${id}_${name}` to avoid collisions
381
381
  * [x] Demo - stop animation when not in viewport
382
382
  * [x] Demo - favicon and metadata
package/dist/ctrls/ctrl-dual-range.d.ts CHANGED
@@ -24,6 +24,7 @@ export declare class DualRangeCtrl implements Ctrl<DualRangeValue> {
24
24
  minInput: HTMLInputElement;
25
25
  maxInput: HTMLInputElement;
26
26
  dualRange: DualRangeInput;
27
+ valueSpan: HTMLSpanElement;
27
28
  constructor(config: CtrlTypeRegistry["dual-range"]["config"], onChange: CtrlChangeHandler<DualRangeValue>, onInput: CtrlChangeHandler<DualRangeValue>);
28
29
  parse: (string: string) => {
29
30
  min: number;
@@ -40,6 +41,7 @@ export declare class DualRangeCtrl implements Ctrl<DualRangeValue> {
40
41
  valueToString: (value?: DualRangeValue) => string;
41
42
  buildUI: () => {
42
43
  element: HTMLDivElement;
44
+ valueSpan: HTMLSpanElement;
43
45
  minInput: HTMLInputElement;
44
46
  maxInput: HTMLInputElement;
45
47
  };
package/dist/ctrls/ctrl-dual-range.js CHANGED
@@ -1,8 +1,6 @@
1
1
  import random from "../utils/random";
2
2
  import DualRangeInput from "@stanko/dual-range-input";
3
3
  import { roundToStep } from "../utils/round-to-step";
4
- // TODO
5
- // Add a span with the current value
6
4
  export class DualRangeCtrl {
7
5
  constructor(config, onChange, onInput) {
8
6
  this.type = "dual-range";
@@ -48,6 +46,7 @@ export class DualRangeCtrl {
48
46
  min: parseFloat(minInput.value),
49
47
  max: parseFloat(maxInput.value),
50
48
  };
49
+ this.update(this.value);
51
50
  this.onChange(this.name, this.value);
52
51
  });
53
52
  const maxInput = document.createElement("input");
@@ -61,6 +60,7 @@ export class DualRangeCtrl {
61
60
  min: parseFloat(minInput.value),
62
61
  max: parseFloat(maxInput.value),
63
62
  };
63
+ this.update(this.value);
64
64
  this.onChange(this.name, this.value);
65
65
  });
66
66
  const inputWrapper = document.createElement("div");
@@ -73,12 +73,16 @@ export class DualRangeCtrl {
73
73
  const label = document.createElement("span");
74
74
  label.textContent = this.label;
75
75
  label.classList.add("ctrls__control-label");
76
+ const valueSpan = document.createElement("span");
77
+ valueSpan.classList.add("ctrls__control-value");
78
+ label.appendChild(valueSpan);
76
79
  const element = document.createElement("div");
77
80
  element.classList.add("ctrls__control", "ctrls__control--dual-range");
78
81
  element.appendChild(label);
79
82
  element.appendChild(right);
80
83
  return {
81
84
  element,
85
+ valueSpan,
82
86
  minInput,
83
87
  maxInput,
84
88
  };
@@ -88,6 +92,7 @@ export class DualRangeCtrl {
88
92
  this.value = value;
89
93
  this.minInput.setAttribute("max", max.toString());
90
94
  this.maxInput.setAttribute("min", min.toString());
95
+ this.valueSpan.textContent = ` (${min}, ${max})`;
91
96
  this.minInput.value = value.min.toString();
92
97
  this.maxInput.value = value.max.toString();
93
98
  this.dualRange.update();
@@ -104,10 +109,11 @@ export class DualRangeCtrl {
104
109
  this.isRandomizationDisabled = config.isRandomizationDisabled || false;
105
110
  this.onChange = onChange;
106
111
  this.onInput = onInput;
107
- const { minInput, maxInput, element } = this.buildUI();
112
+ const { minInput, maxInput, element, valueSpan } = this.buildUI();
108
113
  this.minInput = minInput;
109
114
  this.maxInput = maxInput;
110
115
  this.element = element;
116
+ this.valueSpan = valueSpan;
111
117
  this.dualRange = new DualRangeInput(this.minInput, this.maxInput);
112
118
  }
113
119
  }
package/dist/ctrls/ctrl-range.d.ts CHANGED
@@ -12,6 +12,7 @@ export declare class RangeCtrl implements Ctrl<number> {
12
12
  step: number;
13
13
  element: HTMLElement;
14
14
  input: HTMLInputElement;
15
+ valueSpan: HTMLSpanElement;
15
16
  constructor(config: CtrlTypeRegistry["range"]["config"], onChange: CtrlChangeHandler<number>, onInput: CtrlChangeHandler<number>);
16
17
  parse: (string: string) => number;
17
18
  getRandomValue: () => number;
@@ -20,6 +21,7 @@ export declare class RangeCtrl implements Ctrl<number> {
20
21
  buildUI: () => {
21
22
  element: HTMLLabelElement;
22
23
  input: HTMLInputElement;
24
+ valueSpan: HTMLSpanElement;
23
25
  };
24
26
  update: (value: number) => void;
25
27
  }
package/dist/ctrls/ctrl-range.js CHANGED
@@ -1,7 +1,5 @@
1
1
  import random from "../utils/random";
2
2
  import { roundToStep } from "../utils/round-to-step";
3
- // TODO
4
- // Add a span with the current value
5
3
  export class RangeCtrl {
6
4
  constructor(config, onChange, onInput) {
7
5
  this.type = "range";
@@ -34,6 +32,7 @@ export class RangeCtrl {
34
32
  });
35
33
  input.addEventListener("change", () => {
36
34
  this.value = this.parse(input.value);
35
+ this.update(this.value);
37
36
  this.onChange(this.name, this.value);
38
37
  });
39
38
  input.addEventListener("input", () => {
@@ -47,6 +46,9 @@ export class RangeCtrl {
47
46
  const label = document.createElement("span");
48
47
  label.textContent = this.label;
49
48
  label.classList.add("ctrls__control-label");
49
+ const valueSpan = document.createElement("span");
50
+ valueSpan.classList.add("ctrls__control-value");
51
+ label.appendChild(valueSpan);
50
52
  const element = document.createElement("label");
51
53
  element.classList.add("ctrls__control", "ctrls__control--range");
52
54
  element.appendChild(label);
@@ -54,12 +56,14 @@ export class RangeCtrl {
54
56
  return {
55
57
  element,
56
58
  input,
59
+ valueSpan,
57
60
  };
58
61
  };
59
62
  this.update = (value) => {
60
63
  const { min, max } = this;
61
64
  this.value = value;
62
65
  this.input.value = value.toString();
66
+ this.valueSpan.textContent = ` (${value})`;
63
67
  const percentage = ((this.value - min) / (max - min)) * 100;
64
68
  this.element.style.setProperty("--gradient-position", `${percentage.toFixed(2)}%`);
65
69
  };
@@ -75,8 +79,9 @@ export class RangeCtrl {
75
79
  config.defaultValue === undefined
76
80
  ? this.getDefaultValue()
77
81
  : config.defaultValue;
78
- const { input, element } = this.buildUI();
82
+ const { input, element, valueSpan } = this.buildUI();
79
83
  this.input = input;
84
+ this.valueSpan = valueSpan;
80
85
  this.element = element;
81
86
  this.update(this.value);
82
87
  }
package/dist/ctrls.css CHANGED
@@ -173,6 +173,7 @@
173
173
  --ctrls-label-width: 5rem;
174
174
  --ctrls-width: 22rem;
175
175
  --ctrls-font-size: 0.75rem;
176
+ --ctrls-value-font-size: 0.6875rem;
176
177
  --ctrls-c: 0.25;
177
178
  --ctrls-h: 245;
178
179
  --ctrls-theme: oklch(0.65 var(--ctrls-c) var(--ctrls-h));
@@ -392,6 +393,11 @@
392
393
  padding-right: 0.25rem;
393
394
  }
394
395
 
396
+ .ctrls__control-value {
397
+ font-weight: 400;
398
+ font-size: var(--ctrls-value-font-size);
399
+ }
400
+
395
401
  .ctrls__control-right {
396
402
  flex: auto 1 1;
397
403
  }
package/dist/ctrls.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../node_modules/@stanko/dual-range-input/dist/index.css","../src/scss/_ctrls.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;;AC3IF;EACE;AAAA;AAAA;EAGA;EACA;EACA;EACA;EAGA;EACA;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EAGA;EACA;EACA;EAGA;EACA;EAGA;EAGA;EAEA;EACA;EAEA;EACA;EAGA;EAGA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAGA;EACA;EAEA;EAEA;EACA;EAEA;EAGA;EAEA;EACA;;;AA+CF;EACE;IA3CA;IAEA;IACA;IAGA;IACA;IACA;IACA;IACA;IACA;IAGA;IAGA;IACA;IACA;IAGA;IACA;IAGA;IAGA;IAEA;IAGA;IAGA;AAAA;AAAA;;;AAWF;EAhDE;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EAGA;EACA;EACA;EAGA;EACA;EAGA;EAGA;EAEA;EAGA;EAGA;AAAA;AAAA;;;AAiBF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EAGE;EACA;EACA;;AAGF;AAAA;EAEE;EACA;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAGF;EAEE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAGF;EAEE;;AAGF;EACE;EACA;EACA,YACE;;AAIJ;EACE;;;AAKJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;;;AAOA;EACE;;AAGF;AAAA;AAAA;EAEE;;;AAKN;AAEA;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAKA;AAAA;EACE;EACA;EACA;;;AAIJ;AAEA;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAKJ;EACE;EACA;EACA;;;AAIF;EACE;;;AAIF;EACE;;;AAIF;EACE;EACA;;;AAGF;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAmCJ;EA5BE;EACA;EACA;EACA;EACA;EAEA;;;AA0BF;EAhCE;EACA;EACA;EACA;EACA;EAEA;;;AA8BF;EAtBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAkBA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAKF;EAvDE;EACA;EACA;EACA;EACA;EAEA;;;AAqDF;EA7CE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAwCA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAEA;EAGE;;AAEA;EACE;;AANJ;EASE;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;;AAIJ;AAEA;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAEF;EACA;EACA;;AAEA;EAEE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAEA;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;;AAIE;EACE;;;AAKN;AAEA;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAGF;EAEE;EACA;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EAEE;;AAEA;EACE;EACA","file":"ctrls.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../node_modules/@stanko/dual-range-input/dist/index.css","../src/scss/_ctrls.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;;AC3IF;EACE;AAAA;AAAA;EAGA;EACA;EACA;EACA;EACA;EAGA;EACA;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EAGA;EACA;EACA;EAGA;EACA;EAGA;EAGA;EAEA;EACA;EAEA;EACA;EAGA;EAGA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAGA;EACA;EAEA;EAEA;EACA;EAEA;EAGA;EAEA;EACA;;;AA+CF;EACE;IA3CA;IAEA;IACA;IAGA;IACA;IACA;IACA;IACA;IACA;IAGA;IAGA;IACA;IACA;IAGA;IACA;IAGA;IAGA;IAEA;IAGA;IAGA;AAAA;AAAA;;;AAWF;EAhDE;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EAGA;EACA;EACA;EAGA;EACA;EAGA;EAGA;EAEA;EAGA;EAGA;AAAA;AAAA;;;AAiBF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EAGE;EACA;EACA;;AAGF;AAAA;EAEE;EACA;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAGF;EAEE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAGF;EAEE;;AAGF;EACE;EACA;EACA,YACE;;AAIJ;EACE;;;AAKJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;;;AAOA;EACE;;AAGF;AAAA;AAAA;EAEE;;;AAKN;AAEA;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAKA;AAAA;EACE;EACA;EACA;;;AAIJ;AAEA;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAKJ;EACE;EACA;EACA;;;AAIF;EACE;;;AAIF;EACE;;;AAIF;EACE;EACA;;;AAGF;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAmCJ;EA5BE;EACA;EACA;EACA;EACA;EAEA;;;AA0BF;EAhCE;EACA;EACA;EACA;EACA;EAEA;;;AA8BF;EAtBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAkBA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAKF;EAvDE;EACA;EACA;EACA;EACA;EAEA;;;AAqDF;EA7CE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAwCA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAEA;EAGE;;AAEA;EACE;;AANJ;EASE;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;;AAIJ;AAEA;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAEF;EACA;EACA;;AAEA;EAEE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAEA;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;;AAIE;EACE;;;AAKN;AAEA;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAGF;EAEE;EACA;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EAEE;;AAEA;EACE;EACA","file":"ctrls.css"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stanko/ctrls",
3
- "version": "0.1.4",
3
+ "version": "0.1.5",
4
4
  "type": "module",
5
5
  "scripts": {
6
6
  "start": "npm run parse-markdown && vite",