@electrovir/color 1.7.0 → 1.7.2
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.
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
/* node:coverage disable */
|
|
2
2
|
import { checkWrap } from '@augment-vir/assert';
|
|
3
3
|
import { getObjectTypedValues } from '@augment-vir/common';
|
|
4
|
-
import { css, defineElement, defineElementEvent, html, listen, nothing
|
|
4
|
+
import { css, defineElement, defineElementEvent, html, listen, nothing } from 'element-vir';
|
|
5
|
+
import { CssVarSyntaxName } from 'lit-css-vars';
|
|
5
6
|
import { Copy24Icon, noNativeFormStyles, viraFontCssVars, viraFormCssVars, ViraIcon, ViraInput, ViraPopUpTrigger, ViraSelect, viraShadows, } from 'vira';
|
|
6
7
|
import { ColorFormatName, colorFormats } from '../data/color-class/color-formats.js';
|
|
7
8
|
import { Color } from '../data/color-class/color.js';
|
|
@@ -22,8 +23,14 @@ const colorFormatOptions = getObjectTypedValues(ColorFormatName).map((formatName
|
|
|
22
23
|
export const VirColorPicker = defineElement()({
|
|
23
24
|
tagName: 'vir-color-picker',
|
|
24
25
|
cssVars: {
|
|
25
|
-
'vir-color-picker-swatch-width':
|
|
26
|
-
|
|
26
|
+
'vir-color-picker-swatch-width': {
|
|
27
|
+
default: '100px',
|
|
28
|
+
syntax: CssVarSyntaxName.Length,
|
|
29
|
+
},
|
|
30
|
+
'vir-color-picker-swatch-height': {
|
|
31
|
+
default: '100px',
|
|
32
|
+
syntax: CssVarSyntaxName.Length,
|
|
33
|
+
},
|
|
27
34
|
},
|
|
28
35
|
state() {
|
|
29
36
|
return {
|
|
@@ -190,14 +197,6 @@ export const VirColorPicker = defineElement()({
|
|
|
190
197
|
<${ViraSelect.assign({
|
|
191
198
|
options: colorFormatOptions,
|
|
192
199
|
value: state.selectedFormatName,
|
|
193
|
-
})}
|
|
194
|
-
${onDomCreated(() => {
|
|
195
|
-
const storedFormat = colorLocalStorageClient.get.lastFormat();
|
|
196
|
-
if (storedFormat) {
|
|
197
|
-
updateState({
|
|
198
|
-
selectedFormatName: storedFormat,
|
|
199
|
-
});
|
|
200
|
-
}
|
|
201
200
|
})}
|
|
202
201
|
${listen(ViraSelect.events.valueChange, (event) => {
|
|
203
202
|
const selectedFormat = checkWrap.isEnumValue(event.detail, ColorFormatName);
|
|
@@ -234,7 +233,18 @@ export const VirColorPicker = defineElement()({
|
|
|
234
233
|
<${ViraPopUpTrigger.assign({
|
|
235
234
|
keepOpenAfterInteraction: true,
|
|
236
235
|
})}>
|
|
237
|
-
<button
|
|
236
|
+
<button
|
|
237
|
+
class="trigger"
|
|
238
|
+
slot=${ViraPopUpTrigger.slotNames.trigger}
|
|
239
|
+
${listen('mousedown', () => {
|
|
240
|
+
const storedFormat = colorLocalStorageClient.get.lastFormat();
|
|
241
|
+
if (storedFormat) {
|
|
242
|
+
updateState({
|
|
243
|
+
selectedFormatName: storedFormat,
|
|
244
|
+
});
|
|
245
|
+
}
|
|
246
|
+
})}
|
|
247
|
+
>
|
|
238
248
|
${swatchTemplate}
|
|
239
249
|
</button>
|
|
240
250
|
<div class="pop-up" slot=${ViraPopUpTrigger.slotNames.popUp}>
|
|
@@ -245,17 +255,3 @@ export const VirColorPicker = defineElement()({
|
|
|
245
255
|
}
|
|
246
256
|
},
|
|
247
257
|
});
|
|
248
|
-
if ('CSS' in globalThis) {
|
|
249
|
-
globalThis.CSS.registerProperty({
|
|
250
|
-
name: String(VirColorPicker.cssVars['vir-color-picker-swatch-width'].name),
|
|
251
|
-
syntax: '<length>',
|
|
252
|
-
inherits: true,
|
|
253
|
-
initialValue: VirColorPicker.cssVars['vir-color-picker-swatch-width'].default,
|
|
254
|
-
});
|
|
255
|
-
globalThis.CSS.registerProperty({
|
|
256
|
-
name: String(VirColorPicker.cssVars['vir-color-picker-swatch-height'].name),
|
|
257
|
-
syntax: '<length>',
|
|
258
|
-
inherits: true,
|
|
259
|
-
initialValue: VirColorPicker.cssVars['vir-color-picker-swatch-height'].default,
|
|
260
|
-
});
|
|
261
|
-
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@electrovir/color",
|
|
3
|
-
"version": "1.7.
|
|
3
|
+
"version": "1.7.2",
|
|
4
4
|
"description": "A wrapper for culori with an extremely simple API.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"color",
|
|
@@ -50,47 +50,47 @@
|
|
|
50
50
|
"test:update": "npm test update"
|
|
51
51
|
},
|
|
52
52
|
"dependencies": {
|
|
53
|
-
"@augment-vir/assert": "^31.
|
|
54
|
-
"@augment-vir/common": "^31.
|
|
55
|
-
"@augment-vir/web": "^31.
|
|
53
|
+
"@augment-vir/assert": "^31.59.0",
|
|
54
|
+
"@augment-vir/common": "^31.59.0",
|
|
55
|
+
"@augment-vir/web": "^31.59.0",
|
|
56
56
|
"@electrovir/local-storage-client": "^0.0.2",
|
|
57
57
|
"apca-w3": "^0.1.9",
|
|
58
58
|
"color-name": "^2.1.0",
|
|
59
59
|
"culori": "^4.0.2",
|
|
60
60
|
"object-shape-tester": "^6.11.0",
|
|
61
|
-
"type-fest": "^5.
|
|
61
|
+
"type-fest": "^5.4.1"
|
|
62
62
|
},
|
|
63
63
|
"devDependencies": {
|
|
64
|
-
"@augment-vir/test": "^31.
|
|
64
|
+
"@augment-vir/test": "^31.59.0",
|
|
65
65
|
"@eslint/eslintrc": "^3.3.3",
|
|
66
66
|
"@eslint/js": "^9.39.2",
|
|
67
67
|
"@stylistic/eslint-plugin": "^5.7.0",
|
|
68
68
|
"@stylistic/eslint-plugin-ts": "^4.4.1",
|
|
69
69
|
"@types/color-name": "^2.0.0",
|
|
70
70
|
"@types/culori": "^4.0.1",
|
|
71
|
-
"@typescript-eslint/eslint-plugin": "^8.
|
|
71
|
+
"@typescript-eslint/eslint-plugin": "^8.53.0",
|
|
72
72
|
"@web/dev-server-esbuild": "^1.0.4",
|
|
73
73
|
"@web/test-runner": "^0.20.2",
|
|
74
74
|
"@web/test-runner-commands": "^0.9.0",
|
|
75
75
|
"@web/test-runner-playwright": "^0.11.1",
|
|
76
76
|
"@web/test-runner-visual-regression": "^0.10.0",
|
|
77
|
-
"cspell": "^9.
|
|
77
|
+
"cspell": "^9.6.0",
|
|
78
78
|
"dependency-cruiser": "^17.3.6",
|
|
79
|
-
"element-book": "^26.
|
|
80
|
-
"element-vir": "^26.14.
|
|
79
|
+
"element-book": "^26.15.2",
|
|
80
|
+
"element-vir": "^26.14.2",
|
|
81
81
|
"esbuild": "^0.27.2",
|
|
82
82
|
"eslint": "^9.39.2",
|
|
83
83
|
"eslint-config-prettier": "^10.1.8",
|
|
84
84
|
"eslint-plugin-jsdoc": "^62.0.0",
|
|
85
85
|
"eslint-plugin-monorepo-cop": "^1.0.2",
|
|
86
|
-
"eslint-plugin-playwright": "^2.
|
|
87
|
-
"eslint-plugin-prettier": "^5.5.
|
|
86
|
+
"eslint-plugin-playwright": "^2.5.0",
|
|
87
|
+
"eslint-plugin-prettier": "^5.5.5",
|
|
88
88
|
"eslint-plugin-require-extensions": "^0.1.3",
|
|
89
89
|
"eslint-plugin-sonarjs": "^3.0.5",
|
|
90
90
|
"eslint-plugin-unicorn": "^62.0.0",
|
|
91
91
|
"execute-in-browser": "^1.0.9",
|
|
92
92
|
"istanbul-smart-text-reporter": "^1.1.5",
|
|
93
|
-
"lit-css-vars": "^3.
|
|
93
|
+
"lit-css-vars": "^3.2.2",
|
|
94
94
|
"markdown-code-example-inserter": "^3.0.3",
|
|
95
95
|
"npm-check-updates": "^19.3.1",
|
|
96
96
|
"prettier": "~3.3.3",
|
|
@@ -98,15 +98,15 @@
|
|
|
98
98
|
"prettier-plugin-jsdoc": "^1.8.0",
|
|
99
99
|
"prettier-plugin-multiline-arrays": "^4.1.3",
|
|
100
100
|
"prettier-plugin-organize-imports": "^4.3.0",
|
|
101
|
-
"prettier-plugin-packagejson": "^2.5.
|
|
102
|
-
"prettier-plugin-sort-json": "^4.
|
|
101
|
+
"prettier-plugin-packagejson": "^2.5.21",
|
|
102
|
+
"prettier-plugin-sort-json": "^4.2.0",
|
|
103
103
|
"prettier-plugin-toml": "^2.0.6",
|
|
104
104
|
"runstorm": "^1.0.0",
|
|
105
|
-
"typedoc": "^0.28.
|
|
105
|
+
"typedoc": "^0.28.16",
|
|
106
106
|
"typescript": "^5.9.3",
|
|
107
|
-
"typescript-eslint": "^8.
|
|
108
|
-
"vira": "^28.19.
|
|
109
|
-
"virmator": "^14.4.
|
|
107
|
+
"typescript-eslint": "^8.53.0",
|
|
108
|
+
"vira": "^28.19.6",
|
|
109
|
+
"virmator": "^14.4.3",
|
|
110
110
|
"vite": "^7.3.1"
|
|
111
111
|
},
|
|
112
112
|
"peerDependencies": {
|