@aceshooting/lyra-ui 0.1.5 → 1.0.0

package/dist/components/chart/bar-chart.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;

package/dist/components/chart/bar-chart.stories.js

@@ -0,0 +1,20 @@
+import { html } from 'lit';
+const meta = {
+    title: 'Charts/Bar',
+    component: 'lyra-bar-chart',
+    tags: ['autodocs'],
+};
+export default meta;
+export const Default = {
+    render: () => {
+        const series = [{ label: 'Revenue', data: [12, 19, 14, 22] }];
+        return html `
+      <lyra-bar-chart
+        height="16rem"
+        style="width: 22rem"
+        .labels=${['Q1', 'Q2', 'Q3', 'Q4']}
+        .datasets=${series}
+      ></lyra-bar-chart>
+    `;
+    },
+};

package/dist/components/chart/box-plot.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;

package/dist/components/chart/box-plot.stories.js

@@ -0,0 +1,29 @@
+import { html } from 'lit';
+const meta = {
+    title: 'Charts/BoxPlot',
+    component: 'lyra-box-plot',
+    tags: ['autodocs'],
+};
+export default meta;
+export const Default = {
+    render: () => {
+        const boxes = [
+            {
+                label: 'Loss',
+                data: [
+                    { min: 1, q1: 2, median: 3, q3: 4, max: 5 },
+                    { min: 2, q1: 3, median: 4, q3: 5, max: 6 },
+                    { min: 1.5, q1: 2.5, median: 3.5, q3: 4.5, max: 6.5 },
+                ],
+            },
+        ];
+        return html `
+      <lyra-box-plot
+        height="16rem"
+        style="width: 22rem"
+        .labels=${['K=2', 'K=3', 'K=4']}
+        .boxes=${boxes}
+      ></lyra-box-plot>
+    `;
+    },
+};

package/dist/components/chart/bubble-chart.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;

package/dist/components/chart/bubble-chart.stories.js

@@ -0,0 +1,26 @@
+import { html } from 'lit';
+const meta = {
+    title: 'Charts/Bubble',
+    component: 'lyra-bubble-chart',
+    tags: ['autodocs'],
+};
+export default meta;
+export const Default = {
+    render: () => {
+        const bubblePoints = [
+            { x: 10, y: 20, r: 8 },
+            { x: 15, y: 10, r: 12 },
+            { x: 20, y: 30, r: 6 },
+        ];
+        const series = [
+            { label: 'Clusters', points: bubblePoints },
+        ];
+        return html `
+      <lyra-bubble-chart
+        height="16rem"
+        style="width: 22rem"
+        .datasets=${series}
+      ></lyra-bubble-chart>
+    `;
+    },
+};

package/dist/components/chart/doughnut-chart.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;

package/dist/components/chart/doughnut-chart.stories.js

@@ -0,0 +1,26 @@
+import { html } from 'lit';
+const meta = {
+    title: 'Charts/Doughnut',
+    component: 'lyra-doughnut-chart',
+    tags: ['autodocs'],
+};
+export default meta;
+export const Default = {
+    render: () => {
+        const series = [
+            {
+                label: 'Browsers',
+                data: [58, 18, 15, 9],
+                color: ['#5b8def', '#f7b955', '#59c19a', '#b6b8c3'],
+            },
+        ];
+        return html `
+      <lyra-doughnut-chart
+        height="16rem"
+        style="width: 16rem"
+        .labels=${['Chrome', 'Firefox', 'Safari', 'Other']}
+        .datasets=${series}
+      ></lyra-doughnut-chart>
+    `;
+    },
+};

package/dist/components/chart/histogram.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;

package/dist/components/chart/histogram.stories.js

@@ -0,0 +1,17 @@
+import { html } from 'lit';
+const meta = {
+    title: 'Charts/Histogram',
+    component: 'lyra-histogram',
+    tags: ['autodocs'],
+};
+export default meta;
+export const Default = {
+    render: () => html `
+    <lyra-histogram
+      bins="6"
+      height="16rem"
+      style="width: 22rem"
+      .values=${[2, 4, 4, 5, 6, 6, 6, 7, 8, 9, 9, 10, 11, 12, 12, 13, 15]}
+    ></lyra-histogram>
+  `,
+};

package/dist/components/chart/line-chart.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;

package/dist/components/chart/line-chart.stories.js

@@ -0,0 +1,24 @@
+import { html } from 'lit';
+const meta = {
+    title: 'Charts/Line',
+    component: 'lyra-line-chart',
+    tags: ['autodocs'],
+};
+export default meta;
+export const Default = {
+    render: () => {
+        const series = [
+            { label: 'Sessions', data: [4, 7, 6, 9, 12], fill: true },
+            { label: 'Errors', data: [1, 2, 1, 0, 3], color: '#e5484d' },
+        ];
+        return html `
+      <lyra-line-chart
+        height="16rem"
+        style="width: 22rem"
+        legend
+        .labels=${['Jan', 'Feb', 'Mar', 'Apr', 'May']}
+        .datasets=${series}
+      ></lyra-line-chart>
+    `;
+    },
+};

package/dist/components/chart/pie-chart.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;

package/dist/components/chart/pie-chart.stories.js

