alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Removed classcat and reworked class types from string to ClassValue

Browse Source
This commit is contained in:
peterkogo
2025-01-29 12:26:42 +01:00
parent 55364e6298
commit 25db8d4e66
29 changed files with 66 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/svelte/src/lib/plugins/Background/Background.svelte
+1 -3
View File
@@ -7,8 +7,6 @@
</script>
<script lang="ts">
import cc from 'classcat';
import { useStore } from '$lib/store';
import { BackgroundVariant, type BackgroundProps } from './types';
@@ -49,7 +47,7 @@
</script>
<svg
class={cc(['svelte-flow__background', className])}
class={['svelte-flow__background', className]}
data-testid="svelte-flow__background"
style:--xy-background-color-props={bgColor}
style:--xy-background-pattern-color-props={patternColor}
packages/svelte/src/lib/plugins/Background/DotPattern.svelte
+3 -3
View File
@@ -1,12 +1,12 @@
<script lang="ts">
import cc from 'classcat';
import type { ClassValue } from 'svelte/elements';
let { radius, class: className }: { radius: number; class?: string } = $props();
let { radius, class: className }: { radius: number; class?: ClassValue } = $props();
</script>
<circle
cx={radius}
cy={radius}
r={radius}
class={cc(['svelte-flow__background-pattern', 'dots', className])}
class={['svelte-flow__background-pattern', 'dots', className]}
/>
packages/svelte/src/lib/plugins/Background/LinePattern.svelte
+3 -3
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import cc from 'classcat';
import type { ClassValue } from 'svelte/elements';
import type { BackgroundVariant } from './types';
let {
@@ -11,12 +11,12 @@
lineWidth: number;
dimensions: [number, number];
variant: BackgroundVariant;
class?: string;
class?: ClassValue;
} = $props();
</script>
<path
stroke-width={lineWidth}
d={`M${dimensions[0] / 2} 0 V${dimensions[1]} M0 ${dimensions[1] / 2} H${dimensions[0]}`}
class={cc(['svelte-flow__background-pattern', variant, className])}
class={['svelte-flow__background-pattern', variant, className]}
/>
packages/svelte/src/lib/plugins/Background/types.ts
+3 -1
View File
@@ -1,3 +1,5 @@
import type { ClassValue } from 'svelte/elements';
export enum BackgroundVariant {
Lines = 'lines',
Dots = 'dots',
@@ -13,7 +15,7 @@ export type BackgroundProps = {
/** Class applied to the pattern */
patternClass?: string;
/** Class applied to the container */
class?: string;
class?: ClassValue;
/** Gap between repetitions of the pattern */
gap?: number | [number, number];
/** Size of a single pattern element */
packages/svelte/src/lib/plugins/Controls/ControlButton.svelte
+1 -3
View File
@@ -1,6 +1,4 @@
<script lang="ts">
import cc from 'classcat';
import type { ControlButtonProps } from './types';
let {
@@ -19,7 +17,7 @@
<button
type="button"
{onclick}
class={cc(['svelte-flow__controls-button', className])}
class={['svelte-flow__controls-button', className]}
style:--xy-controls-button-background-color-props={bgColor}
style:--xy-controls-button-background-color-hover-props={bgColorHover}
style:--xy-controls-button-color-props={color}
packages/svelte/src/lib/plugins/Controls/Controls.svelte
+2 -4
View File
@@ -1,8 +1,6 @@
<script lang="ts">
import cc from 'classcat';
import Panel from '$lib/container/Panel/Panel.svelte';
import { useStore } from '$lib/store';
import Panel from '$lib/container/Panel/Panel.svelte';
import ControlButton from './ControlButton.svelte';
import PlusIcon from './Icons/Plus.svelte';
import MinusIcon from './Icons/Minus.svelte';
@@ -71,7 +69,7 @@
</script>
<Panel
class={cc(['svelte-flow__controls', orientationClass, className])}
class={['svelte-flow__controls', orientationClass, className]}
{position}
data-testid="svelte-flow__controls"
aria-label={ariaLabel ?? 'Svelte Flow controls'}
packages/svelte/src/lib/plugins/Controls/types.ts
+3 -3
View File
@@ -1,5 +1,5 @@
import type { Snippet } from 'svelte';
import type { HTMLButtonAttributes } from 'svelte/elements';
import type { ClassValue, HTMLButtonAttributes } from 'svelte/elements';
import type { PanelPosition } from '@xyflow/system';
import type { FitViewOptions } from '$lib/types';
@@ -23,7 +23,7 @@ export type ControlsProps = {
buttonBorderColor?: string;
'aria-label'?: string;
style?: string;
class?: string;
class?: ClassValue;
orientation?: 'horizontal' | 'vertical';
children?: Snippet;
before?: Snippet;
@@ -32,7 +32,7 @@ export type ControlsProps = {
};
export type ControlButtonProps = HTMLButtonAttributes & {
class?: string;
class?: ClassValue;
bgColor?: string;
bgColorHover?: string;
color?: string;
packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
+1 -2
View File
@@ -6,7 +6,6 @@
</script>
<script lang="ts">
import cc from 'classcat';
import {
getBoundsOfRects,
getInternalNodesBounds,
@@ -84,7 +83,7 @@
<Panel
{position}
style={style + (bgColor ? `;--xy-minimap-background-color-props:${bgColor}` : '')}
class={cc(['svelte-flow__minimap', className])}
class={['svelte-flow__minimap', className]}
data-testid="svelte-flow__minimap"
>
{#if store.panZoom}
packages/svelte/src/lib/plugins/Minimap/MinimapNode.svelte
+3 -3
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import cc from 'classcat';
import type { ClassValue } from 'svelte/elements';
let {
x,
@@ -24,12 +24,12 @@
strokeColor?: string;
strokeWidth?: number;
selected?: boolean;
class?: string;
class?: ClassValue;
} = $props();
</script>
<rect
class={cc(['svelte-flow__minimap-node', className])}
class={['svelte-flow__minimap-node', className]}
class:selected
{x}
{y}
packages/svelte/src/lib/plugins/Minimap/types.ts
+2 -2
View File
@@ -1,5 +1,5 @@
import type { PanelPosition } from '@xyflow/system';
import type { ClassValue } from 'svelte/elements';
import type { Node } from '$lib/types';
export type GetMiniMapNodeAttribute = (node: Node) => string;
@@ -29,7 +29,7 @@ export type MiniMapProps = {
*/
position?: PanelPosition;
/** Class applied to container */
class?: string;
class?: ClassValue;
/** Style applied to container */
style?: string;
/** The aria-label applied to container */
packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte
+1 -2
View File
@@ -1,6 +1,5 @@
<script lang="ts">
import { getContext, onMount } from 'svelte';
import cc from 'classcat';
import { useStore } from '$lib/store';
import {
XYResizer,
@@ -115,7 +114,7 @@
</script>
<div
class={cc(['svelte-flow__resize-control', 'nodrag', ...positionClassNames, variant, className])}
class={['svelte-flow__resize-control', 'nodrag', ...positionClassNames, variant, className]}
bind:this={resizeControlRef}
style={controlStyle}
>
packages/svelte/src/lib/plugins/NodeResizer/types.ts
+3 -2
View File
@@ -1,3 +1,5 @@
import type { Snippet } from 'svelte';
import type { ClassValue } from 'svelte/elements';
import type {
ControlPosition,
ResizeControlVariant,
@@ -6,7 +8,6 @@ import type {
OnResize,
OnResizeEnd
} from '@xyflow/system';
import type { Snippet } from 'svelte';
export type NodeResizerProps = {
/** Id of the node it is resizing
@@ -68,7 +69,7 @@ export type ResizeControlProps = Pick<
* @example ResizeControlVariant.Handle, ResizeControlVariant.Line
*/
variant?: ResizeControlVariant;
class?: string;
class?: ClassValue;
style?: string;
children?: Snippet;
};