diff --git a/README.md b/README.md
index 9827f2d..5b14274 100644
--- a/README.md
+++ b/README.md
@@ -51,6 +51,8 @@ See examples in the demo (code [here](https://github.com/dvcol/neo-svelte/tree/f
## TODO
- [ ] @media any-pointer:coarse any-hover:none
- [x] Buttons
+ - [x] toggle
+ - [x] groups
- [x] Tabs
- [x] Card
- [x] Inputs
@@ -78,6 +80,7 @@ See examples in the demo (code [here](https://github.com/dvcol/neo-svelte/tree/f
- [x] custom before-after
- [x] steps
- [ ] vertical
+ - [ ] rating (stars)
- [x] select
- [x] native
- [ ] custom
@@ -87,6 +90,19 @@ See examples in the demo (code [here](https://github.com/dvcol/neo-svelte/tree/f
- [ ] nested menus
- [ ] list
+ - [ ] snippets
+ - [ ] children
+ - [ ] header
+ - [ ] footer
+ - [ ] select
+ - [ ] multiple
+ - [ ] disabled
+ - [ ] readonly
+ - [ ] header (pills or item count)
+ - [ ] separator
+ - [ ] label (sections
+ - [ ] keyboard navigation
+ - [ ] scroll shadow
- [ ] virtualized
- [ ] infinite scroll
- [ ] drag & drop
@@ -98,6 +114,27 @@ See examples in the demo (code [here](https://github.com/dvcol/neo-svelte/tree/f
- [ ] select
- [ ] tree
+- [ ] Chat
+ - [ ] infinite scroll
+ - [ ] virtual scroll
+ - [ ] async
+ - [ ] stream
+ - [ ] generative text animation
+ - [ ] scroll to bottom
+ - [ ] typing indicator
+ - [ ] read indicator
+ - [ ] reactions
+ - [ ] threads
+ - [ ] @ / # tags
+ - [ ] mentions
+ - [ ] attachments
+ - [ ] gifs/images
+ - [ ] videos
+ - [ ] audio
+ - [ ] custom cards (contact, etc.)
+ - [ ] custom bubbles
+ - [ ] custom input
+
- [ ] Modal/dialog
- [ ] drawer/panel
- [ ] collapsible
diff --git a/demo/App.svelte b/demo/App.svelte
index acd5448..8a9b6f4 100644
--- a/demo/App.svelte
+++ b/demo/App.svelte
@@ -24,7 +24,15 @@
in: fade,
out: fade,
params: { in: { delay: 200, duration: 200 }, out: { duration: 200 } },
- props: { container: { style: 'display: flex; justify-content: center; align-items: center;' } },
+ props: {
+ container: {
+ style: {
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+ },
+ },
skipFirst: true,
};
diff --git a/demo/components/DemoLists.svelte b/demo/components/DemoLists.svelte
new file mode 100644
index 0000000..672405e
--- /dev/null
+++ b/demo/components/DemoLists.svelte
@@ -0,0 +1,121 @@
+
+
+
+
+ Empty
+ Loading
+ Skeleton
+
+
+
+
+
+ List
+
+
+
+
+
+
Custom loader
+
+ {#snippet loader()}
+
+
+
+ {/snippet}
+
+
+
+
Custom Empty
+
+ {#snippet empty()}
+
+ Custom empty snippet
+
+ {/snippet}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {@render list()}
+ {@render loader()}
+
+ {:else if customEmpty}
+ {@render customEmpty(context)}
+ {:else}
+
+ {/if}
+
+
+
diff --git a/src/lib/list/neo-list.model.ts b/src/lib/list/neo-list.model.ts
new file mode 100644
index 0000000..b6471d4
--- /dev/null
+++ b/src/lib/list/neo-list.model.ts
@@ -0,0 +1,46 @@
+import type { Snippet } from 'svelte';
+import type { Color } from '~/utils/colors.utils.js';
+import type { HTMLNeoBaseElement, HTMLRefProps } from '~/utils/html-element.utils.js';
+
+export type NeoListItem = {
+ value: Value;
+ tag?: Tag;
+ id?: string | number;
+ label?: string;
+ color?: Color;
+ render?: Snippet;
+} & HTMLNeoBaseElement;
+
+export type NeoListContext = {
+ // States
+ /**
+ * List items to display.
+ */
+ items?: NeoListItem[];
+
+ /**
+ * If the list is currently loading additional items.
+ */
+ loading?: boolean | number;
+ /**
+ * If the list should display a loading skeleton.
+ */
+ skeleton?: boolean;
+};
+
+export type NeoListProps = {
+ // Snippets
+ item?: Snippet<[NeoListItem, number, NeoListContext]>;
+ empty?: Snippet<[NeoListContext]>;
+ loader?: Snippet<[NeoListContext]>;
+ children?: Snippet<[NeoListContext]>;
+
+ // States
+ /**
+ * The HTML tag to use for the list.
+ * @default 'ul'
+ */
+ tag?: Tag | keyof HTMLElementTagNameMap;
+} & HTMLRefProps &
+ HTMLNeoBaseElement &
+ NeoListContext;
diff --git a/src/lib/skeletons/NeoSkeletonContainer.svelte b/src/lib/skeletons/NeoSkeletonContainer.svelte
index 0ce0211..0e6e7ef 100644
--- a/src/lib/skeletons/NeoSkeletonContainer.svelte
+++ b/src/lib/skeletons/NeoSkeletonContainer.svelte
@@ -43,8 +43,8 @@
const updateSize = () => {
const rect = ref?.getBoundingClientRect();
- if (rect?.width) skeletonWidth = `${rect.width}px`;
- if (rect?.height) skeletonHeight = `${rect.height}px`;
+ if (!width && rect?.width) skeletonWidth = `${rect.width}px`;
+ if (!height && rect?.height) skeletonHeight = `${rect.height}px`;
};
$effect(() => {
@@ -87,7 +87,7 @@
.neo-skeleton-container {
display: flex;
width: var(--neo-skeleton-content-width);
- height: var(--neo-skeleton-content-height);
+ min-height: var(--neo-skeleton-content-height);
}
.neo-skeleton-content-container {
diff --git a/src/lib/skeletons/NeoSkeletonText.svelte b/src/lib/skeletons/NeoSkeletonText.svelte
index 20ad209..a4f2d0e 100644
--- a/src/lib/skeletons/NeoSkeletonText.svelte
+++ b/src/lib/skeletons/NeoSkeletonText.svelte
@@ -172,6 +172,7 @@
&.neo-title {
width: 70%;
height: var(--neo-skeleton-text-title-font-size, var(--neo-font-size-xl, 1.5rem));
+ margin: 0;
}
}
diff --git a/src/lib/styles/common/colors.scss b/src/lib/styles/common/colors.scss
index cbb4942..3941a60 100644
--- a/src/lib/styles/common/colors.scss
+++ b/src/lib/styles/common/colors.scss
@@ -10,17 +10,23 @@
--neo-grey-dark: oklch(from var(--neo-grey) calc(l + 0.2) c h);
--neo-blue: oklch(50% 0.302 264.206deg);
--neo-blue-dark: oklch(from var(--neo-blue) calc(l + 0.4) c h);
+ --neo-purple-light: oklch(from var(--neo-purple) calc(l + 0.25) c h);
+ --neo-purple: oklch(50% 0.302 304.206deg);
--neo-red-light: oklch(from var(--neo-red) calc(l + 0.25) c h);
--neo-red: oklch(50% 0.302 26.206deg);
+ --neo-orange-light: oklch(from var(--neo-orange) calc(l + 0.15) c h);
+ --neo-orange: oklch(72% 0.177 65deg);
--neo-green-light: oklch(from var(--neo-green) calc(l + 0.25) c h);
--neo-green: oklch(52% 0.177 142.495deg);
/** primary colors */
--neo-color-primary: var(--neo-blue);
--neo-color-primary-50: oklch(from var(--neo-color-primary) l c h / 50%);
+ --neo-color-secondary: var(--neo-purple);
--neo-color-error: var(--neo-red);
--neo-color-error-50: oklch(from var(--neo-color-error) l c h / 50%);
--neo-color-error-75: oklch(from var(--neo-color-error) l c h / 75%);
+ --neo-color-warning: var(--neo-orange);
--neo-color-success: var(--neo-green);
--neo-color-success-50: oklch(from var(--neo-color-success) l c h / 50%);
@@ -89,11 +95,13 @@
/** dark primary colors */
--neo-dark-color-primary: var(--neo-blue-dark);
--neo-dark-color-primary-50: oklch(from var(--neo-dark-color-primary) l c h / 50%);
+ --neo-dark-color-secondary: var(--neo-purple-light);
--neo-dark-color-error: var(--neo-red-light);
--neo-dark-color-error-50: oklch(from var(--neo-dark-color-error) l c h / 50%);
--neo-dark-color-error-75: oklch(from var(--neo-dark-color-error) l c h / 75%);
--neo-dark-color-success: var(--neo-green-light);
--neo-dark-color-success-50: oklch(from var(--neo-dark-color-success) l c h / 50%);
+ --neo-dark-color-warning: var(--neo-orange-light);
/*********************
** dark mode colors **
@@ -164,11 +172,13 @@
*********************/
--neo-color-primary: var(--neo-dark-color-primary);
--neo-color-primary-50: var(--neo-dark-color-primary-50);
+ --neo-color-secondary: var(--neo-dark-color-secondary);
--neo-color-error: var(--neo-dark-color-error);
--neo-color-error-50: var(--neo-dark-color-error-50);
--neo-color-error-75: var(--neo-dark-color-error-75);
--neo-color-success: var(--neo-dark-color-success);
--neo-color-success-50: var(--neo-dark-color-success-50);
+ --neo-color-warning: var(--neo-dark-color-warning);
/*********************
** semantic colors **
diff --git a/src/lib/utils/colors.utils.ts b/src/lib/utils/colors.utils.ts
new file mode 100644
index 0000000..7b88550
--- /dev/null
+++ b/src/lib/utils/colors.utils.ts
@@ -0,0 +1,22 @@
+export const Colors = {
+ Primary: 'primary',
+ Secondary: 'secondary',
+ Success: 'success',
+ Warning: 'warning',
+ Error: 'error',
+} as const;
+
+export type Color = (typeof Colors)[keyof typeof Colors];
+
+export const ColorVariables = {
+ [Colors.Primary]: '--neo-color-primary',
+ [Colors.Secondary]: '--neo-color-secondary',
+ [Colors.Success]: '--neo-color-success',
+ [Colors.Warning]: '--neo-color-warning',
+ [Colors.Error]: '--neo-color-error',
+} as const;
+
+export const getColorVariable = (color?: Color): string | undefined => {
+ if (!color) return;
+ return `var(${ColorVariables[color]})`;
+};