@invopop/popui 0.1.67 → 0.1.68

package/dist/ButtonUuidCopy.svelte

@@ -3,6 +3,7 @@
   import BaseButton from './BaseButton.svelte'
   import type { ButtonUuidCopyProps } from './types'
   import { copyToClipboard } from './helpers'
+  import { cn } from './utils'
 
   let {
     uuid = '',
@@ -10,21 +11,13 @@
     suffixLength = 4,
     full = false,
     disabled = false,
-    oncopied
+    oncopied,
+    class: className
   }: ButtonUuidCopyProps = $props()
 
-  function shortenString(inputString: string, prefixLength: number, suffixLength: number) {
-    if (inputString.length <= prefixLength + suffixLength) {
-      return inputString // Return the whole string if it's too short
-    }
-
-    const prefix = inputString.substring(0, prefixLength)
-    const suffix = inputString.substring(inputString.length - suffixLength)
-
-    return prefix + '...' + suffix
-  }
-
-  let formattedUuid = $derived(full ? uuid : shortenString(uuid, prefixLength, suffixLength))
+  let prefix = $derived(uuid.substring(0, prefixLength))
+  let suffix = $derived(uuid.substring(uuid.length - suffixLength))
+  let middle = $derived(uuid.substring(prefixLength, uuid.length - suffixLength))
 </script>
 
 <BaseButton
@@ -34,11 +27,23 @@
   iconPosition="right"
   variant="ghost"
   data-uuid-copy
+  class={cn(
+    'max-w-full [&_[data-button-content]]:max-w-full [&_[data-button-content]]:min-w-0 [&_[data-button-content]>span]:min-w-0',
+    className
+  )}
   onclick={async (e) => {
     e.stopPropagation()
     await copyToClipboard(uuid)
     oncopied?.(uuid)
   }}
 >
-  <span class="font-mono">{formattedUuid}</span>
+  {#if full}
+    <span class="font-mono">{uuid}</span>
+  {:else}
+    <span class="font-mono flex items-center min-w-0 overflow-hidden">
+      <span class="shrink-0">{prefix}</span>
+      <span class="truncate min-w-0">{middle}</span>
+      <span class="shrink-0">{suffix}</span>
+    </span>
+  {/if}
 </BaseButton>

package/dist/button/button.svelte

@@ -232,10 +232,14 @@
 
 {#snippet buttonContent()}
   <div
-    class={clsx('inline-flex items-center transition-transform group-active/button:translate-y-px', {
-      'gap-1': !iconOnly && !shortcut,
-      'gap-1.5': !iconOnly && shortcut
-    })}
+    data-button-content
+    class={clsx(
+      'inline-flex items-center transition-transform group-active/button:translate-y-px',
+      {
+        'gap-1': !iconOnly && !shortcut,
+        'gap-1.5': !iconOnly && shortcut
+      }
+    )}
   >
     {#if icon && !children}
       {@render iconContent()}

package/dist/data-table/cells/uuid-cell.svelte

@@ -14,6 +14,7 @@
       full={config?.full}
       disabled={config?.disabled}
       oncopied={config?.onCopy}
+      class="!font-[weight:inherit]"
     />
   </div>
 {:else}

package/dist/types.d.ts

@@ -266,6 +266,7 @@ export interface ButtonUuidCopyProps {
     full?: boolean;
     disabled?: boolean;
     oncopied?: (label: string) => void;
+    class?: string;
 }
 export interface ButtonSearchProps {
     value?: string;

package/package.json

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