Merge pull request #90 from LittleFoxCompany/feature/remove-tailwind-…

…dependancy

Remove Tailwind Utility classes from functions

nuxt-web/components/content/animators/animateText.vue

@@ -1,43 +1,44 @@
 <template>
   <Example class="flex">
     <ExampleInputs class="flex flex-col">
-    <div class="flex gap-4">
-        <FormInput v-model="value" label="Title" />
-        <FormSelect v-model="splitBy" label="Select" name="select" placeholder="Select an option">
+      <div class="flex gap-4 w-full">
+          <FormInput v-model="value" label="Title" />
+          <FormSelect v-model="splitBy" label="Select" name="select" placeholder="Select an option">
             <option value="word">Word</option>
             <option value="character">Character</option>
+          </FormSelect>
+        </div>
+        <div class="flex gap-4 w-full">
+        <FormInput v-model="time" label="Time" type="number" name="time" value="100" placeholder="Time" />
+        <FormSelect v-model="unit" label="Unit" name="unit" placeholder="Select an option">
+          <option value="ms">ms</option>
+          <option value="s">s</option>
         </FormSelect>
-      </div>
-      <div class="flex gap-4">
-      <FormInput v-model="time" label="Time" type="number" name="time" value="100" placeholder="Time" />
-      <FormSelect v-model="unit" label="Unit" name="unit" placeholder="Select an option">
-        <option value="ms">ms</option>
-        <option value="s">s</option>
-      </FormSelect>
-      </div>
+        </div>
       <FormInput v-model="className" label="Classes" type="text" name="classes" placeholder="Classes" />
     </ExampleInputs>
+
     <ExampleResult>
       <h1 :key="animationKey" v-html="animated" class="text-balance text-center font-bold leading-[1.25em] text-4xl text-gray-900 dark:text-white"></h1>
     </ExampleResult>
   </Example>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue';
+import { ref, computed, watch } from 'vue'
 
-const value = ref('Zippy little utils for your JavaScript projects.');
-const splitBy = ref('word');
-const time = ref(100);
-const unit = ref('ms');
-const className = ref('animate-fade-in-up');
-const animationKey = ref(0);
+const value = ref('Zippy little utils for your JavaScript projects.')
+const splitBy = ref('word')
+const time = ref(100)
+const unit = ref('ms')
+const className = ref('animate-fade-in-up')
+const animationKey = ref(0)
 
 const animated = computed(() => {
-  return animateText(value.value, { splitBy: splitBy.value, time: time.value, unit: unit.value, class: className.value });
-});
+  return animateText(value.value, { splitBy: splitBy.value, time: time.value, unit: unit.value, class: className.value })
+})
 
 watch([value, splitBy, time, unit, className], () => {
-  animationKey.value += 1;
-});
+  animationKey.value += 1
+})
 </script>

src/animations.ts

@@ -14,14 +14,13 @@ export function animateText(text: string, options: { splitBy?: 'word' | 'charact
 
   const result = elements.map((element, index) => {
     const delay = `${index * time}${unit}`
-    const spanStyle = 'display: inline-block; position: relative;'
     const translateStyle = `position: absolute; top: 0; left: 0; animation-delay: ${delay};`
 
     if (element === ' ' && splitBy === 'character') {
       return '<span class="space" style="white-space: pre;"> </span>'
     } else {
-      return `<span class="relative overflow-clip" style="${spanStyle}">
-                <span class="ghost" style="visibility: hidden;">${element}</span>
+      return `<span style="display: inline-block; position: relative; overflow: clip;">
+                <span class="ghost" style="visibility: hidden;" aria-hidden="true">${element}</span>
                 <span class="translate ${cssClass}" style="${translateStyle}">${element}</span>
               </span>`
     }