Update to Kirby 5

kirby/panel/dist/js/DocsView.min.js

@@ -1 +1 @@
-import{D as t}from"./Docs.min.js";import{n as s}from"./index.min.js";import"./vendor.min.js";const o=s({components:{"k-lab-docs":t},props:{component:String,docs:Object,lab:String},mounted(){},methods:{reloadDocs(){this.$panel.view.refresh()}}},(function(){var t=this,s=t._self._c;return s("k-panel-inside",{staticClass:"k-lab-docs-view"},[s("k-header",[t._v(" "+t._s(t.component)+" "),t.docs.github||t.lab?s("k-button-group",{attrs:{slot:"buttons"},slot:"buttons"},[t.lab?s("k-button",{attrs:{icon:"lab",text:"Lab examples",size:"sm",variant:"filled",link:"/lab/"+t.lab}}):t._e(),t.docs.github?s("k-button",{attrs:{icon:"github",size:"sm",variant:"filled",link:t.docs.github,target:"_blank"}}):t._e()],1):t._e()],1),s("k-lab-docs",t._b({},"k-lab-docs",t.docs,!1))],1)}),[]).exports;export{o as default};
+import{D as t}from"./Docs.min.js";import{n as o}from"./index.min.js";import"vue";import"./vendor.min.js";const s=o({components:{"k-lab-docs":t},props:{buttons:Array,component:String,docs:Object,lab:String},mounted(){},methods:{reloadDocs(){this.$panel.view.refresh()}}},function(){var t=this,o=t._self._c;return o("k-panel-inside",{staticClass:"k-lab-docs-view",scopedSlots:t._u([{key:"topbar",fn:function(){return[o("k-theme-view-button",{attrs:{text:null,variant:null,size:"xs"}})]},proxy:!0}])},[o("k-header",{scopedSlots:t._u([{key:"buttons",fn:function(){return[o("k-view-buttons",{attrs:{buttons:t.buttons}})]},proxy:!0}])},[t._v(" "+t._s(t.component)+" ")]),o("k-lab-docs",t._b({},"k-lab-docs",t.docs,!1))],1)},[]).exports;export{s as default};

kirby/panel/dist/js/IndexView.min.js

@@ -1 +1 @@
-import{n as e}from"./index.min.js";import"./vendor.min.js";const t=e({props:{categories:Array,info:String,tab:String}},(function(){var e=this,t=e._self._c;return t("k-panel-inside",{staticClass:"k-lab-index-view"},[t("k-header",[e._v("Lab")]),t("k-tabs",{attrs:{tab:e.tab,tabs:[{name:"examples",label:"Examples",link:"/lab"},{name:"docs",label:"Docs",link:"/lab/docs"}]}}),e.info?t("k-box",{attrs:{icon:"question",theme:"info",text:e.info,html:!0}}):e._e(),e._l(e.categories,(function(e){return t("k-section",{key:e.name,attrs:{headline:e.name}},[t("k-collection",{attrs:{items:e.examples,empty:{icon:e.icon,text:"Add examples to "+e.path}}})],1)}))],2)}),[]).exports;export{t as default};
+import{n as e}from"./index.min.js";import"vue";import"./vendor.min.js";const t=e({props:{categories:Array,info:String,tab:String},data:()=>({q:""}),computed:{filteredCategories(){if(!this.q)return this.categories;const e=this.$helper.object.clone(this.categories),t=this.q.toLowerCase();for(const n of e)n.examples=n.examples.filter(e=>e.text.toLowerCase().includes(t));return e.filter(e=>e.examples.length>0)}}},function(){var e=this,t=e._self._c;return t("k-panel-inside",{staticClass:"k-lab-index-view",scopedSlots:e._u([{key:"topbar",fn:function(){return[t("k-theme-view-button",{attrs:{text:null,variant:null,size:"xs"}})]},proxy:!0}])},[t("k-header",{scopedSlots:e._u([{key:"buttons",fn:function(){return[t("k-input",{attrs:{type:"search",icon:"search",placeholder:e.$t("filter")+" …",value:e.q},on:{input:function(t){e.q=t}}})]},proxy:!0}])},[e._v(" Lab ")]),t("k-tabs",{attrs:{tab:e.tab,tabs:[{name:"examples",label:"Examples",link:"/lab"},{name:"docs",label:"Docs",link:"/lab/docs"}]}}),e.info?t("k-box",{attrs:{icon:"question",theme:"info",text:e.info,html:!0}}):e._e(),e._l(e.filteredCategories,function(e){return t("k-section",{key:e.name,attrs:{headline:e.name}},[t("k-collection",{attrs:{items:e.examples,empty:{icon:e.icon,text:"Add examples to "+e.path}}})],1)})],2)},[]).exports;export{t as default};

