Initial commit
This commit is contained in:
Ronald Huynen
380
config/form-components.php
Normal file
380
config/form-components.php
Normal file
@@ -0,0 +1,380 @@
|
||||
<?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,
|
||||
];
|
||||
Reference in New Issue
Block a user