Skip to content

Commit

Permalink
Merge branch 'esds-3.0-vue3-primevue' into ced-1785-es-form-v3
Browse files Browse the repository at this point in the history
  • Loading branch information
hroth1994 authored Oct 2, 2024
2 parents 3e57aca + d3f400b commit 5f7c800
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 3 deletions.
18 changes: 18 additions & 0 deletions es-ds-components/components/es-button.vue
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,16 @@ const props = defineProps({
type: Boolean,
default: true,
},
// Url when using button as a link
href: {
type: String,
default: null,
},
// Url when using button as a link to an internal page
to: {
type: String,
default: null,
},
});
const getRootClasses = computed(() => {
Expand All @@ -73,7 +83,15 @@ const getRootClasses = computed(() => {
</script>

<template>
<nuxt-link
v-if="props.href || props.to"
:href="props.href || undefined"
:to="props.to || undefined"
:class="getRootClasses">
<slot />
</nuxt-link>
<prime-button
v-else
:pt="{
root: { class: getRootClasses },
}">
Expand Down
14 changes: 11 additions & 3 deletions es-ds-docs/pages/molecules/button.vue
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ const linkExamples = ref([
]);
const propTableRows = ref([
['href', 'String', 'null', 'An external URL to navigate to when using a button as a link.'],
[
'inline',
'Boolean',
Expand All @@ -78,6 +79,7 @@ const propTableRows = ref([
],
['outline', 'Boolean', 'false', 'If true, changes to the outline version of the specified variant.'],
['size', 'String', '"md"', "The size of the button: 'md', or 'sm'."],
['to', 'String', 'null', 'An internal path to navigate to when using a button as a link'],
['variant', 'String', '"primary"', "The name of the desired button variant: 'primary', 'dark-bg', or 'link'."],
]);
Expand Down Expand Up @@ -107,11 +109,17 @@ onMounted(async () => {
<h1>Button</h1>
<p>
Extended from
<a
<nuxt-link
href="https://v3.primevue.org/button/"
target="_blank">
primevue button
</a>
PrimeVue Button
</nuxt-link>
and
<nuxt-link
href="https://nuxt.com/docs/api/components/nuxt-link"
target="_blank">
NuxtLink
</nuxt-link>
</p>
<p>
When using a button, please ensure that the copy style is
Expand Down

0 comments on commit 5f7c800

Please sign in to comment.