@invopop/popui 0.0.108 → 0.1.2

package/dist/BaseTableCellContent.svelte

@@ -1,15 +1,21 @@
-<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 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 UuidCopy from './UuidCopy.svelte'
+  import { Icon } from '@steeze-ui/svelte-icon'
+
+  let {
+    field,
+    data = '',
+    isMobile = false,
+    badge = null,
+    status = null,
+    icons = null,
+    onCopied
+  }: BaseTableCellContentProps = $props()
 </script>
 
 <div class="flex flex-col">
@@ -31,7 +37,7 @@ export let icons = null;
         full
         compact
         dark={isMobile}
-        on:copied
+        {onCopied}
       />
     {:else}
       <span class="hidden md:inline">{data}</span>

package/dist/BaseTableCellContent.svelte.d.ts

@@ -1,24 +1,4 @@
-import { SvelteComponent } from "svelte";
-import type { Badge, FeedItemStatus, TableField } from './types';
-declare const __propDef: {
-    props: {
-        field: TableField;
-        data?: unknown;
-        isMobile?: boolean | undefined;
-        badge?: Badge | null | undefined;
-        status?: FeedItemStatus | null | undefined;
-        icons?: any[] | 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 {};
+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,10 +1,19 @@
-<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 lang="ts">
+  import InputCheckbox from './InputCheckbox.svelte'
+  import type { BaseTableCheckboxProps } from './types'
+
+  let {
+    checkboxButton = $bindable(undefined),
+    checked = false,
+    hidden = false,
+    indeterminate = false,
+    onChecked
+  }: BaseTableCheckboxProps = $props()
+
+  function handleClick(event: MouseEvent) {
+    event.stopPropagation()
+    onChecked?.(!checked)
+  }
 </script>
 
 <button
@@ -12,16 +21,14 @@ export let indeterminate = false;
   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)
-  }}
+  onclick={handleClick}
 >
   <div class:invisible={hidden} class="group-hover:visible">
     <InputCheckbox
       {checked}
       {indeterminate}
