refactor(editor): Convert Tooltip to composition api (#10701)

This commit is contained in:
Tomi Turtiainen 2024-09-10 18:17:39 +03:00 committed by GitHub
parent 56ebeed880
commit 6ecf84ffe8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 37 additions and 92 deletions

View file

@ -17,9 +17,3 @@ const Template: StoryFn = (args, { argTypes }) => ({
});
export const Note = Template.bind({});
export const Tooltip = Template.bind({});
Tooltip.args = {
type: 'tooltip',
tooltipPlacement: 'right',
};

View file

@ -2,14 +2,11 @@
import { computed } from 'vue';
import type { Placement } from 'element-plus';
import N8nIcon from '../N8nIcon';
import N8nTooltip from '../N8nTooltip';
const THEME = ['info', 'info-light', 'warning', 'danger', 'success'] as const;
const TYPE = ['note', 'tooltip'] as const;
interface InfoTipProps {
theme?: (typeof THEME)[number];
type?: (typeof TYPE)[number];
bold?: boolean;
tooltipPlacement?: Placement;
}
@ -17,7 +14,6 @@ interface InfoTipProps {
defineOptions({ name: 'N8nInfoTip' });
const props = withDefaults(defineProps<InfoTipProps>(), {
theme: 'info',
type: 'note',
bold: true,
tooltipPlacement: 'top',
});
@ -62,28 +58,13 @@ const iconData = computed((): { icon: string; color: string } => {
<div
:class="{
'n8n-info-tip': true,
[$style.note]: true,
[$style.infoTip]: true,
[$style[theme]]: true,
[$style[type]]: true,
[$style.bold]: bold,
}"
>
<N8nTooltip
v-if="type === 'tooltip'"
:placement="tooltipPlacement"
:popper-class="$style.tooltipPopper"
:disabled="type !== 'tooltip'"
>
<span :class="$style.iconText" :style="{ color: iconData.color }">
<N8nIcon :icon="iconData.icon" />
</span>
<template #content>
<span>
<slot />
</span>
</template>
</N8nTooltip>
<span v-else :class="$style.iconText">
<span :class="$style.iconText">
<N8nIcon :icon="iconData.icon" />
<span>
<slot />
@ -121,11 +102,6 @@ const iconData = computed((): { icon: string; color: string } => {
}
}
.tooltipPopper {
composes: base;
display: inline-flex;
}
.iconText {
display: inline-flex;
align-items: flex-start;

View file

@ -16,17 +16,4 @@ describe('N8nInfoTip', () => {
});
expect(wrapper.html()).toMatchSnapshot();
});
it('should render correctly as tooltip', () => {
const wrapper = render(N8nInfoTip, {
slots,
props: {
type: 'tooltip',
},
global: {
stubs,
},
});
expect(wrapper.html()).toMatchSnapshot();
});
});

View file

@ -1,9 +1,3 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`N8nInfoTip > should render correctly as note 1`] = `"<div class="n8n-info-tip infoTip info note bold"><span class="iconText"><span class="n8n-text compact size-medium regular n8n-icon n8n-icon"><!----></span><span>Need help doing something?<a href="/docs" target="_blank">Open docs</a></span></span></div>"`;
exports[`N8nInfoTip > should render correctly as tooltip 1`] = `
"<div class="n8n-info-tip infoTip info tooltip bold">
<n8n-tooltip-stub popperclass="tooltipPopper" role="tooltip" showafter="0" hideafter="200" autoclose="0" boundariespadding="0" gpuacceleration="true" offset="12" placement="top" popperoptions="[object Object]" strategy="absolute" effect="dark" enterable="true" pure="false" focusonshow="false" trapping="false" stoppoppermouseevent="true" virtualtriggering="false" content="" rawcontent="false" persistent="false" teleported="true" disabled="false" open="false" trigger="hover" triggerkeys="Enter,Space" arrowoffset="5" showarrow="true" justifybuttons="flex-end" buttons="" class=""></n8n-tooltip-stub>
</div>"
`;
exports[`N8nInfoTip > should render correctly as note 1`] = `"<div class="n8n-info-tip note infoTip info bold"><span class="iconText"><span class="n8n-text compact size-medium regular n8n-icon n8n-icon"><!----></span><span>Need help doing something?<a href="/docs" target="_blank">Open docs</a></span></span></div>"`;

View file

@ -1,62 +1,56 @@
<script lang="ts">
<script setup lang="ts">
import type { PropType } from 'vue';
import { defineComponent } from 'vue';
import { ElTooltip } from 'element-plus';
import type { IN8nButton } from 'n8n-design-system/types';
import N8nButton from '../N8nButton';
export default defineComponent({
name: 'N8nTooltip',
components: {
ElTooltip,
N8nButton,
},
inheritAttrs: false,
props: {
export type Justify =
| 'flex-start'
| 'flex-end'
| 'start'
| 'end'
| 'left'
| 'right'
| 'center'
| 'space-between'
| 'space-around'
| 'space-evenly';
const props = defineProps({
...ElTooltip.props,
content: {
type: String,
default: '',
},
justifyButtons: {
type: String,
type: String as PropType<Justify>,
default: 'flex-end',
validator: (value: string): boolean =>
[
'flex-start',
'flex-end',
'start',
'end',
'left',
'right',
'center',
'space-between',
'space-around',
'space-evenly',
].includes(value),
},
buttons: {
type: Array as PropType<IN8nButton[]>,
default: () => [],
},
},
});
defineOptions({
inheritAttrs: false,
});
</script>
<template>
<ElTooltip v-bind="{ ...$props, ...$attrs }" :popper-class="$props.popperClass ?? 'n8n-tooltip'">
<ElTooltip v-bind="{ ...props, ...$attrs }" :popper-class="props.popperClass ?? 'n8n-tooltip'">
<slot />
<template #content>
<slot name="content">
<div v-html="content"></div>
<div v-html="props.content"></div>
</slot>
<div
v-if="buttons.length"
v-if="props.buttons.length"
:class="$style.buttons"
:style="{ justifyContent: justifyButtons }"
:style="{ justifyContent: props.justifyButtons }"
>
<N8nButton
v-for="button in buttons"
v-for="button in props.buttons"
:key="button.attrs.label"
v-bind="{ ...button.attrs, ...button.listeners }"
/>