Add prepend/append slots

Author: webdevnerdstuff

src/plugin/VInlineCustomField.vue

@@ -12,7 +12,19 @@
 				<DisplayedValue
 					v-bind="bindingDisplay"
 					@toggleField="toggleField"
-				/>
+				>
+
+					<!-- Pass on all scoped slots -->
+					<template
+						v-for="(_, slot) in slots"
+						#[slot]="scope"
+					>
+						<slot
+							:name="slot"
+							v-bind="{ ...scope }"
+						/>
+					</template>
+				</DisplayedValue>
 			</div>
 		</div>
 
@@ -108,6 +120,7 @@ import inlineEmits from './utils/emits';
 const modelValue = defineModel<FieldValue>();
 
 const attrs = useAttrs();
+const slots = useSlots();
 const emit = defineEmits([...inlineEmits]);
 
 const iconOptions = inject<IconOptions>(Symbol.for('vuetify:icons'));

src/plugin/VInlineSelect.vue

@@ -12,7 +12,19 @@
 				<DisplayedValue
 					v-bind="bindingDisplay"
 					@toggleField="toggleField"
-				/>
+				>
+
+					<!-- Pass on all scoped slots -->
+					<template
+						v-for="(_, slot) in slots"
+						#[slot]="scope"
+					>
+						<slot
+							:name="slot"
+							v-bind="{ ...scope }"
+						/>
+					</template>
+				</DisplayedValue>
 			</div>
 		</div>
 

src/plugin/VInlineTextField.vue

@@ -12,7 +12,19 @@
 				<DisplayedValue
 					v-bind="bindingDisplay"
 					@toggleField="toggleField"
-				/>
+				>
+
+					<!-- Pass on all scoped slots -->
+					<template
+						v-for="(_, slot) in slots"
+						#[slot]="scope"
+					>
+						<slot
+							:name="slot"
+							v-bind="{ ...scope }"
+						/>
+					</template>
+				</DisplayedValue>
 			</div>
 		</div>
 

src/plugin/VInlineTextarea.vue

@@ -12,7 +12,19 @@
 				<DisplayedValue
 					v-bind="bindingDisplay"
 					@toggleField="toggleField"
-				/>
+				>
+
+					<!-- Pass on all scoped slots -->
+					<template
+						v-for="(_, slot) in slots"
+						#[slot]="scope"
+					>
+						<slot
+							:name="slot"
+							v-bind="{ ...scope }"
+						/>
+					</template>
+				</DisplayedValue>
 			</div>
 		</div>
 

src/plugin/components/DisplayedValue.vue

@@ -3,11 +3,17 @@
 
 		<!-- Prepend Icon -->
 		<div
-			v-if="displayPrependIcon"
+			v-if="displayPrependIcon || slots['display.prepend']"
 			:class="prependAppendIconClasses('prepend')"
 			:style="prependAppendIconStyles"
 		>
+			<slot
+				v-if="slots['display.prepend']"
+				v-bind="slotBindings"
+				name="display.prepend"
+			/>
 			<v-icon
+				v-else
 				:color="displayPrependIconColor"
 				:icon="displayPrependIcon"
 				size="x-small"
@@ -21,10 +27,16 @@
 		>
 			<!-- Prepend Inner Icon -->
 			<div
-				v-if="displayPrependInnerIcon"
+				v-if="displayPrependInnerIcon || slots['display.prependInner']"
 				:class="prependAppendIconClasses('prepend', true)"
 			>
+				<slot
+					v-if="slots['display.prependInner']"
+					v-bind="slotBindings"
+					name="display.prependInner"
+				/>
 				<v-icon
+					v-else
 					:color="displayPrependInnerIconColor"
 					:icon="displayPrependInnerIcon"
 					size="x-small"
@@ -35,10 +47,16 @@
 
 			<!-- Append Inner Icon -->
 			<div
-				v-if="displayAppendInnerIcon"
+				v-if="displayAppendInnerIcon || slots['display.appendInner']"
 				:class="prependAppendIconClasses('append', true)"
 			>
+				<slot
+					v-if="slots['display.appendInner']"
+					v-bind="slotBindings"
+					name="display.appendInner"
+				/>
 				<v-icon
+					v-else
 					:color="displayAppendInnerIconColor"
 					:icon="displayAppendInnerIcon"
 					size="x-small"
@@ -48,11 +66,17 @@
 
 		<!-- Append Icon -->
 		<div
-			v-if="displayAppendIcon"
+			v-if="displayAppendIcon || slots['display.append']"
 			:class="prependAppendIconClasses('append')"
 			:style="prependAppendIconStyles"
 		>
+			<slot
+				v-if="slots['display.append']"
+				v-bind="slotBindings"
+				name="display.append"
+			/>
 			<v-icon
+				v-else
 				:color="displayAppendIconColor"
 				:icon="displayAppendIcon"
 				size="x-small"
@@ -77,8 +101,15 @@ import {
 
 const emit = defineEmits(['toggleField']);
 const props = defineProps<DisplayValueProps>();
+const slots = useSlots();
 const theme = useTheme();
 
+const slotBindings = {
+	displayValue: props.displayValue,
+	empty: props.empty,
+	error: props.error,
+};
+
 const displayValueClass = computed(() => useDisplayValueClass(
 	props.field,
 	props.valueColor,

src/plugin/composables/styles.ts

@@ -57,8 +57,6 @@ export const useCardContainerStyle: UseCardContainerStyle = (options) => {
 	const { cardMinWidth, cardOffsetX, cardOffsetY, cardWidth, field, name = '' } = options;
 	const coords = useGetFieldCoordinates({ cardOffsetX, cardOffsetY, field });
 
-	console.log({ coords });
-
 	let minWidth = cardMinWidth;
 	let width = cardWidth;
 

src/plugin/utils/props.ts

@@ -21,16 +21,16 @@ export const sharedProps = {
 	density: 'compact' as const,
 	disabled: false,
 	displayAppendIcon: undefined,
-	displayAppendIconColor: 'primary',
+	displayAppendIconColor: undefined,
 	displayAppendIconSize: 'x-small',
 	displayAppendInnerIcon: undefined,
-	displayAppendInnerIconColor: 'secondary',
+	displayAppendInnerIconColor: undefined,
 	displayAppendInnerIconSize: 'x-small',
 	displayPrependIcon: undefined,
-	displayPrependIconColor: 'danger',
+	displayPrependIconColor: undefined,
 	displayPrependIconSize: 'x-small',
 	displayPrependInnerIcon: undefined,
-	displayPrependInnerIconColor: 'success',
+	displayPrependInnerIconColor: undefined,
 	displayPrependInnerIconSize: 'x-small',
 	emptyText: 'empty',
 	fieldOnly: false,