mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-24 20:24:05 -08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

fix(editor): Fix design system component props (#8923)

Browse source
This commit is contained in:
Csaba Tuncsik 2024-03-20 05:10:39 +01:00 committed by GitHub
parent d7bfd45333
commit 7176cd1407
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 12 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
View file

@ -4,7 +4,7 @@
ref="elementDropdown"
:placement="placement"
:trigger="trigger"
:popper-class="{ [$style.shadow]: true, [$style.hideArrow]: hideArrow }"
:popper-class="popperClass"
@command="onSelect"
@visible-change="onVisibleChange"
>
@ -57,7 +57,7 @@
// by Element UI dropdown component).
// It can be used in different parts of editor UI while ActionToggle
// is designed to be used in card components.
import { ref, useCssModule, useAttrs } from 'vue';
import { ref, useCssModule, useAttrs, computed } from 'vue';
import { ElDropdown, ElDropdownMenu, ElDropdownItem, type Placement } from 'element-plus';
import N8nIcon from '../N8nIcon';
import { N8nKeyboardShortcut } from '../N8nKeyboardShortcut';
@ -86,7 +86,7 @@ interface ActionDropdownProps {
hideArrow?: boolean;
}
withDefaults(defineProps<ActionDropdownProps>(), {
const props = withDefaults(defineProps<ActionDropdownProps>(), {
placement: 'bottom',
activatorIcon: 'ellipsis-h',
activatorSize: 'medium',
@ -111,6 +111,10 @@ const getItemClasses = (item: IActionDropdownItem): Record<string, boolean> => {
const $emit = defineEmits(['select', 'visibleChange']);
const elementDropdown = ref<InstanceType<typeof ElDropdown>>();
const popperClass = computed(
() => `${$style.shadow}${props.hideArrow ? ` ${$style.hideArrow}` : ''}`,
);
const onSelect = (action: string) => $emit('select', action);
const onVisibleChange = (open: boolean) => $emit('visibleChange', open);

4
packages/design-system/src/components/N8nActionDropdown/__tests__/__snapshots__/ActionDropdown.spec.ts.snap
View file

@ -2,12 +2,12 @@
exports[`components > N8nActionDropdown > should render custom styling correctly 1`] = `
"<div class="action-dropdown-container actionDropdownContainer">
<el-dropdown-stub trigger="click" effect="light" placement="bottom" popperoptions="[object Object]" size="" splitbutton="false" hideonclick="true" loop="true" showtimeout="150" hidetimeout="150" tabindex="0" maxheight="" popperclass="[object Object]" disabled="false" role="menu" teleported="true"></el-dropdown-stub>
<el-dropdown-stub trigger="click" effect="light" placement="bottom" popperoptions="[object Object]" size="" splitbutton="false" hideonclick="true" loop="true" showtimeout="150" hidetimeout="150" tabindex="0" maxheight="" popperclass="shadow" disabled="false" role="menu" teleported="true"></el-dropdown-stub>
</div>"
`;
exports[`components > N8nActionDropdown > should render default styling correctly 1`] = `
"<div class="action-dropdown-container actionDropdownContainer" teleported="false">
<el-dropdown-stub trigger="click" effect="light" placement="bottom" popperoptions="[object Object]" size="" splitbutton="false" hideonclick="true" loop="true" showtimeout="150" hidetimeout="150" tabindex="0" maxheight="" popperclass="[object Object]" disabled="false" role="menu" teleported="true"></el-dropdown-stub>
<el-dropdown-stub trigger="click" effect="light" placement="bottom" popperoptions="[object Object]" size="" splitbutton="false" hideonclick="true" loop="true" showtimeout="150" hidetimeout="150" tabindex="0" maxheight="" popperclass="shadow" disabled="false" role="menu" teleported="true"></el-dropdown-stub>
</div>"
`;

4
packages/design-system/src/components/N8nAvatar/Avatar.vue
View file

@ -19,8 +19,8 @@ import Avatar from 'vue-boring-avatars';
interface AvatarProps {
firstName: string;
lastName: string;
size: string;
colors: string[];
size?: string;
colors?: string[];
}
defineOptions({ name: 'N8nAvatar' });

2
packages/design-system/src/components/N8nBadge/Badge.vue
View file

@ -23,7 +23,7 @@ const THEME = [
interface BadgeProps {
theme?: (typeof THEME)[number];
size?: TextSize;
bold: boolean;
bold?: boolean;
}
defineOptions({ name: 'N8nBadge' });