Fix formatting with prettier

JosephusPaye · Jan 20, 2023 · 2523c00 · 2523c00
1 parent 6d0e98d
commit 2523c00
Show file tree

Hide file tree

Showing 62 changed files with 10,651 additions and 10,800 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,10 +5,11 @@
 If you import Keen UI components from the source folder (e.g. `import UiButton from 'keen-ui/src/UiButton.vue`), this release might break your project due to the switch from `node-sass` to `sass`. There are a few options to fix this:
 
 1. If you don't need [Sass customisation](./Customization.md#sass-customization), import from the compiled components instead of the source components. The compiled components come with plain CSS instead of Sass. Here's an example of changing from a source component import to a compiled component import:
-    ```diff
+
+   ```diff
    -import UiButton from 'keen-ui/src/UiButton.vue'
    +import { UiButton } from 'keen-ui'
-    ```
+   ```
 
 2. Upgrade to `sass` in your project, and replace all usage of `/` for division in your Sass files with the new [`math.div()` function](https://sass-lang.com/documentation/breaking-changes/slash-div).
 
@@ -174,11 +175,11 @@ There are breaking changes in this release. Read through and update your usage w
 - Make focus ring transition to fill the button. Previously, it stopped halfway. Fixes [#205](https://github.com/JosephusPaye/Keen-UI/issues/205).
 - Remove UiProgressCircular from the DOM when `loading` is false. Previously, it was hidden with `display: none`.
 - Remove pointer cursor, to match default HTML buttons. If you want the hand pointer on buttons by default, add:
-    ```css
-    .ui-button {
-        cursor: pointer;
-    }
-    ```
+  ```css
+  .ui-button {
+    cursor: pointer;
+  }
+  ```
 - For secondary buttons, use button color as background for hover and focus.
 - Add new prop `href`. Setting this prop will render an anchor tag.
 
@@ -234,17 +235,17 @@ There are breaking changes in this release. Read through and update your usage w
 ### UiPopover
 
 - **Breaking**: Switch positioning library to Tippy.js, which uses Popper.js.
-- **Breaking**: `trigger` prop is now a DOM Element, VueComponent instance,  or selector string. If no trigger is provided or the selector doesn't match any element, the popover's immediate parent element is used as the trigger.
-    ```html
-    <!-- Instead of: ref + trigger -->
-    <button ref="button">My Button</button>
-    <ui-popover trigger="button">My Popover</ui-popover>
-
-    <!-- Use: nested <ui-popover> in target element -->
-    <button>
-        My Button <ui-popover>My Popover</ui-popover>
-    </button>
-    ```
+- **Breaking**: `trigger` prop is now a DOM Element, VueComponent instance, or selector string. If no trigger is provided or the selector doesn't match any element, the popover's immediate parent element is used as the trigger.
+
+  ```html
+  <!-- Instead of: ref + trigger -->
+  <button ref="button">My Button</button>
+  <ui-popover trigger="button">My Popover</ui-popover>
+
+  <!-- Use: nested <ui-popover> in target element -->
+  <button>My Button <ui-popover>My Popover</ui-popover></button>
+  ```
+
 - **Breaking**: Rename `dropdownPosition` prop to `position`, to match UiTooltip. Accepted values have changed to match Tippy.js. See docs for new values.
 - Remove prop `removeOnClose`, no longer needed. All popovers are now removed from the DOM on close.
 - Add new prop `animation` to choose animation style.
@@ -284,17 +285,18 @@ There are breaking changes in this release. Read through and update your usage w
 ### UiTabs and UiTab
 
 - UiTabs
-    - **Breaking**: argument passed to `tab-change` event handler is now the tab instance, not the id. To get the id, use `tab.id`.
-    - **Breaking**: Remove `refreshIndicator` method, no longer needed.
-    - Change active tab indicator animation, to fix issues related to window resizing and initially hidden tabs. Fixes [#328](https://github.com/JosephusPaye/Keen-UI/issues/328).
-    - Add new event `tab-click`, emitted when a tab is clicked, whether or not the tab is selected.
-    - Add new prop `confirmTabChange`, A function that will be called for confirmation when the user attempts to change tabs.
+
+  - **Breaking**: argument passed to `tab-change` event handler is now the tab instance, not the id. To get the id, use `tab.id`.
+  - **Breaking**: Remove `refreshIndicator` method, no longer needed.
+  - Change active tab indicator animation, to fix issues related to window resizing and initially hidden tabs. Fixes [#328](https://github.com/JosephusPaye/Keen-UI/issues/328).
+  - Add new event `tab-click`, emitted when a tab is clicked, whether or not the tab is selected.
+  - Add new prop `confirmTabChange`, A function that will be called for confirmation when the user attempts to change tabs.
 
 - UiTab
-    - **Breaking**: Remove `show` prop, use `v-for` with a filtered array of tabs instead.
-    - **Breaking**: Remove `icon` (string) and `iconProps` (object) props, use the `header` slot instead.
-    - Tabs can now be created using `v-for`. Fixes [#349](https://github.com/JosephusPaye/Keen-UI/issues/349).
-    - HTML can now be used in tab headers, using the `header` slot.
+  - **Breaking**: Remove `show` prop, use `v-for` with a filtered array of tabs instead.
+  - **Breaking**: Remove `icon` (string) and `iconProps` (object) props, use the `header` slot instead.
+  - Tabs can now be created using `v-for`. Fixes [#349](https://github.com/JosephusPaye/Keen-UI/issues/349).
+  - HTML can now be used in tab headers, using the `header` slot.
 
 ### UiTextbox
 
@@ -303,33 +305,33 @@ There are breaking changes in this release. Read through and update your usage w
 ### UiTooltip
 
 - **Breaking**: Switch positioning library to Tippy.js, which uses Popper.js.
-- **Breaking**: `trigger` prop is now a DOM Element, VueComponent instance,  or selector string. If no trigger is provided or the selector doesn't match any element, the tooltip's immediate parent element is used as the trigger.
-    ```html
-    <!-- Instead of: ref + trigger -->
-    <button ref="button">My Button</button>
-    <ui-tooltip trigger="button">My Tooltip</ui-tooltip>
-
-    <!-- Use: nested <ui-tooltip> in target element -->
-    <button>
-        My Button <ui-tooltip>My Tooltip</ui-tooltip>
-    </button>
-    ```
+- **Breaking**: `trigger` prop is now a DOM Element, VueComponent instance, or selector string. If no trigger is provided or the selector doesn't match any element, the tooltip's immediate parent element is used as the trigger.
+
+  ```html
+  <!-- Instead of: ref + trigger -->
+  <button ref="button">My Button</button>
+  <ui-tooltip trigger="button">My Tooltip</ui-tooltip>
+
+  <!-- Use: nested <ui-tooltip> in target element -->
+  <button>My Button <ui-tooltip>My Tooltip</ui-tooltip></button>
+  ```
+
 - **Breaking**: `position` prop accepted values have changed to match Tippy.js. See docs for new values.
 - Add new prop `animation` to choose animation style.
 - Add new prop `appendToBody`, to choose between appending tooltip to `document.body` or the local parent element.
 
 ## v1.0.1
 
-* Upgrade Vue to `v2.4.2` and fix template warnings. See [#268](https://github.com/JosephusPaye/Keen-UI/issues/268).
-* Add `aria-describedby` attribute to UiTooltip.
-* Fix bug where help and error content provided via slot isn't shown unless the `help` or `error` props are set. Affects UiAutocomplete, UiCheckboxGroup, UiDatepicker, UiRadioGroup, UiSelect, and UiTextbox. See [#204](https://github.com/JosephusPaye/Keen-UI/issues/301).
-* Allow `null` for UiAutocomplete and UiTextbox `value` prop. See [#253](https://github.com/JosephusPaye/Keen-UI/issues/253).
-* Allow UiTooltip `trigger` prop to be a VueComponent instance. See [#204](https://github.com/JosephusPaye/Keen-UI/issues/204).
-* Add `checked` attribute to the `input` element for UiRadio. See [#207](https://github.com/JosephusPaye/Keen-UI/issues/207).
-* Fix error being thrown when using UiRippleInk with SVG elements on touch devices. See [#236](https://github.com/JosephusPaye/Keen-UI/issues/236).
-* Fix minor errors and dead links in the docs.
-* Remove Material Icons webfont and use inline SVG icons in the docs.
-* Update [contributing guidelines](https://github.com/JosephusPaye/Keen-UI/blob/v1.0.1/CONTRIBUTING.md) with information about linting, BEM and using the `next` branch.
+- Upgrade Vue to `v2.4.2` and fix template warnings. See [#268](https://github.com/JosephusPaye/Keen-UI/issues/268).
+- Add `aria-describedby` attribute to UiTooltip.
+- Fix bug where help and error content provided via slot isn't shown unless the `help` or `error` props are set. Affects UiAutocomplete, UiCheckboxGroup, UiDatepicker, UiRadioGroup, UiSelect, and UiTextbox. See [#204](https://github.com/JosephusPaye/Keen-UI/issues/301).
+- Allow `null` for UiAutocomplete and UiTextbox `value` prop. See [#253](https://github.com/JosephusPaye/Keen-UI/issues/253).
+- Allow UiTooltip `trigger` prop to be a VueComponent instance. See [#204](https://github.com/JosephusPaye/Keen-UI/issues/204).
+- Add `checked` attribute to the `input` element for UiRadio. See [#207](https://github.com/JosephusPaye/Keen-UI/issues/207).
+- Fix error being thrown when using UiRippleInk with SVG elements on touch devices. See [#236](https://github.com/JosephusPaye/Keen-UI/issues/236).
+- Fix minor errors and dead links in the docs.
+- Remove Material Icons webfont and use inline SVG icons in the docs.
+- Update [contributing guidelines](https://github.com/JosephusPaye/Keen-UI/blob/v1.0.1/CONTRIBUTING.md) with information about linting, BEM and using the `next` branch.
 
 ## v1.0.0
 
@@ -339,12 +341,12 @@ Please consult the [docs](https://josephuspaye.github.io/Keen-UI/1.0.0/) for com
 
 ### Highlights
 
-* New components: [UiCheckboxGroup](https://josephuspaye.github.io/Keen-UI/1.0.0/#/ui-checkbox-group), [UiDatepicker](https://josephuspaye.github.io/Keen-UI/1.0.0/#/ui-datepicker) and [UiFileupload](https://josephuspaye.github.io/Keen-UI/1.0.0/#/ui-fileupload)
-* [Documentation](https://github.com/JosephusPaye/Keen-UI/blob/master/Customization.md) for customizing the components
-* [Global configuration](https://github.com/JosephusPaye/Keen-UI/blob/master/Customization.md#global-config) now available for certain component props
-* CSS switched from Stylus to Sass, adopting the [BEM](http://getbem.com/naming/) naming convention
-* Component sizing switched from `px` to `rem`, using a root font size of `16px`. [Changing](https://github.com/JosephusPaye/Keen-UI/blob/master/Customization.md#component-sizing) this font size will scale the components up/down appropriately.
-* Component event names switched from past tense to present to be more in line with the native DOM events
-* Remove [validatorjs](https://github.com/skaterdav85/validatorjs) and [draggabilly](http://draggabilly.desandro.com) dependencies
-* Now shipping both minified and unminified versions of standalone component files in `lib/`
-* Fix several issues and unnecessary API limitations
+- New components: [UiCheckboxGroup](https://josephuspaye.github.io/Keen-UI/1.0.0/#/ui-checkbox-group), [UiDatepicker](https://josephuspaye.github.io/Keen-UI/1.0.0/#/ui-datepicker) and [UiFileupload](https://josephuspaye.github.io/Keen-UI/1.0.0/#/ui-fileupload)
+- [Documentation](https://github.com/JosephusPaye/Keen-UI/blob/master/Customization.md) for customizing the components
+- [Global configuration](https://github.com/JosephusPaye/Keen-UI/blob/master/Customization.md#global-config) now available for certain component props
+- CSS switched from Stylus to Sass, adopting the [BEM](http://getbem.com/naming/) naming convention
+- Component sizing switched from `px` to `rem`, using a root font size of `16px`. [Changing](https://github.com/JosephusPaye/Keen-UI/blob/master/Customization.md#component-sizing) this font size will scale the components up/down appropriately.
+- Component event names switched from past tense to present to be more in line with the native DOM events
+- Remove [validatorjs](https://github.com/skaterdav85/validatorjs) and [draggabilly](http://draggabilly.desandro.com) dependencies
+- Now shipping both minified and unminified versions of standalone component files in `lib/`
+- Fix several issues and unnecessary API limitations
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -12,19 +12,19 @@ Please take care to observe the following when you contribute code to Keen UI:
 
 5. For HTML, use the following formatting guide:
 
-    For tags that cross the max line limit (100 characters), open the tag, then drop down to an indented line and place each attribute on a new line, sorted alphabetically and grouped (new line separating groups) according to the following order:
+   For tags that cross the max line limit (100 characters), open the tag, then drop down to an indented line and place each attribute on a new line, sorted alphabetically and grouped (new line separating groups) according to the following order:
 
-    - normal attributes
-    - `v-bind` attributes (`:` shorthand only)
-    - `v-on` attributes (`@` shorthand only)
-    - directives
+   - normal attributes
+   - `v-bind` attributes (`:` shorthand only)
+   - `v-on` attributes (`@` shorthand only)
+   - directives
 
-    After all attributes, drop down to a new line with the same indent as opening tag, add the closing `>` and then close the tag.
+   After all attributes, drop down to a new line with the same indent as opening tag, add the closing `>` and then close the tag.
 
-    **Note**: This doesn't apply to content (e.g. text inside `div`, `p`, `span`, etc.) and tags that don't cross the 100 character per line limit.
+   **Note**: This doesn't apply to content (e.g. text inside `div`, `p`, `span`, etc.) and tags that don't cross the 100 character per line limit.
 
-    **Example**:
+   **Example**:
 
-    ![Example of HTML formatting](https://i.imgur.com/8v4vkRK.png)
+   ![Example of HTML formatting](https://i.imgur.com/8v4vkRK.png)
 
 6. For CSS, all selectors must follow the [BEM naming guidelines](http://getbem.com/naming/).
diff --git a/Customization.md b/Customization.md
@@ -8,38 +8,40 @@ If you use Sass with [`webpack`](https://webpack.js.org) and [`vue-loader`](http
 
 1. Create a `variables.scss` file somewhere in your project, for example, at `src/styles/variables.scss`.
 
-    **Note**: since this file will be imported into every Sass file, make sure it doesn't contain any CSS rules. It should contain only Sass variables, functions or mixins.
+   **Note**: since this file will be imported into every Sass file, make sure it doesn't contain any CSS rules. It should contain only Sass variables, functions or mixins.
 
 2. If you are **not** using Vue CLI:
-    - Install [`sass-resources-loader`](https://github.com/shakacode/sass-resources-loader).
-
-        ```
-        npm install sass-resources-loader --save-dev
-        ```
-
-    - Add the following rule to your webpack config file:
-
-        ```js
-        {
-            loader: 'sass-resources-loader',
-            options: {
-                resources: path.resolve(__dirname, './src/styles/variables.scss')
-            }
-        }
-        ```
+
+   - Install [`sass-resources-loader`](https://github.com/shakacode/sass-resources-loader).
+
+     ```
+     npm install sass-resources-loader --save-dev
+     ```
+
+   - Add the following rule to your webpack config file:
+
+     ```js
+     {
+         loader: 'sass-resources-loader',
+         options: {
+             resources: path.resolve(__dirname, './src/styles/variables.scss')
+         }
+     }
+     ```
+
 3. If you are using Vue CLI, add the following to `vue.config.js` ([details](https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders)):
 
-    ```js
-    module.exports = {
-        css: {
-            loaderOptions: {
-                sass: {
-                    data: `@import "@/styles/variables.scss";`
-                }
-            }
-        }
-    }
-    ```
+   ```js
+   module.exports = {
+     css: {
+       loaderOptions: {
+         sass: {
+           data: `@import "@/styles/variables.scss";`,
+         },
+       },
+     },
+   };
+   ```
 
 4. Now you can customize the component styles by overriding Keen UI variables in the `variables.scss` file you created.
 
@@ -49,33 +51,33 @@ The `primary` and `accent` theme colors can be customized using the `$brand-prim
 
 1. Add the following to your `variables.scss` file:
 
-    ```scss
-    $brand-primary-color: #673AB7;
-    $brand-accent-color: #FF4081;
-    ```
+   ```scss
+   $brand-primary-color: #673ab7;
+   $brand-accent-color: #ff4081;
+   ```
 
 2. Import and use the components from `keen-ui/src`. Example:
 
-    ```html
-    <!-- App.vue -->
-    <template>
-        <div>
-            <ui-button color="primary">Primary button</ui-button>
-            <ui-button color="accent">Accent button</ui-button>
-        </div>
-    </template>
-
-    <script>
-    import 'keen-ui/src/bootstrap'; // Required to setup Keen UI, should be imported only once in your project
-    import UiButton from 'keen-ui/src/UiButton.vue';
-
-    export default {
-        components: {
-            UiButton
-        }
-    }
-    </script>
-    ```
+   ```html
+   <!-- App.vue -->
+   <template>
+     <div>
+       <ui-button color="primary">Primary button</ui-button>
+       <ui-button color="accent">Accent button</ui-button>
+     </div>
+   </template>
+
+   <script>
+     import "keen-ui/src/bootstrap"; // Required to setup Keen UI, should be imported only once in your project
+     import UiButton from "keen-ui/src/UiButton.vue";
+
+     export default {
+       components: {
+         UiButton,
+       },
+     };
+   </script>
+   ```
 
 ### Other variables
 
@@ -95,15 +97,15 @@ To scale the size of components up, set a font size higher than `100%` on the ro
 
 ```css
 html {
-    font-size: 110%;
+  font-size: 110%;
 }
 ```
 
 To scale the size of components down, set a font size lower than `100%` on the root element, for example:
 
 ```css
 html {
-    font-size: 90%;
+  font-size: 90%;
 }
 ```
 
@@ -114,28 +116,28 @@ Component props which have default values can be changed globally when installin
 ### Configure all components
 
 ```js
-import { createApp } from 'vue';
-import KeenUI from 'keen-ui';
+import { createApp } from "vue";
+import KeenUI from "keen-ui";
 
 const app = createApp();
 app.use(KeenUI, {
-    UiButton: {
-        disableRipple: true
-    },
-    UiTooltip: {
-        position: 'top'
-    }
+  UiButton: {
+    disableRipple: true,
+  },
+  UiTooltip: {
+    position: "top",
+  },
 });
 ```
 
 ### Configure individual components
 
 ```js
-import { UiButton } from 'keen-ui';
-import configure from 'keen-ui/src/configure'
+import { UiButton } from "keen-ui";
+import configure from "keen-ui/src/configure";
 
 configure(UiButton, {
-    disableRipple: true
+  disableRipple: true,
 });
 
 // UiButton's disableRipple prop is now true by default