docs(command-palette): disable all autofocus

This commit is contained in:
Benjamin Canac
2025-02-13 16:29:40 +01:00
parent 0c8a272d42
commit 186c024fcb

View File

@@ -58,6 +58,8 @@ You can pass any property from the [Link](/components/link#props) component such
::component-code
---
collapse: true
hide:
- autofocus
ignore:
- groups
- modelValue
@@ -68,6 +70,7 @@ external:
class: '!p-0'
props:
modelValue: {}
autofocus: false
groups:
- id: 'users'
label: 'Users'
@@ -111,6 +114,8 @@ Use the `multiple` prop to allow multiple selections.
::component-code
---
collapse: true
hide:
- autofocus
ignore:
- groups
- modelValue
@@ -122,6 +127,7 @@ external:
class: '!p-0'
props:
multiple: true
autofocus: false
modelValue: []
groups:
- id: 'users'
@@ -170,6 +176,8 @@ Use the `placeholder` prop to change the placeholder text.
::component-code
---
collapse: true
hide:
- autofocus
ignore:
- class
- groups
@@ -177,6 +185,7 @@ external:
- groups
class: '!p-0'
props:
autofocus: false
placeholder: 'Search an app...'
groups:
- id: 'apps'
@@ -198,6 +207,8 @@ Use the `icon` prop to customize the input [Icon](/components/icon). Defaults to
::component-code
---
collapse: true
hide:
- autofocus
ignore:
- class
- groups
@@ -205,6 +216,7 @@ external:
- groups
class: '!p-0'
props:
autofocus: false
icon: 'i-lucide-box'
groups:
- id: 'apps'
@@ -238,6 +250,8 @@ Use the `loading` prop to show a loading icon on the CommandPalette.
::component-code
---
collapse: true
hide:
- autofocus
ignore:
- class
- groups
@@ -245,6 +259,7 @@ external:
- groups
class: '!p-0'
props:
autofocus: false
loading: true
groups:
- id: 'apps'
@@ -266,6 +281,8 @@ Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide
::component-code
---
collapse: true
hide:
- autofocus
ignore:
- class
- groups
@@ -273,6 +290,7 @@ external:
- groups
class: '!p-0'
props:
autofocus: false
loading: true
loadingIcon: 'i-lucide-repeat-2'
groups:
@@ -307,6 +325,8 @@ Use the `disabled` prop to disable the CommandPalette.
::component-code
---
collapse: true
hide:
- autofocus
ignore:
- groups
- class
@@ -314,6 +334,7 @@ external:
- groups
class: '!p-0'
props:
autofocus: false
disabled: true
groups:
- id: 'apps'
@@ -339,6 +360,8 @@ An `update:open` event will be emitted when the close button is clicked.
::component-code
---
collapse: true
hide:
- autofocus
ignore:
- class
- groups
@@ -347,6 +370,7 @@ external:
- groups
class: '!p-0'
props:
autofocus: false
close: true
groups:
- id: 'apps'
@@ -367,6 +391,8 @@ You can pass any property from the [Button](/components/button) component to cus
---
collapse: true
prettier: true
hide:
- autofocus
ignore:
- close.color
- close.variant
@@ -376,6 +402,7 @@ external:
- groups
class: '!p-0'
props:
autofocus: false
close:
color: primary
variant: outline
@@ -400,6 +427,8 @@ Use the `close-icon` prop to customize the close button [Icon](/components/icon)
::component-code
---
collapse: true
hide:
- autofocus
ignore:
- class
- groups
@@ -408,6 +437,7 @@ external:
- groups
class: '!p-0'
props:
autofocus: false
close: true
closeIcon: 'i-lucide-arrow-right'
groups:
@@ -446,6 +476,8 @@ You can control the selected item(s) by using the `default-value` prop or the `v
collapse: true
name: 'command-palette-select-example'
class: '!p-0'
props:
autofocus: false
---
::
@@ -458,6 +490,8 @@ Use the `v-model:search-term` directive to control the search term.
collapse: true
name: 'command-palette-search-term-example'
class: '!p-0'
props:
autofocus: false
---
::
@@ -474,6 +508,8 @@ You can fetch items from an API and use them in the CommandPalette.
collapse: true
name: 'command-palette-fetch-example'
class: '!p-0'
props:
autofocus: false
---
::
@@ -486,6 +522,8 @@ You can set the `ignoreFilter` field to `true` on a group to disable the interna
collapse: true
name: 'command-palette-ignore-filter-example'
class: '!p-0'
props:
autofocus: false
---
::
@@ -502,6 +540,8 @@ You can use the `postFilter` field on a group to filter items after the search h
collapse: true
name: 'command-palette-post-filter-example'
class: '!p-0'
props:
autofocus: false
---
::
@@ -536,6 +576,8 @@ You can for example set `{ fuseOptions: { includeMatches: true } }`{lang="ts-typ
collapse: true
name: 'command-palette-fuse-example'
class: '!p-0'
props:
autofocus: false
---
::
@@ -547,6 +589,8 @@ You can use the CommandPalette component inside a [Popover](/components/popover)
---
collapse: true
name: 'popover-command-palette-example'
props:
autofocus: false
---
::
@@ -558,6 +602,8 @@ You can use the CommandPalette component inside a [Modal](/components/modal)'s c
---
collapse: true
name: 'modal-command-palette-example'
props:
autofocus: false
---
::
@@ -569,6 +615,8 @@ You can use the CommandPalette component inside a [Drawer](/components/drawer)'s
---
collapse: true
name: 'drawer-command-palette-example'
props:
autofocus: false
---
::
@@ -580,6 +628,8 @@ When using the `close` prop, you can listen to the `update:open` event when the
---
collapse: true
name: 'command-palette-open-example'
props:
autofocus: false
---
::
@@ -607,6 +657,8 @@ You will have access to the following slots:
---
name: 'command-palette-custom-slot-example'
class: '!p-0'
props:
autofocus: false
---
::