Skip to content

Commit

Permalink
addes shortkey for select, single-select and textarea
Browse files Browse the repository at this point in the history 
Refs: #6251
  • Loading branch information
@AlexanderSchmidtCE
AlexanderSchmidtCE committed Oct 24, 2024
1 parent 3b214d2 commit 2cc4a30
Show file tree
Hide file tree
Showing 9 changed files with 67 additions and 66 deletions.
1 change: 1 addition & 0 deletions packages/components/src/components/select/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,7 @@ import { xxx..., xxx..., FormatHandler, } from '@leanup/form';
| `_options` | `_options` | Options the user can choose from, also supporting Optgroup. | `(Option<StencilUnknown> \| Optgroup<StencilUnknown>)[] \| string \| undefined` | `undefined` |
| `_required` | `_required` | Makes the input element required. | `boolean \| undefined` | `false` |
| `_rows` | `_rows` | Defines how many rows of options should be visible at the same time. | `number \| undefined` | `undefined` |
| `_shortKey` | `_short-key` | Defines the elements short key. | `string \| undefined` | `undefined` |
| `_tabIndex` | `_tab-index` | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | `number \| undefined` | `undefined` |
| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `"bottom" \| "left" \| "right" \| "top" \| undefined` | `'top'` |
| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \| undefined` | `false` |
Expand Down
31 changes: 13 additions & 18 deletions packages/components/src/components/select/shadow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,19 +14,18 @@ import type {
SelectAPI,
SelectOption,
SelectStates,
ShortKeyPropType,
Stringified,
SyncValueBySelectorPropType,
TooltipAlignPropType,
W3CInputValue,
} from '../../schema';
import { showExpertSlot } from '../../schema';
import type { JSX } from '@stencil/core';
import { Component, Element, Fragment, h, Host, Method, Prop, State, Watch } from '@stencil/core';
import { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';

import { nonce } from '../../utils/dev.utils';
import { stopPropagation, tryToDispatchKoliBriEvent } from '../../utils/events';
import { getRenderStates } from '../input/controller';
import { InternalUnderlinedBadgeText } from '../span/InternalUnderlinedBadgeText';
import { SelectController } from './controller';
import { KolInputWcTag } from '../../core/component-names';
import { propagateSubmitEventToForm } from '../form/controller';
Expand Down Expand Up @@ -100,7 +99,6 @@ export class KolSelect implements SelectAPI, FocusableElement {

public render(): JSX.Element {
const { ariaDescribedBy } = getRenderStates(this.state);
const hasExpertSlot = showExpertSlot(this.state._label);

return (
<Host class={{ 'kol-select': true, 'has-value': this.state._hasValue }}>
Expand All @@ -119,25 +117,12 @@ export class KolSelect implements SelectAPI, FocusableElement {
_label={this.state._label}
_msg={this.state._msg}
_required={this.state._required}
_shortKey={this.state._shortKey}
_tooltipAlign={this._tooltipAlign}
_touched={this.state._touched}
onClick={() => this.selectRef?.focus()}
role={`presentation` /* Avoid element being read as 'clickable' in NVDA */}
>
<span slot="label">
{hasExpertSlot ? (
<slot name="expert"></slot>
) : typeof this.state._accessKey === 'string' ? (
<>
<InternalUnderlinedBadgeText badgeText={this.state._accessKey} label={this.state._label} />{' '}
<span class="access-key-hint" aria-hidden="true">
{this.state._accessKey}
</span>
</>
) : (
<span>{this.state._label}</span>
)}
</span>
<div slot="input">
<form
onSubmit={(event) => {
Expand Down Expand Up @@ -288,6 +273,11 @@ export class KolSelect implements SelectAPI, FocusableElement {
*/
@Prop() public _required?: boolean = false;

/**
* Defines the elements short key.
*/
@Prop() public _shortKey?: ShortKeyPropType;

/**
* Defines how many rows of options should be visible at the same time.
*/
Expand Down Expand Up @@ -419,6 +409,11 @@ export class KolSelect implements SelectAPI, FocusableElement {
this.controller.validateRows(value);
}

@Watch('_shortKey')
public validateShortKey(value?: ShortKeyPropType): void {
this.controller.validateShortKey(value);
}

@Watch('_syncValueBySelector')
public validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {
this.controller.validateSyncValueBySelector(value);
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/components/single-select/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ Beispiel für die Konstruktion des JSON-Objektes:
| `_options` _(required)_ | `_options` | Options the user can choose from. | `Option<StencilUnknown>[] \| string` | `undefined` |
| `_placeholder` | `_placeholder` | Defines the placeholder for input field. To be shown when there's no value. | `string \| undefined` | `undefined` |
| `_required` | `_required` | Makes the input element required. | `boolean \| undefined` | `false` |
| `_shortKey` | `_short-key` | Defines the elements short key. | `string \| undefined` | `undefined` |
| `_tabIndex` | `_tab-index` | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | `number \| undefined` | `undefined` |
| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `"bottom" \| "left" \| "right" \| "top" \| undefined` | `'top'` |
| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \| undefined` | `false` |
Expand Down
31 changes: 13 additions & 18 deletions packages/components/src/components/single-select/shadow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,21 +8,20 @@ import type {
NamePropType,
Option,
OptionsPropType,
ShortKeyPropType,
SingleSelectAPI,
SingleSelectStates,
Stringified,
SyncValueBySelectorPropType,
TooltipAlignPropType,
} from '../../schema';
import { showExpertSlot } from '../../schema';
import type { JSX } from '@stencil/core';
import { Component, Element, Fragment, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';
import { Component, Element, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';

import { nonce } from '../../utils/dev.utils';
import { stopPropagation, tryToDispatchKoliBriEvent } from '../../utils/events';
import { SingleSelectController } from './controller';
import { KolIconTag, KolInputWcTag } from '../../core/component-names';
import { InternalUnderlinedBadgeText } from '../span/InternalUnderlinedBadgeText';
import { getRenderStates } from '../input/controller';
import { translate } from '../../i18n';
import clsx from 'clsx';
Expand Down Expand Up @@ -172,7 +171,6 @@ export class KolSingleSelect implements SingleSelectAPI {
}

public render(): JSX.Element {
const hasExpertSlot = showExpertSlot(this.state._label);
const { ariaDescribedBy } = getRenderStates(this.state);

return (
Expand All @@ -189,24 +187,11 @@ export class KolSingleSelect implements SingleSelectAPI {
_label={this.state._label}
_msg={this.state._msg}
_required={this.state._required}
_shortKey={this.state._shortKey}
_tooltipAlign={this._tooltipAlign}
_touched={this.state._touched}
role={`presentation` /* Avoid element being read as 'clickable' in NVDA */}
>
<span slot="label">
{hasExpertSlot ? (
<slot name="expert"></slot>
) : typeof this.state._accessKey === 'string' ? (
<>
<InternalUnderlinedBadgeText badgeText={this.state._accessKey} label={this.state._label} />{' '}
<span class="access-key-hint" aria-hidden="true">
{this.state._accessKey}
</span>
</>
) : (
<span>{this.state._label}</span>
)}
</span>
<div slot="input">
<div class="single-select__group">
<input
Expand Down Expand Up @@ -506,6 +491,11 @@ export class KolSingleSelect implements SingleSelectAPI {
*/
@Prop() public _required?: boolean = false;

/**
* Defines the elements short key.
*/
@Prop() public _shortKey?: ShortKeyPropType;

/**
* Selector for synchronizing the value with another input element.
* @internal
Expand Down Expand Up @@ -622,6 +612,11 @@ export class KolSingleSelect implements SingleSelectAPI {
this.controller.validateRequired(value);
}

@Watch('_shortKey')
public validateShortKey(value?: ShortKeyPropType): void {
this.controller.validateShortKey(value);
}

@Watch('_syncValueBySelector')
public validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {
this.controller.validateSyncValueBySelector(value);
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/components/textarea/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@ Mit Hilfe des Attributs **`_rows`** kann die Höhe der Textarea in Zeilen bestim
| `_required` | `_required` | Makes the input element required. | `boolean \| undefined` | `false` |
| `_resize` | `_resize` | Defines whether and in which direction the size of the input can be changed by the user. (https://developer.mozilla.org/de/docs/Web/CSS/resize) In version 3 (v3), horizontal resizing is abolished. The corresponding property is then reduced to the properties `vertical` (default) and `none`. | `"both" \| "horizontal" \| "none" \| "vertical" \| undefined` | `'vertical'` |
| `_rows` | `_rows` | Defines how many rows of text should be visible at the same time. | `number \| undefined` | `undefined` |
| `_shortKey` | `_short-key` | Defines the elements short key. | `string \| undefined` | `undefined` |
| `_tabIndex` | `_tab-index` | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | `number \| undefined` | `undefined` |
| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `"bottom" \| "left" \| "right" \| "top" \| undefined` | `'top'` |
| `_touched` | `_touched` | Shows if the input was touched by a user. | `boolean \| undefined` | `false` |
Expand Down
Loading

0 comments on commit 2cc4a30

Please sign in to comment.