UNPKG

@timio23/directus-group-tabs

Version:

This interface allows you to group fields into tabs within Directus

github.com/timio23/directus-group-tabs-interface

timio23/directus-group-tabs-interface

2 lines (1 loc) • 23.6 kB
1
2
import{onMounted as e,nextTick as t,getCurrentScope as n,onScopeDispose as r,getCurrentInstance as o,computed as a,shallowRef as i,watch as l,toValue as u,unref as s,defineComponent as c,toRefs as d,resolveComponent as f,resolveDirective as b,createBlock as v,createCommentVNode as p,openBlock as h,withCtx as y,withDirectives as g,createElementVNode as _,createElementBlock as m,toDisplayString as j,createTextVNode as w,ref as k,useTemplateRef as x,renderSlot as O,Fragment as A,renderList as E,createVNode as z,normalizeClass as S}from"vue";import{useI18n as V}from"vue-i18n";var B="object"==typeof global&&global&&global.Object===Object&&global,F="object"==typeof self&&self&&self.Object===Object&&self,$=B||F||Function("return this")(),T=$.Symbol,P=Object.prototype,I=P.hasOwnProperty,M=P.toString,W=T?T.toStringTag:void 0;var C=Object.prototype.toString;var R=T?T.toStringTag:void 0;function L(e){return null==e?void 0===e?"[object Undefined]":"[object Null]":R&&R in Object(e)?function(e){var t=I.call(e,W),n=e[W];try{e[W]=void 0;var r=!0}catch(e){}var o=M.call(e);return r&&(t?e[W]=n:delete e[W]),o}(e):function(e){return C.call(e)}(e)}function U(e){return null!=e&&"object"==typeof e}var D=Array.isArray;function N(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}function q(e){if(!N(e))return!1;var t=L(e);return"[object Function]"==t||"[object GeneratorFunction]"==t||"[object AsyncFunction]"==t||"[object Proxy]"==t}var G,K=$["__core-js_shared__"],H=(G=/[^.]+$/.exec(K&&K.keys&&K.keys.IE_PROTO||""))?"Symbol(src)_1."+G:"";var Q=Function.prototype.toString;function J(e){if(null!=e){try{return Q.call(e)}catch(e){}try{return e+""}catch(e){}}return""}var X=/^\[object .+?Constructor\]$/,Y=Function.prototype,Z=Object.prototype,ee=Y.toString,te=Z.hasOwnProperty,ne=RegExp("^"+ee.call(te).replace(/[\\^$.*+?()[\]{}|]/g,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$");function re(e){return!(!N(e)||(t=e,H&&H in t))&&(q(e)?ne:X).test(J(e));var t}function oe(e,t){var n=function(e,t){return null==e?void 0:e[t]}(e,t);return re(n)?n:void 0}var ae=oe($,"WeakMap"),ie=/^(?:0|[1-9]\d*)$/;function le(e,t){var n=typeof e;return!!(t=null==t?9007199254740991:t)&&("number"==n||"symbol"!=n&&ie.test(e))&&e>-1&&e%1==0&&e<t}function ue(e,t){return e===t||e!=e&&t!=t}function se(e){return"number"==typeof e&&e>-1&&e%1==0&&e<=9007199254740991}var ce=Object.prototype;function de(e){return U(e)&&"[object Arguments]"==L(e)}var fe=Object.prototype,be=fe.hasOwnProperty,ve=fe.propertyIsEnumerable,pe=de(function(){return arguments}())?de:function(e){return U(e)&&be.call(e,"callee")&&!ve.call(e,"callee")};var he="object"==typeof exports&&exports&&!exports.nodeType&&exports,ye=he&&"object"==typeof module&&module&&!module.nodeType&&module,ge=ye&&ye.exports===he?$.Buffer:void 0,_e=(ge?ge.isBuffer:void 0)||function(){return!1},me={};me["[object Float32Array]"]=me["[object Float64Array]"]=me["[object Int8Array]"]=me["[object Int16Array]"]=me["[object Int32Array]"]=me["[object Uint8Array]"]=me["[object Uint8ClampedArray]"]=me["[object Uint16Array]"]=me["[object Uint32Array]"]=!0,me["[object Arguments]"]=me["[object Array]"]=me["[object ArrayBuffer]"]=me["[object Boolean]"]=me["[object DataView]"]=me["[object Date]"]=me["[object Error]"]=me["[object Function]"]=me["[object Map]"]=me["[object Number]"]=me["[object Object]"]=me["[object RegExp]"]=me["[object Set]"]=me["[object String]"]=me["[object WeakMap]"]=!1;var je,we="object"==typeof exports&&exports&&!exports.nodeType&&exports,ke=we&&"object"==typeof module&&module&&!module.nodeType&&module,xe=ke&&ke.exports===we&&B.process,Oe=function(){try{var e=ke&&ke.require&&ke.require("util").types;return e||xe&&xe.binding&&xe.binding("util")}catch(e){}}(),Ae=Oe&&Oe.isTypedArray,Ee=Ae?(je=Ae,function(e){return je(e)}):function(e){return U(e)&&se(e.length)&&!!me[L(e)]},ze=Object.prototype.hasOwnProperty;function Se(e,t){var n=D(e),r=!n&&pe(e),o=!n&&!r&&_e(e),a=!n&&!r&&!o&&Ee(e),i=n||r||o||a,l=i?function(e,t){for(var n=-1,r=Array(e);++n<e;)r[n]=t(n);return r}(e.length,String):[],u=l.length;for(var s in e)!ze.call(e,s)||i&&("length"==s||o&&("offset"==s||"parent"==s)||a&&("buffer"==s||"byteLength"==s||"byteOffset"==s)||le(s,u))||l.push(s);return l}var Ve=function(e,t){return function(n){return e(t(n))}}(Object.keys,Object),Be=Object.prototype.hasOwnProperty;function Fe(e){if(n=(t=e)&&t.constructor,t!==("function"==typeof n&&n.prototype||ce))return Ve(e);var t,n,r=[];for(var o in Object(e))Be.call(e,o)&&"constructor"!=o&&r.push(o);return r}function $e(e){return null!=(t=e)&&se(t.length)&&!q(t)?Se(e):Fe(e);var t}var Te=oe(Object,"create");var Pe=Object.prototype.hasOwnProperty;var Ie=Object.prototype.hasOwnProperty;function Me(e){var t=-1,n=null==e?0:e.length;for(this.clear();++t<n;){var r=e[t];this.set(r[0],r[1])}}function We(e,t){for(var n=e.length;n--;)if(ue(e[n][0],t))return n;return-1}Me.prototype.clear=function(){this.__data__=Te?Te(null):{},this.size=0},Me.prototype.delete=function(e){var t=this.has(e)&&delete this.__data__[e];return this.size-=t?1:0,t},Me.prototype.get=function(e){var t=this.__data__;if(Te){var n=t[e];return"__lodash_hash_undefined__"===n?void 0:n}return Pe.call(t,e)?t[e]:void 0},Me.prototype.has=function(e){var t=this.__data__;return Te?void 0!==t[e]:Ie.call(t,e)},Me.prototype.set=function(e,t){var n=this.__data__;return this.size+=this.has(e)?0:1,n[e]=Te&&void 0===t?"__lodash_hash_undefined__":t,this};var Ce=Array.prototype.splice;function Re(e){var t=-1,n=null==e?0:e.length;for(this.clear();++t<n;){var r=e[t];this.set(r[0],r[1])}}Re.prototype.clear=function(){this.__data__=[],this.size=0},Re.prototype.delete=function(e){var t=this.__data__,n=We(t,e);return!(n<0)&&(n==t.length-1?t.pop():Ce.call(t,n,1),--this.size,!0)},Re.prototype.get=function(e){var t=this.__data__,n=We(t,e);return n<0?void 0:t[n][1]},Re.prototype.has=function(e){return We(this.__data__,e)>-1},Re.prototype.set=function(e,t){var n=this.__data__,r=We(n,e);return r<0?(++this.size,n.push([e,t])):n[r][1]=t,this};var Le=oe($,"Map");function Ue(e,t){var n,r,o=e.__data__;return("string"==(r=typeof(n=t))||"number"==r||"symbol"==r||"boolean"==r?"__proto__"!==n:null===n)?o["string"==typeof t?"string":"hash"]:o.map}function De(e){var t=-1,n=null==e?0:e.length;for(this.clear();++t<n;){var r=e[t];this.set(r[0],r[1])}}De.prototype.clear=function(){this.size=0,this.__data__={hash:new Me,map:new(Le||Re),string:new Me}},De.prototype.delete=function(e){var t=Ue(this,e).delete(e);return this.size-=t?1:0,t},De.prototype.get=function(e){return Ue(this,e).get(e)},De.prototype.has=function(e){return Ue(this,e).has(e)},De.prototype.set=function(e,t){var n=Ue(this,e),r=n.size;return n.set(e,t),this.size+=n.size==r?0:1,this};function Ne(e){var t=this.__data__=new Re(e);this.size=t.size}Ne.prototype.clear=function(){this.__data__=new Re,this.size=0},Ne.prototype.delete=function(e){var t=this.__data__,n=t.delete(e);return this.size=t.size,n},Ne.prototype.get=function(e){return this.__data__.get(e)},Ne.prototype.has=function(e){return this.__data__.has(e)},Ne.prototype.set=function(e,t){var n=this.__data__;if(n instanceof Re){var r=n.__data__;if(!Le||r.length<199)return r.push([e,t]),this.size=++n.size,this;n=this.__data__=new De(r)}return n.set(e,t),this.size=n.size,this};var qe=Object.prototype.propertyIsEnumerable,Ge=Object.getOwnPropertySymbols,Ke=Ge?function(e){return null==e?[]:(e=Object(e),function(e,t){for(var n=-1,r=null==e?0:e.length,o=0,a=[];++n<r;){var i=e[n];t(i,n,e)&&(a[o++]=i)}return a}(Ge(e),function(t){return qe.call(e,t)}))}:function(){return[]};function He(e){return function(e,t,n){var r=t(e);return D(e)?r:function(e,t){for(var n=-1,r=t.length,o=e.length;++n<r;)e[o+n]=t[n];return e}(r,n(e))}(e,$e,Ke)}var Qe=oe($,"DataView"),Je=oe($,"Promise"),Xe=oe($,"Set"),Ye="[object Map]",Ze="[object Promise]",et="[object Set]",tt="[object WeakMap]",nt="[object DataView]",rt=J(Qe),ot=J(Le),at=J(Je),it=J(Xe),lt=J(ae),ut=L;(Qe&&ut(new Qe(new ArrayBuffer(1)))!=nt||Le&&ut(new Le)!=Ye||Je&&ut(Je.resolve())!=Ze||Xe&&ut(new Xe)!=et||ae&&ut(new ae)!=tt)&&(ut=function(e){var t=L(e),n="[object Object]"==t?e.constructor:void 0,r=n?J(n):"";if(r)switch(r){case rt:return nt;case ot:return Ye;case at:return Ze;case it:return et;case lt:return tt}return t});var st=$.Uint8Array;function ct(e){var t=-1,n=null==e?0:e.length;for(this.__data__=new De;++t<n;)this.add(e[t])}function dt(e,t){for(var n=-1,r=null==e?0:e.length;++n<r;)if(t(e[n],n,e))return!0;return!1}ct.prototype.add=ct.prototype.push=function(e){return this.__data__.set(e,"__lodash_hash_undefined__"),this},ct.prototype.has=function(e){return this.__data__.has(e)};function ft(e,t,n,r,o,a){var i=1&n,l=e.length,u=t.length;if(l!=u&&!(i&&u>l))return!1;var s=a.get(e),c=a.get(t);if(s&&c)return s==t&&c==e;var d=-1,f=!0,b=2&n?new ct:void 0;for(a.set(e,t),a.set(t,e);++d<l;){var v=e[d],p=t[d];if(r)var h=i?r(p,v,d,t,e,a):r(v,p,d,e,t,a);if(void 0!==h){if(h)continue;f=!1;break}if(b){if(!dt(t,function(e,t){if(i=t,!b.has(i)&&(v===e||o(v,e,n,r,a)))return b.push(t);var i})){f=!1;break}}else if(v!==p&&!o(v,p,n,r,a)){f=!1;break}}return a.delete(e),a.delete(t),f}function bt(e){var t=-1,n=Array(e.size);return e.forEach(function(e,r){n[++t]=[r,e]}),n}function vt(e){var t=-1,n=Array(e.size);return e.forEach(function(e){n[++t]=e}),n}var pt=T?T.prototype:void 0,ht=pt?pt.valueOf:void 0;var yt=Object.prototype.hasOwnProperty;var gt="[object Arguments]",_t="[object Array]",mt="[object Object]",jt=Object.prototype.hasOwnProperty;function wt(e,t,n,r,o,a){var i=D(e),l=D(t),u=i?_t:ut(e),s=l?_t:ut(t),c=(u=u==gt?mt:u)==mt,d=(s=s==gt?mt:s)==mt,f=u==s;if(f&&_e(e)){if(!_e(t))return!1;i=!0,c=!1}if(f&&!c)return a||(a=new Ne),i||Ee(e)?ft(e,t,n,r,o,a):function(e,t,n,r,o,a,i){switch(n){case"[object DataView]":if(e.byteLength!=t.byteLength||e.byteOffset!=t.byteOffset)return!1;e=e.buffer,t=t.buffer;case"[object ArrayBuffer]":return!(e.byteLength!=t.byteLength||!a(new st(e),new st(t)));case"[object Boolean]":case"[object Date]":case"[object Number]":return ue(+e,+t);case"[object Error]":return e.name==t.name&&e.message==t.message;case"[object RegExp]":case"[object String]":return e==t+"";case"[object Map]":var l=bt;case"[object Set]":var u=1&r;if(l||(l=vt),e.size!=t.size&&!u)return!1;var s=i.get(e);if(s)return s==t;r|=2,i.set(e,t);var c=ft(l(e),l(t),r,o,a,i);return i.delete(e),c;case"[object Symbol]":if(ht)return ht.call(e)==ht.call(t)}return!1}(e,t,u,n,r,o,a);if(!(1&n)){var b=c&&jt.call(e,"__wrapped__"),v=d&&jt.call(t,"__wrapped__");if(b||v){var p=b?e.value():e,h=v?t.value():t;return a||(a=new Ne),o(p,h,n,r,a)}}return!!f&&(a||(a=new Ne),function(e,t,n,r,o,a){var i=1&n,l=He(e),u=l.length;if(u!=He(t).length&&!i)return!1;for(var s=u;s--;){var c=l[s];if(!(i?c in t:yt.call(t,c)))return!1}var d=a.get(e),f=a.get(t);if(d&&f)return d==t&&f==e;var b=!0;a.set(e,t),a.set(t,e);for(var v=i;++s<u;){var p=e[c=l[s]],h=t[c];if(r)var y=i?r(h,p,c,t,e,a):r(p,h,c,e,t,a);if(!(void 0===y?p===h||o(p,h,n,r,a):y)){b=!1;break}v||(v="constructor"==c)}if(b&&!v){var g=e.constructor,_=t.constructor;g==_||!("constructor"in e)||!("constructor"in t)||"function"==typeof g&&g instanceof g&&"function"==typeof _&&_ instanceof _||(b=!1)}return a.delete(e),a.delete(t),b}(e,t,n,r,o,a))}function kt(e,t,n,r,o){return e===t||(null==e||null==t||!U(e)&&!U(t)?e!=e&&t!=t:wt(e,t,n,r,kt,o))}function xt(e,t){return kt(e,t)}const Ot="undefined"!=typeof window&&"undefined"!=typeof document;function At(n,r=!0,a){o()?e(n,a):r?n():t(n)}"undefined"!=typeof WorkerGlobalScope&&(globalThis,WorkerGlobalScope);const Et=Ot?window:void 0;function zt(e){var t;const n=u(e);return null!=(t=null==n?void 0:n.$el)?t:n}function St(t){const n=function(){const t=i(!1),n=o();return n&&e(()=>{t.value=!0},n),t}();return a(()=>(n.value,Boolean(t())))}function Vt(e,t,o={}){const{window:i=Et,...s}=o;let c;const d=St(()=>i&&"ResizeObserver"in i),f=()=>{c&&(c.disconnect(),c=void 0)},b=a(()=>{const t=u(e);return Array.isArray(t)?t.map(e=>zt(e)):[zt(t)]}),v=l(b,e=>{if(f(),d.value&&i){c=new ResizeObserver(t);for(const t of e)t&&c.observe(t,s)}},{immediate:!0,flush:"post"}),p=()=>{f(),v()};var h;return h=p,n()&&r(h),{isSupported:d,stop:p}}function Bt(e,t={width:0,height:0},n={}){const{window:r=Et,box:o="content-box"}=n,u=a(()=>{var t,n;return null==(n=null==(t=zt(e))?void 0:t.namespaceURI)?void 0:n.includes("svg")}),s=i(t.width),c=i(t.height),{stop:d}=Vt(e,([t])=>{const n="border-box"===o?t.borderBoxSize:"content-box"===o?t.contentBoxSize:t.devicePixelContentBoxSize;if(r&&u.value){const t=zt(e);if(t){const e=t.getBoundingClientRect();s.value=e.width,c.value=e.height}}else if(n){const e=(a=n,Array.isArray(a)?a:[a]);s.value=e.reduce((e,{inlineSize:t})=>e+t,0),c.value=e.reduce((e,{blockSize:t})=>e+t,0)}else s.value=t.contentRect.width,c.value=t.contentRect.height;var a},n);At(()=>{const n=zt(e);n&&(s.value="offsetWidth"in n?n.offsetWidth:t.width,c.value="offsetHeight"in n?n.offsetHeight:t.height)});const f=l(()=>zt(e),e=>{s.value=e?t.width:0,c.value=e?t.height:0});return{width:s,height:c,stop:function(){d(),f()}}}function Ft({field:e,fields:t,values:n,validationErrors:r}){const{t:o}=V(),i=a(()=>{const n=[Object.assign({},s(e),{hideLabel:!0})];return s(e).meta?.special?.includes("group")&&n.push(...$t(s(e).meta?.field,[],s(t))),n}),l=a(()=>{if(!s(n))return!1;const e=Object.keys(s(n));return i.value.some(t=>e.includes(t.field))}),u=a(()=>{const t=s(r).find(t=>t.field===s(e).field||s(i).find(e=>e.field===t.field));if(void 0!==t)return"RECORD_NOT_UNIQUE"===t.code?o("validationError.unique"):o(`validationError.${t.type}`,t)});return{fieldsInSection:i,edited:l,validationMessage:u}}function $t(e,t=[],n){const r=n.filter(t=>t.meta?.group===e||null===e&&!t.meta);for(const e of r)e.meta?.special?.includes("group")&&!t.includes(e.meta.field)&&(t.push(e.meta.field),r.push(...$t(e.meta.field,t,n)));return r}const Tt={key:0,class:"edit-dot"},Pt={class:"field-name"};var It=c({__name:"tab-button",props:{field:{},fields:{},values:{},validationErrors:{},active:{type:Boolean},badge:{}},setup(e){const t=e,{edited:n,validationMessage:r}=Ft(d(t)),{t:o}=V();return(e,t)=>{const a=f("v-chip"),i=f("v-icon"),l=f("v-button"),u=b("tooltip");return e.field.meta?.hidden?p("v-if",!0):(h(),v(l,{key:0,id:`tab-${e.field.field}`,class:"tab-button",role:"tab","aria-selected":e.active?"true":"false","aria-controls":`tabpanel-${e.field.field}`,small:""},{default:y(()=>[s(n)?g((h(),m("span",Tt,null,512)),[[u,s(o)("edited")]]):p("v-if",!0),_("span",Pt,j(e.field.name),1),e.badge?(h(),v(a,{key:1,"x-small":""},{default:y(()=>[w(j(e.badge),1)]),_:1})):p("v-if",!0),s(r)?g((h(),v(i,{key:2,class:"warning",name:"error",small:""},null,512)),[[u,s(r)]]):p("v-if",!0)]),_:1},8,["id","aria-selected","aria-controls"]))}}}),Mt=[],Wt=[];function Ct(e,t){if(e&&"undefined"!=typeof document){var n,r=!0===t.prepend?"prepend":"append",o=!0===t.singleTag,a="string"==typeof t.container?document.querySelector(t.container):document.getElementsByTagName("head")[0];if(o){var i=Mt.indexOf(a);-1===i&&(i=Mt.push(a)-1,Wt[i]={}),n=Wt[i]&&Wt[i][r]?Wt[i][r]:Wt[i][r]=l()}else n=l();65279===e.charCodeAt(0)&&(e=e.substring(1)),n.styleSheet?n.styleSheet.cssText+=e:n.appendChild(document.createTextNode(e))}function l(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),t.attributes)for(var n=Object.keys(t.attributes),o=0;o<n.length;o++)e.setAttribute(n[o],t.attributes[n[o]]);var i="prepend"===r?"afterbegin":"beforeend";return a.insertAdjacentElement(i,e),e}}Ct('\n.tab-button[data-v-d654ef0b] {\n --v-button-background-color: transparent;\n --v-button-background-color-hover: transparent;\n --v-button-border-color: transparent;\n --v-button-width: unset;\n}\n.tab-button[data-v-d654ef0b] .content {\n overflow: visible;\n}\n.tab-button[aria-selected=true][data-v-d654ef0b] {\n --v-button-border-color: var(--theme--background-accent);\n --v-button-background-color: var(--theme--background-accent);\n --v-button-background-color-hover: var(--theme--background-accent);\n}\n.tab-button[data-v-d654ef0b]:not([aria-selected=true]):hover {\n color: var(--theme--foreground--accent);\n}\n.tab-button:hover .field-name[data-v-d654ef0b],\n.tab-button:hover .icon[data-v-d654ef0b], .tab-button[aria-selected=true] .field-name[data-v-d654ef0b],\n.tab-button[aria-selected=true] .icon[data-v-d654ef0b] {\n color: var(--theme--foreground-accent);\n}\n.tab-button:hover .edit-dot[data-v-d654ef0b], .tab-button[aria-selected=true] .edit-dot[data-v-d654ef0b] {\n background-color: var(--theme--foreground);\n}\n.tab-button .field-name[data-v-d654ef0b],\n.tab-button .icon[data-v-d654ef0b] {\n color: var(--theme--foreground);\n transition: color var(--fast) var(--transition);\n}\n.tab-button .v-chip[data-v-d654ef0b] {\n margin: 0 0 0 8px;\n}\n.tab-button .edit-dot[data-v-d654ef0b] {\n position: absolute;\n top: 7px;\n left: -7px;\n display: block;\n width: 4px;\n height: 4px;\n background-color: var(--theme--foreground-subdued);\n border-radius: 4px;\n content: "";\n}\n.warning[data-v-d654ef0b] {\n\tmargin-left: 8px;\n\tcolor: var(--theme--danger);\n}\n',{});var Rt=(e,t)=>{const n=e.__vccOpts||e;for(const[e,r]of t)n[e]=r;return n},Lt=Rt(It,[["__scopeId","data-v-d654ef0b"]]);const Ut={class:"tab-container"},Dt={key:0,class:"tab-selector"},Nt={class:"field-name"};var qt=c({__name:"tab-group",props:{modelValue:{},tabFields:{},fields:{},values:{},validationErrors:{}},emits:["update:modelValue"],setup(e){const t=e,n=k([]),r=x("tabListWidth"),{width:o}=Bt(r),i=a(()=>Math.floor(o.value/124));function l(e){n.value[e]&&n.value[e].$el.querySelector("button").focus()}function u(e){const r=function(){const e=n.value.findIndex(e=>e.$el.contains(document.activeElement));return-1!==e?e:t.modelValue}();switch(e.key){case"ArrowLeft":-1!==r&&l((s(n).length+r-1)%s(n).length);break;case"ArrowRight":-1!==r&&l((r+1)%s(n).length)}}const c=a(()=>{let e=t.tabFields.map((e,t)=>({...e,index:t})).slice(0,i.value);return t.modelValue&&!(t.modelValue in e)&&e.splice(i.value-1,1,{...t.tabFields[t.modelValue],index:t.modelValue}),e});return(e,t)=>{const o=f("v-icon"),a=f("v-button"),l=f("v-list-item"),s=f("v-list"),d=f("v-menu");return h(),m("div",null,[_("div",Ut,[_("div",{role:"tablist",ref_key:"tabListWidth",ref:r,class:"tab-list",onKeydown:u},[(h(!0),m(A,null,E(c.value,t=>(h(),v(Lt,{ref_for:!0,ref_key:"buttons",ref:n,key:t.field,field:t,fields:e.fields,values:e.values,"validation-errors":e.validationErrors,active:t.index===e.modelValue,onClick:n=>e.$emit("update:modelValue",t.index)},null,8,["field","fields","values","validation-errors","active","onClick"]))),128))],544),e.tabFields.length>i.value?(h(),m("div",Dt,[z(d,null,{activator:y(({toggle:e})=>[z(a,{class:"more-tabs",icon:"",onClick:e,small:""},{default:y(()=>[z(o,{name:"arrow_drop_down"})]),_:2},1032,["onClick"])]),default:y(()=>[z(s,null,{default:y(()=>[(h(!0),m(A,null,E(e.tabFields,(t,n)=>(h(),v(l,{clickable:"",class:S({"tab-menu-item-hidden":c.value.some(e=>e.index===n)}),key:t.field,onClick:t=>e.$emit("update:modelValue",n)},{default:y(()=>[_("span",Nt,j(t.name),1)]),_:2},1032,["class","onClick"]))),128))]),_:1})]),_:1})])):p("v-if",!0)]),O(e.$slots,"default",{},void 0,!0)])}}});Ct("\n.tab-container[data-v-6afb2b7f] {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\tborder-radius: calc(var(--theme--border-radius) + 2px);\n\tbackground-color: var(--theme--background-subdued);\n}\n.tab-list[data-v-6afb2b7f] {\n\tdisplay: flex;\n\twidth: 100%;\n\tgap: 0 0.5rem;\n\tpadding: 2px;\n\tflex-wrap: wrap;\n\toverflow: hidden;\n\theight: calc(var(--v-button-height, 36px) + 4px);\n}\n.tab-selector[data-v-6afb2b7f] {\n\tdisplay: flex;\n\tpadding: 2px;\n}\n.more-tabs[data-v-6afb2b7f] {\n\tmargin-left: 2px;\n\t--v-button-border-color: var(--theme--background-accent);\n\t--v-button-background-color: var(--theme--background-accent);\n\t--v-button-background-color-hover: var(--theme--background-accent);\n}\n.more-tabs .v-icon[data-v-6afb2b7f] {\n\tcolor: var(--theme--foreground)\n}\n",{});Ct("\n.v-list .tab-menu-item-hidden {\n\tdisplay: none;\n}\n",{});var Gt=Rt(qt,[["__scopeId","data-v-6afb2b7f"]]);const Kt=["id"];var Ht=c({__name:"tab-panel",props:{field:{},fields:{},values:{},initialValues:{},disabled:{type:Boolean},batchMode:{type:Boolean},batchActiveFields:{default:()=>[]},primaryKey:{},loading:{type:Boolean},validationErrors:{default:()=>[]},group:{},multiple:{type:Boolean},direction:{}},setup(e){const t=e,{fieldsInSection:n}=Ft(d(t));return(e,t)=>{const r=f("v-form");return h(),m("div",{id:`tabpanel-${e.field.field}`,class:"tab-panel"},[z(r,{"initial-values":e.initialValues,fields:s(n),"model-value":e.values,"primary-key":e.primaryKey,group:e.group,"validation-errors":e.validationErrors,loading:e.loading,"batch-mode":e.batchMode,disabled:e.disabled,direction:e.direction,"show-no-visible-fields":!1,"show-validation-errors":!1,"onUpdate:modelValue":t[0]||(t[0]=t=>e.$emit("apply",t))},null,8,["initial-values","fields","model-value","primary-key","group","validation-errors","loading","batch-mode","disabled","direction"])],8,Kt)}}}),Qt=c({__name:"group-tabs",props:{field:{},fields:{},values:{},initialValues:{},disabled:{type:Boolean},batchMode:{type:Boolean},batchActiveFields:{default:()=>[]},primaryKey:{},loading:{type:Boolean},validationErrors:{default:()=>[]},badge:{},rawEditorEnabled:{type:Boolean},direction:{},fillWidth:{type:Boolean}},emits:["apply"],setup(e){const t=e,n=k(0),{groupFields:r,groupValues:o}=function(){const e=k(r()),n=k({});return l(()=>t.fields,()=>{const t=r();xt(e.value,t)||(e.value=t)}),l(()=>t.values,e=>{xt(n.value,e)||(n.value=e)}),{groupFields:e,groupValues:n};function r(){return t.fields.filter(e=>e.meta?.group===t.field.meta?.field)}}();return l(()=>t.validationErrors,(e,o)=>{if(!t.validationErrors)return;if(xt(e,o))return;const a=t.validationErrors.findIndex(e=>r.value.find(t=>t.field===e.field));-1!==a&&(n.value=a)}),(e,t)=>(h(),v(Gt,{modelValue:n.value,"onUpdate:modelValue":t[1]||(t[1]=e=>n.value=e),"tab-fields":s(r),fields:e.fields,values:s(o),"validation-errors":e.validationErrors,class:S(["group-tabs",e.fillWidth&&"fill"])},{default:y(()=>[(h(!0),m(A,null,E(s(r),(r,a)=>(h(),m(A,{key:r.field},[n.value===a?(h(),v(Ht,{key:0,field:r,fields:e.fields,values:s(o),"initial-values":e.initialValues,disabled:e.disabled,"batch-mode":e.batchMode,"batch-active-fields":e.batchActiveFields,"primary-key":e.primaryKey,loading:e.loading,"validation-errors":e.validationErrors,badge:e.badge,"raw-editor-enabled":e.rawEditorEnabled,group:e.field.meta?.field??e.field.field,direction:e.direction,onApply:t[0]||(t[0]=t=>e.$emit("apply",t))},null,8,["field","fields","values","initial-values","disabled","batch-mode","batch-active-fields","primary-key","loading","validation-errors","badge","raw-editor-enabled","group","direction"])):p("v-if",!0)],64))),128))]),_:1},8,["modelValue","tab-fields","fields","values","validation-errors","class"]))}});Ct("\n.group-tabs .tab-panel[data-v-f9ba54dc] {\n\tmargin-top: var(--theme--form--row-gap);\n}\n",{});var Jt={id:"group-tabs",name:"Tab Group",description:"Display fields in a tab group",icon:"tab_group",component:Rt(Qt,[["__scopeId","data-v-f9ba54dc"]]),hideLabel:!0,hideLoader:!0,types:["alias"],localTypes:["group"],group:"group",options:[{field:"fillWidth",type:"boolean",name:"Overwrite Group Width",meta:{interface:"boolean",note:"Normally groups can not fill the width of the page. This option allows you to overwrite that.",options:{label:"Fill Width"},width:"half"},schema:{default_value:!1}}]};export{Jt as default};