@invopop/popui 0.1.35 → 0.1.41

package/dist/BaseTable.svelte

@@ -1,391 +0,0 @@
-<script lang="ts">
-  import { intersect } from 'svelte-intersection-observer-action'
-  import type { BaseTableProps, TableDataRow, TableGroup } from './types.js'
-  import BaseCounter from './BaseCounter.svelte'
-  import BaseTableRow from './BaseTableRow.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 callback = (entry: IntersectionObserverEntry) => {
-    if (entry.intersectionRatio && entry.isIntersecting) {
-      ontableEndReached?.()
-    }
-  }
-  const intersectOptions = { callback }
-
-  let metaKeyPressed = $state(false)
-  let shiftKeyPressed = $state(false)
-  let lastSelected: TableDataRow = $state({})
-  let lastSelectedForShift: TableDataRow = {}
-  let selectWithArrowPosition = $state(-1)
-  let selectionMode = $state('keyboard')
-
-  let {
-    sortBy = '',
-    sortDirection = $bindable(''),
-    fields = [],
-    data = [],
-    getActions = undefined,
-    groupLabel = undefined,
-    disableRowClick = false,
-    hideCounter = false,
-    selectable = false,
-    selectedRows = $bindable([]),
-    selectedTrackedBy = 'id',
-    hideSelectAll = false,
-    disableKeyboardNavigation = false,
-    ontableEndReached,
-    onSelectAllRows,
-    onRowClick,
-    onRowNewTabClick,
-    onRowRightClick,
-    onCopied,
-    onOrderBy,
-    onClickAction,
-    ...rest
-  }: BaseTableProps = $props()
-
-  function groupData(rows: TableDataRow[]): TableGroup[] {
-    if (rows.length === 0) return []
-
-    const groups: TableGroup[] = []
-
-    rows.forEach((row) => {
-      const rowLabel = groupLabel instanceof Function ? groupLabel(row) : ''
-      const groupExist = groups.find((g) => g.label === rowLabel)
-
-      if (groupExist) {
-        groupExist.rows.push(row)
-      } else {
-        groups.push({ label: rowLabel, rows: [row] })
-      }
-    })
-
-    return groups
-  }
-
-  function toggleAllSelected(selected: boolean) {
-    selectedRows = []
-    lastSelected = {}
-
-    onSelectAllRows?.(selected)
-
-    if (!selected) return
-
-    selectedRows = data
-  }
-
-  function selectRow(row: TableDataRow) {
-    lastSelectedForShift = row
-    selectedRows = [...new Set([...selectedRows, row])]
-  }
-
-  function unselectRow(row: TableDataRow) {
-    selectedRows = selectedRows.filter((r) => r[selectedTrackedBy] !== row[selectedTrackedBy])
-    if (!selectedRows.length) {
-      lastSelected = {}
-    }
-  }
-
-  function rowIsSelected(row: TableDataRow) {
-    return selectedRows.find((r) => r[selectedTrackedBy] === row[selectedTrackedBy])
-  }
-
-  function toggleRow(row: TableDataRow) {
-    if (rowIsSelected(row)) {
-      unselectRow(row)
-    } else {
-      selectRow(row)
-    }
-  }
-
-  function selectRange(to: TableDataRow) {
-    if (lastSelectedIndex < 0) return
-
-    let fromIndex = flattedData.findIndex(
-      (d) => d[selectedTrackedBy] === lastSelectedForShift[selectedTrackedBy]
-    )
-    let toIndex = flattedData.findIndex((d) => d[selectedTrackedBy] === to[selectedTrackedBy])
-    if (fromIndex > toIndex) {
-      ;[fromIndex, toIndex] = [toIndex, fromIndex]
-    }
-
-    const itemsToSelect = flattedData.slice(fromIndex, toIndex + 1)
-
-    selectedRows = [...new Set([...selectedRows, ...itemsToSelect])]
-  }
-
-  function handleKeydown(event: KeyboardEvent) {
-    if (disableKeyboardNavigation) return
-
-    // If any input is focused on the rest of the window we dont want to break the default behavior
-    if (isInputFocused()) {
-      return
-    }
-
-    // Only set keyboard mode if it's not just the Shift key alone
-    if (event.key !== 'Shift') {
-      selectionMode = 'keyboard'
-    }
-
-    if (event.key === 'Escape' || event.key === 'Esc') {
-      event.preventDefault()
-      selectedRows = []
-      lastSelected = {}
-    }
-
-    if ((event.code === 'Space' || event.key === ' ') && lastSelectedIndex >= 0) {
-      event.preventDefault()
-      toggleRow(lastSelected)
-    }
-
-    metaKeyPressed = event.metaKey
-    shiftKeyPressed = event.shiftKey
-
-    if (event.key === 'Enter') {
-      if (lastSelectedIndex >= 0) {
-        event.preventDefault()
-        onRowClick?.(lastSelected)
-      }
-      return
-    }
-
-    if (event.key === 'Shift') {
-      event.preventDefault()
-      selectWithArrowPosition = lastSelectedIndex
-      return
-    }
-
-    if (event.key === 'ArrowUp') {
-      event.preventDefault()
-      const toIndex = lastSelectedIndex - 1
-      const to = flattedData[toIndex]
-
-      if (!to) return
-
-      if (!shiftKeyPressed) {
-        lastSelected = to
-        return
-      }
-
-      if (!rowIsSelected(lastSelected)) {
-        selectRow(lastSelected)
-      }
-
-      if (toIndex < selectWithArrowPosition) {
-        selectRow(to)
-      } else {
-        unselectRow(lastSelected)
-      }
-      lastSelected = to
-    }
-
-    if (event.key === 'ArrowDown') {
-      event.preventDefault()
-      if (lastSelectedIndex < 0) {
-        if (shiftKeyPressed) {
-          selectRow(flattedData[0])
-        }
-        lastSelected = flattedData[0]
-        return
-      }
-
-      const toIndex = lastSelectedIndex + 1
-      const to = flattedData[toIndex]
-
-      if (!to) return
-
-      if (!shiftKeyPressed) {
-        lastSelected = to
-        return
-      }
-
-      if (!rowIsSelected(lastSelected)) {
-        selectRow(lastSelected)
-      }
-
-      if (toIndex > selectWithArrowPosition) {
-        selectRow(to)
-      } else {
-        unselectRow(lastSelected)
-      }
-      lastSelected = to
-    }
-  }
-  let groupedData = $derived(groupData(data))
-  let addExtraCell = $derived(getActions instanceof Function)
-  let indeterminate = $derived(selectedRows.length > 0 && selectedRows.length < data.length)
-  let allChecked = $derived(selectedRows.length === data.length)
-  let flattedData = $derived(groupedData.flatMap((d) => d.rows))
-  let lastSelectedIndex = $derived(
-    flattedData.findIndex((d) => d[selectedTrackedBy] === lastSelected[selectedTrackedBy])
-  )
-</script>
-
-<svelte:window
-  onmousemove={() => {
-    selectionMode = 'mouse'
-  }}
-  onkeydown={handleKeydown}
-  onkeyup={(event) => {
-    metaKeyPressed = false
-    shiftKeyPressed = false
-
-    if (!event.shiftKey) {
-      selectWithArrowPosition = -1
-    }
-  }}
-/>
-
-<div class="h-full w-full font-sans rounded-md overflow-auto">
-  <Table class="hidden md:table" {...rest}>
-    <colgroup>
-      {#if selectable}
-        <col style="width: 38px" />
-      {/if}
-      {#each fields as field, i (i)}
-        <col style={field.style} />
-      {/each}
-      {#if addExtraCell}
-        <col style="width: 38px" />
-      {/if}
-    </colgroup>
-    <TableHeader>
-      <TableRow>
-        {#if selectable}
-          <!-- if table is selectable we need to add an extra header with a checkbox -->
-          <TableHead class="bg-background sticky top-0 z-10 p-0 h-9">
-            {#if !hideSelectAll}
-              <BaseTableCheckbox
-                {indeterminate}
-                checked={allChecked}
-                onChecked={() => {
-                  console.log('toggle all')
-                  toggleAllSelected(!selectedRows.length)
-                }}
-              />
-            {/if}
-          </TableHead>
-        {/if}
-        {#each fields as field, i (i)}
-          <TableHead
-            class="bg-background group sticky z-10 top-0 py-0 {i === 0 && !selectable
-              ? 'pl-3'
-              : 'pl-0'} {i === fields.length - 1 && !addExtraCell ? 'pr-3' : 'pr-0'}"
-          >
-            <BaseTableHeaderContent {sortBy} {sortDirection} {field} {onOrderBy} />
-          </TableHead>
-        {/each}
-        {#if addExtraCell}
-          <!-- if table has actions cell we need to add an extra header -->
-          <th scope="col" class="bg-background sticky top-0 z-10 rounded-tr-md"> </th>
-        {/if}
-      </TableRow>
-    </TableHeader>
-    <TableBody>
-      {#each groupedData as group, i (i)}
-        {#if group.label}
-          <tr>
-            <th
-              scope="colgroup"
-              colspan={fields.length + (selectable ? 2 : 1)}
-              class="bg-background text-left text-base font-normal text-foreground-default-secondary sticky top-9 tracking-normal h-8 z-10"
-            >
-              <span
-                class:pl-16={selectable}
-                class:pl-6={!selectable}
-                class="flex items-center space-x-1 box-border border-b border-border h-9"
-              >
-                <span>{group.label}</span>
-                {#if !hideCounter}
-                  <BaseCounter value={group.rows.length} />
-                {/if}
-              </span>
-            </th>
-          </tr>
-        {/if}
-        {#each group.rows as row}
-          <BaseTableRow
-            {row}
-            {fields}
-            {getActions}
-            {disableRowClick}
-            {selectable}
-            {selectedRows}
-            {selectedTrackedBy}
-            {selectionMode}
-            selected={selectable &&
-              lastSelected &&
-              row[selectedTrackedBy] === lastSelected[selectedTrackedBy]}
-            onclick={() => {
-              if (disableRowClick) return
-
-              if (metaKeyPressed) {
-                onRowNewTabClick?.(row)
-              } else {
-                onRowClick?.(row)
-              }
-            }}
-            oncontextmenu={() => {
-              onRowRightClick?.(row)
-            }}
-            onChecked={(checked) => {
-              if (checked) {
-                if (shiftKeyPressed) {
-                  selectRange(row)
-                } else {
-                  selectRow(row)
-                }
-                lastSelected = row
-              } else {
-                unselectRow(row)
-              }
-            }}
-            onmouseover={() => {
-              if (shiftKeyPressed) return
-              lastSelected = row
-            }}
-            {onClickAction}
-            {onCopied}
-          />
-        {/each}
-      {/each}
-    </TableBody>
-  </Table>
-  <div class="md:hidden space-y-3">
-    {#each groupedData as group}
-      {#each group.rows as row}
-        <button
-          class:cursor-default={disableRowClick}
-          class="w-full text-left border border-border rounded"
-          onclick={() => {
-            if (disableRowClick) return
-
-            if (metaKeyPressed) {
-              onRowNewTabClick?.(row)
-            } else {
-              onRowClick?.(row)
-            }
-          }}
-        >
-          {#each fields as field, i (i)}
-            <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] || ''}
-                {onCopied}
-              />
-            </div>
-          {/each}
-        </button>
-      {/each}
-    {/each}
-  </div>
-  <div use:intersect={intersectOptions}></div>
-</div>

package/dist/BaseTable.svelte.d.ts

@@ -1,4 +0,0 @@
-import type { BaseTableProps } from './types.js';
-declare const BaseTable: import("svelte").Component<BaseTableProps, {}, "sortDirection" | "selectedRows">;
-type BaseTable = ReturnType<typeof BaseTable>;
-export default BaseTable;

package/dist/BaseTableCellContent.svelte

@@ -1,58 +0,0 @@
-<script lang="ts">
-  import type { BaseTableCellContentProps } from './types'
-  import TagStatus from './TagStatus.svelte'
-  import FeedIconStatus from './FeedIconStatus.svelte'
-  import BaseFlag from './BaseFlag.svelte'
-  import { getCountryName } from './helpers.js'
-  import { Icon } from '@steeze-ui/svelte-icon'
-  import ButtonUuidCopy from './ButtonUuidCopy.svelte'
-
-  let {
-    field,
-    data = '',
-    badge = null,
-    status = null,
-    icons = null,
-    onCopied
-  }: BaseTableCellContentProps = $props()
-</script>
-
-<div class="flex flex-col">
-  <span class="md:hidden text-sm font-normal">
-    {field.headerLabel}
-  </span>
-  <span class="flex items-center gap-2" class:justify-end={field.rightAlign}>
-    {#if field.isCountry && data}
-      <span class="flex items-center space-x-1">
-        <BaseFlag country={String(data)} />
-        <span>{getCountryName(String(data))}</span>
-      </span>
-    {:else if field.copy && data}
-      <ButtonUuidCopy uuid={String(data)} full oncopied={onCopied} />
-    {:else if data}
-      <span class="hidden md:inline">{data}</span>
-      <span class="md:hidden">{data ? data : badge || status ? '' : '-'}</span>
-    {/if}
-    {#if badge}
-      <TagStatus label={badge.label} status={badge.status} dot={Boolean(badge.dot)} />
-    {/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 shrink-0">
-        {#each icons as icon}
-          <div class="border border-border 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

@@ -1,4 +0,0 @@
-import type { BaseTableCellContentProps } from './types';
-declare const BaseTableCellContent: import("svelte").Component<BaseTableCellContentProps, {}, "">;
-type BaseTableCellContent = ReturnType<typeof BaseTableCellContent>;
-export default BaseTableCellContent;

package/dist/BaseTableCheckbox.svelte

@@ -1,33 +0,0 @@
-<script lang="ts">
-  import InputCheckbox from './InputCheckbox.svelte'
-  import type { BaseTableCheckboxProps } from './types'
-
-  let {
-    checkboxButton = $bindable(undefined),
-    checked = false,
-    indeterminate = false,
-    onChecked
-  }: BaseTableCheckboxProps = $props()
-
-  function handleClick(event: MouseEvent) {
-    event.stopPropagation()
-    onChecked?.(!checked)
-  }
-</script>
-
-<button
-  role="checkbox"
-  aria-checked={checked}
-  bind:this={checkboxButton}
-  class="pl-3 h-full w-full flex items-center justify-center outline-none group cursor-default"
-  onclick={handleClick}
->
-  <InputCheckbox
-    {checked}
-    {indeterminate}
-    onclick={(e) => e.stopPropagation()}
-    onchange={(changed) => {
-      onChecked?.(changed)
-    }}
-  />
-</button>

package/dist/BaseTableCheckbox.svelte.d.ts

@@ -1,4 +0,0 @@
-import type { BaseTableCheckboxProps } from './types';
-declare const BaseTableCheckbox: import("svelte").Component<BaseTableCheckboxProps, {}, "checkboxButton">;
-type BaseTableCheckbox = ReturnType<typeof BaseTableCheckbox>;
-export default BaseTableCheckbox;

package/dist/BaseTableHeaderContent.svelte

@@ -1,67 +0,0 @@
-<script lang="ts">
-  import clsx from 'clsx'
-  import type { BaseTableHeaderProps, TableSortBy } from './types.js'
-  import BaseDropdown from './BaseDropdown.svelte'
-  import BaseTableHeaderOrderBy from './BaseTableHeaderOrderBy.svelte'
-
-  let sortDropdown: BaseDropdown | undefined = $state()
-
-  let {
-    field,
-    sortBy = '',
-    sortDirection = $bindable(),
-    onOrderBy
-  }: BaseTableHeaderProps = $props()
-
-  let headerStyles = $derived(
-    clsx({
-      'hover:bg-background-default-secondary focus:bg-background-default-tertiary': field.sortable
-    })
-  )
-
-  function handleSortBy(direction: TableSortBy) {
-    onOrderBy?.(field.slug, direction)
-    sortDropdown?.toggle()
-  }
-</script>
-
-<span class="flex" class:justify-end={field.rightAlign}>
-  {#if field.sortable}
-    {#snippet trigger()}
-      <span
-        class="{headerStyles} w-full px-3 py-2.5 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-icon 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>
-    {/snippet}
-    <BaseDropdown bind:this={sortDropdown} {trigger} fullWidth>
-      <BaseTableHeaderOrderBy
-        {sortDirection}
-        isActive={sortBy === field.slug}
-        onOrderBy={handleSortBy}
-      />
-    </BaseDropdown>
-  {:else}
-    <div
-      class="{headerStyles} px-3 py-2.5 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

@@ -1,4 +0,0 @@
-import type { BaseTableHeaderProps } from './types.js';
-declare const BaseTableHeaderContent: import("svelte").Component<BaseTableHeaderProps, {}, "sortDirection">;
-type BaseTableHeaderContent = ReturnType<typeof BaseTableHeaderContent>;
-export default BaseTableHeaderContent;

package/dist/BaseTableRow.svelte

@@ -1,127 +0,0 @@
-<script lang="ts">
-  import BaseTableActions from './BaseTableActions.svelte'
-  import type { BaseTableRowProps } from './types.js'
-  import { scrollIntoTableView } from './helpers.js'
-  import { TableCell, TableRow } from './table'
-  import clsx from 'clsx'
-  import BaseTableCellContent from './BaseTableCellContent.svelte'
-  import BaseTableCheckbox from './BaseTableCheckbox.svelte'
-
-  let actionsDropdown: BaseTableActions | undefined = $state()
-  let checkboxButton: HTMLButtonElement | undefined = $state()
-  let dataState: 'selected' | 'checked' | undefined = $state(undefined)
-
-  let {
-    row,
-    getActions = undefined,
-    fields = [],
-    disableRowClick = false,
-    selectable = false,
-    selected = false,
-    selectionMode = 'keyboard',
-    selectedTrackedBy = 'id',
-    selectedRows = [],
-    onclick,
-    onfocus,
-    onmouseover,
-    oncontextmenu,
-    onChecked,
-    onCopied,
-    onClickAction
-  }: BaseTableRowProps = $props()
-
-  function scrollIntoView() {
-    if (!checkboxButton) return
-    scrollIntoTableView(checkboxButton)
-  }
-
-  let actions = $derived(getActions instanceof Function ? getActions(row) : [])
-  let checked = $derived(
-    !!selectedRows.find((r) => {
-      const field = r[selectedTrackedBy]
-
-      if (field === undefined) return false
-
-      return field === row[selectedTrackedBy]
-    })
-  )
-
-  $effect(() => {
-    if (selectionMode === 'keyboard' && selected) {
-      scrollIntoView()
-    }
-  })
-  let rowClass = $derived(
-    clsx({
-      'cursor-pointer': !disableRowClick,
-      '!hover:bg-transparent': disableRowClick
-    })
-  )
-  $effect(() => {
-    if (selected) {
-      dataState = 'selected'
-    } else if (checked) {
-      dataState = 'checked'
-    } else {
-      dataState = undefined
-    }
-  })
-</script>
-
-<TableRow
-  data-state={dataState}
-  class={rowClass}
-  {onclick}
-  oncontextmenu={() => {
-    if (!actionsDropdown) return
-
-    actionsDropdown.toggle()
-
-    oncontextmenu?.()
-  }}
-  onmouseover={() => {
-    if (selectionMode === 'keyboard') return
-    onmouseover?.()
-  }}
-  {onfocus}
->
-  {#if selectable}
-    <TableCell>
-      <BaseTableCheckbox bind:checkboxButton {checked} {onChecked} />
-    </TableCell>
-  {/if}
-  {#each fields as field, i (i)}
-    {@const extraPaddingLeft = i === 0 && !selectable}
-    {@const extraPaddingRight = i === fields.length - 1 && !actions.length}
-    <TableCell
-      class={clsx({
-        'font-medium': i === 0,
-        'pl-6': extraPaddingLeft,
-        'pl-3': !extraPaddingLeft,
-        'pr-6': extraPaddingRight,
-        'pr-3': !extraPaddingRight,
-        'py-2': field.copy
-      })}
-    >
-      <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] || ''}
-        {onCopied}
-      />
-    </TableCell>
-  {/each}
-  {#if actions.length}
-    <TableCell class="py-2">
-      <BaseTableActions
-        bind:this={actionsDropdown}
-        {actions}
-        onclick={(action) => {
-          onClickAction?.({ row, action })
-        }}
-      />
-    </TableCell>
-  {/if}
-</TableRow>