Code formatting with Prettier

Author: adamdehaven

.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace=true
+indent_style=space
+indent_size=2

.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto eol=lf

.prettierignore

@@ -0,0 +1,28 @@
+# Dist
+dist/
+
+# node modules
+node_modules
+package.json
+package-lock.json
+
+# MacOS desktop services store
+.DS_Store
+
+# Log files
+*.log
+
+# Map files
+*.map
+
+# Editors
+.vscode
+
+# VuePress temp directory
+.temp
+
+# Source Control
+.github
+
+# Secure
+.env

.prettierrc

@@ -0,0 +1,16 @@
+{
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "endOfLine": "lf",
+  "htmlWhitespaceSensitivity": "css",
+  "jsxBracketSameLine": true,
+  "jsxSingleQuote": true,
+  "printWidth": 120,
+  "quoteProps": "consistent",
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "useTabs": false,
+  "vueIndentScriptAndStyle": true
+}

CHANGELOG.md

@@ -1,3 +1,9 @@
+## [Version 1.2.1](https://github.com/adamdehaven/vue-custom-tooltip/releases/tag/v1.2.1) (2020-10-30)
+
+### Misc.
+
+- Added Prettier; no changes to functionality or configuration.
+
 ## [Version 1.2.0](https://github.com/adamdehaven/vue-custom-tooltip/releases/tag/v1.2.0) (2020-09-25)
 
 ### Fixes
@@ -31,4 +37,4 @@
 
 ## [Version 1.0.0](https://github.com/adamdehaven/vue-custom-tooltip/releases/tag/v1.0.0) (2020-08-20)
 
-### Initial Release :tada:
+### Initial Release :tada:

README.md

@@ -6,7 +6,7 @@ A customizable, reusable, and reactive tooltip component for Vue (and VuePress)
 
 ## Installation
 
-``` sh
+```sh
 # With npm
 npm install @adamdehaven/vue-custom-tooltip
 
@@ -18,7 +18,7 @@ yarn add @adamdehaven/vue-custom-tooltip
 
 It is recommended to install the plugin in your Vue project's entry file. For projects created with [`@vue/cli`](https://cli.vuejs.org/), this is likely your `main.js` file where you are already importing `Vue`.
 
-``` js
+```js
 // main.js (or your Vue entry file)
 
 // Import Vue... you're probably already doing this
@@ -37,11 +37,11 @@ Vue.use(VueCustomTooltip)
 
 // 2. Install with custom options (defaults shown)
 Vue.use(VueCustomTooltip, {
-    name: 'VueCustomTooltip',
-    color: '#fff',
-    background: '#000',
-    borderRadius: 12,
-    fontWeight: 400,
+  name: 'VueCustomTooltip',
+  color: '#fff',
+  background: '#000',
+  borderRadius: 12,
+  fontWeight: 400,
 })
 ```
 
@@ -53,7 +53,7 @@ Vue.use(VueCustomTooltip, {
 
 For [VuePress](https://vuepress.vuejs.org/) projects, the `theme/enhanceApp.js` is a good location to initialize plugins.
 
-``` js
+```js
 // theme/enhanceApp.js
 
 // Import Vue... you're probably already doing this
@@ -63,51 +63,51 @@ import Vue from 'vue'
 import VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'
 
 export default ({
-    Vue, // the version of Vue being used in the VuePress app
-    options, // the options for the root Vue instance
-    router, // the router instance for the app
-    siteData, // site metadata
-    isServer, // is this enhancement applied in server-rendering or client
+  Vue, // the version of Vue being used in the VuePress app
+  options, // the options for the root Vue instance
+  router, // the router instance for the app
+  siteData, // site metadata
+  isServer, // is this enhancement applied in server-rendering or client
 }) => {
-    // ...apply enhancements to the app
+  // ...apply enhancements to the app
 
-    // Install the plugin using ONE of the options below:
-    // --------------------------------------------------
+  // Install the plugin using ONE of the options below:
+  // --------------------------------------------------
 
-    // 1. Install with default options
-    Vue.use(VueCustomTooltip)
+  // 1. Install with default options
+  Vue.use(VueCustomTooltip)
 
-    // ===== OR  =====
+  // ===== OR  =====
 
-    // 2. Install with custom options (defaults shown)
-    Vue.use(VueCustomTooltip, {
-        name: 'VueCustomTooltip',
-        color: '#fff',
-        background: '#000',
-        borderRadius: 12,
-        fontWeight: 400,
-    })
+  // 2. Install with custom options (defaults shown)
+  Vue.use(VueCustomTooltip, {
+    name: 'VueCustomTooltip',
+    color: '#fff',
+    background: '#000',
+    borderRadius: 12,
+    fontWeight: 400,
+  })
 }
 ```
 
 ### In-Component Install
 
 Alternatively, you may install the component directly within a single file in your project; however, you will not be able to customize the `Vue.use()` options.
 
