Class: VarIncrDecr

new VarIncrDecr(parent, propsopt)

Component connected to a variable together with increment and decrement buttons. This class focuses on the specific properties of the VarIncrDecr component'. Since it inherits from Accessor_A, all basic properties (e.g., height, width) are available but documented in the Accessor_A part.

Parameters:

Name	Type	Attributes	Description
`parent`	HTMLElement		DOM element in which this component is to be inserted
`props`	TComponents.VarIncrDecrProps	<optional>	Properties of the component

Properties

Name	Type	Description
`_props`	TComponents.VarIncrDecrProps	Properties of the component
`_bindData`	Object \| null	Data binding information

Source: as-varincrdecr.js, line 59

Example

const varIncrDecr = new TComponents.VarIncrDecr(document.body, {
  position: 'absolute',
  zIndex: 1000,
});

// Render the component.
await varIncrDecr.render();

Extends

TComponents.Component_A

Members

keyboardHelperDesc :string

Sets the keyboard helper description.

Type:

string

Source: as-varincrdecr.js, line 290

Example

const varIncrDecr = new TComponents.VarIncrDecr(document.body, {
  position: 'absolute',
  zIndex: 1000,
});

// Render the component.
await varIncrDecr.render();

varIncrDecr.keyboardHelperDesc = 'Press + or - to increment or decrement the value'; // Sets the keyboard helper description

max :number

Sets the maximum value in the number range.

Type:

number

Source: as-varincrdecr.js, line 783

Example

const varIncrDecr = new TComponents.VarIncrDecr(document.body, {
  position: 'absolute',
  zIndex: 1000,
});

// Render the component.
await varIncrDecr.render();

varIncrDecr.max = 100; // Sets the maximum value to 100

maxValue :number

Sets the maximum value in the number range.

Type:

number

Deprecated: Use TComponents.VarIncrDecr#max instead.
Source: as-varincrdecr.js, line 865

Example

const varIncrDecr = new TComponents.VarIncrDecr(document.body, {
  position: 'absolute',
  zIndex: 1000,
});

// Render the component.
await varIncrDecr.render();

varIncrDecr.maxValue = 100; // Sets the maximum value to 100

min :number

Sets the minimum value in the number range.

Type:

number

Source: as-varincrdecr.js, line 824

Example

const varIncrDecr = new TComponents.VarIncrDecr(document.body, {
  position: 'absolute',
  zIndex: 1000,
});

// Render the component.
await varIncrDecr.render();

varIncrDecr.min = 0; // Sets the minimum value to 0

min :number

Sets the minimum value in the number range.

Type:

number

Deprecated: Use TComponents.VarIncrDecr#min instead.
Source: as-varincrdecr.js, line 897

Example

const varIncrDecr = new TComponents.VarIncrDecr(document.body, {
  position: 'absolute',
  zIndex: 1000,
});

// Render the component.
await varIncrDecr.render();

varIncrDecr.minValue = 0; // Sets the minimum value to 0

onChange :function

Sets the onChange event handler. The handler can either be a string representing a function to be executed or a function itself.

If you are using an arrow function, like ()=>{}, the this property of the scope may not refer to the varIncrDecr object.
If you are using string assignment to define code execution, the string should contain only the body of the code (executable statements), not a complete function declaration. Therefore, including function keywords like function or async function is incorrect.

Correct (Statements Only): xx.onChange = "console.log('Action done.');"
Incorrect (Function Declaration): xx.onChange = "function() { console.log('Action done.'); }"

Type:

function

Source: as-varincrdecr.js, line 738

Examples

const varIncrDecr = new TComponents.VarIncrDecr(document.body, {
  position: 'absolute',
  zIndex: 1000,
});

// Render the component.
await varIncrDecr.render();

// Example 1: Using a string as the handler:
varIncrDecr.onChange = "console.log('state changed', this.text);";

// Example 2: Using a arrow function as the handler:
// Note that the `this` context will not refer to the varIncrDecr object
varIncrDecr.onChange = () => { console.log('state changed', varIncrDecr.text); };

