Automata/packages/editor-ui/src/components/RunDataSchemaItem.vue

<script lang="ts" setup>
import { computed } from 'vue';
import { INodeUi, Schema } from "@/Interface";
import { checkExhaustive, shorten } from "@/utils";

type Props = {
	schema: Schema
	level: number
	parent: Schema | null
	subKey: string
	mappingEnabled: boolean
	draggingPath: string
	distanceFromActive: number
	node: INodeUi | null
}

const props = defineProps<Props>();

const isSchemaValueArray = computed(() => Array.isArray(props.schema.value));
const isSchemaParentTypeArray = computed(() => props.parent?.type === 'array');
const isFlat = computed(() => props.level === 0 && Array.isArray(props.schema.value) && props.schema.value.every(v => !Array.isArray(v.value)));
const key = computed((): string | undefined => isSchemaParentTypeArray.value ? `[${props.schema.key}]` : props.schema.key);
const schemaName = computed(() => isSchemaParentTypeArray.value ? `${props.schema.type}[${props.schema.key}]` : props.schema.key);
const text = computed(() => Array.isArray(props.schema.value) ? '' : shorten(props.schema.value, 600, 0));

const getJsonParameterPath = (path: string): string => `{{ ${props.distanceFromActive === 1 ? '$json' : `$node["${ props.node!.name }"].json`}${path} }}`;
const transitionDelay = (i:number) => `${i * 0.033}s`;

const getIconBySchemaType = (type: Schema['type']): string => {
	switch (type) {
		case 'object':
			return 'cube';
		case 'array':
			return 'list';
		case 'string':
		case 'null':
			return 'font';
		case 'number':
			return 'hashtag';
		case 'boolean':
			return 'check-square';
		case 'function':
			return 'code';
		case 'bigint':
			return 'calculator';
		case 'symbol':
			return 'sun';
		case 'undefined':
			return 'ban';
	}

	checkExhaustive(type);
};

</script>

<template>
	<div :class="$style.item">
		<div
			v-if="level > 0 || level === 0 && !isSchemaValueArray"
			:title="schema.type"
			:class="{
				[$style.pill]: true,
				[$style.mappable]: mappingEnabled,
				[$style.dragged]: draggingPath === schema.path,
			}"
		>
			<span
				:class="$style.label"
				:data-value="getJsonParameterPath(schema.path)"
				:data-name="schemaName"
				:data-path="schema.path"
				:data-depth="level"
				data-target="mappable"
			>
				<font-awesome-icon :icon="getIconBySchemaType(schema.type)" size="sm"/>
				<span v-if="isSchemaParentTypeArray">{{ parent.key }}</span>
				<span v-if="key" :class="{[$style.arrayIndex]: isSchemaParentTypeArray}">{{ key }}</span>
			</span>
		</div>
		<span v-if="text" :class="$style.text">{{ text }}</span>
		<input :id="subKey" type="checkbox" checked />
		<label v-if="level > 0 && isSchemaValueArray" :class="$style.toggle" :for="subKey">
			<font-awesome-icon icon="angle-up" />
		</label>
		<div v-if="isSchemaValueArray" :class="{[$style.sub]: true, [$style.flat]: isFlat}">
			<run-data-schema-item v-for="(s, i) in schema.value"
				:key="`${s.type}-${level}-${i}`"
				:schema="s"
				:level="level + 1"
				:parent="schema"
				:subKey="`${s.type}-${level}-${i}`"
				:mappingEnabled="mappingEnabled"
				:draggingPath="draggingPath"
				:distanceFromActive="distanceFromActive"
				:node="node"
				:style="{transitionDelay: transitionDelay(i)}"
			/>
		</div>
	</div>
</template>

<style lang="scss" module>
@import '@/styles/css-animation-helpers.scss';

.item {
	display: block;
	position: relative;
	transition: all 0.3s $ease-out-expo;

	.item {
		padding-top: var(--spacing-2xs);
		padding-left: var(--spacing-l);
	}

	input {
		position: absolute;
		left: -100%;

		~ .sub {
			height: 0;

			> .item {
				transform: translateX(-100%);
			}
		}

		&:checked {
			~ .toggle svg {
				transform: rotate(180deg);
			}

			~ .sub {
				height: auto;

				> .item {
					transform: translateX(0);
				}
			}
		}
	}

	&::after {
		content: '';
		display: block;
		clear: both;
	}
}

.sub {
	display: block;
	overflow: hidden;
	transition: all 0.2s $ease-out-expo;
	clear: both;

	&.flat {
		> .item {
			padding-left: 0;
		}
	}

	&:nth-of-type(1) {
		> .item:nth-of-type(1) {
			padding-top: 0;

			.toggle {
				top: -2px;
			}
		}
	}
}

.pill {
	float: left;
	display: inline-flex;
	height: 24px;
	padding: 0 var(--spacing-3xs);
	border: 1px solid var(--color-foreground-light);
	border-radius: 4px;
	background: var(--color-background-xlight);
	font-size: var(--font-size-2xs);
	color: var(--color-text-dark);

	span {
		display: flex;
		height: 100%;
		align-items: center;

		svg {
			path {
				fill: var(--color-text-light);
			}
		}
	}

	&.mappable {
		cursor: grab;

		&:hover {
			&,
			span span {
				background-color: var(--color-background-light);
				border-color: var(--color-foreground-base);
			}
		}
	}

	&.dragged {
		&,
		&:hover,
		span {
			color: var(--color-primary);
			border-color: var(--color-primary-tint-1);
			background: var(--color-primary-tint-3);

			svg {
				path {
					fill: var(--color-primary);
				}
			}
		}
	}
}

.label {
	> span {
		margin-left: var(--spacing-3xs);
		padding-left: var(--spacing-3xs);
		border-left: 1px solid var(--color-foreground-light);

		&.arrayIndex {
			border: 0;
			padding-left: 0;
			margin-left: 0;
		}
	}
}

.text {
	display: block;
	padding-top: var(--spacing-4xs);
	padding-left: var(--spacing-2xs);
	font-weight: var(--font-weight-normal);
	font-size: var(--font-size-2xs);
	overflow: hidden;
	word-break: break-word;
}

.toggle {
	display: flex;
	position: absolute;
	padding: var(--spacing-2xs);
	left: 0;
	top: 5px;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	user-select: none;
	font-weight: normal;
	font-size: var(--font-size-s);
	overflow: hidden;

	svg {
		transition: all 0.3s $ease-out-expo;
	}
}
</style>