mirror of
https://github.com/bitwarden/browser.git
synced 2024-11-21 11:35:34 +01:00
[CL-221] Add chip-select component (#9021)
--------- Co-authored-by: William Martin <contact@willmartian.com>
This commit is contained in:
Victoria League
GitHub
parent
bbf1473022
commit
08a6f91411
@ -3229,7 +3229,37 @@
|
||||
"errorAssigningTargetFolder": {
|
||||
"message": "Error assigning target folder."
|
||||
},
|
||||
"viewItemsIn": {
|
||||
"message": "View items in $NAME$",
|
||||
"description": "Button to view the contents of a folder or collection",
|
||||
"placeholders": {
|
||||
"name": {
|
||||
"content": "$1",
|
||||
"example": "Work"
|
||||
}
|
||||
}
|
||||
},
|
||||
"backTo": {
|
||||
"message": "Back to $NAME$",
|
||||
"description": "Navigate back to a previous folder or collection",
|
||||
"placeholders": {
|
||||
"name": {
|
||||
"content": "$1",
|
||||
"example": "Work"
|
||||
}
|
||||
}
|
||||
},
|
||||
"new": {
|
||||
"message": "New"
|
||||
},
|
||||
"removeItem": {
|
||||
"message": "Remove $NAME$",
|
||||
"description": "Remove a selected option, such as a folder or collection",
|
||||
"placeholders": {
|
||||
"name": {
|
||||
"content": "$1",
|
||||
"example": "Work"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2822,5 +2822,39 @@
|
||||
},
|
||||
"errorAssigningTargetFolder": {
|
||||
"message": "Error assigning target folder."
|
||||
},
|
||||
"viewItemsIn": {
|
||||
"message": "View items in $NAME$",
|
||||
"description": "Button to view the contents of a folder or collection",
|
||||
"placeholders": {
|
||||
"name": {
|
||||
"content": "$1",
|
||||
"example": "Work"
|
||||
}
|
||||
}
|
||||
},
|
||||
"backTo": {
|
||||
"message": "Back to $NAME$",
|
||||
"description": "Navigate back to a previous folder or collection",
|
||||
"placeholders": {
|
||||
"name": {
|
||||
"content": "$1",
|
||||
"example": "Work"
|
||||
}
|
||||
}
|
||||
},
|
||||
"back": {
|
||||
"message": "Back",
|
||||
"description": "Button text to navigate back"
|
||||
},
|
||||
"removeItem": {
|
||||
"message": "Remove $NAME$",
|
||||
"description": "Remove a selected option, such as a folder or collection",
|
||||
"placeholders": {
|
||||
"name": {
|
||||
"content": "$1",
|
||||
"example": "Work"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -8199,6 +8199,40 @@
|
||||
"manageBillingFromProviderPortalMessage": {
|
||||
"message": "Manage billing from the Provider Portal"
|
||||
},
|
||||
"viewItemsIn": {
|
||||
"message": "View items in $NAME$",
|
||||
"description": "Button to view the contents of a folder or collection",
|
||||
"placeholders": {
|
||||
"name": {
|
||||
"content": "$1",
|
||||
"example": "Work"
|
||||
}
|
||||
}
|
||||
},
|
||||
"backTo": {
|
||||
"message": "Back to $NAME$",
|
||||
"description": "Navigate back to a previous folder or collection",
|
||||
"placeholders": {
|
||||
"name": {
|
||||
"content": "$1",
|
||||
"example": "Work"
|
||||
}
|
||||
}
|
||||
},
|
||||
"back": {
|
||||
"message": "Back",
|
||||
"description": "Button text to navigate back"
|
||||
},
|
||||
"removeItem": {
|
||||
"message": "Remove $NAME$",
|
||||
"description": "Remove a selected option, such as a folder or collection",
|
||||
"placeholders": {
|
||||
"name": {
|
||||
"content": "$1",
|
||||
"example": "Work"
|
||||
}
|
||||
}
|
||||
},
|
||||
"viewInfo": {
|
||||
"message": "View info"
|
||||
},
|
||||
|
||||
91
libs/components/src/chip-select/chip-select.component.html
Normal file
91
libs/components/src/chip-select/chip-select.component.html
Normal file
@ -0,0 +1,91 @@
|
||||
<div
|
||||
bitTypography="body2"
|
||||
class="tw-inline-flex tw-items-center tw-rounded-full tw-max-w-52 tw-border-solid tw-border tw-border-text-muted"
|
||||
[ngClass]="[
|
||||
selectedOption
|
||||
? 'tw-bg-text-muted tw-text-contrast tw-gap-1'
|
||||
: 'tw-bg-transparent tw-text-muted tw-gap-1.5',
|
||||
focusVisibleWithin() ? 'tw-ring-2 tw-ring-primary-500 tw-ring-offset-1' : ''
|
||||
]"
|
||||
>
|
||||
<!-- Primary button -->
|
||||
<button
|
||||
type="button"
|
||||
class="fvw-target tw-inline-flex tw-gap-1.5 tw-items-center tw-bg-transparent hover:tw-bg-transparent tw-border-none tw-outline-none tw-max-w-full tw-py-1 tw-pl-3 last:tw-pr-3 tw-truncate tw-text-[inherit]"
|
||||
[ngClass]="{
|
||||
'tw-cursor-not-allowed': disabled
|
||||
}"
|
||||
[bitMenuTriggerFor]="menu"
|
||||
[disabled]="disabled"
|
||||
[title]="label"
|
||||
#menuTrigger="menuTrigger"
|
||||
>
|
||||
<i class="bwi !tw-text-[inherit]" [ngClass]="icon"></i>
|
||||
<span class="tw-truncate">{{ label }}</span>
|
||||
<i
|
||||
*ngIf="!selectedOption"
|
||||
class="bwi"
|
||||
[ngClass]="menuTrigger.isOpen ? 'bwi-angle-up' : 'bwi-angle-down'"
|
||||
></i>
|
||||
</button>
|
||||
|
||||
<!-- Close button -->
|
||||
<button
|
||||
*ngIf="selectedOption"
|
||||
type="button"
|
||||
[attr.aria-label]="'removeItem' | i18n: label"
|
||||
[disabled]="disabled"
|
||||
class="tw-bg-transparent hover:tw-bg-transparent tw-outline-none tw-rounded-full tw-p-1 tw-my-1 tw-mr-1 tw-text-[inherit] tw-border-solid tw-border tw-border-text-muted hover:tw-border-text-contrast hover:disabled:tw-border-transparent tw-aspect-square tw-flex tw-items-center tw-justify-center tw-h-fit focus-visible:tw-ring-2 tw-ring-text-contrast focus-visible:hover:tw-border-transparent"
|
||||
[ngClass]="{
|
||||
'tw-cursor-not-allowed': disabled
|
||||
}"
|
||||
(click)="clear()"
|
||||
>
|
||||
<i class="bwi bwi-close tw-text-xs"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<bit-menu #menu>
|
||||
<div *ngIf="renderedOptions" class="tw-max-h-80 tw-min-w-52 tw-max-w-80 tw-text-sm">
|
||||
<ng-container *ngIf="getParent(renderedOptions) as parent">
|
||||
<button
|
||||
type="button"
|
||||
bitMenuItem
|
||||
(click)="viewOption(parent, $event)"
|
||||
[title]="parent.label ? ('backTo' | i18n: parent.label) : ('back' | i18n)"
|
||||
>
|
||||
<i slot="start" class="bwi bwi-angle-left" aria-hidden="true"></i>
|
||||
{{ parent.label ? ("backTo" | i18n: parent.label) : ("back" | i18n) }}
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
bitMenuItem
|
||||
(click)="selectOption(renderedOptions, $event)"
|
||||
[title]="'viewItemsIn' | i18n: renderedOptions.label"
|
||||
>
|
||||
<i slot="start" class="bwi bwi-list" aria-hidden="true"></i>
|
||||
{{ "viewItemsIn" | i18n: renderedOptions.label }}
|
||||
</button>
|
||||
</ng-container>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
bitMenuItem
|
||||
*ngFor="let option of renderedOptions.children"
|
||||
(click)="option.children?.length ? viewOption(option, $event) : selectOption(option, $event)"
|
||||
[disabled]="option.disabled"
|
||||
[title]="option.label"
|
||||
>
|
||||
<i
|
||||
*ngIf="option.icon"
|
||||
slot="start"
|
||||
class="bwi"
|
||||
[ngClass]="option.icon"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
{{ option.label }}
|
||||
<i *ngIf="option.children?.length" slot="end" class="bwi bwi-angle-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
</bit-menu>
|
||||
197
libs/components/src/chip-select/chip-select.component.ts
Normal file
197
libs/components/src/chip-select/chip-select.component.ts
Normal file
@ -0,0 +1,197 @@
|
||||
import { Component, HostListener, Input, booleanAttribute, signal } from "@angular/core";
|
||||
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
|
||||
|
||||
import { ButtonModule } from "../button";
|
||||
import { IconButtonModule } from "../icon-button";
|
||||
import { MenuModule } from "../menu";
|
||||
import { Option } from "../select/option";
|
||||
import { SharedModule } from "../shared";
|
||||
import { TypographyModule } from "../typography";
|
||||
|
||||
/** An option that will be showed in the overlay menu of `ChipSelectComponent` */
|
||||
export type ChipSelectOption<T> = Option<T> & {
|
||||
/** The options that will be nested under this option */
|
||||
children?: ChipSelectOption<T>[];
|
||||
};
|
||||
|
||||
@Component({
|
||||
selector: "bit-chip-select",
|
||||
templateUrl: "chip-select.component.html",
|
||||
standalone: true,
|
||||
imports: [SharedModule, ButtonModule, IconButtonModule, MenuModule, TypographyModule],
|
||||
providers: [
|
||||
{
|
||||
provide: NG_VALUE_ACCESSOR,
|
||||
useExisting: ChipSelectComponent,
|
||||
multi: true,
|
||||
},
|
||||
],
|
||||
})
|
||||
export class ChipSelectComponent<T = unknown> implements ControlValueAccessor {
|
||||
/** Text to show when there is no selected option */
|
||||
@Input({ required: true }) placeholderText: string;
|
||||
|
||||
/** Icon to show when there is no selected option or the selected option does not have an icon */
|
||||
@Input() placeholderIcon: string;
|
||||
|
||||
private _options: ChipSelectOption<T>[];
|
||||
/** The select options to render */
|
||||
@Input({ required: true })
|
||||
get options(): ChipSelectOption<T>[] {
|
||||
return this._options;
|
||||
}
|
||||
set options(value: ChipSelectOption<T>[]) {
|
||||
this._options = value;
|
||||
this.initializeRootTree(value);
|
||||
}
|
||||
|
||||
/** Disables the entire chip */
|
||||
@Input({ transform: booleanAttribute }) disabled = false;
|
||||
|
||||
/**
|
||||
* We have `:focus-within` and `:focus-visible` but no `:focus-visible-within`
|
||||
*/
|
||||
protected focusVisibleWithin = signal(false);
|
||||
@HostListener("focusin", ["$event.target"])
|
||||
onFocusIn(target: HTMLElement) {
|
||||
this.focusVisibleWithin.set(target.matches(".fvw-target:focus-visible"));
|
||||
}
|
||||
@HostListener("focusout")
|
||||
onFocusOut() {
|
||||
this.focusVisibleWithin.set(false);
|
||||
}
|
||||
|
||||
/** Tree constructed from `this.options` */
|
||||
private rootTree: ChipSelectOption<T>;
|
||||
|
||||
/** Options that are currently displayed in the menu */
|
||||
protected renderedOptions: ChipSelectOption<T>;
|
||||
|
||||
/** The option that is currently selected by the user */
|
||||
protected selectedOption: ChipSelectOption<T>;
|
||||
|
||||
/** The label to show in the chip button */
|
||||
protected get label(): string {
|
||||
return this.selectedOption?.label || this.placeholderText;
|
||||
}
|
||||
|
||||
/** The icon to show in the chip button */
|
||||
protected get icon(): string {
|
||||
return this.selectedOption?.icon || this.placeholderIcon;
|
||||
}
|
||||
|
||||
protected selectOption(option: ChipSelectOption<T>, _event: MouseEvent) {
|
||||
this.selectedOption = option;
|
||||
this.onChange(option);
|
||||
}
|
||||
|
||||
protected viewOption(option: ChipSelectOption<T>, event: MouseEvent) {
|
||||
this.renderedOptions = option;
|
||||
|
||||
/** We don't want the menu to close */
|
||||
event.preventDefault();
|
||||
event.stopImmediatePropagation();
|
||||
}
|
||||
|
||||
/** Click handler for the X button */
|
||||
protected clear() {
|
||||
this.renderedOptions = this.rootTree;
|
||||
this.selectedOption = null;
|
||||
this.onChange(null);
|
||||
}
|
||||
|
||||
/**
|
||||
* Find a `ChipSelectOption` by its value
|
||||
* @param tree the root tree to search
|
||||
* @param value the option value to look for
|
||||
* @returns the `ChipSelectOption` associated with the provided value, or null if not found
|
||||
*/
|
||||
private findOption(tree: ChipSelectOption<T>, value: T): ChipSelectOption<T> | null {
|
||||
let result = null;
|
||||
if (tree.value === value) {
|
||||
return tree;
|
||||
}
|
||||
|
||||
if (Array.isArray(tree.children) && tree.children.length > 0) {
|
||||
tree.children.some((node) => {
|
||||
result = this.findOption(node, value);
|
||||
return result;
|
||||
});
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
/** Maps child options to their parent, to enable navigating up the tree */
|
||||
private childParentMap = new Map<ChipSelectOption<T>, ChipSelectOption<T>>();
|
||||
|
||||
/** For each descendant in the provided `tree`, update `_parent` to be a refrence to the parent node. This allows us to navigate back in the menu. */
|
||||
private markParents(tree: ChipSelectOption<T>) {
|
||||
tree.children?.forEach((child) => {
|
||||
this.childParentMap.set(child, tree);
|
||||
this.markParents(child);
|
||||
});
|
||||
}
|
||||
|
||||
protected getParent(option: ChipSelectOption<T>): ChipSelectOption<T> | null {
|
||||
return this.childParentMap.get(option);
|
||||
}
|
||||
|
||||
private initializeRootTree(options: ChipSelectOption<T>[]) {
|
||||
/** Since the component is just initialized with an array of options, we need to construct the root tree. */
|
||||
const root: ChipSelectOption<T> = {
|
||||
children: options,
|
||||
value: null,
|
||||
};
|
||||
this.markParents(root);
|
||||
this.rootTree = root;
|
||||
this.renderedOptions = this.rootTree;
|
||||
}
|
||||
|
||||
/** Control Value Accessor */
|
||||
|
||||
private notifyOnChange?: (value: T) => void;
|
||||
private notifyOnTouched?: () => void;
|
||||
|
||||
/** Implemented as part of NG_VALUE_ACCESSOR */
|
||||
writeValue(obj: T): void {
|
||||
this.selectedOption = this.findOption(this.rootTree, obj);
|
||||
|
||||
/** Update the rendered options for next time the menu is opened */
|
||||
this.renderedOptions = this.selectedOption
|
||||
? this.getParent(this.selectedOption)
|
||||
: this.rootTree;
|
||||
}
|
||||
|
||||
/** Implemented as part of NG_VALUE_ACCESSOR */
|
||||
registerOnChange(fn: (value: T) => void): void {
|
||||
this.notifyOnChange = fn;
|
||||
}
|
||||
|
||||
/** Implemented as part of NG_VALUE_ACCESSOR */
|
||||
registerOnTouched(fn: any): void {
|
||||
this.notifyOnTouched = fn;
|
||||
}
|
||||
|
||||
/** Implemented as part of NG_VALUE_ACCESSOR */
|
||||
setDisabledState(isDisabled: boolean): void {
|
||||
this.disabled = isDisabled;
|
||||
}
|
||||
|
||||
/** Implemented as part of NG_VALUE_ACCESSOR */
|
||||
protected onChange(option: Option<T> | null) {
|
||||
if (!this.notifyOnChange) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.notifyOnChange(option?.value);
|
||||
}
|
||||
|
||||
/** Implemented as part of NG_VALUE_ACCESSOR */
|
||||
protected onBlur() {
|
||||
if (!this.notifyOnTouched) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.notifyOnTouched();
|
||||
}
|
||||
}
|
||||
113
libs/components/src/chip-select/chip-select.mdx
Normal file
113
libs/components/src/chip-select/chip-select.mdx
Normal file
@ -0,0 +1,113 @@
|
||||
import { Meta, Story, Primary, Controls, Canvas } from "@storybook/addon-docs";
|
||||
|
||||
import * as stories from "./chip-select.stories";
|
||||
|
||||
<Meta of={stories} />
|
||||
|
||||
```ts
|
||||
import { ChipSelectComponent } from "@bitwarden/components";
|
||||
```
|
||||
|
||||
# Chip Select
|
||||
|
||||
`<bit-chip-select>` is a select element that is commonly used to filter items in lists or tables.
|
||||
|
||||
<Canvas>
|
||||
<Story of={stories.Default} />
|
||||
</Canvas>
|
||||
|
||||
## Options
|
||||
|
||||
Options are passed to the select via an `options` input.
|
||||
|
||||
```ts
|
||||
@Component({
|
||||
selector: `
|
||||
<bit-chip-select options=[options]></bit-chip-select>
|
||||
`,
|
||||
})
|
||||
class MyComponent {
|
||||
protected options = [
|
||||
{
|
||||
label: "Foo",
|
||||
value: "foo",
|
||||
icon: "bwi-folder",
|
||||
},
|
||||
{
|
||||
label: "Bar",
|
||||
value: "bar",
|
||||
icon: "bwi-exclamation-triangle tw-text-danger",
|
||||
},
|
||||
{
|
||||
label: "Baz",
|
||||
value: "baz",
|
||||
disabled: true,
|
||||
},
|
||||
];
|
||||
}
|
||||
```
|
||||
|
||||
### Option Trees
|
||||
|
||||
Nested trees of options are also supported by passing an array of options to `children`.
|
||||
|
||||
```ts
|
||||
const options = [
|
||||
{
|
||||
label: "Foo0",
|
||||
value: "foo0",
|
||||
icon: "bwi-folder",
|
||||
children: [
|
||||
{
|
||||
label: "Foo1",
|
||||
value: "foo1",
|
||||
icon: "bwi-folder",
|
||||
children: [
|
||||
{
|
||||
label: "Foo2",
|
||||
value: "foo2",
|
||||
icon: "bwi-folder",
|
||||
children: [
|
||||
{
|
||||
label: "Foo3",
|
||||
value: "foo3",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Bar",
|
||||
value: "bar",
|
||||
icon: "bwi-folder",
|
||||
},
|
||||
{
|
||||
label: "Baz",
|
||||
value: "baz",
|
||||
icon: "bwi-folder",
|
||||
},
|
||||
];
|
||||
```
|
||||
|
||||
<Canvas>
|
||||
<Story of={stories.NestedOptions} />
|
||||
</Canvas>
|
||||
|
||||
## Placeholder Content
|
||||
|
||||
Placeholder content is shown when no item is selected.
|
||||
|
||||
```html
|
||||
<bit-chip-select placeholderText="Foo" placeholderIcon="bwi-key"> </bit-chip-select>
|
||||
```
|
||||
|
||||
## Reading the current value
|
||||
|
||||
The component implements `ControlValueAccessor`, so the current selected value can be read via
|
||||
`ngModel` or `[formControlName]`.
|
||||
|
||||
```html
|
||||
<bit-chip-select [(ngModel)]="..."></bit-chip-select>
|
||||
```
|
||||
160
libs/components/src/chip-select/chip-select.stories.ts
Normal file
160
libs/components/src/chip-select/chip-select.stories.ts
Normal file
@ -0,0 +1,160 @@
|
||||
import { FormsModule } from "@angular/forms";
|
||||
import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
|
||||
import { getAllByRole, userEvent } from "@storybook/testing-library";
|
||||
|
||||
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
|
||||
|
||||
import { MenuModule } from "../menu";
|
||||
import { I18nMockService } from "../utils/i18n-mock.service";
|
||||
|
||||
import { ChipSelectComponent } from "./chip-select.component";
|
||||
|
||||
export default {
|
||||
title: "Component Library/Chip Select",
|
||||
component: ChipSelectComponent,
|
||||
decorators: [
|
||||
moduleMetadata({
|
||||
imports: [MenuModule, FormsModule],
|
||||
providers: [
|
||||
{
|
||||
provide: I18nService,
|
||||
useFactory: () => {
|
||||
return new I18nMockService({
|
||||
viewItemsIn: (name) => `View items in ${name}`,
|
||||
back: "Back",
|
||||
backTo: (name) => `Back to ${name}`,
|
||||
removeItem: (name) => `Remove ${name}`,
|
||||
});
|
||||
},
|
||||
},
|
||||
],
|
||||
}),
|
||||
],
|
||||
} as Meta;
|
||||
|
||||
type Story = StoryObj<ChipSelectComponent & { value: any }>;
|
||||
|
||||
export const Default: Story = {
|
||||
render: (args) => ({
|
||||
props: {
|
||||
...args,
|
||||
},
|
||||
template: /* html */ `
|
||||
<bit-chip-select
|
||||
placeholderText="Folder"
|
||||
placeholderIcon="bwi-folder"
|
||||
[options]="options"
|
||||
[ngModel]="value"
|
||||
></bit-chip-select>
|
||||
`,
|
||||
}),
|
||||
args: {
|
||||
options: [
|
||||
{
|
||||
label: "Foo",
|
||||
value: "foo",
|
||||
icon: "bwi-folder",
|
||||
},
|
||||
{
|
||||
label: "Bar",
|
||||
value: "bar",
|
||||
icon: "bwi-exclamation-triangle tw-text-danger",
|
||||
},
|
||||
{
|
||||
label: "Baz",
|
||||
value: "baz",
|
||||
disabled: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
play: async (context) => {
|
||||
const canvas = context.canvasElement;
|
||||
const buttons = getAllByRole(canvas, "button");
|
||||
await userEvent.click(buttons[0]);
|
||||
},
|
||||
};
|
||||
|
||||
export const NestedOptions: Story = {
|
||||
...Default,
|
||||
args: {
|
||||
options: [
|
||||
{
|
||||
label: "Foo",
|
||||
value: "foo",
|
||||
icon: "bwi-folder",
|
||||
children: [
|
||||
{
|
||||
label: "Foo1",
|
||||
value: "foo1",
|
||||
icon: "bwi-folder",
|
||||
children: [
|
||||
{
|
||||
label: "Foo2",
|
||||
value: "foo2",
|
||||
icon: "bwi-folder",
|
||||
children: [
|
||||
{
|
||||
label: "Foo3",
|
||||
value: "foo3",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Bar",
|
||||
value: "bar",
|
||||
icon: "bwi-folder",
|
||||
},
|
||||
{
|
||||
label: "Baz",
|
||||
value: "baz",
|
||||
icon: "bwi-folder",
|
||||
},
|
||||
],
|
||||
value: "foo1",
|
||||
},
|
||||
};
|
||||
|
||||
export const TextOverflow: Story = {
|
||||
...Default,
|
||||
args: {
|
||||
options: [
|
||||
{
|
||||
label: "Fooooooooooooooooooooooooooooooooooooooooooooo",
|
||||
value: "foo",
|
||||
},
|
||||
],
|
||||
value: "foo",
|
||||
},
|
||||
};
|
||||
|
||||
export const Disabled: Story = {
|
||||
...Default,
|
||||
render: (args) => ({
|
||||
props: {
|
||||
...args,
|
||||
},
|
||||
template: /* html */ `
|
||||
<bit-chip-select
|
||||
placeholderText="Folder"
|
||||
placeholderIcon="bwi-folder"
|
||||
[options]="options"
|
||||
[ngModel]="value"
|
||||
disabled
|
||||
></bit-chip-select>
|
||||
`,
|
||||
}),
|
||||
args: {
|
||||
options: [
|
||||
{
|
||||
label: "Foo",
|
||||
value: "foo",
|
||||
icon: "bwi-folder",
|
||||
},
|
||||
],
|
||||
value: "foo",
|
||||
},
|
||||
};
|
||||
1
libs/components/src/chip-select/index.ts
Normal file
1
libs/components/src/chip-select/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export * from "./chip-select.component";
|
||||
@ -9,6 +9,7 @@ export { ButtonType } from "./shared/button-like.abstraction";
|
||||
export * from "./callout";
|
||||
export * from "./card";
|
||||
export * from "./checkbox";
|
||||
export * from "./chip-select";
|
||||
export * from "./color-password";
|
||||
export * from "./container";
|
||||
export * from "./dialog";
|
||||
|
||||
11
libs/components/src/menu/menu-item.component.html
Normal file
11
libs/components/src/menu/menu-item.component.html
Normal file
@ -0,0 +1,11 @@
|
||||
<div class="tw-flex tw-w-full tw-justify-between tw-items-center tw-gap-2">
|
||||
<span class="tw-flex tw-gap-2 tw-items-center tw-overflow-hidden">
|
||||
<span #startSlot [ngClass]="{ 'tw-hidden': startSlot.childElementCount === 0 }">
|
||||
<ng-content select="[slot=start]"></ng-content>
|
||||
</span>
|
||||
<span class="tw-truncate"><ng-content></ng-content></span>
|
||||
</span>
|
||||
<span #endSlot [ngClass]="{ 'tw-hidden': endSlot.childElementCount === 0 }">
|
||||
<ng-content select="[slot=end]"></ng-content>
|
||||
</span>
|
||||
</div>
|
||||
@ -1,12 +1,14 @@
|
||||
import { FocusableOption } from "@angular/cdk/a11y";
|
||||
import { Directive, ElementRef, HostBinding } from "@angular/core";
|
||||
import { Component, ElementRef, HostBinding } from "@angular/core";
|
||||
|
||||
@Directive({
|
||||
@Component({
|
||||
selector: "[bitMenuItem]",
|
||||
templateUrl: "menu-item.component.html",
|
||||
})
|
||||
export class MenuItemDirective implements FocusableOption {
|
||||
@HostBinding("class") classList = [
|
||||
"tw-block",
|
||||
"tw-w-full",
|
||||
"tw-py-1",
|
||||
"tw-px-4",
|
||||
"!tw-text-main",
|
||||
@ -24,6 +26,9 @@ export class MenuItemDirective implements FocusableOption {
|
||||
"focus-visible:tw-ring-primary-700",
|
||||
"active:!tw-ring-0",
|
||||
"active:!tw-ring-offset-0",
|
||||
"disabled:!tw-text-muted",
|
||||
"disabled:hover:tw-bg-background",
|
||||
"disabled:tw-cursor-not-allowed",
|
||||
];
|
||||
@HostBinding("attr.role") role = "menuitem";
|
||||
@HostBinding("tabIndex") tabIndex = "-1";
|
||||
|
||||
@ -16,13 +16,16 @@ import { MenuComponent } from "./menu.component";
|
||||
|
||||
@Directive({
|
||||
selector: "[bitMenuTriggerFor]",
|
||||
exportAs: "menuTrigger",
|
||||
})
|
||||
export class MenuTriggerForDirective implements OnDestroy {
|
||||
@HostBinding("attr.aria-expanded") isOpen = false;
|
||||
@HostBinding("attr.aria-haspopup") get hasPopup(): "menu" | "dialog" {
|
||||
return this.menu?.ariaRole || "menu";
|
||||
}
|
||||
@HostBinding("attr.role") role = "button";
|
||||
@HostBinding("attr.role")
|
||||
@Input()
|
||||
role = "button";
|
||||
|
||||
@Input("bitMenuTriggerFor") menu: MenuComponent;
|
||||
|
||||
|
||||
@ -10,7 +10,26 @@ Menus are used to help organize related options. Menus are most often used for i
|
||||
tables.
|
||||
|
||||
<Story of={stories.ClosedMenu} />
|
||||
<Controls />
|
||||
|
||||
<br />
|
||||
|
||||
## Slots
|
||||
|
||||
`bitMenuItem` supports the following slots:
|
||||
|
||||
| Slot | Description |
|
||||
| -------------- | --------------------------------------------------- |
|
||||
| default | primary text or arbitrary content |
|
||||
| `slot="start"` | commonly an icon or avatar; before the default slot |
|
||||
| `slot="end"` | commonly an icon; after the default slot |
|
||||
|
||||
```html
|
||||
<button type="button" bitMenuItem>
|
||||
<i class="bwi bwi-key" slot="start"></i>
|
||||
Menu item with icons
|
||||
<i class="bwi bwi-angle-right" slot="end"></i>
|
||||
</button>
|
||||
```
|
||||
|
||||
## Accessibility
|
||||
|
||||
|
||||
@ -35,13 +35,21 @@ type Story = StoryObj<MenuTriggerForDirective>;
|
||||
export const OpenMenu: Story = {
|
||||
render: (args) => ({
|
||||
props: args,
|
||||
template: `
|
||||
template: /*html*/ `
|
||||
<bit-menu #myMenu="menuComponent">
|
||||
<a href="#" bitMenuItem>Anchor link</a>
|
||||
<a href="#" bitMenuItem>Another link</a>
|
||||
<button type="button" bitMenuItem>Button</button>
|
||||
<bit-menu-divider></bit-menu-divider>
|
||||
<button type="button" bitMenuItem>Button after divider</button>
|
||||
<button type="button" bitMenuItem>
|
||||
<i class="bwi bwi-key" slot="start"></i>
|
||||
Button with icons
|
||||
<i class="bwi bwi-angle-right" slot="end"></i>
|
||||
</button>
|
||||
<button type="button" bitMenuItem disabled>
|
||||
<i class="bwi bwi-clone" slot="start"></i>
|
||||
Disabled button
|
||||
</button>
|
||||
</bit-menu>
|
||||
|
||||
<div class="tw-h-40">
|
||||
@ -55,7 +63,7 @@ export const OpenMenu: Story = {
|
||||
export const ClosedMenu: Story = {
|
||||
render: (args) => ({
|
||||
props: args,
|
||||
template: `
|
||||
template: /*html*/ `
|
||||
<div class="tw-h-40">
|
||||
<button bitButton buttonType="secondary" [bitMenuTriggerFor]="myMenu">Open menu</button>
|
||||
</div>
|
||||
@ -65,7 +73,15 @@ export const ClosedMenu: Story = {
|
||||
<a href="#" bitMenuItem>Another link</a>
|
||||
<button type="button" bitMenuItem>Button</button>
|
||||
<bit-menu-divider></bit-menu-divider>
|
||||
<button type="button" bitMenuItem>Button after divider</button>
|
||||
<button type="button" bitMenuItem>
|
||||
<i class="bwi bwi-key" slot="start"></i>
|
||||
Button with icons
|
||||
<i class="bwi bwi-angle-right" slot="end"></i>
|
||||
</button>
|
||||
<button type="button" bitMenuItem disabled>
|
||||
<i class="bwi bwi-clone" slot="start"></i>
|
||||
Disabled button
|
||||
</button>
|
||||
</bit-menu>`,
|
||||
}),
|
||||
};
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import { coerceBooleanProperty } from "@angular/cdk/coercion";
|
||||
import { Component, Input } from "@angular/core";
|
||||
import { Component, Input, booleanAttribute } from "@angular/core";
|
||||
|
||||
import { Option } from "./option";
|
||||
|
||||
@ -11,18 +10,12 @@ export class OptionComponent<T = unknown> implements Option<T> {
|
||||
@Input()
|
||||
icon?: string;
|
||||
|
||||
@Input()
|
||||
value?: T = undefined;
|
||||
@Input({ required: true })
|
||||
value: T;
|
||||
|
||||
@Input()
|
||||
label?: string;
|
||||
@Input({ required: true })
|
||||
label: string;
|
||||
|
||||
private _disabled = false;
|
||||
@Input()
|
||||
get disabled() {
|
||||
return this._disabled;
|
||||
}
|
||||
set disabled(value: boolean | "") {
|
||||
this._disabled = coerceBooleanProperty(value);
|
||||
}
|
||||
@Input({ transform: booleanAttribute })
|
||||
disabled: boolean;
|
||||
}
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
import { TemplateRef } from "@angular/core";
|
||||
|
||||
export interface Option<T> {
|
||||
icon?: string;
|
||||
value?: T;
|
||||
value: T | null;
|
||||
label?: string;
|
||||
content?: TemplateRef<unknown>;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user