refactor(editor): Move editor-ui and design-system to frontend dir (no-changelog) (#13564)

packages/frontend/editor-ui/src/components/NodeList.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import NodeIcon from '@/components/NodeIcon.vue';
+import type { ITemplatesNode } from '@/Interface';
+import { filterTemplateNodes } from '@/utils/nodeTypesUtils';
+
+const props = withDefaults(
+	defineProps<{
+		nodes: ITemplatesNode[];
+		limit?: number;
+		size?: string;
+	}>(),
+	{
+		limit: 4,
+		size: 'sm',
+	},
+);
+
+const filteredCoreNodes = computed(() => {
+	return filterTemplateNodes(props.nodes);
+});
+
+const hiddenNodes = computed(() => {
+	return filteredCoreNodes.value.length - countNodesToBeSliced(filteredCoreNodes.value);
+});
+
+const slicedNodes = computed(() => {
+	return filteredCoreNodes.value.slice(0, countNodesToBeSliced(filteredCoreNodes.value));
+});
+
+const countNodesToBeSliced = (nodes: ITemplatesNode[]): number => {
+	if (nodes.length > props.limit) {
+		return props.limit - 1;
+	} else {
+		return props.limit;
+	}
+};
+</script>
+
+<template>
+	<div :class="$style.list">
+		<div v-for="node in slicedNodes" :key="node.name" :class="[$style.container, $style[size]]">
+			<NodeIcon :node-type="node" :size="size === 'md' ? 24 : 18" :show-tooltip="true" />
+		</div>
+		<div
+			v-if="filteredCoreNodes.length > limit + 1"
+			:class="[$style.button, size === 'md' ? $style.buttonMd : $style.buttonSm]"
+		>
+			+{{ hiddenNodes }}
+		</div>
+	</div>
+</template>
+
+<style lang="scss" module>
+.list {
+	max-width: 100px;
+	display: flex;
+	flex-direction: row;
+	justify-content: flex-end;
+	align-items: center;
+}
+.container {
+	position: relative;
+	display: block;
+}
+.sm {
+	margin-left: var(--spacing-2xs);
+}
+.md {
+	margin-left: var(--spacing-xs);
+}
+.button {
+	top: 0px;
+	position: relative;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background: var(--color-background-light);
+	border: 1px var(--color-foreground-base) solid;
+	border-radius: var(--border-radius-base);
+	font-size: 10px;
+	font-weight: var(--font-weight-bold);
+	color: var(--color-text-base);
+}
+.buttonSm {
+	margin-left: var(--spacing-2xs);
+	width: 20px;
+	min-width: 20px;
+	height: 20px;
+}
+.buttonMd {
+	margin-left: var(--spacing-xs);
+	width: 24px;
+	min-width: 24px;
+	height: 24px;
+}
+</style>