mirror of
https://github.com/n8n-io/n8n.git
synced 2025-03-05 20:50:17 -08:00
421dd72224
* introduce analytics * add user survey backend * add user survey backend * set answers on survey submit Co-authored-by: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com> * change name to personalization * lint Co-authored-by: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com> * N8n 2495 add personalization modal (#2280) * update modals * add onboarding modal * implement questions * introduce analytics * simplify impl * implement survey handling * add personalized cateogry * update modal behavior * add thank you view * handle empty cases * rename modal * standarize modal names * update image, add tags to headings * remove unused file * remove unused interfaces * clean up footer spacing * introduce analytics * refactor to fix bug * update endpoint * set min height * update stories * update naming from questions to survey * remove spacing after core categories * fix bug in logic * sort nodes * rename types * merge with be * rename userSurvey * clean up rest api * use constants for keys * use survey keys * clean up types * move personalization to its own file Co-authored-by: ahsan-virani <ahsan.virani@gmail.com> * Survey new options (#2300) * split up options * fix quotes * remove unused import * add user created workflow event (#2301) * simplify env vars * fix versionCli on FE * update personalization env * fix event User opened Credentials panel * fix select modal spacing * fix nodes panel event * fix workflow id in workflow execute event * improve telemetry error logging * fix config and stop process events * add flush call on n8n stop * ready for release * improve telemetry process exit * fix merge * improve n8n stop events Co-authored-by: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com> Co-authored-by: Mutasem <mutdmour@gmail.com> Co-authored-by: Jan Oberhauser <jan.oberhauser@gmail.com>
129 lines
2.3 KiB
Vue
129 lines
2.3 KiB
Vue
<template functional>
|
|
<component :is="props.tag" :class="$style[$options.methods.getClass(props)]" :style="$options.methods.getStyles(props)">
|
|
<slot></slot>
|
|
</component>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
export default {
|
|
name: 'n8n-heading',
|
|
props: {
|
|
tag: {
|
|
type: String,
|
|
default: 'span',
|
|
},
|
|
bold: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
size: {
|
|
type: String,
|
|
default: 'medium',
|
|
validator: (value: string): boolean => ['2xlarge', 'xlarge', 'large', 'medium', 'small'].includes(value),
|
|
},
|
|
color: {
|
|
type: String,
|
|
validator: (value: string): boolean => ['primary', 'text-dark', 'text-base', 'text-light'].includes(value),
|
|
},
|
|
},
|
|
methods: {
|
|
getClass(props: {size: string, bold: boolean}) {
|
|
return `heading-${props.size}${props.bold ? '-bold' : '-regular'}`;
|
|
},
|
|
getStyles(props: {color: string}) {
|
|
const styles = {} as any;
|
|
if (props.color) {
|
|
styles.color = `var(--color-${props.color})`;
|
|
}
|
|
return styles;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" module>
|
|
.bold {
|
|
font-weight: var(--font-weight-bold);
|
|
}
|
|
|
|
.regular {
|
|
font-weight: var(--font-weight-regular);
|
|
}
|
|
|
|
.heading-2xlarge {
|
|
font-size: var(--font-size-2xl);
|
|
line-height: var(--font-line-height-compact);
|
|
}
|
|
|
|
.heading-2xlarge-regular {
|
|
composes: regular;
|
|
composes: heading-2xlarge;
|
|
}
|
|
|
|
.heading-2xlarge-bold {
|
|
composes: bold;
|
|
composes: heading-2xlarge;
|
|
}
|
|
|
|
.heading-xlarge {
|
|
font-size: var(--font-size-xl);
|
|
line-height: var(--font-line-height-compact);
|
|
}
|
|
|
|
.heading-xlarge-regular {
|
|
composes: regular;
|
|
composes: heading-xlarge;
|
|
}
|
|
|
|
.heading-xlarge-bold {
|
|
composes: bold;
|
|
composes: heading-xlarge;
|
|
}
|
|
|
|
.heading-large {
|
|
font-size: var(--font-size-l);
|
|
line-height: var(--font-line-height-loose);
|
|
}
|
|
|
|
.heading-large-regular {
|
|
composes: regular;
|
|
composes: heading-large;
|
|
}
|
|
|
|
.heading-large-bold {
|
|
composes: bold;
|
|
composes: heading-large;
|
|
}
|
|
|
|
.heading-medium {
|
|
font-size: var(--font-size-m);
|
|
line-height: var(--font-line-height-loose);
|
|
}
|
|
|
|
.heading-medium-regular {
|
|
composes: regular;
|
|
composes: heading-medium;
|
|
}
|
|
|
|
.heading-medium-bold {
|
|
composes: bold;
|
|
composes: heading-medium;
|
|
}
|
|
|
|
.heading-small {
|
|
font-size: var(--font-size-s);
|
|
line-height: var(--font-line-height-regular);
|
|
}
|
|
|
|
.heading-small-regular {
|
|
composes: regular;
|
|
composes: heading-small;
|
|
}
|
|
|
|
.heading-small-bold {
|
|
composes: bold;
|
|
composes: heading-small;
|
|
}
|
|
|
|
</style>
|