@kumori/aurora-wui-components 0.0.277-dev4130.1 → 0.0.277-dev4130.3
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 +5 -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 +73 -1
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -22,6 +22,8 @@ export declare class AxebowFilterBar extends LitElement {
|
|
|
22
22
|
items: AxebowFilterBarItem[];
|
|
23
23
|
clearFilterLabel: string;
|
|
24
24
|
compact: boolean;
|
|
25
|
+
searchPlaceholder: string;
|
|
26
|
+
searchValue: string;
|
|
25
27
|
private _resizeObserver?;
|
|
26
28
|
connectedCallback(): void;
|
|
27
29
|
disconnectedCallback(): void;
|
|
@@ -32,6 +34,9 @@ export declare class AxebowFilterBar extends LitElement {
|
|
|
32
34
|
private _updateSeparateLayout;
|
|
33
35
|
private _onChange;
|
|
34
36
|
private _clearItem;
|
|
37
|
+
private _onSearchInput;
|
|
38
|
+
private _onSearchClear;
|
|
39
|
+
private _renderSearchItem;
|
|
35
40
|
private _renderItem;
|
|
36
41
|
render(): import('lit-html').TemplateResult<1>;
|
|
37
42
|
}
|
|
@@ -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,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;IAkBzB,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,8 @@ var AxebowFilterBar = class AxebowFilterBar extends LitElement {
|
|
|
312
312
|
this.items = [];
|
|
313
313
|
this.clearFilterLabel = "";
|
|
314
314
|
this.compact = false;
|
|
315
|
+
this.searchPlaceholder = "";
|
|
316
|
+
this.searchValue = "";
|
|
315
317
|
}
|
|
316
318
|
static {
|
|
317
319
|
this.styles = [unsafeCSS(tailwind_default), css`
|
|
@@ -372,6 +374,29 @@ var AxebowFilterBar = class AxebowFilterBar extends LitElement {
|
|
|
372
374
|
sl-select:not([has-value])::part(clear-button) {
|
|
373
375
|
display: none !important;
|
|
374
376
|
}
|
|
377
|
+
sl-input {
|
|
378
|
+
--sl-focus-ring-width: 0px;
|
|
379
|
+
}
|
|
380
|
+
sl-input::part(base) {
|
|
381
|
+
min-height: 2.5rem;
|
|
382
|
+
border: 1px solid #dbdde4;
|
|
383
|
+
border-radius: 0.375rem;
|
|
384
|
+
box-shadow: none;
|
|
385
|
+
background-color: var(--axebow-white, white);
|
|
386
|
+
}
|
|
387
|
+
sl-input:hover::part(base) {
|
|
388
|
+
border-color: var(--axebow-gray);
|
|
389
|
+
}
|
|
390
|
+
sl-input:focus-within::part(base) {
|
|
391
|
+
border-color: var(--axebow-black);
|
|
392
|
+
}
|
|
393
|
+
sl-input::part(input) {
|
|
394
|
+
color: var(--axebow-secondary);
|
|
395
|
+
font-size: 0.875rem;
|
|
396
|
+
}
|
|
397
|
+
sl-input::part(prefix) {
|
|
398
|
+
padding-inline-start: 0.75rem;
|
|
399
|
+
}
|
|
375
400
|
`];
|
|
376
401
|
}
|
|
377
402
|
connectedCallback() {
|
|
@@ -438,6 +463,46 @@ var AxebowFilterBar = class AxebowFilterBar extends LitElement {
|
|
|
438
463
|
composed: true
|
|
439
464
|
}));
|
|
440
465
|
}
|
|
466
|
+
_onSearchInput(e) {
|
|
467
|
+
const value = e.target.value;
|
|
468
|
+
this.searchValue = value;
|
|
469
|
+
this.dispatchEvent(new CustomEvent("option-change", {
|
|
470
|
+
detail: {
|
|
471
|
+
key: "search",
|
|
472
|
+
value
|
|
473
|
+
},
|
|
474
|
+
bubbles: true,
|
|
475
|
+
composed: true
|
|
476
|
+
}));
|
|
477
|
+
}
|
|
478
|
+
_onSearchClear() {
|
|
479
|
+
this.searchValue = "";
|
|
480
|
+
this.dispatchEvent(new CustomEvent("option-change", {
|
|
481
|
+
detail: {
|
|
482
|
+
key: "search",
|
|
483
|
+
value: ""
|
|
484
|
+
},
|
|
485
|
+
bubbles: true,
|
|
486
|
+
composed: true
|
|
487
|
+
}));
|
|
488
|
+
}
|
|
489
|
+
_renderSearchItem() {
|
|
490
|
+
return html`
|
|
491
|
+
<div class="filter-bar-item flex flex-col gap-2 flex-1 min-w-36 max-w-95">
|
|
492
|
+
<sl-input
|
|
493
|
+
class="w-full"
|
|
494
|
+
placeholder=${this.searchPlaceholder}
|
|
495
|
+
.value=${this.searchValue}
|
|
496
|
+
clearable
|
|
497
|
+
@sl-input=${(e) => this._onSearchInput(e)}
|
|
498
|
+
@sl-clear=${() => this._onSearchClear()}
|
|
499
|
+
>
|
|
500
|
+
<axebow-icon slot="prefix" iconName="search" iconColor="var(--axebow-gray)" size="md"></axebow-icon>
|
|
501
|
+
<axebow-icon slot="clear-icon" iconName="cancel" size="md" iconColor="var(--axebow-secondary)"></axebow-icon>
|
|
502
|
+
</sl-input>
|
|
503
|
+
</div>
|
|
504
|
+
`;
|
|
505
|
+
}
|
|
441
506
|
_renderItem(item) {
|
|
442
507
|
const isLockable = item.lockable !== false;
|
|
443
508
|
const hasValue = isLockable && item.value && item.value !== "all" && item.value !== "";
|
|
@@ -492,6 +557,7 @@ var AxebowFilterBar = class AxebowFilterBar extends LitElement {
|
|
|
492
557
|
render() {
|
|
493
558
|
return html`
|
|
494
559
|
<div class="filter-bar flex items-end gap-4 flex-wrap ${this.compact ? "" : "py-8"}">
|
|
560
|
+
${this.searchPlaceholder ? this._renderSearchItem() : ""}
|
|
495
561
|
${this.items.map((item) => this._renderItem(item))}
|
|
496
562
|
</div>
|
|
497
563
|
`;
|
|
@@ -500,6 +566,8 @@ var AxebowFilterBar = class AxebowFilterBar extends LitElement {
|
|
|
500
566
|
__decorate([property({ type: Array })], AxebowFilterBar.prototype, "items", void 0);
|
|
501
567
|
__decorate([property({ type: String })], AxebowFilterBar.prototype, "clearFilterLabel", void 0);
|
|
502
568
|
__decorate([property({ type: Boolean })], AxebowFilterBar.prototype, "compact", void 0);
|
|
569
|
+
__decorate([property({ type: String })], AxebowFilterBar.prototype, "searchPlaceholder", void 0);
|
|
570
|
+
__decorate([property({ type: String })], AxebowFilterBar.prototype, "searchValue", void 0);
|
|
503
571
|
AxebowFilterBar = __decorate([customElement("axebow-filter-bar")], AxebowFilterBar);
|
|
504
572
|
//#endregion
|
|
505
573
|
//#region src/components/axebow-button/axebow-button.ts
|
|
@@ -931,6 +999,10 @@ var AxebowSearchBarFilters = class AxebowSearchBarFilters extends LitElement {
|
|
|
931
999
|
axebow-button:hover axebow-icon {
|
|
932
1000
|
--icon-btn-color: var(--axebow-gray);
|
|
933
1001
|
}
|
|
1002
|
+
sl-select {
|
|
1003
|
+
--sl-color-primary-500: var(--axebow-tertiary);
|
|
1004
|
+
--sl-color-primary-600: var(--axebow-tertiary);
|
|
1005
|
+
}
|
|
934
1006
|
sl-select::part(combobox):hover {
|
|
935
1007
|
border-color: black;
|
|
936
1008
|
}
|