-
😿
+"
+
"
`;
diff --git a/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.stories.ts b/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.stories.ts
index feb43c23bf..8e229231df 100644
--- a/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.stories.ts
+++ b/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.stories.ts
@@ -1,5 +1,5 @@
import N8nActionDropdown from './ActionDropdown.vue';
-import type { StoryFn } from '@storybook/vue';
+import type { StoryFn } from '@storybook/vue3';
export default {
title: 'Atoms/ActionDropdown',
@@ -8,8 +8,8 @@ export default {
placement: {
control: {
type: 'select',
- options: ['top', 'top-end', 'top-start', 'bottom', 'bottom-end', 'bottom-start'],
},
+ options: ['top', 'top-end', 'top-start', 'bottom', 'bottom-end', 'bottom-start'],
},
activatorIcon: {
control: {
@@ -19,18 +19,19 @@ export default {
trigger: {
control: {
type: 'select',
- options: ['click', 'hover'],
},
+ options: ['click', 'hover'],
},
},
};
const template: StoryFn = (args, { argTypes }) => ({
+ setup: () => ({ args }),
props: Object.keys(argTypes),
components: {
N8nActionDropdown,
},
- template: '😿
- Headline you need to know
+
- Long description that you should know something is the way it is because of how it is.
+
-
+
-
+
+
@@ -29,6 +30,7 @@ WithTitle.args = {
};
const PanelTemplate: StoryFn = (args, { argTypes }) => ({
+ setup: () => ({ args }),
props: Object.keys(argTypes),
components: {
N8nNodeCreatorNode,
@@ -39,11 +41,11 @@ const PanelTemplate: StoryFn = (args, { argTypes }) => ({
};
},
template: `
-
-
+
+
-
+
-
+
Lorem ipsum dolor sit amet
diff --git a/packages/design-system/src/components/N8nNodeCreatorNode/NodeCreatorNode.vue b/packages/design-system/src/components/N8nNodeCreatorNode/NodeCreatorNode.vue index 433eb7de12..87dc9ad46a 100644 --- a/packages/design-system/src/components/N8nNodeCreatorNode/NodeCreatorNode.vue +++ b/packages/design-system/src/components/N8nNodeCreatorNode/NodeCreatorNode.vue @@ -4,7 +4,6 @@ [$style.creatorNode]: true, [$style.hasAction]: !showActionArrow, }" - v-on="$listeners" v-bind="$attrs" >
diff --git a/packages/design-system/src/components/N8nNodeIcon/NodeIcon.stories.ts b/packages/design-system/src/components/N8nNodeIcon/NodeIcon.stories.ts
index 5c05fddf80..75a7d18496 100644
--- a/packages/design-system/src/components/N8nNodeIcon/NodeIcon.stories.ts
+++ b/packages/design-system/src/components/N8nNodeIcon/NodeIcon.stories.ts
@@ -1,5 +1,5 @@
import N8nNodeIcon from './NodeIcon.vue';
-import type { StoryFn } from '@storybook/vue';
+import type { StoryFn } from '@storybook/vue3';
export default {
title: 'Atoms/NodeIcon',
@@ -7,11 +7,12 @@ export default {
};
const DefaultTemplate: StoryFn = (args, { argTypes }) => ({
+ setup: () => ({ args }),
props: Object.keys(argTypes),
components: {
N8nNodeIcon,
},
- template: '
diff --git a/packages/design-system/src/components/N8nNotice/Notice.stories.ts b/packages/design-system/src/components/N8nNotice/Notice.stories.ts
index af840d2f83..7da7555cbb 100644
--- a/packages/design-system/src/components/N8nNotice/Notice.stories.ts
+++ b/packages/design-system/src/components/N8nNotice/Notice.stories.ts
@@ -1,5 +1,5 @@
import N8nNotice from './Notice.vue';
-import type { StoryFn } from '@storybook/vue';
+import type { StoryFn } from '@storybook/vue3';
export default {
title: 'Atoms/Notice',
@@ -13,20 +13,22 @@ export default {
};
const SlotTemplate: StoryFn = (args, { argTypes }) => ({
+ setup: () => ({ args }),
props: Object.keys(argTypes),
components: {
N8nNotice,
},
template:
- 'This is a notice! Thread carefully from this point forward. ',
+ 'This is a notice! Thread carefully from this point forward. ',
});
const PropTemplate: StoryFn = (args, { argTypes }) => ({
+ setup: () => ({ args }),
props: Object.keys(argTypes),
components: {
N8nNotice,
},
- template: '
-
- Hello world! This is a notice.
-
+"
+
"
`;
exports[`components > N8nNotice > props > content > should render correctly with content prop 1`] = `
-"Hello world! This is a notice.
+"
"
`;
exports[`components > N8nNotice > props > content > should sanitize rendered HTML 1`] = `
-"
- This is a notice.
+
+"
"
`;
exports[`components > N8nNotice > should render correctly 1`] = `
-"
- This is a notice.
+
+"
"
`;
diff --git a/packages/design-system/src/components/N8nOption/Option.vue b/packages/design-system/src/components/N8nOption/Option.vue
index f17ed7602e..de11bf11e3 100644
--- a/packages/design-system/src/components/N8nOption/Option.vue
+++ b/packages/design-system/src/components/N8nOption/Option.vue
@@ -1,4 +1,17 @@
+
+
+
+
+
+
diff --git a/packages/design-system/src/components/N8nPulse/Pulse.stories.ts b/packages/design-system/src/components/N8nPulse/Pulse.stories.ts
index a91328ba69..4d29b64379 100644
--- a/packages/design-system/src/components/N8nPulse/Pulse.stories.ts
+++ b/packages/design-system/src/components/N8nPulse/Pulse.stories.ts
@@ -1,5 +1,5 @@
import N8nPulse from './Pulse.vue';
-import type { StoryFn } from '@storybook/vue';
+import type { StoryFn } from '@storybook/vue3';
export default {
title: 'Atoms/Pulse',
diff --git a/packages/design-system/src/components/N8nRadioButtons/RadioButton.vue b/packages/design-system/src/components/N8nRadioButtons/RadioButton.vue
index 221be4b48f..8d4ea4fca8 100644
--- a/packages/design-system/src/components/N8nRadioButtons/RadioButton.vue
+++ b/packages/design-system/src/components/N8nRadioButtons/RadioButton.vue
@@ -9,7 +9,6 @@
}"
aria-checked="true"
>
-
+ template: `
`,
methods,
data() {
diff --git a/packages/design-system/src/components/N8nRadioButtons/RadioButtons.vue b/packages/design-system/src/components/N8nRadioButtons/RadioButtons.vue
index 1972d4fd60..4ff7d63e91 100644
--- a/packages/design-system/src/components/N8nRadioButtons/RadioButtons.vue
+++ b/packages/design-system/src/components/N8nRadioButtons/RadioButtons.vue
@@ -7,10 +7,10 @@
v-for="option in options"
:key="option.value"
v-bind="option"
- :active="value === option.value"
+ :active="modelValue === option.value"
:size="size"
:disabled="disabled || option.disabled"
- @click="() => onClick(option)"
+ @click.prevent.stop="onClick(option)"
/>
@@ -30,7 +30,7 @@ export interface RadioOption {
export default defineComponent({
name: 'n8n-radio-buttons',
props: {
- value: {
+ modelValue: {
type: String,
},
options: {
@@ -52,7 +52,7 @@ export default defineComponent({
if (this.disabled || option.disabled) {
return;
}
- this.$emit('input', option.value);
+ this.$emit('update:modelValue', option.value);
},
},
});
diff --git a/packages/design-system/src/components/N8nRecycleScroller/RecycleScroller.stories.ts b/packages/design-system/src/components/N8nRecycleScroller/RecycleScroller.stories.ts
index 7e75a5d51a..d9e5a75ba9 100644
--- a/packages/design-system/src/components/N8nRecycleScroller/RecycleScroller.stories.ts
+++ b/packages/design-system/src/components/N8nRecycleScroller/RecycleScroller.stories.ts
@@ -1,5 +1,5 @@
/* eslint-disable @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment */
-import type { StoryFn } from '@storybook/vue';
+import type { StoryFn } from '@storybook/vue3';
import N8nRecycleScroller from './RecycleScroller.vue';
import type { ComponentInstance } from 'vue';
@@ -9,7 +9,8 @@ export default {
argTypes: {},
};
-const Template: StoryFn = () => ({
+const Template: StoryFn = (args) => ({
+ setup: () => ({ args }),
components: {
N8nRecycleScroller,
},
@@ -42,7 +43,7 @@ const Template: StoryFn = () => ({
},
},
template: `
- This is a notice.
+
{{ label }}
@@ -76,7 +74,6 @@ export default defineComponent({
}
.button {
- border-radius: 0;
display: flex;
align-items: center;
border-radius: var(--border-radius-base);
diff --git a/packages/design-system/src/components/N8nRadioButtons/RadioButtons.stories.ts b/packages/design-system/src/components/N8nRadioButtons/RadioButtons.stories.ts
index c711b0ce85..e7b3ac013d 100644
--- a/packages/design-system/src/components/N8nRadioButtons/RadioButtons.stories.ts
+++ b/packages/design-system/src/components/N8nRadioButtons/RadioButtons.stories.ts
@@ -1,7 +1,7 @@
import N8nRadioButtons from './RadioButtons.vue';
import { action } from '@storybook/addon-actions';
-import type { StoryFn } from '@storybook/vue';
+import type { StoryFn } from '@storybook/vue3';
export default {
title: 'Atoms/RadioButtons',
@@ -18,15 +18,16 @@ export default {
};
const methods = {
- onInput: action('input'),
+ onInput: action('update:modelValue'),
};
const Template: StoryFn = (args, { argTypes }) => ({
+ setup: () => ({ args }),
props: Object.keys(argTypes),
components: {
N8nRadioButtons,
},
- template: `
-
+
{
+ void nextTick(() => {
const itemId = item[props.itemKey];
const itemRef = itemRefs.value[itemId] as HTMLElement;
const previousSize = itemSizeCache.value[itemId];
@@ -186,7 +186,7 @@ export default defineComponent({
function onWindowResize() {
if (wrapperRef.value) {
wrapperHeight.value = wrapperRef.value.offsetHeight;
- nextTick(() => {
+ void nextTick(() => {
updateItemSizeCache(visibleItems.value);
});
}
diff --git a/packages/design-system/src/components/N8nRecycleScroller/__tests__/RecycleScroller.spec.ts b/packages/design-system/src/components/N8nRecycleScroller/__tests__/RecycleScroller.spec.ts
index 3b062e5165..662f58798e 100644
--- a/packages/design-system/src/components/N8nRecycleScroller/__tests__/RecycleScroller.spec.ts
+++ b/packages/design-system/src/components/N8nRecycleScroller/__tests__/RecycleScroller.spec.ts
@@ -12,7 +12,7 @@ describe('components', () => {
describe('N8nRecycleScroller', () => {
it('should render correctly', () => {
const wrapper = render(N8nRecycleScroller, {
- propsData: {
+ props: {
itemSize,
itemKey,
items,
diff --git a/packages/design-system/src/components/N8nResizeWrapper/ResizeWrapper.stories.js b/packages/design-system/src/components/N8nResizeWrapper/ResizeWrapper.stories.js
index 5a5d355b16..063ba3de85 100644
--- a/packages/design-system/src/components/N8nResizeWrapper/ResizeWrapper.stories.js
+++ b/packages/design-system/src/components/N8nResizeWrapper/ResizeWrapper.stories.js
@@ -1,5 +1,6 @@
import { action } from '@storybook/addon-actions';
import N8nResizeWrapper from './ResizeWrapper.vue';
+import { ref } from 'vue';
export default {
title: 'Atoms/ResizeWrapper',
@@ -8,28 +9,34 @@ export default {
const methods = {
onInput: action('input'),
- onResize(resizeData) {
- action('resize', resizeData);
- this.newHeight = resizeData.height;
- this.newWidth = resizeData.width;
- },
onResizeEnd: action('resizeend'),
onResizeStart: action('resizestart'),
};
const Template = (args, { argTypes }) => ({
+ setup: () => {
+ const newWidth = ref(args.width);
+ const newHeight = ref(args.height);
+
+ function onResize(resizeData) {
+ action('resize', resizeData);
+ newHeight.value = resizeData.height;
+ newWidth.value = resizeData.width;
+ }
+
+ return {
+ onResize,
+ newWidth,
+ newHeight,
+ background:
+ 'linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(255,154,0,1) 10%, rgba(208,222,33,1) 20%, rgba(79,220,74,1) 30%, rgba(63,218,216,1) 40%, rgba(47,201,226,1) 50%, rgba(28,127,238,1) 60%, rgba(95,21,242,1) 70%, rgba(186,12,248,1) 80%, rgba(251,7,217,1) 90%, rgba(255,0,0,1) 100%)',
+ args,
+ };
+ },
props: Object.keys(argTypes),
components: {
N8nResizeWrapper,
},
- data() {
- return {
- newWidth: this.width,
- newHeight: this.height,
- background:
- 'linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(255,154,0,1) 10%, rgba(208,222,33,1) 20%, rgba(79,220,74,1) 30%, rgba(63,218,216,1) 40%, rgba(47,201,226,1) 50%, rgba(28,127,238,1) 60%, rgba(95,21,242,1) 70%, rgba(186,12,248,1) 80%, rgba(251,7,217,1) 90%, rgba(255,0,0,1) 100%)',
- };
- },
computed: {
containerStyles() {
return {
@@ -41,7 +48,7 @@ const Template = (args, { argTypes }) => ({
},
template: `