-      on:change={(event) => {
-        dispatch('checked', event.detail)
+      onchange={(changed) => {
+        onChecked?.(changed)
       }}
     />
   </div>

package/dist/BaseTableCheckbox.svelte.d.ts

@@ -1,21 +1,4 @@
-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 {};
+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,28 +1,34 @@
-<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 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-neutral-50 focus:bg-neutral-100': field.sortable
+    })
+  )
+
+  function handleSortBy(direction: TableSortBy) {
+    onOrderBy?.(field.slug, direction)
+    sortDropdown?.toggle()
+  }
 </script>
 
 <span class="flex" class:justify-end={field.rightAlign}>
   {#if field.sortable}
-    <BaseDropdown bind:this={sortDropdown} fullWidth>
+    {#snippet trigger()}
       <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>
@@ -43,10 +49,12 @@ function handleSortBy(event) {
           </svg>
         {/if}
       </span>
-      <BaseTableHeaderSortBy
+    {/snippet}
+    <BaseDropdown bind:this={sortDropdown} {trigger} fullWidth>
+      <BaseTableHeaderOrderBy
         {sortDirection}
         isActive={sortBy === field.slug}
-        on:sortBy={handleSortBy}
+        onOrderBy={handleSortBy}
       />
     </BaseDropdown>
   {:else}

package/dist/BaseTableHeaderContent.svelte.d.ts

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

package/dist/BaseTableHeaderOrderBy.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { SortAscending, SortDescending } from '@invopop/ui-icons'
+  import type { TableSortBy, DrawerOption, BaseTableHeaderOrderByProps } from './types.js'
+  import DrawerContext from './DrawerContext.svelte'
+
+  let { isActive = false, sortDirection, onOrderBy }: BaseTableHeaderOrderByProps = $props()
+
+  let items = $derived(
+    [
+      { icon: SortAscending, label: 'Sort Ascending', value: 'asc' },
+      { icon: SortDescending, label: 'Sort Descending', value: 'desc' }
+    ].map((o) => ({
+      ...o,
+      selected: isActive && sortDirection === o.value
+    })) as DrawerOption[]
+  )
+</script>
+
+<DrawerContext
+  {items}
+  onclick={(e) => {
+    onOrderBy?.(e as TableSortBy)
+  }}
+/>

package/dist/BaseTableHeaderOrderBy.svelte.d.ts

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

package/dist/BaseTableRow.svelte

@@ -1,71 +1,89 @@
-<script>import { createEventDispatcher } from "svelte";
-import BaseTableActions from "./BaseTableActions.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 = [];
-export let disableRowClick = false;
-export let selectable = false;
-export let selected = false;
-export let selectionMode = "keyboard";
-export let selectedTrackedBy = "id";
-export let selectedRows = [];
-$:
-  actions = getActions instanceof Function ? getActions(row) : [];
-$:
-  checked = !!selectedRows.find((r) => {
-    const field = r[selectedTrackedBy];
-    if (field === void 0)
-      return false;
-    return field === row[selectedTrackedBy];
-  });
-$:
-  if (selectionMode === "keyboard" && selected) {
-    scrollIntoView();
-  }
-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 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}
-  on:click
-  on:contextmenu={() => {
+  {onclick}
+  oncontextmenu={() => {
     if (!actionsDropdown) return
 
     actionsDropdown.toggle()
+
+    oncontextmenu?.()
   }}
-  on:mouseover={() => {
+  onmouseover={() => {
     if (selectionMode === 'keyboard') return
-    dispatch('hover')
-  }}
-  on:focus={() => {
-    dispatch('focus')
+    onmouseover?.()
   }}
+  {onfocus}
 >
   {#if selectable}
     <TableCell>
@@ -73,7 +91,7 @@ $: {
         bind:checkboxButton
         {checked}
         hidden={selectedRows.length === 0}
-        on:checked
+        {onChecked}
       />
     </TableCell>
   {/if}
@@ -89,7 +107,7 @@ $: {
         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
+        {onCopied}
       />
     </TableCell>
   {/each}
@@ -98,8 +116,8 @@ $: {
       <BaseTableActions
         bind:this={actionsDropdown}
         {actions}
-        on:clickAction={(event) => {
-          dispatch('action', { row, action: event.detail })
+        onclick={(action) => {
+          onClickAction?.({ row, action })
         }}
       />
     </TableCell>

package/dist/BaseTableRow.svelte.d.ts

@@ -1,32 +1,4 @@
-import { SvelteComponent } from "svelte";
-import type { TableActionProp, TableDataRow, TableField } from './types.js';
-declare const __propDef: {
-    props: {
-        row: TableDataRow;
-        getActions?: TableActionProp;
-        fields?: TableField[] | undefined;
-        disableRowClick?: boolean | undefined;
-        selectable?: boolean | undefined;
-        selected?: boolean | undefined;
-        selectionMode?: string | undefined;
-        selectedTrackedBy?: string | undefined;
-        selectedRows?: TableDataRow[] | undefined;
-    };
-    events: {
-        click: MouseEvent;
-        checked: CustomEvent<any>;
-        copied: CustomEvent<any>;
-        hover: CustomEvent<any>;
-        focus: CustomEvent<any>;
-        action: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type BaseTableRowProps = typeof __propDef.props;
-export type BaseTableRowEvents = typeof __propDef.events;
-export type BaseTableRowSlots = typeof __propDef.slots;
-export default class BaseTableRow extends SvelteComponent<BaseTableRowProps, BaseTableRowEvents, BaseTableRowSlots> {
-}
-export {};
+import type { BaseTableRowProps } from './types.js';
+declare const BaseTableRow: import("svelte").Component<BaseTableRowProps, {}, "">;
+type BaseTableRow = ReturnType<typeof BaseTableRow>;
+export default BaseTableRow;

package/dist/Breadcrumbs.svelte

@@ -1,9 +1,16 @@
-<script>import { Slash } from "@invopop/ui-icons";
-import BaseFlag from "./BaseFlag.svelte";
-import { Icon } from "@steeze-ui/svelte-icon";
-import { createEventDispatcher } from "svelte";
-export let breadcrumbs = [];
-const dispatch = createEventDispatcher();
+<script lang="ts">
+  import type { BreadcrumbsProps } from './types.js'
+  import { Slash } from '@invopop/ui-icons'
+  import BaseFlag from './BaseFlag.svelte'
+  import { Icon } from '@steeze-ui/svelte-icon'
+
+  let { breadcrumbs = [], oncopied }: BreadcrumbsProps = $props()
+
+  async function handleClick(event: MouseEvent, label: string) {
+    event.stopPropagation()
+    await navigator.clipboard.writeText(label)
+    oncopied?.(label)
+  }
 </script>
 
 <ul class="flex items-center justify-start text-neutral-800">
@@ -16,10 +23,7 @@ const dispatch = createEventDispatcher();
       {:else if breadcrumb.copiable}
         <button
           class={i < breadcrumbs.length - 1 ? 'text-neutral-400' : 'font-medium'}
-          on:click|stopPropagation={async () => {
-            await navigator.clipboard.writeText(breadcrumb.label)
-            dispatch('copied', breadcrumb.label)
-          }}
+          onclick={(e) => handleClick(e, breadcrumb.label)}
         >
           {breadcrumb.label}
         </button>

package/dist/Breadcrumbs.svelte.d.ts

@@ -1,19 +1,4 @@
-import { SvelteComponent } from "svelte";
-import type { Breadcrumb } from './types.js';
-declare const __propDef: {
-    props: {
-        breadcrumbs?: Breadcrumb[] | undefined;
-    };
-    events: {
-        copied: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type BreadcrumbsProps = typeof __propDef.props;
-export type BreadcrumbsEvents = typeof __propDef.events;
-export type BreadcrumbsSlots = typeof __propDef.slots;
-export default class Breadcrumbs extends SvelteComponent<BreadcrumbsProps, BreadcrumbsEvents, BreadcrumbsSlots> {
-}
-export {};
+import type { BreadcrumbsProps } from './types.js';
+declare const Breadcrumbs: import("svelte").Component<BreadcrumbsProps, {}, "">;
+type Breadcrumbs = ReturnType<typeof Breadcrumbs>;
+export default Breadcrumbs;

package/dist/ButtonFile.svelte

@@ -1,35 +1,46 @@
-<script>import { createEventDispatcher } from "svelte";
-import { Icon } from "@steeze-ui/svelte-icon";
-import { Invoice, Download } from "@invopop/ui-icons";
-import BaseButton from "./BaseButton.svelte";
-import clsx from "clsx";
-export let icon = Invoice;
-export let name = "";
-export let disabled = false;
-export let date = "";
-export let iconColor = "grey";
-const dispatch = createEventDispatcher();
-$:
-  iconStyles = clsx({
-    "border-positive-100 bg-positive-50 text-positive-500": iconColor === "green",
-    "border-yellow-100 bg-yellow-50 text-yellow-500": iconColor === "yellow",
-    "border-red-100 bg-red-50 text-red-500": iconColor === "red",
-    "border-warning-100 bg-warning-50 text-warning-500": iconColor === "orange",
-    "border-blue-100 bg-blue-50 text-blue-500": iconColor === "blue",
-    "border-purple-100 bg-purple-50 text-purple-500": iconColor === "purple",
-    "border-dashed border-neutral-100 text-neutral-400": iconColor === "empty",
-    "border-neutral-100 bg-neutral-50 text-neutral-500": iconColor === "grey"
-  });
+<script lang="ts">
+  import { Icon } from '@steeze-ui/svelte-icon'
+  import { Invoice, Download } from '@invopop/ui-icons'
+  import BaseButton from './BaseButton.svelte'
+  import type { ButtonFileProps } from './types.js'
+  import clsx from 'clsx'
+
+  let {
+    icon = Invoice,
+    name = '',
+    disabled = false,
+    date = '',
+    iconColor = 'grey',
+    onPreview,
+    onDownload,
+    ...rest
+  }: ButtonFileProps = $props()
+
+  let iconStyles = $derived(
+    clsx({
+      'border-positive-100 bg-positive-50 text-positive-500': iconColor === 'green',
+      'border-yellow-100 bg-yellow-50 text-yellow-500': iconColor === 'yellow',
+      'border-red-100 bg-red-50 text-red-500': iconColor === 'red',
+      'border-warning-100 bg-warning-50 text-warning-500': iconColor === 'orange',
+      'border-blue-100 bg-blue-50 text-blue-500': iconColor === 'blue',
+      'border-purple-100 bg-purple-50 text-purple-500': iconColor === 'purple',
+      'border-dashed border-neutral-100 text-neutral-400': iconColor === 'empty',
+      'border-neutral-100 bg-neutral-50 text-neutral-500': iconColor === 'grey'
+    })
+  )
+
+  function handleClick(event: MouseEvent) {
+    event.stopPropagation()
+    onPreview?.()
+  }
 </script>
 
 <button
   class:opacity-40={disabled}
-  class="border border-neutral-100 hover:bg-neutral-50 active:bg-neutral-100 hover:border-neutral-200 active:border-neutral-300 rounded-lg flex items-center space-x-3 py-1.5 pr-3 pl-2.5 w-full"
+  class="border border-neutral-100 hover:bg-neutral-50 active:bg-neutral-100 hover:border-neutral-200 active:border-neutral-300 rounded-lg flex items-center space-x-3 py-1.5 pr-3 pl-2.5 w-full cursor-pointer"
   {disabled}
-  {...$$restProps}
-  on:click|stopPropagation={() => {
-    dispatch('preview')
-  }}
+  {...rest}
+  onclick={handleClick}
 >
   <span class="flex items-center justify-start space-x-2.5 flex-1">
     <div class="{iconStyles} p-2 border rounded">
@@ -45,8 +56,8 @@ $:
   <BaseButton
     {disabled}
     icon={Download}
-    on:click={() => {
-      dispatch('download')
+    onclick={() => {
+      onDownload?.()
     }}
   />
 </button>