convert to view component

presets.js

@@ -244,7 +244,7 @@ module.exports = {
               spin: 'spin 1000ms infinite',
               submit: 'submit 0.7s ease alternate infinite',
               submit_second: 'submit_second 0.7s ease alternate infinite',
-              marquee: 'marquee 5s linear infinite'
+              marquee: 'marquee 9s linear infinite'
           },
 
           transitionProperty: {

public/akaunting-js/generalAction.js

@@ -362,8 +362,12 @@ if (navigator.userAgent.search("Firefox") >= 0) {
 document.querySelectorAll('[data-truncate]').forEach((truncate) => {
     let truncateText = truncate.textContent.split(" ").join("");
 
+    if (truncateText.length > 30) {
+        truncate.classList.add('truncate');
+    }
+    
     truncate.addEventListener('mouseover', function () {
-        if (truncateText.length > 20) {
+        if (truncateText.length > 30) {
             truncate.style.animationPlayState = 'running';
             truncate.classList.add('animate-marquee');
 
@@ -374,17 +378,11 @@ document.querySelectorAll('[data-truncate]').forEach((truncate) => {
     });
 
     truncate.addEventListener('mouseout', function () {
-        if (truncateText.length > 20) {
+        if (truncateText.length > 30) {
             truncate.style.animationPlayState = 'paused';
             truncate.classList.add('truncate');
             truncate.classList.remove('animate-marquee');
         }
     });
-
-    if (document.body.clientWidth <= 991) {
-        if (truncate.parentElement.getAttribute('data-truncate-parent')) {
-            truncate.parentElement.remove();
-        }
-    }
 });
 //margue animation for truncated text

public/css/app.css

@@ -10036,8 +10036,8 @@ input[type="date"]::-webkit-inner-spin-button,
   }
 }
 .animate-marquee{
-  -webkit-animation: marquee 5s linear infinite;
+  -webkit-animation: marquee 9s linear infinite;
-          animation: marquee 5s linear infinite;
+          animation: marquee 9s linear infinite;
 }
 .cursor-auto{
   cursor: auto;

resources/views/common/items/index.blade.php

@@ -85,12 +85,8 @@
 
                                 <x-table.td class="w-6/12 sm:w-4/12">
                                     <x-slot name="first" class="flex items-center font-bold" override="class">
-                                        <div class="w-48 flex truncate" data-truncate-parent>
+                                        {{ $item->name }}
-                                            <div class="w-48 truncate" data-truncate>
+                                        
-                                                {{ $item->name }}
-                                            </div>
-                                        </div>
-
                                         @if (! $item->enabled)
                                             <x-index.disable text="{{ trans_choice('general.items', 1) }}" />
                                         @endif

resources/views/components/marguee-text.blade.php

@@ -0,0 +1,5 @@
+<div class="flex lg:block truncate">
+    <div data-truncate>
+        {!! $slot !!}
+    </div>
+</div>

resources/views/components/table/td.blade.php

@@ -8,7 +8,9 @@
         }
     @endphp
     <div {{ $first_attributes }}>
-        {!! $first !!}
+        <x-marguee-text>
+            {!! $first !!}
+        </x-marguee-text>
     </div>
     @endif
 
@@ -21,9 +23,13 @@
         }
     @endphp
     <div {{ $second_attributes }}>
-        {!! $second !!}
+        <x-marguee-text>
+            {!! $second !!}
+        </x-marguee-text>
     </div>
     @endif
 
-    {{ $slot }}
+    <x-marguee-text>
+        {{ $slot }}
+    </x-marguee-text>
 </td>