vuepress-api-playground
Version:
The VuePress API Playground is a Vue.js component for showcasing and testing API use cases in VuePress documentation
2 lines • 6.86 kB
JavaScript
(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t():"function"===typeof define&&define.amd?define([],t):"object"===typeof exports?exports["VuepressApiPlayground"]=t():e["VuepressApiPlayground"]=t()})("undefined"!==typeof self?self:this,(function(){return function(e){var t={};function n(a){if(t[a])return t[a].exports;var r=t[a]={i:a,l:!1,exports:{}};return e[a].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,a){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},n.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(n.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(a,r,function(t){return e[t]}.bind(null,r));return a},n.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s="fb15")}({fb15:function(e,t,n){"use strict";n.r(t);var a={};if(n.r(a),n.d(a,"default",(function(){return f})),"undefined"!==typeof window){var r=window.document.currentScript,o=r&&r.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);o&&(n.p=o[1])}var s=function(){var e=this,t=e._self._c;return t("div",{staticClass:"vp-playground"},[e.showMethod?t(e.headingTag,{tag:"component",staticClass:"vp-playground__method"},[e._v(" Method: "),t("Badge",{attrs:{type:"warn",text:e.method.toUpperCase(),vertical:"unset"}})],1):e._e(),e.showURL?t(e.headingTag,{tag:"component",staticClass:"vp-playground__url"},[e._v(" URL: "),t("code",{staticStyle:{"word-break":"break-word"}},[e._v(e._s(e.url))])]):e._e(),e.headers&&Object.keys(e.headers).length>0?t("div",[t(e.headingTag,{tag:"component"},[e._v("Headers:")]),t("table",[e._m(0),t("tbody",e._l(Object.keys(e.headers),(function(n,a){return t("tr",{key:"headers-"+a},[t("td",[e._v(e._s(n))]),t("td",[t("input",{directives:[{name:"model",rawName:"v-model",value:e.headers[n],expression:"headers[item]"}],attrs:{type:"text"},domProps:{value:e.headers[n]},on:{enter:e.request,input:function(t){t.target.composing||e.$set(e.headers,n,t.target.value)}}})])])})),0)])],1):e._e(),t(e.headingTag,{tag:"component"},[e._v("Data:")]),e.inputData&&e.inputData.length>0?t("table",[e._m(1),t("tbody",e._l(e.inputData,(function(n,a){return t("tr",{key:"data-"+a},[t("td",[e._v(e._s(n.name))]),t("td",["checkbox"===n.type?t("input",{directives:[{name:"model",rawName:"v-model",value:n.value,expression:"item.value"}],attrs:{type:"checkbox"},domProps:{checked:Array.isArray(n.value)?e._i(n.value,null)>-1:n.value},on:{enter:e.request,change:function(t){var a=n.value,r=t.target,o=!!r.checked;if(Array.isArray(a)){var s=null,i=e._i(a,s);r.checked?i<0&&e.$set(n,"value",a.concat([s])):i>-1&&e.$set(n,"value",a.slice(0,i).concat(a.slice(i+1)))}else e.$set(n,"value",o)}}}):"radio"===n.type?t("input",{directives:[{name:"model",rawName:"v-model",value:n.value,expression:"item.value"}],attrs:{type:"radio"},domProps:{checked:e._q(n.value,null)},on:{enter:e.request,change:function(t){return e.$set(n,"value",null)}}}):t("input",{directives:[{name:"model",rawName:"v-model",value:n.value,expression:"item.value"}],attrs:{type:n.type},domProps:{value:n.value},on:{enter:e.request,input:function(t){t.target.composing||e.$set(n,"value",t.target.value)}}})])])})),0)]):e._e(),t("button",{attrs:{disabled:e.loading},on:{click:function(t){return e.request()}}},[e.loading?t("span",[e._v("Loading")]):t("span",[e._v("Execute")])]),e.response.text?t("div",{staticClass:"vp-playground__response"},[e.response.code?t("span",{staticClass:"vp-playground__status"},[e._v(" Status: "),t("Badge",{attrs:{type:e.response.code<300?"tip":"error",text:""+e.response.code,vertical:"unset"}})],1):e._e(),t("div",{staticClass:"language- extra-class"},[t("pre",{staticClass:"language-text"},[t("code",[e._v(e._s(e.response.text))])])])]):e._e()],1)},i=[function(){var e=this,t=e._self._c;return t("thead",[t("tr",[t("th",[e._v("Key")]),t("th",[e._v("Value")])])])},function(){var e=this,t=e._self._c;return t("thead",[t("tr",[t("th",[e._v("Key")]),t("th",[e._v("Value")])])])}],u={name:"VuepressApiPlayground",data(){return{loading:!1,inputData:[],response:{text:null,code:null}}},props:{url:{type:String,required:!0},method:{type:String,required:!0},data:{type:Array,required:!1},showMethod:{type:Boolean,required:!1,default:!1},showURL:{type:Boolean,required:!1,default:!1},headingTag:{type:String,required:!1,default:"h4"},headers:{type:Object,required:!1,default:null}},mounted(){this.inputData=[...this.data]},methods:{clearResponseData(){this.response={text:null,code:null}},getRequestData(){if(this.inputData){const e={};return this.inputData.forEach(t=>{try{e[t.name]=JSON.parse(t.value)}catch{""!==t.value&&(e[t.name]=t.value)}}),e}return null},getRequestParams(){const e=this.getRequestData();let{url:t}=this;const n=this.method.toLowerCase();let a={method:n};const r=[t.match(/{([a-zA-Z_-]+)}/g),t.match(/<([a-zA-Z_-]+)>/g)];if(r.forEach(n=>{n&&n.forEach(n=>{t=t.replace(n,e[n.slice(1,-1)]),delete e[n.slice(1,-1)]})}),e)if("post"===n||"put"===n||"patch"===n){const t=this.headers||{"Content-Type":"application/json"};a=Object.assign(a,{headers:t,body:JSON.stringify(e)})}else{let n=new URLSearchParams(e).toString();""!==n&&(n="?"+n),t=`${t}${n}`}return{url:t,data:a}},request(){const e=this.getRequestParams();this.clearResponseData(),this.loading=!0,fetch(e.url,e.data).then(e=>(this.loading=!1,this.response.code=e.status?e.status:null,e.json())).then(e=>{this.response.text=e}).catch(e=>{this.loading=!1,this.response.text=e})}}},l=u;function d(e,t,n,a,r,o,s,i){var u,l="function"===typeof e?e.options:e;if(t&&(l.render=t,l.staticRenderFns=n,l._compiled=!0),a&&(l.functional=!0),o&&(l._scopeId="data-v-"+o),s?(u=function(e){e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,e||"undefined"===typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),r&&r.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(s)},l._ssrRegister=u):r&&(u=i?function(){r.call(this,(l.functional?this.parent:this).$root.$options.shadowRoot)}:r),u)if(l.functional){l._injectStyles=u;var d=l.render;l.render=function(e,t){return u.call(t),d(e,t)}}else{var c=l.beforeCreate;l.beforeCreate=c?[].concat(c,u):[u]}return{exports:e,options:l}}var c=d(l,s,i,!1,null,null,null),p=c.exports,f=p;const h={install(e={}){Object.values(a).forEach(t=>{e.component(t.name,t)})}};var v=h;"undefined"!==typeof window&&window.Vue&&window.Vue.use(h);t["default"]=v}})}));
//# sourceMappingURL=VuepressApiPlayground.umd.min.js.map