@awenovations/aura 0.0.24 → 0.0.26
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/dropdown/dropdown.stories.svelte +13 -0
- package/dist/dropdown/dropdown.svelte +18 -1
- package/dist/dropdown/dropdown.svelte.d.ts +3 -0
- package/dist/icons/meta.json +1 -1
- package/dist/text-field/text-field.svelte.d.ts +1 -1
- package/dist/tokens/_variables.css +1 -1
- package/package.json +1 -1
|
@@ -54,3 +54,16 @@ let valueForControlsStory = "Option 1";
|
|
|
54
54
|
</div>
|
|
55
55
|
</div>
|
|
56
56
|
</Story>
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
<Story name="Error'd Input">
|
|
60
|
+
<div style="height: 160px; max-width: 400px; margin: 0 auto;">
|
|
61
|
+
<Dropdown showErrors>
|
|
62
|
+
<span slot="placeholder">Error'd Input...</span>
|
|
63
|
+
<aura-option value="Option 1">Option 1</aura-option>
|
|
64
|
+
<aura-option value="Option 2">Option 2</aura-option>
|
|
65
|
+
<aura-option>Option 3</aura-option>
|
|
66
|
+
<span slot="errors">Something went wrong here!</span>
|
|
67
|
+
</Dropdown>
|
|
68
|
+
</div>
|
|
69
|
+
</Story>
|
|
@@ -7,6 +7,8 @@ import { waitForElm } from "../utilities/wait-for-elm";
|
|
|
7
7
|
const dispatch = createEventDispatcher();
|
|
8
8
|
export let isOpen = false;
|
|
9
9
|
export let isFocused = false;
|
|
10
|
+
export let showErrors = false;
|
|
11
|
+
export let name;
|
|
10
12
|
export let currentValue;
|
|
11
13
|
let target;
|
|
12
14
|
let menu;
|
|
@@ -98,7 +100,10 @@ const handleMenuOptionSelectEvent = (evt) => {
|
|
|
98
100
|
on:keydown|stopPropagation={handleSelectMenuKeyboardActions}
|
|
99
101
|
on:click|stopPropagation={onClick}
|
|
100
102
|
>
|
|
101
|
-
|
|
103
|
+
{#if name?.length > 0}
|
|
104
|
+
<input {name} type="hidden" bind:value={currentValue} />
|
|
105
|
+
{/if}
|
|
106
|
+
<FormItem showFocusOutline={isOpen || isFocused} error={$$slots.errors && showErrors}>
|
|
102
107
|
<button class="trigger" on:focus={handleFocus}>
|
|
103
108
|
{#if currentValue}
|
|
104
109
|
{currentValue}
|
|
@@ -124,6 +129,11 @@ const handleMenuOptionSelectEvent = (evt) => {
|
|
|
124
129
|
</Float>
|
|
125
130
|
{/if}
|
|
126
131
|
</div>
|
|
132
|
+
{#if showErrors}
|
|
133
|
+
<div class="errors-text">
|
|
134
|
+
<slot name="errors" />
|
|
135
|
+
</div>
|
|
136
|
+
{/if}
|
|
127
137
|
|
|
128
138
|
<style>.aura-dropdown button {
|
|
129
139
|
all: unset;
|
|
@@ -168,4 +178,11 @@ const handleMenuOptionSelectEvent = (evt) => {
|
|
|
168
178
|
.aura-menu :global(aura-option[aria-selected]) {
|
|
169
179
|
background: var(--aura-dropdown-option-active-background);
|
|
170
180
|
color: var(--aura-dropdown-option-active-color);
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.errors-text {
|
|
184
|
+
font: var(--aura-button-small);
|
|
185
|
+
color: var(--aura-form-item-error-text-color);
|
|
186
|
+
font-weight: 300;
|
|
187
|
+
margin-top: 3px;
|
|
171
188
|
}</style>
|
|
@@ -4,6 +4,8 @@ declare const __propDef: {
|
|
|
4
4
|
[x: string]: any;
|
|
5
5
|
isOpen?: boolean;
|
|
6
6
|
isFocused?: boolean;
|
|
7
|
+
showErrors?: boolean;
|
|
8
|
+
name: string | undefined;
|
|
7
9
|
currentValue: string | undefined;
|
|
8
10
|
};
|
|
9
11
|
events: {
|
|
@@ -16,6 +18,7 @@ declare const __propDef: {
|
|
|
16
18
|
slots: {
|
|
17
19
|
placeholder: {};
|
|
18
20
|
default: {};
|
|
21
|
+
errors: {};
|
|
19
22
|
};
|
|
20
23
|
exports?: undefined;
|
|
21
24
|
bindings?: undefined;
|
package/dist/icons/meta.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"lastGenerated":
|
|
1
|
+
{"lastGenerated":1734713360760,"icons":[{"name":"apple","size":"large"},{"name":"apple","size":"medium"},{"name":"apple","size":"small"},{"name":"arrow-circle-left","size":"large"},{"name":"arrow-circle-left","size":"medium"},{"name":"arrow-circle-left","size":"small"},{"name":"bug","size":"large"},{"name":"bug","size":"medium"},{"name":"bug","size":"small"},{"name":"caret-down","size":"large"},{"name":"caret-down","size":"medium"},{"name":"caret-down","size":"small"},{"name":"circle-plus","size":"large"},{"name":"circle-plus","size":"medium"},{"name":"circle-plus","size":"small"},{"name":"google-color","size":"large"},{"name":"google-color","size":"medium"},{"name":"google-color","size":"small"},{"name":"microsoft-color","size":"large"},{"name":"microsoft-color","size":"medium"},{"name":"microsoft-color","size":"small"},{"name":"plan","size":"large"},{"name":"plan","size":"medium"},{"name":"plan","size":"small"},{"name":"user-story","size":"large"},{"name":"user-story","size":"medium"},{"name":"user-story","size":"small"}]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { SvelteComponent } from "svelte";
|
|
2
2
|
declare const __propDef: {
|
|
3
3
|
props: Omit<import("svelte/elements").HTMLInputAttributes, "class" | "size" | "value" | "id" | `on:${string}` | "type"> & {
|
|
4
|
-
type?: "number" | "text" | "search" | "time" | "color" | "date" | "datetime-local" | "email" | "file" | "
|
|
4
|
+
type?: "number" | "text" | "search" | "time" | "hidden" | "color" | "date" | "datetime-local" | "email" | "file" | "month" | "password" | "range" | "tel" | "url" | "week" | "multi";
|
|
5
5
|
value?: string | number | boolean;
|
|
6
6
|
showErrors?: boolean;
|
|
7
7
|
};
|