wip
This commit is contained in:
William Martin
parent
864d1e79af
commit
41a59dac5b
|
|
@ -1,31 +1,42 @@
|
|||
<button
|
||||
type="button"
|
||||
class="tw-border tw-border-solid tw-rounded-3xl tw-border-text-muted tw-px-3 tw-py-1.5 tw-inline-flex tw-gap-1.5 tw-items-center focus-visible:tw-ring focus-visible:tw-ring-offset-1 focus-visible:tw-ring-primary-700 focus-visible:tw-z-10"
|
||||
[ngClass]="
|
||||
selected
|
||||
? 'tw-bg-text-muted tw-text-contrast hover:tw-bg-secondary-700'
|
||||
: 'tw-bg-background tw-text-muted hover:tw-bg-black/5'
|
||||
"
|
||||
aria-expanded="false"
|
||||
aria-controls="listbox-id"
|
||||
bitButton
|
||||
buttonType="secondary"
|
||||
[bitMenuTriggerFor]="chipSelectMenu"
|
||||
[bitMenuTriggerFor]="menu"
|
||||
#menuTrigger="menuTrigger"
|
||||
>
|
||||
<span class="tw-pr-1">
|
||||
<ng-content select="[slot=start]"></ng-content>
|
||||
</span>
|
||||
<ng-content></ng-content>
|
||||
<button
|
||||
*ngIf="selected"
|
||||
bitIconButton="bwi-close"
|
||||
buttonType="contrast"
|
||||
size="small"
|
||||
type="button"
|
||||
class="tw-rounded-3xl before:tw-rounded-3xl tw-text-sm"
|
||||
(click)="clear($event)"
|
||||
></button>
|
||||
<i *ngIf="!selected" class="bwi bwi-angle-down tw-mt-1 tw-p-1"></i>
|
||||
<i class="bwi {{ icon }}"></i>
|
||||
{{ placeholder }}
|
||||
<i class="bwi" [ngClass]="menuTrigger.isOpen ? 'bwi-angle-up' : 'bwi-angle-down'"></i>
|
||||
</button>
|
||||
<bit-menu #chipSelectMenu>
|
||||
<ng-content select="[slot=menuItems]"></ng-content>
|
||||
<bit-menu #menu>
|
||||
<button
|
||||
type="button"
|
||||
bitMenuItem
|
||||
*ngIf="renderedOptions.parent"
|
||||
(click)="viewOption(renderedOptions.parent, $event)"
|
||||
>
|
||||
<i class="bwi bwi-angle-left"></i>
|
||||
Back
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
bitMenuItem
|
||||
*ngIf="renderedOptions.parent"
|
||||
(click)="selectOption(renderedOptions, $event)"
|
||||
>
|
||||
{{ renderedOptions.label }}
|
||||
</button>
|
||||
<!-- <bit-menu-divider *ngIf="renderedOptions.parent"></bit-menu-divider> -->
|
||||
|
||||
<button
|
||||
type="button"
|
||||
bitMenuItem
|
||||
*ngFor="let option of renderedOptions.children"
|
||||
(click)="option.children ? viewOption(option, $event) : selectOption(option, $event)"
|
||||
>
|
||||
{{ option.label }}
|
||||
<i *ngIf="option.children" class="bwi bwi-angle-right"></i>
|
||||
</button>
|
||||
</bit-menu>
|
||||
|
|
|
|||
|
|
@ -1,34 +1,94 @@
|
|||
import { BooleanInput, coerceBooleanProperty } from "@angular/cdk/coercion";
|
||||
import { CommonModule } from "@angular/common";
|
||||
import { Component, Input, QueryList, ContentChildren } from "@angular/core";
|
||||
import { Component, Input, OnInit } from "@angular/core";
|
||||
|
||||
import { ButtonModule } from "../button";
|
||||
import { IconButtonModule } from "../icon-button";
|
||||
import { MenuItemDirective, MenuModule } from "../menu";
|
||||
import { MenuModule } from "../menu";
|
||||
import { Option } from "../select/option";
|
||||
|
||||
export type OptionTree<T> = Option<T> & {
|
||||
children?: OptionTree<T>[];
|
||||
parent?: OptionTree<T>;
|
||||
};
|
||||
|
||||
const testData: OptionTree<any>[] = [
|
||||
{
|
||||
label: "Foo",
|
||||
},
|
||||
{
|
||||
label: "Bar",
|
||||
children: [
|
||||
{
|
||||
label: "Foo1",
|
||||
},
|
||||
{
|
||||
label: "Bar1",
|
||||
children: [
|
||||
{
|
||||
label: "Foooooooooooooooo00000000000000000000000000000000000002",
|
||||
},
|
||||
{
|
||||
label: "Bar2",
|
||||
children: [
|
||||
{
|
||||
label: "Foo3",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Baz2",
|
||||
},
|
||||
{
|
||||
label: "Baf2",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
@Component({
|
||||
selector: "bit-chip",
|
||||
selector: "bit-chip-select",
|
||||
templateUrl: "chip-select.component.html",
|
||||
standalone: true,
|
||||
imports: [CommonModule, ButtonModule, IconButtonModule, MenuModule],
|
||||
})
|
||||
export class ChipSelectComponent {
|
||||
@Input()
|
||||
get selected() {
|
||||
return this._selected;
|
||||
}
|
||||
set selected(value: BooleanInput) {
|
||||
this._selected = coerceBooleanProperty(value);
|
||||
export class ChipSelectComponent<T = unknown> implements OnInit {
|
||||
// private i18nService = inject(I18nService);
|
||||
|
||||
@Input() placeholder = "Placeholder";
|
||||
|
||||
// name placeholder icon?
|
||||
@Input() icon: string;
|
||||
|
||||
/** Optional: Options can be provided using an input or using `bit-option` */
|
||||
@Input() items: OptionTree<T>[] = testData;
|
||||
|
||||
protected renderedOptions: OptionTree<T>;
|
||||
|
||||
protected selectOption(option: OptionTree<T>, event: MouseEvent) {
|
||||
this.placeholder = option.label;
|
||||
}
|
||||
|
||||
@ContentChildren(MenuItemDirective, { descendants: true })
|
||||
menuItems: QueryList<MenuItemDirective>;
|
||||
protected viewOption(option: OptionTree<T>, event: MouseEvent) {
|
||||
this.renderedOptions = option;
|
||||
|
||||
private _selected = false;
|
||||
event.preventDefault();
|
||||
event.stopImmediatePropagation();
|
||||
}
|
||||
|
||||
clear(e: Event) {
|
||||
//eslint-disable-next-line
|
||||
console.log("hi");
|
||||
e.stopPropagation();
|
||||
private markParents(tree: OptionTree<T>) {
|
||||
tree.children?.forEach((child) => {
|
||||
child.parent = tree;
|
||||
this.markParents(child);
|
||||
});
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
const root: OptionTree<T> = {
|
||||
children: this.items,
|
||||
};
|
||||
this.markParents(root);
|
||||
this.renderedOptions = root;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,23 +21,13 @@ export const Default: Story = {
|
|||
render: (args) => ({
|
||||
props: args,
|
||||
template: /* html */ `
|
||||
<bit-chip>
|
||||
<i class="bwi bwi-folder" aria-hidden="true" slot="start"></i>
|
||||
Label
|
||||
<ng-container slot="menuItems">
|
||||
<a href="#" bitMenuItem>Anchor link</a>
|
||||
<a href="#" bitMenuItem>Another link</a>
|
||||
</ng-container>
|
||||
</bit-chip>
|
||||
|
||||
<bit-chip selected>
|
||||
<i class="bwi bwi-folder" aria-hidden="true" slot="start"></i>
|
||||
Label
|
||||
<ng-container slot="menuItems">
|
||||
<a href="#" bitMenuItem>Anchor link</a>
|
||||
<a href="#" bitMenuItem>Another link</a>
|
||||
</ng-container>
|
||||
</bit-chip>
|
||||
<bit-chip-select placeholder="Folder" icon="bwi-key">
|
||||
<bit-option label="Foo"></bit-option>
|
||||
<bit-option label="Bar"></bit-option>
|
||||
<bit-option label="Baz">
|
||||
<bit-option label="Foo"></bit-option>
|
||||
</bit-option>
|
||||
</bit-chip-select>
|
||||
`,
|
||||
}),
|
||||
};
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ import { MenuComponent } from "./menu.component";
|
|||
|
||||
@Directive({
|
||||
selector: "[bitMenuTriggerFor]",
|
||||
exportAs: "menuTrigger",
|
||||
})
|
||||
export class MenuTriggerForDirective implements OnDestroy {
|
||||
@HostBinding("attr.aria-expanded") isOpen = false;
|
||||
|
|
|
|||
Loading…
Reference in New Issue