@awenovations/aura 0.0.8 → 0.0.10
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/divider/divider.svelte +8 -7
- package/dist/divider/divider.svelte.d.ts +3 -2
- package/dist/icons/meta.json +1 -1
- package/dist/text-field/text-field.stories.svelte +6 -0
- package/dist/text-field/text-field.svelte +15 -20
- package/dist/text-field/text-field.svelte.d.ts +2 -7
- package/dist/tokens/_variables.css +1 -1
- package/package.json +3 -2
|
@@ -1,14 +1,15 @@
|
|
|
1
|
-
<script>
|
|
1
|
+
<script>import classNames from "classnames";
|
|
2
|
+
export let direction = "horizontal";
|
|
2
3
|
const vertical = direction === "vertical";
|
|
3
4
|
const horizontal = direction === "horizontal";
|
|
4
5
|
</script>
|
|
5
6
|
|
|
6
|
-
<div class:vertical class:horizontal class=
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
7
|
+
<div {...$$props} class:vertical class:horizontal class={classNames($$props.class, 'aura-divider')}>
|
|
8
|
+
{#if $$slots.default}
|
|
9
|
+
<div class="text">
|
|
10
|
+
<slot />
|
|
11
|
+
</div>
|
|
12
|
+
{/if}
|
|
12
13
|
</div>
|
|
13
14
|
|
|
14
15
|
<style>.aura-divider {
|
|
@@ -2,6 +2,7 @@ import { SvelteComponent } from "svelte";
|
|
|
2
2
|
import type * as Props from './props';
|
|
3
3
|
declare const __propDef: {
|
|
4
4
|
props: {
|
|
5
|
+
[x: string]: any;
|
|
5
6
|
direction?: Props.DividerDirection;
|
|
6
7
|
};
|
|
7
8
|
events: {
|
|
@@ -10,8 +11,8 @@ declare const __propDef: {
|
|
|
10
11
|
slots: {
|
|
11
12
|
default: {};
|
|
12
13
|
};
|
|
13
|
-
exports?:
|
|
14
|
-
bindings?:
|
|
14
|
+
exports?: undefined;
|
|
15
|
+
bindings?: undefined;
|
|
15
16
|
};
|
|
16
17
|
export type DividerProps = typeof __propDef.props;
|
|
17
18
|
export type DividerEvents = typeof __propDef.events;
|
package/dist/icons/meta.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"lastGenerated":
|
|
1
|
+
{"lastGenerated":1721522530754,"icons":[{"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
|
-
<script>import
|
|
2
|
-
import
|
|
3
|
-
import Icon from "../icon/icon.svelte";
|
|
1
|
+
<script>import { v4 as uuidv4 } from "uuid";
|
|
2
|
+
import classNames from "classnames";
|
|
4
3
|
import { createEventDispatcher } from "svelte";
|
|
4
|
+
import FormItem, {} from "../form-item/form-item.svelte";
|
|
5
5
|
export let type = "text";
|
|
6
6
|
export let value = "";
|
|
7
7
|
export let required = false;
|
|
@@ -11,6 +11,7 @@ export let showErrors = false;
|
|
|
11
11
|
export let mode = void 0;
|
|
12
12
|
export let width = void 0;
|
|
13
13
|
export let height = void 0;
|
|
14
|
+
export let id = uuidv4();
|
|
14
15
|
const dispatch = createEventDispatcher();
|
|
15
16
|
function forwardEvent(e) {
|
|
16
17
|
const event = e;
|
|
@@ -21,10 +22,6 @@ function forwardEvent(e) {
|
|
|
21
22
|
innerEvent: event
|
|
22
23
|
});
|
|
23
24
|
}
|
|
24
|
-
const pickerIcons = {
|
|
25
|
-
date: "calendar",
|
|
26
|
-
time: "clock"
|
|
27
|
-
};
|
|
28
25
|
let input = void 0;
|
|
29
26
|
let hasErrorsInternal = false;
|
|
30
27
|
function onInput(e) {
|
|
@@ -33,6 +30,11 @@ function onInput(e) {
|
|
|
33
30
|
}
|
|
34
31
|
</script>
|
|
35
32
|
|
|
33
|
+
{#if $$slots.label}
|
|
34
|
+
<label for={id} class="label">
|
|
35
|
+
<slot name="label" />
|
|
36
|
+
</label>
|
|
37
|
+
{/if}
|
|
36
38
|
<FormItem
|
|
37
39
|
bind:required
|
|
38
40
|
bind:disabled
|
|
@@ -43,13 +45,14 @@ function onInput(e) {
|
|
|
43
45
|
error={($$slots.errors || hasErrorsInternal) && showErrors}
|
|
44
46
|
>
|
|
45
47
|
<slot name="left-icon" slot="left-icon" />
|
|
46
|
-
<div class="
|
|
48
|
+
<div class="text-field-container">
|
|
47
49
|
<input
|
|
48
50
|
{...$$restProps}
|
|
49
|
-
class={
|
|
51
|
+
class={classNames('aura-text-field', $$restProps.class)}
|
|
50
52
|
{disabled}
|
|
51
53
|
{type}
|
|
52
54
|
{value}
|
|
55
|
+
{id}
|
|
53
56
|
bind:this={input}
|
|
54
57
|
on:change={forwardEvent}
|
|
55
58
|
on:input={onInput}
|
|
@@ -66,14 +69,6 @@ function onInput(e) {
|
|
|
66
69
|
<slot name="extra" />
|
|
67
70
|
</div>
|
|
68
71
|
</div>
|
|
69
|
-
<slot name="right-icon" slot="right-icon">
|
|
70
|
-
{#if pickerIcons[type]}
|
|
71
|
-
<Button kind="plain-faint" on:click={() => input?.showPicker()}>
|
|
72
|
-
<Icon name={pickerIcons[type]} />
|
|
73
|
-
</Button>
|
|
74
|
-
{/if}
|
|
75
|
-
</slot>
|
|
76
|
-
<slot slot="label" />
|
|
77
72
|
</FormItem>
|
|
78
73
|
{#if showErrors}
|
|
79
74
|
<div class="errors-text">
|
|
@@ -81,18 +76,18 @@ function onInput(e) {
|
|
|
81
76
|
</div>
|
|
82
77
|
{/if}
|
|
83
78
|
|
|
84
|
-
<style>.aura-
|
|
79
|
+
<style>.aura-text-field {
|
|
85
80
|
all: unset;
|
|
86
81
|
width: 100%;
|
|
87
82
|
text-align: initial;
|
|
88
83
|
}
|
|
89
84
|
|
|
90
|
-
.aura-
|
|
85
|
+
.aura-text-field::-webkit-calendar-picker-indicator {
|
|
91
86
|
opacity: 0;
|
|
92
87
|
flex: 1;
|
|
93
88
|
}
|
|
94
89
|
|
|
95
|
-
.
|
|
90
|
+
.text-field-container {
|
|
96
91
|
flex: 1;
|
|
97
92
|
display: flex;
|
|
98
93
|
flex-direction: column;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { SvelteComponent } from "svelte";
|
|
2
2
|
import { type Mode } from '../form-item/form-item.svelte';
|
|
3
3
|
declare const __propDef: {
|
|
4
|
-
props: Omit<import("svelte/elements").HTMLInputAttributes, "size" | "class" | "value" | `on:${string}` | "type"> & {
|
|
4
|
+
props: Omit<import("svelte/elements").HTMLInputAttributes, "size" | "class" | "value" | "id" | `on:${string}` | "type"> & {
|
|
5
5
|
type?: "number" | "text" | "search" | "time" | "color" | "date" | "datetime-local" | "email" | "file" | "hidden" | "month" | "password" | "range" | "tel" | "url" | "week";
|
|
6
6
|
value?: string | number | boolean;
|
|
7
7
|
size?: any;
|
|
@@ -85,16 +85,11 @@ declare const __propDef: {
|
|
|
85
85
|
[evt: string]: CustomEvent<any>;
|
|
86
86
|
};
|
|
87
87
|
slots: {
|
|
88
|
+
label: {};
|
|
88
89
|
'left-icon': {
|
|
89
90
|
slot: string;
|
|
90
91
|
};
|
|
91
92
|
extra: {};
|
|
92
|
-
'right-icon': {
|
|
93
|
-
slot: string;
|
|
94
|
-
};
|
|
95
|
-
default: {
|
|
96
|
-
slot: string;
|
|
97
|
-
};
|
|
98
93
|
errors: {};
|
|
99
94
|
};
|
|
100
95
|
exports?: {} | undefined;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@awenovations/aura",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.10",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"dev": "vite dev",
|
|
6
6
|
"build": "npm run transform-tokens && vite build && npm run package",
|
|
@@ -98,6 +98,7 @@
|
|
|
98
98
|
"@storybook/addon-themes": "^8.1.11",
|
|
99
99
|
"classnames": "^2.5.1",
|
|
100
100
|
"replace-in-file": "^8.0.1",
|
|
101
|
-
"reset-css": "^5.0.2"
|
|
101
|
+
"reset-css": "^5.0.2",
|
|
102
|
+
"uuid": "^10.0.0"
|
|
102
103
|
}
|
|
103
104
|
}
|