103 lines
2.5 KiB
Vue
103 lines
2.5 KiB
Vue
<template>
|
|
<div>
|
|
<div class="flex justify-between gap-2">
|
|
<div
|
|
class="field-title flex-1"
|
|
:class="{ 'field-highlighted': isHighlighted }"
|
|
>
|
|
{{ fieldName }}
|
|
<span v-if="fieldArgs.length > 0">
|
|
(
|
|
<span v-for="(field, index) in fieldArgs" :key="`field-${index}`">
|
|
{{ field.name }}:
|
|
<GraphqlTypeLink
|
|
:gql-type="field.type"
|
|
@jump-to-type="jumpToType"
|
|
/>
|
|
<span v-if="index !== fieldArgs.length - 1">, </span>
|
|
</span>
|
|
) </span
|
|
>:
|
|
<GraphqlTypeLink :gql-type="gqlField.type" @jump-to-type="jumpToType" />
|
|
</div>
|
|
<div v-if="gqlField.deprecationReason">
|
|
<span
|
|
v-tippy="{ theme: 'tomato' }"
|
|
class="flex cursor-pointer items-center gap-2 text-xs !text-red-500 hover:!text-red-600"
|
|
:title="gqlField.deprecationReason"
|
|
>
|
|
<IconAlertTriangle /> {{ t("state.deprecated") }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="gqlField.description"
|
|
class="field-desc py-2 text-secondaryLight"
|
|
>
|
|
{{ gqlField.description }}
|
|
</div>
|
|
<div v-if="fieldArgs.length > 0">
|
|
<h5 class="my-2">Arguments:</h5>
|
|
<div class="border-l-2 border-divider pl-4">
|
|
<div v-for="(field, index) in fieldArgs" :key="`field-${index}`">
|
|
<span>
|
|
{{ field.name }}:
|
|
<GraphqlTypeLink
|
|
:gql-type="field.type"
|
|
@jump-to-type="jumpToType"
|
|
/>
|
|
</span>
|
|
<div
|
|
v-if="field.description"
|
|
class="field-desc py-2 text-secondaryLight"
|
|
>
|
|
{{ field.description }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useI18n } from "@composables/i18n"
|
|
import { GraphQLType } from "graphql"
|
|
import { computed } from "vue"
|
|
import IconAlertTriangle from "~icons/lucide/alert-triangle"
|
|
|
|
const t = useI18n()
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
gqlField: any
|
|
isHighlighted: boolean
|
|
}>(),
|
|
{
|
|
gqlField: {},
|
|
isHighlighted: false,
|
|
}
|
|
)
|
|
|
|
const emit = defineEmits<{
|
|
(e: "jump-to-type", type: GraphQLType): void
|
|
}>()
|
|
|
|
const fieldName = computed(() => props.gqlField.name)
|
|
|
|
const fieldArgs = computed(() => props.gqlField.args || [])
|
|
|
|
const jumpToType = (type: GraphQLType) => {
|
|
emit("jump-to-type", type)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.field-highlighted {
|
|
@apply border-b-2 border-accent;
|
|
}
|
|
|
|
.field-title {
|
|
@apply select-text;
|
|
}
|
|
</style>
|