├── .browserslistrc ├── dist ├── favicon1.ico ├── favicon2.ico ├── fonts │ ├── element-icons.2fad952a.woff │ ├── element-icons.6f0a7632.ttf │ ├── Metropolis-Light.dabe320a.woff2 │ ├── Metropolis-Medium.97c97a09.woff2 │ ├── roboto-mono-bold.f70f506c.woff2 │ ├── Metropolis-Regular.4a405762.woff2 │ ├── Metropolis-SemiBold.b89d50b5.woff2 │ └── roboto-mono-regular.e92cc0fb.woff2 ├── css │ ├── chunk-2ccc1085.5c23d546.css │ ├── chunk-45efbef8.c20ffb86.css │ ├── chunk-2f70627e.612b8c78.css │ ├── chunk-da3973d8.a8752431.css │ └── chunk-53aeb0d8.972b1ce3.css ├── images │ ├── leaves_logo1.svg │ └── leaves_logo2.svg ├── index.html ├── oauth.html └── js │ ├── chunk-2ccc1085-legacy.12fbad9c.js │ ├── chunk-2f70627e-legacy.3eab5b78.js │ ├── chunk-da3973d8.709e0552.js │ └── chunk-45efbef8-legacy.87a975ea.js ├── postcss.config.js ├── public ├── favicon1.ico ├── favicon2.ico ├── index.html ├── images │ ├── leaves_logo1.svg │ └── leaves_logo2.svg └── oauth.html ├── screenshots ├── console.png ├── authentication1.png ├── authentication2.png ├── response-schema.png ├── end-point-listing.png └── request-response.png ├── src ├── assets │ └── styles │ │ ├── _slideout.scss │ │ ├── fonts │ │ ├── Metropolis-Light.woff2 │ │ ├── roboto-mono-bold.woff2 │ │ ├── Metropolis-Medium.woff2 │ │ ├── Metropolis-Regular.woff2 │ │ ├── Metropolis-SemiBold.woff2 │ │ └── roboto-mono-regular.woff2 │ │ ├── _table.scss │ │ ├── _vars.scss │ │ ├── index.scss │ │ ├── _typography.scss │ │ ├── _sw_form.scss │ │ └── _element_vars.scss ├── lang │ ├── zh.js │ ├── es.js │ ├── en.js │ ├── hi.js │ ├── index.js │ └── SupportedLang.js ├── App.vue ├── components │ ├── tree │ │ ├── BracketRight.vue │ │ ├── BracketMixin.js │ │ ├── BracketLeft.vue │ │ ├── ContentBlock.vue │ │ └── JsonTree.vue │ ├── Logo.vue │ ├── ParameterInputs.vue │ ├── tab │ │ └── TabPanel.vue │ ├── ResponseTypes.vue │ ├── SecuritySchemes.vue │ ├── EndPoint.vue │ ├── RequestParameters.vue │ └── AppShell.vue ├── lib │ ├── authUtils.js │ ├── restUtils.js │ ├── parserUtils.js │ └── utils.js ├── main.js ├── router.js └── store.js ├── vue.config.js ├── babel.config.js ├── .gitignore ├── deploy.sh ├── .yarnclean ├── vue.config.js_bak ├── package.json └── README.md /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not ie <= 8 4 | -------------------------------------------------------------------------------- /dist/favicon1.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrin9/OpenAPI-Viewer/HEAD/dist/favicon1.ico -------------------------------------------------------------------------------- /dist/favicon2.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrin9/OpenAPI-Viewer/HEAD/dist/favicon2.ico -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {} 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /public/favicon1.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrin9/OpenAPI-Viewer/HEAD/public/favicon1.ico -------------------------------------------------------------------------------- /public/favicon2.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrin9/OpenAPI-Viewer/HEAD/public/favicon2.ico -------------------------------------------------------------------------------- /screenshots/console.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrin9/OpenAPI-Viewer/HEAD/screenshots/console.png -------------------------------------------------------------------------------- /src/assets/styles/_slideout.scss: -------------------------------------------------------------------------------- 1 | .blackout{z-index:1000 !important;} 2 | .dock{ z-index:1100 !important;} 3 | -------------------------------------------------------------------------------- /screenshots/authentication1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrin9/OpenAPI-Viewer/HEAD/screenshots/authentication1.png -------------------------------------------------------------------------------- /screenshots/authentication2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrin9/OpenAPI-Viewer/HEAD/screenshots/authentication2.png -------------------------------------------------------------------------------- /screenshots/response-schema.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrin9/OpenAPI-Viewer/HEAD/screenshots/response-schema.png -------------------------------------------------------------------------------- /screenshots/end-point-listing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrin9/OpenAPI-Viewer/HEAD/screenshots/end-point-listing.png -------------------------------------------------------------------------------- /screenshots/request-response.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrin9/OpenAPI-Viewer/HEAD/screenshots/request-response.png -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | publicPath: process.env.NODE_ENV === 'production' ? '/OpenAPI-Viewer/' : '/', 3 | } -------------------------------------------------------------------------------- /dist/fonts/element-icons.2fad952a.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrin9/OpenAPI-Viewer/HEAD/dist/fonts/element-icons.2fad952a.woff -------------------------------------------------------------------------------- /dist/fonts/element-icons.6f0a7632.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrin9/OpenAPI-Viewer/HEAD/dist/fonts/element-icons.6f0a7632.ttf -------------------------------------------------------------------------------- /dist/fonts/Metropolis-Light.dabe320a.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrin9/OpenAPI-Viewer/HEAD/dist/fonts/Metropolis-Light.dabe320a.woff2 -------------------------------------------------------------------------------- /dist/fonts/Metropolis-Medium.97c97a09.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrin9/OpenAPI-Viewer/HEAD/dist/fonts/Metropolis-Medium.97c97a09.woff2 -------------------------------------------------------------------------------- /dist/fonts/roboto-mono-bold.f70f506c.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrin9/OpenAPI-Viewer/HEAD/dist/fonts/roboto-mono-bold.f70f506c.woff2 -------------------------------------------------------------------------------- /dist/fonts/Metropolis-Regular.4a405762.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrin9/OpenAPI-Viewer/HEAD/dist/fonts/Metropolis-Regular.4a405762.woff2 -------------------------------------------------------------------------------- /dist/fonts/Metropolis-SemiBold.b89d50b5.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrin9/OpenAPI-Viewer/HEAD/dist/fonts/Metropolis-SemiBold.b89d50b5.woff2 -------------------------------------------------------------------------------- /dist/fonts/roboto-mono-regular.e92cc0fb.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrin9/OpenAPI-Viewer/HEAD/dist/fonts/roboto-mono-regular.e92cc0fb.woff2 -------------------------------------------------------------------------------- /src/assets/styles/fonts/Metropolis-Light.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrin9/OpenAPI-Viewer/HEAD/src/assets/styles/fonts/Metropolis-Light.woff2 -------------------------------------------------------------------------------- /src/assets/styles/fonts/roboto-mono-bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrin9/OpenAPI-Viewer/HEAD/src/assets/styles/fonts/roboto-mono-bold.woff2 -------------------------------------------------------------------------------- /src/assets/styles/fonts/Metropolis-Medium.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrin9/OpenAPI-Viewer/HEAD/src/assets/styles/fonts/Metropolis-Medium.woff2 -------------------------------------------------------------------------------- /src/assets/styles/fonts/Metropolis-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrin9/OpenAPI-Viewer/HEAD/src/assets/styles/fonts/Metropolis-Regular.woff2 -------------------------------------------------------------------------------- /src/assets/styles/fonts/Metropolis-SemiBold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrin9/OpenAPI-Viewer/HEAD/src/assets/styles/fonts/Metropolis-SemiBold.woff2 -------------------------------------------------------------------------------- /src/assets/styles/fonts/roboto-mono-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mrin9/OpenAPI-Viewer/HEAD/src/assets/styles/fonts/roboto-mono-regular.woff2 -------------------------------------------------------------------------------- /src/lang/zh.js: -------------------------------------------------------------------------------- 1 | export default { 2 | "m": { 3 | product_name: "姆琳", 4 | change_lang:'改变语言', 5 | login:'登录', 6 | username:'用户名', 7 | password:'密码', 8 | domain:'域' 9 | } 10 | } 11 | 12 | -------------------------------------------------------------------------------- /src/lang/es.js: -------------------------------------------------------------------------------- 1 | export default { 2 | "m": { 3 | product_name: "電子メールセキュリティ", 4 | change_lang:'言語を変えてください', 5 | login:'ログイン', 6 | username:'ユーザー名', 7 | password:'パスワード', 8 | domain:'ドメイン' 9 | } 10 | } 11 | 12 | -------------------------------------------------------------------------------- /src/lang/en.js: -------------------------------------------------------------------------------- 1 | export default { 2 | "m": { 3 | product_name: "API View", 4 | change_lang:'Change Language', 5 | login:'LOGIN', 6 | username:'User Name', 7 | password:'Password', 8 | domain:'Domain' 9 | } 10 | } 11 | 12 | -------------------------------------------------------------------------------- /src/lang/hi.js: -------------------------------------------------------------------------------- 1 | export default { 2 | "m": { 3 | product_name: "मृन", 4 | change_lang:'भाषा बदलो', 5 | login:'लॉग इन करें', 6 | username:'उपयोगकर्ता नाम', 7 | password:'पारण शब्द', 8 | domain:'डोमेन' 9 | 10 | } 11 | } 12 | 13 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 14 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ], 5 | "plugins": [ 6 | [ 7 | "component", 8 | { 9 | "libraryName": "element-ui", 10 | "styleLibraryName": "theme-chalk" 11 | } 12 | ] 13 | ] 14 | } 15 | 16 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | 4 | # local env files 5 | .env.local 6 | .env.*.local 7 | 8 | # Log files 9 | npm-debug.log* 10 | yarn-debug.log* 11 | yarn-error.log* 12 | 13 | # Editor directories and files 14 | .idea 15 | .vscode 16 | *.suo 17 | *.ntvs* 18 | *.njsproj 19 | *.sln 20 | *.sw* -------------------------------------------------------------------------------- /dist/css/chunk-2ccc1085.5c23d546.css: -------------------------------------------------------------------------------- 1 | .sw-tab-pane[data-v-75a41160]{min-height:230px;padding:8px}.sw-response-status[data-v-75a41160]{margin-top:24px;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.sw-response-status+.sw-response-status[data-v-75a41160]{padding-top:16px;border-top:1px solid #777} -------------------------------------------------------------------------------- /deploy.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | 3 | # abort on errors 4 | set -e 5 | 6 | # build 7 | yarn build 8 | 9 | # navigate into the build output directory 10 | cd dist 11 | 12 | git init 13 | git add -A 14 | git commit -m 'deploy' 15 | 16 | # if you are deploying to https://.github.io/ 17 | git subtree push --prefix dist origin gh-pages 18 | 19 | cd - -------------------------------------------------------------------------------- /src/components/tree/BracketRight.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 19 | -------------------------------------------------------------------------------- /src/lib/authUtils.js: -------------------------------------------------------------------------------- 1 | /* For Delayed Event Handler Execution */ 2 | function redirectToAuthorizationUrl (authorizationUrl, clientId, redirectUrl, responseType, scopes) { 3 | let randomStateId=Math.floor((1 + Math.random()) * 0x10000000000).toString(16); 4 | let authUrl = `${authorizationUrl}?response_type=${responseType}&client_id=${clientId}&redirect_uri=${redirectUrl}&state=${randomStateId}`; 5 | if (scopes){ 6 | authUrl = authUrl + "&scope=" +scopes; 7 | } 8 | window.location.assign(authUrl); 9 | } 10 | 11 | 12 | 13 | 14 | export { redirectToAuthorizationUrl} 15 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | MrinDoc OpenAPI Spec Viewer 12 | 13 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /.yarnclean: -------------------------------------------------------------------------------- 1 | # test directories 2 | __tests__ 3 | test 4 | tests 5 | powered-test 6 | 7 | # asset directories 8 | docs 9 | doc 10 | website 11 | images 12 | assets 13 | 14 | # examples 15 | example 16 | examples 17 | 18 | # code coverage directories 19 | coverage 20 | .nyc_output 21 | 22 | # build scripts 23 | Makefile 24 | Gulpfile.js 25 | Gruntfile.js 26 | 27 | # configs 28 | appveyor.yml 29 | circle.yml 30 | codeship-services.yml 31 | codeship-steps.yml 32 | wercker.yml 33 | .tern-project 34 | .gitattributes 35 | .editorconfig 36 | .*ignore 37 | .eslintrc 38 | .jshintrc 39 | .flowconfig 40 | .documentup.json 41 | .yarn-metadata.json 42 | .travis.yml 43 | 44 | # misc 45 | *.md 46 | -------------------------------------------------------------------------------- /src/components/tree/BracketMixin.js: -------------------------------------------------------------------------------- 1 | export default { 2 | props: { 3 | visible: { 4 | required: true, 5 | type: Boolean 6 | }, 7 | data: { 8 | required: true 9 | }, 10 | notLastKey: Boolean 11 | }, 12 | computed: { 13 | dataVisiable: { 14 | get () { 15 | return this.visible 16 | }, 17 | set (val) { 18 | this.$emit('update:visible', val) 19 | } 20 | } 21 | }, 22 | methods: { 23 | //Toggle brackets to expand | close 24 | toggleBrackets () { 25 | this.dataVisiable = !this.dataVisiable 26 | }, 27 | // if not the last item, automatically add a comma 28 | bracketsFormatter (brackets) { 29 | return this.notLastKey ? `${brackets},` : brackets 30 | } 31 | } 32 | } -------------------------------------------------------------------------------- /dist/css/chunk-45efbef8.c20ffb86.css: -------------------------------------------------------------------------------- 1 | .sw-param-type-title[data-v-cc7e0de4]{font-weight:700;margin-top:16px}.sw-datatype[data-v-cc7e0de4]{color:#aaa;display:inline-block;width:50px;margin-right:5px}.sw-fieldname[data-v-cc7e0de4]{display:inline-block}.sw-tree-node[data-v-cc7e0de4]{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:stretch;-ms-flex-pack:stretch;justify-content:stretch;width:100%}.sw-make-request[data-v-cc7e0de4]{padding:0;margin-top:8px}.sw-response-status[data-v-cc7e0de4]{margin-left:5px;font-size:12px;font-weight:700}.sw-response-status.sw-2xx[data-v-cc7e0de4]{color:#739900}.sw-response-status.sw-3xx[data-v-cc7e0de4],.sw-response-status.sw-4xx[data-v-cc7e0de4]{color:#c00}.sw-section-gap[data-v-cc7e0de4]{margin-top:24px}.sw-live-response[data-v-cc7e0de4]{max-height:400px;max-width:100%;overflow:scroll} -------------------------------------------------------------------------------- /vue.config.js_bak: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | module.exports = { 3 | lintOnSave: false, 4 | devServer: { 5 | port:8082 6 | }, 7 | configureWebpack:{ 8 | resolve: { 9 | alias: { 10 | //vue: 'vue/dist/vue.js' 11 | 'vue$': 'vue/dist/vue.esm.js' 12 | }, 13 | extensions: ['*', '.js', '.vue', '.json'] 14 | } 15 | }, 16 | 17 | pages: { 18 | index: { 19 | // entry for the page 20 | entry: 'src/main.js', 21 | // the source template 22 | template: 'public/index.html', 23 | // output as dist/index.html 24 | filename: 'index.html', 25 | // when using title option, 26 | // template title tag needs to be <%= htmlWebpackPlugin.options.title %> 27 | title: 'Mrin - Order Processing System', 28 | // chunks to include on this page, by default includes 29 | // extracted common chunks and vendor chunks. 30 | chunks: ['chunk-vendors', 'chunk-common', 'index'] 31 | } 32 | } 33 | 34 | } -------------------------------------------------------------------------------- /src/lang/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueI18n from 'vue-i18n' 3 | import axios from 'axios' 4 | 5 | Vue.use(VueI18n) 6 | 7 | const i18n = new VueI18n({ 8 | locale: '', // set locale 9 | fallbackLocale: 'en', 10 | }) 11 | 12 | const loadedLanguages = [] // our default language that is prelaoded 13 | 14 | function setI18nLanguage (lang) { 15 | i18n.locale = lang 16 | axios.defaults.headers.common['Accept-Language'] = lang 17 | return lang 18 | } 19 | 20 | export function loadLang (lang) { 21 | if (i18n.locale !== lang) { 22 | if (!loadedLanguages.includes(lang)) { 23 | return import(/* webpackChunkName: "lang-[request]" */ `@/lang/${lang}`).then(msgs => { 24 | Vue.config.lang = lang; 25 | i18n.setLocaleMessage(lang, msgs.default) 26 | loadedLanguages.push(lang) 27 | return setI18nLanguage(lang) 28 | }) 29 | } 30 | return Promise.resolve(setI18nLanguage(lang)) 31 | } 32 | return Promise.resolve(lang) 33 | } 34 | 35 | 36 | export default i18n; 37 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mrindoc", 3 | "version": "0.1.0", 4 | "private": true, 5 | "author": "Mrinmoy", 6 | "license": "MIT", 7 | "description": "Open API viewer and console", 8 | "repository": "https://github.com/mrin9/OpenAPI-Viewer", 9 | "homepage": "https://github.com/mrin9/OpenAPI-Viewer#readme", 10 | "scripts": { 11 | "serve": "vue-cli-service serve ", 12 | "build": "vue-cli-service build --report --modern ", 13 | "deploy": "git subtree push --prefix dist origin gh-pages" 14 | }, 15 | "dependencies": { 16 | "axios": "^0.18.0", 17 | "element-ui": "^2.4.11", 18 | "marked": "^0.6.0", 19 | "json-schema-ref-parser": "^6.0.3", 20 | "swagger2openapi": "^5.0.2", 21 | "vue": "^2.6.0", 22 | "vue-router": "^3.0.1", 23 | "vue-slideout-panel": "^3.0.0", 24 | "vuex": "^3.1.0", 25 | "vuex-persist": "^2.0.0" 26 | }, 27 | "devDependencies": { 28 | "@vue/cli-plugin-babel": "^3.4.0", 29 | "@vue/cli-service": "^3.4.0", 30 | "babel-plugin-component": "^1.1.1", 31 | "node-sass": "^4.11.0", 32 | "sass-loader": "^7.1.0", 33 | "vue-template-compiler": "^2.6.0" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/assets/styles/_table.scss: -------------------------------------------------------------------------------- 1 | @import "~@/assets/styles/_vars.scss"; 2 | table { 3 | border-spacing: 0; 4 | } 5 | td, th { 6 | display: table-cell; 7 | vertical-align: inherit; 8 | } 9 | 10 | .sw-table { 11 | border-collapse: separate; 12 | border: 1px solid #ccc; 13 | border-radius: $sw-border-radius; 14 | background-color: #fff; 15 | color: #565656; 16 | margin: 0; 17 | max-width: 100%; 18 | tbody tr:first-child td, // first row tds 19 | th { 20 | border-top: 0 none; 21 | } 22 | td, th { 23 | font-size: 12px; 24 | line-height: 16px; 25 | padding: 4px 5px 4px; 26 | text-align: left; 27 | vertical-align: top; 28 | } 29 | th { 30 | color: #565656; 31 | font-size: 12px; 32 | line-height:30px; 33 | font-weight: 600; 34 | letter-spacing: normal; 35 | background-color: #fafafa; 36 | vertical-align: bottom; 37 | border-bottom: 1px solid #ccc; 38 | } 39 | 40 | > tbody >tr > td, 41 | > tr > td{ 42 | border-top: 1px solid #eee; 43 | text-overflow: ellipsis; 44 | overflow: hidden; 45 | } 46 | tr:hover{ 47 | background-color: darken(#fff,3%); 48 | } 49 | 50 | } -------------------------------------------------------------------------------- /src/assets/styles/_vars.scss: -------------------------------------------------------------------------------- 1 | //Font 2 | $font_path : '~@/assets/styles/fonts/'; 3 | $sw-font-family: 'Metropolis'; 4 | $sw-font-mono : 'roboto-mono', 'Monaco', 'Menlo', 'Consolas'; 5 | 6 | //App Dimentions 7 | $sw-min-app-width:768px; 8 | $sw-min-app-height:600px; 9 | $sw-side-nav-width:255px; 10 | $sw-header-height:100px; 11 | $sw-header-row1-height:70px; 12 | 13 | //Colors 14 | $sw-primary-color:#FF791A; 15 | 16 | $sw-dark-bg1:#333; 17 | $sw-dark-bg2:#515151; 18 | $sw-dark-bg3:#65656A; 19 | 20 | $sw-blue-text:#0079b8; 21 | $sw-dark-text:#565656; 22 | $sw-gray-text:#999; 23 | $sw-light-text:#C9C9C9; 24 | $sw-extra-light-text:#FAFAFA; 25 | 26 | $sw-light-bg1:#FAFAFA; 27 | $sw-light-bg2:whitesmoke; 28 | $sw-light-bg3:#F2F2F2; 29 | $sw-white:#fff; 30 | 31 | $sw-green:#99CC00; 32 | $sw-red:#CC0000; 33 | $sw-soft-red:#ED4337; 34 | $sw-orange:#FF9900; 35 | $sw-info:#47AFE8; 36 | $sw-unknown:#CCCCCC; 37 | 38 | $sw-icon-critical:$sw-red; 39 | $sw-icon-error:#FF0000; 40 | $sw-icon-warn:$sw-orange; 41 | $sw-icon-warn-minor:#FFCC00; 42 | $sw-icon-warn-low:#EFE47E; 43 | $sw-icon-good:$sw-green; 44 | $sw-icon-info:$sw-info; 45 | $sw-icon-unknown:$sw-unknown; 46 | 47 | //Borders 48 | $sw-border-color:#ccc; 49 | $sw-light-border-color:#eee; 50 | $sw-border-radius:2px; 51 | -------------------------------------------------------------------------------- /src/lang/SupportedLang.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | {label:'English', code:'en-US', extendedSupport:false}, 3 | {label:'Arabic (Persian)', code:'en-US', extendedSupport:true}, 4 | {label:'Baltic', code:'en-US', extendedSupport:true}, 5 | {label:'Chinese', code:'zh-CN', extendedSupport:false}, 6 | {label:'Cyrillic (Russian)', code:'en-US', extendedSupport:true}, 7 | {label:'Dutch', code:'en-US', extendedSupport:true}, 8 | {label:'Finnish', code:'en-US', extendedSupport:true}, 9 | {label:'French', code:'en-US', extendedSupport:false}, 10 | {label:'German', code:'en-US', extendedSupport:false}, 11 | {label:'Greek', code:'en-US', extendedSupport:true}, 12 | {label:'Hebrew', code:'en-US', extendedSupport:true}, 13 | {label:'Italian', code:'en-US', extendedSupport:true}, 14 | {label:'Japanese', code:'en-US', extendedSupport:false}, 15 | {label:'Korean', code:'en-US', extendedSupport:true}, 16 | {label:'Portuguese', code:'en-US', extendedSupport:true}, 17 | {label:'Spanish', code:'en-US', extendedSupport:false}, 18 | {label:'Swedish', code:'en-US', extendedSupport:true}, 19 | {label:'Thai', code:'en-US', extendedSupport:true}, 20 | {label:'Turkish', code:'en-US', extendedSupport:true}, 21 | {label:'Vietnamese', code:'en-US', extendedSupport:true} 22 | ] 23 | -------------------------------------------------------------------------------- /src/components/tree/BracketLeft.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 45 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import router from './router' 3 | import store from './store' 4 | 5 | 6 | import App from '@/App.vue'; 7 | import marked from 'marked'; 8 | import elementLocale from 'element-ui/lib/locale' 9 | import elementLang from 'element-ui/lib/locale/lang/en'; //Its ok if this line shows error in VSCode 10 | 11 | //import ElementUI from 'element-ui'; 12 | /* 13 | import Button from 'element-ui/lib/button' 14 | import Input from 'element-ui/lib/input' 15 | import Switch from 'element-ui/lib/switch' 16 | import Select from 'element-ui/lib/select' 17 | import Tabs from 'element-ui/lib/tabs' 18 | import TabPane from 'element-ui/lib/tab-pane' 19 | import Tree from 'element-ui/lib/tree' 20 | import Loading from 'element-ui/lib/loading' 21 | import Message from 'element-ui/lib/message' 22 | */ 23 | //import i18n, {loadLang} from '@/lang/index'; 24 | 25 | import { 26 | Switch, 27 | Select, 28 | Option, 29 | Tabs, 30 | TabPane, 31 | Loading, 32 | Message 33 | } from 'element-ui'; 34 | 35 | 36 | Vue.config.productionTip = false 37 | 38 | elementLocale.use(elementLang); 39 | Vue.use(Switch); 40 | Vue.use(Select); 41 | Vue.use(Option); 42 | Vue.use(Tabs); 43 | Vue.use(TabPane); 44 | Vue.use(Loading.directive); 45 | Vue.prototype.$message = Message; 46 | Vue.prototype.$loading = Loading.service; 47 | Vue.prototype.$marked = marked; 48 | 49 | //Vue.use(ElementUI,{locale}); 50 | 51 | const app = new Vue({ 52 | router, 53 | store, 54 | render: createEle => createEle(App) 55 | }).$mount('#app'); -------------------------------------------------------------------------------- /dist/images/leaves_logo1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /public/images/leaves_logo1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | MrinDoc OpenAPI Spec Viewer
-------------------------------------------------------------------------------- /src/router.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import AppShell from '@/components/AppShell.vue' 4 | 5 | Vue.use(Router) 6 | 7 | const router = new Router({ 8 | //mode: 'history', 9 | routes: [ 10 | { 11 | path: '/', 12 | redirect: function(to){ 13 | return 'load'; 14 | } 15 | }, 16 | { path: '/load/:specUrl?' , name:'load', component: AppShell }, 17 | { path: '/reload', name: 'reload', component: AppShell }, 18 | ] 19 | }); 20 | 21 | router.beforeEach((to, from, next) => { 22 | if (to.path.startsWith("/load")){ 23 | if (!to.params.specUrl){ 24 | let specUrl=""; 25 | //specUrl="https://raw.githubusercontent.com/Rebilly/ReDoc/master/demo/big-openapi.json"; 26 | specUrl="https://api.apis.guru/v2/specs/bitbucket.org/2.0/swagger.json";//All auth type 27 | //specUrl="http://developer.twinehealth.com/swagger.json"; 28 | //specUrl= "https://petstore.swagger.io/v2/swagger.json"; 29 | //specUrl= "http://10.21.83.83:8080/api/swagger.json"; 30 | //specUrl= "https://raw.githubusercontent.com/APIs-guru/unofficial_openapi_specs/master/github.com/v3/swagger.yaml", //large spec 31 | //specUrl= "https://fakerestapi.azurewebsites.net/swagger/docs/v1"; 32 | //specUrl= "https://api.apis.guru/v2/specs/twilio.com/2010-04-01/swagger.json"; //xml responses 33 | //specUrl="https://raw.githubusercontent.com/OAI/OpenAPI-Specification/master/examples/v3.0/uspto.yaml"; // OpenAPI 3 with examples 34 | //specUrl="https://api.apis.guru/v2/specs/stackexchange.com/2.0/swagger.json"; 35 | //specUrl="https://api.apis.guru/v2/specs/cisco.com/0.0.3/swagger.json"; // Has oAuth2 instructions 36 | router.push(`/load/${encodeURIComponent(specUrl)}`) 37 | } 38 | } 39 | next(); 40 | 41 | }); 42 | 43 | export default router; -------------------------------------------------------------------------------- /src/store.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | import VuexPersistence from 'vuex-persist' 4 | 5 | Vue.use(Vuex) 6 | 7 | const persistMutations=['lang','specUrl','reqToken', 'reqTokenType','reqHeader','reqSendTokenIn','oAuthTokenUrl']; // only these mutations will be persisted 8 | const vuexLocal = new VuexPersistence({ 9 | key:'mrindoc', 10 | storage: window.localStorage, 11 | filter: function(mutation){ 12 | return persistMutations.indexOf(mutation.type)>=0 ? true:false; 13 | } 14 | }) 15 | 16 | 17 | 18 | 19 | export default new Vuex.Store({ 20 | state: { 21 | lang:'en', 22 | specUrl:"", 23 | isDevMode:false, 24 | selectedApiServer:"", 25 | reqHeader:"", 26 | reqToken:"", 27 | reqTokenType:"", // can be apikey, basic or bearer 28 | reqSendTokenIn:"", // can be header, querystring or cookies 29 | oAuthClientId:"", 30 | oAuthClientSecret:"", 31 | oAuthTokenUrl:"", 32 | 33 | }, 34 | 35 | mutations: { 36 | lang(state, payload) { state.lang = payload; }, 37 | specUrl(state, payload) { state.specUrl = payload; }, 38 | isDevMode(state, payload){ state.isDevMode = payload; }, 39 | reqToken(state, payload) { state.reqToken = payload; }, 40 | reqTokenType(state, payload) { state.reqTokenType = payload; }, 41 | reqHeader(state, payload) { state.reqHeader = payload; }, 42 | reqSendTokenIn(state, payload) { state.reqSendTokenIn = payload; }, 43 | oAuthClientId(state, payload) { state.oAuthClientId = payload; }, 44 | oAuthClientSecret(state, payload) { state.oAuthClientSecret = payload; }, 45 | oAuthTokenUrl(state, payload) { state.oAuthTokenUrl = payload; }, 46 | selectedApiServer(state, payload) { state.selectedApiServer = payload; } 47 | 48 | }, 49 | plugins: [new VuexPersistence().plugin] 50 | 51 | }) 52 | -------------------------------------------------------------------------------- /src/components/Logo.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | -------------------------------------------------------------------------------- /dist/css/chunk-2f70627e.612b8c78.css: -------------------------------------------------------------------------------- 1 | .sw-tree{font-family:roboto-mono,Monaco,Menlo,Consolas;font-size:12px}.sw-tree .sw-tree-content{padding-left:1em;border-left:1px dotted #ccc}.sw-tree .sw-tree-bracket-left,.sw-tree .sw-tree-bracket-right{cursor:pointer;border:1px solid transparent;border-radius:3px;padding:0 20px 2px 0}.sw-tree .sw-tree-bracket-left:hover,.sw-tree .sw-tree-bracket-right:hover{color:#ff791a;background:#efefef;border:1px solid #ccc}.sw-tree .sw-datatype-null{color:#ed4337}.sw-tree .sw-datatype-bool,.sw-tree .sw-datatype-boolean,.sw-tree .sw-datatype-inte,.sw-tree .sw-datatype-numb,.sw-tree .sw-datatype-number{color:#47afe8}.sw-tree .sw-datatype-stri,.sw-tree .sw-datatype-string{color:#86b300}.sw-tree .sw-datatype-enum{color:#f90}.sw-tree .sw-content-block{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:100%}.sw-tree .sw-content-block .sw-content,.sw-tree .sw-content-block .sw-content-key{white-space:nowrap}.sw-tree .sw-content-block .sw-content.sw-datatype-enum{white-space:normal;padding-top:0;min-width:150px}.sw-tree .sw-content-block:hover{background:#efefef}.sw-tree .sw-descr{min-width:100px;white-space:nowrap;text-overflow:ellipsis;width:100%;display:inline-block;overflow:hidden;color:#999;text-align:right}.sw-tree .sw-descr.sw-descr-collapsed{white-space:nowrap}.sw-tree .sw-descr.sw-descr-expanded{white-space:normal}.sw-tree .sw-show-descr .sw-descr{display:block}.sw-tree .sw-hide-descr .sw-descr{display:none}.sw-tree .sw-descr-expanded+.sw-descr-expander{border-left:2px solid #ccc}.sw-tree .sw-descr-expander{padding:0 5px;margin-left:5px;cursor:pointer;color:orange}.sw-tree .sw-descr-expander:hover{color:#ff4500}.sw-param-req[data-v-949a757c]{color:#ff4500;font-size:16px;vertical-align:middle}.sw-param-name[data-v-949a757c]{font-family:monospace;margin:0;color:#333;text-align:right;line-height:12px}.sw-param-type[data-v-949a757c]{margin:0;color:#aaa;text-align:right;line-height:12px} -------------------------------------------------------------------------------- /dist/oauth.html: -------------------------------------------------------------------------------- 1 | 52 | 53 |

oauth.html

-------------------------------------------------------------------------------- /public/oauth.html: -------------------------------------------------------------------------------- 1 | 52 | 53 |

oauth.html

-------------------------------------------------------------------------------- /src/components/tree/ContentBlock.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 63 | -------------------------------------------------------------------------------- /dist/css/chunk-da3973d8.a8752431.css: -------------------------------------------------------------------------------- 1 | .sw-param-req[data-v-949a757c]{color:#ff4500;font-size:16px;vertical-align:middle}.sw-param-name[data-v-949a757c]{font-family:monospace;margin:0;color:#333;text-align:right;line-height:12px}.sw-param-type[data-v-949a757c]{margin:0;color:#aaa;text-align:right;line-height:12px}.sw-tree{font-family:roboto-mono,Monaco,Menlo,Consolas;font-size:12px}.sw-tree .sw-tree-content{padding-left:1em;border-left:1px dotted #ccc}.sw-tree .sw-tree-bracket-left,.sw-tree .sw-tree-bracket-right{cursor:pointer;border:1px solid transparent;border-radius:3px;padding:0 20px 2px 0}.sw-tree .sw-tree-bracket-left:hover,.sw-tree .sw-tree-bracket-right:hover{color:#ff791a;background:#efefef;border:1px solid #ccc}.sw-tree .sw-datatype-null{color:#ed4337}.sw-tree .sw-datatype-bool,.sw-tree .sw-datatype-boolean,.sw-tree .sw-datatype-inte,.sw-tree .sw-datatype-numb,.sw-tree .sw-datatype-number{color:#47afe8}.sw-tree .sw-datatype-stri,.sw-tree .sw-datatype-string{color:#86b300}.sw-tree .sw-datatype-enum{color:#f90}.sw-tree .sw-content-block{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:100%}.sw-tree .sw-content-block .sw-content,.sw-tree .sw-content-block .sw-content-key{white-space:nowrap}.sw-tree .sw-content-block .sw-content.sw-datatype-enum{white-space:normal;padding-top:0;min-width:150px}.sw-tree .sw-content-block:hover{background:#efefef}.sw-tree .sw-descr{min-width:100px;white-space:nowrap;text-overflow:ellipsis;width:100%;display:inline-block;overflow:hidden;color:#999;text-align:right}.sw-tree .sw-descr.sw-descr-collapsed{white-space:nowrap}.sw-tree .sw-descr.sw-descr-expanded{white-space:normal}.sw-tree .sw-show-descr .sw-descr{display:block}.sw-tree .sw-hide-descr .sw-descr{display:none}.sw-tree .sw-descr-expanded+.sw-descr-expander{border-left:2px solid #ccc}.sw-tree .sw-descr-expander{padding:0 5px;margin-left:5px;cursor:pointer;color:orange}.sw-tree .sw-descr-expander:hover{color:#ff4500}.sw-tab-pane[data-v-75a41160]{min-height:230px;padding:8px}.sw-response-status[data-v-75a41160]{margin-top:24px;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.sw-response-status+.sw-response-status[data-v-75a41160]{padding-top:16px;border-top:1px solid #777} -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | MrinDoc logo 2 | 3 | # MrinDoc 4 | An OpenAPI 3.0 and 2.0 Spec viewer with built in console 5 | 6 | ### [Demo](https://mrin9.github.io/OpenAPI-Viewer) 7 | 8 | ### Checkout RapiDoc - Another project for Viewing OpenAPI spec using web-Componnet 9 | #### [Checkout RapiDoc](https://mrin9.github.io/RapiDoc) 10 | 11 | # Features 12 | - Supports Swagger V2.0 and OpenAPI 3.0 13 | - Supports searching of end-points (paths) 14 | - Built In console to try out APIs 15 | - Responsive (support for desktop and tablets) 16 | - Supports Authentication 17 | - OAuth2 18 | - API Key(Token) 19 | - HTTP Bearer 20 | - HTTP Basic 21 | - UX friendly. 22 | - All Endpoints paths are cleanly presented 23 | - Clear seperation of Request and Response info laid out side by side in a two colum layout 24 | - Lesser clicks to deal with. All schema models, response-jsons and examples are expanded by defaults which eliminates the need of click and reveal each level. 25 | - While using API console, request data is pre-filled based on schema 26 | - Needs just one click to try out live APIs 27 | 28 | 29 | ## Project Build 30 | ``` 31 | yarn install 32 | yarn run build 33 | ``` 34 | ### Screenshots 35 | #### EndPoint Listings 36 | 37 | 38 | 39 | 40 | #### Request/Response 41 | Laid out in a two colum for easy view & compare 42 | 43 | 44 | 45 | 46 | #### Schema View 47 | All Request/Response schema and Response JSONs are expanded by default, so that you dont have to click and reveal each level for easy browsing and read 48 | 49 | 50 | 51 | 52 | #### Console 53 | Built in console, fields are pre-filled with values if exist in spec, request body is generated and filled based on schema, allowing you to quickly try out the end-point with a single click 54 | 55 | 56 | 57 | 58 | #### Authentication Support 59 | All the authentication methods are supported. Along with instructions on how to use it 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /src/assets/styles/index.scss: -------------------------------------------------------------------------------- 1 | @import "~@/assets/styles/_vars.scss"; 2 | @import "~@/assets/styles/_typography.scss"; 3 | @import "~@/assets/styles/_element_vars.scss"; /* This contains all customizations and then loading of elements theme css */ 4 | @import "~@/assets/styles/_sw_form.scss"; 5 | @import "~@/assets/styles/_table.scss"; 6 | @import "~@/assets/styles/_slideout.scss"; 7 | @import url("https://fonts.googleapis.com/css?family=Nunito:300,400,600,700"); 8 | 9 | 10 | body, html{ 11 | width:100%; 12 | height:100%; 13 | margin:0; 14 | padding:0; 15 | font-family: $sw-font-family, 'Nunito', sans-serif; 16 | font-weight:400; 17 | font-size: 14px; 18 | color:#333; 19 | letter-spacing:normal; 20 | &::-webkit-scrollbar {width: 8px; height:8px} 21 | &::-webkit-scrollbar-track {background-color: transparent;} 22 | &::-webkit-scrollbar-thumb { 23 | background-color: rgba(0,0,0,0.4); 24 | border-radius:3px; 25 | } 26 | } 27 | 28 | input, select, button { 29 | font-family: $sw-font-family, 'Nunito', sans-serif; 30 | font-weight:400; 31 | } 32 | 33 | a{ 34 | color: darken($sw-info,5%); 35 | } 36 | 37 | .sw-row { 38 | display:flex; 39 | align-items:center; 40 | flex-direction: row; 41 | } 42 | .sw-col { 43 | display:flex; 44 | align-items:stretch; 45 | flex-direction: column; 46 | } 47 | 48 | .sw-section-title { 49 | font-size:20px; 50 | white-space:nowrap; 51 | overflow: hidden; 52 | text-overflow: ellipsis; 53 | } 54 | 55 | 56 | .sw-section-heading1 { 57 | font-size: 16px; 58 | font-weight:bold; 59 | margin: 20px 0 4px 0; 60 | } 61 | 62 | .sw-section-heading2 { 63 | font-size: 14px; 64 | font-weight:bold; 65 | margin: 16px 0 4px 0; 66 | } 67 | 68 | .sw-section-heading3 { 69 | font-size: 12px; 70 | font-weight:bold; 71 | margin: 12px 0 4px 0; 72 | } 73 | 74 | .sw-gray-text{ 75 | vertical-align: middle; 76 | color: #999; 77 | } 78 | 79 | .sw-gray-small-text{ 80 | font-size: 12px; 81 | line-height: 12px; 82 | vertical-align: middle; 83 | color: #999; 84 | } 85 | 86 | .sw-blue-small-text{ 87 | font-size: 12px; 88 | line-height: 12px; 89 | vertical-align: middle; 90 | color: $sw-blue-text;; 91 | } 92 | .sw-blue-bold-small-text{ 93 | font-size: 12px; 94 | font-weight:bold; 95 | line-height: 12px; 96 | vertical-align: middle; 97 | color: $sw-blue-text;; 98 | } 99 | 100 | 101 | .sw-border{ 102 | border:1px solid $sw-border-color; 103 | border-radius: $sw-border-radius; 104 | } 105 | .sw-light-border{ 106 | border:1px solid $sw-light-border-color; 107 | border-radius: $sw-border-radius; 108 | } -------------------------------------------------------------------------------- /dist/css/chunk-53aeb0d8.972b1ce3.css: -------------------------------------------------------------------------------- 1 | .sw-tree{font-family:roboto-mono,Monaco,Menlo,Consolas;font-size:12px}.sw-tree .sw-tree-content{padding-left:1em;border-left:1px dotted #ccc}.sw-tree .sw-tree-bracket-left,.sw-tree .sw-tree-bracket-right{cursor:pointer;border:1px solid transparent;border-radius:3px;padding:0 20px 2px 0}.sw-tree .sw-tree-bracket-left:hover,.sw-tree .sw-tree-bracket-right:hover{color:#ff791a;background:#efefef;border:1px solid #ccc}.sw-tree .sw-datatype-null{color:#ed4337}.sw-tree .sw-datatype-bool,.sw-tree .sw-datatype-boolean,.sw-tree .sw-datatype-inte,.sw-tree .sw-datatype-numb,.sw-tree .sw-datatype-number{color:#47afe8}.sw-tree .sw-datatype-stri,.sw-tree .sw-datatype-string{color:#86b300}.sw-tree .sw-datatype-enum{color:#f90}.sw-tree .sw-content-block{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:100%}.sw-tree .sw-content-block .sw-content,.sw-tree .sw-content-block .sw-content-key{white-space:nowrap}.sw-tree .sw-content-block .sw-content.sw-datatype-enum{white-space:normal;padding-top:0;min-width:150px}.sw-tree .sw-content-block:hover{background:#efefef}.sw-tree .sw-descr{min-width:100px;white-space:nowrap;text-overflow:ellipsis;width:100%;display:inline-block;overflow:hidden;color:#999;text-align:right}.sw-tree .sw-descr.sw-descr-collapsed{white-space:nowrap}.sw-tree .sw-descr.sw-descr-expanded{white-space:normal}.sw-tree .sw-show-descr .sw-descr{display:block}.sw-tree .sw-hide-descr .sw-descr{display:none}.sw-tree .sw-descr-expanded+.sw-descr-expander{border-left:2px solid #ccc}.sw-tree .sw-descr-expander{padding:0 5px;margin-left:5px;cursor:pointer;color:orange}.sw-tree .sw-descr-expander:hover{color:#ff4500}.sw-param-req[data-v-949a757c]{color:#ff4500;font-size:16px;vertical-align:middle}.sw-param-name[data-v-949a757c]{font-family:monospace;margin:0;color:#333;text-align:right;line-height:12px}.sw-param-type[data-v-949a757c]{margin:0;color:#aaa;text-align:right;line-height:12px}.sw-param-type-title[data-v-cc7e0de4]{font-weight:700;margin-top:16px}.sw-datatype[data-v-cc7e0de4]{color:#aaa;display:inline-block;width:50px;margin-right:5px}.sw-fieldname[data-v-cc7e0de4]{display:inline-block}.sw-tree-node[data-v-cc7e0de4]{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:stretch;-ms-flex-pack:stretch;justify-content:stretch;width:100%}.sw-make-request[data-v-cc7e0de4]{padding:0;margin-top:8px}.sw-response-status[data-v-cc7e0de4]{margin-left:5px;font-size:12px;font-weight:700}.sw-response-status.sw-2xx[data-v-cc7e0de4]{color:#739900}.sw-response-status.sw-3xx[data-v-cc7e0de4],.sw-response-status.sw-4xx[data-v-cc7e0de4]{color:#c00}.sw-section-gap[data-v-cc7e0de4]{margin-top:24px}.sw-live-response[data-v-cc7e0de4]{max-height:400px;max-width:100%;overflow:scroll} -------------------------------------------------------------------------------- /src/assets/styles/_typography.scss: -------------------------------------------------------------------------------- 1 | @import "~@/assets/styles/_vars.scss"; 2 | 3 | //Light 4 | @font-face { 5 | font-family: 'Metropolis'; 6 | src: url($font_path + 'Metropolis-Light.woff2')format('woff2') ; 7 | font-weight: 200; 8 | font-style: normal; 9 | } 10 | 11 | //Regular 12 | @font-face { 13 | font-family: 'Metropolis'; 14 | src: url($font_path + 'Metropolis-Regular.woff2')format('woff2') ; 15 | font-weight: 400; 16 | font-style: normal; 17 | } 18 | 19 | //Semibold 20 | @font-face { 21 | font-family: 'Metropolis'; 22 | src: url($font_path + 'Metropolis-Medium.woff2')format('woff2') ; 23 | font-weight: 500; 24 | font-style: normal; 25 | } 26 | 27 | //Bold 28 | @font-face { 29 | font-family: 'Metropolis'; 30 | src: url($font_path + 'Metropolis-SemiBold.woff2')format('woff2') ; 31 | font-weight: 600; 32 | font-style: normal; 33 | } 34 | 35 | //Monospaced font 36 | //Regular 37 | @font-face { 38 | font-family: 'roboto-mono'; 39 | src: url($font_path + 'roboto-mono-regular.woff2')format('woff2') ; 40 | font-weight: 400; 41 | font-style: normal; 42 | } 43 | 44 | @font-face { 45 | font-family: 'roboto-mono'; 46 | src: url($font_path + 'roboto-mono-bold.woff2')format('woff2') ; 47 | font-weight: 500; 48 | font-style: normal; 49 | } 50 | 51 | 52 | h1{ font-family:$sw-font-family; font-size:26px; font-weight:200; letter-spacing:normal; } 53 | h2{ font-family:$sw-font-family; font-size:24px; font-weight:200; letter-spacing:normal; } 54 | h3{ font-family:$sw-font-family; font-size:22px; font-weight:200; letter-spacing:normal; } 55 | h4{ font-family:$sw-font-family; font-size:18px; font-weight:200; letter-spacing:normal; } 56 | h5{ font-family:$sw-font-family; font-size:16px; font-weight:200; letter-spacing:normal; } 57 | h6{ font-family:$sw-font-family; font-size:14px; font-weight:200; letter-spacing:normal; } 58 | 59 | h1,h2,h3,h4,h5,h5{ 60 | margin-block-end: 0.2em; 61 | } 62 | p{margin-block-start: 0.5em;} 63 | code, 64 | pre{ 65 | font-family: $sw-font-mono; 66 | } 67 | 68 | .sw-bold-small-text{ 69 | font-size:12px; 70 | margin-bottom: 4px; 71 | font-weight:bold; 72 | } 73 | 74 | 75 | .sw-markdown-block{ 76 | p:only-child{ 77 | color:#999; 78 | font-size:12px; 79 | line-height:normal; 80 | margin-top:0; 81 | } 82 | p{ 83 | line-height: 16px; 84 | } 85 | code{ 86 | background-color: rgba(0, 0, 0, 0.02); 87 | padding: 0px 6px; 88 | border: 1px solid #eee; 89 | border-radius: 3px; 90 | color: #666; 91 | font-size: 12px; 92 | } 93 | pre{ 94 | code { 95 | border:none; 96 | background-color:transparent; 97 | color:#ccc; 98 | 99 | } 100 | white-space: pre-wrap; 101 | background-color: #263238; 102 | color: white; 103 | padding: 12px 14px 15px 14px; 104 | overflow-x: auto; 105 | line-height: normal; 106 | border-radius: 2px; 107 | border: 1px solid rgba(38, 50, 56, 0.1); 108 | } 109 | ul,ol{ 110 | padding-inline-start:30px 111 | } 112 | li{ 113 | line-height: 1.2em; 114 | } 115 | } 116 | -------------------------------------------------------------------------------- /src/assets/styles/_sw_form.scss: -------------------------------------------------------------------------------- 1 | @import "~@/assets/styles/_vars.scss"; 2 | 3 | //Button 4 | .sw-btn{ 5 | border-radius: $sw-border-radius; 6 | font-weight: 600; 7 | display: inline-block; 8 | padding: 6px 16px; 9 | font-size: 12px; 10 | outline: 0; 11 | line-height: 1; 12 | text-align: center; 13 | white-space: nowrap; 14 | border: 1px solid $sw-border-color; 15 | background-color:$sw-white; 16 | transition: background-color 0.2s; 17 | user-select: none; 18 | cursor: pointer; 19 | &.sw-large{ 20 | padding:8px 14px; 21 | } 22 | &.sw-small{ 23 | padding:5px 12px; 24 | } 25 | &.sw-circle{ 26 | border-radius:50%; 27 | } 28 | 29 | &.sw-primary{ 30 | background-color:$sw-primary-color; 31 | border-color:darken($sw-primary-color,2%); 32 | color:#fff; 33 | &:hover{ 34 | background-color:darken( $sw-primary-color, 8% ); 35 | } 36 | } 37 | 38 | &.sw-plain{ 39 | background-color:#fff; 40 | border-color:#333; 41 | color:#333; 42 | &:hover{ 43 | border-color:$sw-primary-color; 44 | } 45 | } 46 | 47 | } 48 | 49 | // Form Inputs 50 | textarea, 51 | input[type="text"]:not(.el-input__inner), 52 | input[type="password"]:not(.el-input__inner){ 53 | border-radius:$sw-border-radius; 54 | border:1px solid #C5D9E8; 55 | transition: border .2s; 56 | outline: none; 57 | font-size:$--input-font-size; 58 | height:$--input-height; 59 | padding: 0 5px; 60 | box-sizing: border-box; 61 | &::placeholder { color: #ccc;} 62 | &:-ms-input-placeholder {color: #ccc;} 63 | &::-ms-input-placeholder {color: #ccc;} 64 | 65 | &.sw-medium{ 66 | font-size:$--input-medium-font-size; 67 | height:$--input-medium-height; 68 | } 69 | &.sw-small{ 70 | font-size:$--input-small-font-size; 71 | height:$--input-small-height; 72 | } 73 | 74 | &.sw-primary{ 75 | border-color:$sw-primary-color; 76 | } 77 | 78 | 79 | &.sw-dark{ 80 | border-color: darken($sw-primary-color,15%); 81 | background-color:#222; 82 | color:#fff; 83 | font-size:13px; 84 | &::placeholder { color: #555;} 85 | &:-ms-input-placeholder {color: #555;} 86 | &::-ms-input-placeholder {color: #555;} 87 | &:disabled{ 88 | border-color:#444; 89 | background-color:#2A2A2A; 90 | } 91 | } 92 | &:focus, 93 | &:active{ 94 | border-color:$sw-primary-color; 95 | } 96 | &:disabled{ 97 | border-color:lifghten($sw-border-color,10%); 98 | background-color:rbga(0,0,0, 0.2); 99 | } 100 | } 101 | 102 | textarea{ 103 | &::-webkit-scrollbar-track{ 104 | background-color: transparent; 105 | } 106 | 107 | &::-webkit-scrollbar{ 108 | width: 8px; 109 | height: 8px; 110 | background-color: transparent; 111 | } 112 | 113 | &::-webkit-scrollbar-thumb{ 114 | background-color: rgba(50,50,50, .5); 115 | } 116 | 117 | 118 | } 119 | 120 | 121 | //Radio 122 | .sw-radio { 123 | display: none; 124 | & + label { 125 | -webkit-appearance: none; 126 | background-color:$sw-primary-color; 127 | border: 4px solid $sw-primary-color; 128 | border-radius: 10px; 129 | width: 100%; 130 | display: inline-block; 131 | position: relative; 132 | width: 10px; 133 | height: 10px; 134 | } 135 | } 136 | 137 | .regular-radio:checked + label { 138 | background: $sw-dark-bg1; 139 | border: 4px solid $sw-primary-color; 140 | } 141 | -------------------------------------------------------------------------------- /src/components/ParameterInputs.vue: -------------------------------------------------------------------------------- 1 |