quasar-ui-example-viewer/dist/index.common.js

Display Vue code examples with template, script and style parts with optional source and codepen links

/*!
 * quasar-ui-example-viewer v1.1.1
 * (c) 2021 Jeff Galbraith <jeff@quasar.dev>
 * Released under the MIT License.
 */
"use strict";var quasar=require("quasar"),quasarUiQribbon=require("@quasar/quasar-ui-qribbon"),quasarUiQmarkdown=require("@quasar/quasar-ui-qmarkdown");function _interopNamespace(t){if(t&&t.__esModule)return t;var e=Object.create(null);return t&&Object.keys(t).forEach(function(i){if("default"!==i){var n=Object.getOwnPropertyDescriptor(t,i);Object.defineProperty(e,i,n.get?n:{enumerable:!0,get:function(){return t[i]}})}}),e.default=t,Object.freeze(e)}var version="1.1.1";function slugify(t){return encodeURIComponent(String(t).trim().replace(/\s+/g,"-"))}var Codepen={name:"Codepen",props:{title:String,codepenTitle:{type:String,default:"Quasar Playground"},slugifiedTitle:String,jsPaths:Array,cssPaths:Array},data:function(){return{isMounted:!1,active:!1,location:"",parts:{}}},beforeMount:function(){this.isMounted=!0,this.location=window.location.origin+window.location.pathname},computed:{cssResources:function(){return["https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons","https://cdn.jsdelivr.net/npm/quasar@latest/dist/quasar.min.css"].concat(this.cssPaths).join(";")},jsResources:function(){return["https://cdn.jsdelivr.net/npm/vue/dist/vue.js","https://cdn.jsdelivr.net/npm/quasar@latest/dist/quasar.umd.min.js"].concat(this.jsPaths).join(";")},css:function(){return(this.parts.style||"").replace(/(<style.*?>|<\/style>)/g,"").replace(/::v-deep /g,"").replace(/>>> /g,"").replace(/\/deep\/ /g,"").trim()},cssPreprocessor:function(){var t=/<style.*lang=["'](.*)["'].*>/.exec(this.parts.style||"");return t?t[1]:"none"},js:function(){var t=/export default {([\s\S]*)}/g.exec(this.parts.script||"");t=(t&&t[1]||"").trim();var e=/<script>([\s\S]*)export default {/g.exec(this.parts.script||"");return e=(e&&e[1]||"").replace(/(import*) ([^'\n]*) from ([^\n]*)/g,"").trim(),(e+=e?"\n\n":"")+"new Vue({\n  el: '#q-app',\n  "+t+"\n})"},html:function(){return(this.parts.template||"").replace(/(<template>|<\/template>$)/g,"").replace(/\n/g,"\n  ").replace(/([\w]+=")([^"]*?)(")/g,function(t,e,i,n){return e+i.replace(/>/g,"___TEMP_REPLACEMENT___")+n}).replace(/<(q-[\w-]+|div)([^>]+?)\/>/g,"<$1$2></$1>").replace(/___TEMP_REPLACEMENT___/g,">").replace(/^\s{2}/gm,"").trim()},editors:function(){return((this.html&&4)|(this.css&&2)|(this.js&&1)).toString(2)},computedTitle:function(){return(this.page?this.page+": ":"")+(this.title?this.title+" - ":"")+(this.codepenTitle?this.codepenTitle:"Quasar Playground")},page:function(){for(var t=this.$parent;t&&t.$options&&(!t.$options.meta||!t.$options.meta.title);)t=t.$parent;return t?t.$options.meta.title:null},options:function(){var t={title:this.computedTitle,html:"\x3c!--\n  Forked from:\n  "+this.location+"#"+this.slugifiedTitle+'\n--\x3e\n<div id="q-app">\n  '+this.html+"\n</div>",css:this.css,css_pre_processor:this.cssPreprocessor,css_external:this.cssResources,js:this.js,js_pre_processor:"babel",js_external:this.jsResources,editors:this.editors};return JSON.stringify(t)}},methods:{open:function(t){var e=this;this.parts=t,this.active?this.$el.submit():(this.active=!0,this.$nextTick(function(){e.$el.submit()}))}},render:function(t){return t("form",{staticClass:"hidden",attrs:{method:"POST",action:"https://codepen.io/pen/define/",target:"_blank",rel:"noopener"}},[t("input",{attrs:{type:"hidden",name:"data",value:this.isMounted?this.options:""}})])}},mdiGithub="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z",mdiContentCopy="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z",mdiCodeTags="M14.6,16.6L19.2,12L14.6,7.4L16,6L22,12L16,18L14.6,16.6M9.4,16.6L4.8,12L9.4,7.4L8,6L2,12L8,18L9.4,16.6Z",laCodepen="M 16 2.84375 L 15.4375 3.21875 L 3.4375 11.25 L 3 11.53125 L 3 20.46875 L 3.4375 20.75 L 15.4375 28.78125 L 16 29.15625 L 16.5625 28.78125 L 28.5625 20.75 L 29 20.46875 L 29 11.53125 L 28.5625 11.25 L 16.5625 3.21875 Z M 15 5.90625 L 15 11.34375 L 9.84375 14.8125 L 5.8125 12.09375 Z M 17 5.90625 L 26.1875 12.09375 L 22.15625 14.8125 L 17 11.34375 Z M 16 13.09375 L 20.34375 16 L 16 18.90625 L 11.65625 16 Z M 5 13.9375 L 8.0625 16 L 5 18.0625 Z M 27 13.9375 L 27 18.0625 L 23.9375 16 Z M 9.875 17.1875 L 15 20.65625 L 15 26.09375 L 5.8125 19.90625 Z M 22.125 17.1875 L 26.1875 19.90625 L 17 26.09375 L 17 20.65625 Z|0 0 32 32",matDone="M0 0h24v24H0z@@fill:none;&&M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z",ExampleViewer={name:"ExampleViewer",props:{title:{type:String,required:!0},file:{type:String,required:!0,validator:function(t){return t.length>0}},codepenTitle:String,jsPaths:Array,cssPaths:Array,tooltipLabel:{type:String,default:"View sources"},ribbonColor:{type:String,default:"#c0c0c0"},ribbonTextColor:{type:String,default:"rgb(0,0,0,.58)"},ribbonLeafColor:{type:String,default:"#a0a0a0"},locationUrl:String,locationIcon:{type:String},noEdit:Boolean,noCopy:Boolean,copyIcon:String,copyLabel:{type:String,default:"Copy to clipboard"},copyResponse:{type:String,default:"Copied to clipboard"},noLineNumbers:Boolean,noAnchor:Boolean,anchorResponse:{type:String,default:"Anchor copied to clipboard"}},data:function(){return{component:null,tabs:[],currentTab:"template",parts:{},expanded:!1}},created:function(){this.codepen=laCodepen,this.github=mdiGithub,this.copy=mdiContentCopy,this.code=mdiCodeTags,this.done=matDone},mounted:function(){var t=this;Promise.resolve().then(function(){return _interopNamespace(require("examples/"+this.file+".vue"))}).then(function(e){t.component=e.default,Promise.resolve().then(function(){return _interopNamespace(require("!raw-loader!examples/"+t.file+".vue"))}).then(function(e){t.__parseComponent(e.default)})})},computed:{__slugifiedTitle:function(){return this.__slugify("example-"+this.title)}},methods:{__slugify:slugify,__copyHeading:function(){var t=this;if(!0!==this.noAnchor&&window&&window.location&&document){var e=window.location.origin+window.location.pathname+"#"+this.__slugifiedTitle,i=document.getElementById(this.__slugifiedTitle);i&&(i.id="",window.location.hash="#"+this.__slugifiedTitle,setTimeout(function(){i.id=t.__slugifiedTitle},300),quasar.copyToClipboard(e),this.$q.notify({message:this.anchorResponse,color:this.$q.dark.isActive?"grey-10":"white",textColor:this.$q.dark.isActive?"amber":"primary",icon:this.done,position:"top",timeout:2e3}))}},__parseComponent:function(t){var e=this,i=this.__parseTemplate("template",t),n=this.__parseTemplate("script",t),r=this.__parseTemplate("style",t);this.parts={template:i,script:n,style:r},this.tabs=["template","script","style"].filter(function(t){return e.parts[t]})},__parseTemplate:function(t,e){return(new RegExp("(<"+t+"(.*)?>[\\w\\W]*<\\/"+t+">)","g").exec(e)||[])[1]||""},__openLocation:function(){quasar.openURL(this.locationUrl+"/"+this.file+".vue")},__openCodepen:function(){this.$refs.codepen.open(this.parts)},__copyTab:function(t){quasar.copyToClipboard(this.parts[this.tabs[t]]),this.$q.notify({message:this.copyResponse,color:this.$q.dark.isActive?"grey-10":"white",textColor:this.$q.dark.isActive?"amber":"primary",icon:"done",position:"top",timeout:2e3})},__renderRibbon:function(t){return t(quasarUiQribbon.QRibbon,{props:{position:"left",color:this.ribbonTextColor,backgroundColor:this.ribbonColor,leafColor:this.ribbonLeafColor,leafPosition:"bottom",decoration:"rounded-out"}},[t(quasar.QToolbarTitle,{staticClass:!0!==this.noAnchor?"example-title":"",on:{click:this.__copyHeading}},[t("span",{staticClass:"ellipsis"},this.title)])])},__renderToolbar:function(t){var e=this;return t(quasar.QToolbar,[this.__renderRibbon(t),t(quasar.QSpace),t("div",{staticClass:"col-auto"},[this.locationUrl&&t(quasar.QBtn,{props:{dense:!0,flat:!0,round:!0,icon:this.locationIcon?this.locationIcon:this.github},on:{click:this.__openLocation}}),!0!==this.noEdit&&t(quasar.QBtn,{props:{dense:!0,flat:!0,round:!0,icon:this.codepen},on:{click:this.__openCodepen}}),t(quasar.QBtn,{props:{dense:!0,flat:!0,round:!0,icon:this.code},on:{click:function(t){e.expanded=!e.expanded}}},[t(quasar.QTooltip,this.tooltipLabel)])])])},__renderTabs:function(t){var e=this;return t(quasar.QTabs,{staticClass:"text-caption"+(this.$q.dark.isActive?"":" bg-grey-2 text-grey-7"),props:{value:this.currentTab,align:"left",activeColor:this.$q.dark.isActive?"amber":void 0,indicatorColor:this.$q.dark.isActive?"amber":"primary",dense:!0,breakpoint:0},on:{input:function(t){e.currentTab=t}}},[].concat(Object.keys(this.tabs).map(function(i){return t(quasar.QTab,{key:"tab-"+e.tabs[i],props:{name:e.tabs[i],label:e.tabs[i]}})})))},__renderCopy:function(t,e){var i=this;if(!0!==this.noCopy)return t(quasar.QBtn,{staticClass:"absolute",style:{top:"15px",right:"15px"},props:{color:this.$q.dark.isActive?"amber":"primary",dense:!0,flat:!0,round:!0,icon:this.copyIcon?this.copyIcon:this.copy},on:{click:function(t){i.__copyTab(e)}}},[t(quasar.QTooltip,this.copyLabel)])},__renderTabPanel:function(t){var e=this,i={style:"```css\n",template:"```html\n",script:"```js\n"};return[].concat(Object.keys(this.tabs).map(function(n){return t(quasar.QTabPanel,{key:"panel-"+e.tabs[n],staticClass:"q-pa-none relative-position",props:{name:e.tabs[n]}},[t(quasarUiQmarkdown.QMarkdown,{staticClass:"",props:{noLineNumbers:e.noLineNumbers}},[""+i[e.tabs[n]]+e.parts[e.tabs[n]]+"\n```"]),e.__renderCopy(t,n)])}))},__renderTabPanels:function(t){var e=this;return t(quasar.QTabPanels,{props:{value:this.currentTab,animated:!0},on:{input:function(t){e.currentTab=t}}},[this.__renderTabPanel(t)])},__renderInnerCard:function(t){return t(quasar.QCard,[this.__renderTabs(t),this.__renderTabPanels(t)])},__renderExpansionItem:function(t){return t(quasar.QSlideTransition,[this.expanded&&t("div",{},[this.__renderInnerCard(t)])])},__renderComponent:function(t){return t("div",{staticClass:"row"},[t(this.component,{staticClass:"col"})])},__renderSlot:function(t,e){return t(quasar.QCardSection,[e()])},__renderCard:function(t){var e=this.$scopedSlots.default;return t(quasar.QCard,{staticClass:"no-shadow",props:{flat:!0,bordered:!0}},[this.__renderToolbar(t),t(quasar.QSeparator),this.__renderExpansionItem(t),e?this.__renderSlot(t,e):void 0,e?t(quasar.QSeparator):void 0,t(quasar.QCardSection,{staticClass:"no-shadow",style:{padding:0}},[this.__renderComponent(t)])])},__renderCodepen:function(t){return t(Codepen,{ref:"codepen",props:{codepenTitle:this.codepenTitle,title:this.title,slugifiedTitle:this.__slugifiedTitle,jsPaths:this.jsPaths,cssPaths:this.cssPaths}})}},render:function(t){return t("section",{staticClass:"q-pa-md overflow-auto",attrs:{id:this.__slugifiedTitle}},[this.__renderCard(t),this.__renderCodepen(t)])}},Plugin={version:version,ExampleViewer:ExampleViewer,install:function(t){t.component(ExampleViewer.name,ExampleViewer)}};module.exports=Plugin;