{"id":24054551,"url":"https://github.com/codewithdennis/filament-advanced-components-documentation","last_synced_at":"2025-04-22T20:45:24.312Z","repository":{"id":269587483,"uuid":"907870481","full_name":"CodeWithDennis/filament-advanced-components-documentation","owner":"CodeWithDennis","description":"This plugin extends existing FilamentPHP components with advanced features and enhanced functionality, offering more powerful and flexible options for your projects.","archived":false,"fork":false,"pushed_at":"2025-03-28T08:08:33.000Z","size":2007,"stargazers_count":24,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-16T01:59:19.733Z","etag":null,"topics":["filamentphp","filamentphp-3","filamentphp-plugin","laravel","plugin"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CodeWithDennis.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"publiccode":null,"codemeta":null}},"created_at":"2024-12-24T15:46:11.000Z","updated_at":"2025-03-28T08:08:36.000Z","dependencies_parsed_at":null,"dependency_job_id":"6735a391-a83d-45cb-99d5-d17dcf0f89ae","html_url":"https://github.com/CodeWithDennis/filament-advanced-components-documentation","commit_stats":null,"previous_names":["codewithdennis/filament-advanced-components-documentation"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeWithDennis%2Ffilament-advanced-components-documentation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeWithDennis%2Ffilament-advanced-components-documentation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeWithDennis%2Ffilament-advanced-components-documentation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeWithDennis%2Ffilament-advanced-components-documentation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CodeWithDennis","download_url":"https://codeload.github.com/CodeWithDennis/filament-advanced-components-documentation/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250322040,"owners_count":21411693,"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":["filamentphp","filamentphp-3","filamentphp-plugin","laravel","plugin"],"created_at":"2025-01-09T03:47:55.129Z","updated_at":"2025-04-22T20:45:24.305Z","avatar_url":"https://github.com/CodeWithDennis.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Filament Advanced Components\n\nThis plugin **extends** existing **FilamentPHP 3** components with advanced features and enhanced functionality, offering more powerful and flexible options for your projects.\n\n## Licences\nYou can buy a license for the plugin on the [AnyStack](https://checkout.anystack.sh/filament-advanced-components) website.\n\n## Table of Contents\n\n- [Licences](#licences)\n- [Installation](#installation)\n    - [Custom Theme](#custom-theme)\n- [Getting Started](#getting-started)\n    - [Image](#image)\n        - [Image size](#image-size)\n        - [Image extra attributes](#image-extra-attributes)\n    - [Mailable](#mailable)\n    - [Callable](#callable)\n    - [WhatsApp-able](#whatsapp-able)\n    - [Masked](#masked)\n        - [Mask Characters](#mask-characters)\n        - [Mask Index](#mask-index)\n        - [Mask Length](#mask-length)\n    - [Bold](#bold)\n    - [Underline](#underline)\n    - [Italic](#italic)\n    - [Strikethrough](#strikethrough)\n    - [Badges](#badges)\n        - [Border](#border)\n        - [Pulse](#pulse)\n        - [Bounce](#bounce)\n        - [Border radius](#border-radius)\n        - [Color](#color)\n    - [Character count](#character-count)\n    - [Character limit](#character-limit)\n    - [Character limit color](#character-limit-color)\n      - [Character limit border color](#character-limit-border-color)\n    - [Character limit icon](#character-limit-icon)\n    - [Copyable](#copyable)\n    - [Border color](#border-color)\n    - [Filters](#filters)\n        - [Advanced Select Filter](#advanced-select-filter)\n        - [Advanced Toggle Buttons Filter](#toggle-buttons-filter)\n- [Code Distribution](#code-distribution)\n\n## Installation\n\nTo install the plugin, you need to add the repository to your `composer.json` file.\n\n```json\n{\n    \"repositories\": [\n        {\n            \"type\": \"composer\",\n            \"url\": \"https://filament-advanced-components.composer.sh\"\n        }\n    ]\n}\n```\n\nOnce the repository has been added to the composer.json file, you can install the plugin using the following command.\n\n```bash\ncomposer require codewithdennis/filament-advanced-components\n```\n\nYou will be prompted to provide your username and password. The username will be the email address and the password will be equal to your license key.\n\n```bash\nLoading composer repositories with package information\nAuthentication required (filament-advanced-components.composer.sh):\nUsername: [licensee-email]\nPassword: [license-key]\n```\n\n### Custom Theme\nYou will need a [custom theme](https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme) to use the plugin.\n\nMake sure you add the following to your `tailwind.config.js file.\n\n```bash\n'./vendor/codewithdennis/filament-advanced-components/resources/**/*.blade.php',\n```\n\nInclude the following import in your theme stylesheet.\n\n```css\n@import '/vendor/codewithdennis/filament-advanced-components/resources/css/index.css';\n```\n\n## Getting Started\n\n### Image\n\nYou can add a `suffix` or `prefix` image to the following components; `AdvancedCheckboxList`, `AdvancedSelect`, `AdvancedSelectFilter`, `AdvancedTextColumn` and `AdvancedTextEntry`.\n\n![advanced-select](https://raw.githubusercontent.com/CodeWithDennis/filament-advanced-components-documentation/refs/heads/main/art/advanced-select.png)\n\n```php\n-\u003esuffixImage(fn (Model $record): string =\u003e asset('images/'.$record-\u003eimage))\n```\n\n```php\n-\u003eprefixImage(fn (Model $record): string =\u003e asset('images/'.$record-\u003eimage))\n```\n\n#### Image size\n\n```php\n-\u003esuffixImageSize(32)\n```\n\n```php\n-\u003eprefixImageSize(32)\n```\n\n#### Image extra attributes\n\n```php\n-\u003esuffixImageExtraAttributes([\n    'class' =\u003e 'pr-4',\n]),\n```\n\n```php\n-\u003eprefixImageExtraAttributes([\n    'class' =\u003e 'pr-4',\n]),\n```\n\n### Mailable\n\nMailable works with the following components; `AdvancedTextColumn` and `AdvancedTextEntry`, This will make the value a clickable mailto link.\n\n```php\n-\u003emailable()\n```\n\nIf you want to apply a mailable based on a condition, you can pass a closure that returns a boolean value.\n\n```php\n-\u003emailable(fn (string $state): bool =\u003e str($state)-\u003eendsWith('.com'))\n```\n\n### Callable\n\nCallable works with the following components; `AdvancedTextColumn` and `AdvancedTextEntry`, This will make the value a clickable tel link.\n\n```php\n-\u003ecallable()\n```\n\nIf you want to apply a callable based on a condition, you can pass a closure that returns a boolean value.\n\n```php\n-\u003ecallable(fn (string $state): bool =\u003e str($state)-\u003estartsWith('+'))\n```\n\n### WhatsApp-able\n\nWhatsApp-able works with the following components; `AdvancedTextColumn` and `AdvancedTextEntry`, This will make the value a clickable WhatsApp link.\n\n```php\n-\u003ewhatsappable()\n```\n\nIf you want to apply a WhatsApp-able based on a condition, you can pass a closure that returns a boolean value.\n\n```php\n-\u003ewhatsappable(fn (string $state): bool =\u003e str($state)-\u003estartsWith('+'))\n```\n\n### Masked\n\n![masked](https://raw.githubusercontent.com/CodeWithDennis/filament-advanced-components-documentation/refs/heads/main/art/masked.png)\n\nMasked works with the following components; `AdvancedTextColumn` and `AdvancedTextEntry`, This will mask the value.\n\n```php\n-\u003emasked()\n```\n\n\nIf you want to apply a mask based on a condition, you can pass a closure that returns a boolean value.\n\n```php\n-\u003emasked(fn (string $state): bool =\u003e ! auth()-\u003euser()-\u003eis_admin)\n```\n\n#### Mask Characters\n\nYou can change the mask character by passing a **maskCharacters** option to the component.\n\n```php\n-\u003emaskCharacters('█')\n```\n\n#### Mask Index\n\nIf you want to start the mask from a specific index, you can add a **maskIndex** option to the component.\n\n```php\n-\u003emaskIndex(5)\n```\n\n#### Mask Length\n\nThe length of the mask can be changed by adding a **maskLength** option to the component. When the length is set to `null` (default), the mask will be applied to the whole value.\n\n```php\n-\u003emaskLength(5)\n```\n\n### Bold\n\nBold works with the following components; `AdvancedTextColumn` and `AdvancedTextEntry`, This will make the value bold.\n\n```php\n-\u003ebold()\n```\n\n### Underline\n\nUnderline works with the following components; `AdvancedTextColumn` and `AdvancedTextEntry`, This will underline the value.\n\n```php\n-\u003eunderline()\n```\n\n### Italic\n\nItalic works with the following components; `AdvancedTextColumn` and `AdvancedTextEntry`, This will italicize the value.\n\n```php\n-\u003eitalic()\n```\n\n### Strikethrough\n\nStrikethrough works with the following components; `AdvancedTextColumn` and `AdvancedTextEntry`, This will strikethrough the value.\n\n```php\n-\u003estrikethrough()\n```\n\n### Badges\n\n![badges](https://raw.githubusercontent.com/CodeWithDennis/filament-advanced-components-documentation/refs/heads/main/art/badges.png)\n\nBadges works with the following components; `AdvancedTextColumn` and `AdvancedTextEntry`.\n\n```php\n-\u003ebadges([\n    AdvancedBadge::make('example'),\n])\n```\n\n#### Border\n\nIf you want to have a border on your badge you can use the **border** method.\n\n```php\n-\u003eborder()\n```\n\n#### Pulse\n\nIf you want to make a badge pulse you can use the **pulse** method.\n\n```php\n-\u003epulse()\n```\n\n#### Bounce\n\nIf you want to make a badge bounce you can use the **bounce** method.\n\n```php\n-\u003ebounce()\n```\n\n#### Border radius\n\nIf you want to change the border radius of the badge you can use the **borderRadius** method (in px).\n\n```php\n-\u003eborderRadius(5)\n```\n\n#### Color\n\nIf you want to change the color of the badge you can use the **color** method.\n\n```php\n-\u003ecolor('danger')\n```\n\n### Character count\n\n![count-textarea](https://raw.githubusercontent.com/CodeWithDennis/filament-advanced-components-documentation/refs/heads/main/art/count-textarea.png)\n\nCharacter count works with the following components; `AdvancedTextColumn` and `AdvancedTextarea`, This will count the characters and display the count.\n\n```php\n-\u003echaracterCount()\n```\n\n### Character limit\n\n\u003e [!WARNING]  \n\u003e This is only **visual** and does not enforce the limit.\n\nCharacter limit works with the following components; `AdvancedTextColumn` and `AdvancedTextarea`, This will display a limit.\n\n```php\n-\u003echaracterLimit(100)\n```\n\n### Character limit color\n\nIf you want to change the color of the character limit you can use the **characterLimitColor** method.\n\n```php\n-\u003echaracterLimitColor('danger'),\n```\n\n#### Character limit border color\n\nBy default, the border color will not change when the limit is reached. You can change this by passing a second parameter.\n\n```php\n-\u003echaracterLimitColor(color: 'danger', border: true),\n```\n\n### Character limit icon\n\nIf you want to change the icon of the character limit you can use the **characterLimitIcon** method.\n\n```php\n-\u003echaracterLimitIcon('heroicon-s-exclamation'),\n```\n\n### Copyable\n\nCopyable works with the following components; `AdvancedTextInput` which will add a copy button to the input.\n\n```php\n-\u003ecopyable()\n```\n\n### Border color\n\nIf you want to change the border color of `AdvancedTextInput`, `AdvancedSelect` or `AdvancedTextarea` you can use the **borderColor** method. \n\n```php\n-\u003eborderColor('primary')\n```\n\n### Filters\n\n#### Advanced Select Filter\n\n![advanced-select-filter](https://raw.githubusercontent.com/CodeWithDennis/filament-advanced-components-documentation/refs/heads/main/art/advanced-select-filter.png)\n\n```php\n-\u003efilters([\n    AdvancedSelectFilter::make('country.name')\n        -\u003erelationship('country', 'name')\n])\n```\n\n#### Toggle Buttons Filter\n\n![toggle-buttons-filter](https://raw.githubusercontent.com/CodeWithDennis/filament-advanced-components-documentation/refs/heads/main/art/toggle-buttons-filter-table.png)\n\nSimilar to the `ToggleButtons` form component, the `AdvancedToggleButtonsFilter` allows you to filter using toggle buttons.\n\n```php\n-\u003efilters([\n    AdvancedToggleButtonsFilter::make('status')\n        -\u003eoptions(CompanyStatus::class)\n        -\u003einline(),\n])\n```\n\n## Code Distribution\n\nLicenses strictly prohibit the public distribution of its source code. This means you are not permitted to use Filament Advanced Components to build an application and then distribute that application publicly through open-source repositories, hosting platforms, or any other code-sharing platforms.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodewithdennis%2Ffilament-advanced-components-documentation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodewithdennis%2Ffilament-advanced-components-documentation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodewithdennis%2Ffilament-advanced-components-documentation/lists"}