[READ-ONLY] Mirror of https://github.com/flo-bit/ui-kit. 🦊 fox ui, svelte 5 and tailwind 4
flo-bit.dev/ui-kit/
svelte
tailwindcss
ui-components
add advanced text area
+179
-2
+3
-1
README.md
+3
-1
README.md
···
77
77
pnpm run dev:docs
78
78
```
79
79
80
-
This ui kit is organized as a monorepo, with `apps/docs` being the documentation and the ui-kit library being split into multiple packages in `packages/`.
80
+
This ui kit is organized as a monorepo, with `apps/docs` being the documentation and the ui-kit library being split into multiple packages in `packages/`.
81
+
82
+
If you change any package (not counting the docs), please run `npx changeset` to update the version of the packages before opening a pull request.
+1
-1
apps/docs/src/app.html
+1
-1
apps/docs/src/app.html
···
45
45
</head>
46
46
<body
47
47
data-sveltekit-preload-data="hover"
48
-
class="bg-base-100 dark:bg-base-950 overflow-x-hidden motion-safe:transition-colors"
48
+
class="bg-base-50 dark:bg-base-950 overflow-x-hidden motion-safe:transition-colors"
49
49
>
50
50
<div style="display: contents">%sveltekit.body%</div>
51
51
</body>
+6
apps/docs/src/lib/site-components/components_text.ts
+6
apps/docs/src/lib/site-components/components_text.ts
···
1
1
import CardPlainTextEditor from '$lib/cards/text/CardPlainTextEditor.svelte';
2
2
import CardRichTextEditor from '$lib/cards/text/CardRichTextEditor.svelte';
3
+
import CardAdvancedTextArea from '$lib/cards/text/CardAdvancedTextArea.svelte';
3
4
import type { ComponentCard } from './components_base';
4
5
5
6
export const textComponents: ComponentCard[] = [
···
12
13
component: CardRichTextEditor,
13
14
label: 'Rich Text Editor',
14
15
href: 'rich-text-editor'
16
+
},
17
+
{
18
+
component: CardAdvancedTextArea,
19
+
label: 'Advanced Text Area',
20
+
href: 'advanced-text-area'
15
21
}
16
22
].sort((a, b) => a.label.localeCompare(b.label));
+1
packages/text/src/lib/components/index.ts
+1
packages/text/src/lib/components/index.ts
+5
apps/docs/src/lib/cards/text/CardAdvancedTextArea.svelte
+5
apps/docs/src/lib/cards/text/CardAdvancedTextArea.svelte
+58
packages/text/src/lib/components/advanced-text-area/AdvancedTextArea.svelte
+58
packages/text/src/lib/components/advanced-text-area/AdvancedTextArea.svelte
···
1
+
<script lang="ts">
2
+
import { Button, ScrollArea } from '@fuxui/base';
3
+
import type { Snippet } from 'svelte';
4
+
5
+
let {
6
+
value = $bindable(),
7
+
placeholder = 'Write something here...',
8
+
rows = 3,
9
+
additionalContent = null,
10
+
actionButtons = null,
11
+
submitButton = 'Post',
12
+
...restProps
13
+
}: {
14
+
value?: string;
15
+
placeholder?: string;
16
+
rows?: number;
17
+
additionalContent?: Snippet | null;
18
+
actionButtons?: Snippet | null;
19
+
submitButton?: Snippet | string | null;
20
+
} = $props();
21
+
</script>
22
+
23
+
<div class="relative min-w-0 flex-1">
24
+
<div
25
+
class="outline-base-300 focus-within:outline-accent-600 dark:focus-within:outline-accent-500 dark:bg-base-900/50 rounded-2xl bg-white outline-1 -outline-offset-1 focus-within:outline-2 focus-within:-outline-offset-2 dark:outline-white/10"
26
+
>
27
+
<ScrollArea>
28
+
<textarea
29
+
{rows}
30
+
{placeholder}
31
+
bind:value
32
+
class="text-base-900 placeholder:text-base-500 dark:placeholder:text-base-400 block w-full resize-none border-none bg-transparent p-3 text-base outline-none focus:border-0 focus:outline-none focus:ring-0 sm:text-sm dark:text-white"
33
+
{...restProps}
34
+
></textarea>
35
+
</ScrollArea>
36
+
37
+
{#if additionalContent}
38
+
{@render additionalContent()}
39
+
{/if}
40
+
41
+
<div class="h-[50px]"></div>
42
+
</div>
43
+
44
+
<div class="absolute inset-x-0 bottom-0 flex justify-between p-2">
45
+
<div class="flex items-center space-x-2">
46
+
{#if actionButtons}
47
+
{@render actionButtons()}
48
+
{/if}
49
+
</div>
50
+
<div class="shrink-0">
51
+
{#if typeof submitButton === 'string'}
52
+
<Button type="submit" class="rounded-xl">{submitButton}</Button>
53
+
{:else if submitButton}
54
+
{@render submitButton()}
55
+
{/if}
56
+
</div>
57
+
</div>
58
+
</div>
+1
packages/text/src/lib/components/advanced-text-area/index.ts
+1
packages/text/src/lib/components/advanced-text-area/index.ts
···
1
+
export { default as AdvancedTextArea } from './AdvancedTextArea.svelte';
+8
apps/docs/src/routes/(main)/components/text/advanced-text-area/+page.svelte
+8
apps/docs/src/routes/(main)/components/text/advanced-text-area/+page.svelte
+29
apps/docs/src/routes/(main)/components/text/advanced-text-area/AdvancedTextArea.md
+29
apps/docs/src/routes/(main)/components/text/advanced-text-area/AdvancedTextArea.md
···
1
+
<script lang="ts">
2
+
import Example from './Example.svelte';
3
+
</script>
4
+
5
+
# Advanced Text Area
6
+
7
+
## Example
8
+
9
+
<Example />
10
+
11
+
## Usage
12
+
13
+
```svelte
14
+
<script lang="ts">
15
+
import { AdvancedTextArea } from '@fuxui/text';
16
+
17
+
let content = $state('');
18
+
19
+
const handleSubmit = (e: Event) => {
20
+
e.preventDefault();
21
+
console.log(content);
22
+
};
23
+
</script>
24
+
25
+
<form onsubmit={handleSubmit}>
26
+
<AdvancedTextArea bind:value={content} placeholder="Write something..." />
27
+
</form>
28
+
29
+
```
+67
apps/docs/src/routes/(main)/components/text/advanced-text-area/Example.svelte
+67
apps/docs/src/routes/(main)/components/text/advanced-text-area/Example.svelte
···
1
+
<script lang="ts">
2
+
import { Box, Button, toast } from '@fuxui/base';
3
+
import { AdvancedTextArea } from '@fuxui/text';
4
+
5
+
let content = $state('');
6
+
7
+
function handleSubmit(e: Event) {
8
+
if (!content) {
9
+
toast.error('Please enter a post');
10
+
return;
11
+
}
12
+
content = '';
13
+
14
+
e.preventDefault();
15
+
toast.success('Post submitted');
16
+
}
17
+
</script>
18
+
19
+
<form class="not-prose" onsubmit={handleSubmit}>
20
+
<AdvancedTextArea bind:value={content}>
21
+
{#snippet actionButtons()}
22
+
<Button
23
+
variant="ghost"
24
+
size="icon"
25
+
onclick={() => {
26
+
toast('Sorry, I was too lazy to actually add this feature to this demo');
27
+
}}
28
+
>
29
+
<svg
30
+
xmlns="http://www.w3.org/2000/svg"
31
+
fill="none"
32
+
viewBox="0 0 24 24"
33
+
stroke-width="1.5"
34
+
stroke="currentColor"
35
+
>
36
+
<path
37
+
stroke-linecap="round"
38
+
stroke-linejoin="round"
39
+
d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
40
+
/>
41
+
</svg>
42
+
</Button>
43
+
<Button
44
+
variant="ghost"
45
+
size="icon"
46
+
onclick={() => {
47
+
toast('Sorry, I was too lazy to actually add this feature to this demo');
48
+
}}
49
+
>
50
+
<svg
51
+
xmlns="http://www.w3.org/2000/svg"
52
+
fill="none"
53
+
viewBox="0 0 24 24"
54
+
stroke-width="1.5"
55
+
stroke="currentColor"
56
+
class="size-6"
57
+
>
58
+
<path
59
+
stroke-linecap="round"
60
+
stroke-linejoin="round"
61
+
d="M15.182 15.182a4.5 4.5 0 0 1-6.364 0M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Z"
62
+
/>
63
+
</svg>
64
+
</Button>
65
+
{/snippet}
66
+
</AdvancedTextArea>
67
+
</form>