admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-17 01:56:46 +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

69
packages/design-system/src/components/N8nInput/Input.vue
View File

@@ -1,32 +1,33 @@
<template functional>
<component
:is="$options.components.ElInput"
v-bind="props"
:size="$options.methods.getSize(props.size)"
:class="$style[$options.methods.getClass(props)]"
:ref="data.ref"
:autoComplete="props.autocomplete"
v-on="listeners"
<template>
<el-input
v-bind="$props"
:size="computedSize"
:class="['n8n-input', ...classes]"
:autoComplete="autocomplete"
ref="innerInput"
v-on="$listeners"
>
<template v-slot:prepend>
<template #prepend>
<slot name="prepend" />
</template>
<template v-slot:append>
<template #append>
<slot name="append" />
</template>
<template v-slot:prefix>
<template #prefix>
<slot name="prefix" />
</template>
<template v-slot:suffix>
<template #suffix>
<slot name="suffix" />
</template>
</component>
</el-input>
</template>
<script lang="ts">
import ElInput from 'element-ui/lib/input';
export default {
import Vue from 'vue';
export default Vue.extend({
name: 'n8n-input',
components: {
ElInput,
@@ -68,23 +69,43 @@ export default {
default: 'off',
},
},
methods: {
getSize(size: string): string | undefined {
if (size === 'xlarge') {
computed: {
computedSize(): string | undefined {
if (this.size === 'xlarge') {
return undefined;
}
return size;
return this.size;
},
getClass(props: { size: string }): string {
if (props.size === 'xlarge') {
return 'xlarge';
classes(): string[] {
if (this.size === 'xlarge') {
return ['xlarge'];
}
return '';
return [];
},
},
};
methods: {
focus() {
if (this.$refs.innerInput.$el) {
// @ts-ignore
(this.$refs.innerInput.$el.querySelector(this.type === 'textarea' ? 'textarea' : 'input') as HTMLInputElement).focus();
}
},
blur() {
if (this.$refs.innerInput.$el) {
// @ts-ignore
(this.$refs.innerInput.$el.querySelector(this.type === 'textarea' ? 'textarea' : 'input') as HTMLInputElement).blur();
}
},
select() {
if (this.$refs.innerInput.$el) {
// @ts-ignore
(this.$refs.innerInput.$el.querySelector(this.type === 'textarea' ? 'textarea' : 'input') as HTMLInputElement).select();
}
},
},
});
</script>
<style lang="scss" module>