fluent-svelte-extra 1.3.7 → 1.3.9
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,4 +1,4 @@
|
|
|
1
|
-
<svelte:options accessors/>
|
|
1
|
+
<svelte:options accessors />
|
|
2
2
|
|
|
3
3
|
<script >import { createEventDispatcher, setContext } from "svelte";
|
|
4
4
|
import { externalMouseEvents, arrowNavigation } from "../internal";
|
|
@@ -14,6 +14,8 @@ export let wrapperElement = null;
|
|
|
14
14
|
export let anchorElement = null;
|
|
15
15
|
/** Obtains a bound DOM reference to the inner menu element. */
|
|
16
16
|
export let menuElement = null;
|
|
17
|
+
/** The parent element of ContextMenu */
|
|
18
|
+
export let targetParent = document.body;
|
|
17
19
|
/** Controls whether ContextMenu can be opened with right or left click */
|
|
18
20
|
export let openBy = ["rightClick"];
|
|
19
21
|
const dispatch = createEventDispatcher();
|
|
@@ -51,7 +53,7 @@ function handleEscapeKey({ key }) {
|
|
|
51
53
|
open = false;
|
|
52
54
|
}
|
|
53
55
|
function mountMenu(node) {
|
|
54
|
-
|
|
56
|
+
targetParent.appendChild(node);
|
|
55
57
|
return {
|
|
56
58
|
destroy: () => node.remove()
|
|
57
59
|
};
|
|
@@ -67,8 +69,12 @@ setContext("closeFlyout", event => {
|
|
|
67
69
|
|
|
68
70
|
<div
|
|
69
71
|
class="context-menu-wrapper"
|
|
70
|
-
on:contextmenu|preventDefault|stopPropagation={openBy.includes("rightClick")
|
|
71
|
-
|
|
72
|
+
on:contextmenu|preventDefault|stopPropagation={openBy.includes("rightClick")
|
|
73
|
+
? handleContextMenu
|
|
74
|
+
: undefined}
|
|
75
|
+
on:click|preventDefault|stopPropagation={openBy.includes("leftClick")
|
|
76
|
+
? handleContextMenu
|
|
77
|
+
: undefined}
|
|
72
78
|
on:contextmenu={openBy.includes("rightClick") ? handleContextMenu : undefined}
|
|
73
79
|
bind:this={wrapperElement}
|
|
74
80
|
>
|
|
@@ -7,6 +7,7 @@ declare const __propDef: {
|
|
|
7
7
|
wrapperElement?: HTMLDivElement;
|
|
8
8
|
anchorElement?: HTMLDivElement;
|
|
9
9
|
menuElement?: HTMLUListElement;
|
|
10
|
+
targetParent?: HTMLElement;
|
|
10
11
|
openBy?: ("rightClick" | "leftClick")[];
|
|
11
12
|
};
|
|
12
13
|
events: {
|
|
@@ -38,6 +39,9 @@ export default class ContextMenu extends SvelteComponentTyped<ContextMenuProps,
|
|
|
38
39
|
get menuElement(): HTMLUListElement;
|
|
39
40
|
/**accessor*/
|
|
40
41
|
set menuElement(_: HTMLUListElement);
|
|
42
|
+
get targetParent(): HTMLElement;
|
|
43
|
+
/**accessor*/
|
|
44
|
+
set targetParent(_: HTMLElement);
|
|
41
45
|
get openBy(): ("rightClick" | "leftClick")[];
|
|
42
46
|
/**accessor*/
|
|
43
47
|
set openBy(_: ("rightClick" | "leftClick")[]);
|
package/TextArea/TextArea.scss
CHANGED
|
@@ -14,13 +14,15 @@
|
|
|
14
14
|
flex: 1 1 auto;
|
|
15
15
|
inline-size: 100%;
|
|
16
16
|
min-block-size: 30px;
|
|
17
|
-
|
|
17
|
+
padding: 6px 12px;
|
|
18
18
|
border-radius: var(--control-corner-radius);
|
|
19
19
|
color: var(--text-primary);
|
|
20
20
|
background-color: transparent;
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
21
|
+
&:empty:before {
|
|
22
|
+
content: attr(placeholder);
|
|
23
|
+
pointer-events: none;
|
|
24
|
+
display: block;
|
|
25
|
+
opacity: 0.5;
|
|
24
26
|
}
|
|
25
27
|
&::-webkit-search-decoration,
|
|
26
28
|
&::-webkit-search-cancel-button,
|
package/TextArea/TextArea.svelte
CHANGED
|
@@ -42,10 +42,22 @@ textarea.
|
|
|
42
42
|
use:externalMouseEvents={{ type: "mousedown" }}
|
|
43
43
|
on:outermousedown
|
|
44
44
|
>
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
45
|
+
<div
|
|
46
|
+
role="textbox"
|
|
47
|
+
{spellcheck}
|
|
48
|
+
contenteditable="true"
|
|
49
|
+
bind:this={textAreaElement}
|
|
50
|
+
use:forwardEvents
|
|
51
|
+
{...inputProps}
|
|
52
|
+
bind:textContent={value}
|
|
53
|
+
/>
|
|
54
|
+
<slot />
|
|
55
|
+
<div
|
|
56
|
+
class="text-area-underline"
|
|
57
|
+
style={disableBottomBorder
|
|
58
|
+
? "--fds-bottom-border: none;"
|
|
59
|
+
: "--fds-bottom-border: 1px solid var(--fds-control-strong-stroke-default);"}
|
|
60
|
+
/>
|
|
49
61
|
</div>
|
|
50
62
|
|
|
51
|
-
<style >.text-area{background-color:transparent;border:none;border-radius:var(--fds-control-corner-radius);box-sizing:border-box;color:var(--fds-text-primary);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
|
|
63
|
+
<style >.text-area{background-color:transparent;border:none;border-radius:var(--fds-control-corner-radius);box-sizing:border-box;color:var(--fds-text-primary);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{content:attr(placeholder);display:block;opacity:.5;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);cursor:default}.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