@directus-labs/experimental-m2a-interface/dist/index.js

Add a matrix button selector to the built-in M2A interface

import{defineInterface as e}from"@directus/extensions-sdk";import{getCurrentScope as t,onScopeDispose as n,toRef as a,readonly as l,customRef as i,ref as r,watch as o,computed as u,toValue as c,shallowRef as d,onBeforeUpdate as s,unref as v,defineComponent as p,onMounted as f,nextTick as m,resolveComponent as h,openBlock as g,createElementBlock as y,Fragment as b,createElementVNode as x,createBlock as w,withCtx as k,createTextVNode as _,toDisplayString as S,createCommentVNode as A,Teleport as M,createVNode as B,renderList as C,withKeys as V,withModifiers as $}from"vue";const H="undefined"!=typeof window&&"undefined"!=typeof document;"undefined"!=typeof WorkerGlobalScope&&(globalThis,WorkerGlobalScope);const q=Object.prototype.toString,E=()=>{};function T(e){return Array.isArray(e)?e:[e]}const P=H?window:void 0;function O(...e){const a=[],l=()=>{a.forEach((e=>e())),a.length=0},i=u((()=>{const t=T(c(e[0])).filter((e=>null!=e));return t.every((e=>"string"!=typeof e))?t:void 0})),r=(d=()=>{var t,n;return[null!=(n=null==(t=i.value)?void 0:t.map((e=>function(e){var t;const n=c(e);return null!=(t=null==n?void 0:n.$el)?t:n}(e))))?n:[P].filter((e=>null!=e)),T(c(i.value?e[1]:e[0])),T(v(i.value?e[2]:e[1])),c(i.value?e[3]:e[2])]},s=([e,t,n,i])=>{if(l(),!(null==e?void 0:e.length)||!(null==t?void 0:t.length)||!(null==n?void 0:n.length))return;const r=(o=i,"[object Object]"===q.call(o)?{...i}:i);var o;a.push(...e.flatMap((e=>t.flatMap((t=>n.map((n=>((e,t,n,a)=>(e.addEventListener(t,n,a),()=>e.removeEventListener(t,n,a)))(e,t,n,r))))))))},p={flush:"post"},o(d,s,{...p,immediate:!0}));var d,s,p;var f;return f=l,t()&&n(f),()=>{r(),l()}}function j(...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:l=P,eventName:i="keydown",passive:r=!1,dedupe:o=!1}=a,u="function"==typeof(d=t)?d:"string"==typeof d?e=>e.key===d:Array.isArray(d)?e=>d.includes(e.key):()=>!0;var d;return O(l,i,(e=>{e.repeat&&c(o)||u(e)&&n(e)}),r)}function I(e,t){const n=d(null!=(v=c(null!=(s=null==t?void 0:t.initialValue)?s:c(e)[0]))?v:void 0);var s,v;const p=function(...e){if(1!==e.length)return a(...e);const t=e[0];return"function"==typeof t?l(i((()=>({get:t,set:E})))):r(t)}(e),f=u({get(){var e;const a=p.value;let l=(null==t?void 0:t.getIndexOf)?t.getIndexOf(n.value,a):a.indexOf(n.value);return l<0&&(l=null!=(e=null==t?void 0:t.fallbackIndex)?e:0),l},set(e){m(e)}});function m(e){const t=p.value,a=t.length,l=t[(e%a+a)%a];return n.value=l,l}function h(e=1){return m(f.value+e)}return o(p,(()=>m(f.value))),{state:n,index:f,next:function(e=1){return h(e)},prev:function(e=1){return h(-e)},go:m}}const Z={key:0,class:"btn-matrix"};var D=p({__name:"interface",props:{value:{},target:{default:"below"},enableSearch:{type:Boolean,default:!1},searchPlaceholder:{default:"Search..."}},setup(e){const t=e,n=r(),{targetBuilder:a}=function(e,{onFound:n}){const a=r();return f((()=>{var l,i,r;const o="above"===t.target?"previousElementSibling":"nextElementSibling";a.value=null==(r=null==(i=null==(l=e.value)?void 0:l.closest(".field"))?void 0:i[o])?void 0:r.querySelector(".m2a-builder"),a.value&&n()})),{targetBuilder:a}}(n,{onFound:()=>{var e,t;null==(t=null==(e=n.value)?void 0:e.closest(".field"))||t.remove()}}),{label:l,buttonMatrix:i,triggerClick:c}=function(e){const t=r(""),n=r([]);let a;return o((()=>e.value),(async function(){var n,r;const o=null==(n=e.value)?void 0:n.querySelector(".actions>.v-menu");if(a=null==o?void 0:o.querySelector(".v-button button"),!a)return;t.value=null!=(r=a.textContent)?r:"";const d=20;let s,v=0;do{await c(v?50:0),v++,a.click(),await m(),s=l()}while(!s&&v<d);if(!s)return;p=o,p.style.visibility="hidden",p.style.display="block",p.style.position="absolute",i(s),u(s);var p}),{once:!0}),{label:t,buttonMatrix:n,triggerClick:async function(e){null==a||a.click(),await m();const t=document.querySelector(".v-menu-popper.active");if(!t)return;const n=null==t?void 0:t.querySelectorAll(".v-list-item.link.clickable"),l=null==n?void 0:n[e];l&&l.click();await m(),t.style.visibility="hidden",document.body.click()}};function l(){const e=document.querySelector("#menu-outlet .v-menu-popper.active:not([data-hacked])");if(e)return e.dataset.hacked="hacked",e.id,e}function i(e){var t;null==(t=e.querySelectorAll(".v-list-item.link.clickable"))||t.forEach((e=>{var t,a,l;const i=e.textContent,r=null!=(l=null==(a=null==(t=e.querySelector(".v-icon [data-icon]"))?void 0:t.dataset)?void 0:a.icon)?l:"database";n.value.push({label:i,icon:r})}))}async function u(e){e.style.visibility="hidden",await c(150),document.body.click()}function c(e){return new Promise((t=>setTimeout(t,e)))}}(a),d=r(""),p=u((()=>{if(!d.value)return i.value;const e=d.value.toLowerCase();return i.value.filter((t=>t.label.toLowerCase().includes(e)))}));const H=r(null),q=function(){const e=r([]);return e.value.set=t=>{t&&e.value.push(t)},s((()=>{e.value.length=0})),e}(),E=u((()=>p.value.map(((e,t)=>t)))),{state:T,next:P,prev:D,goTo:L}=I(E,{initialValue:0});function z(e){m((()=>{const t=q.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 N={target:H,passive:!1};return j(["ArrowDown","ArrowRight"],(e=>{e.preventDefault(),P(),z(T.value)}),N),j(["ArrowUp","ArrowLeft"],(e=>{e.preventDefault(),D(),z(T.value)}),N),j("Home",(e=>{e.preventDefault(),L(0),z(T.value)}),N),j("End",(e=>{e.preventDefault();const t=E.value.length-1;t>=0&&(L(t),z(T.value))}),N),o(E,(e=>{(!e.includes(T.value)&&e.length>0||0===e.length)&&L(0)}),{flush:"post"}),O(H,"focus",(e=>{var t;!(null==(t=H.value)?void 0:t.contains(e.relatedTarget))&&E.value.length>0&&z(T.value)})),(e,r)=>{const o=h("v-notice"),u=h("v-divider"),s=h("v-icon"),f=h("v-input"),m=h("v-text-overflow"),E=h("v-button");return g(),y(b,null,[x("div",{ref_key:"el",ref:n},[v(a)?A("v-if",!0):(g(),w(o,{key:0,type:"warning",icon:"vertical_align_"+("above"===e.target?"top":"bottom")},{default:k((()=>[_(" No Builder (M2A) field found "+S(e.target)+" this field! ",1)])),_:1},8,["icon"]))],512),v(a)?(g(),w(M,{key:0,to:v(a)},[v(i).length>0?(g(),y("div",Z,[v(l)?(g(),w(u,{key:0,"inline-title":"",class:"label"},{default:k((()=>[_(S(v(l)),1)])),_:1})):A("v-if",!0),t.enableSearch?(g(),w(f,{key:1,modelValue:d.value,"onUpdate:modelValue":r[0]||(r[0]=e=>d.value=e),placeholder:t.searchPlaceholder,class:"search-input"},{prepend:k((()=>[B(s,{name:"search"})])),_:1},8,["modelValue","placeholder"])):A("v-if",!0),x("div",{ref_key:"gridRef",ref:H,class:"grid",tabindex:"0"},[A(" eslint-disable-next-line vue/valid-v-for "),(g(!0),y(b,null,C(p.value,((e,t)=>(g(),w(E,{key:e.label,ref_for:!0,ref:v(q).set,tabindex:t===v(T)?0:-1,secondary:"","full-width":"",onClick:e=>v(c)(t),onKeydown:[V($((e=>v(c)(t)),["prevent"]),["enter"]),V($((e=>v(c)(t)),["prevent"]),["space"])]},{default:k((()=>[B(s,{name:e.icon},null,8,["name"]),B(m,{text:e.label,size:"small"},null,8,["text"])])),_:2},1032,["tabindex","onClick","onKeydown"])))),128))],512)])):A("v-if",!0)],8,["to"])):A("v-if",!0)],64)}}}),L=[],z=[];!function(e,t){if(e&&"undefined"!=typeof document){var n,a=!0===t.prepend?"prepend":"append",l=!0===t.singleTag,i="string"==typeof t.container?document.querySelector(t.container):document.getElementsByTagName("head")[0];if(l){var r=L.indexOf(i);-1===r&&(r=L.push(i)-1,z[r]={}),n=z[r]&&z[r][a]?z[r][a]:z[r][a]=o()}else n=o();65279===e.charCodeAt(0)&&(e=e.substring(1)),n.styleSheet?n.styleSheet.cssText+=e:n.appendChild(document.createTextNode(e))}function o(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),t.attributes)for(var n=Object.keys(t.attributes),l=0;l<n.length;l++)e.setAttribute(n[l],t.attributes[n[l]]);var r="prepend"===a?"afterbegin":"beforeend";return i.insertAdjacentElement(r,e),e}}("\n.m2a-builder:has(.btn-matrix) .actions {\n\tmargin-top: 0px;\n}\n.m2a-builder:has(.btn-matrix) .actions:has(.v-menu + .v-menu) {\n\tmargin-top: 8px;\n}\n.btn-matrix[data-v-a2ad8208] {\n\tmargin-top: 8px;\n\tcontainer-type: inline-size;\n}\n.label[data-v-a2ad8208] {\n\tmargin-bottom: 8px;\n}\n.grid[data-v-a2ad8208] {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(3, 1fr);\n\tgap: 8px;\n}\n@container (width > 425px) {\n.grid[data-v-a2ad8208] {\n\t\tgrid-template-columns: repeat(4, 1fr);\n}\n}\n@container (width > 600px) {\n.grid[data-v-a2ad8208] {\n\t\tgrid-template-columns: repeat(5, 1fr);\n}\n}\n.v-button[data-v-a2ad8208] .content {\n\t--v-icon-color: var(--theme--foreground-subdued);\n\tgap: 6px;\n\tflex-direction: column;\n}\n.v-button[data-v-a2ad8208] {\n\t--v-button-height: 100px;\n}\n.v-text-overflow[data-v-a2ad8208] {\n\twidth: 100%;\n}\n.v-divider[data-v-a2ad8208] .type-text {\n\tcolor: var(--theme--foreground-subdued);\n}\n.search-input[data-v-a2ad8208] {\n\tmargin-bottom: 12px;\n}\n",{});var N=e({id:"directus-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})(D,[["__scopeId","data-v-a2ad8208"],["__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:R({targetPlacedBelow:!0})}}],options:{icon:!1,text:R({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..."}}]});function R({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{N as default};