mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

add select prepend

Browse source
This commit is contained in:
Mutasem 2022-03-30 08:36:52 +02:00
parent 3c495d5e48
commit e77270d9f3
1 changed files with 45 additions and 22 deletions

29
packages/design-system/src/components/N8nSelect/Select.vue
View file

@ -1,4 +1,8 @@
<template functional> <template functional>
<div :class="$style.container">
<div v-if="$slots.prepend" :class="$style.prepend">
<slot name="prepend" />
</div>
<component <component
:is="$options.components.ElSelect" :is="$options.components.ElSelect"
v-bind="props" v-bind="props"
@ -9,9 +13,6 @@
v-on="listeners" v-on="listeners"
:ref="data.ref" :ref="data.ref"
> >
<template v-slot:prepend>
<slot name="prepend" />
</template>
<template v-slot:prefix> <template v-slot:prefix>
<slot name="prefix" /> <slot name="prefix" />
</template> </template>
@ -22,6 +23,7 @@
<slot></slot> <slot></slot>
</template> </template>
</component> </component>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -124,4 +126,25 @@ export default {
overflow-x: hidden; overflow-x: hidden;
} }
} }
.container {
display: inline-flex;
width: 100%;
--input-border-color: none;
border: var(--border-base);
border-radius: var(--input-border-radius, var(--border-radius-base))
}
.prepend {
display: inline-block;
font-size: var(--font-size-2xs);
border-right: var(--border-base);
display: flex;
align-items: center;
padding: 0 var(--spacing-3xs);
background-color: var(--color-background-light);
border-bottom-left-radius: var(--input-border-radius, var(--border-radius-base));
border-top-left-radius: var(--input-border-radius, var(--border-radius-base));
color: var(--color-text-base);
}
</style> </style>