Mecha CMS

Panel’s API.

Fields

Author: Taufik Nurrohman · 49 Views

Tweet

Field API.

Syntax:

Config::set('panel.f.{$tab}', [ … ]);
[
    'title' => [
        'type' => 'text',
        'value' => 'Title Field',
        …
    ],
    'url' => [
        'type' => 'url',
        'value' => 'http://mecha-cms.com',
        …
    ],
    …
]

Example:

Config::set('panel.f.page', [
    'f_name' => [
        'type' => 'text',
        'value' => 'Title Field',
        'stack' => 10
    ]
]);

Title 

Determine the field’s title:

[
    'title' => 'Content'
]

Note: If title property is not set, the parser will try to find a language property that has the same key name as the field’s name property, otherwise, it will return the field’s name.

Description 

Determine the field’s description or hint:

[
    'description' => 'e.g. @user'
]

Key 

Determine custom key to be used for HTML class/ID prefix if the name data is written in a complicated form like: page[date][unix]

'page[date][unix]' => [
    'key' => 'page'
]

Result:

<p class="f f-page type:textarea">
  <label for="f-page">Page</label>
  <span>
    <textarea name="page[date][unix]" class="textarea" id="f-page"></textarea>
  </span>
</p>

Type 

Determine the field type (default is textarea):

  • button
  • button[]
  • color
  • content
  • date
  • editor
  • email
  • file
  • hidden
  • number
  • pass(?:word)?
  • query
  • range
  • reset
  • reset[]
  • search
  • select
  • select[]
  • submit
  • submit[]
  • tel
  • text
  • textarea
  • toggle
  • toggle[]
  • url

Button 

'foo' => [
    'type' => 'button',
    'value' => 1,
    'title' => 'Action',
    'text' => 'Save'
]

Result:

<p class="f f-foo type:button">
  <label for="f-foo">Action</label>
  <span>
    <button name="foo" value="1" type="button" class="button" id="f-foo">Save</button>
  </span>
</p>

Color 

'foo' => [
    'type' => 'color',
    'value' => '#bada55',
    'title' => 'Color'
]

Result:

<p class="f f-foo type:color">
  <label for="f-foo">Color</label>
  <span>
    <input name="foo" value="#bada55" type="color" class="input" id="f-foo">
  </span>
</p>

Content 

'foo' => [
    'type' => 'content',
    'value' => '<p>Lorem ipsum dolor sit amet.</p>',
    'title' => 'Description'
]

Result:

<p class="f f-foo type:content">
  <label for="f-foo">Description</label>
  <span>
    <p>Lorem ipsum dolor sit amet.</p>
  </span>
</p>

Date 

'foo' => [
    'type' => 'date',
    'value' => '2017/10/17 16:19:57',
    'title' => 'Date'
]

Result:

<p class="f f-foo type:date">
  <label for="f-foo">Date</label>
  <span>
    <input name="foo" value="2017/10/17 16:19:57" type="text" class="input date" id="f-date">
  </span>
</p>

Editor 

Email 

'foo' => [
    'type' => 'email',
    'title' => 'Email'
]

Result:

<p class="f f-foo type:email">
  <label for="f-foo">Email</label>
  <span>
    <input name="foo" type="email" class="input" id="f-foo">
  </span>
</p>

File 

Hidden 

Number 

'foo' => [
    'type' => 'number',
    'title' => 'Chunk'
]

Result:

<p class="f f-foo type:number">
  <label for="f-foo">Chunk</label>
  <span>
    <input name="foo" type="number" class="input" id="f-foo">
  </span>
</p>

Pass 

Query 

Range 

Reset 

Search 

Select 

Submit 

Tel 

Text 

Text Area 

Toggle 

URL 

Value 

Determine the field’s value:

[
    'value' => '4'
]

Values 

Determine the field’s values (result depends on field type):

For field type select, values property will be used as the option list:

