Add autocomplete property (#285)

* Add autocomplete property

* Default value for autocomplete

* Use simpler type for autocomplete

Author: hongquan

docs/components/typography/blockquote/FwbBlockquoteAlignExample.vue

@@ -1,18 +1,18 @@
 <template>
-<div class="vp-raw flex flex-col gap-6">
+  <div class="vp-raw flex flex-col gap-6">
     <fwb-blockquote class="text-left">
-        "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS
-        application."
+      "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS
+      application."
     </fwb-blockquote>
     <fwb-blockquote class="text-center">
-        "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS
-        application."
+      "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS
+      application."
     </fwb-blockquote>
     <fwb-blockquote class="text-right">
-        "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS
-        application."
+      "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS
+      application."
     </fwb-blockquote>
-</div>
+  </div>
 </template>
 
 <script setup>

docs/components/typography/blockquote/FwbBlockquoteExample.vue

@@ -1,9 +1,9 @@
 <template>
-<div class="vp-raw">
+  <div class="vp-raw">
     <fwb-blockquote>
-        "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS application."
+      "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS application."
     </fwb-blockquote>
-</div>
+  </div>
 </template>
 
 <script setup>

docs/components/typography/blockquote/FwbBlockquoteSizeExample.vue

@@ -1,15 +1,15 @@
 <template>
-<div class="vp-raw flex flex-col gap-6">
+  <div class="vp-raw flex flex-col gap-6">
     <fwb-blockquote class="text-lg">
-        "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS application."
+      "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS application."
     </fwb-blockquote>
     <fwb-blockquote class="text-xl">
-        "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS application."
+      "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS application."
     </fwb-blockquote>
     <fwb-blockquote class="text-2xl">
-        "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS application."
+      "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS application."
     </fwb-blockquote>
-</div>
+  </div>
 </template>
 
 <script setup>

docs/components/typography/blockquote/FwbBlockquoteSolidExample.vue

@@ -1,9 +1,9 @@
 <template>
-<div class="vp-raw flex">
+  <div class="vp-raw flex">
     <fwb-blockquote type="solid">
-        "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS application."
+      "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS application."
     </fwb-blockquote>
-</div>
+  </div>
 </template>
 
 <script setup>

src/components/FwbInput/FwbInput.vue

@@ -17,6 +17,7 @@
         :disabled="disabled"
         :type="type"
         :required="required"
+        :autocomplete="autocomplete"
         :class="[inputClasses, $slots.prefix ? 'pl-10' : '']"
       >
       <div
@@ -47,6 +48,7 @@ import { useVModel } from '@vueuse/core'
 import { twMerge } from 'tailwind-merge'
 import { useInputClasses } from './composables/useInputClasses'
 import {
+  type CommonAutoFill,
   type InputSize,
   type InputType,
   type ValidationStatus,
@@ -60,6 +62,7 @@ interface InputProps {
   required?: boolean
   size?: InputSize
   type?: InputType
+  autocomplete?: CommonAutoFill
   validationStatus?: ValidationStatus
 }
 
@@ -70,6 +73,7 @@ const props = withDefaults(defineProps<InputProps>(), {
   required: false,
   size: 'md',
   type: 'text',
+  autocomplete: 'off',
   validationStatus: undefined,
 })
 

src/components/FwbInput/types.ts

@@ -2,6 +2,9 @@ export type InputSize = 'sm' | 'md' | 'lg'
 
 export type InputType = 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week'
 
+// A simplified version of AutFill, which is to complex for TypeScript to handle
+export type CommonAutoFill = 'on' | 'off' | 'email' | 'tel' | 'name' | 'username' | 'current-password' | 'country' | 'postal-code' | 'language' | 'bday'
+
 export const validationStatusMap = {
   Success: 'success',
   Error: 'error',

src/components/FwbSelect/FwbSelect.vue

@@ -11,6 +11,7 @@
         v-model="model"
         :disabled="disabled"
         :class="selectClasses"
+        :autocomplete="autocomplete"
       >
         <option
           disabled
@@ -48,17 +49,18 @@ import { computed, toRefs } from 'vue'
 import { useVModel } from '@vueuse/core'
 import { twMerge } from 'tailwind-merge'
 import { useSelectClasses } from './composables/useSelectClasses'
-import type { InputSize } from './../FwbInput/types'
+import type { CommonAutoFill, InputSize } from './../FwbInput/types'
 import { type OptionsType, type ValidationStatus, validationStatusMap } from './types'
 
 interface InputProps {
-  modelValue?: string;
-  label?: string;
-  options?: OptionsType[];
-  placeholder?: string;
-  disabled?: boolean;
-  underline?: boolean;
-  size?: InputSize;
+  modelValue?: string
+  label?: string
+  options?: OptionsType[]
+  placeholder?: string
+  disabled?: boolean
+  underline?: boolean
+  size?: InputSize
+  autocomplete?: CommonAutoFill
   validationStatus?: ValidationStatus
 }
 const props = withDefaults(defineProps<InputProps>(), {
@@ -69,6 +71,7 @@ const props = withDefaults(defineProps<InputProps>(), {
   disabled: false,
   underline: false,
   size: 'md',
+  autocomplete: 'off',
   validationStatus: undefined,
 })
 const emit = defineEmits(['update:modelValue'])

src/components/FwbTextarea/FwbTextarea.vue

@@ -8,6 +8,7 @@
         :class="textareaClasses"
         :rows="rows"
         :placeholder="placeholder"
+        :autocomplete="autocomplete"
       />
       <span
         v-if="$slots.footer"
@@ -21,6 +22,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import type { CommonAutoFill } from './../FwbInput/types'
 import { useTextareaClasses } from './composables/useTextareaClasses'
 
 interface TextareaProps {
@@ -29,6 +31,7 @@ interface TextareaProps {
   rows?: number
   custom?: boolean
   placeholder?: string
+  autocomplete?: CommonAutoFill
 }
 
 defineOptions({
@@ -41,6 +44,7 @@ const props = withDefaults(defineProps<TextareaProps>(), {
   rows: 4,
   custom: false,
   placeholder: 'Write your message here...',
+  autocomplete: 'off',
 })
 
 const emit = defineEmits(['update:modelValue'])

src/components/Typography/FwbBlockquote.vue

@@ -1,7 +1,10 @@
 <template>
-    <blockquote :class="blockquoteClasses" :cite="cite">
-        <slot></slot>
-    </blockquote>
+  <blockquote
+    :class="blockquoteClasses"
+    :cite="cite"
+  >
+    <slot />
+  </blockquote>
 </template>
 
 <script lang="ts" setup>