MaryUI Documentation

To stop using the local development version and revert to the stable version from Packagist, unset the local repository configuration and require the package normally:

composer config --unset repositories.local
composer require robsontenorio/mary

If you want to contribute to MaryUI or work with a local version of the package, follow these steps to set up a local path repository in your project:

1. Clone the repository into your project's packages directory:

   git clone git@github.com:robsontenorio/mary.git packages/mary

2. Configure Composer to use the local path as a repository:

   composer config repositories.local '{"type": "path", "url": "packages/mary"}'

3. Require the package using the @dev flag to create a local symlink:

   composer require robsontenorio/mary:@dev

4. Start your development server:

   yarn dev

When using the sidebar slot within <x-main>, you can pass specific attributes to the sidebar component to control its behavior and appearance. These attributes are consumed by the Main component's internal logic.

Sidebar Attributes

• drawer: The ID used for the drawer toggle input.
• right: If present, the sidebar is rendered as a drawer-end (right-side) drawer.
• right-mobile: If present, the sidebar is rendered as a max-sm:drawer-end (right-side) drawer on small screens.
• collapsible: A boolean attribute that, when present, enables the collapse/expand toggle menu at the bottom of the sidebar.
• collapse-icon: Overrides the default collapse icon.
• collapse-text: Overrides the default collapse text.

The Editor component automatically handles image uploads via the mary.upload route. You can control where files are stored using the disk and folder attributes.

When an image is inserted, the component performs a POST request to the upload URL with the following query parameters:

• disk: The filesystem disk (e.g., public, s3).
• folder: The target directory (e.g., editor).
• _token: The CSRF token for security.

Example:

<x-mary-editor 
    wire:model="content" 
    disk="s3" 
    folder="uploads/images" 
/>

Use the mary:install Artisan command to set up maryUI in your Laravel project. This command automates the installation of Livewire, daisyUI, and Tailwind CSS, configures your app.css, and handles component prefixing if starter kits like Jetstream or Breeze are detected.

Requirements:

• Laravel 12 or above.
• A package manager installed (npm, yarn, bun, or pnpm).

Automatic Configuration:

• Starter Kits: If jetstream, breeze, or livewire/flux are detected in composer.json, the installer will publish the mary.config file and automatically set a global component prefix (mary-) to prevent naming collisions (e.g., <x-mary-button />).
• CSS: By default, it appends daisyUI plugins, maryUI source paths, and custom theme/pagination styles to resources/css/app.css.

You can pass a config array to the x-mary-datepicker component to control the underlying Flatpickr instance.

Supported configuration keys include:

• mode: Set to 'range' to enable date range selection.
• dateFormat: The date format string (e.g., 'Y-m-d H:i').
• plugins: An array of plugin configurations. Each element should be an associative array where the key is the plugin name and the value is its configuration object.
• disable: An array of strings representing dates or rules to disable.

Note: When using mode="range" with wire:model.live, the component automatically handles the synchronization of the range string back to Livewire.

You can pass a config array to the <x-mary-editor> component to override default TinyMCE settings. This allows you to customize the toolbar, plugins, height, and other TinyMCE-specific parameters.

Default settings include:

• menubar: false
• automatic_uploads: true
• height: 300
• toolbar: 'undo redo | align bullist numlist | outdent indent | quickimage quicktable'
• quickbars_selection_toolbar: 'bold italic underline strikethrough | forecolor backcolor | link blockquote removeformat | blocks'

Example of custom configuration:

<x-mary-editor 
    wire:model="content" 
    :config='[
        "height" => 500,
        "menubar" => true,
        "plugins" => "advlist autolink lists link image table",
        "toolbar" => "undo redo | styleselect | bold italic"
    ]' 
/>

The File component includes built-in image cropping capabilities. You can trigger cropping automatically after an upload or manually via configuration.

Key Cropping Options

• crop-after-change: If set to true, the cropping modal will automatically open once the file upload progress reaches 100%.
• crop-config: An array of configuration options passed directly to the underlying Cropper.js instance (e.g., viewMode, dragMode, autoCropArea).
• crop-mime-type: Specifies the MIME type for the cropped image (defaults to image/png).
• crop-title-text, crop-cancel-text, crop-save-text: Customizes the text within the cropping modal.

Example: Automatic Cropping

<x-mary-file 
    wire:model="avatar" 
    label="Avatar" 
    crop-after-change 
    :crop-config='["viewMode" => 1, "aspectRatio" => 1]' 
/>