@dice-roller/vue 0.1.9 → 1.0.0

package/LICENSE

@@ -1,6 +1,7 @@
 MIT License
 
-Copyright (c) 2020 Lee Langley-Rees
+Copyright (c) 2020 - 2021 GreenImp Limited <greenimp.co.uk>
+Copyright (c) 2021 - present GreenImp Media Limited <greenimp.co.uk>
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,32 +1,221 @@
 <p align="center">
-    <img src="http://greenimp.github.io/rpg-dice-roller/dice-roller-logo.png" alt="RPG Dice Roller" style="max-width: 100%;" width="200"/>
+    <img src="https://dice-roller.github.io/documentation/dice-roller-logo.png" alt="RPG Dice Roller" style="max-width: 100%;" width="200"/>
 </p>
 
-# RPG Dice Roller Vue Component
+# RPG Dice Roller Vue Components
 
 Vue.js component which allows rolling dice.
 
-It is built upon this [RPG dice roller](https://github.com/GreenImp/rpg-dice-roller), and is used in the [documentation](https://greenimp.github.io/rpg-dice-roller).
+It is built upon this [RPG dice roller](https://github.com/dice-roller/rpg-dice-roller), and is used in the [documentation](https://dice-roller.github.io/documentation/).
 
-## Project setup
-```
+## Get started
+
+### Install
+
+```sh
 npm install @dice-roller/vue
 ```
 
-### Compiles and hot-reloads for development
+### Components
+
+### Tailwind
+
+If you're using [Tailwind](https://tailwindcss.com/) v3, you can use the pre-styled Tailwind component:
+
+```vue
+<script>
+import { DiceRollerTailwind } from '@dice-roller/vue'
+</script>
+
+<template>
+    <DiceRollerTailwind />
+</template>
 ```
-npm run serve
+
+#### Component reference
+
+##### Properties
+
+| Property    | Type     | Default  | Description                             |
+| ----------- | -------- | -------- | --------------------------------------- |
+| `btn-label` | `String` | `"Roll"` | Text content to place in the button     |
+| `id`        | `String` |          | The `id` attribute of the component     |
+| `notation`  | `String` |          | Notation string to set on the component |
+
+##### Slots
+
+| Name     | Description                    |
+| -------- | ------------------------------ |
+| `button` | Content to place in the button |
+
+##### Events
+
+| Event | Arguments | Description |
+| - | - | - |
+| `notation:change` | `notation` - Current value of the notation input | Change event triggered by the user interaction. Emitted after the notation is changed |
+| `roll` | `notation` - Value of the rolled notation.<br>`value` - The response of the roll | Emitted after a roll is made |
+
+### Bootstrap
+
+If you're using [Bootstrap](https://getbootstrap.com/) v5, you can use the Bootstrap component:
+
+```vue
+<script>
+import { DiceRollerBootstrap } from '@dice-roller/vue'
+</script>
+
+<template>
+    <DiceRollerBootstrap />
+</template>
 ```
 
-### Compiles and minifies for production
+The Bootstrap component is wrapped in a [card](https://getbootstrap.com/docs/5.2/components/card/), and uses other bootstrap components. It can be easily styled.
+
+#### Component reference
+
+##### Properties
+
+| Property                | Type     | Default     | Description                                                  |
+| ----------------------- | -------- | ----------- | ------------------------------------------------------------ |
+| `bg-variant`            | `String` |             | Applies one of the Bootstrap theme colour variants to the background |
+| `border-variant`        | `String` |             | Applies one of the Bootstrap theme colour variants to the border |
+| `btn-label`             | `String` | `"Roll"`    | Text content to place in the button                          |
+| `btn-variant`           | `String` | `"primary"` | Applies one of the Bootstrap theme colour variants to the button |
+| `id`                    | `String` |             | The `id` attribute of the component                          |
+| `notation`              | `String` |             | Notation string to set on the component                      |
+| `output-bg-variant`     | `String` |             | Applies one of the Bootstrap theme colour variants to the background of the output container |
+| `output-border-variant` | `String` |             | Applies one of the Bootstrap theme colour variants to the border of the output container |
+| `output-text-variant`   | `String` |             | Applies one of the Bootstrap theme colour variants to the text of the output container |
+| `output-variant`        | `String` |             | Applies one of the Bootstrap theme colour variants to the output container. This defines the background colour and contrasting text. See Bootstrap [Color & background](https://getbootstrap.com/docs/5.2/helpers/color-background/). |
+| `text-variant`          | `String` |             | Applies one of the Bootstrap theme colour variants to the text |
+| `variant`               | `String` |             | Applies one of the Bootstrap theme colour variants to the component. This defines the background colour and contrasting text. See Bootstrap [Color & background](https://getbootstrap.com/docs/5.2/helpers/color-background/). |
+
+##### Slots
+
+| Name     | Description                    |
+| -------- | ------------------------------ |
+| `button` | Content to place in the button |
+
+##### Events
+
+| Event | Arguments | Description |
+| - | - | - |
+| `notation:change` | `notation` - Current value of the notation input | Change event triggered by the user interaction. Emitted after the notation is changed |
+| `roll` | `notation` - Value of the rolled notation.<br>`value` - The response of the roll | Emitted after a roll is made |
+
+### Plain HTML
+
+There's also a basic component, which provides HTML markup, without any styling. It applies a class to the elements, so you can style it with your own CSS.
+
+```vue
+<script>
+import { DiceRoller } from '@dice-roller/vue'
+</script>
+
+<template>
+    <DiceRoller />
+</template>
 ```
-npm run build
+
+#### Component reference
+
+##### Properties
+
+| Property     | Type     | Default         | Description                             |
+| ------------ | -------- | --------------- | --------------------------------------- |
+| `btn-label`  | `String` | `"Roll"`        | Text content to place in the button     |
+| `class-name` | `String` | `"dice-roller"` | The class name of the component         |
+| `id`         | `String` |                 | The `id` attribute of the component     |
+| `notation`   | `String` |                 | Notation string to set on the component |
+
+##### Slots
+
+| Name     | Description                    |
+| -------- | ------------------------------ |
+| `button` | Content to place in the button |
+
+##### Events
+
+| Event | Arguments | Description |
+| - | - | - |
+| `notation:change` | `notation` - Current value of the notation input | Change event triggered by the user interaction. Emitted after the notation is changed |
+| `roll` | `notation` - Value of the rolled notation.<br>`value` - The response of the roll | Emitted after a roll is made |
+
+### Renderless component
+
+If you want to write your own HTML markup, you can use the renderless component instead. This provides the logic and functionality, without any markup, so you can build your own.
+
+```vue
+<script>
+import { DiceRollerRenderless } from '@dice-roller/vue';
+</script>
+
+<template>
+    <DiceRollerRenderless v-slot="{ currentNotation, error, output, roll, on, bind }">
+        <div>
+            <div v-if="error">{{ error }}</div>
+
+            <input type="text" v-on="on" v-bind="bind" />
+    
+            <button type="button" @click="roll">Roll</button>
+
+            <div>
+                <strong>Notation:</strong> <em>{{ currentNotation }}</em>
+            </div>
+
+            <output v-if="output">{{ output }}</output>
+          </div>
+    </DiceRollerRenderless>
+</template>
 ```
 
-### Lints and fixes files
+#### Component reference
+
+##### Properties
+
+| Property   | Type     | Default | Description                             |
+| ---------- | -------- | ------- | --------------------------------------- |
+| `notation` | `String` |         | Notation string to set on the component |
+
+##### Slots
+
+| Name      | Description              |
+| --------- | ------------------------ |
+| `default` | Content of the component |
+
+##### Events
+
+| Event | Arguments | Description |
+| - | - | - |
+| `notation:change` | `notation` - Current value of the notation input | Change event triggered by the user interaction. Emitted after the notation is changed |
+| `roll` | `notation` - Value of the rolled notation.<br>`value` - The response of the roll | Emitted after a roll is made |
+
+## Development
+
+### Customise configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+### Project Setup
+
+```sh
+npm install @dice-roller/vue
 ```
-npm run lint
+
+#### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+#### Compile and Minify for Production
+
+```sh
+npm run build
 ```
 
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+#### Lint with [ESLint](https://eslint.org/)
+
+```sh
+npm run lint
+```