381 lines
14 KiB
PHP
381 lines
14 KiB
PHP
<?php
|
|
|
|
use Rawilk\FormComponents\Components;
|
|
|
|
return [
|
|
/*
|
|
|--------------------------------------------------------------------------
|
|
| Component Defaults
|
|
|--------------------------------------------------------------------------
|
|
|
|
|
| We've added some common options you may want to globally edit to avoid
|
|
| having to change them everytime you call a component or having to
|
|
| override a component definition.
|
|
|
|
|
*/
|
|
'defaults' => [
|
|
// Global defaults will be applied to all components.
|
|
'global' => [
|
|
// Show error states by default.
|
|
'show_errors' => true,
|
|
|
|
// Set the fields to use by default for properties on options in select components.
|
|
'value_field' => 'id',
|
|
'label_field' => 'name',
|
|
// Will default to label field if null - only applies to custom selects
|
|
'selected_label_field' => null,
|
|
'disabled_field' => 'disabled',
|
|
'children_field' => 'children',
|
|
],
|
|
|
|
// Input defaults will be applied to all input types (email, password, etc.).
|
|
'input' => [
|
|
// Supported: 'sm', 'md', 'lg'
|
|
// Applies to all input types except for checkbox/radios.
|
|
'size' => 'md',
|
|
|
|
// Classes applied by default to input parent div.
|
|
// Will also apply to select.
|
|
'container_class' => null,
|
|
|
|
// Base input classes applied by default.
|
|
'input_class' => null,
|
|
],
|
|
|
|
'password' => [
|
|
// Show the password reveal button by default.
|
|
'show_toggle' => true,
|
|
|
|
// Icon shown when password is hidden.
|
|
'show_icon' => 'heroicon-m-eye',
|
|
|
|
// Icon shown when password is revealed.
|
|
'hide_icon' => 'heroicon-m-eye-slash',
|
|
],
|
|
|
|
'textarea' => [
|
|
// How many rows should the textarea have by default.
|
|
'rows' => 3,
|
|
|
|
// Automatically resize the textarea based on content length.
|
|
'auto_resize' => true,
|
|
],
|
|
|
|
'select' => [
|
|
// Automatically apply a CSS class to each select.
|
|
'input_class' => null,
|
|
],
|
|
|
|
// Defaults for checkbox/radios.
|
|
'choice' => [
|
|
// Automatically apply a CSS class to each checkbox/radio container.
|
|
'container_class' => null,
|
|
|
|
// Automatically apply a CSS class to each checkbox/radio input.
|
|
'input_class' => null,
|
|
|
|
// Supported: 'sm', 'md', 'lg' (defaults to 'sm')
|
|
'size' => null,
|
|
|
|
// Show the description inline with the label by default.
|
|
'inline_description' => false,
|
|
|
|
// Render the label on the left side of the checkbox/radio by default.
|
|
'label_left' => false,
|
|
],
|
|
|
|
// Defaults for the switch toggle component.
|
|
'switch_toggle' => [
|
|
// Apply a CSS class to the label that contains the switch toggle globally.
|
|
'container_class' => null,
|
|
|
|
// Apply a CSS class to the switch toggle (not the actual input element) globally.
|
|
'input_class' => null,
|
|
|
|
// Set the default size of the switch toggle.
|
|
// Supported: 'sm', 'md', 'lg', (default is 'md')
|
|
'size' => null,
|
|
|
|
// Set the default color of the switch toggle. (e.g. "blue", "red", "green", etc.)
|
|
'color' => null,
|
|
|
|
// Set the default icon to show when the switch is in an "on" state.
|
|
'on_icon' => null,
|
|
|
|
// Set the default icon to show when the switch is in an "off" state.
|
|
'off_icon' => null,
|
|
],
|
|
|
|
// Defaults for the date picker component.
|
|
'date_picker' => [
|
|
// Allow date picker to open from clicking on the input by default.
|
|
'click_opens' => false,
|
|
|
|
// Allow user to modify the text of the input by default.
|
|
'allow_input' => true,
|
|
|
|
// Enable the time picker by default.
|
|
'enable_time' => false,
|
|
|
|
// Set the default date format. (defaults to y-m-d)
|
|
'format' => null,
|
|
|
|
// Set an icon to show on the date picker for an "open" button by default.
|
|
// Set to null to hide it.
|
|
'toggle_icon' => 'heroicon-m-calendar',
|
|
|
|
// Allow date pickers to be cleared by a clear button by default.
|
|
'clearable' => true,
|
|
|
|
// Set an icon to show on the date picker's clear button by default.
|
|
'clear_icon' => 'heroicon-m-x-mark',
|
|
|
|
// Set the default placeholder text for the date picker.
|
|
// For best results, use a translation key as it will be translated automatically by the component.
|
|
'placeholder' => 'form-components::messages.date_picker_placeholder',
|
|
],
|
|
|
|
// Defaults for custom and tree select.
|
|
'custom_select' => [
|
|
// Apply a CSS class by default to the root element of the custom select.
|
|
// Note: this will also apply to tree-select as well.
|
|
'container_class' => null,
|
|
|
|
// Apply a CSS class by default to the custom select button.
|
|
'input_class' => null,
|
|
|
|
// Apply a CSS class by default to the custom select menu.
|
|
'menu_class' => null,
|
|
|
|
// Make custom selects searchable by default.
|
|
'searchable' => true,
|
|
|
|
// Make custom selects clearable by default.
|
|
// Will not show the clear button if the select is not optional.
|
|
'clearable' => true,
|
|
|
|
// Make custom selects optional by default. When marked as optional, custom select
|
|
// will allow you to clear out its value, unless it has a minimum amount of options
|
|
// required in a multi-select.
|
|
'optional' => false,
|
|
|
|
// Set the default icon to use to show that an option is selected.
|
|
// Set to null to disable it.
|
|
'option_selected_icon' => 'heroicon-m-check',
|
|
|
|
// Define the name of the icon to show on the custom select button by default.
|
|
// Set to null to hide it.
|
|
'button_icon' => 'heroicon-m-chevron-down',
|
|
|
|
// Define the default clear icon that will show on the custom select button and
|
|
// multi-select selected options. Set to null to hide it.
|
|
'clear_icon' => 'heroicon-m-x-mark',
|
|
|
|
// In a multi-select, this is the minimum amount of options that must be selected.
|
|
// Set to null or 0 to disable it.
|
|
'min_selected' => null,
|
|
|
|
// In a multi-select, this is the maximum amount of options that can be selected.
|
|
// Set to null to disable it.
|
|
'max_selected' => null,
|
|
],
|
|
|
|
// Defaults for the tree select.
|
|
'tree_select' => [
|
|
// Set the default icon to use to show that an option has children.
|
|
// Icon will be rotated to indicate when the option is expanded.
|
|
'has_child_icon' => 'heroicon-m-chevron-right',
|
|
],
|
|
|
|
// Defaults for the timezone select.
|
|
'timezone_select' => [
|
|
// Use the custom select component by default for the timezone select.
|
|
'use_custom_select' => true,
|
|
],
|
|
|
|
// Defaults for the form groups.
|
|
'form_group' => [
|
|
// Apply a CSS class to the root form group element globally.
|
|
'class' => null,
|
|
|
|
// Apply a margin bottom by default to form groups (except for last child).
|
|
'margin_bottom' => true,
|
|
|
|
// Render a border on top of each form group by default.
|
|
// Does not render on first of type form groups in a container.
|
|
// This option only applies to inline form groups as well.
|
|
'border' => true,
|
|
|
|
// Make all form groups show the label inline with the input by default.
|
|
'inline' => false,
|
|
|
|
// Apply a CSS class to the form group label container globally.
|
|
'label_container_class' => null,
|
|
|
|
// Apply a CSS class to the form group content globally.
|
|
'content_class' => null,
|
|
],
|
|
|
|
// Defaults for the file upload component.
|
|
'file_upload' => [
|
|
// Display a file upload progress bar by default.
|
|
// Only shows if a "wire:model" is present.
|
|
'display_upload_progress' => true,
|
|
|
|
// Use the native HTML5 progress bar by default.
|
|
// Not recommended if you need consistent styling across browsers.
|
|
'use_native_progress_bar' => false,
|
|
|
|
// Globally apply a CSS class to each file upload container.
|
|
'container_class' => null,
|
|
|
|
// Globally apply a CSS class to each file upload input.
|
|
'input_class' => null,
|
|
],
|
|
|
|
// Defaults for the file pond component.
|
|
'file_pond' => [
|
|
// Allow drag and drop file uploads by default.
|
|
'allow_drop' => true,
|
|
|
|
// Limit multiple file uploads to a certain number of files by default.
|
|
// Set to null to allow unlimited files.
|
|
'max_files' => 5,
|
|
|
|
// Configure FilePond options by default.
|
|
'options' => [],
|
|
],
|
|
|
|
// Defaults for quill.
|
|
'quill' => [
|
|
// Automatically focus the editor on page load by default.
|
|
'auto_focus' => false,
|
|
],
|
|
|
|
// Defaults for form errors.
|
|
'form_error' => [
|
|
// Define which HTML tag to use for the error message by default.
|
|
'tag' => 'p',
|
|
],
|
|
],
|
|
|
|
/*
|
|
|--------------------------------------------------------------------------
|
|
| Component Aliases
|
|
|--------------------------------------------------------------------------
|
|
|
|
|
| Here you may define aliases for components this package provides.
|
|
| For example, instead of rendering an input with <x-form-components::inputs.input>,
|
|
| you may register an alias of 'input' and render it with <x-jetstream.input>
|
|
| instead.
|
|
|
|
|
*/
|
|
'components' => [
|
|
|
|
// Base
|
|
'form' => Components\Form::class,
|
|
'form-error' => Components\FormError::class,
|
|
'form-group' => Components\FormGroup::class,
|
|
'label' => Components\Label::class,
|
|
|
|
// Choice
|
|
'checkbox-group' => Components\Choice\CheckboxGroup::class,
|
|
'checkbox' => Components\Choice\Checkbox::class,
|
|
'radio' => Components\Choice\Radio::class,
|
|
'switch-toggle' => Components\Choice\SwitchToggle::class,
|
|
|
|
// Inputs
|
|
'input' => Components\Inputs\Input::class,
|
|
'email' => Components\Inputs\Email::class,
|
|
'password' => Components\Inputs\Password::class,
|
|
'select' => Components\Inputs\Select::class,
|
|
'textarea' => Components\Inputs\Textarea::class,
|
|
'date-picker' => Components\Inputs\DatePicker::class,
|
|
'custom-select' => Components\Inputs\CustomSelect::class,
|
|
'custom-select-option' => Components\Inputs\CustomSelectOption::class,
|
|
'timezone-select' => Components\Inputs\TimezoneSelect::class,
|
|
'tree-select' => Components\Inputs\TreeSelect::class,
|
|
'tree-select-option' => Components\Inputs\TreeSelectOption::class,
|
|
|
|
// Files
|
|
'file-upload' => Components\Files\FileUpload::class,
|
|
'file-pond' => Components\Files\FilePond::class,
|
|
|
|
// Rich Text
|
|
'quill' => Components\RichText\Quill::class,
|
|
|
|
],
|
|
|
|
/*
|
|
|--------------------------------------------------------------------------
|
|
| Prefix
|
|
|--------------------------------------------------------------------------
|
|
|
|
|
| This value will be a prefix for all component aliases under the
|
|
| `components` key. This is useful if you want to avoid collisions
|
|
| with components from other libraries.
|
|
|
|
|
| If you set it to "tw", for example, you can reference it like this:
|
|
|
|
|
| <x-tw-input />
|
|
|
|
|
*/
|
|
'prefix' => '',
|
|
|
|
/*
|
|
|--------------------------------------------------------------------------
|
|
| Enable Timezone Select
|
|
|--------------------------------------------------------------------------
|
|
|
|
|
| If you don't plan on using a timezone select in your app, you can disable
|
|
| it here. This will prevent the use of app('fc-timezone'). You should also
|
|
| remove the "timezone-select" from the registered components in the config
|
|
| as well.
|
|
|
|
|
*/
|
|
'enable_timezone' => true,
|
|
|
|
/*
|
|
|--------------------------------------------------------------------------
|
|
| Default Timezone Subset
|
|
|--------------------------------------------------------------------------
|
|
|
|
|
| You may not always need the full list of timezones to choose from,
|
|
| so you may define a subset of regions to pull from instead. Set
|
|
| the value to `false` to use all regions.
|
|
|
|
|
| Example: [\Rawilk\FormComponents\Support\TimezoneRegionEnum::America->value]
|
|
|
|
|
*/
|
|
'timezone_subset' => false,
|
|
|
|
/*
|
|
|--------------------------------------------------------------------------
|
|
| Global Optional Hint
|
|
|--------------------------------------------------------------------------
|
|
|
|
|
| You may set a global "optional" hint text for all optional form inputs
|
|
| when you set the `optional` attribute on `<x-form-group>` components
|
|
| to `true`. Set to `null` to disable showing it. The default provided
|
|
| by the package is a translation key which will be translated
|
|
| automatically for you.
|
|
|
|
|
*/
|
|
'optional_hint_text' => 'form-components::messages.optional',
|
|
|
|
/*
|
|
|--------------------------------------------------------------------------
|
|
| FormComponents Assets URL
|
|
|--------------------------------------------------------------------------
|
|
|
|
|
| This value sets the path to the FormComponents JavaScript assets, for cases
|
|
| where your app's domain root is not the correct path. By default,
|
|
| FormComponents will load its JavaScript assets from the app's
|
|
| "relative root".
|
|
|
|
|
| Examples: "/assets", "myapp.com/app",
|
|
|
|
|
*/
|
|
'asset_url' => null,
|
|
];
|