jaro/flowbite-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: linter and prettier

Browse Source
This commit is contained in:
Alexandr
2022-06-30 17:33:26 +03:00
parent 251ae9bfaa
commit cf3038e401
8 changed files with 2231 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/guide/button/ButtonColorExample.vue
View File

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

4
docs/guide/button/ButtonPillExample.vue
View File

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

4
docs/guide/button/ButtonSizeExample.vue
View File

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

8
docs/guide/button/button.md
View File

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

2188
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

21
package.json
View File

@@ -20,28 +20,31 @@
"serve": "vitepress serve docs", "serve": "vitepress serve docs",
"build:docs": "vitepress build docs", "build:docs": "vitepress build docs",
"build": "vite build", "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" "format": "prettier . --write"
}, },
"peerDependencies": { "peerDependencies": {
"vue": "^3.2.37" "vue": "^3.2.37"
}, },
"devDependencies": { "devDependencies": {
"postcss": "^8.4.6",
"flowbite": "^1.4.2",
"tailwindcss": "^3.0.24",
"@types/node": "^18.0.0", "@types/node": "^18.0.0",
"@vitejs/plugin-vue": "^1.2.5", "@typescript-eslint/eslint-plugin": "^5.30.0",
"@vue/tsconfig": "^0.1.3", "@typescript-eslint/parser": "^5.30.0",
"@vitejs/plugin-vue": "^2.3.3",
"@vue/compiler-sfc": "^3.2.37", "@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-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", "prettier": "^2.3.2",
"tailwindcss": "^3.0.24",
"typescript": "^4.7.3", "typescript": "^4.7.3",
"vite": "^2.4.3", "vite": "^2.4.3",
"vitepress": "^1.0.0-alpha.4", "vitepress": "^1.0.0-alpha.4",
"class-names": "^1.0.0" "vue-eslint-parser": "^9.0.3"
}, },
"postcss": { "postcss": {
"plugins": { "plugins": {

28
src/components/Button/Button.vue
View File

@@ -1,10 +1,12 @@
<template> <template>
<button type="button" :class="bindClasses"> <button type="button" :class="bindClasses">
<slot /> <slot/>
</button> </button>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed } from 'vue' import { computed } from 'vue'
import type { PropType } from 'vue'
import classNames from 'classnames' import classNames from 'classnames'
export type ButtonVariant = 'default' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple' export type ButtonVariant = 'default' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple'
@@ -22,7 +24,7 @@ const props = defineProps({
pill: { pill: {
type: Boolean, type: Boolean,
default: false, default: false,
} },
}) })
const bindClasses = computed(() => { const bindClasses = computed(() => {
@@ -33,23 +35,23 @@ const bindClasses = computed(() => {
) )
}) })
const buttonColorClasses: Record<ButtonVariant, string[]> = { 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(' '), 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'.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',
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(' '), 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'.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',
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(' '), 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'.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',
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(' '), 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'.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',
} }
const buttonSizeClasses: Record<ButtonVariant, string[]> = { const buttonSizeClasses: Record<ButtonSize, string> = {
xs: 'text-xs px-2 py-1', xs: 'text-xs px-2 py-1',
sm: 'text-sm px-3 py-1.5', sm: 'text-sm px-3 py-1.5',
md: 'text-sm px-4 py-2', md: 'text-sm px-4 py-2',
lg: 'text-base px-5 py-2.5', lg: 'text-base px-5 py-2.5',
xl: 'text-base px-6 py-3' xl: 'text-base px-6 py-3',
} }
</script> </script>

12
tsconfig.json
View File

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