From 130a1f2c548b185bde5017ee33b07e50b1603393 Mon Sep 17 00:00:00 2001 From: Benjamin Canac Date: Thu, 1 Jun 2023 15:29:02 +0200 Subject: [PATCH] docs: improve slots sections --- .../examples/InputExampleClearable.vue | 18 +++++ docs/content/2.elements/3.button.md | 42 +++++++++++ docs/content/3.forms/1.input.md | 69 +++++++++++++++++++ docs/content/3.forms/3.select.md | 40 +++++++++++ docs/content/3.forms/4.select-menu.md | 4 +- docs/content/4.data/1.table.md | 4 +- docs/content/7.layout/1.card.md | 4 -- 7 files changed, 173 insertions(+), 8 deletions(-) create mode 100644 docs/components/content/examples/InputExampleClearable.vue diff --git a/docs/components/content/examples/InputExampleClearable.vue b/docs/components/content/examples/InputExampleClearable.vue new file mode 100644 index 00000000..7c8df799 --- /dev/null +++ b/docs/components/content/examples/InputExampleClearable.vue @@ -0,0 +1,18 @@ + + + diff --git a/docs/content/2.elements/3.button.md b/docs/content/2.elements/3.button.md index 8d86cb33..ff03b6fe 100644 --- a/docs/content/2.elements/3.button.md +++ b/docs/content/2.elements/3.button.md @@ -275,6 +275,48 @@ code: | :u-button{icon="i-heroicons-chevron-down-20-solid" color="gray"} :: +## Slots + +### `leading` + +Use the `#leading` slot to set the content of the leading icon. + +::component-card +--- +slots: + leading: +baseProps: + color: 'gray' +props: + label: Button + color: 'gray' +excludedProps: + - color +--- + +#leading + :u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" size="3xs"} +:: + +### `trailing` + +Use the `#trailing` slot to set the content of the trailing icon. + +::component-card +--- +slots: + trailing: +props: + label: Button + color: 'gray' +excludedProps: + - color +--- + +#trailing + :u-icon{name="i-heroicons-arrow-right-20-solid"} +:: + ## Props :component-props diff --git a/docs/content/3.forms/1.input.md b/docs/content/3.forms/1.input.md index c966d6ae..4615aa0f 100644 --- a/docs/content/3.forms/1.input.md +++ b/docs/content/3.forms/1.input.md @@ -142,6 +142,75 @@ excludedProps: --- :: +## Slots + +### `leading` + +Use the `#leading` slot to set the content of the leading icon. + +::component-card +--- +slots: + leading: +baseProps: + name: 'input' + placeholder: 'Search...' +--- + +#leading + :u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" size="3xs"} +:: + +### `trailing` + +Use the `#trailing` slot to set the content of the trailing icon. + +::component-card +--- +slots: + trailing: EUR +baseProps: + name: 'input' + placeholder: 'Search...' +--- + +#trailing + [EUR]{class="text-gray-500 dark:text-gray-400 text-xs"} +:: + +You can for example create a clearable Input by injecting a [Button](/elements/button) in the `trailing` slot that displays when some text is entered. + +::component-example +#default +:input-example-clearable + +#code +```vue + + + +``` +:: + +::alert{icon="i-heroicons-exclamation-triangle-20-solid"} +As leading and trailing icons are wrapped around a `pointer-events-none` class, if you inject a clickable element in the slot, you need to remove this class to make it clickable by adding `:ui="{ icon: { trailing: { pointer: '' } } }"` to the Input. +:: + ## Props :component-props diff --git a/docs/content/3.forms/3.select.md b/docs/content/3.forms/3.select.md index 70a230be..7a08a509 100644 --- a/docs/content/3.forms/3.select.md +++ b/docs/content/3.forms/3.select.md @@ -180,6 +180,46 @@ excludedProps: --- :: +## Slots + +### `leading` + +Use the `#leading` slot to set the content of the leading icon. + +::component-card +--- +slots: + leading: +baseProps: + name: 'select' + options: + - 'United States' + - 'Canada' + - 'Mexico' + placeholder: 'Search...' +--- + +#leading + :u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" size="3xs"} +:: + +### `trailing` + +Use the `#trailing` slot to set the content of the trailing icon. + +::component-card +--- +slots: + trailing: +baseProps: + name: 'input' + placeholder: 'Search...' +--- + +#trailing + :u-icon{name="i-heroicons-arrows-up-down-20-solid"} +:: + ## Props :component-props diff --git a/docs/content/3.forms/4.select-menu.md b/docs/content/3.forms/4.select-menu.md index e21b8693..7d6fe165 100644 --- a/docs/content/3.forms/4.select-menu.md +++ b/docs/content/3.forms/4.select-menu.md @@ -150,7 +150,7 @@ props: ## Slots -### `#label` +### `label` You can override the `#label` slot and handle the display yourself. @@ -177,7 +177,7 @@ const selected = ref([]) ``` :: -### `#default` +### `default` You can also override the `#default` slot entirely. diff --git a/docs/content/4.data/1.table.md b/docs/content/4.data/1.table.md index d4ebbcca..89ae743a 100644 --- a/docs/content/4.data/1.table.md +++ b/docs/content/4.data/1.table.md @@ -403,7 +403,7 @@ excludedProps: You can use slots to customize the header and data cells of the table. -### `#-header` +### `-header` Use the `#-header` slot to customize the header cell of a column. You will have access to the `column`, `sort` and `on-sort` properties in the slot scope. @@ -418,7 +418,7 @@ The `on-sort` property is a function that you can call to sort the table and acc Even though you can customize the sort button as mentioned in the [Sortable](#sortable) section, you can use this slot to completely override its behavior, with a custom dropdown for example. :: -### `#-data` +### `-data` Use the `#-data` slot to customize the data cell of a column. You will have access to the `row` and `column` properties in the slot scope. diff --git a/docs/content/7.layout/1.card.md b/docs/content/7.layout/1.card.md index 4ddc6bfc..f4558e5a 100644 --- a/docs/content/7.layout/1.card.md +++ b/docs/content/7.layout/1.card.md @@ -27,10 +27,6 @@ description: Display a card for content with a header, body and footer. :component-props -## Slots - -:component-slots - ## Preset :component-preset