[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
improve richtexteditor, blueskyloginmodal, tooltip
+95
-34
+1
-1
README.md
+1
-1
README.md
···
74
74
git clone https://github.com/flo-bit/ui-kit.git
75
75
cd ui-kit
76
76
pnpm install
77
-
pnpm run dev
77
+
pnpm run dev:docs
78
78
```
79
79
80
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/`.
+7
.changeset/polite-regions-tan.md
+7
.changeset/polite-regions-tan.md
+5
-5
apps/docs/src/routes/+page.svelte
+5
-5
apps/docs/src/routes/+page.svelte
···
24
24
>
25
25
Build Beautiful Apps & Websites Fast
26
26
</h1>
27
-
28
-
<Badge class="fixed bottom-1 left-1">
29
-
{#if dev}
27
+
28
+
{#if dev}
29
+
<Badge class="fixed bottom-1 left-1">
30
30
{count} components
31
-
{/if}
32
-
</Badge>
31
+
</Badge>
32
+
{/if}
33
33
34
34
<div class="mb-16 flex gap-2">
35
35
<Button href={base + '/docs/quick-start'} class="mb-8">Quick Start</Button>
+2
-2
apps/docs/src/lib/site-components/Cards.svelte
+2
-2
apps/docs/src/lib/site-components/Cards.svelte
···
12
12
<div class="grid w-full grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-3">
13
13
{#each category.components as card}
14
14
<div
15
-
class="group relative flex flex-col items-start gap-3 transition-opacity duration-150 hover:opacity-90 md:gap-4"
15
+
class="group relative flex flex-col items-start gap-3 transition-opacity duration-150 md:gap-4"
16
16
>
17
17
<div
18
-
class="bg-base-50 dark:bg-base-900/30 border-base-200 dark:border-base-900 pointer-events-none relative h-44 w-full overflow-hidden rounded-2xl border"
18
+
class="bg-base-50 dark:bg-base-900/50 shadow-lg backdrop-blur-xl shadow-base-900/10 inset-shadow-sm inset-shadow-base-800/5 dark:inset-shadow-base-400/5 border-base-200 dark:border-base-900 pointer-events-none relative h-44 w-full overflow-hidden rounded-2xl border"
19
19
>
20
20
<div
21
21
class={cn(
+5
-1
packages/base/src/lib/components/tooltip/tooltip.svelte
+5
-1
packages/base/src/lib/components/tooltip/tooltip.svelte
···
38
38
</Tooltip.Trigger>
39
39
40
40
<Tooltip.Portal>
41
-
<TooltipContent sideOffset={contentProps.sideOffset ?? 6} side={contentProps.side ?? 'top'}>
41
+
<TooltipContent
42
+
sideOffset={contentProps.sideOffset ?? 6}
43
+
side={contentProps.side ?? 'top'}
44
+
class={contentProps.class}
45
+
>
42
46
{#if content}
43
47
{@render content()}
44
48
{:else}
+11
-10
packages/text/src/lib/components/rich-text-editor/RichTextEditor.svelte
+11
-10
packages/text/src/lib/components/rich-text-editor/RichTextEditor.svelte
···
18
18
import './code.css';
19
19
import { cn } from '@fuxui/base';
20
20
import { ImageUploadNode } from './image-upload/ImageUploadNode';
21
+
import { Transaction } from '@tiptap/pm/state';
21
22
22
23
let {
23
24
content = $bindable({}),
···
33
34
editor?: Editor | null;
34
35
ref?: HTMLDivElement | null;
35
36
class?: string;
36
-
onupdate?: (content: Content) => void;
37
+
onupdate?: (content: Content, context: { editor: Editor; transaction: Transaction }) => void;
37
38
ontransaction?: () => void;
38
39
} = $props();
39
40
···
159
160
upload: async (file, onProgress, abortSignal) => {
160
161
console.log('uploading image', file);
161
162
// wait 2 seconds
162
-
for(let i = 0; i < 10; i++) {
163
+
for (let i = 0; i < 10; i++) {
163
164
await new Promise((resolve) => setTimeout(resolve, 200));
164
165
onProgress?.({ progress: i / 10 });
165
166
}
···
179
180
},
180
181
onUpdate: (ctx) => {
181
182
content = ctx.editor.getJSON();
182
-
onupdate?.(content);
183
-
console.log('content', content);
183
+
onupdate?.(content, ctx);
184
184
},
185
185
onFocus: () => {
186
186
hasFocus = true;
···
215
215
}
216
216
ontransaction?.();
217
217
},
218
-
content: ``
218
+
content
219
219
});
220
220
221
221
menu?.classList.remove('hidden');
222
222
menuLink?.classList.remove('hidden');
223
-
224
223
});
225
224
226
225
// Flag to track whether a file is being dragged over the drop area
···
246
245
localImageUrls.add(localUrl);
247
246
248
247
//editor.commands.setImageUploadNode();
249
-
editor.chain().focus().setImageUploadNode(
250
-
{
248
+
editor
249
+
.chain()
250
+
.focus()
251
+
.setImageUploadNode({
251
252
preview: localUrl
252
-
}
253
-
).run();
253
+
})
254
+
.run();
254
255
255
256
// wait 2 seconds
256
257
// await new Promise((resolve) => setTimeout(resolve, 500));