@marianmeres/stuic 3.96.0 → 3.97.0
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.
- package/AGENTS.md +7 -6
- package/API.md +90 -16
- package/README.md +1 -1
- package/dist/components/Header/Header.svelte +61 -22
- package/dist/components/Header/Header.svelte.d.ts +27 -2
- package/dist/components/Header/README.md +35 -0
- package/dist/components/Header/index.css +35 -2
- package/dist/components/IconSwap/README.md +69 -0
- package/dist/components/ImageCycler/README.md +83 -0
- package/dist/components/LoginForm/README.md +148 -0
- package/dist/components/LoginOrRegisterForm/README.md +170 -0
- package/dist/components/RegisterForm/README.md +183 -0
- package/dist/components/Separator/README.md +44 -0
- package/docs/architecture.md +14 -10
- package/docs/domains/components.md +112 -28
- package/docs/domains/utils.md +1 -1
- package/package.json +1 -1
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
## Overview
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
57 Svelte 5 component directories with consistent API patterns. All use runes-based reactivity.
|
|
6
6
|
|
|
7
7
|
## Component Categories
|
|
8
8
|
|
|
@@ -798,21 +798,34 @@ Prefix: `--stuic-cron-input-*`
|
|
|
798
798
|
|
|
799
799
|
## Header
|
|
800
800
|
|
|
801
|
-
Responsive navigation header with logo, nav items, avatar, and
|
|
801
|
+
Responsive navigation header with leading slot, logo, nav items, locale switcher, action icon buttons, avatar, and configurable responsive collapse. Two collapse modes:
|
|
802
|
+
|
|
803
|
+
- `"hamburger"` (default): nav items fold into a trailing dropdown along with the locale switcher and (if interactive) the avatar.
|
|
804
|
+
- `"hide"`: nav items are hidden entirely — no trailing hamburger. Avatar + actions stay visible. Common "app shell" pattern where a leading hamburger opens a side drawer.
|
|
802
805
|
|
|
803
806
|
### Exports
|
|
804
807
|
|
|
805
|
-
| Export
|
|
806
|
-
|
|
|
807
|
-
| `Header`
|
|
808
|
-
| `HeaderProps`
|
|
809
|
-
| `HeaderNavItem`
|
|
810
|
-
| `
|
|
811
|
-
| `
|
|
812
|
-
| `
|
|
813
|
-
| `
|
|
814
|
-
| `
|
|
815
|
-
| `
|
|
808
|
+
| Export | Kind | Description |
|
|
809
|
+
| ----------------------------------- | --------- | ---------------------------------------- |
|
|
810
|
+
| `Header` | component | Main header component |
|
|
811
|
+
| `HeaderProps` | type | Props type |
|
|
812
|
+
| `HeaderNavItem` | type | Nav item interface |
|
|
813
|
+
| `HeaderActionItem` | type | Action icon-button interface |
|
|
814
|
+
| `HeaderLocaleItem` | type | Locale switcher item |
|
|
815
|
+
| `HeaderCollapseMode` | type | `"hamburger" \| "hide"` |
|
|
816
|
+
| `HeaderLeadingHamburger` | type | `boolean \| "collapsed"` |
|
|
817
|
+
| `HEADER_BASE_CLASSES` | constant | `"stuic-header"` |
|
|
818
|
+
| `HEADER_CONTENT_CLASSES` | constant | `"stuic-header-content"` |
|
|
819
|
+
| `HEADER_LEADING_CLASSES` | constant | `"stuic-header-leading"` |
|
|
820
|
+
| `HEADER_LEADING_HAMBURGER_CLASSES` | constant | `"stuic-header-leading-hamburger"` |
|
|
821
|
+
| `HEADER_LOGO_CLASSES` | constant | `"stuic-header-logo"` |
|
|
822
|
+
| `HEADER_NAV_CLASSES` | constant | `"stuic-header-nav"` |
|
|
823
|
+
| `HEADER_NAV_ITEM_CLASSES` | constant | `"stuic-header-nav-item"` |
|
|
824
|
+
| `HEADER_ACTIONS_CLASSES` | constant | `"stuic-header-actions"` |
|
|
825
|
+
| `HEADER_ACTION_CLASSES` | constant | `"stuic-header-action"` |
|
|
826
|
+
| `HEADER_END_CLASSES` | constant | `"stuic-header-end"` |
|
|
827
|
+
| `HEADER_HAMBURGER_CLASSES` | constant | `"stuic-header-hamburger"` |
|
|
828
|
+
| `HEADER_LOCALE_CLASSES` | constant | `"stuic-header-locale"` |
|
|
816
829
|
|
|
817
830
|
### HeaderNavItem
|
|
818
831
|
|
|
@@ -821,6 +834,7 @@ interface HeaderNavItem {
|
|
|
821
834
|
id: string | number;
|
|
822
835
|
label: THC;
|
|
823
836
|
href?: string;
|
|
837
|
+
target?: string;
|
|
824
838
|
onclick?: () => void;
|
|
825
839
|
icon?: THC;
|
|
826
840
|
active?: boolean;
|
|
@@ -829,28 +843,98 @@ interface HeaderNavItem {
|
|
|
829
843
|
}
|
|
830
844
|
```
|
|
831
845
|
|
|
846
|
+
### HeaderActionItem
|
|
847
|
+
|
|
848
|
+
```ts
|
|
849
|
+
interface HeaderActionItem {
|
|
850
|
+
id: string | number;
|
|
851
|
+
icon?: THC; // visible content (ignored when render is provided)
|
|
852
|
+
label: THC; // aria-label
|
|
853
|
+
onclick?: () => void;
|
|
854
|
+
href?: string;
|
|
855
|
+
target?: string;
|
|
856
|
+
active?: boolean;
|
|
857
|
+
disabled?: boolean;
|
|
858
|
+
class?: string;
|
|
859
|
+
/** Optional custom renderer — replaces the default <Button> while
|
|
860
|
+
* keeping Header-owned positioning + collapse behavior. */
|
|
861
|
+
render?: Snippet<[{
|
|
862
|
+
action: HeaderActionItem;
|
|
863
|
+
class: string;
|
|
864
|
+
isCollapsed: boolean;
|
|
865
|
+
onclick: () => void;
|
|
866
|
+
}]>;
|
|
867
|
+
}
|
|
868
|
+
```
|
|
869
|
+
|
|
832
870
|
### Key Props
|
|
833
871
|
|
|
834
|
-
| Prop
|
|
835
|
-
|
|
|
836
|
-
| `
|
|
837
|
-
| `
|
|
838
|
-
| `
|
|
839
|
-
| `
|
|
840
|
-
| `
|
|
841
|
-
| `
|
|
842
|
-
| `
|
|
843
|
-
| `
|
|
844
|
-
| `
|
|
845
|
-
| `
|
|
846
|
-
|
|
847
|
-
|
|
872
|
+
| Prop | Type | Default | Description |
|
|
873
|
+
| ----------------------- | ------------------------------------------ | ---------------------- | ------------------------------------------------------------------------------------------ |
|
|
874
|
+
| `leading` | `Snippet<[{ isCollapsed }]>` | — | Leading (left) slot. Overrides `leadingHamburger`. |
|
|
875
|
+
| `leadingHamburger` | `boolean \| "collapsed"` | `false` | Built-in leading hamburger (`"collapsed"` = only below threshold). |
|
|
876
|
+
| `onLeadingHamburger` | `() => void` | — | Click handler for the leading hamburger (typically opens a drawer). |
|
|
877
|
+
| `leadingHamburgerIcon` | `THC` | menu icon | Icon override for the leading hamburger. |
|
|
878
|
+
| `leadingHamburgerLabel` | `string` | `"Open menu"` | Aria-label for the leading hamburger. |
|
|
879
|
+
| `logo` | `Snippet` | — | Logo/brand snippet. |
|
|
880
|
+
| `projectName` | `string` | — | Simple text logo alternative. |
|
|
881
|
+
| `navVariant` | `ButtonVariant` | `"ghost"` | Button variant for nav items + locale trigger. |
|
|
882
|
+
| `items` | `HeaderNavItem[]` | `[]` | Nav items — inline expanded, dropdown collapsed (hamburger mode). |
|
|
883
|
+
| `actions` | `HeaderActionItem[]` | `[]` | Action icon buttons. Always visible. |
|
|
884
|
+
| `onActionSelect` | `(action) => void` | — | Called after per-item `onclick`. |
|
|
885
|
+
| `avatar` | `Snippet` | — | Avatar snippet (far right). |
|
|
886
|
+
| `avatarOnClick` | `() => void` | — | Makes avatar interactive. In `"hamburger"` mode it folds into the dropdown when collapsed. |
|
|
887
|
+
| `avatarLabel` | `THC` | `"Account"` | Label for the avatar entry inside the collapsed dropdown. |
|
|
888
|
+
| `locales` | `HeaderLocaleItem[]` | `[]` | Locale items. Switcher only renders when 2+. |
|
|
889
|
+
| `activeLocale` | `string` | — | Current locale id. |
|
|
890
|
+
| `onLocaleChange` | `(localeId) => void` | — | Locale selection callback. |
|
|
891
|
+
| `localeLabel` | `THC` | `"Language"` | Section header inside the collapsed dropdown. |
|
|
892
|
+
| `contentMaxWidth` | `string \| number` | — | Inner content row max-width (outer header stays 100%). |
|
|
893
|
+
| `collapseThreshold` | `number` | `768` | Width (px) to collapse; 0 disables. |
|
|
894
|
+
| `collapseMode` | `"hamburger" \| "hide"` | `"hamburger"` | Collapse behavior. See top of section. |
|
|
895
|
+
| `keepLocaleOnCollapse` | `boolean` | `false` | Keep locale switcher visible when collapsed (only `collapseMode === "hide"`). |
|
|
896
|
+
| `fixed` | `boolean` | `false` | Fixed positioning at top. |
|
|
897
|
+
| `isCollapsed` | `boolean` | — | Bindable: collapsed state. |
|
|
898
|
+
| `isMenuOpen` | `boolean` | — | Bindable: hamburger menu open. |
|
|
899
|
+
| `dropdownPosition` | `DropdownMenuPosition` | `"bottom-span-right"` | Position of the collapsed dropdown. |
|
|
900
|
+
| `iconSize` | `number` | `24` | Hamburger/X icon size in px. |
|
|
901
|
+
| `onSelect` | `(item) => void` | — | Item selection callback (both modes). |
|
|
902
|
+
|
|
903
|
+
Snippets: `leading({ isCollapsed })`, `logo`, `avatar`, `children({ isCollapsed, items, offsetWidth })`. `HeaderActionItem.render` is a per-action snippet.
|
|
904
|
+
|
|
905
|
+
Class slots: `class`, `classContent`, `classLeading`, `classLeadingHamburger`, `classLogo`, `classNav`, `classNavItem`, `classNavItemActive`, `classActions`, `classAction`, `classActionActive`, `classEnd`, `classAvatar`, `classLocale`, `classHamburger`, `classDropdown`.
|
|
906
|
+
|
|
907
|
+
### App-shell pattern (`collapseMode="hide"`)
|
|
908
|
+
|
|
909
|
+
Common pattern for app interfaces: the leading hamburger opens a side drawer for navigation, while avatar + action buttons (search, notifications, cart…) remain accessible in the top bar even on narrow viewports.
|
|
910
|
+
|
|
911
|
+
```svelte
|
|
912
|
+
<Header
|
|
913
|
+
projectName="App"
|
|
914
|
+
items={navItems} <!-- inline expanded, hidden collapsed -->
|
|
915
|
+
actions={[
|
|
916
|
+
{ id: "search", icon: { html: iconSearch() }, label: "Search", onclick: openSearch },
|
|
917
|
+
{ id: "cart", icon: { html: iconCart() }, label: "Cart", onclick: openCart },
|
|
918
|
+
]}
|
|
919
|
+
collapseMode="hide"
|
|
920
|
+
leadingHamburger="collapsed"
|
|
921
|
+
onLeadingHamburger={() => (drawerOpen = true)}
|
|
922
|
+
{locales}
|
|
923
|
+
{activeLocale}
|
|
924
|
+
onLocaleChange={(id) => (activeLocale = id)}
|
|
925
|
+
avatarOnClick={() => goto("/me")}
|
|
926
|
+
>
|
|
927
|
+
{#snippet avatar()}<Avatar initials="MM" autoColor />{/snippet}
|
|
928
|
+
</Header>
|
|
929
|
+
```
|
|
930
|
+
|
|
931
|
+
See [Header/README.md](../../src/lib/components/Header/README.md) for the breakdown of which markup branch handles each requirement of this pattern.
|
|
848
932
|
|
|
849
933
|
### CSS Tokens
|
|
850
934
|
|
|
851
935
|
Prefix: `--stuic-header-*`
|
|
852
936
|
|
|
853
|
-
`padding-x`, `padding-y`, `gap`, `min-height`, `nav-gap`, `project-name-font-weight`, `z-index`, `bg`, `text`, `border-width`, `border-color`, `nav-item-bg-active`, `nav-item-text-active`
|
|
937
|
+
`padding-x`, `padding-y`, `gap`, `min-height`, `nav-gap`, `content-max-width`, `project-name-font-weight`, `z-index`, `bg`, `text`, `border-width`, `border-color`, `nav-item-bg-active`, `nav-item-text-active`
|
|
854
938
|
|
|
855
939
|
---
|
|
856
940
|
|
package/docs/domains/utils.md
CHANGED