Components renaming (#225)
* refactor: eslint config adjusted for better diff's * refactor: stricter linting + dependencies updated * refactoring: paragraph component - component - docs * refactoring: heading component - component - docs * Update docs/components/heading.md Co-authored-by: Ilya Artamonov <ilya.sosidka@gmail.com> * refactoring: link component - component - docs * refactoring: image component - component - docs * refactoring: alert component - component - docs * refactoring: avatar component - component - docs * refactoring: removed unnecessary code - component names come from the file name * refactoring: breadcrumb component - component - docs * refactoring: accordion component - component - docs * refactoring: buttom component - component - docs * refactoring: badge component - component - docs * refactoring: card component - component - docs * refactoring: order of components in docs updated * refactoring: unnecessary semicolons removed * refactoring: button group component - component - docs * refactoring: carousel component - component - docs * refactoring: dropdown component - component - docs * refactoring: footer component - component - docs * refactoring:list-group component - component - docs * refactoring: modal component - component - docs * refactoring: navbar component - component - docs * refactoring: pagination component - component - docs * refactoring: progress component - component - docs * refactoring: rating component - component - docs * refactoring: spinner component - component - docs * refactoring: table component - component - docs * refactoring: tabs component - component - docs * feat: Updated pagination examples * lint: Lister fixes * feat: Sidebar component and some fixes * feat: Input component * feat: Some fixes * feat: Some fixes * chore: update deps * refactor: removed old Modal component * refactor: radio component and some fixes * fix: fixed path error * refactor: Range component * refactoring: timeline component - component - docs * refactor: Select component * refactoring: toast component - component - docs * refactoring: tooltip component - component - docs * refactoring: sidebar component - component - docs * refactoring: input component - component - docs * refactoring: fileInput component - component - docs * refactoring: select component - component - docs * refactoring: textarea component - component - docs * refactoring: checkbox component - component - docs * refactoring: radio component - component - docs * refactoring: toggle component - component - docs * refactoring: range component - component - docs * local configs linted * documentation quick start updated * flowbite-themable refactored to fit new linters and style guide * random linter fixes * refactoring: toast-provider component - component - docs * final linter fixes * lint: Linter fixes * fix: Fixed types * fix: Fixed card component * docs: Updated card examples * fix: Fixed tabs * refactor: Heading component refactoring * Fwb rename - few fixes after component review (#237) * fix: button documentation * fix: model type in range examples * chore: Toast marked as WIP --------- Co-authored-by: Sqrcz <naorniakowski@slashlab.pl> Co-authored-by: Sqrcz <naorniakowski@gmail.com>
This commit is contained in:
Ilya Artamonov
GitHub
@@ -1,12 +1,12 @@
|
||||
<script setup>
|
||||
import InputExample from './input/examples/InputExample.vue';
|
||||
import InputSizeExample from './input/examples/InputSizeExample.vue';
|
||||
import InputDisabledExample from './input/examples/InputDisabledExample.vue';
|
||||
import InputHelperExample from './input/examples/InputHelperExample.vue';
|
||||
import InputPrefixExample from './input/examples/InputPrefixExample.vue';
|
||||
import InputSuffixExample from './input/examples/InputSuffixExample.vue'
|
||||
import InputRequiredExample from './input/examples/InputRequiredExample.vue'
|
||||
import InputValidationExample from './input/examples/InputValidationExample.vue'
|
||||
import FwbInputExample from './input/examples/FwbInputExample.vue'
|
||||
import FwbInputExampleSize from './input/examples/FwbInputExampleSize.vue'
|
||||
import FwbInputExampleDisabled from './input/examples/FwbInputExampleDisabled.vue'
|
||||
import FwbInputExampleHelper from './input/examples/FwbInputExampleHelper.vue'
|
||||
import FwbInputExamplePrefix from './input/examples/FwbInputExamplePrefix.vue'
|
||||
import FwbInputExampleSuffix from './input/examples/FwbInputExampleSuffix.vue'
|
||||
import FwbInputExampleRequired from './input/examples/FwbInputExampleRequired.vue'
|
||||
import FwbInputExampleValidation from './input/examples/FwbInputExampleValidation.vue'
|
||||
</script>
|
||||
|
||||
# Vue Input - Flowbite
|
||||
@@ -24,125 +24,196 @@ The input field is an important part of the form element that can be used to cre
|
||||
On this page you will find all of the input types based on multiple variants, styles, colors, and sizes built with the utility classes from Tailwind CSS and components from Flowbite.
|
||||
|
||||
## Default
|
||||
|
||||
<fwb-input-example />
|
||||
```vue
|
||||
<script setup>
|
||||
import { Input } from 'flowbite-vue'
|
||||
<template>
|
||||
<fwb-input
|
||||
v-model="name"
|
||||
placeholder="enter your first name"
|
||||
label="First name"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import { FwbInput } from 'flowbite-vue'
|
||||
|
||||
const name = ref('')
|
||||
</script>
|
||||
<template>
|
||||
<Input v-model="name" placeholder="enter your first name" label="First name" />
|
||||
</template>
|
||||
```
|
||||
|
||||
<InputExample />
|
||||
|
||||
## Size
|
||||
|
||||
<fwb-input-example-size />
|
||||
```vue
|
||||
<script setup>
|
||||
import { Input } from 'flowbite-vue'
|
||||
</script>
|
||||
<template>
|
||||
<Input size="sm" placeholder="enter your first name" label="Small" />
|
||||
<Input size="md" placeholder="enter your last name" label="Medium" />
|
||||
<Input size="lg" placeholder="enter your second name" label="Large" />
|
||||
<fwb-input v-model="name" label="Small" placeholder="enter your name" size="sm" />
|
||||
<fwb-input v-model="name" label="Medium" placeholder="enter your name" size="md" />
|
||||
<fwb-input v-model="name" label="Large" placeholder="enter your name" size="lg" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import { FwbInput } from 'flowbite-vue'
|
||||
|
||||
const name = ref('')
|
||||
</script>
|
||||
```
|
||||
|
||||
<InputSizeExample />
|
||||
|
||||
## Disabled
|
||||
|
||||
<fwb-input-example-disabled />
|
||||
```vue
|
||||
<script setup>
|
||||
import { Input } from 'flowbite-vue'
|
||||
</script>
|
||||
<template>
|
||||
<Input :disabled="true" placeholder="enter your first name" label="First name" />
|
||||
<fwb-input
|
||||
v-model="name"
|
||||
disabled
|
||||
label="First name"
|
||||
placeholder="enter your first name"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import { FwbInput } from 'flowbite-vue'
|
||||
|
||||
const name = ref('')
|
||||
</script>
|
||||
```
|
||||
|
||||
## Required
|
||||
|
||||
<fwb-input-example-required />
|
||||
```vue
|
||||
<script setup>
|
||||
import { Input } from 'flowbite-vue'
|
||||
</script>
|
||||
<template>
|
||||
<Input required placeholder="enter your first name" label="First name" />
|
||||
<fwb-input
|
||||
v-model="name"
|
||||
label="First name"
|
||||
placeholder="enter your first name"
|
||||
required
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
|
||||
<InputRequiredExample />
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { FwbInput } from 'flowbite-vue'
|
||||
|
||||
const name = ref('')
|
||||
</script>
|
||||
```
|
||||
|
||||
## Slot - Helper
|
||||
```vue
|
||||
<script setup>
|
||||
import { Input } from 'flowbite-vue'
|
||||
</script>
|
||||
<template>
|
||||
<Input placeholder="enter your first name" label="First name">
|
||||
<template #helper>
|
||||
We’ll never share your details. Read our <a href="#" class="font-medium text-blue-600 hover:underline dark:text-blue-500">Privacy Policy</a>.
|
||||
</template>
|
||||
</Input>
|
||||
</template>
|
||||
```
|
||||
|
||||
<InputHelperExample />
|
||||
<fwb-input-example-helper />
|
||||
```vue
|
||||
<template>
|
||||
<fwb-input
|
||||
v-model="name"
|
||||
label="First name"
|
||||
placeholder="enter your first name"
|
||||
>
|
||||
<template #helper>
|
||||
We'll never share your details. Read our
|
||||
<fwb-a href="#" color="text-blue-600 dark:text-blue-500">
|
||||
Privacy Policy
|
||||
</fwb-a>.
|
||||
</template>
|
||||
</fwb-input>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import { FwbA, FwbInput } from 'flowbite-vue'
|
||||
|
||||
const name = ref('')
|
||||
</script>
|
||||
```
|
||||
|
||||
## Slot - Prefix
|
||||
```vue
|
||||
<script setup>
|
||||
import { Input } from 'flowbite-vue'
|
||||
</script>
|
||||
<template>
|
||||
<Input placeholder="enter your first name" label="First name">
|
||||
<template #prefix>
|
||||
<svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
|
||||
</template>
|
||||
</Input>
|
||||
</template>
|
||||
```
|
||||
|
||||
<InputPrefixExample />
|
||||
<fwb-input-example-prefix />
|
||||
```vue
|
||||
<template>
|
||||
<fwb-input v-model="name" label="Search" placeholder="enter your search query">
|
||||
<template #prefix>
|
||||
<svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
|
||||
</svg>
|
||||
</template>
|
||||
</fwb-input>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import { FwbInput } from 'flowbite-vue'
|
||||
|
||||
const name = ref('')
|
||||
</script>
|
||||
```
|
||||
|
||||
## Slot - Suffix
|
||||
<fwb-input-example-suffix />
|
||||
```vue
|
||||
<script setup>
|
||||
import { Input, Button } from 'flowbite-vue'
|
||||
</script>
|
||||
<template>
|
||||
<Input size="lg" placeholder="enter your search query" label="Search">
|
||||
<fwb-input
|
||||
v-model="query"
|
||||
label="Search"
|
||||
placeholder="enter your search query"
|
||||
size="lg"
|
||||
>
|
||||
<template #prefix>
|
||||
<svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
|
||||
<svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
|
||||
</svg>
|
||||
</template>
|
||||
<template #suffix>
|
||||
<Button>Search</Button>
|
||||
<fwb-button>Search</fwb-button>
|
||||
</template>
|
||||
</Input>
|
||||
</fwb-input>
|
||||
</template>
|
||||
```
|
||||
|
||||
<InputSuffixExample />
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import { FwbButton, FwbInput } from 'flowbite-vue'
|
||||
|
||||
const query = ref('')
|
||||
</script>
|
||||
```
|
||||
|
||||
## Slot - Validation
|
||||
|
||||
- Set validation status via `validationStatus` props, which accepts `'success'` or `'error'`.
|
||||
- Set validation status via `validationStatus` prop, which accepts `'success'` or `'error'`.
|
||||
- Add validation message via `validationMessage` slot.
|
||||
|
||||
<fwb-input-example-validation />
|
||||
```vue
|
||||
<script setup>
|
||||
import { Input } from 'flowbite-vue'
|
||||
</script>
|
||||
<template>
|
||||
<Input v-model='email' required placeholder="enter your email address" label="Email" validation-status='success' />
|
||||
<Input v-model='email' required placeholder="enter your email address" label="Email" validation-status='error'>
|
||||
<fwb-input
|
||||
v-model="email"
|
||||
required
|
||||
placeholder="enter your email address"
|
||||
label="Email"
|
||||
validation-status="success"
|
||||
/>
|
||||
<hr class="mt-4 border-0">
|
||||
<fwb-input
|
||||
v-model="email"
|
||||
required
|
||||
placeholder="enter your email address"
|
||||
label="Email"
|
||||
validation-status="error"
|
||||
>
|
||||
<template #validationMessage>
|
||||
Please enter a valid email address
|
||||
</template>
|
||||
</Input>
|
||||
</fwb-input>
|
||||
</template>
|
||||
```
|
||||
|
||||
<InputValidationExample />
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import { FwbInput } from 'flowbite-vue'
|
||||
|
||||
const email = ref('')
|
||||
</script>
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user