vira 23.1.1 → 23.1.3
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/dist/elements/shared-text-input-logic.d.ts +3 -2
- package/dist/elements/shared-text-input-logic.js +16 -27
- package/dist/elements/vira-input.element.js +7 -2
- package/dist/icons/icon-svgs/chat-24.icon.js +1 -1
- package/dist/icons/icon-svgs/commit-24.icon.js +1 -0
- package/dist/icons/icon-svgs/document-24.icon.js +7 -1
- package/dist/icons/icon-svgs/pencil-24.icon.js +1 -1
- package/dist/icons/icon-svgs/shield-24.icon.js +7 -1
- package/dist/icons/icon-svgs/star-24.icon.js +7 -1
- package/package.json +15 -15
|
@@ -48,9 +48,10 @@ export declare function filterTextInputValue(inputs: IsAllowedInputs): {
|
|
|
48
48
|
*
|
|
49
49
|
* @category Internal
|
|
50
50
|
*/
|
|
51
|
-
export declare function textInputListener({ inputs,
|
|
51
|
+
export declare function textInputListener({ inputs, previousValue, event, inputBlockedCallback, newValueCallback, }: {
|
|
52
52
|
inputs: SharedTextInputElementInputs;
|
|
53
|
-
|
|
53
|
+
/** The value of the input element before this listener fired. */
|
|
54
|
+
previousValue: string;
|
|
54
55
|
event: Event;
|
|
55
56
|
inputBlockedCallback: (blockedInput: string) => void;
|
|
56
57
|
newValueCallback: (newValue: string) => void;
|
|
@@ -60,7 +60,7 @@ export function filterTextInputValue(inputs) {
|
|
|
60
60
|
*
|
|
61
61
|
* @category Internal
|
|
62
62
|
*/
|
|
63
|
-
export function textInputListener({ inputs,
|
|
63
|
+
export function textInputListener({ inputs, previousValue, event, inputBlockedCallback, newValueCallback, }) {
|
|
64
64
|
if (!(event instanceof InputEvent)) {
|
|
65
65
|
throw new TypeError('Text input event was not an InputEvent.');
|
|
66
66
|
}
|
|
@@ -70,41 +70,30 @@ export function textInputListener({ inputs, filteredValue, event, inputBlockedCa
|
|
|
70
70
|
* For example, when a bunch of characters are pasted, this will be the entire pasted contents.
|
|
71
71
|
*/
|
|
72
72
|
const changedText = event.data;
|
|
73
|
-
const beforeChangeText = filteredValue;
|
|
74
|
-
// this will be overwritten below if blocked characters are encountered
|
|
75
|
-
let finalText = inputElement.value;
|
|
76
73
|
/**
|
|
77
74
|
* When changedText is falsy, that means an operation other than inserting characters happened.
|
|
78
75
|
* Such as: deleting, cutting the text, etc.
|
|
79
76
|
*/
|
|
80
77
|
if (changedText) {
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
// prevent the change from happening
|
|
88
|
-
finalText = beforeChangeText;
|
|
89
|
-
inputBlockedCallback(changedText);
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
// filters out blocked pasted letters
|
|
93
|
-
else {
|
|
94
|
-
const { filtered, blocked } = filterTextInputValue({
|
|
95
|
-
value: changedText,
|
|
96
|
-
allowed: inputs.allowedInputs,
|
|
97
|
-
blocked: inputs.blockedInputs,
|
|
98
|
-
});
|
|
99
|
-
finalText = filtered;
|
|
78
|
+
const { blocked } = filterTextInputValue({
|
|
79
|
+
value: changedText,
|
|
80
|
+
allowed: inputs.allowedInputs,
|
|
81
|
+
blocked: inputs.blockedInputs,
|
|
82
|
+
});
|
|
83
|
+
if (blocked.length) {
|
|
100
84
|
inputBlockedCallback(blocked);
|
|
101
85
|
}
|
|
102
86
|
}
|
|
103
|
-
|
|
87
|
+
const finalValue = filterTextInputValue({
|
|
88
|
+
value: inputElement.value,
|
|
89
|
+
allowed: inputs.allowedInputs,
|
|
90
|
+
blocked: inputs.blockedInputs,
|
|
91
|
+
}).filtered;
|
|
92
|
+
if (inputElement.value !== finalValue) {
|
|
104
93
|
// this prevents blocked inputs by simply overwriting them
|
|
105
|
-
inputElement.value =
|
|
94
|
+
inputElement.value = finalValue;
|
|
106
95
|
}
|
|
107
|
-
if (
|
|
108
|
-
newValueCallback(
|
|
96
|
+
if (previousValue !== finalValue) {
|
|
97
|
+
newValueCallback(finalValue);
|
|
109
98
|
}
|
|
110
99
|
}
|
|
@@ -267,7 +267,12 @@ export const ViraInput = defineViraElement()({
|
|
|
267
267
|
width: ${state.forcedInputWidth}px;
|
|
268
268
|
`
|
|
269
269
|
: '';
|
|
270
|
-
const shouldBlockBrowserHelps = inputs.disableBrowserHelps ||
|
|
270
|
+
const shouldBlockBrowserHelps = inputs.disableBrowserHelps ||
|
|
271
|
+
/**
|
|
272
|
+
* Some browsers leaks passwords with their browser helps (like Chrome with
|
|
273
|
+
* spellchecking).
|
|
274
|
+
*/
|
|
275
|
+
inputs.type === ViraInputType.Password;
|
|
271
276
|
return html `
|
|
272
277
|
<label>
|
|
273
278
|
${iconTemplate}
|
|
@@ -293,7 +298,7 @@ export const ViraInput = defineViraElement()({
|
|
|
293
298
|
${listen('input', (event) => {
|
|
294
299
|
textInputListener({
|
|
295
300
|
inputs,
|
|
296
|
-
filteredValue,
|
|
301
|
+
previousValue: filteredValue,
|
|
297
302
|
event,
|
|
298
303
|
inputBlockedCallback(blockedInput) {
|
|
299
304
|
dispatch(new events.inputBlocked(blockedInput));
|
|
@@ -11,7 +11,7 @@ import { defineIcon } from '../icon-svg.js';
|
|
|
11
11
|
export const Chat24Icon = defineIcon({
|
|
12
12
|
name: 'Chat24Icon',
|
|
13
13
|
svgTemplate: html `
|
|
14
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
|
|
14
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
|
15
15
|
<path
|
|
16
16
|
d="M5 15.4c-1.6-1.2-2.6-2.7-2.6-4.4 0-3.5 4.3-6.3 9.6-6.3s9.6 2.8 9.6 6.3-4.3 6.4-9.6 6.4L9 17l-5 3.8 1-5.5Z"
|
|
17
17
|
stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
|
|
@@ -11,7 +11,13 @@ import { defineIcon } from '../icon-svg.js';
|
|
|
11
11
|
export const Document24Icon = defineIcon({
|
|
12
12
|
name: 'Document24Icon',
|
|
13
13
|
svgTemplate: html `
|
|
14
|
-
<svg
|
|
14
|
+
<svg
|
|
15
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
16
|
+
xml:space="preserve"
|
|
17
|
+
width="24"
|
|
18
|
+
height="24"
|
|
19
|
+
viewBox="0 0 24 24"
|
|
20
|
+
>
|
|
15
21
|
<path
|
|
16
22
|
d="m19 9-6-6H5v18h14V9Z"
|
|
17
23
|
stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
|
|
@@ -11,7 +11,7 @@ import { defineIcon } from '../icon-svg.js';
|
|
|
11
11
|
export const Pencil24Icon = defineIcon({
|
|
12
12
|
name: 'Pencil24Icon',
|
|
13
13
|
svgTemplate: html `
|
|
14
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
|
|
14
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
|
15
15
|
<path
|
|
16
16
|
d="M20.041 4.966c.303-.418.097-1.085-.459-1.489l-1.771-1.285c-.557-.404-1.255-.393-1.558.025L5.12 17.561l-.167 4.215 3.955-1.467S19.965 5.071 20.041 4.966"
|
|
17
17
|
stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
|
|
@@ -11,7 +11,13 @@ import { defineIcon } from '../icon-svg.js';
|
|
|
11
11
|
export const Shield24Icon = defineIcon({
|
|
12
12
|
name: 'Shield24Icon',
|
|
13
13
|
svgTemplate: html `
|
|
14
|
-
<svg
|
|
14
|
+
<svg
|
|
15
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
16
|
+
xml:space="preserve"
|
|
17
|
+
width="24"
|
|
18
|
+
height="24"
|
|
19
|
+
viewBox="0 0 24 24"
|
|
20
|
+
>
|
|
15
21
|
<path
|
|
16
22
|
d="M12 21s-8-3.5-8-10V6s4.8-.1 8-3c3.2 2.9 8 3 8 3v5c0 6.5-8 10-8 10Z"
|
|
17
23
|
stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
|
|
@@ -11,7 +11,13 @@ import { defineIcon } from '../icon-svg.js';
|
|
|
11
11
|
export const Star24Icon = defineIcon({
|
|
12
12
|
name: 'Star24Icon',
|
|
13
13
|
svgTemplate: html `
|
|
14
|
-
<svg
|
|
14
|
+
<svg
|
|
15
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
16
|
+
width="24"
|
|
17
|
+
height="24"
|
|
18
|
+
stroke-miterlimit="2"
|
|
19
|
+
viewBox="0 0 24 24"
|
|
20
|
+
>
|
|
15
21
|
<path
|
|
16
22
|
d="m12 2 2.25 6.91h7.26l-5.88 4.27 2.25 6.91L12 15.82l-5.88 4.27 2.25-6.91-5.88-4.27h7.27L12 2Z"
|
|
17
23
|
stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vira",
|
|
3
|
-
"version": "23.1.
|
|
3
|
+
"version": "23.1.3",
|
|
4
4
|
"description": "A simple and highly versatile design system using element-vir.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"design",
|
|
@@ -37,36 +37,36 @@
|
|
|
37
37
|
"test:docs": "virmator docs check"
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
|
-
"@augment-vir/assert": "^31.
|
|
41
|
-
"@augment-vir/common": "^31.
|
|
42
|
-
"@augment-vir/web": "^31.
|
|
40
|
+
"@augment-vir/assert": "^31.9.1",
|
|
41
|
+
"@augment-vir/common": "^31.9.1",
|
|
42
|
+
"@augment-vir/web": "^31.9.1",
|
|
43
43
|
"colorjs.io": "^0.5.2",
|
|
44
|
-
"date-vir": "^7.0
|
|
45
|
-
"device-navigation": "^3.0.
|
|
44
|
+
"date-vir": "^7.2.0",
|
|
45
|
+
"device-navigation": "^3.0.3",
|
|
46
46
|
"lit-css-vars": "^3.0.11",
|
|
47
47
|
"observavir": "^2.0.4",
|
|
48
|
-
"page-active": "^1.0.
|
|
49
|
-
"spa-router-vir": "^4.0.
|
|
50
|
-
"type-fest": "^4.
|
|
48
|
+
"page-active": "^1.0.1",
|
|
49
|
+
"spa-router-vir": "^4.0.5",
|
|
50
|
+
"type-fest": "^4.33.0",
|
|
51
51
|
"typed-event-target": "^4.0.2"
|
|
52
52
|
},
|
|
53
53
|
"devDependencies": {
|
|
54
|
-
"@augment-vir/test": "^31.
|
|
54
|
+
"@augment-vir/test": "^31.9.1",
|
|
55
55
|
"@web/dev-server-esbuild": "^1.0.3",
|
|
56
56
|
"@web/test-runner": "^0.19.0",
|
|
57
57
|
"@web/test-runner-commands": "^0.9.0",
|
|
58
58
|
"@web/test-runner-playwright": "^0.11.0",
|
|
59
59
|
"@web/test-runner-visual-regression": "^0.10.0",
|
|
60
|
-
"esbuild": "^0.24.
|
|
60
|
+
"esbuild": "^0.24.2",
|
|
61
61
|
"istanbul-smart-text-reporter": "^1.1.5",
|
|
62
62
|
"markdown-code-example-inserter": "^3.0.3",
|
|
63
|
-
"typedoc": "^0.27.
|
|
64
|
-
"typescript": "5.7.
|
|
65
|
-
"vite": "^6.0.
|
|
63
|
+
"typedoc": "^0.27.6",
|
|
64
|
+
"typescript": "5.7.3",
|
|
65
|
+
"vite": "^6.0.11",
|
|
66
66
|
"vite-tsconfig-paths": "^5.1.4"
|
|
67
67
|
},
|
|
68
68
|
"peerDependencies": {
|
|
69
|
-
"element-vir": "^23.1.
|
|
69
|
+
"element-vir": "^23.1.3"
|
|
70
70
|
},
|
|
71
71
|
"engines": {
|
|
72
72
|
"node": ">=22"
|