feat(notification): adds notification content

Author: dvcol

README.md

@@ -255,9 +255,9 @@ See examples in the demo (code [here](https://github.com/dvcol/neo-svelte/tree/f
     - [x] fake typos
     - [x] random pauses
 
-- [ ] Alerts
-  - [ ] toast
-  - [ ] rich notification
+- [x] Alerts
+  - [x] toast
+  - [x] rich notification
 - [ ] container
   - [x] transition
   - [ ] split/resizable

demo/components/DemoNotification.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">
 
   import type { NeoNotificationStackProps } from '~/floating/notification/neo-notification-stack.model';
+  import type { NeoNotification } from '~/floating/notification/neo-notification.model';
 
   import NeoButton from '~/buttons/NeoButton.svelte';
   import NeoButtonGroup from '~/buttons/NeoButtonGroup.svelte';
   import { NeoNotificationPlacements } from '~/floating/common/neo-placement.model.js';
   import NeoNotificationStack from '~/floating/notification/NeoNotificationStack.svelte';
   import NeoNumberStep from '~/inputs/NeoNumberStep.svelte';
   import NeoSelect from '~/inputs/NeoSelect.svelte';
-  import { DefaultShadowElevation, MaxShadowElevation } from '~/utils/shadow.utils';
+  import { MaxShadowElevation } from '~/utils/shadow.utils';
 
   import { colorOptions } from '../utils/color.utils';
   import { positionOptions } from '../utils/placement.utils';
@@ -17,24 +18,31 @@
 
   const container = $state<NeoNotificationStackProps>({
     placement: NeoNotificationPlacements.TopEnd,
-    duration: 0,
+    duration: 5000,
     expand: false,
-  });
-
-  const options = $state({
-    elevation: DefaultShadowElevation,
+    draggable: true,
+    swipeable: true,
+    close: true,
+    loading: false,
+    elevation: 1,
     color: '',
+    filled: false,
+    tinted: false,
+    rounded: false,
+    borderless: false,
   });
-
   let stack = $state<NeoNotificationStack>();
 
-  const pushNotification = () => {
+  const pushNotification = (notif?: NeoNotification) => {
     if (!stack) return;
     (window as any).stack = (window as any).stack || [];
     (window as any).stack.push(stack.add({
-      containerProps: { style: `height: ${5}rem; width: ${20}rem` },
-    }),
-    );
+      title: `Item: ${new Date().toLocaleTimeString()}`,
+      subtitle: 'Subtitle: this is a notification item',
+      content: `This is a notification item created at ${new Date().toLocaleTimeString()}.
+      You can customize it with various properties.`,
+      ...notif,
+    }));
   };
 
 </script>
@@ -46,7 +54,7 @@
     center
     bind:value={container.duration}
     min={0}
-    max={10000}
+    max={60000}
     defaultValue={0}
     step={1000}
     nullable={false}
@@ -69,14 +77,17 @@
     rounded
     glass
   />
+</div>
+
+<div class="row">
   <NeoNumberStep
     label="Elevation"
     placement="left"
     center
-    bind:value={options.elevation}
+    bind:value={container.elevation}
     min={0}
     max={MaxShadowElevation}
-    defaultValue={DefaultShadowElevation}
+    defaultValue={1}
     nullable={false}
     floating={false}
     groupProps={{ style: 'margin-left: 6rem' }}
@@ -89,9 +100,9 @@
     placeholder="Select color"
     placement="left"
     floating={false}
-    color={options.color}
+    color={container.color}
     size={10}
-    bind:value={options.color}
+    bind:value={container.color}
     containerProps={{ style: 'margin-left: 6rem' }}
     options={colorOptions}
     openOnFocus
@@ -103,6 +114,13 @@
 <div class="row">
   <NeoButtonGroup text rounded>
     <NeoButton toggle bind:checked={container.expand}>Expand</NeoButton>
+    <NeoButton toggle bind:checked={container.draggable}>Draggable</NeoButton>
+    <NeoButton toggle bind:checked={container.swipeable}>Swipeable</NeoButton>
+    <NeoButton toggle bind:checked={container.close}>Close</NeoButton>
+    <NeoButton toggle bind:checked={container.loading}>Loading</NeoButton>
+    <NeoButton toggle bind:checked={container.tinted}>Tinted</NeoButton>
+    <NeoButton toggle bind:checked={container.filled}>Filled</NeoButton>
+    <NeoButton toggle bind:checked={container.rounded}>Rounded</NeoButton>
     <NeoButton onclick={stack?.clear}>Clear</NeoButton>
   </NeoButtonGroup>
 </div>
@@ -111,11 +129,39 @@
 
 <section>
   <div class="row">
-    <div class="column">
-      <span class="label">Notification</span>
+    <span class="label">Basic</span>
 
