@n8n/design-system 2.37.0 → 2.38.0

package/README.md

@@ -2,48 +2,186 @@
 
 # @n8n/design-system
 
-A component system for [n8n](https://n8n.io) using Storybook to preview.
+The n8n component library for Vue 3. It gives you components, design tokens, icons, and
+the directives plugin. Run `pnpm dev` to see the components in Storybook.
 
-## Project setup
+## Table of Contents
 
-```
-pnpm install
-```
+- [Consume the package](#consume-the-package)
+- [Exports](#exports)
+- [Develop the package](#develop-the-package)
+- [Pack and publish](#pack-and-publish)
+- [License](#license)
 
-### Compiles and hot-reloads for development
+## Consume the package
 
-```
-pnpm storybook
-```
+You need a Vue 3 app with Vite. You also need the `vue` and `vue-router` packages.
 
-### Build static pages
+`vue` and `vue-router` are peer dependencies. The barrel imports `vue-router` at load
+time. If `vue-router` is absent, the build fails.
 
-```
-pnpm build:storybook
+### 1. Install
+
+Inside this monorepo, declare the package as a workspace dependency in your `package.json`:
+
+```json
+{
+  "dependencies": {
+    "@n8n/design-system": "workspace:*",
+    "vue": "catalog:frontend",
+    "vue-router": "catalog:frontend"
+  }
+}
 ```
 
-### Run your unit tests
+Outside this monorepo, install the package from npm:
 
+```sh
+npm install @n8n/design-system@latest vue vue-router
 ```
-pnpm test:unit
+
+Add `sass` as a dev dependency only when you `@use` the SCSS sources from
+[`./css/*`](#exports).
+
+### 2. Build the package first
+
+`.gitignore` excludes `dist`. So an in-repo app can resolve nothing before you build the
+package. Build the package with turbo. Turbo builds the workspace dependencies first.
+
+```sh
+pnpm turbo run build --filter=@n8n/design-system
 ```
 
-### Lints and fixes files
+A package that declares `@n8n/design-system` needs no extra step, because the `build` task
+of turbo depends on `^build`. If you install from npm, skip this step, because the tarball
+includes `dist`.
+
+### 3. Wire it into your app
+
+Import the two stylesheets before your own styles. `theme.css` gives you the design tokens,
+the CSS reset, and four `@font-face` rules. The components read their variables from these
+tokens.
+
+```ts
+// src/main.ts
+import '@n8n/design-system/style.css';
+import '@n8n/design-system/theme.css';
+import './styles.scss';
+
+import { IconBodyLoaderKey, loadLucideIconBody } from '@n8n/design-system/icons/lucide';
+import { N8nPlugin } from '@n8n/design-system/plugin';
+import { createApp } from 'vue';
+
+import App from './App.vue';
 
+const app = createApp(App);
+app.use(N8nPlugin, {});
+app.provide(IconBodyLoaderKey, loadLucideIconBody);
+app.mount('#app');
 ```
-pnpm lint
+
+`N8nPlugin` registers the `v-n8n-truncate` and `v-n8n-html` directives. Pass `{}` as the
+options argument.
+
+Do not skip this call. Ten components render their text through `v-n8n-html`: `N8nNotice`,
+`N8nTooltip`, `N8nTabs`, `N8nSticky`, `N8nInputLabel`, `N8nInfoAccordion`, `N8nEmptyState`,
+`CommandBarItem`, and the two `AskAssistantChat` message components. If the directive is
+absent, these components render empty and show no error.
+
+The `app.provide(IconBodyLoaderKey, loadLucideIconBody)` call gives you the full Lucide
+set. If you omit the call, `N8nIcon` renders only the bundled icon set. That set holds
+`triangle`, `status-error`, and the custom n8n icons. Every other Lucide name renders
+empty, and a dev build writes a warning to the console.
+
+The barrel gives you the components and their types:
+
+```vue
+<!-- src/App.vue -->
+<script setup lang="ts">
+import { N8nButton, N8nIcon, N8nText } from '@n8n/design-system';
+import type { ButtonVariant } from '@n8n/design-system';
+import { ref } from 'vue';
+
+const variant: ButtonVariant = 'solid';
+const clicks = ref(0);
+</script>
+
+<template>
+	<main class="page">
+		<N8nText size="medium">clicks: {{ clicks }}</N8nText>
+		<N8nButton :variant="variant" label="Click me" @click="clicks++" />
+		<N8nIcon icon="anvil" />
+	</main>
+</template>
 ```
 
-### Build css files
+The package includes the SCSS sources next to the compiled CSS. So an app with its own
+sass toolchain can use the mixins and the token maps:
 
+```scss
+// src/styles.scss
+@use '@n8n/design-system/css/mixins/breakpoints' as breakpoints;
+
+.page {
+	padding: var(--spacing--lg);
+
+	@include breakpoints.breakpoint('sm-and-down') {
+		padding: var(--spacing--2xs);
+	}
+}
 ```
-pnpm build:theme
-```
 
-### Monitor theme files and build any changes
+The `breakpoint` mixin compiles to `@media screen and (width<=991px)`.
+
+## Exports
+
+Every subpath resolves from `dist`. The package has no CommonJS build and no `require`
+condition.
+
+| Subpath                           | Contents                                                                                     |
+| --------------------------------- | -------------------------------------------------------------------------------------------- |
+| `@n8n/design-system`              | The barrel: components, composables, exported types, and the `locale` singleton.             |
+| `@n8n/design-system/plugin`       | `N8nPlugin`. It registers the `v-n8n-truncate` and `v-n8n-html` directives.                  |
+| `@n8n/design-system/icons/lucide` | `loadLucideIconBody` and `IconBodyLoaderKey`, for icons outside the bundled set.             |
+| `@n8n/design-system/style.css`    | The component styles.                                                                        |
+| `@n8n/design-system/theme.css`    | The design tokens, the CSS reset, four `@font-face` rules, and the element-plus overrides.   |
+| `@n8n/design-system/css/*`        | The SCSS sources: mixins, token maps, and one stylesheet per component. You must add `sass`. |
+| `@n8n/design-system/package.json` | The manifest.                                                                                |
+
+## Develop the package
 
+Run these commands from this directory.
+
+| Command          | What it does                                                           |
+| ---------------- | ---------------------------------------------------------------------- |
+| `pnpm dev`       | It starts Storybook on http://localhost:6006.                          |
+| `pnpm build`     | It builds `dist`. Build the workspace dependencies first — see step 2. |
+| `pnpm typecheck` | It runs `vue-tsc --noEmit` on `src`.                                   |
+| `pnpm test`      | It runs the unit tests one time.                                       |
+| `pnpm lint`      | It lints `src`. `pnpm lint:fix` applies the fixes.                     |
+| `pnpm clean`     | It removes `dist` and `.turbo`.                                        |
+
+## Pack and publish
+
+**Pack with `pnpm pack`. Never `npm pack`.**
+
+When `pnpm` packs the package, it rewrites the workspace protocol and the catalog
+references to fixed versions. For example, `"@n8n/composables": "workspace:*"` becomes
+`"1.27.0"`, and `"vue": "catalog:frontend"` becomes `"^3.5.13"`. `npm` copies both strings
+without a change. The npm registry client knows neither protocol. So an install of an
+`npm`-packed tarball fails:
+
+```text
+npm error code EUNSUPPORTEDPROTOCOL
+npm error Unsupported URL Type "catalog:": catalog:frontend
 ```
-pnpm watch:theme
+
+Build the package first, because `.gitignore` excludes `dist`. The `files` field includes
+`dist`, `assets/fonts`, and this README.
+
+```sh
+pnpm turbo run build --filter=@n8n/design-system
+pnpm pack --pack-destination /tmp/ds-pack
 ```
 
 ## License

package/dist/components/N8nIcon/icons.d.ts

@@ -369,6 +369,7 @@ export declare const updatedIconSet: {
     readonly laptop: import('vue').FunctionalComponent<import('vue').SVGAttributes, {}, any, {}>;
     readonly layers: import('vue').FunctionalComponent<import('vue').SVGAttributes, {}, any, {}>;
     readonly 'layout-template': import('vue').FunctionalComponent<import('vue').SVGAttributes, {}, any, {}>;
+    readonly 'life-buoy': import('vue').FunctionalComponent<import('vue').SVGAttributes, {}, any, {}>;
     readonly lightbulb: import('vue').FunctionalComponent<import('vue').SVGAttributes, {}, any, {}>;
     readonly link: import('vue').FunctionalComponent<import('vue').SVGAttributes, {}, any, {}>;
     readonly list: import('vue').FunctionalComponent<import('vue').SVGAttributes, {}, any, {}>;

package/dist/{v2/components/InputNumber → components/N8nInputNumber}/InputNumber.types.d.ts

@@ -12,6 +12,11 @@ export type InputNumberEmits = NumberFieldRootEmits & {
     focus: [event: FocusEvent];
     blur: [event: FocusEvent];
 };
+export interface InputNumberExposed {
+    focus: () => void;
+    blur: () => void;
+    select: () => void;
+}
 export type InputNumberControlSlotProps = {
     ui: {
         class: string;

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

@@ -1,16 +1,136 @@
-import { InputSize } from '../../types';
-type InputNumberProps = {
-    size?: InputSize;
-    min?: number;
-    max?: number;
-    step?: number;
-    precision?: number;
+import { InputNumberProps, InputNumberSlots } from './InputNumber.types';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<InputNumberSlots> & InputNumberSlots;
+    refs: {
+        inputRef: ({
+            $: import('vue').ComponentInternalInstance;
+            $data: {};
+            $props: {
+                readonly asChild?: boolean | undefined;
+                readonly as?: (import('reka-ui').AsTag | import('vue').Component) | undefined;
+            } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+            $attrs: {
+                [x: string]: unknown;
+            };
+            $refs: {
+                [x: string]: unknown;
+            };
+            $slots: Readonly<{
+                [name: string]: import('vue').Slot<any> | undefined;
+            }>;
+            $root: import('vue').ComponentPublicInstance | null;
+            $parent: import('vue').ComponentPublicInstance | null;
+            $host: Element | null;
+            $emit: (event: string, ...args: any[]) => void;
+            $el: any;
+            $options: import('vue').ComponentOptionsBase<Readonly<import('reka-ui').NumberFieldInputProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+                as: import('reka-ui').AsTag | import('vue').Component;
+            }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+                beforeCreate?: (() => void) | (() => void)[];
+                created?: (() => void) | (() => void)[];
+                beforeMount?: (() => void) | (() => void)[];
+                mounted?: (() => void) | (() => void)[];
+                beforeUpdate?: (() => void) | (() => void)[];
+                updated?: (() => void) | (() => void)[];
+                activated?: (() => void) | (() => void)[];
+                deactivated?: (() => void) | (() => void)[];
+                beforeDestroy?: (() => void) | (() => void)[];
+                beforeUnmount?: (() => void) | (() => void)[];
+                destroyed?: (() => void) | (() => void)[];
+                unmounted?: (() => void) | (() => void)[];
+                renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
+            };
+            $forceUpdate: () => void;
+            $nextTick: typeof import('vue').nextTick;
+            $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+        } & Readonly<{
+            as: import('reka-ui').AsTag | import('vue').Component;
+        }> & Omit<Readonly<import('reka-ui').NumberFieldInputProps> & Readonly<{}>, "as"> & import('vue').ShallowUnwrapRef<{}> & {} & import('vue').ComponentCustomProperties & {} & {
+            $slots: {
+                default?: (props: {}) => any;
+            };
+        }) | null;
+    };
+    rootEl: any;
 };
-declare const _default: import('vue').DefineComponent<InputNumberProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<InputNumberProps> & Readonly<{}>, {
-    size: InputSize;
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<InputNumberProps, {
+    focus: () => void;
+    blur: () => void;
+    select: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    focus: (event: FocusEvent) => any;
+    "update:modelValue": (val: number) => any;
+    blur: (event: FocusEvent) => any;
+}, string, import('vue').PublicProps, Readonly<InputNumberProps> & Readonly<{
+    onFocus?: ((event: FocusEvent) => any) | undefined;
+    "onUpdate:modelValue"?: ((val: number) => any) | undefined;
+    onBlur?: ((event: FocusEvent) => any) | undefined;
+}>, {
+    size: import('./InputNumber.types').InputNumberSize;
     step: number;
-    min: number;
-    max: number;
-    precision: number;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+    stepSnapping: boolean;
+    controls: boolean;
+    controlsPosition: import('./InputNumber.types').InputNumberControlsPosition;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    inputRef: ({
+        $: import('vue').ComponentInternalInstance;
+        $data: {};
+        $props: {
+            readonly asChild?: boolean | undefined;
+            readonly as?: (import('reka-ui').AsTag | import('vue').Component) | undefined;
+        } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import('vue').Slot<any> | undefined;
+        }>;
+        $root: import('vue').ComponentPublicInstance | null;
+        $parent: import('vue').ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: any;
+        $options: import('vue').ComponentOptionsBase<Readonly<import('reka-ui').NumberFieldInputProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+            as: import('reka-ui').AsTag | import('vue').Component;
+        }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import('vue').nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+    } & Readonly<{
+        as: import('reka-ui').AsTag | import('vue').Component;
+    }> & Omit<Readonly<import('reka-ui').NumberFieldInputProps> & Readonly<{}>, "as"> & import('vue').ShallowUnwrapRef<{}> & {} & import('vue').ComponentCustomProperties & {} & {
+        $slots: {
+            default?: (props: {}) => any;
+        };
+    }) | null;
+}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/N8nInputNumber/index.d.ts

@@ -1,2 +1,4 @@
 import { default as N8nInputNumber } from './InputNumber.vue';
 export default N8nInputNumber;
+export { N8nInputNumber };
+export type * from './InputNumber.types';

package/dist/components/N8nMarkdownEditor/MarkdownEditor.types.d.ts

@@ -1,6 +1,6 @@
 import { Editor, Extension, EditorOptions } from '@tiptap/core';
 export type MarkdownEditorVariant = 'ghost' | 'contained';
-export type MarkdownEditorToolbarMode = 'never' | 'hover' | 'always';
+export type MarkdownEditorToolbarMode = 'never' | 'hover' | 'always' | 'floating';
 export type N8nMarkdownEditorProps = {
     modelValue: string;
     variant?: MarkdownEditorVariant;

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

@@ -10,7 +10,6 @@ interface ResizeProps {
     scale?: number;
     gridSize?: number;
     supportedDirections?: Direction[];
-    outset?: boolean;
     window?: Window;
 }
 declare function __VLS_template(): {
@@ -42,7 +41,6 @@ declare const __VLS_component: import('vue').DefineComponent<ResizeProps, {}, {}
     isResizingEnabled: boolean;
     gridSize: number;
     supportedDirections: Direction[];
-    outset: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/dist/components/index.d.ts

@@ -46,6 +46,7 @@ export { default as N8nInfoTip } from './N8nInfoTip';
 export { default as N8nInput } from './N8nInput';
 export { default as N8nInputLabel } from './N8nInputLabel';
 export { default as N8nInputNumber } from './N8nInputNumber';
+export type * from './N8nInputNumber/InputNumber.types';
 export { default as N8nLink } from './N8nLink';
 export { default as N8nLogo } from './N8nLogo';
 export { default as N8nLoading } from './N8nLoading';
@@ -90,6 +91,7 @@ export { default as N8nResizeWrapper } from './N8nResizeWrapper';
 export { default as N8nSelect } from './N8nSelect';
 export { default as N8nSpinner } from './N8nSpinner';
 export { default as N8nStatusDot } from './N8nStatusDot';
+export type { StatusDotProps, StatusDotVariant } from './N8nStatusDot';
 export { default as N8nStepper } from './N8nStepper/Stepper.vue';
 export { default as N8nSticky } from './N8nSticky';
 export { default as N8nResizeableSticky } from './N8nResizeableSticky';

package/dist/css/common/var.scss

@@ -457,7 +457,6 @@ $input-small-height: 30px !default;
 $input-mini-font-size: 12px;
 /// height||Other|4
 $input-mini-height: 26px !default;
-$input-number-control-border-radius: 3px;
 
 /* Cascader
 -------------------------- */

package/dist/css/index.scss

@@ -8,7 +8,6 @@
 @use './dropdown.scss';
 @use './menu.scss';
 @use './input.scss';
-@use './input-number.scss';
 @use './radio.scss';
 @use './checkbox.scss';
 @use './switch.scss';

package/dist/index.d.ts

@@ -19,8 +19,6 @@ export type * from './v2/components/Checkbox/Checkbox.types';
 export type * from './components/N8nPagination/Pagination.types';
 export { default as N8nLoading2 } from './v2/components/Loading/Loading.vue';
 export type * from './v2/components/Loading/Loading.types';
-export { default as N8nInputNumber2 } from './v2/components/InputNumber/InputNumber.vue';
-export type * from './v2/components/InputNumber/InputNumber.types';
 export { default as N8nRadioGroupItem } from './components/N8nRadioGroup/RadioGroupItem.vue';
 export { default as N8nRadioGroup } from './components/N8nRadioGroup/RadioGroup.vue';
 export type * from './components/N8nRadioGroup/RadioGroupItem.types';