├── .babelrc ├── .github └── FUNDING.yml ├── .gitignore ├── CHANGELOG.md ├── PREVIEW.png ├── README.md ├── composer.json ├── composer.lock ├── index.css ├── index.js ├── index.php ├── lib ├── Builder.php └── BuilderBlueprint.php ├── package-lock.json ├── package.json ├── sandbox ├── assets │ └── css │ │ └── blocks │ │ ├── events.css │ │ └── quote.css └── site │ └── snippets │ └── blocks │ ├── events.php │ └── quote.php ├── src ├── components │ ├── BuilderBlock.vue │ ├── BuilderField.vue │ └── BuilderPreview.vue └── index.js └── templates └── snippet-wrapper.php /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env"] 3 | } -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | custom: ['https://paypal.me/TimOetting/10'] 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Numerous always-ignore extensions 2 | *.diff 3 | *.err 4 | *.log 5 | *.orig 6 | *.rej 7 | *.swo 8 | *.swp 9 | *.vi 10 | *.zip 11 | *~ 12 | 13 | # OS folders 14 | ._* 15 | .cache 16 | .DS_Store 17 | Thumbs.db 18 | 19 | # Folders to ignore 20 | /node_modules 21 | 22 | # Composer 23 | .composer.lock -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | All notable changes to this project will be documented in this file. 3 | 4 | ## [2.0.16] - 2020-11-19 5 | ### Added 6 | - This ChangeLog (Better late then never) 7 | ### Fixed 8 | - Fixed Validation for required fields -------------------------------------------------------------------------------- /PREVIEW.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TimOetting/kirby-builder/24d1e4bc6d6694156d1bab332b327a28b8d4f3ee/PREVIEW.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Kirby Builder (deprecated) 2 | 3 | ⚠️⚠️⚠️ 4 | 5 | **This Plugin is deprecated and is no longer maintained, as its functionality can be replaced by the native [Blocks Field](https://getkirby.com/docs/reference/panel/fields/blocks) and [Layout Field](https://getkirby.com/docs/reference/panel/fields/layout)** 6 | 7 | ⚠️⚠️⚠️ 8 | 9 | --- 10 | 11 | This versatile plugin for [Kirby CMS](https://a.paddle.com/v2/click/1129/38717?link=1170) (>= v3.0.1) lets you predefine content blocks with different field sets that can then be added, edited and arranged inside Kirby's panel. 12 | 13 | The legacy version for Kirby 2 can be found under [this branch](https://github.com/TimOetting/kirby-builder/tree/kirby_v2). 14 | 15 | ## Commercial Use 16 | 17 | Kirby Builder can be used in so many different extents. You know best how big the value is that you get out of this plugin. Please pay what (and if) you want. 18 | 19 | [PayPal.me Link](https://www.paypal.me/TimOetting/10) 20 | 21 | Another way to support this plugin is to buy a Kirby Licence via this affiliate link with no extra costs for you. You need that licence anyway, right? :wink: 22 | 23 | [Buy a Kirby licence](https://a.paddle.com/v2/click/1129/38717?link=1170) 24 | 25 | ## Preview 26 | 27 | ![Kirby Builder Screenshot](https://raw.githubusercontent.com/TimOetting/kirby-builder/master/PREVIEW.png) 28 | 29 | ## Installation 30 | 31 | ### Git 32 | 33 | From the root of your kirby project: 34 | 35 | ``` 36 | git clone https://github.com/TimOetting/kirby-builder.git site/plugins/kirby-builder 37 | ``` 38 | 39 | ### Composer 40 | 41 | ``` 42 | composer require timoetting/kirby-builder 43 | ``` 44 | 45 | ### Direct Download 46 | 47 | Alternatively you can download the zip file, unzip it's contents into site/plugins/kirby-builder. 48 | 49 | ## Example Blueprint Structure 50 | 51 | ```yaml 52 | # inside the fields section of your blueprint: 53 | mybuilder: 54 | label: Page Builder 55 | type: builder 56 | columns: 1 # Optional. If set to 2 or more, the builder blocks will be placed in a grid. 57 | max: 10 # Optional. Limits the number of builder blocks that can be added. 58 | fieldsets: 59 | quote: # This is a field set. It contains a group of kirby fields. The user can select from these sets to build the content. 60 | name: Quote # The name option is used as a label for the buttons to add new fieldsets. It is also used as a label in the header of the fieldset, if the label option is not set explicitly (see next line). 61 | label: Quote by {{citation}} # Optional. The label option can be used to override the header text of the fieldset. The 'mustache' syntax can be used to include the value of any field of the fieldset. 62 | preview: # Optional. If defined, a preview of the fieldset can be rendered by the specified snippet from within the snippets folder. 63 | snippet: blocks/quote 64 | css: /assets/css/blocks/quote.css 65 | defaultView: preview # Optional. If the value "preview" is set, the block will show the preview when the page is loaded in the panel. If the value is a tab name, the respective tab is preselected when the page is loaded. Newly created blocks ignore this value and have the edit mode or the first tab preselected. 66 | fields: 67 | text: 68 | label: Quote Text 69 | type: textarea 70 | citation: 71 | label: Citation 72 | type: text 73 | bodytext: 74 | name: Text 75 | tabs: # Optional. Tabs can be used to group the fields of a field set. In this example, we use one tab to contain the content related fields and one for styling settings. It makes no difference for the content handling in the template if there are tabs or not. 76 | content: 77 | label: Content 78 | icon: edit # Optional. This icon appears next to the tab. The icon name can be chosen from the Kirby's icon set getkirby.com/docs/reference/ui/icon 79 | fields: 80 | text: 81 | label: text 82 | type: textarea 83 | style: 84 | label: Style 85 | icon: cog 86 | fields: 87 | fontfamily: 88 | label: Font 89 | type: select 90 | options: 91 | helvetica: Helvetica 92 | comicsans: Comic Sans 93 | fontsize: 94 | label: Font Size 95 | type: number 96 | events: 97 | name: Events 98 | preview: 99 | snippet: blocks/events 100 | css: /assets/css/blocks/events.css 101 | fields: 102 | eventlist: # The Builder Field can even be nested! 103 | type: builder 104 | label: Event List 105 | columns: 2 106 | fieldsets: 107 | event: 108 | label: Event 109 | fields: 110 | title: 111 | label: Title 112 | type: text 113 | text: 114 | label: Description 115 | type: textarea 116 | date: 117 | label: Date 118 | type: date 119 | calltoaction: blocks/calltoaction # the Builder Field blueprint can be rather complex. It is therefore recommended to organize your fieldsets in single files. This example would take the content of the file /site/blueprints/blocks/calltoaction.yml and use it for the fieldset "calltoaction". 120 | ``` 121 | 122 | ## Template Usage 123 | 124 | There are different ways to use the builder field inside a template. A clean approach for this is to use different snippets inside `site/snippets/blocks/` that have the same file name like the field set names in the blueprint. In this case, we use the same snippet that we used for the preview inside the panel. 125 | 126 | ```php 127 | mybuilder()->toBuilderBlocks() as $block): 129 | snippet('blocks/' . $block->_key(), array('data' => $block)); 130 | endforeach; 131 | ?> 132 | ``` 133 | 134 | The `toBuilderBlocks` method converts the builder field to a Kirby Collection which makes it possible to use Kirby's chaining syntax. Under the hood it is an alias for the `toStructure` method. 135 | 136 | The quote snippet, for example, could then be rendered by this snippet: 137 | 138 | ```php 139 | 140 |
141 |
142 | text() ?> 143 |
144 |
145 | citation() ?> 146 |
147 |
148 | ``` 149 | 150 | ### Licence 151 | 152 | [MIT](https://opensource.org/licenses/MIT) 153 | -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "timoetting/kirby-builder", 3 | "type": "kirby-plugin", 4 | "version": "2.0.16", 5 | "description": "This versatile plugin for Kirby CMS (v3) lets you predefine content blocks with different field sets that can then be added, edited and arranged inside Kirby's panel.", 6 | "license": "MIT", 7 | "authors": [ 8 | { 9 | "name": "Tim Ötting", 10 | "email": "email@tim-oetting.de" 11 | } 12 | ], 13 | "scripts": { 14 | "build": "composer update --ignore-platform-reqs; composer dumpautoload -o;", 15 | "zip": "rm kirby-builder.zip; composer update --ignore-platform-reqs; composer dumpautoload -o; zip -r kirby-builder.zip . -x *.git*; composer dumpautoload -o;" 16 | }, 17 | "keywords": [ 18 | "kirby3", 19 | "kirby3-cms", 20 | "kirby3-plugin", 21 | "page-builder", 22 | "kirby-builder", 23 | "builder" 24 | ], 25 | "require": { 26 | "php": ">=7.1.0", 27 | "getkirby/composer-installer": "^1.1" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /composer.lock: -------------------------------------------------------------------------------- 1 | { 2 | "_readme": [ 3 | "This file locks the dependencies of your project to a known state", 4 | "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#composer-lock-the-lock-file", 5 | "This file is @generated automatically" 6 | ], 7 | "hash": "d8780e97e9bb59627f2290ef52866adf", 8 | "content-hash": "ed36671fcfb6eec319e0cc0a5b7d163e", 9 | "packages": [ 10 | { 11 | "name": "getkirby/composer-installer", 12 | "version": "1.1.4", 13 | "source": { 14 | "type": "git", 15 | "url": "https://github.com/getkirby/composer-installer.git", 16 | "reference": "2d6b8f5601a31caeeea45623e1643fbb437eb94e" 17 | }, 18 | "dist": { 19 | "type": "zip", 20 | "url": "https://api.github.com/repos/getkirby/composer-installer/zipball/2d6b8f5601a31caeeea45623e1643fbb437eb94e", 21 | "reference": "2d6b8f5601a31caeeea45623e1643fbb437eb94e", 22 | "shasum": "" 23 | }, 24 | "require": { 25 | "composer-plugin-api": "^1.0" 26 | }, 27 | "require-dev": { 28 | "composer/composer": "^1.8", 29 | "phpunit/phpunit": "^7.0" 30 | }, 31 | "type": "composer-plugin", 32 | "extra": { 33 | "class": "Kirby\\ComposerInstaller\\Plugin" 34 | }, 35 | "autoload": { 36 | "psr-4": { 37 | "Kirby\\": "src/" 38 | } 39 | }, 40 | "notification-url": "https://packagist.org/downloads/", 41 | "license": [ 42 | "MIT" 43 | ], 44 | "description": "Kirby's custom Composer installer for the Kirby CMS and for Kirby plugins", 45 | "homepage": "https://getkirby.com", 46 | "time": "2019-02-11 20:27:36" 47 | } 48 | ], 49 | "packages-dev": [], 50 | "aliases": [], 51 | "minimum-stability": "stable", 52 | "stability-flags": [], 53 | "prefer-stable": false, 54 | "prefer-lowest": false, 55 | "platform": { 56 | "php": ">=7.1.0" 57 | }, 58 | "platform-dev": [] 59 | } 60 | -------------------------------------------------------------------------------- /index.css: -------------------------------------------------------------------------------- 1 | .kBuilderPreview[data-v-e13338]{font-size:0}.kBuilderPreview__frame[data-v-e13338]{border:none;width:100%;height:200px}.kBuilderBlock{background:#fff;-webkit-box-shadow:0 2px 5px rgba(22,23,26,.05);box-shadow:0 2px 5px rgba(22,23,26,.05);position:relative;opacity:1;-webkit-transition:opacity .5s,-webkit-transform .5s;transition:opacity .5s,-webkit-transform .5s;transition:opacity .5s,transform .5s;transition:opacity .5s,transform .5s,-webkit-transform .5s}.kBuilderBlock--pending{opacity:0;-webkit-transform:translateY(calc(10px + 5%));transform:translateY(calc(10px + 5%));-webkit-transition:opacity 0s,-webkit-transform 0s;transition:opacity 0s,-webkit-transform 0s;transition:opacity 0s,transform 0s;transition:opacity 0s,transform 0s,-webkit-transform 0s}.kBuilderBlock__label{display:-webkit-box;display:-ms-flexbox;display:flex;cursor:pointer;height:100%;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;height:38px}.kBuilderBlock__expandedIcon{margin-right:4px;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.kBuilderBlock__expandedIcon--expanded{-webkit-transform:rotate(0);transform:rotate(0)}.kBuilderBlock__header{font-size:.875rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-wrap:wrap;flex-wrap:wrap}.kBuilderBlock__header--col-1{padding-left:.75rem}.kBuilderBlock__actions{display:-webkit-box;display:-ms-flexbox;display:flex}.kBuilderBlock__actionsGroup{margin-right:0}.kBuilderBlock__actionsGroup.k-button-group>.k-button{padding-top:0;padding-bottom:0}.kBuilderBlock__actionsDropDown{display:inline-block}.kBuilderBlock__actionsDropDownContent{z-index:2}.kBuilderBlock__actionsButton{min-width:38px;height:38px;opacity:.4;color:#16171a;font-weight:500}.kBuilderBlock__actionsButton:hover{opacity:.7}.kBuilderBlock__actionsButton--active{pointer-events:none;opacity:1}.kBuilderBlock__actionsButton .k-button-figure img{background-color:transparent;border-radius:0}.kBuilderBlock__form{padding:.625rem .75rem 2.25rem}.kBuilderBlock .sortable-drag{cursor:-webkit-grab}.kBuilderBlock .k-card,.kBuilderBlock .k-list-item,.kBuilderBlock .k-structure-table,.kBuilderBlock .kBuilderBlock{-webkit-box-shadow:0 2px 5px rgba(22,23,26,.15),0 0 0 1px rgba(22,23,26,.05);box-shadow:0 2px 5px rgba(22,23,26,.15),0 0 0 1px rgba(22,23,26,.05)}.kBuilderBlock .k-structure{margin-left:25px}.k-sortable-ghost>.k-column-content>.kBuilderBlock,.k-sortable-ghost>.kBuilderBlock,.sortable-ghost>.k-column-content>.kBuilderBlock,.sortable-ghost>.kBuilderBlock{-webkit-box-shadow:0 0 0 2px #4271ae,0 5px 10px 2px rgba(22,23,26,.25);box-shadow:0 0 0 2px #4271ae,0 5px 10px 2px rgba(22,23,26,.25)}.k-sortable-ghost>.kBuilderBlock .kBuilderPreview__frame{pointer-events:none}.k-error-details li{white-space:pre-line;word-wrap:break-word;font-family:inherit;margin-top:-1.25em}.kBuilder__addButton{width:100%;background-color:transparent;padding:2.5rem .75rem;border:1px dashed #ccc;-webkit-transition:background-color .3s,border-color .3s;transition:background-color .3s,border-color .3s}.kBuilder__addButton:hover{background-color:#81a2be;border-color:transparent}.kBuilder__addBlockButton{cursor:pointer}.kBuilder__addBlockButtonIcon{margin-right:.75em}.kBuilder .kBuilder--col-1{padding-left:25px}.kBuilder__dragDropHandle{width:38px;height:38px;color:#16171a;opacity:.25;z-index:1;cursor:-webkit-grab;will-change:opacity,color;-webkit-transition:opacity .3s;transition:opacity .3s}.kBuilder__dragDropHandle--col-1{position:absolute;left:-38px;top:0;display:-webkit-box;display:-ms-flexbox;display:flex;opacity:0}.kBuilder__blocks:hover .kBuilder__dragDropHandle,kBuilder__blocks:hover .kBuilder__dragDropHandle--col-1{opacity:.25}.kBuilder__block .kBuilder__dragDropHandle:hover,kBuilder__block:hover .kBuilder__dragDropHandle--col-1{opacity:1}.kBuilder__inlineAddButton{cursor:pointer;position:absolute;opacity:0;-webkit-transition:opacity .3s;transition:opacity .3s}.kBuilder__inlineAddButton:hover{opacity:1}.kBuilder__inlineAddButton:before{content:"";border:0 dashed #4271ae;display:block}.kBuilder__inlineAddButton--horizontal{height:1.25rem;width:100%;bottom:100%}.kBuilder__inlineAddButton--horizontal:before{border-bottom-width:2px;padding-top:calc(.625rem - 1px)}.kBuilder__inlineAddButton--vertical{width:1.5rem;height:100%;right:100%}.kBuilder__inlineAddButton--vertical.kBuilder__inlineAddButton--after{left:100%;right:auto;top:0}.kBuilder__inlineAddButton--vertical:before{width:calc(.75rem + 1px);height:100%;border-right-width:2px}.blocklist-enter-active,.blocklist-leave-active{-webkit-transition:all .5s;transition:all .5s}.blocklist-enter,.blocklist-leave-to{opacity:0;-webkit-transform:translateY(-5%);transform:translateY(-5%)}.kBuilder--col-1 .kBuilder__blocks{grid-row-gap:1.25rem}.kBuilder__column{position:relative}.kBuilder__blockContent--hidden,.kBuilder__dialog .k-dialog-button-submit,.kBuilder__dialog .k-list-item-image{display:none}.kBuilder--dragging .kBuilderPreview__frame{pointer-events:none} -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | (function () {function m(a){return a&&a.__esModule?{d:a.default}:{d:a}}function k(e){return(k="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function b(e,t){return p(e)||o(e,t)||n()}function n(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}function o(e,t){var i=[],r=!0,a=!1,n=void 0;try{for(var l,o=e[Symbol.iterator]();!(r=(l=o.next()).done)&&(i.push(l.value),!t||i.length!==t);r=!0);}catch(s){a=!0,n=s}finally{try{r||null==o.return||o.return()}finally{if(a)throw n}}return i}function p(e){if(Array.isArray(e))return e}var c={data:function(){return{previewFrameWindow:{},previewFrameDocument:{},previewHeight:0}},props:{markup:{type:String},styles:{type:String},script:{type:String},cssContent:{type:String},index:{type:Number}},mounted:function(){this.$root.$on("blockMoved",this.updateFrameIfEmpty),this.previewFrameWindow=this.$refs.previewFrame.contentWindow,this.previewFrameDocument=this.previewFrameWindow.document,this.updateContent();var e=document.createElement("script");if(e.type="text/javascript",e.innerHTML="\n sendResizeEvent = function () {\n if (window.frameElement) {\n window.frameElement.dispatchEvent(new CustomEvent('sizechange', { detail: { height: document.documentElement.offsetHeight } }))\n }\n }\n sendResizedEvent = function () {\n console.log('on resize')\n }\n ",this.previewFrameDocument.getElementsByTagName("body")[0].appendChild(e),this.updateContent(),this.script){var t=document.createElement("script");t.type="text/javascript",t.innerHTML=this.script,this.previewFrameDocument.getElementsByTagName("body")[0].appendChild(t)}},methods:{updateContent:function(){var e=this;this.$nextTick().then(function(){e.$refs.previewFrame&&(e.previewFrameWindow=e.$refs.previewFrame.contentWindow,e.previewFrameDocument=e.previewFrameWindow.document,e.previewFrameDocument.open(),e.previewFrameDocument.write(e.$refs.previewFrameContent.innerHTML),e.previewFrameDocument.close(),e.resize())})},updateFrameIfEmpty:function(){var e=this;this.$nextTick().then(function(){e.$refs.previewFrame&&null===e.$refs.previewFrame.contentWindow.document.getElementById("kirby-builder-content")&&e.updateContent()})},onResize:function(e){this.resize()},resize:function(){if(this.previewFrameDocument.getElementById){var e=this.previewFrameDocument.getElementById("kirby-builder-body").scrollHeight;e>0&&(this.previewHeight=e)}},onFrameLoad:function(){this.resize()}},watch:{markup:function(e){this.updateContent()},styles:function(e){this.updateContent()},index:function(e){this.updateFrameIfEmpty()}}};if(typeof c==="function"){c=c.options}Object.assign(c,function(){var render=function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c("div",{staticClass:"kBuilderPreview"},[_c("iframe",{ref:"previewFrame",staticClass:"kBuilderPreview__frame",style:{height:_vm.previewHeight+"px"},on:{"load":_vm.onFrameLoad,"sizechange":_vm.onResize}}),_vm._v(" "),_c("script",{ref:"previewFrameContent",attrs:{"type":"text/template"}},[_vm._v("\n \n \n \n \n \n Kirby Builder Preview\n \n \n \n
\n "+_vm._s(_vm.markup)+"\n
\n \n \n ")])])};var staticRenderFns=[];return{render:render,staticRenderFns:staticRenderFns,_compiled:true,_scopeId:"data-v-e13338",functional:undefined}}());var g,a={},r=arguments[0];!function(e,t){"object"==typeof a&&a&&"string"!=typeof a.nodeName?t(a):"function"==typeof g&&g.amd?g(["exports"],t):(e.Mustache={},t(e.Mustache))}(a,function(e){var t=Object.prototype.toString,r=Array.isArray||function(e){return"[object Array]"===t.call(e)};function n(e){return"function"==typeof e}function o(e){return e.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g,"\\$&")}function i(e,t){return null!=e&&"object"==typeof e&&t in e}var s=RegExp.prototype.test;var a=/\S/;function u(e){return!function(e,t){return s.call(e,t)}(a,e)}var p={"&":"&","<":"<",">":">","\"":""","'":"'","/":"/","`":"`","=":"="};var c=/\s*/,l=/\s+/,h=/\s*=/,f=/\s*\}/,g=/#|\^|\/|>|\{|&|=|!/;function v(e){this.string=e,this.tail=e,this.pos=0}function d(e,t){this.view=e,this.cache={".":this.view},this.parent=t}function w(){this.cache={}}v.prototype.eos=function(){return""===this.tail},v.prototype.scan=function(e){var t=this.tail.match(e);if(!t||0!==t.index)return"";var r=t[0];return this.tail=this.tail.substring(r.length),this.pos+=r.length,r},v.prototype.scanUntil=function(e){var t,r=this.tail.search(e);switch(r){case-1:t=this.tail,this.tail="";break;case 0:t="";break;default:t=this.tail.substring(0,r),this.tail=this.tail.substring(r);}return this.pos+=t.length,t},d.prototype.push=function(e){return new d(e,this)},d.prototype.lookup=function(e){var t,r,o,s=this.cache;if(s.hasOwnProperty(e))t=s[e];else{for(var a,u,p,c=this,l=!1;c;){if(e.indexOf(".")>0)for(a=c.view,u=e.split("."),p=0;null!=a&&p0?o[o.length-1][4]:r;break;default:n.push(t);}return r}(function(e){for(var t,r,n=[],o=0,i=e.length;o"===s?a=this.renderPartial(i,t,r,o):"&"===s?a=this.unescapedValue(i,t):"name"===s?a=this.escapedValue(i,t):"text"===s&&(a=this.rawValue(i)),void 0!==a&&(u+=a);return u},w.prototype.renderSection=function(e,t,o,i){var s=this,a="",u=t.lookup(e[1]);if(u){if(r(u))for(var p=0,c=u.length;p"'`=\/]/g,function(e){return p[e]})},e.Scanner=v,e.Context=d,e.Writer=w,e});var d={props:{endpoints:Object,value:Object,blockConfig:Object,fieldGroup:Object,readyFieldGroup:Object,index:Number,label:String,columnsCount:Number,pageUid:String,pageId:String,encodedPageId:String,script:String,parentPath:String,canDuplicate:Boolean,cssContent:String},data:function(){return{pending:!0,activeTab:null,expanded:!0,isNew:!1,previewFrameContent:null,previewHeight:0,previewStored:!1,previewMarkup:"",showPreview:!1,fieldGroup:{},styles:null}},components:{BuilderPreview:c},mounted:function(){this.value._uid||(this.value._uid=this.value._key+"_"+new Date().valueOf()+"_"+this._uid),null!=this.blockConfig.expandedInitially&&(this.expanded=this.blockConfig.expandedInitially,delete this.blockConfig.expandedInitially),this.blockConfig.showPreviewInitially&&(this.showPreview=this.blockConfig.showPreviewInitially,delete this.blockConfig.showPreviewInitially);var e=JSON.parse(localStorage.getItem(this.localUiStateKey));e&&null!==e.expanded&&(this.expanded=e.expanded),this.initFieldGroup()},computed:{localUiStateKey:function(){return"kBuilder.uiState.".concat(this.value._uid)},localFormGroupKey:function(){return"kBuilder.formGroup.".concat(this.blueprint)},extendedUid:function(){return this.pageId.replace("/","-")+"-"+this._uid},blockPath:function(){return this.parentPath+"+"+this.value._key},fieldSets:function(){var e=[];if(this.fieldGroup.tabs)for(var t=0,i=Object.entries(this.fieldGroup.tabs);t-1&&e.indexOf(".")>-1?null:e:null},tabImage:function(e){return e&&e.indexOf("/")>-1&&e.indexOf(".")>-1?e:null}}};if(typeof d==="function"){d=d.options}Object.assign(d,function(){var render=function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c("div",{class:["kBuilderBlock","kBuilderBlock--col-"+_vm.columnsCount,"kBuilderBlock--type-"+_vm.value._key,{"kBuilderBlock--previewMode":_vm.showPreview&&_vm.expanded},{"kBuilderBlock--expanded":_vm.expanded},{"kBuilderBlock--pending":_vm.isNew},{"kBuilderBlock--collapsed":!_vm.expanded},{"kBuilderBlock--editMode":!_vm.showPreview&&_vm.expanded}]},[_c("div",{class:"kBuilderBlock__header kBuilderBlock__header--col-"+_vm.columnsCount},[_c("k-icon",{class:"kBuilder__dragDropHandle kBuilder__dragDropHandle--col-"+_vm.columnsCount,attrs:{"type":"sort"}}),_vm._v(" "),_c("span",{staticClass:"kBuilderBlock__label",on:{"click":_vm.toggleExpand}},[_c("k-icon",{staticClass:"kBuilderBlock__expandedIcon",class:{"kBuilderBlock__expandedIcon--expanded":_vm.expanded},attrs:{"type":"angle-down"}}),_vm._v(" "),_c("span",{domProps:{"innerHTML":_vm._s(_vm.title(_vm.value))}})],1),_vm._v(" "),_c("div",{staticClass:"kBuilderBlock__actions"},[_c("k-button-group",{staticClass:"kBuilderBlock__actionsGroup"},[_vm._l(_vm.fieldSets,function(fieldSet){return _vm.fieldSets.length>1||_vm.fieldGroup.preview?_c("k-button",{key:"showFierldSetButton-"+_vm._uid+fieldSet.key,staticClass:"kBuilderBlock__actionsButton",class:[{"kBuilderBlock__actionsButton--active":_vm.activeTab==fieldSet.key&&_vm.expanded},"kBuilderBlock__actionsButton--type-"+fieldSet.key],attrs:{"icon":_vm.tabIcon(fieldSet.icon),"image":_vm.tabImage(fieldSet.icon)},on:{"click":function($event){_vm.displayFieldSet(fieldSet.key);_vm.toggleExpand(true)}}},[_vm._v(_vm._s(fieldSet.label))]):_vm._e()}),_vm._v(" "),_vm.fieldGroup.preview?_c("k-button",{staticClass:"kBuilderBlock__actionsButton kBuilderBlock__actionsButton--preview",class:{"kBuilderBlock__actionsButton--active":_vm.showPreview&&_vm.expanded},attrs:{"icon":"preview"},on:{"click":function($event){_vm.displayPreview()}}},[_vm._v(_vm._s(_vm.$t("builder.preview")))]):_vm._e()],2),_vm._v(" "),_c("div",{staticClass:"kBuilderBlock__control"},[_c("k-dropdown",{staticClass:"kBuilderBlock__actionsDropDown"},[_c("k-button",{staticClass:"kBuilderBlock__actionsButton",attrs:{"icon":"dots"},on:{"click":function($event){_vm.$refs["blockActions"].toggle()}}}),_vm._v(" "),_c("k-dropdown-content",{ref:"blockActions",staticClass:"kBuilderBlock__actionsDropDownContent",attrs:{"align":"right"}},[_vm.canDuplicate?_c("k-dropdown-item",{attrs:{"icon":"copy"},on:{"click":function($event){_vm.$emit("clone",_vm.index,_vm.showPreview,_vm.expanded,_vm.activeTab)}}},[_vm._v(_vm._s(_vm.$t("builder.clone")))]):_vm._e(),_vm._v(" "),_c("k-dropdown-item",{attrs:{"icon":"trash"},on:{"click":function($event){_vm.$emit("delete",_vm.index)}}},[_vm._v(_vm._s(_vm.$t("delete")))])],1)],1)],1)],1)],1),_vm._v(" "),_c("div",{directives:[{name:"show",rawName:"v-show",value:_vm.expanded,expression:"expanded"}],staticClass:"kBuilderBlock__content"},[_vm.fieldGroup.preview?_c("builder-preview",{directives:[{name:"show",rawName:"v-show",value:_vm.showPreview,expression:"showPreview"}],ref:"preview",attrs:{"markup":_vm.previewMarkup,"styles":_vm.cssContent,"index":_vm.index,"script":_vm.script}}):_vm._e(),_vm._v(" "),_vm._l(_vm.fieldSets,function(fieldSet){return _vm.activeTab===fieldSet.key?_c("k-fieldset",_vm._g({directives:[{name:"show",rawName:"v-show",value:!_vm.showPreview,expression:"!showPreview"}],key:fieldSet.key+_vm._uid,staticClass:"kBuilderBlock__form",attrs:{"value":{},"fields":fieldSet.fields,"validate":false},model:{value:fieldSet.model,callback:function($$v){_vm.$set(fieldSet,"model",$$v)},expression:"fieldSet.model"}},_vm.$listeners)):_vm._e()})],2)])};var staticRenderFns=[];return{render:render,staticRenderFns:staticRenderFns,_compiled:true,_scopeId:null,functional:undefined}}());var h,f={};var i,j,q=false;function l(){if(q)return;q=true;j={};!function(t){"function"==typeof i&&i.amd?i(t):void 0!==j?j=t():window.Sortable=t()}(function(){if("undefined"==typeof window||!window.document)return function(){throw new Error("Sortable.js requires a window with a document")};var t,e,o,n,i,r,a,l,s,c,d,h,u,f,p,v,g,m,b,w,_,y,D,T,S,C,E,x,M=[],N=!1,P=!1,A=!1,X=[],Y=!1,k=!1,I=[],H=/\s+/g,O="Sortable"+new Date().getTime(),B=window,R=B.document,$=B.parseInt,L=B.setTimeout,W=B.jQuery||B.Zepto,F=B.Polymer,Z={capture:!1,passive:!1},z=!!navigator.userAgent.match(/(?:Trident.*rv[ :]?11\.|msie|iemobile)/i),j=!!navigator.userAgent.match(/Edge/i),U=!!navigator.userAgent.match(/firefox/i),V=!(!navigator.userAgent.match(/safari/i)||navigator.userAgent.match(/chrome/i)||navigator.userAgent.match(/android/i)),q=!!navigator.userAgent.match(/iP(ad|od|hone)/i),G=j||z?"cssFloat":"float",K="draggable"in R.createElement("div"),Q=function(){if(z)return!1;var t=R.createElement("x");return t.style.cssText="pointer-events:auto","auto"===t.style.pointerEvents}(),J=!1,tt=!1,et=Math.abs,ot=Math.min,nt=Math.max,it=[],rt=function(t,e){var o=Tt(t),n=$(o.width)-$(o.paddingLeft)-$(o.paddingRight)-$(o.borderLeftWidth)-$(o.borderRightWidth),i=Pt(t,0,e),r=Pt(t,1,e),a=i&&Tt(i),l=r&&Tt(r),s=a&&$(a.marginLeft)+$(a.marginRight)+Lt(i).width,c=l&&$(l.marginLeft)+$(l.marginRight)+Lt(r).width;if("flex"===o.display)return"column"===o.flexDirection||"column-reverse"===o.flexDirection?"vertical":"horizontal";if("grid"===o.display)return o.gridTemplateColumns.split(" ").length<=1?"vertical":"horizontal";if(i&&"none"!==a.float){var d="left"===a.float?"left":"right";return!r||"both"!==l.clear&&l.clear!==d?"horizontal":"vertical"}return i&&("block"===a.display||"flex"===a.display||"table"===a.display||"grid"===a.display||s>=n&&"none"===o[G]||r&&"none"===o[G]&&s+c>n)?"vertical":"horizontal"},at=function(t,e){if(!t||!t.getBoundingClientRect)return lt();var o=t,n=!1;do{if(o.clientWidth-1}}var o={},n=t.group;n&&"object"==typeof n||(n={name:n}),o.name=n.name,o.checkPull=e(n.pull,!0),o.checkPut=e(n.put),o.revertClone=n.revertClone,t.group=o},ut=function(e){t&&t.parentNode&&t.parentNode[O]&&t.parentNode[O]._computeIsAligned(e)},ft=function(){!Q&&o&&Tt(o,"display","none")},pt=function(){!Q&&o&&Tt(o,"display","")};R.addEventListener("click",function(t){if(A)return t.preventDefault(),t.stopPropagation&&t.stopPropagation(),t.stopImmediatePropagation&&t.stopImmediatePropagation(),A=!1,!1},!0);var vt,gt=function(e){if(t){var o=function(t,e){for(var o=0;o=n.left-i&&t<=n.right+i,a=e>=n.top-i&&e<=n.bottom+i;if(i&&r&&a)return X[o]}}((e=e.touches?e.touches[0]:e).clientX,e.clientY);if(o){var n={};for(var i in e)n[i]=e[i];n.target=n.rootEl=o,n.preventDefault=void 0,n.stopPropagation=void 0,o[O]._onDragOver(n)}}};function mt(t,e){if(!t||!t.nodeType||1!==t.nodeType)throw"Sortable: `el` must be HTMLElement, not "+{}.toString.call(t);this.el=t,this.options=e=Ot({},e),t[O]=this;var o={group:null,sort:!0,disabled:!1,store:null,handle:null,scroll:!0,scrollSensitivity:30,scrollSpeed:10,bubbleScroll:!0,draggable:/[uo]l/i.test(t.nodeName)?">li":">*",swapThreshold:1,invertSwap:!1,invertedSwapThreshold:null,removeCloneOnHide:!0,direction:function(){return rt(t,this.options)},ghostClass:"sortable-ghost",chosenClass:"sortable-chosen",dragClass:"sortable-drag",ignore:"a, img",filter:null,preventOnFilter:!0,animation:0,easing:null,setData:function(t,e){t.setData("Text",e.textContent)},dropBubble:!1,dragoverBubble:!1,dataIdAttr:"data-id",delay:0,delayOnTouchOnly:!1,touchStartThreshold:$(window.devicePixelRatio,10)||1,forceFallback:!1,fallbackClass:"sortable-fallback",fallbackOnBody:!1,fallbackTolerance:0,fallbackOffset:{x:0,y:0},supportPointer:!1!==mt.supportPointer&&"PointerEvent"in window,emptyInsertThreshold:5};for(var n in o)!(n in e)&&(e[n]=o[n]);for(var i in ht(e),this)"_"===i.charAt(0)&&"function"==typeof this[i]&&(this[i]=this[i].bind(this));this.nativeDraggable=!e.forceFallback&&K,this.nativeDraggable&&(this.options.touchStartThreshold=1),e.supportPointer?_t(t,"pointerdown",this._onTapStart):(_t(t,"mousedown",this._onTapStart),_t(t,"touchstart",this._onTapStart)),this.nativeDraggable&&(_t(t,"dragover",this),_t(t,"dragenter",this)),X.push(this.el),e.store&&e.store.get&&this.sort(e.store.get(this)||[])}function bt(t,e,o,n){if(t){o=o||R;do{if(null!=e&&(">"===e[0]?t.parentNode===o&&It(t,e):It(t,e))||n&&t===o)return t;if(t===o)break}while(t=wt(t))}return null}function wt(t){return t.host&&t!==R&&t.host.nodeType?t.host:t.parentNode}function _t(t,e,o){t.addEventListener(e,o,!z&&Z)}function yt(t,e,o){t.removeEventListener(e,o,!z&&Z)}function Dt(t,e,o){if(t&&e)if(t.classList)t.classList[o?"add":"remove"](e);else{var n=(" "+t.className+" ").replace(H," ").replace(" "+e+" "," ");t.className=(n+(o?" "+e:"")).replace(H," ")}}function Tt(t,e,o){var n=t&&t.style;if(n){if(void 0===o)return R.defaultView&&R.defaultView.getComputedStyle?o=R.defaultView.getComputedStyle(t,""):t.currentStyle&&(o=t.currentStyle),void 0===e?o:o[e];e in n||-1!==e.indexOf("webkit")||(e="-webkit-"+e),n[e]=o+("string"==typeof o?"":"px")}}function St(t){var e="";do{var o=Tt(t,"transform");o&&"none"!==o&&(e=o+" "+e)}while(t=t.parentNode);return window.DOMMatrix?new DOMMatrix(e):window.WebKitCSSMatrix?new WebKitCSSMatrix(e):window.CSSMatrix?new CSSMatrix(e):void 0}function Ct(t,e,o){if(t){var n=t.getElementsByTagName(e),i=0,r=n.length;if(o)for(;i"===e[0]&&(e=e.substring(1)),t)try{if(t.matches)return t.matches(e);if(t.msMatchesSelector)return t.msMatchesSelector(e);if(t.webkitMatchesSelector)return t.webkitMatchesSelector(e)}catch(o){return!1}return!1}}function Ht(t,e){return function(){if(!vt){var o=arguments,n=this;vt=L(function(){1===o.length?t.call(n,o[0]):t.apply(n,o),vt=void 0},e)}}}function Ot(t,e){if(t&&e)for(var o in e)e.hasOwnProperty(o)&&(t[o]=e[o]);return t}function Bt(t){return F&&F.dom?F.dom(t).cloneNode(!0):W?W(t).clone(!0)[0]:t.cloneNode(!0)}function Rt(t){return L(t,0)}function $t(t){return clearTimeout(t)}function Lt(t,e,o,n){if(t.getBoundingClientRect||t===B){var i,r,a,l,s,c,d;if(t!==B&&t!==lt()?(r=(i=t.getBoundingClientRect()).top,a=i.left,l=i.bottom,s=i.right,c=i.height,d=i.width):(r=0,a=0,l=window.innerHeight,s=window.innerWidth,c=window.innerHeight,d=window.innerWidth),n&&t!==B&&(o=o||t.parentNode,!z))do{if(o&&o.getBoundingClientRect&&"none"!==Tt(o,"transform")){var h=o.getBoundingClientRect();r-=h.top+$(Tt(o,"border-top-width")),a-=h.left+$(Tt(o,"border-left-width")),l=r+i.height,s=a+i.width;break}}while(o=o.parentNode);if(e&&t!==B){var u=St(o||t),f=u&&u.a,p=u&&u.d;u&&(l=(r/=p)+(c/=p),s=(a/=f)+(d/=f))}return{top:r,left:a,bottom:l,right:s,width:d,height:c}}}function Wt(t,e){for(var o=at(t,!0),n=Lt(t)[e];o;){var i=Lt(o)[e];if(!("top"===e||"left"===e?n>=i:n<=i))return o;if(o===lt())break;o=at(o,!1)}return!1}function Ft(t){var e=0,o=0,n=lt();if(t)do{var i=St(t),r=i.a,a=i.d;e+=t.scrollLeft*r,o+=t.scrollTop*a}while(t!==n&&(t=t.parentNode));return[e,o]}return mt.prototype={constructor:mt,_computeIsAligned:function(e){var n;if(o&&!Q?(ft(),n=R.elementFromPoint(e.clientX,e.clientY),pt()):n=e.target,n=bt(n,this.options.draggable,this.el,!1),!tt&&t&&t.parentNode===this.el){for(var i,r,a,l,s,c,d,h,u=this.el.children,f=0;f=Math.floor(this.options.touchStartThreshold/(this.nativeDraggable&&window.devicePixelRatio||1))&&this._disableDelayedDrag()},_disableDelayedDrag:function(){t&&Mt(t),clearTimeout(this._dragStartTimer),this._disableDelayedDragEvents()},_disableDelayedDragEvents:function(){var t=this.el.ownerDocument;yt(t,"mouseup",this._disableDelayedDrag),yt(t,"touchend",this._disableDelayedDrag),yt(t,"touchcancel",this._disableDelayedDrag),yt(t,"mousemove",this._delayedDragTouchMoveHandler),yt(t,"touchmove",this._delayedDragTouchMoveHandler),yt(t,"pointermove",this._delayedDragTouchMoveHandler)},_triggerDragStart:function(e,o){o=o||("touch"==e.pointerType?e:null),!this.nativeDraggable||o?this.options.supportPointer?_t(R,"pointermove",this._onTouchMove):_t(R,o?"touchmove":"mousemove",this._onTouchMove):(_t(t,"dragend",this),_t(i,"dragstart",this._onDragStart));try{R.selection?Rt(function(){R.selection.empty()}):window.getSelection().removeAllRanges()}catch(n){}},_dragStarted:function(e,o){if(P=!1,i&&t){this.nativeDraggable&&(_t(R,"dragover",this._handleAutoScroll),_t(R,"dragover",ut));var n=this.options;!e&&Dt(t,n.dragClass,!1),Dt(t,n.ghostClass,!0),Tt(t,"transform",""),mt.active=this,e&&this._appendGhost(),Et(this,i,"start",t,i,i,d,void 0,u,void 0,o)}else this._nulling()},_emulateDragOver:function(e){if(_){if(this._lastX===_.clientX&&this._lastY===_.clientY&&!e)return;this._lastX=_.clientX,this._lastY=_.clientY,ft();for(var o=R.elementFromPoint(_.clientX,_.clientY),n=o;o&&o.shadowRoot&&(o=o.shadowRoot.elementFromPoint(_.clientX,_.clientY))!==n;)n=o;if(n)do{if(n[O])if(n[O]._onDragOver({clientX:_.clientX,clientY:_.clientY,target:o,rootEl:n})&&!this.options.dragoverBubble)break;o=n}while(n=n.parentNode);t.parentNode[O]._computeIsAligned(_),pt()}},_onTouchMove:function(t,e){if(w){var n=this.options,i=n.fallbackTolerance,r=n.fallbackOffset,a=t.touches?t.touches[0]:t,l=o&&St(o),s=o&&l&&l.a,c=o&&l&&l.d,d=q&&E&&Ft(E),h=(a.clientX-w.clientX+r.x)/(s||1)+(d?d[0]-I[0]:0)/(s||1),u=(a.clientY-w.clientY+r.y)/(c||1)+(d?d[1]-I[1]:0)/(c||1),f=t.touches?"translate3d("+h+"px,"+u+"px,0)":"translate("+h+"px,"+u+"px)";if(!mt.active&&!P){if(i&&ot(et(a.clientX-this._lastX),et(a.clientY-this._lastY))s+10||r<=s&&i>a&&r>=l:i>a&&r>l||i<=a&&r>s+10}(o,_,s)&&!E.animated){if(E&&s===o.target&&(c=E),c&&(a=Lt(c)),m?g._hideClone():g._showClone(this),!1!==xt(i,s,t,n,c,a,o,!!c))return s.appendChild(t),e=s,x=null,z(),Z(!0)}else if(c&&c!==t&&c.parentNode===s){var M,N=0,P=c.sortableMouseAligned,X=t.parentNode!==s,I="vertical"===_?"top":"left",H=Wt(c,"top")||Wt(t,"top"),B=H?H.scrollTop:void 0;if(D!==c&&(S=null,M=Lt(c)[I],Y=!1),function(e,o,n){var i=e===t&&x||Lt(e),r=o===t&&x||Lt(o),a="vertical"===n?i.left:i.top,l="vertical"===n?i.right:i.bottom,s="vertical"===n?i.width:i.height,c="vertical"===n?r.left:r.top,d="vertical"===n?r.right:r.bottom,h="vertical"===n?r.width:r.height;return a===c||l===d||a+s/2===c+h/2}(t,c,_)&&P||X||H||h.invertSwap||"insert"===S||"swap"===S?("swap"!==S&&(k=h.invertSwap||X),N=function(e,o,n,i,r,a,l){var s=Lt(o),c="vertical"===n?e.clientY:e.clientX,d="vertical"===n?s.height:s.width,h="vertical"===n?s.top:s.left,u="vertical"===n?s.bottom:s.right,f=Lt(t),p=!1;if(!a)if(l&&Ch+d*r/2:cu-C)return-1*T}}else if(c>h+d*(1-i)/2&&cu-d*r/2))return c>h+d/2?1:-1;return 0}(o,c,_,h.swapThreshold,null==h.invertedSwapThreshold?h.swapThreshold:h.invertedSwapThreshold,k,D===c),S="swap"):(N=Xt(c),S="insert"),0===N)return Z(!1);x=null,D=c,T=N,a=Lt(c);var $=c.nextElementSibling,W=!1,F=xt(i,s,t,n,c,a,o,W=1===N);if(!1!==F)return 1!==F&&-1!==F||(W=1===F),J=!0,L(Nt,30),m?g._hideClone():g._showClone(this),W&&!$?s.appendChild(t):c.parentNode.insertBefore(t,W?$:c),H&&st(H,0,B-H.scrollTop),e=t.parentNode,void 0===M||k||(C=et(M-Lt(c)[I])),z(),Z(!0)}if(s.contains(t))return Z(!1)}return!1}function Z(e){return e&&(m?g._hideClone():g._showClone(w),g&&(Dt(t,v?v.options.ghostClass:g.options.ghostClass,!1),Dt(t,h.ghostClass,!0)),v!==w&&w!==mt.active?v=w:w===mt.active&&(v=null),n&&w._animate(n,t),c&&a&&w._animate(a,c)),(c===t&&!t.animated||c===s&&!c.animated)&&(D=null),h.dragoverBubble||o.rootEl||c===R||(w._handleAutoScroll(o),t.parentNode[O]._computeIsAligned(o),!e&>(o)),!h.dragoverBubble&&o.stopPropagation&&o.stopPropagation(),!0}function z(){Et(w,i,"change",c,s,i,d,kt(t),u,kt(t,h.draggable),o)}},_animate:function(e,o){var n=this.options.animation;if(n){var i=Lt(o);if(o===t&&(x=i),1===e.nodeType&&(e=Lt(e)),e.left+e.width/2!==i.left+i.width/2||e.top+e.height/2!==i.top+i.height/2){var r=St(this.el),a=r&&r.a,l=r&&r.d;Tt(o,"transition","none"),Tt(o,"transform","translate3d("+(e.left-i.left)/(a||1)+"px,"+(e.top-i.top)/(l||1)+"px,0)"),this._repaint(o),Tt(o,"transition","transform "+n+"ms"+(this.options.easing?" "+this.options.easing:"")),Tt(o,"transform","translate3d(0,0,0)")}"number"==typeof o.animated&&clearTimeout(o.animated),o.animated=L(function(){Tt(o,"transition",""),Tt(o,"transform",""),o.animated=!1},n)}},_repaint:function(t){return t.offsetWidth},_offMoveEvents:function(){yt(R,"touchmove",this._onTouchMove),yt(R,"pointermove",this._onTouchMove),yt(R,"dragover",gt),yt(R,"mousemove",gt),yt(R,"touchmove",gt)},_offUpEvents:function(){var t=this.el.ownerDocument;yt(t,"mouseup",this._onDrop),yt(t,"touchend",this._onDrop),yt(t,"pointerup",this._onDrop),yt(t,"touchcancel",this._onDrop),yt(R,"selectstart",this)},_onDrop:function(a){var l=this.el,s=this.options;P=!1,N=!1,k=!1,Y=!1,clearInterval(this._loopId),clearInterval(g),dt(),clearTimeout(vt),vt=void 0,clearTimeout(this._dragStartTimer),$t(this._cloneId),$t(this._dragStartId),yt(R,"mousemove",this._onTouchMove),this.nativeDraggable&&(yt(R,"drop",this),yt(l,"dragstart",this._onDragStart),yt(R,"dragover",this._handleAutoScroll),yt(R,"dragover",ut)),V&&Tt(R.body,"user-select",""),this._offMoveEvents(),this._offUpEvents(),a&&(y&&(a.cancelable&&a.preventDefault(),!s.dropBubble&&a.stopPropagation()),o&&o.parentNode&&o.parentNode.removeChild(o),(i===e||v&&"clone"!==v.lastPutMode)&&n&&n.parentNode&&n.parentNode.removeChild(n),t&&(this.nativeDraggable&&yt(t,"dragend",this),Mt(t),t.style["will-change"]="",Dt(t,v?v.options.ghostClass:this.options.ghostClass,!1),Dt(t,this.options.chosenClass,!1),Et(this,i,"unchoose",t,e,i,d,null,u,null,a),i!==e?(h=kt(t),f=kt(t,s.draggable),h>=0&&(Et(null,e,"add",t,e,i,d,h,u,f,a),Et(this,i,"remove",t,e,i,d,h,u,f,a),Et(null,e,"sort",t,e,i,d,h,u,f,a),Et(this,i,"sort",t,e,i,d,h,u,f,a)),v&&v.save()):t.nextSibling!==r&&(h=kt(t),f=kt(t,s.draggable),h>=0&&(Et(this,i,"update",t,e,i,d,h,u,f,a),Et(this,i,"sort",t,e,i,d,h,u,f,a))),mt.active&&(null!=h&&-1!==h||(h=d,f=u),Et(this,i,"end",t,e,i,d,h,u,f,a),this.save()))),this._nulling()},_nulling:function(){i=t=e=o=r=n=a=l=s=M.length=g=m=b=w=_=y=h=d=D=T=x=v=p=mt.active=null,it.forEach(function(t){t.checked=!0}),it.length=0},handleEvent:function(e){switch(e.type){case"drop":case"dragend":this._onDrop(e);break;case"dragenter":case"dragover":t&&(this._onDragOver(e),function(t){t.dataTransfer&&(t.dataTransfer.dropEffect="move");t.cancelable&&t.preventDefault()}(e));break;case"selectstart":e.preventDefault();}},toArray:function(){for(var t,e=[],o=this.el.children,n=0,i=o.length,r=this.options;n=f?t?"":void 0:(i=c.charCodeAt(a))<55296||i>56319||a+1===f||(u=c.charCodeAt(a+1))<56320||u>57343?t?c.charAt(a):i:t?c.slice(a,a+2):u-56320+(i-55296<<10)+65536}}},"0390":function(t,n,e){var r=e("02f4")(!0);t.exports=function(t,n,e){return n+(e?r(t,n).length:1)}},"07e3":function(t,n){var e={}.hasOwnProperty;t.exports=function(t,n){return e.call(t,n)}},"0bfb":function(t,n,e){var r=e("cb7c");t.exports=function(){var t=r(this),n="";return t.global&&(n+="g"),t.ignoreCase&&(n+="i"),t.multiline&&(n+="m"),t.unicode&&(n+="u"),t.sticky&&(n+="y"),n}},"0fc9":function(t,n,e){var r=e("3a38"),o=Math.max,i=Math.min;t.exports=function(t,n){return(t=r(t))<0?o(t+n,0):i(t,n)}},1654:function(t,n,e){var r=e("71c1")(!0);e("30f1")(String,"String",function(t){this._t=String(t),this._i=0},function(){var t,n=this._t,e=this._i;return e>=n.length?{value:void 0,done:!0}:(t=r(n,e),this._i+=t.length,{value:t,done:!1})})},1691:function(t,n){t.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},"1af6":function(t,n,e){var r=e("63b6");r(r.S,"Array",{isArray:e("9003")})},"1bc3":function(t,n,e){var r=e("f772");t.exports=function(t,n){if(!r(t))return t;var e,o;if(n&&"function"==typeof(e=t.toString)&&!r(o=e.call(t)))return o;if("function"==typeof(e=t.valueOf)&&!r(o=e.call(t)))return o;if(!n&&"function"==typeof(e=t.toString)&&!r(o=e.call(t)))return o;throw TypeError("Can't convert object to primitive value")}},"1ec9":function(t,n,e){var r=e("f772"),o=e("e53d").document,i=r(o)&&r(o.createElement);t.exports=function(t){return i?o.createElement(t):{}}},"20fd":function(t,n,e){var r=e("d9f6"),o=e("aebd");t.exports=function(t,n,e){n in t?r.f(t,n,o(0,e)):t[n]=e}},"214f":function(t,n,e){e("b0c5");var r=e("2aba"),o=e("32e9"),i=e("79e5"),u=e("be13"),c=e("2b4c"),a=e("520a"),f=c("species"),s=!i(function(){var t=/./;return t.exec=function(){var t=[];return t.groups={a:"7"},t},"7"!=="".replace(t,"$")}),l=function(){var t=/(?:)/,n=t.exec;t.exec=function(){return n.apply(this,arguments)};var e="ab".split(t);return 2===e.length&&"a"===e[0]&&"b"===e[1]}();t.exports=function(t,n,e){var p=c(t),d=!i(function(){var n={};return n[p]=function(){return 7},7!=""[t](n)}),v=d?!i(function(){var n=!1,e=/a/;return e.exec=function(){return n=!0,null},"split"===t&&(e.constructor={},e.constructor[f]=function(){return e}),e[p](""),!n}):void 0;if(!d||!v||"replace"===t&&!s||"split"===t&&!l){var h=/./[p],b=e(u,p,""[t],function(t,n,e,r,o){return n.exec===a?d&&!o?{done:!0,value:h.call(n,e,r)}:{done:!0,value:t.call(e,n,r)}:{done:!1}}),g=b[0],y=b[1];r(String.prototype,t,g),o(RegExp.prototype,p,2==n?function(t,n){return y.call(t,this,n)}:function(t){return y.call(t,this)})}}},"230e":function(t,n,e){var r=e("d3f4"),o=e("7726").document,i=r(o)&&r(o.createElement);t.exports=function(t){return i?o.createElement(t):{}}},"23c6":function(t,n,e){var r=e("2d95"),o=e("2b4c")("toStringTag"),i="Arguments"==r(function(){return arguments}());t.exports=function(t){var n,e,u;return void 0===t?"Undefined":null===t?"Null":"string"==typeof(e=function(t,n){try{return t[n]}catch(e){}}(n=Object(t),o))?e:i?r(n):"Object"==(u=r(n))&&"function"==typeof n.callee?"Arguments":u}},"241e":function(t,n,e){var r=e("25eb");t.exports=function(t){return Object(r(t))}},"25eb":function(t,n){t.exports=function(t){if(null==t)throw TypeError("Can't call method on "+t);return t}},"294c":function(t,n){t.exports=function(t){try{return!!t()}catch(n){return!0}}},"2aba":function(t,n,e){var r=e("7726"),o=e("32e9"),i=e("69a8"),u=e("ca5a")("src"),c=e("fa5b"),a="toString",f=(""+c).split(a);e("8378").inspectSource=function(t){return c.call(t)},(t.exports=function(t,n,e,c){var a="function"==typeof e;a&&(i(e,"name")||o(e,"name",n)),t[n]!==e&&(a&&(i(e,u)||o(e,u,t[n]?""+t[n]:f.join(String(n)))),t===r?t[n]=e:c?t[n]?t[n]=e:o(t,n,e):(delete t[n],o(t,n,e)))})(Function.prototype,a,function(){return"function"==typeof this&&this[u]||c.call(this)})},"2b4c":function(t,n,e){var r=e("5537")("wks"),o=e("ca5a"),i=e("7726").Symbol,u="function"==typeof i;(t.exports=function(t){return r[t]||(r[t]=u&&i[t]||(u?i:o)("Symbol."+t))}).store=r},"2d00":function(t,n){t.exports=!1},"2d95":function(t,n){var e={}.toString;t.exports=function(t){return e.call(t).slice(8,-1)}},"2fdb":function(t,n,e){var r=e("5ca1"),o=e("d2c8"),i="includes";r(r.P+r.F*e("5147")(i),"String",{includes:function(t){return!!~o(this,t,i).indexOf(t,arguments.length>1?arguments[1]:void 0)}})},"30f1":function(t,n,e){var r=e("b8e3"),o=e("63b6"),i=e("9138"),u=e("35e8"),c=e("481b"),a=e("8f60"),f=e("45f2"),s=e("53e2"),l=e("5168")("iterator"),p=!([].keys&&"next"in[].keys()),d="keys",v="values",h=function(){return this};t.exports=function(t,n,e,b,g,y,x){a(e,n,b);var m,O,w,S=function(t){if(!p&&t in M)return M[t];switch(t){case d:case v:return function(){return new e(this,t)};}return function(){return new e(this,t)}},j=n+" Iterator",_=g==v,$=!1,M=t.prototype,T=M[l]||M["@@iterator"]||g&&M[g],C=T||S(g),E=g?_?S("entries"):C:void 0,A="Array"==n&&M.entries||T;if(A&&(w=s(A.call(new t)))!==Object.prototype&&w.next&&(f(w,j,!0),r||"function"==typeof w[l]||u(w,l,h)),_&&T&&T.name!==v&&($=!0,C=function(){return T.call(this)}),r&&!x||!p&&!$&&M[l]||u(M,l,C),c[n]=C,c[j]=h,g)if(m={values:_?C:S(v),keys:y?C:S(d),entries:E},x)for(O in m)O in M||i(M,O,m[O]);else o(o.P+o.F*(p||$),n,m);return m}},"32a6":function(t,n,e){var r=e("241e"),o=e("c3a1");e("ce7e")("keys",function(){return function(t){return o(r(t))}})},"32e9":function(t,n,e){var r=e("86cc"),o=e("4630");t.exports=e("9e1e")?function(t,n,e){return r.f(t,n,o(1,e))}:function(t,n,e){return t[n]=e,t}},"32fc":function(t,n,e){var r=e("e53d").document;t.exports=r&&r.documentElement},"335c":function(t,n,e){var r=e("6b4c");t.exports=Object("z").propertyIsEnumerable(0)?Object:function(t){return"String"==r(t)?t.split(""):Object(t)}},"355d":function(t,n){n.f={}.propertyIsEnumerable},"35e8":function(t,n,e){var r=e("d9f6"),o=e("aebd");t.exports=e("8e60")?function(t,n,e){return r.f(t,n,o(1,e))}:function(t,n,e){return t[n]=e,t}},"36c3":function(t,n,e){var r=e("335c"),o=e("25eb");t.exports=function(t){return r(o(t))}},3702:function(t,n,e){var r=e("481b"),o=e("5168")("iterator"),i=Array.prototype;t.exports=function(t){return void 0!==t&&(r.Array===t||i[o]===t)}},"3a38":function(t,n){var e=Math.ceil,r=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?r:e)(t)}},"40c3":function(t,n,e){var r=e("6b4c"),o=e("5168")("toStringTag"),i="Arguments"==r(function(){return arguments}());t.exports=function(t){var n,e,u;return void 0===t?"Undefined":null===t?"Null":"string"==typeof(e=function(t,n){try{return t[n]}catch(e){}}(n=Object(t),o))?e:i?r(n):"Object"==(u=r(n))&&"function"==typeof n.callee?"Arguments":u}},4588:function(t,n){var e=Math.ceil,r=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?r:e)(t)}},"45f2":function(t,n,e){var r=e("d9f6").f,o=e("07e3"),i=e("5168")("toStringTag");t.exports=function(t,n,e){t&&!o(t=e?t:t.prototype,i)&&r(t,i,{configurable:!0,value:n})}},4630:function(t,n){t.exports=function(t,n){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:n}}},"469f":function(t,n,e){e("6c1c"),e("1654"),t.exports=e("7d7b")},"481b":function(t,n){t.exports={}},"4aa6":function(t,n,e){t.exports=e("dc62")},"4bf8":function(t,n,e){var r=e("be13");t.exports=function(t){return Object(r(t))}},"4ee1":function(t,n,e){var r=e("5168")("iterator"),o=!1;try{var i=[7][r]();i.return=function(){o=!0},Array.from(i,function(){throw 2})}catch(u){}t.exports=function(t,n){if(!n&&!o)return!1;var e=!1;try{var i=[7],c=i[r]();c.next=function(){return{done:e=!0}},i[r]=function(){return c},t(i)}catch(u){}return e}},"50ed":function(t,n){t.exports=function(t,n){return{value:n,done:!!t}}},5147:function(t,n,e){var r=e("2b4c")("match");t.exports=function(t){var n=/./;try{"/./"[t](n)}catch(e){try{return n[r]=!1,!"/./"[t](n)}catch(o){}}return!0}},5168:function(t,n,e){var r=e("dbdb")("wks"),o=e("62a0"),i=e("e53d").Symbol,u="function"==typeof i;(t.exports=function(t){return r[t]||(r[t]=u&&i[t]||(u?i:o)("Symbol."+t))}).store=r},5176:function(t,n,e){t.exports=e("51b6")},"51b6":function(t,n,e){e("a3c3"),t.exports=e("584a").Object.assign},"520a":function(t,n,e){var r=e("0bfb"),o=RegExp.prototype.exec,i=String.prototype.replace,u=o,c="lastIndex",a=function(){var t=/a/,n=/b*/g;return o.call(t,"a"),o.call(n,"a"),0!==t[c]||0!==n[c]}(),f=void 0!==/()??/.exec("")[1];(a||f)&&(u=function(t){var n,e,u,s,l=this;return f&&(e=new RegExp("^"+l.source+"$(?!\\s)",r.call(l))),a&&(n=l[c]),u=o.call(l,t),a&&u&&(l[c]=l.global?u.index+u[0].length:n),f&&u&&u.length>1&&i.call(u[0],e,function(){for(s=1;s1?arguments[1]:void 0,b=void 0!==h,g=0,y=s(p);if(b&&(h=r(h,v>2?arguments[2]:void 0,2)),null==y||d==Array&&c(y))for(e=new d(n=a(p.length));n>g;g++)f(e,g,b?h(p[g],g):p[g]);else for(l=y.call(p),e=new d;!(o=l.next()).done;g++)f(e,g,b?u(l,h,[o.value,g],!0):o.value);return e.length=g,e}})},"54a1":function(t,n,e){e("6c1c"),e("1654"),t.exports=e("95d5")},5537:function(t,n,e){var r=e("8378"),o=e("7726"),i="__core-js_shared__",u=o[i]||(o[i]={});(t.exports=function(t,n){return u[t]||(u[t]=void 0!==n?n:{})})("versions",[]).push({version:r.version,mode:e("2d00")?"pure":"global",copyright:"\xA9 2019 Denis Pushkarev (zloirock.ru)"})},5559:function(t,n,e){var r=e("dbdb")("keys"),o=e("62a0");t.exports=function(t){return r[t]||(r[t]=o(t))}},"584a":function(t,n){var e=t.exports={version:"2.6.5"};"number"==typeof __e&&(__e=e)},"5b4e":function(t,n,e){var r=e("36c3"),o=e("b447"),i=e("0fc9");t.exports=function(t){return function(n,e,u){var c,a=r(n),f=o(a.length),s=i(u,f);if(t&&e!=e){for(;f>s;)if((c=a[s++])!=c)return!0}else for(;f>s;s++)if((t||s in a)&&a[s]===e)return t||s||0;return!t&&-1}}},"5ca1":function(t,n,e){var r=e("7726"),o=e("8378"),i=e("32e9"),u=e("2aba"),c=e("9b43"),a="prototype",f=function(t,n,e){var s,l,p,d,v=t&f.F,h=t&f.G,b=t&f.S,g=t&f.P,y=t&f.B,x=h?r:b?r[n]||(r[n]={}):(r[n]||{})[a],m=h?o:o[n]||(o[n]={}),O=m[a]||(m[a]={});for(s in h&&(e=n),e)p=((l=!v&&x&&void 0!==x[s])?x:e)[s],d=y&&l?c(p,r):g&&"function"==typeof p?c(Function.call,p):p,x&&u(x,s,p,t&f.U),m[s]!=p&&i(m,s,d),g&&O[s]!=p&&(O[s]=p)};r.core=o,f.F=1,f.G=2,f.S=4,f.P=8,f.B=16,f.W=32,f.U=64,f.R=128,t.exports=f},"5d73":function(t,n,e){t.exports=e("469f")},"5f1b":function(t,n,e){var r=e("23c6"),o=RegExp.prototype.exec;t.exports=function(t,n){var e=t.exec;if("function"==typeof e){var i=e.call(t,n);if("object"!=typeof i)throw new TypeError("RegExp exec method returned something other than an Object or null");return i}if("RegExp"!==r(t))throw new TypeError("RegExp#exec called on incompatible receiver");return o.call(t,n)}},"626a":function(t,n,e){var r=e("2d95");t.exports=Object("z").propertyIsEnumerable(0)?Object:function(t){return"String"==r(t)?t.split(""):Object(t)}},"62a0":function(t,n){var e=0,r=Math.random();t.exports=function(t){return"Symbol(".concat(void 0===t?"":t,")_",(++e+r).toString(36))}},"63b6":function(t,n,e){var r=e("e53d"),o=e("584a"),i=e("d864"),u=e("35e8"),c=e("07e3"),a="prototype",f=function(t,n,e){var s,l,p,d=t&f.F,v=t&f.G,h=t&f.S,b=t&f.P,g=t&f.B,y=t&f.W,x=v?o:o[n]||(o[n]={}),m=x[a],O=v?r:h?r[n]:(r[n]||{})[a];for(s in v&&(e=n),e)(l=!d&&O&&void 0!==O[s])&&c(x,s)||(p=l?O[s]:e[s],x[s]=v&&"function"!=typeof O[s]?e[s]:g&&l?i(p,r):y&&O[s]==p?function(t){var n=function(n,e,r){if(this instanceof t){switch(arguments.length){case 0:return new t;case 1:return new t(n);case 2:return new t(n,e);}return new t(n,e,r)}return t.apply(this,arguments)};return n[a]=t[a],n}(p):b&&"function"==typeof p?i(Function.call,p):p,b&&((x.virtual||(x.virtual={}))[s]=p,t&f.R&&m&&!m[s]&&u(m,s,p)))};f.F=1,f.G=2,f.S=4,f.P=8,f.B=16,f.W=32,f.U=64,f.R=128,t.exports=f},6762:function(t,n,e){var r=e("5ca1"),o=e("c366")(!0);r(r.P,"Array",{includes:function(t){return o(this,t,arguments.length>1?arguments[1]:void 0)}}),e("9c6c")("includes")},6821:function(t,n,e){var r=e("626a"),o=e("be13");t.exports=function(t){return r(o(t))}},"69a8":function(t,n){var e={}.hasOwnProperty;t.exports=function(t,n){return e.call(t,n)}},"6a99":function(t,n,e){var r=e("d3f4");t.exports=function(t,n){if(!r(t))return t;var e,o;if(n&&"function"==typeof(e=t.toString)&&!r(o=e.call(t)))return o;if("function"==typeof(e=t.valueOf)&&!r(o=e.call(t)))return o;if(!n&&"function"==typeof(e=t.toString)&&!r(o=e.call(t)))return o;throw TypeError("Can't convert object to primitive value")}},"6b4c":function(t,n){var e={}.toString;t.exports=function(t){return e.call(t).slice(8,-1)}},"6c1c":function(t,n,e){e("c367");for(var r=e("e53d"),o=e("35e8"),i=e("481b"),u=e("5168")("toStringTag"),c="CSSRuleList,CSSStyleDeclaration,CSSValueList,ClientRectList,DOMRectList,DOMStringList,DOMTokenList,DataTransferItemList,FileList,HTMLAllCollection,HTMLCollection,HTMLFormElement,HTMLSelectElement,MediaList,MimeTypeArray,NamedNodeMap,NodeList,PaintRequestList,Plugin,PluginArray,SVGLengthList,SVGNumberList,SVGPathSegList,SVGPointList,SVGStringList,SVGTransformList,SourceBufferList,StyleSheetList,TextTrackCueList,TextTrackList,TouchList".split(","),a=0;a=f?t?"":void 0:(i=c.charCodeAt(a))<55296||i>56319||a+1===f||(u=c.charCodeAt(a+1))<56320||u>57343?t?c.charAt(a):i:t?c.slice(a,a+2):u-56320+(i-55296<<10)+65536}}},7726:function(t,n){var e=t.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=e)},"774e":function(t,n,e){t.exports=e("d2d5")},"77f1":function(t,n,e){var r=e("4588"),o=Math.max,i=Math.min;t.exports=function(t,n){return(t=r(t))<0?o(t+n,0):i(t,n)}},"794b":function(t,n,e){t.exports=!e("8e60")&&!e("294c")(function(){return 7!=Object.defineProperty(e("1ec9")("div"),"a",{get:function(){return 7}}).a})},"79aa":function(t,n){t.exports=function(t){if("function"!=typeof t)throw TypeError(t+" is not a function!");return t}},"79e5":function(t,n){t.exports=function(t){try{return!!t()}catch(n){return!0}}},"7cd6":function(t,n,e){var r=e("40c3"),o=e("5168")("iterator"),i=e("481b");t.exports=e("584a").getIteratorMethod=function(t){if(null!=t)return t[o]||t["@@iterator"]||i[r(t)]}},"7d7b":function(t,n,e){var r=e("e4ae"),o=e("7cd6");t.exports=e("584a").getIterator=function(t){var n=o(t);if("function"!=typeof n)throw TypeError(t+" is not iterable!");return r(n.call(t))}},"7e90":function(t,n,e){var r=e("d9f6"),o=e("e4ae"),i=e("c3a1");t.exports=e("8e60")?Object.defineProperties:function(t,n){o(t);for(var e,u=i(n),c=u.length,a=0;c>a;)r.f(t,e=u[a++],n[e]);return t}},8378:function(t,n){var e=t.exports={version:"2.6.5"};"number"==typeof __e&&(__e=e)},8436:function(t,n){t.exports=function(){}},"86cc":function(t,n,e){var r=e("cb7c"),o=e("c69a"),i=e("6a99"),u=Object.defineProperty;n.f=e("9e1e")?Object.defineProperty:function(t,n,e){if(r(t),n=i(n,!0),r(e),o)try{return u(t,n,e)}catch(c){}if("get"in e||"set"in e)throw TypeError("Accessors not supported!");return"value"in e&&(t[n]=e.value),t}},"8aae":function(t,n,e){e("32a6"),t.exports=e("584a").Object.keys},"8e60":function(t,n,e){t.exports=!e("294c")(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},"8f60":function(t,n,e){var r=e("a159"),o=e("aebd"),i=e("45f2"),u={};e("35e8")(u,e("5168")("iterator"),function(){return this}),t.exports=function(t,n,e){t.prototype=r(u,{next:o(1,e)}),i(t,n+" Iterator")}},9003:function(t,n,e){var r=e("6b4c");t.exports=Array.isArray||function(t){return"Array"==r(t)}},9138:function(t,n,e){t.exports=e("35e8")},9306:function(t,n,e){var r=e("c3a1"),o=e("9aa9"),i=e("355d"),u=e("241e"),c=e("335c"),a=Object.assign;t.exports=!a||e("294c")(function(){var t={},n={},e=Symbol(),r="abcdefghijklmnopqrst";return t[e]=7,r.split("").forEach(function(t){n[t]=t}),7!=a({},t)[e]||Object.keys(a({},n)).join("")!=r})?function(t,n){for(var e=u(t),a=arguments.length,f=1,s=o.f,l=i.f;a>f;)for(var p,d=c(arguments[f++]),v=s?r(d).concat(s(d)):r(d),h=v.length,b=0;h>b;)l.call(d,p=v[b++])&&(e[p]=d[p]);return e}:a},9427:function(t,n,e){var r=e("63b6");r(r.S,"Object",{create:e("a159")})},"95d5":function(t,n,e){var r=e("40c3"),o=e("5168")("iterator"),i=e("481b");t.exports=e("584a").isIterable=function(t){var n=Object(t);return void 0!==n[o]||"@@iterator"in n||i.hasOwnProperty(r(n))}},"9aa9":function(t,n){n.f=Object.getOwnPropertySymbols},"9b43":function(t,n,e){var r=e("d8e8");t.exports=function(t,n,e){if(r(t),void 0===n)return t;switch(e){case 1:return function(e){return t.call(n,e)};case 2:return function(e,r){return t.call(n,e,r)};case 3:return function(e,r,o){return t.call(n,e,r,o)};}return function(){return t.apply(n,arguments)}}},"9c6c":function(t,n,e){var r=e("2b4c")("unscopables"),o=Array.prototype;null==o[r]&&e("32e9")(o,r,{}),t.exports=function(t){o[r][t]=!0}},"9def":function(t,n,e){var r=e("4588"),o=Math.min;t.exports=function(t){return t>0?o(r(t),9007199254740991):0}},"9e1e":function(t,n,e){t.exports=!e("79e5")(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},a159:function(t,n,e){var r=e("e4ae"),o=e("7e90"),i=e("1691"),u=e("5559")("IE_PROTO"),c=function(){},a="prototype",f=function(){var t,n=e("1ec9")("iframe"),r=i.length;for(n.style.display="none",e("32fc").appendChild(n),n.src="javascript:",(t=n.contentWindow.document).open(),t.write(""),t.close(),f=t.F;r--;)delete f[a][i[r]];return f()};t.exports=Object.create||function(t,n){var e;return null!==t?(c[a]=r(t),e=new c,c[a]=null,e[u]=t):e=f(),void 0===n?e:o(e,n)}},a352:function(n,e){n.exports=t},a3c3:function(t,n,e){var r=e("63b6");r(r.S+r.F,"Object",{assign:e("9306")})},a481:function(t,n,e){var r=e("cb7c"),o=e("4bf8"),i=e("9def"),u=e("4588"),c=e("0390"),a=e("5f1b"),f=Math.max,s=Math.min,l=Math.floor,p=/\$([$&`']|\d\d?|<[^>]*>)/g,d=/\$([$&`']|\d\d?)/g,v=function(t){return void 0===t?t:String(t)};e("214f")("replace",2,function(t,n,e,h){return[function(r,o){var i=t(this),u=null==r?void 0:r[n];return void 0!==u?u.call(r,i,o):e.call(String(i),r,o)},function(t,n){var o=h(e,t,this,n);if(o.done)return o.value;var l=r(t),p=String(this),d="function"==typeof n;d||(n=String(n));var g=l.global;if(g){var y=l.unicode;l.lastIndex=0}for(var x=[];;){var m=a(l,p);if(null===m)break;if(x.push(m),!g)break;""===String(m[0])&&(l.lastIndex=c(p,i(l.lastIndex),y))}for(var O="",w=0,S=0;S=w&&(O+=p.slice(w,_)+E,w=_+j.length)}return O+p.slice(w)}];function b(t,n,r,i,u,c){var a=r+t.length,f=i.length,s=d;return void 0!==u&&(u=o(u),s=p),e.call(c,s,function(e,o){var c;switch(o.charAt(0)){case"$":return"$";case"&":return t;case"`":return n.slice(0,r);case"'":return n.slice(a);case"<":c=u[o.slice(1,-1)];break;default:var s=+o;if(0===s)return e;if(s>f){var p=l(s/10);return 0===p?e:p<=f?void 0===i[p-1]?o.charAt(1):i[p-1]+o.charAt(1):e}c=i[s-1];}return void 0===c?"":c})}})},a4bb:function(t,n,e){t.exports=e("8aae")},a745:function(t,n,e){t.exports=e("f410")},aae3:function(t,n,e){var r=e("d3f4"),o=e("2d95"),i=e("2b4c")("match");t.exports=function(t){var n;return r(t)&&(void 0!==(n=t[i])?!!n:"RegExp"==o(t))}},aebd:function(t,n){t.exports=function(t,n){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:n}}},b0c5:function(t,n,e){var r=e("520a");e("5ca1")({target:"RegExp",proto:!0,forced:r!==/./.exec},{exec:r})},b0dc:function(t,n,e){var r=e("e4ae");t.exports=function(t,n,e,o){try{return o?n(r(e)[0],e[1]):n(e)}catch(u){var i=t.return;throw void 0!==i&&r(i.call(t)),u}}},b447:function(t,n,e){var r=e("3a38"),o=Math.min;t.exports=function(t){return t>0?o(r(t),9007199254740991):0}},b8e3:function(t,n){t.exports=!0},be13:function(t,n){t.exports=function(t){if(null==t)throw TypeError("Can't call method on "+t);return t}},c366:function(t,n,e){var r=e("6821"),o=e("9def"),i=e("77f1");t.exports=function(t){return function(n,e,u){var c,a=r(n),f=o(a.length),s=i(u,f);if(t&&e!=e){for(;f>s;)if((c=a[s++])!=c)return!0}else for(;f>s;s++)if((t||s in a)&&a[s]===e)return t||s||0;return!t&&-1}}},c367:function(t,n,e){var r=e("8436"),o=e("50ed"),i=e("481b"),u=e("36c3");t.exports=e("30f1")(Array,"Array",function(t,n){this._t=u(t),this._i=0,this._k=n},function(){var t=this._t,n=this._k,e=this._i++;return!t||e>=t.length?(this._t=void 0,o(1)):o(0,"keys"==n?e:"values"==n?t[e]:[e,t[e]])},"values"),i.Arguments=i.Array,r("keys"),r("values"),r("entries")},c3a1:function(t,n,e){var r=e("e6f3"),o=e("1691");t.exports=Object.keys||function(t){return r(t,o)}},c649:function(t,n,e){(function(t){e.d(n,"c",function(){return f}),e.d(n,"a",function(){return c}),e.d(n,"b",function(){return i}),e.d(n,"d",function(){return a}),e("a481");var r=e("4aa6"),o=e.n(r);var i="undefined"!=typeof window?window.console:t.console;var u=/-(\w)/g,c=function(t){var n=o()(null);return function(e){return n[e]||(n[e]=t(e))}}(function(t){return t.replace(u,function(t,n){return n?n.toUpperCase():""})});function a(t){null!==t.parentElement&&t.parentElement.removeChild(t)}function f(t,n,e){var r=0===e?t.children[0]:t.children[e-1].nextSibling;t.insertBefore(n,r)}}).call(this,e("c8ba"))},c69a:function(t,n,e){t.exports=!e("9e1e")&&!e("79e5")(function(){return 7!=Object.defineProperty(e("230e")("div"),"a",{get:function(){return 7}}).a})},c8ba:function(t,n){var e;e=function(){return this}();try{e=e||new Function("return this")()}catch(r){"object"==typeof window&&(e=window)}t.exports=e},c8bb:function(t,n,e){t.exports=e("54a1")},ca5a:function(t,n){var e=0,r=Math.random();t.exports=function(t){return"Symbol(".concat(void 0===t?"":t,")_",(++e+r).toString(36))}},cb7c:function(t,n,e){var r=e("d3f4");t.exports=function(t){if(!r(t))throw TypeError(t+" is not an object!");return t}},ce7e:function(t,n,e){var r=e("63b6"),o=e("584a"),i=e("294c");t.exports=function(t,n){var e=(o.Object||{})[t]||Object[t],u={};u[t]=n(e),r(r.S+r.F*i(function(){e(1)}),"Object",u)}},d2c8:function(t,n,e){var r=e("aae3"),o=e("be13");t.exports=function(t,n,e){if(r(n))throw TypeError("String#"+e+" doesn't accept regex!");return String(o(t))}},d2d5:function(t,n,e){e("1654"),e("549b"),t.exports=e("584a").Array.from},d3f4:function(t,n){t.exports=function(t){return"object"==typeof t?null!==t:"function"==typeof t}},d864:function(t,n,e){var r=e("79aa");t.exports=function(t,n,e){if(r(t),void 0===n)return t;switch(e){case 1:return function(e){return t.call(n,e)};case 2:return function(e,r){return t.call(n,e,r)};case 3:return function(e,r,o){return t.call(n,e,r,o)};}return function(){return t.apply(n,arguments)}}},d8e8:function(t,n){t.exports=function(t){if("function"!=typeof t)throw TypeError(t+" is not a function!");return t}},d9f6:function(t,n,e){var r=e("e4ae"),o=e("794b"),i=e("1bc3"),u=Object.defineProperty;n.f=e("8e60")?Object.defineProperty:function(t,n,e){if(r(t),n=i(n,!0),r(e),o)try{return u(t,n,e)}catch(c){}if("get"in e||"set"in e)throw TypeError("Accessors not supported!");return"value"in e&&(t[n]=e.value),t}},dbdb:function(t,n,e){var r=e("584a"),o=e("e53d"),i="__core-js_shared__",u=o[i]||(o[i]={});(t.exports=function(t,n){return u[t]||(u[t]=void 0!==n?n:{})})("versions",[]).push({version:r.version,mode:e("b8e3")?"pure":"global",copyright:"\xA9 2019 Denis Pushkarev (zloirock.ru)"})},dc62:function(t,n,e){e("9427");var r=e("584a").Object;t.exports=function(t,n){return r.create(t,n)}},e4ae:function(t,n,e){var r=e("f772");t.exports=function(t){if(!r(t))throw TypeError(t+" is not an object!");return t}},e53d:function(t,n){var e=t.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=e)},e6f3:function(t,n,e){var r=e("07e3"),o=e("36c3"),i=e("5b4e")(!1),u=e("5559")("IE_PROTO");t.exports=function(t,n){var e,c=o(t),a=0,f=[];for(e in c)e!=u&&r(c,e)&&f.push(e);for(;n.length>a;)r(c,e=n[a++])&&(~i(f,e)||f.push(e));return f}},f410:function(t,n,e){e("1af6"),t.exports=e("584a").Array.isArray},f559:function(t,n,e){var r=e("5ca1"),o=e("9def"),i=e("d2c8"),u="startsWith",c=""[u];r(r.P+r.F*e("5147")(u),"String",{startsWith:function(t){var n=i(this,t,u),e=o(Math.min(arguments.length>1?arguments[1]:void 0,n.length)),r=String(t);return c?c.call(n,r,e):n.slice(e,e+r.length)===r}})},f772:function(t,n){t.exports=function(t){return"object"==typeof t?null!==t:"function"==typeof t}},fa5b:function(t,n,e){t.exports=e("5537")("native-function-to-string",Function.toString)},fb15:function(t,n,e){var r;e.r(n),"undefined"!=typeof window&&(r=window.document.currentScript)&&(r=r.src.match(/(.+\/)[^\/]+\.js(\?.*)?$/))&&(e.p=r[1]);var o=e("5176"),i=e.n(o),u=(e("f559"),e("a4bb")),c=e.n(u),a=(e("6762"),e("2fdb"),e("a745")),f=e.n(a);var s=e("5d73"),l=e.n(s);function p(t,n){return function(t){if(f()(t))return t}(t)||function(t,n){var e=[],r=!0,o=!1,i=void 0;try{for(var u,c=l()(t);!(r=(u=c.next()).done)&&(e.push(u.value),!n||e.length!==n);r=!0);}catch(a){o=!0,i=a}finally{try{r||null==c.return||c.return()}finally{if(o)throw i}}return e}(t,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}var d=e("774e"),v=e.n(d),h=e("c8bb"),b=e.n(h);function g(t){return function(t){if(f()(t)){for(var n=0,e=new Array(t.length);n=i?o.length:o.indexOf(t)});return e?u.filter(function(t){return-1!==t}):u}(t.getChildrenNodes(),t.rootContainer.children,t.transitionMode,t.footerOffset)})},getUnderlyingVm:function(t){var n=function(t,n){return t.map(function(t){return t.elm}).indexOf(n)}(this.getChildrenNodes()||[],t);return-1===n?null:{index:n,element:this.realList[n]}},getUnderlyingPotencialDraggableComponent:function(t){var n=t.__vue__;return n&&n.$options&&"transition-group"===n.$options._componentTag?n.$parent:n},emitChanges:function(t){var n=this;this.$nextTick(function(){n.$emit("change",t)})},alterList:function(t){if(this.list)t(this.list);else{var n=g(this.value);t(n),this.$emit("input",n)}},spliceList:function(){var t=arguments;this.alterList(function(n){return n.splice.apply(n,g(t))})},updatePosition:function(t,n){this.alterList(function(e){return e.splice(n,0,e.splice(t,1)[0])})},getRelatedContextFromMoveEvent:function(t){var n=t.to,e=t.related,r=this.getUnderlyingPotencialDraggableComponent(n);if(!r)return{component:r};var o=r.realList,u={list:o,component:r};if(n!==e&&o&&r.getUnderlyingVm){var c=r.getUnderlyingVm(e);if(c)return i()(c,u)}return u},getVmIndex:function(t){var n=this.visibleIndexes,e=n.length;return t>e-1?e:n[t]},getComponent:function(){return this.$slots.default[0].componentInstance},resetTransitionData:function(t){if(this.noTransitionOnDrag&&this.transitionMode){this.getChildrenNodes()[t].data=null;var n=this.getComponent();n.children=[],n.kept=void 0}},onDragStart:function(t){this.context=this.getUnderlyingVm(t.item),t.item._underlying_vm_=this.clone(this.context.element),$=t.item},onDragAdd:function(t){var n=t.item._underlying_vm_;if(void 0!==n){Object(m.d)(t.item);var e=this.getVmIndex(t.newIndex);this.spliceList(e,0,n),this.computeIndexes();var r={element:n,newIndex:e};this.emitChanges({added:r})}},onDragRemove:function(t){if(Object(m.c)(this.rootContainer,t.item,t.oldIndex),"clone"!==t.pullMode){var n=this.context.index;this.spliceList(n,1);var e={element:this.context.element,oldIndex:n};this.resetTransitionData(n),this.emitChanges({removed:e})}else Object(m.d)(t.clone)},onDragUpdate:function(t){Object(m.d)(t.item),Object(m.c)(t.from,t.item,t.oldIndex);var n=this.context.index,e=this.getVmIndex(t.newIndex);this.updatePosition(n,e);var r={element:this.context.element,oldIndex:n,newIndex:e};this.emitChanges({moved:r})},updateProperty:function(t,n){t.hasOwnProperty(n)&&(t[n]+=this.headerOffset)},computeFutureIndex:function(t,n){if(!t.element)return 0;var e=g(n.to.children).filter(function(t){return"none"!==t.style.display}),r=e.indexOf(n.related),o=t.component.getVmIndex(r);return-1!==e.indexOf($)||!n.willInsertAfter?o:o+1},onDragMove:function(t,n){var e=this.move;if(!e||!this.realList)return!0;var r=this.getRelatedContextFromMoveEvent(t),o=this.context,u=this.computeFutureIndex(r,t);return i()(o,{futureIndex:u}),e(i()({},t,{relatedContext:r,draggedContext:o}),n)},onDragEnd:function(){this.computeIndexes(),$=null}}};"undefined"!=typeof window&&"Vue"in window&&window.Vue.component("draggable",M);var T=M;n.default=T}}).default});var e={props:{counter:[Boolean,Object],disabled:Boolean,endpoints:Object,input:[String,Number],name:[String,Number],required:Boolean,type:String,value:{type:Array,default:[]},blockConfigs:Object,fieldsets:Object,columns:Number,max:Number,label:String,pageId:String,pageUid:String,encodedPageId:String,parentPath:String,pending:Boolean},data:function(){return{dragging:!1,targetPosition:null,lastUniqueKey:0,cssContents:{},jsContents:{},dialogOpen:!1,extendedBlockConfigs:{}}},components:{BuilderBlock:d},mounted:function(){var e=this;this.pending?this.$api.post("kirby-builder/pages/".concat(this.pageId,"/builderconfig"),{fieldsets:this.fieldsets,value:this.value}).then(function(t){e.extendedBlockConfigs=t.fieldsets,e.value=t.value,e.loadBlockPreviewStyles()}):(this.extendedBlockConfigs=this.fieldsets,null==this.value&&(this.value=Array()),this.loadBlockPreviewStyles())},computed:{classObject:function(){var e={};return e["kBuilder--col-"+this.columnsCount]=!0,e["kBuilder--dragging"]=this.dragging,e},path:function(){return this.parentPath?"".concat(this.parentPath,"+").concat(this.name):this.name},columnsCount:function(){return this.columns?this.columns:"1"},columnWidth:function(){return this.columns?"1/"+this.columns:"1/1"},draggableOptions:function(){return{group:this._uid,handle:".kBuilder__dragDropHandle",forceFallback:!0,fallbackClass:"sortable-fallback",fallbackOnBody:!0,scroll:document.querySelector(".k-panel-view")}},blockCount:function(){return this.value.length},fieldsetCount:function(){return Object.keys(this.extendedBlockConfigs).length},fieldsetKeys:function(){return Object.keys(this.extendedBlockConfigs)},addBlockButtonLabel:function(){return this.$t("add")}},methods:{updateValue:function(e,t){this.$set(this.value,e,t)},loadBlockFormsByConfig:function(e){return"string"==typeof e&&(e={extends:e}),this.$api.post("kirby-builder/pages/".concat(this.pageId,"/blockformbyconfig"),e)},loadBlockPreviewStyles:function(){var e=this;Object.values(this.extendedBlockConfigs).forEach(function(t){if(t.preview&&t.preview.css){var n=t.preview.css;if(!e.cssContents[n])return e.$set(e.cssContents,n,{}),fetch("/"+n.replace(/^\/+/g,"")).then(function(e){return e.text()}).then(function(t){e.$set(e.cssContents,n,t)})}})},onBlockInput:function(e){this.$emit("input",this.value)},onBlockMoved:function(e){this.$emit("input",this.value)},onBlockAdded:function(e){this.$emit("input",this.value)},onBlockRemoved:function(e){this.$emit("input",this.value)},onDragEnd:function(e){this.dragging=!1},onMove:function(e){return this.$root.$emit("blockMoved"),e.relatedContext.index!=this.value.length+1},onStartDrag:function(e){this.dragging=!0;var t=e.item.getElementsByClassName("kBuilderPreview__frame")[0];if(t){var n=t.contentWindow.document,i=document.getElementsByClassName("sortable-drag")[0].getElementsByClassName("kBuilderPreview__frame")[0].contentWindow.document;i.open(),i.write(n.documentElement.innerHTML),i.close()}},onClickAddBlock:function(e){this.targetPosition=e,1==this.fieldsetCount?this.addBlock(this.fieldsetKeys[0]):this.$refs.dialog.open()},onOpenDialog:function(){this.dialogOpen=!0},onCloseDialog:function(){this.dialogOpen=!1},addBlock:function(e){null==this.value&&(this.value=[]);var t=null==this.targetPosition?this.value.length:this.targetPosition,n=this.extendedBlockConfigs[e];this.value.splice(t,0,this.getBlankContent(e,n)),this.targetPosition=null,this.dialogOpen&&this.$refs.dialog.close(),this.$emit("input",this.value)},cloneBlock:function(e,t,n,i){var o=JSON.parse(JSON.stringify(this.value[e]));this.deepRemoveProperty(o,"_uid"),this.value.splice(e+1,0,o);var l=this.value[e+1];l.uniqueKey=this.lastUniqueKey++,null!=t&&(l.showPreviewInitially=t),null!=n&&(l.expandedInitially=n),i&&(l.activeFieldSetInitially=i),this.$emit("input",this.value)},deleteBlock:function(e){this.clearLocalUiStates(this.value[e]),this.value.splice(e,1),this.$emit("input",this.value)},getBlankContent:function(e,t){return{_key:e,_uid:e+"_"+new Date().valueOf()+"_"+this._uid}},deepRemoveProperty:function(e,t){var n=this;Object.keys(e).forEach(function(i){i===t?delete e[i]:e[i]&&"object"===k(e[i])&&n.deepRemoveProperty(e[i],t)})},clearLocalUiStates:function(e){for(var t in e)if(e.hasOwnProperty(t)){e[t];"_uid"===t?localStorage.removeItem("kBuilder.uiState.".concat(e[t])):"object"===k(e[t])&&this.clearLocalUiStates(e[t])}}}};if(typeof e==="function"){e=e.options}Object.assign(e,function(){var render=function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c("k-field",{staticClass:"kBuilder",class:_vm.classObject,attrs:{"label":_vm.label}},[_c("k-draggable",{staticClass:"kBuilder__blocks k-grid",attrs:{"move":_vm.onMove,"list":_vm.value,"options":_vm.draggableOptions},on:{"update":_vm.onBlockMoved,"add":_vm.onBlockAdded,"remove":_vm.onBlockRemoved,"end":_vm.onDragEnd}},[_vm._l(_vm.value,function(blockValue,index){return _vm.extendedBlockConfigs[blockValue._key]?_c("k-column",{key:blockValue._uid,staticClass:"kBuilder__column",attrs:{"width":_vm.columnWidth}},[!_vm.max||_vm.blockCount<_vm.max?_c("div",{staticClass:"kBuilder__inlineAddButton",class:{"kBuilder__inlineAddButton--horizontal":_vm.columnsCount==1,"kBuilder__inlineAddButton--vertical":_vm.columnsCount>1},on:{"click":function($event){_vm.onClickAddBlock(index)}}}):_vm._e(),_vm._v(" "),_c("builder-block",{attrs:{"page-id":_vm.pageId,"page-uid":_vm.pageUid,"encoded-page-id":_vm.encodedPageId,"endpoints":_vm.endpoints,"value":blockValue,"label":_vm.extendedBlockConfigs[blockValue._key].label||_vm.extendedBlockConfigs[blockValue._key].name,"blockConfig":_vm.extendedBlockConfigs[blockValue._key],"fieldGroup":_vm.extendedBlockConfigs[blockValue._key],"index":index,"columns-count":_vm.columnsCount,"styles":_vm.cssContents[blockValue._key],"script":_vm.jsContents[blockValue._key],"parentPath":_vm.path,"canDuplicate":!_vm.max||_vm.blockCount<_vm.max,"cssContent":_vm.extendedBlockConfigs[blockValue._key].preview&&_vm.cssContents[_vm.extendedBlockConfigs[blockValue._key].preview.css]?_vm.cssContents[_vm.extendedBlockConfigs[blockValue._key].preview.css]:"","cssContents":_vm.cssContents},on:{"input":_vm.onBlockInput,"clone":_vm.cloneBlock,"delete":_vm.deleteBlock,"transformed":function($event){_vm.updateValue(index,$event)}}}),_vm._v(" "),_vm.columnsCount%index==0&&_vm.columnsCount>1&&(!_vm.max||_vm.blockCount<_vm.max)?_c("div",{staticClass:"kBuilder__inlineAddButton kBuilder__inlineAddButton--vertical kBuilder__inlineAddButton--after",on:{"click":function($event){_vm.onClickAddBlock(index+1)}}}):_vm._e()],1):_vm._e()}),_vm._v(" "),!_vm.max||_vm.blockCount<_vm.max?_c("k-column",{attrs:{"width":_vm.columnWidth}},[_c("k-button",{staticClass:"kBuilder__addButton",attrs:{"icon":"add"},on:{"click":function($event){_vm.onClickAddBlock()}}},[_vm._v(_vm._s(_vm.addBlockButtonLabel))])],1):_vm._e()],2),_vm._v(" "),_c("k-dialog",{ref:"dialog",staticClass:"kBuilder__dialog",on:{"open":_vm.onOpenDialog,"close":_vm.onCloseDialog}},[_c("k-list",_vm._l(_vm.extendedBlockConfigs,function(value,key){return _c("k-list-item",{key:key,class:["kBuilder__addBlockButton","kBuilder__addBlockButton--"+key],attrs:{"text":value.name||value.label},on:{"click":function($event){_vm.addBlock(key)}}},[_c("template",{slot:"options"},[_c("k-icon",{staticClass:"kBuilder__addBlockButtonIcon",attrs:{"type":"add"}})],1)],2)}),1)],1)],1)};var staticRenderFns=[];return{render:render,staticRenderFns:staticRenderFns,_compiled:true,_scopeId:null,functional:undefined}}());panel.plugin("timoetting/k-builder",{fields:{builder:e}});})(); -------------------------------------------------------------------------------- /index.php: -------------------------------------------------------------------------------- 1 | fields()->toArray()); 21 | $fieldApi = $ApiInstance->clone([ 22 | 'routes' => $field->api(), 23 | 'data' => array_merge($ApiInstance->data(), ['field' => $field]) 24 | ]); 25 | return $fieldApi->call($path, $ApiInstance->requestMethod(), $ApiInstance->requestData()); 26 | } 27 | 28 | /** 29 | * Gets a nested Field Object, also from within nested builder, by recursively iterating and extending through the configurations. 30 | * 31 | * @param array $fieldPath 32 | * @param \Kirby\Cms\Page $page 33 | * @param array $fields 34 | * @return \Kirby\Form\Field 35 | */ 36 | function fieldFromPath($fieldPath, $page, $fields) { 37 | $fieldName = array_shift($fieldPath); 38 | $fieldProps = $fields[$fieldName]; 39 | if ($fieldProps['type'] === 'builder' && count($fieldPath) > 0) { 40 | $fieldsetKey = array_shift($fieldPath); 41 | $fieldset = $fieldProps['fieldsets'][$fieldsetKey]; 42 | $fieldset = BuilderBlueprint::extend($fieldset); 43 | $fieldset = extendRecursively($fieldset, $page, '__notNull'); 44 | if (array_key_exists('tabs', $fieldset) && is_array($fieldset['tabs'])) { 45 | $fieldsetFields = []; 46 | foreach ( $fieldset['tabs'] as $tabKey => $tab) { 47 | $fieldsetFields = array_merge($fieldsetFields, $tab['fields']); 48 | } 49 | } else { 50 | $fieldsetFields = $fieldset['fields']; 51 | } 52 | return fieldFromPath($fieldPath, $page, $fieldsetFields); 53 | } else if ($fieldProps['type'] === 'structure' && count($fieldPath) > 0) { 54 | return fieldFromPath($fieldPath, $page, $fieldProps['fields']); 55 | } else { 56 | $fieldProps['model'] = $page; 57 | return new Field($fieldProps['type'], $fieldProps); 58 | } 59 | } 60 | 61 | /** 62 | * Transforms values from the content file to panel ready values. 63 | * 64 | * Returning just the yaml decoded value from the content file is not enough to work with fields in the panel. File Fields, Select Fields an others require the values to be transformed to work with the vue components. To get this transformed value I create a proxy Form to get the get the values via its value() function. 65 | * 66 | * @param array $values 67 | * @param array $fieldsets 68 | * @param \Kirby\Api\Model|null $model 69 | * @return array 70 | */ 71 | function getPanelReadyValues ($values, $fieldsets, $model = null) { 72 | $vals = []; 73 | if ($values == null) { 74 | return $vals; 75 | } 76 | foreach ($values as $key => $value) { 77 | $blockKey = $value['_key']; 78 | if (array_key_exists($blockKey, $fieldsets)) { 79 | $block = $fieldsets[$blockKey]; 80 | $form = getBlockForm($value, $block, $model); 81 | } 82 | $vals[] = $form->values(); 83 | } 84 | return $vals; 85 | } 86 | 87 | /** 88 | * Returns a Kirby Form object from block fields. It also merges fields of block tabs to be treated as one form. 89 | * 90 | * @param array $value 91 | * @param array $blockConfig 92 | * @param \Kirby\Api\Model|null $model 93 | */ 94 | function getBlockForm($value, $blockConfig, $model = null) { 95 | $fields = []; 96 | if (array_key_exists('fields', $blockConfig)) { 97 | $fields = $blockConfig['fields']; 98 | } else if (array_key_exists('tabs', $blockConfig)) { 99 | $tabs = $blockConfig['tabs']; 100 | foreach ( $tabs as $tabKey => $tab) { 101 | $fields = array_merge($fields, $tab['fields']); 102 | } 103 | } 104 | foreach ($fields as $key => $field ) { 105 | $fields[$key]["errors"] = null; 106 | } 107 | $form = new Form([ 108 | 'fields' => $fields, 109 | 'values' => $value, 110 | 'model' => $model 111 | ]); 112 | return $form; 113 | } 114 | 115 | /** 116 | * Recursively iterates through the properties of a a builder's fieldsets configuration and transforms the fields property to a panel compatible structure 117 | * 118 | * @param array $properties 119 | * @param \Kirby\Api\Model|null $model 120 | */ 121 | function getEnhancedBlockConfig($properties, $model) { 122 | foreach ($properties as $name => $props) { 123 | if (is_array($props)) { 124 | if ($name === "fields") { 125 | $fieldForm = new Form([ 126 | 'fields' => $properties["fields"], 127 | 'model' => $model ?? null 128 | ] 129 | ); 130 | $properties["fields"] = $fieldForm->fields()->toArray(); 131 | $properties["extended"] = true; 132 | } else { 133 | $properties[$name] = getEnhancedBlockConfig($props, $model); 134 | } 135 | } 136 | } 137 | return $properties; 138 | } 139 | 140 | Kirby::plugin('timoetting/kirbybuilder', [ 141 | 'fields' => [ 142 | 'builder' => [ 143 | 'computed' => [ 144 | 'pageId' => function () { 145 | return $this->model()->id(); 146 | }, 147 | 'pageUid' => function () { 148 | return $this->model()->uid(); 149 | }, 150 | 'encodedPageId' => function () { 151 | return str_replace('/', '+', $this->model()->id()); 152 | }, 153 | 'fieldsets' => function () { 154 | if (!$this->isNestedBuilder) { 155 | $cache = []; 156 | $fieldSets = Yaml::decode($this->fieldsets); 157 | $fieldSets = extendRecursively($fieldSets, $this->model(), null, $cache); 158 | $fieldSets = getEnhancedBlockConfig($fieldSets, $this->model()); 159 | return $fieldSets; 160 | } else { 161 | return $this->fieldsets; 162 | } 163 | }, 164 | 'pending' => function () { 165 | return ($this->isNestedBuilder) ? true : false; 166 | }, 167 | 'value' => function () { 168 | if ($this->isNestedBuilder) { 169 | return $this->value; 170 | } else { 171 | $values = $this->value != null ? Yaml::decode($this->value) : Yaml::decode($this->default); 172 | return getPanelReadyValues($values, $this->fieldsets, $this->model()); 173 | } 174 | }, 175 | 'cssUrls' => function() { 176 | return []; 177 | }, 178 | 'jsUrls' => function() { 179 | return []; 180 | } 181 | ], 182 | 'methods' => [ 183 | 'getData' => function ($values) { 184 | $vals = []; 185 | if ($values == null) { 186 | return $vals; 187 | } 188 | foreach ($values as $value) { 189 | $blockKey = $value['_key']; 190 | if (array_key_exists($blockKey, $this->fieldsets)) { 191 | if ($this->isNestedBuilder) { 192 | $this->fieldsets[$blockKey] = extendRecursively([$blockKey => $this->fieldsets[$blockKey]], $this->model())[$blockKey]; 193 | } 194 | $blockConfig = $this->fieldsets[$blockKey]; 195 | 196 | $form = $this->getBlockForm($value, $blockConfig); 197 | } 198 | $vals[] = $form->data(); 199 | } 200 | return $vals; 201 | }, 202 | 'getBlockForm' => function ($value, $block) { 203 | return getBlockForm($value, $block, $this->model()); 204 | }, 205 | ], 206 | 'validations' => [ 207 | 'validateChildren' => function ($values) { 208 | $errorMessages = []; 209 | if ($values && gettype($values) === "array") { 210 | foreach ($values as $value) { 211 | $blockKey = $value['_key']; 212 | if (array_key_exists($blockKey, $this->fieldsets)) { 213 | if ($this->isNestedBuilder) { 214 | $this->fieldsets[$blockKey] = extendRecursively([$blockKey => $this->fieldsets[$blockKey]], $this->model())[$blockKey]; 215 | } 216 | $blockConfig = $this->fieldsets[$blockKey]; 217 | $form = $this->getBlockForm($value, $blockConfig); 218 | if ($form->errors()) { 219 | foreach ($form->errors() as $fieldKey => $error) { 220 | foreach ($error["message"] as $errorKey => $message) { 221 | if ($errorKey != "validateChildren") { 222 | $errorMessage = ""; 223 | if (array_key_exists('name', $blockConfig)) { 224 | $errorMessage .= $blockConfig["name"] . "/"; 225 | } 226 | $errorMessage .= $error['label'] . ': ' . $message; 227 | $errorMessages[] = $errorMessage; 228 | } else { 229 | $errorMessages[] = $message; 230 | } 231 | } 232 | } 233 | } 234 | } 235 | } 236 | } 237 | if (count($errorMessages)) { 238 | throw new Exception(implode("\n", $errorMessages)); 239 | } 240 | } 241 | ], 242 | 'save' => function ($values = null) { 243 | return $this->getData($values); 244 | }, 245 | ], 246 | ], 247 | 'api' => [ 248 | 'routes' => [ 249 | [ 250 | 'pattern' => 'kirby-builder/pages/(:any)/blockformbyconfig', 251 | 'method' => 'POST', 252 | 'action' => function (string $pageUid) { 253 | $page = kirby()->page($pageUid); 254 | $blockConfig = kirby()->request()->data(); 255 | $extendedProps = extendRecursively($blockConfig, $page); 256 | $defaultValues = []; 257 | if(array_key_exists("tabs", $extendedProps)) { 258 | $tabs = $extendedProps['tabs']; 259 | foreach ( $tabs as $tabKey => &$tab) { 260 | foreach ($tab["fields"] as $fieldKey => &$field) { 261 | if (array_key_exists("default", $field)) { 262 | $defaultValues[$fieldKey] = $field["default"]; 263 | } 264 | } 265 | } 266 | } else { 267 | foreach ($extendedProps["fields"] as $fieldKey => &$field) { 268 | if (array_key_exists("default", $field)) { 269 | $defaultValues[$fieldKey] = $field["default"]; 270 | } 271 | } 272 | } 273 | $extendedProps["defaultValues"] = $defaultValues; 274 | return $extendedProps; 275 | } 276 | ], 277 | [ 278 | 'pattern' => 'kirby-builder/pages/(:all)/builderconfig', 279 | 'method' => 'POST', 280 | 'action' => function (string $pageUid) { 281 | $page = kirby()->page($pageUid); 282 | $builderConfig = kirby()->request()->data(); 283 | $cache = []; 284 | $fieldsets = extendRecursively($builderConfig["fieldsets"], $page, null, $cache); 285 | $fieldsets = getEnhancedBlockConfig($fieldsets, $page); 286 | $value = getPanelReadyValues($builderConfig["value"], $fieldsets, $page); 287 | return [ 288 | "fieldsets" => $fieldsets, 289 | "value" => $value 290 | ]; 291 | } 292 | ], 293 | [ 294 | 'pattern' => 'kirby-builder/preview', 295 | 'method' => 'POST', 296 | 'action' => function () { 297 | $existingPreviews = kirby()->session()->data()->get('kirby-builder-previews'); 298 | $newPreview = [get('blockUid') => get('blockcontent')]; 299 | if (isset($existingPreviews)) { 300 | $updatedPreviews = $existingPreviews; 301 | $updatedPreviews[get('blockUid')] = get('blockcontent'); 302 | kirby()->session()->set('kirby-builder-previews', $updatedPreviews); 303 | } else { 304 | $newPreview = [get('blockUid') => get('blockcontent')]; 305 | kirby()->session()->set('kirby-builder-previews', $newPreview); 306 | } 307 | return [ 308 | 'code' => 200, 309 | 'status' => 'ok' 310 | ]; 311 | } 312 | ], 313 | [ 314 | 'pattern' => 'kirby-builder/rendered-preview', 315 | 'method' => 'POST', 316 | 'action' => function () { 317 | $kirby = kirby(); 318 | $blockUid = get('blockUid'); 319 | $blockContent = get('blockContent'); 320 | $block = get('block'); 321 | $previewOptions = get('preview'); 322 | $cache = $kirby->cache('timoetting.builder'); 323 | $existingPreviews = $cache->get('previews'); 324 | if(isset($existingPreviews)) { 325 | $updatedPreviews = $existingPreviews; 326 | $updatedPreviews[$blockUid] = $blockContent; 327 | $cache->set('previews', $updatedPreviews); 328 | } else { 329 | $newPreview = [$blockUid => $blockContent]; 330 | $cache->set('previews', $newPreview); 331 | } 332 | $snippet = $previewOptions['snippet'] ?? null; 333 | $modelName = $previewOptions['modelname'] ?? 'data'; 334 | $originalPage = $kirby->page(get('pageid')); 335 | $form = getBlockForm($blockContent, $block, $originalPage); 336 | return array( 337 | 'preview' => snippet($snippet, ['page' => $originalPage, $modelName => new Content($form->data(), $originalPage)], true) , 338 | 'content' => get('blockContent') 339 | ); 340 | } 341 | ], 342 | [ 343 | 'pattern' => 'kirby-builder/site/fields/(:any)/(:all?)', 344 | 'method' => 'ALL', 345 | 'action' => function (string $fieldPath, string $path = null) { 346 | return callFieldAPI($this, $fieldPath, site(), $path); 347 | } 348 | ], 349 | [ 350 | 'pattern' => 'kirby-builder/pages/(:any)/fields/(:any)/(:all?)', 351 | 'method' => 'ALL', 352 | 'action' => function (string $id, string $fieldPath, string $path = null) { 353 | if ($page = $this->page($id)) { 354 | return callFieldAPI($this, $fieldPath, $page, $path); 355 | } 356 | } 357 | ], 358 | ], 359 | ], 360 | 'translations' => [ 361 | 'en' => [ 362 | 'builder.clone' => 'Clone', 363 | 'builder.preview' => 'Preview', 364 | ], 365 | 'fr' => [ 366 | 'builder.clone' => 'Dupliquer', 367 | 'builder.preview' => 'Aperçu', 368 | ], 369 | 'de' => [ 370 | 'builder.clone' => 'Duplizieren', 371 | 'builder.preview' => 'Vorschau', 372 | ], 373 | 'sv' => [ 374 | 'builder.clone' => 'Duplicera', 375 | 'builder.preview' => 'Förhandsgranska', 376 | ], 377 | ], 378 | 'templates' => [ 379 | 'snippet-wrapper' => __DIR__ . '/templates/snippet-wrapper.php' 380 | ], 381 | 'fieldMethods' => [ 382 | 'toBuilderBlocks' => function ($field) { 383 | return $field->toStructure(); 384 | } 385 | ] 386 | ]); 387 | 388 | function extendRecursively($properties, $page, $currentPropertiesName = null, &$cache = []) { 389 | if ($currentPropertiesName !== "fieldsets") { 390 | foreach ($properties as $propertyName => $property) { 391 | if(($currentPropertiesName === null && is_string($property)) || is_array($property)){ 392 | $properties[$propertyName] = BuilderBlueprint::extend($property, $cache); 393 | $properties[$propertyName] = extendRecursively($properties[$propertyName], $page, $propertyName, $cache); 394 | } 395 | if($propertyName === "label" || $propertyName === "name") { 396 | $translatedText = I18n::translate($property, $property); 397 | if (!empty($translatedText)) { 398 | $properties[$propertyName] = $translatedText; 399 | } 400 | } 401 | if(array_key_exists("type", $properties) 402 | && $properties["type"] == "builder" 403 | && !array_key_exists("isNestedBuilder", $properties)) { 404 | $properties["isNestedBuilder"] = true; 405 | }; 406 | } 407 | } 408 | return $properties; 409 | } -------------------------------------------------------------------------------- /lib/Builder.php: -------------------------------------------------------------------------------- 1 | $props 15 | ]; 16 | } 17 | 18 | $extends = $props['extends'] ?? null; 19 | 20 | if ($extends === null) { 21 | return $props; 22 | } 23 | 24 | $mixin = static::find($extends); 25 | 26 | if ($mixin === null) { 27 | $props = $props; 28 | } elseif (is_array($mixin) === true) { 29 | $props = A::merge($mixin, $props, A::MERGE_REPLACE); 30 | } else { 31 | try { 32 | $propsFromExtension = $cache[$mixin] ?? Data::read($mixin); 33 | // $propsFromExtension = Data::read($mixin); 34 | $cache[$mixin] = $propsFromExtension; 35 | $props = A::merge($propsFromExtension, $props, A::MERGE_REPLACE); 36 | if (array_key_exists("extends", $propsFromExtension)) { 37 | $props["extends"] = $propsFromExtension["extends"]; 38 | } 39 | } catch (Exception $e) { 40 | $props = $props; 41 | } 42 | } 43 | 44 | // remove the extends flag 45 | if ($extends === $props['extends']) { 46 | unset($props['extends']); 47 | } else { 48 | $props = static::extend($props, $cache); 49 | } 50 | return $props; 51 | } 52 | } -------------------------------------------------------------------------------- /lib/BuilderBlueprint.php: -------------------------------------------------------------------------------- 1 | cache('timoetting.kirbybuilder'); 26 | // if ($cache->get("extends") === null) { 27 | // $cache->set("extends", []); 28 | // } 29 | // echo count($cache->get("extends")) . "\n"; 30 | // $cachedExtends = $cache->get("extends"); 31 | // $cachedExtends[] = 2; 32 | // $cache->set("extends", $cachedExtends); 33 | // dump(array_merge($cache->get("extends"), ["ho"])); 34 | if (is_string($props) === true) { 35 | $props = [ 36 | 'extends' => $props 37 | ]; 38 | } 39 | 40 | $extends = $props['extends'] ?? null; 41 | 42 | if ($extends === null) { 43 | return $props; 44 | } 45 | 46 | $mixin = static::find($extends); 47 | 48 | if ($mixin === null) { 49 | $props = $props; 50 | } elseif (is_array($mixin) === true) { 51 | $props = A::merge($mixin, $props, A::MERGE_REPLACE); 52 | } else { 53 | try { 54 | // // if ($cache->get("extends") === null) { 55 | // // $cache->set("extends", []); 56 | // // } 57 | // // if (!array_key_exists($mixin, $cachedExtends)) { 58 | // // echo "gluck"; 59 | // // } 60 | // if (array_key_exists($mixin, $cachedExtends)) { 61 | // $propsFromExtension = $cachedExtends[$mixin]; 62 | // } 63 | // else { 64 | // echo $mixin . "\n"; 65 | // $cachedExtends = $cache->get("extends"); 66 | // $propsFromExtension = Data::read($mixin); 67 | // $cachedExtends[$mixin] = $propsFromExtension; 68 | // $cache->set("extends", $cachedExtends); 69 | // // $cache->set("extends", A::merge($cache->get("extends"), $propsFromExtension) ); 70 | // } 71 | $propsFromExtension = $cache[$mixin] ?? Data::read($mixin); 72 | // $propsFromExtension = Data::read($mixin); 73 | $cache[$mixin] = $propsFromExtension; 74 | $props = A::merge($propsFromExtension, $props, A::MERGE_REPLACE); 75 | if (array_key_exists("extends", $propsFromExtension)) { 76 | $props["extends"] = $propsFromExtension["extends"]; 77 | } 78 | } catch (Exception $e) { 79 | $props = $props; 80 | } 81 | } 82 | 83 | // remove the extends flag 84 | if ($extends === $props['extends']) { 85 | unset($props['extends']); 86 | } else { 87 | $props = static::extend($props, $cache); 88 | } 89 | return $props; 90 | } 91 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "kirby-builder-asset-pipeline", 3 | "description": "Kirby Builder Asset Pipeline", 4 | "author": "Tim Ötting", 5 | "version": "0.0.1", 6 | "type": "kirby-field", 7 | "license": "MIT", 8 | "scripts": { 9 | "watch": "parcel watch src/index.js --no-source-maps -d ./", 10 | "build": "parcel build src/index.js --no-source-maps --experimental-scope-hoisting -d ./" 11 | }, 12 | "postcss": { 13 | "plugins": { 14 | "autoprefixer": {} 15 | } 16 | }, 17 | "browserslist": [ 18 | "last 2 versions" 19 | ], 20 | "posthtml": { 21 | "recognizeSelfClosing": true 22 | }, 23 | "devDependencies": { 24 | "@babel/core": "^7.8.4", 25 | "@babel/preset-env": "^7.8.4", 26 | "@vue/component-compiler-utils": "^2.3.0", 27 | "autoprefixer": "^9.6.0", 28 | "mustache": "^3.0.1", 29 | "parcel-bundler": "^1.12.3", 30 | "sass": "^1.15.1", 31 | "stylus": "^0.54.5", 32 | "vue-hot-reload-api": "^2.3.1", 33 | "vue-template-compiler": "^2.5.17", 34 | "vuedraggable": "^2.20.0" 35 | }, 36 | "dependencies": { 37 | "vue": "^2.5.17" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /sandbox/assets/css/blocks/events.css: -------------------------------------------------------------------------------- 1 | .events{ 2 | display: flex; 3 | font-family: sans-serif; 4 | background-color:#67bdaa; 5 | color: white 6 | } 7 | .events__item{ 8 | text-align: center; 9 | flex-grow: 1; 10 | flex-basis: 0; 11 | background-color: rgba(0,0,0,.2); 12 | margin: 30px; 13 | padding: 20px; 14 | } 15 | .events__headline{ 16 | margin-bottom: 8px 17 | } 18 | .events__date{ 19 | opacity: .6; 20 | font-size: .75em; 21 | } 22 | .events__icon{ 23 | width: 50px; 24 | height: 50px; 25 | fill: rgba(255,255,255,.5); 26 | } -------------------------------------------------------------------------------- /sandbox/assets/css/blocks/quote.css: -------------------------------------------------------------------------------- 1 | .quote{ 2 | background-color: #bd689a; 3 | padding: 20px; 4 | font-family: sans-serif; 5 | } 6 | .quote blockquote{ 7 | font-size: 20px; 8 | font-style: italic; 9 | } 10 | .quote .citation{ 11 | font-size: .75em; 12 | text-align: right; 13 | opacity: .7; 14 | } 15 | -------------------------------------------------------------------------------- /sandbox/site/snippets/blocks/events.php: -------------------------------------------------------------------------------- 1 |
2 | eventlist()->toStructure() as $event): ?> 3 |
4 | 5 | 6 | 7 | 8 |

title()->kt() ?>

9 | date("Y-m-d") ?> 10 |

text() ?>

11 |
12 | 13 |
-------------------------------------------------------------------------------- /sandbox/site/snippets/blocks/quote.php: -------------------------------------------------------------------------------- 1 |
2 |
3 | text() ?> 4 |
5 |
6 | citation() ?> 7 |
8 |
-------------------------------------------------------------------------------- /src/components/BuilderBlock.vue: -------------------------------------------------------------------------------- 1 | 122 | 123 | 357 | 358 | 473 | -------------------------------------------------------------------------------- /src/components/BuilderField.vue: -------------------------------------------------------------------------------- 1 | 112 | 113 | 366 | 367 | 493 | -------------------------------------------------------------------------------- /src/components/BuilderPreview.vue: -------------------------------------------------------------------------------- 1 | 34 | 35 | 151 | 152 | 160 | 161 | 162 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import BuilderField from "./components/BuilderField.vue"; 2 | 3 | panel.plugin("timoetting/k-builder", { 4 | fields: { 5 | builder: BuilderField 6 | } 7 | }); -------------------------------------------------------------------------------- /templates/snippet-wrapper.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | _csspath()->isNotEmpty()): ?> 8 | _csspath(), '@auto']) ?> 9 | 10 | _jspath()->isNotEmpty()): ?> 11 | _jspath()) ?> 12 | 13 | 19 | 20 | 21 | 22 | content()->_snippetpath()->toString(), 24 | [ 25 | 'page' => page($page->content()->_pageid()->toString()), 26 | $page->content()->_modelname()->toString() => $page->content()->not('_snippetPath', '_cssPath', '_jsPath', 'pageid') 27 | ]); 28 | ?> 29 | 30 | 37 | 38 | --------------------------------------------------------------------------------