@awenovations/aura 0.0.26 → 0.0.28
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 +29 -2
- package/dist/dropdown/dropdown.svelte +28 -5
- package/dist/dropdown/dropdown.svelte.d.ts +4 -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,35 @@ 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
|
+
<div style="height: 160px; margin: 0 auto;">
|
|
72
|
+
<Dropdown placeholder="Placeholder...">
|
|
73
|
+
<span slot="label">Label</span>
|
|
74
|
+
<aura-option value="Option 1">Option 1</aura-option>
|
|
75
|
+
<aura-option value="Option 2">Option 2</aura-option>
|
|
76
|
+
<aura-option>Option 3</aura-option>
|
|
77
|
+
</Dropdown>
|
|
78
|
+
</div>
|
|
79
|
+
</Story>
|
|
80
|
+
|
|
81
|
+
<Story name="Full Width">
|
|
82
|
+
<div style="display: flex; gap: 1rem;">
|
|
83
|
+
<Dropdown fullWidth placeholder="Placeholder...">
|
|
84
|
+
<span slot="label">Label</span>
|
|
85
|
+
<aura-option value="Option 1">Option 1</aura-option>
|
|
86
|
+
<aura-option value="Option 2">Option 2</aura-option>
|
|
87
|
+
<aura-option>Option 3</aura-option>
|
|
88
|
+
</Dropdown>
|
|
89
|
+
<Dropdown placeholder="Placeholder...">
|
|
90
|
+
<span slot="label">Label</span>
|
|
91
|
+
<aura-option value="Option 1">Option 1</aura-option>
|
|
92
|
+
<aura-option value="Option 2">Option 2</aura-option>
|
|
93
|
+
<aura-option>Option 3</aura-option>
|
|
94
|
+
</Dropdown>
|
|
95
|
+
</div>
|
|
96
|
+
</Story>
|
|
@@ -1,17 +1,23 @@
|
|
|
1
|
-
<script>import
|
|
1
|
+
<script>import { v4 as uuidv4 } from "uuid";
|
|
2
|
+
import classNames from "classnames";
|
|
3
|
+
import Icon from "../icon/icon.svelte";
|
|
2
4
|
import Float from "../float/float.svelte";
|
|
3
5
|
import { createEventDispatcher } from "svelte";
|
|
4
6
|
import FormItem from "../form-item/form-item.svelte";
|
|
5
7
|
import clickOutside from "../directives/click-outside";
|
|
6
8
|
import { waitForElm } from "../utilities/wait-for-elm";
|
|
7
9
|
const dispatch = createEventDispatcher();
|
|
10
|
+
export let id = uuidv4();
|
|
8
11
|
export let isOpen = false;
|
|
12
|
+
export let required = false;
|
|
9
13
|
export let isFocused = false;
|
|
10
14
|
export let showErrors = false;
|
|
11
15
|
export let name;
|
|
16
|
+
export let fullWidth = false;
|
|
12
17
|
export let currentValue;
|
|
13
18
|
let target;
|
|
14
19
|
let menu;
|
|
20
|
+
let hasErrorsInternal = false;
|
|
15
21
|
$: minWidth = isOpen !== void 0 && target?.getBoundingClientRect().width || 0;
|
|
16
22
|
const onClick = () => {
|
|
17
23
|
isOpen = !isOpen;
|
|
@@ -47,6 +53,7 @@ const selectMenuItem = (e) => {
|
|
|
47
53
|
if (!$$props.currentValue) {
|
|
48
54
|
currentValue = value;
|
|
49
55
|
}
|
|
56
|
+
hasErrorsInternal = required && !currentValue;
|
|
50
57
|
dispatch("change", {
|
|
51
58
|
value
|
|
52
59
|
});
|
|
@@ -92,7 +99,7 @@ const handleMenuOptionSelectEvent = (evt) => {
|
|
|
92
99
|
|
|
93
100
|
<div
|
|
94
101
|
{...$$restProps}
|
|
95
|
-
class={`aura-dropdown ${$$restProps.class}
|
|
102
|
+
class={classNames(`aura-dropdown ${$$restProps.class}`, { fullWidth })}
|
|
96
103
|
bind:this={target}
|
|
97
104
|
tabindex="-1"
|
|
98
105
|
role="button"
|
|
@@ -100,11 +107,21 @@ const handleMenuOptionSelectEvent = (evt) => {
|
|
|
100
107
|
on:keydown|stopPropagation={handleSelectMenuKeyboardActions}
|
|
101
108
|
on:click|stopPropagation={onClick}
|
|
102
109
|
>
|
|
110
|
+
{#if $$slots.label}
|
|
111
|
+
<label for={id} class="label">
|
|
112
|
+
<slot name="label" />
|
|
113
|
+
</label>
|
|
114
|
+
{/if}
|
|
115
|
+
|
|
103
116
|
{#if name?.length > 0}
|
|
104
|
-
|
|
117
|
+
<input {name} type="hidden" bind:value={currentValue} />
|
|
105
118
|
{/if}
|
|
106
|
-
<FormItem
|
|
107
|
-
|
|
119
|
+
<FormItem
|
|
120
|
+
bind:required
|
|
121
|
+
showFocusOutline={isOpen || isFocused}
|
|
122
|
+
error={($$slots.errors || hasErrorsInternal) && showErrors}
|
|
123
|
+
>
|
|
124
|
+
<button {id} class="trigger" on:focus={handleFocus}>
|
|
108
125
|
{#if currentValue}
|
|
109
126
|
{currentValue}
|
|
110
127
|
{:else}
|
|
@@ -147,6 +164,12 @@ const handleMenuOptionSelectEvent = (evt) => {
|
|
|
147
164
|
margin-top: 2px;
|
|
148
165
|
margin-left: -5px;
|
|
149
166
|
}
|
|
167
|
+
.aura-dropdown:not(.fullWidth) {
|
|
168
|
+
max-width: 400px;
|
|
169
|
+
}
|
|
170
|
+
.aura-dropdown.fullWidth {
|
|
171
|
+
flex: 1;
|
|
172
|
+
}
|
|
150
173
|
|
|
151
174
|
.aura-menu {
|
|
152
175
|
border-radius: var(--aura-menu-border-radius);
|
|
@@ -2,10 +2,13 @@ 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;
|
|
11
|
+
fullWidth?: boolean;
|
|
9
12
|
currentValue: string | undefined;
|
|
10
13
|
};
|
|
11
14
|
events: {
|
|
@@ -16,6 +19,7 @@ declare const __propDef: {
|
|
|
16
19
|
[evt: string]: CustomEvent<any>;
|
|
17
20
|
};
|
|
18
21
|
slots: {
|
|
22
|
+
label: {};
|
|
19
23
|
placeholder: {};
|
|
20
24
|
default: {};
|
|
21
25
|
errors: {};
|
package/dist/icons/meta.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"lastGenerated":
|
|
1
|
+
{"lastGenerated":1734715827550,"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;
|