fluent-svelte-extra 1.8.1 → 1.8.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/TextArea/TextArea.scss +3 -2
- package/TextArea/TextArea.svelte +26 -34
- package/package.json +1 -1
package/TextArea/TextArea.scss
CHANGED
|
@@ -16,7 +16,6 @@
|
|
|
16
16
|
min-block-size: 30px;
|
|
17
17
|
padding: 6px 12px;
|
|
18
18
|
border-radius: var(--control-corner-radius);
|
|
19
|
-
color: var(--text-primary);
|
|
20
19
|
background-color: transparent;
|
|
21
20
|
&:empty:before {
|
|
22
21
|
content: attr(placeholder);
|
|
@@ -53,7 +52,9 @@
|
|
|
53
52
|
background-color: var(--control-fill-secondary);
|
|
54
53
|
}
|
|
55
54
|
&.disabled {
|
|
56
|
-
cursor: default;
|
|
55
|
+
cursor: default !important;
|
|
56
|
+
|
|
57
|
+
color: var(--text-disabled) !important;
|
|
57
58
|
background-color: var(--control-fill-disabled);
|
|
58
59
|
.text-area-underline {
|
|
59
60
|
display: none;
|
package/TextArea/TextArea.svelte
CHANGED
|
@@ -22,13 +22,12 @@ export let textAreaElement = null;
|
|
|
22
22
|
/** Obtains a bound DOM reference to the TextArea's container element. */
|
|
23
23
|
export let containerElement = null;
|
|
24
24
|
const forwardEvents = createEventForwarder(get_current_component());
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
};
|
|
25
|
+
$: {
|
|
26
|
+
if (disabled && containerElement && textAreaElement) {
|
|
27
|
+
containerElement.blur();
|
|
28
|
+
textAreaElement.blur();
|
|
29
|
+
}
|
|
30
|
+
}
|
|
32
31
|
</script>
|
|
33
32
|
|
|
34
33
|
<!--
|
|
@@ -49,42 +48,35 @@ textarea.
|
|
|
49
48
|
<div
|
|
50
49
|
role="textbox"
|
|
51
50
|
{spellcheck}
|
|
52
|
-
contenteditable
|
|
51
|
+
contenteditable
|
|
53
52
|
tabindex={disabled ? -1 : 1}
|
|
54
53
|
bind:this={textAreaElement}
|
|
55
54
|
use:forwardEvents
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
callback: function (e) {
|
|
60
|
-
if (this.innerText.length + 1 > maxLength) e.preventDefault();
|
|
61
|
-
}
|
|
55
|
+
on:keypress={e => {
|
|
56
|
+
if (maxLength != undefined && textAreaElement.innerText.length + 1 > maxLength)
|
|
57
|
+
e.preventDefault();
|
|
62
58
|
}}
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
event: "paste",
|
|
66
|
-
callback: function (e) {
|
|
67
|
-
const pastedData = e.clipboardData.getData("text");
|
|
68
|
-
const regex = /^[a-zA-Z0-9@ `!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]+$/;
|
|
59
|
+
on:paste={e => {
|
|
60
|
+
if (includeImages) return;
|
|
69
61
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
}
|
|
62
|
+
const pastedData = e.clipboardData.getData("text");
|
|
63
|
+
const regex = /^[a-zA-Z0-9@ `!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]+$/;
|
|
73
64
|
|
|
74
|
-
|
|
65
|
+
if (regex.test(pastedData) !== true) {
|
|
66
|
+
e.preventDefault();
|
|
75
67
|
}
|
|
68
|
+
|
|
69
|
+
if (textAreaElement.innerText.length + pastedData.length > maxLength)
|
|
70
|
+
e.preventDefault();
|
|
76
71
|
}}
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
event: "focus",
|
|
80
|
-
callback: function (e) {
|
|
81
|
-
e.target.blur();
|
|
82
|
-
}
|
|
72
|
+
on:focus={e => {
|
|
73
|
+
if (disabled) e.target.blur();
|
|
83
74
|
}}
|
|
84
75
|
class="text-area"
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
{
|
|
76
|
+
{disabled}
|
|
77
|
+
{readonly}
|
|
78
|
+
{placeholder}
|
|
79
|
+
{...$$restProps}
|
|
88
80
|
bind:innerText={value}
|
|
89
81
|
/>
|
|
90
82
|
<slot />
|
|
@@ -96,4 +88,4 @@ textarea.
|
|
|
96
88
|
/>
|
|
97
89
|
</div>
|
|
98
90
|
|
|
99
|
-
<style >.text-area{background-color:transparent;border:none;border-radius:var(--fds-control-corner-radius);box-sizing:border-box;
|
|
91
|
+
<style >.text-area{background-color:transparent;border:none;border-radius:var(--fds-control-corner-radius);box-sizing:border-box;cursor:unset;flex-grow:1;flex:1 1 auto;font-family:var(--fds-font-family-text);font-size:var(--fds-body-font-size);font-weight:400;inline-size:100%;line-height:20px;margin:0;min-block-size:30px;outline:none;overflow-x:hidden;overflow-y:auto;padding:6px 12px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;word-break:break-all}.text-area:empty:before{color:var(--fds-text-secondary);content:attr(placeholder);display:block;pointer-events:none}.text-area::-webkit-search-cancel-button,.text-area::-webkit-search-decoration,.text-area::-webkit-search-results-button,.text-area::-webkit-search-results-decoration{-webkit-appearance:none}.text-area::-ms-reveal{display:none}.text-area:disabled{color:var(--fds-text-disabled)}.text-area:disabled::-moz-placeholder{color:var(--fds-text-disabled)}.text-area:disabled:-ms-input-placeholder{color:var(--fds-text-disabled)}.text-area:disabled::placeholder{color:var(--fds-text-disabled)}.text-area-container{align-items:center;background-clip:padding-box;background-color:var(--fds-control-fill-default);border:1px solid var(--fds-control-stroke-default);border-radius:var(--fds-control-corner-radius);cursor:text;display:flex;inline-size:100%;position:relative}.text-area-container:hover{background-color:var(--fds-control-fill-secondary)}.text-area-container.disabled{background-color:var(--fds-control-fill-disabled);color:var(--fds-text-disabled)!important;cursor:default!important}.text-area-container.disabled .text-area-underline{display:none}.text-area-container:focus-within{background-color:var(--fds-control-fill-input-active)}.text-area-container:focus-within .text-area::-moz-placeholder{color:var(--fds-text-tertiary)}.text-area-container:focus-within .text-area:-ms-input-placeholder{color:var(--fds-text-tertiary)}.text-area-container:focus-within .text-area::placeholder{color:var(--fds-text-tertiary)}.text-area-container:focus-within .text-area-underline:after{border-bottom:2px solid var(--fds-accent-default)}.text-area-container:focus-within :global(.text-area-clear-button){display:flex}.text-area-underline{block-size:calc(100% + 2px);border-radius:var(--fds-control-corner-radius);inline-size:calc(100% + 2px);inset-block-start:-1px;inset-inline-start:-1px;overflow:hidden;pointer-events:none;position:absolute}.text-area-underline:after{block-size:100%;border-bottom:var(--fds-bottom-border);box-sizing:border-box;content:"";inline-size:100%;inset-block-end:0;inset-inline-start:0;position:absolute}.text-area-buttons{align-items:center;cursor:default;display:flex;flex:0 0 auto}.text-area-buttons >:global(.text-area-button){-webkit-margin-start:6px;margin-inline-start:6px}.text-area-buttons >:global(.text-area-button:first-of-type){-webkit-margin-start:0;margin-inline-start:0}.text-area-buttons >:global(.text-area-button:last-of-type){-webkit-margin-end:4px;margin-inline-end:4px}.text-area-buttons :global(.text-area-clear-button){display:none}</style>
|
package/package.json
CHANGED