feat(editor): Node IO filter (#7503)

Co-authored-by: Omar Ajoue <krynble@gmail.com>
This commit is contained in:
Csaba Tuncsik
2023-11-15 16:19:48 +01:00
committed by GitHub
parent 93103c0b08
commit 18817651ec
18 changed files with 1331 additions and 85 deletions

View File

@@ -1,7 +1,7 @@
<script lang="ts" setup>
import { computed } from 'vue';
import type { INodeUi, Schema } from '@/Interface';
import { checkExhaustive, shorten } from '@/utils';
import { checkExhaustive, highlightText, sanitizeHtml, shorten } from '@/utils';
import { getMappedExpression } from '@/utils/mappingUtils';
type Props = {
@@ -14,6 +14,7 @@ type Props = {
draggingPath: string;
distanceFromActive: number;
node: INodeUi | null;
search: string;
};
const props = defineProps<Props>();
@@ -26,8 +27,12 @@ const isFlat = computed(
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 key = computed((): string | undefined => {
const highlightedKey = sanitizeHtml(highlightText(props.schema.key, props.search));
return isSchemaParentTypeArray.value ? `[${highlightedKey}]` : highlightedKey;
});
const parentKey = computed((): string | undefined =>
sanitizeHtml(highlightText(props.parent.key, props.search)),
);
const schemaName = computed(() =>
isSchemaParentTypeArray.value ? `${props.schema.type}[${props.schema.key}]` : props.schema.key,
@@ -92,8 +97,8 @@ const getIconBySchemaType = (type: Schema['type']): string => {
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 v-if="isSchemaParentTypeArray" v-html="parentKey" />
<span v-if="key" :class="{ [$style.arrayIndex]: isSchemaParentTypeArray }" v-html="key" />
</span>
</div>
<span v-if="text" :class="$style.text">{{ text }}</span>
@@ -115,6 +120,7 @@ const getIconBySchemaType = (type: Schema['type']): string => {
:distanceFromActive="distanceFromActive"
:node="node"
:style="{ transitionDelay: transitionDelay(i) }"
:search="search"
/>
</div>
</div>