@invopop/popui 0.0.74 → 0.0.75-beta1

package/dist/AlertDialog.svelte

@@ -0,0 +1,38 @@
+<script>import {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogCancel,
+  AlertDialogAction
+} from "./alert-dialog";
+export let open = false;
+export let destructive = false;
+export let title = "";
+export let description = "";
+export let cancelText = "Cancel";
+export let actionText = "OK";
+</script>
+
+<AlertDialog openFocus="[data-alert-dialog-action]" bind:open>
+  <AlertDialogTrigger>
+    <slot />
+  </AlertDialogTrigger>
+  <AlertDialogContent>
+    <AlertDialogHeader>
+      <AlertDialogTitle>{title}</AlertDialogTitle>
+      <AlertDialogDescription>
+        {description}
+      </AlertDialogDescription>
+    </AlertDialogHeader>
+    <AlertDialogFooter>
+      <AlertDialogCancel>{cancelText}</AlertDialogCancel>
+      <AlertDialogAction {destructive} on:click>
+        {actionText}
+      </AlertDialogAction>
+    </AlertDialogFooter>
+  </AlertDialogContent>
+</AlertDialog>

package/dist/AlertDialog.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        open?: boolean | undefined;
+        destructive?: boolean | undefined;
+        title?: string | undefined;
+        description?: string | undefined;
+        cancelText?: string | undefined;
+        actionText?: string | undefined;
+    };
+    events: {
+        click: import("bits-ui").CustomEventHandler<MouseEvent, HTMLButtonElement>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type AlertDialogProps = typeof __propDef.props;
+export type AlertDialogEvents = typeof __propDef.events;
+export type AlertDialogSlots = typeof __propDef.slots;
+export default class AlertDialog extends SvelteComponent<AlertDialogProps, AlertDialogEvents, AlertDialogSlots> {
+}
+export {};

package/dist/BaseDropdown.svelte

@@ -1,6 +1,7 @@
 <script>import { offset, flip, shift, size } from "svelte-floating-ui/dom";
 import { createFloatingActions } from "svelte-floating-ui";
 import { clickOutside } from "./clickOutside.js";
+import { portal } from "svelte-portal";
 export let isOpen = false;
 export let fullWidth = false;
 export let placement = "bottom-end";
@@ -29,7 +30,7 @@ export const toggle = () => {
 };
 </script>
 
-<div class="inline-flex" class:w-full={fullWidth}>
+<div class="inline-flex" class:w-full={fullWidth} role="menu">
   <button
     class="text-left"
     use:floatingRef
@@ -44,6 +45,7 @@ export const toggle = () => {
   {#if isOpen}
     <div
       class="max-h-40 absolute z-40"
+      use:portal
       use:floatingContent
       use:clickOutside
       on:click_outside={() => {

package/dist/BaseTable.svelte

@@ -1,11 +1,13 @@
 <script>import { intersect } from "svelte-intersection-observer-action";
-import BaseTableHeader from "./BaseTableHeader.svelte";
 import { createEventDispatcher } from "svelte";
 import BaseCounter from "./BaseCounter.svelte";
 import BaseTableRow from "./BaseTableRow.svelte";
-import BaseTableCell from "./BaseTableCell.svelte";
-import InputCheckbox from "./InputCheckbox.svelte";
 import { isInputFocused } from "./helpers.js";
+import BaseTableCellContent from "./BaseTableCellContent.svelte";
+import { Table, TableHead, TableHeader, TableRow } from "./table/index.js";
+import BaseTableCheckbox from "./BaseTableCheckbox.svelte";
+import BaseTableHeaderContent from "./BaseTableHeaderContent.svelte";
+import TableBody from "./table/table-body.svelte";
 const dispatch = createEventDispatcher();
 const callback = (entry) => {
   if (entry.intersectionRatio && entry.isIntersecting) {
@@ -198,56 +200,40 @@ function handleKeydown(event) {
   }}
 />
 
-<div class="w-full font-sans">
-  <table class="hidden md:table w-full">
+<div class="w-full font-sans border rounded-md border-neutral-100">
+  <Table class="hidden md:table">
     <colgroup>
       {#if selectable}
-        <col style="width: 56px" />
+        <col style="width: 38px" />
       {/if}
       {#each fields as field, i (i)}
         <col style={field.style} />
       {/each}
       {#if addExtraCell}
-        <col style="width: 40px" />
+        <col style="width: 38px" />
       {/if}
     </colgroup>
-    <thead>
-      <tr class="relative">
+    <TableHeader>
+      <TableRow>
         {#if selectable}
           <!-- if table is selectable we need to add an extra header with a checkbox -->
-          <th scope="col" class="bg-white sticky top-0 z-10 p-0">
-            <div class="border-b border-neutral-100">
-              {#if !hideSelectAll}
-                <button
-                  class="px-5 h-[36px] flex items-center outline-none group cursor-default"
-                  on:click|stopPropagation={() => {
-                    toggleAllSelected(!selectedRows.length)
-                  }}
-                >
-                  <div class:invisible={!selectedRows.length} class="group-hover:visible">
-                    <InputCheckbox
-                      checked={allChecked}
-                      {indeterminate}
-                      on:change={(event) => {
-                        toggleAllSelected(event.detail)
-                      }}
-                    />
-                  </div>
-                </button>
-              {/if}
-            </div>
-          </th>
+          <TableHead class="bg-white sticky top-0 z-10 p-0 h-9">
+            {#if !hideSelectAll}
+              <BaseTableCheckbox
+                hidden={!selectedRows.length}
+                {indeterminate}
+                checked={allChecked}
+                on:checked={() => {
+                  toggleAllSelected(!selectedRows.length)
+                }}
+              />
+            {/if}
+          </TableHead>
         {/if}
         {#each fields as field, i (i)}
-          <BaseTableHeader
-            isFirst={i === 0}
-            isLast={!addExtraCell && i === fields.length - 1}
-            {sortBy}
-            {sortDirection}
-            {field}
-            {selectable}
-            on:orderBy
-          />
+          <TableHead class="bg-white group sticky z-10 top-0 p-0">
+            <BaseTableHeaderContent {sortBy} {sortDirection} {field} on:orderBy />
+          </TableHead>
         {/each}
         {#if addExtraCell}
           <!-- if table has actions cell we need to add an extra header -->
@@ -255,21 +241,21 @@ function handleKeydown(event) {
             <div class="border-b border-neutral-100 h-9" />
           </th>
         {/if}
-      </tr>
-    </thead>
-    <tbody>
+      </TableRow>
+    </TableHeader>
+    <TableBody>
       {#each groupedData as group, i (i)}
         {#if group.label}
           <tr>
             <th
               scope="colgroup"
               colspan={fields.length + (selectable ? 2 : 1)}
-              class="bg-white text-left text-sm font-medium text-neutral-500 sticky top-9 tracking-normal h-8"
+              class="bg-white text-left text-sm font-medium text-neutral-500 sticky top-9 tracking-normal h-8 z-10"
             >
               <span
                 class:border-t={i > 0}
-                class:pl-14={selectable}
-                class:pl-5={!selectable}
+                class:pl-12={selectable}
+                class:pl-3={!selectable}
                 class="flex items-center space-x-1 box-border border-b border-neutral-100 h-8"
               >
                 <span>{group.label}</span>
@@ -326,8 +312,8 @@ function handleKeydown(event) {
           />
         {/each}
       {/each}
-    </tbody>
-  </table>
+    </TableBody>
+  </Table>
   <div class="md:hidden space-y-3">
     {#each groupedData as group}
       {#each group.rows as row}
@@ -345,14 +331,15 @@ function handleKeydown(event) {
           }}
         >
           {#each fields as field, i (i)}
-            <BaseTableCell
-              tag="div"
-              {field}
-              badge={field.helperBadge ? field.helperBadge(row) : null}
-              status={field.helperStatus ? field.helperStatus(row) : null}
-              data={field.formatter ? field.formatter(row) : row[field.slug] || ''}
-              on:copied
-            />
+            <div class="text-base tracking-normal py-2">
+              <BaseTableCellContent
+                {field}
+                badge={field.helperBadge ? field.helperBadge(row) : null}
+                status={field.helperStatus ? field.helperStatus(row) : null}
+                data={field.formatter ? field.formatter(row) : row[field.slug] || ''}
+                on:copied
+              />
+            </div>
           {/each}
         </button>
       {/each}

package/dist/BaseTableActions.svelte

@@ -3,9 +3,11 @@ import BaseDropdown from "./BaseDropdown.svelte";
 import { createEventDispatcher } from "svelte";
 import DrawerContext from "./DrawerContext.svelte";
 import { Options } from "@invopop/ui-icons";
+import clsx from "clsx";
 const dispatch = createEventDispatcher();
 export let actions;
 let actionDropdown;
+let isOpen = false;
 $:
   items = actions.map((a) => ({
     label: a.label,
@@ -14,13 +16,21 @@ $:
     footer: a.footer,
     destructive: a.destructive
   }));
+$:
+  overlayClasses = clsx({
+    "group-hover:bg-neutral-800/[.05]": !isOpen,
+    "bg-neutral-800/[.1]": isOpen
+  });
 export const toggle = () => {
   actionDropdown.toggle();
 };
 </script>
 
-<BaseDropdown bind:this={actionDropdown}>
-  <Icon slot="trigger" src={Options} class="w-4 mt-1 text-neutral-500" />
+<BaseDropdown bind:isOpen bind:this={actionDropdown}>
+  <div class="relative group flex justify-center items-center rounded p-1" slot="trigger">
+    <span class="{overlayClasses} absolute inset-0 rounded" />
+    <Icon slot="trigger" src={Options} class="w-4 text-neutral-500" />
+  </div>
   <DrawerContext
     {items}
     on:click={(e) => {

package/dist/BaseTableCellContent.svelte

@@ -0,0 +1,64 @@
+<script>import TagStatus from "./TagStatus.svelte";
+import FeedIconStatus from "./FeedIconStatus.svelte";
+import BaseFlag from "./BaseFlag.svelte";
+import { getCountryName } from "./helpers.js";
+import UuidCopy from "./UuidCopy.svelte";
+import { Icon } from "@steeze-ui/svelte-icon";
+export let field;
+export let data = "";
+export let isMobile = false;
+export let badge = null;
+export let status = null;
+export let icons = null;
+</script>
+
+<div class="flex flex-col">
+  <span class="md:hidden text-sm text-neutral-600 font-normal">
+    {field.headerLabel}
+  </span>
+  <span class="flex items-center" class:justify-end={field.rightAlign}>
+    {#if field.isCountry && data}
+      <span class="flex items-center space-x-1">
+        <BaseFlag country={String(data)} width={16} />
+        <span>{getCountryName(String(data))}</span>
+      </span>
+    {:else if field.copy && data}
+      <UuidCopy
+        rightAlign={isMobile ? false : field.rightAlign}
+        uuid={String(data)}
+        prefixLength={4}
+        suffixLength={4}
+        full
+        compact
+        dark={isMobile}
+        on:copied
+      />
+    {:else}
+      <span class="hidden md:inline">{data}</span>
+      <span class="md:hidden">{data ? data : badge || status ? '' : '-'}</span>
+    {/if}
+    {#if badge}
+      <span class:ml-2={!!data}>
+        <TagStatus label={badge.label} status={badge.status} dot={Boolean(badge.dot)} />
+      </span>
+    {/if}
+    {#if status}
+      <span class:ml-2={!!data}>
+        <FeedIconStatus {status} />
+      </span>
+    {/if}
+    {#if icons}
+      <span class:ml-2={!!data} class="flex items-center gap-1 flex-shrink-0">
+        {#each icons as icon}
+          <div class="border border-neutral-200 rounded-md p-px">
+            {#if typeof icon === 'string'}
+              <img alt="icon" src={icon} class="h-4 w-4" />
+            {:else}
+              <Icon src={icon} class="h-4 w-4" />
+            {/if}
+          </div>
+        {/each}
+      </span>
+    {/if}
+  </span>
+</div>

package/dist/BaseTableCellContent.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+import type { Badge, FeedItemStatus, TableField, TableIcon } from './types';
+declare const __propDef: {
+    props: {
+        field: TableField;
+        data?: unknown;
+        isMobile?: boolean | undefined;
+        badge?: Badge | null | undefined;
+        status?: FeedItemStatus | null | undefined;
+        icons?: TableIcon[] | null | undefined;
+    };
+    events: {
+        copied: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BaseTableCellContentProps = typeof __propDef.props;
+export type BaseTableCellContentEvents = typeof __propDef.events;
+export type BaseTableCellContentSlots = typeof __propDef.slots;
+export default class BaseTableCellContent extends SvelteComponent<BaseTableCellContentProps, BaseTableCellContentEvents, BaseTableCellContentSlots> {
+}
+export {};

package/dist/BaseTableCheckbox.svelte

@@ -0,0 +1,28 @@
+<script>import { createEventDispatcher } from "svelte";
+import InputCheckbox from "./InputCheckbox.svelte";
+const dispatch = createEventDispatcher();
+export let checkboxButton = void 0;
+export let checked = false;
+export let hidden = false;
+export let indeterminate = false;
+</script>
+
+<button
+  role="checkbox"
+  aria-checked={checked}
+  bind:this={checkboxButton}
+  class="absolute inset-0 h-full w-full flex items-center justify-center outline-none group cursor-default"
+  on:click|stopPropagation={() => {
+    dispatch('checked', !checked)
+  }}
+>
+  <div class:invisible={hidden} class="group-hover:visible">
+    <InputCheckbox
+      {checked}
+      {indeterminate}
+      on:change={(event) => {
+        dispatch('checked', event.detail)
+      }}
+    />
+  </div>
+</button>

package/dist/BaseTableCheckbox.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        checkboxButton?: HTMLButtonElement | undefined;
+        checked?: boolean | undefined;
+        hidden?: boolean | undefined;
+        indeterminate?: boolean | undefined;
+    };
+    events: {
+        checked: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BaseTableCheckboxProps = typeof __propDef.props;
+export type BaseTableCheckboxEvents = typeof __propDef.events;
+export type BaseTableCheckboxSlots = typeof __propDef.slots;
+export default class BaseTableCheckbox extends SvelteComponent<BaseTableCheckboxProps, BaseTableCheckboxEvents, BaseTableCheckboxSlots> {
+}
+export {};

package/dist/BaseTableHeaderContent.svelte

@@ -0,0 +1,59 @@
+<script>import clsx from "clsx";
+import { createEventDispatcher } from "svelte";
+import BaseDropdown from "./BaseDropdown.svelte";
+import BaseTableHeaderSortBy from "./BaseTableHeaderSortBy.svelte";
+const dispatch = createEventDispatcher();
+let sortDropdown;
+export let field;
+export let sortBy = "";
+export let sortDirection;
+$:
+  headerStyles = clsx({
+    "hover:bg-neutral-50 focus:bg-neutral-100": field.sortable
+  });
+function handleSortBy(event) {
+  sortDirection = event.detail;
+  dispatch("orderBy", { field: field.slug, direction: sortDirection });
+  sortDropdown.toggle();
+}
+</script>
+
+<span class="flex" class:justify-end={field.rightAlign}>
+  {#if field.sortable}
+    <BaseDropdown bind:this={sortDropdown} fullWidth>
+      <span
+        slot="trigger"
+        class="{headerStyles} w-full p-3 flex items-center justify-start space-x-1 text-left text-base tracking-normal whitespace-nowrap font-normal"
+      >
+        <span class="w-full" class:text-right={field.rightAlign}>{field.headerLabel}</span>
+        {#if sortBy === field.slug}
+          <svg
+            viewBox="0 0 12 12"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            class:rotate-180={sortDirection === 'asc'}
+            class="mt-px text-neutral-400 h-3 w-3"
+          >
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M6.56519 8.8272L7.9966 7.39579L8.7037 8.1029L6.41082 10.3958L6.05726 10.7493L5.70371 10.3958L3.41082 8.1029L4.11793 7.39579L5.56507 8.84293L5.61453 1.24609L6.61451 1.2526L6.56519 8.8272Z"
+              fill="currentColor"
+            />
+          </svg>
+        {/if}
+      </span>
+      <BaseTableHeaderSortBy
+        {sortDirection}
+        isActive={sortBy === field.slug}
+        on:sortBy={handleSortBy}
+      />
+    </BaseDropdown>
+  {:else}
+    <div
+      class="{headerStyles} p-3 text-left text-base font-normal tracking-normal whitespace-nowrap"
+    >
+      <div class="h-5">{field.headerLabel}</div>
+    </div>
+  {/if}
+</span>

package/dist/BaseTableHeaderContent.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+import type { TableField, TableSortBy } from './types.js';
+declare const __propDef: {
+    props: {
+        field: TableField;
+        sortBy?: string | undefined;
+        sortDirection: TableSortBy;
+    };
+    events: {
+        orderBy: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BaseTableHeaderContentProps = typeof __propDef.props;
+export type BaseTableHeaderContentEvents = typeof __propDef.events;
+export type BaseTableHeaderContentSlots = typeof __propDef.slots;
+export default class BaseTableHeaderContent extends SvelteComponent<BaseTableHeaderContentProps, BaseTableHeaderContentEvents, BaseTableHeaderContentSlots> {
+}
+export {};

package/dist/BaseTableRow.svelte

@@ -1,11 +1,14 @@
 <script>import { createEventDispatcher } from "svelte";
 import BaseTableActions from "./BaseTableActions.svelte";
-import BaseTableCell from "./BaseTableCell.svelte";
-import InputCheckbox from "./InputCheckbox.svelte";
 import { scrollIntoTableView } from "./helpers.js";
+import { TableCell, TableRow } from "./table";
+import clsx from "clsx";
+import BaseTableCellContent from "./BaseTableCellContent.svelte";
+import BaseTableCheckbox from "./BaseTableCheckbox.svelte";
 const dispatch = createEventDispatcher();
 let actionsDropdown;
 let checkboxButton;
+let dataState = void 0;
 export let row;
 export let getActions = void 0;
 export let fields = [];
@@ -31,15 +34,27 @@ $:
 function scrollIntoView() {
   scrollIntoTableView(checkboxButton);
 }
+$:
+  rowClass = clsx({
+    "cursor-pointer": !disableRowClick,
+    "!hover:bg-transparent": disableRowClick
+  });
+$: {
+  if (selected) {
+    dataState = "selected";
+  } else if (checked) {
+    dataState = "checked";
+  } else {
+    dataState = void 0;
+  }
+}
 </script>
 
-<tr
-  class:cursor-pointer={!disableRowClick}
-  class:bg-neutral-50={selected}
-  class:hover:bg-neutral-50={!disableRowClick}
-  class:bg-workspace-accent-50={checked && !selected}
+<TableRow
+  data-state={dataState}
+  class={rowClass}
   on:click
-  on:contextmenu|preventDefault={() => {
+  on:contextmenu={() => {
     if (!actionsDropdown) return
 
     actionsDropdown.toggle()
@@ -53,41 +68,29 @@ function scrollIntoView() {
   }}
 >
   {#if selectable}
-    <td class="relative">
-      <button
-        bind:this={checkboxButton}
-        class="absolute inset-0 h-full px-5 flex items-center outline-none group cursor-default"
-        on:click|stopPropagation={() => {
-          dispatch('checked', !checked)
-        }}
-      >
-        <div class:invisible={selectedRows.length === 0} class="group-hover:visible">
-          <InputCheckbox
-            {checked}
-            on:change={(event) => {
-              dispatch('checked', event.detail)
-            }}
-          />
-        </div>
-      </button>
-    </td>
+    <TableCell>
+      <BaseTableCheckbox
+        bind:checkboxButton
+        {checked}
+        hidden={selectedRows.length === 0}
+        on:checked
+      />
+    </TableCell>
   {/if}
   {#each fields as field, i (i)}
-    <BaseTableCell
-      isFirst={i === 0}
-      isLast={i === fields.length - 1}
-      {field}
-      {selectable}
-      hasActions={!!actions.length}
-      badge={field.helperBadge ? field.helperBadge(row) : null}
-      status={field.helperStatus ? field.helperStatus(row) : null}
-      icons={field.helperIcons ? field.helperIcons(row) : null}
-      data={field.formatter ? field.formatter(row) : row[field.slug] || ''}
-      on:copied
-    />
+    <TableCell>
+      <BaseTableCellContent
+        {field}
+        badge={field.helperBadge ? field.helperBadge(row) : null}
+        status={field.helperStatus ? field.helperStatus(row) : null}
+        icons={field.helperIcons ? field.helperIcons(row) : null}
+        data={field.formatter ? field.formatter(row) : row[field.slug] || ''}
+        on:copied
+      />
+    </TableCell>
   {/each}
   {#if actions.length}
-    <td class="pl-1 pr-5">
+    <TableCell>
       <BaseTableActions
         bind:this={actionsDropdown}
         {actions}
@@ -95,6 +98,6 @@ function scrollIntoView() {
           dispatch('action', { row, action: event.detail })
         }}
       />
-    </td>
+    </TableCell>
   {/if}
-</tr>
+</TableRow>

package/dist/BaseTableRow.svelte.d.ts

@@ -14,10 +14,10 @@ declare const __propDef: {
     };
     events: {
         click: MouseEvent;
+        checked: CustomEvent<any>;
         copied: CustomEvent<any>;
         hover: CustomEvent<any>;
         focus: CustomEvent<any>;
-        checked: CustomEvent<any>;
         action: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;