@kumori/aurora-wui-components 0.0.277-dev4130.2 → 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.
Files changed (5) hide show
  1. package/dist/components/axebow-filter-bar/axebow-filter-bar.d.ts +5 -0
  2. package/dist/components/axebow-filter-bar/axebow-filter-bar.d.ts.map +1 -1
  3. package/dist/index.js +69 -1
  4. package/dist/index.js.map +1 -1
  5. package/package.json +1 -1
package/dist/components/axebow-filter-bar/axebow-filter-bar.d.ts CHANGED
@@ -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
  }
package/dist/components/axebow-filter-bar/axebow-filter-bar.d.ts.map CHANGED
@@ -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,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"}
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