chore: Upgrade Prettier and apply new formatting

README.md

@@ -22,44 +22,47 @@
 Great UX starts with two basic principles - ease of use and simplicity. Selecting a color should be as easy as moving a slider, clicking a checkbox or pressing a key just like other basic form elements behave.
 
 This is a flexible and minimalistic color picker. Developed with mobile devices and keyboard usage in mind. Key features:
-* Small size - 3.3 KB gzipped (JS and CSS combined)
-* Supports touch devices
-* Optimized animations
-* Ease of use
-    * Screen reader support.
-    * <kbd>Tab</kbd> to focus the picker.
-    * <kbd>↑</kbd> or <kbd>→</kbd> arrow key to increase hue. <kbd>PgUp</kbd> to go quicker.
-    * <kbd>↓</kbd> or <kbd>←</kbd> arrow key to decrease hue. <kbd>PgDown</kbd> to go quicker.
-    * <kbd>Enter</kbd> to select a color and close the picker or to open it.
-    * Mouse <kbd>ScrollUp</kbd> to increase and <kbd>ScrollDown</kbd> to decrease hue (Opt-in).
-* Experimental TypeScript support
+
+-   Small size - 3.3 KB gzipped (JS and CSS combined)
+-   Supports touch devices
+-   Optimized animations
+-   Ease of use
+    -   Screen reader support.
+    -   <kbd>Tab</kbd> to focus the picker.
+    -   <kbd>↑</kbd> or <kbd>→</kbd> arrow key to increase hue. <kbd>PgUp</kbd> to go quicker.
+    -   <kbd>↓</kbd> or <kbd>←</kbd> arrow key to decrease hue. <kbd>PgDown</kbd> to go quicker.
+    -   <kbd>Enter</kbd> to select a color and close the picker or to open it.
+    -   Mouse <kbd>ScrollUp</kbd> to increase and <kbd>ScrollDown</kbd> to decrease hue (Opt-in).
+-   Experimental TypeScript support
 
 ## Documentation
 
 You can find the documentation on the [website](https://radial-color-picker.github.io/vue-color-picker/).
 The documentation is divided into several sections:
 
-* [Getting Started](https://radial-color-picker.github.io/vue-color-picker/guide/getting-started.html)
-* [Examples](https://radial-color-picker.github.io/vue-color-picker/examples.html)
-* [Config Reference](https://radial-color-picker.github.io/vue-color-picker/api.html)
-* [First Asked Questions](https://radial-color-picker.github.io/vue-color-picker/guide/faq.html)
+-   [Getting Started](https://radial-color-picker.github.io/vue-color-picker/guide/getting-started.html)
+-   [Examples](https://radial-color-picker.github.io/vue-color-picker/examples.html)
+-   [Config Reference](https://radial-color-picker.github.io/vue-color-picker/api.html)
+-   [First Asked Questions](https://radial-color-picker.github.io/vue-color-picker/guide/faq.html)
 
 ## Ecosystem
 
 The right color picker, but not the framework you're looking for?
-* [Vue][link-vue-color-picker] - you're here!
-* [React][link-react-color-picker]
-* [AngularJs][link-angularjs-color-picker]
-* [Angular][link-angular-color-picker]
+
+-   [Vue][link-vue-color-picker] - you're here!
+-   [React][link-react-color-picker]
+-   [AngularJs][link-angularjs-color-picker]
+-   [Angular][link-angular-color-picker]
 
 ## Demos
 
-* Basic Example - [Codepen](https://codepen.io/rkunev/pen/zjEmwV/)
-* Other Examples in the [docs](https://radial-color-picker.github.io/vue-color-picker/examples.html)
+-   Basic Example - [Codepen](https://codepen.io/rkunev/pen/zjEmwV/)
+-   Other Examples in the [docs](https://radial-color-picker.github.io/vue-color-picker/examples.html)
 
 ## Usage
 
 Color Picker on [npm](https://www.npmjs.com/package/@radial-color-picker/vue-color-picker)
+
 ```bash
 npm install @radial-color-picker/vue-color-picker@next
 ```
@@ -151,9 +154,9 @@ Please see [CONTRIBUTING](.github/CONTRIBUTING.md) and [CODE_OF_CONDUCT](.github
 
 ## Credits
 
-- [Rosen Kanev][link-author]
-- [Dennis Dierkes](https://github.com/deen13)
-- [All Contributors][link-contributors]
+-   [Rosen Kanev][link-author]
+-   [Dennis Dierkes](https://github.com/deen13)
+-   [All Contributors][link-contributors]
 
 This component is based on the great work that was done for the [AngularJs color picker][link-angularjs-color-picker].
 

docs/api.md

@@ -8,72 +8,72 @@ outline: deep
 
 ### hue
 
-* Type: `Number`
-* Default: `0`
+-   Type: `Number`
+-   Default: `0`
 
 A number between `0-359`. Around 0º/360º are reds. 120º is where greens are and 240º are blues.
 
 ### saturation
 
-* Type: `Number`
-* Default: `100`
-* _Optional_
+-   Type: `Number`
+-   Default: `100`
+-   _Optional_
 
 A number between `0-100`. The larger the percentage, the more "colorful" this color is. 0% is completely desaturated (grayscale). 100% is fully saturated (full color).
 
 ### luminosity
 
-* Type: `Number`
-* Default: `50`
-* _Optional_
+-   Type: `Number`
+-   Default: `50`
+-   _Optional_
 
 A number between `0-100`. 0% is completely dark (black). 100% is completely light (white). 50% is average lightness.
 
 ### alpha
 
-* Type: `Number`
-* Default: `1`
-* _Optional_
+-   Type: `Number`
+-   Default: `1`
+-   _Optional_
 
 A number between `0-1`. Opacity/Transparency value. 0 is fully transparent. 1 is fully opaque. 0.5 is 50% transparent.
 
 ### disabled
 
-* Type: `Boolean`
-* Default: `false`
-* _Optional_
+-   Type: `Boolean`
+-   Default: `false`
+-   _Optional_
 
 A boolean to disable UI interactions. When `:disabled="true"` is used the color picker is rendered with a dimmer color to indicate that the field is not available for use.
 
 ### step
 
-* Type: `Number`
-* Default: `1`
-* _Optional_
+-   Type: `Number`
+-   Default: `1`
+-   _Optional_
 
 Amount of degrees to rotate the picker with keyboard and/or wheel.
 
 ### variant
 
-* Type: `String`
-* Default: `collapsible`
-* _Optional_
+-   Type: `String`
+-   Default: `collapsible`
+-   _Optional_
 
 The mode of the picker. By default it will close/open when the color well is clicked. Use `variant="persistent"` to prevent collapsing/closing and to keep the widget always open.
 
 ### initially-collapsed
 
-* Type: `Boolean`
-* Default: `false`
-* _Optional_
+-   Type: `Boolean`
+-   Default: `false`
+-   _Optional_
 
 Hides the palette initially. Using `variant="persistent"` and `:initially-collapsed="true"` at the same time is not supported.
 
 ### mouse-scroll
 
-* Type: `Boolean`
-* Default: `false`
-* _Optional_
+-   Type: `Boolean`
+-   Default: `false`
+-   _Optional_
 
 Use wheel (scroll) event to rotate. By default it's off to keep things simple. Add `:mouse-scroll="true"` to allow the user to change the color by scrolling with mouse/trackpad.
 
@@ -83,9 +83,9 @@ Keep in mind that by turning the _scroll to rotate_ functionality on it may resu
 
 ### aria-label
 
-* Type: `String`
-* Default: `color picker`
-* _Optional_
+-   Type: `String`
+-   Default: `color picker`
+-   _Optional_
 
 Defines a string value that labels the color picker. It provides the user with a recognizable name of the object.
 
@@ -95,9 +95,9 @@ When a user interface is translated into multiple languages, ensure that `aria-l
 
 ### aria-roledescription
 
-* Type: `String`
-* Default: `radial slider`
-* _Optional_
+-   Type: `String`
+-   Default: `radial slider`
+-   _Optional_
 
 Defines a human-readable, author-localized description for the role of the color picker. Users of assistive technologies depend on the presentation of the role name, such as "slider" for an understanding of the purpose of the element and, if it is a widget, how to interact with it.
 
@@ -107,9 +107,9 @@ When a user interface is translated into multiple languages, ensure that `aria-r
 
 ### aria-valuetext
 
-* Type: `String`
-* Default: `'red' | 'yellow' | 'green' | 'cyan' | 'blue' | 'magenta'`
-* _Optional_
+-   Type: `String`
+-   Default: `'red' | 'yellow' | 'green' | 'cyan' | 'blue' | 'magenta'`
+-   _Optional_
 
 Defines the human readable text alternative of the value for a range widget. You can bring your own color-name map if you want (e.g. "dark orange", "amber", "salmon")
 
@@ -119,9 +119,9 @@ Make sure you update the `aria-valuetext` with any color change and as other ari
 
 ### aria-label-color-well
 
-* Type: `String`
-* Default: `color well`
-* _Optional_
+-   Type: `String`
+-   Default: `color well`
+-   _Optional_
 
 Defines a string value that labels the color well (middle selector).
 
@@ -133,26 +133,26 @@ When a user interface is translated into multiple languages, ensure that `aria-l
 
 ### input
 
-* Type: `Function`
-* Params: `hue` (`Number`)
+-   Type: `Function`
+-   Params: `hue` (`Number`)
 
 Emitted every time the color updates. This could be a touchstart/mousedown event, when rotating the knob, keyboard shortcuts like <kbd>↑</kbd>, and scrolling if enabled. It's also the glue between the color picker component and the outside world. Use this to update the `hue` prop.
 
 <<< @/.vitepress/components/examples/Basic.vue{2,15-17}
 
 ### change
 
-* Type: `Function`
-* Params: `hue` (`Number`)
-* _Optional_
+-   Type: `Function`
+-   Params: `hue` (`Number`)
+-   _Optional_
 
 Emitted every time the color changes, but unlike `@input` this is not emitted while rotating the knob. `@change` is a less noisy version of `@input` which is useful if you want to react to knob rotation stop for example or to use the `<color-picker>` as an uncontrolled component.
 
 ### select
 
-* Type: `Function`
-* Params: `hue` (`Number`)
-* _Optional_
+-   Type: `Function`
+-   Params: `hue` (`Number`)
+-   _Optional_
 
 Emitted when the user dismisses the color picker (i.e. interacting with the middle color well). Can be used as a secondary confirmation step from the user that this is the color value to be saved for example.
 
@@ -178,4 +178,4 @@ Emitted when the user dismisses the color picker (i.e. interacting with the midd
         },
     };
 </script>
-```
+```

docs/examples.md

@@ -50,4 +50,4 @@ The color picker already has built-in screen reader support, but if you wish to
 .rcp {
     margin: 32px auto;
 }
-</style>
+</style>

docs/guide/faq.md

@@ -10,12 +10,10 @@ The bad news: As of this writing Nuxt v3 has been released, but it is still in B
 
 The **last two versions of major browsers** (Chrome, Safari, Firefox, Edge) are supported though it will probably work in other browsers, webviews and runtimes as well.
 
-
 ## How to select other shades of the solid colors?
 
 The saturation, luminosity and alpha props are **display-only** values - you can only change the hue through the picker. We suggest to add a custom slider for saturation and luminosity or use `<input type="range">`.
 
-
 ## Why HSL?
 
 Regular HEX color format is limitting (no alpha channel) and browser support for HSLA is great. It's also sometimes more intuitive to work with HSLA notation since hue and angles map 1:1. Primary red color is at 0º, primary green is at 120º and gold for example sits somewhere in between. When a user rotates the wheel the hue is updated respectively.

docs/guide/getting-started.md

@@ -3,6 +3,7 @@
 ## Using NPM
 
 Color Picker on [npm](https://www.npmjs.com/package/@radial-color-picker/vue-color-picker)
+
 ```bash
 npm install @radial-color-picker/vue-color-picker
 ```
@@ -44,7 +45,6 @@ And in your app:
 
 Depending on your build tool of choice you may have to setup the appropriate loaders or plugins. Checkout the [examples](https://github.com/radial-color-picker/vue-color-picker/tree/master/examples) folder. There's an example with Vite and CSS. If you're using tools such as Vite, Vue CLI, or Poi you don't have to do anything else - these tools come preconfigured and support CSS import out of the box.
 
-
 ## Using the component globally
 
 If you don't want to register the component everywhere it's used you can instead register it globally:
@@ -71,7 +71,10 @@ You can also use the minified sources directly:
 <head>
     <script src="https://unpkg.com/vue@3.2.20/dist/vue.global.prod.js"></script>
     <script src="https://unpkg.com/@radial-color-picker/vue-color-picker/dist/vue-color-picker.umd.min.js"></script>
-    <link href="https://unpkg.com/@radial-color-picker/vue-color-picker/dist/vue-color-picker.min.css" rel="stylesheet">
+    <link
+        href="https://unpkg.com/@radial-color-picker/vue-color-picker/dist/vue-color-picker.min.css"
+        rel="stylesheet"
+    />
 </head>
 <body>
     <div id="app">

docs/guide/index.md

@@ -6,22 +6,23 @@ This is a flexible and minimalistic color picker. Developed with mobile devices
 
 ## Features
 
-* Small size - 3.3 KB gzipped (JS and CSS combined)
-* Supports touch devices
-* Optimized animations
-* Ease of use
-    * Screen reader support.
-    * <kbd>Tab</kbd> to focus the picker.
-    * <kbd>↑</kbd> or <kbd>→</kbd> arrow key to increase hue. <kbd>PgUp</kbd> to go quicker.
-    * <kbd>↓</kbd> or <kbd>←</kbd> arrow key to decrease hue. <kbd>PgDown</kbd> to go quicker.
-    * <kbd>Enter</kbd> to select a color and close the picker or to open it.
-    * Mouse <kbd>ScrollUp</kbd> to increase and <kbd>ScrollDown</kbd> to decrease hue (Opt-in).
-* Experimental TypeScript support
+-   Small size - 3.3 KB gzipped (JS and CSS combined)
+-   Supports touch devices
+-   Optimized animations
+-   Ease of use
+    -   Screen reader support.
+    -   <kbd>Tab</kbd> to focus the picker.
+    -   <kbd>↑</kbd> or <kbd>→</kbd> arrow key to increase hue. <kbd>PgUp</kbd> to go quicker.
+    -   <kbd>↓</kbd> or <kbd>←</kbd> arrow key to decrease hue. <kbd>PgDown</kbd> to go quicker.
+    -   <kbd>Enter</kbd> to select a color and close the picker or to open it.
+    -   Mouse <kbd>ScrollUp</kbd> to increase and <kbd>ScrollDown</kbd> to decrease hue (Opt-in).
+-   Experimental TypeScript support
 
 ## Ecosystem
 
 The right color picker, but not the framework you're looking for?
-* [Vue](https://github.com/radial-color-picker/vue-color-picker) - you're here!
-* [React](https://github.com/radial-color-picker/react-color-picker)
-* [AngularJs](https://github.com/talamaska/angular-radial-color-picker)
-* [Angular](https://github.com/radial-color-picker/angular-color-picker)
+
+-   [Vue](https://github.com/radial-color-picker/vue-color-picker) - you're here!
+-   [React](https://github.com/radial-color-picker/react-color-picker)
+-   [AngularJs](https://github.com/talamaska/angular-radial-color-picker)
+-   [Angular](https://github.com/radial-color-picker/angular-color-picker)

docs/index.md

@@ -20,4 +20,4 @@ features:
       details: Developed with mobile devices and keyboard usage in mind. Screen reader support.
     - title: Performant
       details: Highly tuned touch interactions to stay above 30fps on lower end mobile devices.
----
+---

examples/simple/README.md

@@ -3,6 +3,7 @@
 This is a basic example of how to use `vue-color-picker` with the UMD build (useful for quick prototyping in the browser for example).
 
 ## How to use
+
 Download the example [or clone the whole project](https://github.com/radial-color-picker/vue-color-picker.git):
 
 ```bash

examples/simple/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
     <head>
         <meta charset="utf-8" />
@@ -7,7 +7,10 @@
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <script src="https://unpkg.com/vue@3.1.5/dist/vue.global.prod.js"></script>
         <script src="https://unpkg.com/@radial-color-picker/vue-color-picker/dist/vue-color-picker.umd.min.js"></script>
-        <link rel="stylesheet" href="https://unpkg.com/@radial-color-picker/vue-color-picker/dist/vue-color-picker.min.css" />
+        <link
+            rel="stylesheet"
+            href="https://unpkg.com/@radial-color-picker/vue-color-picker/dist/vue-color-picker.min.css"
+        />
         <style>
             #app {
                 font-family: 'Avenir', Helvetica, Arial, sans-serif;