@awenovations/aura 0.0.26 → 0.0.27
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 +10 -2
- package/dist/dropdown/dropdown.svelte +18 -4
- 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
|
@@ -55,7 +55,6 @@ let valueForControlsStory = "Option 1";
|
|
|
55
55
|
</div>
|
|
56
56
|
</Story>
|
|
57
57
|
|
|
58
|
-
|
|
59
58
|
<Story name="Error'd Input">
|
|
60
59
|
<div style="height: 160px; max-width: 400px; margin: 0 auto;">
|
|
61
60
|
<Dropdown showErrors>
|
|
@@ -63,7 +62,16 @@ let valueForControlsStory = "Option 1";
|
|
|
63
62
|
<aura-option value="Option 1">Option 1</aura-option>
|
|
64
63
|
<aura-option value="Option 2">Option 2</aura-option>
|
|
65
64
|
<aura-option>Option 3</aura-option>
|
|
66
|
-
|
|
65
|
+
<span slot="errors">Something went wrong here!</span>
|
|
67
66
|
</Dropdown>
|
|
68
67
|
</div>
|
|
69
68
|
</Story>
|
|
69
|
+
|
|
70
|
+
<Story name="Label">
|
|
71
|
+
<Dropdown placeholder="Placeholder...">
|
|
72
|
+
<span slot="label">Label</span>
|
|
73
|
+
<aura-option value="Option 1">Option 1</aura-option>
|
|
74
|
+
<aura-option value="Option 2">Option 2</aura-option>
|
|
75
|
+
<aura-option>Option 3</aura-option>
|
|
76
|
+
</Dropdown>
|
|
77
|
+
</Story>
|
|
@@ -1,17 +1,21 @@
|
|
|
1
|
-
<script>import
|
|
1
|
+
<script>import { v4 as uuidv4 } from "uuid";
|
|
2
|
+
import Icon from "../icon/icon.svelte";
|
|
2
3
|
import Float from "../float/float.svelte";
|
|
3
4
|
import { createEventDispatcher } from "svelte";
|
|
4
5
|
import FormItem from "../form-item/form-item.svelte";
|
|
5
6
|
import clickOutside from "../directives/click-outside";
|
|
6
7
|
import { waitForElm } from "../utilities/wait-for-elm";
|
|
7
8
|
const dispatch = createEventDispatcher();
|
|
9
|
+
export let id = uuidv4();
|
|
8
10
|
export let isOpen = false;
|
|
11
|
+
export let required = false;
|
|
9
12
|
export let isFocused = false;
|
|
10
13
|
export let showErrors = false;
|
|
11
14
|
export let name;
|
|
12
15
|
export let currentValue;
|
|
13
16
|
let target;
|
|
14
17
|
let menu;
|
|
18
|
+
let hasErrorsInternal = false;
|
|
15
19
|
$: minWidth = isOpen !== void 0 && target?.getBoundingClientRect().width || 0;
|
|
16
20
|
const onClick = () => {
|
|
17
21
|
isOpen = !isOpen;
|
|
@@ -47,6 +51,7 @@ const selectMenuItem = (e) => {
|
|
|
47
51
|
if (!$$props.currentValue) {
|
|
48
52
|
currentValue = value;
|
|
49
53
|
}
|
|
54
|
+
hasErrorsInternal = required && !value;
|
|
50
55
|
dispatch("change", {
|
|
51
56
|
value
|
|
52
57
|
});
|
|
@@ -100,11 +105,20 @@ const handleMenuOptionSelectEvent = (evt) => {
|
|
|
100
105
|
on:keydown|stopPropagation={handleSelectMenuKeyboardActions}
|
|
101
106
|
on:click|stopPropagation={onClick}
|
|
102
107
|
>
|
|
108
|
+
{#if $$slots.label}
|
|
109
|
+
<label for={id} class="label">
|
|
110
|
+
<slot name="label" />
|
|
111
|
+
</label>
|
|
112
|
+
{/if}
|
|
113
|
+
|
|
103
114
|
{#if name?.length > 0}
|
|
104
|
-
|
|
115
|
+
<input {name} type="hidden" bind:value={currentValue} />
|
|
105
116
|
{/if}
|
|
106
|
-
<FormItem
|
|
107
|
-
|
|
117
|
+
<FormItem
|
|
118
|
+
showFocusOutline={isOpen || isFocused}
|
|
119
|
+
error={($$slots.errors || hasErrorsInternal) && showErrors}
|
|
120
|
+
>
|
|
121
|
+
<button {id} class="trigger" on:focus={handleFocus}>
|
|
108
122
|
{#if currentValue}
|
|
109
123
|
{currentValue}
|
|
110
124
|
{:else}
|
|
@@ -2,7 +2,9 @@ import { SvelteComponent } from "svelte";
|
|
|
2
2
|
declare const __propDef: {
|
|
3
3
|
props: {
|
|
4
4
|
[x: string]: any;
|
|
5
|
+
id?: string;
|
|
5
6
|
isOpen?: boolean;
|
|
7
|
+
required?: boolean;
|
|
6
8
|
isFocused?: boolean;
|
|
7
9
|
showErrors?: boolean;
|
|
8
10
|
name: string | undefined;
|
|
@@ -16,6 +18,7 @@ declare const __propDef: {
|
|
|
16
18
|
[evt: string]: CustomEvent<any>;
|
|
17
19
|
};
|
|
18
20
|
slots: {
|
|
21
|
+
label: {};
|
|
19
22
|
placeholder: {};
|
|
20
23
|
default: {};
|
|
21
24
|
errors: {};
|
package/dist/icons/meta.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"lastGenerated":
|
|
1
|
+
{"lastGenerated":1734714558522,"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,6 +1,6 @@
|
|
|
1
1
|
import { SvelteComponent } from "svelte";
|
|
2
2
|
declare const __propDef: {
|
|
3
|
-
props: Omit<import("svelte/elements").HTMLInputAttributes, "class" | "size" | "
|
|
3
|
+
props: Omit<import("svelte/elements").HTMLInputAttributes, "class" | "size" | "id" | "value" | `on:${string}` | "type"> & {
|
|
4
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;
|