refactor(design-system): replace functional components (#3802)

* update creator item

* update warning tooltip

* update badge and trigger icon

* update action box

* update avatar component

* update badge

* update heading component

* update icon component

* update link component

* update menu

* update route component

* fix avatar bug

* fix avatar bug

* update input component

* update select

* update input

* update tags component

* update spinner

* update square button

* update tag component

* update text component

* add danger color

* add vue.extend

* add human readable names

* add human readable name

* revert button changes

* update name

* revert name

* update classes

* delete unused component

* redo name change

* rename

* rename back

* rename back

* update snapshots
This commit is contained in:
Mutasem Aldmour
2022-08-05 15:03:24 +02:00
committed by GitHub
parent f151a8ad4a
commit 60da5bb7ec
40 changed files with 486 additions and 307 deletions

View File

@@ -1,29 +1,28 @@
<template functional>
<div :class="$style.container">
<div :class="$style.heading" v-if="props.heading">
<component :is="$options.components.N8nHeading" size="xlarge" align="center">{{ props.heading }}</component>
<template>
<div :class="['n8n-action-box', $style.container]">
<div :class="$style.heading" v-if="heading">
<n8n-heading size="xlarge" align="center">{{ heading }}</n8n-heading>
</div>
<div :class="$style.description" @click="(e) => listeners.descriptionClick && listeners.descriptionClick(e)">
<component :is="$options.components.N8nText" color="text-base">
<span v-html="props.description"></span>
</component>
<div :class="$style.description" @click="$emit('descriptionClick', $event)">
<n8n-text color="text-base">
<span v-html="description"></span>
</n8n-text>
</div>
<component v-if="props.buttonText" :is="$options.components.N8nButton" :label="props.buttonText" size="large"
@click="(e) => listeners.click && listeners.click(e)"
<n8n-button v-if="buttonText" :label="buttonText" size="large"
@click="$emit('click', $event)"
/>
<component
v-if="props.calloutText"
:is="$options.components.N8nCallout"
:theme="props.calloutTheme"
:icon="props.calloutIcon"
<n8n-callout
v-if="calloutText"
:theme="calloutTheme"
:icon="calloutIcon"
:class="$style.callout"
>
<template>
<component :is="$options.components.N8nText" color="text-base">
<span size="small" v-html="props.calloutText"></span>
</component>
<n8n-text color="text-base">
<span size="small" v-html="calloutText"></span>
</n8n-text>
</template>
</component>
</n8n-callout>
</div>
</template>
@@ -32,8 +31,9 @@ import N8nButton from '../N8nButton';
import N8nHeading from '../N8nHeading';
import N8nText from '../N8nText';
import N8nCallout from '../N8nCallout';
import Vue from 'vue';
export default {
export default Vue.extend({
name: 'n8n-action-box',
components: {
N8nButton,
@@ -62,7 +62,7 @@ export default {
type: String,
},
},
};
});
</script>
<style lang="scss" module>