dockview-core
Version:
Zero dependency layout manager supporting tabs, groups, grids and splitviews for vanilla TypeScript
117 lines (116 loc) • 4.04 kB
JavaScript
export const DEFAULT_TAB_GROUP_COLORS = [
{ id: 'grey', value: 'var(--dv-tab-group-color-grey)', label: 'Grey' },
{ id: 'blue', value: 'var(--dv-tab-group-color-blue)', label: 'Blue' },
{ id: 'red', value: 'var(--dv-tab-group-color-red)', label: 'Red' },
{
id: 'yellow',
value: 'var(--dv-tab-group-color-yellow)',
label: 'Yellow',
},
{ id: 'green', value: 'var(--dv-tab-group-color-green)', label: 'Green' },
{ id: 'pink', value: 'var(--dv-tab-group-color-pink)', label: 'Pink' },
{
id: 'purple',
value: 'var(--dv-tab-group-color-purple)',
label: 'Purple',
},
{ id: 'cyan', value: 'var(--dv-tab-group-color-cyan)', label: 'Cyan' },
{
id: 'orange',
value: 'var(--dv-tab-group-color-orange)',
label: 'Orange',
},
];
/**
* Runtime palette for tab-group color accents.
*
* Resolves a stored `color` string to a CSS color expression, with three
* fall-through modes:
* 1. `id` matches an entry → entry's `value`
* 2. `id` doesn't match → `id` itself (raw CSS literal pass-through)
* 3. `id` is empty or undefined → undefined (caller skips assignment)
*
* When `enabled` is false the palette returns undefined for everything; this
* is the `tabGroupAccent: 'off'` opt-out path.
*/
export class TabGroupColorPalette {
constructor(entries, enabled = true) {
this._entries = entries.slice();
this._byId = new Map(entries.map((e) => [e.id, e]));
this._enabled = enabled;
}
get enabled() {
return this._enabled;
}
set enabled(value) {
this._enabled = value;
}
/**
* Replace the entry list in place. Used by `updateOptions` so that
* existing palette references (held by chips, indicators, etc.) see
* the new palette without needing to be re-wired.
*/
setEntries(entries) {
this._entries = entries.slice();
this._byId = new Map(entries.map((e) => [e.id, e]));
}
entries() {
return this._entries;
}
has(id) {
return this._byId.has(id);
}
get(id) {
return this._byId.get(id);
}
/** First entry's id; used as the default when a color is unset. */
defaultId() {
var _a;
return (_a = this._entries[0]) === null || _a === void 0 ? void 0 : _a.id;
}
/**
* Resolve a stored color to its CSS value, or undefined if no value
* should be written (palette disabled, or color empty/undefined).
*/
resolveValue(color) {
if (!this._enabled || !color) {
return undefined;
}
const entry = this._byId.get(color);
return entry ? entry.value : color;
}
}
let _fallbackPalette;
/**
* Lazy-built palette used when the accessor isn't available (test mocks,
* isolated chip construction). Production code paths always pass a real
* palette through.
*/
function getFallbackPalette() {
if (!_fallbackPalette) {
_fallbackPalette = new TabGroupColorPalette(DEFAULT_TAB_GROUP_COLORS, true);
}
return _fallbackPalette;
}
/**
* Set the `--dv-tab-group-color` custom property on `el` to the resolved
* accent value, or remove it when the palette is disabled / color is unset.
*/
export function applyTabGroupAccent(el, color, palette) {
const value = (palette !== null && palette !== void 0 ? palette : getFallbackPalette()).resolveValue(color);
if (value === undefined) {
el.style.removeProperty('--dv-tab-group-color');
}
else {
el.style.setProperty('--dv-tab-group-color', value);
}
}
/**
* Return the resolved CSS color for a tab group, or undefined when the
* palette is disabled or no color is set. Use this when you need the raw
* value to assign to a non-custom-property style (e.g. SVG stroke,
* backgroundColor on the indicator underline).
*/
export function resolveTabGroupAccent(color, palette) {
return (palette !== null && palette !== void 0 ? palette : getFallbackPalette()).resolveValue(color);
}