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 ::component-code
--- ---
collapse: true collapse: true
hide:
- autofocus
ignore: ignore:
- groups - groups
- modelValue - modelValue
@@ -68,6 +70,7 @@ external:
class: '!p-0' class: '!p-0'
props: props:
modelValue: {} modelValue: {}
autofocus: false
groups: groups:
- id: 'users' - id: 'users'
label: 'Users' label: 'Users'
@@ -111,6 +114,8 @@ Use the `multiple` prop to allow multiple selections.
::component-code ::component-code
--- ---
collapse: true collapse: true
hide:
- autofocus
ignore: ignore:
- groups - groups
- modelValue - modelValue
@@ -122,6 +127,7 @@ external:
class: '!p-0' class: '!p-0'
props: props:
multiple: true multiple: true
autofocus: false
modelValue: [] modelValue: []
groups: groups:
- id: 'users' - id: 'users'
@@ -170,6 +176,8 @@ Use the `placeholder` prop to change the placeholder text.
::component-code ::component-code
--- ---
collapse: true collapse: true
hide:
- autofocus
ignore: ignore:
- class - class
- groups - groups
@@ -177,6 +185,7 @@ external:
- groups - groups
class: '!p-0' class: '!p-0'
props: props:
autofocus: false
placeholder: 'Search an app...' placeholder: 'Search an app...'
groups: groups:
- id: 'apps' - id: 'apps'
@@ -198,6 +207,8 @@ Use the `icon` prop to customize the input [Icon](/components/icon). Defaults to
::component-code ::component-code
--- ---
collapse: true collapse: true
hide:
- autofocus
ignore: ignore:
- class - class
- groups - groups
@@ -205,6 +216,7 @@ external:
- groups - groups
class: '!p-0' class: '!p-0'
props: props:
autofocus: false
icon: 'i-lucide-box' icon: 'i-lucide-box'
groups: groups:
- id: 'apps' - id: 'apps'
@@ -238,6 +250,8 @@ Use the `loading` prop to show a loading icon on the CommandPalette.
::component-code ::component-code
--- ---
collapse: true collapse: true
hide:
- autofocus
ignore: ignore:
- class - class
- groups - groups
@@ -245,6 +259,7 @@ external:
- groups - groups
class: '!p-0' class: '!p-0'
props: props:
autofocus: false
loading: true loading: true
groups: groups:
- id: 'apps' - id: 'apps'
@@ -266,6 +281,8 @@ Use the `loading-icon` prop to customize the loading icon. Defaults to `i-lucide
::component-code ::component-code
--- ---
collapse: true collapse: true
hide:
- autofocus
ignore: ignore:
- class - class
- groups - groups
@@ -273,6 +290,7 @@ external:
- groups - groups
class: '!p-0' class: '!p-0'
props: props:
autofocus: false
loading: true loading: true
loadingIcon: 'i-lucide-repeat-2' loadingIcon: 'i-lucide-repeat-2'
groups: groups:
@@ -307,6 +325,8 @@ Use the `disabled` prop to disable the CommandPalette.
::component-code ::component-code
--- ---
collapse: true collapse: true
hide:
- autofocus
ignore: ignore:
- groups - groups
- class - class
@@ -314,6 +334,7 @@ external:
- groups - groups
class: '!p-0' class: '!p-0'
props: props:
autofocus: false
disabled: true disabled: true
groups: groups:
- id: 'apps' - id: 'apps'
@@ -339,6 +360,8 @@ An `update:open` event will be emitted when the close button is clicked.
::component-code ::component-code
--- ---
collapse: true collapse: true
hide:
- autofocus
ignore: ignore:
- class - class
- groups - groups
@@ -347,6 +370,7 @@ external:
- groups - groups
class: '!p-0' class: '!p-0'
props: props:
autofocus: false
close: true close: true
groups: groups:
- id: 'apps' - id: 'apps'
@@ -367,6 +391,8 @@ You can pass any property from the [Button](/components/button) component to cus
--- ---
collapse: true collapse: true
prettier: true prettier: true
hide:
- autofocus
ignore: ignore:
- close.color - close.color
- close.variant - close.variant
@@ -376,6 +402,7 @@ external:
- groups - groups
class: '!p-0' class: '!p-0'
props: props:
autofocus: false
close: close:
color: primary color: primary
variant: outline variant: outline
@@ -400,6 +427,8 @@ Use the `close-icon` prop to customize the close button [Icon](/components/icon)
::component-code ::component-code
--- ---
collapse: true collapse: true
hide:
- autofocus
ignore: ignore:
- class - class
- groups - groups
@@ -408,6 +437,7 @@ external:
- groups - groups
class: '!p-0' class: '!p-0'
props: props:
autofocus: false
close: true close: true
closeIcon: 'i-lucide-arrow-right' closeIcon: 'i-lucide-arrow-right'
groups: groups:
@@ -446,6 +476,8 @@ You can control the selected item(s) by using the `default-value` prop or the `v
collapse: true collapse: true
name: 'command-palette-select-example' name: 'command-palette-select-example'
class: '!p-0' class: '!p-0'
props:
autofocus: false
--- ---
:: ::
@@ -458,6 +490,8 @@ Use the `v-model:search-term` directive to control the search term.
collapse: true collapse: true
name: 'command-palette-search-term-example' name: 'command-palette-search-term-example'
class: '!p-0' 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 collapse: true
name: 'command-palette-fetch-example' name: 'command-palette-fetch-example'
class: '!p-0' 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 collapse: true
name: 'command-palette-ignore-filter-example' name: 'command-palette-ignore-filter-example'
class: '!p-0' 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 collapse: true
name: 'command-palette-post-filter-example' name: 'command-palette-post-filter-example'
class: '!p-0' class: '!p-0'
props:
autofocus: false
--- ---
:: ::
@@ -536,6 +576,8 @@ You can for example set `{ fuseOptions: { includeMatches: true } }`{lang="ts-typ
collapse: true collapse: true
name: 'command-palette-fuse-example' name: 'command-palette-fuse-example'
class: '!p-0' class: '!p-0'
props:
autofocus: false
--- ---
:: ::
@@ -547,6 +589,8 @@ You can use the CommandPalette component inside a [Popover](/components/popover)
--- ---
collapse: true collapse: true
name: 'popover-command-palette-example' 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 collapse: true
name: 'modal-command-palette-example' 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 collapse: true
name: 'drawer-command-palette-example' 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 collapse: true
name: 'command-palette-open-example' 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' name: 'command-palette-custom-slot-example'
class: '!p-0' class: '!p-0'
props:
autofocus: false
--- ---
:: ::