{"id":18798419,"url":"https://github.com/vojislavd/tall-components","last_synced_at":"2025-10-28T17:03:37.184Z","repository":{"id":221514073,"uuid":"748995892","full_name":"vojislavd/tall-components","owner":"vojislavd","description":"Library of useful UI components for TALL stack","archived":false,"fork":false,"pushed_at":"2024-03-18T20:19:16.000Z","size":1379,"stargazers_count":2,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-27T08:11:23.897Z","etag":null,"topics":["alpinejs","livewire","tailwindcss","tall","tall-components"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vojislavd.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-01-27T09:20:29.000Z","updated_at":"2025-03-09T11:03:12.000Z","dependencies_parsed_at":"2024-02-08T13:27:37.724Z","dependency_job_id":"cac22588-1c2b-49b6-9a24-bc9575aa7b2c","html_url":"https://github.com/vojislavd/tall-components","commit_stats":null,"previous_names":["vojislavd/tall-components"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vojislavd%2Ftall-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vojislavd%2Ftall-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vojislavd%2Ftall-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vojislavd%2Ftall-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vojislavd","download_url":"https://codeload.github.com/vojislavd/tall-components/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248750861,"owners_count":21155796,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["alpinejs","livewire","tailwindcss","tall","tall-components"],"created_at":"2024-11-07T22:11:56.767Z","updated_at":"2025-10-28T17:03:32.098Z","avatar_url":"https://github.com/vojislavd.png","language":"PHP","readme":"# TALL components\n\nLibrary of useful UI components created for TALL (Tailwind CSS, Alpine.js, Laravel, Livewire) stack.\n\nInclude:\n\n- [x] [Modal](#modal)\n- [x] [Confirmation modal](#confirmation-modal)\n- [x] [Notification](#notification)\n- [x] [Table (search, filters, sort columns)](#table)\n- [x] [Loading spinner](#loading-spinner)\n- [x] [Drag \u0026 drop file upload (Filepond)](#drag--drop-file-upload-filepond)\n- [x] [Markdown editor (Quill)](#markdown-editor-quill)\n- [x] [Datetime picker (Flatpickr)](#datetime-picker-flatpickr)\n\n## Requirements\n\nThis package requires having installed and working Laravel, Tailwind CSS, Alpine.js and Livewire.\n\nThe package is created and tested for these frameworks:\n- Laravel v10\n- Tailwind CSS v3\n- Alpine.js v3\n- Livewire v3\n\nThere can be some differences for other versions.\n\n## Installation\n\nYou can install the package via composer:\n\n```bash\ncomposer require vojislavd/tall-components\n```\n\nYou need to include `tc.js` in your `resources/js/app.js` file:\n```js\nimport './../../vendor/vojislavd/tall-components/resources/js/tc.js'\n```\n\nNext, you should compile assets:\n```bash\nnpm install \u0026\u0026 npm run build\n```\n\nComponents will use `primary`, `primary-dark`, `secondary` and `secondary-dark` colors. You should configure these colors in your `tailwind.config.js` file.\n\nIf you want to change colors or customize anything else, you can publish all components views with:\n\n```bash\nphp artisan vendor:publish --tag=\"tall-components-views\"\n```\n\nTo change colors, just find `primary`, `primary-dark`, `secondary` or `secondary-dark` in the component and replace them with color you want to use.\n\n## Usage\n\n### Modal\n\n\u003cimg src=\"https://github.com/VojislavD/tall-components/assets/23532087/fbbdfe85-957b-4ff0-82c5-8eaa6f99f109\"\u003e\n\nTo use modal, you need have boolean variable inside your Livewire component. Modal will be opened or closed based on the value of that variable.\n\n```php\n\u003c?php\n\nnamespace App\\Livewire;\n\nuse Livewire\\Component;\n\nclass MyComponent extends Component\n{\n    public bool $openModal = false;\n}\n```\n\nIn blade file of the same Livewire component, you should add `\u003cx-tc::modal\u003e` and set `model` property to match boolean variable you added in the PHP file of your Livewire component.\n\nInside `\u003cx-tc::modal\u003e` tags, you can add any content you want to be present in modal.\n\n```blade\n\u003cx-tc-modal model=\"openModal\"\u003e\n    \u003ch1\u003eThis is some title\u003c/h1\u003e\n\n    \u003cp\u003eThis is some content\u003c/p\u003e\n\u003c/x-tc-modal\u003e\n```\n\nThe modal can be opened from the blade file, like this:\n\n```blade\n\u003cbutton type=\"button\" wire:click=\"$set('openModal', true)\"\u003e\n    Open my modal\n\u003c/button\u003e\n```\n\nOr it can be opened from a PHP file, like this:\n\n```php\n\u003c?php\n\nnamespace App\\Livewire;\n\nuse Livewire\\Component;\n\nclass MyComponent extends Component\n{\n    public bool $openModal = false;\n\n    public function someAction()\n    {\n        // do something\n\n        $this-\u003eopenModal = true;\n    }\n}\n```\n\nThe same goes for closing the modal, only the value of `openModal` will be set to `false`.\n\nFor example, if you want to have a button to close the modal inside the modal itself, you can do it like this:\n\n```blade\n\u003cx-tc-modal model=\"openModal\"\u003e\n    ... Some content of modal\n\n    \u003cbutton type=\"button\" wire:click=\"$set('openModal', false)\"\u003e\n        Cancel\n    \u003c/button\u003e\n\u003c/x-tc-modal\u003e\n```\n\nIt's possible to configure the width of the modal by passing a Tailwind CSS class to `width` property of the component. For example:\n\n```blade\n\u003cx-tc-modal model=\"openModal\" width=\"w-1/2\"\u003e\n    ... Some content of modal\n\u003c/x-tc-modal\u003e\n```\n\nYou can add action buttons to the bottom of the modal like this:\n\n```blade\n\u003cx-tc-modal model=\"openModal\"\u003e\n    ... Some content of modal\n\n    \u003cx-slot::action\u003e\n        \u003cbutton\u003eCancel\u003c/button\u003e\n        \u003cbutton\u003eSubmit\u003c/button\u003e\n    \u003c/x-slot::action\u003e\n\u003c/x-tc-modal\u003e\n```\n\n### Confirmation modal\n\n\u003cimg src=\"https://github.com/VojislavD/tall-components/assets/23532087/bb8a6edb-3c6a-45a8-a4cd-419f3445e261\"\u003e\n\nTo use the confirmation modal, you need to add the `x-tc-confirmation-modal` component and the `WithTcConfirmation` trait to the Livewire component where you want to use it.\n\n```php\n\u003c?php\n\nnamespace App\\Livewire;\n\nuse Livewire\\Component;\nuse TallComponents\\Livewire\\Traits\\WithTcConfirmation;\n\nclass MyComponent extends Component\n{\n    use WithTcConfirmation;\n}\n```\n```blade\n\u003cx-tc-confirmation-modal /\u003e\n```\n\nThen, to require confirmation for some action, you should add `x-tc-confirm` to the button from which you want to trigger the confirmation modal and pass `title`, `message`, and `action`.\n\n`action` should be a Livewire method you want to call after the user clicks the \"Confirm\" button in the modal.\n\n```blade\n\u003cbutton \n    type=\"button\" \n    x-tc-confirm=\"{ \n        title: 'Delete user', \n        message: 'Are you sure you want to delete this user?', \n        action: 'deleteUser' \n    }\n\u003e\n    Delete user\n\u003c/button\u003e\n```\n\nWhile the `title` parameter is optional, `message` and `action` are required, and the component will not work without them.\n\nIf you want to use the confirmation modal with multiple actions on the same Livewire component, it's enough to add it only once. Alternatively, if you want to have it on all pages, you can include it in your layout file. Just make sure you have the `WithTcConfirmation` trait in your Livewire component.\n\n### Notification\n\n\u003cimg src=\"https://github.com/VojislavD/tall-components/assets/23532087/e5017036-4268-41d3-9417-84364c5297fa\"\u003e\n\nYou can display notifications on the same page without reloading, or you can redirect to some other page and display notifications on that page.\n\nTo use notifications, the recommended way is to add them to your layout file, so notifications will be available on all pages.\n\nYou should add this Livewire component at the end of the file, before `@livewireScripts`.\n\n```blade\n@livewire('tc-notification)\n\n// or\n\n\u003clivewire:tc-notification\u003e\n```\n\nIf you want to display notifications from a Livewire component without reloading the page, all you need to do is dispatch `notification` event with the message you want to display, like this:\n\n```php\n\u003c?php\n\nnamespace App\\Livewire;\n\nuse Livewire\\Component;\n\nclass MyComponent extends Component\n{\n    public function someAction()\n    {\n        // do something\n\n        $this-\u003edispatch('notification', 'Message to display in notification');\n    }\n}\n```\n\nIf you want to redirect to some other page and display a notification there, you can do it like this:\n\n```php\n\u003c?php\n\nnamespace App\\Livewire;\n\nuse Livewire\\Component;\n\nclass MyComponent extends Component\n{\n    public function someAction()\n    {\n        // do something\n\n        return to_route('some-route-name')\n            -\u003ewith('notification', 'Message to display in notification');\n    }\n}\n```\n\nNotification will disappear by default after 5 seconds (5000 ms). To change that, you need to pass the duration parameter to the component. Duration is represented in milliseconds.\n\nFor example, to change the notification to disappear after 3 seconds, you can do it like this:\n\n```blade\n@livewire('tc-notification, ['duration' =\u003e 3000])\n\n// or\n\n\u003clivewire:tc-notification :duration=\"3000\"\u003e\n```\n\n### Table\n\n\u003cimg src=\"https://github.com/VojislavD/tall-components/assets/23532087/4e3706dc-2e72-4b02-b639-93f842a08b7f\"\u003e\n\nYou can use a table in the blade file of your Livewire component like this:\n\n```blade\n\u003cx-tc-table\u003e\n    \u003cx-slot:search\u003e\u003c/x-slot:search\u003e\n\n    \u003cx-slot:filters\u003e\n        \u003cx-tc-switcher wire:model.live=\"onlyActive\" label=\"Only active\" /\u003e\n    \u003c/x-slot:filters\u003e\n\n    \u003cx-slot:per-page\u003e\n        \u003cx-tc-per-page :options=\"[5, 15, 30]\" /\u003e\n    \u003c/x-slot:per-page\u003e\n\n    \u003cx-slot:heading\u003e\n        \u003cx-tc-th sortable=\"name\"\u003e\n            Name\n        \u003c/x-tc-th\u003e\n        \u003cx-tc-th sortable=\"email\"\u003e\n            Email\n        \u003c/x-tc-th\u003e\n        \u003cx-tc-th\u003e\n            Status\n        \u003c/x-tc-th\u003e\n        \u003cx-tc-th\u003e\n            Created at\n        \u003c/x-tc-th\u003e\n    \u003c/x-slot:heading\u003e\n\n    @forelse($this-\u003eusers as $user)\n        \u003cx-tc-tr href=\"{{ route('users.show', $user) }}\" :index=\"$loop-\u003eindex\"\u003e\n            \u003cx-tc-td\u003e\n                {{ $user-\u003ename }}\n            \u003c/x-tc-td\u003e\n            \u003cx-tc-td\u003e\n                {{ $user-\u003eemail }}\n            \u003c/x-tc-td\u003e\n            \u003cx-tc-td\u003e\n                {{ $user-\u003estatus }}\n            \u003c/x-tc-td\u003e\n            \u003cx-tc-td\u003e\n                {{ $user-\u003ecreated_at-\u003eformat('d.m.Y H:i') }}\n            \u003c/x-tc-td\u003e\n        \u003c/x-tc-tr\u003e\n    @empty\n        \u003cx-tc-tr\u003e\n            \u003cx-tc-td colspan=\"4\"\u003e\n                There is no results\n            \u003c/x-tc-td\u003e\n        \u003c/x-tc-tr\u003e\n    @endforelse \n\n    \u003cx-slot:pagination\u003e\n        {{ $this-\u003eusers-\u003elinks() }}\n    \u003c/x-slot:pagination\u003e\n\u003c/x-tc-table\u003e\n```\n\nAnd in Livewire component, you need to add the `WithTcTable` trait. When you are getting rows for the table (such as `$this-\u003eusers` in this example), you can use filters like this:\n\n```php\n\u003c?php\n\nnamespace App\\Livewire;\n\nuse App\\Models\\User;\nuse Livewire\\Attributes\\Computed;\nuse Livewire\\Component;\nuse TallComponents\\Livewire\\Traits\\WithTcTable;\n\nclass MyComponent extends Component\n{\n    use WithTcTable;\n\n    public bool $onlyActive = false;\n\n    #[Computed]\n    public function users(): LengthAwarePaginator|Model\n    {\n        return User::query()\n            -\u003ewhen($this-\u003etcSearch, function ($query) {\n                $query-\u003ewhere('name', 'LIKE', '%' . $this-\u003etcSearch . '%');\n            })\n            -\u003ewhen($this-\u003eonlyActive, function ($query) {\n                $query-\u003ewhere('is_active', true);\n            })\n            -\u003ewhen($this-\u003etcSortable === 'name', function ($query) {\n                $query-\u003eorderBy('name', $this-\u003etcSortDirection);\n            })\n            -\u003ewhen($this-\u003etcSortable === 'email', function ($query) {\n                $query-\u003eorderBy('email', $this-\u003etcSortDirection);\n            })\n            -\u003epaginate($this-\u003etcPerPage);\n    }\n}\n```\n#### Clickable rows\nIt is possible to allow rows to be clickable by adding the `href` attribute to the `x-tc-tr` component and passing the value where you want to be redirected.\n\nFor example, to redirect to the user profile page with the route name `users.show`, you can do it like this:\n\n```blade\n\u003cx-tc-tr :href=\"route('users.show', $user)\" :index=\"$loop-\u003eindex\"\u003e\n```\n\n#### Search filter\nSearch filter is optional; if you don't need it, you can leave out `\u003cx-slot:search\u003e\u003c/x-slot:search\u003e`. In that case, there will be no input for searching the table.\n\nThe value of the search input is stored in the `tcSearch` variable. So, to filter the table based on the value from that field, you need to use `$this-\u003etcSearch`.\n\n#### Custom filters\nYou can add any custom filter you want (In the case above, it's the `Only active` filter). You can pass any toggle, checkbox, or select input inside the `\u003cx-slot:filters\u003e` slot.\n\n#### Per page filter\nPer page filter is optional; if you don't need it, you can leave out `\u003cx-slot:per-page\u003e`.\n\n\nThe value of per page is stored in the `tcPerPage` variable, and it is `15` by default. To use it, you need to pass `$this-\u003etcPerPage` to your `paginate` method, like this:\n\n```php\n...\n-\u003epaginate($this-\u003etcPerPage);\n```\n\nYou can customize the number of rows users can choose by passing values as the `options` attribute to the `x-tc-per-page` component. For example, if you want to allow users to choose between `15`, `30`, and `50`, you can do it like this:\n\n```blade\n\u003cx-slot:per-page\u003e\n    \u003cx-tc-per-page :options=\"[15, 30, 50]\" /\u003e\n\u003c/x-slot:per-page\u003e\n```\n\n#### Sort by columns\nYou can allow sorting by any column in the table by adding `sortable` to the `\u003cx-tc-th\u003e` component and by passing the key for sorting, which you will use in Livewire components.\n\nFor example, if you want to allow sorting by user name, you can do it like this:\n\n```blade\n\u003cx-tc-th sortable=\"name\"\u003e\n    Name\n\u003c/x-tc-th\u003e\n```\n\nAnd then you can sort results based on name like this:\n\n```php\n...\n-\u003ewhen($this-\u003etcSortable === 'name', function ($query) {\n    $query-\u003eorderBy('name', $this-\u003etcSortDirection);\n})\n```\nName of the sortable column is stored in `tcSortable`, and direction is stored in the `tcSortDirection` variable. Direction will be `asc` by default and will switch between `asc` and `desc` on every click.\n\n#### Pagination\nPagination is optional; if you don't need it, you can leave out `\u003cx-slot:pagination\u003e\u003c/x-slot:pagination\u003e`.\n\n### Loading spinner\n\n\u003cimg src=\"https://github.com/VojislavD/tall-components/assets/23532087/c22b1802-84ad-418e-8769-5d41cae417d2\"\u003e\n\nAdd `\u003cx-tc-loading-spinner /\u003e` to your blade and add a `target` attribute that should match the Livewire action you want to use the spinner for.\n\n```blade\n\u003cx-tc-loading-spinner target=\"someAction\" /\u003e\n```\n\n```php\n\u003c?php\n\nnamespace App\\Livewire;\n\nuse Livewire\\Component;\n\nclass MyComponent extends Component\n{\n    public function someAction()\n    {\n        // Display spinner while this method executing\n    }\n}\n```\n\nIf you want to change the style of the spinner, you can add a `class` with the changes you want to implement.\n\nFor example, you can change the size of the spinner like this:\n\n```blade\n\u003cx-tc-loading-spinner target=\"someAction\" class=\"!w-10 !h-10\" /\u003e\n```\n\nOr if you want to make some other changes, you can publish the view file and do it there.\n\n### Drag \u0026 drop file upload (Filepond)\n\n\u003cimg src=\"https://github.com/VojislavD/tall-components/assets/23532087/5322bba9-72e3-42a3-8f0c-53ab837cb3bf\"\u003e\n\nTo use a field for file uploading, you need to add `\u003cx-tc-filepond\u003e` to your blade and set `wire:model`.\n```blade\n\u003cx-tc-filepond wire:model=\"state.file\" /\u003e\n```\n\nWhen file is uploaded it will be standard Livewire temporary uploaded file (`Livewire\\Features\\SupportFileUploads\\TemporaryUploadedFile`) and you can save it as any other file upload.\n\nIf you want to call a Livewire action immediately after a file is uploaded, you can add `callOnUpload` to the component and pass the name of the Livewire method you want to be called. For example, to call the `saveFile` method after a file is uploaded:\n```blade\n\u003cx-tc-filepond \n    wire:model=\"state.file\" \n    callOnUpload=\"saveFile\" \n/\u003e\n```\n\nYou can reset Filepond field from Livewire by dispatching event that will match `resetKey` of component. For example:\n```blade\n\u003cx-tc-filepond \n    wire:model=\"state.file\" \n    callOnUpload=\"saveFile\" \n    resetKey=\"resetFileField\" \n/\u003e\n```\n```php\n\u003c?php\n\nnamespace App\\Livewire;\n\nuse Livewire\\Component;\n\nclass MyComponent extends Component\n{\n    public function saveFile()\n    {\n        // Save file\n\n        $this-\u003edispatch('resetFileField');\n    }\n}\n```\n\nThe component allows different configurations, with the following available properties:\n| PROPERTY                | DEFAULT VALUE | DESCRIPTION                                                                         |\n|-------------------------|---------------|-------------------------------------------------------------------------------------|\n| allowDrop               | `true`        | Enable or disable drag n' drop                                                      |\n| allowBrowse             | `true`        | Enable or disable file browser                                                      |\n| allowPaste              | `true`        | Enable or disable pasting of files. Pasting files is not supported on all browsers  |\n| allowMultiple           | `false`       | Enable or disable adding multiple files                                             |\n| allowFileSizeValidation | `true`        | Enable or disable file size validation                                              |\n| minFileSize             | `null`        | The minimum size of a file, for instance `5MB` or `750KB`                           |\n| maxFileSize             | `null`        | The maximum size of a file, for instance `5MB` or `750KB`                           |\n| allowFileTypeValidation | `true`        | Enable or disable file type validation                                              |\n| acceptedFileTypes       | `[]`          | Array of accepted file types. Can be mime types or wild cards. For instance ['image/*'] will accept all images. ['image/png', 'image/jpeg'] will only accepts PNGs and JPEGs. |\n| allowImagePreview       | `true`        | Enable or disable preview mode                                                      |\n| imagePreviewMinHeight   | `44`          | Minimum image preview height                                                        |\n| imagePreviewMaxHeight   | `256`         | Maximum image preview height                                                        |\n\nIf you want to make other changes, you can publish views and edit the `filepond.blade.php` file.\n\n### Markdown editor (Quill)\n\n\u003cimg src=\"https://github.com/VojislavD/tall-components/assets/23532087/52661553-0faa-4714-9be8-a8212dcfdff6\"\u003e\n\nTo use a Quill text editor, you need to add `\u003cx-tc-quill-editor\u003e` to your blade and set `wire:model` (it's not possible to use `live` or `blur`).\n```blade\n\u003cx-tc-quill-editor wire:model=\"state.text\" /\u003e\n```\n\nYou can add placeholder text by passing the `placeholder` attribute to the component.\n```blade\n\u003cx-tc-quill-editor \n    wire:model=\"state.text\" \n    placeholder=\"Write some text here...\"\n/\u003e\n```\n\nIt's possible to make the editor read-only; just pass the `readOnly` attribute and set it to be true.\n```blade\n\u003cx-tc-quill-editor \n    wire:model=\"state.text\" \n    readOnly=\"true\"\n/\u003e\n```\n\nEditor will include all editing options in the toolbar by default. You can configure it by passing the `toolbar` attribute to the component with the editing options you want to use. For example, if you want to have only the `bold`, `italic`, and `underline` options:\n```blade\n\u003cx-tc-quill-editor \n    wire:model=\"state.text\" \n    toolbar=\"['bold', 'italic', 'underline']\"\n/\u003e\n```\n\nEditor's default toolbar:\n```\n['bold', 'italic', 'underline', 'strike'],\n['blockquote', 'code-block'],\n['link', 'formula'],\n\n[{ 'header': 1 }, { 'header': 2 }], \n[{ 'list': 'ordered'}, { 'list': 'bullet' }, { 'list': 'check' }],\n[{ 'script': 'sub'}, { 'script': 'super' }],\n[{ 'indent': '-1'}, { 'indent': '+1' }],\n[{ 'direction': 'rtl' }],\n\n[{ 'size': ['small', false, 'large', 'huge'] }],\n[{ 'header': [1, 2, 3, 4, 5, 6, false] }],\n\n[{ 'color': [] }, { 'background': [] }],\n[{ 'font': [] }],\n[{ 'align': [] }],\n\n['clean']\n```\n\nIf you want to change the theme of the editor or make any other modifications, you can publish views and edit the `quill-editor.blade.php` file.\n\n### Datetime picker (Flatpickr)\n\n\u003cimg src=\"https://github.com/VojislavD/tall-components/assets/23532087/bccf46a4-799a-405b-8673-63743990af25\"\u003e\n\nTo use the datetime picker, you need to add `\u003cx-tc-datetime-picker\u003e` to your blade and set `wire:model`.\n\n```blade\n\u003cx-tc-datetime-picker wire:model=\"state.datetime\" /\u003e\n```\n\nTo add a placeholder, just pass the `placeholder` attribute to components:\n```blade\n\u003cx-tc-datetime-picker \n    wire:model=\"state.datetime\" \n    placeholder=\"Select datetime...\" \n/\u003e\n```\n\nThe component allows for different configurations; you can pass attributes to the component to change its configuration.\n\nAvailable properties:\n| PROPERTY     | TYPE        | DEFAULT VALUE | EXAMPLE VALUE                    |\n|--------------|-------------|---------------|----------------------------------|\n| dateFormat   | String      | `Y-m-d`       | `d.m.Y`                          |\n| minDate      | String/Date | `null`        | `2024-03-01`                     |\n| maxDate      | String/Date | `null`        | `2024-03-10`                     |\n| defaultDate  | String      | `null`        | `2024-03-02`                     |\n| enableTime   | Boolean     | `false`       | `true`                           |\n| time_24hr    | Boolean     | `false`       | `true`                           |\n| minTime      | String      | `null`        | `09:00`                          |\n| maxTime      | String      | `null`        | `11:00`                          |\n| mode         | String      | `single`      | `single`, `multiple`, or `range` |\n| noCalendar   | Boolean     | `false`       | `true`                           |\n\nIf you want to make additional changes, you can publish views and edit the `datetime-picker.blade.php` file.\n\n## Testing\nRun tests with:\n\n```bash\ncomposer test\n```\n\n## Credits\n\n- [Vojislav Dragicevic](https://vojislavd.com/)\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvojislavd%2Ftall-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvojislavd%2Ftall-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvojislavd%2Ftall-components/lists"}