@luxalgo/vela 0.7.7 → 0.8.0
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/{DataProvider-CGa4KHRa.d.cts → DataProvider-BrlxntPN.d.cts} +1 -1
- package/dist/{DataProvider-CmWUtDVL.d.ts → DataProvider-DwFIoV4r.d.ts} +1 -1
- package/dist/{chunk-WTWGEB7K.js → chunk-2IAETM2I.js} +260 -2
- package/dist/{chunk-CAFCLMPF.js → chunk-BZQM2XO7.js} +1 -0
- package/dist/{chunk-ZA2XWTGH.js → chunk-E3GU6AUI.js} +499 -43
- package/dist/{chunk-BFA32GOU.js → chunk-EZ5FWVLA.js} +5 -2
- package/dist/{chunk-PVGWNF7V.js → chunk-KA77UTRF.js} +2 -2
- package/dist/{chunk-RVQWJOEE.js → chunk-QBPUT5SU.js} +2862 -1034
- package/dist/{contributions-DF_Ea07m.d.cts → contributions-CtlptxR8.d.cts} +187 -5
- package/dist/{contributions-nKOSeLy8.d.ts → contributions-tjNExo1o.d.ts} +187 -5
- package/dist/index.cjs +3142 -1030
- package/dist/index.d.cts +40 -8
- package/dist/index.d.ts +40 -8
- package/dist/index.js +28 -4
- package/dist/{options-D1AJKsn_.d.ts → options-BnEPUuVV.d.cts} +1 -1
- package/dist/{options-D1AJKsn_.d.cts → options-BnEPUuVV.d.ts} +1 -1
- package/dist/{plugin-DPyVJFoA.d.cts → plugin-BWxJRKzS.d.cts} +31 -25
- package/dist/{plugin-0oFDnexb.d.ts → plugin-e2WUEtiI.d.ts} +31 -25
- package/dist/plugin.cjs +1 -0
- package/dist/plugin.d.cts +4 -4
- package/dist/plugin.d.ts +4 -4
- package/dist/plugin.js +2 -2
- package/dist/providers/binance.d.cts +2 -2
- package/dist/providers/binance.d.ts +2 -2
- package/dist/providers/coinbase.d.cts +2 -2
- package/dist/providers/coinbase.d.ts +2 -2
- package/dist/providers/hyperliquid.d.cts +2 -2
- package/dist/providers/hyperliquid.d.ts +2 -2
- package/dist/{statusline-model-DAFyqVmR.d.ts → statusline-model-DFY7tuHj.d.cts} +5 -3
- package/dist/{statusline-model-BoWJ3cWQ.d.cts → statusline-model-zKXtGIjj.d.ts} +5 -3
- package/dist/ui.cjs +263 -0
- package/dist/ui.d.cts +75 -2
- package/dist/ui.d.ts +75 -2
- package/dist/ui.js +3 -3
- package/dist/vela.global.js +3144 -1032
- package/dist/vela.global.min.js +78 -76
- package/dist/widget.cjs +3627 -1081
- package/dist/widget.d.cts +26 -7
- package/dist/widget.d.ts +26 -7
- package/dist/widget.js +7 -7
- package/dist/workspace.cjs +3630 -1081
- package/dist/workspace.d.cts +126 -6
- package/dist/workspace.d.ts +126 -6
- package/dist/workspace.js +6 -6
- package/package.json +1 -1
package/dist/plugin.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import './chunk-JU4CWEBF.js';
|
|
2
|
-
export { DEFAULT_PANEL_MAX_WIDTH, DEFAULT_PANEL_MIN_WIDTH, DEFAULT_PANEL_WIDTH, OVERRIDABLE_TOPBAR_IDS, chartType, chartTypes, clampPanelWidth, drawingTypes, getDrawingType, getNativeIndicator, inputDeltas, inputVisible, legendActions, legendCallouts, nativeIndicatorTypes, normalizeSettingsRow, registerChartType, registerDefaultEngine, registerLegendAction, registerLegendCallout, registerNativeIndicator, registerRendererDefaults, registerRendererLayer, registerSidePanel, registerStatePersistence, registerSymbolRanking, registerWidgetAction, registerWidgetAttachment, rendererDefaults, rendererLayers, resolveEngines, seriesInScale, seriesShownOn, settingsRowValueKeys, sidePanels, stableSeriesId, statePersistenceHandlers, symbolRanking, tickerModifierIds, topbarActionOverride, unregisterChartType, unregisterDefaultEngine, unregisterLegendAction, unregisterLegendCallout, unregisterNativeIndicator, unregisterRendererDefaults, unregisterRendererLayer, unregisterSidePanel, unregisterStatePersistence, unregisterWidgetAction, unregisterWidgetAttachment, widgetActions, widgetAttachments } from './chunk-
|
|
3
|
-
export { ACCENT, ACCENT_BRIGHT, BEARISH, BULLISH, CATEGORICAL, CHIP_PLATE, CROSSHAIR, HIGHLIGHT, INFO, INVALID, MARKER, NEUTRAL, SERIES_LINE, SESSION_OFF, SESSION_POST, SESSION_PRE, SLATE, SLATE_DEEP, TRADE_EXIT, TRADE_LONG, TRADE_SHORT, VALID, WARNING, categoricalColor, iconMarkup, registerIcon } from './chunk-
|
|
2
|
+
export { DEFAULT_PANEL_MAX_WIDTH, DEFAULT_PANEL_MIN_WIDTH, DEFAULT_PANEL_WIDTH, OVERRIDABLE_TOPBAR_IDS, chartType, chartTypes, clampPanelWidth, drawingTypes, getDrawingType, getNativeIndicator, inputDeltas, inputVisible, legendActions, legendCallouts, nativeIndicatorTypes, normalizeSettingsRow, registerChartType, registerDefaultEngine, registerLegendAction, registerLegendCallout, registerNativeIndicator, registerRendererDefaults, registerRendererLayer, registerSidePanel, registerStatePersistence, registerSymbolRanking, registerWidgetAction, registerWidgetAttachment, rendererDefaults, rendererLayers, resolveEngines, seriesInScale, seriesShownOn, settingsRowValueKeys, sidePanels, stableSeriesId, statePersistenceHandlers, symbolRanking, tickerModifierIds, topbarActionOverride, unregisterChartType, unregisterDefaultEngine, unregisterLegendAction, unregisterLegendCallout, unregisterNativeIndicator, unregisterRendererDefaults, unregisterRendererLayer, unregisterSidePanel, unregisterStatePersistence, unregisterWidgetAction, unregisterWidgetAttachment, widgetActions, widgetAttachments } from './chunk-EZ5FWVLA.js';
|
|
3
|
+
export { ACCENT, ACCENT_BRIGHT, BEARISH, BULLISH, CATEGORICAL, CHIP_PLATE, CROSSHAIR, HIGHLIGHT, INFO, INVALID, MARKER, NEUTRAL, SERIES_LINE, SESSION_OFF, SESSION_POST, SESSION_PRE, SLATE, SLATE_DEEP, TRADE_EXIT, TRADE_LONG, TRADE_SHORT, VALID, WARNING, categoricalColor, iconMarkup, registerIcon } from './chunk-BZQM2XO7.js';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { O as OHLCV, U as Unsubscribe } from '../options-
|
|
2
|
-
import { D as DataProvider, P as ProviderInfo, B as BarRange, S as SymbolInfo, a as SymbolDescriptor } from '../DataProvider-
|
|
1
|
+
import { O as OHLCV, U as Unsubscribe } from '../options-BnEPUuVV.cjs';
|
|
2
|
+
import { D as DataProvider, P as ProviderInfo, B as BarRange, S as SymbolInfo, a as SymbolDescriptor } from '../DataProvider-BrlxntPN.cjs';
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
5
|
* Binance market-data provider, built from scratch on the public REST + WebSocket
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { O as OHLCV, U as Unsubscribe } from '../options-
|
|
2
|
-
import { D as DataProvider, P as ProviderInfo, B as BarRange, S as SymbolInfo, a as SymbolDescriptor } from '../DataProvider-
|
|
1
|
+
import { O as OHLCV, U as Unsubscribe } from '../options-BnEPUuVV.js';
|
|
2
|
+
import { D as DataProvider, P as ProviderInfo, B as BarRange, S as SymbolInfo, a as SymbolDescriptor } from '../DataProvider-DwFIoV4r.js';
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
5
|
* Binance market-data provider, built from scratch on the public REST + WebSocket
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { O as OHLCV, U as Unsubscribe } from '../options-
|
|
2
|
-
import { D as DataProvider, P as ProviderInfo, B as BarRange, S as SymbolInfo, a as SymbolDescriptor } from '../DataProvider-
|
|
1
|
+
import { O as OHLCV, U as Unsubscribe } from '../options-BnEPUuVV.cjs';
|
|
2
|
+
import { D as DataProvider, P as ProviderInfo, B as BarRange, S as SymbolInfo, a as SymbolDescriptor } from '../DataProvider-BrlxntPN.cjs';
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
5
|
* Coinbase market-data provider, built from scratch on the public Exchange REST + WebSocket APIs
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { O as OHLCV, U as Unsubscribe } from '../options-
|
|
2
|
-
import { D as DataProvider, P as ProviderInfo, B as BarRange, S as SymbolInfo, a as SymbolDescriptor } from '../DataProvider-
|
|
1
|
+
import { O as OHLCV, U as Unsubscribe } from '../options-BnEPUuVV.js';
|
|
2
|
+
import { D as DataProvider, P as ProviderInfo, B as BarRange, S as SymbolInfo, a as SymbolDescriptor } from '../DataProvider-DwFIoV4r.js';
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
5
|
* Coinbase market-data provider, built from scratch on the public Exchange REST + WebSocket APIs
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { O as OHLCV, U as Unsubscribe } from '../options-
|
|
2
|
-
import { D as DataProvider, P as ProviderInfo, B as BarRange, S as SymbolInfo, a as SymbolDescriptor } from '../DataProvider-
|
|
1
|
+
import { O as OHLCV, U as Unsubscribe } from '../options-BnEPUuVV.cjs';
|
|
2
|
+
import { D as DataProvider, P as ProviderInfo, B as BarRange, S as SymbolInfo, a as SymbolDescriptor } from '../DataProvider-BrlxntPN.cjs';
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
5
|
* Hyperliquid market-data provider, built from scratch on the public info API — no
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { O as OHLCV, U as Unsubscribe } from '../options-
|
|
2
|
-
import { D as DataProvider, P as ProviderInfo, B as BarRange, S as SymbolInfo, a as SymbolDescriptor } from '../DataProvider-
|
|
1
|
+
import { O as OHLCV, U as Unsubscribe } from '../options-BnEPUuVV.js';
|
|
2
|
+
import { D as DataProvider, P as ProviderInfo, B as BarRange, S as SymbolInfo, a as SymbolDescriptor } from '../DataProvider-DwFIoV4r.js';
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
5
|
* Hyperliquid market-data provider, built from scratch on the public info API — no
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { D as DataProvider } from './DataProvider-
|
|
2
|
-
import { S as ScriptingEngine, V as Vela } from './contributions-
|
|
3
|
-
import { W as WallClock, V as VisibleRangePreset } from './options-
|
|
1
|
+
import { D as DataProvider } from './DataProvider-BrlxntPN.cjs';
|
|
2
|
+
import { S as ScriptingEngine, V as Vela } from './contributions-CtlptxR8.cjs';
|
|
3
|
+
import { W as WallClock, V as VisibleRangePreset } from './options-BnEPUuVV.cjs';
|
|
4
4
|
|
|
5
5
|
/** The linkable dimensions. `crosshair` mirrors the pointer time onto same-group
|
|
6
6
|
* cells as GHOST crosshairs (renderers without the optional `setExternalCrosshair`
|
|
@@ -58,6 +58,8 @@ interface CellState {
|
|
|
58
58
|
session?: string;
|
|
59
59
|
/** Symbol watermark visibility — a per-chart display pref. */
|
|
60
60
|
watermark?: boolean;
|
|
61
|
+
/** The "Replay" line under the watermark while replaying — a per-chart display pref. */
|
|
62
|
+
replayWatermark?: boolean;
|
|
61
63
|
/** Indicator titles (the in-chart legend rows) visibility — a per-chart display pref. */
|
|
62
64
|
indicatorTitles?: boolean;
|
|
63
65
|
/** Plot values beside the legend titles visibility — a per-chart display pref. */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { D as DataProvider } from './DataProvider-
|
|
2
|
-
import { S as ScriptingEngine, V as Vela } from './contributions-
|
|
3
|
-
import { W as WallClock, V as VisibleRangePreset } from './options-
|
|
1
|
+
import { D as DataProvider } from './DataProvider-DwFIoV4r.js';
|
|
2
|
+
import { S as ScriptingEngine, V as Vela } from './contributions-tjNExo1o.js';
|
|
3
|
+
import { W as WallClock, V as VisibleRangePreset } from './options-BnEPUuVV.js';
|
|
4
4
|
|
|
5
5
|
/** The linkable dimensions. `crosshair` mirrors the pointer time onto same-group
|
|
6
6
|
* cells as GHOST crosshairs (renderers without the optional `setExternalCrosshair`
|
|
@@ -58,6 +58,8 @@ interface CellState {
|
|
|
58
58
|
session?: string;
|
|
59
59
|
/** Symbol watermark visibility — a per-chart display pref. */
|
|
60
60
|
watermark?: boolean;
|
|
61
|
+
/** The "Replay" line under the watermark while replaying — a per-chart display pref. */
|
|
62
|
+
replayWatermark?: boolean;
|
|
61
63
|
/** Indicator titles (the in-chart legend rows) visibility — a per-chart display pref. */
|
|
62
64
|
indicatorTitles?: boolean;
|
|
63
65
|
/** Plot values beside the legend titles visibility — a per-chart display pref. */
|
package/dist/ui.cjs
CHANGED
|
@@ -309,6 +309,7 @@ registerIcon("chevron-down", S('<path d="M3.5 6 8 10.5 12.5 6"/>'));
|
|
|
309
309
|
registerIcon("chevron-up", S('<path d="M3.5 10 8 5.5 12.5 10"/>'));
|
|
310
310
|
registerIcon("chevrons-right", S('<path d="m4 3.5 4.5 4.5L4 12.5"/><path d="m8.5 3.5 4.5 4.5-4.5 4.5"/>'));
|
|
311
311
|
registerIcon("chevrons-left", S('<path d="M12 3.5 7.5 8l4.5 4.5"/><path d="M7.5 3.5 3 8l4.5 4.5"/>'));
|
|
312
|
+
registerIcon("replay", S('<path d="M14 4.2v7.6L8.6 8z"/><path d="M7.4 4.2v7.6L2 8z"/>'));
|
|
312
313
|
registerIcon("check", S('<path d="m2.8 8.4 3.4 3.4 7-7.6"/>'));
|
|
313
314
|
registerIcon("close", S('<path d="m3.8 3.8 8.4 8.4M12.2 3.8l-8.4 8.4"/>'));
|
|
314
315
|
registerIcon("pin", S('<path d="M5.6 2.5h4.8M6.4 2.5v3.6L4.4 8.4v.9h7.2v-.9L9.6 6.1V2.5M8 9.3v4.2"/>'));
|
|
@@ -3654,6 +3655,264 @@ var CalloutBubble = class {
|
|
|
3654
3655
|
}
|
|
3655
3656
|
};
|
|
3656
3657
|
|
|
3658
|
+
// src/ui/components/date-picker/controller.ts
|
|
3659
|
+
var MONTH_LABELS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
|
|
3660
|
+
var MONTH_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
|
|
3661
|
+
var WEEKDAY_LABELS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
|
|
3662
|
+
function isoDate(d) {
|
|
3663
|
+
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
|
|
3664
|
+
}
|
|
3665
|
+
function normalizeDateInput(raw) {
|
|
3666
|
+
const m = /^(\d{4})-(\d{1,2})-(\d{1,2})$/.exec(raw.trim());
|
|
3667
|
+
if (!m) return null;
|
|
3668
|
+
const y = Number(m[1]);
|
|
3669
|
+
const mo = Number(m[2]);
|
|
3670
|
+
const d = Number(m[3]);
|
|
3671
|
+
const dt = new Date(y, mo - 1, d);
|
|
3672
|
+
if (dt.getFullYear() !== y || dt.getMonth() !== mo - 1 || dt.getDate() !== d) return null;
|
|
3673
|
+
return isoDate(dt);
|
|
3674
|
+
}
|
|
3675
|
+
function parseIsoDate(raw) {
|
|
3676
|
+
const iso = raw ? normalizeDateInput(raw) : null;
|
|
3677
|
+
if (!iso) return null;
|
|
3678
|
+
const [y, mo, d] = iso.split("-").map(Number);
|
|
3679
|
+
return new Date(y, mo - 1, d);
|
|
3680
|
+
}
|
|
3681
|
+
function datePickerController(opts = {}) {
|
|
3682
|
+
const today = opts.today ?? /* @__PURE__ */ new Date();
|
|
3683
|
+
let selected = parseIsoDate(opts.value);
|
|
3684
|
+
let year = selected?.getFullYear() ?? today.getFullYear();
|
|
3685
|
+
let month = selected?.getMonth() ?? today.getMonth();
|
|
3686
|
+
let panel = "date";
|
|
3687
|
+
const decade = () => Math.floor(year / 10) * 10;
|
|
3688
|
+
return {
|
|
3689
|
+
get panel() {
|
|
3690
|
+
return panel;
|
|
3691
|
+
},
|
|
3692
|
+
get year() {
|
|
3693
|
+
return year;
|
|
3694
|
+
},
|
|
3695
|
+
get month() {
|
|
3696
|
+
return month;
|
|
3697
|
+
},
|
|
3698
|
+
get value() {
|
|
3699
|
+
return selected ? isoDate(selected) : null;
|
|
3700
|
+
},
|
|
3701
|
+
header() {
|
|
3702
|
+
return {
|
|
3703
|
+
month: MONTH_LABELS[month] ?? "",
|
|
3704
|
+
monthVisible: panel === "date",
|
|
3705
|
+
year: panel === "year" ? `${decade()}-${decade() + 9}` : String(year),
|
|
3706
|
+
yearDisabled: panel === "year"
|
|
3707
|
+
// in the decade panel the year reads as its title
|
|
3708
|
+
};
|
|
3709
|
+
},
|
|
3710
|
+
navLabels() {
|
|
3711
|
+
if (panel === "date") return { prev: "Previous month", next: "Next month" };
|
|
3712
|
+
if (panel === "month") return { prev: "Previous year", next: "Next year" };
|
|
3713
|
+
return { prev: "Previous decade", next: "Next decade" };
|
|
3714
|
+
},
|
|
3715
|
+
cells() {
|
|
3716
|
+
const out = [];
|
|
3717
|
+
if (panel === "date") {
|
|
3718
|
+
const startPad = new Date(year, month, 1).getDay();
|
|
3719
|
+
const days = new Date(year, month + 1, 0).getDate();
|
|
3720
|
+
const todayIso = isoDate(today);
|
|
3721
|
+
const selectedIso = selected ? isoDate(selected) : "";
|
|
3722
|
+
for (let i = 0; i < startPad; i++) out.push({ label: "", value: "", checked: false, today: false, blank: true });
|
|
3723
|
+
for (let day = 1; day <= days; day++) {
|
|
3724
|
+
const iso = `${year}-${String(month + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
|
|
3725
|
+
out.push({ label: String(day), value: iso, checked: iso === selectedIso, today: iso === todayIso });
|
|
3726
|
+
}
|
|
3727
|
+
return out;
|
|
3728
|
+
}
|
|
3729
|
+
if (panel === "month") {
|
|
3730
|
+
for (let m = 0; m < 12; m++) {
|
|
3731
|
+
out.push({
|
|
3732
|
+
label: MONTH_SHORT[m] ?? "",
|
|
3733
|
+
value: m,
|
|
3734
|
+
checked: selected?.getFullYear() === year && selected.getMonth() === m,
|
|
3735
|
+
today: today.getFullYear() === year && today.getMonth() === m
|
|
3736
|
+
});
|
|
3737
|
+
}
|
|
3738
|
+
return out;
|
|
3739
|
+
}
|
|
3740
|
+
const d = decade();
|
|
3741
|
+
for (let y = d - 1; y <= d + 10; y++) {
|
|
3742
|
+
out.push({ label: String(y), value: y, checked: selected?.getFullYear() === y, today: today.getFullYear() === y, outside: y < d || y > d + 9 });
|
|
3743
|
+
}
|
|
3744
|
+
return out;
|
|
3745
|
+
},
|
|
3746
|
+
step(dir) {
|
|
3747
|
+
if (panel === "date") {
|
|
3748
|
+
month += dir;
|
|
3749
|
+
if (month < 0) {
|
|
3750
|
+
month = 11;
|
|
3751
|
+
year -= 1;
|
|
3752
|
+
}
|
|
3753
|
+
if (month > 11) {
|
|
3754
|
+
month = 0;
|
|
3755
|
+
year += 1;
|
|
3756
|
+
}
|
|
3757
|
+
} else {
|
|
3758
|
+
year += panel === "month" ? dir : dir * 10;
|
|
3759
|
+
}
|
|
3760
|
+
},
|
|
3761
|
+
showMonths() {
|
|
3762
|
+
panel = "month";
|
|
3763
|
+
},
|
|
3764
|
+
showYears() {
|
|
3765
|
+
panel = "year";
|
|
3766
|
+
},
|
|
3767
|
+
choose(cell) {
|
|
3768
|
+
if (cell.blank) return null;
|
|
3769
|
+
if (panel === "date") {
|
|
3770
|
+
selected = parseIsoDate(String(cell.value));
|
|
3771
|
+
return selected ? isoDate(selected) : null;
|
|
3772
|
+
}
|
|
3773
|
+
if (panel === "month") {
|
|
3774
|
+
month = Number(cell.value);
|
|
3775
|
+
panel = "date";
|
|
3776
|
+
return null;
|
|
3777
|
+
}
|
|
3778
|
+
year = Number(cell.value);
|
|
3779
|
+
panel = "month";
|
|
3780
|
+
return null;
|
|
3781
|
+
},
|
|
3782
|
+
setValue(value) {
|
|
3783
|
+
selected = parseIsoDate(value);
|
|
3784
|
+
if (selected) {
|
|
3785
|
+
year = selected.getFullYear();
|
|
3786
|
+
month = selected.getMonth();
|
|
3787
|
+
}
|
|
3788
|
+
panel = "date";
|
|
3789
|
+
}
|
|
3790
|
+
};
|
|
3791
|
+
}
|
|
3792
|
+
|
|
3793
|
+
// src/ui/components/date-picker/styles.ts
|
|
3794
|
+
var DATE_PICKER_STYLE_ID = "vela-date-picker-styles";
|
|
3795
|
+
var DATE_PICKER_CSS = `
|
|
3796
|
+
.vela-date-picker{color:var(--vela-fg);font:14px var(--vela-font);user-select:none;}
|
|
3797
|
+
.vela-date-picker [hidden]{display:none !important;}
|
|
3798
|
+
.vela-date-picker-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;}
|
|
3799
|
+
.vela-date-picker-title{flex:1;display:flex;align-items:center;justify-content:center;gap:2px;min-width:0;}
|
|
3800
|
+
.vela-date-picker-switch{border:none;background:transparent;color:var(--vela-fg-bright);font:inherit;font-weight:600;font-size:14px;padding:2px 6px;border-radius:4px;cursor:pointer;}
|
|
3801
|
+
.vela-date-picker-switch:not(:disabled):hover{background:var(--vela-hover);}
|
|
3802
|
+
.vela-date-picker-switch:disabled{cursor:default;}
|
|
3803
|
+
.vela-date-picker-nav{width:24px;height:24px;border:none;background:transparent;color:var(--vela-fg-muted);border-radius:4px;padding:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:14px;}
|
|
3804
|
+
.vela-date-picker-nav:hover{background:var(--vela-hover);color:var(--vela-fg-bright);}
|
|
3805
|
+
.vela-date-picker-week,.vela-date-picker-grid{display:grid;grid-template-columns:repeat(7,28px);gap:2px;}
|
|
3806
|
+
.vela-date-picker-week{margin-bottom:4px;color:var(--vela-fg-muted);font-size:11px;text-align:center;}
|
|
3807
|
+
.vela-date-picker-week span{line-height:20px;}
|
|
3808
|
+
.vela-date-picker-blank{width:28px;height:28px;}
|
|
3809
|
+
.vela-date-picker-day{width:28px;height:28px;border:none;background:transparent;color:inherit;border-radius:4px;padding:0;cursor:pointer;font:inherit;font-size:14px;}
|
|
3810
|
+
.vela-date-picker-day:hover{background:var(--vela-hover);}
|
|
3811
|
+
.vela-date-picker-day[data-checked]{background:var(--vela-hover-strong);color:var(--vela-fg-bright);}
|
|
3812
|
+
.vela-date-picker-day[data-today]:not([data-checked]){box-shadow:inset 0 0 0 1px var(--vela-border-strong);}
|
|
3813
|
+
.vela-date-picker-cells{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;width:calc(7 * 28px + 6 * 2px);}
|
|
3814
|
+
.vela-date-picker-cell{height:36px;border:none;background:transparent;color:inherit;border-radius:4px;padding:0 4px;cursor:pointer;font:inherit;font-size:14px;}
|
|
3815
|
+
.vela-date-picker-cell:hover{background:var(--vela-hover);}
|
|
3816
|
+
.vela-date-picker-cell[data-checked]{background:var(--vela-hover-strong);color:var(--vela-fg-bright);}
|
|
3817
|
+
.vela-date-picker-cell[data-today]:not([data-checked]){box-shadow:inset 0 0 0 1px var(--vela-border-strong);}
|
|
3818
|
+
.vela-date-picker-cell[data-outside]{opacity:0.45;}
|
|
3819
|
+
`;
|
|
3820
|
+
|
|
3821
|
+
// src/ui/components/date-picker/view.ts
|
|
3822
|
+
var DatePicker = class {
|
|
3823
|
+
constructor(opts = {}) {
|
|
3824
|
+
this.opts = opts;
|
|
3825
|
+
const doc = document;
|
|
3826
|
+
injectStyles(DATE_PICKER_STYLE_ID, DATE_PICKER_CSS, doc);
|
|
3827
|
+
this.ctrl = datePickerController(opts);
|
|
3828
|
+
const button = (className) => {
|
|
3829
|
+
const b = doc.createElement("button");
|
|
3830
|
+
b.type = "button";
|
|
3831
|
+
b.className = className;
|
|
3832
|
+
return b;
|
|
3833
|
+
};
|
|
3834
|
+
this.prev = button("vela-date-picker-nav");
|
|
3835
|
+
this.prev.append(iconEl("chevron-left", doc));
|
|
3836
|
+
this.next = button("vela-date-picker-nav");
|
|
3837
|
+
this.next.append(iconEl("chevron-right", doc));
|
|
3838
|
+
this.monthBtn = button("vela-date-picker-switch");
|
|
3839
|
+
this.monthBtn.setAttribute("aria-label", "Choose month");
|
|
3840
|
+
this.yearBtn = button("vela-date-picker-switch");
|
|
3841
|
+
this.yearBtn.setAttribute("aria-label", "Choose year");
|
|
3842
|
+
const title = doc.createElement("div");
|
|
3843
|
+
title.className = "vela-date-picker-title";
|
|
3844
|
+
title.append(this.monthBtn, this.yearBtn);
|
|
3845
|
+
const head = doc.createElement("div");
|
|
3846
|
+
head.className = "vela-date-picker-head";
|
|
3847
|
+
head.append(this.prev, title, this.next);
|
|
3848
|
+
this.week = doc.createElement("div");
|
|
3849
|
+
this.week.className = "vela-date-picker-week";
|
|
3850
|
+
for (const d of WEEKDAY_LABELS) {
|
|
3851
|
+
const cell = doc.createElement("span");
|
|
3852
|
+
cell.textContent = d;
|
|
3853
|
+
this.week.appendChild(cell);
|
|
3854
|
+
}
|
|
3855
|
+
this.grid = doc.createElement("div");
|
|
3856
|
+
const on = (el, run) => el.addEventListener("click", (e) => {
|
|
3857
|
+
e.stopPropagation();
|
|
3858
|
+
run();
|
|
3859
|
+
this.paint();
|
|
3860
|
+
});
|
|
3861
|
+
on(this.prev, () => this.ctrl.step(-1));
|
|
3862
|
+
on(this.next, () => this.ctrl.step(1));
|
|
3863
|
+
on(this.monthBtn, () => this.ctrl.showMonths());
|
|
3864
|
+
on(this.yearBtn, () => this.ctrl.showYears());
|
|
3865
|
+
this.el = doc.createElement("div");
|
|
3866
|
+
this.el.className = "vela-date-picker";
|
|
3867
|
+
this.el.append(head, this.week, this.grid);
|
|
3868
|
+
this.paint();
|
|
3869
|
+
}
|
|
3870
|
+
get value() {
|
|
3871
|
+
return this.ctrl.value;
|
|
3872
|
+
}
|
|
3873
|
+
/** Rewrite the selection without emitting (the calendar opens on its month). */
|
|
3874
|
+
setValue(value) {
|
|
3875
|
+
this.ctrl.setValue(value);
|
|
3876
|
+
this.paint();
|
|
3877
|
+
}
|
|
3878
|
+
paint() {
|
|
3879
|
+
const doc = this.el.ownerDocument;
|
|
3880
|
+
const h = this.ctrl.header();
|
|
3881
|
+
this.monthBtn.hidden = !h.monthVisible;
|
|
3882
|
+
this.monthBtn.textContent = h.month;
|
|
3883
|
+
this.yearBtn.textContent = h.year;
|
|
3884
|
+
this.yearBtn.disabled = h.yearDisabled;
|
|
3885
|
+
const nav = this.ctrl.navLabels();
|
|
3886
|
+
this.prev.setAttribute("aria-label", nav.prev);
|
|
3887
|
+
this.next.setAttribute("aria-label", nav.next);
|
|
3888
|
+
const dates = this.ctrl.panel === "date";
|
|
3889
|
+
this.week.hidden = !dates;
|
|
3890
|
+
this.grid.className = dates ? "vela-date-picker-grid" : "vela-date-picker-cells";
|
|
3891
|
+
this.grid.replaceChildren(...this.ctrl.cells().map((cell) => this.cellEl(doc, cell, dates)));
|
|
3892
|
+
}
|
|
3893
|
+
cellEl(doc, cell, dates) {
|
|
3894
|
+
if (cell.blank) {
|
|
3895
|
+
const blank = doc.createElement("span");
|
|
3896
|
+
blank.className = "vela-date-picker-blank";
|
|
3897
|
+
return blank;
|
|
3898
|
+
}
|
|
3899
|
+
const b = doc.createElement("button");
|
|
3900
|
+
b.type = "button";
|
|
3901
|
+
b.className = dates ? "vela-date-picker-day" : "vela-date-picker-cell";
|
|
3902
|
+
b.textContent = cell.label;
|
|
3903
|
+
if (cell.checked) b.dataset.checked = "1";
|
|
3904
|
+
if (cell.today) b.dataset.today = "1";
|
|
3905
|
+
if (cell.outside) b.dataset.outside = "1";
|
|
3906
|
+
b.addEventListener("click", (e) => {
|
|
3907
|
+
e.stopPropagation();
|
|
3908
|
+
const picked = this.ctrl.choose(cell);
|
|
3909
|
+
if (picked) this.opts.onPick?.(picked);
|
|
3910
|
+
else this.paint();
|
|
3911
|
+
});
|
|
3912
|
+
return b;
|
|
3913
|
+
}
|
|
3914
|
+
};
|
|
3915
|
+
|
|
3657
3916
|
Object.defineProperty(exports, "normalizeProps", {
|
|
3658
3917
|
enumerable: true,
|
|
3659
3918
|
get: function () { return vanilla.normalizeProps; }
|
|
@@ -3666,6 +3925,7 @@ exports.CALLOUT_CSS = CALLOUT_CSS;
|
|
|
3666
3925
|
exports.CALLOUT_STYLE_ID = CALLOUT_STYLE_ID;
|
|
3667
3926
|
exports.CalloutBubble = CalloutBubble;
|
|
3668
3927
|
exports.ColorField = ColorField;
|
|
3928
|
+
exports.DatePicker = DatePicker;
|
|
3669
3929
|
exports.Dialog = Dialog;
|
|
3670
3930
|
exports.Drawer = Drawer;
|
|
3671
3931
|
exports.FIELD_FOCUS_CSS = FIELD_FOCUS_CSS;
|
|
@@ -3697,6 +3957,7 @@ exports.closesPanel = closesPanel;
|
|
|
3697
3957
|
exports.colorField = colorField;
|
|
3698
3958
|
exports.colorPickerController = colorPickerController;
|
|
3699
3959
|
exports.combineColor = combineColor;
|
|
3960
|
+
exports.datePickerController = datePickerController;
|
|
3700
3961
|
exports.decorateSelectScroll = decorateSelectScroll;
|
|
3701
3962
|
exports.dialogController = dialogController;
|
|
3702
3963
|
exports.drawerController = drawerController;
|
|
@@ -3716,9 +3977,11 @@ exports.injectStyles = injectStyles;
|
|
|
3716
3977
|
exports.insetRect = insetRect;
|
|
3717
3978
|
exports.intersectRects = intersectRects;
|
|
3718
3979
|
exports.isPopoverOpen = isPopoverOpen;
|
|
3980
|
+
exports.isoDate = isoDate;
|
|
3719
3981
|
exports.lineWidthGlyph = lineWidthGlyph;
|
|
3720
3982
|
exports.menuController = menuController;
|
|
3721
3983
|
exports.nextUid = nextUid;
|
|
3984
|
+
exports.normalizeDateInput = normalizeDateInput;
|
|
3722
3985
|
exports.numberInputController = numberInputController;
|
|
3723
3986
|
exports.openPopoverTrigger = openPopoverTrigger;
|
|
3724
3987
|
exports.openSelectList = openSelectList;
|
package/dist/ui.d.cts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { c as VelaTheme } from './options-
|
|
1
|
+
import { c as VelaTheme } from './options-BnEPUuVV.cjs';
|
|
2
2
|
import { MachineSchema, Service, Machine } from '@zag-js/core';
|
|
3
3
|
export { a as KeyBindingDescriptor, K as KeymapManager, b as KeymapOptions, R as ResolvedBinding } from './keymap-CGOz5F5f.cjs';
|
|
4
4
|
import * as tooltip from '@zag-js/tooltip';
|
|
@@ -998,4 +998,77 @@ declare class CalloutBubble {
|
|
|
998
998
|
declare const CALLOUT_STYLE_ID = "vela-ui-callout-bubble";
|
|
999
999
|
declare const CALLOUT_CSS = "\n.vela-callout {\n display: inline-grid;\n place-items: center;\n border-radius: 50%;\n flex: none;\n line-height: 0;\n box-sizing: border-box;\n cursor: default;\n user-select: none;\n -webkit-user-select: none;\n}\n.vela-callout[role='button'] { cursor: pointer; }\n.vela-callout svg { display: block; }\n/* The deployed panel \u2014 carries the kit's elevated-card look itself (the popover\n shell is bare positioning chrome). */\n.vela-callout-panel {\n display: flex;\n flex-direction: column;\n gap: 8px;\n padding: 10px 12px;\n max-width: 280px;\n box-sizing: border-box;\n background: var(--vela-surface-elev);\n border: 1px solid var(--vela-border-strong);\n border-radius: 6px;\n box-shadow: var(--vela-shadow);\n color: var(--vela-fg);\n font: var(--vela-font-size-md) var(--vela-font);\n}\n.vela-callout-title { font-weight: 600; color: var(--vela-fg-bright); }\n.vela-callout-text { color: var(--vela-fg-muted); line-height: 1.45; white-space: pre-line; }\n.vela-callout-actions { display: flex; flex-wrap: wrap; gap: 8px; }\n.vela-callout-btn {\n cursor: pointer;\n height: 26px;\n padding: 0 10px;\n border-radius: 5px;\n border: 1px solid var(--vela-border);\n background: transparent;\n color: var(--vela-fg);\n font-size: var(--vela-font-size-md);\n font-family: inherit;\n transition: background var(--vela-dur-fast) ease, color var(--vela-dur-fast) ease, opacity var(--vela-dur-fast) ease, border-color var(--vela-dur-fast) ease;\n}\n.vela-callout-btn:hover { background: var(--vela-hover); color: var(--vela-fg-bright); border-color: var(--vela-fg-muted); }\n.vela-callout-btn-primary { border-color: var(--vela-selected-bg); background: var(--vela-selected-bg); color: var(--vela-selected-fg); }\n.vela-callout-btn-primary:hover { background: var(--vela-selected-bg); color: var(--vela-selected-fg); opacity: 0.85; border-color: var(--vela-selected-bg); }\n";
|
|
1000
1000
|
|
|
1001
|
-
|
|
1001
|
+
type DatePickerPanel = 'date' | 'month' | 'year';
|
|
1002
|
+
interface DatePickerControllerOptions {
|
|
1003
|
+
/** The selected date (`YYYY-MM-DD`); the calendar opens on its month. */
|
|
1004
|
+
value?: string;
|
|
1005
|
+
/** "Today" for the today ring and the initial month when nothing is selected. */
|
|
1006
|
+
today?: Date;
|
|
1007
|
+
}
|
|
1008
|
+
/** One cell of the current panel. `blank` cells pad the first week of a month. */
|
|
1009
|
+
interface DatePickerCell {
|
|
1010
|
+
label: string;
|
|
1011
|
+
/** The day (`YYYY-MM-DD`) on the date panel; the month index or the year otherwise. */
|
|
1012
|
+
value: string | number;
|
|
1013
|
+
checked: boolean;
|
|
1014
|
+
today: boolean;
|
|
1015
|
+
/** A padding year outside the decade on the year panel. */
|
|
1016
|
+
outside?: boolean;
|
|
1017
|
+
blank?: boolean;
|
|
1018
|
+
}
|
|
1019
|
+
interface DatePickerController {
|
|
1020
|
+
readonly panel: DatePickerPanel;
|
|
1021
|
+
readonly year: number;
|
|
1022
|
+
readonly month: number;
|
|
1023
|
+
readonly value: string | null;
|
|
1024
|
+
/** Header text: the month switch (hidden off the date panel) and the year switch. */
|
|
1025
|
+
header(): {
|
|
1026
|
+
month: string;
|
|
1027
|
+
monthVisible: boolean;
|
|
1028
|
+
year: string;
|
|
1029
|
+
yearDisabled: boolean;
|
|
1030
|
+
};
|
|
1031
|
+
/** What the arrows step on the current panel. */
|
|
1032
|
+
navLabels(): {
|
|
1033
|
+
prev: string;
|
|
1034
|
+
next: string;
|
|
1035
|
+
};
|
|
1036
|
+
cells(): DatePickerCell[];
|
|
1037
|
+
/** One month, one year or ten, depending on the panel. */
|
|
1038
|
+
step(dir: 1 | -1): void;
|
|
1039
|
+
showMonths(): void;
|
|
1040
|
+
showYears(): void;
|
|
1041
|
+
/** Activate a cell: a day returns its date (the pick); a month or year only navigates. */
|
|
1042
|
+
choose(cell: DatePickerCell): string | null;
|
|
1043
|
+
/** Rewrite the selection without emitting (and open on its month). */
|
|
1044
|
+
setValue(value: string | null): void;
|
|
1045
|
+
}
|
|
1046
|
+
/** `YYYY-MM-DD` for a local date. */
|
|
1047
|
+
declare function isoDate(d: Date): string;
|
|
1048
|
+
/** Accept `YYYY-MM-DD` or `YYYY-M-D` and return a padded ISO date, or null if unusable. */
|
|
1049
|
+
declare function normalizeDateInput(raw: string): string | null;
|
|
1050
|
+
declare function datePickerController(opts?: DatePickerControllerOptions): DatePickerController;
|
|
1051
|
+
|
|
1052
|
+
interface DatePickerOptions extends DatePickerControllerOptions {
|
|
1053
|
+
/** A day was picked (`YYYY-MM-DD`). */
|
|
1054
|
+
onPick?: (value: string) => void;
|
|
1055
|
+
}
|
|
1056
|
+
declare class DatePicker {
|
|
1057
|
+
private readonly opts;
|
|
1058
|
+
readonly el: HTMLDivElement;
|
|
1059
|
+
private readonly ctrl;
|
|
1060
|
+
private readonly prev;
|
|
1061
|
+
private readonly next;
|
|
1062
|
+
private readonly monthBtn;
|
|
1063
|
+
private readonly yearBtn;
|
|
1064
|
+
private readonly week;
|
|
1065
|
+
private readonly grid;
|
|
1066
|
+
constructor(opts?: DatePickerOptions);
|
|
1067
|
+
get value(): string | null;
|
|
1068
|
+
/** Rewrite the selection without emitting (the calendar opens on its month). */
|
|
1069
|
+
setValue(value: string | null): void;
|
|
1070
|
+
private paint;
|
|
1071
|
+
private cellEl;
|
|
1072
|
+
}
|
|
1073
|
+
|
|
1074
|
+
export { CALLOUT_CSS, CALLOUT_STYLE_ID, CalloutBubble, type CalloutBubbleOptions, type CalloutBubbleSpec, type CalloutPanel, type CalloutPanelItem, type CalloutPanelRow, type ColorCommit, ColorField, type ColorFieldOpts, type ColorFieldShape, type ColorPickerController, type ColorPickerControllerOptions, type ColorPickerOptions, DatePicker, type DatePickerCell, type DatePickerController, type DatePickerControllerOptions, type DatePickerOptions, type DatePickerPanel, Dialog, type DialogApi, type DialogControllerOptions, type DialogOptions, type DialogService, Drawer, type DrawerApi, type DrawerControllerOptions, type DrawerOptions, type DrawerService, FIELD_FOCUS_CSS, FIELD_FOCUS_RING, FIELD_GAP_PX, type FieldControlDesc, type FieldControlHandle, type FieldGridOptions, type FieldGridVariant, type FieldInlineItem, type FieldLabelSize, type FieldRowOptions, type FieldSectionOptions, type FieldToggleOpts, type GlyphOption, GlyphSelect, type GlyphSelectController, type GlyphSelectControllerOptions, type GlyphSelectOptions, type MachineHandle, Menu, type MenuApi, type MenuControllerOptions, type MenuItemDescriptor, type MenuOptions, type MenuService, type NumberCommit, NumberInput, type NumberInputController, type NumberInputControllerOptions, type NumberInputOptions, type NumberSize, type PlaceArgs, type PlaceResult, Popover, type PopoverAlign, type PopoverBoundary, type PopoverController, type PopoverControllerOptions, type PopoverOptions, type PopoverPosition, type Rect, Select, type SelectController, type SelectControllerOptions, type SelectListPopoverOpts, type SelectOption, type SelectOptions, type SelectSize, Switch, type SwitchController, type SwitchControllerOptions, type SwitchOptions, type SwitchSize, type SwitchTone, TextArea, type TextAreaController, type TextAreaControllerOptions, type TextAreaOptions, type TextAreaSize, TextField, type TextFieldController, type TextFieldControllerOptions, type TextFieldOptions, type TextFieldSize, Tooltip, type TooltipApi, type TooltipControllerOptions, type TooltipOptions, type TooltipService, WIDTH_FIELD_OPTIONS, applyPlotOverlayTokens, applyThemeTokens, blendOver, buildColorPicker, buildFieldControl, buildPalette, calloutPanelRows, clampNumber, closeColorPopover, closeOpenPopovers, closeWidthPopover, closesPanel, colorField, colorPickerController, combineColor, datePickerController, decorateSelectScroll, dialogController, drawerController, ensureUIHost, eventDismissedPopover, fieldGrid, fieldGridColumns, fieldRow, fieldSection, fieldSeparator, fillSelectList, glyphSelectController, hslHex, iconEl, injectStyles, insetRect, intersectRects, isPopoverOpen, isoDate, lineWidthGlyph, menuController, nextUid, normalizeDateInput, numberInputController, openPopoverTrigger, openSelectList, overlayScrollbarCss, placePopover, popoverController, runMachine, selectController, snapToStep, splitColor, switchController, textAreaController, textFieldController, toggleSelectList, tooltipController, transparencyChecker, viewportRect, widthField, widthFieldOptions, withAlpha };
|
package/dist/ui.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { c as VelaTheme } from './options-
|
|
1
|
+
import { c as VelaTheme } from './options-BnEPUuVV.js';
|
|
2
2
|
import { MachineSchema, Service, Machine } from '@zag-js/core';
|
|
3
3
|
export { a as KeyBindingDescriptor, K as KeymapManager, b as KeymapOptions, R as ResolvedBinding } from './keymap-CGOz5F5f.js';
|
|
4
4
|
import * as tooltip from '@zag-js/tooltip';
|
|
@@ -998,4 +998,77 @@ declare class CalloutBubble {
|
|
|
998
998
|
declare const CALLOUT_STYLE_ID = "vela-ui-callout-bubble";
|
|
999
999
|
declare const CALLOUT_CSS = "\n.vela-callout {\n display: inline-grid;\n place-items: center;\n border-radius: 50%;\n flex: none;\n line-height: 0;\n box-sizing: border-box;\n cursor: default;\n user-select: none;\n -webkit-user-select: none;\n}\n.vela-callout[role='button'] { cursor: pointer; }\n.vela-callout svg { display: block; }\n/* The deployed panel \u2014 carries the kit's elevated-card look itself (the popover\n shell is bare positioning chrome). */\n.vela-callout-panel {\n display: flex;\n flex-direction: column;\n gap: 8px;\n padding: 10px 12px;\n max-width: 280px;\n box-sizing: border-box;\n background: var(--vela-surface-elev);\n border: 1px solid var(--vela-border-strong);\n border-radius: 6px;\n box-shadow: var(--vela-shadow);\n color: var(--vela-fg);\n font: var(--vela-font-size-md) var(--vela-font);\n}\n.vela-callout-title { font-weight: 600; color: var(--vela-fg-bright); }\n.vela-callout-text { color: var(--vela-fg-muted); line-height: 1.45; white-space: pre-line; }\n.vela-callout-actions { display: flex; flex-wrap: wrap; gap: 8px; }\n.vela-callout-btn {\n cursor: pointer;\n height: 26px;\n padding: 0 10px;\n border-radius: 5px;\n border: 1px solid var(--vela-border);\n background: transparent;\n color: var(--vela-fg);\n font-size: var(--vela-font-size-md);\n font-family: inherit;\n transition: background var(--vela-dur-fast) ease, color var(--vela-dur-fast) ease, opacity var(--vela-dur-fast) ease, border-color var(--vela-dur-fast) ease;\n}\n.vela-callout-btn:hover { background: var(--vela-hover); color: var(--vela-fg-bright); border-color: var(--vela-fg-muted); }\n.vela-callout-btn-primary { border-color: var(--vela-selected-bg); background: var(--vela-selected-bg); color: var(--vela-selected-fg); }\n.vela-callout-btn-primary:hover { background: var(--vela-selected-bg); color: var(--vela-selected-fg); opacity: 0.85; border-color: var(--vela-selected-bg); }\n";
|
|
1000
1000
|
|
|
1001
|
-
|
|
1001
|
+
type DatePickerPanel = 'date' | 'month' | 'year';
|
|
1002
|
+
interface DatePickerControllerOptions {
|
|
1003
|
+
/** The selected date (`YYYY-MM-DD`); the calendar opens on its month. */
|
|
1004
|
+
value?: string;
|
|
1005
|
+
/** "Today" for the today ring and the initial month when nothing is selected. */
|
|
1006
|
+
today?: Date;
|
|
1007
|
+
}
|
|
1008
|
+
/** One cell of the current panel. `blank` cells pad the first week of a month. */
|
|
1009
|
+
interface DatePickerCell {
|
|
1010
|
+
label: string;
|
|
1011
|
+
/** The day (`YYYY-MM-DD`) on the date panel; the month index or the year otherwise. */
|
|
1012
|
+
value: string | number;
|
|
1013
|
+
checked: boolean;
|
|
1014
|
+
today: boolean;
|
|
1015
|
+
/** A padding year outside the decade on the year panel. */
|
|
1016
|
+
outside?: boolean;
|
|
1017
|
+
blank?: boolean;
|
|
1018
|
+
}
|
|
1019
|
+
interface DatePickerController {
|
|
1020
|
+
readonly panel: DatePickerPanel;
|
|
1021
|
+
readonly year: number;
|
|
1022
|
+
readonly month: number;
|
|
1023
|
+
readonly value: string | null;
|
|
1024
|
+
/** Header text: the month switch (hidden off the date panel) and the year switch. */
|
|
1025
|
+
header(): {
|
|
1026
|
+
month: string;
|
|
1027
|
+
monthVisible: boolean;
|
|
1028
|
+
year: string;
|
|
1029
|
+
yearDisabled: boolean;
|
|
1030
|
+
};
|
|
1031
|
+
/** What the arrows step on the current panel. */
|
|
1032
|
+
navLabels(): {
|
|
1033
|
+
prev: string;
|
|
1034
|
+
next: string;
|
|
1035
|
+
};
|
|
1036
|
+
cells(): DatePickerCell[];
|
|
1037
|
+
/** One month, one year or ten, depending on the panel. */
|
|
1038
|
+
step(dir: 1 | -1): void;
|
|
1039
|
+
showMonths(): void;
|
|
1040
|
+
showYears(): void;
|
|
1041
|
+
/** Activate a cell: a day returns its date (the pick); a month or year only navigates. */
|
|
1042
|
+
choose(cell: DatePickerCell): string | null;
|
|
1043
|
+
/** Rewrite the selection without emitting (and open on its month). */
|
|
1044
|
+
setValue(value: string | null): void;
|
|
1045
|
+
}
|
|
1046
|
+
/** `YYYY-MM-DD` for a local date. */
|
|
1047
|
+
declare function isoDate(d: Date): string;
|
|
1048
|
+
/** Accept `YYYY-MM-DD` or `YYYY-M-D` and return a padded ISO date, or null if unusable. */
|
|
1049
|
+
declare function normalizeDateInput(raw: string): string | null;
|
|
1050
|
+
declare function datePickerController(opts?: DatePickerControllerOptions): DatePickerController;
|
|
1051
|
+
|
|
1052
|
+
interface DatePickerOptions extends DatePickerControllerOptions {
|
|
1053
|
+
/** A day was picked (`YYYY-MM-DD`). */
|
|
1054
|
+
onPick?: (value: string) => void;
|
|
1055
|
+
}
|
|
1056
|
+
declare class DatePicker {
|
|
1057
|
+
private readonly opts;
|
|
1058
|
+
readonly el: HTMLDivElement;
|
|
1059
|
+
private readonly ctrl;
|
|
1060
|
+
private readonly prev;
|
|
1061
|
+
private readonly next;
|
|
1062
|
+
private readonly monthBtn;
|
|
1063
|
+
private readonly yearBtn;
|
|
1064
|
+
private readonly week;
|
|
1065
|
+
private readonly grid;
|
|
1066
|
+
constructor(opts?: DatePickerOptions);
|
|
1067
|
+
get value(): string | null;
|
|
1068
|
+
/** Rewrite the selection without emitting (the calendar opens on its month). */
|
|
1069
|
+
setValue(value: string | null): void;
|
|
1070
|
+
private paint;
|
|
1071
|
+
private cellEl;
|
|
1072
|
+
}
|
|
1073
|
+
|
|
1074
|
+
export { CALLOUT_CSS, CALLOUT_STYLE_ID, CalloutBubble, type CalloutBubbleOptions, type CalloutBubbleSpec, type CalloutPanel, type CalloutPanelItem, type CalloutPanelRow, type ColorCommit, ColorField, type ColorFieldOpts, type ColorFieldShape, type ColorPickerController, type ColorPickerControllerOptions, type ColorPickerOptions, DatePicker, type DatePickerCell, type DatePickerController, type DatePickerControllerOptions, type DatePickerOptions, type DatePickerPanel, Dialog, type DialogApi, type DialogControllerOptions, type DialogOptions, type DialogService, Drawer, type DrawerApi, type DrawerControllerOptions, type DrawerOptions, type DrawerService, FIELD_FOCUS_CSS, FIELD_FOCUS_RING, FIELD_GAP_PX, type FieldControlDesc, type FieldControlHandle, type FieldGridOptions, type FieldGridVariant, type FieldInlineItem, type FieldLabelSize, type FieldRowOptions, type FieldSectionOptions, type FieldToggleOpts, type GlyphOption, GlyphSelect, type GlyphSelectController, type GlyphSelectControllerOptions, type GlyphSelectOptions, type MachineHandle, Menu, type MenuApi, type MenuControllerOptions, type MenuItemDescriptor, type MenuOptions, type MenuService, type NumberCommit, NumberInput, type NumberInputController, type NumberInputControllerOptions, type NumberInputOptions, type NumberSize, type PlaceArgs, type PlaceResult, Popover, type PopoverAlign, type PopoverBoundary, type PopoverController, type PopoverControllerOptions, type PopoverOptions, type PopoverPosition, type Rect, Select, type SelectController, type SelectControllerOptions, type SelectListPopoverOpts, type SelectOption, type SelectOptions, type SelectSize, Switch, type SwitchController, type SwitchControllerOptions, type SwitchOptions, type SwitchSize, type SwitchTone, TextArea, type TextAreaController, type TextAreaControllerOptions, type TextAreaOptions, type TextAreaSize, TextField, type TextFieldController, type TextFieldControllerOptions, type TextFieldOptions, type TextFieldSize, Tooltip, type TooltipApi, type TooltipControllerOptions, type TooltipOptions, type TooltipService, WIDTH_FIELD_OPTIONS, applyPlotOverlayTokens, applyThemeTokens, blendOver, buildColorPicker, buildFieldControl, buildPalette, calloutPanelRows, clampNumber, closeColorPopover, closeOpenPopovers, closeWidthPopover, closesPanel, colorField, colorPickerController, combineColor, datePickerController, decorateSelectScroll, dialogController, drawerController, ensureUIHost, eventDismissedPopover, fieldGrid, fieldGridColumns, fieldRow, fieldSection, fieldSeparator, fillSelectList, glyphSelectController, hslHex, iconEl, injectStyles, insetRect, intersectRects, isPopoverOpen, isoDate, lineWidthGlyph, menuController, nextUid, normalizeDateInput, numberInputController, openPopoverTrigger, openSelectList, overlayScrollbarCss, placePopover, popoverController, runMachine, selectController, snapToStep, splitColor, switchController, textAreaController, textFieldController, toggleSelectList, tooltipController, transparencyChecker, viewportRect, widthField, widthFieldOptions, withAlpha };
|
package/dist/ui.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { Drawer, KeymapManager, Tooltip, drawerController, tooltipController } from './chunk-
|
|
2
|
-
export { CALLOUT_CSS, CALLOUT_STYLE_ID, CalloutBubble, ColorField, Dialog, FIELD_GAP_PX, GlyphSelect, Menu, NumberInput, Popover, Select, Switch, TextArea, TextField, WIDTH_FIELD_OPTIONS, applyPlotOverlayTokens, applyThemeTokens, blendOver, buildColorPicker, buildFieldControl, buildPalette, calloutPanelRows, clampNumber, closeColorPopover, closeOpenPopovers, closeWidthPopover, closesPanel, colorField, colorPickerController, combineColor, decorateSelectScroll, dialogController, ensureUIHost, eventDismissedPopover, fieldGrid, fieldGridColumns, fieldRow, fieldSection, fieldSeparator, fillSelectList, glyphSelectController, hslHex, insetRect, intersectRects, isPopoverOpen, lineWidthGlyph, menuController, nextUid, normalizeProps, numberInputController, openPopoverTrigger, openSelectList, placePopover, popoverController, runMachine, selectController, snapToStep, splitColor, spreadProps, switchController, textAreaController, textFieldController, toggleSelectList, transparencyChecker, viewportRect, widthField, widthFieldOptions } from './chunk-
|
|
3
|
-
export { FIELD_FOCUS_CSS, FIELD_FOCUS_RING, iconEl, iconMarkup, injectStyles, overlayScrollbarCss, registerIcon, svg16, svg24, withAlpha } from './chunk-
|
|
1
|
+
export { Drawer, KeymapManager, Tooltip, drawerController, tooltipController } from './chunk-KA77UTRF.js';
|
|
2
|
+
export { CALLOUT_CSS, CALLOUT_STYLE_ID, CalloutBubble, ColorField, DatePicker, Dialog, FIELD_GAP_PX, GlyphSelect, Menu, NumberInput, Popover, Select, Switch, TextArea, TextField, WIDTH_FIELD_OPTIONS, applyPlotOverlayTokens, applyThemeTokens, blendOver, buildColorPicker, buildFieldControl, buildPalette, calloutPanelRows, clampNumber, closeColorPopover, closeOpenPopovers, closeWidthPopover, closesPanel, colorField, colorPickerController, combineColor, datePickerController, decorateSelectScroll, dialogController, ensureUIHost, eventDismissedPopover, fieldGrid, fieldGridColumns, fieldRow, fieldSection, fieldSeparator, fillSelectList, glyphSelectController, hslHex, insetRect, intersectRects, isPopoverOpen, isoDate, lineWidthGlyph, menuController, nextUid, normalizeDateInput, normalizeProps, numberInputController, openPopoverTrigger, openSelectList, placePopover, popoverController, runMachine, selectController, snapToStep, splitColor, spreadProps, switchController, textAreaController, textFieldController, toggleSelectList, transparencyChecker, viewportRect, widthField, widthFieldOptions } from './chunk-2IAETM2I.js';
|
|
3
|
+
export { FIELD_FOCUS_CSS, FIELD_FOCUS_RING, iconEl, iconMarkup, injectStyles, overlayScrollbarCss, registerIcon, svg16, svg24, withAlpha } from './chunk-BZQM2XO7.js';
|