@invopop/popui 0.1.58 → 0.1.60

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

@@ -3,11 +3,13 @@
   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,
+    vertical = false,
     children,
     onCopy,
     onLink
@@ -21,11 +23,12 @@
 
   let clickAction = $derived(onCopy || onLink)
 
-  const handleAreaClick = (e: MouseEvent) => {
+  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()
@@ -33,15 +36,25 @@
   }
 </script>
 
-<div class="flex gap-6 items-center group">
-  <div class="text-foreground-default-secondary text-base min-w-[125px]">
+<div
+  class={clsx('flex group', {
+    'flex-col gap-1.5': vertical,
+    'gap-6 items-center': !vertical
+  })}
+>
+  <div
+    class={clsx('text-foreground-default-secondary text-base', {
+      'pl-2': vertical,
+      'min-w-[125px]': !vertical
+    })}
+  >
     {label}
   </div>
   <!-- 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',
+      'flex flex-1 gap-1 items-center group-hover:bg-background-default-secondary py-1 pl-2 pr-1 rounded-md min-w-0 h-8',
       { 'cursor-pointer': clickAction }
     )}
     onclick={clickAction ? handleAreaClick : undefined}
@@ -57,14 +70,19 @@
     </div>
     {#if onCopy}
       <BaseButton
+        size="sm"
         variant="outline"
         icon={Duplicate}
-        onclick={onCopy}
+        onclick={async () => {
+          await copyToClipboard(value)
+          onCopy()
+        }}
         class="opacity-0 group-hover:opacity-100 transition-opacity"
       />
     {/if}
     {#if onLink}
       <BaseButton
+        size="sm"
         variant="outline"
         icon={ExternalLink}
         onclick={onLink}

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

@@ -308,7 +308,7 @@ export interface DataListItemProps {
     label?: string;
     value?: string;
     monospaced?: boolean;
-    fullWidth?: boolean;
+    vertical?: boolean;
     children?: Snippet;
     onCopy?: () => void;
     onLink?: () => void;

package/package.json

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