-``` html
+```html
 <!-- Single file component -->
 
 <script>
-// Import the tooltip component (no options available)
-import VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'
+  // Import the tooltip component (no options available)
+  import VueCustomTooltip from '@adamdehaven/vue-custom-tooltip'
 
-// .vue file default export
-export default {
+  // .vue file default export
+  export default {
     // Register the component
     components: {
-        VueCustomTooltip,
+      VueCustomTooltip,
     },
-}
+  }
 </script>
 ```
 
@@ -119,7 +119,7 @@ Import the tooltip component after importing Vue in your file after importing Vu
 
 Installing via the CDN requires using the kebob-case component name.
 
-``` html
+```html
 <!-- Import Vue -->
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
 <!-- Import tooltip component -->
@@ -135,7 +135,7 @@ Download `dist/vue-custom-tooltip.min.js` and include it in your file after impo
 
 Installing manually requires using the kebob-case component name.
 
-``` html
+```html
 <!-- Import Vue -->
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
 <!-- Import tooltip component -->
@@ -147,25 +147,26 @@ Installing manually requires using the kebob-case component name.
 
 ## Usage
 
-``` html
+```html
 <!-- Basic -->
 What is <VueCustomTooltip label="This is a tooltip">a tooltip</VueCustomTooltip>?
 
 <!-- With Props -->
-What is <VueCustomTooltip label="This is a tooltip" position="is-bottom" abbreviation sticky>a tooltip</VueCustomTooltip>?
+What is
+<VueCustomTooltip label="This is a tooltip" position="is-bottom" abbreviation sticky>a tooltip</VueCustomTooltip>?
 
 <!-- With element(s) -->
 <VueCustomTooltip label="View @adamdehaven on Twitter">
-    <a class="button" href="https://twitter.com/adamdehaven">
-        <span class="icon icon-twitter"></span>
-        <span>Twitter</span>
-    </a>
+  <a class="button" href="https://twitter.com/adamdehaven">
+    <span class="icon icon-twitter"></span>
+    <span>Twitter</span>
+  </a>
 </VueCustomTooltip>
 ```
 
 ## Options
 
