@invopop/popui 0.1.57 → 0.1.59

package/dist/ButtonUuidCopy.svelte

@@ -2,6 +2,7 @@
   import { Duplicate } from '@invopop/ui-icons'
   import BaseButton from './BaseButton.svelte'
   import type { ButtonUuidCopyProps } from './types'
+  import { copyToClipboard } from './helpers'
 
   let {
     uuid = '',
@@ -35,7 +36,7 @@
   data-uuid-copy
   onclick={async (e) => {
     e.stopPropagation()
-    await navigator.clipboard.writeText(uuid)
+    await copyToClipboard(uuid)
     oncopied?.(uuid)
   }}
 >

package/dist/DataListItem.svelte

@@ -1,36 +1,80 @@
 <script lang="ts">
   import clsx from 'clsx'
   import type { DataListItemProps } from './types'
+  import BaseButton from './BaseButton.svelte'
+  import { Duplicate, ExternalLink } from '@invopop/ui-icons'
+  import { copyToClipboard } from './helpers'
 
   let {
     label = '',
     value = '',
     monospaced = false,
-    monospacedNums = false,
-    fullWidth = false,
-    children
+    children,
+    onCopy,
+    onLink
   }: DataListItemProps = $props()
 
   let valueStyles = $derived(
-    clsx('text-foreground font-medium text-base', {
-      'font-mono': monospaced,
-      'slashed-zero tabular-nums lining-nums': monospacedNums,
-      'w-full': fullWidth
+    clsx('text-foreground font-medium text-base truncate min-w-0', {
+      'font-mono slashed-zero tabular-nums lining-nums': monospaced
     })
   )
+
+  let clickAction = $derived(onCopy || onLink)
+
+  const handleAreaClick = async (e: MouseEvent) => {
+    // Only handle click if not clicking on a button
+    if ((e.target as HTMLElement).closest('button')) return
+
+    if (onCopy) {
+      await copyToClipboard(value)
+      onCopy()
+    } else if (onLink) {
+      onLink()
+    }
+  }
 </script>
 
-<div class="flex gap-6 items-center px-3 py-1 rounded-lg hover:bg-background-default-secondary">
+<div class="flex gap-6 items-center group">
   <div class="text-foreground-default-secondary text-base min-w-[125px]">
     {label}
   </div>
-  <div class="flex gap-1 items-center">
-    <div class={valueStyles}>
-      {#if children}
-        {@render children()}
-      {:else}
-        {value}
-      {/if}
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    class={clsx(
+      'flex flex-1 gap-1 items-center group-hover:bg-background-default-secondary py-1 pl-2 pr-1 rounded-md min-w-0',
+      { 'cursor-pointer': clickAction }
+    )}
+    onclick={clickAction ? handleAreaClick : undefined}
+  >
+    <div class="flex-1 min-w-0 h-8">
+      <div class={valueStyles}>
+        {#if children}
+          {@render children()}
+        {:else}
+          {value}
+        {/if}
+      </div>
     </div>
+    {#if onCopy}
+      <BaseButton
+        variant="outline"
+        icon={Duplicate}
+        onclick={async () => {
+          await copyToClipboard(value)
+          onCopy()
+        }}
+        class="opacity-0 group-hover:opacity-100 transition-opacity"
+      />
+    {/if}
+    {#if onLink}
+      <BaseButton
+        variant="outline"
+        icon={ExternalLink}
+        onclick={onLink}
+        class="opacity-0 group-hover:opacity-100 transition-opacity"
+      />
+    {/if}
   </div>
 </div>

package/dist/button/button.svelte

@@ -126,17 +126,17 @@
       {
         size: 'sm',
         iconOnly: true,
-        class: 'w-6'
+        class: 'w-6 shrink-0'
       },
       {
         size: 'md',
         iconOnly: true,
-        class: 'w-7'
+        class: 'w-7 shrink-0'
       },
       {
         size: 'lg',
         iconOnly: true,
-        class: 'w-8'
+        class: 'w-8 shrink-0'
       },
       {
         stackedLeft: true,
@@ -201,15 +201,7 @@
   let iconOnly = $derived(!children)
   let hasIcon = $derived(!!icon && !iconOnly)
 
-  let iconSize = $derived.by(() => {
-    if (shortcut) return 'size-3'
-
-    return {
-      sm: 'size-3',
-      md: 'size-4',
-      lg: 'size-4'
-    }[size]
-  })
+  let iconSize = $derived(shortcut ? 'size-3' : 'size-4')
 
   // For icon-right, we need to reverse the padding
   let paddingClass = $derived(
@@ -240,7 +232,7 @@
 
 {#snippet buttonContent()}
   <div
-    class={clsx('inline-flex items-center transition-transform group-active:translate-y-px', {
+    class={clsx('inline-flex items-center transition-transform group-active/button:translate-y-px', {
       'gap-1': !iconOnly && !shortcut,
       'gap-1.5': !iconOnly && shortcut
     })}
@@ -271,6 +263,7 @@
     data-slot="button"
     class={cn(
       buttonVariants({ variant, size, iconOnly, hasIcon, stackedLeft, stackedRight }),
+      'group/button',
       iconPosition === 'right' && 'flex-row-reverse',
       paddingClass,
       className
@@ -289,7 +282,7 @@
     data-slot="button"
     class={cn(
       buttonVariants({ variant, size, iconOnly, hasIcon, stackedLeft, stackedRight }),
-      'group',
+      'group/button',
       iconPosition === 'right' && 'flex-row-reverse',
       paddingClass,
       className

package/dist/helpers.d.ts

@@ -11,3 +11,4 @@ export declare function scrollIntoTableView(element: HTMLElement): void;
 export declare function isInputFocused(): boolean;
 export declare function toCalendarDate(date: Date): DateValue;
 export declare function datesFromToday(): DatesFromToday;
+export declare function copyToClipboard(text: string): Promise<void>;

package/dist/helpers.js

@@ -120,3 +120,6 @@ export function datesFromToday() {
         endOfLastQuarter
     };
 }
+export async function copyToClipboard(text) {
+    await navigator.clipboard.writeText(text);
+}

package/dist/types.d.ts

@@ -96,7 +96,6 @@ export type TableField = {
     helperIcons?: (data: TableDataRow) => TableIcon[];
     monospaced?: boolean;
     nowrap?: boolean;
-    monospacedNums?: boolean;
     rightAlign?: boolean;
     isCountry?: boolean;
     copy?: boolean;
@@ -309,9 +308,10 @@ export interface DataListItemProps {
     label?: string;
     value?: string;
     monospaced?: boolean;
-    monospacedNums?: boolean;
     fullWidth?: boolean;
     children?: Snippet;
+    onCopy?: () => void;
+    onLink?: () => void;
 }
 export interface DatePickerProps {
     label?: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@invopop/popui",
   "license": "MIT",
-  "version": "0.1.57",
+  "version": "0.1.59",
   "repository": {
     "url": "https://github.com/invopop/popui"
   },