// Example 3: Using a common function as the handler:
varIncrDecr.onChange = async function() {
  console.log('state changed', this.text);
};

step :number

Sets the step value.

Type:

number

Source: as-varincrdecr.js, line 260

Example

const varIncrDecr = new TComponents.VarIncrDecr(document.body, {
  position: 'absolute',
  zIndex: 1000,
});

// Render the component.
await varIncrDecr.render();

// Sets the step to 5
varIncrDecr.step = 5;

text :string

Sets the text property. (recommended to use value instead)

Type:

string

Source: as-varincrdecr.js, line 106

Example

const varIncrDecr = new TComponents.VarIncrDecr(document.body, {
  position: 'absolute',
  zIndex: 1000,
});

// Render the component.
await varIncrDecr.render();

// Sets the text to '100'
varIncrDecr.text = '100';

textX :string

Sets the text property silently. This will update the value but will NOT trigger the onchange event. Recommended for internal or programmatic updates, where change notification is not desired.

Type:

string

Source: as-varincrdecr.js, line 134

Example

const varIncrDecr = new TComponents.VarIncrDecr(document.body);
await varIncrDecr.render();

// Silent update (onchange will NOT be triggered)
varIncrDecr.textX = '100';

useBorder :boolean

Sets the useBorder property.

Type:

boolean

Source: as-varincrdecr.js, line 232

Example

const varIncrDecr = new TComponents.VarIncrDecr(document.body, {
  position: 'absolute',
  zIndex: 1000,
});

// Render the component.
await varIncrDecr.render();

varIncrDecr.useBorder = true; // Sets the useBorder to true

value :number

Sets the value property. (TBD)

Type:

number

Source: as-varincrdecr.js, line 163

Example

const varIncrDecr = new TComponents.VarIncrDecr(document.body, {
  position: 'absolute',
  zIndex: 1000,
});

// Render the component.
await varIncrDecr.render();

// Sets the value to 100
varIncrDecr.value = 100;

valueX :number|string

Sets the value silently. If the value is numeric (or a numeric string), it will be converted to Number automatically. This will NOT trigger the onchange event. Recommended when updating the component state programmatically without notifying listeners.

Type:

number | string

Source: as-varincrdecr.js, line 198

Example

const varIncrDecr = new TComponents.VarIncrDecr(document.body);
await varIncrDecr.render();

// Silent update (onchange will NOT be triggered)
varIncrDecr.valueX = 100;

Methods

(protected) defaultProps() → {TComponents.VarIncrDecrProps}

Returns the default values of class properties (excluding parent properties).

Overrides: TComponents.Component_A#defaultProps
Source: as-varincrdecr.js, line 312

Returns:

Type:: TComponents.VarIncrDecrProps

mapComponents() → {object}

Maps the internal components.

Overrides: TComponents.Component_A#mapComponents
Source: as-varincrdecr.js, line 414

Returns:

The mapped components

Type:: object

markup() → {string}

Returns the HTML markup for the component.

Overrides: TComponents.Component_A#markup
Source: as-varincrdecr.js, line 520

Returns:

The HTML markup

Type:: string

(async) onInit() → {void}

Initialize the component.

Overrides: TComponents.Component_A#onInit
Source: as-varincrdecr.js, line 377

Returns:

Type:: void

(async) onRender() → {Promise.<void>}

Renders the component.

Overrides: TComponents.Component_A#onRender
Source: as-varincrdecr.js, line 480

Throws:

Error

Returns:

A promise that resolves when the component is rendered.

Type:: Promise.<void>

(static) loadCssClassFromString(css) → {void}

Add css properties to the component

Parameters:

Name	Type	Description
`css`	string	The css string to be loaded into style tag

Source: as-varincrdecr.js, line 923

Returns:

Type:: void

Example

TComponents.VarIncrDecr.loadCssClassFromString(`
  .tc-varincrdecr {
    height: inherit;
  }`
);