@unovis/ts 1.3.2 → 1.3.3-beta.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/components/bullet-legend/index.js +6 -3
- package/components/bullet-legend/index.js.map +1 -1
- package/components/bullet-legend/modules/shape.d.ts +1 -0
- package/components/bullet-legend/modules/shape.js +39 -9
- package/components/bullet-legend/modules/shape.js.map +1 -1
- package/components/bullet-legend/style.js +5 -2
- package/components/bullet-legend/style.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { select } from 'd3-selection';
|
|
2
2
|
import { merge } from '../../utils/data.js';
|
|
3
3
|
import { BulletLegendDefaultConfig } from './config.js';
|
|
4
|
-
import { updateBullets } from './modules/shape.js';
|
|
4
|
+
import { createBullets, updateBullets } from './modules/shape.js';
|
|
5
5
|
import * as style from './style.js';
|
|
6
6
|
import { root, item, clickable, bullet, label } from './style.js';
|
|
7
7
|
|
|
@@ -35,10 +35,13 @@ class BulletLegend {
|
|
|
35
35
|
.classed(clickable, d => !!config.onLegendItemClick && this._isItemClickable(d))
|
|
36
36
|
.style('display', (d) => d.hidden ? 'none' : null);
|
|
37
37
|
// Bullet
|
|
38
|
-
legendItemsEnter.append('
|
|
38
|
+
legendItemsEnter.append('span')
|
|
39
39
|
.attr('class', bullet)
|
|
40
|
-
.
|
|
40
|
+
.call(createBullets);
|
|
41
41
|
legendItemsMerged.select(`.${bullet}`)
|
|
42
|
+
.style('width', config.bulletSize)
|
|
43
|
+
.style('height', config.bulletSize)
|
|
44
|
+
.style('box-sizing', 'content-box')
|
|
42
45
|
.call(updateBullets, this.config, this._colorAccessor);
|
|
43
46
|
// Labels
|
|
44
47
|
legendItemsEnter.append('span')
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/bullet-legend/index.ts"],"sourcesContent":["import { select, Selection } from 'd3-selection'\n\n// Utils\nimport { merge } from 'utils/data'\n\n// Config\nimport { BulletLegendDefaultConfig, BulletLegendConfigInterface } from './config'\n\n// Local Types\nimport { BulletLegendItemInterface } from './types'\n\n// Modules\nimport { updateBullets } from './modules/shape'\n\n// Styles\nimport * as s from './style'\n\nexport class BulletLegend {\n static selectors = s\n protected _defaultConfig = BulletLegendDefaultConfig as BulletLegendConfigInterface\n public config: BulletLegendConfigInterface = this._defaultConfig\n\n div: Selection<HTMLDivElement, unknown, null, undefined>\n element: HTMLElement\n prevConfig: BulletLegendConfigInterface\n protected _container: HTMLElement\n\n private _colorAccessor = (d: BulletLegendItemInterface): string => d.color\n\n constructor (element: HTMLElement, config?: BulletLegendConfigInterface) {\n this._container = element\n\n // Create SVG element for visualizations\n this.div = select(this._container)\n .append('div')\n .attr('class', s.root)\n\n this.element = this.div.node()\n\n if (config) this.update(config)\n }\n\n update (config: BulletLegendConfigInterface): void {\n this.prevConfig = this.config\n this.config = merge(this._defaultConfig, config)\n this.render()\n }\n\n render (): void {\n const { config } = this\n\n const legendItems = this.div.selectAll<HTMLDivElement, unknown>(`.${s.item}`).data(config.items)\n\n const legendItemsEnter = legendItems.enter().append('div')\n .attr('class', d => `${s.item} ${d.className ?? ''}`)\n .on('click', this._onItemClick.bind(this))\n\n const legendItemsMerged = legendItemsEnter.merge(legendItems)\n legendItemsMerged\n .classed(s.clickable, d => !!config.onLegendItemClick && this._isItemClickable(d))\n .style('display', (d: BulletLegendItemInterface) => d.hidden ? 'none' : null)\n\n // Bullet\n legendItemsEnter.append('
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/bullet-legend/index.ts"],"sourcesContent":["import { select, Selection } from 'd3-selection'\n\n// Utils\nimport { merge } from 'utils/data'\n\n// Config\nimport { BulletLegendDefaultConfig, BulletLegendConfigInterface } from './config'\n\n// Local Types\nimport { BulletLegendItemInterface } from './types'\n\n// Modules\nimport { createBullets, updateBullets } from './modules/shape'\n\n// Styles\nimport * as s from './style'\n\n\nexport class BulletLegend {\n static selectors = s\n protected _defaultConfig = BulletLegendDefaultConfig as BulletLegendConfigInterface\n public config: BulletLegendConfigInterface = this._defaultConfig\n\n div: Selection<HTMLDivElement, unknown, null, undefined>\n element: HTMLElement\n prevConfig: BulletLegendConfigInterface\n protected _container: HTMLElement\n\n private _colorAccessor = (d: BulletLegendItemInterface): string => d.color\n\n constructor (element: HTMLElement, config?: BulletLegendConfigInterface) {\n this._container = element\n\n // Create SVG element for visualizations\n this.div = select(this._container)\n .append('div')\n .attr('class', s.root)\n\n this.element = this.div.node()\n\n if (config) this.update(config)\n }\n\n update (config: BulletLegendConfigInterface): void {\n this.prevConfig = this.config\n this.config = merge(this._defaultConfig, config)\n this.render()\n }\n\n render (): void {\n const { config } = this\n\n const legendItems = this.div.selectAll<HTMLDivElement, unknown>(`.${s.item}`).data(config.items)\n\n const legendItemsEnter = legendItems.enter().append('div')\n .attr('class', d => `${s.item} ${d.className ?? ''}`)\n .on('click', this._onItemClick.bind(this))\n\n const legendItemsMerged = legendItemsEnter.merge(legendItems)\n legendItemsMerged\n .classed(s.clickable, d => !!config.onLegendItemClick && this._isItemClickable(d))\n .style('display', (d: BulletLegendItemInterface) => d.hidden ? 'none' : null)\n\n // Bullet\n legendItemsEnter.append('span')\n .attr('class', s.bullet)\n .call(createBullets)\n\n legendItemsMerged.select<SVGElement>(`.${s.bullet}`)\n .style('width', config.bulletSize)\n .style('height', config.bulletSize)\n .style('box-sizing', 'content-box')\n .call(updateBullets, this.config, this._colorAccessor)\n\n // Labels\n legendItemsEnter.append('span')\n .attr('class', s.label)\n .classed(config.labelClassName, true)\n .style('max-width', config.labelMaxWidth)\n .style('font-size', config.labelFontSize)\n\n legendItemsMerged.select(`.${s.label}`)\n .text((d: BulletLegendItemInterface) => d.name)\n\n legendItems.exit().remove()\n }\n\n _isItemClickable (item: BulletLegendItemInterface): boolean {\n return item.pointer === undefined ? true : item.pointer\n }\n\n _onItemClick (event: MouseEvent, d: BulletLegendItemInterface): void {\n const { config: { onLegendItemClick } } = this\n\n const legendItems = this.div.selectAll(`.${s.item}`).nodes() as HTMLElement[]\n const index = legendItems.indexOf(event.currentTarget as HTMLElement)\n if (onLegendItemClick) onLegendItemClick(d, index)\n }\n\n public destroy (): void {\n this.div.remove()\n }\n}\n"],"names":["s.root","s.item","s.clickable","s.bullet","s.label","s"],"mappings":"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"}
|
|
@@ -2,4 +2,5 @@ import { Selection } from 'd3-selection';
|
|
|
2
2
|
import { ColorAccessor } from "../../../types/accessor";
|
|
3
3
|
import { BulletLegendConfigInterface } from '../config';
|
|
4
4
|
import { BulletLegendItemInterface } from '../types';
|
|
5
|
+
export declare function createBullets(container: Selection<HTMLSpanElement, BulletLegendItemInterface, HTMLDivElement, unknown>): void;
|
|
5
6
|
export declare function updateBullets(container: Selection<SVGElement, BulletLegendItemInterface, HTMLDivElement, unknown>, config: BulletLegendConfigInterface, colorAccessor: ColorAccessor<BulletLegendItemInterface>): void;
|
|
@@ -9,13 +9,31 @@ import { BulletShape } from '../types.js';
|
|
|
9
9
|
// Size with respect to the viewBox. We use this to compute path data which is independent of the
|
|
10
10
|
// the configured size.
|
|
11
11
|
const BULLET_SIZE = PATTERN_SIZE_PX * 3;
|
|
12
|
+
// Different shapes need different scaling to fit the full size
|
|
13
|
+
const shapeScale = {
|
|
14
|
+
[BulletShape.Circle]: Math.PI / 4,
|
|
15
|
+
[BulletShape.Cross]: 5 / 9,
|
|
16
|
+
[BulletShape.Diamond]: Math.sqrt(3) / 6,
|
|
17
|
+
[BulletShape.Square]: 1,
|
|
18
|
+
[BulletShape.Star]: 0.3,
|
|
19
|
+
[BulletShape.Triangle]: Math.sqrt(3) / 4,
|
|
20
|
+
[BulletShape.Wye]: 5 / 11,
|
|
21
|
+
};
|
|
22
|
+
function createBullets(container) {
|
|
23
|
+
container.each((d, i, els) => {
|
|
24
|
+
select(els[i]).append('svg')
|
|
25
|
+
.attr('width', '100%')
|
|
26
|
+
.attr('height', '100%')
|
|
27
|
+
.append('path');
|
|
28
|
+
});
|
|
29
|
+
}
|
|
12
30
|
function updateBullets(container, config, colorAccessor) {
|
|
13
31
|
container.each((d, i, els) => {
|
|
14
32
|
const shape = getString(d, config.bulletShape, i);
|
|
15
33
|
const color = getColor(d, colorAccessor, i);
|
|
16
34
|
const width = BULLET_SIZE;
|
|
17
35
|
const height = shape === BulletShape.Line ? BULLET_SIZE / 2.5 : BULLET_SIZE;
|
|
18
|
-
const selection = select(els[i])
|
|
36
|
+
const selection = select(els[i]).select('svg')
|
|
19
37
|
.attr('viewBox', `0 0 ${width} ${height}`)
|
|
20
38
|
.select('path')
|
|
21
39
|
.attr('stroke', color);
|
|
@@ -31,20 +49,32 @@ function updateBullets(container, config, colorAccessor) {
|
|
|
31
49
|
.style('marker-end', 'none');
|
|
32
50
|
}
|
|
33
51
|
else {
|
|
34
|
-
const symbolGen = symbol()
|
|
35
|
-
|
|
36
|
-
.
|
|
52
|
+
const symbolGen = symbol()
|
|
53
|
+
.type(Symbol[shape])
|
|
54
|
+
.size(width * height * shapeScale[shape]);
|
|
55
|
+
const scale = (width - 2) / width;
|
|
56
|
+
let dy = height / 2;
|
|
57
|
+
switch (shape) {
|
|
58
|
+
case BulletShape.Triangle:
|
|
59
|
+
dy += height / 8;
|
|
60
|
+
break;
|
|
61
|
+
case BulletShape.Star:
|
|
62
|
+
dy += height / 16;
|
|
63
|
+
break;
|
|
64
|
+
case BulletShape.Wye:
|
|
65
|
+
dy -= height / 16;
|
|
66
|
+
break;
|
|
67
|
+
}
|
|
68
|
+
selection
|
|
69
|
+
.attr('d', symbolGen)
|
|
70
|
+
.attr('transform', `translate(${width / 2}, ${Math.round(dy)}) scale(${scale})`)
|
|
37
71
|
.style('stroke-width', '1px')
|
|
38
72
|
.style('opacity', null)
|
|
39
73
|
.style('fill', color)
|
|
40
74
|
.style('fill-opacity', d.inactive ? 0.4 : 1);
|
|
41
|
-
const box = selection.node().getBBox();
|
|
42
|
-
const scaledSize = Math.min(width / box.width, height / box.height);
|
|
43
|
-
const scale = Math.floor(scaledSize * 2) / 2;
|
|
44
|
-
selection.transition().duration(0).attr('d', symbolGen.size(scale * scale * 64));
|
|
45
75
|
}
|
|
46
76
|
});
|
|
47
77
|
}
|
|
48
78
|
|
|
49
|
-
export { updateBullets };
|
|
79
|
+
export { createBullets, updateBullets };
|
|
50
80
|
//# sourceMappingURL=shape.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shape.js","sources":["../../../../src/components/bullet-legend/modules/shape.ts"],"sourcesContent":["import { Selection, select } from 'd3-selection'\nimport { symbol } from 'd3-shape'\n\n// Types\nimport { ColorAccessor } from 'types/accessor'\nimport { Symbol } from 'types/symbol'\n\n// Utils\nimport { getColor } from 'utils/color'\nimport { getString } from 'utils/data'\n\n// Constants\nimport { PATTERN_SIZE_PX } from 'styles/patterns'\n\n// Local types\nimport { BulletLegendConfigInterface } from '../config'\nimport { BulletShape, BulletLegendItemInterface } from '../types'\n\n// Size with respect to the viewBox. We use this to compute path data which is independent of the\n// the configured size.\nconst BULLET_SIZE = PATTERN_SIZE_PX * 3\n\nexport function updateBullets (\n container: Selection<SVGElement, BulletLegendItemInterface, HTMLDivElement, unknown>,\n config: BulletLegendConfigInterface,\n colorAccessor: ColorAccessor<BulletLegendItemInterface>\n): void {\n container.each((d, i, els) => {\n const shape = getString(d, config.bulletShape, i) as BulletShape\n const color = getColor(d, colorAccessor, i)\n const width = BULLET_SIZE\n const height = shape === BulletShape.Line ? BULLET_SIZE / 2.5 : BULLET_SIZE\n\n const selection = select(els[i])\n .attr('viewBox', `0 0 ${width} ${height}`)\n .select<SVGPathElement>('path')\n .attr('stroke', color)\n\n if (shape === BulletShape.Line) {\n selection\n .attr('d', `M0,${height / 2} L${width / 2},${height / 2} L${width},${height / 2}`)\n .attr('transform', null)\n .style('opacity', d.inactive ? 0.4 : 1)\n .style('stroke-width', '3px')\n .style('fill', null)\n .style('fill-opacity', null)\n .style('marker-start', 'none')\n .style('marker-end', 'none')\n } else {\n const symbolGen = symbol().type(Symbol[shape])\n\n selection.attr('d', symbolGen)\n .attr('transform', `translate(${width / 2}
|
|
1
|
+
{"version":3,"file":"shape.js","sources":["../../../../src/components/bullet-legend/modules/shape.ts"],"sourcesContent":["import { Selection, select } from 'd3-selection'\nimport { symbol } from 'd3-shape'\n\n// Types\nimport { ColorAccessor } from 'types/accessor'\nimport { Symbol, SymbolType } from 'types/symbol'\n\n// Utils\nimport { getColor } from 'utils/color'\nimport { getString } from 'utils/data'\n\n// Constants\nimport { PATTERN_SIZE_PX } from 'styles/patterns'\n\n// Local types\nimport { BulletLegendConfigInterface } from '../config'\nimport { BulletShape, BulletLegendItemInterface } from '../types'\n\n// Size with respect to the viewBox. We use this to compute path data which is independent of the\n// the configured size.\nconst BULLET_SIZE = PATTERN_SIZE_PX * 3\n\n// Different shapes need different scaling to fit the full size\nconst shapeScale: Record<SymbolType, number> = {\n [BulletShape.Circle]: Math.PI / 4,\n [BulletShape.Cross]: 5 / 9,\n [BulletShape.Diamond]: Math.sqrt(3) / 6,\n [BulletShape.Square]: 1,\n [BulletShape.Star]: 0.3,\n [BulletShape.Triangle]: Math.sqrt(3) / 4,\n [BulletShape.Wye]: 5 / 11,\n}\n\nexport function createBullets (\n container: Selection<HTMLSpanElement, BulletLegendItemInterface, HTMLDivElement, unknown>\n): void {\n container.each((d, i, els) => {\n select(els[i]).append('svg')\n .attr('width', '100%')\n .attr('height', '100%')\n .append('path')\n })\n}\n\nexport function updateBullets (\n container: Selection<SVGElement, BulletLegendItemInterface, HTMLDivElement, unknown>,\n config: BulletLegendConfigInterface,\n colorAccessor: ColorAccessor<BulletLegendItemInterface>\n): void {\n container.each((d, i, els) => {\n const shape = getString(d, config.bulletShape, i) as BulletShape\n const color = getColor(d, colorAccessor, i)\n const width = BULLET_SIZE\n const height = shape === BulletShape.Line ? BULLET_SIZE / 2.5 : BULLET_SIZE\n\n const selection = select(els[i]).select('svg')\n .attr('viewBox', `0 0 ${width} ${height}`)\n .select<SVGPathElement>('path')\n .attr('stroke', color)\n\n if (shape === BulletShape.Line) {\n selection\n .attr('d', `M0,${height / 2} L${width / 2},${height / 2} L${width},${height / 2}`)\n .attr('transform', null)\n .style('opacity', d.inactive ? 0.4 : 1)\n .style('stroke-width', '3px')\n .style('fill', null)\n .style('fill-opacity', null)\n .style('marker-start', 'none')\n .style('marker-end', 'none')\n } else {\n const symbolGen = symbol()\n .type(Symbol[shape])\n .size(width * height * shapeScale[shape])\n\n const scale = (width - 2) / width\n let dy = height / 2\n switch (shape) {\n case BulletShape.Triangle:\n dy += height / 8\n break\n case BulletShape.Star:\n dy += height / 16\n break\n case BulletShape.Wye:\n dy -= height / 16\n break\n }\n selection\n .attr('d', symbolGen)\n .attr('transform', `translate(${width / 2}, ${Math.round(dy)}) scale(${scale})`)\n .style('stroke-width', '1px')\n .style('opacity', null)\n .style('fill', color)\n .style('fill-opacity', d.inactive ? 0.4 : 1)\n }\n })\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -56,9 +56,12 @@ const label = css `
|
|
|
56
56
|
const bullet = css `
|
|
57
57
|
label: legendItemBullet;
|
|
58
58
|
margin-right: var(--vis-legend-bullet-label-spacing);
|
|
59
|
-
max-width: calc(var(--vis-legend-bullet-size) * 2);
|
|
60
59
|
height: var(--vis-legend-bullet-size);
|
|
61
|
-
|
|
60
|
+
width: var(--vis-legend-bullet-size);
|
|
61
|
+
|
|
62
|
+
svg {
|
|
63
|
+
display: block;
|
|
64
|
+
}
|
|
62
65
|
}
|
|
63
66
|
`;
|
|
64
67
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../src/components/bullet-legend/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const root = css`\n label: bullet-legend-component;\n`\n\nexport const variables = injectGlobal`\n :root {\n // Undefined by default to allow proper fallback to var(--vis-font-family)\n /* --vis-legend-font-family: */\n\n --vis-legend-label-color: #6c778c;\n --vis-legend-label-max-width: 300px;\n --vis-legend-label-font-size: 12px;\n --vis-legend-bullet-size: 9px;\n --vis-legend-bullet-inactive-color: #eee;\n --vis-legend-item-spacing: 20px;\n --vis-legend-bullet-label-spacing: 8px;\n\n --vis-dark-legend-label-color: #eee;\n --vis-dark-legend-bullet-inactive-color: #6c778c;\n }\n\n body.theme-dark ${`.${root}`} {\n --vis-legend-label-color: var(--vis-dark-legend-label-color);\n --vis-legend-bullet-inactive-color: var(--vis-dark-legend-bullet-inactive-color);\n }\n\n body.theme-patterns {\n --vis-legend-bullet-size: 14px;\n }\n`\n\nexport const item = css`\n label: legendItem;\n display: inline-flex;\n align-items: center;\n font-family: var(--vis-legend-font-family, var(--vis-font-family));\n margin-right: var(--vis-legend-item-spacing);\n white-space: nowrap;\n cursor: default;\n user-select: none;\n`\n\nexport const clickable = css`\n cursor: pointer;\n`\n\nexport const label = css`\n label: legendItemLabel;\n font-size: var(--vis-legend-label-font-size);\n display: inline-block;\n vertical-align: middle;\n color: var(--vis-legend-label-color);\n max-width: var(--vis-legend-label-max-width);\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n`\n\nexport const bullet = css`\n label: legendItemBullet;\n margin-right: var(--vis-legend-bullet-label-spacing);\n
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../src/components/bullet-legend/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const root = css`\n label: bullet-legend-component;\n`\n\nexport const variables = injectGlobal`\n :root {\n // Undefined by default to allow proper fallback to var(--vis-font-family)\n /* --vis-legend-font-family: */\n\n --vis-legend-label-color: #6c778c;\n --vis-legend-label-max-width: 300px;\n --vis-legend-label-font-size: 12px;\n --vis-legend-bullet-size: 9px;\n --vis-legend-bullet-inactive-color: #eee;\n --vis-legend-item-spacing: 20px;\n --vis-legend-bullet-label-spacing: 8px;\n\n --vis-dark-legend-label-color: #eee;\n --vis-dark-legend-bullet-inactive-color: #6c778c;\n }\n\n body.theme-dark ${`.${root}`} {\n --vis-legend-label-color: var(--vis-dark-legend-label-color);\n --vis-legend-bullet-inactive-color: var(--vis-dark-legend-bullet-inactive-color);\n }\n\n body.theme-patterns {\n --vis-legend-bullet-size: 14px;\n }\n`\n\nexport const item = css`\n label: legendItem;\n display: inline-flex;\n align-items: center;\n font-family: var(--vis-legend-font-family, var(--vis-font-family));\n margin-right: var(--vis-legend-item-spacing);\n white-space: nowrap;\n cursor: default;\n user-select: none;\n`\n\nexport const clickable = css`\n cursor: pointer;\n`\n\nexport const label = css`\n label: legendItemLabel;\n font-size: var(--vis-legend-label-font-size);\n display: inline-block;\n vertical-align: middle;\n color: var(--vis-legend-label-color);\n max-width: var(--vis-legend-label-max-width);\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n`\n\nexport const bullet = css`\n label: legendItemBullet;\n margin-right: var(--vis-legend-bullet-label-spacing);\n height: var(--vis-legend-bullet-size);\n width: var(--vis-legend-bullet-size);\n \n svg {\n display: block;\n }\n}\n`\n"],"names":[],"mappings":";;AAEO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;;AAiBjB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;;;;;EAQ7B;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;;EAStB;AAEM,MAAM,SAAS,GAAG,GAAG,CAAA,CAAA;;EAE3B;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;EAUvB;AAEM,MAAM,MAAM,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@unovis/ts",
|
|
3
3
|
"description": "Modular data visualization framework for React, Angular, Svelte, and vanilla TypeScript or JavaScript",
|
|
4
|
-
"version": "1.3.
|
|
4
|
+
"version": "1.3.3-beta.0",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/f5/unovis.git",
|