chore: update eslint config and files format

docs/.vitepress/config.mts

@@ -1,83 +1,99 @@
-import { defineConfig } from 'vitepress'
+import { defineConfig } from 'vitepress';
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
-	title: "Documentation",
-	description: "Documentation for VuePopper Dashboard",
-	base: "/docs/",
+	title: 'Documentation',
+	description: 'Documentation for VuePopper Dashboard',
+	base: '/docs/',
 	themeConfig: {
 		logo: './logo.svg',
-		siteTitle: "VuePopper",
+		siteTitle: 'VuePopper',
 		outline: 'deep',
 		socialLinks: [
-			{ icon: 'github', link: 'https://github.com/kalimah-apps' },
-			{ icon: 'twitter', link: 'https://twitter.com/KalimahApps' },
+			{
+				icon: 'github',
+				link: 'https://github.com/kalimah-apps',
+			},
+			{
+				icon: 'twitter',
+				link: 'https://twitter.com/KalimahApps',
+			},
 		],
 		nav: [
-			{ text: "Guide", link: "/guide/overview" },
-			{ text: "Changelog", link: "/changelog" },
-			{ text: "Links", link: "/links" },
+			{
+				text: 'Guide',
+				link: '/guide/overview',
+			},
+			{
+				text: 'Changelog',
+				link: '/changelog',
+			},
+			{
+				text: 'Links',
+				link: '/links',
+			},
 		],
 		sidebar: [
 			{
-				text: "Getting started",
+				text: 'Getting started',
 				collapsable: false,
 				items: [
 					{
-						text: "Overview",
-						link: "/guide/overview",
-					}, {
-						text: "Installation",
-						link: "/guide/installation",
+						text: 'Overview',
+						link: '/guide/overview',
 					},
 					{
-						text: "Usage",
-						link: "/guide/usage",
+						text: 'Installation',
+						link: '/guide/installation',
+					},
+					{
+						text: 'Usage',
+						link: '/guide/usage',
 						items:
 							[
 								{
-									text: "Component",
-									link: "/guide/usage/component",
+									text: 'Component',
+									link: '/guide/usage/component',
 								},
 								{
-									text: "Composition API",
-									link: "/guide/usage/composition-api",
-								}
-							]
+									text: 'Composition API',
+									link: '/guide/usage/composition-api',
+								},
+							],
 
 					},
 					{
-						text: "Defaults",
-						link: "/guide/defaults",
+						text: 'Defaults',
+						link: '/guide/defaults',
 					},
 
 				],
 			},
 			{
-				text: "API",
+				text: 'API',
 				collapsable: false,
 				items: [
 					{
-						text: "Props & options",
-						link: "/guide/props-options",
+						text: 'Props & options',
+						link: '/guide/props-options',
 					},
 					{
-						text: "Events",
-						link: "/guide/events",
+						text: 'Events',
+						link: '/guide/events',
 					},
 					{
-						text: "Slots",
-						link: "/guide/slots",
+						text: 'Slots',
+						link: '/guide/slots',
 					},
 					{
-						text: "Styling",
-						link: "/guide/styling",
+						text: 'Styling',
+						link: '/guide/styling',
 					},
 				],
-			}
+			},
 		],
 		footer: {
-			message: "Released under the MIT License.",
+			message: 'Released under the MIT License.',
 		},
 	},
 });

docs/.vitepress/theme/VuePopper.vue

@@ -7,20 +7,22 @@
 		<template #content>
 			<div>
 				<div class="tooltip-text">
-					<slot name="default"> Hi, from vue-popper! 🍿</slot>
+					<slot name="default">
+						Hi, from vue-popper! 🍿
+					</slot>
 				</div>
 			</div>
 		</template>
 	</VuePopperComponent>
 </template>
 
 <script setup lang="ts">
-import VuePopperComponent from "@kalimahapps/vue-popper";
+import VuePopperComponent from '@kalimahapps/vue-popper';
 
 defineProps({
 	text: {
 		type: String,
-		default: "Button",
+		default: 'Button',
 	},
 });
 </script>

docs/.vitepress/theme/index.js

@@ -1,12 +1,12 @@
-import DefaultTheme from 'vitepress/theme'
+import DefaultTheme from 'vitepress/theme';
 import VuePopper from './VuePopper.vue';
 
 import './custom.css';
 
 export default {
 	...DefaultTheme,
-	enhanceApp(ctx) {
-		DefaultTheme.enhanceApp(ctx)
-		ctx.app.component('VuePopper', VuePopper)
-	}
-}
+	enhanceApp(context) {
+		DefaultTheme.enhanceApp(context);
+		context.app.component('VuePopper', VuePopper);
+	},
+};

docs/components/VuePopperAnimations.vue

@@ -1,11 +1,11 @@
 <template>
 	<div class="grid">
