diff --git a/apps/www/src/content/docs/changelog.md b/apps/www/src/content/docs/changelog.md index 6afbcc5f8..26f8dd311 100644 --- a/apps/www/src/content/docs/changelog.md +++ b/apps/www/src/content/docs/changelog.md @@ -1,3 +1,139 @@ --- title: Changelog +description: Latest updates and announcements. --- + +## June 2024 + +### New Component - Number Field +A new component has been added to the project [`NumberField`](/docs/components/number-field.html). + +A number field allows a user to enter a number and increment or decrement the value using stepper buttons. + + + +## May 2024 + +### New Component - Charts +Several kinds of chart components has been added to the project. + +Charts are versatile visualization tools, allowing users to represent data using various options for effective analysis. + +1. [`Area Chart`](/docs/charts/area) - An area chart visually represents data over time, displaying trends and patterns through filled-in areas under a line graph. + + + +2. [`Bar Chart`](/docs/charts/bar) - A line chart visually represents data using rectangular bars of varying lengths to compare quantities across different categories or groups. + + + +3. [`Donut Chart`](/docs/charts/donut) - A line chart visually represents data in a circular form, similar to a pie chart but with a central void, emphasizing proportions within categories. + + + +4. [`Line Chart`](/docs/charts/line) - A line chart visually displays data points connected by straight lines, illustrating trends or relationships over a continuous axis. + + + +### New Component - Auto Form + +[`Auto Form`](/docs/components/auto-form.html) is a drop-in form builder for your internal and low-priority forms with existing zod schemas. + +For example, if you already have zod schemas for your API and want to create a simple admin panel to edit user profiles, simply pass the schema to AutoForm and you're done. + +The following form has been created by passing a `zod` schema object to our `AutoForm` component. + + + +## April 2024 + +### Component Updated - Calendar + +The [`Calendar`](/docs/components/calendar.html) component has been updated and is now built on top of the [RadixVue Calendar](https://www.radix-vue.com/components/calendar.html) component, which uses the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package to handle dates. + +If you're looking for a range calendar, check out the [`Range Calendar`](/docs/components/range-calendar.html) component. + +And if you're looking for a date picker input, check out the [`Date Picker`](/docs/components/date-picker.html) component. + + + + + + + +### Building Blocks for the Web + +[`Blocks`](/blocks) are composed of different components that can be used to build your apps, with each block being a standalone section of your application. These blocks are fully responsive, accessible, and composable, and are built using the same principles as the other components in `shadcn-vue`. + +
+ + Building Blocks +
+ +## March 2024 + +### New Component - Breadcrumb + +[`Breadcrumb`](/docs/components/breadcrumb.html) displays the path to the current resource using a hierarchy of links. + + + +### New Component - Pin Input (OTP Input) + +[`Pin Input`](/docs/components/pin-input.html) allows users to input a sequence of one-character alphanumeric inputs. + + + +### New Component - Resizable + +[`Resizable`](/docs/components/resizable.html) - Accessible resizable panel groups and layouts with keyboard support. + + + +### New Component - Drawer + +[`Drawer`](/docs/components/drawer.html) - A drawer component for vue that is built on top of [Vaul Vue](https://github.com/radix-vue/vaul-vue). + + + +## February 2024 + +### New Component - Tag Inputs + +[`Tag inputs`](/docs/components/tags-input.html) render tags inside an input, followed by an actual text input. + + + +## January 2024 + +### New Component - Sonner + +[`Sonner`](/docs/components/sonner.html) is an opinionated toast component for Vue. + +The Sonner component is provided by [vue-sonner](https://vue-sonner.vercel.app/), which is a Vue port of Sonner, originally created by [Emil Kowalski](https://twitter.com/emilkowalski_) for React. + + + +### New Component - Toggle Group + +[`Toggle Group`](/docs/components/toggle-group.html) - A set of two-state buttons that can be toggled on or off. + + + +### New Component - Carousel + +[`Carousel`](/docs/components/toggle-group.html) - A carousel with motion and swipe built using [Embla](https://www.embla-carousel.com/) library. + + diff --git a/apps/www/src/content/docs/charts/bar.md b/apps/www/src/content/docs/charts/bar.md index fa0f80292..73e69c3b8 100644 --- a/apps/www/src/content/docs/charts/bar.md +++ b/apps/www/src/content/docs/charts/bar.md @@ -1,6 +1,6 @@ --- title: Bar -description: An line chart visually represents data using rectangular bars of varying lengths to compare quantities across different categories or groups. +description: A line chart visually represents data using rectangular bars of varying lengths to compare quantities across different categories or groups. source: apps/www/src/lib/registry/default/ui/chart-bar label: Alpha --- diff --git a/apps/www/src/content/docs/charts/donut.md b/apps/www/src/content/docs/charts/donut.md index 2ed86267d..b238dee90 100644 --- a/apps/www/src/content/docs/charts/donut.md +++ b/apps/www/src/content/docs/charts/donut.md @@ -1,6 +1,6 @@ --- title: Donut -description: An line chart visually represents data in a circular form, similar to a pie chart but with a central void, emphasizing proportions within categories. +description: A line chart visually represents data in a circular form, similar to a pie chart but with a central void, emphasizing proportions within categories. source: apps/www/src/lib/registry/default/ui/chart-donut label: Alpha --- diff --git a/apps/www/src/content/docs/charts/line.md b/apps/www/src/content/docs/charts/line.md index 39cf6f3a5..b984f8229 100644 --- a/apps/www/src/content/docs/charts/line.md +++ b/apps/www/src/content/docs/charts/line.md @@ -1,6 +1,6 @@ --- title: Line -description: An line chart visually displays data points connected by straight lines, illustrating trends or relationships over a continuous axis. +description: A line chart visually displays data points connected by straight lines, illustrating trends or relationships over a continuous axis. source: apps/www/src/lib/registry/default/ui/chart-line label: Alpha --- diff --git a/apps/www/src/public/examples/block-dark.png b/apps/www/src/public/examples/block-dark.png new file mode 100644 index 000000000..56d8d6829 Binary files /dev/null and b/apps/www/src/public/examples/block-dark.png differ diff --git a/apps/www/src/public/examples/block-light.png b/apps/www/src/public/examples/block-light.png new file mode 100644 index 000000000..4348ce2d4 Binary files /dev/null and b/apps/www/src/public/examples/block-light.png differ