@invopop/popui 0.0.108 → 0.1.2

package/dist/BaseTable.svelte

@@ -1,196 +1,234 @@
-<script>import { intersect } from "svelte-intersection-observer-action";
-import { createEventDispatcher } from "svelte";
-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 dispatch = createEventDispatcher();
-const callback = (entry) => {
-  if (entry.intersectionRatio && entry.isIntersecting) {
-    dispatch("tableEndReached");
-  }
-};
-const intersectOptions = { callback };
-let metaKeyPressed = false;
-let shiftKeyPressed = false;
-let lastSelected = {};
-let lastSelectedForShift = {};
-let selectWithArrowPosition = -1;
-let selectionMode = "keyboard";
-export let sortBy = "";
-export let sortDirection = "";
-export let fields = [];
-export let data = [];
-export let getActions = void 0;
-export let groupLabel = void 0;
-export let disableRowClick = false;
-export let hideCounter = false;
-export let selectable = false;
-export let selectedRows = [];
-export let selectedTrackedBy = "id";
-export let hideSelectAll = false;
-export let disableKeyboardNavigation = false;
-$:
-  groupedData = groupData(data);
-$:
-  addExtraCell = getActions instanceof Function;
-$:
-  indeterminate = selectedRows.length > 0 && selectedRows.length < data.length;
-$:
-  allChecked = selectedRows.length === data.length;
-$:
-  flattedData = groupedData.flatMap((d) => d.rows);
-$:
-  lastSelectedIndex = flattedData.findIndex(
-    (d) => d[selectedTrackedBy] === lastSelected[selectedTrackedBy]
-  );
-function groupData(rows) {
-  if (rows.length === 0)
-    return [];
-  const groups = [];
-  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] });
+<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?.()
     }
