feat: add prepend slot to date/time control renderers

packages/examples/src/examples/prepend-append-slots.ts

@@ -0,0 +1,148 @@
+/*
+  The MIT License
+
+  Copyright (c) 2017-2025 EclipseSource Munich
+  https://github.com/eclipsesource/jsonforms
+
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+  THE SOFTWARE.
+*/
+import { registerExamples } from '../register';
+
+/**
+ * Prepend and Append Slots
+ *
+ * Prepend Only:
+ * - Display Name: Static decorative icon
+ * - Password: Dynamic strength meter
+ *
+ * Append Only:
+ * - Username: Async availability checker
+ * - Email: Copy to clipboard button
+ *
+ * Both:
+ * - Temperature: Dynamic icon + unit indicator
+ */
+
+export const schema = {
+  type: 'object',
+  properties: {
+    // Prepend slot only
+    displayName: {
+      type: 'string',
+      description: 'Decorative icon',
+    },
+    password: {
+      type: 'string',
+      description: 'Dynamic strength meter',
+    },
+
+    // Append slot only
+    username: {
+      type: 'string',
+      maxLength: 20,
+      description: 'Availability checker (try "admin" or "user")',
+    },
+    email: {
+      type: 'string',
+      format: 'email',
+      description: 'Copy to clipboard',
+    },
+
+    // Both prepend AND append slots
+    temperature: {
+      type: 'integer',
+      minimum: -50,
+      maximum: 50,
+      description: 'Temperature with dynamic icon and unit (°C)',
+    },
+  },
+};
+
+export const uischema = {
+  type: 'VerticalLayout',
+  elements: [
+    {
+      type: 'Label',
+      text: 'Prepend Slot Only',
+    },
+    {
+      type: 'Control',
+      scope: '#/properties/displayName',
+      options: {
+        clearable: false,
+      },
+    },
+    {
+      type: 'Control',
+      scope: '#/properties/password',
+      options: {
+        clearable: false,
+      },
+    },
+
+    {
+      type: 'Label',
+      text: 'Append Slot Only',
+    },
+    {
+      type: 'Control',
+      scope: '#/properties/username',
+      options: {
+        clearable: false,
+      },
+    },
+    {
+      type: 'Control',
+      scope: '#/properties/email',
+      options: {
+        clearable: false,
+      },
+    },
+
+    {
+      type: 'Label',
+      text: 'Both Prepend and Append',
+    },
+    {
+      type: 'Control',
+      scope: '#/properties/temperature',
+      options: {
+        clearable: false,
+      },
+    },
+  ],
+};
+
+export const data = {
+  displayName: 'John Doe',
+  password: '',
+  username: '', // Start empty so checker can be tested
+  email: 'user@example.com',
+  temperature: 22,
+};
+
+registerExamples([
+  {
+    name: 'prepend-append-slots',
+    label: 'Prepend/Append Slots (Basic)',
+    data,
+    schema,
+    uischema,
+  },
+]);

packages/examples/src/index.ts

@@ -78,6 +78,7 @@ import * as login from './examples/login';
 import * as mixed from './examples/mixed';
 import * as mixedObject from './examples/mixed-object';
 import * as string from './examples/string';
+import * as prependAppendSlots from './examples/prepend-append-slots';
 export * from './register';
 export * from './example';
 
@@ -145,4 +146,5 @@ export {
   issue_1884,
   arrayWithDefaults,
   string,
+  prependAppendSlots,
 };

packages/vue-vuetify/README.md