-      <NeoButton elevation="0" onclick={pushNotification}>Default</NeoButton>
-    </div>
+    <NeoButton elevation="0" onclick={() => pushNotification()}>Default</NeoButton>
+    <NeoButton elevation="0" onclick={() => pushNotification({ type: 'info' })}>Info</NeoButton>
+    <NeoButton elevation="0" onclick={() => pushNotification({ type: 'warning' })}>Warning</NeoButton>
+    <NeoButton elevation="0" onclick={() => pushNotification({ type: 'error' })}>Error</NeoButton>
+    <NeoButton elevation="0" onclick={() => pushNotification({ type: 'success' })}>Success</NeoButton>
+  </div>
+
+  <div class="row">
+    <span class="label">Advanced</span>
+
+    <NeoButton elevation="0" onclick={() => pushNotification({ title: undefined, subtitle: undefined })}>Compact</NeoButton>
+    <NeoButton
+      elevation="0"
+      onclick={() => pushNotification({ actionProps: {
+        label: 'Action',
+        onclick: () => {
+          return 'dismissed';
+        },
+      } })}
+    >
+      Action
+    </NeoButton>
+    <NeoButton
+      elevation="0"
+      onclick={() => pushNotification({
+        progress: true,
+        pauseOnHover: false,
+      })}
+    >
+      Progress
+    </NeoButton>
   </div>
 </section>
 
@@ -133,10 +179,6 @@
     word-break: break-all;
   }
 
-  .column {
-    @include flex.column($center: true, $gap: var(--neo-gap-lg), $flex: 0 1 auto);
-  }
-
   .row {
     @include flex.row($center: true, $gap: var(--neo-gap-xl), $flex: 0 1 auto);
 

src/lib/buttons/NeoCloseButton.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
-  import type { NeoIconButtonProps } from '~/buttons/neo-icon-button.model.js';
+  import type { NeoCloseButtonProps } from '~/buttons/neo-close-button.model.js';
 
   import NeoButton from '~/buttons/NeoButton.svelte';
   import NeoIconClose from '~/icons/NeoIconClose.svelte';
+  import { getColorVariable } from '~/utils/index.js';
 
   let {
     // Button props
@@ -11,28 +12,52 @@
     hovered = $bindable(false),
     focused = $bindable(false),
 
+    // States
+    hoverColor,
+    size,
+
     // Other Props
     iconProps,
     ...rest
-  }: NeoIconButtonProps = $props();
+  }: NeoCloseButtonProps = $props();
 
+  const iconSize = $derived.by(() => {
+    switch (size) {
+      case 'sm':
+        return 0.6875;
+      case 'lg':
+        return 1;
+      default:
+        return 0.875;
+    }
+  });
 </script>
 
 {#snippet icon()}
-  <NeoIconClose size="0.875rem" {...iconProps} />
+  <NeoIconClose size="{iconSize}rem" {...iconProps} />
 {/snippet}
 
-<div class="neo-close-button">
+<div
+  data-size={size}
+  class="neo-close-button"
+  style:--neo-close-color={getColorVariable(hoverColor)}
+>
   <NeoButton bind:ref bind:checked bind:hovered bind:focused {icon} {...rest} />
 </div>
 
 <style lang="scss">
   .neo-close-button {
     display: contents;
 
-    --neo-btn-text-color-hover: var(--neo-close-color-hover, rgb(255 0 0 / 75%));
+    --neo-btn-text-color-hover: oklch(from var(--neo-close-color) l c h / 75%);
     --neo-btn-text-color-active: var(--neo-close-color, rgb(255 0 0));
 
+    &[data-size='sm'] {
+      --neo-btn-padding-empty: var(--neo-btn-close-padding, var(--neo-gap-3xs, 0.3125rem));
+      --neo-btn-padding: var(--neo-btn-close-padding, var(--neo-gap-3xs, 0.3125rem));
+      --neo-btn-margin: var(--neo-btn-close-margin, var(--neo-gap-xxs, 0.5rem));
+    }
+
     > :global(.neo-button) {
       :global(.neo-icon) {
         transition: rotate 0.3s ease-out;

src/lib/buttons/neo-close-button.model.ts

@@ -0,0 +1,15 @@
+import type { NeoIconButtonProps } from '~/buttons/neo-icon-button.model.js';
+import type { Color } from '~/utils/colors.utils.js';
+
+export const NeoCloseButtonSize = {
+  Small: 'sm',
+  Medium: 'md',
+  Large: 'lg',
+} as const;
+
+export type NeoCloseButtonSizes = (typeof NeoCloseButtonSize)[keyof typeof NeoCloseButtonSize];
+
+export interface NeoCloseButtonProps extends NeoIconButtonProps {
+  hoverColor?: Color | CSSStyleDeclaration['color'];
+  size?: NeoCloseButtonSizes;
+}