sveltacular 0.0.44 → 0.0.45
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.
|
@@ -1,7 +1,10 @@
|
|
|
1
|
-
<script>import
|
|
1
|
+
<script>import LinkIcon from "../../icons/link-icon.svelte";
|
|
2
|
+
import Icon from "../../images/icon.svelte";
|
|
3
|
+
import FormField from "../form-field.svelte";
|
|
2
4
|
import FormLabel from "../form-label.svelte";
|
|
3
5
|
export let size = "md";
|
|
4
6
|
export let value;
|
|
7
|
+
export let href = void 0;
|
|
5
8
|
</script>
|
|
6
9
|
|
|
7
10
|
<FormField {size}>
|
|
@@ -9,17 +12,45 @@ export let value;
|
|
|
9
12
|
<FormLabel><slot /></FormLabel>
|
|
10
13
|
{/if}
|
|
11
14
|
<div class="input">
|
|
12
|
-
{
|
|
15
|
+
{#if href}
|
|
16
|
+
<span class="icon">
|
|
17
|
+
<LinkIcon />
|
|
18
|
+
</span>
|
|
19
|
+
<a {href} class="text">{value}</a>
|
|
20
|
+
{:else}
|
|
21
|
+
<span class="text">{value}</span>
|
|
22
|
+
{/if}
|
|
13
23
|
</div>
|
|
14
24
|
</FormField>
|
|
15
25
|
|
|
16
|
-
<style
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
+
<style>.input {
|
|
27
|
+
background-color: var(--form-input-disabled-bg, #ccc);
|
|
28
|
+
color: var(--form-input-fg, #000);
|
|
29
|
+
font-size: 1rem;
|
|
30
|
+
width: 100%;
|
|
31
|
+
padding-left: 0.5rem;
|
|
32
|
+
border: solid 1px var(--form-input-border, black);
|
|
33
|
+
display: flex;
|
|
34
|
+
align-items: center;
|
|
35
|
+
justify-content: flex-start;
|
|
36
|
+
gap: 0.5rem;
|
|
37
|
+
}
|
|
38
|
+
.input .icon {
|
|
39
|
+
display: block;
|
|
40
|
+
width: 1rem;
|
|
41
|
+
height: 1rem;
|
|
42
|
+
position: relative;
|
|
43
|
+
}
|
|
44
|
+
.input .text {
|
|
45
|
+
line-height: 2rem;
|
|
46
|
+
flex-grow: 1;
|
|
47
|
+
font-size: 1rem;
|
|
48
|
+
}
|
|
49
|
+
.input a {
|
|
50
|
+
color: var(--form-input-fg, #000);
|
|
51
|
+
text-decoration: none;
|
|
52
|
+
display: block;
|
|
53
|
+
}
|
|
54
|
+
.input a:hover {
|
|
55
|
+
text-decoration: underline;
|
|
56
|
+
}</style>
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
<svg
|
|
2
|
+
class="w-6 h-6 text-gray-800 dark:text-white"
|
|
3
|
+
aria-hidden="true"
|
|
4
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
5
|
+
fill="none"
|
|
6
|
+
viewBox="0 0 19 19"
|
|
7
|
+
>
|
|
8
|
+
<path
|
|
9
|
+
stroke="currentColor"
|
|
10
|
+
stroke-linecap="round"
|
|
11
|
+
stroke-linejoin="round"
|
|
12
|
+
stroke-width="2"
|
|
13
|
+
d="M11.013 7.962a3.519 3.519 0 0 0-4.975 0l-3.554 3.554a3.518 3.518 0 0 0 4.975 4.975l.461-.46m-.461-4.515a3.518 3.518 0 0 0 4.975 0l3.553-3.554a3.518 3.518 0 0 0-4.974-4.975L10.3 3.7"
|
|
14
|
+
/>
|
|
15
|
+
</svg>
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/** @typedef {typeof __propDef.props} LinkIconProps */
|
|
2
|
+
/** @typedef {typeof __propDef.events} LinkIconEvents */
|
|
3
|
+
/** @typedef {typeof __propDef.slots} LinkIconSlots */
|
|
4
|
+
export default class LinkIcon extends SvelteComponent<{
|
|
5
|
+
[x: string]: never;
|
|
6
|
+
}, {
|
|
7
|
+
[evt: string]: CustomEvent<any>;
|
|
8
|
+
}, {}> {
|
|
9
|
+
}
|
|
10
|
+
export type LinkIconProps = typeof __propDef.props;
|
|
11
|
+
export type LinkIconEvents = typeof __propDef.events;
|
|
12
|
+
export type LinkIconSlots = typeof __propDef.slots;
|
|
13
|
+
import { SvelteComponent } from "svelte";
|
|
14
|
+
declare const __propDef: {
|
|
15
|
+
props: {
|
|
16
|
+
[x: string]: never;
|
|
17
|
+
};
|
|
18
|
+
events: {
|
|
19
|
+
[evt: string]: CustomEvent<any>;
|
|
20
|
+
};
|
|
21
|
+
slots: {};
|
|
22
|
+
};
|
|
23
|
+
export {};
|