openapi-gui
Version:
GUI / visual editor for creating and editing OpenApi / Swagger definitions
863 lines (816 loc) • 38.7 kB
HTML
<div class='component-gui'>
<div class='navbar is-fixed-top has-shadow success' id='topnav'>
<div class="navbar-brand">
<span class='navbar-item'><a href="https://github.com/mermade/openapi-gui">OpenAPI-GUI v3</a></span>
<button class="button navbar-burger">
<span>Mobile menu A</span>
<span>Mobile menu B</span>
<span>Mobile menu C</span>
</button>
</div>
<div class="navbar-end">
<div class='navbar-item'>
<a class="btn" v-on:click="scrollTop()"><i class='fa fa-white fa-arrow-up'></i> Top</a>
<a class="btn" v-on:click="settings()"><i class='fa fa-white fa-cog'></i> Settings</a>
<a class="btn" v-on:click="save()"><i class='fa fa-white fa-save'></i> Save</a>
<a class="btn" v-on:click="undo()"><i class='fa fa-white fa-undo'></i> Undo</a>
<a class="btn" target="_blank" href="https://twitter.com/share?source=tweetbutton&text=OpenAPI-GUI%20Visual%20editor%20for%20%23OpenAPI%203.0.x%20Via%20%40PermittedSoc&url=https%3A%2F%2Fgithub.com%2FMermade%2Fopenapi-gui"><i class='fa fa-white fa-twitter'></i></a>
<a class="btn" target="_blank" href="https://twitter.com/intent/follow?screen_name=PermittedSoc"><i class='fa fa-twitter'></i> Follow</a>
<a class='btn' target="_blank" href="https://github.com/mermade/openapi-gui"><i class='fa fa-github'></i> GitHub</a>
</div>
</div>
</div>
<div id="mdPreview" class="modal">
<div class="modal-background"></div>
<div class="modal-content">
<article class="message">
<div class="message-body">
<span id="mdPreviewText"></span>
</div>
</article>
</div>
<button id="mdPreviewClose" class="modal-close"></button>
</div>
<div id="alert" class="modal">
<div class="modal-background"></div>
<div class="modal-content">
<article class="message">
<div class="message-body">
<span id="alertText"></span>
</div>
</article>
</div>
<button id="alertClose" class="modal-close"></button>
</div>
<div id="confirm" class="modal">
<div class="modal-background"></div>
<div class="modal-content">
<div class="card">
<div class="card-content">
<p class="title" id="confirmTitle">
</p>
<p class="subtitle" id="confirmSubtitle">
</p>
</div>
<footer class="card-footer">
<p class="card-footer-item">
<a id="confirmOk"><span class="button is-primary">Confirm</span></a>
</p>
<p class="card-footer-item">
<a id="confirmCancel"><span class="button is-warning">Cancel</span></a>
</p>
</footer>
</div>
</div>
<button id="confirmClose" class="modal-close"></button>
</div>
<div class='container is-fluid' role='main'>
<div class='none'>
<a id='scrollTop'></a>
<ul id="section-tabs" class='tabs is-boxed tab-container'>
<li class="tabItem" id="tabItem-about">
<a class="tabSelect" href="#about" v-on:click="selectTab('about',$event)">
<span class="icon is-small"><i class="fa fa-info"></i></span>
<span>About</span>
</a>
</li>
<li class="tabItem" id="tabItem-input" v-on:click="selectTab('input',$event)">
<a class="tabSelect" href='#input' id="input-tab">
<span class="icon is-small"><i class='fa fa-upload'></i></span>
<span>Upload</span>
</a>
</li>
<li class="tabItem" id="tabItem-header">
<a class="tabSelect" href='#header' id="header-tab" v-on:click="selectTab('header',$event)">
<span class="icon is-small"><i class='fa fa-header'></i></span>
<span>Header</span>
</a>
</li>
<li class="tabItem" id="tabItem-servers">
<a class="tabSelect" href='#servers' id="servers-tab" v-on:click="selectTab('servers',$event)">
<span class="icon is-small"><i class='fa fa-server'></i></span>
<span>Servers</span>
</a>
</li>
<li class="tabItem" id="tabItem-security">
<a class="tabSelect" href='#security' id="security-tab" v-on:click="selectTab('security',$event)">
<span class="icon is-small"><i class='fa fa-lock'></i></span>
<span>Security</span>
</a>
</li>
<li class="tabItem" id="tabItem-tags">
<a class="tabSelect" href='#tags' id="tags-tab" v-on:click="selectTab('tags',$event)">
<span class="icon is-small"><i class='fa fa-tag'></i></span>
<span>Tags</span>
</a>
</li>
<li class='tabItem is-active' id="tabItem-editor">
<a class="tabSelect" href='#editor' id="editor-tab" v-on:click="selectTab('editor',$event)">
<span class="icon is-small"><i class='fa fa-edit'></i></span>
<span>Main</span>
</a>
</li>
<li class="tabItem" id="tabItem-schemas">
<a class="tabSelect" href='#schemas' id="schemas-tab" v-on:click="selectTab('schemas',$event)">
<span class="icon is-small"><i class='fa fa-code'></i></span>
<span>Schemas</span>
</a>
</li>
<li class="tabItem" id="tabItem-wizards">
<a class="tabSelect" href='#wizards' id="wizards-tab" v-on:click="selectTab('wizards',$event)">
<span class="icon is-small"><i class='fa fa-magic'></i></span>
<span>Wizards</span>
</a>
</li>
<li class="tabItem" id="tabItem-output">
<a class="tabSelect" href='#output' id="output-tab" v-on:click="renderOutput($event)">
<span class="icon is-small"><i class='fa fa-file'></i></span>
<span>Export JSON</span>
</a>
</li>
<li class="tabItem" id="tabItem-yaml">
<a class="tabSelect" href='#yaml' id="yaml-tab" v-on:click="renderOutputYaml($event)">
<span class="icon is-small"><i class='fa fa-file'></i></span>
<span>Export YAML</span>
</a>
</li>
</ul>
<div class='tab-content'>
<div class="tab-pane hidden container is-fluid" id="about">
<h1 class="title">What is OpenAPI-GUI?</h1>
OpenAPI-GUI is a GUI for creating and updating <a v-bind:href="specLink()">
OpenAPI 3.0.x</a> definitions.<br>
<br>
<h2 class="subtitle">How does OpenAPI-GUI work?</h2>
Upload an existing definition, or create a new one (select the red 'trash-can' button on the Upload tab to remove all Paths) and start adding
Paths, Operations, and Parameters. When an existing definition is used, it is parsed and forms for editing each Path,
Operation and Parameter will be created.
<br>
<br> By default when OpenAPI-GUI starts, it loads the OpenAPI Petstore sample.
<br>
<br> Click an item from the menu on the left to begin editing. View the JSON/YAML output at any time by selecting the
"Export" tabs. When finished, click "Download" or Copy" to copy the output to your clipboard. OpenAPI-GUI saves data
only to your browser's local-storage. Data is saved before destructive edits (deletions) and when the "Save" button
is pressed. "Undo" will return to the last-saved state. Make sure you save your JSON/YAML output when finished.
<br>
<br>
<h3 class="subtitle">Converting from Swagger / OpenAPI 2.0</h3>
Swagger / OpenAPI 2.0 definitions are converted using <a v-if="!window.intelligentBackend" href="https://mermade.org.uk/openapi-converter">this online tool</a><span v-if="window.intelligentBackend">a built-in tool</span>.
</div>
<div class="tab-pane hidden container is-fluid" id="input">
<div class="columns">
<div class="column is-2">
<div class="container">
<a class='button is-primary' id="load-definition" v-on:click="loadSchema()">
<i class='fa fa-fw fa-upload'></i>Load Definition
</a>
<br><br>
<a class="button is-primary petButton" v-on:click="petstore()"><i class='fa fa-fw fa-paw'></i>Demo</a>
<br><br>
<a class="button is-danger remButton" v-on:click="removeAll()"><i class='fa fa-fw fa-trash'></i>Remove All</a>
</div>
</div>
<div class="column is-10">
<textarea class="textarea service-input is-fullwidth" v-model="importschema.text"></textarea>
</div>
</div>
</div>
<div class="tab-pane hidden" id="header">
<div class="container is-fluid">
<form class="plain-form form-horizontal" id="frmHeader">
<div class='field is-horizontal'>
<label class='field-label is-normal label'> Title </label>
<div class='field-body field control'>
<input class="input" placeholder="Required" v-model="openapi.info.title" @input="$v.openapi.info.title.$touch()" v-bind:class="{ 'is-danger': !$v.openapi.info.title.required }">
</div>
</div>
<div class='field is-horizontal'>
<label class='field-label is-normal label'> Version </label>
<div class='field-body field control'>
<input class="input" placeholder="Required" v-model="openapi.info.version" @input="$v.openapi.info.version.$touch()" v-bind:class="{ 'is-danger': !$v.openapi.info.version.required }">
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Description</label>
<span class="icon" data-balloon="Preview markdown"><a v-on:click="markdownPreview('#txtDescription')"><i class='fa fa-check-circle'></i></a></span>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<textarea class="textarea" id="txtDescription" v-model="openapi.info.description"></textarea>
</div>
</div>
</div>
</div>
<div class='field is-horizontal'>
<label class='field-label is-normal label'> Contact Name </label>
<div class='field-body field control has-icons-left'>
<input class="input" v-model="openapi.info.contact.name">
<span class="icon is-small is-left"><i class="fa fa-user"></i></span>
</div>
</div>
<div class="field is-horizontal">
<label class='field-label is-normal label'> Contact Email </label>
<span class="control field-body has-icons-left">
<input class="input" type="email" v-model="openapi.info.contact.email">
<span class="icon is-small is-left"><i class="fa fa-envelope"></i></span>
</span>
</div>
<div class='field is-horizontal'>
<label class='field-label is-normal label'> Contact URL </label>
<div class='field-body field control has-icons-left'>
<input type="url" class="input" v-model="openapi.info.contact.url">
<span class="icon is-small is-left"><i class="fa fa-link"></i></span>
</div>
</div>
<div class='field is-horizontal'>
<label class='field-label is-normal label'> Terms of Service URL </label>
<div class='field-body field control has-icons-left'>
<input type="url" class="input" v-model="openapi.info.termsOfService">
<span class="icon is-small is-left"><i class="fa fa-link"></i></span>
</div>
</div>
<div class='field is-horizontal'>
<label class='field-label is-normal label'> License Name </label>
<div class='field-body field control'>
<input class="input" id="txtLicense" v-model="openapi.info.license.name">
<div class="select hidden" id="drpLicense">
<select id="selLicense" v-model="openapi.info.license.name">
<option value="MIT">MIT License</option>
<option value="Apache-2.0">Apache 2.0 License</option>
<option value="CC BY-SA 4.0">Creative Commons Attribution Share-alike</option>
<option value="CC NC-SA 4.0">Creative Commons No-Commercial Share-alike</option>
<option value="">Custom license</option>
</select>
</div>
<span class="icon" data-balloon="Choose license"><a v-on:click="enableLicenseSelect()" class='none'><i class='fa fa-caret-down'></i></a></span>
<span class="icon" data-balloon="License help"><a href="https://choosealicense.com" target="_blank"><i class='fa fa-question'></i></a></span>
</div>
</div>
<div class='field is-horizontal'>
<label class='field-label is-normal label'> License URL </label>
<div class='field-body field control has-icons-left'>
<input type="url" id="urlLicense" class="input" v-model="openapi.info.license.url">
<span class="icon is-small is-left"><i class="fa fa-link"></i></span>
</div>
</div>
<div class='field is-horizontal'>
<div class="field-label is-normal">
<label class='label'> External Docs </label>
<span class="icon" data-balloon="Preview markdown"><a v-on:click="markdownPreview('#txtExtDocDesc')"><i class='fa fa-check-circle'></i></a></span>
</div>
<div class='field-body field control'>
<textarea class="textarea" id="txtExtDocDesc" v-model="openapi.externalDocs.description"></textarea>
</div>
</div>
<div class='field is-horizontal'>
<label class='field-label is-normal label'> Documentation URL </label>
<div class='field-body field control has-icons-left'>
<input type="url" class="input" v-model="openapi.externalDocs.url">
<span class="icon is-small is-left"><i class="fa fa-link"></i></span>
</div>
</div>
</form>
</div>
</div>
<div class="tab-pane hidden" id="servers">
<div class="container is-fluid">
<form class="plain-form form-horizontal" id="frmServers">
<div class="card" v-if="!openapi.servers || openapi.servers.length==0">
<div class="card-content">
<p class="title">
<a v-bind:href="specLink('#serverObject')">OpenAPI Specification Servers Object</a>
</p>
<p class="subtitle">
There are no servers defined. This means the API paths will be relative to the host and path
the OpenAPI definition was loaded from.
</p>
</div>
<footer class="card-footer">
<p class="card-footer-item">
<a v-on:click="addServer()"><span class="button is-primary"><i class="fa fa-fw fa-plus"></i>Create Server</span></a>
</p>
</footer>
</div>
<div v-for="(server,index) in openapi.servers">
<div class="box">
<div class="columns">
<div class='column is-5 field level is-horizontal is-grouped'>
<span class="icon" data-balloon="Add a server"><a v-on:click="addServer()" class='none'><i class='fa fa-plus'></i></a></span>
<span class="icon" data-balloon="Remove server"><a v-on:click="removeServer(index)" class='none'><i class='fa fa-trash'></i></a></span>
<label class='field-label is-normal label'>URL</label>
<div class='field-body control has-icons-left'>
<input class="input" placeholder="Required" v-model="server.url">
<span class="icon is-small is-left"><i class="fa fa-link"></i></span>
</div>
</div>
<div class='column is-5 field is-horizontal'>
<label class='field-label is-normal label'> Description </label>
<div class='field-body field control'>
<input class="input" v-model="server.description">
</div>
</div>
<div class="column field is-horizontal control">
<a v-on:click="addVariable(index)" class="button is-primary"><i class="fa fa-fw fa-plus"></i> Add Variable</a>
<br>
<br>
</div>
</div>
<api-srvvar v-for="(variable,index) in server.variables" :name="index" :key="index" :variable="variable" :server="server" inline-template>
<div class="box">
<div class="field is-horizontal is-grouped">
<label class='field-label is-normal label'> Name </label>
<div class="field-body field control">
<input class="input" v-model.lazy="variableName">
</div>
<div class="control">
<span class="icon" data-balloon="Remove variable"><a v-on:click="removeVariable()"><i class='fa fa-trash'></i></a></span>
</div>
</div>
<div class='field is-horizontal'>
<label class='field-label is-normal label'> Description </label>
<div class='field-body field control'>
<input class="input" v-model="variable.description">
</div>
</div>
<div class='field is-horizontal'>
<label class='field-label is-normal label'> Default </label>
<div class='field-body field control'>
<input class="input" placeholder="Required" v-model="variable.default">
</div>
</div>
<div class="box">
<div class='field is-horizontal'>
<label class='field-label is-normal label'> Enum </label>
<div class='field-body field control'>
<a v-on:click="addVEnum()" class='button is-primary'><i class='fa fa-fw fa-plus'></i>Add Enum Value</a>
</div>
</div>
<api-venum v-for="(evalue,eindex) in variable.enum" :variable="variable" :eindex="eindex" :key="eindex" inline-template>
<div class='field is-horizontal level is-grouped'>
<div class="control">
<a class="icon" data-balloon="Add Enum value" v-on:click="addVEnum(variable)"><i class='fa fa-plus'></i></a>
</div>
<div class="control">
<a class="icon" data-balloon="Remove Enum value" v-on:click="removeVEnum(eindex)"><i class='fa fa-trash'></i></a>
</div>
<label class='field-label is-normal label'> Value </label>
<div class='field-body field control'>
<input class="input" v-model="vename">
</div>
</div>
</api-venum>
</div>
</div>
</api-srvvar>
</div>
</div>
</form>
</div>
</div>
<div class="tab-pane hidden" id="tags">
<div class="container is-fluid box">
<form class="columns" id="frmTags">
<div class="column is-2 box">
<a v-on:click="addTag()" class='button is-primary'><i class='fa fa-fw fa-plus'></i>Add Tag</a>
<br>
<div class="menu">
<ul class="menu-list">
<li v-for="(t,index) in openapi.tags"><a :href="'#tag'+index">{{t.name}}</a></li>
</ul>
</div>
</div>
<div class="column">
<div v-for="(t,index) in openapi.tags" class="box">
<a :name="'tag'+index"></a>
<div class='field is-horizontal is-grouped'>
<label class='field-label is-normal label'> Name </label>
<div class='field-body control'>
<input class="input" placeholder="Required" v-model="t.name">
</div>
<div class="control">
<a class="icon" data-balloon="Remove tag" v-on:click="removeTag(index)"><i class='fa fa-trash'></i></a>
</div>
</div>
<div class='field is-horizontal'>
<label class='field-label is-normal label'> Description </label>
<div class='field-body field control'>
<textarea class="textarea" v-model="t.description"></textarea>
</div>
</div>
<div class='field is-horizontal'>
<label class='field-label is-normal label'> External Docs </label>
<div class='field-body field control'>
<textarea class="textarea" v-model="t.externalDocs.description"></textarea>
</div>
</div>
<div class='field is-horizontal'>
<label class='field-label is-normal label'> Docs URL </label>
<div class='field-body field control has-icons-left'>
<input type="url" class="input" v-model="t.externalDocs.url">
<span class="icon is-small is-left"><i class="fa fa-link"></i></span>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="tab-pane hidden" id="security">
<div class="container is-fluid">
<form class="columns" id="frmSecurity">
<div class="column is-2 box">
<a class="button is-primary" v-on:click="addSecurityDefinition()"><i class='fa fa-plus'></i> Add Security Scheme</a>
<br>
<div class="menu">
<ul class="menu-list">
<li v-for="(sd, sdname) in openapi.components.securitySchemes">
<a :href="'#sec'+sdname">{{sdname}}</a>
<ul>
<li v-for="(flow,flowName) in sd.flows">{{flowName}}
<ul>
<li v-for="(sdesc, sname) in flow.scopes">{{sname}}</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="column is-10">
<api-secdef v-for="(sd, sdname) in openapi.components.securitySchemes"
:key="sdname" :sd='sd' :sdname='sdname' :openapi='openapi' inline-template>
<div class="container is-fluid box">
<a :name="'sec'+sdname"></a>
<div class="field is-grouped">
<div class="control">
<label class="field-label is-normal label"> </label>
<a class="icon" data-balloon="Add securityScheme" v-on:click="addSecurityDefinition()"><i class='fa fa-plus'></i></a>
</div>
<div class="control">
<label class="field-label is-normal label"> </label>
<a class="icon" data-balloon="Remove securityScheme" v-on:click="removeSecurityDefinition(sdname)"><i class='fa fa-trash'></i></a>
</div>
<div class="control is-expanded">
<label class='field-label is-normal label'> Name </label>
<div class='field-body'>
<input class="input" v-model.lazy="secname">
</div>
</div>
<!--<div class="control">
<label class="field-label is-normal label"> </label>
<div class="field-body">
<a v-on:click="removeSecurityDefinition(sdname)" class='button is-danger'><i class='fa fa-fw fa-trash'></i>Delete</a>
</div>
</div>-->
<div class='control'>
<label class='field-label is-normal label' for="selSdType"> Type </label>
<div class='field-body'>
<div class="select">
<select name="selSdType" v-model="type">
<option value="apiKey">API Key</option>
<option value="oauth2">oAuth2</option>
<option value="http">HTTP Authentication</option>
<option value="openIdConnect">OpenIdConnect</option>
</select>
</div>
</div>
</div>
<div class='control'>
<label class='field-label is-normal label'> Apply to all paths </label>
<div class='field-body field control'>
<input type='checkbox' :value='sdname' v-model='appliesToAllPaths'>
</div>
</div>
</div>
<div v-if="sd.type == 'http'" class='animate-if'>
<div class='field is-horizontal'>
<label class='field-label is-normal label'> Scheme </label>
<div class='field-body field control'>
<input class="input" placeholder="Required" v-model="sd.scheme">
</div>
</div>
</div>
<div v-if="sd.type == 'openIdConnect'" class='animate-if'>
<div class='field is-horizontal'>
<label class='field-label is-normal label'> OpenIdConnect URL </label>
<div class='field-body field control has-icons-left'>
<input class="input" placeholder="Required" v-model="sd.openIdConnectUrl">
<span class="icon is-small is-left"><i class="fa fa-link"></i></span>
</div>
</div>
</div>
<div v-if="sd.type == 'apiKey'" class='animate-if'>
<div class='field is-horizontal'>
<label class='field-label is-normal label'> Parameter Name </label>
<div class='field-body field control'>
<input class="input" v-model="sd.name">
</div>
</div>
<div class='field is-horizontal'>
<label class='field-label is-normal label'> Location </label>
<div class='field-body field control'>
<div class="select">
<select class="none" name="selLocation" v-model="sd.in">
<option value="header">Header</option>
<option value="query">Query</option>
<option value="cookie">Cookie</option>
</select>
</div>
</div>
</div>
</div>
<div v-if="sd.type == 'oauth2'" class='animate-if'>
<div class="field control level box">
<div class="level-left">
<div class="level-item field is-horizontal">
<label class="field-label is-normal label">Flows:</label>
<div class='field-body field control'> </div>
</div>
<div class='level-item field is-horizontal'>
<label class='field-label is-normal label'>Implicit</label>
<div class='field-body field control'>
<input type='checkbox' class="checkbox" v-model='hasImplicit'>
</div>
</div>
<div class='level-item field is-horizontal'>
<label class='field-label is-normal label'>Password</label>
<div class='field-body field control'>
<input type='checkbox' class="checkbox" v-model='hasPassword'>
</div>
</div>
<div class='level-item field is-horizontal'>
<label class='field-label is-normal label'>clientCredentials</label>
<div class='field-body field control'>
<input type='checkbox' class="checkbox" v-model='hasClientCred'>
</div>
</div>
<div class='level-item field is-horizontal'>
<label class='field-label is-normal label'>authorizationCode</label>
<div class='field-body field control'>
<input type='checkbox' class="checkbox" v-model='hasAuthCode'>
</div>
</div>
<div class="level-item"></div> <!-- last level-item is wrongly positioned -->
</div>
</div>
<div class="box" v-for="(flow,flowName) in sd.flows">
<div class='field is-horizontal'>
<label class='field-label is-normal label'> Flow: {{ flowName }} </label>
</div>
<div class='field is-horizontal'>
<label class='field-label is-normal label'> Authorization URL </label>
<div class='field-body field control has-icons-left'>
<input type="url" class="input" v-model="flow.authorizationUrl">
<span class="icon is-small is-left"><i class="fa fa-link"></i></span>
</div>
</div>
<div class='field is-horizontal'>
<label class='field-label is-normal label'> Token URL </label>
<div class='field-body field control has-icons-left'>
<input type="url" class="input" v-model="flow.tokenUrl">
<span class="icon is-small is-left"><i class="fa fa-link"></i></span>
</div>
</div>
<div class='field is-horizontal'>
<label class='field-label is-normal label'> Refresh URL </label>
<div class='field-body field control has-icons-left'>
<input type="url" class="input" v-model="flow.refreshUrl">
<span class="icon is-small is-left"><i class="fa fa-link"></i></span>
</div>
</div>
<div class='box'>
<div class="card" v-if="Object.keys(flow.scopes).length==0">
<div class="card-content">
<p class="title">
<a v-bind:href="specLink('#scopesObject')">OpenAPI Specification Scopes Object</a>
</p>
<p class="subtitle">
There are no scopes defined yet for this oAuth2 flow.
</p>
</div>
<footer class="card-footer">
<p class="card-footer-item">
<a v-on:click="addScope(flow)"><span class="button is-primary"><i class="fa fa-fw fa-plus"></i>Create Scope</span></a>
</p>
</footer>
</div>
<api-scope v-for="(sdesc, sname) in flow.scopes" :sd="sd" :sdname="sdname" :sname="sname" :key="sname" :flow="flow" inline-template>
<div class="box">
<div class='field is-horizontal level is-grouped'>
<div class="control">
<a class="icon" data-balloon="Add scope" v-on:click="addScope(flow)"><i class='fa fa-plus'></i></a>
</div>
<div class="control">
<a class="icon" data-balloon="Duplicate scope" v-on:click="duplicateScope(flow)"><i class='fa fa-copy'></i></a>
</div>
<div class="control">
<a class="icon" data-balloon="Remove scope" v-on:click="removeScope(flow,sname)"><i class='fa fa-trash'></i></a>
</div>
<label class='field-label is-normal label'> Scope Name </label>
<div class='field-body field control'>
<input class="input" v-model.lazy="scopename">
</div>
</div>
<div class='field is-horizontal'>
<label class='field-label is-normal label'> Description </label>
<div class='field-body field control'>
<input class="input" v-model="flow.scopes[sname]">
</div>
</div>
</div>
</api-scope>
</div>
</div>
</div>
</div>
</api-secdef>
</div>
</form>
</div>
</div>
<div class="tab-pane hidden" id="output">
<api-definition></api-definition>
</div>
<div class="tab-pane hidden" id="yaml">
<api-yaml></api-yaml>
</div>
<div class='tab-pane is-active' id='editor'>
<div class='container is-fluid columns'>
<div class='column is-2 box'>
<aside id="drop-container" class="menu menu-small">
<ul id="resourceList" class="menu-list" role="menu" aria-labelledby="dropdownMenu">
<li class='dropdown-submenu' v-for="(path,key) in openapi.paths">
<a :href="path.id" target="_self" v-on:click="showResource(key)">{{key}}</a>
<ul>
<li v-for="(m,mkey) in path">
<template v-if="'.get.post.put.patch.head.options.delete.trace'.indexOf(mkey)>0">
<a :href="m.id" target="_self" v-on:click="showResource(key)">{{mkey}}</a>
</template>
</li>
</ul>
</li>
</ul>
</aside>
</div>
<div class="column box">
<form class="form-horizontal" id="config">
<div class="card" v-if="Object.keys(openapi.paths).length==0">
<div class="card-content">
<p class="title">
<a v-bind:href="specLink('#pathsObject')">OpenAPI Specification Paths Object</a>
</p>
<p class="subtitle">
There are no paths defined yet for this definition.
</p>
</div>
<footer class="card-footer">
<p class="card-footer-item">
<a v-on:click="addResource()"><span class="button is-primary"><i class="fa fa-fw fa-plus"></i>Create Path</span></a>
</p>
</footer>
</div>
<div class="resource" v-for="(path,key,index) in openapi.paths">
<api-resource :openapi='openapi' :path='path' :index='key' :maintags='openapi.tags'></api-resource>
</div>
</form>
</div>
</div>
</div>
</div>
<div class='tab-content'>
<div class="tab-pane hidden container is-fluid" id="wizards">
<h1 class="title">Wizards (Work-In-Progress)</h1>
<h2 class="subtitle">These functions may be experimental, or have only a rudimentary UI</h2>
<ul>
<li><a id="aValidate">Validate definition</a> using <span v-if="!window.intelligentBackend"><a href="https://mermade.org.uk/openapi-converter">OpenAPI-converter</a> (online version of <a href="https://github.com/mermade/swagger2openapi">swagger2openapi</a>)</span><span v-if="window.intelligentBackend">built-in validator</span></li>
<li><a id="aShinola">Generate documentation</a> using <a href="https://github.com/mermade/shinola">shinola</a> (online <a href="https://github.com/mermade/widdershins">widdershins</a> and <a href="https://github.com/mermade/shins">shins</a> pipeline)</li>
<li v-if="window.intelligentBackend"><a id="aShins" href="/shins">Preview documentation</a> using <a href="https://github.com/mermade/widdershins">widdershins</a> and <a href="https://github.com/mermade/shins">shins</a> </li>
<li v-if="window.intelligentBackend"><a id="aWiddershins" href="/markdown">Dump markdown</a> using <a href="https://github.com/mermade/widdershins">widdershins</a> </li>
<li><a id="aCRUD">Create CRUD operations</a> from definition</li>
<li><a id="aImportSchema">Import schema</a></li>
<li>Create server SDK - {{cgData.servers.length}} languages - <a href="https://github.com/swagger-api/swagger-codegen/issues/4669">waiting for swagger-codegen</a></li>
<li>Create client SDK - {{cgData.clients.length}} languages - <strong>ditto</strong></li>
<li v-if="window.intelligentBackend">Serve <a href="/serve">definition</a> for external use</li>
<li>OpenAPI <a href="vis/wordcloud.html" target="_blank">WordCloud</a> visualisation</li>
<li>OpenAPI <a href="vis/tree.html" target="_blank">Tree</a> visualisation</li>
<li>Generate link definition from sample</li>
</ul>
<br/>
<br/>
<textarea id="txtValidation" class="hidden wizDetails textarea">
</textarea>
<div id="divImportSchema" class="hidden wizDetails">
<textarea id="txtSchema" class="textarea" placeholder="Schema (JSON or YAML)">
</textarea>
<br/>
<div class='field is-horizontal'>
<label class='field-label is-normal label'> Schema Name </label>
<div class='field-body field control'>
<input id="txtSchemaName" class="input" placeholder="Required">
</div>
</div>
<div id="btnImportSchema" class="button is-primary">Update</div>
</div>
<div id="divCRUD" class="hidden wizDetails box">
<div class='level'>
<div class='field is-horizontal level-left'>
<label class='field-label is-normal label' for="selCRUDSchema"> Schema </label>
<div class='field-body'>
<div class="select">
<select name="selCRUDSchema">
<option v-for="(schema,key) in openapi.components.schemas" :value="key">{{key}}</option>
</select>
</div>
</div>
</div>
<div class='field is-horizontal level-item'>
<label class='field-label is-normal label' for="selCRUDMethods"> Methods </label>
<div class='field-body'>
<div class="select" >
<select name="selCRUDMethods" multiple=true>
<option value="get" selected>GET</option>
<option value="post">POST</option>
<option value="put">PUT</option>
<option value="patch">PATCH</option>
<option value="delete">DELETE</option>
<option value="head">HEAD</option>
<option value="options">OPTIONS</option>
<option value="trace">TRACE</option>
</select>
</div>
</div>
</div>
<div class="button is-primary">Generate</div>
</div>
</div>
</div>
</div>
<div class='tab-content'>
<div class="tab-pane hidden container is-fluid" id="schemas">
<div class='container is-fluid columns'>
<div class='column is-2 box'>
<aside id="drop-container" class="menu menu-small">
<ul id="schemaList" class="menu-list" role="menu" aria-labelledby="dropdownMenu">
<li class='dropdown-submenu' v-for="(schema,key) in openapi.components.schemas">
<a :href="schema.id" target="_self" v-on:click="showSchema(key)">{{key}}</a>
<ul>
<li v-for="(prop,pkey) in schema.properties">
<template v-if="(prop.type == 'object') || prop.$ref">
<a :href="prop.id" target="_self" v-on:click="showSchema(key)">{{pkey}}</a>
</template>
</li>
</ul>
</li>
</ul>
</aside>
</div>
<div class="column box">
<form class="form-horizontal" id="config">
<div class="card" v-if="Object.keys(openapi.components.schemas).length==0">
<div class="card-content">
<p class="title">
<a v-bind:href="specLink('#schemasObject')">OpenAPI Specification Schemas Object</a>
</p>
<p class="subtitle">
There are no shared schemas defined yet in this document.
</p>
</div>
<footer class="card-footer">
<p class="card-footer-item">
<a v-on:click="addSchema()"><span class="button is-primary"><i class="fa fa-fw fa-plus"></i>Create Schema</span></a>
</p>
</footer>
</div>
<div class="schema" v-for="(schema,key) in openapi.components.schemas">
<div class="box boxsep">
<div class="level">
<span class="level-left"><span><b>Schema:</b></span>
<a class='icon' data-balloon="Add schema" v-on:click="addSchema()">
<i class="fa fa-fw fa-plus"></i>
</a>
<a class='icon' data-balloon="Duplicate schema" v-on:click="duplicateSchema(key)">
<i class="fa fa-fw fa-copy"></i>
</a>
<a class='icon' data-balloon="Edit shared schema" v-on:click="editSchema(key)">
<i class='fa fa-fw fa-edit'></i>
</a>
<a class='icon is-danger' data-balloon="Remove schema" v-on:click="removeSchema(key)">
<i class="fa fa-fw fa-trash"></i>
</a>
</span>
<span class='level-item field-body field control'>
<input class="input" placeholder="Required" v-on:focus="storeSchemaName(key)" v-on:change="renameSchema(key)" v-model.lazy="key">
</span>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>