@n8n/design-system 2.39.1 → 2.40.0

package/dist/components/N8nCommandBar/types.d.ts

@@ -18,4 +18,5 @@ export interface CommandBarItem {
     placeholder?: string;
     hasMoreChildren?: boolean;
     matchAnySearchTerm?: boolean;
+    disabled?: boolean;
 }

package/dist/components/N8nDropdownMenu/DropdownMenu.vue.d.ts

@@ -12,6 +12,7 @@ declare const __VLS_export: <T = string, D = never>(__VLS_props: NonNullable<Awa
     expose: (exposed: import('vue').ShallowUnwrapRef<{
         open: () => void;
         close: () => void;
+        highlightFirstItem: () => void;
     }>) => void;
     attrs: any;
     slots: DropdownMenuSlots<T, D>;

package/dist/components/N8nDropdownMenu/DropdownMenuSearchableContent.vue.d.ts

@@ -15,6 +15,7 @@ declare const __VLS_export: <T = string, D = never>(__VLS_props: NonNullable<Awa
     } ? P : {});
     expose: (exposed: import('vue').ShallowUnwrapRef<{
         resetNavigation: () => void;
+        highlightFirstItem: () => void;
     }>) => void;
     attrs: any;
     slots: Pick<DropdownMenuSlots<T, D>, "search-prefix" | "search-suffix"> & {

package/dist/components/N8nInputNumber/InputNumber.types.d.ts

@@ -4,6 +4,7 @@ export type InputNumberControlsPosition = 'both' | 'right';
 export type InputNumberProps = Omit<NumberFieldRootProps, 'formatOptions'> & {
     size?: InputNumberSize;
     precision?: number;
+    useGrouping?: boolean;
     controls?: boolean;
     controlsPosition?: InputNumberControlsPosition;
     placeholder?: string;

package/dist/components/N8nInputNumber/InputNumber.vue.d.ts

@@ -12,6 +12,7 @@ declare const __VLS_base: import('vue').DefineComponent<InputNumberProps, InputN
     size: import('./InputNumber.types').InputNumberSize;
     step: number;
     stepSnapping: boolean;
+    useGrouping: boolean;
     controls: boolean;
     controlsPosition: import('./InputNumber.types').InputNumberControlsPosition;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/N8nMenuItem/MenuItem.vue.d.ts

@@ -7,6 +7,7 @@ type __VLS_Props = {
     level?: number;
     open?: boolean;
     ariaLabel?: string;
+    scrollLabelOnOverflow?: boolean;
 };
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     click: () => any;

package/dist/components/N8nNodeCreatorNode/NodeCreatorNode.vue.d.ts

@@ -10,11 +10,13 @@ export interface Props {
     isOfficial?: boolean;
     hideNodeIcon?: boolean;
     isNew?: boolean;
+    disabled?: boolean;
 }
 type __VLS_Slots = {
     icon: {};
     extraDetails: {};
     dragContent: {};
+    trailing: {};
 };
 declare const __VLS_base: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     tooltipClick: (e: MouseEvent) => any;

package/dist/components/N8nResizeWrapper/ResizeWrapper.vue.d.ts

@@ -1,8 +1,12 @@
+import { ResizablePanel } from '../../composables/useResizablePanel';
 import { Direction, ResizeData } from '../../types';
 interface ResizeProps {
+    resizer?: ResizablePanel;
     isResizingEnabled?: boolean;
     height?: number;
     width?: number;
+    defaultHeight?: number;
+    defaultWidth?: number;
     minHeight?: number;
     maxHeight?: number;
     minWidth?: number;
@@ -11,10 +15,12 @@ interface ResizeProps {
     gridSize?: number;
     supportedDirections?: Direction[];
     window?: Window;
+    allowCollapse?: boolean;
+    allowFullWidth?: boolean;
 }
-declare var __VLS_1: {};
+declare var __VLS_8: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<ResizeProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     resize: (value: ResizeData) => any;
@@ -36,6 +42,8 @@ declare const __VLS_base: import('vue').DefineComponent<ResizeProps, {}, {}, {},
     isResizingEnabled: boolean;
     gridSize: number;
     supportedDirections: Direction[];
+    allowCollapse: boolean;
+    allowFullWidth: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/N8nSetupConnection/SetupConnection.types.d.ts

@@ -0,0 +1,13 @@
+import { ButtonProps } from '../../types/button';
+import { DropdownMenuItemProps } from '../N8nDropdownMenu/DropdownMenu.types';
+export interface SetupConnectionProps {
+    connected: boolean;
+    valueLabel?: string;
+    value?: string;
+    actionLabel: string;
+    actionVariant?: ButtonProps['variant'];
+    actions: DropdownMenuItemProps[];
+    actionDisabled?: boolean;
+    loading?: boolean;
+    disabled?: boolean;
+}

package/dist/components/N8nSetupConnection/SetupConnection.vue.d.ts

@@ -0,0 +1,24 @@
+import { SetupConnectionProps } from './SetupConnection.types';
+declare var __VLS_26: {}, __VLS_28: {}, __VLS_58: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_26) => any;
+} & {
+    'action-leading'?: (props: typeof __VLS_28) => any;
+} & {
+    footer?: (props: typeof __VLS_58) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<SetupConnectionProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    select: (id: string) => any;
+    action: () => any;
+}, string, import('vue').PublicProps, Readonly<SetupConnectionProps> & Readonly<{
+    onSelect?: ((id: string) => any) | undefined;
+    onAction?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/N8nSetupPanel/SetupPanel.types.d.ts

@@ -0,0 +1,14 @@
+export interface SetupPanelItem {
+    id: string;
+    title: string;
+    subtitle?: string;
+    completed: boolean;
+    disabled?: boolean;
+    hasAction?: boolean;
+}
+export interface SetupPanelProps {
+    items: SetupPanelItem[];
+    activeItemId?: string;
+    status?: 'incomplete' | 'validating' | 'complete' | 'executing';
+    executeDisabled?: boolean;
+}

package/dist/components/N8nSetupPanel/SetupPanel.vue.d.ts

@@ -0,0 +1,38 @@
+import { SetupPanelProps } from './SetupPanel.types';
+declare var __VLS_46: {
+    item: import('./SetupPanel.types').SetupPanelItem;
+}, __VLS_48: {
+    item: import('./SetupPanel.types').SetupPanelItem;
+}, __VLS_84: {
+    item: import('./SetupPanel.types').SetupPanelItem;
+}, __VLS_86: {
+    item: import('./SetupPanel.types').SetupPanelItem;
+};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_46) => any;
+} & {
+    action?: (props: typeof __VLS_48) => any;
+} & {
+    icon?: (props: typeof __VLS_84) => any;
+} & {
+    detail?: (props: typeof __VLS_86) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<SetupPanelProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:activeItemId": (id: string | undefined) => any;
+    detailClosed: () => any;
+    execute: () => any;
+    "update:overlapHeight": (height: number) => any;
+}, string, import('vue').PublicProps, Readonly<SetupPanelProps> & Readonly<{
+    "onUpdate:activeItemId"?: ((id: string | undefined) => any) | undefined;
+    onDetailClosed?: (() => any) | undefined;
+    onExecute?: (() => any) | undefined;
+    "onUpdate:overlapHeight"?: ((height: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/index.d.ts

@@ -16,10 +16,15 @@ export { default as N8nAvatar } from './N8nAvatar';
 export { default as N8nBadge } from './N8nBadge';
 export { default as N8nBlockUi } from './N8nBlockUi';
 export { default as N8nButton } from './N8nButton';
+export { default as N8nSetupPanel } from './N8nSetupPanel/SetupPanel.vue';
+export type { SetupPanelItem, SetupPanelProps } from './N8nSetupPanel/SetupPanel.types';
+export { default as N8nSetupConnection } from './N8nSetupConnection/SetupConnection.vue';
+export type { SetupConnectionProps } from './N8nSetupConnection/SetupConnection.types';
 export { default as N8nButtonList } from './N8nButtonList';
 export type { ButtonListOrientation, ButtonListProps } from './N8nButtonList';
 export { default as N8nCallout } from './N8nCallout';
 export { default as N8nCanvasThinkingPill } from './CanvasThinkingPill';
+export { default as N8nCanvasPill } from './CanvasPill';
 export { default as N8nCanvasCollaborationPill } from './CanvasCollaborationPill';
 export { default as N8nCard } from './N8nCard';
 export { default as N8nCircleLoader } from './N8nCircleLoader';

package/dist/composables/useResizablePanel.d.ts

@@ -0,0 +1,47 @@
+import { MaybeRefOrGetter } from 'vue';
+import { ResizeData } from '../types';
+type GetSize = number | ((containerSize: number) => number);
+export interface ResizablePanelDimensionOptions {
+    size?: MaybeRefOrGetter<number>;
+    defaultSize?: GetSize;
+    minSize?: GetSize;
+    maxSize?: GetSize;
+    snap?: boolean;
+    allowCollapse?: MaybeRefOrGetter<boolean>;
+    allowFullSize?: MaybeRefOrGetter<boolean>;
+    localStorageKey?: string;
+}
+export interface UseResizablePanelOptions {
+    container?: MaybeRefOrGetter<HTMLElement | null>;
+    width?: ResizablePanelDimensionOptions;
+    height?: ResizablePanelDimensionOptions;
+    scale?: MaybeRefOrGetter<number>;
+    gridSize?: MaybeRefOrGetter<number>;
+}
+export interface ResizablePanelDragCallbacks {
+    window?: Window;
+    displayedSize?: Pick<ResizeData, 'width' | 'height'>;
+    onResizeStart?: () => void;
+    onResize?: (data: ResizeData) => void;
+    onResizeEnd?: () => void;
+}
+export declare function useResizablePanel(options: UseResizablePanelOptions): {
+    width: import('vue').ComputedRef<number>;
+    height: import('vue').ComputedRef<number>;
+    isCollapsed: import('vue').ComputedRef<boolean>;
+    isFullSize: import('vue').ComputedRef<boolean>;
+    isWidthCollapsed: import('vue').ComputedRef<boolean>;
+    isHeightCollapsed: import('vue').ComputedRef<boolean>;
+    isWidthFullSize: import('vue').ComputedRef<boolean>;
+    isHeightFullSize: import('vue').ComputedRef<boolean>;
+    isResizing: import('vue').ComputedRef<boolean>;
+    activeDirection: import('vue').ComputedRef<"right" | "left" | "top" | "bottom" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | undefined>;
+    startResize: (event: MouseEvent, handlers?: ResizablePanelDragCallbacks) => (() => void) | undefined;
+    resetSize: (size?: {
+        width?: number | undefined;
+        height?: number | undefined;
+    }) => void;
+    cleanupResize: () => void;
+};
+export type ResizablePanel = ReturnType<typeof useResizablePanel>;
+export {};

package/dist/constants.d.ts

@@ -1 +1,2 @@
 export declare const TOOLTIP_DELAY_MS = 500;
+export declare const OVERLAY_LAYER_SELECTOR = "[data-dismissable-layer]";

package/dist/{en-BQBg3T3M.js → en-BVSQYf2U.js}

@@ -1,6 +1,17 @@
 import { i as e } from "./plugin-DT0YTbz-.js";
 //#region src/locale/lang/en.ts
 var t = /* @__PURE__ */ e({ default: () => n }), n = {
+	"setupPanel.label": "Workflow setup",
+	"setupPanel.back": "Back to setup checklist",
+	"setupPanel.complete": "Complete",
+	"setupPanel.credentialSelected": "Credential selected",
+	"setupPanel.setupComplete": "Setup complete",
+	"setupPanel.execute": "Execute",
+	"setupPanel.validating": "Validating…",
+	"setupPanel.executing": "Executing…",
+	"setupPanel.connected": "Connected",
+	"setupPanel.changeConnection": "Change connection",
+	"setupPanel.moreOptions": "More options",
 	"generic.retry": "Retry",
 	"generic.cancel": "Cancel",
 	"generic.close": "Close",
@@ -15,6 +26,8 @@ var t = /* @__PURE__ */ e({ default: () => n }), n = {
 	"nds.select.noResults": "No results found",
 	"nds.inputNumber.increase": "Increase",
 	"nds.inputNumber.decrease": "Decrease",
+	"resizeWrapper.resize": "Resize",
+	"resizeWrapper.drag": "Drag",
 	"notice.showMore": "Show more",
 	"notice.showLess": "Show less",
 	"formInput.validator.fieldRequired": "This field is required",

package/dist/index.d.ts

@@ -10,6 +10,8 @@ export { IconBodyLoaderKey, useInjectIconBodyLoader } from './composables/useIco
 export type { IconBodyLoader } from './composables/useIconBodyLoader';
 export { useMessage } from './composables/useMessage';
 export type { MessageBoxConfirmResult } from './composables/useMessage';
+export { useResizablePanel } from './composables/useResizablePanel';
+export type { UseResizablePanelOptions, ResizablePanel, ResizablePanelDimensionOptions, ResizablePanelDragCallbacks, } from './composables/useResizablePanel';
 export { useProvideTooltipAppendTo } from './composables/useTooltipAppendTo';
 export { default as N8nSelect2 } from './v2/components/Select/Select.vue';
 export { default as N8nSelect2Item } from './v2/components/Select/SelectItem.vue';