@sentropic/design-system-svelte 0.34.50 → 0.34.51

package/dist/ListReportPage.svelte

@@ -0,0 +1,184 @@
+<script lang="ts" module>
+  import type { SideNavItem } from "./SideNav.svelte";
+
+  export interface ListReportPageNavItem extends SideNavItem {}
+
+  export interface ListReportPageColumn {
+    key: string;
+    label: string;
+    sortable?: boolean;
+    align?: "start" | "center" | "end";
+    width?: string;
+  }
+
+  export interface ListReportPageRow {
+    id: string;
+    [key: string]: unknown;
+  }
+
+  export interface ListReportPageFilter {
+    field: string;
+    value: string;
+    operator?: string;
+  }
+
+  export interface ListReportPageAction {
+    value: string;
+    label: string;
+    danger?: boolean;
+  }
+
+  export type ListReportPageProps = {
+    appTitle: string;
+    navItems?: ListReportPageNavItem[];
+    pageTitle: string;
+    primaryAction?: string;
+    secondaryAction?: string;
+    searchLabel?: string;
+    searchPlaceholder?: string;
+    filterBarLabel?: string;
+    filters?: ListReportPageFilter[];
+    columns: ListReportPageColumn[];
+    rows: ListReportPageRow[];
+    pageSize?: number;
+    rowActions?: ListReportPageAction[];
+    rowActionsLabel?: string;
+    onprimaryaction?: () => void;
+    onsearch?: (q: string) => void;
+  };
+</script>
+
+<script lang="ts">
+  import SideNav from "./SideNav.svelte";
+  import DataTable from "./DataTable.svelte";
+  import Search from "./Search.svelte";
+  import FilterBar from "./FilterBar.svelte";
+  import FilterPill from "./FilterPill.svelte";
+  import Button from "./Button.svelte";
+
+  let {
+    appTitle,
+    navItems = [],
+    pageTitle,
+    primaryAction,
+    secondaryAction,
+    searchLabel,
+    searchPlaceholder = "Rechercher…",
+    filterBarLabel = "Filtres actifs",
+    filters = [],
+    columns,
+    rows,
+    pageSize = 10,
+    rowActions = [],
+    rowActionsLabel,
+    onprimaryaction,
+    onsearch,
+  }: ListReportPageProps = $props();
+
+  let searchValue = $state("");
+
+  function handleSearch(q: string) {
+    searchValue = q;
+    onsearch?.(q);
+  }
+</script>
+
+<div class="st-lrp">
+  <header class="st-lrp__header">
+    <span class="st-lrp__appTitle">{appTitle}</span>
+  </header>
+  <div class="st-lrp__body">
+    {#if navItems.length > 0}
+      <aside class="st-lrp__aside">
+        <SideNav items={navItems} />
+      </aside>
+    {/if}
+    <main class="st-lrp__main">
+      <div class="st-lrp__titlebar">
+        <h1 class="st-lrp__pageTitle">{pageTitle}</h1>
+        <div class="st-lrp__titleActions">
+          {#if secondaryAction}
+            <Button variant="secondary">{secondaryAction}</Button>
+          {/if}
+          {#if primaryAction}
+            <Button variant="primary" onclick={onprimaryaction}>{primaryAction}</Button>
+          {/if}
+        </div>
+      </div>
+      <div class="st-lrp__toolbar">
+        <Search
+          label={searchLabel}
+          placeholder={searchPlaceholder}
+          value={searchValue}
+          fluid
+          oninput={(e) => handleSearch((e.target as HTMLInputElement).value)}
+        />
+        {#if filters.length > 0}
+          <FilterBar label={filterBarLabel}>
+            {#each filters as f}
+              <FilterPill field={f.field} value={f.value} operator={f.operator} />
+            {/each}
+          </FilterBar>
+        {/if}
+      </div>
+      <DataTable {columns} {rows} />
+    </main>
+  </div>
+</div>
+
+<style>
+  .st-lrp {
+    display: grid;
+    grid-template-rows: auto 1fr;
+    min-block-size: 100vh;
+    background: var(--st-semantic-surface-default);
+    color: var(--st-semantic-text-primary);
+  }
+  .st-lrp__header {
+    border-block-end: 1px solid var(--st-semantic-border-subtle);
+    padding: var(--st-spacing-3, 0.75rem) var(--st-spacing-6, 1.5rem);
+    display: flex;
+    align-items: center;
+  }
+  .st-lrp__appTitle {
+    font-weight: 700;
+    font-size: 1rem;
+  }
+  .st-lrp__body {
+    display: grid;
+    grid-template-columns: 220px 1fr;
+  }
+  .st-lrp__aside {
+    border-inline-end: 1px solid var(--st-semantic-border-subtle);
+    background: var(--st-semantic-surface-raised);
+    overflow-y: auto;
+  }
+  .st-lrp__main {
+    display: flex;
+    flex-direction: column;
+    gap: var(--st-spacing-4, 1rem);
+    padding: var(--st-spacing-6, 1.5rem);
+    overflow: auto;
+  }
+  .st-lrp__titlebar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--st-spacing-3, 0.75rem);
+  }
+  .st-lrp__pageTitle {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin: 0;
+    color: var(--st-semantic-text-primary);
+  }
+  .st-lrp__titleActions {
+    display: flex;
+    gap: var(--st-spacing-2, 0.5rem);
+  }
+  .st-lrp__toolbar {
+    display: flex;
+    flex-direction: column;
+    gap: var(--st-spacing-2, 0.5rem);
+  }
+</style>

package/dist/ListReportPage.svelte.d.ts

@@ -0,0 +1,46 @@
+import type { SideNavItem } from "./SideNav.svelte";
+export interface ListReportPageNavItem extends SideNavItem {
+}
+export interface ListReportPageColumn {
+    key: string;
+    label: string;
+    sortable?: boolean;
+    align?: "start" | "center" | "end";
+    width?: string;
+}
+export interface ListReportPageRow {
+    id: string;
+    [key: string]: unknown;
+}
+export interface ListReportPageFilter {
+    field: string;
+    value: string;
+    operator?: string;
+}
+export interface ListReportPageAction {
+    value: string;
+    label: string;
+    danger?: boolean;
+}
+export type ListReportPageProps = {
+    appTitle: string;
+    navItems?: ListReportPageNavItem[];
+    pageTitle: string;
+    primaryAction?: string;
+    secondaryAction?: string;
+    searchLabel?: string;
+    searchPlaceholder?: string;
+    filterBarLabel?: string;
+    filters?: ListReportPageFilter[];
+    columns: ListReportPageColumn[];
+    rows: ListReportPageRow[];
+    pageSize?: number;
+    rowActions?: ListReportPageAction[];
+    rowActionsLabel?: string;
+    onprimaryaction?: () => void;
+    onsearch?: (q: string) => void;
+};
+declare const ListReportPage: import("svelte").Component<ListReportPageProps, {}, "">;
+type ListReportPage = ReturnType<typeof ListReportPage>;
+export default ListReportPage;
+//# sourceMappingURL=ListReportPage.svelte.d.ts.map

package/dist/ListReportPage.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListReportPage.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ListReportPage.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpD,MAAM,WAAW,qBAAsB,SAAQ,WAAW;CAAG;AAE7D,MAAM,WAAW,oBAAoB;IACnC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,qBAAqB,EAAE,CAAC;IACnC,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,oBAAoB,EAAE,CAAC;IACjC,OAAO,EAAE,oBAAoB,EAAE,CAAC;IAChC,IAAI,EAAE,iBAAiB,EAAE,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,oBAAoB,EAAE,CAAC;IACpC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC,CAAC;AAwFJ,QAAA,MAAM,cAAc,yDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/MasterDetail.svelte

@@ -0,0 +1,267 @@
+<script lang="ts" module>
+  import type { SideNavItem } from "./SideNav.svelte";
+
+  export interface MasterDetailNavItem extends SideNavItem {}
+
+  export type MasterDetailStatusTone = "neutral" | "info" | "success" | "warning" | "error";
+
+  export interface MasterDetailItem {
+    id: string;
+    primary: string;
+    secondary?: string;
+    statusLabel?: string;
+    statusTone?: MasterDetailStatusTone;
+    active?: boolean;
+  }
+
+  export interface MasterDetailField {
+    key: string;
+    value: string;
+  }
+
+  export type MasterDetailProps = {
+    appTitle?: string;
+    navItems?: MasterDetailNavItem[];
+    listTitle: string;
+    searchPlaceholder?: string;
+    listItems: MasterDetailItem[];
+    detailTitle: string;
+    detailStatus?: { label: string; tone: MasterDetailStatusTone };
+    detailActions?: string[];
+    detailFields: MasterDetailField[];
+    onlistitemclick?: (id: string) => void;
+  };
+</script>
+
+<script lang="ts">
+  import SideNav from "./SideNav.svelte";
+  import Badge from "./Badge.svelte";
+  import Button from "./Button.svelte";
+  import Search from "./Search.svelte";
+
+  let {
+    appTitle,
+    navItems = [],
+    listTitle,
+    searchPlaceholder = "Rechercher…",
+    listItems,
+    detailTitle,
+    detailStatus,
+    detailActions = [],
+    detailFields,
+    onlistitemclick,
+  }: MasterDetailProps = $props();
+
+  let searchValue = $state("");
+</script>
+
+<div class="st-md">
+  {#if appTitle}
+    <header class="st-md__header">
+      <span class="st-md__appTitle">{appTitle}</span>
+    </header>
+  {/if}
+  <div class="st-md__body">
+    {#if navItems.length > 0}
+      <aside class="st-md__aside">
+        <SideNav items={navItems} />
+      </aside>
+    {/if}
+    <div class="st-md__split">
+      <aside class="st-md__list" aria-label={listTitle}>
+        <div class="st-md__listHeader">
+          <h2 class="st-md__listTitle">{listTitle}</h2>
+          <Search
+            placeholder={searchPlaceholder}
+            value={searchValue}
+            fluid
+            oninput={(e) => (searchValue = (e.target as HTMLInputElement).value)}
+          />
+        </div>
+        <ul class="st-md__listItems">
+          {#each listItems as item (item.id)}
+            <li>
+              <button
+                class="st-md__listItem"
+                class:st-md__listItem--active={item.active}
+                onclick={() => onlistitemclick?.(item.id)}
+                type="button"
+              >
+                <span class="st-md__itemPrimary">{item.primary}</span>
+                {#if item.secondary}
+                  <span class="st-md__itemSecondary">{item.secondary}</span>
+                {/if}
+                {#if item.statusLabel}
+                  <Badge tone={item.statusTone ?? "neutral"}>{item.statusLabel}</Badge>
+                {/if}
+              </button>
+            </li>
+          {/each}
+        </ul>
+      </aside>
+      <main class="st-md__detail">
+        <div class="st-md__detailHeader">
+          <div class="st-md__detailTitleRow">
+            <h1 class="st-md__detailTitle">{detailTitle}</h1>
+            {#if detailStatus}
+              <Badge tone={detailStatus.tone}>{detailStatus.label}</Badge>
+            {/if}
+          </div>
+          {#if detailActions.length > 0}
+            <div class="st-md__detailActions">
+              {#each detailActions as action, i}
+                <Button variant={i === 0 ? "primary" : "secondary"}>{action}</Button>
+              {/each}
+            </div>
+          {/if}
+        </div>
+        <dl class="st-md__fields">
+          {#each detailFields as field}
+            <div class="st-md__fieldRow">
+              <dt class="st-md__fieldKey">{field.key}</dt>
+              <dd class="st-md__fieldValue">{field.value}</dd>
+            </div>
+          {/each}
+        </dl>
+      </main>
+    </div>
+  </div>
+</div>
+
+<style>
+  .st-md {
+    display: grid;
+    grid-template-rows: auto 1fr;
+    min-block-size: 100vh;
+    background: var(--st-semantic-surface-default);
+    color: var(--st-semantic-text-primary);
+  }
+  .st-md__header {
+    border-block-end: 1px solid var(--st-semantic-border-subtle);
+    padding: var(--st-spacing-3, 0.75rem) var(--st-spacing-6, 1.5rem);
+    display: flex;
+    align-items: center;
+  }
+  .st-md__appTitle {
+    font-weight: 700;
+    font-size: 1rem;
+  }
+  .st-md__body {
+    display: grid;
+    grid-template-columns: 220px 1fr;
+    overflow: hidden;
+  }
+  .st-md__aside {
+    border-inline-end: 1px solid var(--st-semantic-border-subtle);
+    background: var(--st-semantic-surface-raised);
+    overflow-y: auto;
+  }
+  .st-md__split {
+    display: grid;
+    grid-template-columns: 320px 1fr;
+    overflow: hidden;
+  }
+  .st-md__list {
+    border-inline-end: 1px solid var(--st-semantic-border-subtle);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+  .st-md__listHeader {
+    padding: var(--st-spacing-4, 1rem);
+    display: flex;
+    flex-direction: column;
+    gap: var(--st-spacing-2, 0.5rem);
+    border-block-end: 1px solid var(--st-semantic-border-subtle);
+  }
+  .st-md__listTitle {
+    font-size: 1rem;
+    font-weight: 650;
+    margin: 0;
+  }
+  .st-md__listItems {
+    list-style: none;
+    margin: 0;
+    padding: var(--st-spacing-2, 0.5rem);
+    overflow-y: auto;
+    flex: 1;
+  }
+  .st-md__listItem {
+    width: 100%;
+    text-align: start;
+    background: transparent;
+    border: none;
+    border-radius: var(--st-radius-md, 0.375rem);
+    padding: var(--st-spacing-3, 0.75rem);
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    gap: var(--st-spacing-1, 0.25rem);
+    color: var(--st-semantic-text-primary);
+  }
+  .st-md__listItem:hover {
+    background: var(--st-semantic-surface-subtle, #f1f5f9);
+  }
+  .st-md__listItem--active {
+    background: var(--st-semantic-surface-selected, #eff6ff);
+  }
+  .st-md__itemPrimary {
+    font-size: 0.875rem;
+    font-weight: 600;
+  }
+  .st-md__itemSecondary {
+    font-size: 0.75rem;
+    color: var(--st-semantic-text-secondary);
+  }
+  .st-md__detail {
+    display: flex;
+    flex-direction: column;
+    gap: var(--st-spacing-6, 1.5rem);
+    padding: var(--st-spacing-6, 1.5rem);
+    overflow-y: auto;
+  }
+  .st-md__detailHeader {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--st-spacing-4, 1rem);
+    flex-wrap: wrap;
+  }
+  .st-md__detailTitleRow {
+    display: flex;
+    align-items: center;
+    gap: var(--st-spacing-3, 0.75rem);
+    flex-wrap: wrap;
+  }
+  .st-md__detailTitle {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin: 0;
+  }
+  .st-md__detailActions {
+    display: flex;
+    gap: var(--st-spacing-2, 0.5rem);
+    flex-shrink: 0;
+  }
+  .st-md__fields {
+    margin: 0;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+    gap: var(--st-spacing-3, 0.75rem) var(--st-spacing-6, 1.5rem);
+  }
+  .st-md__fieldRow {
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+  }
+  .st-md__fieldKey {
+    font-size: 0.75rem;
+    color: var(--st-semantic-text-secondary);
+    font-weight: 500;
+  }
+  .st-md__fieldValue {
+    margin: 0;
+    font-size: 0.875rem;
+    color: var(--st-semantic-text-primary);
+  }
+</style>

package/dist/MasterDetail.svelte.d.ts

@@ -0,0 +1,35 @@
+import type { SideNavItem } from "./SideNav.svelte";
+export interface MasterDetailNavItem extends SideNavItem {
+}
+export type MasterDetailStatusTone = "neutral" | "info" | "success" | "warning" | "error";
+export interface MasterDetailItem {
+    id: string;
+    primary: string;
+    secondary?: string;
+    statusLabel?: string;
+    statusTone?: MasterDetailStatusTone;
+    active?: boolean;
+}
+export interface MasterDetailField {
+    key: string;
+    value: string;
+}
+export type MasterDetailProps = {
+    appTitle?: string;
+    navItems?: MasterDetailNavItem[];
+    listTitle: string;
+    searchPlaceholder?: string;
+    listItems: MasterDetailItem[];
+    detailTitle: string;
+    detailStatus?: {
+        label: string;
+        tone: MasterDetailStatusTone;
+    };
+    detailActions?: string[];
+    detailFields: MasterDetailField[];
+    onlistitemclick?: (id: string) => void;
+};
+declare const MasterDetail: import("svelte").Component<MasterDetailProps, {}, "">;
+type MasterDetail = ReturnType<typeof MasterDetail>;
+export default MasterDetail;
+//# sourceMappingURL=MasterDetail.svelte.d.ts.map

package/dist/MasterDetail.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MasterDetail.svelte.d.ts","sourceRoot":"","sources":["../src/lib/MasterDetail.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpD,MAAM,WAAW,mBAAoB,SAAQ,WAAW;CAAG;AAE3D,MAAM,MAAM,sBAAsB,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAE1F,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,sBAAsB,CAAC;IACpC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,iBAAiB;IAChC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,EAAE,gBAAgB,EAAE,CAAC;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,sBAAsB,CAAA;KAAE,CAAC;IAC/D,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,YAAY,EAAE,iBAAiB,EAAE,CAAC;IAClC,eAAe,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC,CAAC;AAmGJ,QAAA,MAAM,YAAY,uDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}