kartik-v / yii2-widget-touchspin

Yii2 wrapper for the bootstrap-touchspin spinner component (sub repo split from yii2-widgets)

yii2-widget-touchspin

---

The TouchSpin widget is a Yii 2 wrapper for for the bootstrap-touchspin plugin by István Ujj-Mészáros, with certain additional enhancements. This input widget is a mobile and touch friendly input spinner component for Bootstrap 3. You can use the widget buttons to rapidly increase and decrease numeric and/or decimal values in your input field. The widget can be setup to include model validation rules for the related model attribute.

NOTE: This extension is a sub repo split of yii2-widgets. The split has been done since 08-Nov-2014 to allow developers to install this specific widget in isolation if needed. One can also use the extension the previous way with the whole suite of yii2-widgets.

Installation

The preferred way to install this extension is through composer. Check the composer.json for this extension's requirements and dependencies. Read this web tip /wiki on setting the minimum-stability settings for your application's composer.json.

To install, either run

$ php composer.phar require kartik-v/yii2-widget-touchspin "*"

or add

"kartik-v/yii2-widget-touchspin": "*"

to the require section of your composer.json file.

Release Changes

NOTE: Refer the CHANGE LOG for details on changes to various releases.

Demo

You can refer detailed documentation and demos on usage of the extension.

Usage

use kartik\touchspin\TouchSpin;

echo TouchSpin::widget([
    'name' => 'volume',
    'options' => ['placeholder' => 'Adjust...'],
    'pluginOptions' => ['step' => 1]
]);

License

yii2-widget-touchspin is released under the BSD 3-Clause License. See the bundled LICENSE.md for details.

yii2-widget-touchspin's Issues

Enhancement: Container options, sespecially for inline forms

It would be useful to have a containerOptions setting to set the outer container tag similar to options in yii\widgets\ActiveField. This would be particularly useful in making the spin control fit well with in inline forms.

TouchSpin rendered incorrectly in inline forms in Google Chrome

The screenshot below shows how TouchSpin is rendered in a Twitter Bootstrap inline form in Google Chrome. This issue does not exist in Firefox.

Touchspin + button isn't rendered with glyphicon

Prerequisites

• I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
• The issue still exists against the latest master branch of yii2-widget-touchspin.
• This is not an usage question. I confirm having read the widget documentation and demos.
• This is not a general programming / coding question. (Those should be directed to the webtips Q & A forum).
• This is not a source plugin (touchspin) issue. (Those should be directed to the plugin issues repo).
• I have attempted to find the simplest possible steps to reproduce the issue.

Steps to reproduce the issue

Set the

    'verticalupclass' => 'glyphicon glyphicon-plus',
    'verticaldownclass' => 'glyphicon glyphicon-minus',

Also visible on the demos page for the button "Rating"
http://demos.krajee.com/widget-details/touchspin#advanced-usage

Setting the button texts works however

    'buttonup_txt' => '<i class="glyphicon glyphicon-plus"></i>',
    'buttondown_txt' => '<i class="glyphicon glyphicon-minus"></i>'

It also seems that the width of the input element isn't using the full column width any more (100% of e.g. col-md-9 with BS3) as with older versions.

Expected behavior and actual behavior

I was expecting...

The widget did work in version 1.2.1 but since 1.2.2 it doesn't (I also checked the dev version)

Sadly also the highlighting of errors or success validation doesn't look as good as with the older version.
older version:

never version (without glyphicon):

You see green borders on the right side when you have rounded corners.

I knew that the changes have something to do with the BS4 compatibility,

Browsers

• Google Chrome
• Mozilla Firefox
• Internet Explorer
• Safari

Operating System

• Windows
• Mac OS X
• Linux
• Mobile

Libraries

• jQuery version:
• yii2-widget-touchspin version:

Isolating the problem

• This bug happens on the widget demos page
• The bug happens consistently across all tested browsers
• This bug happens when using yii2-widget-touchspin without other plugins
• I can reproduce this bug in a jsbin

Add special styling for bootstrap input group button addons for success and error states

field addon options breaks plugin options

I want to add an ID to input group field and when I do it pluginOptions do not apply

<?= $form->field($cartModel, 'quantity',[
                        'addon' => [
                            'groupOptions' => [
                                'id' => 'choose-quantity'
                            ],
                        ]
                    ])->widget(TouchSpin::classname(), [
                        'pluginOptions' => [
                            'initval' => 1,
                            'verticalbuttons' => true,
                            'verticalupclass' => 'glyphicon glyphicon-plus',
                            'verticaldownclass' => 'glyphicon glyphicon-minus',
                            'max' => 10,
                            'step' => 1,
                            'decimals' => 0,
                            'postfix' => 'szt.',
                        ]
                    ])->label(false);
                    ?>

Enhance widget for updated bootstrap-touchspin plugin

Validate InputWidget disabled setting

Is there a way to configure a min value for this widget instead of 0?

Hello I need to configure a default min value instead of 0 when I click minus button

Hope this can be possible, thanks...

How to call controller function when click button?

I want to auto add database when value change event click button or type text
<?= TouchSpin::widget([ 'name' => 'QTY', 'options' => ['maxlength' => 3, 'class' => 'input-sm'], 'pluginOptions' => [ 'initval' => 1, 'min' => 1, 'max' => 999, ], 'pluginEvents' => [ 'change' => function() { //add database when value change }, ], ]) ?>
Thank you!

Enhancements to support Bootstrap v5.x

Based on release v3.0.0 of kartik-v/yii2-krajee-base

How to update database when value change?

I want touchspin call controller to update database, how to do that?