From 9abd910042c0cc9fc2c44e87ffd2d736d726b212 Mon Sep 17 00:00:00 2001 From: Emin Jasarevic Date: Mon, 6 Nov 2023 23:14:49 +0100 Subject: [PATCH] fix tab field instructions --- dist/build/assets/statamic-tabs-1bd0fef2.css | 1 - dist/build/assets/statamic-tabs-77515875.css | 1 + dist/build/assets/statamic-tabs-a795db86.js | 1 - dist/build/assets/statamic-tabs-dbf54b3e.js | 1 + dist/build/manifest.json | 4 ++-- resources/css/statamic-tabs.css | 4 ++++ resources/js/compontents/TabFieldtype.vue | 22 +++++++++++++++++--- 7 files changed, 27 insertions(+), 7 deletions(-) delete mode 100644 dist/build/assets/statamic-tabs-1bd0fef2.css create mode 100644 dist/build/assets/statamic-tabs-77515875.css delete mode 100644 dist/build/assets/statamic-tabs-a795db86.js create mode 100644 dist/build/assets/statamic-tabs-dbf54b3e.js diff --git a/dist/build/assets/statamic-tabs-1bd0fef2.css b/dist/build/assets/statamic-tabs-1bd0fef2.css deleted file mode 100644 index ff5998b..0000000 --- a/dist/build/assets/statamic-tabs-1bd0fef2.css +++ /dev/null @@ -1 +0,0 @@ -.super-invisible{visibility:hidden;position:absolute;top:0;left:0;width:0;height:0} diff --git a/dist/build/assets/statamic-tabs-77515875.css b/dist/build/assets/statamic-tabs-77515875.css new file mode 100644 index 0000000..b61ba95 --- /dev/null +++ b/dist/build/assets/statamic-tabs-77515875.css @@ -0,0 +1 @@ +.super-invisible{visibility:hidden;position:absolute;top:0;left:0;width:0;height:0}.tabpanel>.help-block{margin-top:0!important} diff --git a/dist/build/assets/statamic-tabs-a795db86.js b/dist/build/assets/statamic-tabs-a795db86.js deleted file mode 100644 index 6c0e171..0000000 --- a/dist/build/assets/statamic-tabs-a795db86.js +++ /dev/null @@ -1 +0,0 @@ -function T(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function w(e){if(e.__esModule)return e;var t=e.default;if(typeof t=="function"){var i=function n(){return this instanceof n?Reflect.construct(t,arguments,this.constructor):t.apply(this,arguments)};i.prototype=t.prototype}else i={};return Object.defineProperty(i,"__esModule",{value:!0}),Object.keys(e).forEach(function(n){var a=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(i,n,a.get?a:{enumerable:!0,get:function(){return e[n]}})}),i}function E(e){throw new Error('Could not dynamically require "'+e+'". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.')}var c={exports:{}};const C={},q=Object.freeze(Object.defineProperty({__proto__:null,default:C},Symbol.toStringTag,{value:"Module"})),k=w(q);var g=typeof process<"u"&&process.pid?process.pid.toString(36):"",_="";if(typeof __webpack_require__!="function"&&typeof E<"u"){var f="",v=k;if(v.networkInterfaces)var h=v.networkInterfaces();if(h){e:for(let e in h){const t=h[e],i=t.length;for(var o=0;ot?e:t+1}var M=c.exports;const O=T(M);function P(e,t,i,n,a,u,p,y){var s=typeof e=="function"?e.options:e;t&&(s.render=t,s.staticRenderFns=i,s._compiled=!0),n&&(s.functional=!0),u&&(s._scopeId="data-v-"+u);var r;if(p?(r=function(l){l=l||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,!l&&typeof __VUE_SSR_CONTEXT__<"u"&&(l=__VUE_SSR_CONTEXT__),a&&a.call(this,l),l&&l._registeredComponents&&l._registeredComponents.add(p)},s._ssrRegister=r):a&&(r=y?function(){a.call(this,(s.functional?this.parent:this).$root.$options.shadowRoot)}:a),r)if(s.functional){s._injectStyles=r;var $=s.render;s.render=function(S,m){return r.call(m),$(S,m)}}else{var b=s.beforeCreate;s.beforeCreate=b?[].concat(b,r):[r]}return{exports:e,options:s}}const R={mixins:[Fieldtype],data(){return{isMainTab:!1,mainTab:null,padding:0,tab:{id:O(),handle:this.config.handle,name:this.config.display,icon:this.config.tab_icon,iconify_icon:this.config.tab_iconify_icon,active:!1,hidden:!1},tabs:[]}},computed:{tabPanelStyle(){return{marginLeft:"-"+this.padding+"px",marginRight:"-"+this.padding+"px"}}},methods:{setTabActive(e){this.tabs.forEach((t,i)=>{t.active=i===e})},checkIfFirstSibling(){let e=this.$el.closest(".publish-field");for(;e.previousElementSibling;){if(e.previousElementSibling.classList.contains("tab-fieldtype"))return!1;e=e.previousElementSibling}return!0},findMainTab(){let e=this.$el.closest(".publish-field");for(;e.previousElementSibling;){if(e.previousElementSibling.classList.contains("main-tab"))return e.previousElementSibling;e=e.previousElementSibling}return null},calculatePadding(){let e=this.$el.querySelector(".tabpanel.block .publish-field");if(e){const i=window.getComputedStyle(e).getPropertyValue("padding-left"),n=parseInt(i,10);this.padding=n}}},mounted(){this.isMainTab=this.checkIfFirstSibling(),this.isMainTab?(this.$el.closest(".publish-field").classList.add("main-tab"),this.$el.closest(".publish-field").dataset.uniqid=this.tab.id,this.mainTab=this.$el.closest(".publish-field")):this.mainTab=this.findMainTab(),this.isMainTab?(this.tab.active=!0,this.tabs.push(this.tab),this.$events.$on("tabs.push-"+this.tab.id,i=>{this.tabs.push(i)})):this.$events.$emit("tabs.push-"+this.mainTab.dataset.uniqid,this.tab);let e=this.$el.closest(".publish-field"),t=[];for(;e.nextElementSibling&&!e.nextElementSibling.classList.contains("tab-fieldtype");)t.push(e.nextElementSibling),e=e.nextElementSibling;this.$nextTick(()=>{this.isMainTab?(t.forEach(i=>{document.getElementById("tab-content-"+this.tabs[0].id).querySelector(".publish-fields").appendChild(i)}),this.$events.$on("tabs.append-"+this.tab.id,(i,n)=>{document.getElementById("tab-content-"+n).querySelector(".publish-fields").appendChild(i)})):t.forEach(i=>{this.$events.$emit("tabs.append-"+this.mainTab.dataset.uniqid,i,this.tab.id)})}),this.$nextTick(()=>{this.isMainTab&&this.$el.closest(".publish-field").querySelector("label").classList.add("super-invisible"),this.isMainTab||this.$el.closest(".publish-field").classList.add("super-invisible")}),this.$nextTick(()=>{this.isMainTab&&(this.calculatePadding(),window.addEventListener("resize",i=>{this.calculatePadding()}))}),this.$nextTick(()=>{const i=this.$el.closest(".publish-field");window.getComputedStyle(i).display==="none"?this.tab.hidden=!0:this.tab.hidden=!1})},created(){this.$nextTick(()=>{const e=this.$el.closest(".publish-field");new MutationObserver(i=>{i.forEach(n=>{n.type==="attributes"&&n.attributeName==="style"&&(window.getComputedStyle(e).display==="none"?this.tab.hidden=!0:this.tab.hidden=!1)})}).observe(e,{attributes:!0,attributeFilter:["style"]})})}};var x=function(){var t=this,i=t._self._c;return i("div",[t.isMainTab?i("div",{staticClass:"tabs-container relative"},[i("div",{staticClass:"tabs flex-1 flex space-x-3 overflow-auto pr-6",attrs:{role:"tablist"}},t._l(t.tabs,function(n,a){return i("button",{staticClass:"tab-button",class:{active:n.active,hidden:n.hidden},attrs:{role:"tab"},on:{click:function(u){return t.setTabActive(a)}}},[n.iconify_icon?i("iconify-icon",{staticClass:"h-4 w-4 text-lg mr-2",attrs:{icon:n.iconify_icon}}):n.icon?i("svg-icon",{staticClass:"h-4 w-4 mr-2",attrs:{name:n.icon}}):t._e(),t._v(" "+t._s(n.name)+" ")],1)}),0)]):t._e(),t._l(t.tabs,function(n,a){return i("div",{staticClass:"tabpanel",class:{block:n.active,hidden:!n.active},style:t.tabPanelStyle,attrs:{role:"tabpanel",id:"tab-content-"+n.id}},[i("div",{staticClass:"publish-fields @container w-full"})])})],2)},F=[],j=P(R,x,F,!1,null,null,null,null);const I=j.exports;Statamic.booting(()=>{Statamic.$components.register("tab-fieldtype",I)}); diff --git a/dist/build/assets/statamic-tabs-dbf54b3e.js b/dist/build/assets/statamic-tabs-dbf54b3e.js new file mode 100644 index 0000000..f354a23 --- /dev/null +++ b/dist/build/assets/statamic-tabs-dbf54b3e.js @@ -0,0 +1 @@ +function T(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function w(e){if(e.__esModule)return e;var t=e.default;if(typeof t=="function"){var i=function n(){return this instanceof n?Reflect.construct(t,arguments,this.constructor):t.apply(this,arguments)};i.prototype=t.prototype}else i={};return Object.defineProperty(i,"__esModule",{value:!0}),Object.keys(e).forEach(function(n){var s=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(i,n,s.get?s:{enumerable:!0,get:function(){return e[n]}})}),i}function E(e){throw new Error('Could not dynamically require "'+e+'". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.')}var d={exports:{}};const C={},k=Object.freeze(Object.defineProperty({__proto__:null,default:C},Symbol.toStringTag,{value:"Module"})),q=w(k);var g=typeof process<"u"&&process.pid?process.pid.toString(36):"",_="";if(typeof __webpack_require__!="function"&&typeof E<"u"){var h="",v=q;if(v.networkInterfaces)var p=v.networkInterfaces();if(p){e:for(let e in p){const t=p[e],i=t.length;for(var o=0;ot?e:t+1}var M=d.exports;const O=T(M);function P(e,t,i,n,s,u,f,y){var a=typeof e=="function"?e.options:e;t&&(a.render=t,a.staticRenderFns=i,a._compiled=!0),n&&(a.functional=!0),u&&(a._scopeId="data-v-"+u);var r;if(f?(r=function(l){l=l||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,!l&&typeof __VUE_SSR_CONTEXT__<"u"&&(l=__VUE_SSR_CONTEXT__),s&&s.call(this,l),l&&l._registeredComponents&&l._registeredComponents.add(f)},a._ssrRegister=r):s&&(r=y?function(){s.call(this,(a.functional?this.parent:this).$root.$options.shadowRoot)}:s),r)if(a.functional){a._injectStyles=r;var $=a.render;a.render=function(S,m){return r.call(m),$(S,m)}}else{var b=a.beforeCreate;a.beforeCreate=b?[].concat(b,r):[r]}return{exports:e,options:a}}const x={mixins:[Fieldtype],data(){return{isMainTab:!1,mainTab:null,padding:0,tab:{id:O(),handle:this.config.handle,name:this.config.display,icon:this.config.tab_icon,iconify_icon:this.config.tab_iconify_icon,active:!1,hidden:!1},tabs:[]}},computed:{tabPanelStyle(){return{marginLeft:"-"+this.padding+"px",marginRight:"-"+this.padding+"px"}}},methods:{setTabActive(e){this.tabs.forEach((t,i)=>{t.active=i===e})},checkIfFirstSibling(){let e=this.$el.closest(".publish-field");for(;e.previousElementSibling;){if(e.previousElementSibling.classList.contains("tab-fieldtype"))return!1;e=e.previousElementSibling}return!0},findMainTab(){let e=this.$el.closest(".publish-field");for(;e.previousElementSibling;){if(e.previousElementSibling.classList.contains("main-tab"))return e.previousElementSibling;e=e.previousElementSibling}return null},calculatePadding(){let e=this.$el.querySelector(".tabpanel.block .publish-field");if(e){const i=window.getComputedStyle(e).getPropertyValue("padding-left"),n=parseInt(i,10);this.padding=n}}},mounted(){this.isMainTab=this.checkIfFirstSibling(),this.isMainTab?(this.$el.closest(".publish-field").classList.add("main-tab"),this.$el.closest(".publish-field").dataset.uniqid=this.tab.id,this.mainTab=this.$el.closest(".publish-field")):this.mainTab=this.findMainTab(),this.isMainTab?(this.tab.active=!0,this.tabs.push(this.tab),this.$events.$on("tabs.push-"+this.tab.id,i=>{this.tabs.push(i)})):this.$events.$emit("tabs.push-"+this.mainTab.dataset.uniqid,this.tab),this.$nextTick(()=>{const i=this.$el.closest(".publish-field").querySelector(".help-block");i&&(this.isMainTab?(document.getElementById("tab-content-"+this.tabs[0].id).prepend(i),this.$events.$on("tabs.prepend-instructions-"+this.tab.id,(n,s)=>{document.getElementById("tab-content-"+s).prepend(n)})):this.$events.$emit("tabs.prepend-instructions-"+this.mainTab.dataset.uniqid,i,this.tab.id))});let e=this.$el.closest(".publish-field"),t=[];for(;e.nextElementSibling&&!e.nextElementSibling.classList.contains("tab-fieldtype");)t.push(e.nextElementSibling),e=e.nextElementSibling;this.$nextTick(()=>{this.isMainTab?(t.forEach(i=>{document.getElementById("tab-content-"+this.tabs[0].id).querySelector(".publish-fields").appendChild(i)}),this.$events.$on("tabs.append-"+this.tab.id,(i,n)=>{document.getElementById("tab-content-"+n).querySelector(".publish-fields").appendChild(i)})):t.forEach(i=>{this.$events.$emit("tabs.append-"+this.mainTab.dataset.uniqid,i,this.tab.id)})}),this.$nextTick(()=>{this.isMainTab&&this.$el.closest(".publish-field").querySelector("label").classList.add("super-invisible"),this.isMainTab||this.$el.closest(".publish-field").classList.add("super-invisible")}),this.$nextTick(()=>{this.isMainTab&&(this.calculatePadding(),window.addEventListener("resize",i=>{this.calculatePadding()}))}),this.$nextTick(()=>{const i=this.$el.closest(".publish-field");window.getComputedStyle(i).display==="none"?this.tab.hidden=!0:this.tab.hidden=!1})},created(){console.log("created"),this.$nextTick(()=>{const e=this.$el.closest(".publish-field");new MutationObserver(i=>{i.forEach(n=>{n.type==="attributes"&&n.attributeName==="style"&&(window.getComputedStyle(e).display==="none"?this.tab.hidden=!0:this.tab.hidden=!1)})}).observe(e,{attributes:!0,attributeFilter:["style"]})})}};var R=function(){var t=this,i=t._self._c;return i("div",[t.isMainTab?i("div",{staticClass:"tabs-container relative"},[i("div",{staticClass:"tabs flex-1 flex space-x-3 overflow-auto pr-6",attrs:{role:"tablist"}},t._l(t.tabs,function(n,s){return i("button",{staticClass:"tab-button",class:{active:n.active,hidden:n.hidden},attrs:{role:"tab"},on:{click:function(u){return t.setTabActive(s)}}},[n.iconify_icon?i("iconify-icon",{staticClass:"h-4 w-4 text-lg mr-2",attrs:{icon:n.iconify_icon}}):n.icon?i("svg-icon",{staticClass:"h-4 w-4 mr-2",attrs:{name:n.icon}}):t._e(),t._v(" "+t._s(n.name)+" ")],1)}),0)]):t._e(),t._l(t.tabs,function(n,s){return i("div",{staticClass:"tabpanel [&>.help-block]:bg-green-500",class:{block:n.active,hidden:!n.active},attrs:{role:"tabpanel",id:"tab-content-"+n.id}},[i("div",{style:t.tabPanelStyle},[i("div",{staticClass:"publish-fields @container w-full"})])])})],2)},F=[],I=P(x,R,F,!1,null,null,null,null);const j=I.exports;Statamic.booting(()=>{Statamic.$components.register("tab-fieldtype",j)}); diff --git a/dist/build/manifest.json b/dist/build/manifest.json index 2de3acc..aab2098 100644 --- a/dist/build/manifest.json +++ b/dist/build/manifest.json @@ -1,11 +1,11 @@ { "resources/css/statamic-tabs.css": { - "file": "assets/statamic-tabs-1bd0fef2.css", + "file": "assets/statamic-tabs-77515875.css", "isEntry": true, "src": "resources/css/statamic-tabs.css" }, "resources/js/statamic-tabs.js": { - "file": "assets/statamic-tabs-a795db86.js", + "file": "assets/statamic-tabs-dbf54b3e.js", "isEntry": true, "src": "resources/js/statamic-tabs.js" } diff --git a/resources/css/statamic-tabs.css b/resources/css/statamic-tabs.css index fcba36d..18f1fc4 100644 --- a/resources/css/statamic-tabs.css +++ b/resources/css/statamic-tabs.css @@ -8,4 +8,8 @@ left: 0; width: 0; height: 0; +} + +.tabpanel > .help-block { + margin-top: 0 !important; } \ No newline at end of file diff --git a/resources/js/compontents/TabFieldtype.vue b/resources/js/compontents/TabFieldtype.vue index 3aa81c4..42d3c27 100644 --- a/resources/js/compontents/TabFieldtype.vue +++ b/resources/js/compontents/TabFieldtype.vue @@ -10,10 +10,11 @@ -
-
+
+
+
+
-
@@ -121,6 +122,21 @@ export default { this.$events.$emit('tabs.push-' + this.mainTab.dataset.uniqid, this.tab) } + /** Move the tab field instructions to the right place */ + this.$nextTick(() => { + const instructions = this.$el.closest('.publish-field').querySelector('.help-block') + if (instructions) { + if (this.isMainTab) { + document.getElementById('tab-content-' + this.tabs[0].id).prepend(instructions) + this.$events.$on('tabs.prepend-instructions-' + this.tab.id, (element, id) => { + document.getElementById('tab-content-' + id).prepend(element) + }) + } else { + this.$events.$emit('tabs.prepend-instructions-' + this.mainTab.dataset.uniqid, instructions, this.tab.id) + } + } + }) + /** Find all next siblings that are fields, but stop if you encounter an other tab */ let element = this.$el.closest('.publish-field') let nextSiblings = [];