Skip to content
This repository has been archived by the owner on Aug 28, 2024. It is now read-only.

Commit

Permalink
fix: select client ui
Browse files Browse the repository at this point in the history
  • Loading branch information
hanspagel committed Jan 8, 2024
1 parent e352e5a commit 0d1b43a
Showing 1 changed file with 12 additions and 6 deletions.
18 changes: 12 additions & 6 deletions demo/src/App.vue
Original file line number Diff line number Diff line change
@@ -1,10 +1,16 @@
<script setup lang="ts">
import CodeExample from './components/CodeExample.vue'
import { snippetz } from '@scalar/snippetz'
import { type ClientId} from '@scalar/snippetz-core'
import { type ClientId, type TargetId} from '@scalar/snippetz-core'
import { ref } from 'vue'
const selectedTarget = ref<ClientId>('node')
const selectedClient = ref<ClientId>('undici')
function selectPlugin(plugin: { target: TargetId, client: ClientId }) {
selectedTarget.value = plugin.target
selectedClient.value = plugin.client
}
</script>

<template>
Expand All @@ -22,18 +28,18 @@ const selectedClient = ref<ClientId>('undici')
Clients
</h2>

<button v-for="plugin in snippetz().plugins()" :key="plugin.client" class="client" :class="{ 'client--selected': selectedClient === plugin.client }" @click="() => selectedClient = plugin.client">
{{ plugin.client }}
<button v-for="plugin in snippetz().plugins()" :key="plugin.client" class="client" :class="{ 'client--selected': selectedClient === plugin.client && selectedTarget === plugin.target }" @click="() => { selectPlugin(plugin) }">
{{ plugin.target }}/{{ plugin.client }}
</button>

<h2>
Examples
</h2>

<div class="examples">
<CodeExample target="node" :client="selectedClient" :request="{ url: 'https://example.com' }"/>
<CodeExample target="node" :client="selectedClient" :request="{ url: 'https://example.com', method: 'POST' }"/>
<CodeExample target="node" :client="selectedClient" :request="{ url: 'https://example.com', method: 'POST', headers: [
<CodeExample :target="selectedTarget" :client="selectedClient" :request="{ url: 'https://example.com' }"/>
<CodeExample :target="selectedTarget" :client="selectedClient" :request="{ url: 'https://example.com', method: 'POST' }"/>
<CodeExample :target="selectedTarget" :client="selectedClient" :request="{ url: 'https://example.com', method: 'POST', headers: [
{
name: 'Content-Type',
value: 'application/json'
Expand Down

0 comments on commit 0d1b43a

Please sign in to comment.