@sebgroup/green-core 2.35.1 → 2.37.0

package/components/table/table.stories.data.js

@@ -1,67 +1,69 @@
 import "../../chunks/chunk.QU3DSPNU.js";
-const USERS = {
-  FIRST_NAMES: [
-    "Alexandra",
-    "Benjamin",
-    "Caroline",
-    "David",
-    "Elena",
-    "Fredrik"
-  ],
-  LAST_NAMES: ["Andersson", "Bergstr\xF6m", "Carlsson", "Dahlstr\xF6m", "Eriksson"],
-  ROLES: ["Admin", "User", "Editor"],
-  STATUSES: ["Active", "Inactive"],
-  DEPARTMENTS: ["Engineering", "Sales", "Marketing", "Support", "HR"],
-  COUNT: 100
+import { html } from "lit";
+import { Slot } from "./table.types.js";
+const USERS_URL = "https://api.seb.io/components/table/table.users.json";
+const FEEDBACK_URL = "https://api.seb.io/components/table/table.feedback.json";
+let usersCache = null;
+let usersPromise = null;
+let feedbackCache = null;
+let feedbackPromise = null;
+const defineSlots = (row) => ({
+  ...row,
+  name: Slot(row.name, ["avatar", "value"]),
+  // name: Slot(row.name, ['avatar', 'value'], row.email),
+  email: Slot(row.email, ["value", "copy-button"]),
+  status: Slot(row.status, ["status"]),
+  amount: Slot(row.amount, ["amount", "currency"]),
+  account: Slot(row.account, ["main"]),
+  login: Slot(row.lastLogin, ["main"]),
+  download: Slot(row.download ?? "#", ["main"])
+});
+let usersRawCache = null;
+let usersRawPromise = null;
+const loadUsersRaw = async () => {
+  if (usersRawCache) return usersRawCache;
+  if (usersRawPromise) return usersRawPromise;
+  usersRawPromise = fetch(USERS_URL).then((response) => response.json()).then((data) => {
+    usersRawCache = data;
+    return data;
+  });
+  return usersRawPromise;
 };
-const generateUserRecord = (index) => {
-  const id = index + 1;
-  const firstName = USERS.FIRST_NAMES[index % USERS.FIRST_NAMES.length];
-  const lastName = USERS.LAST_NAMES[index % USERS.LAST_NAMES.length];
-  return {
-    id,
-    name: `${firstName} ${lastName}`,
-    email: `${firstName.toLowerCase()}@domain.tld`,
-    role: USERS.ROLES[index % USERS.ROLES.length],
-    status: USERS.STATUSES[index % USERS.STATUSES.length],
-    department: USERS.DEPARTMENTS[index % USERS.DEPARTMENTS.length],
-    amount: Math.floor(Math.random() * 5e5) + 1e4,
-    account: `5440${String(index * 7919 % 1e7).padStart(7, "0")}`,
-    lastLogin: new Date(
-      Date.now() - Math.random() * 30 * 864e5
-    ).toISOString(),
-    avatarUrl: `https://api.dicebear.com/7.x/avataaars/svg?seed=${firstName}${lastName}`,
-    download: `#`
-  };
+const loadUsers = async () => {
+  if (usersCache) return usersCache;
+  if (usersPromise) return usersPromise;
+  usersPromise = loadUsersRaw().then((data) => data.map(defineSlots)).then((data) => {
+    usersCache = data;
+    return data;
+  });
+  return usersPromise;
 };
-const generateUserDataset = () => Array.from({ length: USERS.COUNT }, (_, i) => generateUserRecord(i));
-const userDataProvider = async (request) => {
-  await new Promise((resolve) => setTimeout(resolve, 1e3));
-  const allData = generateUserDataset();
-  let processedData = [...allData];
+const createDataProvider = (loader) => async (request) => {
+  let data = await loader();
   if (request.searchQuery) {
     const query = request.searchQuery.toLowerCase();
-    processedData = processedData.filter(
+    data = data.filter(
       (item) => Object.values(item).some(
-        (value) => String(value).toLowerCase().includes(query)
+        (value) => value?.toString().toLowerCase().includes(query)
       )
     );
   }
-  if (request.sortColumn) {
-    processedData.sort((a, b) => {
-      const aValue = String(a[request.sortColumn]);
-      const bValue = String(b[request.sortColumn]);
-      return request.sortDirection === "asc" ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue);
+  if (request.sortColumn && data.length > 0) {
+    const key = request.sortColumn;
+    data = [...data].sort((a, b) => {
+      const aVal = a[key]?.toString() ?? "";
+      const bVal = b[key]?.toString() ?? "";
+      return request.sortDirection === "asc" ? aVal.localeCompare(bVal) : bVal.localeCompare(aVal);
     });
   }
-  const startIndex = (request.page - 1) * request.rows;
-  const endIndex = startIndex + request.rows;
-  const paginatedData = processedData.slice(startIndex, endIndex);
+  const start = (request.page - 1) * request.rows;
+  const end = start + request.rows;
   return {
-    rows: paginatedData,
-    total: processedData.length
+    rows: data.slice(start, end),
+    total: data.length
   };
 };
+const userDataProvider = createDataProvider(loadUsers);
 const Users = {
   Columns: [
     {
@@ -72,223 +74,201 @@ const Users = {
     {
       key: "name",
       label: "Name",
-      sortable: true,
-      cell: {
-        lead: {
-          type: "image",
-          src: (row) => row.avatarUrl,
-          alt: (row) => row.name,
-          width: "xl",
-          height: "xl"
-        }
-      }
+      sortable: true
     },
     {
       key: "email",
       label: "Email",
       sortable: true,
-      justify: "space-between",
-      cell: {
-        trail: {
-          type: "button",
-          rank: "tertiary",
-          value: (row) => row.email,
-          /*  size: 'xs', */
-          template: "email-copy"
-        }
-      }
+      justify: "space-between"
     },
     {
       key: "role",
       label: "Role",
       sortable: true,
-      visible: false,
-      value: (row) => `${row.role.toUpperCase()} (${row.department || "N/A"})`
+      visible: false
     },
     {
       key: "status",
       label: "Status",
-      sortable: true,
-      justify: "end",
-      cell: {
-        value: {
-          type: "badge",
-          value: (row) => row.status,
-          variant: (row) => row.status === "Active" ? "positive" : "negative"
-        }
-      }
+      sortable: true
     },
     {
       key: "department",
       label: "Department",
-      sortable: true,
-      cell: {
-        lead: {
-          type: "icon",
-          template: "department-icon"
-        }
-      }
+      sortable: true
     },
     {
       key: "amount",
       label: "Amount",
       sortable: true,
-      justify: "end",
-      cell: {
-        value: {
-          type: "formatted-number",
-          value: (row) => row.amount
-        },
-        trail: {
-          type: "badge",
-          value: "SEK"
-        }
-      }
+      justify: "end"
     },
     {
       key: "account",
       label: "Account",
-      sortable: true,
-      cell: {
-        value: {
-          type: "formatted-account",
-          value: (row) => row.account,
-          format: "seb-account"
-        }
-      }
+      sortable: true
     },
     {
-      key: "lastLogin",
+      key: "login",
       label: "Last Login",
-      sortable: true,
-      cell: {
-        value: {
-          type: "formatted-date",
-          value: (row) => row.lastLogin,
-          locale: "sv-SE",
-          format: "dateLong"
-        }
-      }
+      sortable: true
     },
     {
       key: "download",
-      label: "Download",
-      cell: {
-        value: {
-          type: "link",
-          href: (row) => row.download,
-          download: true,
-          template: "download-image",
-          label: "Download file"
-        }
-      }
+      label: "Download"
     }
   ],
   Actions: {
     label: "Actions",
-    justify: "end",
-    cell: {
-      type: "context-menu",
-      items: [
-        {
-          label: (row) => row.status === "Active" ? "Deactivate" : "Activate"
-          /*  onClick: (row: UserData) => console.log('Toggle status', row), */
-        },
-        {
-          label: "View Details"
-          /* onClick: (row: UserData) => console.log('View user', row), */
-        },
-        {
-          label: "Edit Profile"
-          /* onClick: (row: UserData) => console.log('Edit user', row), */
-        },
-        {
-          divider: true,
-          label: "Delete User"
-          /* onClick: (row: UserData) => {
-            if (confirm(`Delete ${row.name}?`)) {
-              console.log('Delete user', row)
-            }
-          }, */
-        }
-      ]
-    }
+    justify: "end"
   },
-  Data: userDataProvider
-};
-const FEEDBACK = {
-  FIRST_NAMES: ["Sophie", "Marcus", "Isabella", "Johan", "Emma", "Lucas"],
-  LAST_NAMES: ["Str\xF6m", "Nord", "Berg", "Gren", "Holm"],
-  DEPARTMENTS: ["Engineering", "Sales", "Marketing", "Support", "HR"],
-  STATUSES: ["Active", "Inactive"],
-  FEEDBACK_TEXTS: [
-    "Excellent user experience with intuitive interface and smooth navigation.",
-    "Performance needs improvement when handling large datasets.",
-    "Documentation is comprehensive but could benefit from more code examples.",
-    "Outstanding accessibility features and WCAG compliance implementation.",
-    "Mobile experience is good but some minor UI inconsistencies observed.",
-    "Feature request: Please add real-time collaboration capabilities.",
-    "Integration with third-party APIs works seamlessly.",
-    "User support team is responsive and helpful.",
-    "Suggest adding dark mode and customizable themes.",
-    "Security audit results are impressive and thorough."
-  ],
-  NOTES: [
-    "Customer upgraded to premium plan. All features activated.",
-    "Q1 planning meeting scheduled for next week at 10 AM.",
-    "Bug fix deployed in production. Monitor system for 24 hours.",
-    "Account manager assigned: John Smith.",
-    "Scheduled maintenance window: Saturday 2-4 AM.",
-    "Training session completed successfully.",
-    "Custom integration request in progress.",
-    "Contract renewal due in 30 days.",
-    "Performance optimization completed.",
-    "Security certificates updated to latest version."
-  ],
-  COUNT: 50
-};
-const generateFeedbackRecord = (index) => {
-  const id = index + 1;
-  const firstName = FEEDBACK.FIRST_NAMES[index % FEEDBACK.FIRST_NAMES.length];
-  const lastName = FEEDBACK.LAST_NAMES[index % FEEDBACK.LAST_NAMES.length];
-  return {
-    id,
-    name: `${firstName} ${lastName}`,
-    email: `${firstName.toLowerCase()}.${lastName.toLowerCase()}@company.com`,
-    feedback: FEEDBACK.FEEDBACK_TEXTS[index % FEEDBACK.FEEDBACK_TEXTS.length],
-    notes: FEEDBACK.NOTES[index % FEEDBACK.NOTES.length],
-    status: index % 3 === 0 ? "Inactive" : "Active",
-    department: FEEDBACK.DEPARTMENTS[index % FEEDBACK.DEPARTMENTS.length]
-  };
-};
-const generateFeedbackDataset = () => Array.from({ length: FEEDBACK.COUNT }, (_, i) => generateFeedbackRecord(i));
-const feedbackDataProvider = async (request) => {
-  await new Promise((resolve) => setTimeout(resolve, 800));
-  const allData = generateFeedbackDataset();
-  let processedData = [...allData];
-  if (request.searchQuery) {
-    const query = request.searchQuery.toLowerCase();
-    processedData = processedData.filter(
-      (item) => Object.values(item).some(
-        (value) => String(value).toLowerCase().includes(query)
-      )
+  Tfoot: {
+    label: "Totals",
+    sticky: true
+  },
+  Data: userDataProvider,
+  /**
+   * Generates slot content for the given rows (current page).
+   * Creates per-row slot elements using `columnKey:rowKey:slotId` convention.
+   *
+   * Used with Lit's `render()` to update table light DOM on each data load:
+   * ```ts
+   * @gds-table-data-loaded=${(e) => render(Users.SlotContent(e.detail.rows), table)}
+   * ```
+   */
+  SlotContent: (rows) => {
+    return html`
+      ${rows.map(
+      (row) => html`
+          <!-- name: avatar -->
+          <gds-img
+            src="${row.avatarUrl ?? "#"}"
+            alt="${String(row.name)}"
+            slot="name:${row.id}:avatar"
+            width="xl"
+            height="xl"
+          ></gds-img>
+
+          <!-- email: copy button -->
+          <gds-button
+            slot="email:${row.id}:copy-button"
+            rank="tertiary"
+            size="small"
+          >
+            <gds-icon-copy></gds-icon-copy>
+          </gds-button>
+
+          <!-- status: badge -->
+          <gds-badge
+            slot="status:${row.id}:status"
+            variant="${String(row.status) === "Active" ? "positive" : "negative"}"
+            size="small"
+          >
+            ${String(row.status)}
+          </gds-badge>
+
+          <!-- amount: formatted number -->
+          <gds-formatted-number
+            slot="amount:${row.id}:amount"
+            .value=${row.amount}
+          ></gds-formatted-number>
+
+          <!-- amount: currency -->
+          <gds-badge slot="amount:${row.id}:currency" size="small">
+            SEK
+          </gds-badge>
+
+          <!-- account: formatted account -->
+          <gds-formatted-account
+            slot="account:${row.id}:main"
+            account="${row.account}"
+            format="seb-account"
+          ></gds-formatted-account>
+
+          <!-- login: formatted date -->
+          <gds-formatted-date
+            slot="login:${row.id}:main"
+            .value="${String(row.login)}"
+            locale="sv-SE"
+            format="dateLong"
+          ></gds-formatted-date>
+
+          <!-- download: link with icon -->
+          <gds-link
+            slot="download:${row.id}:main"
+            href="${row.download ?? "#"}"
+            text-decoration="underline"
+            download
+          >
+            Download file
+            <gds-icon-cloud-download slot="trail"></gds-icon-cloud-download>
+          </gds-link>
+
+          <!-- actions: context menu -->
+          <gds-context-menu slot="actions:${row.id}:main">
+            <gds-button slot="trigger" rank="tertiary" size="small">
+              <gds-icon-dot-grid-one-horizontal></gds-icon-dot-grid-one-horizontal>
+            </gds-button>
+            <gds-menu-item>Edit ${String(row.name)}</gds-menu-item>
+            <gds-menu-item>Delete</gds-menu-item>
+          </gds-context-menu>
+        `
+    )}
+    `;
+  },
+  /**
+   * Generates tfoot slot content for the footer row.
+   * Receives all rows on the page and computes aggregations.
+   *
+   * Slot naming: `tfoot:{columnKey}`
+   */
+  TfootSlotContent: (rows) => {
+    const totalAmount = rows.reduce(
+      (sum, row) => sum + (Number(row.amount) || 0),
+      0
     );
+    const activeCount = rows.filter(
+      (row) => String(row.status) === "Active"
+    ).length;
+    const activeRate = Math.round(activeCount / rows.length * 100);
+    const departments = new Set(rows.map((row) => row.department)).size;
+    return html`
+      <!-- tfoot: name row count -->
+      <span slot="tfoot:name">${rows.length} Users</span>
+
+      <!-- tfoot: status active rate -->
+      <gds-badge
+        slot="tfoot:status"
+        variant="${activeRate >= 70 ? "positive" : activeRate >= 40 ? "warning" : "negative"}"
+        size="small"
+      >
+        ${activeRate}% active
+      </gds-badge>
+
+      <!-- tfoot: department count -->
+      <gds-badge slot="tfoot:department" variant="information" size="small">
+        ${departments} depts
+      </gds-badge>
+
+      <!-- tfoot: amount sum -->
+      <gds-flex slot="tfoot:amount" gap="s" align-items="center">
+        <gds-formatted-number .value=${totalAmount}></gds-formatted-number>
+        <gds-badge size="small">SEK</gds-badge>
+      </gds-flex>
+    `;
   }
-  if (request.sortColumn) {
-    processedData.sort((a, b) => {
-      const aValue = String(a[request.sortColumn]);
-      const bValue = String(b[request.sortColumn]);
-      return request.sortDirection === "asc" ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue);
-    });
-  }
-  const startIndex = (request.page - 1) * request.rows;
-  const endIndex = startIndex + request.rows;
-  const paginatedData = processedData.slice(startIndex, endIndex);
-  return {
-    rows: paginatedData,
-    total: processedData.length
-  };
 };
+const loadFeedback = async () => {
+  if (feedbackCache) return feedbackCache;
+  if (feedbackPromise) return feedbackPromise;
+  feedbackPromise = fetch(FEEDBACK_URL).then((response) => response.json()).then((data) => {
+    feedbackCache = data;
+    return data;
+  });
+  return feedbackPromise;
+};
+const feedbackDataProvider = createDataProvider(loadFeedback);
 const Feedback = {
   Columns: [
     {
@@ -300,13 +280,14 @@ const Feedback = {
     {
       key: "feedback",
       label: "Feedback",
+      align: "start",
       width: "350px"
     },
     {
       key: "notes",
       label: "Notes",
       align: "start",
-      width: "300px"
+      width: "460px"
     },
     {
       key: "department",
@@ -320,83 +301,123 @@ const Feedback = {
       sortable: true,
       align: "start",
       justify: "end",
-      width: "100px",
-      cell: {
-        value: {
-          type: "badge",
-          value: (row) => row.status,
-          variant: (row) => row.status === "Active" ? "positive" : "negative",
-          size: "small"
-        }
-      }
+      width: "100px"
     }
   ],
+  Data: feedbackDataProvider
+};
+const actionsStaticRows = [
+  {
+    id: 1,
+    task: "Review contract",
+    assignee: "Anna Svensson",
+    priority: "High"
+  },
+  {
+    id: 2,
+    task: "Update pricing",
+    assignee: "Erik Lindgren",
+    priority: "Medium"
+  },
+  { id: 3, task: "Send invoice", assignee: "Maria Berg", priority: "Low" },
+  {
+    id: 4,
+    task: "Approve budget",
+    assignee: "Johan Nilsson",
+    priority: "High"
+  }
+];
+const actionsDataProvider = async (request) => {
+  const start = (request.page - 1) * request.rows;
+  const page = actionsStaticRows.slice(start, start + request.rows);
+  return { rows: page, total: actionsStaticRows.length };
+};
+const Actions = {
+  Columns: [
+    { key: "task", label: "Task", align: "center" },
+    { key: "assignee", label: "Assignee", align: "center" },
+    { key: "priority", label: "Priority", align: "center", width: "100px" }
+  ],
   MultipleActions: {
     label: "Actions",
-    align: "start",
+    align: "center",
     justify: "start",
-    cell: [
-      {
-        type: "button",
-        size: "xs",
-        template: "actions-activate"
-      },
-      {
-        type: "button",
-        size: "xs",
-        variant: "negative",
-        template: "actions-delete"
-      }
-    ]
+    // width: '150px',
+    sticky: true
+  },
+  MultipleActionsSlotContent: (rows) => {
+    return html`
+      ${rows.map(
+      (row, i) => html`
+          <gds-button
+            slot="actions:${row.id ?? i + 1}:main"
+            rank="secondary"
+            size="small"
+            variant="positive"
+          >
+            <gds-icon-circle-check size="m"></gds-icon-circle-check>
+          </gds-button>
+          <gds-button
+            slot="actions:${row.id ?? i + 1}:main"
+            rank="secondary"
+            size="small"
+            variant="negative"
+          >
+            <gds-icon-cross-small size="m"></gds-icon-cross-small>
+          </gds-button>
+        `
+    )}
+    `;
   },
   ActionLink: {
     label: "Actions",
-    align: "start",
+    align: "center",
     justify: "end",
-    cell: [
-      {
-        type: "link",
-        href: "#",
-        label: "Link"
-      }
-    ]
+    // width: '150px',
+    sticky: true
   },
-  ActionButton: {
-    label: "Actions",
-    align: "start",
-    justify: "start",
-    cell: [
-      {
-        type: "button",
-        label: "Link"
-      }
-    ]
+  ActionLinkSlotContent: (rows) => {
+    return html`
+      ${rows.map(
+      (row, i) => html`
+          <gds-button
+            slot="actions:${row.id ?? i + 1}:main"
+            size="small"
+            rank="secondary"
+          >
+            View details
+          </gds-button>
+        `
+    )}
+    `;
   },
   ActionContextMenu: {
     label: "Actions",
-    align: "start",
+    align: "center",
     justify: "end",
-    cell: {
-      type: "context-menu",
-      items: [
-        {
-          label: "Activate"
-        },
-        {
-          label: "View Details"
-        },
-        {
-          label: "Edit Profile"
-        },
-        {
-          label: "Delete User"
-        }
-      ]
-    }
+    // width: '150px',
+    sticky: true
   },
-  Data: feedbackDataProvider
+  ActionContextMenuSlotContent: (rows) => {
+    return html`
+      ${rows.map(
+      (row, i) => html`
+          <gds-context-menu slot="actions:${row.id ?? i + 1}:main">
+            <gds-button slot="trigger" rank="tertiary" size="small">
+              <gds-icon-dot-grid-one-horizontal></gds-icon-dot-grid-one-horizontal>
+            </gds-button>
+            <gds-menu-item>Edit</gds-menu-item>
+            <gds-menu-item>Archive</gds-menu-item>
+            <gds-menu-item>Delete</gds-menu-item>
+          </gds-context-menu>
+        `
+    )}
+    `;
+  },
+  Data: actionsDataProvider
 };
 export {
+  Actions,
   Feedback,
   Users
 };