diff --git a/assets/toolkit/toolkit.css b/assets/toolkit/toolkit.css index ed4b22c..a778f78 100644 --- a/assets/toolkit/toolkit.css +++ b/assets/toolkit/toolkit.css @@ -73,7 +73,7 @@ input[type="color"] ~ .kit-field__color { padding: 1.5em 0 0 0; margin: 0 0 var(--kit-field-gap, 1.5em) 0; } -.kit-field .kit-field__hr { +.kit-field__hr { display: block; position: absolute; bottom: 0; @@ -82,7 +82,7 @@ input[type="color"] ~ .kit-field__color { border-top: 1px solid var(--kit-color-text); z-index: 0; } -.kit-field .kit-field__hr:after { +.kit-field__hr:after { content: ''; position: absolute; bottom: 0; @@ -164,6 +164,7 @@ input[type="color"] ~ .kit-field__color { font-family: var(--kit-font-family); list-style-type: none; } + .kit-field textarea[data-dirty='true'], .kit-field input[data-dirty='true'], .kit-field [data-dirty='true'] ~ .kit-field__display{ @@ -218,6 +219,7 @@ input[type="color"] ~ .kit-field__color { .kit-field textarea.focus, .kit-field input.focus { color: var(--kit-color-text); + border-color: transparent; } .kit-field textarea:focus ~.kit-field__label, .kit-field input:focus ~.kit-field__label, @@ -985,6 +987,7 @@ select.kit-field__input:disabled ~.kit-field__hr { -moz-transition: opacity 0.15s; transition: opacity 0.15s; min-width: 200px; + padding: 4px 4px 2px 4px; } .kit-dropdown.kit-active { opacity: 1; @@ -996,6 +999,8 @@ select.kit-field__input:disabled ~.kit-field__hr { -ms-user-select: none; user-select: none; cursor: pointer; + border-radius: 2px; + margin-bottom: 2px; } .kit-dropdown__option:hover { background: #e5e5e5; @@ -1110,11 +1115,18 @@ select.kit-field__input:disabled ~.kit-field__hr { } .kit-field--success ~.kit-field__label, -.kit-field--success ~.kit-field__error { +.kit-field--success ~.kit-field__error, +.kit-field--success ~.kit-field__message { opacity: 1; visibility: visible; color: var(--kit-color-success) !important; } +.kit-field--error ~.kit-field__error, +.kit-field--error ~.kit-field__message { + opacity: 1; + visibility: visible; + color: var(--kit-color-error) !important; +} .kit-field--success ~.kit-field__hr { border-color: var(--kit-color-success) !important; } diff --git a/assets/toolkit/toolkit.js b/assets/toolkit/toolkit.js index c44acbd..18529c6 100644 --- a/assets/toolkit/toolkit.js +++ b/assets/toolkit/toolkit.js @@ -341,7 +341,7 @@ kit.PluginManager.register('toolkit', function(module, exports, require, global) // изменение инпута function changeHandler(e) { - var select = e.target; + var select = e.target || e; changeSelect(select); } @@ -561,7 +561,7 @@ kit.PluginManager.register('toolkit', function(module, exports, require, global) } function escapeKeyHandler(e) { - if (e.keyCode == 27) { + if (e.keyCode === 27) { closeAll(null); } } @@ -752,8 +752,9 @@ kit.PluginManager.register('toolkit', function(module, exports, require, global) Inputs.prototype.changeFiled = function changeFiled(e) { var _this2 = this; var target = e.target || e; + var isInput = target.tagName === 'INPUT', isTextarea = target.tagName === 'TEXTAREA'; if (target.classList.contains('kit-field__input')) { - if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') { + if (isInput || isTextarea) { this.setDirty(target); var value_min = $(target).attr('value_min'); @@ -791,15 +792,21 @@ kit.PluginManager.register('toolkit', function(module, exports, require, global) }); }; - Inputs.prototype.calcAutoHeight = function calcAutoHeight(target) { - target.style.height = target.style.minHeight = 'auto'; - var h; - if (target.scrollHeight < 30) { - h = '30' + 'px'; + Inputs.prototype.calcAutoHeight = function calcAutoHeight(node) { + node.style.height = node.style.minHeight = 'auto'; + node.rows = 1; + var h, styles = getComputedStyle(node); + + var minH = support.toNumber(styles.getPropertyValue('padding-top').trim().replace('px', '')) + + support.toNumber(styles.getPropertyValue('padding-bottom').trim().replace('px', '')) + + support.toNumber(styles.getPropertyValue('line-height').trim().replace('px', '')); + + if (node.scrollHeight < minH) { + h = '' + minH + 'px'; } else { - h = target.scrollHeight + 'px'; + h = node.scrollHeight + 'px'; } - target.style.height = target.style.minHeight = h; + node.style.height = node.style.minHeight = h; }; diff --git a/tests/cheatsheetTest.php b/tests/cheatsheetTest.php index 177beee..84168f9 100644 --- a/tests/cheatsheetTest.php +++ b/tests/cheatsheetTest.php @@ -435,13 +435,32 @@ $APPLICATION->ShowHead();
templater()->render('kit:textarea', [ 'CLASS' => 'kit-field--check-mark-stroke', - //'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.', + 'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.', 'NAME' => 'textarea', 'VALUE' => '', 'MAXLENGTH' => 1000, 'LABEL' => 'textarea label', ]); ?>
+
templater()->render('kit:textarea', [ + 'CLASS' => 'kit-field--check-mark-stroke', + //'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.', + 'NAME' => 'textarea', + 'VALUE' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.', + 'MAXLENGTH' => 1000, + 'LABEL' => 'textarea label', + ]); ?> +
+
templater()->render('kit:input', [ + 'TYPE' => 'tel', + 'HINT' => 'phone', + 'NAME' => 'phone', + 'VALUE' => '+7800', + 'LABEL' => 'phone', + ]); ?> +
multiple = true;