Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@dreamworld/dw-input
Advanced tools
Readme
A material input element made with lit-html. For more detail visit https://material.io/develop/web/components/input-controls/text-field/.
npm install @dreamworld/dw-input
@import '@dreamworld/dw-input/dw-input';
autoSelect
property is truevalidator
property to add custom validationsmultiline
to true to show input as text areatype
property to set type of input e.g ("text", "email", "number"). List of all input typesicon
and iconTrailing
to show prefix and suffix iconhintInTooltip
: way to show hint text in tooltip and tip trigger on info(grey) icon.error
: Provides a way to show custom error message. It could be either String
or Function
.warning
: Provides a way to show warning. It could be either String
or Function
.`errorInTooltip
: Way to show error text in tooltip. It trigger on error(red) icon.warningInTooltip
: Way to show warning text in tooltip. It trigger on warning(orange) icon.hintTooltipActions
: way to add tip action while hint text in tip. on action click event named action
dispatch.errorTooltipActions
: way to add tip action while error text in tip. on action click event named action
dispatch.warningTooltipActions
: way to add tip action while warning text in tip. on action click event named action
dispatch.tipPlacement
: Tooltip placement for more see tippyJs doc.{
name: string,
lable: string,
danger: boolean
}
By default value
property is exactly the text written in the text-field. But, When creating custom input elements
by extending dw-input
we need to change this behavior. e.g. For we want to create a date-input, whose value will always be in yyyy-mm-dd
format. But, allows user to choose input format. e.g. For American user it allows to enter date in mm/dd/yyyy
format and for Indian users it allows to enter date in dd/mm/yyyy
format. In addition, we need
1 more feature that date input can be done without /
or -
. And even partial dates can be entered. e.g.
12
, then the date will be come 12th of the current month and year. (assumed input format is dd/mmy/yyyy)125
, then the date will become 12th May of the current year.
For such features, we need to do custom parsing of value from the input text and when user sets value property, we need
to compute corresponding text representation.This can be easily done by extending this element and then overriding following 2 functions:
parseValue(text, userEditing)
:
yyyy-mm-dd
.userEditing
is Boolean. When user is editing the input (focus is still in), this is true
.formatText(value)
, Receives value property as argument and returns formatted text to be shown in the input field.
e.g. For the above example, it receives date in yyyy-mm-dd
format and it's output is date representation in dd/mm/yyyy
format for indian user.How exactly parseValue
and formatText
function is used internally?
formatText
: Input text needs to be formatted on 2 events.
change
event - blur of the Input & value is changed.value
property explicitly.parseValue
: Value needs to be parsed when user interacts with input text-field and updates text. e.g. input
and change
both events.
input
event); On undefined
return value, value
isn't changed (stays to it's last value). This allows intermediate invalid value handling. In this case input
event isn't triggered on this input, because effectively value
isn't changed. Please note that, null
and Blank String both are used as it is. It's just for undefined
.change
event); Anything returned including undefined
is set to the value
property.focus
- Focuses the input
selectText
- Selected input's text
validate
- Call this to validate input. Returns false if value is invalid.
Configure color of the icon using --dw-icon-color
css variable.
dw-input{
--dw-icon-color: green;
}
Override dwInput class to create a custom input
class CustomInput extends DwInput {
static get styles() {
return [
DwInput.styles,
css`
.mdc-text-field{
border-radius: 8px;
}`
];
}
}
customElements.define('custom-input', CustomInput);
<custom-input></custom-input>
<dw-input label="Name" validator="<VALIDATION_FN>" placeholder="Enter name here" autoSelect required hint="Hint text"></dw-input>
<dw-input label="Number" disabled allowedPattern="[0-9]" value="12"></dw-input>
<dw-input label="Number" readOnly icon='search' iconTrailing='add_comment'></dw-input>
<dw-input noLabel multiline></dw-input>
npm install @dw/dw-input
import '@dreamworld/dw-input/dw-textarea';
value-changed
:
value
property is changed. Either due to user-interaction, or it's changed programatically (by integrator).input
or change
as appropriate for your use-case.input
: Same as browser default input-event. Dispatched when user changes input value, as user types or on paste.change
: Same as browser default change-event. Dispatched on-blur if value was changed by the user.enter
event with input value and event object.
enter
key on input.esc
event with input value and event object.
esc
key on input.blur
event with input value and event object.
focus
- Focus in the inputfocusToEnd
- Focus in the input at lastblur
- Remove the input focusvalidate
- Call this to validate input. Returns false if value is invalid.--dw-textarea-padding
css variable.dw-textarea
element at the time of usage. Default border hasn't provided as it's
raw element to be used for the custom purposes/UI.dw-textarea
as per your need.material-styles
) to dw-textarea
. No default,
typography is applied. When used in dw-input
, it applies typo graphy as per the input fonts.--mdc-theme-text-primary
, --mdc-theme-text-hint
and --mdc-theme-text-disabled
are used for the font
colors. So, change these css properties as per your need.minHeight
and maxHeight
property.minHeight
to maxHeight
after that they show scroll.<dw-textarea .minHeight=${80} .maxHeight=${200}></dw-textarea>
minHeight
to input to show fix height<dw-textarea .minHeight=${70} .maxHeight=${70}></dw-textarea>
disabledEnter
property set as a true
.<dw-textarea .minHeight=${70} .maxHeight=${70} disabledEnter></dw-textarea>
Many times you want to highlight the input when it's value is changed.
Example use-case is "Edit Form". An Edit Form has most fields with pre-filled values. Here, field whose values are updated can be highlighted. That provides nice User Experience, as user can know what has been updated. This involves both:
This can be achieved simply by setting 2 properties: highlightChanged
and originalValue
.
<dw-input value="12" originalValue="12" highlightChanged></dw-input>
It also considers
truncateOnBlur
property.
As an advance use-case, you might want to change the behaviour of equality-checker (whether value has been updated or not?).
This can be achived through setting property valueEqualityChecker
.
<dw-textarea .minHeight=${80} .maxHeight=${200} .readOnly=${true}></dw-textarea>
FAQs
Material design styled input text-field & text-area implemented in LitElement
The npm package @dreamworld/dw-input receives a total of 78 weekly downloads. As such, @dreamworld/dw-input popularity was classified as not popular.
We found that @dreamworld/dw-input demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.