[
    'type' => 'select',
    'value' => 'red', // selected value
    'values' => [ // option(s)
        'red' => 'Red',
        'green' => 'Green',
        'blue' => 'Blue'
    ]
]

For field type toggle[], values property will be used as the option list:

[
    'type' => 'toggle[]',
    'value' => 'red', // selected value
    'values' => [ // option(s)
        'red' => 'Red',
        'green' => 'Green',
        'blue' => 'Blue'
    ]
]

For field type button[], reset[] and submit[], values property will be used as the button list; value property is not required for this field type:

[
    'type' => 'submit[]',
    'values' => [ // button(s)
        'red' => 'Red',
        'green' => 'Green',
        'blue' => 'Blue'
    ]
]

Order 

Custom order for the values data of field type (?:button|reset|submit)\[\]:

[
    'type' => 'submit[]',
    'values' => [
        'red' => 'Red',
        'green' => 'Green',
        'blue' => 'Blue'
    ],
    'order' => ['blue', 'red', 'green']
]

Placeholder 

Determine the field placeholder:

[
    'placeholder' => 'Content goes here…'
]

Pattern 

Determine the field pattern:

[
    'pattern' => '^[a-z\\d]+$',
    'description' => 'Letters and numbers only.'
]

Range 

Determine the minimum and maximum range for field type range:

[
    'type' => 'range',
    'value' => 4,
    'range' => [0, 10]
]

Step 

Determine the step property for field type range:

[
    'type' => 'range',
    'value' => 4,
    'range' => [0, 10],
    'step' => 2
]

Union 

Arguments for Union::__construct().

'description' => [
    'type' => 'textarea',
    'union' => ['div']
]

Result:

<div class="f f-description p">
  …
</div>

Hidden 

Boolean to indicate that the field should be hidden:

[
    'hidden' => $site->type === '404'
]

Width 

Determine if the field element should be expanded 100% wide of the current grid:

'description' => [
    'type' => 'text',
    'width' => true
]

Result:

<p class="f f-description">
  <label for="f-description">Description</label>
  <span>
    <inpuy name="description" type="text" class="input width">
  </span>
</p>

You can use integer and string type as the value to set inline CSS width value:

'description' => [
    'type' => 'text',
    'width' => '4em'
]

Result:

<p class="f f-description">
  <label for="f-description">Description</label>
  <span>
    <inpuy name="description" type="text" class="input width" style="width: 4em;">
  </span>
</p>

Height 

Will expand the <textarea> element vertically for field type textarea or editor:

'description' => [
    'type' => 'textarea',
    'height' => true
]

Result:

<p class="f f-description">
  <label for="f-description">Description</label>
  <span>
    <textarea name="description" class="textarea width height"></textarea>
  </span>
</p>

You can use integer and string type as the value to set inline CSS height value:

'description' => [
    'type' => 'textarea',
    'height' => '4em'
]

Result:

<p class="f f-description">
  <label for="f-description">Description</label>
  <span>
    <textarea name="description" class="textarea width height" style="height: 4em;"></textarea>
  </span>
</p>

Attributes 

Extra HTML attributes for the field markup:

[
    'attributes' => [
        'rel' => 'nofollow',
        'target' => '_blank',
        'data' => [
            'user' => '@user'
        ],
        'css' => [
            'color' => '#f00',
            'border' => '1px solid #000'
        ]
    ]
]

Expand 

Will hide the field label and expand the field element to be 100% wide of the current parent:

'description' => [
    'expand' => true
]

Result:

<p class="f f-description expand">
  <label for="f-description">Description</label>
  <span>
    <textarea name="description" class="textarea block"></textarea>
  </span>
</p>

Stack 

Field order in the set. This is required. If not set or has value other than numbers, the field will not be generated:

[
    'a' => [
        'title' => 'Field A',
        'stack' => 3
    ],
    'b' => [
        'title' => 'Field B',
        'stack' => 1
    ],
    'c' => [
        'title' => 'Field C',
        'stack' => 2
    ]
]

0 Comments

No comments yet.