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.
@@ -48,9 +48,10 @@ export declare function filterTextInputValue(inputs: IsAllowedInputs): {
48
48
  *
49
49
  * @category Internal
50
50
  */
51
- export declare function textInputListener({ inputs, filteredValue, event, inputBlockedCallback, newValueCallback, }: {
51
+ export declare function textInputListener({ inputs, previousValue, event, inputBlockedCallback, newValueCallback, }: {
52
52
  inputs: SharedTextInputElementInputs;
53
- filteredValue: string;
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, filteredValue, event, inputBlockedCallback, newValueCallback, }) {
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
- if (changedText.length === 1) {
82
- if (!isAllowed({
83
- value: changedText,
84
- allowed: inputs.allowedInputs,
85
- blocked: inputs.blockedInputs,
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
- if (inputElement.value !== finalText) {
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 = finalText;
94
+ inputElement.value = finalValue;
106
95
  }
107
- if (beforeChangeText !== finalText) {
108
- newValueCallback(finalText);
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 || inputs.type !== ViraInputType.Default;
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}
@@ -17,6 +17,7 @@ export const Commit24Icon = defineIcon({
17
17
  width="24"
18
18
  height="24"
19
19
  style="fill-rule:evenodd;clip-rule:evenodd;stroke-miterlimit:1.5"
20
+ viewBox="0 0 24 24"
20
21
  >
21
22
  <circle
22
23
  cx="12"
@@ -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 xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="24" height="24">
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 xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="24" height="24">
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 xmlns="http://www.w3.org/2000/svg" width="24" height="24" stroke-miterlimit="2">
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.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.0.1",
41
- "@augment-vir/common": "^31.0.1",
42
- "@augment-vir/web": "^31.0.1",
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.3",
45
- "device-navigation": "^3.0.2",
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.0",
49
- "spa-router-vir": "^4.0.4",
50
- "type-fest": "^4.30.0",
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.0.1",
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.0",
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.4",
64
- "typescript": "5.7.2",
65
- "vite": "^6.0.3",
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.1"
69
+ "element-vir": "^23.1.3"
70
70
  },
71
71
  "engines": {
72
72
  "node": ">=22"