alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(theme,types): Add css vars for overwriting node colors

Browse Source 
* Add Styles type
This commit is contained in:
Braks
2022-04-04 21:42:48 +02:00
parent e91af56653
commit d179838f64
2 changed files with 49 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package/src/types/flow.ts
+12 -2
View File
@@ -11,8 +11,18 @@ export type ElementData = Record<any, any>
export type FlowElement<NodeData = ElementData, EdgeData = ElementData> = GraphNode<NodeData> | GraphEdge<EdgeData>
export type FlowElements<NodeData = ElementData, EdgeData = ElementData> = (FlowElement<NodeData> | FlowElement<EdgeData>)[]
export type CustomThemeVars = Record<string, string | number>
export type CSSVars =
| '--vf-node-color'
| '--vf-box-shadow'
| '--vf-node-bg'
| '--vf-node-text'
| '--vf-connection-path'
| '--vf-handle'
export type ThemeVars = { [key in CSSVars]?: CSSProperties['color'] }
export type Styles = CSSProperties & ThemeVars & CustomThemeVars
export type ClassFunc<Data = ElementData> = (element: FlowElement<Data>) => string
export type StyleFunc<Data = ElementData> = (element: FlowElement<Data>) => CSSProperties
export type StyleFunc<Data = ElementData> = (element: FlowElement<Data>) => Styles
/** base element props */
export interface Element<Data extends ElementData = ElementData> {
@@ -26,7 +36,7 @@ export interface Element<Data extends ElementData = ElementData> {
type?: string
data?: Data
class?: string | ClassFunc<Data>
style?: CSSProperties | StyleFunc<Data>
style?: Styles | StyleFunc<Data>
hidden?: boolean
}
export type Elements<NodeData = ElementData, EdgeData = ElementData> = (Node<NodeData> | Edge<EdgeData>)[]