ui

A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.

MIT License

Downloads
209.6K
Stars
3.3K
Committers
150
View Code on GitHub Visit Website Twitter
Ecosystems: Vue.js, Tailwind CSS, Nuxt.js

Bot releases are hidden (Show)

ui - v2.15.2 Latest Release

Published by benjamincanac 6 months ago

🚀 Enhancements

  • Accordion: add unmount prop to allow lazy mounting for heavy components (#1590) (91e5002)
  • Table: add checkbox ui config (#1409) (8b54660)

🐛 Bug Fixes

  • Breadcrumb: missing min-w-0 on wrapper to truncate (9f01145), closes #1650
  • Carousel: next and prev buttons disabled (#1619) (e909884)
  • Popover/Dropdown: prevent unintended closure on touchstart in mobile devices (#1609) (2392b4a)
  • Modal: wait for transition to complete to reset state (#1618) (2bdb5d2)
  • Slideover: remove dynamic component when closing (#1615) (58faa10)
  • Slideover: wait for transition to complete to reset state (#1624) (07a4d13)

👋 New Contributors

Full Changelog: https://github.com/nuxt/ui/compare/v2.15.1...v2.15.2

ui - v2.15.1

Published by benjamincanac 7 months ago

🚀 Enhancements

  • Avatar: add as prop to use NuxtImg underneath (49b73aa), closes #1577

🐛 Bug Fixes

  • Checkbox: @change event value (#1580) (c98d6e3)
  • Divider: add w-full only on horizontal wrapper (#1565) (bd8b737)
  • Dropdown: missing mouseenter event on container (7288953)
  • Input/SelectMenu: handle file type and change events (#1570) (878f707)
  • Popover: missing mouseenter event on container (8517897), closes #1564

👋 New Contributors

Full Changelog: https://github.com/nuxt/ui/compare/v2.15.0...v2.15.1

ui - v2.15.0

Published by benjamincanac 7 months ago

Read our updated documentation on https://ui.nuxt.com/.

This is a smaller update than usual but as you might know we're hard at work making the next major release of Nuxt UI, you can read more about it in #1289.

⚠️ Breaking Changes

  • forms: normalize input emits (#1560)

This PR includes a small breaking change on the URange, USelect and UCheckbox components: the @change event's payload is now the input's value instead of the HTML event to match other inputs.

🚀 Features

🐛 Bug Fixes

  • ButtonGroup: nested group elements (#1530) (7658211)
  • Carousel: add tab-based ARIA roles (#1516) (e736eca)
  • Checkbox: bind data-n-ids to root element (#1495) (a2b8b70)
  • forms: normalize input emits (#1560) (92e7362)
  • InputMenu: trigger alignement on safari (f4a48f6), closes #1505
  • module: opt in to import.meta.* properties (#1561) (cc62e34)
  • Popover/Dropdown: use @touchstart.passive instead of @touchstart.prevent (#1520) (a563d8f)
  • SelectMenu: filteredOptions might be undefined (#1541) (b0ecac5)
  • SelectMenu: handle Boolean type as model value (#1550) (c49f899)

👋 New Contributors

Full Changelog: https://github.com/nuxt/ui/compare/v2.14.2...v2.15.0

ui - v2.14.2

Published by benjamincanac 8 months ago

🐛 Bug Fixes

  • Alert: improve description alignment when no title provided (ca4f06a), closes #1408
  • Checkbox: label interaction without FormGroup (#1427) (6e77f1d)
  • Dropdown: active/inactive dropdown links (#1407) (6a1142b)
  • Dropdown: improve hover mode on touch devices (70bf4a7)
  • HorizontalNavigation: add relative class to icon (0a4a9e3)
  • Modal: remove overflow-hidden (#1460) (002129c)
  • Notification: improve description alignment when no title provided (9cce445)
  • Popover: improve hover mode on touch devices (b50fbcf)
  • RadioGroup: add missing fieldset config (2d64b50), closes #1472
  • SelectMenu: check null model value (4b6e80e), closes #1421
  • Tooltip: arrow not hidden on mobile (272c19d), closes #1470
  • VerticalNavigation: add relative class to icon (0b29dd4), closes #1245

👋 New Contributors

Full Changelog: https://github.com/nuxt/ui/compare/v2.14.1...v2.14.2

ui - v2.14.1

Published by benjamincanac 8 months ago

🐛 Bug Fixes

Full Changelog: https://github.com/nuxt/ui/compare/v2.14.0...v2.14.1

ui - v2.14.0

Published by benjamincanac 8 months ago

Read our updated documentation on https://ui.nuxt.com.

🚀 Features

🐛 Bug Fixes

  • Alert: remove required title to prevent warning when using slot (e545b6f)
  • Card: prevent body padding without default slot (f682905)
  • components: hydration attribute mismatch with vue 3.4 (#1199) (10db144)
  • Form: improve validate path type (#1370) (5266591)
  • Form: return false when silent validation fails (#1371) (d4b6147)
  • Link: check disabled prop before navigating (#1321) (ac42ec1)
  • Meter: missing import of Icon component (f8b296f), closes #1328
  • module: prevent tailwind warn with bun (bb40c31), closes #809
  • module: put back all option in icons plugin (412cd75), closes #1237
  • Notification: remove required title to prevent warning when using slot (aa2b1ca)
  • Progress: prevent NaN percent display when indeterminate (a55a08a)
  • RadioGroup: pass help prop to radio children (5a5b284), closes #1313
  • utils: prevent merge of popper key (9f35297), closes #1393

👋 New Contributors

Full Changelog: https://github.com/nuxt/ui/compare/v2.13.0...v2.14.0

ui - v2.13.0

Published by benjamincanac 9 months ago

Read our updated documentation on https://ui.nuxt.com.

✨ Highlights

Carousel component

The Carousel component allows you to display images or content in a scrollable area and comes with drag to scroll support, navigation buttons, indicators, etc.

CleanShot 2024-01-29 at 21 15 00@2x

HorizontalNavigation component

Much like the VerticalNavigation, the HorizontalNavigation component comes in handy when you need to display a list of horizontal links.

CleanShot 2024-01-29 at 21 14 41@2x

🎨 Design consistency

We've updated the Breadcrumb, CommandPalette, Dropdown, InputMenu, SelectMenu and VerticalNavigation components config to be consistent with the Button default sm size.

If you take a look at this example with many components, you can see that everything is now perfectly aligned and has the same size:

<template>
  <UContainer class="min-h-screen flex items-center">
    <div class="w-80 space-y-2">
      <UCommandPalette :groups="[{ key: 'links', commands: links }]" :searchable="false" class="-mx-2" />
      <UVerticalNavigation :links="links" />
      <UHorizontalNavigation :links="links" />
      <UInput :icon="selected.icon" :options="links" :placeholder="selected.label" />
      <UInputMenu v-model="selected" :icon="selected.icon" :options="links" />
      <USelect :icon="selected.icon" :options="links" :placeholder="selected.label" />
      <USelectMenu v-model="selected" :icon="selected.icon" :options="links" />
      <UDropdown :items="[links]" :popper="{ placement: 'bottom-start' }" class="w-full">
        <UButton color="white" :icon="selected.icon" :label="selected.label" class="w-full" />
      </UDropdown>
      <UBreadcrumb :links="links" class="ml-2.5" />
      <UAccordion :items="links" color="gray" variant="ghost" />
    </div>
  </UContainer>
</template>

<script setup>
const links = [{
  label: 'Installation',
  icon: 'i-heroicons-home',
  to: '/getting-started/installation'
}, {
  label: 'Vertical Navigation',
  icon: 'i-heroicons-chart-bar',
  to: '/navigation/vertical-navigation'
}, {
  label: 'Command Palette',
  icon: 'i-heroicons-command-line',
  to: '/navigation/command-palette'
}]
const selected = ref(links[0])
</script>

Release v2.13

It is not shown by the screenshot but labels and icons inside the Dropdown / InputMenu / SelectMenu menus now also match.

Here's the list of commits if you want to know exactly what changed:

There are still some improvements left to reflect the size prop on the actual menus as mentioned in #446.

📖 Docs revamp

Since the first release of @nuxt/ui and the launch of @nuxt/ui-pro, more and more components have been added to the docs. There are now at least 90+ components if you combine the two packages.

To ease the navigation between all these components, we removed all the categories like Elements, Forms, Landing, etc. for both @nuxt/ui and @nuxt/ui-pro to group everything under Components. This should remove a lot of clicks to find the component you're looking for.

We also removed the Pro popover in the header to access Nuxt UI Pro, you can now use the Docs and Pro links instead to switch between the two or use the top left dropdown to switch between @nuxt/ui, @nuxt/ui-edge and @nuxt/ui-pro packages.

The Nuxt UI Pro landing page has been merged at the bottom of https://ui.nuxt.com, and new Pricing and Templates pages are now available in the header.

🚀 Features

  • Carousel: new component (#927) (f37b043)
  • Dropdown: default delay from config (c4a1c04)
  • Form: handle multiple paths in validate (#1273) (20ac4b3)
  • HorizontalNavigation: new component (#1279) (b8007ba)
  • InputMenu: handle nullable prop when clearing input (5e49fb8)
  • Modal/Slideover: emit close-prevented event (#1207) (6faf15b)
  • module: add option to disable global css styles (#1266) (f96eb5e)
  • Popover: default delay from config (7f5711b)
  • Tooltip: default delay from config (3400b56)
  • VerticalNavigation: use Badge component for consistency (3e81eee)

🐛 Bug Fixes

  • Breadrumb: handle truncate (5d3a962)
  • Link: propagate active prop to slot as isActive (b76e761)
  • Select: consistent placeholder with input and textarea (2cb41db), closes #1276
  • Slideover: handle translate in RTL mode (#1259) (ea58c88)

👋 New Contributors

Full Changelog: https://github.com/nuxt/ui/compare/v2.12.3...v2.13.0

ui - v2.12.3

Published by benjamincanac 9 months ago

🐛 Bug Fixes

  • link: import type from #vue-router (79ec3fd), closes #1253

Full Changelog: https://github.com/nuxt/ui/compare/v2.12.2...v2.12.3

ui - v2.12.2

Published by benjamincanac 9 months ago

🐛 Bug Fixes

  • link: improve nuxt link rel type (05e90aa)

Full Changelog: https://github.com/nuxt/ui/compare/v2.12.1...v2.12.2

ui - v2.12.1

Published by benjamincanac 9 months ago

🐛 Bug Fixes

  • Button: inherit nuxt link props without breaking nuxt-component-meta (d3e19dc), closes #578
  • InputMenu: take option-attribute into account to display label (1a93791)
  • Link: prevent type bind on <a> (b0df864)
  • SelectMenu: take option-attribute into account to display label (b9fe74b), closes #1151
  • Tooltip: typo in kbd component (4405d32)

👋 New Contributors

Full Changelog: https://github.com/nuxt/ui/compare/v2.12.0...v2.12.1

ui - v2.12.0

Published by benjamincanac 9 months ago

Read our updated documentation on https://ui.nuxt.com.

✨ Highlights

Like the SelectMenu, it allows you to create an autocomplete input with real-time suggestions.

🚀 Features

  • Breadcrumb: handle labelClass and merge iconClass (f623ec1)
  • Dropdown: handle labelClass and merge iconClass (1c9835d), closes #716
  • Dropdown: handle manual mode (3844714), closes #1143
  • Form: expose submit function (#1186) (4a25a12)
  • InputMenu: new component (#1095) (6d8d82a)
  • Pagination: add disabled prop (0976833), closes #1189
  • SelectMenu: add empty slot when no options (5d1919a), closes #1089
  • SelectMenu: allow control of search query (f735db0), closes #1174
  • SelectMenu: allow creating option despite search (#1080) (0fdc8f7)
  • Table: add sort-mode prop (56e0c9a), closes #1149
  • Table: add custom sort function to columns (#1075) (4f3af6c)
  • VerticalNavigation: ability to add dividers (#963) (ffd20b3)
  • VerticalNavigation: handle labelClass and merge iconClass (a79f7c0)

🐛 Bug Fixes

  • Alert: always pass a function to actions click events (5d78111), closes #1197
  • Card: remove overflow-hidden on wrapper (4124406), closes #806 #1034
  • config: prevent class merge of avatar size (b22bd70)
  • Dropdown: improve placement with hover mode (c6aa421), closes #1179
  • Dropdown: merge item class (7151b7b), closes #1157
  • Form: invalid errors when using clear by path (#1165) (97a3975)
  • Form: memory leak (#1185) (ea2a24b)
  • forms: dont disable inputs and selects on loading (3258167), closes #1117
  • Link: handle active override when value is false (83631cc)
  • Popover: allow manual mode without blocking normal behaviour (3334e2a)
  • Popover: improve placement with hover mode (bc00f9c), closes #781
  • RadioGroup: pass option.disabled to children (0c8ab9d), closes #1109
  • Table: display nothing instead of error when key is missing (00d0fd5), closes #1173
  • Table: respect sort prop updates from parent component (#1208) (c6841d0)
  • Toggle: add missing change event (4c84839), closes #1113
  • useShortcuts: include contenteditable="plaintext-only" elements in usingInput (#1159) (648eec3)
  • VerticalNavigation: improve accessibility (#948) (29e64ca)

👋 New Contributors

Full Changelog: https://github.com/nuxt/ui/compare/v2.11.1...v2.12.0

ui - v2.11.1

Published by benjamincanac 10 months ago

🐛 Bug Fixes

  • Breadcrumb: handle divider in rtl (#1049) (e53cdea)
  • CommandPalette: missing right padding on input with close button (ad33b26)
  • components: move remaining classes to config (#1039) (e408eab)
  • module: prevent class merging on default children (f07968a), closes #1076
  • Notification: handle dynamic backgrounds (#1063) (1f0f618)
  • RadioGroup: props reactivity issues (#1065) (7196d81)
  • types: favor Record<string, any>> instead of object (4d72a75)
  • types: improve with strict mode (#1041) (4a9b66a)
  • types: workaround for popper weak type (5718dfd), closes #644

👋 New Contributors

Full Changelog: https://github.com/nuxt/ui/compare/v2.11.0...v2.11.1

ui - v2.11.0

Published by benjamincanac 11 months ago

Read our updated documentation on https://ui.nuxt.com.

✨ Highlights

🛠️ Components

CleanShot 2023-11-23 at 11 31 32@2x

  • New Chip component

This component behave exactly like the chip prop on the Avatar and is meant to replace it in the next major version. The advantage of having a specific component for this is to be able to use on any component:

CleanShot 2023-11-23 at 11 31 22@2x

⌨️ App Config types

We've introduced prop types with validators in https://github.com/nuxt/ui/releases/tag/v2.9.0 to enable autocomplete. Initially, this feature was compatible only with the default configuration of @nuxt/ui. Now, autocomplete functionality extends to custom values specified in your app.config.ts. As an illustration, consider the following definition in app.config.ts:

export default defineAppConfig({
  ui: {
    button: {
      color: {
        custom: {
          subtle: '...'
        }
      }
    }
  }
})

Autocomplete will now function for the color and variant props of the Button and include your custom values:

CleanShot 2023-11-17 at 18.45.21@2x.png
CleanShot 2023-11-17 at 18.45.37@2x.png

🪄 Dynamic Icons

The Icon component now has a dynamic prop that will use nuxt-icon instead of the default behaviour with egoist/tailwindcss-icons.

This can be quite useful when using dynamic class names or for icons coming from a database for example.

This behaviour can be changed globally in your app.config.ts through ui.icons.dynamic:

export default defineAppConfig({
  ui: {
    primary: 'green',
    gray: 'slate',
    icons: {
      dynamic: true
    }
  }
})

🎨 Custom Icons

The ui.icons option in your nuxt.config.ts can now be an object to completely override the @egoist/tailwindcss-icons plugin, this can be quite useful if you want to use a custom icon collection for example:

import { getIconCollections } from '@egoist/tailwindcss-icons'

export default defineNuxtConfig({
  ui: {
    icons: {
      // might solve stretch bug on generate, see https://github.com/egoist/tailwindcss-icons/issues/23
      extraProperties: {
        '-webkit-mask-size': 'contain',
        '-webkit-mask-position': 'center'
      },
      collections: {
        foo: {
          icons: {
            'arrow-left': {
              // svg body
              body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />',
              // svg width and height, optional
              width: 24,
              height: 24
            }
          }
        },
        ...getIconCollections(['heroicons', 'simple-icons'])
      }
    }
  }
})

🛟 Tailwind CSS bundle

There is an open issue #877 to reduce the final bundle size as Tailwind CSS generate classes for all the components at the moment. As a first step to solve this, we've splitted the config of each component into separate files in #930 so you can have at least the option to exclude files manually in your tailwind.config.ts:

import { resolve } from 'pathe'
import type { Config } from 'tailwindcss'

export default <Partial<Config>>{
  content: {
    files: [
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/data/table.mjs'),
      '!' + resolve('node_modules/@nuxt/ui/dist/runtime/ui.config/overlays/modal.mjs')
    ]
  }
}

🚀 Features

  • Breadcrumb: new component (#506) (a35bfc7)
  • Checkbox: config label, required and help size (a1b38c4)
  • Chip: new component (#886) (d4f1b5e)
  • FormGroup: add eager validation (#992) (d39e2de)
  • Icon: switch to nuxt-icon with dynamic prop or app config (#862) (c601fc6)
  • module: allow options override of @egoist/tailwindcss-icons plugin (#1013) (ec58948)
  • Notification: customize default timeout (#1003) (83c3be7)
  • Popover: ability to add overlay (#1014) (06d4510)
  • SelectMenu: allows to clear search query on close (#968) (11ccbbb)
  • Textarea: add default slot for complex usages (55697e6), closes #971
  • Toggle: add size prop (#950) (3c71bf3)
  • types: support custom values from app.config.ts (#863) (7339324)

🐛 Bug Fixes

  • Alert: improve config options (91511b9), closes #760
  • Alert: prevent gap when no close button or action (9a1a1b8), closes #831
  • ButtonGroup: handle components with children (#999) (f4be95d)
  • CommandPalette: activate first option after async search (#981) (a975939)
  • defineShortcuts: support minus - key (#962) (de38afd)
  • Dropdown: pass event to click function (60fa2be)
  • Dropdown: use NuxtLink with custom prop to close on select (f323379), closes #899
  • FormGroup: hydration mismatch on inputId (#942) (a3046aa)
  • FormGroup: remove inputId if the input is a fieldset (#914) (e81d5cf)
  • Input/Textarea: add v-model modifiers (#856) (68f6956)
  • Link: handle active state when to prop is not provided (6cc77a3), closes #988
  • Link: reactivity issue with active prop (15a40f5), closes nuxt/nuxt.com#1432
  • module: boolean types and bump nuxt to 3.8.2 (#1006) (ca62ce1)
  • module: use correct alias for #ui-colors (#913) (c84438f)
  • Notification: improve config options (7cb987d)
  • Notification: prevent gap when no close button or action (ded6a7f)
  • Notifications: teleport to body (#909) (8451f4d)
  • Progress: percentage calculation (#939) (c55871b)
  • Radio: prevent help text from inlining with label (#894) (a2d70f0)
  • SelectMenu: fixes non-strings and nested searchable attributes (#967) (37fdf22)

👋 New Contributors

Full Changelog: https://github.com/nuxt/ui/compare/v2.10.0...v2.11.0

ui - v2.10.0

Published by benjamincanac 12 months ago

Read our updated documentation on https://ui.nuxt.com.

✨ Highlights

CleanShot 2023-10-31 at 10 45 03@2x

CleanShot 2023-10-31 at 10 46 22@2x

CleanShot 2023-10-31 at 10 44 23@2x

CleanShot 2023-10-31 at 10 43 33@2x

🚀 Features

  • CommandPalette: handle filter attribute in groups (#871) (8ba2a79)
  • Divider: new component (#757) (eb9ce6a)
  • Form: handle @error event (#718) (e16379f)
  • Input/Textarea: allow specifying autofocus delay for page transitions (#816) (8bfd359)
  • Meter: new component (#827) (abbcc37)
  • Pagination: add first and last page buttons (#842) (c5ce997)
  • Popover: manual mode & horizontal offset (#781) (92b8618)
  • Dropdown/SelectMenu/ContextMenu/Popover/Tooltip: arrow option & popper docs (#875) (f785ecd)
  • Progress: new component (#697) (2c5559b)
  • RadioGroup: configurable label size (#881) (5a2644b)
  • RadioGroup: new component (#730) (23d5dc7)
  • Range: add 2xs, xs, xl and 2xl sizes to match progress component (3cb3914), closes #673
  • Table: add v-model:sort prop (#803) (9f4d88e)

🐛 Bug Fixes

  • Accordion: toggle correct element when keyboard press (#805) (96296c3)
  • Dropdown: use NuxtLink instead of ULink (#882) (c37ad8b)
  • FormGroup: ensure size exists in config (#695) (f5f3388)
  • Modal: remove padding on mobile with fullscreen enabled (550ac10), closes #811
  • Notification: add roles for accessibility (#724) (40f3b16)
  • Table: enable sorting for nested column keys (#835) (b4f7b03)
  • Table: prevent @select event call when selecting all rows (#838) (51f4d54)
  • Tabs: truncate buttons content (ddbb431), closes #796
  • types: handle sub-objects in app.config.ts (button colors) (7be2af7), closes #858

👋 New Contributors

A huge thank you to everyone who contributed to make this release, this is truly an awesome community ❤️

Full Changelog: https://github.com/nuxt/ui/compare/v2.9.0...v2.10.0

ui - v2.9.0

Published by benjamincanac about 1 year ago

Read our updated documentation on https://ui.nuxt.com

✨ Highlights

This release focuses on performance and DX:

  • Props having a validator are now typed to provide autocomplete

  • Lodash has been completely removed from @nuxt/ui

  • Overall bundle size has been greatly reduced by only loading the config of the components used

  • app.config.ts now also uses tailwind-merge like the ui prop to smartly merge classes

Like #509 in https://github.com/nuxt/ui/releases/tag/v2.8.0, breaking changes might occur but it's highly unlikely as you'd already rewrite the entire config line anyway. You can still go back to the old behaviour by setting the strategy to override either in the app.config.ts for the config or specifically in the ui prop.

Everything is explained in #692, I'd recommend reading it.

🚀 Features

  • FormGroup: add slots (#714) (2fc9385)
  • Link: add active prop to override default behaviour (#732) (8257a11)
  • Link: add as prop (#535) (e404912)
  • module: use tailwind-merge for app.config & move config to components & type props (#692) (34d2f57)
  • module: remove lodash-es (#648) (d6476d1)
  • Table: add ability to custom style for td and tr (#741) (874447c)

🐛 Bug Fixes

  • Accordion: close other items in circular order (#735) (6887f73)
  • FormGroup: use explicit label instead of implicit label (#638) (681f0e5)
  • Pagination: handle max > 5 and max equal total pages (#728) (a071e4b)
  • Range: fix track pseudo-elements for mozilla (#636) (8955595)
  • SelectMenu: handle numbers (0544a01), closes #574
  • Table: add missing classes in app.config.ts (a603ea5), closes #655
  • Table: select all rows without select listener (#652) (83d609d)
  • Tabs: add visible focus indicator on active tabs (#690) (be734fc)
  • Tabs: allow custom keys in TabItem (#671) (15e418e)
  • Tabs: prevent focus of TabPanel with tabindex="-1" (cbb2f28)

👋 New Contributors

Full Changelog: https://github.com/nuxt/ui/compare/v2.8.1...v2.9.0

ui - v2.8.1

Published by benjamincanac about 1 year ago

🐛 Bug Fixes

  • Form: fix getValibotError to avoid importing safeParseAsync (#640) (e8daf7f)
  • Form: fix valibot imports (#617) (1a7eb27)
  • Pagination: page numbers not clickable (#624) (c1e0654)

👋 New Contributors

Full Changelog: https://github.com/nuxt/ui/compare/v2.8.0...v2.8.1

ui - v2.8.0

Published by benjamincanac about 1 year ago

✨ Highlights

NuxtLabs UI is now Nuxt UI, this rebranding involves the transfer of the repository from nuxtlabs to nuxt GitHub organization. Both packages are now @nuxt/ui and @nuxt/ui-edge, previous @nuxthq ones will be deprecated.

The documentation has also been moved to https://ui.nuxt.com and got itself a brand new landing page.

https://github.com/nuxt/ui/assets/739984/fc716da0-3b5e-44f6-8c56-3bb2bc769777

🚨 Breaking Changes

  • use tailwind-merge for class merging (#509)

Everything is explained in the PR description, I'd strongly recommend reading it.

🚀 Features

  • Avatar: add icon prop as fallback (df3b202)
  • Avatar: handle icon default from app.config.ts (55daed0)
  • ButtonGroup: add orientation prop (#603) (b3bc6e2)
  • Form: add valibot support (#615) (ab5153a)
  • Form: improve form control and input validation trigger (#487) (6d7973f)
  • Modal: add fullscreen prop (#523) (7e2bebd)
  • module: add DEFAULT shade to primary color (#493) (c6056ed)
  • module: use tailwind-merge for class merging (#509) (8880bdc)
  • Table: support nested keys in columns (#503) (858886a)
  • Tabs: control selected index (#490) (aaf09ad)

🐛 Bug Fixes

  • Alert: fix wrong type of actions (#507) (b243e8c)
  • AvatarGroup: add justify-end to wrapper to prevent right align (e578b0d)
  • AvatarGroup: pass default size to max avatar (e49c673)
  • Badge: allow label as number (7c157ce)
  • Button: add missing prop types (#508) (a8a1c15)
  • Form: use safeParseAsync for zod (#497) (8b19b18)
  • Popover: handle hover mode with padding like dropdown (dc951ff)
  • Radio: put back id for label selection (9b3a22e)
  • SelectMenu: invalid gap values (998314e)
  • Table: empty state is displayed if null (#517) (44ba758)
  • Table: missing component imports (#608) (d936316)
  • Tabs: recompute marker position when v-model changes (#524) (fdce429)
  • Tooltip: hide on touch devices (#580) (f1ed007)

Full Changelog: https://github.com/nuxt/ui/compare/v2.7.0...v2.8.0

ui - v2.7.0

Published by benjamincanac about 1 year ago

✨ Highlights

  • New Tabs component
  • New Form component

Validate form data using schema libraries such as Yup, Zod, Joi or your own validation logic. It works seamlessly with the FormGroup component to automatically display error messages around form elements.

  • Badge component has new variants and colors

CleanShot 2023-08-01 at 16 01 54@2xCleanShot 2023-08-01 at 16 01 59@2xCleanShot 2023-08-01 at 16 02 04@2xCleanShot 2023-08-01 at 16 02 10@2xCleanShot 2023-08-01 at 16 03 10@2xCleanShot 2023-08-01 at 16 01 50@2x

  • Link component is now documented

Wrapper around <NuxtLink> using the Vue Router custom prop that provides a few extra features

🚨 Breaking Changes

  • Link: renamed from LinkCustom and add exact-query / exact-hash props
  • Badge: add colors and variants (solid has changed)
  • SelectMenu: ui prop is now ui-menu and ui-select is now ui (#432)

🚀 Features

  • Alert: new component (#449) (ab2abae)
  • Badge: add colors and variants (solid has changed) (05503e5)
  • Badge: rename outline to subtle + add soft variants (5bd5dc2)
  • CommandPalette: bind active and selected to scoped slot (#441) (b0440f8)
  • FormGroup: add size prop and theme options (#391) (d2a8a07)
  • Form: new component (#439) (a3aba1a)
  • Link: rename from LinkCustom and add exact-query / exact-hash props (cefe5a7)
  • Notification: support html with title and description slots (#431) (df455db)
  • Range: increase narrowed surface (#459) (3b183ac)
  • SelectMenu: add value-attribute prop (#429) (959c968)
  • Tabs: new component (#450) (8298b62)
  • ui: apply primary bg on ::selection (09d0ea2)

🐛 Bug Fixes

  • FormGroup: required star display (3dd0492)
  • FormGroup: err when no prop defined (93aebe6)
  • FormGroup: set size default to null (c59595f)
  • Form: return state on validate (#472) (248b0a6)
  • LinkCustom: exact prop wasn't working (82e152b), closes #417
  • LinkCustom: improve prop binding and prevent error with externals (914d156)
  • Link: handle disabled prop (396aae7), closes #473
  • module: ensure red color is safelisted for form elements (208acca), closes #423 #373
  • module: omit colors defined as strings (927b63f)
  • module: safelist all colors for toast.add (2cd6208), closes #375 #440
  • module: smart safelisting for components in snake case (e25be11), closes #461
  • Popover: hover mode (#453) (10890e6)
  • SelectMenu: invert ui and ui-select props (#432) (7cccbcf)
  • Table: hide data when loading state is active (#460) (2b3dc8d)

👋 New Contributors

Full Changelog: https://github.com/nuxtlabs/ui/compare/v2.6.0...v2.7.0

ui - v2.6.0

Published by benjamincanac about 1 year ago

✨ Highlights

🚨 Breaking Changes

Avatar

  • class will no longer apply on the wrapper but on the img so use :ui="{ wrapper: '...' }" instead because of the v-bind="$attrs" on the img tag

🚀 Features

  • Accordion: new component (#301) (e50f377)
  • Avatar: bind component attributes to img element (#421) (773a23f)
  • SelectMenu: handle async search (#426) (5f8fe85)
  • Modal: add prevent-close prop (2cc5c0d), closes #303
  • Slideover: add prevent-close prop (d15e816)
  • Table: add select event for the entire row (#353) (d292706)
  • Table: allow columns class customization (5dffa86), closes #366

🐛 Bug Fixes

  • ButtonGroup: err when no props on buttons (80a9738), closes #360
  • Button: missing disabled state on some variants (41a5238)
  • Modal: disabling transition prop had no effect (db34665)
  • Range: disabled thumb opacity (c92dc98)
  • Range: progress style (#385) (a79c165)
  • SelectMenu: missing appear on transition (cbe2b1b), closes #400
  • Table: fixed row deletion bug on deselect (#425) (46b444a)

👋 New Contributors

Full Changelog: https://github.com/nuxtlabs/ui/compare/v2.5.0...v2.6.0

ui - v2.5.0

Published by benjamincanac over 1 year ago

✨ Highlights

🚨 Breaking Changes

Radio / Checkbox / Toggle

Some classes have been extracted from the base config preset and split into multiple ones to ease the customization like color, background, border, ring, rounded, etc.

If you've overridden ui.radio.base, ui.checkbox.base or ui.toggle.base in your app.config.ts, you might want to take a look at #323.

🚀 Features

🐛 Bug Fixes

  • components: prefix @headlessui/vue components (41b85d5), closes #315
  • FormGroup: prevent overriding color of children (6be9290), closes #352
  • Table: missing default sort icon when overriding sort-button prop (0f3fe0d)
  • Toggle: add opacity-50 when disabled (c2ebb04)
  • Tooltip: add color in config (1b03b8a)

👋 New Contributors

Full Changelog: https://github.com/nuxtlabs/ui/compare/v2.4.1...v2.5.0

Package Rankings
Top 1.39% on Npmjs.org
Top 25.2% on Repo1.maven.org
Badges
Extracted from project README's
nuxt-ui.png npm version npm downloads License Nuxt
Related Projects
content

The file-based CMS for your Nuxt application, powered by Markdown and Vue components.

31 Mar 2020 2,968
devtools

Unleash Nuxt Developer Experience

22 Oct 2021 2,730
docus

Write beautiful documentations with Nuxt and Markdown.

12 Nov 2020 1,472
http

Universal HTTP Module for Nuxt.js

18 Mar 2019 229
nuxt-http-client-hints

Nuxt HTTP Client Hints

11 Oct 2024 4
tailwindcss

Tailwind CSS module for Nuxt

04 Apr 2019 1,669
modules

Discover the Nuxt modules to add any CMS, Database, UI, Auth and integrations into your Vue appli...

26 Aug 2020 884
nuxt-single-html

Build a Nuxt app into a single HTML file.

16 Aug 2024 11
core

Build full-stack applications with Nuxt on CloudFlare, with zero configuration.

20 Feb 2024 562
create-nuxt-app

Create Nuxt.js App in seconds.

04 Aug 2017 3,458
nuxtr-vscode

An extension offering commands and tools to make your experience with Nuxt more pleasant.

29 Apr 2023 329
content-wind

A lightweight Nuxt theme to build a Markdown driven website. Powered by Nuxt Content, TailwindCSS...

20 May 2022 758
nuxt-ui-vue

WIP Fully styled and customizable components from Nuxt UI to Vue 3.

10 Aug 2023 41
nuxt-iconify-fontawesome

Use Font Awesome icons with popular Nuxt modules Nuxt Icon and NuxtUI

20 Jun 2024 0
nuxt

The Intuitive Vue Framework.

26 Oct 2016 49,067