admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-17 18:12:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files

83
packages/design-system/src/components/N8nText/Text.vue
View File

@@ -1,11 +1,12 @@
<template functional>
<component :is="props.tag" :class="$options.methods.getClasses(props, $style, data)" :style="$options.methods.getStyles(props)" v-on="listeners">
<template>
<component :is="tag" :class="['n8n-text', ...classes]" v-on="$listeners">
<slot></slot>
</component>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
name: 'n8n-text',
props: {
@@ -20,7 +21,7 @@ export default Vue.extend({
},
color: {
type: String,
validator: (value: string): boolean => ['primary', 'text-dark', 'text-base', 'text-light', 'text-xlight'].includes(value),
validator: (value: string): boolean => ['primary', 'text-dark', 'text-base', 'text-light', 'text-xlight', 'danger'].includes(value),
},
align: {
type: String,
@@ -35,28 +36,26 @@ export default Vue.extend({
default: 'span',
},
},
methods: {
getClasses(props: {size: string, bold: boolean}, $style: any, data: any) {
const classes = {[$style[`size-${props.size}`]]: true, [$style.bold]: props.bold, [$style.regular]: !props.bold};
if (data.staticClass) {
classes[data.staticClass] = true;
computed: {
classes() {
const applied = [];
if (this.align) {
applied.push(`align-${this.align}`);
}
if (this.color) {
applied.push(this.color);
}
return classes;
},
getStyles(props: {color: string, align: string, compact: false}) {
const styles = {} as any;
if (props.color) {
styles.color = `var(--color-${props.color})`;
if (this.compact) {
applied.push('compact');
}
if (props.compact) {
styles['line-height'] = 1;
}
if (props.align) {
styles['text-align'] = props.align;
}
return styles;
},
applied.push(`size-${this.size}`);
applied.push(this.bold? 'bold': 'regular');
return applied.map((c) => this.$style[c]);
}
},
});
</script>
@@ -95,4 +94,44 @@ export default Vue.extend({
line-height: var(--font-line-height-compact);
}
.compact {
line-height: 1;
}
.primary {
color: var(--color-primary);
}
.text-dark {
color: var(--color-text-dark);
}
.text-base {
color: var(--color-text-base);
}
.text-light {
color: var(--color-text-light);
}
.text-xlight {
color: var(--color-text-xlight);
}
.danger {
color: var(--color-danger);
}
.align-left {
text-align: left;
}
.align-right {
text-align: right;
}
.align-center {
text-align: center;
}
</style>