-  });
-  return groups;
-}
-function toggleAllSelected(selected) {
-  selectedRows = [];
-  lastSelected = {};
-  dispatch("selectAll", selected);
-  if (!selected)
-    return;
-  selectedRows = data;
-}
-function selectRow(row) {
-  lastSelectedForShift = row;
-  selectedRows = [.../* @__PURE__ */ new Set([...selectedRows, row])];
-}
-function unselectRow(row) {
-  selectedRows = selectedRows.filter((r) => r[selectedTrackedBy] !== row[selectedTrackedBy]);
-  if (!selectedRows.length) {
-    lastSelected = {};
   }
-}
-function rowIsSelected(row) {
-  return selectedRows.find((r) => r[selectedTrackedBy] === row[selectedTrackedBy]);
-}
-function toggleRow(row) {
-  if (rowIsSelected(row)) {
-    unselectRow(row);
-  } else {
-    selectRow(row);
+  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 = '',
+    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 selectRange(to) {
-  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];
+
+  function toggleAllSelected(selected: boolean) {
+    selectedRows = []
+    lastSelected = {}
+
+    onSelectAllRows?.(selected)
+
+    if (!selected) return
+
+    selectedRows = data
   }
-  const itemsToSelect = flattedData.slice(fromIndex, toIndex + 1);
-  selectedRows = [.../* @__PURE__ */ new Set([...selectedRows, ...itemsToSelect])];
-}
-function handleKeydown(event) {
-  if (disableKeyboardNavigation)
-    return;
-  if (isInputFocused()) {
-    return;
+
+  function selectRow(row: TableDataRow) {
+    lastSelectedForShift = row
+    selectedRows = [...new Set([...selectedRows, row])]
   }
-  selectionMode = "keyboard";
-  if (event.key === "Escape" || event.key === "Esc") {
-    event.preventDefault();
-    selectedRows = [];
-    lastSelected = {};
+
+  function unselectRow(row: TableDataRow) {
+    selectedRows = selectedRows.filter((r) => r[selectedTrackedBy] !== row[selectedTrackedBy])
+    if (!selectedRows.length) {
+      lastSelected = {}
+    }
   }
-  if ((event.code === "Space" || event.key === " ") && lastSelectedIndex >= 0) {
-    event.preventDefault();
-    toggleRow(lastSelected);
+
+  function rowIsSelected(row: TableDataRow) {
+    return selectedRows.find((r) => r[selectedTrackedBy] === row[selectedTrackedBy])
   }
-  metaKeyPressed = event.metaKey;
-  shiftKeyPressed = event.shiftKey;
-  if (event.key === "Enter") {
-    if (lastSelectedIndex >= 0) {
-      event.preventDefault();
-      dispatch("rowClick", lastSelected);
+
+  function toggleRow(row: TableDataRow) {
+    if (rowIsSelected(row)) {
+      unselectRow(row)
+    } else {
+      selectRow(row)
     }
-    return;
   }
-  if (event.key === "Shift") {
-    event.preventDefault();
-    selectWithArrowPosition = lastSelectedIndex;
-    return;
+
+  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])]
   }
-  if (event.key === "ArrowUp") {
-    event.preventDefault();
-    const toIndex = lastSelectedIndex - 1;
-    const to = flattedData[toIndex];
-    if (!to)
-      return;
-    if (!shiftKeyPressed) {
-      lastSelected = to;
-      return;
+
+  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
     }
-    if (!rowIsSelected(lastSelected)) {
-      selectRow(lastSelected);
+
+    selectionMode = 'keyboard'
+
+    if (event.key === 'Escape' || event.key === 'Esc') {
+      event.preventDefault()
+      selectedRows = []
+      lastSelected = {}
     }
-    if (toIndex < selectWithArrowPosition) {
-      selectRow(to);
-    } else {
-      unselectRow(lastSelected);
+
+    if ((event.code === 'Space' || event.key === ' ') && lastSelectedIndex >= 0) {
+      event.preventDefault()
+      toggleRow(lastSelected)
     }
-    lastSelected = to;
-  }
-  if (event.key === "ArrowDown") {
-    event.preventDefault();
-    if (lastSelectedIndex < 0) {
-      if (shiftKeyPressed) {
-        selectRow(flattedData[0]);
+
+    metaKeyPressed = event.metaKey
+    shiftKeyPressed = event.shiftKey
+
+    if (event.key === 'Enter') {
+      if (lastSelectedIndex >= 0) {
+        event.preventDefault()
+        onRowClick?.(lastSelected)
       }
-      lastSelected = flattedData[0];
-      return;
+      return
     }
-    const toIndex = lastSelectedIndex + 1;
-    const to = flattedData[toIndex];
-    if (!to)
-      return;
-    if (!shiftKeyPressed) {
-      lastSelected = to;
-      return;
+
+    if (event.key === 'Shift') {
+      event.preventDefault()
+      selectWithArrowPosition = lastSelectedIndex
+      return
     }
-    if (!rowIsSelected(lastSelected)) {
-      selectRow(lastSelected);
+
+    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 (toIndex > selectWithArrowPosition) {
-      selectRow(to);
-    } else {
-      unselectRow(lastSelected);
+
+    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
     }
-    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
-  on:mousemove={() => {
+  onmousemove={() => {
     selectionMode = 'mouse'
   }}
-  on:keydown={handleKeydown}
-  on:keyup={(event) => {
+  onkeydown={handleKeydown}
+  onkeyup={(event) => {
     metaKeyPressed = false
     shiftKeyPressed = false
 
@@ -201,7 +239,7 @@ function handleKeydown(event) {
 />
 
 <div class="w-full font-sans border rounded-md border-neutral-100">
-  <Table class="hidden md:table" {...$$restProps}>
+  <Table class="hidden md:table" {...rest}>
     <colgroup>
       {#if selectable}
         <col style="width: 38px" />
@@ -223,7 +261,7 @@ function handleKeydown(event) {
                 hidden={!selectedRows.length}
                 {indeterminate}
                 checked={allChecked}
-                on:checked={() => {
+                onChecked={() => {
                   toggleAllSelected(!selectedRows.length)
                 }}
               />
@@ -236,13 +274,13 @@ function handleKeydown(event) {
               ? 'pl-3'
               : 'pl-0'} {i === fields.length - 1 && !addExtraCell ? 'pr-3' : 'pr-0'}"
           >
-            <BaseTableHeaderContent {sortBy} {sortDirection} {field} on:orderBy />
+            <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-white sticky top-0 z-10 rounded-tr-md">
-            <div class="border-b border-neutral-100 h-9" />
+            <div class="border-b border-neutral-100 h-9"></div>
           </th>
         {/if}
       </TableRow>
@@ -283,20 +321,20 @@ function handleKeydown(event) {
             selected={selectable &&
               lastSelected &&
               row[selectedTrackedBy] === lastSelected[selectedTrackedBy]}
-            on:click={() => {
+            onclick={() => {
               if (disableRowClick) return
 
               if (metaKeyPressed) {
-                dispatch('rowNewTabClick', row)
+                onRowNewTabClick?.(row)
               } else {
-                dispatch('rowClick', row)
+                onRowClick?.(row)
               }
             }}
-            on:contextmenu={() => {
-              dispatch('rowRightClick', row)
+            oncontextmenu={() => {
+              onRowRightClick?.(row)
             }}
-            on:checked={(event) => {
-              if (event.detail) {
+            onChecked={(checked) => {
+              if (checked) {
                 if (shiftKeyPressed) {
                   selectRange(row)
                 } else {
@@ -307,12 +345,12 @@ function handleKeydown(event) {
                 unselectRow(row)
               }
             }}
-            on:hover={() => {
+            onmouseover={() => {
               if (shiftKeyPressed) return
               lastSelected = row
             }}
-            on:action
-            on:copied
+            {onClickAction}
+            {onCopied}
           />
         {/each}
       {/each}
@@ -324,13 +362,13 @@ function handleKeydown(event) {
         <button
           class:cursor-default={disableRowClick}
           class="w-full text-left border border-neutral-200 rounded"
-          on:click={() => {
+          onclick={() => {
             if (disableRowClick) return
 
             if (metaKeyPressed) {
-              dispatch('rowNewTabClick', row)
+              onRowNewTabClick?.(row)
             } else {
-              dispatch('rowClick', row)
+              onRowClick?.(row)
             }
           }}
         >
@@ -341,7 +379,7 @@ function handleKeydown(event) {
                 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
+                {onCopied}
               />
             </div>
           {/each}
@@ -349,5 +387,5 @@ function handleKeydown(event) {
       {/each}
     {/each}
   </div>
-  <div use:intersect={intersectOptions} />
+  <div use:intersect={intersectOptions}></div>
 </div>

package/dist/BaseTable.svelte.d.ts

@@ -1,39 +1,4 @@
-import { SvelteComponent } from "svelte";
-import type { TableActionProp, TableDataRow, TableField, TableGroupLabelProp, TableSortBy } from './types.js';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        sortBy?: string | undefined;
-        sortDirection?: TableSortBy | undefined;
-        fields?: TableField[] | undefined;
-        data?: TableDataRow[] | undefined;
-        getActions?: TableActionProp;
-        groupLabel?: TableGroupLabelProp;
-        disableRowClick?: boolean | undefined;
-        hideCounter?: boolean | undefined;
-        selectable?: boolean | undefined;
-        selectedRows?: TableDataRow[] | undefined;
-        selectedTrackedBy?: string | undefined;
-        hideSelectAll?: boolean | undefined;
-        disableKeyboardNavigation?: boolean | undefined;
-    };
-    events: {
-        orderBy: CustomEvent<any>;
-        action: CustomEvent<any>;
-        copied: CustomEvent<any>;
-        rowNewTabClick: CustomEvent<any>;
-        rowClick: CustomEvent<any>;
-        rowRightClick: CustomEvent<any>;
-        tableEndReached: CustomEvent<any>;
-        selectAll: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type BaseTableProps = typeof __propDef.props;
-export type BaseTableEvents = typeof __propDef.events;
-export type BaseTableSlots = typeof __propDef.slots;
-export default class BaseTable extends SvelteComponent<BaseTableProps, BaseTableEvents, BaseTableSlots> {
-}
-export {};
+import type { BaseTableProps } from './types.js';
+declare const BaseTable: import("svelte").Component<BaseTableProps, {}, "selectedRows">;
+type BaseTable = ReturnType<typeof BaseTable>;
+export default BaseTable;

package/dist/BaseTableActions.svelte

@@ -1,41 +1,51 @@
-<script>import { Icon } from "@steeze-ui/svelte-icon";
-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,
-    value: a,
-    icon: a.icon,
-    separator: a.separator,
-    destructive: a.destructive
-  }));
-$:
-  overlayClasses = clsx({
-    "group-hover:bg-neutral-800/[.05]": !isOpen,
-    "bg-neutral-800/[.1]": isOpen
-  });
-export const toggle = () => {
-  actionDropdown.toggle();
-};
+<script lang="ts">
+  import { Icon } from '@steeze-ui/svelte-icon'
+  import type { DrawerOption, BaseTableActionsProps } from './types.js'
+  import BaseDropdown from './BaseDropdown.svelte'
+  import DrawerContext from './DrawerContext.svelte'
+  import { Options } from '@invopop/ui-icons'
+  import clsx from 'clsx'
+
+  let { actions, onclick }: BaseTableActionsProps = $props()
+
+  let actionDropdown: BaseDropdown | undefined = $state()
+  let isOpen = $state(false)
+
+  let items = $derived(
+    actions.map((a) => ({
+      label: a.label,
+      value: a,
+      icon: a.icon,
+      separator: a.separator,
+      destructive: a.destructive
+    })) as DrawerOption[]
+  )
+
+  let overlayClasses = $derived(
+    clsx({
+      'group-hover:bg-neutral-800/[.05]': !isOpen,
+      'bg-neutral-800/[.1]': isOpen
+    })
+  )
+
+  export const toggle = () => {
+    actionDropdown?.toggle()
+  }
 </script>
 
-<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" />
+{#snippet trigger()}
+  <div class="relative group flex justify-center items-center rounded p-1 cursor-pointer">
+    <span class="{overlayClasses} absolute inset-0 rounded"></span>
+    <Icon src={Options} class="w-4 text-neutral-500" />
   </div>
+{/snippet}
+
+<BaseDropdown bind:isOpen bind:this={actionDropdown} {trigger}>
   <DrawerContext
     {items}
-    on:click={(e) => {
-      dispatch('clickAction', e.detail)
-      actionDropdown.toggle()
+    onclick={(e) => {
+      onclick?.(e)
+      actionDropdown?.toggle()
     }}
   />
 </BaseDropdown>

package/dist/BaseTableActions.svelte.d.ts

@@ -1,21 +1,6 @@
-import { SvelteComponent } from "svelte";
-import type { TableAction } from './types.js';
-declare const __propDef: {
-    props: {
-        actions: TableAction[];
-        toggle?: (() => void) | undefined;
-    };
-    events: {
-        clickAction: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type BaseTableActionsProps = typeof __propDef.props;
-export type BaseTableActionsEvents = typeof __propDef.events;
-export type BaseTableActionsSlots = typeof __propDef.slots;
-export default class BaseTableActions extends SvelteComponent<BaseTableActionsProps, BaseTableActionsEvents, BaseTableActionsSlots> {
-    get toggle(): () => void;
-}
-export {};
+import type { BaseTableActionsProps } from './types.js';
+declare const BaseTableActions: import("svelte").Component<BaseTableActionsProps, {
+    toggle: () => void;
+}, "">;
+type BaseTableActions = ReturnType<typeof BaseTableActions>;
+export default BaseTableActions;