Merge pull request #13 from JamesManningR/feature/notYetTyped

Added remaining text computed property

README.md

@@ -155,6 +155,10 @@ interface UseTypewriterReturns {
    * The current string being typed out.
    */
   text: Computed<string>;
+  /**
+   * The remaining text not yet typed out.
+   */
+  remainingText: Computed<string>;
   /**
    * The array of strings to be typed out.
    * @note This is reactive and can be changed at anytime, however,

demo/src/App.vue

@@ -30,6 +30,7 @@ const exampleReplacementStrings = [
 
 const {
   text,
+  remainingText,
   currentAction,
   currentString,
   stringIndex,
@@ -136,6 +137,8 @@ const {
     <details>
       <summary>Debug</summary>
       <AppDebug
+        :text="text"
+        :remaining-text="remainingText"
         :current-string="currentString"
         :current-action="currentAction"
         :typed-length="typedLength"

demo/src/components/app/AppDebug.vue

@@ -2,6 +2,8 @@
 import { TypewriterStates } from '../../../../src/useTypewriter'
 
 type Props = {
+  text: string;
+  remainingText: string;
   currentAction: TypewriterStates;
   currentString: string;
   strings: string[];
@@ -33,6 +35,8 @@ defineProps<Props>()
       dynamically.
     </blockquote>
 
+    <p>Computed properties are marked with a *</p>
+
     <div class="vars">
       <section>
         <h3>Strings in the list</h3>
@@ -48,7 +52,13 @@ defineProps<Props>()
                 currentAction === TypewriterStates.Deleting,
             }"
           >
-            {{ string }}
+            <template v-if="index === stringIndex">
+              <span class="typed">{{ text }}</span>
+              <span class="not-typed">{{ currentString.slice(typedLength) }}</span>
+            </template>
+            <span v-else>
+              {{ string }}
+            </span>
           </li>
         </ul>
       </section>
@@ -57,7 +67,15 @@ defineProps<Props>()
         <h3>State</h3>
         <table>
           <tr>
-            <td>Current string(*)</td>
+            <td>Text *</td>
+            <td>{{ text }}</td>
+          </tr>
+          <tr>
+            <td>Remaining Text *</td>
+            <td>{{ remainingText }}</td>
+          </tr>
+          <tr>
+            <td>Current string *</td>
             <td>{{ currentString }}</td>
           </tr>
           <tr>
@@ -81,11 +99,11 @@ defineProps<Props>()
             <td>{{ isPaused }}</td>
           </tr>
           <tr>
-            <td>Is at last letter</td>
+            <td>Is at last letter *</td>
             <td>{{ isAtLastLetter }}</td>
           </tr>
           <tr>
-            <td>Is last iteration</td>
+            <td>Is last iteration *</td>
             <td>{{ isLastIteration }}</td>
           </tr>
           <tr>
@@ -143,10 +161,14 @@ defineProps<Props>()
 }
 
 .active {
-  color: green;
+  color: #5f5;
+}
+
+.not-typed {
+  opacity: .3;
 }
 
 .deleting {
-  color: red;
+  color: #f45;
 }
 </style>

src/useTypewriter.ts

@@ -144,7 +144,7 @@ export function useTypewriter (
       )
 
       reset()
-      return
+      return ''
     }
     if (string.length < typedLength.value) {
       // eslint-disable-next-line no-console
@@ -156,6 +156,11 @@ export function useTypewriter (
     return string.slice(0, typedLength.value)
   })
 
+  /**
+   * The text that has not yet been typed
+   */
+  const remainingText = computed(() => currentString.value.slice(typedLength.value))
+
   /**
    * Types the next letter, or sets up the waiting state if at the end of the word.
    */
@@ -432,6 +437,7 @@ export function useTypewriter (
   // expose managed state as return value
   return {
     text,
+    remainingText,
     strings,
     currentString,
     currentAction,