kirby/panel/dist/js/PlaygroundView.min.js

@@ -1 +1 @@
-import{D as t}from"./Docs.min.js";import{n as e}from"./index.min.js";import"./vendor.min.js";const a=e({props:{docs:Object},emits:["cancel"],computed:{options(){const t=[{icon:"expand",link:"lab/docs/"+this.docs.component}];return this.docs.github&&t.unshift({icon:"github",link:this.docs.github,target:"_blank"}),t}}},(function(){var t=this,e=t._self._c;return e("k-drawer",t._b({ref:"drawer",staticClass:"k-form-drawer",attrs:{options:t.options},on:{submit:function(e){return t.$emit("cancel")}}},"k-drawer",t.$attrs,!1),[e("k-lab-docs",t._b({},"k-lab-docs",t.docs,!1))],1)}),[]).exports;const o=e({props:{code:{type:Boolean,default:!0},label:String,flex:Boolean},data:()=>({mode:"preview"}),computed:{component(){return window.UiExamples[this.label]}}},(function(){var t=this,e=t._self._c;return e("div",{staticClass:"k-lab-example",attrs:{"data-flex":t.flex,tabindex:"0"}},[e("header",{staticClass:"k-lab-example-header"},[e("h3",{staticClass:"k-lab-example-label"},[t._v(t._s(t.label))]),t.code?e("k-button-group",{staticClass:"k-lab-example-inspector",attrs:{layout:"collapsed"}},[e("k-button",{attrs:{theme:"preview"===t.mode?"info":null,icon:"preview",size:"xs",title:"Preview"},on:{click:function(e){t.mode="preview"}}}),e("k-button",{attrs:{theme:"inspect"===t.mode?"info":null,icon:"code",size:"xs",title:"Vue code"},on:{click:function(e){t.mode="inspect"}}})],1):t._e()],1),"preview"===t.mode?e("div",{staticClass:"k-lab-example-canvas"},[t._t("default")],2):t._e(),"inspect"===t.mode?e("div",{staticClass:"k-lab-example-code"},[e("k-code",{attrs:{language:"html"}},[t._v(t._s(t.component))])],1):t._e()])}),[]).exports;const s=e({},(function(){return(0,this._self._c)("div",{staticClass:"k-lab-examples"},[this._t("default")],2)}),[]).exports;const n=e({methods:{submit(t){const e=Object.fromEntries(new FormData(t));this.$panel.dialog.open({component:"k-lab-output-dialog",props:{code:JSON.stringify(e,null,2)}})}}},(function(){var t=this,e=t._self._c;return e("form",{staticClass:"k-lab-form",on:{submit:function(e){return e.preventDefault(),t.submit(e.target)}}},[t._t("default"),e("footer",[e("k-button",{attrs:{type:"submit",icon:"check",theme:"positive",variant:"filled"}},[t._v(" Submit ")])],1)],2)}),[]).exports;const i=e({props:{code:String,language:{default:"js",type:String}},emits:["cancel"]},(function(){var t=this,e=t._self._c;return e("k-dialog",t._b({attrs:{size:"large","cancel-button":!1,"submit-button":!1},on:{cancel:function(e){return t.$emit("cancel")}}},"k-dialog",t.$attrs,!1),[e("k-code",{attrs:{language:t.language}},[t._v(t._s(t.code))])],1)}),[]).exports;const l=e({},(function(){var t=this._self._c;return t("div",{staticClass:"k-table"},[t("table",[t("tbody",[t("tr",[t("td",{staticClass:"k-table-cell",attrs:{"data-mobile":"true"}},[this._t("default")],2)])])])])}),[]).exports;Vue.component("k-lab-docs",t),Vue.component("k-lab-docs-drawer",a),Vue.component("k-lab-example",o),Vue.component("k-lab-examples",s),Vue.component("k-lab-form",n),Vue.component("k-lab-output-dialog",i),Vue.component("k-lab-table-cell",l);const r=e({props:{compiler:Boolean,docs:String,examples:[Object,Array],file:String,github:String,props:[Object,Array],styles:String,tab:String,tabs:{type:Array,default:()=>[]},template:String,title:String},data:()=>({component:null}),watch:{tab:{handler(){this.createComponent()},immediate:!0}},mounted(){this.$panel.view.path.replace(/lab\//,"")},methods:{async createComponent(){if(!this.file)return;const{default:t}=await import(this.$panel.url(this.file)+"?cache="+Date.now());t.template=this.template,this.component={...t},window.UiExamples=this.examples},openDocs(){this.$panel.drawer.open(`lab/docs/${this.docs}`)},async reloadComponent(){await this.$panel.view.refresh(),this.createComponent()},reloadDocs(){this.$panel.drawer.isOpen&&this.$panel.drawer.refresh()}}},(function(){var t=this,e=t._self._c;return e("k-panel-inside",{staticClass:"k-lab-playground-view",attrs:{"data-has-tabs":t.tabs.length>1}},[e("k-header",{scopedSlots:t._u([{key:"buttons",fn:function(){return[t.docs||t.github?e("k-button-group",[t.docs?e("k-button",{attrs:{text:t.docs,icon:"book",size:"sm",variant:"filled"},on:{click:t.openDocs}}):t._e(),t.github?e("k-button",{attrs:{link:t.github,icon:"github",size:"sm",target:"_blank",variant:"filled"}}):t._e()],1):t._e()]},proxy:!0}])},[t._v(" "+t._s(t.title)+" ")]),e("k-tabs",{attrs:{tab:t.tab,tabs:t.tabs}}),!1===t.compiler?e("k-box",{attrs:{theme:"info"}},[t._v(" The Vue template compiler must be enabled to show lab examples ")]):[t.component?e(t.component,t._b({tag:"component"},"component",t.props,!1)):t._e(),t.styles?e("style",{tag:"component",domProps:{innerHTML:t._s(t.styles)}}):t._e()]],2)}),[]).exports;export{r as default};
+import t from"vue";import{D as e}from"./Docs.min.js";import{n as a}from"./index.min.js";import"./vendor.min.js";const o=a({props:{docs:Object},emits:["cancel"],computed:{options(){const t=[{icon:"expand",link:"lab/docs/"+this.docs.component}];return this.docs.github&&t.unshift({icon:"github",link:this.docs.github,target:"_blank"}),t}}},function(){var t=this,e=t._self._c;return e("k-drawer",t._b({ref:"drawer",staticClass:"k-form-drawer",attrs:{options:t.options},on:{submit:function(e){return t.$emit("cancel")}}},"k-drawer",t.$attrs,!1),[e("k-lab-docs",t._b({},"k-lab-docs",t.docs,!1))],1)},[]).exports;const s=a({props:{code:{type:Boolean,default:!0},label:String,flex:Boolean},data:()=>({mode:"preview"}),computed:{component(){return window.UiExamples[this.label]}}},function(){var t=this,e=t._self._c;return e("div",{staticClass:"k-lab-example",attrs:{"data-flex":t.flex,tabindex:"0"}},[e("header",{staticClass:"k-lab-example-header"},[e("h3",{staticClass:"k-lab-example-label"},[t._v(t._s(t.label))]),t.code?e("k-button-group",{staticClass:"k-lab-example-inspector",attrs:{layout:"collapsed"}},[e("k-button",{attrs:{theme:"preview"===t.mode?"info":null,icon:"preview",size:"xs",title:"Preview"},on:{click:function(e){t.mode="preview"}}}),e("k-button",{attrs:{theme:"inspect"===t.mode?"info":null,icon:"code",size:"xs",title:"Vue code"},on:{click:function(e){t.mode="inspect"}}})],1):t._e()],1),"preview"===t.mode?e("div",{staticClass:"k-lab-example-canvas"},[t._t("default")],2):t._e(),"inspect"===t.mode?e("div",{staticClass:"k-lab-example-code"},[e("k-code",{attrs:{language:"html"}},[t._v(t._s(t.component))])],1):t._e()])},[]).exports;const n=a({},function(){return(0,this._self._c)("div",{staticClass:"k-lab-examples"},[this._t("default")],2)},[]).exports;const i=a({methods:{submit(t){const e=Object.fromEntries(new FormData(t));this.$panel.dialog.open({component:"k-lab-output-dialog",props:{code:JSON.stringify(e,null,2)}})}}},function(){var t=this,e=t._self._c;return e("form",{staticClass:"k-lab-form",on:{submit:function(e){return e.preventDefault(),t.submit(e.target)}}},[t._t("default"),e("footer",[e("k-button",{attrs:{type:"submit",icon:"check",theme:"positive",variant:"filled"}},[t._v(" Submit ")])],1)],2)},[]).exports;const l=a({props:{code:String,language:{default:"js",type:String}},emits:["cancel"]},function(){var t=this,e=t._self._c;return e("k-dialog",t._b({attrs:{size:"large","cancel-button":!1,"submit-button":!1},on:{cancel:function(e){return t.$emit("cancel")}}},"k-dialog",t.$attrs,!1),[e("k-code",{attrs:{language:t.language}},[t._v(t._s(t.code))])],1)},[]).exports;const r=a({},function(){var t=this._self._c;return t("div",{staticClass:"k-table"},[t("table",[t("tbody",[t("tr",[t("td",{staticClass:"k-table-cell",attrs:{"data-mobile":"true"}},[this._t("default")],2)])])])])},[]).exports;t.component("k-lab-docs",e),t.component("k-lab-docs-drawer",o),t.component("k-lab-example",s),t.component("k-lab-examples",n),t.component("k-lab-form",i),t.component("k-lab-output-dialog",l),t.component("k-lab-table-cell",r);const c=a({props:{buttons:Array,compiler:Boolean,docs:String,examples:[Object,Array],file:String,github:String,props:[Object,Array],styles:String,tab:String,tabs:{type:Array,default:()=>[]},template:String,title:String},data:()=>({component:null}),watch:{tab:{handler(){this.createComponent()},immediate:!0}},mounted(){this.$panel.view.path.replace(/lab\//,"")},methods:{async createComponent(){if(!this.file)return;const{default:t}=await import(this.$panel.url(this.file)+"?cache="+Date.now());t.template=this.template,this.component={...t},window.UiExamples=this.examples},async reloadComponent(){await this.$panel.view.refresh(),this.createComponent()},reloadDocs(){this.$panel.drawer.isOpen&&this.$panel.drawer.refresh()}}},function(){var t=this,e=t._self._c;return e("k-panel-inside",{staticClass:"k-lab-playground-view",scopedSlots:t._u([{key:"topbar",fn:function(){return[e("k-theme-view-button",{attrs:{text:null,variant:null,size:"xs"}})]},proxy:!0}])},[e("k-header",{staticClass:"k-lab-playground-header",scopedSlots:t._u([{key:"buttons",fn:function(){return[e("k-view-buttons",{attrs:{buttons:t.buttons}})]},proxy:!0}])},[t._v(" "+t._s(t.title)+" ")]),e("k-tabs",{attrs:{tab:t.tab,tabs:t.tabs}}),!1===t.compiler?e("k-box",{attrs:{theme:"info"}},[t._v(" The Vue template compiler must be enabled to show lab examples ")]):[t.component?e(t.component,t._b({tag:"component"},"component",t.props,!1)):t._e(),t.styles?e("style",{tag:"component",domProps:{innerHTML:t._s(t.styles)}}):t._e()]],2)},[]).exports;export{c as default};

kirby/panel/dist/js/plugins.js

@@ -1,3 +1,112 @@
+import Vue, {
+	computed,
+	customRef,
+	defineAsyncComponent,
+	defineComponent,
+	effectScope,
+	getCurrentInstance,
+	getCurrentScope,
+	inject,
+	isProxy,
+	isReactive,
+	isReadonly,
+	isRef,
+	isShallow,
+	markRaw,
+	nextTick,
+	onActivated,
+	onBeforeMount,
+	onBeforeUnmount,
+	onBeforeUpdate,
+	onDeactivated,
+	onErrorCaptured,
+	onMounted,
+	onRenderTracked,
+	onRenderTriggered,
+	onScopeDispose,
+	onServerPrefetch,
+	onUnmounted,
+	onUpdated,
+	provide,
+	proxyRefs,
+	readonly,
+	ref,
+	shallowReactive,
+	shallowReadonly,
+	shallowRef,
+	toRaw,
+	toRef,
+	toRefs,
+	triggerRef,
+	unref,
+	useAttrs,
+	useCssModule,
+	useCssVars,
+	useListeners,
+	useSlots,
+	watch,
+	watchEffect,
+	watchPostEffect,
+	watchSyncEffect
+} from "vue";
+
+// Assign Vue to the global window object
+window.Vue = Vue;
+
+// Keep named exports on the Vue constructor (like UMD build in Kirby 4)
+// TODO: Remove this when Panel plugins are loaded as ES modules (Kirby 6)
+Object.assign(Vue, {
+	computed,
+	customRef,
+	defineAsyncComponent,
+	defineComponent,
+	effectScope,
+	getCurrentInstance,
+	getCurrentScope,
+	inject,
+	isProxy,
+	isReactive,
+	isReadonly,
+	isRef,
+	isShallow,
+	markRaw,
+	nextTick,
+	onActivated,
+	onBeforeMount,
+	onBeforeUnmount,
+	onBeforeUpdate,
+	onDeactivated,
+	onErrorCaptured,
+	onMounted,
+	onRenderTracked,
+	onRenderTriggered,
+	onScopeDispose,
+	onServerPrefetch,
+	onUnmounted,
+	onUpdated,
+	provide,
+	proxyRefs,
+	readonly,
+	ref,
+	shallowReactive,
+	shallowReadonly,
+	shallowRef,
+	toRaw,
+	toRef,
+	toRefs,
+	triggerRef,
+	unref,
+	useAttrs,
+	useCssModule,
+	useCssVars,
+	useListeners,
+	useSlots,
+	watch,
+	watchEffect,
+	watchPostEffect,
+	watchSyncEffect
+});
+
 window.panel = window.panel ?? {};
 window.panel.plugins = {
 	components: {},
@@ -7,6 +116,7 @@ window.panel.plugins = {
 	textareaButtons: {},
 	thirdParty: {},
 	use: [],
+	viewButtons: {},
 	views: {},
 	writerMarks: {},
 	writerNodes: {}
@@ -48,6 +158,11 @@ window.panel.plugin = function (plugin, extensions) {
 		};
 	});
 
+	// View Buttons
+	resolve(extensions, "viewButtons", (name, options) => {
+		window.panel.plugins.components[`k-${name}-view-button`] = options;
+	});
+
 	// `Vue.use`
 	resolve(extensions, "use", (name, options) => {
 		window.panel.plugins.use.push(options);