From 186c024fcbe912c5ee067bd76b81906cadad4be3 Mon Sep 17 00:00:00 2001 From: Benjamin Canac Date: Thu, 13 Feb 2025 16:29:40 +0100 Subject: [PATCH] docs(command-palette): disable all autofocus --- docs/content/3.components/command-palette.md | 52 ++++++++++++++++++++ 1 file changed, 52 insertions(+) diff --git a/docs/content/3.components/command-palette.md b/docs/content/3.components/command-palette.md index 96d9acd3..0e37e146 100644 --- a/docs/content/3.components/command-palette.md +++ b/docs/content/3.components/command-palette.md @@ -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 --- ::