@@ -0,0 +1,26 @@
+import { html } from 'lit';
+const meta = {
+    title: 'Charts/Pie',
+    component: 'lyra-pie-chart',
+    tags: ['autodocs'],
+};
+export default meta;
+export const Default = {
+    render: () => {
+        const series = [
+            {
+                label: 'Browsers',
+                data: [58, 18, 15, 9],
+                color: ['#5b8def', '#f7b955', '#59c19a', '#b6b8c3'],
+            },
+        ];
+        return html `
+      <lyra-pie-chart
+        height="16rem"
+        style="width: 16rem"
+        .labels=${['Chrome', 'Firefox', 'Safari', 'Other']}
+        .datasets=${series}
+      ></lyra-pie-chart>
+    `;
+    },
+};

package/dist/components/chart/polar-area-chart.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;

package/dist/components/chart/polar-area-chart.stories.js

@@ -0,0 +1,20 @@
+import { html } from 'lit';
+const meta = {
+    title: 'Charts/PolarArea',
+    component: 'lyra-polar-area-chart',
+    tags: ['autodocs'],
+};
+export default meta;
+export const Default = {
+    render: () => {
+        const series = [{ label: 'Revenue', data: [12, 19, 14, 22] }];
+        return html `
+      <lyra-polar-area-chart
+        height="16rem"
+        style="width: 18rem"
+        .labels=${['Q1', 'Q2', 'Q3', 'Q4']}
+        .datasets=${series}
+      ></lyra-polar-area-chart>
+    `;
+    },
+};

package/dist/components/chart/radar-chart.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;

package/dist/components/chart/radar-chart.stories.js

@@ -0,0 +1,20 @@
+import { html } from 'lit';
+const meta = {
+    title: 'Charts/Radar',
+    component: 'lyra-radar-chart',
+    tags: ['autodocs'],
+};
+export default meta;
+export const Default = {
+    render: () => {
+        const series = [{ label: 'Model A', data: [80, 90, 70, 85, 75] }];
+        return html `
+      <lyra-radar-chart
+        height="16rem"
+        style="width: 22rem"
+        .labels=${['Speed', 'Reliability', 'Comfort', 'Safety', 'Efficiency']}
+        .datasets=${series}
+      ></lyra-radar-chart>
+    `;
+    },
+};

package/dist/components/chart/scatter-chart.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;

package/dist/components/chart/scatter-chart.stories.js

@@ -0,0 +1,31 @@
+import { html } from 'lit';
+const meta = {
+    title: 'Charts/Scatter',
+    component: 'lyra-scatter-chart',
+    tags: ['autodocs'],
+};
+export default meta;
+export const Default = {
+    render: () => {
+        const series = [
+            {
+                label: 'Samples',
+                points: [
+                    { x: 10, y: 20 },
+                    { x: 15, y: 10 },
+                    { x: 20, y: 30 },
+                    { x: 25, y: 15 },
+                ],
+            },
+        ];
+        return html `
+      <lyra-scatter-chart
+        height="16rem"
+        style="width: 22rem"
+        x-label="X"
+        y-label="Y"
+        .datasets=${series}
+      ></lyra-scatter-chart>
+    `;
+    },
+};

package/dist/components/combobox/combobox.d.ts

@@ -3,6 +3,15 @@ import { LyraElement } from '../../internal/lyra-element.js';
 import { LyraOption } from './option.js';
 import './option.js';
 export type OptionFilter = (option: LyraOption, query: string) => boolean;
+export interface ComboboxSourceRow {
+    value: string;
+    label: string;
+    sub?: string;
+    dotColor?: string;
+    group?: string;
+    disabled?: boolean;
+}
+export type ComboboxSource = (query: string) => Promise<ComboboxSourceRow[]>;
 /**
  * `<lyra-combobox>` — a filterable single/multi select that combines a text
  * input with a listbox. Mirrors the core `<wa-combobox>` API under `lyra-`.
@@ -51,6 +60,8 @@ export declare class LyraCombobox extends LyraElement {
     maxOptionsVisible: number;
     emptyText: string;
     filter: OptionFilter | null;
+    source: ComboboxSource | null;
+    maxRender: number;
     private query;
     private activeIndex;
     private options;
@@ -58,8 +69,15 @@ export declare class LyraCombobox extends LyraElement {
     private hasHintSlot;
     private hasErrorSlot;
     private hasLabelSlot;
+    private loading;
+    private asyncRows;
+    private sourceTimer?;
+    private sourceToken;
+    private _selectedLabelCache;
+    private _rowsByValue;
     private internals;
     private listId;
+    private inputId;
     private cleanup?;
     private _selected;
     private _defaultSelected;
@@ -80,22 +98,29 @@ export declare class LyraCombobox extends LyraElement {
     private collectOptions;
     private reflectSelected;
     private labelFor;
+    /** The current row set in a source-agnostic shape, before capping. */
+    private get effectiveRows();
+    /** `effectiveRows` capped to `maxRender`, always keeping the current selection visible. */
+    private get renderedRows();
     private get filtered();
     private get displayValue();
     private show;
     private hide;
     private onDocPointer;
     protected updated(changed: PropertyValues): void;
-    private pick;
+    private pickRow;
     private removeValue;
     private clear;
     private onInput;
+    private runSource;
     private onInputBlur;
     private onHintSlotChange;
     private onErrorSlotChange;
     private onLabelSlotChange;
     private onKeyDown;
     private onComboMouseDown;
+    private onListboxMouseDown;
+    private onListboxClick;
     private renderRows;
     render(): TemplateResult;
 }