polythene-core-textfield
Advanced tools
polythene-core-textfield - npm Package Compare versions
Comparing version 1.0.0 to 1.1.0
| (function (global, factory) { | ||
| typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('polythene-core'), require('polythene-theme')) : | ||
| typeof define === 'function' && define.amd ? define(['exports', 'polythene-core', 'polythene-theme'], factory) : | ||
| (factory((global.polythene = {}),global['polythene-core'],global['polythene-theme'])); | ||
| typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('polythene-core'), require('polythene-theme')) : | ||
| typeof define === 'function' && define.amd ? define(['exports', 'polythene-core', 'polythene-theme'], factory) : | ||
| (factory((global.polythene = {}),global['polythene-core'],global['polythene-theme'])); | ||
| }(this, (function (exports,polytheneCore,polytheneTheme) { 'use strict'; | ||
| var classes = { | ||
| component: "pe-textfield", | ||
| var classes = { | ||
| component: "pe-textfield", | ||
| // elements | ||
| counter: "pe-textfield__counter", | ||
| error: "pe-textfield__error", | ||
| errorPlaceholder: "pe-textfield__error-placeholder", | ||
| focusHelp: "pe-textfield__help-focus", | ||
| help: "pe-textfield__help", | ||
| input: "pe-textfield__input", | ||
| inputArea: "pe-textfield__input-area", | ||
| label: "pe-textfield__label", | ||
| optionalIndicator: "pe-textfield__optional-indicator", | ||
| requiredIndicator: "pe-textfield__required-indicator", | ||
| // elements | ||
| counter: "pe-textfield__counter", | ||
| error: "pe-textfield__error", | ||
| errorPlaceholder: "pe-textfield__error-placeholder", | ||
| focusHelp: "pe-textfield__help-focus", | ||
| help: "pe-textfield__help", | ||
| input: "pe-textfield__input", | ||
| inputArea: "pe-textfield__input-area", | ||
| label: "pe-textfield__label", | ||
| optionalIndicator: "pe-textfield__optional-indicator", | ||
| requiredIndicator: "pe-textfield__required-indicator", | ||
| // states | ||
| hasCounter: "pe-textfield--counter", | ||
| hasFloatingLabel: "pe-textfield--floating-label", | ||
| hasFullWidth: "pe-textfield--full-width", | ||
| hideClear: "pe-textfield--hide-clear", | ||
| hideSpinner: "pe-textfield--hide-spinner", | ||
| hideValidation: "pe-textfield--hide-validation", | ||
| isDense: "pe-textfield--dense", | ||
| isRequired: "pe-textfield--required", | ||
| stateDirty: "pe-textfield--dirty", | ||
| stateDisabled: "pe-textfield--disabled", | ||
| stateFocused: "pe-textfield--focused", | ||
| stateInvalid: "pe-textfield--invalid", | ||
| stateReadonly: "pe-textfield--readonly" | ||
| }; | ||
| // states | ||
| hasCounter: "pe-textfield--counter", | ||
| hasFloatingLabel: "pe-textfield--floating-label", | ||
| hasFullWidth: "pe-textfield--full-width", | ||
| hideClear: "pe-textfield--hide-clear", | ||
| hideSpinner: "pe-textfield--hide-spinner", | ||
| hideValidation: "pe-textfield--hide-validation", | ||
| isDense: "pe-textfield--dense", | ||
| isRequired: "pe-textfield--required", | ||
| stateDirty: "pe-textfield--dirty", | ||
| stateDisabled: "pe-textfield--disabled", | ||
| stateFocused: "pe-textfield--focused", | ||
| stateInvalid: "pe-textfield--invalid", | ||
| stateReadonly: "pe-textfield--readonly" | ||
| }; | ||
| var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; | ||
| var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; | ||
| function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } | ||
| function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } | ||
| var getElement = function getElement(vnode) { | ||
| return vnode.attrs.element || "div"; | ||
| }; | ||
| var getElement = function getElement(vnode) { | ||
| return vnode.attrs.element || "div"; | ||
| }; | ||
| var DEFAULT_VALID_STATE = { | ||
| invalid: false, | ||
| message: undefined | ||
| }; | ||
| var DEFAULT_VALID_STATE = { | ||
| invalid: false, | ||
| message: undefined | ||
| }; | ||
| var validateCustom = function validateCustom(state, attrs) { | ||
| var el = state.inputEl(); | ||
| if (!el) { | ||
| return DEFAULT_VALID_STATE; | ||
| } | ||
| var validState = attrs.validate(state.inputEl().value); | ||
| return { | ||
| invalid: validState && !validState.valid, | ||
| message: validState && validState.error | ||
| var validateCustom = function validateCustom(state, attrs) { | ||
| var el = state.inputEl(); | ||
| if (!el) { | ||
| return DEFAULT_VALID_STATE; | ||
| } | ||
| var validState = attrs.validate(state.inputEl().value); | ||
| return { | ||
| invalid: validState && !validState.valid, | ||
| message: validState && validState.error | ||
| }; | ||
| }; | ||
| }; | ||
| var validateCounter = function validateCounter(state, attrs) { | ||
| return { | ||
| invalid: state.inputEl().value.length > attrs.counter, | ||
| message: attrs.error | ||
| var validateCounter = function validateCounter(state, attrs) { | ||
| return { | ||
| invalid: state.inputEl().value.length > attrs.counter, | ||
| message: attrs.error | ||
| }; | ||
| }; | ||
| }; | ||
| var validateHTML = function validateHTML(state, attrs) { | ||
| return { | ||
| invalid: !state.inputEl().checkValidity(), | ||
| message: attrs.error | ||
| var validateHTML = function validateHTML(state, attrs) { | ||
| return { | ||
| invalid: !state.inputEl().checkValidity(), | ||
| message: attrs.error | ||
| }; | ||
| }; | ||
| }; | ||
| var getValidStatus = function getValidStatus(state, attrs) { | ||
| var status = DEFAULT_VALID_STATE; | ||
| var getValidStatus = function getValidStatus(state, attrs) { | ||
| var status = DEFAULT_VALID_STATE; | ||
| // attrs.validateResetOnClear: reset validation when field is cleared | ||
| if (state.isTouched() && state.isInvalid() && state.inputEl().value.length === 0 && attrs.validateResetOnClear) { | ||
| state.isTouched(false); | ||
| state.isInvalid(false); | ||
| state.error(undefined); | ||
| } | ||
| if (!status.invalid && attrs.counter) { | ||
| status = validateCounter(state, attrs); | ||
| } | ||
| if (!status.invalid && state.inputEl() && state.inputEl().checkValidity) { | ||
| status = validateHTML(state, attrs); | ||
| } | ||
| if (!status.invalid && attrs.validate) { | ||
| status = validateCustom(state, attrs); | ||
| } | ||
| return status; | ||
| }; | ||
| // attrs.validateResetOnClear: reset validation when field is cleared | ||
| if (state.isTouched() && state.isInvalid() && state.inputEl().value.length === 0 && attrs.validateResetOnClear) { | ||
| state.isTouched(false); | ||
| state.isInvalid(false); | ||
| state.error(undefined); | ||
| } | ||
| if (!status.invalid && attrs.counter) { | ||
| status = validateCounter(state, attrs); | ||
| } | ||
| if (!status.invalid && state.inputEl() && state.inputEl().checkValidity) { | ||
| status = validateHTML(state, attrs); | ||
| } | ||
| if (!status.invalid && attrs.validate) { | ||
| status = validateCustom(state, attrs); | ||
| } | ||
| return status; | ||
| }; | ||
| var checkValidity = function checkValidity(vnode) { | ||
| var state = vnode.state; | ||
| var attrs = vnode.attrs; | ||
| // default | ||
| var checkValidity = function checkValidity(vnode) { | ||
| var state = vnode.state; | ||
| var attrs = vnode.attrs; | ||
| // default | ||
| var status = attrs.valid !== undefined ? { | ||
| invalid: !attrs.valid, | ||
| message: attrs.error | ||
| } : !state.isTouched() && !attrs.validateAtStart ? DEFAULT_VALID_STATE : getValidStatus(state, attrs); | ||
| var previousInvalid = state.isInvalid(); | ||
| state.error(status.message); | ||
| if (status.invalid !== previousInvalid) { | ||
| state.isInvalid(status.invalid); | ||
| } | ||
| if (!status.invalid) { | ||
| state.error(undefined); | ||
| } | ||
| }; | ||
| var status = attrs.valid !== undefined ? { | ||
| invalid: !attrs.valid, | ||
| message: attrs.error | ||
| } : !state.isTouched() && !attrs.validateAtStart ? DEFAULT_VALID_STATE : getValidStatus(state, attrs); | ||
| var previousInvalid = state.isInvalid(); | ||
| state.error(status.message); | ||
| var notifyState = function notifyState(vnode) { | ||
| var state = vnode.state; | ||
| var attrs = vnode.attrs; | ||
| if (attrs.onChange) { | ||
| var status = getValidStatus(state, attrs); | ||
| attrs.onChange({ | ||
| focus: state.hasFocus(), | ||
| dirty: state.isDirty(), | ||
| el: state.inputEl(), | ||
| invalid: status.invalid, | ||
| error: status.error, | ||
| value: state.inputEl().value, | ||
| setInputState: function setInputState(newState) { | ||
| return state.setInputState(_extends({}, newState, { vnode: vnode })); | ||
| } | ||
| }); | ||
| } | ||
| }; | ||
| if (status.invalid !== previousInvalid) { | ||
| state.isInvalid(status.invalid); | ||
| } | ||
| if (!status.invalid) { | ||
| state.error(undefined); | ||
| } | ||
| }; | ||
| var ignoreEvent = function ignoreEvent(attrs, name) { | ||
| return attrs.ignoreEvents && attrs.ignoreEvents.indexOf(name) !== -1; | ||
| }; | ||
| var notifyState = function notifyState(vnode) { | ||
| var state = vnode.state; | ||
| var attrs = vnode.attrs; | ||
| if (attrs.onChange) { | ||
| var status = getValidStatus(state, attrs); | ||
| attrs.onChange({ | ||
| focus: state.hasFocus(), | ||
| dirty: state.isDirty(), | ||
| el: state.inputEl(), | ||
| invalid: status.invalid, | ||
| error: status.error, | ||
| value: state.inputEl().value, | ||
| setInputState: function setInputState(newState) { | ||
| return state.setInputState(newState); | ||
| } | ||
| }); | ||
| } | ||
| }; | ||
| var getInitialState = function getInitialState(vnode, createStream, _ref) { | ||
| var k = _ref.keys; | ||
| var ignoreEvent = function ignoreEvent(attrs, name) { | ||
| return attrs.ignoreEvents && attrs.ignoreEvents.indexOf(name) !== -1; | ||
| }; | ||
| var attrs = vnode.attrs; | ||
| var getInitialState = function getInitialState(vnode, createStream) { | ||
| var attrs = vnode.attrs; | ||
| var defaultValue = attrs.defaultValue !== undefined && attrs.defaultValue !== null ? attrs.defaultValue.toString() : attrs.value !== undefined && attrs.value !== null ? attrs.value.toString() : ""; | ||
| var defaultValue = attrs.defaultValue !== undefined && attrs.defaultValue !== null ? attrs.defaultValue.toString() : attrs.value !== undefined && attrs.value !== null ? attrs.value.toString() : ""; | ||
| var el = createStream(null); | ||
| var inputEl = createStream(null); | ||
| var setInputState = createStream({}); | ||
| var error = createStream(attrs.error); | ||
| var hasFocus = createStream(false); | ||
| var isTouched = createStream(false); // true when any change is made | ||
| var isDirty = createStream(defaultValue !== ""); // true for any input | ||
| var isInvalid = createStream(false); | ||
| var previousValue = createStream(undefined); | ||
| var didSetFocusTime = 0; | ||
| var showErrorPlaceholder = !!(attrs.valid !== undefined || attrs.validate || attrs.min || attrs.max || attrs[k.minlength] || attrs[k.maxlength] || attrs.required || attrs.pattern); | ||
| var el = createStream(null); | ||
| var inputEl = createStream(null); | ||
| var setInputState = createStream({}); | ||
| var error = createStream(attrs.error); | ||
| var hasFocus = createStream(false); | ||
| var isTouched = createStream(false); // true when any change is made | ||
| var isDirty = createStream(defaultValue !== ""); // true for any input | ||
| var isInvalid = createStream(false); | ||
| var previousValue = createStream(undefined); | ||
| var didSetFocusTime = 0; | ||
| return { | ||
| defaultValue: defaultValue, | ||
| didSetFocusTime: didSetFocusTime, | ||
| el: el, | ||
| error: error, | ||
| hasFocus: hasFocus, | ||
| inputEl: inputEl, | ||
| isDirty: isDirty, | ||
| isInvalid: isInvalid, | ||
| isTouched: isTouched, | ||
| previousValue: previousValue, | ||
| setInputState: setInputState, | ||
| redrawOnUpdate: createStream.merge([inputEl, isInvalid, isDirty]) | ||
| return { | ||
| defaultValue: defaultValue, | ||
| didSetFocusTime: didSetFocusTime, | ||
| el: el, | ||
| error: error, | ||
| hasFocus: hasFocus, | ||
| inputEl: inputEl, | ||
| isDirty: isDirty, | ||
| isInvalid: isInvalid, | ||
| isTouched: isTouched, | ||
| previousValue: previousValue, | ||
| setInputState: setInputState, | ||
| showErrorPlaceholder: showErrorPlaceholder, | ||
| redrawOnUpdate: createStream.merge([inputEl, isInvalid, isDirty]) | ||
| }; | ||
| }; | ||
| }; | ||
| var onMount = function onMount(vnode) { | ||
| var dom = vnode.dom; | ||
| var state = vnode.state; | ||
| var attrs = vnode.attrs; | ||
| var onMount = function onMount(vnode) { | ||
| var dom = vnode.dom; | ||
| var state = vnode.state; | ||
| var attrs = vnode.attrs; | ||
| state.el(dom); | ||
| var inputType = attrs.multiLine ? "textarea" : "input"; | ||
| var inputEl = dom.querySelector(inputType); | ||
| vnode.state.inputEl(inputEl); | ||
| state.inputEl().value = state.defaultValue; | ||
| state.el(dom); | ||
| var inputType = attrs.multiLine ? "textarea" : "input"; | ||
| var inputEl = dom.querySelector(inputType); | ||
| vnode.state.inputEl(inputEl); | ||
| state.inputEl().value = state.defaultValue; | ||
| state.setInputState.map(function (_ref) { | ||
| var type = _ref.type, | ||
| focus = _ref.focus, | ||
| value = _ref.value; | ||
| return value !== undefined ? state.inputEl().value = value : null, focus !== undefined && (state.hasFocus(focus), focus ? state.inputEl().focus() : state.inputEl().blur()), type === "input" && (attrs.validateOnInput || attrs.counter) && state.isTouched(state.inputEl().value !== state.defaultValue), type !== "input" && state.isTouched(state.inputEl().value !== state.defaultValue), type === "onblur" && state.isTouched(true), state.isDirty(state.inputEl().value !== ""), checkValidity(vnode), notifyState(vnode), state.previousValue(state.inputEl().value); | ||
| }); | ||
| state.setInputState.map(function (_ref2) { | ||
| var vnode = _ref2.vnode, | ||
| type = _ref2.type, | ||
| focus = _ref2.focus, | ||
| value = _ref2.value; | ||
| notifyState(vnode); | ||
| }; | ||
| if (vnode) { | ||
| value !== undefined ? state.inputEl().value = value : null; | ||
| focus !== undefined && (state.hasFocus(focus), focus ? state.inputEl().focus() : state.inputEl().blur()); | ||
| type === "input" && (attrs.validateOnInput || attrs.counter) && state.isTouched(state.inputEl().value !== state.defaultValue); | ||
| type !== "input" && state.isTouched(state.inputEl().value !== state.defaultValue); | ||
| type === "onblur" && state.isTouched(true); | ||
| state.isDirty(state.inputEl().value !== ""); | ||
| checkValidity(vnode); | ||
| notifyState(vnode); | ||
| state.previousValue(state.inputEl().value); | ||
| } | ||
| }); | ||
| var onUpdate = function onUpdate(vnode) { | ||
| var state = vnode.state; | ||
| var attrs = vnode.attrs; | ||
| checkValidity(vnode); | ||
| notifyState(vnode); | ||
| }; | ||
| var inputEl = state.inputEl(); | ||
| var value = attrs.value !== undefined && attrs.value !== null ? attrs.value : inputEl ? inputEl.value : state.previousValue(); | ||
| var valueStr = value === undefined || value === null ? "" : value.toString(); | ||
| var onUpdate = function onUpdate(vnode) { | ||
| var state = vnode.state; | ||
| var attrs = vnode.attrs; | ||
| checkValidity(vnode); | ||
| if (inputEl && state.previousValue() !== valueStr) { | ||
| inputEl.value = valueStr; | ||
| state.previousValue(valueStr); | ||
| state.setInputState({ type: "input" }); | ||
| } | ||
| }; | ||
| var inputEl = state.inputEl(); | ||
| var value = attrs.value !== undefined && attrs.value !== null ? attrs.value : inputEl ? inputEl.value : state.previousValue(); | ||
| var valueStr = value === undefined || value === null ? "" : value.toString(); | ||
| var createProps = function createProps(vnode, _ref2) { | ||
| var k = _ref2.keys; | ||
| if (inputEl && state.previousValue() !== valueStr) { | ||
| inputEl.value = valueStr; | ||
| state.previousValue(valueStr); | ||
| state.setInputState({ vnode: vnode, type: "input" }); | ||
| } | ||
| }; | ||
| var state = vnode.state; | ||
| var attrs = vnode.attrs; | ||
| var isInvalid = state.isInvalid(); | ||
| var createProps = function createProps(vnode, _ref3) { | ||
| var k = _ref3.keys; | ||
| return _extends({}, polytheneCore.filterSupportedAttributes(attrs), { | ||
| className: [classes.component, isInvalid ? classes.stateInvalid : "", state.hasFocus() ? classes.stateFocused : "", state.isDirty() ? classes.stateDirty : "", attrs.floatingLabel ? classes.hasFloatingLabel : "", attrs.disabled ? classes.stateDisabled : "", attrs.readonly ? classes.stateReadonly : "", attrs.dense ? classes.isDense : "", attrs.required ? classes.isRequired : "", attrs.fullWidth ? classes.hasFullWidth : "", attrs.counter ? classes.hasCounter : "", attrs.hideSpinner !== false && attrs.hideSpinner !== undefined ? classes.hideSpinner : "", attrs.hideClear !== false && attrs.hideClear !== undefined ? classes.hideClear : "", attrs.hideValidation ? classes.hideValidation : "", attrs.tone === "dark" ? "pe-dark-tone" : null, attrs.tone === "light" ? "pe-light-tone" : null, attrs.className || attrs[k.class]].join(" ") | ||
| }); | ||
| }; | ||
| var state = vnode.state; | ||
| var attrs = vnode.attrs; | ||
| var isInvalid = state.isInvalid(); | ||
| var createContent = function createContent(vnode, _ref3) { | ||
| var h = _ref3.renderer, | ||
| k = _ref3.keys; | ||
| return _extends({}, polytheneCore.filterSupportedAttributes(attrs), { | ||
| className: [classes.component, isInvalid ? classes.stateInvalid : "", state.hasFocus() ? classes.stateFocused : "", state.isDirty() ? classes.stateDirty : "", attrs.floatingLabel ? classes.hasFloatingLabel : "", attrs.disabled ? classes.stateDisabled : "", attrs.readonly ? classes.stateReadonly : "", attrs.dense ? classes.isDense : "", attrs.required ? classes.isRequired : "", attrs.fullWidth ? classes.hasFullWidth : "", attrs.counter ? classes.hasCounter : "", attrs.hideSpinner !== false && attrs.hideSpinner !== undefined ? classes.hideSpinner : "", attrs.hideClear !== false && attrs.hideClear !== undefined ? classes.hideClear : "", attrs.hideValidation ? classes.hideValidation : "", attrs.tone === "dark" ? "pe-dark-tone" : null, attrs.tone === "light" ? "pe-light-tone" : null, attrs.className || attrs[k.class]].join(" ") | ||
| }); | ||
| }; | ||
| var state = vnode.state; | ||
| var attrs = vnode.attrs; | ||
| var createContent = function createContent(vnode, _ref4) { | ||
| var h = _ref4.renderer, | ||
| k = _ref4.keys; | ||
| var inputEl = state.inputEl(); | ||
| var error = attrs.error || state.error(); | ||
| var isInvalid = state.isInvalid(); | ||
| var inputType = attrs.multiLine ? "textarea" : "input"; | ||
| var type = attrs.multiLine ? null : !attrs.type || attrs.type === "submit" || attrs.type === "search" ? "text" : attrs.type; | ||
| var showError = isInvalid && error !== undefined; | ||
| var state = vnode.state; | ||
| var attrs = vnode.attrs; | ||
| var validates = !!(attrs.valid !== undefined || attrs.validate || attrs.min || attrs.max || attrs[k.minlength] || attrs[k.maxlength] || attrs.required || attrs.pattern); | ||
| var inactive = attrs.disabled || attrs[k.readonly]; | ||
| var inputEl = state.inputEl(); | ||
| var error = attrs.error || state.error(); | ||
| var isInvalid = state.isInvalid(); | ||
| var inputType = attrs.multiLine ? "textarea" : "input"; | ||
| var type = attrs.multiLine ? null : !attrs.type || attrs.type === "submit" || attrs.type === "search" ? "text" : attrs.type; | ||
| var showError = isInvalid && error !== undefined; | ||
| var requiredIndicator = attrs.required && attrs.requiredIndicator !== "" ? h("span", { | ||
| key: "required", | ||
| className: classes.requiredIndicator | ||
| }, attrs.requiredIndicator || "*") : null; | ||
| var optionalIndicator = !attrs.required && attrs.optionalIndicator ? h("span", { | ||
| key: "optional", | ||
| className: classes.optionalIndicator | ||
| }, attrs.optionalIndicator) : null; | ||
| var label = attrs.label ? [attrs.label, requiredIndicator, optionalIndicator] : null; | ||
| var inactive = attrs.disabled || attrs[k.readonly]; | ||
| return [h("div", { | ||
| className: classes.inputArea, | ||
| key: "input-area" | ||
| }, [label ? h("label", { | ||
| key: "label", | ||
| className: classes.label | ||
| }, label) : null, h(inputType, _extends({}, { | ||
| key: "input", | ||
| className: classes.input, | ||
| disabled: attrs.disabled | ||
| }, type ? { type: type } : null, attrs.name ? { name: attrs.name } : null, !ignoreEvent(attrs, k.onclick) ? _defineProperty({}, k.onclick, function () { | ||
| if (inactive) { | ||
| return; | ||
| } | ||
| // in case the browser does not give the field focus, | ||
| // for instance when the user tapped to the current field off screen | ||
| state.setInputState({ focus: true }); | ||
| notifyState(vnode); | ||
| }) : null, !ignoreEvent(attrs, k.onfocus) ? _defineProperty({}, k.onfocus, function () { | ||
| if (inactive) { | ||
| return; | ||
| } | ||
| state.setInputState({ focus: true }); | ||
| var requiredIndicator = attrs.required && attrs.requiredIndicator !== "" ? h("span", { | ||
| key: "required", | ||
| className: classes.requiredIndicator | ||
| }, attrs.requiredIndicator || "*") : null; | ||
| var optionalIndicator = !attrs.required && attrs.optionalIndicator ? h("span", { | ||
| key: "optional", | ||
| className: classes.optionalIndicator | ||
| }, attrs.optionalIndicator) : null; | ||
| var label = attrs.label ? [attrs.label, requiredIndicator, optionalIndicator] : null; | ||
| // set CSS class manually in case field gets focus but is off screen | ||
| // and no redraw is triggered | ||
| // at the next redraw state.hasFocus() will be read and the focus class be set | ||
| // in the props.class statement | ||
| if (state.el()) { | ||
| state.el().classList.add(classes.stateFocused); | ||
| } | ||
| notifyState(vnode); | ||
| }) : null, !ignoreEvent(attrs, k.onblur) ? _defineProperty({}, k.onblur, function () { | ||
| state.setInputState({ type: "onblur", focus: false }); | ||
| // same principle as onfocus | ||
| state.el().classList.remove(classes.stateFocused); | ||
| }) : null, !ignoreEvent(attrs, k.oninput) ? _defineProperty({}, k.oninput, function () { | ||
| // default input event | ||
| // may be overwritten by attrs.events | ||
| state.setInputState({ type: "input" }); | ||
| }) : null, !ignoreEvent(attrs, k.onkeydown) ? _defineProperty({}, k.onkeydown, function (e) { | ||
| if (e.key === "Enter") { | ||
| state.isTouched(true); | ||
| } else if (e.key === "Escape" || e.key === "Esc") { | ||
| state.setInputState({ focus: false }); | ||
| } | ||
| }) : null, attrs.events ? attrs.events : null, // NOTE: may overwrite oninput | ||
| attrs.required !== undefined && !!attrs.required ? { required: true } : null, attrs[k.readonly] !== undefined && !!attrs[k.readonly] ? _defineProperty({}, k.readonly, true) : null, attrs.pattern !== undefined ? { pattern: attrs.pattern } : null, attrs[k.maxlength] !== undefined ? _defineProperty({}, k.maxlength, attrs[k.maxlength]) : null, attrs[k.minlength] !== undefined ? _defineProperty({}, k.minlength, attrs[k.minlength]) : null, attrs.max !== undefined ? { max: attrs.max } : null, attrs.min !== undefined ? { min: attrs.min } : null, attrs[k.autofocus] !== undefined ? _defineProperty({}, k.autofocus, attrs[k.autofocus]) : null, attrs[k.tabindex] !== undefined ? _defineProperty({}, k.tabindex, attrs[k.tabindex]) : null, attrs.rows !== undefined ? { rows: attrs.rows } : null))]), attrs.counter ? h("div", { | ||
| key: "counter", | ||
| className: classes.counter | ||
| }, (inputEl && inputEl.value.length || 0) + " / " + attrs.counter) : null, attrs.help && !showError ? h("div", { | ||
| key: "help", | ||
| className: [classes.help, attrs.focusHelp ? classes.focusHelp : null].join(" ") | ||
| }, attrs.help) : null, showError ? h("div", { | ||
| key: "error", | ||
| className: classes.error | ||
| }, error) : validates && !attrs.help ? h("div", { | ||
| key: "error-placeholder", | ||
| className: classes.errorPlaceholder | ||
| }) : null]; | ||
| }; | ||
| return [h("div", { | ||
| className: classes.inputArea, | ||
| key: "input-area" | ||
| }, [label ? h("label", { | ||
| key: "label", | ||
| className: classes.label | ||
| }, label) : null, h(inputType, _extends({}, { | ||
| key: "input", | ||
| className: classes.input, | ||
| disabled: attrs.disabled | ||
| }, type ? { type: type } : null, attrs.name ? { name: attrs.name } : null, !ignoreEvent(attrs, k.onclick) ? _defineProperty({}, k.onclick, function () { | ||
| if (inactive) { | ||
| return; | ||
| } | ||
| // in case the browser does not give the field focus, | ||
| // for instance when the user tapped to the current field off screen | ||
| state.setInputState({ vnode: vnode, focus: true }); | ||
| notifyState(vnode); | ||
| }) : null, !ignoreEvent(attrs, k.onfocus) ? _defineProperty({}, k.onfocus, function () { | ||
| if (inactive) { | ||
| return; | ||
| } | ||
| state.setInputState({ vnode: vnode, focus: true }); | ||
| var textfield = Object.freeze({ | ||
| getElement: getElement, | ||
| getInitialState: getInitialState, | ||
| onMount: onMount, | ||
| onUpdate: onUpdate, | ||
| createProps: createProps, | ||
| createContent: createContent | ||
| }); | ||
| // set CSS class manually in case field gets focus but is off screen | ||
| // and no redraw is triggered | ||
| // at the next redraw state.hasFocus() will be read and the focus class be set | ||
| // in the props.class statement | ||
| if (state.el()) { | ||
| state.el().classList.add(classes.stateFocused); | ||
| } | ||
| notifyState(vnode); | ||
| }) : null, !ignoreEvent(attrs, k.onblur) ? _defineProperty({}, k.onblur, function () { | ||
| state.setInputState({ vnode: vnode, type: "onblur", focus: false }); | ||
| // same principle as onfocus | ||
| state.el().classList.remove(classes.stateFocused); | ||
| }) : null, !ignoreEvent(attrs, k.oninput) ? _defineProperty({}, k.oninput, function () { | ||
| // default input event | ||
| // may be overwritten by attrs.events | ||
| state.setInputState({ vnode: vnode, type: "input" }); | ||
| }) : null, !ignoreEvent(attrs, k.onkeydown) ? _defineProperty({}, k.onkeydown, function (e) { | ||
| if (e.key === "Enter") { | ||
| state.isTouched(true); | ||
| } else if (e.key === "Escape" || e.key === "Esc") { | ||
| state.setInputState({ vnode: vnode, focus: false }); | ||
| } | ||
| }) : null, attrs.events ? attrs.events : null, // NOTE: may overwrite oninput | ||
| attrs.required !== undefined && !!attrs.required ? { required: true } : null, attrs[k.readonly] !== undefined && !!attrs[k.readonly] ? _defineProperty({}, k.readonly, true) : null, attrs.pattern !== undefined ? { pattern: attrs.pattern } : null, attrs[k.maxlength] !== undefined ? _defineProperty({}, k.maxlength, attrs[k.maxlength]) : null, attrs[k.minlength] !== undefined ? _defineProperty({}, k.minlength, attrs[k.minlength]) : null, attrs.max !== undefined ? { max: attrs.max } : null, attrs.min !== undefined ? { min: attrs.min } : null, attrs[k.autofocus] !== undefined ? _defineProperty({}, k.autofocus, attrs[k.autofocus]) : null, attrs[k.tabindex] !== undefined ? _defineProperty({}, k.tabindex, attrs[k.tabindex]) : null, attrs.rows !== undefined ? { rows: attrs.rows } : null))]), attrs.counter ? h("div", { | ||
| key: "counter", | ||
| className: classes.counter | ||
| }, (inputEl && inputEl.value.length || 0) + " / " + attrs.counter) : null, attrs.help && !showError ? h("div", { | ||
| key: "help", | ||
| className: [classes.help, attrs.focusHelp ? classes.focusHelp : null].join(" ") | ||
| }, attrs.help) : null, showError ? h("div", { | ||
| key: "error", | ||
| className: classes.error | ||
| }, error) : state.showErrorPlaceholder && !attrs.help ? h("div", { | ||
| key: "error-placeholder", | ||
| className: classes.errorPlaceholder | ||
| }) : null]; | ||
| }; | ||
| var rgba = function rgba(colorStr) { | ||
| var opacity = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1; | ||
| return "rgba(" + colorStr + ", " + opacity + ")"; | ||
| }; | ||
| var textfield = /*#__PURE__*/Object.freeze({ | ||
| getElement: getElement, | ||
| getInitialState: getInitialState, | ||
| onMount: onMount, | ||
| onUpdate: onUpdate, | ||
| createProps: createProps, | ||
| createContent: createContent | ||
| }); | ||
| var line_height_input = 20; | ||
| var input_padding_v = 7; | ||
| var rgba = function rgba(colorStr) { | ||
| var opacity = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1; | ||
| return "rgba(" + colorStr + ", " + opacity + ")"; | ||
| }; | ||
| var vars$1 = { | ||
| vertical_spacing_top: 6, // 8 minus natural label height padding (1) | ||
| vertical_spacing_bottom: 7, // 8 minus natural label height padding (1) | ||
| input_focus_border_width: 2, | ||
| input_focus_border_animation_duration: polytheneTheme.vars.animation_duration, | ||
| var line_height_input = 20; | ||
| var input_padding_v = 7; | ||
| floating_label_vertical_spacing_top: 30, // 16 + 8 + 8 minus natural label height padding (2) | ||
| floating_label_vertical_spacing_bottom: 7, // 8 minus natural label height padding (1) | ||
| floating_label_top: 14, | ||
| floating_label_animation_duration: ".12s", | ||
| var vars = { | ||
| vertical_spacing_top: 6, // 8 minus natural label height padding (1) | ||
| vertical_spacing_bottom: 7, // 8 minus natural label height padding (1) | ||
| input_focus_border_width: 2, | ||
| input_focus_border_animation_duration: polytheneTheme.vars.animation_duration, | ||
| input_padding_h: 0, | ||
| input_padding_v: input_padding_v, | ||
| input_border_width: 1, | ||
| margin_top_error_message: 6, | ||
| font_size_input: 16, | ||
| font_size_error: 12, | ||
| font_size_floating_label: 12, | ||
| floating_label_vertical_spacing_top: 30, // 16 + 8 + 8 minus natural label height padding (2) | ||
| floating_label_vertical_spacing_bottom: 7, // 8 minus natural label height padding (1) | ||
| floating_label_top: 14, | ||
| floating_label_animation_duration: ".12s", | ||
| line_height_input: line_height_input, | ||
| input_padding_h: 0, | ||
| input_padding_v: input_padding_v, | ||
| input_border_width: 1, | ||
| margin_top_error_message: 6, | ||
| font_size_input: 16, | ||
| font_size_error: 12, | ||
| font_size_floating_label: 12, | ||
| dense_floating_label_vertical_spacing_top: 23, // 12 + 8 + 4 minus natural label height padding (1) | ||
| dense_floating_label_vertical_spacing_bottom: 4, // 8 minus natural label height padding (1) | ||
| dense_floating_label_top: 10, | ||
| dense_font_size_input: 13, | ||
| dense_font_size_floating_label: 13, | ||
| line_height_input: line_height_input, | ||
| full_width_input_padding_h: 20, | ||
| full_width_input_padding_v: 18, // 20 minus natural label height padding (2) | ||
| dense_floating_label_vertical_spacing_top: 23, // 12 + 8 + 4 minus natural label height padding (1) | ||
| dense_floating_label_vertical_spacing_bottom: 4, // 8 minus natural label height padding (1) | ||
| dense_floating_label_top: 10, | ||
| dense_font_size_input: 13, | ||
| dense_font_size_floating_label: 13, | ||
| dense_full_width_input_padding_h: 16, | ||
| dense_full_width_input_padding_v: 15, // 16 minus natural label height padding (1) | ||
| dense_full_width_font_size_input: 13, | ||
| full_width_input_padding_h: 20, | ||
| full_width_input_padding_v: 18, // 20 minus natural label height padding (2) | ||
| color_light_input_text: rgba(polytheneTheme.vars.color_light_foreground, polytheneTheme.vars.blend_light_text_primary), | ||
| color_light_input_background: "transparent", // only used to "remove" autofill color | ||
| color_light_highlight_text: rgba(polytheneTheme.vars.color_primary, polytheneTheme.vars.blend_light_text_primary), | ||
| color_light_input_bottom_border: rgba(polytheneTheme.vars.color_light_foreground, polytheneTheme.vars.blend_light_border_light), | ||
| color_light_input_error_text: rgba("221, 44, 0"), | ||
| color_light_input_error_border: rgba("221, 44, 0"), | ||
| color_light_input_placeholder: rgba(polytheneTheme.vars.color_light_foreground, polytheneTheme.vars.blend_light_text_tertiary), | ||
| color_light_label_text: rgba(polytheneTheme.vars.color_light_foreground, polytheneTheme.vars.blend_light_text_tertiary), | ||
| color_light_disabled_label_text: rgba(polytheneTheme.vars.color_light_foreground, polytheneTheme.vars.blend_light_text_disabled), | ||
| color_light_readonly_label_text: rgba(polytheneTheme.vars.color_light_foreground, polytheneTheme.vars.blend_light_text_tertiary), | ||
| color_light_help_text: rgba(polytheneTheme.vars.color_light_foreground, polytheneTheme.vars.blend_light_text_tertiary), | ||
| color_light_required_symbol: rgba("221, 44, 0"), | ||
| color_light_focus_border: rgba(polytheneTheme.vars.color_primary), | ||
| color_light_counter_ok_border: rgba(polytheneTheme.vars.color_primary), | ||
| dense_full_width_input_padding_h: 16, | ||
| dense_full_width_input_padding_v: 15, // 16 minus natural label height padding (1) | ||
| dense_full_width_font_size_input: 13, | ||
| color_dark_input_text: rgba(polytheneTheme.vars.color_dark_foreground, polytheneTheme.vars.blend_dark_text_primary), | ||
| color_dark_input_background: "transparent", // only used to "remove" autofill color | ||
| color_dark_highlight_text: rgba(polytheneTheme.vars.color_primary, polytheneTheme.vars.blend_dark_text_primary), | ||
| color_dark_input_bottom_border: rgba(polytheneTheme.vars.color_dark_foreground, polytheneTheme.vars.blend_dark_border_light), | ||
| color_dark_input_error_text: rgba("222, 50, 38"), | ||
| color_dark_input_error_border: rgba("222, 50, 38"), | ||
| color_dark_input_placeholder: rgba(polytheneTheme.vars.color_dark_foreground, polytheneTheme.vars.blend_dark_text_tertiary), | ||
| color_dark_label_text: rgba(polytheneTheme.vars.color_dark_foreground, polytheneTheme.vars.blend_dark_text_tertiary), | ||
| color_dark_disabled_label_text: rgba(polytheneTheme.vars.color_dark_foreground, polytheneTheme.vars.blend_dark_text_disabled), | ||
| color_dark_readonly_label_text: rgba(polytheneTheme.vars.color_dark_foreground, polytheneTheme.vars.blend_dark_text_tertiary), | ||
| color_dark_help_text: rgba(polytheneTheme.vars.color_dark_foreground, polytheneTheme.vars.blend_dark_text_tertiary), | ||
| color_dark_required_symbol: rgba("221, 44, 0"), | ||
| color_dark_focus_border: rgba(polytheneTheme.vars.color_primary), | ||
| color_dark_counter_ok_border: rgba(polytheneTheme.vars.color_primary) | ||
| }; | ||
| color_light_input_text: rgba(polytheneTheme.vars.color_light_foreground, polytheneTheme.vars.blend_light_text_primary), | ||
| color_light_input_background: "transparent", // only used to "remove" autofill color | ||
| color_light_highlight_text: rgba(polytheneTheme.vars.color_primary, polytheneTheme.vars.blend_light_text_primary), | ||
| color_light_input_bottom_border: rgba(polytheneTheme.vars.color_light_foreground, polytheneTheme.vars.blend_light_border_light), | ||
| color_light_input_error_text: rgba("221, 44, 0"), | ||
| color_light_input_error_border: rgba("221, 44, 0"), | ||
| color_light_input_placeholder: rgba(polytheneTheme.vars.color_light_foreground, polytheneTheme.vars.blend_light_text_tertiary), | ||
| color_light_label_text: rgba(polytheneTheme.vars.color_light_foreground, polytheneTheme.vars.blend_light_text_tertiary), | ||
| color_light_disabled_label_text: rgba(polytheneTheme.vars.color_light_foreground, polytheneTheme.vars.blend_light_text_disabled), | ||
| color_light_readonly_label_text: rgba(polytheneTheme.vars.color_light_foreground, polytheneTheme.vars.blend_light_text_tertiary), | ||
| color_light_help_text: rgba(polytheneTheme.vars.color_light_foreground, polytheneTheme.vars.blend_light_text_tertiary), | ||
| color_light_required_symbol: rgba("221, 44, 0"), | ||
| color_light_focus_border: rgba(polytheneTheme.vars.color_primary), | ||
| color_light_counter_ok_border: rgba(polytheneTheme.vars.color_primary), | ||
| exports.coreTextField = textfield; | ||
| exports.vars = vars$1; | ||
| color_dark_input_text: rgba(polytheneTheme.vars.color_dark_foreground, polytheneTheme.vars.blend_dark_text_primary), | ||
| color_dark_input_background: "transparent", // only used to "remove" autofill color | ||
| color_dark_highlight_text: rgba(polytheneTheme.vars.color_primary, polytheneTheme.vars.blend_dark_text_primary), | ||
| color_dark_input_bottom_border: rgba(polytheneTheme.vars.color_dark_foreground, polytheneTheme.vars.blend_dark_border_light), | ||
| color_dark_input_error_text: rgba("222, 50, 38"), | ||
| color_dark_input_error_border: rgba("222, 50, 38"), | ||
| color_dark_input_placeholder: rgba(polytheneTheme.vars.color_dark_foreground, polytheneTheme.vars.blend_dark_text_tertiary), | ||
| color_dark_label_text: rgba(polytheneTheme.vars.color_dark_foreground, polytheneTheme.vars.blend_dark_text_tertiary), | ||
| color_dark_disabled_label_text: rgba(polytheneTheme.vars.color_dark_foreground, polytheneTheme.vars.blend_dark_text_disabled), | ||
| color_dark_readonly_label_text: rgba(polytheneTheme.vars.color_dark_foreground, polytheneTheme.vars.blend_dark_text_tertiary), | ||
| color_dark_help_text: rgba(polytheneTheme.vars.color_dark_foreground, polytheneTheme.vars.blend_dark_text_tertiary), | ||
| color_dark_required_symbol: rgba("221, 44, 0"), | ||
| color_dark_focus_border: rgba(polytheneTheme.vars.color_primary), | ||
| color_dark_counter_ok_border: rgba(polytheneTheme.vars.color_primary) | ||
| }; | ||
| Object.defineProperty(exports, '__esModule', { value: true }); | ||
| exports.coreTextField = textfield; | ||
| exports.vars = vars; | ||
| Object.defineProperty(exports, '__esModule', { value: true }); | ||
| }))); | ||
| //# sourceMappingURL=polythene-core-textfield.js.map |
| { | ||
| "name": "polythene-core-textfield", | ||
| "version": "1.0.0", | ||
| "version": "1.1.0", | ||
| "description": "", | ||
| "main": "dist/polythene-core-textfield.js", | ||
| "main": "dist/polythene-core-textfield", | ||
| "module": "dist/polythene-core-textfield.mjs", | ||
| "scripts": { | ||
| "clean": "rm -rf dist && mkdir dist", | ||
| "clean": "rm -rf dist/*", | ||
| "rollup": "../../node_modules/rollup/bin/rollup -c ../../scripts/rollup.umd.js && ../../node_modules/rollup/bin/rollup -c ../../scripts/rollup.es.js", | ||
| "build": "yarn run rollup" | ||
| "build": "yarn run clean && yarn run rollup" | ||
| }, | ||
@@ -17,5 +17,5 @@ "files": [ | ||
| "dependencies": { | ||
| "polythene-core": "^1.0.0", | ||
| "polythene-css-classes": "^1.0.0", | ||
| "polythene-theme": "^1.0.0" | ||
| "polythene-core": "^1.1.0", | ||
| "polythene-css-classes": "^1.1.0", | ||
| "polythene-theme": "^1.1.0" | ||
| }, | ||
@@ -22,0 +22,0 @@ "author": "Arthur Clemens <arthurclemens@gmail.com> (http://arthurclemens.com)", |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by7.74%
72722
- Lines of code
- increased by3.45%
719
Dependency changes
Updatedpolythene-core@^1.1.0
Updatedpolythene-css-classes@^1.1.0
Updatedpolythene-theme@^1.1.0