@veribir/m2a-interface 0.0.3 → 0.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/index.js +1 -1
  2. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- import{useApi as e,useStores as t,defineInterface as n}from"@directus/extensions-sdk";import{getCurrentScope as a,onScopeDispose as r,toRef as l,readonly as o,customRef as i,ref as c,watch as d,computed as u,toValue as s,shallowRef as v,unref as f,onBeforeUpdate as m,defineComponent as p,onMounted as h,nextTick as g,resolveComponent as b,openBlock as y,createElementBlock as x,Fragment as w,createElementVNode as k,createBlock as C,withCtx as _,createTextVNode as A,toDisplayString as S,createCommentVNode as B,Teleport as M,createVNode as V,normalizeClass as $,renderList as E,withKeys as F,withModifiers as T}from"vue";const q="undefined"!=typeof window&&"undefined"!=typeof document;"undefined"!=typeof WorkerGlobalScope&&(globalThis,WorkerGlobalScope);const H=Object.prototype.toString,O=()=>{};function z(e){return Array.isArray(e)?e:[e]}const I=q?window:void 0;function P(...e){const t=[],n=()=>{t.forEach(e=>e()),t.length=0},l=u(()=>{const t=z(s(e[0])).filter(e=>null!=e);return t.every(e=>"string"!=typeof e)?t:void 0}),o=(i=()=>{var t,n;return[null!=(n=null==(t=l.value)?void 0:t.map(e=>function(e){var t;const n=s(e);return null!=(t=null==n?void 0:n.$el)?t:n}(e)))?n:[I].filter(e=>null!=e),z(s(l.value?e[1]:e[0])),z(f(l.value?e[2]:e[1])),s(l.value?e[3]:e[2])]},c=([e,a,r,l])=>{if(n(),!(null==e?void 0:e.length)||!(null==a?void 0:a.length)||!(null==r?void 0:r.length))return;const o=(i=l,"[object Object]"===H.call(i)?{...l}:l);var i;t.push(...e.flatMap(e=>a.flatMap(t=>r.map(n=>((e,t,n,a)=>(e.addEventListener(t,n,a),()=>e.removeEventListener(t,n,a)))(e,t,n,o)))))},v={flush:"post"},d(i,c,{...v,immediate:!0}));var i,c,v;var m;return m=n,a()&&r(m),()=>{o(),n()}}function R(...e){let t,n,a={};3===e.length?(t=e[0],n=e[1],a=e[2]):2===e.length?"object"==typeof e[1]?(t=!0,n=e[0],a=e[1]):(t=e[0],n=e[1]):(t=!0,n=e[0]);const{target:r=I,eventName:l="keydown",passive:o=!1,dedupe:i=!1}=a,c="function"==typeof(d=t)?d:"string"==typeof d?e=>e.key===d:Array.isArray(d)?e=>d.includes(e.key):()=>!0;var d;return P(r,l,e=>{e.repeat&&s(i)||c(e)&&n(e)},o)}function j(e,t){const n=v(null!=(r=s(null!=(a=null==t?void 0:t.initialValue)?a:s(e)[0]))?r:void 0);var a,r;const f=function(...e){if(1!==e.length)return l(...e);const t=e[0];return"function"==typeof t?o(i(()=>({get:t,set:O}))):c(t)}(e),m=u({get(){var e;const a=f.value;let r=(null==t?void 0:t.getIndexOf)?t.getIndexOf(n.value,a):a.indexOf(n.value);return r<0&&(r=null!=(e=null==t?void 0:t.fallbackIndex)?e:0),r},set(e){p(e)}});function p(e){const t=f.value,a=t.length,r=t[(e%a+a)%a];return n.value=r,r}function h(e=1){return p(m.value+e)}return d(f,()=>p(m.value)),{state:n,index:m,next:function(e=1){return h(e)},prev:function(e=1){return h(-e)},go:p}}const L={key:0,class:"btn-matrix"},N={className:"collection-modal"},Z={class:"modal-title"},D={class:"filters"},K={key:0,class:"filter-section"},U={class:"filter-chips-container"},G={class:"filter-chips"},W=["onClick"],Y={key:1,class:"filter-section"},J={class:"filter-chips-container"},Q={class:"filter-chips"},X=["onClick"],ee={key:2,class:"filter-section"},te={class:"collection-visual"},ne=["src","alt"];var ae=p({__name:"interface",props:{value:{},target:{default:"below"},enableSearch:{type:Boolean,default:!1},searchPlaceholder:{default:"Search..."},collection:{},categoryCollection:{},categoryRelationField:{},tagCollection:{},tagRelationField:{}},setup(n){const a=n,r=e(),{useCollectionsStore:l}=t(),o=l(),i=c(),s=c(),v=c([]),p=c([]),q=c([]),H=c([]),O=c([]),{targetBuilder:z}=function(e,{onFound:t}){const n=c();return h(()=>{var r,l,o,i,c,d;const u="above"===a.target?"previousElementSibling":"nextElementSibling";n.value=null==(o=null==(l=null==(r=e.value)?void 0:r.closest(".field"))?void 0:l[u])?void 0:o.querySelector(".m2a-builder"),n.value&&(t(),s.value=null!=(d=null==(c=null==(i=n.value)?void 0:i.closest(".field"))?void 0:c.getAttribute("data-field"))?d:void 0)}),{targetBuilder:n}}(i,{onFound:()=>{var e,t;null==(t=null==(e=i.value)?void 0:e.closest(".field"))||t.remove()}}),{label:I,buttonMatrix:ae,triggerClick:re}=function(e){const t=c(""),n=c([]);let l;return d(()=>e.value,async function(){var n,c,d,h;const b=null==(n=e.value)?void 0:n.querySelector(".actions>.v-menu");if(l=null==b?void 0:b.querySelector(".v-button button"),!l)return;t.value=null!=(c=l.textContent)?c:"";const y=20;let x,w=0;do{await m(w?50:0),w++,l.click(),await g(),x=i()}while(!x&&w<y);if(!x)return;if(function(e){e.style.visibility="hidden",e.style.display="block",e.style.position="absolute"}(b),u(x),f(x),!s.value)return;try{const e=await r.get(`/relations/${a.collection}_${s.value}`),t=((null==(h=null==(d=e.data)?void 0:d.data)?void 0:h.filter(e=>"item"===e.field))||[]).map(e=>{var t;return(null==(t=e.meta)?void 0:t.one_allowed_collections)||[]}).flat();v.value=null==t?void 0:t.map(e=>o.getCollection(e)).filter(Boolean),console.log("collectionList",v.value),await ue(),await se(),console.log("Categories:",p.value),console.log("Tags:",q.value)}catch(e){console.warn("Error fetching collection data:",e)}},{once:!0}),{label:t,buttonMatrix:n,triggerClick:async function(e){null==l||l.click(),await g();const t=document.querySelector(".v-menu-popper.active");if(!t)return;const n=null==t?void 0:t.querySelectorAll(".v-list-item.link.clickable"),a=null==n?void 0:n[e];a&&a.click();await g(),t.style.visibility="hidden",document.body.click()}};function i(){const e=document.querySelector("#menu-outlet .v-menu-popper.active:not([data-hacked])");if(e)return e.dataset.hacked="hacked",e}function u(e){var t;null==(t=e.querySelectorAll(".v-list-item.link.clickable"))||t.forEach(e=>{var t,a,r;const l=e.textContent,o=null!=(r=null==(a=null==(t=e.querySelector(".v-icon [data-icon]"))?void 0:t.dataset)?void 0:a.icon)?r:"database";n.value.push({label:l,icon:o})})}async function f(e){e.style.visibility="hidden",await m(150),document.body.click()}function m(e){return new Promise(t=>setTimeout(t,e))}}(z),le=c(""),oe=c(!1),ie=u(()=>{let e=ae.value;return v.value.length>0&&(e=ae.value.map((e,t)=>{var n,a,r;const l=v.value[t];return{...e,collectionKey:null==l?void 0:l.collection,collectionBanner:null==(n=null==l?void 0:l.meta)?void 0:n.collection_banner,categories:(null==(a=null==l?void 0:l.meta)?void 0:a.category)?[l.meta.category]:[],tags:(null==(r=null==l?void 0:l.meta)?void 0:r.tags)||[]}})),e=e.filter(e=>{if(le.value){const t=le.value.toLowerCase();if(!e.label.toLowerCase().includes(t))return!1}return!(H.value.length>0&&(!e.categories||!H.value.some(t=>e.categories.includes(t))))&&!(O.value.length>0&&(!e.tags||!O.value.some(t=>e.tags.includes(t))))}),e});function ce(){oe.value=!0}function de(){oe.value=!1}async function ue(){var e;if(a.categoryCollection)try{const t=await r.get(`/items/${a.categoryCollection}`);p.value=(null==(e=t.data)?void 0:e.data)||[]}catch(e){console.warn("Error fetching categories:",e)}}async function se(){var e;if(a.tagCollection)try{const t=await r.get(`/items/${a.tagCollection}`);q.value=(null==(e=t.data)?void 0:e.data)||[]}catch(e){console.warn("Error fetching tags:",e)}}function ve(){H.value=[],O.value=[],le.value=""}function fe(e){return e?`/assets/${e}?quality=80`:null}const me=c(null),pe=function(){const e=c([]);return e.value.set=t=>{t&&e.value.push(t)},m(()=>{e.value.length=0}),e}(),he=u(()=>ie.value.map((e,t)=>t)),{state:ge,next:be,prev:ye,go:xe}=j(he,{initialValue:0});function we(e){g(()=>{const t=pe.value[e];if(null==t?void 0:t.$el){const e=t.$el,n=null==e?void 0:e.querySelector("button");null==n||n.focus()}})}const ke={target:me,passive:!1};return R(["ArrowDown","ArrowRight"],e=>{e.preventDefault(),be(),we(ge.value)},ke),R(["ArrowUp","ArrowLeft"],e=>{e.preventDefault(),ye(),we(ge.value)},ke),R("Home",e=>{e.preventDefault(),xe(0),we(ge.value)},ke),R("End",e=>{e.preventDefault();const t=he.value.length-1;t>=0&&(xe(t),we(ge.value))},ke),d(he,e=>{(!e.includes(ge.value)&&e.length>0||0===e.length)&&xe(0)},{flush:"post"}),P(me,"focus",e=>{var t;!(null==(t=me.value)?void 0:t.contains(e.relatedTarget))&&he.value.length>0&&we(ge.value)}),h(async()=>{(a.categoryCollection||a.tagCollection)&&(await ue(),await se())}),(e,t)=>{const n=b("v-notice"),r=b("v-divider"),l=b("v-icon"),o=b("v-button"),c=b("v-card-title"),d=b("v-input"),u=b("v-text-overflow"),s=b("v-card"),v=b("v-card-text"),m=b("v-dialog");return y(),x(w,null,[k("div",{ref_key:"el",ref:i},[f(z)?B("v-if",!0):(y(),C(n,{key:0,type:"warning",icon:"vertical_align_"+("above"===e.target?"top":"bottom")},{default:_(()=>[A(" No Builder (M2A) field found "+S(e.target)+" this field! ",1)]),_:1},8,["icon"]))],512),f(z)?(y(),C(M,{key:0,to:f(z)},[f(ae).length>0?(y(),x("div",L,[f(I)?(y(),C(r,{key:0,"inline-title":"",class:"label"},{default:_(()=>[A(S(f(I)),1)]),_:1})):B("v-if",!0),B(" Button to open modal "),V(o,{secondary:"","full-width":"",class:"open-modal-btn",onClick:ce},{default:_(()=>[V(l,{name:"add"}),t[3]||(t[3]=A(" Create New "))]),_:1})])):B("v-if",!0)],8,["to"])):B("v-if",!0),B(" Modal Implementation "),V(m,{modelValue:oe.value,"onUpdate:modelValue":t[2]||(t[2]=e=>oe.value=e)},{default:_(()=>[k("div",N,[V(s,{class:"modal-card"},{default:_(()=>[V(c,{class:"modal-header"},{default:_(()=>[k("h1",Z,S(f(I)),1),V(o,{secondary:!0,icon:!0,rounded:!0,type:"div"},{default:_(()=>[V(l,{name:"close",onClick:de})]),_:1})]),_:1}),V(v,{class:"modal-content"},{default:_(()=>{var e;return[a.enableSearch?(y(),C(d,{key:0,modelValue:le.value,"onUpdate:modelValue":t[0]||(t[0]=e=>le.value=e),placeholder:a.searchPlaceholder,class:"modal-search"},{prepend:_(()=>[V(l,{name:"search"})]),_:1},8,["modelValue","placeholder"])):B("v-if",!0),k("div",D,[B(" Category Filter Chips "),(null==(e=p.value)?void 0:e.length)>0?(y(),x("div",K,[t[4]||(t[4]=k("div",{class:"filter-label"},"Categories:",-1)),k("div",U,[k("div",G,[B(" All button (active when selectedCategories array is empty) "),k("button",{class:$([{active:0===H.value.length},"custom-chip"]),onClick:ve}," All ",2),(y(!0),x(w,null,E(p.value,(e,t)=>(y(),x("button",{key:e.id||t,class:$([{active:H.value.includes(e.id)},"custom-chip"]),onClick:t=>function(e){const t=H.value.indexOf(e);t>-1?H.value.splice(t,1):H.value.push(e)}(e.id)},S(e.title),11,W))),128))])])])):B("v-if",!0),B(" Tag Filter Chips "),q.value.length>0?(y(),x("div",Y,[t[5]||(t[5]=k("div",{class:"filter-label"},"Tags:",-1)),k("div",J,[k("div",Q,[B(" All button (active when selectedTags array is empty) "),k("button",{class:$([{active:0===O.value.length},"custom-chip"]),onClick:ve}," All ",2),(y(!0),x(w,null,E(q.value,(e,t)=>(y(),x("button",{key:e.id||t,class:$([{active:O.value.includes(e.id)},"custom-chip"]),onClick:t=>function(e){const t=O.value.indexOf(e);t>-1?O.value.splice(t,1):O.value.push(e)}(e.id)},S(e.title),11,X))),128))])])])):B("v-if",!0),B(" Clear Filters Button "),H.value.length>0||O.value.length>0||le.value?(y(),x("div",ee,[V(o,{secondary:"",small:"",onClick:ve},{default:_(()=>[V(l,{name:"clear"}),t[6]||(t[6]=A(" Clear All Filters "))]),_:1})])):B("v-if",!0)]),k("div",{ref_key:"gridRef",ref:me,class:"modal-grid",tabindex:"0"},[(y(!0),x(w,null,E(ie.value,(e,n)=>(y(),C(s,{key:e.label,ref_for:!0,ref:f(pe).set,tabindex:n===f(ge)?0:-1,class:"collection-button",onClick:e=>{f(re)(n),de()},onKeydown:[F(T(e=>{f(re)(n),de()},["prevent"]),["enter"]),F(T(e=>{f(re)(n),de()},["prevent"]),["space"])]},{default:_(()=>[B(" Collection Image or Icon "),k("div",te,[e.collectionBanner&&fe(e.collectionBanner)?(y(),x("img",{key:0,src:fe(e.collectionBanner),alt:e.label,class:"collection-image",onError:t[1]||(t[1]=e=>e.target.style.display="none")},null,40,ne)):(y(),C(l,{key:1,name:e.icon,class:"collection-icon"},null,8,["name"]))]),V(c,{class:"collection-title"},{default:_(()=>[V(u,{text:e.label,size:"small"},null,8,["text"])]),_:2},1024)]),_:2},1032,["tabindex","onClick","onKeydown"]))),128))],512)]}),_:1})]),_:1})])]),_:1},8,["modelValue"])],64)}}}),re=[],le=[];!function(e,t){if(e&&"undefined"!=typeof document){var n,a=!0===t.prepend?"prepend":"append",r=!0===t.singleTag,l="string"==typeof t.container?document.querySelector(t.container):document.getElementsByTagName("head")[0];if(r){var o=re.indexOf(l);-1===o&&(o=re.push(l)-1,le[o]={}),n=le[o]&&le[o][a]?le[o][a]:le[o][a]=i()}else n=i();65279===e.charCodeAt(0)&&(e=e.substring(1)),n.styleSheet?n.styleSheet.cssText+=e:n.appendChild(document.createTextNode(e))}function i(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),t.attributes)for(var n=Object.keys(t.attributes),r=0;r<n.length;r++)e.setAttribute(n[r],t.attributes[n[r]]);var o="prepend"===a?"afterbegin":"beforeend";return l.insertAdjacentElement(o,e),e}}("\n.m2a-builder:has(.btn-matrix) .actions {\r\n\tmargin-top: 0px;\n}\n.m2a-builder:has(.btn-matrix) .actions:has(.v-menu + .v-menu) {\r\n\tmargin-top: 8px;\n}\n.btn-matrix[data-v-3fa1247f] {\r\n\tmargin-top: 8px;\r\n\tcontainer-type: inline-size;\n}\n.label[data-v-3fa1247f] {\r\n\tmargin-bottom: 8px;\n}\n.open-modal-btn[data-v-3fa1247f] {\r\n\tmargin-bottom: 12px;\r\n\t--v-button-height: 48px;\n}\n.open-modal-btn[data-v-3fa1247f] .content {\r\n\tgap: 8px;\r\n\tflex-direction: row;\r\n\t--v-icon-color: var(--theme--foreground-subdued);\n}\n.open-modal-btn[data-v-3fa1247f]:hover .content {\r\n\t--v-icon-color: var(--theme--primary);\n}\n.v-text-overflow[data-v-3fa1247f] {\r\n\twidth: 100%;\n}\n.v-divider[data-v-3fa1247f] .type-text {\r\n\tcolor: var(--theme--foreground-subdued);\n}\r\n\r\n/* Modal Styles */\n.collection-modal[data-v-3fa1247f] .modal-card {\r\n\twidth: 90vw;\r\n\tmargin: 0 auto;\r\n\tmax-width: 100rem;\n}\n.modal-card[data-v-3fa1247f] {\r\n\tbackground: var(--theme--background);\r\n\tborder-radius: var(--theme--border-radius);\r\n\tbox-shadow: 0px 4px 12px rgba(38, 50, 56, 0.1), 0px 0px 0px 1px var(--theme--border-color-subdued);\r\n\toverflow: hidden;\n}\n.modal-header[data-v-3fa1247f] {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: space-between;\r\n\tpadding: 12px 16px;\r\n\tbackground: var(--theme--background);\r\n\tborder-bottom: var(--theme--border-width) solid var(--theme--border-color-subdued);\r\n\tmin-height: 48px;\n}\n.modal-title[data-v-3fa1247f] {\r\n\tcolor: var(--theme--foreground);\r\n\tfont-weight: 600;\r\n\tfont-size: 16px;\r\n\tfont-family: var(--theme--fonts--display--font-family);\r\n\tmargin: 0;\r\n\tline-height: 24px;\n}\n.modal-close[data-v-3fa1247f] {\r\n\t--v-icon-color: var(--theme--foreground-subdued);\r\n\tcursor: pointer;\r\n\ttransition: color var(--fast) var(--transition);\r\n\tpadding: 4px;\r\n\tmargin: -4px;\n}\n.modal-close[data-v-3fa1247f]:hover {\r\n\t--v-icon-color: var(--theme--foreground);\n}\n.modal-content[data-v-3fa1247f] {\r\n\tpadding: 24px;\r\n\tbackground: var(--theme--background);\r\n\tmax-height: 60vh;\r\n\toverflow-y: auto;\n}\n.modal-search[data-v-3fa1247f] {\r\n\tmargin-bottom: 20px;\n}\n.modal-search[data-v-3fa1247f] .v-input {\r\n\t--input-background-color: var(--theme--background-subdued);\r\n\t--input-border-color: var(--theme--border-color);\n}\r\n\r\n/* Filter Sections */\n.filter-section[data-v-3fa1247f] {\r\n\tmargin-bottom: 20px;\n}\n.filter-label[data-v-3fa1247f] {\r\n\tfont-size: 14px;\r\n\tfont-weight: 500;\r\n\tcolor: var(--theme--foreground);\r\n\tmargin-bottom: 8px;\n}\n.filter-chips-container[data-v-3fa1247f] {\r\n\toverflow: auto;\n}\n.filter-chips[data-v-3fa1247f] {\r\n\tdisplay: flex;\r\n\tgap: 8px;\r\n\twidth: max-content;\n}\n.filter-chip[data-v-3fa1247f] {\r\n\t--v-chip-color: var(--theme--foreground-subdued);\r\n\t--v-chip-background-color: var(--theme--background-subdued);\r\n\t--v-chip-color-active: var(--theme--primary-foreground);\r\n\t--v-chip-background-color-active: var(--theme--primary);\r\n\tborder: 1px solid var(--theme--border-color);\r\n\ttransition: all var(--fast) var(--transition);\n}\n.filter-chip[data-v-3fa1247f]:hover {\r\n\t--v-chip-color: var(--theme--primary);\r\n\tborder-color: var(--theme--primary);\n}\n.filter-chip[active][data-v-3fa1247f] {\r\n\tborder-color: var(--theme--primary);\n}\r\n\r\n/* Custom Chip Styles */\n.custom-chip[data-v-3fa1247f] {\r\n\tdisplay: inline-flex;\r\n\talign-items: center;\r\n\theight: 32px;\r\n\tpadding: 0 12px;\r\n\tcolor: var(--theme--foreground-subdued);\r\n\tfont-weight: var(--weight-normal);\r\n\tfont-size: 14px;\r\n\tline-height: 22px;\r\n\tbackground-color: var(--theme--background-subdued);\r\n\tborder: var(--theme--border-width) solid var(--theme--border-color);\r\n\tborder-radius: 16px;\r\n\tcursor: pointer;\r\n\ttransition: all var(--fast) var(--transition);\n}\n.custom-chip[data-v-3fa1247f]:hover {\r\n\tcolor: var(--theme--primary);\r\n\tborder-color: var(--theme--primary);\r\n\tbackground-color: var(--theme--background-accent);\n}\n.custom-chip.active[data-v-3fa1247f] {\r\n\tcolor: var(--foreground-inverted);\r\n\tbackground-color: var(--theme--primary);\r\n\tborder-color: var(--theme--primary);\n}\n.custom-chip.active[data-v-3fa1247f]:hover {\r\n\tbackground-color: var(--theme--primary-accent);\r\n\tborder-color: var(--theme--primary-accent);\n}\n.modal-grid[data-v-3fa1247f] {\r\n\tdisplay: grid;\r\n\tgrid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));\r\n\tgap: 16px;\n}\n.modal-grid .collection-button[data-v-3fa1247f] {\r\n\tmax-width: 50rem;\n}\n.collection-button[data-v-3fa1247f] {\r\n\t--v-button-background-color: var(--theme--background-subdued);\r\n\t--v-button-background-color-hover: var(--theme--background-accent);\r\n\t--v-button-color: var(--theme--foreground);\r\n\t--v-button-color-hover: var(--theme--foreground);\r\n\tborder: var(--theme--border-width) solid var(--theme--border-color);\r\n\tborder-radius: var(--theme--border-radius);\r\n\ttransition: all var(--fast) var(--transition);\r\n\tcursor: pointer;\r\n\tmin-width: unset;\n}\n.collection-button[data-v-3fa1247f]:hover {\r\n\tborder-color: var(--theme--primary);\r\n\ttransform: translateY(-1px);\r\n\tbox-shadow: 0px 2px 8px rgba(38, 50, 56, 0.1);\n}\n.collection-button[data-v-3fa1247f] .content {\r\n\tpadding: 16px 12px;\r\n\tgap: 12px;\r\n\tflex-direction: column;\r\n\talign-items: center;\n}\n.collection-visual[data-v-3fa1247f] {\r\n\twidth: 100%;\r\n\theight: 10rem;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n\tborder-radius: var(--theme--border-radius);\r\n\toverflow: hidden;\r\n\tbackground: var(--theme--background-accent);\n}\n.collection-image[data-v-3fa1247f] {\r\n\tborder-radius: var(--theme--border-radius);\r\n\tmax-height: 100%;\r\n\tmin-height: 100%;\r\n\ttransition: all var(--fast) var(--transition);\n}\n.collection-button:hover .collection-image[data-v-3fa1247f] {\r\n\tmin-height: 0;\r\n\tmax-width: 100%;\n}\n.collection-icon[data-v-3fa1247f] {\r\n\t--v-icon-color: var(--theme--foreground-subdued);\r\n\tfont-size: 24px;\n}\n.collection-button:hover .collection-icon[data-v-3fa1247f] {\r\n\t--v-icon-color: var(--theme--primary);\n}\n.collection-title[data-v-3fa1247f] {\r\n\ttext-align: center;\r\n\tpadding: 0;\r\n\tfont-size: 13px;\r\n\tline-height: 2;\r\n\tcolor: var(--theme--foreground);\r\n\tfont-weight: 500;\r\n\tmargin: 1rem 0;\n}\n.collection-title[data-v-3fa1247f] .v-text-overflow {\r\n\tdisplay: -webkit-box;\r\n\t-webkit-box-orient: vertical;\r\n\t-webkit-line-clamp: 1;\r\n\tline-clamp: 1;\r\n\twhite-space: unset;\n}\n@media (min-width: 600px) {\n.modal-grid[data-v-3fa1247f] {\r\n\t\tgrid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));\r\n\t\tgap: 20px;\n}\n.collection-visual[data-v-3fa1247f] {\r\n\t\theight: 12rem;\n}\n}\n@media (min-width: 768px) {\n.modal-grid[data-v-3fa1247f] {\r\n\t\tgrid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));\n}\n.modal-content[data-v-3fa1247f] {\r\n\t\tpadding: 32px;\n}\n.collection-visual[data-v-3fa1247f] {\r\n\t\theight: 15rem;\n}\n}\n@media screen and (min-width: 1024px) {\n.filters[data-v-3fa1247f] {\r\n\t\tdisplay: flex;\r\n\t\tgap: 24px;\r\n\t\tflex-wrap: wrap;\r\n\t\talign-items: end;\r\n\t\tmargin-bottom: 32px;\n}\n.filter-section[data-v-3fa1247f] {\r\n\t\tmargin-bottom: 0;\n}\n}\r\n",{});var oe=n({id:"srt-labs-experimental-m2a-interface",name:"Builder (M2A) Button Matrix",icon:"grid_view",description:"Add a matrix button selector to the built-in M2A interface",component:((e,t)=>{const n=e.__vccOpts||e;for(const[e,a]of t)n[e]=a;return n})(ae,[["__scopeId","data-v-3fa1247f"],["__file","interface.vue"]]),types:["alias"],localTypes:["presentation"],group:"presentation",options:[{field:"target",name:"Target Builder (M2A) field placement",type:"string",meta:{width:"full",interface:"select-dropdown",options:{choices:[{text:"Above this field",value:"above",icon:"vertical_align_top"},{text:"Below this field",value:"below",icon:"vertical_align_bottom"}]}},schema:{default_value:"below"}},{field:"info",type:"alias",meta:{width:"full",interface:"presentation-notice",conditions:[{rule:{_and:[{target:{_eq:"below"}}]},options:{text:ie({targetPlacedBelow:!0})}}],options:{icon:!1,text:ie({targetPlacedBelow:!1})}}},{field:"enableSearch",name:"Enable Search",type:"boolean",meta:{width:"half",interface:"boolean"},schema:{default_value:!1}},{field:"searchPlaceholder",name:"Search Placeholder",type:"string",meta:{width:"half",interface:"input",hidden:!0,conditions:[{rule:{enableSearch:{_eq:!0}},hidden:!1}]},schema:{default_value:"Search..."}},{field:"categoryCollection",name:"Category Collection",type:"string",meta:{width:"half",interface:"system-collection",note:"Collection that contains category items"}},{field:"categoryRelationField",name:"Category Relation Field",type:"string",meta:{width:"half",interface:"input",note:"Field name in target collections that relates to categories",hidden:!0,conditions:[{rule:{categoryCollection:{_nnull:!0}},hidden:!1}]}},{field:"tagCollection",name:"Tag Collection",type:"string",meta:{width:"half",interface:"system-collection",note:"Collection that contains tag items"}},{field:"tagRelationField",name:"Tag Relation Field",type:"string",meta:{width:"half",interface:"input",note:"Field name in target collections that relates to tags",hidden:!0,conditions:[{rule:{tagCollection:{_nnull:!0}},hidden:!1}]}}]});function ie({targetPlacedBelow:e}){return`${`<svg style="vertical-align:middle" width="120" height="50" viewBox="0 0 120 50" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M114 1H6C3.23858 1 1 3.23858 1 6V16C1 18.7614 3.23858 21 6 21H114C116.761 21 119 18.7614 119 16V6C119 3.23858 116.761 1 114 1Z" stroke="var(--theme--primary)" stroke-opacity="${e?"1":"0.25"}" stroke-width="2"/><path d="M114 29H6C3.23858 29 1 31.2386 1 34V44C1 46.7614 3.23858 49 6 49H114C116.761 49 119 46.7614 119 44V34C119 31.2386 116.761 29 114 29Z" stroke="var(--theme--primary)" stroke-opacity="${e?"0.25":"1"}" stroke-width="2"/><path opacity="${e?"0.5":"1"}" d="M20 37H10V38.2691H20V37ZM10 40.7778H20V39.5087H10V40.7778Z" fill="var(--theme--primary)"/><path opacity="${e?"1":"0.5"}" d="M20 9H10V10.2691H20V9ZM10 12.7778H20V11.5087H10V12.7778Z" fill="var(--theme--primary)"/><text opacity="${e?"1":"0.5"}" fill="var(--theme--primary)" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" font-weight="500" letter-spacing="0em"><tspan x="28" y="14.6364">${e?"Button Matrix":"Builder (M2A)"}</tspan></text><text opacity="${e?"0.5":"1"}" fill="var(--theme--primary)" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" font-weight="500" letter-spacing="0em"><tspan x="28" y="42.6364">${e?"Builder (M2A)":"Button Matrix"}</tspan></text></svg>`}${`<span style="padding-left: 12px">Place this field directly ${e?"above":"below"} the Builder (M2A) field!</span>`}`}export{oe as default};
1
+ import{useApi as e,useStores as t,defineInterface as n}from"@directus/extensions-sdk";import{getCurrentScope as a,onScopeDispose as r,toRef as o,readonly as l,customRef as i,ref as c,watch as d,computed as u,toValue as s,shallowRef as v,unref as f,onBeforeUpdate as m,defineComponent as p,onMounted as h,nextTick as g,resolveComponent as b,openBlock as y,createElementBlock as x,Fragment as w,createElementVNode as k,createBlock as C,withCtx as _,createTextVNode as A,toDisplayString as S,createCommentVNode as B,Teleport as M,createVNode as V,normalizeClass as $,renderList as E,withKeys as F,withModifiers as T}from"vue";const I="undefined"!=typeof window&&"undefined"!=typeof document;"undefined"!=typeof WorkerGlobalScope&&(globalThis,WorkerGlobalScope);const q=Object.prototype.toString,H=()=>{};function O(e){return Array.isArray(e)?e:[e]}const U=I?window:void 0;function z(...e){const t=[],n=()=>{t.forEach(e=>e()),t.length=0},o=u(()=>{const t=O(s(e[0])).filter(e=>null!=e);return t.every(e=>"string"!=typeof e)?t:void 0}),l=(i=()=>{var t,n;return[null!=(n=null==(t=o.value)?void 0:t.map(e=>function(e){var t;const n=s(e);return null!=(t=null==n?void 0:n.$el)?t:n}(e)))?n:[U].filter(e=>null!=e),O(s(o.value?e[1]:e[0])),O(f(o.value?e[2]:e[1])),s(o.value?e[3]:e[2])]},c=([e,a,r,o])=>{if(n(),!(null==e?void 0:e.length)||!(null==a?void 0:a.length)||!(null==r?void 0:r.length))return;const l=(i=o,"[object Object]"===q.call(i)?{...o}:o);var i;t.push(...e.flatMap(e=>a.flatMap(t=>r.map(n=>((e,t,n,a)=>(e.addEventListener(t,n,a),()=>e.removeEventListener(t,n,a)))(e,t,n,l)))))},v={flush:"post"},d(i,c,{...v,immediate:!0}));var i,c,v;var m;return m=n,a()&&r(m),()=>{l(),n()}}function D(...e){let t,n,a={};3===e.length?(t=e[0],n=e[1],a=e[2]):2===e.length?"object"==typeof e[1]?(t=!0,n=e[0],a=e[1]):(t=e[0],n=e[1]):(t=!0,n=e[0]);const{target:r=U,eventName:o="keydown",passive:l=!1,dedupe:i=!1}=a,c="function"==typeof(d=t)?d:"string"==typeof d?e=>e.key===d:Array.isArray(d)?e=>d.includes(e.key):()=>!0;var d;return z(r,o,e=>{e.repeat&&s(i)||c(e)&&n(e)},l)}function P(e,t){const n=v(null!=(r=s(null!=(a=null==t?void 0:t.initialValue)?a:s(e)[0]))?r:void 0);var a,r;const f=function(...e){if(1!==e.length)return o(...e);const t=e[0];return"function"==typeof t?l(i(()=>({get:t,set:H}))):c(t)}(e),m=u({get(){var e;const a=f.value;let r=(null==t?void 0:t.getIndexOf)?t.getIndexOf(n.value,a):a.indexOf(n.value);return r<0&&(r=null!=(e=null==t?void 0:t.fallbackIndex)?e:0),r},set(e){p(e)}});function p(e){const t=f.value,a=t.length,r=t[(e%a+a)%a];return n.value=r,r}function h(e=1){return p(m.value+e)}return d(f,()=>p(m.value)),{state:n,index:m,next:function(e=1){return h(e)},prev:function(e=1){return h(-e)},go:p}}const R={key:0,class:"btn-matrix"},j={className:"collection-modal"},L={class:"modal-title"},N={class:"filters"},Z={key:0,class:"filter-section"},G={class:"filter-chips-container"},K={class:"filter-chips"},W=["onClick"],Y={key:1,class:"filter-section"},J={class:"filter-chips-container"},Q={class:"filter-chips"},X=["onClick"],ee={key:2,class:"filter-section"},te={class:"collection-visual"},ne=["src","alt"];var ae=p({__name:"interface",props:{value:{},target:{default:"below"},enableSearch:{type:Boolean,default:!1},searchPlaceholder:{default:"Search..."},collection:{},categoryCollection:{},categoryRelationField:{},tagCollection:{},tagRelationField:{}},setup(n){const a=n,r=e(),{useCollectionsStore:o}=t(),l=o(),i=c(),s=c(),v=c([]),p=c([]),I=c([]),q=c([]),H=c([]),{targetBuilder:O}=function(e,{onFound:t}){const n=c();return h(()=>{var r,o,l,i,c,d;const u="above"===a.target?"previousElementSibling":"nextElementSibling";n.value=null==(l=null==(o=null==(r=e.value)?void 0:r.closest(".field"))?void 0:o[u])?void 0:l.querySelector(".m2a-builder"),n.value&&(t(),s.value=null!=(d=null==(c=null==(i=n.value)?void 0:i.closest(".field"))?void 0:c.getAttribute("data-field"))?d:void 0)}),{targetBuilder:n}}(i,{onFound:()=>{var e,t;null==(t=null==(e=i.value)?void 0:e.closest(".field"))||t.remove()}}),{label:U,buttonMatrix:ae,triggerClick:re}=function(e){const t=c(""),n=c([]);let o;return d(()=>e.value,async function(){var n,c,d,h;const b=null==(n=e.value)?void 0:n.querySelector(".actions>.v-menu");if(o=null==b?void 0:b.querySelector(".v-button button"),!o)return;t.value=null!=(c=o.textContent)?c:"";const y=20;let x,w=0;do{await m(w?50:0),w++,o.click(),await g(),x=i()}while(!x&&w<y);if(!x)return;if(function(e){e.style.visibility="hidden",e.style.display="block",e.style.position="absolute"}(b),u(x),f(x),!s.value)return;try{const e=await r.get(`/relations/${a.collection}_${s.value}`),t=((null==(h=null==(d=e.data)?void 0:d.data)?void 0:h.filter(e=>"item"===e.field))||[]).map(e=>{var t;return(null==(t=e.meta)?void 0:t.one_allowed_collections)||[]}).flat();v.value=null==t?void 0:t.map(e=>l.getCollection(e)).filter(Boolean),console.log("collectionList",v.value),await ue(),await se(),console.log("Categories:",p.value),console.log("Tags:",I.value)}catch(e){console.warn("Error fetching collection data:",e)}},{once:!0}),{label:t,buttonMatrix:n,triggerClick:async function(e){const t=n.value.findIndex(t=>t.guid===e);if(-1===t)return void console.warn("Button with GUID not found:",e);null==o||o.click(),await g();const a=document.querySelector(".v-menu-popper.active");if(!a)return;const r=null==a?void 0:a.querySelectorAll(".v-list-item.link.clickable"),l=null==r?void 0:r[t];l&&l.click();await g(),a.style.visibility="hidden",document.body.click()}};function i(){const e=document.querySelector("#menu-outlet .v-menu-popper.active:not([data-hacked])");if(e)return e.dataset.hacked="hacked",e}function u(e){var t;null==(t=e.querySelectorAll(".v-list-item.link.clickable"))||t.forEach(e=>{var t,a,r;const o=e.textContent,l=null!=(r=null==(a=null==(t=e.querySelector(".v-icon [data-icon]"))?void 0:t.dataset)?void 0:a.icon)?r:"database";n.value.push({label:o,icon:l,guid:crypto.randomUUID()})})}async function f(e){e.style.visibility="hidden",await m(150),document.body.click()}function m(e){return new Promise(t=>setTimeout(t,e))}}(O),oe=c(""),le=c(!1),ie=u(()=>{let e=ae.value;return e=v.value.length>0?ae.value.map((e,t)=>{var n,a,r;const o=v.value[t];return{...e,guid:e.guid||crypto.randomUUID(),collectionKey:null==o?void 0:o.collection,collectionBanner:null==(n=null==o?void 0:o.meta)?void 0:n.collection_banner,categories:(null==(a=null==o?void 0:o.meta)?void 0:a.category)?[o.meta.category]:[],tags:(null==(r=null==o?void 0:o.meta)?void 0:r.tags)||[]}}):ae.value.map(e=>({...e,guid:e.guid||crypto.randomUUID()})),e=e.filter(e=>{if(oe.value){const t=oe.value.toLowerCase();if(!e.label.toLowerCase().includes(t))return!1}return!(q.value.length>0&&(!e.categories||!q.value.some(t=>e.categories.includes(t))))&&!(H.value.length>0&&(!e.tags||!H.value.some(t=>e.tags.includes(t))))}),e});function ce(){le.value=!0}function de(){le.value=!1}async function ue(){var e;if(a.categoryCollection)try{const t=await r.get(`/items/${a.categoryCollection}`);p.value=(null==(e=t.data)?void 0:e.data)||[]}catch(e){console.warn("Error fetching categories:",e)}}async function se(){var e;if(a.tagCollection)try{const t=await r.get(`/items/${a.tagCollection}`);I.value=(null==(e=t.data)?void 0:e.data)||[]}catch(e){console.warn("Error fetching tags:",e)}}function ve(){q.value=[],H.value=[],oe.value=""}function fe(e){return e?`/assets/${e}?quality=80`:null}const me=c(null),pe=function(){const e=c([]);return e.value.set=t=>{t&&e.value.push(t)},m(()=>{e.value.length=0}),e}(),he=u(()=>ie.value.map((e,t)=>t)),{state:ge,next:be,prev:ye,go:xe}=P(he,{initialValue:0});function we(e){g(()=>{const t=pe.value[e];if(null==t?void 0:t.$el){const e=t.$el,n=null==e?void 0:e.querySelector("button");null==n||n.focus()}})}const ke={target:me,passive:!1};return D(["ArrowDown","ArrowRight"],e=>{e.preventDefault(),be(),we(ge.value)},ke),D(["ArrowUp","ArrowLeft"],e=>{e.preventDefault(),ye(),we(ge.value)},ke),D("Home",e=>{e.preventDefault(),xe(0),we(ge.value)},ke),D("End",e=>{e.preventDefault();const t=he.value.length-1;t>=0&&(xe(t),we(ge.value))},ke),d(he,e=>{(!e.includes(ge.value)&&e.length>0||0===e.length)&&xe(0)},{flush:"post"}),z(me,"focus",e=>{var t;!(null==(t=me.value)?void 0:t.contains(e.relatedTarget))&&he.value.length>0&&we(ge.value)}),h(async()=>{(a.categoryCollection||a.tagCollection)&&(await ue(),await se())}),(e,t)=>{const n=b("v-notice"),r=b("v-divider"),o=b("v-icon"),l=b("v-button"),c=b("v-card-title"),d=b("v-input"),u=b("v-text-overflow"),s=b("v-card"),v=b("v-card-text"),m=b("v-dialog");return y(),x(w,null,[k("div",{ref_key:"el",ref:i},[f(O)?B("v-if",!0):(y(),C(n,{key:0,type:"warning",icon:"vertical_align_"+("above"===e.target?"top":"bottom")},{default:_(()=>[A(" No Builder (M2A) field found "+S(e.target)+" this field! ",1)]),_:1},8,["icon"]))],512),f(O)?(y(),C(M,{key:0,to:f(O)},[f(ae).length>0?(y(),x("div",R,[f(U)?(y(),C(r,{key:0,"inline-title":"",class:"label"},{default:_(()=>[A(S(f(U)),1)]),_:1})):B("v-if",!0),B(" Button to open modal "),V(l,{secondary:"","full-width":"",class:"open-modal-btn",onClick:ce},{default:_(()=>[V(o,{name:"add"}),t[3]||(t[3]=A(" Create New "))]),_:1})])):B("v-if",!0)],8,["to"])):B("v-if",!0),B(" Modal Implementation "),V(m,{modelValue:le.value,"onUpdate:modelValue":t[2]||(t[2]=e=>le.value=e)},{default:_(()=>[k("div",j,[V(s,{class:"modal-card"},{default:_(()=>[V(c,{class:"modal-header"},{default:_(()=>[k("h1",L,S(f(U)),1),V(l,{secondary:!0,icon:!0,rounded:!0,type:"div"},{default:_(()=>[V(o,{name:"close",onClick:de})]),_:1})]),_:1}),V(v,{class:"modal-content"},{default:_(()=>{var e;return[a.enableSearch?(y(),C(d,{key:0,modelValue:oe.value,"onUpdate:modelValue":t[0]||(t[0]=e=>oe.value=e),placeholder:a.searchPlaceholder,class:"modal-search"},{prepend:_(()=>[V(o,{name:"search"})]),_:1},8,["modelValue","placeholder"])):B("v-if",!0),k("div",N,[B(" Category Filter Chips "),(null==(e=p.value)?void 0:e.length)>0?(y(),x("div",Z,[t[4]||(t[4]=k("div",{class:"filter-label"},"Categories:",-1)),k("div",G,[k("div",K,[B(" All button (active when selectedCategories array is empty) "),k("button",{class:$([{active:0===q.value.length},"custom-chip"]),onClick:ve}," All ",2),(y(!0),x(w,null,E(p.value,(e,t)=>(y(),x("button",{key:e.id||t,class:$([{active:q.value.includes(e.id)},"custom-chip"]),onClick:t=>function(e){const t=q.value.indexOf(e);t>-1?q.value.splice(t,1):q.value.push(e)}(e.id)},S(e.title),11,W))),128))])])])):B("v-if",!0),B(" Tag Filter Chips "),I.value.length>0?(y(),x("div",Y,[t[5]||(t[5]=k("div",{class:"filter-label"},"Tags:",-1)),k("div",J,[k("div",Q,[B(" All button (active when selectedTags array is empty) "),k("button",{class:$([{active:0===H.value.length},"custom-chip"]),onClick:ve}," All ",2),(y(!0),x(w,null,E(I.value,(e,t)=>(y(),x("button",{key:e.id||t,class:$([{active:H.value.includes(e.id)},"custom-chip"]),onClick:t=>function(e){const t=H.value.indexOf(e);t>-1?H.value.splice(t,1):H.value.push(e)}(e.id)},S(e.title),11,X))),128))])])])):B("v-if",!0),B(" Clear Filters Button "),q.value.length>0||H.value.length>0||oe.value?(y(),x("div",ee,[V(l,{secondary:"",small:"",onClick:ve},{default:_(()=>[V(o,{name:"clear"}),t[6]||(t[6]=A(" Clear All Filters "))]),_:1})])):B("v-if",!0)]),k("div",{ref_key:"gridRef",ref:me,class:"modal-grid",tabindex:"0"},[(y(!0),x(w,null,E(ie.value,(e,n)=>(y(),C(s,{key:e.guid||e.label,ref_for:!0,ref:f(pe).set,tabindex:n===f(ge)?0:-1,class:"collection-button",onClick:t=>{f(re)(e.guid),de()},onKeydown:[F(T(t=>{f(re)(e.guid),de()},["prevent"]),["enter"]),F(T(t=>{f(re)(e.guid),de()},["prevent"]),["space"])]},{default:_(()=>[B(" Collection Image or Icon "),k("div",te,[e.collectionBanner&&fe(e.collectionBanner)?(y(),x("img",{key:0,src:fe(e.collectionBanner),alt:e.label,class:"collection-image",onError:t[1]||(t[1]=e=>e.target.style.display="none")},null,40,ne)):(y(),C(o,{key:1,name:e.icon,class:"collection-icon"},null,8,["name"]))]),V(c,{class:"collection-title"},{default:_(()=>[V(u,{text:e.label,size:"small"},null,8,["text"])]),_:2},1024)]),_:2},1032,["tabindex","onClick","onKeydown"]))),128))],512)]}),_:1})]),_:1})])]),_:1},8,["modelValue"])],64)}}}),re=[],oe=[];!function(e,t){if(e&&"undefined"!=typeof document){var n,a=!0===t.prepend?"prepend":"append",r=!0===t.singleTag,o="string"==typeof t.container?document.querySelector(t.container):document.getElementsByTagName("head")[0];if(r){var l=re.indexOf(o);-1===l&&(l=re.push(o)-1,oe[l]={}),n=oe[l]&&oe[l][a]?oe[l][a]:oe[l][a]=i()}else n=i();65279===e.charCodeAt(0)&&(e=e.substring(1)),n.styleSheet?n.styleSheet.cssText+=e:n.appendChild(document.createTextNode(e))}function i(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),t.attributes)for(var n=Object.keys(t.attributes),r=0;r<n.length;r++)e.setAttribute(n[r],t.attributes[n[r]]);var l="prepend"===a?"afterbegin":"beforeend";return o.insertAdjacentElement(l,e),e}}("\n.m2a-builder:has(.btn-matrix) .actions {\r\n\tmargin-top: 0px;\n}\n.m2a-builder:has(.btn-matrix) .actions:has(.v-menu + .v-menu) {\r\n\tmargin-top: 8px;\n}\n.btn-matrix[data-v-8379f505] {\r\n\tmargin-top: 8px;\r\n\tcontainer-type: inline-size;\n}\n.label[data-v-8379f505] {\r\n\tmargin-bottom: 8px;\n}\n.open-modal-btn[data-v-8379f505] {\r\n\tmargin-bottom: 12px;\r\n\t--v-button-height: 48px;\n}\n.open-modal-btn[data-v-8379f505] .content {\r\n\tgap: 8px;\r\n\tflex-direction: row;\r\n\t--v-icon-color: var(--theme--foreground-subdued);\n}\n.open-modal-btn[data-v-8379f505]:hover .content {\r\n\t--v-icon-color: var(--theme--primary);\n}\n.v-text-overflow[data-v-8379f505] {\r\n\twidth: 100%;\n}\n.v-divider[data-v-8379f505] .type-text {\r\n\tcolor: var(--theme--foreground-subdued);\n}\r\n\r\n/* Modal Styles */\n.collection-modal[data-v-8379f505] .modal-card {\r\n\twidth: 90vw;\r\n\tmargin: 0 auto;\r\n\tmax-width: 100rem;\n}\n.modal-card[data-v-8379f505] {\r\n\tbackground: var(--theme--background);\r\n\tborder-radius: var(--theme--border-radius);\r\n\tbox-shadow: 0px 4px 12px rgba(38, 50, 56, 0.1), 0px 0px 0px 1px var(--theme--border-color-subdued);\r\n\toverflow: hidden;\n}\n.modal-header[data-v-8379f505] {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: space-between;\r\n\tpadding: 12px 16px;\r\n\tbackground: var(--theme--background);\r\n\tborder-bottom: var(--theme--border-width) solid var(--theme--border-color-subdued);\r\n\tmin-height: 48px;\n}\n.modal-title[data-v-8379f505] {\r\n\tcolor: var(--theme--foreground);\r\n\tfont-weight: 600;\r\n\tfont-size: 16px;\r\n\tfont-family: var(--theme--fonts--display--font-family);\r\n\tmargin: 0;\r\n\tline-height: 24px;\n}\n.modal-close[data-v-8379f505] {\r\n\t--v-icon-color: var(--theme--foreground-subdued);\r\n\tcursor: pointer;\r\n\ttransition: color var(--fast) var(--transition);\r\n\tpadding: 4px;\r\n\tmargin: -4px;\n}\n.modal-close[data-v-8379f505]:hover {\r\n\t--v-icon-color: var(--theme--foreground);\n}\n.modal-content[data-v-8379f505] {\r\n\tpadding: 24px;\r\n\tbackground: var(--theme--background);\r\n\tmax-height: 60vh;\r\n\toverflow-y: auto;\n}\n.modal-search[data-v-8379f505] {\r\n\tmargin-bottom: 20px;\n}\n.modal-search[data-v-8379f505] .v-input {\r\n\t--input-background-color: var(--theme--background-subdued);\r\n\t--input-border-color: var(--theme--border-color);\n}\r\n\r\n/* Filter Sections */\n.filter-section[data-v-8379f505] {\r\n\tmargin-bottom: 20px;\n}\n.filter-label[data-v-8379f505] {\r\n\tfont-size: 14px;\r\n\tfont-weight: 500;\r\n\tcolor: var(--theme--foreground);\r\n\tmargin-bottom: 8px;\n}\n.filter-chips-container[data-v-8379f505] {\r\n\toverflow: auto;\n}\n.filter-chips[data-v-8379f505] {\r\n\tdisplay: flex;\r\n\tgap: 8px;\r\n\twidth: max-content;\n}\n.filter-chip[data-v-8379f505] {\r\n\t--v-chip-color: var(--theme--foreground-subdued);\r\n\t--v-chip-background-color: var(--theme--background-subdued);\r\n\t--v-chip-color-active: var(--theme--primary-foreground);\r\n\t--v-chip-background-color-active: var(--theme--primary);\r\n\tborder: 1px solid var(--theme--border-color);\r\n\ttransition: all var(--fast) var(--transition);\n}\n.filter-chip[data-v-8379f505]:hover {\r\n\t--v-chip-color: var(--theme--primary);\r\n\tborder-color: var(--theme--primary);\n}\n.filter-chip[active][data-v-8379f505] {\r\n\tborder-color: var(--theme--primary);\n}\r\n\r\n/* Custom Chip Styles */\n.custom-chip[data-v-8379f505] {\r\n\tdisplay: inline-flex;\r\n\talign-items: center;\r\n\theight: 32px;\r\n\tpadding: 0 12px;\r\n\tcolor: var(--theme--foreground-subdued);\r\n\tfont-weight: var(--weight-normal);\r\n\tfont-size: 14px;\r\n\tline-height: 22px;\r\n\tbackground-color: var(--theme--background-subdued);\r\n\tborder: var(--theme--border-width) solid var(--theme--border-color);\r\n\tborder-radius: 16px;\r\n\tcursor: pointer;\r\n\ttransition: all var(--fast) var(--transition);\n}\n.custom-chip[data-v-8379f505]:hover {\r\n\tcolor: var(--theme--primary);\r\n\tborder-color: var(--theme--primary);\r\n\tbackground-color: var(--theme--background-accent);\n}\n.custom-chip.active[data-v-8379f505] {\r\n\tcolor: var(--foreground-inverted);\r\n\tbackground-color: var(--theme--primary);\r\n\tborder-color: var(--theme--primary);\n}\n.custom-chip.active[data-v-8379f505]:hover {\r\n\tbackground-color: var(--theme--primary-accent);\r\n\tborder-color: var(--theme--primary-accent);\n}\n.modal-grid[data-v-8379f505] {\r\n\tdisplay: grid;\r\n\tgrid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));\r\n\tgap: 16px;\n}\n.modal-grid .collection-button[data-v-8379f505] {\r\n\tmax-width: 50rem;\n}\n.collection-button[data-v-8379f505] {\r\n\t--v-button-background-color: var(--theme--background-subdued);\r\n\t--v-button-background-color-hover: var(--theme--background-accent);\r\n\t--v-button-color: var(--theme--foreground);\r\n\t--v-button-color-hover: var(--theme--foreground);\r\n\tborder: var(--theme--border-width) solid var(--theme--border-color);\r\n\tborder-radius: var(--theme--border-radius);\r\n\ttransition: all var(--fast) var(--transition);\r\n\tcursor: pointer;\r\n\tmin-width: unset;\n}\n.collection-button[data-v-8379f505]:hover {\r\n\tborder-color: var(--theme--primary);\r\n\ttransform: translateY(-1px);\r\n\tbox-shadow: 0px 2px 8px rgba(38, 50, 56, 0.1);\n}\n.collection-button[data-v-8379f505] .content {\r\n\tpadding: 16px 12px;\r\n\tgap: 12px;\r\n\tflex-direction: column;\r\n\talign-items: center;\n}\n.collection-visual[data-v-8379f505] {\r\n\twidth: 100%;\r\n\theight: 10rem;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n\tborder-radius: var(--theme--border-radius);\r\n\toverflow: hidden;\r\n\tbackground: var(--theme--background-accent);\n}\n.collection-image[data-v-8379f505] {\r\n\tborder-radius: var(--theme--border-radius);\r\n\tmax-height: 100%;\r\n\tmin-height: 100%;\r\n\ttransition: all var(--fast) var(--transition);\n}\n.collection-button:hover .collection-image[data-v-8379f505] {\r\n\tmin-height: 0;\r\n\tmax-width: 100%;\n}\n.collection-icon[data-v-8379f505] {\r\n\t--v-icon-color: var(--theme--foreground-subdued);\r\n\tfont-size: 24px;\n}\n.collection-button:hover .collection-icon[data-v-8379f505] {\r\n\t--v-icon-color: var(--theme--primary);\n}\n.collection-title[data-v-8379f505] {\r\n\ttext-align: center;\r\n\tpadding: 0;\r\n\tfont-size: 13px;\r\n\tline-height: 2;\r\n\tcolor: var(--theme--foreground);\r\n\tfont-weight: 500;\r\n\tmargin: 1rem 0;\n}\n.collection-title[data-v-8379f505] .v-text-overflow {\r\n\tdisplay: -webkit-box;\r\n\t-webkit-box-orient: vertical;\r\n\t-webkit-line-clamp: 1;\r\n\tline-clamp: 1;\r\n\twhite-space: unset;\n}\n@media (min-width: 600px) {\n.modal-grid[data-v-8379f505] {\r\n\t\tgrid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));\r\n\t\tgap: 20px;\n}\n.collection-visual[data-v-8379f505] {\r\n\t\theight: 12rem;\n}\n}\n@media (min-width: 768px) {\n.modal-grid[data-v-8379f505] {\r\n\t\tgrid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));\n}\n.modal-content[data-v-8379f505] {\r\n\t\tpadding: 32px;\n}\n.collection-visual[data-v-8379f505] {\r\n\t\theight: 15rem;\n}\n}\n@media screen and (min-width: 1024px) {\n.filters[data-v-8379f505] {\r\n\t\tdisplay: flex;\r\n\t\tgap: 24px;\r\n\t\tflex-wrap: wrap;\r\n\t\talign-items: end;\r\n\t\tmargin-bottom: 32px;\n}\n.filter-section[data-v-8379f505] {\r\n\t\tmargin-bottom: 0;\n}\n}\r\n",{});var le=n({id:"srt-labs-experimental-m2a-interface",name:"Builder (M2A) Button Matrix",icon:"grid_view",description:"Add a matrix button selector to the built-in M2A interface",component:((e,t)=>{const n=e.__vccOpts||e;for(const[e,a]of t)n[e]=a;return n})(ae,[["__scopeId","data-v-8379f505"],["__file","interface.vue"]]),types:["alias"],localTypes:["presentation"],group:"presentation",options:[{field:"target",name:"Target Builder (M2A) field placement",type:"string",meta:{width:"full",interface:"select-dropdown",options:{choices:[{text:"Above this field",value:"above",icon:"vertical_align_top"},{text:"Below this field",value:"below",icon:"vertical_align_bottom"}]}},schema:{default_value:"below"}},{field:"info",type:"alias",meta:{width:"full",interface:"presentation-notice",conditions:[{rule:{_and:[{target:{_eq:"below"}}]},options:{text:ie({targetPlacedBelow:!0})}}],options:{icon:!1,text:ie({targetPlacedBelow:!1})}}},{field:"enableSearch",name:"Enable Search",type:"boolean",meta:{width:"half",interface:"boolean"},schema:{default_value:!1}},{field:"searchPlaceholder",name:"Search Placeholder",type:"string",meta:{width:"half",interface:"input",hidden:!0,conditions:[{rule:{enableSearch:{_eq:!0}},hidden:!1}]},schema:{default_value:"Search..."}},{field:"categoryCollection",name:"Category Collection",type:"string",meta:{width:"half",interface:"system-collection",note:"Collection that contains category items"}},{field:"categoryRelationField",name:"Category Relation Field",type:"string",meta:{width:"half",interface:"input",note:"Field name in target collections that relates to categories",hidden:!0,conditions:[{rule:{categoryCollection:{_nnull:!0}},hidden:!1}]}},{field:"tagCollection",name:"Tag Collection",type:"string",meta:{width:"half",interface:"system-collection",note:"Collection that contains tag items"}},{field:"tagRelationField",name:"Tag Relation Field",type:"string",meta:{width:"half",interface:"input",note:"Field name in target collections that relates to tags",hidden:!0,conditions:[{rule:{tagCollection:{_nnull:!0}},hidden:!1}]}}]});function ie({targetPlacedBelow:e}){return`${`<svg style="vertical-align:middle" width="120" height="50" viewBox="0 0 120 50" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M114 1H6C3.23858 1 1 3.23858 1 6V16C1 18.7614 3.23858 21 6 21H114C116.761 21 119 18.7614 119 16V6C119 3.23858 116.761 1 114 1Z" stroke="var(--theme--primary)" stroke-opacity="${e?"1":"0.25"}" stroke-width="2"/><path d="M114 29H6C3.23858 29 1 31.2386 1 34V44C1 46.7614 3.23858 49 6 49H114C116.761 49 119 46.7614 119 44V34C119 31.2386 116.761 29 114 29Z" stroke="var(--theme--primary)" stroke-opacity="${e?"0.25":"1"}" stroke-width="2"/><path opacity="${e?"0.5":"1"}" d="M20 37H10V38.2691H20V37ZM10 40.7778H20V39.5087H10V40.7778Z" fill="var(--theme--primary)"/><path opacity="${e?"1":"0.5"}" d="M20 9H10V10.2691H20V9ZM10 12.7778H20V11.5087H10V12.7778Z" fill="var(--theme--primary)"/><text opacity="${e?"1":"0.5"}" fill="var(--theme--primary)" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" font-weight="500" letter-spacing="0em"><tspan x="28" y="14.6364">${e?"Button Matrix":"Builder (M2A)"}</tspan></text><text opacity="${e?"0.5":"1"}" fill="var(--theme--primary)" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" font-weight="500" letter-spacing="0em"><tspan x="28" y="42.6364">${e?"Builder (M2A)":"Button Matrix"}</tspan></text></svg>`}${`<span style="padding-left: 12px">Place this field directly ${e?"above":"below"} the Builder (M2A) field!</span>`}`}export{le as default};
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@veribir/m2a-interface",
3
3
  "type": "module",
4
- "version": "0.0.3",
4
+ "version": "0.0.4",
5
5
  "description": "This Directus extension transforms the standard Many-to-Any (M2A) Builder dropdown into an intuitive visual modal with card-based collection selection. Users can quickly filter collections using category and tag chips, search by name, and navigate with keyboard shortcuts. The responsive grid layout displays collection icons and banners, making it easy to find the right content type in large Directus projects with many available collections.",
6
6
  "author": "Veribir",
7
7
  "license": "Proprietary",