":e:u.tabReplace?e.replace(/\t/g,u.tabReplace):e)):e}function w(e,t,n){const i=t?r[t]:n;e.classList.add("hljs"),i&&e.classList.add(i)}const k={"before:highlightElement":({el:e})=>{u.useBR&&(e.innerHTML=e.innerHTML.replace(/\n/g,"").replace(/
"))}},E=/^(<[^>]+>|\t)+/gm,_={"after:highlightElement":({result:e})=>{u.tabReplace&&(e.value=e.value.replace(E,(e=>e.replace(/\t/g,u.tabReplace))))}};function S(e){let t=null;const n=h(e);if(d(n))return;z("before:highlightElement",{el:e,language:n}),t=e;const r=t.textContent,i=n?g(r,{language:n,ignoreIllegals:!0}):y(r);z("after:highlightElement",{el:e,result:i,text:r}),e.innerHTML=i.value,w(e,n,i.language),e.result={language:i.language,re:i.relevance,relavance:i.relevance},i.second_best&&(e.second_best={language:i.second_best.language,re:i.second_best.relevance,relavance:i.second_best.relevance})}function O(e){e.useBR&&(ge("10.3.0","'useBR' will be removed entirely in v11.0"),ge("10.3.0","Please see https://github.com/highlightjs/highlight.js/issues/2559")),u=me(u,e)}const T=()=>{if(T.called)return;T.called=!0,ge("10.6.0","initHighlighting() is deprecated. Use highlightAll() instead.");const e=document.querySelectorAll("pre code");e.forEach(S)};function A(){ge("10.6.0","initHighlightingOnLoad() is deprecated. Use highlightAll() instead."),R=!0}let R=!1;function C(){if("loading"===document.readyState)return void(R=!0);const e=document.querySelectorAll("pre code");e.forEach(S)}function N(){R&&C()}function j(n,r){let i=null;try{i=r(e)}catch(o){if(de("Language definition for '{}' could not be registered.".replace("{}",n)),!s)throw o;de(o),i=c}i.name||(i.name=n),t[n]=i,i.rawDefinition=r.bind(null,e),i.aliases&&D(i.aliases,{languageName:n})}function I(e){delete t[e];for(const t of Object.keys(r))r[t]===e&&delete r[t]}function L(){return Object.keys(t)}function M(e){ge("10.4.0","requireLanguage will be removed entirely in v11."),ge("10.4.0","Please see https://github.com/highlightjs/highlight.js/pull/2844");const t=P(e);if(t)return t;const n=new Error("The '{}' language is required, but not loaded.".replace("{}",e));throw n}function P(e){return e=(e||"").toLowerCase(),t[e]||t[r[e]]}function D(e,{languageName:t}){"string"===typeof e&&(e=[e]),e.forEach((e=>{r[e.toLowerCase()]=t}))}function B(e){const t=P(e);return t&&!t.disableAutodetect}function $(e){e["before:highlightBlock"]&&!e["before:highlightElement"]&&(e["before:highlightElement"]=t=>{e["before:highlightBlock"](Object.assign({block:t.el},t))}),e["after:highlightBlock"]&&!e["after:highlightElement"]&&(e["after:highlightElement"]=t=>{e["after:highlightBlock"](Object.assign({block:t.el},t))})}function U(e){$(e),o.push(e)}function z(e,t){const n=e;o.forEach((function(e){e[n]&&e[n](t)}))}function F(e){return ge("10.2.0","fixMarkup will be removed entirely in v11.0"),ge("10.2.0","Please see https://github.com/highlightjs/highlight.js/issues/2534"),x(e)}function H(e){return ge("10.7.0","highlightBlock will be removed entirely in v12.0"),ge("10.7.0","Please use highlightElement now."),S(e)}"undefined"!==typeof window&&window.addEventListener&&window.addEventListener("DOMContentLoaded",N,!1),Object.assign(e,{highlight:g,highlightAuto:y,highlightAll:C,fixMarkup:F,highlightElement:S,highlightBlock:H,configure:O,initHighlighting:T,initHighlightingOnLoad:A,registerLanguage:j,unregisterLanguage:I,listLanguages:L,getLanguage:P,registerAliases:D,requireLanguage:M,autoDetection:B,inherit:me,addPlugin:U,vuePlugin:ae(e).VuePlugin}),e.debugMode=function(){s=!1},e.safeMode=function(){s=!0},e.versionString=oe;for(const i in W)"object"===typeof W[i]&&n(W[i]);return Object.assign(e,W),e.addPlugin(k),e.addPlugin(le),e.addPlugin(_),e};var xe=ye({});e.exports=xe},5344:e=>{function t(e){return e?"string"===typeof e?e:e.source:null}function n(...e){const n=e.map((e=>t(e))).join("");return n}function r(e){const t={},r={begin:/\$\{/,end:/\}/,contains:["self",{begin:/:-/,contains:[t]}]};Object.assign(t,{className:"variable",variants:[{begin:n(/\$[\w\d#@][\w\d_]*/,"(?![\\w\\d])(?![$])")},r]});const i={className:"subst",begin:/\$\(/,end:/\)/,contains:[e.BACKSLASH_ESCAPE]},o={begin:/<<-?\s*(?=\w+)/,starts:{contains:[e.END_SAME_AS_BEGIN({begin:/(\w+)/,end:/(\w+)/,className:"string"})]}},s={className:"string",begin:/"/,end:/"/,contains:[e.BACKSLASH_ESCAPE,t,i]};i.contains.push(s);const a={className:"",begin:/\\"/},l={className:"string",begin:/'/,end:/'/},c={begin:/\$\(\(/,end:/\)\)/,contains:[{begin:/\d+#[0-9a-f]+/,className:"number"},e.NUMBER_MODE,t]},u=["fish","bash","zsh","sh","csh","ksh","tcsh","dash","scsh"],p=e.SHEBANG({binary:`(${u.join("|")})`,relevance:10}),f={className:"function",begin:/\w[\w\d_]*\s*\(\s*\)\s*\{/,returnBegin:!0,contains:[e.inherit(e.TITLE_MODE,{begin:/\w[\w\d_]*/})],relevance:0};return{name:"Bash",aliases:["sh","zsh"],keywords:{$pattern:/\b[a-z._-]+\b/,keyword:"if then else elif fi for while in do done case esac function",literal:"true false",built_in:"break cd continue eval exec exit export getopts hash pwd readonly return shift test times trap umask unset alias bind builtin caller command declare echo enable help let local logout mapfile printf read readarray source type typeset ulimit unalias set shopt autoload bg bindkey bye cap chdir clone comparguments compcall compctl compdescribe compfiles compgroups compquote comptags comptry compvalues dirs disable disown echotc echoti emulate fc fg float functions getcap getln history integer jobs kill limit log noglob popd print pushd pushln rehash sched setcap setopt stat suspend ttyctl unfunction unhash unlimit unsetopt vared wait whence where which zcompile zformat zftp zle zmodload zparseopts zprof zpty zregexparse zsocket zstyle ztcp"},contains:[p,e.SHEBANG(),f,c,e.HASH_COMMENT_MODE,o,s,a,l,t]}}e.exports=r},5089:e=>{const t="[A-Za-z$_][0-9A-Za-z$_]*",n=["as","in","of","if","for","while","finally","var","new","function","do","return","void","else","break","catch","instanceof","with","throw","case","default","try","switch","continue","typeof","delete","let","yield","const","class","debugger","async","await","static","import","from","export","extends"],r=["true","false","null","undefined","NaN","Infinity"],i=["Intl","DataView","Number","Math","Date","String","RegExp","Object","Function","Boolean","Error","Symbol","Set","Map","WeakSet","WeakMap","Proxy","Reflect","JSON","Promise","Float64Array","Int16Array","Int32Array","Int8Array","Uint16Array","Uint32Array","Float32Array","Array","Uint8Array","Uint8ClampedArray","ArrayBuffer","BigInt64Array","BigUint64Array","BigInt"],o=["EvalError","InternalError","RangeError","ReferenceError","SyntaxError","TypeError","URIError"],s=["setInterval","setTimeout","clearInterval","clearTimeout","require","exports","eval","isFinite","isNaN","parseFloat","parseInt","decodeURI","decodeURIComponent","encodeURI","encodeURIComponent","escape","unescape"],a=["arguments","this","super","console","window","document","localStorage","module","global"],l=[].concat(s,a,i,o);function c(e){return e?"string"===typeof e?e:e.source:null}function u(e){return p("(?=",e,")")}function p(...e){const t=e.map((e=>c(e))).join("");return t}function f(e){const i=(e,{after:t})=>{const n="",end:""},a={begin:/<[A-Za-z0-9\\._:-]+/,end:/\/[A-Za-z0-9\\._:-]+>|\/>/,isTrulyOpeningTag:(e,t)=>{const n=e[0].length+e.index,r=e.input[n];"<"!==r?">"===r&&(i(e,{after:n})||t.ignoreMatch()):t.ignoreMatch()}},c={$pattern:t,keyword:n,literal:r,built_in:l},f="[0-9](_?[0-9])*",d=`\\.(${f})`,h="0|[1-9](_?[0-9])*|0[0-7]*[89][0-9]*",g={className:"number",variants:[{begin:`(\\b(${h})((${d})|\\.)?|(${d}))[eE][+-]?(${f})\\b`},{begin:`\\b(${h})\\b((${d})\\b|\\.)?|(${d})\\b`},{begin:"\\b(0|[1-9](_?[0-9])*)n\\b"},{begin:"\\b0[xX][0-9a-fA-F](_?[0-9a-fA-F])*n?\\b"},{begin:"\\b0[bB][0-1](_?[0-1])*n?\\b"},{begin:"\\b0[oO][0-7](_?[0-7])*n?\\b"},{begin:"\\b0[0-7]+n?\\b"}],relevance:0},v={className:"subst",begin:"\\$\\{",end:"\\}",keywords:c,contains:[]},m={begin:"html`",end:"",starts:{end:"`",returnEnd:!1,contains:[e.BACKSLASH_ESCAPE,v],subLanguage:"xml"}},b={begin:"css`",end:"",starts:{end:"`",returnEnd:!1,contains:[e.BACKSLASH_ESCAPE,v],subLanguage:"css"}},y={className:"string",begin:"`",end:"`",contains:[e.BACKSLASH_ESCAPE,v]},x=e.COMMENT(/\/\*\*(?!\/)/,"\\*/",{relevance:0,contains:[{className:"doctag",begin:"@[A-Za-z]+",contains:[{className:"type",begin:"\\{",end:"\\}",relevance:0},{className:"variable",begin:o+"(?=\\s*(-)|$)",endsParent:!0,relevance:0},{begin:/(?=[^\n])\s/,relevance:0}]}]}),w={className:"comment",variants:[x,e.C_BLOCK_COMMENT_MODE,e.C_LINE_COMMENT_MODE]},k=[e.APOS_STRING_MODE,e.QUOTE_STRING_MODE,m,b,y,g,e.REGEXP_MODE];v.contains=k.concat({begin:/\{/,end:/\}/,keywords:c,contains:["self"].concat(k)});const E=[].concat(w,v.contains),_=E.concat([{begin:/\(/,end:/\)/,keywords:c,contains:["self"].concat(E)}]),S={className:"params",begin:/\(/,end:/\)/,excludeBegin:!0,excludeEnd:!0,keywords:c,contains:_};return{name:"Javascript",aliases:["js","jsx","mjs","cjs"],keywords:c,exports:{PARAMS_CONTAINS:_},illegal:/#(?![$_A-z])/,contains:[e.SHEBANG({label:"shebang",binary:"node",relevance:5}),{label:"use_strict",className:"meta",relevance:10,begin:/^\s*['"]use (strict|asm)['"]/},e.APOS_STRING_MODE,e.QUOTE_STRING_MODE,m,b,y,w,g,{begin:p(/[{,\n]\s*/,u(p(/(((\/\/.*$)|(\/\*(\*[^/]|[^*])*\*\/))\s*)*/,o+"\\s*:"))),relevance:0,contains:[{className:"attr",begin:o+u("\\s*:"),relevance:0}]},{begin:"("+e.RE_STARTERS_RE+"|\\b(case|return|throw)\\b)\\s*",keywords:"return throw case",contains:[w,e.REGEXP_MODE,{className:"function",begin:"(\\([^()]*(\\([^()]*(\\([^()]*\\)[^()]*)*\\)[^()]*)*\\)|"+e.UNDERSCORE_IDENT_RE+")\\s*=>",returnBegin:!0,end:"\\s*=>",contains:[{className:"params",variants:[{begin:e.UNDERSCORE_IDENT_RE,relevance:0},{className:null,begin:/\(\s*\)/,skip:!0},{begin:/\(/,end:/\)/,excludeBegin:!0,excludeEnd:!0,keywords:c,contains:_}]}]},{begin:/,/,relevance:0},{className:"",begin:/\s/,end:/\s*/,skip:!0},{variants:[{begin:s.begin,end:s.end},{begin:a.begin,"on:begin":a.isTrulyOpeningTag,end:a.end}],subLanguage:"xml",contains:[{begin:a.begin,end:a.end,skip:!0,contains:["self"]}]}],relevance:0},{className:"function",beginKeywords:"function",end:/[{;]/,excludeEnd:!0,keywords:c,contains:["self",e.inherit(e.TITLE_MODE,{begin:o}),S],illegal:/%/},{beginKeywords:"while if switch catch for"},{className:"function",begin:e.UNDERSCORE_IDENT_RE+"\\([^()]*(\\([^()]*(\\([^()]*\\)[^()]*)*\\)[^()]*)*\\)\\s*\\{",returnBegin:!0,contains:[S,e.inherit(e.TITLE_MODE,{begin:o})]},{variants:[{begin:"\\."+o},{begin:"\\$"+o}],relevance:0},{className:"class",beginKeywords:"class",end:/[{;=]/,excludeEnd:!0,illegal:/[:"[\]]/,contains:[{beginKeywords:"extends"},e.UNDERSCORE_TITLE_MODE]},{begin:/\b(?=constructor)/,end:/[{;]/,excludeEnd:!0,contains:[e.inherit(e.TITLE_MODE,{begin:o}),"self",S]},{begin:"(get|set)\\s+(?="+o+"\\()",end:/\{/,keywords:"get set",contains:[e.inherit(e.TITLE_MODE,{begin:o}),{begin:/\(\)/},S]},{begin:/\$[(.]/}]}}e.exports=f},5772:e=>{function t(e){const t={literal:"true false null"},n=[e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE],r=[e.QUOTE_STRING_MODE,e.C_NUMBER_MODE],i={end:",",endsWithParent:!0,excludeEnd:!0,contains:r,keywords:t},o={begin:/\{/,end:/\}/,contains:[{className:"attr",begin:/"/,end:/"/,contains:[e.BACKSLASH_ESCAPE],illegal:"\\n"},e.inherit(i,{begin:/:/})].concat(n),illegal:"\\S"},s={begin:"\\[",end:"\\]",contains:[e.inherit(i)],illegal:"\\S"};return r.push(o,s),n.forEach((function(e){r.push(e)})),{name:"JSON",contains:r,keywords:t,illegal:"\\S"}}e.exports=t},7192:e=>{function t(e){return e?"string"===typeof e?e:e.source:null}function n(e){return r("(?=",e,")")}function r(...e){const n=e.map((e=>t(e))).join("");return n}function i(e){const t=["and","as","assert","async","await","break","class","continue","def","del","elif","else","except","finally","for","from","global","if","import","in","is","lambda","nonlocal|10","not","or","pass","raise","return","try","while","with","yield"],r=["__import__","abs","all","any","ascii","bin","bool","breakpoint","bytearray","bytes","callable","chr","classmethod","compile","complex","delattr","dict","dir","divmod","enumerate","eval","exec","filter","float","format","frozenset","getattr","globals","hasattr","hash","help","hex","id","input","int","isinstance","issubclass","iter","len","list","locals","map","max","memoryview","min","next","object","oct","open","ord","pow","print","property","range","repr","reversed","round","set","setattr","slice","sorted","staticmethod","str","sum","super","tuple","type","vars","zip"],i=["__debug__","Ellipsis","False","None","NotImplemented","True"],o=["Any","Callable","Coroutine","Dict","List","Literal","Generic","Optional","Sequence","Set","Tuple","Type","Union"],s={$pattern:/[A-Za-z]\w+|__\w+__/,keyword:t,built_in:r,literal:i,type:o},a={className:"meta",begin:/^(>>>|\.\.\.) /},l={className:"subst",begin:/\{/,end:/\}/,keywords:s,illegal:/#/},c={begin:/\{\{/,relevance:0},u={className:"string",contains:[e.BACKSLASH_ESCAPE],variants:[{begin:/([uU]|[bB]|[rR]|[bB][rR]|[rR][bB])?'''/,end:/'''/,contains:[e.BACKSLASH_ESCAPE,a],relevance:10},{begin:/([uU]|[bB]|[rR]|[bB][rR]|[rR][bB])?"""/,end:/"""/,contains:[e.BACKSLASH_ESCAPE,a],relevance:10},{begin:/([fF][rR]|[rR][fF]|[fF])'''/,end:/'''/,contains:[e.BACKSLASH_ESCAPE,a,c,l]},{begin:/([fF][rR]|[rR][fF]|[fF])"""/,end:/"""/,contains:[e.BACKSLASH_ESCAPE,a,c,l]},{begin:/([uU]|[rR])'/,end:/'/,relevance:10},{begin:/([uU]|[rR])"/,end:/"/,relevance:10},{begin:/([bB]|[bB][rR]|[rR][bB])'/,end:/'/},{begin:/([bB]|[bB][rR]|[rR][bB])"/,end:/"/},{begin:/([fF][rR]|[rR][fF]|[fF])'/,end:/'/,contains:[e.BACKSLASH_ESCAPE,c,l]},{begin:/([fF][rR]|[rR][fF]|[fF])"/,end:/"/,contains:[e.BACKSLASH_ESCAPE,c,l]},e.APOS_STRING_MODE,e.QUOTE_STRING_MODE]},p="[0-9](_?[0-9])*",f=`(\\b(${p}))?\\.(${p})|\\b(${p})\\.`,d={className:"number",relevance:0,variants:[{begin:`(\\b(${p})|(${f}))[eE][+-]?(${p})[jJ]?\\b`},{begin:`(${f})[jJ]?`},{begin:"\\b([1-9](_?[0-9])*|0+(_?0)*)[lLjJ]?\\b"},{begin:"\\b0[bB](_?[01])+[lL]?\\b"},{begin:"\\b0[oO](_?[0-7])+[lL]?\\b"},{begin:"\\b0[xX](_?[0-9a-fA-F])+[lL]?\\b"},{begin:`\\b(${p})[jJ]\\b`}]},h={className:"comment",begin:n(/# type:/),end:/$/,keywords:s,contains:[{begin:/# type:/},{begin:/#/,end:/\b\B/,endsWithParent:!0}]},g={className:"params",variants:[{className:"",begin:/\(\s*\)/,skip:!0},{begin:/\(/,end:/\)/,excludeBegin:!0,excludeEnd:!0,keywords:s,contains:["self",a,d,u,e.HASH_COMMENT_MODE]}]};return l.contains=[u,d,a],{name:"Python",aliases:["py","gyp","ipython"],keywords:s,illegal:/(<\/|->|\?)|=>/,contains:[a,d,{begin:/\bself\b/},{beginKeywords:"if",relevance:0},u,h,e.HASH_COMMENT_MODE,{variants:[{className:"function",beginKeywords:"def"},{className:"class",beginKeywords:"class"}],end:/:/,illegal:/[${=;\n,]/,contains:[e.UNDERSCORE_TITLE_MODE,g,{begin:/->/,endsWithParent:!0,keywords:s}]},{className:"meta",begin:/^[\t ]*@/,end:/(?=#)|$/,contains:[d,g,u]}]}}e.exports=i},3588:(e,t,n)=>{var r=n(4711);r.__esModule&&(r=r.default),"string"===typeof r&&(r=[[e.id,r,""]]),r.locals&&(e.exports=r.locals);var i=n(9548).A;i("1d07f774",r,!0,{sourceMap:!1,shadowMode:!1})},2661:(e,t,n)=>{var r=n(9408);r.__esModule&&(r=r.default),"string"===typeof r&&(r=[[e.id,r,""]]),r.locals&&(e.exports=r.locals);var i=n(9548).A;i("1b95c162",r,!0,{sourceMap:!1,shadowMode:!1})},4575:(e,t,n)=>{var r=n(4823);r.__esModule&&(r=r.default),"string"===typeof r&&(r=[[e.id,r,""]]),r.locals&&(e.exports=r.locals);var i=n(9548).A;i("057dbfa5",r,!0,{sourceMap:!1,shadowMode:!1})},7282:(e,t,n)=>{var r=n(4429);r.__esModule&&(r=r.default),"string"===typeof r&&(r=[[e.id,r,""]]),r.locals&&(e.exports=r.locals);var i=n(9548).A;i("7b2cfd35",r,!0,{sourceMap:!1,shadowMode:!1})},2456:(e,t,n)=>{var r=n(3312);r.__esModule&&(r=r.default),"string"===typeof r&&(r=[[e.id,r,""]]),r.locals&&(e.exports=r.locals);var i=n(9548).A;i("05079345",r,!0,{sourceMap:!1,shadowMode:!1})},1889:(e,t,n)=>{var r=n(950);r.__esModule&&(r=r.default),"string"===typeof r&&(r=[[e.id,r,""]]),r.locals&&(e.exports=r.locals);var i=n(9548).A;i("b64df476",r,!0,{sourceMap:!1,shadowMode:!1})},4343:(e,t,n)=>{var r=n(6671);r.__esModule&&(r=r.default),"string"===typeof r&&(r=[[e.id,r,""]]),r.locals&&(e.exports=r.locals);var i=n(9548).A;i("c2f4c636",r,!0,{sourceMap:!1,shadowMode:!1})},9548:(e,t,n)=>{"use strict";function r(e,t){for(var n=[],r={},i=0;i
'+(n?i:kp(i,!0))+""+(n?i:kp(i,!0))+"\n${t}\n`}html({text:e}){return e}heading({tokens:e,depth:t}){return`
\n"}list(e){const t=e.ordered,n=e.start;let r="";for(let s=0;s
${this.parser.parseInline(e)}
\n`}table(e){let t="",n="";for(let i=0;i${kp(e,!0)}`}br(e){return""}del({tokens:e}){return`
An error occurred:
"+kp(n.message+"",!0)+"";return t?Promise.resolve(e):e}if(t)return Promise.reject(n);throw n}}}const Pp=new Mp;function Dp(e,t){return Pp.parse(e,t)}Dp.options=Dp.setOptions=function(e){return Pp.setOptions(e),Dp.defaults=Pp.defaults,_u(Dp.defaults),Dp},Dp.getDefaults=ku,Dp.defaults=Eu,Dp.use=function(...e){return Pp.use(...e),Dp.defaults=Pp.defaults,_u(Dp.defaults),Dp},Dp.walkTokens=function(e,t){return Pp.walkTokens(e,t)},Dp.parseInline=Pp.parseInline,Dp.Parser=Ip,Dp.parser=Ip.parse,Dp.Renderer=Np,Dp.TextRenderer=jp,Dp.Lexer=Cp,Dp.lexer=Cp.lex,Dp.Tokenizer=Rp,Dp.Hooks=Lp,Dp.parse=Dp;Dp.options,Dp.setOptions,Dp.use,Dp.walkTokens,Dp.parseInline,Ip.parse,Cp.lex;const{entries:Bp,setPrototypeOf:$p,isFrozen:Up,getPrototypeOf:zp,getOwnPropertyDescriptor:Fp}=Object;let{freeze:Hp,seal:qp,create:Wp}=Object,{apply:Vp,construct:Gp}="undefined"!==typeof Reflect&&Reflect;Hp||(Hp=function(e){return e}),qp||(qp=function(e){return e}),Vp||(Vp=function(e,t,n){return e.apply(t,n)}),Gp||(Gp=function(e,t){return new e(...t)});const Yp=af(Array.prototype.forEach),Kp=af(Array.prototype.pop),Xp=af(Array.prototype.push),Zp=af(String.prototype.toLowerCase),Jp=af(String.prototype.toString),Qp=af(String.prototype.match),ef=af(String.prototype.replace),tf=af(String.prototype.indexOf),nf=af(String.prototype.trim),rf=af(Object.prototype.hasOwnProperty),of=af(RegExp.prototype.test),sf=lf(TypeError);function af(e){return function(t){for(var n=arguments.length,r=new Array(n>1?n-1:0),i=1;i
+ {props.content}
+
+ }
+ },
+ });
+
+ return () => {
+ return
+ }
+ }
+}
\ No newline at end of file
diff --git a/lib/openapi-viewer/src/Dropdown.scss b/lib/openapi-viewer/src/Dropdown.scss
new file mode 100644
index 0000000000..612452fe46
--- /dev/null
+++ b/lib/openapi-viewer/src/Dropdown.scss
@@ -0,0 +1,3 @@
+.dropdown-button {
+ cursor: pointer;
+}
\ No newline at end of file
diff --git a/lib/openapi-viewer/src/Error.jsx b/lib/openapi-viewer/src/Error.jsx
new file mode 100644
index 0000000000..44ea02fd1c
--- /dev/null
+++ b/lib/openapi-viewer/src/Error.jsx
@@ -0,0 +1,5 @@
+/** Vue component to render documentation for an error code */
+export const Error = ({ code, response }) =>
+ {code}
+
\ No newline at end of file
diff --git a/lib/openapi-viewer/src/Examples.jsx b/lib/openapi-viewer/src/Examples.jsx
new file mode 100644
index 0000000000..6a0c7b1a65
--- /dev/null
+++ b/lib/openapi-viewer/src/Examples.jsx
@@ -0,0 +1,127 @@
+import { reactive } from "vue"
+import { Code } from "./Code"
+import { Dropdown } from "./Dropdown"
+import { TryIt } from "./TryIt"
+import './Examples.scss'
+import { Chevron } from "./utils"
+import { data, resolveSchema } from "./OpenAPIViewer"
+
+
+/** A Vue component to render sample requests and response payloads */
+export const Examples = {
+ props: ["endpoint", "schema"],
+ setup(props) {
+ const ui = reactive({ tab: "samples" })
+
+ const fullURL = (data.schema?.servers?.[0]?.url || "") + props.endpoint.path
+
+ let bodySchema = props.endpoint.requestBody?.content?.["application/json"]?.schema
+ if (bodySchema) bodySchema = resolveSchema(bodySchema)
+
+ let responseSchema = null
+ for (const code in props.endpoint.responses) {
+ const s = props.endpoint.responses[code]?.content?.["application/json"]?.schema
+ if (code < 400 && s) {
+ responseSchema = resolveSchema(s)
+ break;
+ }
+ }
+
+ return () => {
+ const { method, path } = props.endpoint
+ return {response?.description}
+
+
+ {ui.tab === "tryit" ?
+ }
+ }
+}
+
+/** Generate an example payload for the given endpoint's {type} and {properties} */
+export function generateExamplePayload({ type, properties } = {}) {
+ const sample = {}
+ for (const name in properties) {
+ const p = properties[name]
+ sample[name] = generateExampleValue(p, name)
+ }
+ return JSON.stringify(sample, null, 2)
+}
+
+/** Generate an example value for the given field {p} */
+export function generateExampleValue(p, name = "", stack = null) {
+ let v = null;
+
+ if (!p) return null;
+
+ if (p.$ref) {
+ if (stack === null) stack = {}
+ if (stack?.[p.$ref]) return {}
+ stack[p.$ref] = true
+ return generateExampleValue(resolveSchema(p.$ref), name, stack)
+ }
+
+ if (p.anyOf?.length > 0) {
+ for (const alt of p.anyOf) {
+ if (alt.type !== 'null') return generateExampleValue(alt, name, stack)
+ }
+ }
+
+ if (p.type === "integer") v = p.minimum || 0
+ else if (p.type === "number") v = (p.minimum || 0.0) + 0.0
+ else if (p.type === "string") {
+ if (name === "description") v = `This is a *description*`
+ else if (["uuid", "community_uuid"].includes(name)) v = crypto.randomUUID()
+ else if (name === "email") v = "johndoe@example.com"
+ else if (p.format === "uuid") v = crypto.randomUUID()
+ else if (p.format === "date-time") v = (new Date()).toISOString()
+ else if (p.format === "date") v = (new Date()).toDateString()
+ else if (p.default) v = p.default
+ else if (p.enum?.[0]) v = p.enum?.[0]
+ else v = `${name.toLowerCase().replace(/_/g, " ")}`
+ }
+ else if (p.type === "boolean") v = true
+ else if (p.type === "array") {
+ v = [generateExampleValue(p.items, name, stack)]
+ } else if (p.type === "object") {
+ if (p.properties === undefined) v = {}
+ else {
+ v = {}
+ for (const k in p.properties) {
+ v[k] = generateExampleValue(p.properties[k], k, stack)
+ }
+ }
+ }
+
+ // Fallbacks
+ if (v === null) {
+ if (p.schema?.type || p.schema?.anyOf) return generateExampleValue({ ...p.schema, ...p }, name, stack)
+ if (p.schema?.$ref) return generateExampleValue(resolveSchema(p.schema.$ref), name, stack)
+ else return null
+ }
+
+ return v
+}
\ No newline at end of file
diff --git a/lib/openapi-viewer/src/Examples.scss b/lib/openapi-viewer/src/Examples.scss
new file mode 100644
index 0000000000..f2bdd7d41b
--- /dev/null
+++ b/lib/openapi-viewer/src/Examples.scss
@@ -0,0 +1,156 @@
+#openapi-viewer .examples {
+ width: 500px;
+ margin-top: 96px;
+ margin-bottom: 56px;
+ margin-left: 36px;
+
+ >nav {
+ background: white;
+ overflow: hidden;
+ display: flex;
+ padding: 0;
+ border: none;
+ list-style-type: none;
+ user-select: none;
+
+ >* {
+ color: #2d2e83;
+ background: white;
+ border-top: 4px solid transparent;
+ opacity: 0.6;
+ cursor: pointer;
+ font-weight: bold;
+ margin: 0;
+ padding: 6px 16px;
+
+ &.active {
+ opacity: 1;
+ border-top: 4px solid #12005e;
+ background: #e2e2e9;
+ color: #12005e;
+ border-top-left-radius: 8px;
+ border-top-right-radius: 8px;
+ }
+ }
+
+
+ }
+
+
+ >div {
+ background: #e2e2e9;
+ border-radius: 20px;
+ border-top-left-radius: 0px;
+ border-top-right-radius: 0px;
+ padding: 16px;
+ }
+
+
+ .path {
+ background-color: rgb(17, 23, 26);
+ border-radius: 8px;
+ color: white;
+ display: flex;
+ align-items: center;
+ width: 100%;
+ padding: 10px;
+ overflow: hidden;
+
+ .method {
+ height: 24px;
+ }
+
+ >div {
+ flex: 1;
+ text-align: left;
+ padding: 0px 4px;
+ padding-bottom: 4px;
+ white-space: normal;
+ }
+
+ svg {
+ float: right;
+ fill: white;
+ transform: rotate(0deg);
+ }
+ }
+
+
+ .tippy-box .path {
+ color: black;
+ background: white;
+ box-shadow: rgba(0, 0, 0, 0.33) 0px 0px 6px;
+ width: 100%;
+ }
+
+ h3 {
+ color: #12005e;
+ font-weight: bold;
+ font-size: 14px;
+ padding: 12px 0px;
+ }
+
+
+ .code-examples {
+ margin-top: 24px;
+ font-size: 14px;
+
+ ul {
+ display: flex;
+ padding: 0;
+ list-style-type: none;
+ margin: 0;
+
+ li {
+ cursor: pointer;
+ padding: 2px 12px;
+ border-top: 4px solid transparent;
+ margin: 0px;
+ background: transparent;
+ border-top-left-radius: 8px;
+ border-top-right-radius: 8px;
+ font-weight: bold;
+ color: #8182b5;
+ transition: all 90ms ease-in-out;
+
+ &:hover {
+ color: #12005e;
+ }
+
+ &.selected {
+ border-top-color: #5d4ff2;
+ background: #11171a;
+ color: white;
+ }
+ }
+ }
+
+ }
+
+ pre {
+ background: #11171a !important;
+ position: static;
+ min-width: 100%;
+ width: 100%;
+ display: block;
+ border-radius: 8px;
+ color: white;
+ font-family: monospace;
+ font-size: 11px;
+ max-height: 40vh;
+ overflow: auto;
+ border-top-left-radius: 0px;
+ margin: 0;
+ white-space: break-spaces;
+ padding: 0px;
+ }
+
+ .samples {
+ code {
+ background: #11171a !important;
+ font-family: Consolas, Söhne Mono, Monaco, Andale Mono, Ubuntu Mono, monospace !important;
+ color: white !important;
+ font-size: 14px;
+ }
+ }
+}
\ No newline at end of file
diff --git a/lib/openapi-viewer/src/Filter.jsx b/lib/openapi-viewer/src/Filter.jsx
new file mode 100644
index 0000000000..acd8b70838
--- /dev/null
+++ b/lib/openapi-viewer/src/Filter.jsx
@@ -0,0 +1,43 @@
+import { reactive, ref, watchEffect } from "vue";
+import { useTippy } from "vue-tippy";
+
+/** A ComboxBox dropdown button with multiselect options */
+export const Filter = {
+ props: ["items", "selection", "onClick", "separator", "placeholder"],
+ setup(props, { slots }) {
+ const target = ref(null)
+ const { show } = useTippy(target, {
+ trigger: "manual",
+ interactive: true,
+ placement: "bottom-start",
+ offset: [0, 4],
+ content: {
+ setup() {
+ const data = reactive({ search: "", items: [...props.items || []] })
+ watchEffect(() => {
+ data.items = props.items?.filter(x => !data.search?.length || x.toLowerCase().includes(data.search.toLowerCase()))
+ })
+
+ return () =>
+
+ {method}
+
}
+ {path}
+ {Chevron}
+ }
+ content={fullURL}
+ />
+
+ {!!bodySchema &&
+ <>
+ Request samples
+Response samples
+
+ data.search = target.value} />
+
+ }
+ },
+ });
+
+ return () => {
+ return -
+ {data.items?.map(x =>
- props.onClick(x)}> + + )} +
+
+
+ {props.selection?.length > 0 && <>{props.selection?.length} selected}
+
+ }
+ }
+}
\ No newline at end of file
diff --git a/lib/openapi-viewer/src/Markdown.jsx b/lib/openapi-viewer/src/Markdown.jsx
new file mode 100644
index 0000000000..83de2ad0ce
--- /dev/null
+++ b/lib/openapi-viewer/src/Markdown.jsx
@@ -0,0 +1,5 @@
+import { marked } from "marked"
+import DOMPurify from "dompurify"
+
+/** A Vue component to render (sanitized) markdown descriptions */
+export const Markdown = ({ src }) =>
diff --git a/lib/openapi-viewer/src/OpenAPIViewer.jsx b/lib/openapi-viewer/src/OpenAPIViewer.jsx
new file mode 100644
index 0000000000..20ac2840dd
--- /dev/null
+++ b/lib/openapi-viewer/src/OpenAPIViewer.jsx
@@ -0,0 +1,345 @@
+import { Teleport, capitalize, createApp, reactive } from "vue";
+import { fetch_and_merge_openapi_schemas } from "./openapi/openapi"
+import { Examples } from "./Examples";
+import { tagEncode, Chevron, debounce } from "./utils"
+import { Markdown } from "./Markdown"
+import { Parameters } from "./Parameters"
+import { Response } from "./Response"
+import { Error } from "./Error"
+import { Filter } from "./Filter"
+import hljs from 'highlight.js/lib/core';
+import javascript from 'highlight.js/lib/languages/javascript';
+import python from 'highlight.js/lib/languages/python';
+import bash from 'highlight.js/lib/languages/bash';
+import json from 'highlight.js/lib/languages/json';
+import hljsVuePlugin from "@highlightjs/vue-plugin";
+import 'highlight.js/styles/a11y-dark.css'
+import { toRaw } from "vue";
+
+hljs.registerLanguage('bash', bash);
+hljs.registerLanguage('javascript', javascript);
+hljs.registerLanguage('python', python);
+hljs.registerLanguage('json', json);
+
+import "./style.scss";
+import './OpenAPIViewer.scss'
+import { watch } from "@vue/reactivity";
+
+/** Holds all reactive rendering context */
+export const data = reactive({
+ openapi_urls: [],
+ region: (new URLSearchParams(location.search).get("region") || "fra1").toLowerCase(),
+ api_key: "",
+ selectedTags: [],
+ loading: true,
+ search: "",
+})
+
+export const OpenAPIViewer = {
+
+ /** Gather all openapi.json/swagger.json manifests from {urls} and render it OpenAPIViewer Vue component */
+ async init({ title, urls, menu, regions }) {
+ const hash = location.hash
+ data.title = title
+
+ // Mount Vue component
+ const app = createApp(OpenAPIViewer);
+ app.use(hljsVuePlugin)
+ data.quickStart = document.querySelector("main article")
+ const container = document.createElement("article")
+ container.classList.add("md-content__inner")
+ container.classList.add("md-typeset")
+ container.id = 'openapi'
+ data.quickStart.parentElement.appendChild(container)
+ app.mount(container);
+
+ const started_at = new Date()
+ data.menu = menu;
+ data.regions = regions;
+
+ // Replace URLs with the selected region's URLs
+ if (data.region !== "fra1") {
+ urls = urls.map((url) =>
+ url.replace("https://app.sekoia.io/", `https://app.${data.region}.sekoia.io/`)
+ );
+ }
+ data.openapi_urls = urls;
+
+ // Retrieve and merge the OpenAPI 3.1 schemas
+ data.schema = await fetch_and_merge_openapi_schemas(urls)
+ data.schema["x-tagGroups"] = menu;
+
+ if (data.region !== "fra1")
+ data.schema.servers[0].url = `https://app.${data.region}.sekoia.io/api`;
+
+ // Collect menu tags and filter tags
+ function update() {
+ console.log(data.search, data.selectedTags)
+ data.loading = true
+ const selectedTags = new Set(data.selectedTags)
+ data.endpoints_by_tag = {}
+ data.tags = new Set()
+ for (const tagGroup of menu) {
+ for (const tag of tagGroup.tags) data.endpoints_by_tag[tag] = []
+ }
+
+ Object.entries(data.schema.paths).forEach(([path, endpoints]) => {
+ Object.entries(endpoints).forEach(([method, endpoint]) => {
+ if (method === "parameters") return;
+
+ if (endpoint.tags.length >= 2) {
+ for (const tag of endpoint.tags) {
+ if (!data.endpoints_by_tag[tag]) data.tags.add(tag)
+ }
+ }
+
+ // Search filtering
+ if (data.search) {
+ if (!endpoint.summary?.toLowerCase()?.includes(data.search)
+ && !endpoint.description?.toLowerCase()?.includes(data.search)
+ && !endpoint.title?.toLowerCase()?.includes(data.search)
+ && !endpoint.name?.toLowerCase()?.includes(data.search)
+ && !endpoint.path?.toLowerCase()?.includes(data.search))
+ return;
+ }
+
+ // Tag filtering
+ if (selectedTags.size > 0) {
+ if (!endpoint.tags?.length > 0 || selectedTags.isDisjointFrom(new Set(endpoint.tags)))
+ return;
+ }
+
+
+ for (const tag of endpoint.tags) {
+ if (data.endpoints_by_tag[tag]) data.endpoints_by_tag[tag].push({ ...endpoint, path, method })
+ }
+ })
+ })
+
+ data.tags = Array.from(data.tags).sort()
+ setTimeout(() => data.loading = false, 10)
+ }
+ OpenAPIViewer.updateAsap = debounce(update, 500)
+ watch(() => data.search, () => { data.loading = true; setImmediate(OpenAPIViewer.updateAsap) })
+ update()
+
+ /** Called when the window is scrolled to sync the selected menu item */
+ function updateScroll() {
+ let el = document.elementFromPoint(window.innerWidth / 2, 150)
+ while (!el.id && el.parentElement) el = el.parentElement
+ const [_, tag, ep] = el.id.split("/")
+ if (tag) {
+ data.curTag = tag
+ data.curEp = el.id
+ data.curTagGroup = data.menu?.find(tg => tg.tags?.includes(tag))?.name
+ const hash = "#" + el.id
+ if (hash !== location.hash) history.replaceState(null, '', window.location.href.split('#')[0] + hash)
+ setImmediate(() => {
+ document.querySelectorAll("#openapi-viewer .menu li.accordion").forEach(e => {
+ const ul = e.querySelector("&>ul")
+ if (e.classList.contains("active")) ul.style.maxHeight = `${ul.children[ul.children.length - 1].getBoundingClientRect().bottom - ul.getBoundingClientRect().top}px`
+ else ul.style.maxHeight = "0px"
+ })
+ })
+ }
+ }
+
+ // Called after the whole API doc's DOM has been rendered
+ function afterRender() {
+ // Scroll to the hash passed in the URL (after full rendering of the API doc)
+ location.hash = hash
+ const el = document.getElementById(hash.substring(1))
+ if (el) window.scrollTo({
+ top: document.getElementById(hash.substring(1)).getBoundingClientRect().top + window.scrollY,
+ behavior: 'smooth'
+ });
+ data.loading = false;
+ console.log("Doc rendered in", (new Date() - started_at) + "ms")
+
+ // Register scroll listener
+ setTimeout(() => {
+ updateScroll()
+ document.addEventListener("scroll", updateScroll)
+ }, 500)
+ }
+
+ setTimeout(afterRender, 50)
+ },
+
+ setup(props) {
+ // Scroll to top before filling the doc's DOM
+ setImmediate(() => window.scrollTo({ top: 0, behavior: "instant" }))
+
+ /** Toggles a tag filter */
+ const toggleTag = (t) => {
+ if (data.selectedTags.includes(t)) data.selectedTags = data.selectedTags.filter(tag => tag !== t)
+ else data.selectedTags.push(t)
+ OpenAPIViewer.updateAsap()
+ }
+
+ return () => {
+ return <>
+ {data.loading &&
+
+
+
+
+
+
+ }
+ },
+
+ directives: {
+ /** v-embed directive to embed a extraneous DOM component (used for quickstart) */
+ embed: (el, { value }) => value && el.appendChild(value),
+ }
+
+}
+
+/** Component that renders a single API endpoint */
+const Endpoint = (id, endpoint, tag) => {
+ // Extract permissions from description text
+ let description = endpoint.description
+ const permissions = description?.match(/The following permissions are required:\n(\s+-[^\n]+)+/)?.slice(1).map(p => {
+ const [_, name, uuid, description] = p.match(/\*\*([^\*]+)\*\*.*\`([^\`]+)\`\):\s+(.*)/) || []
+ return { name, uuid, description }
+ })
+ description = description?.replace(/The following permissions are required:\n(\s+-[^\n]+)+/, "")
+ const responses = Object.entries(endpoint.responses || {}).filter(([code]) => code < 400)
+ const errors = Object.entries(endpoint.responses || {}).filter(([code]) => code >= 400)
+ return <>
+
+
+
+
+
+ console.log(toRaw(endpoint))}>
+ {permissions?.map(({ name, uuid, description }) =>
+ }
+
+
+
+ + {endpoint.method} + {endpoint.summary} + +
+ + {endpoint.tags?.length > 1 && } + +Required permissions
+| {name} | +{uuid} | +{description} | +
Parameters
+Responses
+ {responses?.map(([code, response]) =>Error codes
+
+ {errors?.map(([code, response]) =>
+ }
+
+
+
+
+ + + +} + +/** Resolve a $ref or a subschema inside the data.schema */ +export function resolveSchema(schema) { + if (!schema) return {}; + if (schema?.properties) return schema + if (schema.schema) return resolveSchema(schema.schema) + if (schema.$ref) return resolveSchema(schema.$ref) + if (typeof (schema) !== "string") return {}; + if (!schema?.startsWith("#/")) return {}; + let el = data.schema + schema.split("/").slice(1).forEach(part => el = el?.[part]) + return el || {} +} + + +window.OpenAPIViewer = OpenAPIViewer diff --git a/lib/openapi-viewer/src/OpenAPIViewer.scss b/lib/openapi-viewer/src/OpenAPIViewer.scss new file mode 100644 index 0000000000..669302aa74 --- /dev/null +++ b/lib/openapi-viewer/src/OpenAPIViewer.scss @@ -0,0 +1,479 @@ +#openapi-viewer { + display: block; + width: 100%; + max-width: 100%; + + >.menu { + width: 500px; + background-color: white; + position: sticky; + top: 100px; + padding: 0px 16px; + height: 100vh; + user-select: none; + box-sizing: border-box; + float: left; + } + + >.content { + display: block; + position: relative; + overflow-x: auto; + + >* { + width: calc(100% - 24px); + } + + a.empty { + display: none; + } + } + + h1 { + margin-bottom: -20px; + } + + h2, + h3, + h4 { + position: relative; + + .alink { + width: 21px; + height: 21px; + background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjUxMiIgaGVpZ2h0PSI1MTIiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cGF0aCBmaWxsPSIjMDEwMTAxIiBkPSJNNDU5LjcgMjMzLjRsLTkwLjUgOTAuNWMtNTAgNTAtMTMxIDUwLTE4MSAwIC03LjktNy44LTE0LTE2LjctMTkuNC0yNS44bDQyLjEtNDIuMWMyLTIgNC41LTMuMiA2LjgtNC41IDIuOSA5LjkgOCAxOS4zIDE1LjggMjcuMiAyNSAyNSA2NS42IDI0LjkgOTAuNSAwbDkwLjUtOTAuNWMyNS0yNSAyNS02NS42IDAtOTAuNSAtMjQuOS0yNS02NS41LTI1LTkwLjUgMGwtMzIuMiAzMi4yYy0yNi4xLTEwLjItNTQuMi0xMi45LTgxLjYtOC45bDY4LjYtNjguNmM1MC01MCAxMzEtNTAgMTgxIDBDNTA5LjYgMTAyLjMgNTA5LjYgMTgzLjQgNDU5LjcgMjMzLjR6TTIyMC4zIDM4Mi4ybC0zMi4yIDMyLjJjLTI1IDI0LjktNjUuNiAyNC45LTkwLjUgMCAtMjUtMjUtMjUtNjUuNiAwLTkwLjVsOTAuNS05MC41YzI1LTI1IDY1LjUtMjUgOTAuNSAwIDcuOCA3LjggMTIuOSAxNy4yIDE1LjggMjcuMSAyLjQtMS40IDQuOC0yLjUgNi44LTQuNWw0Mi4xLTQyYy01LjQtOS4yLTExLjYtMTgtMTkuNC0yNS44IC01MC01MC0xMzEtNTAtMTgxIDBsLTkwLjUgOTAuNWMtNTAgNTAtNTAgMTMxIDAgMTgxIDUwIDUwIDEzMSA1MCAxODEgMGw2OC42LTY4LjZDMjc0LjYgMzk1LjEgMjQ2LjQgMzkyLjMgMjIwLjMgMzgyLjJ6Ii8+PC9zdmc+Cg==); + background-size: contain; + opacity: 0.3; + display: none; + margin-left: 12px; + } + + &:hover .alink { + display: inline-block; + } + } + + h1 { + font-size: 46px; + } + + h2 { + margin: 0; + padding-top: 86px; + font-weight: bold; + font-size: 36px; + color: #12005e; + + &::before { + top: 100px; + } + } + + h3 { + margin: 0; + padding-top: 48px; + font-weight: bold; + font-size: 30px; + padding-bottom: 0px; + + &::before { + top: 60px; + } + } + + h4 { + margin: 0; + font-size: 26px; + color: #12005e; + padding-bottom: 12px; + padding-top: 126px; + + &::before { + top: 12px; + } + } + + h5 { + margin: 0; + padding-top: 16px; + padding-bottom: 4px; + color: #8988ae; + } + + h6 { + margin: 0; + padding-top: 16px; + padding-bottom: 2px; + } + + hr { + margin: 0px 20vw; + margin-right: 35vw; + width: auto !important; + margin-top: 56px; + border-bottom-width: 2px; + margin-bottom: 0; + } + + + .menu { + li.empty { + display: none; + } + + .loader { + display: flex; + align-items: center; + justify-content: center; + + color: #12005e; + + >* { + display: inline-block; + margin: 12px; + } + } + + ul { + &.loading { + opacity: 0.5; + } + + >li { + ul { + >li { + ul { + margin-left: -8px; + overflow-y: hidden; + transition: max-height 125ms ease-in-out; + } + + &.active { + a { + svg { + transform: none; + } + } + + li { + &.active { + a { + font-weight: bold !important; + } + } + } + } + + &:not(.active) { + ul { + max-height: 0px !important; + } + } + } + } + } + } + } + + .endpoint { + display: flex; + align-items: flex-start; + overflow: hidden; + width: 100%; + box-sizing: border-box; + + >.content { + flex: 1; + } + + >.right {} + + .tags { + padding: 4px 0px; + + label { + margin: 0; + padding-top: 16px; + padding-bottom: 4px; + color: #8988ae; + text-transform: uppercase; + font-weight: bold; + font-size: 12px; + margin-right: 12px; + } + + .tag { + display: inline-block; + color: #ffffff; + background: #11171a; + border-radius: 4px; + padding: 2px 8px; + font-weight: bold; + font-size: 12px; + margin: 2px 4px; + } + } + } + + .method { + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 2px; + padding: 1px 6px; + color: white; + white-space: nowrap; + text-transform: uppercase; + font-size: 11px; + font-weight: bold; + margin: 3px 8px; + min-width: 40px; + text-align: center; + height: 20px; + top: -2px; + position: relative; + + &.post { + background-color: rgb(24, 111, 175); + } + + &.patch { + background-color: rgb(191, 88, 29); + } + + &.put { + background-color: rgb(149, 80, 124); + } + + &.delete { + background-color: rgb(204, 51, 51); + } + + &.get { + background-color: rgb(47, 129, 50); + } + } + + h4 .method { + font-size: 18px; + height: auto; + padding: 2px 16px; + transform: translateY(-2px); + margin-right: 16px; + } + + table { + border: none; + font-size: 80%; + width: calc(100% - 16px); + scrollbar-width: thin; + scrollbar-color: white white; + + + &:hover { + scrollbar-color: #ddd white; + } + + tr { + border: none; + + &:not(:last-of-type)>td { + border-bottom: 1px solid #eee; + } + + &:hover { + background: #eee4; + } + + th { + padding: 6px 36px; + padding-left: 6px; + border-bottom: 1px solid #eee; + color: #12005e; + font-weight: normal; + white-space: nowrap; + text-align: left; + } + + td { + border: none; + padding: 6px 36px; + padding-left: 6px; + + &.name { + font-weight: bold; + white-space: nowrap; + + .nav-chevron { + display: inline-block; + float: none; + margin-right: 4px; + position: relative; + top: -2px; + } + } + + + + } + + &.expandable { + cursor: pointer; + } + + &.expanded { + .nav-chevron { + display: inline-block; + float: none; + margin-right: 4px; + position: relative; + top: -2px; + transform: none; + } + } + } + + .optional { + opacity: 0.5; + } + } + + .uuid { + font-family: monospace; + white-space: nowrap; + font-size: 13px; + opacity: 0.8; + color: #1b18cd; + } + + .identifier { + font-family: monospace; + } + + tr.param { + td:not(.description) { + white-space: nowrap; + } + + td.constraints { + >* { + background: #e6e6f1; + color: #12005e; + border-radius: 4px; + padding: 2px 4px; + font-weight: bold; + font-size: 11px; + margin: 2px 4px; + } + } + + } + + .required { + color: rgb(212, 31, 28); + } + + .type { + color: #1b18cd; + } + + .response { + &.ok>div.with-model { + width: calc(100% - 16px); + margin: 8px 4px; + background: rgba(29, 129, 39, 0.07); + display: flex; + align-items: center; + color: rgb(29, 129, 39); + border-radius: 4px; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + overflow: hidden; + margin-bottom: 0px; + font-size: 14px; + font-weight: bold; + border-bottom: 2px solid rgb(29, 129, 39); + + .status-code-ok { + background: rgb(29, 129, 39); + color: white; + padding: 2px 8px; + font-weight: bold; + border-radius: 4px; + margin: 8px; + margin-right: 8px; + font-size: 12px; + } + + .mime { + margin: 1px 16px; + font-style: italic; + font-weight: normal; + } + + .description { + flex: 1; + } + } + + &.ok>div:not(.with-model) { + display: flex; + align-items: center; + + .status-code-ok { + background: rgb(29, 129, 39); + color: white; + padding: 2px 8px; + font-weight: bold; + border-radius: 4px; + margin: 8px; + margin-right: 8px; + font-size: 12px; + } + + color: rgb(29, 129, 39); + } + + .optional { + display: none; + } + + &.error { + display: flex; + align-items: center; + + .status-code { + background: rgb(212, 31, 28); + color: white; + padding: 2px 8px; + font-weight: bold; + border-radius: 4px; + margin: 8px; + margin-right: 8px; + font-size: 12px; + } + + color: rgb(212, 31, 28); + } + } + + .ui-spinner { + width: 38px; + height: 38px; + border: 5px solid #d8d8e922; + border-bottom-color: #5d4ff2; + border-radius: 50%; + display: inline-block; + box-sizing: border-box; + animation: spinner-rotate 1s linear infinite; + left: 50%; + top: 40vh; + position: static; + margin: 0px 206px; + } + + .response-model { + margin-left: 4px; + } + +} \ No newline at end of file diff --git a/lib/openapi-viewer/src/Parameters.jsx b/lib/openapi-viewer/src/Parameters.jsx new file mode 100644 index 0000000000..3c9d44c474 --- /dev/null +++ b/lib/openapi-viewer/src/Parameters.jsx @@ -0,0 +1,142 @@ +import { Chevron } from "./utils" +import { resolveSchema } from "./OpenAPIViewer" + +/** A Vue component to render an API endpoint's parameters */ +export const Parameters = { + props: ["endpoint"], + setup(props) { + return () => { + const { parameters, requestBody } = props.endpoint + if (!parameters?.length > 0 && !requestBody) return
No parameters
+
+ const pathParameters = parameters.filter(p => p.in === "path")
+ const queryParameters = parameters.filter(p => p.in === "query")
+ const bodyParameters = parameters.filter(p => p.in === "body")
+
+ // Incorporate requestBody to body parameters list
+ let bodySchema = requestBody?.content?.["application/json"]?.schema
+ if (bodySchema) bodySchema = resolveSchema(bodySchema)
+ if (bodySchema?.properties) bodyParameters.push(...Object.entries(bodySchema.properties).map(([name, p]) => ({ ...p, name })))
+
+ return
+ {pathParameters?.length > 0 && <>
+
+ }
+ }
+}
+
+/** Check if a OpenAPI property has constraints set */
+export function hasConstraints(p) {
+ if (p.minimum !== undefined) return true
+ if (p.maximum !== undefined) return true
+ if (p.minLength !== undefined) return true
+ if (p.maxLength !== undefined) return true
+ if (p.enum?.[0]) return true
+ return false
+}
+
+/** Vue component to render a table of OpenAPI properties */
+export const Properties = (p) => Path parameters
+ {Properties(pathParameters)} + } + {queryParameters?.length > 0 && <> +Query parameters
+ {Properties(queryParameters)} + } + {bodyParameters?.length > 0 && <> +Body parameters
+ {Properties(bodyParameters)} + } +| Name | ++ | Type | +{p?.filter(p => hasConstraints(p))?.length > 0 && "Constraints"} | +{p?.filter(p => p.default !== undefined)?.length > 0 && "Default value"} | +{p?.filter(p => !!p.description) && "Description"} | +
|---|
+ {response?.content ? Object.entries(response?.content || {})?.map(([mime, schema]) => <>
+
+
+/** Vue component to render an OpenAPI response schema */
+export const ResponseModel = (schema) => {
+ const { properties = {}, required } = resolveSchema(schema)
+ if (!Object.entries(properties)?.length > 0) return null;
+ return
+ {code}
+
+ {ResponseModel(schema)}
+ ) :
+ (!!response.description && {response?.description}
+ {mime}
+
+ {code}
+
)
+ }
+
+{response?.description}
+ | Name | ++ | Type | +{Object.values(properties)?.filter(p => hasConstraints(p))?.length > 0 && "Constraints"} | +{Object.values(properties)?.filter(p => p.default !== undefined)?.length > 0 && "Default value"} | +{Object.values(properties)?.filter(p => !!p.description) && "Description"} | +
|---|
+
+ };
+ },
+};
+
+
+export const Field = ({ name, required }, payload) =>
+ {headerParams?.length > 0 && }
+ {pathParams?.length > 0 && }
+ {queryParams?.length > 0 && }
+ {bodyParams?.length > 0 && }
+
+
+ Headers
+ {headerParams.map(p => Field(p, payload))} +Path parameters
+ {pathParams.map(p => Field(p, payload))} +Query parameters
+ {queryParams.map(p => Field(p, payload))} +Body parameters
+ {bodyParams.map(p => Field(p, payload))} +
+
+ -
+
- ui.tab = "curl"} role="tab" aria-selected="true" aria-disabled="false">cURL +
- ui.tab = "python"} role="tab" aria-selected="false" aria-disabled="false">Python +
- ui.tab = "js"} role="tab" aria-selected="false" aria-disabled="false">Javascript +
+ {ui.tab === "curl" &&
+
+ {((ui.res && ui.status) || ui.busy) &&
+
}
+
+
+ Response
+ {ui.res && ui.status &&
+
+ payload[name] = target.value}
+ value={payload[name] || ""}
+ placeholder={required ? "required" : ""}
+ name={`sekoia-${name}`}
+ type={name === "API Key" ? "password" : "text"}
+ >
+
+
+
+function gather_params(endpoint) {
+ const params = [];
+ // Always prepend API Key field
+ params.push({ name: "API Key", in: "header", required: true });
+ // ... query params
+ params.push(...(endpoint.parameters || []));
+
+ // ... path params
+ for (const pathParam of endpoint.path.matchAll(/\{([^:\}]+)(:([^:\}]+))?\}/g)) {
+ if (!params.find((p) => p.name === pathParam[1] && p.in === "path")) {
+ params.push({
+ name: pathParam[1],
+ in: "path",
+ schema: { type: pathParam[3] || "any" },
+ });
+ }
+ }
+
+ // ... body params
+ let bodySchema = endpoint.requestBody?.content?.["application/json"]?.schema;
+ if (bodySchema?.["$ref"]) {
+ bodySchema = bodySchema?.["$ref"]?.replace(/^#\/components\/schemas\//, "");
+ const body = data.schema.components?.schemas?.[bodySchema]?.properties || {};
+ for (const k in body) {
+ params.push({ name: k, in: "body" });
+ }
+ } else {
+ const body = bodySchema?.properties || {};
+ for (const k in body) {
+ params.push({ name: k, in: "body" });
+ }
+ }
+
+ // Filter-out authentication fields
+ return params.filter(
+ (p) => !["authorization", "access_token_cookie"].includes(p.name)
+ );
+}
+
+// Generate a try-it query from entered {params} for the given {method}+{endpoint}
+function generate_query(
+ endpoint,
+ payload,
+ { inline_query_params = true } = {}
+) {
+ data.API_KEY = payload["API Key"]
+ const method = endpoint.method.toUpperCase();
+ let url = (data.schema.servers[0]?.url || "") + endpoint.path;
+ const params = gather_params(endpoint)
+ for (const p of params) p.value = payload[p.name]
+
+ const hasBodyParams = !!params?.find((p) => p.in === "body");
+ const bodyParams = params?.filter(
+ (p) => p.in === "body" && ![undefined, ""].includes(p.value)
+ );
+ let headers = { Authorization: "Bearer
-
-
-
-
-
-"""
-)
-
-TOKEN = re.compile(r"!!redoc(?: (?P
-
-
-