Add "append" and "prepend" slots for vue-vuetify extended renderers

Offen Anfängerfreundlich
  • Stimmt etwas nicht?
#2,668 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

@simeyc arbeitet bereits daran.

Seit 12.11.2026.

  • #2669 von @simeyc — offen

Bewertung

Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Anfängerfreundlichkeit
75/100
Issue-Typ
Feature
Klarheit
Klar beschrieben
Aktivitätsstatus
Aktiv
Tech-Stack
typescript
Bereich
frontend

Rechercherichtung

Suche zuerst im Vue-Vuetify-Paket nach AutocompleteEnumControlRenderer und AutocompleteOneOfEnumControlRenderer und vergleiche dann deren Umgang mit Slots mit dem der anderen Control-Renderer. Füge beiden erweiterten Renderern die Slots prepend und append hinzu und prüfe, ob der Slot-Inhalt die zugrunde liegenden Vuetify-Komponenten mit einheitlicher Formatierung erreicht.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

Is your feature request related to a problem? Please describe.

The jsonforms/vue-vuetify README states that "all control renderers now support prepend and append slots". However, these slots are missing for the extended renderers, namely AutocompleteEnumControlRenderer and AutocompleteOneOfEnumControlRenderer. This means that when using extendedVuetifyRenderers, enum controls lack the slots while others have them.

Describe the solution you'd like

Add the "prepend" and "append" slots to the extended renderers, for consistency with the others.

Describe alternatives you've considered

My current workaround is to implement a custom renderer which wraps the autocomplete renderers in a div with the slot content either side, like:

<template>
    <!-- Adds slots to the default autocomplete oneOf enum renderer. -->
    <div class="d-flex align-center">
        <div v-if="$slots.prepend" class="mr-4">
            <slot name="prepend" />
        </div>
        <AutocompleteEnumControlRenderer class="flex-fill" v-bind="props" />
        <div v-if="$slots.append" class="ml-4">
            <slot name="append" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { type RendererProps } from '@jsonforms/vue';
import { AutocompleteEnumControlRenderer } from '@jsonforms/vue-vuetify';

const props = defineProps<RendererProps>();
</script>

However, this doesn't actually pass the slot content to the underlying Vuetify components (v-select/v-autocomplete), so it's a bit of a hack and formatting is off.

Package

Vue Vuetify Renderers

Additional context

I intend to push a PR for this shortly.

Vorherrschende Sprache
TypeScript
Sterne
2.8k
Forks
423
Ø Merge
5 T. 16 Std.
Gemergte PRs (30 T.)
9

Entwicklungsumgebung

In Codespaces öffnen

Startet den Dev-Container des Projekts im Browser, mit Ihrem eigenen GitHub-Konto.

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus eclipsesource/jsonforms

Alle Issues in eclipsesource/jsonforms

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.