fluent-svelte-extra 1.5.5 → 1.5.7
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/ListItem/ListItem.scss +1 -0
- package/ListItem/ListItem.svelte +1 -1
- package/TextBox/TextBox.svelte +12 -13
- package/package.json +1 -1
package/ListItem/ListItem.scss
CHANGED
package/ListItem/ListItem.svelte
CHANGED
|
@@ -72,4 +72,4 @@ List Items display data stacked vertically in a single column. List Items work b
|
|
|
72
72
|
</li>
|
|
73
73
|
{/if}
|
|
74
74
|
|
|
75
|
-
<style >.list-item{align-items:center;background-color:var(--fds-subtle-fill-transparent);block-size:34px;border-radius:var(--fds-control-corner-radius);box-sizing:border-box;color:var(--fds-text-primary);cursor:default;display:flex;flex:0 0 auto;inline-size:calc(100% - 10px);margin:3px 5px;outline:none;padding-inline:12px;position:relative;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.list-item:before{background-color:var(--fds-accent-default);block-size:16px;border-radius:3px;content:"";inline-size:3px;inset-inline-start:0;opacity:0;position:absolute;transform:scaleY(0);transition:transform var(--fds-control-fast-duration) var(--fds-control-fast-out-slow-in-easing)}.list-item.selected:before{opacity:1;transform:scaleY(1)}.list-item:focus-visible{box-shadow:var(--fds-focus-stroke)}.list-item.selected,.list-item:hover{background-color:var(--fds-subtle-fill-secondary)}.list-item:active{background-color:var(--fds-subtle-fill-tertiary);color:var(--fds-text-secondary)}.list-item:active:before{transform:scaleY(.625)}.list-item.disabled{background-color:var(--fds-subtle-fill-transparent);color:var(--fds-text-disabled);pointer-events:none}.list-item.disabled.selected{background-color:var(--fds-subtle-fill-secondary)}.list-item.disabled.selected:before{background-color:var(--fds-accent-disabled)}.list-item>:global(svg){fill:currentColor;-webkit-margin-end:16px;block-size:auto;inline-size:16px;margin-inline-end:16px}</style>
|
|
75
|
+
<style >.list-item{align-items:center;background-color:var(--fds-subtle-fill-transparent);block-size:34px;border-radius:var(--fds-control-corner-radius);box-sizing:border-box;color:var(--fds-text-primary);cursor:default;display:flex;flex:0 0 auto;inline-size:calc(100% - 10px);margin:3px 5px;outline:none;padding-inline:12px;position:relative;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap}.list-item:before{background-color:var(--fds-accent-default);block-size:16px;border-radius:3px;content:"";inline-size:3px;inset-inline-start:0;opacity:0;position:absolute;transform:scaleY(0);transition:transform var(--fds-control-fast-duration) var(--fds-control-fast-out-slow-in-easing)}.list-item.selected:before{opacity:1;transform:scaleY(1)}.list-item:focus-visible{box-shadow:var(--fds-focus-stroke)}.list-item.selected,.list-item:hover{background-color:var(--fds-subtle-fill-secondary)}.list-item:active{background-color:var(--fds-subtle-fill-tertiary);color:var(--fds-text-secondary)}.list-item:active:before{transform:scaleY(.625)}.list-item.disabled{background-color:var(--fds-subtle-fill-transparent);color:var(--fds-text-disabled);pointer-events:none}.list-item.disabled.selected{background-color:var(--fds-subtle-fill-secondary)}.list-item.disabled.selected:before{background-color:var(--fds-accent-disabled)}.list-item>:global(svg){fill:currentColor;-webkit-margin-end:16px;block-size:auto;inline-size:16px;margin-inline-end:16px}</style>
|
package/TextBox/TextBox.svelte
CHANGED
|
@@ -73,7 +73,6 @@ function handleReveal(event) {
|
|
|
73
73
|
}
|
|
74
74
|
const inputProps = {
|
|
75
75
|
class: "text-box",
|
|
76
|
-
disabled: disabled || undefined,
|
|
77
76
|
readonly: readonly || undefined,
|
|
78
77
|
placeholder: placeholder || undefined,
|
|
79
78
|
...$$restProps
|
|
@@ -98,29 +97,29 @@ The TextBox control lets a user type text into an app. The text displays on the
|
|
|
98
97
|
<!-- Dirty workaround for the fact that svelte can't handle two-way binding when the input type is dynamic. -->
|
|
99
98
|
<!-- prettier-ignore -->
|
|
100
99
|
{#if type === "text"}
|
|
101
|
-
<input type="text" maxlength={maxLength} bind:value bind:this={inputElement} use:forwardEvents {...inputProps}/>
|
|
100
|
+
<input type="text" maxlength={maxLength} bind:value bind:this={inputElement} use:forwardEvents {...inputProps} {disabled} />
|
|
102
101
|
{:else if type === "number"}
|
|
103
|
-
<input type="number" bind:value bind:this={inputElement} use:forwardEvents {...inputProps}/>
|
|
102
|
+
<input type="number" bind:value bind:this={inputElement} use:forwardEvents {...inputProps} {disabled}/>
|
|
104
103
|
{:else if type === "search"}
|
|
105
|
-
<input type="search" maxlength={maxLength} bind:value bind:this={inputElement} use:forwardEvents {...inputProps}/>
|
|
104
|
+
<input type="search" maxlength={maxLength} bind:value bind:this={inputElement} use:forwardEvents {...inputProps} {disabled}/>
|
|
106
105
|
{:else if type === "password"}
|
|
107
|
-
<input type="password" maxlength={maxLength} bind:value bind:this={inputElement} use:forwardEvents {...inputProps}/>
|
|
106
|
+
<input type="password" maxlength={maxLength} bind:value bind:this={inputElement} use:forwardEvents {...inputProps} {disabled}/>
|
|
108
107
|
{:else if type === "email"}
|
|
109
|
-
<input type="email" maxlength={maxLength} bind:value bind:this={inputElement} use:forwardEvents {...inputProps}/>
|
|
108
|
+
<input type="email" maxlength={maxLength} bind:value bind:this={inputElement} use:forwardEvents {...inputProps} {disabled}/>
|
|
110
109
|
{:else if type === "tel"}
|
|
111
|
-
<input type="tel" maxlength={maxLength} bind:value bind:this={inputElement} use:forwardEvents {...inputProps}/>
|
|
110
|
+
<input type="tel" maxlength={maxLength} bind:value bind:this={inputElement} use:forwardEvents {...inputProps} {disabled}/>
|
|
112
111
|
{:else if type === "url"}
|
|
113
|
-
<input type="url" maxlength={maxLength} bind:value bind:this={inputElement} use:forwardEvents {...inputProps} />
|
|
112
|
+
<input type="url" maxlength={maxLength} bind:value bind:this={inputElement} use:forwardEvents {...inputProps} {disabled} />
|
|
114
113
|
{:else if type === "date"}
|
|
115
|
-
<input type="date" bind:value bind:this={inputElement} use:forwardEvents {...inputProps}/>
|
|
114
|
+
<input type="date" bind:value bind:this={inputElement} use:forwardEvents {...inputProps} {disabled}/>
|
|
116
115
|
{:else if type === "datetime-local"}
|
|
117
|
-
<input type="datetime-local" bind:value bind:this={inputElement} use:forwardEvents {...inputProps}/>
|
|
116
|
+
<input type="datetime-local" bind:value bind:this={inputElement} use:forwardEvents {...inputProps} {disabled}/>
|
|
118
117
|
{:else if type === "month"}
|
|
119
|
-
<input type="month" bind:value bind:this={inputElement} use:forwardEvents {...inputProps} />
|
|
118
|
+
<input type="month" bind:value bind:this={inputElement} use:forwardEvents {...inputProps} {disabled} />
|
|
120
119
|
{:else if type === "time"}
|
|
121
|
-
<input type="time" bind:value bind:this={inputElement} use:forwardEvents {...inputProps} />
|
|
120
|
+
<input type="time" bind:value bind:this={inputElement} use:forwardEvents {...inputProps} {disabled} />
|
|
122
121
|
{:else if type === "week"}
|
|
123
|
-
<input type="week" bind:value bind:this={inputElement} use:forwardEvents {...inputProps} />
|
|
122
|
+
<input type="week" bind:value bind:this={inputElement} use:forwardEvents {...inputProps} {disabled} />
|
|
124
123
|
{/if}
|
|
125
124
|
<div
|
|
126
125
|
class="text-box-underline"
|
package/package.json
CHANGED