Files
nimbus/resources/js/components/domain/Client/Request/RequestBuilder.vue
Mazen Touati e1b844cee0 feat(history): add history viewer and rewind (#38)
* feat(ui): add `input group` base component

* feat(history): add history viewer and rewind

* test: update selector snapshot

* test: add PW base page

* style: apply TS style fixes

* chore(history): request history wiki

* chore(history): remove unwanted symbol

* chore: fix type

* style: apply TS style fixes
2026-01-17 20:50:00 +01:00

75 lines
2.5 KiB
Vue

<script setup lang="ts">
import {
AppTabs,
AppTabsContent,
AppTabsList,
AppTabsTrigger,
} from '@/components/base/tabs';
import {
RequestAuthorization,
RequestBody,
RequestBuilderEndpoint,
RequestHeaders,
RequestParameters,
} from '@/components/domain/Client/Request';
import { uniquePersistenceKey } from '@/utils/stores';
import { useStorage } from '@vueuse/core';
const tab = useStorage(uniquePersistenceKey('request-builder-tab'), 'body');
</script>
<template>
<div
class="relative flex h-full max-h-full flex-1 flex-col"
data-testid="request-builder-root"
>
<RequestBuilderEndpoint
class="h-toolbar border-b"
data-testid="request-builder-endpoint"
/>
<AppTabs
:default-value="tab"
class="mt-0 flex flex-1 flex-col overflow-hidden"
data-testid="app-tabs-container"
@update:model-value="tab = $event as string"
>
<div class="bg-subtle-background border-b">
<AppTabsList class="h-toolbar px-panel rounded-none">
<AppTabsTrigger value="parameters" label="Parameters" />
<AppTabsTrigger value="body" label="Body" />
<AppTabsTrigger value="authorization" label="Authorization" />
<AppTabsTrigger value="headers" label="Headers" />
</AppTabsList>
</div>
<AppTabsContent
value="parameters"
class="mt-0 flex max-h-full min-h-0 flex-1 flex-col"
data-testid="request-parameters"
>
<RequestParameters />
</AppTabsContent>
<AppTabsContent
value="body"
class="mt-0 flex max-h-full min-h-0 flex-1 flex-col"
data-testid="request-body"
>
<RequestBody />
</AppTabsContent>
<AppTabsContent
value="authorization"
class="mt-0 flex max-h-full min-h-0 flex-1 flex-col"
data-testid="request-authorization"
>
<RequestAuthorization />
</AppTabsContent>
<AppTabsContent
value="headers"
class="mt-0 flex max-h-full min-h-0 flex-1 flex-col"
data-testid="request-headers"
>
<RequestHeaders />
</AppTabsContent>
</AppTabs>
</div>
</template>