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
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,27 +1,29 @@
<template functional>
<component
:is="$options.components.ElSelect"
v-bind="props"
:value="props.value"
:size="$options.methods.getSize(props.size)"
:class="$style[$options.methods.getClass(props)]"
:popper-class="$options.methods.getPopperClass(props, $style)"
v-on="listeners"
:ref="data.ref"
>
<template v-slot:prepend>
<div :class="$style.container">
<div v-if="$slots.prepend" :class="$style.prepend">
<slot name="prepend" />
</template>
<template v-slot:prefix>
<slot name="prefix" />
</template>
<template v-slot:suffix>
<slot name="suffix" />
</template>
<template v-slot:default>
<slot></slot>
</template>
</component>
</div>
<component
:is="$options.components.ElSelect"
v-bind="props"
:value="props.value"
:size="$options.methods.getSize(props.size)"
:class="$style[$options.methods.getClass(props)]"
:popper-class="$options.methods.getPopperClass(props, $style)"
v-on="listeners"
:ref="data.ref"
>
<template v-slot:prefix>
<slot name="prefix" />
</template>
<template v-slot:suffix>
<slot name="suffix" />
</template>
<template v-slot:default>
<slot></slot>
</template>
</component>
</div>
</template>
<script lang="ts">
@ -124,4 +126,25 @@ export default {
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>