@sentropic/design-system-vue 0.4.0 → 0.6.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/Col.d.ts +87 -0
- package/dist/Col.d.ts.map +1 -0
- package/dist/Col.js +60 -0
- package/dist/Col.js.map +1 -0
- package/dist/Container.d.ts +51 -0
- package/dist/Container.d.ts.map +1 -0
- package/dist/Container.js +18 -0
- package/dist/Container.js.map +1 -0
- package/dist/Divider.d.ts +63 -0
- package/dist/Divider.d.ts.map +1 -0
- package/dist/Divider.js +46 -0
- package/dist/Divider.js.map +1 -0
- package/dist/Flex.d.ts +97 -0
- package/dist/Flex.d.ts.map +1 -0
- package/dist/Flex.js +81 -0
- package/dist/Flex.js.map +1 -0
- package/dist/ForceGraph.d.ts +37 -1
- package/dist/ForceGraph.d.ts.map +1 -1
- package/dist/ForceGraph.js +279 -62
- package/dist/ForceGraph.js.map +1 -1
- package/dist/Header.d.ts +1 -1
- package/dist/Hidden.d.ts +52 -0
- package/dist/Hidden.d.ts.map +1 -0
- package/dist/Hidden.js +18 -0
- package/dist/Hidden.js.map +1 -0
- package/dist/Inline.d.ts +71 -0
- package/dist/Inline.d.ts.map +1 -0
- package/dist/Inline.js +27 -0
- package/dist/Inline.js.map +1 -0
- package/dist/MediaContent.d.ts +1 -1
- package/dist/OverflowMenu.d.ts +1 -1
- package/dist/Row.d.ts +71 -0
- package/dist/Row.d.ts.map +1 -0
- package/dist/Row.js +33 -0
- package/dist/Row.js.map +1 -0
- package/dist/Stack.d.ts +61 -0
- package/dist/Stack.d.ts.map +1 -0
- package/dist/Stack.js +25 -0
- package/dist/Stack.js.map +1 -0
- package/dist/index.d.ts +16 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +8 -0
- package/dist/index.js.map +1 -1
- package/dist/styles.css +190 -0
- package/package.json +1 -1
package/dist/Col.d.ts
ADDED
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
export type ColSpan = number | "auto";
|
|
2
|
+
export type ColProps = {
|
|
3
|
+
/** Number of 12-grid columns to span, or "auto" to size to content. */
|
|
4
|
+
span?: ColSpan;
|
|
5
|
+
/** Columns to offset (0..11) via margin-inline-start. */
|
|
6
|
+
offset?: number;
|
|
7
|
+
/** Responsive overrides applied at and above the breakpoint. */
|
|
8
|
+
sm?: ColSpan;
|
|
9
|
+
md?: ColSpan;
|
|
10
|
+
lg?: ColSpan;
|
|
11
|
+
as?: string;
|
|
12
|
+
class?: string;
|
|
13
|
+
};
|
|
14
|
+
/** Width expression for a given span. Accounts for the shared row gutter so a
|
|
15
|
+
full 12 columns still fit on one line (gap-based layout). */
|
|
16
|
+
export declare function spanBasis(span: ColSpan | undefined): string | undefined;
|
|
17
|
+
export declare function offsetMargin(offset: number | undefined): string | undefined;
|
|
18
|
+
export declare const Col: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
19
|
+
span: {
|
|
20
|
+
type: () => ColSpan;
|
|
21
|
+
default: string;
|
|
22
|
+
};
|
|
23
|
+
offset: {
|
|
24
|
+
type: NumberConstructor;
|
|
25
|
+
default: number;
|
|
26
|
+
};
|
|
27
|
+
sm: {
|
|
28
|
+
type: () => ColSpan;
|
|
29
|
+
default: undefined;
|
|
30
|
+
};
|
|
31
|
+
md: {
|
|
32
|
+
type: () => ColSpan;
|
|
33
|
+
default: undefined;
|
|
34
|
+
};
|
|
35
|
+
lg: {
|
|
36
|
+
type: () => ColSpan;
|
|
37
|
+
default: undefined;
|
|
38
|
+
};
|
|
39
|
+
as: {
|
|
40
|
+
type: StringConstructor;
|
|
41
|
+
default: string;
|
|
42
|
+
};
|
|
43
|
+
class: {
|
|
44
|
+
type: StringConstructor;
|
|
45
|
+
default: undefined;
|
|
46
|
+
};
|
|
47
|
+
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
48
|
+
[key: string]: any;
|
|
49
|
+
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
50
|
+
span: {
|
|
51
|
+
type: () => ColSpan;
|
|
52
|
+
default: string;
|
|
53
|
+
};
|
|
54
|
+
offset: {
|
|
55
|
+
type: NumberConstructor;
|
|
56
|
+
default: number;
|
|
57
|
+
};
|
|
58
|
+
sm: {
|
|
59
|
+
type: () => ColSpan;
|
|
60
|
+
default: undefined;
|
|
61
|
+
};
|
|
62
|
+
md: {
|
|
63
|
+
type: () => ColSpan;
|
|
64
|
+
default: undefined;
|
|
65
|
+
};
|
|
66
|
+
lg: {
|
|
67
|
+
type: () => ColSpan;
|
|
68
|
+
default: undefined;
|
|
69
|
+
};
|
|
70
|
+
as: {
|
|
71
|
+
type: StringConstructor;
|
|
72
|
+
default: string;
|
|
73
|
+
};
|
|
74
|
+
class: {
|
|
75
|
+
type: StringConstructor;
|
|
76
|
+
default: undefined;
|
|
77
|
+
};
|
|
78
|
+
}>> & Readonly<{}>, {
|
|
79
|
+
class: string;
|
|
80
|
+
span: ColSpan;
|
|
81
|
+
offset: number;
|
|
82
|
+
sm: ColSpan;
|
|
83
|
+
md: ColSpan;
|
|
84
|
+
lg: ColSpan;
|
|
85
|
+
as: string;
|
|
86
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
87
|
+
//# sourceMappingURL=Col.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Col.d.ts","sourceRoot":"","sources":["../src/Col.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;AAEtC,MAAM,MAAM,QAAQ,GAAG;IACrB,uEAAuE;IACvE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,yDAAyD;IACzD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gEAAgE;IAChE,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;gEACgE;AAChE,wBAAgB,SAAS,CAAC,IAAI,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAOvE;AAED,wBAAgB,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAM3E;AAED,eAAO,MAAM,GAAG;;cAI2B,MAAM,OAAO;;;;;;;;cAIT,MAAM,OAAO;;;;cACb,MAAM,OAAO;;;;cACb,MAAM,OAAO;;;;;;;;;;;;;;;cANjB,MAAM,OAAO;;;;;;;;cAIT,MAAM,OAAO;;;;cACb,MAAM,OAAO;;;;cACb,MAAM,OAAO;;;;;;;;;;;;;;;;;;;4EAoC1D,CAAC"}
|
package/dist/Col.js
ADDED
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import { defineComponent, h } from "vue";
|
|
2
|
+
import { classNames } from "./classNames.js";
|
|
3
|
+
/** Width expression for a given span. Accounts for the shared row gutter so a
|
|
4
|
+
full 12 columns still fit on one line (gap-based layout). */
|
|
5
|
+
export function spanBasis(span) {
|
|
6
|
+
if (span == null)
|
|
7
|
+
return undefined;
|
|
8
|
+
if (span === "auto")
|
|
9
|
+
return "auto";
|
|
10
|
+
const clamped = Math.max(1, Math.min(12, Math.round(span)));
|
|
11
|
+
const ratio = clamped / 12;
|
|
12
|
+
// Subtract this column's share of the inter-column gutters.
|
|
13
|
+
return `calc(${ratio * 100}% - var(--st-row-gutter, 0px) * ${(12 - clamped) / 12})`;
|
|
14
|
+
}
|
|
15
|
+
export function offsetMargin(offset) {
|
|
16
|
+
if (!offset)
|
|
17
|
+
return undefined;
|
|
18
|
+
const clamped = Math.max(0, Math.min(11, Math.round(offset)));
|
|
19
|
+
if (clamped === 0)
|
|
20
|
+
return undefined;
|
|
21
|
+
const ratio = clamped / 12;
|
|
22
|
+
return `calc(${ratio * 100}% + var(--st-row-gutter, 0px) * ${ratio})`;
|
|
23
|
+
}
|
|
24
|
+
export const Col = defineComponent({
|
|
25
|
+
name: "Col",
|
|
26
|
+
props: {
|
|
27
|
+
span: {
|
|
28
|
+
type: [Number, String],
|
|
29
|
+
default: "auto",
|
|
30
|
+
},
|
|
31
|
+
offset: { type: Number, default: 0 },
|
|
32
|
+
sm: { type: [Number, String], default: undefined },
|
|
33
|
+
md: { type: [Number, String], default: undefined },
|
|
34
|
+
lg: { type: [Number, String], default: undefined },
|
|
35
|
+
as: { type: String, default: "div" },
|
|
36
|
+
class: { type: String, default: undefined },
|
|
37
|
+
},
|
|
38
|
+
setup(props, { slots, attrs }) {
|
|
39
|
+
return () => {
|
|
40
|
+
const isAuto = props.span === "auto";
|
|
41
|
+
const basis = spanBasis(props.span);
|
|
42
|
+
const style = {
|
|
43
|
+
flexBasis: basis,
|
|
44
|
+
maxInlineSize: isAuto ? undefined : basis,
|
|
45
|
+
flexGrow: isAuto ? 1 : 0,
|
|
46
|
+
marginInlineStart: offsetMargin(props.offset),
|
|
47
|
+
"--st-col-sm": spanBasis(props.sm),
|
|
48
|
+
"--st-col-md": spanBasis(props.md),
|
|
49
|
+
"--st-col-lg": spanBasis(props.lg),
|
|
50
|
+
...attrs.style,
|
|
51
|
+
};
|
|
52
|
+
return h(props.as, {
|
|
53
|
+
...attrs,
|
|
54
|
+
class: classNames("st-col", isAuto && "st-col--auto", props.sm != null && "st-col--has-sm", props.md != null && "st-col--has-md", props.lg != null && "st-col--has-lg", props.class),
|
|
55
|
+
style,
|
|
56
|
+
}, slots.default?.());
|
|
57
|
+
};
|
|
58
|
+
},
|
|
59
|
+
});
|
|
60
|
+
//# sourceMappingURL=Col.js.map
|
package/dist/Col.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Col.js","sourceRoot":"","sources":["../src/Col.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
export type ContainerSize = "sm" | "md" | "lg" | "xl" | "full";
|
|
2
|
+
export type ContainerProps = {
|
|
3
|
+
size?: ContainerSize;
|
|
4
|
+
/** Apply horizontal padding using the spacing scale. */
|
|
5
|
+
padding?: boolean;
|
|
6
|
+
as?: string;
|
|
7
|
+
class?: string;
|
|
8
|
+
};
|
|
9
|
+
export declare const Container: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
10
|
+
size: {
|
|
11
|
+
type: () => ContainerSize;
|
|
12
|
+
default: string;
|
|
13
|
+
};
|
|
14
|
+
padding: {
|
|
15
|
+
type: BooleanConstructor;
|
|
16
|
+
default: boolean;
|
|
17
|
+
};
|
|
18
|
+
as: {
|
|
19
|
+
type: StringConstructor;
|
|
20
|
+
default: string;
|
|
21
|
+
};
|
|
22
|
+
class: {
|
|
23
|
+
type: StringConstructor;
|
|
24
|
+
default: undefined;
|
|
25
|
+
};
|
|
26
|
+
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
27
|
+
[key: string]: any;
|
|
28
|
+
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
29
|
+
size: {
|
|
30
|
+
type: () => ContainerSize;
|
|
31
|
+
default: string;
|
|
32
|
+
};
|
|
33
|
+
padding: {
|
|
34
|
+
type: BooleanConstructor;
|
|
35
|
+
default: boolean;
|
|
36
|
+
};
|
|
37
|
+
as: {
|
|
38
|
+
type: StringConstructor;
|
|
39
|
+
default: string;
|
|
40
|
+
};
|
|
41
|
+
class: {
|
|
42
|
+
type: StringConstructor;
|
|
43
|
+
default: undefined;
|
|
44
|
+
};
|
|
45
|
+
}>> & Readonly<{}>, {
|
|
46
|
+
class: string;
|
|
47
|
+
size: ContainerSize;
|
|
48
|
+
as: string;
|
|
49
|
+
padding: boolean;
|
|
50
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
51
|
+
//# sourceMappingURL=Container.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../src/Container.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAE/D,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,wDAAwD;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,SAAS;;cAGM,MAAM,aAAa;;;;;;;;;;;;;;;;;;;cAAnB,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;4EAqB7C,CAAC"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { defineComponent, h } from "vue";
|
|
2
|
+
import { classNames } from "./classNames.js";
|
|
3
|
+
export const Container = defineComponent({
|
|
4
|
+
name: "Container",
|
|
5
|
+
props: {
|
|
6
|
+
size: { type: String, default: "lg" },
|
|
7
|
+
padding: { type: Boolean, default: true },
|
|
8
|
+
as: { type: String, default: "div" },
|
|
9
|
+
class: { type: String, default: undefined },
|
|
10
|
+
},
|
|
11
|
+
setup(props, { slots, attrs }) {
|
|
12
|
+
return () => h(props.as, {
|
|
13
|
+
...attrs,
|
|
14
|
+
class: classNames("st-container", `st-container--${props.size}`, props.padding && "st-container--padded", props.class),
|
|
15
|
+
}, slots.default?.());
|
|
16
|
+
},
|
|
17
|
+
});
|
|
18
|
+
//# sourceMappingURL=Container.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Container.js","sourceRoot":"","sources":["../src/Container.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAY7C,MAAM,CAAC,MAAM,SAAS,GAAG,eAAe,CAAC;IACvC,IAAI,EAAE,WAAW;IACjB,KAAK,EAAE;QACL,IAAI,EAAE,EAAE,IAAI,EAAE,MAA6B,EAAE,OAAO,EAAE,IAAI,EAAE;QAC5D,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;QACzC,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE;QACpC,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;KAC5C;IACD,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE;QAC3B,OAAO,GAAG,EAAE,CACV,CAAC,CACC,KAAK,CAAC,EAAE,EACR;YACE,GAAG,KAAK;YACR,KAAK,EAAE,UAAU,CACf,cAAc,EACd,iBAAiB,KAAK,CAAC,IAAI,EAAE,EAC7B,KAAK,CAAC,OAAO,IAAI,sBAAsB,EACvC,KAAK,CAAC,KAAK,CACZ;SACF,EACD,KAAK,CAAC,OAAO,EAAE,EAAE,CAClB,CAAC;IACN,CAAC;CACF,CAAC,CAAC"}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
export type DividerOrientation = "horizontal" | "vertical";
|
|
2
|
+
export type DividerVariant = "solid" | "dashed";
|
|
3
|
+
export type DividerProps = {
|
|
4
|
+
orientation?: DividerOrientation;
|
|
5
|
+
/** Spacing scale step (0..12) applied as margin around the divider. */
|
|
6
|
+
spacing?: number;
|
|
7
|
+
/** Optional label centered on a horizontal divider line. */
|
|
8
|
+
label?: string;
|
|
9
|
+
variant?: DividerVariant;
|
|
10
|
+
class?: string;
|
|
11
|
+
};
|
|
12
|
+
export declare const Divider: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
13
|
+
orientation: {
|
|
14
|
+
type: () => DividerOrientation;
|
|
15
|
+
default: string;
|
|
16
|
+
};
|
|
17
|
+
spacing: {
|
|
18
|
+
type: NumberConstructor;
|
|
19
|
+
default: undefined;
|
|
20
|
+
};
|
|
21
|
+
label: {
|
|
22
|
+
type: StringConstructor;
|
|
23
|
+
default: undefined;
|
|
24
|
+
};
|
|
25
|
+
variant: {
|
|
26
|
+
type: () => DividerVariant;
|
|
27
|
+
default: string;
|
|
28
|
+
};
|
|
29
|
+
class: {
|
|
30
|
+
type: StringConstructor;
|
|
31
|
+
default: undefined;
|
|
32
|
+
};
|
|
33
|
+
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
34
|
+
[key: string]: any;
|
|
35
|
+
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
36
|
+
orientation: {
|
|
37
|
+
type: () => DividerOrientation;
|
|
38
|
+
default: string;
|
|
39
|
+
};
|
|
40
|
+
spacing: {
|
|
41
|
+
type: NumberConstructor;
|
|
42
|
+
default: undefined;
|
|
43
|
+
};
|
|
44
|
+
label: {
|
|
45
|
+
type: StringConstructor;
|
|
46
|
+
default: undefined;
|
|
47
|
+
};
|
|
48
|
+
variant: {
|
|
49
|
+
type: () => DividerVariant;
|
|
50
|
+
default: string;
|
|
51
|
+
};
|
|
52
|
+
class: {
|
|
53
|
+
type: StringConstructor;
|
|
54
|
+
default: undefined;
|
|
55
|
+
};
|
|
56
|
+
}>> & Readonly<{}>, {
|
|
57
|
+
class: string;
|
|
58
|
+
label: string;
|
|
59
|
+
orientation: DividerOrientation;
|
|
60
|
+
variant: DividerVariant;
|
|
61
|
+
spacing: number;
|
|
62
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
63
|
+
//# sourceMappingURL=Divider.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../src/Divider.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,UAAU,CAAC;AAC3D,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEhD,MAAM,MAAM,YAAY,GAAG;IACzB,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,uEAAuE;IACvE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,OAAO;;cAGe,MAAM,kBAAkB;;;;;;;;;;;;cAG5B,MAAM,cAAc;;;;;;;;;;;cAHhB,MAAM,kBAAkB;;;;;;;;;;;;cAG5B,MAAM,cAAc;;;;;;;;;;;;;4EAgDjD,CAAC"}
|
package/dist/Divider.js
ADDED
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { defineComponent, h } from "vue";
|
|
2
|
+
import { classNames } from "./classNames.js";
|
|
3
|
+
import { spacingToken } from "./Flex.js";
|
|
4
|
+
export const Divider = defineComponent({
|
|
5
|
+
name: "Divider",
|
|
6
|
+
props: {
|
|
7
|
+
orientation: { type: String, default: "horizontal" },
|
|
8
|
+
spacing: { type: Number, default: undefined },
|
|
9
|
+
label: { type: String, default: undefined },
|
|
10
|
+
variant: { type: String, default: "solid" },
|
|
11
|
+
class: { type: String, default: undefined },
|
|
12
|
+
},
|
|
13
|
+
setup(props, { attrs }) {
|
|
14
|
+
return () => {
|
|
15
|
+
const isVertical = props.orientation === "vertical";
|
|
16
|
+
const hasLabel = !isVertical && props.label != null && props.label !== "";
|
|
17
|
+
const margin = spacingToken(props.spacing);
|
|
18
|
+
const classes = classNames("st-divider", `st-divider--${props.orientation}`, `st-divider--${props.variant}`, hasLabel && "st-divider--labeled", props.class);
|
|
19
|
+
if (hasLabel) {
|
|
20
|
+
return h("div", {
|
|
21
|
+
...attrs,
|
|
22
|
+
class: classes,
|
|
23
|
+
role: "separator",
|
|
24
|
+
"aria-orientation": "horizontal",
|
|
25
|
+
style: { marginBlock: margin, ...attrs.style },
|
|
26
|
+
}, [
|
|
27
|
+
h("span", { class: "st-divider__line", "aria-hidden": "true" }),
|
|
28
|
+
h("span", { class: "st-divider__label" }, props.label),
|
|
29
|
+
h("span", { class: "st-divider__line", "aria-hidden": "true" }),
|
|
30
|
+
]);
|
|
31
|
+
}
|
|
32
|
+
return h("div", {
|
|
33
|
+
...attrs,
|
|
34
|
+
class: classes,
|
|
35
|
+
role: "separator",
|
|
36
|
+
"aria-orientation": props.orientation,
|
|
37
|
+
style: {
|
|
38
|
+
marginBlock: isVertical ? undefined : margin,
|
|
39
|
+
marginInline: isVertical ? margin : undefined,
|
|
40
|
+
...attrs.style,
|
|
41
|
+
},
|
|
42
|
+
});
|
|
43
|
+
};
|
|
44
|
+
},
|
|
45
|
+
});
|
|
46
|
+
//# sourceMappingURL=Divider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Divider.js","sourceRoot":"","sources":["../src/Divider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAEzC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAezC,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC;IACrC,IAAI,EAAE,SAAS;IACf,KAAK,EAAE;QACL,WAAW,EAAE,EAAE,IAAI,EAAE,MAAkC,EAAE,OAAO,EAAE,YAAY,EAAE;QAChF,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;QAC7C,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;QAC3C,OAAO,EAAE,EAAE,IAAI,EAAE,MAA8B,EAAE,OAAO,EAAE,OAAO,EAAE;QACnE,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;KAC5C;IACD,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE;QACpB,OAAO,GAAG,EAAE;YACV,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC;YACpD,MAAM,QAAQ,GAAG,CAAC,UAAU,IAAI,KAAK,CAAC,KAAK,IAAI,IAAI,IAAI,KAAK,CAAC,KAAK,KAAK,EAAE,CAAC;YAC1E,MAAM,MAAM,GAAG,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;YAE3C,MAAM,OAAO,GAAG,UAAU,CACxB,YAAY,EACZ,eAAe,KAAK,CAAC,WAAW,EAAE,EAClC,eAAe,KAAK,CAAC,OAAO,EAAE,EAC9B,QAAQ,IAAI,qBAAqB,EACjC,KAAK,CAAC,KAAK,CACZ,CAAC;YAEF,IAAI,QAAQ,EAAE,CAAC;gBACb,OAAO,CAAC,CACN,KAAK,EACL;oBACE,GAAG,KAAK;oBACR,KAAK,EAAE,OAAO;oBACd,IAAI,EAAE,WAAW;oBACjB,kBAAkB,EAAE,YAAY;oBAChC,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,GAAI,KAAK,CAAC,KAAmC,EAAE;iBAC9E,EACD;oBACE,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,EAAE,CAAC;oBAC/D,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,mBAAmB,EAAE,EAAE,KAAK,CAAC,KAAK,CAAC;oBACtD,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,EAAE,CAAC;iBAChE,CACF,CAAC;YACJ,CAAC;YAED,OAAO,CAAC,CAAC,KAAK,EAAE;gBACd,GAAG,KAAK;gBACR,KAAK,EAAE,OAAO;gBACd,IAAI,EAAE,WAAW;gBACjB,kBAAkB,EAAE,KAAK,CAAC,WAAW;gBACrC,KAAK,EAAE;oBACL,WAAW,EAAE,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM;oBAC5C,YAAY,EAAE,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;oBAC7C,GAAI,KAAK,CAAC,KAAmC;iBAC9C;aACF,CAAC,CAAC;QACL,CAAC,CAAC;IACJ,CAAC;CACF,CAAC,CAAC"}
|
package/dist/Flex.d.ts
ADDED
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
export type FlexDirection = "row" | "column" | "row-reverse" | "column-reverse";
|
|
2
|
+
export type FlexAlign = "start" | "center" | "end" | "stretch" | "baseline";
|
|
3
|
+
export type FlexJustify = "start" | "center" | "end" | "between" | "around" | "evenly";
|
|
4
|
+
export type FlexProps = {
|
|
5
|
+
direction?: FlexDirection;
|
|
6
|
+
/** Spacing scale step (0..12) mapped to `--st-spacing-*`. */
|
|
7
|
+
gap?: number;
|
|
8
|
+
align?: FlexAlign;
|
|
9
|
+
justify?: FlexJustify;
|
|
10
|
+
wrap?: boolean;
|
|
11
|
+
inline?: boolean;
|
|
12
|
+
as?: string;
|
|
13
|
+
class?: string;
|
|
14
|
+
};
|
|
15
|
+
/** Resolve a spacing step to a `var(--st-spacing-N, fallback)` expression. */
|
|
16
|
+
export declare function spacingToken(step: number | undefined): string | undefined;
|
|
17
|
+
export declare function alignValue(align: FlexAlign | undefined): string | undefined;
|
|
18
|
+
export declare function justifyValue(justify: FlexJustify | undefined): string | undefined;
|
|
19
|
+
export declare const Flex: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
20
|
+
direction: {
|
|
21
|
+
type: () => FlexDirection;
|
|
22
|
+
default: string;
|
|
23
|
+
};
|
|
24
|
+
gap: {
|
|
25
|
+
type: NumberConstructor;
|
|
26
|
+
default: undefined;
|
|
27
|
+
};
|
|
28
|
+
align: {
|
|
29
|
+
type: () => FlexAlign;
|
|
30
|
+
default: undefined;
|
|
31
|
+
};
|
|
32
|
+
justify: {
|
|
33
|
+
type: () => FlexJustify;
|
|
34
|
+
default: undefined;
|
|
35
|
+
};
|
|
36
|
+
wrap: {
|
|
37
|
+
type: BooleanConstructor;
|
|
38
|
+
default: boolean;
|
|
39
|
+
};
|
|
40
|
+
inline: {
|
|
41
|
+
type: BooleanConstructor;
|
|
42
|
+
default: boolean;
|
|
43
|
+
};
|
|
44
|
+
as: {
|
|
45
|
+
type: StringConstructor;
|
|
46
|
+
default: string;
|
|
47
|
+
};
|
|
48
|
+
class: {
|
|
49
|
+
type: StringConstructor;
|
|
50
|
+
default: undefined;
|
|
51
|
+
};
|
|
52
|
+
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
53
|
+
[key: string]: any;
|
|
54
|
+
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
55
|
+
direction: {
|
|
56
|
+
type: () => FlexDirection;
|
|
57
|
+
default: string;
|
|
58
|
+
};
|
|
59
|
+
gap: {
|
|
60
|
+
type: NumberConstructor;
|
|
61
|
+
default: undefined;
|
|
62
|
+
};
|
|
63
|
+
align: {
|
|
64
|
+
type: () => FlexAlign;
|
|
65
|
+
default: undefined;
|
|
66
|
+
};
|
|
67
|
+
justify: {
|
|
68
|
+
type: () => FlexJustify;
|
|
69
|
+
default: undefined;
|
|
70
|
+
};
|
|
71
|
+
wrap: {
|
|
72
|
+
type: BooleanConstructor;
|
|
73
|
+
default: boolean;
|
|
74
|
+
};
|
|
75
|
+
inline: {
|
|
76
|
+
type: BooleanConstructor;
|
|
77
|
+
default: boolean;
|
|
78
|
+
};
|
|
79
|
+
as: {
|
|
80
|
+
type: StringConstructor;
|
|
81
|
+
default: string;
|
|
82
|
+
};
|
|
83
|
+
class: {
|
|
84
|
+
type: StringConstructor;
|
|
85
|
+
default: undefined;
|
|
86
|
+
};
|
|
87
|
+
}>> & Readonly<{}>, {
|
|
88
|
+
class: string;
|
|
89
|
+
inline: boolean;
|
|
90
|
+
as: string;
|
|
91
|
+
wrap: boolean;
|
|
92
|
+
justify: FlexJustify;
|
|
93
|
+
direction: FlexDirection;
|
|
94
|
+
gap: number;
|
|
95
|
+
align: FlexAlign;
|
|
96
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
97
|
+
//# sourceMappingURL=Flex.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../src/Flex.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,QAAQ,GAAG,aAAa,GAAG,gBAAgB,CAAC;AAChF,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,CAAC;AAC5E,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEvF,MAAM,MAAM,SAAS,GAAG;IACtB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,6DAA6D;IAC7D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAoBF,8EAA8E;AAC9E,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAKzE;AAmBD,wBAAgB,UAAU,CAAC,KAAK,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAE3E;AAED,wBAAgB,YAAY,CAAC,OAAO,EAAE,WAAW,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAEjF;AAED,eAAO,MAAM,IAAI;;cAGgB,MAAM,aAAa;;;;;;;;cAEvB,MAAM,SAAS;;;;cACb,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;cAHf,MAAM,aAAa;;;;;;;;cAEvB,MAAM,SAAS;;;;cACb,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;4EA4B9C,CAAC"}
|
package/dist/Flex.js
ADDED
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
import { defineComponent, h } from "vue";
|
|
2
|
+
import { classNames } from "./classNames.js";
|
|
3
|
+
/** rem fallbacks for the Sent Tech spacing scale (steps 5/7/9/10/11 are
|
|
4
|
+
interpolated since no token exists, but the var() is still preferred). */
|
|
5
|
+
const SPACING_FALLBACK = {
|
|
6
|
+
0: "0",
|
|
7
|
+
1: "0.25rem",
|
|
8
|
+
2: "0.5rem",
|
|
9
|
+
3: "0.75rem",
|
|
10
|
+
4: "1rem",
|
|
11
|
+
5: "1.25rem",
|
|
12
|
+
6: "1.5rem",
|
|
13
|
+
7: "1.75rem",
|
|
14
|
+
8: "2rem",
|
|
15
|
+
9: "2.25rem",
|
|
16
|
+
10: "2.5rem",
|
|
17
|
+
11: "2.75rem",
|
|
18
|
+
12: "3rem",
|
|
19
|
+
};
|
|
20
|
+
/** Resolve a spacing step to a `var(--st-spacing-N, fallback)` expression. */
|
|
21
|
+
export function spacingToken(step) {
|
|
22
|
+
if (step == null)
|
|
23
|
+
return undefined;
|
|
24
|
+
const clamped = Math.max(0, Math.min(12, Math.round(step)));
|
|
25
|
+
if (clamped === 0)
|
|
26
|
+
return "0";
|
|
27
|
+
return `var(--st-spacing-${clamped}, ${SPACING_FALLBACK[clamped]})`;
|
|
28
|
+
}
|
|
29
|
+
const ALIGN = {
|
|
30
|
+
start: "flex-start",
|
|
31
|
+
center: "center",
|
|
32
|
+
end: "flex-end",
|
|
33
|
+
stretch: "stretch",
|
|
34
|
+
baseline: "baseline",
|
|
35
|
+
};
|
|
36
|
+
const JUSTIFY = {
|
|
37
|
+
start: "flex-start",
|
|
38
|
+
center: "center",
|
|
39
|
+
end: "flex-end",
|
|
40
|
+
between: "space-between",
|
|
41
|
+
around: "space-around",
|
|
42
|
+
evenly: "space-evenly",
|
|
43
|
+
};
|
|
44
|
+
export function alignValue(align) {
|
|
45
|
+
return align ? ALIGN[align] : undefined;
|
|
46
|
+
}
|
|
47
|
+
export function justifyValue(justify) {
|
|
48
|
+
return justify ? JUSTIFY[justify] : undefined;
|
|
49
|
+
}
|
|
50
|
+
export const Flex = defineComponent({
|
|
51
|
+
name: "Flex",
|
|
52
|
+
props: {
|
|
53
|
+
direction: { type: String, default: "row" },
|
|
54
|
+
gap: { type: Number, default: undefined },
|
|
55
|
+
align: { type: String, default: undefined },
|
|
56
|
+
justify: { type: String, default: undefined },
|
|
57
|
+
wrap: { type: Boolean, default: false },
|
|
58
|
+
inline: { type: Boolean, default: false },
|
|
59
|
+
as: { type: String, default: "div" },
|
|
60
|
+
class: { type: String, default: undefined },
|
|
61
|
+
},
|
|
62
|
+
setup(props, { slots, attrs }) {
|
|
63
|
+
return () => {
|
|
64
|
+
const style = {
|
|
65
|
+
display: props.inline ? "inline-flex" : "flex",
|
|
66
|
+
flexDirection: props.direction,
|
|
67
|
+
flexWrap: props.wrap ? "wrap" : "nowrap",
|
|
68
|
+
alignItems: alignValue(props.align),
|
|
69
|
+
justifyContent: justifyValue(props.justify),
|
|
70
|
+
gap: spacingToken(props.gap),
|
|
71
|
+
...attrs.style,
|
|
72
|
+
};
|
|
73
|
+
return h(props.as, {
|
|
74
|
+
...attrs,
|
|
75
|
+
class: classNames("st-flex", props.class),
|
|
76
|
+
style,
|
|
77
|
+
}, slots.default?.());
|
|
78
|
+
};
|
|
79
|
+
},
|
|
80
|
+
});
|
|
81
|
+
//# sourceMappingURL=Flex.js.map
|
package/dist/Flex.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Flex.js","sourceRoot":"","sources":["../src/Flex.ts"],"names":[],"mappings":"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"}
|
package/dist/ForceGraph.d.ts
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { type PropType, type VNode } from "vue";
|
|
2
2
|
export type ForceGraphTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
|
|
3
|
-
export type ForceGraphNodeShape = "dot" | "circle" | "diamond" | "star" | "hexagon" | "box" | "square" | "triangle";
|
|
3
|
+
export type ForceGraphNodeShape = "dot" | "circle" | "diamond" | "star" | "hexagon" | "box" | "square" | "roundedbox" | "triangle";
|
|
4
|
+
/** Stroke dash style for typed edges. */
|
|
5
|
+
export type ForceGraphEdgeDash = "solid" | "dashed" | "dotted" | "long-dash";
|
|
4
6
|
export type ForceGraphNode = {
|
|
5
7
|
/** Stable identifier; referenced by edges. */
|
|
6
8
|
id: string;
|
|
@@ -34,8 +36,22 @@ export type ForceGraphEdge = {
|
|
|
34
36
|
/**
|
|
35
37
|
* When true the link renders as a dashed/faded "weak" link. Lets callers
|
|
36
38
|
* map a confidence dimension onto link strength without extra props.
|
|
39
|
+
* Equivalent to `dash: "dashed"` plus a faded stroke (kept for back-compat).
|
|
37
40
|
*/
|
|
38
41
|
weak?: boolean;
|
|
42
|
+
/**
|
|
43
|
+
* Typed dash pattern for the stroke. Independent of `weak`.
|
|
44
|
+
* "solid" = none, "dashed" = "6 4", "dotted" = "1 4", "long-dash" = "12 6".
|
|
45
|
+
* When omitted, falls back to the `weak` styling.
|
|
46
|
+
*/
|
|
47
|
+
dash?: ForceGraphEdgeDash;
|
|
48
|
+
/**
|
|
49
|
+
* Emphasise the edge (e.g. a reconciliation/match relation) with a thicker,
|
|
50
|
+
* fully-opaque stroke. Defaults to false.
|
|
51
|
+
*/
|
|
52
|
+
emphasis?: boolean;
|
|
53
|
+
/** Explicit stroke width override in px. Takes precedence over `emphasis`. */
|
|
54
|
+
width?: number;
|
|
39
55
|
};
|
|
40
56
|
export type ForceGraphLegendEntry = {
|
|
41
57
|
/** Label shown in the legend. */
|
|
@@ -46,6 +62,11 @@ export type ForceGraphLegendEntry = {
|
|
|
46
62
|
tone?: ForceGraphTone;
|
|
47
63
|
/** When true, renders as a dashed line (edge legend). */
|
|
48
64
|
weak?: boolean;
|
|
65
|
+
/**
|
|
66
|
+
* Typed dash pattern for an edge legend swatch. Independent of `weak`.
|
|
67
|
+
* When set, the swatch line uses the matching dash-array.
|
|
68
|
+
*/
|
|
69
|
+
dash?: ForceGraphEdgeDash;
|
|
49
70
|
};
|
|
50
71
|
export type ForceGraphProps = {
|
|
51
72
|
nodes: ForceGraphNode[];
|
|
@@ -59,11 +80,17 @@ export type ForceGraphProps = {
|
|
|
59
80
|
selectedIds?: string[];
|
|
60
81
|
focusId?: string | null;
|
|
61
82
|
legend?: ForceGraphLegendEntry[];
|
|
83
|
+
edgeCurve?: number;
|
|
62
84
|
onSelect?: (id: string) => void;
|
|
63
85
|
onOpenEntity?: (id: string) => void;
|
|
64
86
|
onEdgeHover?: (edge: ForceGraphEdge) => void;
|
|
65
87
|
class?: string;
|
|
66
88
|
};
|
|
89
|
+
/**
|
|
90
|
+
* Maps a dash style (or the legacy `weak` flag) to an SVG stroke-dasharray.
|
|
91
|
+
* Returns null for a solid stroke.
|
|
92
|
+
*/
|
|
93
|
+
export declare function edgeDashArray(dash: ForceGraphEdgeDash | undefined, weak?: boolean): string | null;
|
|
67
94
|
export declare function nodeShapePath(shape: ForceGraphNodeShape | undefined, r: number): string | null;
|
|
68
95
|
export declare const ForceGraph: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
69
96
|
nodes: {
|
|
@@ -110,6 +137,10 @@ export declare const ForceGraph: import("vue").DefineComponent<import("vue").Ext
|
|
|
110
137
|
type: PropType<ForceGraphLegendEntry[]>;
|
|
111
138
|
default: undefined;
|
|
112
139
|
};
|
|
140
|
+
edgeCurve: {
|
|
141
|
+
type: NumberConstructor;
|
|
142
|
+
default: number;
|
|
143
|
+
};
|
|
113
144
|
onSelect: {
|
|
114
145
|
type: PropType<(id: string) => void>;
|
|
115
146
|
default: undefined;
|
|
@@ -177,6 +208,10 @@ export declare const ForceGraph: import("vue").DefineComponent<import("vue").Ext
|
|
|
177
208
|
type: PropType<ForceGraphLegendEntry[]>;
|
|
178
209
|
default: undefined;
|
|
179
210
|
};
|
|
211
|
+
edgeCurve: {
|
|
212
|
+
type: NumberConstructor;
|
|
213
|
+
default: number;
|
|
214
|
+
};
|
|
180
215
|
onSelect: {
|
|
181
216
|
type: PropType<(id: string) => void>;
|
|
182
217
|
default: undefined;
|
|
@@ -209,6 +244,7 @@ export declare const ForceGraph: import("vue").DefineComponent<import("vue").Ext
|
|
|
209
244
|
showLabels: boolean;
|
|
210
245
|
iterations: number;
|
|
211
246
|
focusId: string | null;
|
|
247
|
+
edgeCurve: number;
|
|
212
248
|
onOpenEntity: (id: string) => void;
|
|
213
249
|
onEdgeHover: (edge: ForceGraphEdge) => void;
|
|
214
250
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
package/dist/ForceGraph.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ForceGraph.d.ts","sourceRoot":"","sources":["../src/ForceGraph.ts"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,QAAQ,EACb,KAAK,KAAK,EACX,MAAM,KAAK,CAAC;AAMb,MAAM,MAAM,cAAc,GACtB,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,GACrD,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,WAAW,CAAC;AAE1D,MAAM,MAAM,mBAAmB,GAC3B,KAAK,GAAG,QAAQ,GAChB,SAAS,GACT,MAAM,GACN,SAAS,GACT,KAAK,GAAG,QAAQ,GAChB,UAAU,CAAC;AAEf,MAAM,MAAM,cAAc,GAAG;IAC3B,8CAA8C;IAC9C,EAAE,EAAE,MAAM,CAAC;IACX,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,gEAAgE;IAChE,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oEAAoE;IACpE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,KAAK,CAAC,EAAE,mBAAmB,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,sBAAsB;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,sBAAsB;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,
|
|
1
|
+
{"version":3,"file":"ForceGraph.d.ts","sourceRoot":"","sources":["../src/ForceGraph.ts"],"names":[],"mappings":"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"}
|