-		<VuePopper v-for="animation in animations" :text="animation" :animation="animation"/>
+		<VuePopper v-for="animation in animations" :text="animation" :animation="animation" />
 	</div>
 </template>
 
 <script setup lang="ts">
-const animations = ["none", "fade", "shift-in", "shift-out", "scale"];
+const animations = ['none', 'fade', 'shift-in', 'shift-out', 'scale'];
 </script>
 
 <style scoped>

docs/components/VuePopperAnimationsDuration.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script setup lang="ts">
-const animations = ["fade", "shift-in", "shift-out", "scale"];
+const animations = ['fade', 'shift-in', 'shift-out', 'scale'];
 const durations = [
 	[0, 200],
 	[300, 1000],

eslint.config.mjs

@@ -0,0 +1,2 @@
+import eslintConfig from '@kalimahapps/eslint-config';
+export default [...eslintConfig];

src/VuePopper.vue

@@ -16,7 +16,7 @@ import { computed } from 'vue';
 import type { PositioningStrategy, Placement, Modifier } from '@popperjs/core';
 import { useVuePopper } from './composable';
 
-const props = defineProps({
+const properties = defineProps({
 	/**
 	 * Trigger element on hover
 	 */
@@ -150,22 +150,22 @@ const props = defineProps({
 const emit = defineEmits(['opened', 'closed', 'transition']);
 
 // Deprecate popperOptions in favor of multiple props
-if (Object.keys(props.popperOptions).length > 0) {
+if (Object.keys(properties.popperOptions).length > 0) {
 	console.warn('@kalimahapps/vue-popper: popperOptions is deprecated. Use the individual props instead.');
 }
 
 const { popperInstance, triggerElement, tooltipElement, isOpened, toggleTooltip } = useVuePopper({
-	hover: props.hover,
-	disableClickOutside: props.disableClickOutside,
-	openDelay: props.openDelay,
-	closeDelay: props.closeDelay,
-	showArrow: props.showArrow,
-	strategy: props.strategy,
-	modifiers: props.modifiers,
-	animation: props.animation,
-	placement: props.placement,
-	interactive: props.interactive,
-	animationDuration: props.animationDuration,
+	hover: properties.hover,
+	disableClickOutside: properties.disableClickOutside,
+	openDelay: properties.openDelay,
+	closeDelay: properties.closeDelay,
+	showArrow: properties.showArrow,
+	strategy: properties.strategy,
+	modifiers: properties.modifiers,
+	animation: properties.animation,
+	placement: properties.placement,
+	interactive: properties.interactive,
+	animationDuration: properties.animationDuration,
 
 	onTransition: (transition: string, element: HTMLElement) => {
 		emit('transition', transition, element);

src/composable.ts

@@ -48,9 +48,9 @@ const popperDefaultOptions = {
 /**
  * Generate a css text from style object
  *
- * @param  {object} style List of style properties
- * @param  {object} extra Extra style properties
- * @return {string}       Css string
+ * @param   {object} style List of style properties
+ * @param   {object} extra Extra style properties
+ * @returns {string}       Css string
  */
 const createCssText = function (style: object = {}, extra: object = {}): string {
 	const combined = {
@@ -253,11 +253,11 @@ const useVuePopper = function (suppliedOptions: Options = {}) {
 	/**
 	 * Build trigger element
 	 *
-	 * @param  {object}       props   Props passed to the component
-	 * @param  {SetupContext} context Context passed to the component
-	 * @return {VNode}                Trigger element
+	 * @param   {object}       props   Props passed to the component
+	 * @param   {SetupContext} context Context passed to the component
+	 * @returns {VNode}                Trigger element
 	 */
-	const triggerElement = function (props: object, context: SetupContext): VNode {
+	const triggerElement = function (properties: object, context: SetupContext): VNode {
 		const { slots } = context;
 		return h('div',
 			{
@@ -383,11 +383,11 @@ const useVuePopper = function (suppliedOptions: Options = {}) {
 	/**
 	 * Build tooltip element
 	 *
-	 * @param  {object}       props   Props passed to the component
-	 * @param  {SetupContext} context Context passed to the component
-	 * @return {VNode}                Tooltip element
+	 * @param   {object}       props   Props passed to the component
+	 * @param   {SetupContext} context Context passed to the component
+	 * @returns {VNode}                Tooltip element
 	 */
-	const tooltipElement = function (props: object, context: SetupContext): VNode {
+	const tooltipElement = function (properties: object, context: SetupContext): VNode {
 		const { slots } = context;
 		return h(Transition,
 			{ name: getTransitionNames.value.outer },

vite.config.ts

@@ -1,11 +1,11 @@
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
 
 // https://vitejs.dev/config/
 export default defineConfig({
 	plugins: [vue()],
 	test: {
 		globals: true,
 		environment: 'jsdom',
-	}
+	},
 });