@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.
@@ -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;AAEnE,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,4BA6DX;IAEyB,KAAK,EAAE,mBAAmB,EAAE,CAAM;IACjC,gBAAgB,SAAM;IACrB,OAAO,UAAS;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,WAAW;IAsDnB,MAAM;CAOP"}
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,4BA6CX;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"}
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;