Skip to content

Commit

Permalink
Merge pull request #16 from Nathanjms/small-improvements
Browse files Browse the repository at this point in the history 
New readme and demo improvements
  • Loading branch information
@Nathanjms
Nathanjms authored Jun 27, 2023
2 parents 0a857d7 + 5ea6221 commit 56f37b8
Show file tree
Hide file tree
Showing 4 changed files with 52 additions and 34 deletions.
80 changes: 49 additions & 31 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,30 @@
A simple auto-typer, written in Vue3.

<p align="center">
<img src="https://img.shields.io/npm/v/auto-typer-vue3" />
<img src="https://img.shields.io/npm/dt/auto-typer-vue3" />
<a href="https://www.npmjs.com/package/auto-typer-vue3"><img src="https://img.shields.io/npm/v/auto-typer-vue3" alt="Version Number" /></a>
<a href="https://www.npmjs.com/package/auto-typer-vue3"><img src="https://img.shields.io/npm/dt/auto-typer-vue3" alt="Total Downloads" /></a>
</p>

## Screenshot(s)
![Screen Recording 2022-08-28 at 10 40 25](https://user-images.githubusercontent.com/64075030/187067804-a4d0a055-58a9-4d71-b0bd-d100591ba83a.gif)
<p align="center">
<img src="https://raw.githubusercontent.com/Nathanjms/auto-typer-vue3/main/new-demo.gif" src="Demo of the Auto-Typer" />
</p>

## Contents

- [Auto Typer - Vue3](#auto-typer---vue3)
- [Screenshot(s)](#screenshots)
- [Contents](#contents)
- [Installation](#installation)
- [Usage/Example](#usageexample)
- [Basic Example](#basic-example)
- [Type out word, then stop](#type-out-word-then-stop)
- [Props](#props)
- [Emits](#emits)
- [Styling Customisation: changing the cursor styling](#styling-customisation-changing-the-cursor-styling)
- [Example: Changing the cursor colour/opacity](#example-changing-the-cursor-colouropacity)
- [Contributing](#contributing)
- [Future Plans](#future-plans)

## Installation

Expand All @@ -20,26 +38,6 @@ npm install auto-typer-vue3

Then import the module and css file into your Vue component (see usage/example below).

## Props

| Prop | Type | Default | Description | Validation |
| :---------------------- | :----------------------- | :------ | :--------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------- |
| `componentTag` | `string` | 'span' | The HTML tag that the element will be. | Currently accepts any of the following: `span`, `p`, `a`, `h*` (where * is any number). |
| `beginningWord` | `string` | `''` | A string prepended to every text item. | N/A. |
| `writtenBeginningWord` | `string` | `''` | A word that will be typed when the auto-typer begins, and then will stay there. | N/A. |
| `text` | `string \|array<string>` | `''` | Either a string to be auto-typed, or an array of strings to be auto-typed. | |
| `startDelay` | `number` | `500` | Time (ms) before the auto-typer begins. | Number >= 0. |
| `betweenWordDelay` | `number` | `500` | Time (ms) before the next `text` string is typed. | Number >= 0. |
| `typingDelay` | `number` | `150` | Time (ms) between each character is typed (lower means faster typing). | Number >= 0. |
| `deletingDelay` | `number` | `100` | Time (ms) between each character is deleted after the text has been typed. | Number >= 0. |
| `waitBeforeDeleteDelay` | `number` | `500` | Time (ms) after the text has been typed before deleting it begins. | Number >= 0. |
| `startByDefault` | `bool` | `true` | Whether to start the auto-typer by default. If set to false, the `begin()` method must be called manually. | Number >= 0. |
| `repeat` | `bool` | `true` | Whether to repeat the text once all of them have been typed. | N/A. |
| `removeAfterRepeat` | `bool` | `false` | If repeat is false, whether to remove the final word. | N/A. |

## Emits

- `finished` - Emitted once the auto-typer has finished typing (only applicable if `repeat` is false).
## Usage/Example

### Basic Example
Expand Down Expand Up @@ -86,11 +84,32 @@ import { AutoTyperVue } from "auto-typer-vue";
</style>
```

### Changing the cursor styling
## Props

| Prop | Type | Default | Description | Validation |
| :---------------------- | :----------------------- | :------ | :--------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------- |
| `componentTag` | `string` | 'span' | The HTML tag that the element will be. | Currently accepts any of the following: `span`, `p`, `a`, `h*` (where * is any number). |
| `beginningWord` | `string` | `''` | A string prepended to every text item. | N/A. |
| `writtenBeginningWord` | `string` | `''` | A word that will be typed when the auto-typer begins, and then will stay there. | N/A. |
| `text` | `string \|array<string>` | `''` | Either a string to be auto-typed, or an array of strings to be auto-typed. | |
| `startDelay` | `number` | `500` | Time (ms) before the auto-typer begins. | Number >= 0. |
| `betweenWordDelay` | `number` | `500` | Time (ms) before the next `text` string is typed. | Number >= 0. |
| `typingDelay` | `number` | `150` | Time (ms) between each character is typed (lower means faster typing). | Number >= 0. |
| `deletingDelay` | `number` | `100` | Time (ms) between each character is deleted after the text has been typed. | Number >= 0. |
| `waitBeforeDeleteDelay` | `number` | `500` | Time (ms) after the text has been typed before deleting it begins. | Number >= 0. |
| `startByDefault` | `bool` | `true` | Whether to start the auto-typer by default. If set to false, the `begin()` method must be called manually. | Number >= 0. |
| `repeat` | `bool` | `true` | Whether to repeat the text once all of them have been typed. | N/A. |
| `removeAfterRepeat` | `bool` | `false` | If repeat is false, whether to remove the final word. | N/A. |

## Emits

- `finished` - Emitted once the auto-typer has finished typing (only applicable if `repeat` is false).

## Styling Customisation: changing the cursor styling

The cursor styling can be completely overridden, or certain parts can be altered by adding additional styles below the import of `style.css`, targetting the element `.auto-typer-vue::after`.

#### Example: Changing the cursor colour/opacity
### Example: Changing the cursor colour/opacity

Note: You may need to use `!important` to override the default styling if you use this approach.

Expand Down Expand Up @@ -130,7 +149,7 @@ import { AutoTyperVue } from "auto-typer-vue";
</style>
```

## Development
## Contributing

There is a folder `playground` inside this repository which can be used as a basis for development. Clone the repo and run:

Expand All @@ -151,8 +170,7 @@ This will run a dev server with the packaged version of `auto-typer-vue3`, inste

## Future Plans

- ~Add custom styling options the the cursor.~
- Can be done with the style area already (example has been added to README)
- Add a variable to allow a certain number of repeats, instead of just a boolean.
- Handle whether to leave the final word on the screen once repeating has stopped.
- ...any other suggestions will be considered, please leave an issue if you have any feature requests!
- [x] Add custom styling options the the cursor.
- [x] Handle whether to leave the final word on the screen once repeating has stopped.
- [ ] Add a variable to allow a certain number of repeats, instead of just a boolean.
- [ ] ...any other suggestions will be considered, please leave an issue if you have any feature requests!
Binary file added new-demo.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "auto-typer-vue3",
"version": "1.2.0",
"version": "1.2.1",
"description": "A simple Autotyper for Vue 3, with some customisation options.",
"keywords": [
"vue3",
Expand Down

0 comments on commit 56f37b8

Please sign in to comment.