platypicker 1.0.6 → 1.0.8

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/package.json +1 -1
  2. package/src/platypicker.css +19 -20
  3. package/src/platypicker.js +1 -35
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "platypicker",
3
- "version": "1.0.6",
3
+ "version": "1.0.8",
4
4
  "private": false,
5
5
  "main": "dist/platypicker.min.js",
6
6
  "files": [
package/src/platypicker.css CHANGED
@@ -1,10 +1,12 @@
1
1
  @media (any-pointer: fine), (any-hover: hover) {
2
2
  *:has(> select.platypicker) {
3
3
  anchor-scope: --platypicker;
4
-
4
+
5
5
  select.platypicker {
6
6
  anchor-name: --platypicker;
7
-
7
+ white-space: nowrap;
8
+ min-width: max-content;
9
+
8
10
  &:not(:has(option:checked))::after {
9
11
  content: "\00a0";
10
12
  visibility: hidden;
@@ -13,7 +15,7 @@
13
15
  &:not([multiple]), &::picker(select) {
14
16
  appearance: base-select !important;
15
17
  }
16
-
18
+
17
19
  &::picker(select) {
18
20
  display: none;
19
21
  }
@@ -25,7 +27,7 @@
25
27
  &.platypicker[multiple] {
26
28
  background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
27
29
  }
28
-
30
+
29
31
  & + .dropdown-menu[popover] {
30
32
  display: revert;
31
33
  position-anchor: --platypicker;
@@ -33,13 +35,13 @@
33
35
  left: anchor(left) !important;
34
36
  min-width: anchor-size();
35
37
  max-height: 30rem;
36
-
38
+
37
39
  transform: none !important;
38
-
40
+
39
41
  .input-group:not(:has(*:not(.d-none))) {
40
42
  display: none;
41
43
  }
42
-
44
+
43
45
  .input-group input:not(:has(~ button:not(.d-none))) {
44
46
  border-top-right-radius: var(--bs-border-radius);
45
47
  border-bottom-right-radius: var(--bs-border-radius);
@@ -49,13 +51,13 @@
49
51
  border-bottom-right-radius: var(--bs-border-radius-sm);
50
52
  }
51
53
  }
52
-
54
+
53
55
  .input-group input.d-none {
54
56
  & ~ button {
55
57
  flex-grow: 1;
56
58
  flex-basis: 50%;
57
59
  }
58
-
60
+
59
61
  & + button:not(.d-none),
60
62
  & + button.d-none + button:not(.d-none) {
61
63
  border-top-left-radius: var(--bs-border-radius);
@@ -67,37 +69,34 @@
67
69
  }
68
70
  }
69
71
  }
70
-
72
+
71
73
  .input-group button:not(.d-none) + button:not(.d-none) {
72
74
  border-left-width: 0;
73
75
  }
74
-
76
+
75
77
  li:has(.dropdown-item.d-none) ~ li:has(.dropdown-divider) {
76
78
  display: none;
77
79
  }
78
-
80
+
79
81
  li:has(.dropdown-item:not(.d-none)) ~ li:has(.dropdown-divider) {
80
82
  display: revert;
81
83
  }
82
-
84
+
83
85
  li:has(.dropdown-item.d-none), /* Hidden items */
84
86
  li:has(.dropdown-header.d-none), /* Hidden headers */
85
87
  li:has(.dropdown-divider.d-none), /* Hidden dividers */
86
88
  li:has(.dropdown-header):not(:has(~ li .dropdown-item:not(.d-none))), /* Headers without any visible items */
87
- li:has(.dropdown-divider):not(:has(~ li .dropdown-item:not(.d-none))) /* Dividers without any trailing items */ {
89
+ li:has(.dropdown-divider):not(:has(~ li .dropdown-item:not(.d-none))) /* Dividers without any trailing items */
90
+ {
88
91
  display: none;
89
92
  }
90
93
  }
91
-
92
- selectedcontent {
93
- white-space: nowrap;
94
- }
95
94
  }
96
95
  }
97
-
96
+
98
97
  .dropdown-item::highlight(platypicker-highlight),
99
98
  .dropdown-item small::highlight(platypicker-highlight) {
100
- background-color: #FEE6B1;
99
+ background-color: #fee6b1;
101
100
  color: black;
102
101
  }
103
102
  }
package/src/platypicker.js CHANGED
@@ -32,7 +32,7 @@ export default class Platypicker {
32
32
  }
33
33
 
34
34
  static get(element) {
35
- return this.#selects.get(element);
35
+ return Platypicker.#selects.get(element);
36
36
  }
37
37
 
38
38
  constructor(selectElement) {
@@ -445,40 +445,6 @@ export default class Platypicker {
445
445
  for (const select of document.querySelectorAll("select[data-toggle=platypicker]")) {
446
446
  new Platypicker(select);
447
447
  }
448
-
449
- // Place an observer to create a select whenever a select element with a select toggle gets added.
450
- new MutationObserver(mutations => {
451
- for (const mutation of mutations) {
452
- for (const addedNode of mutation.addedNodes) {
453
- if (!(addedNode instanceof HTMLElement)) continue;
454
-
455
- let toggles = [];
456
- if (addedNode.dataset?.toggle === "platypicker") toggles.push(addedNode);
457
- toggles.push(...addedNode.querySelectorAll("[data-toggle=platypicker]"));
458
-
459
- for (const toggle of toggles) {
460
- if (this.#selects.has(toggle)) continue;
461
-
462
- new Platypicker(toggle);
463
- }
464
- }
465
-
466
- for (const removedNode of mutation.removedNodes) {
467
- if (!(removedNode instanceof HTMLElement)) continue;
468
-
469
- let toggles = [];
470
- if (removedNode.dataset?.toggle === "platypicker") toggles.push(removedNode);
471
- toggles.push(...removedNode.querySelectorAll("[data-toggle=platypicker]"));
472
-
473
- for (const toggle of toggles) {
474
- Platypicker.get(toggle)?.#destroy();
475
- }
476
- }
477
- }
478
- }).observe(document, {
479
- childList: true,
480
- subtree: true
481
- });
482
448
  }
483
449
 
484
450
  #destroy() {