Socket
Socket
Sign inDemoInstall

polythene-core-textfield

Package Overview
Dependencies
Maintainers
1
Versions
37
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

polythene-core-textfield - npm Package Compare versions

Comparing version 1.3.3 to 1.4.0

344

dist/polythene-core-textfield.js

@@ -1,344 +0,2 @@

(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('polythene-core')) :
typeof define === 'function' && define.amd ? define(['exports', 'polythene-core'], factory) :
(factory((global.polythene = {}),global['polythene-core']));
}(this, (function (exports,polytheneCore) { 'use strict';
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",
// 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; };
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 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 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 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;
};
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 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) {
var hasNewValue = newState.value !== undefined && newState.value !== state.inputEl().value;
var hasNewFocus = newState.focus !== undefined && newState.focus !== state.hasFocus();
if (hasNewValue || hasNewFocus) {
state.setInputState(_extends({}, newState, { vnode: vnode }));
}
}
});
}
};
var ignoreEvent = function ignoreEvent(attrs, name) {
return attrs.ignoreEvents && attrs.ignoreEvents.indexOf(name) !== -1;
};
var getInitialState = function getInitialState(vnode, createStream, _ref) {
var k = _ref.keys;
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 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);
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) {
if (!vnode.dom) {
return;
}
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.setInputState.map(function (_ref2) {
var vnode = _ref2.vnode,
type = _ref2.type,
focus = _ref2.focus,
value = _ref2.value;
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);
}
});
notifyState(vnode);
};
var onUpdate = function onUpdate(vnode) {
var state = vnode.state;
var attrs = vnode.attrs;
checkValidity(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();
if (inputEl && state.previousValue() !== valueStr) {
inputEl.value = valueStr;
state.previousValue(valueStr);
state.setInputState({ vnode: vnode, type: "input" });
}
};
var createProps = function createProps(vnode, _ref3) {
var k = _ref3.keys;
var state = vnode.state;
var attrs = vnode.attrs;
var isInvalid = state.isInvalid();
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 createContent = function createContent(vnode, _ref4) {
var h = _ref4.renderer,
k = _ref4.keys;
var state = vnode.state;
var attrs = vnode.attrs;
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 inactive = attrs.disabled || attrs[k.readonly];
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;
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 });
// 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 textfield = /*#__PURE__*/Object.freeze({
getElement: getElement,
getInitialState: getInitialState,
onMount: onMount,
onUpdate: onUpdate,
createProps: createProps,
createContent: createContent
});
exports.coreTextField = textfield;
Object.defineProperty(exports, '__esModule', { value: true });
})));
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("polythene-core")):"function"==typeof define&&define.amd?define(["exports","polythene-core"],t):t((e=e||self).polythene={},e["polythene-core"])}(this,function(e,t){"use strict";var l={component:"pe-textfield",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",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"};const i={invalid:!1,message:void 0},n=(e,t)=>{let l=i;return e.isTouched()&&e.isInvalid()&&0===e.inputEl().value.length&&t.validateResetOnClear&&(e.isTouched(!1),e.isInvalid(!1),e.error(void 0)),!l.invalid&&t.counter&&(l=((e,t)=>({invalid:e.inputEl().value.length>t.counter,message:t.error}))(e,t)),!l.invalid&&e.inputEl()&&e.inputEl().checkValidity&&(l=((e,t)=>({invalid:!e.inputEl().checkValidity(),message:t.error}))(e,t)),!l.invalid&&t.validate&&(l=((e,t)=>{if(!e.inputEl())return i;const l=t.validate(e.inputEl().value);return{invalid:l&&!l.valid,message:l&&l.error}})(e,t)),l},a=e=>{const t=e.state,l=e.attrs,a=void 0!==l.valid?{invalid:!l.valid,message:l.error}:t.isTouched()||l.validateAtStart?n(t,l):i,o=t.isInvalid();t.error(a.message),a.invalid!==o&&t.isInvalid(a.invalid),a.invalid||t.error(void 0)},o=e=>{const t=e.state,l=e.attrs;if(l.onChange){const i=n(t,l);l.onChange({focus:t.hasFocus(),dirty:t.isDirty(),el:t.inputEl(),invalid:i.invalid,error:i.error,value:t.inputEl().value,setInputState:l=>{const i=void 0!==l.value&&l.value!==t.inputEl().value,n=void 0!==l.focus&&l.focus!==t.hasFocus();(i||n)&&t.setInputState(Object.assign({},l,{vnode:e}))}})}},r=(e,t)=>e.ignoreEvents&&-1!==e.ignoreEvents.indexOf(t);var u=Object.freeze({getElement:e=>e.attrs.element||"div",getInitialState:(e,t,{keys:l})=>{const i=e.attrs,n=void 0!==i.defaultValue&&null!==i.defaultValue?i.defaultValue.toString():void 0!==i.value&&null!==i.value?i.value.toString():"",a=t(null),o=t(null),r=t({}),u=t(i.error),d=t(!1),s=t(!1),p=t(""!==n),c=t(!1);return{defaultValue:n,didSetFocusTime:0,el:a,error:u,hasFocus:d,inputEl:o,isDirty:p,isInvalid:c,isTouched:s,previousValue:t(void 0),setInputState:r,showErrorPlaceholder:!!(void 0!==i.valid||i.validate||i.min||i.max||i[l.minlength]||i[l.maxlength]||i.required||i.pattern),redrawOnUpdate:t.merge([o,c,p])}},onMount:e=>{if(!e.dom)return;const t=e.dom,l=e.state,i=e.attrs;l.el(t);const n=i.multiLine?"textarea":"input",r=t.querySelector(n);e.state.inputEl(r),l.inputEl().value=l.defaultValue,l.setInputState.map(({vnode:e,type:t,focus:n,value:r})=>{e&&(void 0!==r&&(l.inputEl().value=r),void 0!==n&&(l.hasFocus(n),n?l.inputEl().focus():l.inputEl().blur()),"input"===t&&(i.validateOnInput||i.counter)&&l.isTouched(l.inputEl().value!==l.defaultValue),"input"!==t&&l.isTouched(l.inputEl().value!==l.defaultValue),"onblur"===t&&l.isTouched(!0),l.isDirty(""!==l.inputEl().value),a(e),o(e),l.previousValue(l.inputEl().value))}),o(e)},onUpdate:e=>{const t=e.state,l=e.attrs;a(e);const i=t.inputEl(),n=void 0!==l.value&&null!==l.value?l.value:i?i.value:t.previousValue(),o=null==n?"":n.toString();i&&t.previousValue()!==o&&(i.value=o,t.previousValue(o),t.setInputState({vnode:e,type:"input"}))},createProps:(e,{keys:i})=>{const n=e.state,a=e.attrs,o=n.isInvalid();return Object.assign({},t.filterSupportedAttributes(a),{className:[l.component,o?l.stateInvalid:"",n.hasFocus()?l.stateFocused:"",n.isDirty()?l.stateDirty:"",a.floatingLabel?l.hasFloatingLabel:"",a.disabled?l.stateDisabled:"",a.readonly?l.stateReadonly:"",a.dense?l.isDense:"",a.required?l.isRequired:"",a.fullWidth?l.hasFullWidth:"",a.counter?l.hasCounter:"",!1!==a.hideSpinner&&void 0!==a.hideSpinner?l.hideSpinner:"",!1!==a.hideClear&&void 0!==a.hideClear?l.hideClear:"",a.hideValidation?l.hideValidation:"","dark"===a.tone?"pe-dark-tone":null,"light"===a.tone?"pe-light-tone":null,a.className||a[i.class]].join(" ")})},createContent:(e,{renderer:t,keys:i})=>{const n=e.state,a=e.attrs,u=n.inputEl();let d=a.error||n.error();const s=n.isInvalid(),p=a.multiLine?"textarea":"input",c=a.multiLine?null:a.type&&"submit"!==a.type&&"search"!==a.type?a.type:"text",v=s&&void 0!==d,h=a.disabled||a[i.readonly],f=a.required&&""!==a.requiredIndicator?t("span",{key:"required",className:l.requiredIndicator},a.requiredIndicator||"*"):null,y=!a.required&&a.optionalIndicator?t("span",{key:"optional",className:l.optionalIndicator},a.optionalIndicator):null,m=a.label?[a.label,f,y]:null;return[t("div",{className:l.inputArea,key:"input-area"},[m?t("label",{key:"label",className:l.label},m):null,t(p,Object.assign({},{key:"input",className:l.input,disabled:a.disabled},c?{type:c}:null,a.name?{name:a.name}:null,r(a,i.onclick)?null:{[i.onclick]:()=>{h||(n.setInputState({vnode:e,focus:!0}),o(e))}},r(a,i.onfocus)?null:{[i.onfocus]:()=>{h||(n.setInputState({vnode:e,focus:!0}),n.el()&&n.el().classList.add(l.stateFocused),o(e))}},r(a,i.onblur)?null:{[i.onblur]:()=>{n.setInputState({vnode:e,type:"onblur",focus:!1}),n.el().classList.remove(l.stateFocused)}},r(a,i.oninput)?null:{[i.oninput]:()=>{n.setInputState({vnode:e,type:"input"})}},r(a,i.onkeydown)?null:{[i.onkeydown]:t=>{"Enter"===t.key?n.isTouched(!0):"Escape"!==t.key&&"Esc"!==t.key||n.setInputState({vnode:e,focus:!1})}},a.events?a.events:null,void 0!==a.required&&a.required?{required:!0}:null,void 0!==a[i.readonly]&&a[i.readonly]?{[i.readonly]:!0}:null,void 0!==a.pattern?{pattern:a.pattern}:null,void 0!==a[i.maxlength]?{[i.maxlength]:a[i.maxlength]}:null,void 0!==a[i.minlength]?{[i.minlength]:a[i.minlength]}:null,void 0!==a.max?{max:a.max}:null,void 0!==a.min?{min:a.min}:null,void 0!==a[i.autofocus]?{[i.autofocus]:a[i.autofocus]}:null,void 0!==a[i.tabindex]?{[i.tabindex]:a[i.tabindex]}:null,void 0!==a.rows?{rows:a.rows}:null))]),a.counter?t("div",{key:"counter",className:l.counter},(u&&u.value.length||0)+" / "+a.counter):null,a.help&&!v?t("div",{key:"help",className:[l.help,a.focusHelp?l.focusHelp:null].join(" ")},a.help):null,v?t("div",{key:"error",className:l.error},d):n.showErrorPlaceholder&&!a.help?t("div",{key:"error-placeholder",className:l.errorPlaceholder}):null]}});e.coreTextField=u,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=polythene-core-textfield.js.map

10

package.json
{
"name": "polythene-core-textfield",
"version": "1.3.3",
"version": "1.4.0",
"description": "",

@@ -9,3 +9,3 @@ "main": "dist/polythene-core-textfield",

"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",
"rollup": "../../node_modules/rollup/bin/rollup -c ../../scripts/bundling/rollup.umd.js && ../../node_modules/rollup/bin/rollup -c ../../scripts/bundling/rollup.es.js",
"build": "npm run clean && npm run rollup"

@@ -18,5 +18,5 @@ },

"dependencies": {
"polythene-core": "^1.3.2",
"polythene-css-classes": "^1.3.2",
"polythene-theme": "^1.3.2"
"polythene-core": "^1.4.0",
"polythene-css-classes": "^1.4.0",
"polythene-theme": "^1.4.0"
},

@@ -23,0 +23,0 @@ "author": "Arthur Clemens <arthurclemens@gmail.com> (http://arthurclemens.com)",

dist/polythene-core-textfield.js.map

Sorry, the diff of this file is not supported yet

dist/polythene-core-textfield.mjs

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc