System Initiative

<!-- eslint-disable vue/no-multiple-template-root --> <template> <h3 class="m-xs text-sm">{{ props.label }}</h3> <ul class="flex flex-col gap-xs mx-xs"> <li v-for="conn in props.connections" :key="`${conn.key}`" :class=" clsx( 'py-xs pr-xs border rounded-sm', themeClasses('border-neutral-300', 'border-neutral-600'), props.label === 'Incoming' && highlightedPath === conn.self && themeClasses( 'border-neutral-500 bg-neutral-300', 'border-neutral-400 bg-neutral-700', ), ) " > <div class="flex flex-row gap-2xs"> <div class="flex-none flex items-center justify-center pl-2xs mt-[1px]"> <Icon name="incoming-connection" size="none" :class=" clsx( 'w-8 h-11', themeClasses('text-neutral-500', 'text-neutral-400'), ) " /> </div> <div class="flex-1 min-w-0 flex flex-col gap-3xs pl-0 font-mono text-xs" > <div :class=" clsx( 'flex flex-row gap-xs -ml-xs p-2xs rounded-sm', props.label === 'Incoming' && ctx.componentDetails.value[conn.componentId]?.name && clsx( 'cursor-pointer', themeClasses( 'hover:bg-neutral-200', 'hover:bg-neutral-700', ), ), ) " @click=" props.label === 'Incoming' && ctx.componentDetails.value[conn.componentId]?.name ? navigate(conn.componentId) : undefined " > <template v-if="props.label === 'Incoming'"> <TruncateWithTooltip :class=" clsx( 'flex-1 min-w-0 basis-1/3 max-w-fit px-2xs py-2xs rounded-[2px] border', themeClasses( 'bg-white border-neutral-300 text-[#207E65]', 'bg-neutral-900 border-neutral-600 text-[#AAFEC7]', ), ) " > {{ ctx.componentDetails.value[conn.componentId] ?.schemaVariantName }} </TruncateWithTooltip> <TruncateWithTooltip :class=" clsx( 'flex-1 min-w-0 basis-1/3 max-w-fit px-2xs py-2xs rounded-[2px] border', themeClasses( 'bg-white border-neutral-300 text-[#631AC2]', 'bg-neutral-900 border-neutral-600 text-[#D4B4FE]', ), ) " > {{ ctx.componentDetails.value[conn.componentId]?.name }} </TruncateWithTooltip> <TruncateWithTooltip :class=" clsx( 'flex-1 min-w-0 basis-1/3 max-w-fit px-2xs py-2xs rounded-[2px] border', themeClasses( 'bg-white border-neutral-300 text-action-700', 'bg-neutral-900 border-neutral-600 text-[#8BCDEE]', ), ) " > {{ conn.other }} </TruncateWithTooltip> </template> <template v-else-if="props.label === 'Outgoing'"> <TruncateWithTooltip :class=" clsx( 'flex-shrink min-w-0 px-2xs py-2xs rounded-[2px] border', themeClasses( 'bg-white border-neutral-300 text-action-700', 'bg-neutral-900 border-neutral-600 text-[#8BCDEE]', ), ) " > {{ conn.self }} </TruncateWithTooltip> </template> </div> <div :class=" clsx( 'flex flex-row gap-xs p-2xs rounded-sm', props.label === 'Outgoing' && ctx.componentDetails.value[conn.componentId]?.name && clsx( 'cursor-pointer', themeClasses( 'hover:bg-neutral-200', 'hover:bg-neutral-700', ), ), ) " @click=" props.label === 'Outgoing' && ctx.componentDetails.value[conn.componentId]?.name ? navigate(conn.componentId) : undefined " > <template v-if="props.label === 'Incoming'"> <TruncateWithTooltip :class=" clsx( 'flex-shrink min-w-0 px-2xs py-2xs rounded-[2px] border', themeClasses( 'bg-white border-neutral-300 text-action-700', 'bg-neutral-900 border-neutral-600 text-[#8BCDEE]', ), ) " > {{ conn.self }} </TruncateWithTooltip> </template> <template v-else-if="props.label === 'Outgoing'"> <TruncateWithTooltip :class=" clsx( 'flex-1 min-w-0 basis-1/3 max-w-fit px-2xs py-2xs rounded-[2px] border', themeClasses( 'bg-white border-neutral-300 text-[#207E65]', 'bg-neutral-900 border-neutral-600 text-[#AAFEC7]', ), ) " > {{ ctx.componentDetails.value[conn.componentId] ?.schemaVariantName }} </TruncateWithTooltip> <TruncateWithTooltip :class=" clsx( 'flex-1 min-w-0 basis-1/3 max-w-fit px-2xs py-2xs rounded-[2px] border', themeClasses( 'bg-white border-neutral-300 text-[#631AC2]', 'bg-neutral-900 border-neutral-600 text-[#D4B4FE]', ), ) " > {{ ctx.componentDetails.value[conn.componentId]?.name }} </TruncateWithTooltip> <TruncateWithTooltip :class=" clsx( 'flex-1 min-w-0 basis-1/3 max-w-fit px-2xs py-2xs rounded-[2px] border', themeClasses( 'bg-white border-neutral-300 text-action-700', 'bg-neutral-900 border-neutral-600 text-[#8BCDEE]', ), ) " > {{ conn.other }} </TruncateWithTooltip> </template> </div> </div> </div> </li> </ul> </template> <script setup lang="ts"> import { useRoute, useRouter } from "vue-router"; import clsx from "clsx"; import { themeClasses, TruncateWithTooltip, Icon, } from "@si/vue-lib/design-system"; import { useContext } from "../logic_composables/context"; export interface SimpleConnection { key: string; componentId: string; self: string; other: string; } const ctx = useContext(); const props = defineProps<{ label: string; connections: SimpleConnection[]; highlightedPath?: string; }>(); const router = useRouter(); const route = useRoute(); const navigate = (componentId: string) => { const params = { ...route.params }; params.componentId = componentId; router.push({ name: "new-hotness-component", params, }); }; </script>