@kumori/aurora-wui-components 0.0.277 → 0.0.278
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/axebow-filter-bar/axebow-filter-bar.d.ts +6 -0
- package/dist/components/axebow-filter-bar/axebow-filter-bar.d.ts.map +1 -1
- package/dist/components/axebow-search-bar-filters/axebow-search-bar-filters.d.ts.map +1 -1
- package/dist/index.js +79 -1
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -22,6 +22,9 @@ export declare class AxebowFilterBar extends LitElement {
|
|
|
22
22
|
items: AxebowFilterBarItem[];
|
|
23
23
|
clearFilterLabel: string;
|
|
24
24
|
compact: boolean;
|
|
25
|
+
searchLabel: string;
|
|
26
|
+
searchPlaceholder: string;
|
|
27
|
+
searchValue: string;
|
|
25
28
|
private _resizeObserver?;
|
|
26
29
|
connectedCallback(): void;
|
|
27
30
|
disconnectedCallback(): void;
|
|
@@ -32,6 +35,9 @@ export declare class AxebowFilterBar extends LitElement {
|
|
|
32
35
|
private _updateSeparateLayout;
|
|
33
36
|
private _onChange;
|
|
34
37
|
private _clearItem;
|
|
38
|
+
private _onSearchInput;
|
|
39
|
+
private _onSearchClear;
|
|
40
|
+
private _renderSearchItem;
|
|
35
41
|
private _renderItem;
|
|
36
42
|
render(): import('lit-html').TemplateResult<1>;
|
|
37
43
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"axebow-filter-bar.d.ts","sourceRoot":"","sources":["../../../src/components/axebow-filter-bar/axebow-filter-bar.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAwB,MAAM,KAAK,CAAC;AAEvD,OAAO,+BAA+B,CAAC;AACvC,OAAO,2DAA2D,CAAC;AACnE,OAAO,2DAA2D,CAAC;
|
|
1
|
+
{"version":3,"file":"axebow-filter-bar.d.ts","sourceRoot":"","sources":["../../../src/components/axebow-filter-bar/axebow-filter-bar.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAwB,MAAM,KAAK,CAAC;AAEvD,OAAO,+BAA+B,CAAC;AACvC,OAAO,2DAA2D,CAAC;AACnE,OAAO,2DAA2D,CAAC;AACnE,OAAO,yDAAyD,CAAC;AAEjE,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,qBAAqB,EAAE,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;GAIG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,MAAM,CAAC,MAAM,4BAoFX;IAEyB,KAAK,EAAE,mBAAmB,EAAE,CAAM;IACjC,gBAAgB,SAAM;IACrB,OAAO,UAAS;IACjB,WAAW,SAAM;IACjB,iBAAiB,SAAM;IACvB,WAAW,SAAM;IAE7C,OAAO,CAAC,eAAe,CAAC,CAAiB;IAEzC,iBAAiB;IAKjB,oBAAoB;IAKpB,YAAY;IAMZ,OAAO,CAAC,iBAAiB,EAAE,GAAG;IAM9B,OAAO,CAAC,yBAAyB;IAcjC,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,qBAAqB;IAa7B,OAAO,CAAC,SAAS;IAajB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,iBAAiB;IAqBzB,OAAO,CAAC,WAAW;IAsDnB,MAAM;CAQP"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"axebow-search-bar-filters.d.ts","sourceRoot":"","sources":["../../../src/components/axebow-search-bar-filters/axebow-search-bar-filters.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAwB,MAAM,KAAK,CAAC;AAEvD,OAAO,+BAA+B,CAAC;AACvC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,mCAAmC,CAAC;AAC3C,OAAO,2DAA2D,CAAC;AACnE,OAAO,2DAA2D,CAAC;AAGnE,MAAM,WAAW,4BAA4B;IAC3C,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,4BAA4B;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,qBACa,sBAAuB,SAAQ,UAAU;IAEpD,MAAM,EAAE,4BAA4B,CAOlC;IAEyB,WAAW,EAAE,4BAA4B,EAAE,CAAM;IACjD,eAAe,EAAE,4BAA4B,EAAE,CAAM;IACrD,WAAW,EAAE,4BAA4B,EAAE,CAAM;IACjD,WAAW,EAAE,4BAA4B,EAAE,CAAM;IAE/C,mBAAmB,UAAS;IAE7B,iBAAiB,SAAM;IACvB,iBAAiB,SAAM;IACvB,eAAe,SAAM;IACrB,mBAAmB,SAAM;IACzB,eAAe,SAAM;IACrB,aAAa,SAAM;IAE/C,OAAO,KAAK,oBAAoB,GAG/B;IAED,MAAM,CAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"axebow-search-bar-filters.d.ts","sourceRoot":"","sources":["../../../src/components/axebow-search-bar-filters/axebow-search-bar-filters.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAwB,MAAM,KAAK,CAAC;AAEvD,OAAO,+BAA+B,CAAC;AACvC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,mCAAmC,CAAC;AAC3C,OAAO,2DAA2D,CAAC;AACnE,OAAO,2DAA2D,CAAC;AAGnE,MAAM,WAAW,4BAA4B;IAC3C,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,4BAA4B;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,qBACa,sBAAuB,SAAQ,UAAU;IAEpD,MAAM,EAAE,4BAA4B,CAOlC;IAEyB,WAAW,EAAE,4BAA4B,EAAE,CAAM;IACjD,eAAe,EAAE,4BAA4B,EAAE,CAAM;IACrD,WAAW,EAAE,4BAA4B,EAAE,CAAM;IACjD,WAAW,EAAE,4BAA4B,EAAE,CAAM;IAE/C,mBAAmB,UAAS;IAE7B,iBAAiB,SAAM;IACvB,iBAAiB,SAAM;IACvB,eAAe,SAAM;IACrB,mBAAmB,SAAM;IACzB,eAAe,SAAM;IACrB,aAAa,SAAM;IAE/C,OAAO,KAAK,oBAAoB,GAG/B;IAED,MAAM,CAAC,MAAM,4BAkDX;IAEF,OAAO,CAAC,SAAS;IAWjB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,iBAAiB,EAAE,GAAG;IAK9B,OAAO,CAAC,yBAAyB;IAcjC,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,eAAe;IAavB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,WAAW;IAInB,MAAM;CAiIP"}
|
package/dist/index.js
CHANGED
|
@@ -2,9 +2,9 @@ import { LitElement, css, html, unsafeCSS } from "lit";
|
|
|
2
2
|
import { customElement, property, query, state } from "lit/decorators.js";
|
|
3
3
|
import "@shoelace-style/shoelace/dist/components/select/select.js";
|
|
4
4
|
import "@shoelace-style/shoelace/dist/components/option/option.js";
|
|
5
|
+
import "@shoelace-style/shoelace/dist/components/input/input.js";
|
|
5
6
|
import { ifDefined } from "lit/directives/if-defined.js";
|
|
6
7
|
import "@shoelace-style/shoelace/dist/components/button/button.js";
|
|
7
|
-
import "@shoelace-style/shoelace/dist/components/input/input.js";
|
|
8
8
|
import "@shoelace-style/shoelace/dist/components/switch/switch.js";
|
|
9
9
|
import "@shoelace-style/shoelace/dist/components/dropdown/dropdown.js";
|
|
10
10
|
import "@shoelace-style/shoelace/dist/components/menu/menu.js";
|
|
@@ -312,6 +312,9 @@ var AxebowFilterBar = class AxebowFilterBar extends LitElement {
|
|
|
312
312
|
this.items = [];
|
|
313
313
|
this.clearFilterLabel = "";
|
|
314
314
|
this.compact = false;
|
|
315
|
+
this.searchLabel = "";
|
|
316
|
+
this.searchPlaceholder = "";
|
|
317
|
+
this.searchValue = "";
|
|
315
318
|
}
|
|
316
319
|
static {
|
|
317
320
|
this.styles = [unsafeCSS(tailwind_default), css`
|
|
@@ -372,6 +375,29 @@ var AxebowFilterBar = class AxebowFilterBar extends LitElement {
|
|
|
372
375
|
sl-select:not([has-value])::part(clear-button) {
|
|
373
376
|
display: none !important;
|
|
374
377
|
}
|
|
378
|
+
sl-input {
|
|
379
|
+
--sl-focus-ring-width: 0px;
|
|
380
|
+
}
|
|
381
|
+
sl-input::part(base) {
|
|
382
|
+
min-height: 2.5rem;
|
|
383
|
+
border: 1px solid #dbdde4;
|
|
384
|
+
border-radius: 0.375rem;
|
|
385
|
+
box-shadow: none;
|
|
386
|
+
background-color: var(--axebow-white, white);
|
|
387
|
+
}
|
|
388
|
+
sl-input:hover::part(base) {
|
|
389
|
+
border-color: var(--axebow-gray);
|
|
390
|
+
}
|
|
391
|
+
sl-input:focus-within::part(base) {
|
|
392
|
+
border-color: var(--axebow-black);
|
|
393
|
+
}
|
|
394
|
+
sl-input::part(input) {
|
|
395
|
+
color: var(--axebow-secondary);
|
|
396
|
+
font-size: 0.875rem;
|
|
397
|
+
}
|
|
398
|
+
sl-input::part(prefix) {
|
|
399
|
+
padding-inline-start: 0.75rem;
|
|
400
|
+
}
|
|
375
401
|
`];
|
|
376
402
|
}
|
|
377
403
|
connectedCallback() {
|
|
@@ -438,6 +464,49 @@ var AxebowFilterBar = class AxebowFilterBar extends LitElement {
|
|
|
438
464
|
composed: true
|
|
439
465
|
}));
|
|
440
466
|
}
|
|
467
|
+
_onSearchInput(e) {
|
|
468
|
+
const value = e.target.value;
|
|
469
|
+
this.searchValue = value;
|
|
470
|
+
this.dispatchEvent(new CustomEvent("option-change", {
|
|
471
|
+
detail: {
|
|
472
|
+
key: "search",
|
|
473
|
+
value
|
|
474
|
+
},
|
|
475
|
+
bubbles: true,
|
|
476
|
+
composed: true
|
|
477
|
+
}));
|
|
478
|
+
}
|
|
479
|
+
_onSearchClear() {
|
|
480
|
+
this.searchValue = "";
|
|
481
|
+
this.dispatchEvent(new CustomEvent("option-change", {
|
|
482
|
+
detail: {
|
|
483
|
+
key: "search",
|
|
484
|
+
value: ""
|
|
485
|
+
},
|
|
486
|
+
bubbles: true,
|
|
487
|
+
composed: true
|
|
488
|
+
}));
|
|
489
|
+
}
|
|
490
|
+
_renderSearchItem() {
|
|
491
|
+
return html`
|
|
492
|
+
<div class="filter-bar-item flex flex-col gap-2 flex-1 min-w-36 max-w-95">
|
|
493
|
+
<div class="flex items-center justify-between gap-2">
|
|
494
|
+
<h4 class="m-0 text-base font-semibold text-black">${this.searchLabel}</h4>
|
|
495
|
+
</div>
|
|
496
|
+
<sl-input
|
|
497
|
+
class="w-full"
|
|
498
|
+
placeholder=${this.searchPlaceholder}
|
|
499
|
+
.value=${this.searchValue}
|
|
500
|
+
clearable
|
|
501
|
+
@sl-input=${(e) => this._onSearchInput(e)}
|
|
502
|
+
@sl-clear=${() => this._onSearchClear()}
|
|
503
|
+
>
|
|
504
|
+
<axebow-icon slot="prefix" iconName="search" iconColor="var(--axebow-gray)" size="md"></axebow-icon>
|
|
505
|
+
<axebow-icon slot="clear-icon" iconName="cancel" size="md" iconColor="var(--axebow-secondary)"></axebow-icon>
|
|
506
|
+
</sl-input>
|
|
507
|
+
</div>
|
|
508
|
+
`;
|
|
509
|
+
}
|
|
441
510
|
_renderItem(item) {
|
|
442
511
|
const isLockable = item.lockable !== false;
|
|
443
512
|
const hasValue = isLockable && item.value && item.value !== "all" && item.value !== "";
|
|
@@ -492,6 +561,7 @@ var AxebowFilterBar = class AxebowFilterBar extends LitElement {
|
|
|
492
561
|
render() {
|
|
493
562
|
return html`
|
|
494
563
|
<div class="filter-bar flex items-end gap-4 flex-wrap ${this.compact ? "" : "py-8"}">
|
|
564
|
+
${this.searchPlaceholder ? this._renderSearchItem() : ""}
|
|
495
565
|
${this.items.map((item) => this._renderItem(item))}
|
|
496
566
|
</div>
|
|
497
567
|
`;
|
|
@@ -500,6 +570,9 @@ var AxebowFilterBar = class AxebowFilterBar extends LitElement {
|
|
|
500
570
|
__decorate([property({ type: Array })], AxebowFilterBar.prototype, "items", void 0);
|
|
501
571
|
__decorate([property({ type: String })], AxebowFilterBar.prototype, "clearFilterLabel", void 0);
|
|
502
572
|
__decorate([property({ type: Boolean })], AxebowFilterBar.prototype, "compact", void 0);
|
|
573
|
+
__decorate([property({ type: String })], AxebowFilterBar.prototype, "searchLabel", void 0);
|
|
574
|
+
__decorate([property({ type: String })], AxebowFilterBar.prototype, "searchPlaceholder", void 0);
|
|
575
|
+
__decorate([property({ type: String })], AxebowFilterBar.prototype, "searchValue", void 0);
|
|
503
576
|
AxebowFilterBar = __decorate([customElement("axebow-filter-bar")], AxebowFilterBar);
|
|
504
577
|
//#endregion
|
|
505
578
|
//#region src/components/axebow-button/axebow-button.ts
|
|
@@ -931,6 +1004,10 @@ var AxebowSearchBarFilters = class AxebowSearchBarFilters extends LitElement {
|
|
|
931
1004
|
axebow-button:hover axebow-icon {
|
|
932
1005
|
--icon-btn-color: var(--axebow-gray);
|
|
933
1006
|
}
|
|
1007
|
+
sl-select {
|
|
1008
|
+
--sl-color-primary-500: var(--axebow-tertiary);
|
|
1009
|
+
--sl-color-primary-600: var(--axebow-tertiary);
|
|
1010
|
+
}
|
|
934
1011
|
sl-select::part(combobox):hover {
|
|
935
1012
|
border-color: black;
|
|
936
1013
|
}
|
|
@@ -952,6 +1029,7 @@ var AxebowSearchBarFilters = class AxebowSearchBarFilters extends LitElement {
|
|
|
952
1029
|
.filter-select::part(combobox) {
|
|
953
1030
|
height: 2.5rem !important;
|
|
954
1031
|
min-height: 2.5rem !important;
|
|
1032
|
+
background-color: var(--axebow-white, white);
|
|
955
1033
|
}
|
|
956
1034
|
.filter-select[lockable][has-value]::part(expand-icon) {
|
|
957
1035
|
display: none !important;
|