feat: dynamic truncate component (#535)

Author: alexbarnsley

resources/views/components/truncate-dynamic.blade.php

@@ -0,0 +1,50 @@
+<span
+    x-data="{
+        value: '{{ $slot }}',
+        init() {
+            new ResizeObserver(() => this.throttledTruncate()).observe(this.$root);
+
+            window.addEventListener('resize', () => this.throttledTruncate());
+
+            this.truncate();
+        },
+        throttleTimeout: null,
+        throttledTruncate() {
+            if (this.throttleTimeout !== null) {
+                clearTimeout(this.throttleTimeout);
+            }
+
+            this.throttleTimeout = setTimeout(() => {
+                this.truncate();
+
+                this.throttleTimeout = null;
+            }, 50);
+        },
+        truncate() {
+            const el = this.$root;
+
+            el.innerHTML = ''
+            el.appendChild(document.createTextNode(this.value));
+
+            if (!this.hasOverflow(el)) {
+                return;
+            }
+
+            let length = this.value.length;
+            do {
+                const a = this.value.substr(0, length);
+                const b = this.value.substr(-length);
+                const truncated = a + '...' + b;
+
+                el.innerHTML = ''
+                el.appendChild(document.createTextNode(truncated));
+
+                length--;
+            } while(this.hasOverflow(el) && length >= 0)
+        },
+        hasOverflow(el) {
+            return el.offsetWidth < el.scrollWidth;
+        },
+    }"
+    class="inline-flex overflow-hidden w-full max-w-full whitespace-nowrap"
+>{{ $slot }}</span>

src/Providers/UserInterfaceServiceProvider.php

@@ -320,6 +320,7 @@ private function registerBladeComponents(): void
             $blade->component('ark::status-circle', 'ark-status-circle');
             $blade->component('ark::svg-lazy', 'ark-svg-lazy');
             $blade->component('ark::toast', 'ark-toast');
+            $blade->component('ark::components.truncate-dynamic', 'ark-truncate-dynamic');
             $blade->component('ark::separator', 'ark-separator');
             $blade->component('ark::shapes.line', 'ark-placeholder-line');
             $blade->component('ark::shapes.square', 'ark-placeholder-square');