element-book 26.15.2 → 26.16.0
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,7 @@
|
|
|
1
1
|
import { check } from '@augment-vir/assert';
|
|
2
|
-
import {
|
|
2
|
+
import { VirColorPicker } from '@electrovir/color';
|
|
3
3
|
import { css, defineElementEvent, html, listen, renderIf } from 'element-vir';
|
|
4
|
-
import { Options24Icon, ViraIcon, ViraInput } from 'vira';
|
|
4
|
+
import { Options24Icon, ViraCheckbox, ViraIcon, ViraInput, ViraSelect } from 'vira';
|
|
5
5
|
import { BookPageControlType, isControlInitType, } from '../../../../data/book-entry/book-page/book-page-controls.js';
|
|
6
6
|
import { colorThemeCssVars } from '../../../color-theme/color-theme.js';
|
|
7
7
|
import { defineBookElement } from '../../define-book-element.js';
|
|
@@ -41,7 +41,7 @@ export const BookPageControls = defineBookElement()({
|
|
|
41
41
|
color: red;
|
|
42
42
|
}
|
|
43
43
|
|
|
44
|
-
${ViraInput} {
|
|
44
|
+
${ViraInput}, ${ViraSelect} {
|
|
45
45
|
height: 24px;
|
|
46
46
|
max-width: 128px;
|
|
47
47
|
}
|
|
@@ -112,26 +112,28 @@ function createControlInput(value, controlInit, valueChange) {
|
|
|
112
112
|
}
|
|
113
113
|
else if (isControlInitType(controlInit, BookPageControlType.Checkbox)) {
|
|
114
114
|
return html `
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
?checked=${value}
|
|
118
|
-
${listen('input', (event) => {
|
|
119
|
-
const inputElement = extractEventTarget(event, HTMLInputElement);
|
|
120
|
-
valueChange(inputElement.checked);
|
|
115
|
+
<${ViraCheckbox.assign({
|
|
116
|
+
value: !!value,
|
|
121
117
|
})}
|
|
122
|
-
|
|
118
|
+
${listen(ViraCheckbox.events.valueChange, (event) => {
|
|
119
|
+
valueChange(event.detail);
|
|
120
|
+
})}
|
|
121
|
+
></${ViraCheckbox}>
|
|
123
122
|
`;
|
|
124
123
|
}
|
|
125
124
|
else if (isControlInitType(controlInit, BookPageControlType.Color)) {
|
|
126
125
|
return html `
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
126
|
+
<${VirColorPicker.assign({
|
|
127
|
+
color: value,
|
|
128
|
+
})}
|
|
129
|
+
style=${css `
|
|
130
|
+
${VirColorPicker.cssVars['vir-color-picker-swatch-height'].name}: 24px;
|
|
131
|
+
${VirColorPicker.cssVars['vir-color-picker-swatch-width'].name}: 24px;
|
|
132
|
+
`}
|
|
133
|
+
${listen(VirColorPicker.events.colorChange, (event) => {
|
|
134
|
+
valueChange(event.detail);
|
|
133
135
|
})}
|
|
134
|
-
|
|
136
|
+
></${VirColorPicker}>
|
|
135
137
|
`;
|
|
136
138
|
}
|
|
137
139
|
else if (isControlInitType(controlInit, BookPageControlType.Text)) {
|
|
@@ -149,33 +151,31 @@ function createControlInput(value, controlInit, valueChange) {
|
|
|
149
151
|
}
|
|
150
152
|
else if (isControlInitType(controlInit, BookPageControlType.Number)) {
|
|
151
153
|
return html `
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
${listen('input', (event) => {
|
|
156
|
-
const inputElement = extractEventTarget(event, HTMLInputElement);
|
|
157
|
-
valueChange(inputElement.value);
|
|
154
|
+
<${ViraInput.assign({
|
|
155
|
+
value,
|
|
156
|
+
allowedInputs: /\d/,
|
|
158
157
|
})}
|
|
159
|
-
|
|
158
|
+
${listen(ViraInput.events.valueChange, (event) => {
|
|
159
|
+
valueChange(event.detail);
|
|
160
|
+
})}
|
|
161
|
+
></${ViraInput}>
|
|
160
162
|
`;
|
|
161
163
|
}
|
|
162
164
|
else if (isControlInitType(controlInit, BookPageControlType.Dropdown)) {
|
|
163
165
|
return html `
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
166
|
+
<${ViraSelect.assign({
|
|
167
|
+
value,
|
|
168
|
+
options: controlInit.options.map((option) => {
|
|
169
|
+
return {
|
|
170
|
+
label: option,
|
|
171
|
+
value: option,
|
|
172
|
+
};
|
|
173
|
+
}),
|
|
169
174
|
})}
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
return html `
|
|
173
|
-
<option ?selected=${optionLabel === value} value=${optionLabel}>
|
|
174
|
-
${optionLabel}
|
|
175
|
-
</option>
|
|
176
|
-
`;
|
|
175
|
+
${listen(ViraSelect.events.valueChange, (event) => {
|
|
176
|
+
valueChange(event.detail);
|
|
177
177
|
})}
|
|
178
|
-
|
|
178
|
+
></${ViraSelect}>
|
|
179
179
|
`;
|
|
180
180
|
}
|
|
181
181
|
else if (isControlInitType(controlInit, BookPageControlType.Custom)) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "element-book",
|
|
3
|
-
"version": "26.
|
|
3
|
+
"version": "26.16.0",
|
|
4
4
|
"keywords": [
|
|
5
5
|
"book",
|
|
6
6
|
"design system",
|
|
@@ -44,9 +44,10 @@
|
|
|
44
44
|
"@augment-vir/assert": "^31.59.0",
|
|
45
45
|
"@augment-vir/common": "^31.59.0",
|
|
46
46
|
"@augment-vir/web": "^31.59.0",
|
|
47
|
+
"@electrovir/color": "^1.7.6",
|
|
47
48
|
"colorjs.io": "^0.6.1",
|
|
48
49
|
"date-vir": "^8.1.0",
|
|
49
|
-
"lit-css-vars": "^3.
|
|
50
|
+
"lit-css-vars": "^3.3.0",
|
|
50
51
|
"spa-router-vir": "^6.4.1",
|
|
51
52
|
"typed-event-target": "^4.1.0"
|
|
52
53
|
},
|
|
@@ -57,13 +58,13 @@
|
|
|
57
58
|
"@web/test-runner-commands": "^0.9.0",
|
|
58
59
|
"@web/test-runner-playwright": "^0.11.1",
|
|
59
60
|
"@web/test-runner-visual-regression": "^0.10.0",
|
|
60
|
-
"element-vir": "^26.14.
|
|
61
|
+
"element-vir": "^26.14.3",
|
|
61
62
|
"istanbul-smart-text-reporter": "^1.1.5",
|
|
62
63
|
"markdown-code-example-inserter": "^3.0.3",
|
|
63
64
|
"type-fest": "^5.4.1",
|
|
64
65
|
"typedoc": "^0.28.16",
|
|
65
66
|
"typescript": "5.9.3",
|
|
66
|
-
"vira": "^
|
|
67
|
+
"vira": "^29.0.0"
|
|
67
68
|
},
|
|
68
69
|
"peerDependencies": {
|
|
69
70
|
"element-vir": ">=17",
|