diff --git a/docs/content/2.elements/1.accordion.md b/docs/content/2.elements/1.accordion.md index 90b2ac8426..3124fc2b41 100644 --- a/docs/content/2.elements/1.accordion.md +++ b/docs/content/2.elements/1.accordion.md @@ -7,8 +7,6 @@ links: - label: Disclosure icon: i-simple-icons-headlessui to: 'https://headlessui.com/vue/disclosure' -navigation: - badge: New --- ## Usage diff --git a/docs/content/2.elements/2.alert.md b/docs/content/2.elements/2.alert.md index 5952342d52..e02f0f86ae 100644 --- a/docs/content/2.elements/2.alert.md +++ b/docs/content/2.elements/2.alert.md @@ -5,7 +5,7 @@ links: icon: i-simple-icons-github to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/elements/Alert.vue navigation: - badge: Edge + badge: New --- ## Usage diff --git a/docs/content/2.elements/4.badge.md b/docs/content/2.elements/4.badge.md index 6a9b5e80fe..c7c2d5e749 100644 --- a/docs/content/2.elements/4.badge.md +++ b/docs/content/2.elements/4.badge.md @@ -31,7 +31,7 @@ props: Use the `color` and `variant` props to change the visual style of the Badge. -- `variant` can be `solid` (default), `outline`, `soft` or `subtle`. +- `variant` can be `solid` (default), `outline`, `soft` or `subtle`. :u-badge{label="New" class="!rounded-full" variant="subtle"} ::component-card --- @@ -45,7 +45,7 @@ Badge Besides all the colors from the `ui.colors` object, you can also use the `white` and `black` colors with their pre-defined variants. -#### White :u-badge{label="Edge" class="ml-2 align-text-bottom !rounded-full" variant="subtle"} +#### White :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full" variant="subtle"} ::component-card --- @@ -62,7 +62,7 @@ excludedProps: Badge :: -#### Gray :u-badge{label="Edge" class="ml-2 align-text-bottom !rounded-full" variant="subtle"} +#### Gray :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full" variant="subtle"} ::component-card --- @@ -79,7 +79,7 @@ excludedProps: Badge :: -#### Black :u-badge{label="Edge" class="ml-2 align-text-bottom !rounded-full" variant="subtle"} +#### Black :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full" variant="subtle"} ::component-card --- diff --git a/docs/content/2.elements/9.link.md b/docs/content/2.elements/9.link.md index 788983c1d6..6e859f129d 100644 --- a/docs/content/2.elements/9.link.md +++ b/docs/content/2.elements/9.link.md @@ -6,7 +6,7 @@ links: icon: i-simple-icons-github to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/elements/Link.vue navigation: - badge: Edge + badge: New --- ## Usage diff --git a/docs/content/3.forms/10.form.md b/docs/content/3.forms/10.form.md index 10a7375d43..c392f5c908 100644 --- a/docs/content/3.forms/10.form.md +++ b/docs/content/3.forms/10.form.md @@ -5,7 +5,7 @@ links: icon: i-simple-icons-github to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/forms/Form.ts navigation: - badge: Edge + badge: New --- ## Usage diff --git a/docs/content/3.forms/4.select-menu.md b/docs/content/3.forms/4.select-menu.md index 3c49ad9311..8035bcfae7 100644 --- a/docs/content/3.forms/4.select-menu.md +++ b/docs/content/3.forms/4.select-menu.md @@ -108,7 +108,7 @@ const selected = ref(people[0]) ``` :: -If you only want to select a single object property rather than the whole object as value, you can set the `value-attribute` property. This prop defaults to `null`. :u-badge{label="Edge" class="!rounded-full" variant="subtle"} +If you only want to select a single object property rather than the whole object as value, you can set the `value-attribute` property. This prop defaults to `null`. :u-badge{label="New" class="!rounded-full" variant="subtle"} ::component-example #default @@ -193,7 +193,7 @@ props: --- :: -### Async search :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full" variant="subtle"} +### Async search Pass a function to the `searchable` prop to customize the search behavior and filter options according to your needs. The function will receive the query as its first argument and should return an array. diff --git a/docs/content/3.forms/9.form-group.md b/docs/content/3.forms/9.form-group.md index 5d28915b3c..51d9a183e6 100644 --- a/docs/content/3.forms/9.form-group.md +++ b/docs/content/3.forms/9.form-group.md @@ -134,7 +134,7 @@ You can also use the `error` prop as a boolean to mark the form element as inval The `error` prop will automatically set the `color` prop of the form element to `red`. :: -### Size :u-badge{label="Edge" class="ml-2 align-text-bottom !rounded-full" variant="subtle"} +### Size :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full" variant="subtle"} Use the `size` prop to change the size of the label and the form element. diff --git a/docs/content/4.data/1.table.md b/docs/content/4.data/1.table.md index c3418ff618..357cc28efc 100644 --- a/docs/content/4.data/1.table.md +++ b/docs/content/4.data/1.table.md @@ -75,7 +75,7 @@ Use the `columns` prop to configure which columns to display. It's an array of o - `key` - The field to display from the row data. - `sortable` - Whether the column is sortable. Defaults to `false`. - `direction` - The sort direction to use on first click. Defaults to `asc`. -- `class` :u-badge{label="New" class="!rounded-full" variant="subtle"} - The class to apply to the column cells. +- `class` - The class to apply to the column cells. ::component-example{class="grid"} --- @@ -327,7 +327,7 @@ const selected = ref([people[1]]) You can use the `by` prop to compare objects by a field instead of comparing object instances. We've replicated the behavior of Headless UI [Combobox](https://headlessui.com/vue/combobox#binding-objects-as-values). :: -You can also add a `select` listener on your Table to make the rows clickable. The function will receive the row as the first argument. :u-badge{label="New" class="!rounded-full" variant="subtle"} +You can also add a `select` listener on your Table to make the rows clickable. The function will receive the row as the first argument. You can use this to navigate to a page, open a modal or even to select the row manually. diff --git a/docs/content/5.navigation/4.tabs.md b/docs/content/5.navigation/4.tabs.md index b90d24da2c..43110faac0 100644 --- a/docs/content/5.navigation/4.tabs.md +++ b/docs/content/5.navigation/4.tabs.md @@ -5,7 +5,7 @@ links: icon: i-simple-icons-github to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/navigation/Tabs.vue navigation: - badge: Edge + badge: New --- ## Usage diff --git a/docs/content/6.overlays/1.modal.md b/docs/content/6.overlays/1.modal.md index 505c2f55a2..ccc431881a 100644 --- a/docs/content/6.overlays/1.modal.md +++ b/docs/content/6.overlays/1.modal.md @@ -125,7 +125,7 @@ const isOpen = ref(false) ``` :: -### Prevent close :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full" variant="subtle"} +### Prevent close Use the `prevent-close` prop to disable the outside click alongside the `esc` keyboard shortcut. diff --git a/docs/content/6.overlays/2.slideover.md b/docs/content/6.overlays/2.slideover.md index 132a17bb6b..0de3445250 100644 --- a/docs/content/6.overlays/2.slideover.md +++ b/docs/content/6.overlays/2.slideover.md @@ -124,7 +124,7 @@ const isOpen = ref(false) ``` :: -### Prevent close :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full" variant="subtle"} +### Prevent close Use the `prevent-close` prop to disable the outside click alongside the `esc` keyboard shortcut. diff --git a/docs/content/6.overlays/6.notification.md b/docs/content/6.overlays/6.notification.md index 99bac5d4f3..d45cb8feb0 100644 --- a/docs/content/6.overlays/6.notification.md +++ b/docs/content/6.overlays/6.notification.md @@ -316,7 +316,7 @@ excludedProps: ## Slots -### `title` / `description` :u-badge{label="Edge" class="ml-2 align-text-bottom !rounded-full" variant="subtle"} +### `title` / `description` :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full" variant="subtle"} Use the `#title` and `#description` slots to customize the Notification.