quasar-ui-example-viewer
Version:
Display Vue code examples with template, script and style parts with optional source and codepen links
644 lines (562 loc) • 20.8 kB
JavaScript
/*!
* quasar-ui-example-viewer v1.1.1
* (c) 2021 Jeff Galbraith <jeff@quasar.dev>
* Released under the MIT License.
*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('quasar'), require('@quasar/quasar-ui-qribbon'), require('@quasar/quasar-ui-qmarkdown')) :
typeof define === 'function' && define.amd ? define(['exports', 'vue', 'quasar', '@quasar/quasar-ui-qribbon', '@quasar/quasar-ui-qmarkdown'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ExampleViewer = {}, global.Vue, global.Quasar, global.QRibbon, global.QMarkdown));
}(this, (function (exports, Vue, quasar, quasarUiQribbon, quasarUiQmarkdown) { 'use strict';
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var Vue__default = /*#__PURE__*/_interopDefaultLegacy(Vue);
var version = "1.1.1";
function slugify (str) {
return encodeURIComponent(String(str).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 data () {
return {
isMounted: false,
active: false,
location: '',
parts: {}
}
},
beforeMount: function beforeMount () {
this.isMounted = true;
this.location = window.location.origin + window.location.pathname;
},
computed: {
cssResources: function cssResources () {
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 jsResources () {
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 css () {
return (this.parts.style || '')
.replace(/(<style.*?>|<\/style>)/g, '')
.replace(/::v-deep /g, '')
.replace(/>>> /g, '')
.replace(/\/deep\/ /g, '')
.trim()
},
cssPreprocessor: function cssPreprocessor () {
var lang = /<style.*lang=["'](.*)["'].*>/
.exec(this.parts.style || '');
return lang ? lang[1] : 'none'
},
js: function js () {
var imports = /(import*) ([^'\n]*) from ([^\n]*)/g;
var component = /export default {([\s\S]*)}/g.exec(this.parts.script || '');
component = ((component && component[1]) || '').trim();
var script = /<script>([\s\S]*)export default {/g.exec(this.parts.script || '');
script = ((script && script[1]) || '')
.replace(imports, '')
.trim();
script += script ? '\n\n' : '';
return script +
"new Vue({\n el: '#q-app',\n " + component + "\n})"
},
html: function html () {
return (this.parts.template || '')
.replace(/(<template>|<\/template>$)/g, '')
.replace(/\n/g, '\n ')
.replace(/([\w]+=")([^"]*?)(")/g, function (match, p1, p2, p3) {
return p1 + p2.replace(/>/g, '___TEMP_REPLACEMENT___') + p3
})
.replace(/<(q-[\w-]+|div)([^>]+?)\/>/g, '<$1$2></$1>')
.replace(/___TEMP_REPLACEMENT___/g, '>')
.replace(/^\s{2}/gm, '')
.trim()
},
editors: function editors () {
var flag = (this.html && 4) | (this.css && 2) | (this.js && 1);
return flag.toString(2)
},
computedTitle: function computedTitle () {
return (this.page ? this.page + ': ' : '') +
(this.title ? this.title + ' - ' : '') +
(this.codepenTitle ? this.codepenTitle : 'Quasar Playground')
},
page: function page () {
var el = this.$parent;
while (el && el.$options && (!el.$options.meta || !el.$options.meta.title)) {
el = el.$parent;
}
return el ? el.$options.meta.title : null
},
options: function options () {
var data = {
title: this.computedTitle,
html:
("<!--\n Forked from:\n " + (this.location) + "#" + (this.slugifiedTitle) + "\n-->\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(data)
}
},
methods: {
open: function open (parts) {
var this$1 = this;
this.parts = parts;
if (this.active) {
this.$el.submit();
return
}
this.active = true;
this.$nextTick(function () {
this$1.$el.submit();
});
}
},
render: function render (h) {
return h('form', {
staticClass: 'hidden',
attrs: {
method: 'POST',
action: 'https://codepen.io/pen/define/',
target: '_blank',
rel: 'noopener'
}
}, [
h('input', {
attrs: {
type: 'hidden',
name: 'data',
value: this.isMounted ? this.options : ''
}
})
])
}
};
var 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';
// const mdiCodepen = 'M8.21 12L6.88 12.89V11.11L8.21 12M11.47 9.82V7.34L7.31 10.12L9.16 11.36L11.47 9.82M16.7 10.12L12.53 7.34V9.82L14.84 11.36L16.7 10.12M7.31 13.88L11.47 16.66V14.18L9.16 12.64L7.31 13.88M12.53 14.18V16.66L16.7 13.88L14.84 12.64L12.53 14.18M12 10.74L10.12 12L12 13.26L13.88 12L12 10.74M22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2C17.5 2 22 6.5 22 12M18.18 10.12C18.18 10.09 18.18 10.07 18.18 10.05L18.17 10L18.17 10L18.16 9.95C18.15 9.94 18.15 9.93 18.14 9.91L18.13 9.89L18.11 9.85L18.1 9.83L18.08 9.8L18.06 9.77L18.03 9.74L18 9.72L18 9.7L17.96 9.68L17.95 9.67L12.3 5.91C12.12 5.79 11.89 5.79 11.71 5.91L6.05 9.67L6.05 9.68L6 9.7C6 9.71 6 9.72 6 9.72L5.97 9.74L5.94 9.77L5.93 9.8L5.9 9.83L5.89 9.85L5.87 9.89L5.86 9.91L5.84 9.95L5.84 10L5.83 10L5.82 10.05C5.82 10.07 5.82 10.09 5.82 10.12V13.88C5.82 13.91 5.82 13.93 5.82 13.95L5.83 14L5.84 14L5.84 14.05C5.85 14.06 5.85 14.07 5.86 14.09L5.87 14.11L5.89 14.15L5.9 14.17L5.92 14.2L5.94 14.23C5.95 14.24 5.96 14.25 5.97 14.26L6 14.28L6 14.3L6.04 14.32L6.05 14.33L11.71 18.1C11.79 18.16 11.9 18.18 12 18.18C12.1 18.18 12.21 18.15 12.3 18.1L17.95 14.33L17.96 14.32L18 14.3L18 14.28L18.03 14.26L18.06 14.23L18.08 14.2L18.1 14.17L18.11 14.15L18.13 14.11L18.14 14.09L18.16 14.05L18.16 14L18.17 14L18.18 13.95C18.18 13.93 18.18 13.91 18.18 13.88V10.12M17.12 12.89V11.11L15.79 12L17.12 12.89Z'
var 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';
var 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';
var 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';
var matDone = 'M0 0h24v24H0z@@fill:none;&&M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z';
var ExampleViewer = {
name: 'ExampleViewer',
props: {
title: {
type: String,
required: true
},
file: {
type: String,
required: true,
validator: function (v) { return v.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 data () {
return {
component: null,
tabs: [],
currentTab: 'template',
parts: {},
expanded: false
}
},
created: function created () {
this.codepen = laCodepen;
this.github = mdiGithub;
this.copy = mdiContentCopy;
this.code = mdiCodeTags;
this.done = matDone;
},
mounted: function mounted () {
var this$1 = this;
import(
/* webpackChunkName: "examples" */
/* webpackMode: "lazy-once" */
("examples/" + (this.file) + ".vue")
).then(function (comp) {
this$1.component = comp.default;
import(
/* webpackChunkName: "examples-source" */
/* webpackMode: "lazy-once" */
("!raw-loader!examples/" + (this$1.file) + ".vue")
).then(function (comp) {
this$1.__parseComponent(comp.default);
});
});
},
computed: {
__slugifiedTitle: function __slugifiedTitle () {
return this.__slugify('example-' + this.title)
}
},
methods: {
__slugify: slugify,
__copyHeading: function __copyHeading () {
var this$1 = this;
if (this.noAnchor === true) {
return
}
if (window && window.location && document) {
var text = window.location.origin + window.location.pathname + '#' + this.__slugifiedTitle;
var el = document.getElementById(this.__slugifiedTitle);
if (el) {
el.id = '';
window.location.hash = '#' + this.__slugifiedTitle;
setTimeout(function () {
el.id = this$1.__slugifiedTitle;
}, 300);
quasar.copyToClipboard(text);
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: 2000
});
}
}
},
__parseComponent: function __parseComponent (comp) {
var this$1 = this;
var
template = this.__parseTemplate('template', comp),
script = this.__parseTemplate('script', comp),
style = this.__parseTemplate('style', comp);
this.parts = {
template: template,
script: script,
style: style
};
this.tabs = ['template', 'script', 'style'].filter(function (type) { return this$1.parts[type]; });
},
__parseTemplate: function __parseTemplate (target, template) {
var
string = "(<" + target + "(.*)?>[\\w\\W]*<\\/" + target + ">)",
regex = new RegExp(string, 'g'),
parsed = regex.exec(template) || [];
return parsed[1] || ''
},
__openLocation: function __openLocation () {
quasar.openURL(((this.locationUrl) + "/" + (this.file) + ".vue"));
},
__openCodepen: function __openCodepen () {
this.$refs.codepen.open(this.parts);
},
__copyTab: function __copyTab (tab) {
quasar.copyToClipboard(this.parts[this.tabs[tab]]);
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: 2000
});
},
__renderRibbon: function __renderRibbon (h) {
return h(quasarUiQribbon.QRibbon, {
props: {
position: 'left',
color: this.ribbonTextColor,
backgroundColor: this.ribbonColor,
leafColor: this.ribbonLeafColor,
leafPosition: 'bottom',
decoration: 'rounded-out'
}
}, [
h(quasar.QToolbarTitle, {
staticClass: this.noAnchor !== true ? 'example-title' : '',
on: {
click: this.__copyHeading
}
}, [
h('span', {
staticClass: 'ellipsis'
}, this.title)
])
])
},
__renderToolbar: function __renderToolbar (h) {
var this$1 = this;
return h(quasar.QToolbar, [
this.__renderRibbon(h),
h(quasar.QSpace),
h('div', {
staticClass: 'col-auto'
}, [
this.locationUrl && h(quasar.QBtn, {
props: {
dense: true,
flat: true,
round: true,
icon: (this.locationIcon ? this.locationIcon : this.github)
},
on: {
click: this.__openLocation
}
}),
this.noEdit !== true && h(quasar.QBtn, {
props: {
dense: true,
flat: true,
round: true,
icon: this.codepen
},
on: {
click: this.__openCodepen
}
}),
h(quasar.QBtn, {
props: {
dense: true,
flat: true,
round: true,
icon: this.code
},
on: {
click: function (v) { this$1.expanded = !this$1.expanded; }
}
}, [
h(quasar.QTooltip, this.tooltipLabel)
])
])
])
},
__renderTabs: function __renderTabs (h) {
var this$1 = this;
return h(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: true,
breakpoint: 0
},
on: {
input: function (v) { this$1.currentTab = v; }
}
}, [].concat( Object.keys(this.tabs).map(function (tab) { return h(quasar.QTab, {
key: ("tab-" + (this$1.tabs[tab])),
props: {
name: this$1.tabs[tab],
label: this$1.tabs[tab]
}
}); }) ))
},
__renderCopy: function __renderCopy (h, tab) {
var this$1 = this;
if (this.noCopy !== true) {
return h(quasar.QBtn, {
staticClass: 'absolute',
style: {
top: '15px',
right: '15px'
},
props: {
color: this.$q.dark.isActive ? 'amber' : 'primary',
dense: true,
flat: true,
round: true,
icon: (this.copyIcon ? this.copyIcon : this.copy)
},
on: {
click: function (v) { this$1.__copyTab(tab); }
}
}, [
h(quasar.QTooltip, this.copyLabel)
])
}
},
__renderTabPanel: function __renderTabPanel (h) {
var this$1 = this;
var type = {};
type.style = '```css\n';
type.template = '```html\n';
type.script = '```js\n';
var end = '\n```';
return [].concat( Object.keys(this.tabs).map(function (tab) { return h(quasar.QTabPanel, {
key: ("panel-" + (this$1.tabs[tab])),
staticClass: 'q-pa-none relative-position',
props: {
name: this$1.tabs[tab]
}
}, [
h(quasarUiQmarkdown.QMarkdown, {
staticClass: '',
props: {
noLineNumbers: this$1.noLineNumbers
}
}, [
("" + (type[this$1.tabs[tab]]) + (this$1.parts[this$1.tabs[tab]]) + end)
]),
this$1.__renderCopy(h, tab)
]); }) )
},
__renderTabPanels: function __renderTabPanels (h) {
var this$1 = this;
return h(quasar.QTabPanels, {
props: {
value: this.currentTab,
animated: true
},
on: {
input: function (v) { this$1.currentTab = v; }
}
}, [
this.__renderTabPanel(h)
])
},
__renderInnerCard: function __renderInnerCard (h) {
return h(quasar.QCard, [
this.__renderTabs(h),
this.__renderTabPanels(h)
])
},
__renderExpansionItem: function __renderExpansionItem (h) {
return h(quasar.QSlideTransition, [
this.expanded && h('div', {
}, [
this.__renderInnerCard(h)
])
])
},
__renderComponent: function __renderComponent (h) {
return h('div', {
staticClass: 'row'
}, [
h(this.component, {
staticClass: 'col'
})
])
},
__renderSlot: function __renderSlot (h, slot) {
return h(quasar.QCardSection, [
slot()
])
},
__renderCard: function __renderCard (h) {
var slot = this.$scopedSlots.default;
return h(quasar.QCard, {
staticClass: 'no-shadow',
props: {
flat: true,
bordered: true,
}
}, [
this.__renderToolbar(h),
h(quasar.QSeparator),
this.__renderExpansionItem(h),
slot ? this.__renderSlot(h, slot) : void 0,
slot ? h(quasar.QSeparator) : void 0,
h(quasar.QCardSection, {
staticClass: 'no-shadow',
style: {
padding: 0
}
}, [
this.__renderComponent(h)
])
])
},
__renderCodepen: function __renderCodepen (h) {
return h(Codepen, {
ref: 'codepen',
props: {
codepenTitle: this.codepenTitle,
title: this.title,
slugifiedTitle: this.__slugifiedTitle,
jsPaths: this.jsPaths,
cssPaths: this.cssPaths
}
})
}
},
render: function render (h) {
return h('section', {
staticClass: 'q-pa-md overflow-auto',
attrs: {
id: this.__slugifiedTitle
}
}, [
this.__renderCard(h),
this.__renderCodepen(h)
])
}
};
var Plugin = {
version: version,
ExampleViewer: ExampleViewer,
install: function install (Vue) {
Vue.component(ExampleViewer.name, ExampleViewer);
}
};
Vue__default['default'].use(Plugin);
exports.ExampleViewer = ExampleViewer;
exports.version = version;
Object.defineProperty(exports, '__esModule', { value: true });
})));