n8n/packages/editor-ui/src/components/ParameterInputFull.vue
Michael Kret 6d6f3acd97
Add parameter hints for node parameters N8N-2841 (#2704)
* 🔨 base functionality done

* :fix: changes accordingly to review

* :fix: replaced div with n8n-text

* :fix: return wrong deleted color variable

* add mock examples for testing

* add slack node test param

* 🔨 changed font size of hint, added top margin

* 🔨 updated comments and function name

* 🔨 updated parameterHint to hint

* 🔨 updated text color, set compact to true, changed inputLabelHint to hint

* 🔨 updated components styles

* 🔨 replaced mini with xsmall

* :fix: fixed line height

* :fix: changed line height to 1.25

* :hummer: removed mock data

* 🔨 changed xsmall line-height

*  update to merge hint

Co-authored-by: Mutasem <mutdmour@gmail.com>
2022-01-28 07:55:25 +01:00

76 lines
1.6 KiB
Vue

<template>
<n8n-input-label
:label="$locale.nodeText().inputLabelDisplayName(parameter, path)"
:tooltipText="$locale.nodeText().inputLabelDescription(parameter, path)"
:showTooltip="focused"
:bold="false"
size="small"
>
<parameter-input
:parameter="parameter"
:value="value"
:displayOptions="displayOptions"
:path="path"
:isReadOnly="isReadOnly"
@valueChanged="valueChanged"
@focus="focused = true"
@blur="focused = false"
inputSize="small" />
<input-hint :class="$style.hint" :hint="$locale.nodeText().hint(parameter, path)" />
</n8n-input-label>
</template>
<script lang="ts">
import Vue from 'vue';
import {
IUpdateInformation,
} from '@/Interface';
import ParameterInput from '@/components/ParameterInput.vue';
import InputHint from './ParameterInputHint.vue';
export default Vue
.extend({
name: 'ParameterInputFull',
components: {
ParameterInput,
InputHint,
},
data() {
return {
focused: false,
};
},
props: [
'displayOptions',
'isReadOnly',
'parameter',
'path',
'value',
],
methods: {
getArgument (argumentName: string): string | number | boolean | undefined {
if (this.parameter.typeOptions === undefined) {
return undefined;
}
if (this.parameter.typeOptions[argumentName] === undefined) {
return undefined;
}
return this.parameter.typeOptions[argumentName];
},
valueChanged (parameterData: IUpdateInformation) {
this.$emit('valueChanged', parameterData);
},
},
});
</script>
<style lang="scss" module>
.hint {
margin-top: var(--spacing-4xs);
}
</style>