platypicker 1.0.9 → 1.0.10
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.
- package/package.json +4 -13
- package/platylogo-background.png +0 -0
- package/platylogo.ico +0 -0
- package/platylogo.png +0 -0
- package/platypicker.d.ts +34 -0
- package/src/platypicker.js +6 -4
- package/test/index.css +22 -0
- package/test/index.html +69 -0
package/package.json
CHANGED
|
@@ -1,21 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "platypicker",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.10",
|
|
4
4
|
"private": false,
|
|
5
|
-
"
|
|
6
|
-
"
|
|
7
|
-
"dist",
|
|
8
|
-
"src"
|
|
9
|
-
],
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "src/platypicker.js",
|
|
10
7
|
"repository": "https://github.com/Emberfire/UIComponents.git",
|
|
11
|
-
"
|
|
12
|
-
".": "./dist/platypicker.min.js"
|
|
13
|
-
},
|
|
8
|
+
"types": "src/platypicker.d.ts",
|
|
14
9
|
"dependencies": {
|
|
15
10
|
"bootstrap": "^5.3.8"
|
|
16
|
-
},
|
|
17
|
-
"devDependencies": {
|
|
18
|
-
"clean-css-cli": "^5.6.3",
|
|
19
|
-
"terser": "^5.46.0"
|
|
20
11
|
}
|
|
21
12
|
}
|
|
Binary file
|
package/platylogo.ico
ADDED
|
Binary file
|
package/platylogo.png
ADDED
|
Binary file
|
package/platypicker.d.ts
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
declare class Platypicker {
|
|
2
|
+
/**
|
|
3
|
+
* Maximum number of highlights in search results
|
|
4
|
+
*/
|
|
5
|
+
static maxHighlights: number;
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Localization strings
|
|
9
|
+
*/
|
|
10
|
+
static languageMap: {
|
|
11
|
+
searchPlaceholder: string;
|
|
12
|
+
selectAllButton: string;
|
|
13
|
+
selectNoneButton: string;
|
|
14
|
+
[key: string]: string;
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
/**
|
|
18
|
+
* Retrieve the Platypicker instance for a select element
|
|
19
|
+
*/
|
|
20
|
+
static get(element: HTMLSelectElement): Platypicker | undefined;
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* Destroy this Platypicker instance, remove listeners and DOM mocks
|
|
24
|
+
*/
|
|
25
|
+
destroy(): void;
|
|
26
|
+
|
|
27
|
+
/**
|
|
28
|
+
* Creates a new Platypicker for a <select> element
|
|
29
|
+
* @param selectElement The <select> element to enhance
|
|
30
|
+
*/
|
|
31
|
+
constructor(selectElement: HTMLSelectElement);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
export default Platypicker;
|
package/src/platypicker.js
CHANGED
|
@@ -439,7 +439,7 @@ export default class Platypicker {
|
|
|
439
439
|
}
|
|
440
440
|
}
|
|
441
441
|
|
|
442
|
-
static init() {
|
|
442
|
+
static #init() {
|
|
443
443
|
this.#highlight = new Highlight();
|
|
444
444
|
CSS.highlights.set("platypicker-highlight", this.#highlight);
|
|
445
445
|
|
|
@@ -448,6 +448,10 @@ export default class Platypicker {
|
|
|
448
448
|
}
|
|
449
449
|
}
|
|
450
450
|
|
|
451
|
+
static {
|
|
452
|
+
Platypicker.#init();
|
|
453
|
+
}
|
|
454
|
+
|
|
451
455
|
destroy() {
|
|
452
456
|
if (!Platypicker.#selects.has(this.#select)) return;
|
|
453
457
|
|
|
@@ -520,6 +524,4 @@ export default class Platypicker {
|
|
|
520
524
|
if (callNow) func.apply(context, args);
|
|
521
525
|
};
|
|
522
526
|
}
|
|
523
|
-
}
|
|
524
|
-
|
|
525
|
-
Platypicker.init();
|
|
527
|
+
}
|
package/test/index.css
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
@import "../src/platypicker.css";
|
|
2
|
+
|
|
3
|
+
:root {
|
|
4
|
+
--enter-animation-duration: .2s;
|
|
5
|
+
--exit-animation-duration: .3s;
|
|
6
|
+
--enter-animation-timing-function: cubic-bezier(.4, 0, 1, 1);
|
|
7
|
+
--exit-animation-timing-function: cubic-bezier(0, 0, .2, 1);
|
|
8
|
+
--dropdown-transition:
|
|
9
|
+
opacity var(--enter-animation-duration) var(--enter-animation-timing-function),
|
|
10
|
+
transform var(--enter-animation-duration) var(--enter-animation-timing-function),
|
|
11
|
+
overlay var(--enter-animation-duration) var(--enter-animation-timing-function) allow-discrete,
|
|
12
|
+
display var(--enter-animation-duration) var(--enter-animation-timing-function) allow-discrete;
|
|
13
|
+
|
|
14
|
+
font-family: Inter, system-ui, sans-serif;
|
|
15
|
+
font-feature-settings: "cv02", "cv03", "cv04", "cv11";
|
|
16
|
+
|
|
17
|
+
@supports (font-variation-settings: normal) {
|
|
18
|
+
& {
|
|
19
|
+
font-family: InterVariable, sans-serif;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
}
|
package/test/index.html
ADDED
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<title>Platypicker</title>
|
|
6
|
+
<link rel="icon" type="image/x-icon" href="../platylogo.ico">
|
|
7
|
+
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
|
|
8
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
|
|
9
|
+
<link rel="stylesheet" href="./index.css">
|
|
10
|
+
</head>
|
|
11
|
+
<body class="py-5 container">
|
|
12
|
+
<section class="row g-2 mt-2">
|
|
13
|
+
<div class="col">
|
|
14
|
+
<div class="card" style="resize: horizontal; overflow: auto;">
|
|
15
|
+
<div class="card-body">
|
|
16
|
+
<h3 class="card-title"><img height="30" src="../platylogo.png" alt="Platypicker"> Platypicker</h3>
|
|
17
|
+
<label class="form-label" for="platypicker">Pick a food</label>
|
|
18
|
+
<select id="platypicker" class="form-select" name="platypicker" data-toggle="platypicker" data-search="true" data-controls="true">
|
|
19
|
+
<option>Cheese 🧀</option>
|
|
20
|
+
<option>Bread 🍞</option>
|
|
21
|
+
<hr>
|
|
22
|
+
<option disabled data-subtext="disabled">Coffee ☕</option>
|
|
23
|
+
<option>Tea 🍵</option>
|
|
24
|
+
<optgroup label="Fruits" data-subtext="disabled">
|
|
25
|
+
<option value="1">Apple 🍎</option>
|
|
26
|
+
<option value="2">Orange 🍊</option>
|
|
27
|
+
<option value="3">Mango 🥭</option>
|
|
28
|
+
</optgroup>
|
|
29
|
+
<optgroup label="Vegetables (disabled)" disabled>
|
|
30
|
+
<option value="4">Cucumber 🥒</option>
|
|
31
|
+
<option value="5">Tomato 🍅</option>
|
|
32
|
+
<option value="6">Broccoli 🥦</option>
|
|
33
|
+
</optgroup>
|
|
34
|
+
<option>Carrot 🥕</option>
|
|
35
|
+
</select>
|
|
36
|
+
</div>
|
|
37
|
+
</div>
|
|
38
|
+
</div>
|
|
39
|
+
<div class="col">
|
|
40
|
+
<div class="card" style="resize: horizontal; overflow: auto;">
|
|
41
|
+
<div class="card-body">
|
|
42
|
+
<h3 class="card-title"><img height="30" src="../platylogo.png" alt="Platypicker"> Multi-platypicker</h3>
|
|
43
|
+
<label class="form-label" for="multi-platypicker">Pick a food</label>
|
|
44
|
+
<select id="multi-platypicker" class="form-select" name="multi-platypicker" multiple size="1" data-toggle="platypicker" data-search="true" data-controls="true">
|
|
45
|
+
<option>Cheese 🧀</option>
|
|
46
|
+
<option>Bread 🍞</option>
|
|
47
|
+
<hr>
|
|
48
|
+
<option disabled data-subtext="disabled">Coffee ☕</option>
|
|
49
|
+
<option>Tea 🍵</option>
|
|
50
|
+
<optgroup label="Fruits">
|
|
51
|
+
<option value="1">Apple 🍎</option>
|
|
52
|
+
<option value="2">Orange 🍊</option>
|
|
53
|
+
<option value="3">Mango 🥭</option>
|
|
54
|
+
</optgroup>
|
|
55
|
+
<optgroup label="Vegetables (disabled)" disabled>
|
|
56
|
+
<option value="4">Cucumber 🥒</option>
|
|
57
|
+
<option value="5">Tomato 🍅</option>
|
|
58
|
+
<option value="6">Broccoli 🥦</option>
|
|
59
|
+
</optgroup>
|
|
60
|
+
<option>Carrot 🥕</option>
|
|
61
|
+
</select>
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
</section>
|
|
66
|
+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
|
|
67
|
+
<script type="module" src="../src/platypicker.js"></script>
|
|
68
|
+
</body>
|
|
69
|
+
</html>
|