Fix #268: Add Bootstrap 4.x Support

CHANGE.md

@@ -3,8 +3,10 @@ Change Log: `yii2-widget-select2`
 
 ## Version 2.1.2
 
-**Date:** 24-Feb-2018
+**Date:** 17-Aug-2018
 
+- Reorganize all source code in `src` directory.
+- (enh #268): Add Bootstrap 4.x Support.
 - (enh #249): Update German Translations.
 - (enh #242): Update Marathi Translations.
 - (enh #246, #247, #253): Fix Select All behavior for multiple select.

README.md

@@ -30,9 +30,9 @@ or add
 
 to the ```require``` section of your `composer.json` file.
 
-## Latest Release
+## Release Changes
 
-> NOTE: The latest version of the module is v2.1.2. Refer the [CHANGE LOG](https://github.com/kartik-v/yii2-widget-select2/blob/master/CHANGE.md) for details.
+> NOTE: Refer the [CHANGE LOG](https://github.com/kartik-v/yii2-widget-select2/blob/master/CHANGE.md) for details on changes to various releases.
 
 The widget has a major version revamp with v2.0. This release includes updates to use Select2 plugin release v4.0. Select2 release v4.0 is a major rewrite over Select2 v3.x and hence quite a few enhancements or changes should be expected. To use the earlier plugin release v3.5.2, you must point it to the [v1.0.1 release](https://github.com/kartik-v/yii2-widget-select2/releases/tag/v1.0.1) of the widget.
 

composer.json

@@ -13,11 +13,11 @@
         }
     ],
     "require": {
-        "kartik-v/yii2-krajee-base": "~1.7"
+        "kartik-v/yii2-krajee-base": "~1.9"
     },
     "autoload": {
         "psr-4": {
-            "kartik\\select2\\": ""
+            "kartik\\select2\\": "src"
         }
     },
     "extra": {

Select2.php → src/Select2.php

@@ -9,10 +9,11 @@
 
 namespace kartik\select2;
 
-use kartik\base\AssetBundle;
+use kartik\base\AddonTrait;
 use kartik\base\InputWidget;
 use Yii;
 use yii\helpers\Html;
+use yii\helpers\Inflector;
 use yii\helpers\ArrayHelper;
 use yii\helpers\Json;
 use yii\web\JsExpression;
@@ -29,6 +30,7 @@
  */
 class Select2 extends InputWidget
 {
+    use AddonTrait;
     /**
      * Select2 large input size
      */
@@ -54,9 +56,13 @@ class Select2 extends InputWidget
      */
     const THEME_BOOTSTRAP = 'bootstrap';
     /**
-     * Select2 Krajee theme (default)
+     * Select2 Krajee theme (default for BS3)
      */
     const THEME_KRAJEE = 'krajee';
+    /**
+     * Select2 Krajee theme (default for BS4)
+     */
+    const THEME_KRAJEE_BS4 = 'krajee-bs4';
 
     /**
      * @var array $data the option data items. The array keys are option values, and the array values are the
@@ -73,9 +79,11 @@ class Select2 extends InputWidget
     public $language;
 
     /**
-     * @var string the theme name to be used for styling the Select2.
+     * @var string the theme name to be used for styling the Select2. If not set this will default to:
+     * - [[THEME_KRAJEE]] if [[bsVersion]] is set to '3.x'
+     * - [[THEME_KRAJEE_BS4]] if [[bsVersion]] is set to '4.x'
      */
-    public $theme = self::THEME_KRAJEE;
+    public $theme;
 
     /**
      * @var string|array, the displayed text in the dropdown for the initial value when you do not set or provide
@@ -151,9 +159,9 @@ class Select2 extends InputWidget
      * @var string the name of the jQuery plugin
      */
     public $pluginName = 'select2';
-   /**
+    /**
      *
-     * @var char Implements open selector with accesskey
+     * @var string Implements open selector with accesskey
      */
     public $accesskey = null;
 
@@ -177,6 +185,7 @@ class Select2 extends InputWidget
         self::THEME_CLASSIC,
         self::THEME_BOOTSTRAP,
         self::THEME_KRAJEE,
+        self::THEME_KRAJEE_BS4,
     ];
 
     /**
@@ -193,14 +202,21 @@ public function run()
      */
     public function renderWidget()
     {
+        if (!isset($this->theme)) {
+            $this->theme = $this->isBs4() ? self::THEME_KRAJEE_BS4 : self::THEME_KRAJEE;
+        }
         $this->initI18N(__DIR__);
         $this->pluginOptions['theme'] = $this->theme;
         $multiple = ArrayHelper::getValue($this->pluginOptions, 'multiple', false);
         unset($this->pluginOptions['multiple']);
         $multiple = ArrayHelper::getValue($this->options, 'multiple', $multiple);
         $this->options['multiple'] = $multiple;
-        if (!empty($this->addon) || empty($this->pluginOptions['width'])) {
-            $this->pluginOptions['width'] = '100%';
+        if (empty($this->pluginOptions['width'])) {
+            if ($this->theme !== self::THEME_KRAJEE_BS4) {
+                $this->pluginOptions['width'] =  '100%';
+            } elseif (empty($this->addon)) {
+                $this->pluginOptions['width'] = 'auto';
+            }
         }
         if ($this->hideSearch) {
             $this->pluginOptions['minimumResultsForSearch'] = new JsExpression('Infinity');
@@ -219,7 +235,6 @@ public function renderWidget()
                 $this->data = $multiple ? array_combine((array)$key, (array)$val) : [$key => $val];
             }
         }
-        Html::addCssClass($this->options, 'form-control');
         $this->initLanguage('language', true);
         $this->renderToggleAll();
         $this->registerAssets();
@@ -235,9 +250,15 @@ protected function renderToggleAll()
         if (!$this->options['multiple'] || !$this->showToggleAll ) {
             return;
         }
+        $unchecked = '<i class="glyphicon glyphicon-unchecked"></i>';
+        $checked = '<i class="glyphicon glyphicon-check"></i>';
+        if ($this->isBs4()) {
+            $unchecked = '<i class="far fa-square"></i>';
+            $checked = '<i class="far fa-check-square"></i>';
+        }
         $settings = array_replace_recursive([
-            'selectLabel' => '<i class="glyphicon glyphicon-unchecked"></i>' . Yii::t('kvselect', 'Select all'),
-            'unselectLabel' => '<i class="glyphicon glyphicon-check"></i>' . Yii::t('kvselect', 'Unselect all'),
+            'selectLabel' => $unchecked . Yii::t('kvselect', 'Select all'),
+            'unselectLabel' => $checked . Yii::t('kvselect', 'Unselect all'),
             'selectOptions' => [],
             'unselectOptions' => [],
             'options' => ['class' => 's2-togall-button']
@@ -260,7 +281,7 @@ protected function renderToggleAll()
                 'style' => 'background: transparent;border: none !important;font-size:0;',
                 'onfocus' => '$("#' . $this->options['id'] . '").select2("open");'
             ]);
-        }        
+        }
         echo Html::tag('span', $out, ['id' => 'parent-' . $options['id'], 'style' => 'display:none']);
     }
 
@@ -298,31 +319,23 @@ protected function embedAddon($input)
         if (empty($this->addon)) {
             return $input;
         }
+        $isBs4 = $this->isBs4();
         $group = ArrayHelper::getValue($this->addon, 'groupOptions', []);
-        $size = isset($this->size) ? ' input-group-' . $this->size : '';
-        Html::addCssClass($group, 'input-group' . $size);
-        $prepend = ArrayHelper::getValue($this->addon, 'prepend', '');
-        $append = ArrayHelper::getValue($this->addon, 'append', '');
+        $css = ['input-group', 's2-input-group'];
+        if (isset($this->size)) {
+            $css[] = 'input-group-' . $this->size;
+        }
+        Html::addCssClass($group, $css);
         if ($this->pluginLoading) {
             Html::addCssClass($group, 'kv-input-group-hide');
             Html::addCssClass($group, 'group-' . $this->options['id']);
         }
-        if (is_array($prepend)) {
-            $content = ArrayHelper::getValue($prepend, 'content', '');
-            if (isset($prepend['asButton']) && $prepend['asButton'] == true) {
-                $prepend = Html::tag('div', $content, ['class' => 'input-group-btn']);
-            } else {
-                $prepend = Html::tag('span', $content, ['class' => 'input-group-addon']);
-            }
+        $prepend = $this->getAddonContent('prepend', $isBs4);
+        $append = $this->getAddonContent('append', $isBs4);
+        if (!$isBs4 && isset($this->addon['prepend']) && is_array($this->addon['prepend'])) {
             Html::addCssClass($group, 'select2-bootstrap-prepend');
         }
-        if (is_array($append)) {
-            $content = ArrayHelper::getValue($append, 'content', '');
-            if (isset($append['asButton']) && $append['asButton'] == true) {
-                $append = Html::tag('div', $content, ['class' => 'input-group-btn']);
-            } else {
-                $append = Html::tag('span', $content, ['class' => 'input-group-addon']);
-            }
+        if (!$isBs4 && isset($this->addon['append']) && is_array($this->addon['append'])) {
             Html::addCssClass($group, 'select2-bootstrap-append');
         }
         $addonText = $prepend . $input . $append;
@@ -341,6 +354,7 @@ protected function renderInput()
             $this->_loadIndicator = '<div class="kv-plugin-loading loading-' . $this->options['id'] . '">&nbsp;</div>';
             Html::addCssStyle($this->options, 'display:none');
         }
+        Html::addCssClass($this->options, 'form-control');
         $input = $this->getInput('dropDownList', true);
         echo $this->_loadIndicator . $this->embedAddon($input);
     }
@@ -367,9 +381,9 @@ public function registerAssetBundle()
         Select2Asset::register($view)->addLanguage($lang, '', 'js/i18n');
         if (in_array($this->theme, self::$_inbuiltThemes)) {
             /**
-             * @var AssetBundle $bundleClass
+             * @var ThemeAsset $bundleClass
              */
-            $bundleClass = __NAMESPACE__ . '\Theme' . ucfirst($this->theme) . 'Asset';
+            $bundleClass = __NAMESPACE__ . '\Theme' . Inflector::id2camel($this->theme) . 'Asset';
             $bundleClass::register($view);
         }
     }
@@ -384,7 +398,7 @@ public function registerAssets()
         $isMultiple = isset($this->options['multiple']) && $this->options['multiple'];
         $options = Json::encode([
             'themeCss' => ".select2-container--{$this->theme}",
-            'sizeCss' => empty($this->addon) && $this->size !== self::MEDIUM ? 'input-' . $this->size : '',
+            'sizeCss' => empty($this->addon) && $this->size !== self::MEDIUM ? ' input-' . $this->size : '',
             'doReset' => static::parseBool($this->changeOnReset),
             'doToggle' => static::parseBool($isMultiple && $this->showToggleAll),
             'doOrder' => static::parseBool($isMultiple && $this->maintainOrder),

src/ThemeAsset.php

@@ -0,0 +1,28 @@
+<?php
+
+/**
+ * @copyright Copyright &copy; Kartik Visweswaran, Krajee.com, 2014 - 2018
+ * @package yii2-widgets
+ * @subpackage yii2-widget-select2
+ * @version 2.1.2
+ */
+
+namespace kartik\select2;
+
+use kartik\base\AssetBundle;
+
+/**
+ * Base theme asset bundle.
+ *
+ * @author Kartik Visweswaran <[email protected]>
+ * @since 1.0
+ */
+class ThemeAsset extends AssetBundle
+{
+    /**
+     * @inheritdoc
+     */
+    public $depends = [
+        'kartik\select2\Select2Asset'
+    ];
+}

ThemeBootstrapAsset.php → src/ThemeBootstrapAsset.php

@@ -17,7 +17,7 @@
  * @author Kartik Visweswaran <[email protected]>
  * @since 1.0
  */
-class ThemeBootstrapAsset extends AssetBundle
+class ThemeBootstrapAsset extends ThemeAsset
 {
     /**
      * @inheritdoc

ThemeClassicAsset.php → src/ThemeClassicAsset.php

@@ -17,7 +17,7 @@
  * @author Kartik Visweswaran <[email protected]>
  * @since 1.0
  */
-class ThemeClassicAsset extends AssetBundle
+class ThemeClassicAsset extends ThemeAsset
 {
     /**
      * @inheritdoc

ThemeDefaultAsset.php → src/ThemeDefaultAsset.php

@@ -17,7 +17,7 @@
  * @author Kartik Visweswaran <[email protected]>
  * @since 1.0
  */
-class ThemeDefaultAsset extends AssetBundle
+class ThemeDefaultAsset extends ThemeAsset
 {
     /**
      * @inheritdoc

ThemeKrajeeAsset.php → src/ThemeKrajeeAsset.php

@@ -17,7 +17,7 @@
  * @author Kartik Visweswaran <[email protected]>
  * @since 1.0
  */
-class ThemeKrajeeAsset extends AssetBundle
+class ThemeKrajeeAsset extends ThemeAsset
 {
     /**
      * @inheritdoc

src/ThemeKrajeeBs4Asset.php

@@ -0,0 +1,31 @@
+<?php
+
+/**
+ * @copyright Copyright &copy; Kartik Visweswaran, Krajee.com, 2014 - 2018
+ * @package yii2-widgets
+ * @subpackage yii2-widget-select2
+ * @version 2.1.2
+ */
+
+namespace kartik\select2;
+
+use kartik\base\AssetBundle;
+
+/**
+ * Asset bundle for the Krajee theme for [[Select2]] widget.
+ *
+ * @author Kartik Visweswaran <[email protected]>
+ * @since 1.0
+ */
+class ThemeKrajeeBs4Asset extends ThemeAsset
+{
+    /**
+     * @inheritdoc
+     */
+    public function init()
+    {
+        $this->setSourcePath(__DIR__ . '/assets');
+        $this->setupAssets('css', ['css/select2-krajee-bs4']);
+        parent::init();
+    }
+}

assets/css/select2-addl.css → src/assets/css/select2-addl.css

@@ -10,33 +10,34 @@
  */
 .s2-togall-select .s2-unselect-label,
 .s2-togall-unselect .s2-select-label {
-    display:none;
+    display: none;
 }
 
 .s2-togall-button {
     display: inline-block;
     font-weight: 400;
     color: #337ab7;
-    padding: 8px 3px;
+    padding: 0.5rem;
     cursor: pointer;
 }
 
-.s2-togall-button:focus,.s2-togall-button:hover {
-    color:#23527c;
-    text-decoration:underline;
-    background-color:transparent;
+.s2-togall-button:focus, .s2-togall-button:hover {
+    color: #23527c;
+    text-decoration: underline;
+    background-color: transparent;
 }
 
 .s2-togall-select .s2-select-label,
 .s2-togall-unselect .s2-unselect-label {
-    display:inline;
+    display: inline;
 }
 
 .s2-select-label, .s2-unselect-label {
     line-height: 1.1;
-    font-size: 12px;
+    font-size: 13px;
 }
 
-.s2-select-label .glyphicon, .s2-unselect-label .glyphicon {
-    margin: auto 3px;
+.s2-togall-button .s2-select-label i,
+.s2-togall-button .s2-unselect-label i {
+    margin: auto 0.25rem;
 }

assets/css/select2-addl.min.css → src/assets/css/select2-addl.min.css

@@ -7,4 +7,4 @@
  * Author: Kartik Visweswaran
  * For more JQuery plugins visit http://plugins.krajee.com
  * For more Yii related demos visit http://demos.krajee.com
- */.s2-togall-select .s2-unselect-label,.s2-togall-unselect .s2-select-label{display:none}.s2-togall-button{display:inline-block;font-weight:400;color:#337ab7;padding:8px 3px;cursor:pointer}.s2-togall-button:focus,.s2-togall-button:hover{color:#23527c;text-decoration:underline;background-color:transparent}.s2-togall-select .s2-select-label,.s2-togall-unselect .s2-unselect-label{display:inline}.s2-select-label,.s2-unselect-label{line-height:1.1;font-size:12px}.s2-select-label .glyphicon,.s2-unselect-label .glyphicon{margin:auto 3px}
+ */.s2-togall-select .s2-unselect-label,.s2-togall-unselect .s2-select-label{display:none}.s2-togall-button{display:inline-block;font-weight:400;color:#337ab7;padding:.5rem;cursor:pointer}.s2-togall-button:focus,.s2-togall-button:hover{color:#23527c;text-decoration:underline;background-color:transparent}.s2-togall-select .s2-select-label,.s2-togall-unselect .s2-unselect-label{display:inline}.s2-select-label,.s2-unselect-label{line-height:1.1;font-size:13px}.s2-togall-button .s2-select-label i,.s2-togall-button .s2-unselect-label i{margin:auto .25rem}