@@ -126,6 +126,26 @@ If note done yet, please [install Vuetify for Vue](https://vuetifyjs.com/en/gett
 
 For more information on how JSON Forms can be configured, please see the [README of `@jsonforms/vue`](https://github.com/eclipsesource/jsonforms/blob/master/packages/vue/README.md).
 
+## Customization
+
+### Prepend and Append Slots
+
+All control renderers now support `prepend` and `append` slots, allowing you to add custom content before or after input fields without creating entirely custom renderers.
+
+**Example:**
+
+```vue
+<template>
+  <string-control-renderer v-bind="$props">
+    <template #prepend>
+      <v-icon>mdi-help-circle</v-icon>
+    </template>
+  </string-control-renderer>
+</template>
+```
+
+See the "Prepend/Append Slots (Basic)" example in the dev app.
+
 ## Override the ControlWrapper component
 
 All control renderers wrap their components with a **`ControlWrapper`** component, which by default uses **`DefaultControlWrapper`** to render the wrapper element around each control.

packages/vue-vuetify/dev/renderers/DisplayNameWithIconRenderer.vue

@@ -0,0 +1,23 @@
+<template>
+  <string-control-renderer v-bind="$props">
+    <template #prepend>
+      <v-icon
+        color="primary"
+        class="mr-1"
+        aria-hidden="true"
+        tabindex="-1"
+      >
+        mdi-badge-account-horizontal-outline
+      </v-icon>
+    </template>
+  </string-control-renderer>
+</template>
+
+<script setup lang="ts">
+import { rendererProps } from '@jsonforms/vue';
+import type { ControlElement } from '@jsonforms/core';
+import StringControlRenderer from '../../src/controls/StringControlRenderer.vue';
+import { VIcon } from 'vuetify/components';
+
+defineProps(rendererProps<ControlElement>());
+</script>

packages/vue-vuetify/dev/renderers/PasswordStrengthRenderer.vue

@@ -0,0 +1,84 @@
+<!-- Password strength indicator in prepend slot -->
+<template>
+  <password-control-renderer v-bind="$props">
+    <!-- PREPEND: Password Strength Indicator -->
+    <template #prepend>
+      <v-tooltip :text="strengthTooltip" location="bottom">
+        <template #activator="{ props: tooltipProps }">
+          <v-icon
+            v-bind="tooltipProps"
+            :color="strengthColor"
+            class="mr-1"
+            aria-hidden="true"
+            tabindex="-1"
+          >
+            {{ strengthIcon }}
+          </v-icon>
+        </template>
+      </v-tooltip>
+    </template>
+    <!-- Note: append slot used by PasswordControlRenderer for show/hide toggle -->
+  </password-control-renderer>
+</template>
+
+<script setup lang="ts">
+import { rendererProps, useJsonFormsControl } from '@jsonforms/vue';
+import type { ControlElement } from '@jsonforms/core';
+import PasswordControlRenderer from '../../src/controls/PasswordControlRenderer.vue';
+import { VIcon, VTooltip } from 'vuetify/components';
+import { computed } from 'vue';
+
+const props = defineProps(rendererProps<ControlElement>());
+
+// Use JSONForms composable to access control state
+const { control } = useJsonFormsControl(props);
+
+// PREPEND: Calculate "strength" based on input complexity
+// (In real app: password strength, username uniqueness check, etc.)
+const strength = computed(() => {
+  const value = control.value.data || '';
+  const length = value.length;
+
+  if (length === 0) return 0;
+  if (length < 5) return 1;
+  if (length < 10) return 2;
+
+  // Bonus for complexity
+  const hasUpper = /[A-Z]/.test(value);
+  const hasNumber = /[0-9]/.test(value);
+  const hasSpecial = /[^A-Za-z0-9]/.test(value);
+  const complexity = [hasUpper, hasNumber, hasSpecial].filter(Boolean).length;
+
+  if (complexity >= 2) return 4;
+  if (complexity >= 1) return 3;
+  return 2;
+});
+
+const strengthColor = computed(() => {
+  const colors = ['grey-lighten-1', 'error', 'warning', 'info', 'success'];
+  return colors[strength.value];
+});
+
+const strengthIcon = computed(() => {
+  const icons = [
+    'mdi-shield-outline', // Empty - grey outline
+    'mdi-shield-alert', // Weak - red shield with alert
+    'mdi-shield-half-full', // Fair - orange half shield
+    'mdi-shield-check', // Good - blue shield with check
+    'mdi-shield-star', // Strong - green shield with star
+  ];
+  return icons[strength.value];
+});
+
+const strengthTooltip = computed(() => {
+  const labels = ['Empty', 'Weak', 'Fair', 'Good', 'Strong'];
+  const tips = [
+    'Start typing to see complexity indicator',
+    'Weak: Too short (< 5 chars)',
+    'Fair: Medium length (5-10 chars)',
+    'Good: Good length with some complexity',
+    'Strong: Long with uppercase, numbers, or special chars',
+  ];
+  return `${labels[strength.value]}: ${tips[strength.value]}`;
+});
+</script>

packages/vue-vuetify/dev/renderers/StringWithCopyRenderer.vue

@@ -0,0 +1,55 @@
+<!-- Copy to clipboard button in append slot -->
+<template>
+  <string-control-renderer v-bind="$props">
+    <template #append>
+      <!-- Replace the default clear button with our custom copy icon -->
+      <v-tooltip :text="tooltipText" location="top">
+        <template #activator="{ props: tooltipProps }">
+          <v-icon
+            v-bind="tooltipProps"
+            @click="copyToClipboard"
+            style="cursor: pointer"
+            :aria-label="`Copy ${control.label} to clipboard`"
+            role="button"
+          >
+            {{ justCopied ? 'mdi-check' : 'mdi-content-copy' }}
+          </v-icon>
+        </template>
+      </v-tooltip>
+    </template>
+  </string-control-renderer>
+</template>
+
+<script setup lang="ts">
+import { rendererProps, useJsonFormsControl } from '@jsonforms/vue';
+import type { ControlElement } from '@jsonforms/core';
+import StringControlRenderer from '../../src/controls/StringControlRenderer.vue';
+import { VIcon, VTooltip } from 'vuetify/components';
+import { ref, computed } from 'vue';
+
+const props = defineProps(rendererProps<ControlElement>());
+
+const { control } = useJsonFormsControl(props);
+
+const justCopied = ref(false);
+
+const tooltipText = computed(() =>
+  justCopied.value ? 'Copied!' : 'Copy to clipboard',
+);
+
+const copyToClipboard = async () => {
+  if (control.value.data) {
+    try {
+      await navigator.clipboard.writeText(control.value.data);
+      justCopied.value = true;
+
+      // Reset after 1 second
+      setTimeout(() => {
+        justCopied.value = false;
+      }, 1000);
+    } catch (err) {
+      console.error('Failed to copy:', err);
+    }
+  }
+};
+</script>