feat: linter and prettier

docs/guide/button/ButtonColorExample.vue

@@ -9,9 +9,7 @@
     <Button color="yellow">Yellow</Button>
     <Button color="purple">Purple</Button>
   </div>
-
-
 </template>
 <script setup>
-import { Button } from "../../../src/index";
+import { Button } from '../../../src/index'
 </script>

docs/guide/button/ButtonPillExample.vue

@@ -9,9 +9,7 @@
     <Button color="yellow" pill>Yellow</Button>
     <Button color="purple" pill>Purple</Button>
   </div>
-
-
 </template>
 <script setup>
-import { Button } from "../../../src/index";
+import { Button } from '../../../src/index'
 </script>

docs/guide/button/ButtonSizeExample.vue

@@ -6,9 +6,7 @@
     <Button size="lg">Large - lg</Button>
     <Button size="xl">Extra Large - xl</Button>
   </div>
-
-
 </template>
 <script setup>
-import { Button } from "../../../src/index";
+import { Button } from '../../../src/index'
 </script>

docs/guide/button/button.md

@@ -8,9 +8,7 @@ import ButtonPillExample from './ButtonPillExample.vue';
 
 reference: [https://flowbite.com/docs/components/buttons/](https://flowbite.com/docs/components/buttons/)
 
-## Props
-
-### Color
+## Props -> Color
 
 ```typescript
 type ButtonVariant = 'default' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple'
@@ -42,7 +40,7 @@ import { Button } from 'flowbite-vue'
 ```
 
 
-### Size
+## Props -> Size
 
 ```typescript
 type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
@@ -70,7 +68,7 @@ import { Button } from 'flowbite-vue'
 </template>
 ```
 
-### Pill
+## Props -> Pill
 
 ```typescript
 defineProps({

package.json

@@ -20,28 +20,31 @@
     "serve": "vitepress serve docs",
     "build:docs": "vitepress build docs",
     "build": "vite build",
-    "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
+    "lint": "eslint --ext .ts,.vue --ignore-path .gitignore --fix src",
     "format": "prettier .  --write"
   },
   "peerDependencies": {
     "vue": "^3.2.37"
   },
   "devDependencies": {
-    "postcss": "^8.4.6",
-    "flowbite": "^1.4.2",
-    "tailwindcss": "^3.0.24",
     "@types/node": "^18.0.0",
-    "@vitejs/plugin-vue": "^1.2.5",
-    "@vue/tsconfig": "^0.1.3",
+    "@typescript-eslint/eslint-plugin": "^5.30.0",
+    "@typescript-eslint/parser": "^5.30.0",
+    "@vitejs/plugin-vue": "^2.3.3",
     "@vue/compiler-sfc": "^3.2.37",
-    "eslint": "^7.31.0",
+    "@vue/tsconfig": "^0.1.3",
+    "class-names": "^1.0.0",
+    "eslint": "^8.18.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-vue": "^7.14.0",
+    "eslint-plugin-vue": "^9.1.1",
+    "flowbite": "^1.4.2",
+    "postcss": "^8.4.6",
     "prettier": "^2.3.2",
+    "tailwindcss": "^3.0.24",
     "typescript": "^4.7.3",
     "vite": "^2.4.3",
     "vitepress": "^1.0.0-alpha.4",
-    "class-names": "^1.0.0"
+    "vue-eslint-parser": "^9.0.3"
   },
   "postcss": {
     "plugins": {

src/components/Button/Button.vue

@@ -1,10 +1,12 @@
 <template>
   <button type="button" :class="bindClasses">
-    <slot />
+    <slot/>
   </button>
 </template>
 <script lang="ts" setup>
 import { computed } from 'vue'
+import type { PropType } from 'vue'
+
 import classNames from 'classnames'
 
 export type ButtonVariant = 'default' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple'
@@ -22,7 +24,7 @@ const props = defineProps({
   pill: {
     type: Boolean,
     default: false,
-  }
+  },
 })
 
 const bindClasses = computed(() => {
@@ -33,23 +35,23 @@ const bindClasses = computed(() => {
   )
 })
 
-const buttonColorClasses: Record<ButtonVariant, string[]> = {
-  default: 'text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800'.split(' '),
-  alternative: 'font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700'.split(' '),
-  dark: 'text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700'.split(' '),
-  light: 'text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700'.split(' '),
-  green: 'focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800'.split(' '),
-  red: 'focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900'.split(' '),
-  yellow: 'focus:outline-none text-white bg-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg dark:focus:ring-yellow-900'.split(' '),
-  purple: 'focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900'.split(' ')
+const buttonColorClasses: Record<ButtonVariant, string> = {
+  default: 'text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800',
+  alternative: 'font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700',
+  dark: 'text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700',
+  light: 'text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700',
+  green: 'focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800',
+  red: 'focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900',
+  yellow: 'focus:outline-none text-white bg-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg dark:focus:ring-yellow-900',
+  purple: 'focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900',
 }
 
-const buttonSizeClasses: Record<ButtonVariant, string[]> = {
+const buttonSizeClasses: Record<ButtonSize, string> = {
   xs: 'text-xs px-2 py-1',
   sm: 'text-sm px-3 py-1.5',
   md: 'text-sm px-4 py-2',
   lg: 'text-base px-5 py-2.5',
-  xl: 'text-base px-6 py-3'
+  xl: 'text-base px-6 py-3',
 }
 
 </script>

tsconfig.json

@@ -1,5 +1,13 @@
 {
   "extends": "@vue/tsconfig/tsconfig.web.json",
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
-  "exclude": ["**/node_modules"]
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue"
+  ],
+  "exclude": [
+    "node_modules",
+    "**/node_modules"
+  ]
 }