chore(a11y): improve component roles
This commit is contained in:
liyasthomas
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<div
|
||||
class="relative flex items-center px-4 py-2 transition bg-error text-tiny group"
|
||||
role="alert"
|
||||
>
|
||||
<i class="mr-2 material-icons">info_outline</i>
|
||||
<span class="text-secondaryDark">
|
||||
|
||||
@@ -59,6 +59,7 @@
|
||||
ref="tippyActions"
|
||||
class="flex flex-col focus:outline-none"
|
||||
tabindex="0"
|
||||
role="menu"
|
||||
@keyup.d="documentation.$el.click()"
|
||||
@keyup.s="shortcuts.$el.click()"
|
||||
@keyup.c="chat.$el.click()"
|
||||
|
||||
@@ -87,7 +87,7 @@
|
||||
svg="user"
|
||||
/>
|
||||
</template>
|
||||
<div class="flex flex-col px-2 text-tiny">
|
||||
<div class="flex flex-col px-2 text-tiny" role="menu">
|
||||
<span class="inline-flex font-semibold truncate">
|
||||
{{ currentUser.displayName }}
|
||||
</span>
|
||||
|
||||
@@ -1,24 +1,28 @@
|
||||
<template>
|
||||
<aside class="flex justify-between h-full md:flex-col">
|
||||
<nav class="flex flex-1 flex-nowrap md:flex-col md:flex-none">
|
||||
<NuxtLink
|
||||
v-for="(navigation, index) in primaryNavigation"
|
||||
:key="`navigation-${index}`"
|
||||
:to="localePath(navigation.target)"
|
||||
class="nav-link"
|
||||
tabindex="0"
|
||||
>
|
||||
<div v-if="navigation.svg">
|
||||
<SmartIcon :name="navigation.svg" class="svg-icons" />
|
||||
</div>
|
||||
<span v-if="EXPAND_NAVIGATION">{{ navigation.title }}</span>
|
||||
<tippy
|
||||
v-if="!EXPAND_NAVIGATION"
|
||||
:placement="mdAndLarger ? 'right' : 'bottom'"
|
||||
theme="tooltip"
|
||||
:content="navigation.title"
|
||||
/>
|
||||
</NuxtLink>
|
||||
<ul>
|
||||
<li>
|
||||
<NuxtLink
|
||||
v-for="(navigation, index) in primaryNavigation"
|
||||
:key="`navigation-${index}`"
|
||||
:to="localePath(navigation.target)"
|
||||
class="nav-link"
|
||||
tabindex="0"
|
||||
>
|
||||
<div v-if="navigation.svg">
|
||||
<SmartIcon :name="navigation.svg" class="svg-icons" />
|
||||
</div>
|
||||
<span v-if="EXPAND_NAVIGATION">{{ navigation.title }}</span>
|
||||
<tippy
|
||||
v-if="!EXPAND_NAVIGATION"
|
||||
:placement="mdAndLarger ? 'right' : 'bottom'"
|
||||
theme="tooltip"
|
||||
:content="navigation.title"
|
||||
/>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
@@ -26,6 +26,7 @@
|
||||
:disabled="disabled"
|
||||
:tabindex="loading ? '-1' : '0'"
|
||||
:type="type"
|
||||
role="button"
|
||||
>
|
||||
<span
|
||||
v-if="!loading"
|
||||
|
||||
@@ -25,6 +25,7 @@
|
||||
]"
|
||||
:disabled="disabled"
|
||||
:tabindex="loading ? '-1' : '0'"
|
||||
role="button"
|
||||
>
|
||||
<span
|
||||
v-if="!loading"
|
||||
|
||||
@@ -39,22 +39,24 @@
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
<SmartItem
|
||||
v-for="(team, index) in myTeams"
|
||||
:key="`team-${index}`"
|
||||
:label="team.name"
|
||||
:info-icon="
|
||||
team.id === collectionsType.selectedTeam?.id ? 'done' : ''
|
||||
"
|
||||
:active-info-icon="team.id === collectionsType.selectedTeam?.id"
|
||||
svg="users"
|
||||
@click.native="
|
||||
() => {
|
||||
updateSelectedTeam(team)
|
||||
options.tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
<div class="flex flex-col" role="menu">
|
||||
<SmartItem
|
||||
v-for="(team, index) in myTeams"
|
||||
:key="`team-${index}`"
|
||||
:label="team.name"
|
||||
:info-icon="
|
||||
team.id === collectionsType.selectedTeam?.id ? 'done' : ''
|
||||
"
|
||||
:active-info-icon="team.id === collectionsType.selectedTeam?.id"
|
||||
svg="users"
|
||||
@click.native="
|
||||
() => {
|
||||
updateSelectedTeam(team)
|
||||
options.tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</tippy>
|
||||
</SmartIntersection>
|
||||
</SmartTab>
|
||||
|
||||
@@ -60,6 +60,7 @@
|
||||
ref="tippyActions"
|
||||
class="flex flex-col focus:outline-none"
|
||||
tabindex="0"
|
||||
role="menu"
|
||||
@keyup.n="folderAction.$el.click()"
|
||||
@keyup.e="edit.$el.click()"
|
||||
@keyup.delete="deleteAction.$el.click()"
|
||||
|
||||
@@ -56,6 +56,7 @@
|
||||
ref="tippyActions"
|
||||
class="flex flex-col focus:outline-none"
|
||||
tabindex="0"
|
||||
role="menu"
|
||||
@keyup.n="folderAction.$el.click()"
|
||||
@keyup.e="edit.$el.click()"
|
||||
@keyup.delete="deleteAction.$el.click()"
|
||||
|
||||
@@ -16,44 +16,46 @@
|
||||
svg="more-vertical"
|
||||
/>
|
||||
</template>
|
||||
<SmartItem
|
||||
icon="assignment_returned"
|
||||
:label="t('import.from_gist')"
|
||||
@click.native="
|
||||
() => {
|
||||
readCollectionGist()
|
||||
options.tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
<span
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="
|
||||
!currentUser
|
||||
? `${t('export.require_github')}`
|
||||
: currentUser.provider !== 'github.com'
|
||||
? `${t('export.require_github')}`
|
||||
: undefined
|
||||
"
|
||||
>
|
||||
<div class="flex flex-col" role="menu">
|
||||
<SmartItem
|
||||
:disabled="
|
||||
!currentUser
|
||||
? true
|
||||
: currentUser.provider !== 'github.com'
|
||||
? true
|
||||
: false
|
||||
"
|
||||
icon="assignment_turned_in"
|
||||
:label="t('export.create_secret_gist')"
|
||||
icon="assignment_returned"
|
||||
:label="t('import.from_gist')"
|
||||
@click.native="
|
||||
() => {
|
||||
createCollectionGist()
|
||||
readCollectionGist()
|
||||
options.tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="
|
||||
!currentUser
|
||||
? `${t('export.require_github')}`
|
||||
: currentUser.provider !== 'github.com'
|
||||
? `${t('export.require_github')}`
|
||||
: undefined
|
||||
"
|
||||
>
|
||||
<SmartItem
|
||||
:disabled="
|
||||
!currentUser
|
||||
? true
|
||||
: currentUser.provider !== 'github.com'
|
||||
? true
|
||||
: false
|
||||
"
|
||||
icon="assignment_turned_in"
|
||||
:label="t('export.create_secret_gist')"
|
||||
@click.native="
|
||||
() => {
|
||||
createCollectionGist()
|
||||
options.tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</tippy>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
@@ -56,6 +56,7 @@
|
||||
ref="tippyActions"
|
||||
class="flex flex-col focus:outline-none"
|
||||
tabindex="0"
|
||||
role="menu"
|
||||
@keyup.e="edit.$el.click()"
|
||||
@keyup.d="duplicate.$el.click()"
|
||||
@keyup.delete="deleteAction.$el.click()"
|
||||
|
||||
@@ -78,6 +78,7 @@
|
||||
ref="tippyActions"
|
||||
class="flex flex-col focus:outline-none"
|
||||
tabindex="0"
|
||||
role="menu"
|
||||
@keyup.n="folderAction.$el.click()"
|
||||
@keyup.e="edit.$el.click()"
|
||||
@keyup.delete="deleteAction.$el.click()"
|
||||
|
||||
@@ -56,6 +56,7 @@
|
||||
ref="tippyActions"
|
||||
class="flex flex-col focus:outline-none"
|
||||
tabindex="0"
|
||||
role="menu"
|
||||
@keyup.n="folderAction.$el.click()"
|
||||
@keyup.e="edit.$el.click()"
|
||||
@keyup.delete="deleteAction.$el.click()"
|
||||
|
||||
@@ -80,6 +80,7 @@
|
||||
ref="tippyActions"
|
||||
class="flex flex-col focus:outline-none"
|
||||
tabindex="0"
|
||||
role="menu"
|
||||
@keyup.e="edit.$el.click()"
|
||||
@keyup.d="duplicate.$el.click()"
|
||||
@keyup.delete="deleteAction.$el.click()"
|
||||
|
||||
@@ -79,6 +79,7 @@
|
||||
ref="tippyActions"
|
||||
class="flex flex-col focus:outline-none"
|
||||
tabindex="0"
|
||||
role="menu"
|
||||
@keyup.n="folderAction.$el.click()"
|
||||
@keyup.e="edit.$el.click()"
|
||||
@keyup.delete="deleteAction.$el.click()"
|
||||
|
||||
@@ -58,6 +58,7 @@
|
||||
ref="tippyActions"
|
||||
class="flex flex-col focus:outline-none"
|
||||
tabindex="0"
|
||||
role="menu"
|
||||
@keyup.n="folderAction.$el.click()"
|
||||
@keyup.e="edit.$el.click()"
|
||||
@keyup.delete="deleteAction.$el.click()"
|
||||
|
||||
@@ -80,6 +80,7 @@
|
||||
ref="tippyActions"
|
||||
class="flex flex-col focus:outline-none"
|
||||
tabindex="0"
|
||||
role="menu"
|
||||
@keyup.e="edit.$el.click()"
|
||||
@keyup.d="duplicate.$el.click()"
|
||||
@keyup.delete="deleteAction.$el.click()"
|
||||
|
||||
@@ -37,6 +37,7 @@
|
||||
ref="tippyActions"
|
||||
class="flex flex-col focus:outline-none"
|
||||
tabindex="0"
|
||||
role="menu"
|
||||
@keyup.e="edit.$el.click()"
|
||||
@keyup.d="duplicate.$el.click()"
|
||||
@keyup.delete="
|
||||
|
||||
@@ -16,44 +16,46 @@
|
||||
svg="more-vertical"
|
||||
/>
|
||||
</template>
|
||||
<SmartItem
|
||||
icon="assignment_returned"
|
||||
:label="t('import.from_gist')"
|
||||
@click.native="
|
||||
() => {
|
||||
readEnvironmentGist()
|
||||
options.tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
<span
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="
|
||||
!currentUser
|
||||
? `${t('export.require_github')}`
|
||||
: currentUser.provider !== 'github.com'
|
||||
? `${t('export.require_github')}`
|
||||
: undefined
|
||||
"
|
||||
>
|
||||
<div class="flex flex-col" role="menu">
|
||||
<SmartItem
|
||||
:disabled="
|
||||
!currentUser
|
||||
? true
|
||||
: currentUser.provider !== 'github.com'
|
||||
? true
|
||||
: false
|
||||
"
|
||||
icon="assignment_turned_in"
|
||||
:label="t('export.create_secret_gist')"
|
||||
icon="assignment_returned"
|
||||
:label="t('import.from_gist')"
|
||||
@click.native="
|
||||
() => {
|
||||
createEnvironmentGist()
|
||||
readEnvironmentGist()
|
||||
options.tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="
|
||||
!currentUser
|
||||
? `${t('export.require_github')}`
|
||||
: currentUser.provider !== 'github.com'
|
||||
? `${t('export.require_github')}`
|
||||
: undefined
|
||||
"
|
||||
>
|
||||
<SmartItem
|
||||
:disabled="
|
||||
!currentUser
|
||||
? true
|
||||
: currentUser.provider !== 'github.com'
|
||||
? true
|
||||
: false
|
||||
"
|
||||
icon="assignment_turned_in"
|
||||
:label="t('export.create_secret_gist')"
|
||||
@click.native="
|
||||
() => {
|
||||
createEnvironmentGist()
|
||||
options.tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</tippy>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
@@ -20,31 +20,33 @@
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
<SmartItem
|
||||
:label="`${$t('environment.no_environment')}`"
|
||||
:info-icon="selectedEnvironmentIndex === -1 ? 'done' : ''"
|
||||
:active-info-icon="selectedEnvironmentIndex === -1"
|
||||
@click.native="
|
||||
() => {
|
||||
selectedEnvironmentIndex = -1
|
||||
$refs.options.tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
<hr />
|
||||
<SmartItem
|
||||
v-for="(gen, index) in environments"
|
||||
:key="`gen-${index}`"
|
||||
:label="gen.name"
|
||||
:info-icon="index === selectedEnvironmentIndex ? 'done' : ''"
|
||||
:active-info-icon="index === selectedEnvironmentIndex"
|
||||
@click.native="
|
||||
() => {
|
||||
selectedEnvironmentIndex = index
|
||||
$refs.options.tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
<div class="flex flex-col" role="menu">
|
||||
<SmartItem
|
||||
:label="`${$t('environment.no_environment')}`"
|
||||
:info-icon="selectedEnvironmentIndex === -1 ? 'done' : ''"
|
||||
:active-info-icon="selectedEnvironmentIndex === -1"
|
||||
@click.native="
|
||||
() => {
|
||||
selectedEnvironmentIndex = -1
|
||||
$refs.options.tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
<hr />
|
||||
<SmartItem
|
||||
v-for="(gen, index) in environments"
|
||||
:key="`gen-${index}`"
|
||||
:label="gen.name"
|
||||
:info-icon="index === selectedEnvironmentIndex ? 'done' : ''"
|
||||
:active-info-icon="index === selectedEnvironmentIndex"
|
||||
@click.native="
|
||||
() => {
|
||||
selectedEnvironmentIndex = index
|
||||
$refs.options.tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</tippy>
|
||||
<div class="flex justify-between flex-1 border-b border-dividerLight">
|
||||
<ButtonSecondary
|
||||
|
||||
@@ -22,81 +22,83 @@
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
<SmartItem
|
||||
label="None"
|
||||
:icon="
|
||||
authName === 'None'
|
||||
? 'radio_button_checked'
|
||||
: 'radio_button_unchecked'
|
||||
"
|
||||
:active="authName === 'None'"
|
||||
@click.native="
|
||||
() => {
|
||||
authType = 'none'
|
||||
authTypeOptions.tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
<SmartItem
|
||||
label="Basic Auth"
|
||||
:icon="
|
||||
authName === 'Basic Auth'
|
||||
? 'radio_button_checked'
|
||||
: 'radio_button_unchecked'
|
||||
"
|
||||
:active="authName === 'Basic Auth'"
|
||||
@click.native="
|
||||
() => {
|
||||
authType = 'basic'
|
||||
authTypeOptions.tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
<SmartItem
|
||||
label="Bearer Token"
|
||||
:icon="
|
||||
authName === 'Bearer'
|
||||
? 'radio_button_checked'
|
||||
: 'radio_button_unchecked'
|
||||
"
|
||||
:active="authName === 'Bearer'"
|
||||
@click.native="
|
||||
() => {
|
||||
authType = 'bearer'
|
||||
authTypeOptions.tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
<SmartItem
|
||||
label="OAuth 2.0"
|
||||
:icon="
|
||||
authName === 'OAuth 2.0'
|
||||
? 'radio_button_checked'
|
||||
: 'radio_button_unchecked'
|
||||
"
|
||||
:active="authName === 'OAuth 2.0'"
|
||||
@click.native="
|
||||
() => {
|
||||
authType = 'oauth-2'
|
||||
authTypeOptions.tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
<SmartItem
|
||||
label="API key"
|
||||
:icon="
|
||||
authName === 'API key'
|
||||
? 'radio_button_checked'
|
||||
: 'radio_button_unchecked'
|
||||
"
|
||||
:active="authName === 'API key'"
|
||||
@click.native="
|
||||
() => {
|
||||
authType = 'api-key'
|
||||
authTypeOptions.tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
<div class="flex flex-col" role="menu">
|
||||
<SmartItem
|
||||
label="None"
|
||||
:icon="
|
||||
authName === 'None'
|
||||
? 'radio_button_checked'
|
||||
: 'radio_button_unchecked'
|
||||
"
|
||||
:active="authName === 'None'"
|
||||
@click.native="
|
||||
() => {
|
||||
authType = 'none'
|
||||
authTypeOptions.tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
<SmartItem
|
||||
label="Basic Auth"
|
||||
:icon="
|
||||
authName === 'Basic Auth'
|
||||
? 'radio_button_checked'
|
||||
: 'radio_button_unchecked'
|
||||
"
|
||||
:active="authName === 'Basic Auth'"
|
||||
@click.native="
|
||||
() => {
|
||||
authType = 'basic'
|
||||
authTypeOptions.tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
<SmartItem
|
||||
label="Bearer Token"
|
||||
:icon="
|
||||
authName === 'Bearer'
|
||||
? 'radio_button_checked'
|
||||
: 'radio_button_unchecked'
|
||||
"
|
||||
:active="authName === 'Bearer'"
|
||||
@click.native="
|
||||
() => {
|
||||
authType = 'bearer'
|
||||
authTypeOptions.tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
<SmartItem
|
||||
label="OAuth 2.0"
|
||||
:icon="
|
||||
authName === 'OAuth 2.0'
|
||||
? 'radio_button_checked'
|
||||
: 'radio_button_unchecked'
|
||||
"
|
||||
:active="authName === 'OAuth 2.0'"
|
||||
@click.native="
|
||||
() => {
|
||||
authType = 'oauth-2'
|
||||
authTypeOptions.tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
<SmartItem
|
||||
label="API key"
|
||||
:icon="
|
||||
authName === 'API key'
|
||||
? 'radio_button_checked'
|
||||
: 'radio_button_unchecked'
|
||||
"
|
||||
:active="authName === 'API key'"
|
||||
@click.native="
|
||||
() => {
|
||||
authType = 'api-key'
|
||||
authTypeOptions.tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</tippy>
|
||||
</span>
|
||||
<div class="flex">
|
||||
@@ -204,36 +206,38 @@
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
<SmartItem
|
||||
:icon="
|
||||
addTo === 'Headers'
|
||||
? 'radio_button_checked'
|
||||
: 'radio_button_unchecked'
|
||||
"
|
||||
:active="addTo === 'Headers'"
|
||||
:label="'Headers'"
|
||||
@click.native="
|
||||
() => {
|
||||
addTo = 'Headers'
|
||||
addToOptions.tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
<SmartItem
|
||||
:icon="
|
||||
addTo === 'Query params'
|
||||
? 'radio_button_checked'
|
||||
: 'radio_button_unchecked'
|
||||
"
|
||||
:active="addTo === 'Query params'"
|
||||
:label="'Query params'"
|
||||
@click.native="
|
||||
() => {
|
||||
addTo = 'Query params'
|
||||
addToOptions.tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
<div class="flex flex-col" role="menu">
|
||||
<SmartItem
|
||||
:icon="
|
||||
addTo === 'Headers'
|
||||
? 'radio_button_checked'
|
||||
: 'radio_button_unchecked'
|
||||
"
|
||||
:active="addTo === 'Headers'"
|
||||
:label="'Headers'"
|
||||
@click.native="
|
||||
() => {
|
||||
addTo = 'Headers'
|
||||
addToOptions.tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
<SmartItem
|
||||
:icon="
|
||||
addTo === 'Query params'
|
||||
? 'radio_button_checked'
|
||||
: 'radio_button_unchecked'
|
||||
"
|
||||
:active="addTo === 'Query params'"
|
||||
:label="'Query params'"
|
||||
@click.native="
|
||||
() => {
|
||||
addTo = 'Query params'
|
||||
addToOptions.tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</tippy>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -22,30 +22,32 @@
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
<SmartItem
|
||||
:label="$t('state.none').toLowerCase()"
|
||||
:info-icon="contentType === null ? 'done' : ''"
|
||||
:active-info-icon="contentType === null"
|
||||
@click.native="
|
||||
() => {
|
||||
contentType = null
|
||||
$refs.contentTypeOptions.tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
<SmartItem
|
||||
v-for="(contentTypeItem, index) in validContentTypes"
|
||||
:key="`contentTypeItem-${index}`"
|
||||
:label="contentTypeItem"
|
||||
:info-icon="contentTypeItem === contentType ? 'done' : ''"
|
||||
:active-info-icon="contentTypeItem === contentType"
|
||||
@click.native="
|
||||
() => {
|
||||
contentType = contentTypeItem
|
||||
$refs.contentTypeOptions.tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
<div class="flex flex-col" role="menu">
|
||||
<SmartItem
|
||||
:label="$t('state.none').toLowerCase()"
|
||||
:info-icon="contentType === null ? 'done' : ''"
|
||||
:active-info-icon="contentType === null"
|
||||
@click.native="
|
||||
() => {
|
||||
contentType = null
|
||||
$refs.contentTypeOptions.tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
<SmartItem
|
||||
v-for="(contentTypeItem, index) in validContentTypes"
|
||||
:key="`contentTypeItem-${index}`"
|
||||
:label="contentTypeItem"
|
||||
:info-icon="contentTypeItem === contentType ? 'done' : ''"
|
||||
:active-info-icon="contentTypeItem === contentType"
|
||||
@click.native="
|
||||
() => {
|
||||
contentType = contentTypeItem
|
||||
$refs.contentTypeOptions.tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</tippy>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
:placeholder="`${t('action.search')}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<div class="flex flex-col" role="menu">
|
||||
<SmartItem
|
||||
v-for="codegen in filteredCodegenDefinitions"
|
||||
:key="codegen.name"
|
||||
|
||||
@@ -26,12 +26,14 @@
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
<SmartItem
|
||||
v-for="(method, index) in methods"
|
||||
:key="`method-${index}`"
|
||||
:label="method"
|
||||
@click.native="onSelectMethod(method)"
|
||||
/>
|
||||
<div class="flex flex-col" role="menu">
|
||||
<SmartItem
|
||||
v-for="(method, index) in methods"
|
||||
:key="`method-${index}`"
|
||||
:label="method"
|
||||
@click.native="onSelectMethod(method)"
|
||||
/>
|
||||
</div>
|
||||
</tippy>
|
||||
</label>
|
||||
</div>
|
||||
@@ -69,6 +71,7 @@
|
||||
ref="sendTippyActions"
|
||||
class="flex flex-col focus:outline-none"
|
||||
tabindex="0"
|
||||
role="menu"
|
||||
@keyup.c="curl.$el.click()"
|
||||
@keyup.s="show.$el.click()"
|
||||
@keyup.delete="clearAll.$el.click()"
|
||||
@@ -150,6 +153,7 @@
|
||||
ref="saveTippyActions"
|
||||
class="flex flex-col focus:outline-none"
|
||||
tabindex="0"
|
||||
role="menu"
|
||||
@keyup.c="copyRequestAction.$el.click()"
|
||||
@keyup.s="saveRequestAction.$el.click()"
|
||||
@keyup.escape="saveOptions.tippy().hide()"
|
||||
|
||||
@@ -37,6 +37,7 @@
|
||||
<div
|
||||
v-if="noEnvSelected && !globalHasAdditions"
|
||||
class="flex p-4 bg-error text-secondaryDark"
|
||||
role="alert"
|
||||
>
|
||||
<i class="mr-4 material-icons"> warning </i>
|
||||
<div class="flex flex-col">
|
||||
|
||||
@@ -51,19 +51,23 @@
|
||||
arrow
|
||||
>
|
||||
<template #trigger>
|
||||
<div v-if="item.kind === 'RootObject'" class="outline">{}</div>
|
||||
<div v-if="item.kind === 'RootArray'" class="outline">[]</div>
|
||||
<div v-if="item.kind === 'ArrayMember'" class="outline">
|
||||
<div v-if="item.kind === 'RootObject'" class="outline-item">{}</div>
|
||||
<div v-if="item.kind === 'RootArray'" class="outline-item">[]</div>
|
||||
<div v-if="item.kind === 'ArrayMember'" class="outline-item">
|
||||
{{ item.index }}
|
||||
</div>
|
||||
<div v-if="item.kind === 'ObjectMember'" class="outline">
|
||||
<div v-if="item.kind === 'ObjectMember'" class="outline-item">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</template>
|
||||
<div
|
||||
v-if="item.kind === 'ArrayMember' || item.kind === 'ObjectMember'"
|
||||
>
|
||||
<div v-if="item.kind === 'ArrayMember'" class="flex flex-col">
|
||||
<div
|
||||
v-if="item.kind === 'ArrayMember'"
|
||||
class="flex flex-col"
|
||||
role="menu"
|
||||
>
|
||||
<SmartItem
|
||||
v-for="(arrayMember, astIndex) in item.astParent.values"
|
||||
:key="`ast-${astIndex}`"
|
||||
@@ -76,7 +80,11 @@
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="item.kind === 'ObjectMember'" class="flex flex-col">
|
||||
<div
|
||||
v-if="item.kind === 'ObjectMember'"
|
||||
class="flex flex-col"
|
||||
role="menu"
|
||||
>
|
||||
<SmartItem
|
||||
v-for="(objectMember, astIndex) in item.astParent.members"
|
||||
:key="`ast-${astIndex}`"
|
||||
@@ -90,7 +98,11 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="item.kind === 'RootObject'" class="flex flex-col">
|
||||
<div
|
||||
v-if="item.kind === 'RootObject'"
|
||||
class="flex flex-col"
|
||||
role="menu"
|
||||
>
|
||||
<SmartItem
|
||||
label="{}"
|
||||
@click.native="
|
||||
@@ -101,7 +113,11 @@
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="item.kind === 'RootArray'" class="flex flex-col">
|
||||
<div
|
||||
v-if="item.kind === 'RootArray'"
|
||||
class="flex flex-col"
|
||||
role="menu"
|
||||
>
|
||||
<SmartItem
|
||||
label="[]"
|
||||
@click.native="
|
||||
@@ -206,7 +222,7 @@ const outlinePath = computed(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.outline {
|
||||
.outline-item {
|
||||
@apply cursor-pointer;
|
||||
@apply flex-grow-0 flex-shrink-0;
|
||||
@apply text-secondaryLight;
|
||||
|
||||
@@ -43,12 +43,14 @@
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
<SmartItem
|
||||
v-for="(_, version) in socketIoClients"
|
||||
:key="`client-${version}`"
|
||||
:label="`Client ${version}`"
|
||||
@click.native="onSelectVersion(version)"
|
||||
/>
|
||||
<div class="flex flex-col" role="menu">
|
||||
<SmartItem
|
||||
v-for="(_, version) in socketIoClients"
|
||||
:key="`client-${version}`"
|
||||
:label="`Client ${version}`"
|
||||
@click.native="onSelectVersion(version)"
|
||||
/>
|
||||
</div>
|
||||
</tippy>
|
||||
</label>
|
||||
<input
|
||||
@@ -109,36 +111,38 @@
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
<SmartItem
|
||||
label="None"
|
||||
:icon="
|
||||
authType === 'None'
|
||||
? 'radio_button_checked'
|
||||
: 'radio_button_unchecked'
|
||||
"
|
||||
:active="authType === 'None'"
|
||||
@click.native="
|
||||
() => {
|
||||
authType = 'None'
|
||||
authTypeOptions.tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
<SmartItem
|
||||
label="Bearer Token"
|
||||
:icon="
|
||||
authType === 'Bearer'
|
||||
? 'radio_button_checked'
|
||||
: 'radio_button_unchecked'
|
||||
"
|
||||
:active="authType === 'Bearer'"
|
||||
@click.native="
|
||||
() => {
|
||||
authType = 'Bearer'
|
||||
authTypeOptions.tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
<div class="flex flex-col" role="menu">
|
||||
<SmartItem
|
||||
label="None"
|
||||
:icon="
|
||||
authType === 'None'
|
||||
? 'radio_button_checked'
|
||||
: 'radio_button_unchecked'
|
||||
"
|
||||
:active="authType === 'None'"
|
||||
@click.native="
|
||||
() => {
|
||||
authType = 'None'
|
||||
authTypeOptions.tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
<SmartItem
|
||||
label="Bearer Token"
|
||||
:icon="
|
||||
authType === 'Bearer'
|
||||
? 'radio_button_checked'
|
||||
: 'radio_button_unchecked'
|
||||
"
|
||||
:active="authType === 'Bearer'"
|
||||
@click.native="
|
||||
() => {
|
||||
authType = 'Bearer'
|
||||
authTypeOptions.tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</tippy>
|
||||
</span>
|
||||
<div class="flex">
|
||||
|
||||
@@ -15,18 +15,20 @@
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
<NuxtLink
|
||||
v-for="(locale, index) in $i18n.locales"
|
||||
:key="`locale-${index}`"
|
||||
:to="switchLocalePath(locale.code)"
|
||||
@click="language.tippy().hide()"
|
||||
>
|
||||
<SmartItem
|
||||
:label="locale.name"
|
||||
:active-info-icon="$i18n.locale === locale.code"
|
||||
:info-icon="$i18n.locale === locale.code ? 'done' : null"
|
||||
/>
|
||||
</NuxtLink>
|
||||
<div class="flex flex-col" role="menu">
|
||||
<NuxtLink
|
||||
v-for="(locale, index) in $i18n.locales"
|
||||
:key="`locale-${index}`"
|
||||
:to="switchLocalePath(locale.code)"
|
||||
@click="language.tippy().hide()"
|
||||
>
|
||||
<SmartItem
|
||||
:label="locale.name"
|
||||
:active-info-icon="$i18n.locale === locale.code"
|
||||
:info-icon="$i18n.locale === locale.code ? 'done' : null"
|
||||
/>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</tippy>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
<template>
|
||||
<div
|
||||
class="inline-flex items-center justify-center cursor-pointer transition flex-nowrap group hover:text-secondaryDark"
|
||||
role="checkbox"
|
||||
:aria-checked="on"
|
||||
@click="$emit('change')"
|
||||
>
|
||||
<input
|
||||
|
||||
@@ -3,6 +3,8 @@
|
||||
v-if="show"
|
||||
dialog
|
||||
:title="$t('modal.confirm')"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
@close="hideModal"
|
||||
>
|
||||
<template #body>
|
||||
|
||||
@@ -15,21 +15,23 @@
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
<SmartItem
|
||||
v-for="(size, index) in fontSizes"
|
||||
:key="`size-${index}`"
|
||||
:label="`${getFontSizeName(size)}`"
|
||||
:icon="
|
||||
size === active ? 'radio_button_checked' : 'radio_button_unchecked'
|
||||
"
|
||||
:active="size === active"
|
||||
@click.native="
|
||||
() => {
|
||||
setActiveFont(size)
|
||||
fontSize.tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
<div class="flex flex-col" role="menu">
|
||||
<SmartItem
|
||||
v-for="(size, index) in fontSizes"
|
||||
:key="`size-${index}`"
|
||||
:label="`${getFontSizeName(size)}`"
|
||||
:icon="
|
||||
size === active ? 'radio_button_checked' : 'radio_button_unchecked'
|
||||
"
|
||||
:active="size === active"
|
||||
@click.native="
|
||||
() => {
|
||||
setActiveFont(size)
|
||||
fontSize.tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</tippy>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
]"
|
||||
:disabled="disabled"
|
||||
:tabindex="loading ? '-1' : '0'"
|
||||
role="menuitem"
|
||||
>
|
||||
<span
|
||||
v-if="!loading"
|
||||
|
||||
@@ -28,6 +28,7 @@ const SmartLink = {
|
||||
switch (tag) {
|
||||
case ANCHOR_TAG:
|
||||
attrs["aria-label"] = "Link"
|
||||
attrs.role = "link"
|
||||
|
||||
// Map `to` prop to the correct attribute
|
||||
attrs.href = context.props.to
|
||||
@@ -56,6 +57,7 @@ const SmartLink = {
|
||||
|
||||
default:
|
||||
attrs["aria-label"] = "Button"
|
||||
attrs.role = "button"
|
||||
break
|
||||
}
|
||||
|
||||
|
||||
@@ -3,6 +3,8 @@
|
||||
<div
|
||||
ref="modal"
|
||||
class="fixed inset-0 z-10 z-50 overflow-y-auto transition hide-scrollbar"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
>
|
||||
<div
|
||||
class="flex items-end justify-center min-h-screen text-center sm:block"
|
||||
|
||||
@@ -5,6 +5,8 @@
|
||||
value === selected ? 'radio_button_checked' : 'radio_button_unchecked'
|
||||
"
|
||||
:active="value === selected"
|
||||
role="radio"
|
||||
:aria-checked="value === selected"
|
||||
@click.native="$emit('change', value)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@@ -19,6 +19,7 @@
|
||||
class="tab"
|
||||
:class="[{ active: tab.active }, { vertical: vertical }]"
|
||||
:aria-label="tab.label"
|
||||
role="button"
|
||||
@keyup.enter="selectTab(tab)"
|
||||
@click="selectTab(tab)"
|
||||
>
|
||||
|
||||
@@ -104,51 +104,53 @@
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
<SmartItem
|
||||
label="OWNER"
|
||||
:icon="
|
||||
member.role === 'OWNER'
|
||||
? 'radio_button_checked'
|
||||
: 'radio_button_unchecked'
|
||||
"
|
||||
:active="member.role === 'OWNER'"
|
||||
@click.native="
|
||||
() => {
|
||||
updateMemberRole(member.userID, 'OWNER')
|
||||
memberOptions[index].tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
<SmartItem
|
||||
label="EDITOR"
|
||||
:icon="
|
||||
member.role === 'EDITOR'
|
||||
? 'radio_button_checked'
|
||||
: 'radio_button_unchecked'
|
||||
"
|
||||
:active="member.role === 'EDITOR'"
|
||||
@click.native="
|
||||
() => {
|
||||
updateMemberRole(member.userID, 'EDITOR')
|
||||
memberOptions[index].tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
<SmartItem
|
||||
label="VIEWER"
|
||||
:icon="
|
||||
member.role === 'VIEWER'
|
||||
? 'radio_button_checked'
|
||||
: 'radio_button_unchecked'
|
||||
"
|
||||
:active="member.role === 'VIEWER'"
|
||||
@click.native="
|
||||
() => {
|
||||
updateMemberRole(member.userID, 'VIEWER')
|
||||
memberOptions[index].tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
<div class="flex flex-col" role="menu">
|
||||
<SmartItem
|
||||
label="OWNER"
|
||||
:icon="
|
||||
member.role === 'OWNER'
|
||||
? 'radio_button_checked'
|
||||
: 'radio_button_unchecked'
|
||||
"
|
||||
:active="member.role === 'OWNER'"
|
||||
@click.native="
|
||||
() => {
|
||||
updateMemberRole(member.userID, 'OWNER')
|
||||
memberOptions[index].tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
<SmartItem
|
||||
label="EDITOR"
|
||||
:icon="
|
||||
member.role === 'EDITOR'
|
||||
? 'radio_button_checked'
|
||||
: 'radio_button_unchecked'
|
||||
"
|
||||
:active="member.role === 'EDITOR'"
|
||||
@click.native="
|
||||
() => {
|
||||
updateMemberRole(member.userID, 'EDITOR')
|
||||
memberOptions[index].tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
<SmartItem
|
||||
label="VIEWER"
|
||||
:icon="
|
||||
member.role === 'VIEWER'
|
||||
? 'radio_button_checked'
|
||||
: 'radio_button_unchecked'
|
||||
"
|
||||
:active="member.role === 'VIEWER'"
|
||||
@click.native="
|
||||
() => {
|
||||
updateMemberRole(member.userID, 'VIEWER')
|
||||
memberOptions[index].tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</tippy>
|
||||
</span>
|
||||
<div class="flex">
|
||||
|
||||
@@ -160,51 +160,53 @@
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
<SmartItem
|
||||
label="OWNER"
|
||||
:icon="
|
||||
invitee.value === 'OWNER'
|
||||
? 'radio_button_checked'
|
||||
: 'radio_button_unchecked'
|
||||
"
|
||||
:active="invitee.value === 'OWNER'"
|
||||
@click.native="
|
||||
() => {
|
||||
updateNewInviteeRole(index, 'OWNER')
|
||||
newInviteeOptions[index].tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
<SmartItem
|
||||
label="EDITOR"
|
||||
:icon="
|
||||
invitee.value === 'EDITOR'
|
||||
? 'radio_button_checked'
|
||||
: 'radio_button_unchecked'
|
||||
"
|
||||
:active="invitee.value === 'EDITOR'"
|
||||
@click.native="
|
||||
() => {
|
||||
updateNewInviteeRole(index, 'EDITOR')
|
||||
newInviteeOptions[index].tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
<SmartItem
|
||||
label="VIEWER"
|
||||
:icon="
|
||||
invitee.value === 'VIEWER'
|
||||
? 'radio_button_checked'
|
||||
: 'radio_button_unchecked'
|
||||
"
|
||||
:active="invitee.value === 'VIEWER'"
|
||||
@click.native="
|
||||
() => {
|
||||
updateNewInviteeRole(index, 'VIEWER')
|
||||
newInviteeOptions[index].tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
<div class="flex flex-col" role="menu">
|
||||
<SmartItem
|
||||
label="OWNER"
|
||||
:icon="
|
||||
invitee.value === 'OWNER'
|
||||
? 'radio_button_checked'
|
||||
: 'radio_button_unchecked'
|
||||
"
|
||||
:active="invitee.value === 'OWNER'"
|
||||
@click.native="
|
||||
() => {
|
||||
updateNewInviteeRole(index, 'OWNER')
|
||||
newInviteeOptions[index].tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
<SmartItem
|
||||
label="EDITOR"
|
||||
:icon="
|
||||
invitee.value === 'EDITOR'
|
||||
? 'radio_button_checked'
|
||||
: 'radio_button_unchecked'
|
||||
"
|
||||
:active="invitee.value === 'EDITOR'"
|
||||
@click.native="
|
||||
() => {
|
||||
updateNewInviteeRole(index, 'EDITOR')
|
||||
newInviteeOptions[index].tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
<SmartItem
|
||||
label="VIEWER"
|
||||
:icon="
|
||||
invitee.value === 'VIEWER'
|
||||
? 'radio_button_checked'
|
||||
: 'radio_button_unchecked'
|
||||
"
|
||||
:active="invitee.value === 'VIEWER'"
|
||||
@click.native="
|
||||
() => {
|
||||
updateNewInviteeRole(index, 'VIEWER')
|
||||
newInviteeOptions[index].tippy().hide()
|
||||
}
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</tippy>
|
||||
</span>
|
||||
<div class="flex">
|
||||
|
||||
@@ -86,6 +86,7 @@
|
||||
ref="tippyActions"
|
||||
class="flex flex-col focus:outline-none"
|
||||
tabindex="0"
|
||||
role="menu"
|
||||
@keyup.e="team.myRole === 'OWNER' ? edit.$el.click() : null"
|
||||
@keyup.x="
|
||||
!(team.myRole === 'OWNER' && team.ownersCount == 1)
|
||||
|
||||
Reference in New Issue
Block a user