DOCSEARCHbyAlgolia
Submit Docs

Maz-UI Documentation

website·Indexed 32 days ago

https://maz-ui.com

A Vue 3 UI library featuring a comprehensive set of standalone components such as MazTable, MazDialog, MazTimeline, and MazStepper. The framework includes a theme system using HSL CSS variables, a collection of 860+ icons, various Vue composables like useSwipe and useWindowSize, and a suite of utility helpers for string manipulation, date formatting, and currency conversion.

Tokens
69.2K
Snippets
358
Records
542
Agent score
64%

What's inside Maz-UI

  1. Overview of MazCarousel component

    MazCarousel is a standalone component used to display and manage items in a row. To use this component, the MazUi plugin must be installed in the project. The component supports global translation via the MazUi plugin.

  2. Overview of MazReadMore component

    MazReadMore is a standalone component used to truncate long text with a toggle functionality to expand and collapse the content. It requires the MazUi plugin to be installed in the project. The component supports global translation via the MazUi plugin.

  3. Overview of MazInputNumber component

    MazInputNumber is a number input component that provides increment and decrement buttons for user-friendly numeric input. It supports customizable sizes, disabled states, and value limits (min/max). Note that this component uses MazInput internally and inherits all of its props.

  4. Overview of Maz-UI features

    Maz-UI is a lightweight and efficient library for Vue and Nuxt. Key architectural features include:

    • Standalone Modules: Components and tools are standalone; you can install and use only the specific modules you need without installing the entire library.
    • SSR Friendly: All components are compatible with Nuxt and do not require client-side-only installation.
    • TypeScript Native: Written in TypeScript, providing full type definitions and declarations out of the box.
    • Theming: Built with TailwindCSS, supporting both Dark and Light themes with optimized CSS file sizes.

  5. Overview of MazAlert component

    MazAlert is an accessible component used to display contextual feedback messages such as success, warning, error, or informational notifications. It supports customizable colors, icons, and styling options. To use this component, the MazUi plugin must be installed in the project.

  6. Overview of MazSkeleton component

    MazSkeleton is a standalone component used to display loading placeholders with an animated shimmer effect. It requires the MazUi plugin to be installed in the project before use. The component supports global translation via the MazUi plugin.

  7. Overview of useDisplayNames composable

    useDisplayNames is a Vue composable used to display localized country (region) and language names. It leverages the browser's Intl.DisplayNames API and supports ISO 639-1 (language codes), ISO 3166-1 (country codes), and BCP 47 (language tags).

    Caveat: Results may vary between different environments (client vs. node server) and different browsers (e.g., Chrome vs. Firefox) due to the underlying Intl.DisplayNames implementation.

  8. Overview of MazChecklist component

    MazChecklist is a standalone component used to create checklists with integrated real-time search functionality. It allows users to select multiple items from a list of options and supports color customization and 'no results found' messaging. To use this component, the MazUi plugin must be installed in the project. The component also supports global translation via the MazUi plugin.

  9. Overview of MazBtnGroup component

    MazBtnGroup is a component used to group multiple MazBtn buttons together with seamless styling. It supports two primary rendering methods: props-based (using an items array) and slot-based (passing MazBtn components as children).

  10. Overview of MazTable features

    MazTable is a reusable data table component providing several advanced data management features:

    • Pagination: Supports navigation between pages. Use the pagination prop. When combined with no-paginate-rows, the component displays pagination controls but allows the developer to handle API calls for data fetching manually.
    • Search: Provides a search bar to filter data. Use the search prop to activate search on specific columns.
    • Column Sorting: Allows sorting columns via header clicks, indicated by arrow icons. Use the sortable prop.
    • Row Selection: Enables individual or bulk selection of rows via checkboxes. Use the select-value prop to define the key for selection.
    • Loading State: Displays a MazLoadingBar when data is being fetched. Use the loading prop.
    • Customizable Page Size: Includes a dropdown for users to select the number of items displayed per page.

  11. Overview of new and refactored components in v4.0.0

    Maz-UI v4.0.0 introduces several new components and significant refactors to improve performance and functionality:

    • MazLink: Replaces MazBtn variant="link".
    • MazExpandAnimation: CSS Grid expansion animation (replaces MazTransitionExpand).
    • MazDropzone: Complete rewrite removing external dependencies.
    • MazPopover: New versatile overlay with smart positioning.
    • MazSelectCountry: New country/language selector with i18n support.

  12. Overview of useFormValidator and useFormField

    Maz-UI provides two Vue composables for form validation powered by Valibot: useFormValidator and useFormField.

    • useFormValidator: Used in the parent component to initialize validation for the entire form.
    • useFormField: Used for managing individual field states. It is required when fields are located in child components or when using specific validation modes like eager, blur, or progressive that rely on blur events.