-Pass any of the options listed below to `Vue.use(VueCustomTooltip, {...})` to customize the plugin for your project *(not available with [in-component installation](#in-component-install))*.
+Pass any of the options listed below to `Vue.use(VueCustomTooltip, {...})` to customize the plugin for your project _(not available with [in-component installation](#in-component-install))_.
 
 > **A note on options tied to CSS properties**
 >
@@ -178,15 +179,15 @@ Pass any of the options listed below to `Vue.use(VueCustomTooltip, {...})` to cu
 
 Customize the name of the component you will use in your project. **Camel-case names are preferred**, as this allows for camel-case or kebob-case usage within your project.
 
-``` js
+```js
 Vue.use(VueCustomTooltip, {
-    name: 'SuperCoolTooltip', // camel-case preferred
+  name: 'SuperCoolTooltip', // camel-case preferred
 })
 ```
 
-If you registered the name using camel-case, you can reference the tooltip component via camel-case *or* kebob-case:
+If you registered the name using camel-case, you can reference the tooltip component via camel-case _or_ kebob-case:
 
-``` html
+```html
 <!-- Default name (user did not pass the 'name' option) -->
 
 <!-- camel-case -->
@@ -209,9 +210,9 @@ Nice <super-cool-tooltip label="Neat!">tooltip</super-cool-tooltip>!
 
 Customize the color of the text displayed in the tooltip.
 
-``` js
+```js
 Vue.use(VueCustomTooltip, {
-    color: '#c1403d', // 3 or 6 digit HEX color, including a leading hash (#)
+  color: '#c1403d', // 3 or 6 digit HEX color, including a leading hash (#)
 })
 ```
 
@@ -222,9 +223,9 @@ Vue.use(VueCustomTooltip, {
 
 Customize the background color (and the `underlined` text color) of the tooltip.
 
-``` js
+```js
 Vue.use(VueCustomTooltip, {
-    background: '#1b2735', // 3 or 6 digit HEX color, including a leading hash (#)
+  background: '#1b2735', // 3 or 6 digit HEX color, including a leading hash (#)
 })
 ```
 
@@ -235,9 +236,9 @@ Vue.use(VueCustomTooltip, {
 
 Customize the border-radius of the tooltip. Must be an integer.
 
-``` js
+```js
 Vue.use(VueCustomTooltip, {
-    borderRadius: 4,
+  borderRadius: 4,
 })
 ```
 
@@ -248,9 +249,9 @@ Vue.use(VueCustomTooltip, {
 
 Customize the font-weight of the tooltip text. Must be an integer that is a multiple of 100, between 100 - 900.
 
-``` js
+```js
 Vue.use(VueCustomTooltip, {
-    fontWeight: 700,
+  fontWeight: 700,
 })
 ```
 
@@ -260,13 +261,13 @@ In addition to the [Plugin Options](#options) above, you may also pass props to
 
 Props that accept a Boolean value may be passed simply by adding the attribute to the component tag, if a `true` value is desired. See the `sticky` example here:
 
-``` html
+```html
 <VueCustomTooltip label="Tooltip" sticky>text/element</VueCustomTooltip>
 ```
 
 All other props may be passed as normal attributes (if the corresponding value is a String, like the `label` prop, shown above) or with `v-bind` directives, as shown here:
 
-``` html
+```html
 <VueCustomTooltip :label="element.helpText" :sticky="false">text/element</VueCustomTooltip>
 ```
 
@@ -303,7 +304,7 @@ The position of the tooltip in relation to the text/element it is surrounding.
 
 Swaps out the component's standard `<span>` element with a semantically-correct `<abbr>` element, and sets the [`underlined`](#underlined) prop to `true`. This is useful when adding a tooltip to text within a page's content where you want to provide additional context to a word or phrase, or provide a definition of a word or acronym.
 
-``` html
+```html
 VuePress pages are served as an <VueCustomTooltip label="Single Page Application" abbreviation>SPA</VueCustomTooltip>.
 ```
 
@@ -340,9 +341,11 @@ The width of the tooltip, if the [`multiline`](#multiline) prop is set to `true`
 
 Just like any other Vue component, you can add classes or styles directly to the component tag that will be applied to the rendered `<span>` tag (or `<abbr>` tag, if `abbreviation` is set to `true`).
 
-``` html
+```html
 <!-- Tooltip component with custom classes and styles -->
-<VueCustomTooltip class="your-class" :class="{ 'dynamic-class': isDynamic }" :style="{ display: 'inline' }" label="Neat">text</VueCustomTooltip>
+<VueCustomTooltip class="your-class" :class="{ 'dynamic-class': isDynamic }" :style="{ display: 'inline' }" label="Neat"
+  >text</VueCustomTooltip
+>
 ```
 
 This is extremely helpful if you want to extend functionality or tooltip styles within your project, which allows you to tweak things like the display behavior of the tooltip element.