Formula Field(ui_formula_field)Ui Bibz Logo

UiBibz::Ui::Core::Forms::Numbers::FormulaField

By default, the second input name will take the first input name + "_formula".
If there is an error in your formula, a warning will be diplay with an explain through attribute title in addon warning.

Usage

This component is an extension of component element. A Ui Bibz component consists of 3 arguments:
  • content[value/block]
  • html_options[hash]<default: {}>
  • options[hash]<default: {}>

 # by variable 
 ui_formula_field name, options, html_options 

 # or by block 
 ui_formula_field options, html_options do 
   name 
 end

Options

The specific options for this component are:
  • action[string](use component stimulus-options method)
  • append[html]Add a content before the field
  • cache[string](use to cache your component)
  • controller[string](use component stimulus-options method)
  • prepend[html]Add a content after the field
  • size[symbol](:lg, :md, :sm)(use component size method)
  • state[symbol](:active, :disabled, :valid, :invalid)
  • status[symbol](:success, :danger)
  • target[string](use component stimulus-options method)
  • turbo[string](use component turbo method)
  • ui_formula_field_name[symbol]

Examples

Some examples explain how to use the options present in the component.

Formula Field

=
ui_formula_field "value", {}, { placeholder: "Type your formula..."}

<div class="input-group ui_formula_field">
  <input type="text" name="value" id="value" value="" placeholder="Type your formula..." class="ui_formula_field_input form-control">
  <span class="ui_formula_field_sign input-group-addon">=</span>
  <input type="text" name="value_formula" id="value_formula" value="" readonly="readonly" class="ui_formula_field_result form-control">
  <span class="ui_formula_field_alert input-group-addon" data-bs-toggle="tooltip">
    <i class="glyph-danger glyph fa fa-exclamation-triangle"></i>
  </span>
</div>

Append, prepend

=
ui_formula_field 'value', append: ui_glyph("calendar"), prepend: ui_glyph("pencil-alt")

<div class="formula_field input-group ui_surround_field">
  <span class="input-group-text"><i class="glyph fas fa-calendar"></i></span>
  <input type="text" name="value_formula" id="value_formula" class="formula-field form-control">
  <span class="formula-field-sign input-group-text" style="display: none;">=</span>
  <input type="text" name="value" id="value" class="formula-field-result form-control" readonly="readonly" style="visible: hidden">
  <span data-bs-toggle="tooltip" class="formula-field-alert input-group-text" style="display: none;" data-original-title="" title=""><i class="glyph-danger glyph fas fa-exclamation-triangle"></i></span>
  <span class="input-group-text"><i class="glyph fas fa-pencil-alt"></i></span>
</div>

Formula Field Status

=
=
ui_formula_field "value", status: :success
ui_formula_field 'value', status: :danger

<div class="formula_field is-valid input-group ui_surround_field">
  <input type="text" name="value_formula" id="value_formula" class="is-valid formula-field form-control">
  <span class="formula-field-sign input-group-text" style="display: none;">=</span>
  <input type="text" name="value" id="value" class="formula-field-result form-control" readonly="readonly" style="visible: hidden">
  <span data-bs-toggle="tooltip" class="formula-field-alert input-group-text" style="display: none;" data-original-title="" title="">
    <i class="glyph-danger glyph fas fa-exclamation-triangle"></i>
  </span>
</div>

<div class="formula_field is-invalid input-group ui_surround_field">
  <input type="text" name="value_formula" id="value_formula" class="is-invalid formula-field form-control">
  <span class="formula-field-sign input-group-text" style="display: none;">=</span>
  <input type="text" name="value" id="value" class="formula-field-result form-control" readonly="readonly" style="visible: hidden">
  <span data-bs-toggle="tooltip" class="formula-field-alert input-group-text" style="display: none;" data-original-title="" title="">
    <i class="glyph-danger glyph fas fa-exclamation-triangle"></i>
  </span>
</div>

Formula Field State

=
=
=
=
ui_formula_field 'value', state: :active
ui_formula_field 'value', state: :disabled
ui_formula_field 'value', state: :valid
ui_formula_field 'value', state: :invalid

<div class="formula_field active input-group ui_surround_field">
  <input type="text" name="value_formula" id="value_formula" class="active formula-field form-control">
  <span class="formula-field-sign input-group-text" style="display: none;">=</span>
  <input type="text" name="value" id="value" class="formula-field-result form-control" readonly="readonly" style="visible: hidden">
  <span data-bs-toggle="tooltip" class="formula-field-alert input-group-text" style="display: none;" data-original-title="" title="">
    <i class="glyph-danger glyph fas fa-exclamation-triangle"></i>
  </span>
</div>

<div class="formula_field disabled input-group ui_surround_field">
  <input type="text" name="value_formula" id="value_formula" class="disabled formula-field form-control" disabled="disabled">
  <span class="formula-field-sign input-group-text" style="display: none;">=</span>
  <input type="text" name="value" id="value" class="formula-field-result form-control" disabled="disabled" readonly="readonly" style="visible: hidden">
  <span data-bs-toggle="tooltip" class="formula-field-alert input-group-text" style="display: none;" data-original-title="" title="">
    <i class="glyph-danger glyph fas fa-exclamation-triangle"></i>
  </span>
</div>

<div class="formula_field is-valid input-group ui_surround_field">
  <input type="text" name="value_formula" id="value_formula" class="is-valid formula-field form-control">
  <span class="formula-field-sign input-group-text" style="display: none;">=</span>
  <input type="text" name="value" id="value" class="formula-field-result form-control" readonly="readonly" style="visible: hidden">
  <span data-bs-toggle="tooltip" class="formula-field-alert input-group-text" style="display: none;" data-original-title="" title="">
    <i class="glyph-danger glyph fas fa-exclamation-triangle"></i>
  </span>
</div>

<div class="formula_field is-invalid input-group ui_surround_field">
  <input type="text" name="value_formula" id="value_formula" class="is-invalid formula-field form-control">
  <span class="formula-field-sign input-group-text" style="display: none;">=</span>
  <input type="text" name="value" id="value" class="formula-field-result form-control" readonly="readonly" style="visible: hidden">
  <span data-bs-toggle="tooltip" class="formula-field-alert input-group-text" style="display: none;" data-original-title="" title="">
    <i class="glyph-danger glyph fas fa-exclamation-triangle"></i>
  </span>
</div>

Formula Field Options

=
ui_formula_field "value", ui_formula_field_name: :another_value_formula

<div class="input-group ui_formula_field">
  <input type="text" name="value" id="value" value="" placeholder="Type your formula..." class="ui_formula_field_input form-control">
  <span class="ui_formula_field_sign input-group-addon">=</span>
  <input type="text" name="value_formula" id="another_value_formula" value="" readonly="readonly" class="ui_formula_field_result form-control">
  <span class="ui_formula_field_alert input-group-addon" data-bs-toggle="tooltip">
    <i class="glyph-danger glyph fa fa-exclamation-triangle"></i>
  </span>
</div>

Simple form

Ui Bibz is compatible with simple form. You can use defaults inputs of Simple Form and defaults inputs of Ui Bibz like ui_formula_field. You can use Simple Form input options and Ui Bibz ui_formula_field options.

=
ui_form_for(@search) do |f|
  ...
  f.input :price, as: :ui_formula_field
  ...
end