@substrate-system/color-picker 0.0.3 → 0.0.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.
- package/README.md +24 -18
- package/dist/style.css +4 -1
- package/dist/style.css.map +1 -1
- package/dist/style.min.css +1 -1
- package/dist/style.min.css.map +1 -1
- package/package.json +3 -5
package/README.md
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
# color-picker
|
|
2
2
|
[](https://github.com/substrate-system/color-picker/actions/workflows/nodejs.yml)
|
|
3
3
|
[](README.md)
|
|
4
|
-
[](README.md)
|
|
5
5
|
[](https://semver.org/)
|
|
6
6
|
[](./CHANGELOG.md)
|
|
7
7
|
[](https://packagephobia.com/result?p=@substrate-system/color-picker)
|
|
@@ -28,7 +28,6 @@ This was originally forked from [Simonwep/pickr](https://github.com/Simonwep/pic
|
|
|
28
28
|
* [Keyboard navigation](#keyboard-navigation)
|
|
29
29
|
- [Modules](#modules)
|
|
30
30
|
* [ESM](#esm)
|
|
31
|
-
* [Common JS](#common-js)
|
|
32
31
|
- [CSS](#css)
|
|
33
32
|
* [Import CSS](#import-css)
|
|
34
33
|
* [Customize CSS](#customize-css)
|
|
@@ -59,7 +58,8 @@ const picker = document.querySelector('color-picker')
|
|
|
59
58
|
picker.swatches = ['#000', '#fff', '#ef4444', '#3b82f6']
|
|
60
59
|
picker.value = '#000'
|
|
61
60
|
|
|
62
|
-
|
|
61
|
+
// use the `.on` method
|
|
62
|
+
picker.on('change', (ev) => {
|
|
63
63
|
console.log(ev.detail.value) // selected color string
|
|
64
64
|
console.log(ev.detail.index) // index into swatches array
|
|
65
65
|
console.log(ev.detail.source) // 'pointer' | 'keyboard' | 'programmatic'
|
|
@@ -90,15 +90,27 @@ You can also set `value` via an HTML attribute:
|
|
|
90
90
|
|
|
91
91
|
### Events
|
|
92
92
|
|
|
93
|
-
#### `change`
|
|
93
|
+
#### `color-picker:change`
|
|
94
94
|
|
|
95
|
-
Fired when the selected color changes.
|
|
95
|
+
Fired when the selected color changes. This is a namespaced event,
|
|
96
|
+
[as described here](https://github.com/substrate-system/web-component#emitnamestring-opts-bubbles-cancelable-detail-boolean).
|
|
97
|
+
You should use the `.on` method to listen for it:
|
|
98
|
+
|
|
99
|
+
```ts
|
|
100
|
+
const picker = document.querySelector('color-picker')
|
|
101
|
+
|
|
102
|
+
// `.on` will convert the given 'change' event to
|
|
103
|
+
// the correct namespaced event name, `color-picker:change`.
|
|
104
|
+
picker.on('change', ev => {
|
|
105
|
+
// ...
|
|
106
|
+
})
|
|
107
|
+
```
|
|
96
108
|
|
|
97
109
|
```ts
|
|
98
110
|
interface ChangeDetail {
|
|
99
|
-
value:string
|
|
100
|
-
index:number
|
|
101
|
-
source:'pointer'
|
|
111
|
+
value:string|null
|
|
112
|
+
index:number|null
|
|
113
|
+
source:'pointer'|'keyboard'|'programmatic'
|
|
102
114
|
}
|
|
103
115
|
```
|
|
104
116
|
|
|
@@ -114,27 +126,21 @@ When a swatch has focus:
|
|
|
114
126
|
|
|
115
127
|
## Modules
|
|
116
128
|
|
|
117
|
-
This
|
|
129
|
+
This package ships ESM via the
|
|
118
130
|
[package.json `exports` field](https://nodejs.org/api/packages.html#exports).
|
|
119
131
|
|
|
120
132
|
### ESM
|
|
121
133
|
|
|
122
134
|
```js
|
|
123
|
-
import
|
|
135
|
+
import '@substrate-system/color-picker'
|
|
124
136
|
```
|
|
125
137
|
|
|
126
|
-
Or import
|
|
138
|
+
Or import the component class:
|
|
127
139
|
|
|
128
140
|
```js
|
|
129
141
|
import { ColorPicker } from '@substrate-system/color-picker'
|
|
130
142
|
```
|
|
131
143
|
|
|
132
|
-
### Common JS
|
|
133
|
-
|
|
134
|
-
```js
|
|
135
|
-
const { registerColorPicker } = require('@substrate-system/color-picker')
|
|
136
|
-
```
|
|
137
|
-
|
|
138
144
|
## CSS
|
|
139
145
|
|
|
140
146
|
### Import CSS
|
|
@@ -148,7 +154,7 @@ import '@substrate-system/color-picker/css'
|
|
|
148
154
|
Or minified:
|
|
149
155
|
|
|
150
156
|
```js
|
|
151
|
-
import '@substrate-system/color-picker/css
|
|
157
|
+
import '@substrate-system/color-picker/min/css'
|
|
152
158
|
```
|
|
153
159
|
|
|
154
160
|
### Customize CSS
|
package/dist/style.css
CHANGED
package/dist/style.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA
|
|
1
|
+
{"version":3,"mappings":"AAAA;;;;;AAIE;;;;;;;;AAQA;;;;;;;;;AASA","sources":["src/index.css"],"sourcesContent":["color-picker {\n display: inline-block;\n max-width: 100%;\n\n & .picker {\n display: flex;\n flex-wrap: wrap;\n gap: 2vw;\n align-items: center;\n justify-content: flex-start\n }\n\n & .swatch {\n width: 24px;\n height: 24px;\n border: 2px solid #444;\n border-radius: 999px;\n cursor: pointer;\n padding: 0;\n }\n\n & .swatch[aria-checked='true'] {\n box-shadow: 0 0 0 2px #fff inset;\n }\n}\n"],"names":[]}
|
package/dist/style.min.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
color-picker{display:inline-block}color-picker .picker{align-items:center;gap:
|
|
1
|
+
color-picker{max-width:100%;display:inline-block}color-picker .picker{flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:2vw;display:flex}color-picker .swatch{cursor:pointer;border:2px solid #444;border-radius:999px;width:24px;height:24px;padding:0}color-picker .swatch[aria-checked=true]{box-shadow:inset 0 0 0 2px #fff}
|
|
2
2
|
/*# sourceMappingURL=./dist/style.min.css.map */
|
package/dist/style.min.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,
|
|
1
|
+
{"version":3,"mappings":"AAAA,iDAIE,uGAQA,+GASA","sources":["src/index.css"],"sourcesContent":["color-picker {\n display: inline-block;\n max-width: 100%;\n\n & .picker {\n display: flex;\n flex-wrap: wrap;\n gap: 2vw;\n align-items: center;\n justify-content: flex-start\n }\n\n & .swatch {\n width: 24px;\n height: 24px;\n border: 2px solid #444;\n border-radius: 999px;\n cursor: pointer;\n padding: 0;\n }\n\n & .swatch[aria-checked='true'] {\n box-shadow: 0 0 0 2px #fff inset;\n }\n}\n"],"names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@substrate-system/color-picker",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.5",
|
|
4
4
|
"description": "Color picker web component",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "index.js",
|
|
@@ -16,14 +16,12 @@
|
|
|
16
16
|
"scripts": {
|
|
17
17
|
"lint": "eslint \"./**/*.{ts,js}\"",
|
|
18
18
|
"lint:style": "stylelint src/*.css",
|
|
19
|
-
"test": "
|
|
20
|
-
"test:node": "rm -rf .tmp-test && esbuild ./test/build-artifacts.test.ts ./test/example-smoke.test.ts ./test/example-interaction.test.ts --bundle --format=esm --platform=node --outdir=.tmp-test && node --test .tmp-test/*.js",
|
|
21
|
-
"test:browser": "esbuild --bundle --loader:.css=text ./test/index.ts | tapout",
|
|
19
|
+
"test": "esbuild --bundle --loader:.css=text ./test/index.ts | tapout",
|
|
22
20
|
"build-css": "lightningcss --targets \">= 0.25%\" --sourcemap --nesting src/index.css -o ./dist/style.css",
|
|
23
21
|
"build-css:min": "lightningcss --targets \">= 0.25%\" --sourcemap --minify --nesting src/index.css -o ./dist/style.min.css",
|
|
24
22
|
"build-esm": "esbuild src/index.ts --format=esm --metafile=dist/meta.json --keep-names --tsconfig=tsconfig.build.json --outdir=./dist --sourcemap && tsc --emitDeclarationOnly --project tsconfig.build.json --outDir dist",
|
|
25
23
|
"build-esm:min": "esbuild ./src/index.ts --format=esm --keep-names --bundle --loader:.css=text --tsconfig=tsconfig.build.json --minify --out-extension:.js=.min.js --outdir=./dist --sourcemap",
|
|
26
|
-
"build-example": "mkdir -p ./public && rm -rf ./public/* &&
|
|
24
|
+
"build-example": "mkdir -p ./public && rm -rf ./public/* && vite --mode staging --base=\"/color-picker\" build",
|
|
27
25
|
"build-docs": "typedoc --tsconfig tsconfig.build.json ./src/index.ts",
|
|
28
26
|
"build": "mkdir -p ./dist && rm -rf ./dist/* && npm run build-esm && npm run build-esm:min && npm run build-css && npm run build-css:min",
|
|
29
27
|
"start": "vite",
|