From c1558fe8f9719c6b09185844f9da437b5c00e74f Mon Sep 17 00:00:00 2001 From: Remmy Cat Stock Date: Fri, 16 Feb 2024 14:36:00 +0100 Subject: [PATCH 1/3] feat(ui-components): implement events for number input --- .vscode/settings.json | 3 + packages/js-example-app/src/index.js | 13 ++ .../components/number-input/index.stories.ts | 58 ++++--- .../src/components/number-input/index.test.ts | 34 +++- .../src/components/number-input/index.ts | 161 ++++++++++++------ packages/ui-library/src/globals/events.ts | 26 ++- 6 files changed, 218 insertions(+), 77 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 80b2b7412..b9e668415 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -33,6 +33,9 @@ "package-lock.json": true }, "typescript.tsdk": "node_modules/typescript/lib", + "editor.rulers": [ + 120 // prettier print width + ], "lit-plugin.rules.no-missing-import": "off", "lit-plugin.strict": true } diff --git a/packages/js-example-app/src/index.js b/packages/js-example-app/src/index.js index 83dea590a..4d9d61cb9 100644 --- a/packages/js-example-app/src/index.js +++ b/packages/js-example-app/src/index.js @@ -9,6 +9,7 @@ const blrButton = document.getElementsByTagName('blr-text-button')[0]; const blrCheckbox = document.getElementsByTagName('blr-checkbox')[0]; const blrSelect = document.getElementsByTagName('blr-select')[0]; const blrTextInput = document.getElementsByTagName('blr-text-input')[0]; +const blrNumberInput = document.getElementsByTagName('blr-number-input')[0]; const blrTextArea = document.getElementsByTagName('blr-textarea')[0]; const addLog = (log) => { @@ -81,6 +82,18 @@ blrTextInput.addEventListener('blrTextValueChange', () => { addLog('blr-text-input changed'); }); +blrNumberInput.addEventListener('blrFocus', () => { + addLog('blr-number-input focused'); +}); + +blrNumberInput.addEventListener('blrBlur', () => { + addLog('blr-number-input blurred'); +}); + +blrNumberInput.addEventListener('blrNumberValueChange', () => { + addLog('blr-number-input value changed'); +}); + blrTextArea.addEventListener('blrFocus', () => { addLog('blr-textarea focused'); }); diff --git a/packages/ui-library/src/components/number-input/index.stories.ts b/packages/ui-library/src/components/number-input/index.stories.ts index 01dfe8c40..f3113b1f2 100644 --- a/packages/ui-library/src/components/number-input/index.stories.ts +++ b/packages/ui-library/src/components/number-input/index.stories.ts @@ -20,7 +20,7 @@ const sharedStyles = html` const defaultParams: BlrNumberInputType = { theme: 'Light', - size: 'md', + sizeVariant: 'md', stepperVariant: 'vertical', placeholder: 'Placeholder-text', value: undefined, @@ -64,9 +64,9 @@ export default { category: 'Appearance', }, }, - size: { + sizeVariant: { name: 'sizeVariant', - description: ' Choose size of the component. ', + description: ' Choose sizeVariant of the component. ', options: FormSizes, control: { type: 'radio' }, table: { @@ -285,37 +285,47 @@ export default { }, control: { type: 'text', label: 'Number Input' }, }, - onChange: { - name: 'onChange', + //Events + blrNumberValueChange: { + name: 'blrNumberValueChange', description: 'Fires when the value changes.', - action: 'onChange', + action: 'blrNumberValueChange', table: { disable: false, category: 'Events', }, }, - onSelect: { - name: 'onSelect', + blrSelect: { + name: 'blrSelect', description: 'Fires when some text is selected.', - action: 'onSelect', + action: 'blrSelect', table: { disable: false, category: 'Events', }, }, - onFocus: { - name: 'onFocus', + blrFocus: { + name: 'blrFocus', description: 'Fires when the component is focused.', - action: 'onFocus', + action: 'blrFocus', table: { disable: false, category: 'Events', }, }, - onBlur: { - name: 'onBlur', + blrBlur: { + name: 'blrBlur', description: 'Fires when the component lost focus.', - action: 'onBlur', + action: 'blrBlur', + table: { + disable: false, + category: 'Events', + }, + }, + blrNumberStepperClick: { + name: 'blrNumberStepperClick', + description: 'Fires when one of the stepper buttons is clicked.', + action: 'blrNumberStepperClick', table: { disable: false, category: 'Events', @@ -352,7 +362,7 @@ export default { component: ` Number Input allows users to enter numbers into a designated area. Users can interact with the Number Input component by clicking or tapping on it, which activates it for text entry. It often displays a blinking cursor to indicate the current number insertion point. - [**Appearance**](#appearance) - - [**Size Variant**](#size-variant) + - [**SizeVariant**](#sizeVariant) - [**Stepper Variant**](#stepper-variant) - [**Content / Settings**](#content--settings) - [**Placeholder**](#placeholder) @@ -377,17 +387,17 @@ export const NumberInput = (params: BlrNumberInputType) => BlrNumberInputRenderF /** * ## Appearance - * ### Size Variant + * ### Size * The Number Input component comes in 3 sizes: SM, MD and LG. */ -export const SizeVariant = (params: BlrNumberInputType) => { +export const Size = (params: BlrNumberInputType) => { return html` ${sharedStyles}
${BlrNumberInputRenderFunction({ ...params, labelAppendix: undefined, - size: 'sm', + sizeVariant: 'sm', label: 'Number input SM', value: undefined, numberInputId: 'test-sm', @@ -397,7 +407,7 @@ export const SizeVariant = (params: BlrNumberInputType) => { ${BlrNumberInputRenderFunction({ ...params, labelAppendix: undefined, - size: 'md', + sizeVariant: 'md', label: 'Number input MD', value: undefined, numberInputId: 'test-md', @@ -407,7 +417,7 @@ export const SizeVariant = (params: BlrNumberInputType) => { ${BlrNumberInputRenderFunction({ ...params, labelAppendix: undefined, - size: 'lg', + sizeVariant: 'lg', label: 'Number input LG', value: undefined, numberInputId: 'test-lg', @@ -416,7 +426,7 @@ export const SizeVariant = (params: BlrNumberInputType) => { `; }; -SizeVariant.story = { name: ' ' }; +Size.story = { name: ' ' }; /** The Number Input component has 3 stepper variants: vertical, horizontal and split. @@ -470,7 +480,7 @@ export const Placeholder = (params: BlrNumberInputType) => {
${BlrNumberInputRenderFunction({ ...params, - size: 'md', + sizeVariant: 'md', label: 'With placeholder', labelAppendix: undefined, value: undefined, @@ -480,7 +490,7 @@ export const Placeholder = (params: BlrNumberInputType) => {
${BlrNumberInputRenderFunction({ ...params, - size: 'md', + sizeVariant: 'md', label: 'Without placeholder', labelAppendix: undefined, placeholder: '', diff --git a/packages/ui-library/src/components/number-input/index.test.ts b/packages/ui-library/src/components/number-input/index.test.ts index 3f51ba779..1dc57d539 100644 --- a/packages/ui-library/src/components/number-input/index.test.ts +++ b/packages/ui-library/src/components/number-input/index.test.ts @@ -3,9 +3,10 @@ import '@boiler/ui-library/dist/'; import { BlrNumberInputRenderFunction } from './renderFunction'; import type { BlrNumberInputType } from '.'; -import { fixture, expect, nextFrame } from '@open-wc/testing'; +import { fixture, expect, nextFrame, oneEvent } from '@open-wc/testing'; import { querySelectorAllDeep, querySelectorDeep } from 'query-selector-shadow-dom'; import { getRandomString } from '../../utils/get-random.string'; +import { BlrFocusEvent } from '../../globals/events'; const sampleParams: BlrNumberInputType = { placeholder: 'Type your message here ..', @@ -95,7 +96,7 @@ describe('blr-number-input', () => { expect(errorClassName).to.contain('error'); }); - it('has a size md by default', async () => { + it('has a sizeVariant md by default', async () => { const element = await fixture(BlrNumberInputRenderFunction(sampleParams)); const numberInputWrapper = querySelectorDeep('.input-wrapper', element.getRootNode() as HTMLElement); @@ -104,8 +105,8 @@ describe('blr-number-input', () => { expect(className).to.contain('md'); }); - it('has a size sm when "size" is set to "sm" ', async () => { - const element = await fixture(BlrNumberInputRenderFunction({ ...sampleParams, size: 'sm' })); + it('has a sizeVariant sm when "sizeVariant" is set to "sm" ', async () => { + const element = await fixture(BlrNumberInputRenderFunction({ ...sampleParams, sizeVariant: 'sm' })); const numberInputWrapper = querySelectorDeep('.input-wrapper', element.getRootNode() as HTMLElement); const className = numberInputWrapper?.className; @@ -176,4 +177,29 @@ describe('blr-number-input', () => { // Clicking the stepper button with the decrease label decreases the value by our chosen step (6 - 5 = 1) }); } + + it('fires blrFocus and blrBlur events', async () => { + const element = await fixture( + BlrNumberInputRenderFunction({ + ...sampleParams, + }) + ); + + const input = querySelectorDeep('input', element.getRootNode() as HTMLElement); + + setTimeout(() => { + input!.focus(); + }); + const focusEvent: BlrFocusEvent = await oneEvent(element, 'blrFocus'); + expect(focusEvent.detail.originalEvent).to.exist; + + // just finding something else to focus instead, it's not important what + const stepper = querySelectorDeep('button', element.getRootNode() as HTMLElement); + + setTimeout(() => { + stepper!.focus(); + }); + const blurEvent: BlrFocusEvent = await oneEvent(element, 'blrBlur'); + expect(blurEvent.detail.originalEvent).to.exist; + }); }); diff --git a/packages/ui-library/src/components/number-input/index.ts b/packages/ui-library/src/components/number-input/index.ts index fe896628b..96103b761 100644 --- a/packages/ui-library/src/components/number-input/index.ts +++ b/packages/ui-library/src/components/number-input/index.ts @@ -14,63 +14,125 @@ import { BlrFormCaptionGroupRenderFunction } from '../form-caption-group/renderF import { BlrFormCaptionRenderFunction } from '../form-caption/renderFunction'; import { BlrFormLabelRenderFunction } from '../form-label/renderFunction'; import { BlrIconRenderFunction } from '../icon/renderFunction'; +import { + BlrBlurEvent, + BlrFocusEvent, + BlrNumberStepperClickEvent, + BlrNumberValueChangeEvent, + BlrSelectEvent, + createBlrBlurEvent, + createBlrFocusEvent, + createBlrNumberStepperClickEvent, + createBlrNumberValueChangeEvent, + createBlrSelectEvent, +} from '../../globals/events'; +export type BlrNumberInputEventListeners = { + blrFocus?: (event: BlrFocusEvent) => void; + blrBlur?: (event: BlrBlurEvent) => void; + blrNumberValueChange?: (event: BlrNumberValueChangeEvent) => void; + blrSelect?: (event: BlrSelectEvent) => void; + blrNumberStepperClick?: (event: BlrNumberStepperClickEvent) => void; +}; + +/** + * @fires blrFocus NumberInput received focus + * @fires blrBlur NumberInput lost focus + * @fires blrNumberValueChange NumberInput value changed + * @fires blrSelect Text in NumberInput was selected + * @fires blrNumberStepperClick Step button was clicked + */ export class BlrNumberInput extends LitElement { static styles = [baseStyle]; @query('input') protected _numberFieldNode!: HTMLInputElement; - @property() numberInputId!: string; - @property() stepperVariant: 'split' | 'horizontal' | 'vertical' = 'split'; - @property() label!: string; - @property() disabled?: boolean; - @property() placeholder?: string; - @property() readonly?: boolean; - @property() required?: boolean; - @property() hasLabel?: boolean; - @property() size?: FormSizesType = 'md'; - @property() labelAppendix?: string; - @property() hasError?: boolean; - @property() errorMessage?: string; - @property() errorIcon?: SizelessIconType; - @property() hasHint = true; - @property() hintMessage?: string; - @property() hintIcon?: SizelessIconType; - @property() value?: number; - @property() step?: number; - @property() unit?: string; - @property() leadingZeros?: number; - @property() decimals?: number; - @property() prependUnit?: boolean; - @property() stepIncreaseAriaLabel?: string = '+'; - @property() stepDecreaseAriaLabel?: string = '\u2212'; // minus-sign (not minus-hyphen) - - @property() theme: ThemeType = 'Light'; + @property({ type: String }) numberInputId!: string; + @property({ type: String }) stepperVariant: 'split' | 'horizontal' | 'vertical' = 'split'; + @property({ type: String }) label!: string; + @property({ type: Boolean }) disabled?: boolean; + @property({ type: String }) placeholder?: string; + @property({ type: Boolean }) readonly?: boolean; + @property({ type: Boolean }) required?: boolean; + @property({ type: Boolean }) hasLabel?: boolean; + @property({ type: String }) sizeVariant?: FormSizesType = 'md'; + @property({ type: String }) labelAppendix?: string; + @property({ type: Boolean }) hasError?: boolean; + @property({ type: String }) errorMessage?: string; + @property({ type: String }) errorIcon?: SizelessIconType; + @property({ type: Boolean }) hasHint = true; + @property({ type: String }) hintMessage?: string; + @property({ type: String }) hintIcon?: SizelessIconType; + @property({ type: Number }) value?: number; + @property({ type: Number }) step?: number; + @property({ type: String }) unit?: string; + @property({ type: Number }) leadingZeros?: number; + @property({ type: Number }) decimals?: number; + @property({ type: Boolean }) prependUnit?: boolean; + @property({ type: String }) stepIncreaseAriaLabel?: string = '+'; + @property({ type: String }) stepDecreaseAriaLabel?: string = '\u2212'; // minus-sign (not minus-hyphen) + + @property({ type: String }) theme: ThemeType = 'Light'; @state() protected currentValue = 0; + @state() protected isFocused = false; - protected stepperUp() { + protected stepperUp(event: MouseEvent) { if (this.currentValue !== undefined && this.step !== undefined) { - this.currentValue += Number(this.step); + const oldValue = this.currentValue; + const step = this.step ?? 1; + const newValue = oldValue + step; + this.currentValue = newValue; + this.dispatchEvent(createBlrNumberValueChangeEvent({ originalEvent: event, oldValue, newValue })); + this.dispatchEvent(createBlrNumberStepperClickEvent({ originalEvent: event, direction: 'increase', step })); this.requestUpdate('currentValue'); } } - protected stepperDown() { + protected stepperDown(event: MouseEvent) { if (this.currentValue !== undefined && this.step !== undefined) { - this.currentValue -= Number(this.step); + const oldValue = this.currentValue; + const step = this.step ?? 1; + const newValue = oldValue - step; + this.currentValue = newValue; + this.dispatchEvent(createBlrNumberValueChangeEvent({ originalEvent: event, oldValue, newValue })); + this.dispatchEvent(createBlrNumberStepperClickEvent({ originalEvent: event, direction: 'decrease', step })); this.requestUpdate('currentValue'); } } connectedCallback() { super.connectedCallback(); - this.currentValue = Number(this.currentValue) || Number(this.value) || 0; + + this.currentValue = this.currentValue || this.value || 0; } - protected handleChange() { - this.currentValue = Number(this._numberFieldNode.value) || 0; + protected handleFocus = (event: FocusEvent) => { + if (!this.disabled) { + this.isFocused = true; + this.dispatchEvent(createBlrFocusEvent({ originalEvent: event })); + } + }; + + protected handleBlur = (event: FocusEvent) => { + if (!this.disabled) { + this.isFocused = false; + this.dispatchEvent(createBlrBlurEvent({ originalEvent: event })); + } + }; + + protected handleSelect = (event: Event) => { + if (!this.disabled) { + this.dispatchEvent(createBlrSelectEvent({ originalEvent: event })); + } + }; + + protected handleChange(event: Event) { + const oldValue = this.currentValue; + const newValue = Number(this._numberFieldNode.value) || 0; + this.currentValue = newValue; + this.dispatchEvent(createBlrNumberValueChangeEvent({ originalEvent: event, oldValue, newValue })); } protected customFormat(cur: number, fractions: number, digits: number): string { @@ -85,7 +147,7 @@ export class BlrNumberInput extends LitElement { } protected getStepperButtonTemplate(direction: 'increase' | 'decrease', icon: SizelessIconType): TemplateResult<1> { - if (!this.size) { + if (!this.sizeVariant) { return html``; } @@ -97,7 +159,7 @@ export class BlrNumberInput extends LitElement { 'StepperButton', 'Icon', 'SizeVariant', - this.size.toUpperCase(), + this.sizeVariant.toUpperCase(), ]).toLowerCase() as FormSizesType; const buttonClass = classMap({ @@ -143,7 +205,7 @@ export class BlrNumberInput extends LitElement { } case 'horizontal': { return html` -
+
${this.getStepperButtonTemplate('decrease', 'blrMinus')} ${BlrDividerRenderFunction({ direction: 'vertical', @@ -155,7 +217,7 @@ export class BlrNumberInput extends LitElement { } case 'vertical': { return html` -
+
${this.getStepperButtonTemplate('increase', 'blrChevronUp')} ${BlrDividerRenderFunction({ direction: 'horizontal', @@ -171,28 +233,28 @@ export class BlrNumberInput extends LitElement { protected render() { const hasUnit = this.unit !== undefined && this.unit.length > 0; - if (this.size) { + if (this.sizeVariant) { const dynamicStyles = this.theme === 'Light' ? [wrapperLight, actionLight, StepperComboLight] : [wrapperDark, actionDark, StepperComboDark]; const inputClasses = classMap({ - [this.size]: this.size, + [this.sizeVariant]: this.sizeVariant, prepend: hasUnit && !!this.prependUnit, }); const unitClasses = classMap({ unit: true, prepend: hasUnit && !!this.prependUnit, - [`${this.size}`]: this.size, + [`${this.sizeVariant}`]: this.sizeVariant, [this.stepperVariant || 'split']: this.stepperVariant || 'split', }); const wrapperClasses = classMap({ 'input-wrapper': true, 'disabled': this.disabled || false, - [`${this.size}`]: this.size, + [`${this.sizeVariant}`]: this.sizeVariant, [this.stepperVariant || 'split']: this.stepperVariant || 'split', 'error-input': this.hasError || false, 'prepend': hasUnit && !!this.prependUnit, @@ -202,7 +264,7 @@ export class BlrNumberInput extends LitElement { const inputAndUnitContainer = classMap({ 'input-unit-container': true, 'prepend': hasUnit && !!this.prependUnit, - [`${this.size}`]: this.size, + [`${this.sizeVariant}`]: this.sizeVariant, [this.stepperVariant || 'split']: this.stepperVariant || 'split', }); @@ -213,7 +275,7 @@ export class BlrNumberInput extends LitElement { ${BlrFormCaptionRenderFunction({ variant: 'hint', theme: this.theme, - size: this.size, + size: this.sizeVariant, message: this.hintMessage, icon: this.hintIcon, })} @@ -226,7 +288,7 @@ export class BlrNumberInput extends LitElement { ${BlrFormCaptionRenderFunction({ variant: 'error', theme: this.theme, - size: this.size, + size: this.sizeVariant, message: this.errorMessage, icon: this.errorIcon, })} @@ -239,13 +301,13 @@ export class BlrNumberInput extends LitElement { -
+
${this.hasLabel ? html`
${BlrFormLabelRenderFunction({ label: this.label, - sizeVariant: this.size, + sizeVariant: this.sizeVariant, labelAppendix: this.labelAppendix, forValue: this.numberInputId, theme: this.theme, @@ -269,6 +331,9 @@ export class BlrNumberInput extends LitElement { ?required="${this.required}" hasError="${this.hasError}" @change=${this.handleChange} + @blur=${this.handleBlur} + @focus=${this.handleFocus} + @select=${this.handleSelect} placeholder=${this.placeholder || nothing} /> ${hasUnit ? html`
${this.unit}
` : nothing} @@ -278,7 +343,7 @@ export class BlrNumberInput extends LitElement {
${this.hasHint || this.hasError - ? BlrFormCaptionGroupRenderFunction({ size: this.size }, captionContent) + ? BlrFormCaptionGroupRenderFunction({ size: this.sizeVariant }, captionContent) : nothing} `; } @@ -289,4 +354,4 @@ if (!customElements.get(TAG_NAME)) { customElements.define(TAG_NAME, BlrNumberInput); } -export type BlrNumberInputType = Omit; +export type BlrNumberInputType = Omit & BlrNumberInputEventListeners; diff --git a/packages/ui-library/src/globals/events.ts b/packages/ui-library/src/globals/events.ts index 5de65d708..6b1f0f576 100644 --- a/packages/ui-library/src/globals/events.ts +++ b/packages/ui-library/src/globals/events.ts @@ -25,6 +25,17 @@ export function createBlrClickEvent(detail: BlrClickEventDetail): BlrClickEvent return new CustomEvent(BlrClickEventName, { bubbles: true, composed: true, detail }); } +export type BlrNumberStepperClickEventDetail = { + originalEvent: MouseEvent | KeyboardEvent; + direction: 'increase' | 'decrease'; + step: number; +}; +export type BlrNumberStepperClickEvent = CustomEvent; +export const BlrNumberStepperClickEventName = 'blrNumberStepperClick'; +export function createBlrNumberStepperClickEvent(detail: BlrNumberStepperClickEventDetail): BlrNumberStepperClickEvent { + return new CustomEvent(BlrNumberStepperClickEventName, { bubbles: true, composed: true, detail }); +} + export type BlrSelectEventDetail = { originalEvent: Event; }; @@ -66,14 +77,27 @@ export function createBlrTextValueChangeEvent(detail: BlrTextValueChangeEventDet return new CustomEvent(BlrTextValueChangeEventName, { bubbles: true, composed: true, detail }); } +export type BlrNumberValueChangeEventDetail = { + originalEvent: Event; + oldValue: number; + newValue: number; +}; +export type BlrNumberValueChangeEvent = CustomEvent; +export const BlrNumberValueChangeEventName = 'blrNumberValueChange'; +export function createBlrNumberValueChangeEvent(detail: BlrNumberValueChangeEventDetail): BlrNumberValueChangeEvent { + return new CustomEvent(BlrNumberValueChangeEventName, { bubbles: true, composed: true, detail }); +} + declare global { interface GlobalEventHandlersEventMap { [BlrFocusEventName]: BlrFocusEvent; [BlrBlurEventName]: BlrBlurEvent; [BlrClickEventName]: BlrClickEvent; + [BlrNumberStepperClickEventName]: BlrNumberStepperClickEvent; + [BlrSelectEventName]: BlrSelectEvent; [BlrCheckedChangeEventName]: BlrCheckedChangeEvent; [BlrSelectedValueChangeEventName]: BlrSelectedValueChangeEvent; [BlrTextValueChangeEventName]: BlrTextValueChangeEvent; - [BlrSelectEventName]: BlrSelectEvent; + [BlrNumberValueChangeEventName]: BlrNumberValueChangeEvent; } } From 97c412ed4204bf4a82efb9092dc21f64b07fa709 Mon Sep 17 00:00:00 2001 From: JpunktWpunkt Date: Mon, 4 Mar 2024 17:22:52 +0100 Subject: [PATCH 2/3] fix(ui-library): chore storybook file --- .../components/number-input/index.stories.ts | 33 ------------------- 1 file changed, 33 deletions(-) diff --git a/packages/ui-library/src/components/number-input/index.stories.ts b/packages/ui-library/src/components/number-input/index.stories.ts index f3113b1f2..22abb6704 100644 --- a/packages/ui-library/src/components/number-input/index.stories.ts +++ b/packages/ui-library/src/components/number-input/index.stories.ts @@ -5,7 +5,6 @@ import { FormSizes, Units } from '../../globals/constants'; import { Themes } from '../../foundation/_tokens-generated/index.themes'; import { PureIconKeys } from '@boiler/icons/icons-optimized'; import { html } from 'lit-html'; -import { action } from '@storybook/addon-actions'; // this loads the all components instances and registers their html tags import '../../index'; @@ -51,10 +50,6 @@ export default { args: { ...defaultParams, name: 'NumberInput', - onChange: () => action('onChange'), - onSelect: () => action('onSelect'), - onFocus: () => action('onFocus'), - onBlur: () => action('onBlur'), }, argTypes: { theme: { @@ -65,7 +60,6 @@ export default { }, }, sizeVariant: { - name: 'sizeVariant', description: ' Choose sizeVariant of the component. ', options: FormSizes, control: { type: 'radio' }, @@ -74,7 +68,6 @@ export default { }, }, stepperVariant: { - name: 'stepperVariant', description: 'Choose stepperVariant of the stepper that is used in the component.', options: ['vertical', 'horizontal', 'split'], control: { @@ -90,7 +83,6 @@ export default { }, }, placeholder: { - name: 'placeholder', description: 'Enter string used as placeholder text.', defaultValue: 'Placeholder-text', table: { @@ -98,7 +90,6 @@ export default { }, }, value: { - name: 'value', description: 'Enter the value the component should have.', table: { category: 'Content / Settings', @@ -109,7 +100,6 @@ export default { }, }, decimals: { - name: 'decimals', description: 'Enter how many decimals the value of the component has.', table: { category: 'Content / Settings', @@ -119,7 +109,6 @@ export default { }, }, leadingZeros: { - name: 'leadingZeros', description: 'Enter how many leading zeros the value of the component has.', table: { category: 'Content / Settings', @@ -129,14 +118,12 @@ export default { }, }, prependUnit: { - name: 'prependUnit', description: 'Choose if unit is displayed as a prefix or suffix.', table: { category: 'Content / Settings', }, }, unit: { - name: 'unit', description: 'Select a unit which is displayed next to the input.', options: [undefined, ...Units], control: { @@ -147,7 +134,6 @@ export default { }, }, step: { - name: 'step', description: 'Enter how much the value should change when the stepper buttons are used.', control: { type: 'number', @@ -158,7 +144,6 @@ export default { }, hasLabel: { - name: 'hasLabel', description: 'Choose if component has a label.', defaultValue: true, control: { type: 'boolean' }, @@ -167,7 +152,6 @@ export default { }, }, label: { - name: 'label', description: 'Enter string used as label text.', control: { type: 'text', @@ -178,7 +162,6 @@ export default { if: { arg: 'hasLabel', eq: true }, }, labelAppendix: { - name: 'labelAppendix', description: 'Enter string used as an appendix to the label. Use this to inform the user in case this field is required.', control: { @@ -190,7 +173,6 @@ export default { if: { arg: 'hasLabel', eq: true }, }, hasHint: { - name: 'hasHint', description: ' Choose if component has a hint message. ', defaultValue: true, control: { @@ -218,7 +200,6 @@ export default { }, }, disabled: { - name: 'disabled', description: 'Choose if component is disabled. Prevents the user to select or change the value of this component. ', defaultValue: false, @@ -227,7 +208,6 @@ export default { }, }, readonly: { - name: 'readonly', description: 'Choose if component is readonly. The user can select but not change the value of this component.', defaultValue: false, table: { @@ -236,7 +216,6 @@ export default { }, // Validation required: { - name: 'required', description: 'Choose if the component must hold a value after an interaction or a submit.', defaultValue: false, table: { @@ -244,7 +223,6 @@ export default { }, }, hasError: { - name: 'hasError', description: 'Choose if component has an error.', defaultValue: false, table: { @@ -252,7 +230,6 @@ export default { }, }, errorMessage: { - name: 'errorMessage', description: 'Enter string used used as error message.', table: { category: 'Validations', @@ -271,14 +248,12 @@ export default { }, //Technical attributes numberInputId: { - name: 'numberInputId', description: 'Unique identifier for this component.', table: { category: 'Technical Attributes', }, }, name: { - name: 'name', description: 'For a < form > element, the name attribute is used as a reference when the data is submitted.', table: { category: 'Technical Attributes', @@ -287,11 +262,9 @@ export default { }, //Events blrNumberValueChange: { - name: 'blrNumberValueChange', description: 'Fires when the value changes.', action: 'blrNumberValueChange', table: { - disable: false, category: 'Events', }, }, @@ -300,7 +273,6 @@ export default { description: 'Fires when some text is selected.', action: 'blrSelect', table: { - disable: false, category: 'Events', }, }, @@ -309,7 +281,6 @@ export default { description: 'Fires when the component is focused.', action: 'blrFocus', table: { - disable: false, category: 'Events', }, }, @@ -318,7 +289,6 @@ export default { description: 'Fires when the component lost focus.', action: 'blrBlur', table: { - disable: false, category: 'Events', }, }, @@ -327,13 +297,11 @@ export default { description: 'Fires when one of the stepper buttons is clicked.', action: 'blrNumberStepperClick', table: { - disable: false, category: 'Events', }, }, // Accessibility attributes stepIncreaseAriaLabel: { - name: 'stepIncreaseAriaLabel', description: 'Labels the "up" or increase stepper button to assistive technologies, such as screen readers.', table: { category: 'Accessibility', @@ -341,7 +309,6 @@ export default { control: { type: 'text', defaultValue: '+' }, }, stepDecreaseAriaLabel: { - name: 'stepDecreaseAriaLabel', description: 'Labels the "down" or decrease stepper button to assistive technologies, such as screen readers.\nNote that the default value is not a hyphen (-) but the minus sign \\u2212 (\u2212).', table: { From 7e53d4e213c17ed367c23bf573ba7fa60bd03720 Mon Sep 17 00:00:00 2001 From: JpunktWpunkt Date: Tue, 5 Mar 2024 08:34:38 +0100 Subject: [PATCH 3/3] fix(ui-library): solved lit issues --- packages/ui-library/src/components/number-input/index.ts | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/ui-library/src/components/number-input/index.ts b/packages/ui-library/src/components/number-input/index.ts index 74c97e7f4..abeed7870 100644 --- a/packages/ui-library/src/components/number-input/index.ts +++ b/packages/ui-library/src/components/number-input/index.ts @@ -323,19 +323,18 @@ export class BlrNumberInput extends LitElement { id="${this.numberInputId}" class="${inputClasses}" type="number" - .value=${this.currentValue != 0 + .value=${this.currentValue || '' ? this.customFormat(this.currentValue || 0, this.decimals || 0, this.leadingZeros || 0) - : nothing} - step="${this.step || nothing}" + : ''} + step="${this.step || ''}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" - hasError="${this.hasError}" @change=${this.handleChange} @blur=${this.handleBlur} @focus=${this.handleFocus} @select=${this.handleSelect} - placeholder=${this.placeholder || nothing} + placeholder=${this.placeholder || ''} /> ${hasUnit ? html`
${this.unit}
` : nothing}