@fusion.dev/helix 0.180.1 → 0.181.1
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/custom-elements.json +119 -4
- package/dist/bar-chart/root/bar-chart-root.css.js +8 -8
- package/dist/bar-chart/root/bar-chart-root.js +1 -1
- package/lint.json +1 -1
- package/package.json +6 -6
- package/types/jsx.d.ts +26 -2
- package/types/vue.d.ts +8 -0
package/custom-elements.json
CHANGED
|
@@ -10880,7 +10880,7 @@
|
|
|
10880
10880
|
{
|
|
10881
10881
|
"name": "bar",
|
|
10882
10882
|
"type": {
|
|
10883
|
-
"text": "(\n value: number,\n index: number,\n depth: number,\n tone: number,\n scale: (value: number) => number,\n from?: number,\n ) => TemplateResult"
|
|
10883
|
+
"text": "(\n value: number,\n index: number,\n depth: number,\n tone: number,\n scale: (value: number) => number,\n from?: number,\n end?: StackEnd,\n ) => TemplateResult"
|
|
10884
10884
|
}
|
|
10885
10885
|
}
|
|
10886
10886
|
],
|
|
@@ -11775,13 +11775,21 @@
|
|
|
11775
11775
|
}
|
|
11776
11776
|
},
|
|
11777
11777
|
{
|
|
11778
|
-
"description": "One column.",
|
|
11778
|
+
"description": "One column. Under `stacked`, one segment of a category's column.",
|
|
11779
11779
|
"name": "bar",
|
|
11780
11780
|
"inheritedFrom": {
|
|
11781
11781
|
"name": "HelixHeadlessBarChart",
|
|
11782
11782
|
"module": "src/bar-chart/root/bar-chart-root.ts"
|
|
11783
11783
|
}
|
|
11784
11784
|
},
|
|
11785
|
+
{
|
|
11786
|
+
"description": "Under `stacked`, the segment at a column's far end: the last positive segment above zero and the last negative one below it. Its `data-end` is `positive` or `negative`. A blank or a zero segment is never the end. Set together with `bar`.",
|
|
11787
|
+
"name": "bar-end",
|
|
11788
|
+
"inheritedFrom": {
|
|
11789
|
+
"name": "HelixHeadlessBarChart",
|
|
11790
|
+
"module": "src/bar-chart/root/bar-chart-root.ts"
|
|
11791
|
+
}
|
|
11792
|
+
},
|
|
11785
11793
|
{
|
|
11786
11794
|
"description": "The far stop of a bar's gradient, where one is used.",
|
|
11787
11795
|
"name": "bar-wash-end",
|
|
@@ -98362,6 +98370,20 @@
|
|
|
98362
98370
|
"module": "src/heatmap/root/heatmap-root.ts"
|
|
98363
98371
|
}
|
|
98364
98372
|
},
|
|
98373
|
+
{
|
|
98374
|
+
"kind": "field",
|
|
98375
|
+
"name": "selectionShape",
|
|
98376
|
+
"type": {
|
|
98377
|
+
"text": "'linear' | 'rectangle'"
|
|
98378
|
+
},
|
|
98379
|
+
"default": "'linear'",
|
|
98380
|
+
"description": "What Shift takes in under `selection-mode=\"multiple\"`: `linear`, every\ncell between two in the table's order, or `rectangle`, the cells between\ntwo corners by row and by column, as a spreadsheet selects a range.",
|
|
98381
|
+
"attribute": "selection-shape",
|
|
98382
|
+
"inheritedFrom": {
|
|
98383
|
+
"name": "HelixHeadlessHeatmap",
|
|
98384
|
+
"module": "src/heatmap/root/heatmap-root.ts"
|
|
98385
|
+
}
|
|
98386
|
+
},
|
|
98365
98387
|
{
|
|
98366
98388
|
"kind": "field",
|
|
98367
98389
|
"name": "stripLabel",
|
|
@@ -98531,6 +98553,48 @@
|
|
|
98531
98553
|
"module": "src/heatmap/root/heatmap-root.ts"
|
|
98532
98554
|
}
|
|
98533
98555
|
},
|
|
98556
|
+
{
|
|
98557
|
+
"kind": "field",
|
|
98558
|
+
"name": "left",
|
|
98559
|
+
"type": {
|
|
98560
|
+
"text": "number"
|
|
98561
|
+
},
|
|
98562
|
+
"privacy": "private",
|
|
98563
|
+
"default": "-1",
|
|
98564
|
+
"description": "The cell the keys rested on before the key now being handled moved them.",
|
|
98565
|
+
"inheritedFrom": {
|
|
98566
|
+
"name": "HelixHeadlessHeatmap",
|
|
98567
|
+
"module": "src/heatmap/root/heatmap-root.ts"
|
|
98568
|
+
}
|
|
98569
|
+
},
|
|
98570
|
+
{
|
|
98571
|
+
"kind": "field",
|
|
98572
|
+
"name": "base",
|
|
98573
|
+
"type": {
|
|
98574
|
+
"text": "string[] | undefined"
|
|
98575
|
+
},
|
|
98576
|
+
"privacy": "private",
|
|
98577
|
+
"default": "undefined",
|
|
98578
|
+
"description": "What a rectangle is added to: the selection when it was started, less its\nanchor, kept while `value` is still the rectangle last written.",
|
|
98579
|
+
"inheritedFrom": {
|
|
98580
|
+
"name": "HelixHeadlessHeatmap",
|
|
98581
|
+
"module": "src/heatmap/root/heatmap-root.ts"
|
|
98582
|
+
}
|
|
98583
|
+
},
|
|
98584
|
+
{
|
|
98585
|
+
"kind": "field",
|
|
98586
|
+
"name": "shaped",
|
|
98587
|
+
"type": {
|
|
98588
|
+
"text": "string | undefined"
|
|
98589
|
+
},
|
|
98590
|
+
"privacy": "private",
|
|
98591
|
+
"default": "undefined",
|
|
98592
|
+
"description": "The `value` the last rectangle wrote.",
|
|
98593
|
+
"inheritedFrom": {
|
|
98594
|
+
"name": "HelixHeadlessHeatmap",
|
|
98595
|
+
"module": "src/heatmap/root/heatmap-root.ts"
|
|
98596
|
+
}
|
|
98597
|
+
},
|
|
98534
98598
|
{
|
|
98535
98599
|
"kind": "field",
|
|
98536
98600
|
"name": "status",
|
|
@@ -98612,6 +98676,40 @@
|
|
|
98612
98676
|
"module": "src/heatmap/root/heatmap-root.ts"
|
|
98613
98677
|
}
|
|
98614
98678
|
},
|
|
98679
|
+
{
|
|
98680
|
+
"kind": "method",
|
|
98681
|
+
"name": "stretch",
|
|
98682
|
+
"privacy": "private",
|
|
98683
|
+
"return": {
|
|
98684
|
+
"type": {
|
|
98685
|
+
"text": "void"
|
|
98686
|
+
}
|
|
98687
|
+
},
|
|
98688
|
+
"parameters": [
|
|
98689
|
+
{
|
|
98690
|
+
"name": "to",
|
|
98691
|
+
"type": {
|
|
98692
|
+
"text": "number"
|
|
98693
|
+
}
|
|
98694
|
+
}
|
|
98695
|
+
],
|
|
98696
|
+
"description": "Selects the rectangle from the anchor to the drawn cell at `to`, beside\nwhat was selected before it started, under `selection-shape=\"rectangle\"`.\nWithout an anchor it starts where the keys were.",
|
|
98697
|
+
"inheritedFrom": {
|
|
98698
|
+
"name": "HelixHeadlessHeatmap",
|
|
98699
|
+
"module": "src/heatmap/root/heatmap-root.ts"
|
|
98700
|
+
}
|
|
98701
|
+
},
|
|
98702
|
+
{
|
|
98703
|
+
"kind": "field",
|
|
98704
|
+
"name": "onStripKeydown",
|
|
98705
|
+
"privacy": "private",
|
|
98706
|
+
"readonly": true,
|
|
98707
|
+
"description": "Notes where the keys rest before the pointer controller moves them.",
|
|
98708
|
+
"inheritedFrom": {
|
|
98709
|
+
"name": "HelixHeadlessHeatmap",
|
|
98710
|
+
"module": "src/heatmap/root/heatmap-root.ts"
|
|
98711
|
+
}
|
|
98712
|
+
},
|
|
98615
98713
|
{
|
|
98616
98714
|
"kind": "field",
|
|
98617
98715
|
"name": "onKeydown",
|
|
@@ -98628,7 +98726,7 @@
|
|
|
98628
98726
|
"name": "onClick",
|
|
98629
98727
|
"privacy": "private",
|
|
98630
98728
|
"readonly": true,
|
|
98631
|
-
"description": "A press on a cell selects it, under `selection-mode`.",
|
|
98729
|
+
"description": "A press on a cell selects it, under `selection-mode`, and Shift takes the\nrectangle to it under `selection-shape=\"rectangle\"`.",
|
|
98632
98730
|
"inheritedFrom": {
|
|
98633
98731
|
"name": "HelixHeadlessHeatmap",
|
|
98634
98732
|
"module": "src/heatmap/root/heatmap-root.ts"
|
|
@@ -99282,6 +99380,10 @@
|
|
|
99282
99380
|
"description": "Half hours of one day, drawn as tall, narrow cells like a status page.",
|
|
99283
99381
|
"slug": "hours"
|
|
99284
99382
|
},
|
|
99383
|
+
{
|
|
99384
|
+
"description": "Four weeks of commits, where Shift with an arrow or a click selects a rectangle of days.",
|
|
99385
|
+
"slug": "rectangle-selection"
|
|
99386
|
+
},
|
|
99285
99387
|
{
|
|
99286
99388
|
"description": "The same readings at three cell sizes, set with one custom property.",
|
|
99287
99389
|
"slug": "sizes"
|
|
@@ -99486,6 +99588,19 @@
|
|
|
99486
99588
|
"module": "src/heatmap/root/heatmap-root.ts"
|
|
99487
99589
|
}
|
|
99488
99590
|
},
|
|
99591
|
+
{
|
|
99592
|
+
"name": "selection-shape",
|
|
99593
|
+
"type": {
|
|
99594
|
+
"text": "'linear' | 'rectangle'"
|
|
99595
|
+
},
|
|
99596
|
+
"default": "'linear'",
|
|
99597
|
+
"description": "What Shift takes in under `selection-mode=\"multiple\"`: `linear`, every\ncell between two in the table's order, or `rectangle`, the cells between\ntwo corners by row and by column, as a spreadsheet selects a range.",
|
|
99598
|
+
"fieldName": "selectionShape",
|
|
99599
|
+
"inheritedFrom": {
|
|
99600
|
+
"name": "HelixHeadlessHeatmap",
|
|
99601
|
+
"module": "src/heatmap/root/heatmap-root.ts"
|
|
99602
|
+
}
|
|
99603
|
+
},
|
|
99489
99604
|
{
|
|
99490
99605
|
"name": "strip-label",
|
|
99491
99606
|
"type": {
|
|
@@ -251256,6 +251371,6 @@
|
|
|
251256
251371
|
],
|
|
251257
251372
|
"helix": {
|
|
251258
251373
|
"package": "@fusion.dev/helix",
|
|
251259
|
-
"version": "0.
|
|
251374
|
+
"version": "0.181.1"
|
|
251260
251375
|
}
|
|
251261
251376
|
}
|
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
export const styles = createSheet(`:host {display: grid;position: relative;gap: var(--bar-chart-gap, var(--helix-space-2xs));}[part="plot"] {position: relative;block-size: var(--bar-chart-block-size, 12em);}[part="plot"] svg {block-size: 100%;inline-size: 100%;overflow: visible;}[part="baseline"] {stroke: var(--helix-color-border);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke;}[part
|
|
3
|
-
[part="line"] {--_bar-chart-series: var(--chart-series);}[part="plot"]:has([data-active]) [part~="group"]:not([data-active]) {opacity: 0.45;}[part~="group"] {transition: opacity var(--helix-duration-fast) var(--helix-easing-decelerate);}[part
|
|
2
|
+
export const styles = createSheet(`:host {display: grid;position: relative;gap: var(--bar-chart-gap, var(--helix-space-2xs));}[part="plot"] {position: relative;block-size: var(--bar-chart-block-size, 12em);}[part="plot"] svg {block-size: 100%;inline-size: 100%;overflow: visible;}[part="baseline"] {stroke: var(--helix-color-border);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke;}[part~="bar"] {--_bar-chart-corners: var(--bar-chart-bar-radius, 2px) var(--bar-chart-bar-radius, 2px) 0 0;--_bar-chart-base: 0 0 calc(var(--bar-chart-bar-stroke, var(--helix-border-thick)) / 2) 0;clip-path: inset(var(--_bar-chart-foot, 0) round var(--_bar-chart-corners));fill: var(--_bar-chart-series);}:host([orientation="horizontal"]) [part~="bar"] {--_bar-chart-corners: 0 var(--bar-chart-bar-radius, 2px) var(--bar-chart-bar-radius, 2px) 0;--_bar-chart-base: 0 0 0 calc(var(--bar-chart-bar-stroke, var(--helix-border-thick)) / 2);}:host([stacked]) [part~="bar"]:not([part~="bar-end"]) {--_bar-chart-corners: 0;}:host([stacked]) [part~="bar-end"][data-end="negative"] {--_bar-chart-corners: 0 0 var(--bar-chart-bar-radius, 2px) var(--bar-chart-bar-radius, 2px);}:host([stacked][orientation="horizontal"]) [part~="bar-end"][data-end="negative"] {--_bar-chart-corners: var(--bar-chart-bar-radius, 2px) 0 0 var(--bar-chart-bar-radius, 2px);}[part="labels"] {display: grid;grid-auto-columns: 1fr;grid-auto-flow: column;}[part="label"] {color: var(--helix-color-foreground-muted);font-size: var(--helix-text-xs);overflow: hidden;text-align: center;text-overflow: ellipsis;white-space: nowrap;}:host([orientation="horizontal"]) {grid-template-columns: auto 1fr;}:host([orientation="horizontal"]) [part="labels"] {grid-column: 1;grid-row: 1;}:host([orientation="horizontal"]) [part="plot"] {grid-column: 2;grid-row: 1;}:host([orientation="horizontal"]) [part="labels"] {grid-auto-columns: auto;grid-auto-flow: row;grid-auto-rows: 1fr;}:host([orientation="horizontal"]) [part="label"] {align-self: center;text-align: end;}[part~="bar"],
|
|
3
|
+
[part="line"] {--_bar-chart-series: var(--chart-series);}[part="plot"]:has([data-active]) [part~="group"]:not([data-active]) {opacity: 0.45;}[part~="group"] {transition: opacity var(--helix-duration-fast) var(--helix-easing-decelerate);}[part~="bar"] {transition:
|
|
4
4
|
height var(--helix-duration-normal) var(--helix-easing-decelerate),
|
|
5
5
|
width var(--helix-duration-normal) var(--helix-easing-decelerate),
|
|
6
6
|
x var(--helix-duration-normal) var(--helix-easing-decelerate),
|
|
7
|
-
y var(--helix-duration-normal) var(--helix-easing-decelerate);}@starting-style {:host(:not([orientation="horizontal"])) [part
|
|
7
|
+
y var(--helix-duration-normal) var(--helix-easing-decelerate);}@starting-style {:host(:not([orientation="horizontal"])) [part~="bar"] {height: 0;y: 100;}:host([orientation="horizontal"]) [part~="bar"] {width: 0;}}[part="plot"] {cursor: crosshair;}[part="gridline"] {stroke: var(--bar-chart-gridline-color, var(--helix-color-border));stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke;}[part="band"] {fill: var(--bar-chart-band-color, var(--helix-color-surface-sunken));}[part="line"] {fill: none;stroke: var(--bar-chart-line-color, var(--_bar-chart-series, var(--helix-color-series-1)));stroke-linecap: round;stroke-linejoin: round;stroke-width: var(--bar-chart-line-width, var(--_chart-stroke));vector-effect: non-scaling-stroke;}:host([secondary]) {grid-template-columns: auto 1fr auto;}:host([secondary]) [part="axis"][data-axis="primary"] {grid-column: 1;grid-row: 1;}:host([secondary]) [part="plot"] {grid-column: 2;grid-row: 1;}[part="axis"][data-axis="secondary"] {--_bar-chart-axis-ink: color-mix(
|
|
8
8
|
in oklab,
|
|
9
9
|
var(--bar-chart-secondary) 45%,
|
|
10
10
|
var(--helix-color-foreground)
|
|
11
11
|
);color: var(--_bar-chart-axis-ink, var(--helix-color-foreground-subtle));}:host([secondary]) [part="axis"][data-axis="secondary"] {grid-column: 3;grid-row: 1;}:host([secondary]) [part="labels"] {grid-column: 2;grid-row: 2;}:host([orientation="horizontal"][secondary]) {grid-template-columns: auto 1fr;grid-template-rows: auto 1fr auto;}:host([orientation="horizontal"][secondary]) [part="axis"][data-axis="secondary"] {grid-column: 2;grid-row: 1;}:host([orientation="horizontal"][secondary]) [part="labels"] {grid-column: 1;grid-row: 2;}:host([orientation="horizontal"][secondary]) [part="plot"] {grid-column: 2;grid-row: 2;}:host([orientation="horizontal"][secondary]) [part="axis"][data-axis="primary"] {grid-column: 2;grid-row: 3;}:host([value-axis]:not([secondary]):not([orientation="horizontal"])) {grid-template-columns: auto 1fr;}:host([value-axis]:not([secondary]):not([orientation="horizontal"]))
|
|
12
12
|
[part="axis"][data-axis="primary"] {grid-column: 1;grid-row: 1;}:host([value-axis]:not([secondary]):not([orientation="horizontal"])) [part="plot"],
|
|
13
|
-
:host([value-axis]:not([secondary]):not([orientation="horizontal"])) [part="labels"] {grid-column: 2;}:host([value-axis][orientation="horizontal"]:not([secondary])) {grid-template-rows: 1fr auto;}:host([value-axis][orientation="horizontal"]:not([secondary])) [part="axis"][data-axis="primary"] {grid-column: 2;grid-row: 2;}[part="axis"] {color: var(--helix-color-foreground-subtle);font-size: var(--helix-text-xs);font-variant-numeric: tabular-nums;pointer-events: none;position: relative;}:host(:not([orientation="horizontal"])) [part="axis"] {inline-size: var(--bar-chart-axis, 3ch);}:host([orientation="horizontal"]) [part="axis"] {block-size: 1lh;}[part="tick"] {position: absolute;}:host(:not([orientation="horizontal"])) [part="tick"] {inset-inline-end: 0;translate: 0 -50%;}:host([orientation="horizontal"]) [part="tick"] {translate: -50% 0;}:host([orientation="horizontal"]:dir(rtl)) [part="tick"] {translate: 50% 0;}:host(:not([orientation="horizontal"])) [part="axis"][data-axis="secondary"] [part="tick"] {inset-inline-end: auto;inset-inline-start: 0;}[part
|
|
14
|
-
:host([emphasis="outlined"]) [part
|
|
15
|
-
:host([emphasis="subtle"]) [part
|
|
13
|
+
:host([value-axis]:not([secondary]):not([orientation="horizontal"])) [part="labels"] {grid-column: 2;}:host([value-axis][orientation="horizontal"]:not([secondary])) {grid-template-rows: 1fr auto;}:host([value-axis][orientation="horizontal"]:not([secondary])) [part="axis"][data-axis="primary"] {grid-column: 2;grid-row: 2;}[part="axis"] {color: var(--helix-color-foreground-subtle);font-size: var(--helix-text-xs);font-variant-numeric: tabular-nums;pointer-events: none;position: relative;}:host(:not([orientation="horizontal"])) [part="axis"] {inline-size: var(--bar-chart-axis, 3ch);}:host([orientation="horizontal"]) [part="axis"] {block-size: 1lh;}[part="tick"] {position: absolute;}:host(:not([orientation="horizontal"])) [part="tick"] {inset-inline-end: 0;translate: 0 -50%;}:host([orientation="horizontal"]) [part="tick"] {translate: -50% 0;}:host([orientation="horizontal"]:dir(rtl)) [part="tick"] {translate: 50% 0;}:host(:not([orientation="horizontal"])) [part="axis"][data-axis="secondary"] [part="tick"] {inset-inline-end: auto;inset-inline-start: 0;}[part~="bar"] {fill-opacity: calc(var(--_bar-chart-area, 1) * var(--_bar-chart-through, 1));stroke-opacity: var(--_bar-chart-through, 1);}[part~="bar"][data-emphasis="outlined"],
|
|
14
|
+
:host([emphasis="outlined"]) [part~="bar"]:not([data-emphasis]) {--_bar-chart-foot: var(--_bar-chart-base);fill: var(--_bar-chart-shade);stroke: var(--_bar-chart-series);stroke-width: var(--bar-chart-bar-stroke, var(--helix-border-thick));vector-effect: non-scaling-stroke;}[part~="bar"][data-emphasis="subtle"],
|
|
15
|
+
:host([emphasis="subtle"]) [part~="bar"]:not([data-emphasis]) {--_bar-chart-area: 0.2;--_bar-chart-foot: var(--_bar-chart-base);stroke: var(--_bar-chart-series);stroke-width: var(--bar-chart-bar-stroke, var(--helix-border-thick));vector-effect: non-scaling-stroke;}[part~="bar"] {--_bar-chart-shade: color-mix(
|
|
16
16
|
in oklab,
|
|
17
17
|
var(--_bar-chart-series) 60%,
|
|
18
18
|
var(--helix-color-background)
|
|
19
|
-
);}[part
|
|
20
|
-
:host([material="glass"]) [part
|
|
19
|
+
);}[part~="bar"][data-material="glass"],
|
|
20
|
+
:host([material="glass"]) [part~="bar"]:not([data-material]) {--_bar-chart-through: calc(0.62 * var(--helix-material-opacity));}:host([material="frosted"]) [part~="bar"]:not([data-material]) {--_bar-chart-through: calc(0.88 * var(--helix-material-opacity));}:host([wash="gradient"]) [part~="bar"] {fill: var(--chart-bar-wash);}[part="bar-wash-start"] {stop-color: var(--chart-series);stop-opacity: calc(1 * var(--helix-material-opacity));}[part="bar-wash-end"] {stop-color: var(--chart-series);stop-opacity: calc(0.35 * var(--helix-material-opacity));}@media print {:host {print-color-adjust: exact;}}[part="summary"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap;}`);
|
|
@@ -31,7 +31,7 @@ let HelixBarChart = class HelixBarChart extends HelixHeadlessBarChart {
|
|
|
31
31
|
const outlined = slots(this.outlined);
|
|
32
32
|
const subtle = slots(this.subtle);
|
|
33
33
|
const glass = slots(this.glass);
|
|
34
|
-
for (const bar of this.renderRoot.querySelectorAll('[part
|
|
34
|
+
for (const bar of this.renderRoot.querySelectorAll('[part~="bar"]')) {
|
|
35
35
|
const at = Number(bar.dataset.series);
|
|
36
36
|
mark(bar, 'emphasis', outlined.has(at) ? 'outlined' : subtle.has(at) ? 'subtle' : undefined);
|
|
37
37
|
mark(bar, 'material', glass.has(at) ? 'glass' : undefined);
|