@awenovations/aura 0.0.7 → 0.0.9
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.
|
@@ -30,7 +30,9 @@ export const meta = {
|
|
|
30
30
|
/>
|
|
31
31
|
|
|
32
32
|
<Story name="Horizontal Text Divider">
|
|
33
|
-
<
|
|
33
|
+
<div style='height: 7rem; display: flex;'>
|
|
34
|
+
<Divider>Divider With Text</Divider>
|
|
35
|
+
</div>
|
|
34
36
|
</Story>
|
|
35
37
|
|
|
36
38
|
<Story name="Vertical Text Divider">
|
|
@@ -1,21 +1,21 @@
|
|
|
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 {
|
|
15
16
|
--fill: var(--aura-divider-fill);
|
|
16
17
|
--border: 1px solid var(--fill);
|
|
17
18
|
display: flex;
|
|
18
|
-
height: 100%;
|
|
19
19
|
flex: 1;
|
|
20
20
|
}
|
|
21
21
|
.aura-divider .text {
|
|
@@ -28,15 +28,18 @@ const horizontal = direction === "horizontal";
|
|
|
28
28
|
}
|
|
29
29
|
.aura-divider.horizontal {
|
|
30
30
|
flex-direction: row;
|
|
31
|
+
height: min-content;
|
|
31
32
|
}
|
|
32
33
|
.aura-divider.horizontal .text {
|
|
33
|
-
margin:
|
|
34
|
+
margin: auto 0.625rem;
|
|
35
|
+
height: min-content;
|
|
34
36
|
}
|
|
35
37
|
.aura-divider.horizontal:before, .aura-divider.horizontal:after {
|
|
36
38
|
border-bottom: var(--border);
|
|
37
39
|
transform: translateY(-0.5px);
|
|
38
40
|
}
|
|
39
41
|
.aura-divider.vertical {
|
|
42
|
+
height: 100%;
|
|
40
43
|
flex-direction: column;
|
|
41
44
|
}
|
|
42
45
|
.aura-divider.vertical .text {
|
|
@@ -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":1721519711180,"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"}]}
|