diff --git a/docs/app/components/content/examples/description-list/DescriptionListLinkExample.vue b/docs/app/components/content/examples/description-list/DescriptionListLinkExample.vue new file mode 100644 index 000000000..1173c6561 --- /dev/null +++ b/docs/app/components/content/examples/description-list/DescriptionListLinkExample.vue @@ -0,0 +1,25 @@ + + + diff --git a/docs/content/docs/2.components/description-list.md b/docs/content/docs/2.components/description-list.md index 9d222d249..d876e39e7 100644 --- a/docs/content/docs/2.components/description-list.md +++ b/docs/content/docs/2.components/description-list.md @@ -22,6 +22,8 @@ Use the `items` prop as an array of objects to control the value of the Descript - [`actions?: ButtonProps[]`{lang="ts-type"}](#with-actions-in-items) - [`orientation?: "horizontal" | "vertical"`{lang="ts-type"}](#with-actions-in-items) - [`slot?: string`{lang="ts-type"}](#with-custom-slot) +- [`to?: RouteLocationRaw | string`{lang="ts-type"}](#with-link-in-items) +- [`target?: "_blank" | "_self" | "_parent" | "_top"`{lang="ts-type"}](#with-link-in-items) - `class?: any`{lang="ts-type"} - `b24ui?: { labelWrapper?: ClassNameValue, icon?: ClassNameValue, avatar?: ClassNameValue, label?: ClassNameValue, descriptionWrapper?: ClassNameValue, description?: ClassNameValue, actions?: ClassNameValue }`{lang="ts-type"} @@ -231,6 +233,17 @@ name: 'description-list-custom-slot-example' --- :: +### With link in items + +Use the `to` property on an item to render the description as a [Link](/docs/components/link/). Pair it with `target: '_blank'` for external destinations. Items that set their own `slot` are not affected. + +::component-example +--- +collapse: true +name: 'description-list-link-example' +--- +:: + ## API ### Props diff --git a/playgrounds/demo/app/pages/components/description-list.vue b/playgrounds/demo/app/pages/components/description-list.vue index 8bbf29b84..83d82ed94 100644 --- a/playgrounds/demo/app/pages/components/description-list.vue +++ b/playgrounds/demo/app/pages/components/description-list.vue @@ -120,7 +120,7 @@ const itemsIcons: DescriptionListItem[] = [ label: 'Line 1.1', description: 'Description 1.1', avatar: { - src: '/b24ui/demo/avatar/employee.png' + src: '/avatar/employee.png' } }, { @@ -141,6 +141,24 @@ const itemsIcons: DescriptionListItem[] = [ } ] +const itemsLink: DescriptionListItem[] = [ + { + label: 'Account manager', + description: 'Sample owner', + to: '/users/owner' + }, + { + label: 'External profile', + description: 'View on partner portal', + to: 'https://example.com', + target: '_blank' + }, + { + label: 'Created', + description: 'Oct 6, 2024 08:37' + } +] + const itemsCustom: (DescriptionListItem & { value?: Date | string })[] = [ { label: 'Amount', @@ -198,6 +216,17 @@ const itemsCustom: (DescriptionListItem & { value?: Date | string })[] = [ + + +
+ +
+
+
diff --git a/playgrounds/nuxt/app/pages/components/description-list.vue b/playgrounds/nuxt/app/pages/components/description-list.vue index 97940d5c2..83d82ed94 100644 --- a/playgrounds/nuxt/app/pages/components/description-list.vue +++ b/playgrounds/nuxt/app/pages/components/description-list.vue @@ -141,6 +141,24 @@ const itemsIcons: DescriptionListItem[] = [ } ] +const itemsLink: DescriptionListItem[] = [ + { + label: 'Account manager', + description: 'Sample owner', + to: '/users/owner' + }, + { + label: 'External profile', + description: 'View on partner portal', + to: 'https://example.com', + target: '_blank' + }, + { + label: 'Created', + description: 'Oct 6, 2024 08:37' + } +] + const itemsCustom: (DescriptionListItem & { value?: Date | string })[] = [ { label: 'Amount', @@ -198,6 +216,17 @@ const itemsCustom: (DescriptionListItem & { value?: Date | string })[] = [
+ + +
+ +
+
+
diff --git a/src/runtime/components/DescriptionList.vue b/src/runtime/components/DescriptionList.vue index c449eb2f4..0631979d7 100644 --- a/src/runtime/components/DescriptionList.vue +++ b/src/runtime/components/DescriptionList.vue @@ -1,6 +1,7 @@