@directus-labs/super-header-interface
Version:
A super powerful header interface for Directus that allows you to create rich page headers with titles, subtitles, help information, and interactive actions. Perfect for enhancing the user experience with contextual information and quick access to common
2 lines (1 loc) • 23.8 kB
JavaScript
import{useApi as e,useStores as t,defineInterface as n}from"@directus/extensions-sdk";import{ref as a,inject as o,defineComponent as r,resolveComponent as i,openBlock as l,createBlock as s,unref as c,withCtx as d,createTextVNode as f,toDisplayString as u,createCommentVNode as h,createElementBlock as p,computed as v,resolveDirective as m,createElementVNode as b,normalizeStyle as y,createVNode as g,Fragment as w,withDirectives as x,renderList as k,isRef as _}from"vue";import{useI18n as E}from"vue-i18n";import{useRoute as T}from"vue-router";var F=(0).constructor,N=F.isFinite;F.isInteger;var S=[].constructor.isArray;function C(e){return null!==e&&"object"==typeof e}function A(e,t){return void 0===t&&(t=0),"string"==typeof e&&e.length>=t}function O(e){return N(e)}function P(e){return S(e)}function z(e,t){return C(e)&&t in e}var L=new(function(){function e(e){this.size=e,this.reset()}return e.prototype.reset=function(){this.oldestIndex=0,this.map={},this.cachedKeys=new Array(this.size)},e.prototype.get=function(e){return this.map[e]},e.prototype.set=function(e,t){this.map[e]=t;var n=this.cachedKeys[this.oldestIndex];void 0!==n&&delete this.map[n],this.cachedKeys[this.oldestIndex]=e,this.oldestIndex++,this.oldestIndex%=this.size},e}())(1e3);function V(e){var t=e.charAt(0),n=e.substr(-1);if("'\"`".includes(t)||"'\"`".includes(n)){if(e.length<2||t!==n)throw new SyntaxError('Mismatching string quotation: "'+e+'"');return e.substring(1,e.length-1)}if(e.includes("["))throw new SyntaxError('Missing ] in varName "'+e+'"');return"+"===t?e.substr(1):e}function j(e,t,n){var a=t.trim();if(""===a)return e;if(a.startsWith(".")){if(!n)throw new SyntaxError('Unexpected . at the start of "'+t+'"');if(""===(a=a.substr(1).trim()))return e}else if(n)throw new SyntaxError('Missing . at the start of "'+t+'"');if(a.endsWith("."))throw new SyntaxError('Unexpected "." at the end of "'+t+'"');for(var o=0,r=a.split(".");o<r.length;o++){var i=r[o].trim();if(""===i)throw new SyntaxError('Empty prop name when parsing "'+t+'"');e.push(i)}return e}function G(e){if(!A(e))throw new TypeError("Cannot parse path. Expected string. Got a "+typeof e);for(var t,n,a=0,o=!1,r=new Array(0),i=0;i<e.length&&-1!==(t=e.indexOf("[",i));i=a){if(-1===(a=e.indexOf("]",t)))throw new SyntaxError('Missing ] in varName "'+e+'"');if(0===(n=e.substring(t+1,a).trim()).length)throw new SyntaxError("Unexpected token ]");a++,j(r,e.substring(i,t),o),r.push(V(n)),o=!0}return j(r,e.substring(a),o)}function I(e,t,n){if(void 0===n&&(n={}),!C(n))throw new TypeError("get expects an object option. Got "+typeof n);var a=n.depth,o=void 0===a?10:a;if(!O(o)||o<=0)throw new RangeError("Expected a positive number for depth. Got "+o);var r=Array.isArray(t)?t:G.cached(t),i=function(){return r.join(" > ")};if(r.length>o)throw new ReferenceError("The path cannot be deeper than "+o+' levels. Got "'+i()+'"');for(var l=e,s=0,c=r;s<c.length;s++){var d=c[s];if(!z(l,d)){if(n.propsExist)throw new ReferenceError(d+' is not defined in the scope at path: "'+i()+'"');return}l=l[d]}return l}G.cached=function(e){var t=L.get(e);return void 0===t&&(t=G(e),L.set(e,t)),t};var q=function(){function e(e,t){var n=this;if(void 0===t&&(t={}),this.tokens=e,this.options=t,this.render=function(e){void 0===e&&(e={});var t=n.tokens.varNames.length;n.cacheParsedPaths();for(var a=new Array(t),o=0;o<t;o++)a[o]=I(e,n.toPathCache[o],n.options);return n.stringify(a)},this.renderFn=function(e,t){void 0===t&&(t={});var a=n.resolveVarNames(e,t);return n.stringify(a)},this.renderFnAsync=function(e,t){return void 0===t&&(t={}),Promise.all(n.resolveVarNames(e,t)).then((function(e){return n.stringify(e)}))},!C(e)||!P(e.strings)||!P(e.varNames)||e.strings.length!==e.varNames.length+1)throw new TypeError("Invalid tokens object");if(!C(t))throw new TypeError("Options should be an object. Got a "+typeof t);t.validateVarNames&&this.cacheParsedPaths()}return e.prototype.cacheParsedPaths=function(){var e=this.tokens.varNames;if(void 0===this.toPathCache){this.toPathCache=new Array(e.length);for(var t=0;t<e.length;t++)this.toPathCache[t]=G.cached(e[t])}},e.prototype.resolveVarNames=function(e,t){void 0===t&&(t={});var n=this.tokens.varNames;if("function"!=typeof e)throw new TypeError("Expected a resolver function. Got "+String(e));for(var a=n.length,o=new Array(a),r=0;r<a;r++)o[r]=e.call(null,n[r],t);return o},e.prototype.stringify=function(e){for(var t=this.tokens.strings,n=this.options.explicit,a=e.length,o="",r=0;r<a;r++){o+=t[r];var i=e[r];(n||null!=i)&&(o+=i)}return o+=t[a]},e}();function M(e,t){void 0===t&&(t={});var n=function(e,t){if(void 0===t&&(t={}),!A(e))throw new TypeError("The template parameter must be a string. Got a "+typeof e);if(!C(t))throw new TypeError("Options should be an object. Got a "+typeof t);var n=t.tags,a=void 0===n?["{{","}}"]:n,o=t.maxVarNameLength,r=void 0===o?1e3:o;if(!P(a)||2!==a.length)throw TypeError("tags should be an array of two elements. Got "+String(a));var i=a[0],l=a[1];if(!A(i,1)||!A(l,1)||i===l)throw new TypeError('The open and close symbols should be two distinct non-empty strings. Got "'+i+'" and "'+l+'"');if(!O(r)||r<=0)throw new Error("Expected a positive number for maxVarNameLength. Got "+r);for(var s,c,d=i.length,f=l.length,u=0,h=[],p=[],v=0;v<e.length&&-1!==(s=e.indexOf(i,v));){var m=s+d;if(-1===(u=e.substr(m,r+f).indexOf(l)))throw new SyntaxError('Missing "'+l+'" in the template for the "'+i+'" at position '+s+" within "+r+" characters");if(u+=m,0===(c=e.substring(m,u).trim()).length)throw new SyntaxError('Unexpected "'+l+'" tag found at position '+s);if(c.includes(i))throw new SyntaxError('Variable names cannot have "'+i+'". But at position '+s+'. Got "'+c+'"');p.push(c),u+=f,h.push(e.substring(v,s)),v=u}return h.push(e.substring(u)),{strings:h,varNames:p}}(e,t);return new q(n,t)}const U=a(!1),$=a(null);function K(n,r){const{t:i}=E(),l=e(),s=o("values"),c=T(),{useNotificationsStore:d}=t(),f=d(),u=a({}),h=a(!1),p=async e=>{const t=e.filter((({key:e})=>!u.value[e]));if(0!==t.length){h.value=!0;try{(await l.get("/flows",{params:{filter:{id:{_in:t.map((e=>e.key))}}}})).data.data.forEach((e=>{u.value[`${e.id}`]=e}))}catch(e){console.error("Error fetching flows:",e)}finally{h.value=!1}}},v=async e=>{const t=e.key;return u.value[t]||await p([e]),u.value[t]},m=async e=>($.value=e,U.value=!0,new Promise(((t,n)=>{$.value={...e,onSubmit:e=>{U.value=!1,t(e)},onCancel:()=>{U.value=!1,n(new Error("Flow cancelled"))}}})));return{flowsCache:u,loading:h,fetchFlows:p,getFlow:v,runFlow:async(e,t)=>{var a;try{const o=await v(e);let d=t;(null==(a=o.options)?void 0:a.requireConfirmation)&&(d=await m(o));const u=await l.post(`/flows/trigger/${o.id}`,{...d,collection:n,keys:r?[r]:[],$values:s.value,$route:{params:c.params,query:c.query,fullPath:c.fullPath}});return f.add({title:i("run_flow_success",{flow:o.name})}),u.data}catch(t){console.error(`Error running flow ${e.key}:`,t),f.add({title:i("unexpected_error"),type:"error",code:"UNKNOWN",dialog:!0,error:t})}},showForm:U,currentFlow:$,showFlowForm:m,submitFlow:async e=>{$.value&&$.value.onSubmit(e)}}}var W=(e,t)=>{const n=e.__vccOpts||e;for(const[e,a]of t)n[e]=a;return n},H=W(r({__name:"FlowAction",props:{label:{},icon:{},kind:{default:"normal"},flow:{},values:{},collection:{}},setup(e){const t=e,{loading:n,runFlow:a}=K(t.collection);async function o(){await a(t.flow,t.values)}return(e,t)=>{const a=i("v-icon"),r=i("v-button");return l(),s(r,{kind:e.kind,small:"",loading:c(n),onClick:o},{default:d((()=>[f(u(e.label)+" ",1),e.icon?(l(),s(a,{key:0,name:e.icon,right:""},null,8,["name"])):h("v-if",!0)])),_:1},8,["kind","loading"])}}}),[["__file","FlowAction.vue"]]),Y=W(r({__name:"BaseAction",props:{label:{},icon:{},kind:{}},setup:e=>(e,t)=>{const n=i("v-icon"),a=i("v-button");return l(),s(a,{kind:e.kind,small:""},{default:d((()=>[f(u(e.label)+" ",1),e.icon?(l(),s(n,{key:0,name:e.icon,right:""},null,8,["name"])):h("v-if",!0)])),_:1},8,["kind"])}}),[["__file","BaseAction.vue"]]),R=W(r({__name:"LinkAction",props:{label:{},icon:{},type:{},url:{}},setup:e=>(e,t)=>(l(),s(Y,{label:e.label,icon:e.icon,type:e.type,href:e.url},null,8,["label","icon","type","href"]))}),[["__file","LinkAction.vue"]]);const B=["innerHTML"];var D=r({__name:"Text",props:{content:{}},setup:e=>(e,t)=>e.content?(l(),p("div",{key:0,class:"helper-text selectable",innerHTML:e.content},null,8,B)):h("v-if",!0)}),J=[],Q=[];function X(e,t){if(e&&"undefined"!=typeof document){var n,a=!0===t.prepend?"prepend":"append",o=!0===t.singleTag,r="string"==typeof t.container?document.querySelector(t.container):document.getElementsByTagName("head")[0];if(o){var i=J.indexOf(r);-1===i&&(i=J.push(r)-1,Q[i]={}),n=Q[i]&&Q[i][a]?Q[i][a]:Q[i][a]=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"===a?"afterbegin":"beforeend";return r.insertAdjacentElement(i,e),e}}X(".helper-text[data-v-bf11b45f] {\n color: var(--theme--foreground);\n font-family: var(--theme--fonts--sans--font-family);\n line-height: var(--theme--form--field--input--line-height);\n}\n.helper-text [data-v-bf11b45f] *:not(:last-child) {\n margin-bottom: var(--theme--form--row-gap);\n}\n\n[data-v-bf11b45f] h1, [data-v-bf11b45f] h2, [data-v-bf11b45f] h3, [data-v-bf11b45f] h4, [data-v-bf11b45f] h5, [data-v-bf11b45f] h6 {\n font-weight: var(--theme--fonts--display--font-weight);\n line-height: 1.2;\n color: var(--theme--foreground-accent);\n margin-bottom: var(--theme--form--row-gap);\n}\n\n[data-v-bf11b45f] h1 {\n font-family: var(--theme--fonts--display--font-family);\n}\n\n[data-v-bf11b45f] h1 {\n font-size: 28px;\n font-family: var(--theme--fonts--display--font-family);\n}\n\n[data-v-bf11b45f] h2 {\n font-size: 24px;\n font-family: var(--theme--fonts--display--font-family);\n}\n\n[data-v-bf11b45f] h3 {\n font-size: 20px;\n}\n\n[data-v-bf11b45f] h4 {\n font-size: 18px;\n}\n\n[data-v-bf11b45f] h5 {\n font-size: 16px;\n}\n\n[data-v-bf11b45f] h6 {\n font-size: 14px;\n}\n\n[data-v-bf11b45f] p {\n margin-bottom: var(--theme--form--row-gap);\n}\n\n[data-v-bf11b45f] a {\n color: var(--theme--primary);\n text-decoration: none;\n}\n\n[data-v-bf11b45f] a:hover {\n text-decoration: underline;\n}\n\n[data-v-bf11b45f] img {\n max-width: 100%;\n height: auto;\n border-radius: var(--theme--border-radius);\n box-shadow: var(--theme--card--shadow);\n}\n\n[data-v-bf11b45f] iframe {\n max-width: 100%;\n border-radius: var(--theme--border-radius);\n}\n\n[data-v-bf11b45f] ul, [data-v-bf11b45f] ol {\n padding-left: calc(var(--theme--form--field--input--padding) * 1.5);\n margin-bottom: var(--theme--form--row-gap);\n}\n\n[data-v-bf11b45f] li > p {\n margin-bottom: calc(var(--theme--form--row-gap) / 3);\n}\n\n[data-v-bf11b45f] li {\n margin-bottom: calc(var(--theme--form--row-gap) / 3);\n}\n\n[data-v-bf11b45f] pre, [data-v-bf11b45f] code {\n font-family: var(--theme--fonts--monospace--font-family);\n background-color: var(--theme--background-subdued);\n padding: calc(var(--theme--form--field--input--padding) / 2);\n border-radius: var(--theme--border-radius);\n font-size: 14px;\n color: var(--theme--foreground);\n overflow-x: auto;\n}\n\n[data-v-bf11b45f] pre {\n margin-bottom: var(--theme--form--row-gap);\n}\n\n[data-v-bf11b45f] blockquote {\n border-left: 3px solid var(--theme--primary);\n padding-left: var(--theme--form--field--input--padding);\n margin-left: 0;\n color: var(--theme--foreground-subdued);\n font-style: italic;\n}\n\n[data-v-bf11b45f] table {\n border-collapse: collapse;\n width: 100%;\n margin-bottom: var(--theme--form--row-gap);\n}\n\n[data-v-bf11b45f] th, [data-v-bf11b45f] td {\n border: var(--theme--border-width) solid var(--theme--border-color);\n padding: calc(var(--theme--form--field--input--padding) / 2);\n text-align: left;\n}\n\n[data-v-bf11b45f] th {\n background-color: var(--theme--background-subdued);\n font-weight: var(--theme--fonts--sans--font-weight);\n color: var(--theme--foreground-accent);\n}\n\n[data-v-bf11b45f] hr {\n border: none;\n border-top: var(--theme--border-width) solid var(--theme--border-color);\n margin: calc(var(--theme--form--row-gap) * 1.5) 0;\n}\n\n[data-v-bf11b45f] div {\n margin-bottom: var(--theme--form--row-gap);\n}",{});var Z=W(D,[["__scopeId","data-v-bf11b45f"],["__file","Text.vue"]]);const ee={class:"page-header"},te={class:"text-container"},ne={class:"text-content"},ae={key:0,class:"text-title"},oe={key:1,class:"text-subtitle"},re={class:"actions-wrapper"},ie={class:"actions-container"},le=["href"],se={key:0,class:"help-text"},ce={class:"collapse-button-container"};var de=r({__name:"interface",props:{icon:{},title:{},subtitle:{},actions:{default:()=>[]},help:{default:""},values:{},color:{},collection:{},primaryKey:{}},setup(e){const n=e,{t:r}=E(),{useFieldsStore:T}=t(),F=T(),{fetchFlows:N,showForm:S,submitFlow:C,currentFlow:A,runFlow:O}=K(n.collection,n.primaryKey),P=a(!1),z=a({}),L=o("values",a({}));function V(){P.value=!P.value}const j=v((()=>{var e;if(!n.actions||!(null==(e=n.actions)?void 0:e.length))return[];return n.actions.map((e=>{var t,n,a,o;return"link"===e.actionType?{...e,url:(n=null!=(t=e.url)?t:"",a=L.value,M(n,o).render(a))}:e}))}));function G(){var e;return j.value&&(null==(e=j.value)?void 0:e.length)?j.value.filter((e=>"flow"===e.actionType&&e.flow)).map((e=>e.flow)):[]}G().length&&N(G());const I=v((()=>{var e,t;return!(!j.value||!(null==(e=j.value)?void 0:e.length))&&(null==(t=j.value)?void 0:t.length)>1})),q=v((()=>{var e;return j.value&&(null==(e=j.value)?void 0:e.length)&&j.value[0]||null})),U=v((()=>F.getFieldsForCollection(n.collection)));return(e,t)=>{const a=i("v-icon"),o=i("render-template"),v=i("v-button"),E=i("v-list-item-icon"),T=i("v-list-item-title"),F=i("v-list-item-content"),N=i("v-list-item"),G=i("v-list"),M=i("v-menu"),$=i("transition-expand"),K=i("v-card-title"),W=i("v-form"),Y=i("v-card-text"),B=i("v-card-actions"),D=i("v-card"),J=i("v-dialog"),Q=m("tooltip");return l(),p("div",ee,[b("div",{class:"header-content",style:y({"--header-color":e.color})},[b("div",te,[e.icon?(l(),s(a,{key:0,name:e.icon},null,8,["name"])):h("v-if",!0),b("div",ne,[e.title?(l(),p("p",ae,[g(o,{collection:e.collection,fields:U.value,item:c(L),template:e.title},null,8,["collection","fields","item","template"])])):h("v-if",!0),e.subtitle?(l(),p("p",oe,[g(o,{collection:e.collection,fields:U.value,item:c(L),template:e.subtitle},null,8,["collection","fields","item","template"])])):h("v-if",!0)])]),b("div",re,[b("div",ie,[e.help?(l(),p(w,{key:0},[g(v,{secondary:"",small:"",class:"full-button",onClick:V},{default:d((()=>[g(a,{name:"help_outline",left:""}),f(" "+u(c(r)("help"))+" ",1),g(a,{name:P.value?"expand_less":"expand_more",right:""},null,8,["name"])])),_:1}),h(" We show the icon only on smaller containers "),g(v,{secondary:"",small:"",class:"icon-button",icon:"",onClick:V},{default:d((()=>[g(a,{name:"help_outline"})])),_:1})],64)):h("v-if",!0),!I.value&&q.value?(l(),p(w,{key:1},["link"===q.value.actionType?(l(),s(R,{key:0,label:q.value.label,url:q.value.url||"",icon:q.value.icon,kind:q.value.type},null,8,["label","url","icon","kind"])):"flow"===q.value.actionType&&q.value.flow?(l(),s(H,{key:1,label:q.value.label,collection:e.collection,flow:q.value.flow,icon:q.value.icon,kind:q.value.type,values:c(L)},null,8,["label","collection","flow","icon","kind","values"])):h("v-if",!0)],64)):I.value?(l(),s(M,{key:2,placement:"bottom-end"},{activator:d((({toggle:e})=>[b("div",null,[g(v,{small:"",class:"full-button",onClick:e},{default:d((()=>[f(u(c(r)("actions"))+" ",1),g(a,{name:"expand_more",right:""})])),_:2},1032,["onClick"]),h(" We show the icon only on smaller containers "),x((l(),s(v,{small:"",class:"icon-button",icon:"",onClick:e},{default:d((()=>[g(a,{name:"expand_more"})])),_:2},1032,["onClick"])),[[Q,c(r)("actions")]])])])),default:d((()=>[g(G,null,{default:d((()=>[(l(!0),p(w,null,k(j.value,((e,t)=>(l(),s(N,{key:t,clickable:"",onClick:t=>"link"===e.actionType?null:async function(e){"flow"===e.actionType&&e.flow&&O(e.flow,n.values)}(e)},{default:d((()=>[e.icon?(l(),s(E,{key:0},{default:d((()=>[g(a,{name:e.icon},null,8,["name"])])),_:2},1024)):h("v-if",!0),g(F,null,{default:d((()=>[g(T,null,{default:d((()=>["link"===e.actionType?(l(),p("a",{key:0,href:e.url,target:"_blank"},u(c(r)(e.label)),9,le)):(l(),p(w,{key:1},[f(u(c(r)(e.label)),1)],64))])),_:2},1024)])),_:2},1024)])),_:2},1032,["onClick"])))),128))])),_:1})])),_:1})):h("v-if",!0)])])],4),h(" Expanded Help "),g($,null,{default:d((()=>[P.value&&e.help?(l(),p("div",se,[g(Z,{content:e.help},null,8,["content"]),b("div",ce,[g(v,{class:"collapse-button",small:"",secondary:"",onClick:V},{default:d((()=>[f(u(`${c(r)("collapse")} ${c(r)("help")}`)+" ",1),g(a,{name:"expand_less",right:""})])),_:1})])])):h("v-if",!0)])),_:1}),h(" Flow Form Modal "),g(J,{modelValue:c(S),"onUpdate:modelValue":t[3]||(t[3]=e=>_(S)?S.value=e:null)},{default:d((()=>[g(D,null,{default:d((()=>[g(K,null,{default:d((()=>{var e;return[f(u((null==(e=c(A))?void 0:e.name)||"Run Flow"),1)]})),_:1}),g(Y,null,{default:d((()=>{var e,n;return[(null==(n=null==(e=c(A))?void 0:e.options)?void 0:n.fields)?(l(),s(W,{key:0,modelValue:z.value,"onUpdate:modelValue":t[0]||(t[0]=e=>z.value=e),fields:c(A).options.fields},null,8,["modelValue","fields"])):h("v-if",!0)]})),_:1}),g(B,null,{default:d((()=>[g(v,{secondary:"",onClick:t[1]||(t[1]=e=>S.value=!1)},{default:d((()=>[f(u(c(r)("cancel")),1)])),_:1}),g(v,{onClick:t[2]||(t[2]=e=>c(C)({collection:c(A).collection,key:c(A).key,...z.value}))},{default:d((()=>[f(u(c(r)("run_flow")),1)])),_:1})])),_:1})])),_:1})])),_:1},8,["modelValue"])])}}});X(".page-header[data-v-a6a68a4e] {\n position: relative;\n display: block;\n width: 100%;\n}\n\n.header-content[data-v-a6a68a4e] {\n container-type: inline-size;\n width: 100%;\n display: flex;\n gap: calc(var(--theme--form--column-gap) / 2);\n padding-bottom: 8px;\n border-bottom: var(--theme--border-width) solid var(--theme--border-color);\n color: var(--header-color, var(--theme--foreground));\n align-items: flex-start;\n justify-content: space-between;\n min-width: 0;\n}\n\n.text-container[data-v-a6a68a4e] {\n flex: 1;\n display: flex;\n align-items: center;\n gap: 8px;\n min-width: 0;\n}\n.text-container .v-icon[data-v-a6a68a4e] {\n --v-icon-color: var(--header-color);\n flex-shrink: 0;\n}\n.text-container .text-content[data-v-a6a68a4e] {\n min-width: 0;\n flex: 1;\n}\n.text-container .text-content .text-title[data-v-a6a68a4e] {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: 20px;\n font-weight: 600;\n}\n.text-container .text-content .text-subtitle[data-v-a6a68a4e] {\n margin-top: 4px;\n font-size: 14px;\n color: color-mix(in srgb, var(--theme--foreground), var(--theme--background) 25%);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.actions-wrapper[data-v-a6a68a4e] {\n flex-shrink: 0;\n}\n\n.actions-container[data-v-a6a68a4e] {\n display: flex;\n gap: 12px;\n align-items: center;\n}\n.actions-container .v-button[data-v-a6a68a4e] {\n width: 100%;\n justify-content: center;\n position: relative;\n}\n.actions-container .full-button[data-v-a6a68a4e] {\n display: block;\n position: relative;\n}\n.actions-container .icon-button[data-v-a6a68a4e] {\n display: none;\n position: relative;\n}\n@container (max-width: 600px) {\n .actions-container[data-v-a6a68a4e] {\n align-items: stretch;\n width: 100%;\n }\n .actions-container .full-button[data-v-a6a68a4e] {\n display: none;\n position: relative;\n }\n .actions-container .icon-button[data-v-a6a68a4e] {\n display: block;\n position: relative;\n }\n}\n\n.help-text[data-v-a6a68a4e] {\n padding-block: 16px;\n border-bottom: var(--theme--border-width) solid var(--theme--border-color);\n}\n\n.collapse-button-container[data-v-a6a68a4e] {\n display: flex;\n justify-content: flex-end;\n}",{});var fe=n({id:"super-header",name:"Super Header",icon:"exercise",description:"Create a header with a title, subtitle, help information, and/or actions to help users navigate or run Flows.",component:W(de,[["__scopeId","data-v-a6a68a4e"],["__file","interface.vue"]]),options:e=>[{field:"title",name:"Title",type:"string",meta:{width:"full",interface:"system-display-template",options:{collectionName:e.collection},note:"Enter a title, or leave it blank to only show a line. You can also include fields from the current item. NOTE: this interface ONLY supports root level fields, it does NOT support showing relational fields."}},{field:"color",name:"Color",type:"string",meta:{width:"half",interface:"select-color",note:"Select a color for the title and icon.",options:{}}},{field:"icon",name:"Icon",type:"string",meta:{width:"half",interface:"select-icon",note:"Select an icon to display next to the title."}},{field:"subtitle",name:"Subtitle",type:"string",meta:{width:"full",interface:"system-display-template",options:{collectionName:e.collection},note:"Enter a subtitle for additional context. You can also include fields from the current item. NOTE: this interface ONLY supports root level fields, it does NOT support showing relational fields."}},{field:"help",name:"Help",type:"text",meta:{width:"full",note:"Add help information to guide users. Supports HTML.",interface:"input-rich-text-html"}},{field:"actions",name:"Actions",type:"json",meta:{interface:"list",note:"Add actions to the divider to help users navigate or run Flows. If there are more than one action, actions will be displayed in a dropdown menu.",options:{fields:[{field:"label",type:"string",name:"label",meta:{width:"full",interface:"system-input-translated-string",note:"What the user will see on the button.",options:{placeholder:"label"}}},{field:"icon",name:"icon",type:"string",meta:{width:"half",note:"Select an icon to display next to the label.",interface:"select-icon"}},{field:"type",name:"type",type:"string",meta:{width:"half",note:"Select a type to style the button.",interface:"select-dropdown",default_value:"normal",options:{choices:[{text:"Primary",value:"normal"},{text:"Secondary",value:"secondary"},{text:"Info",value:"info"},{text:"Success",value:"success"},{text:"Warning",value:"warning"},{text:"Danger",value:"danger"}]}},schema:{default_value:"normal"}},{field:"actionType",name:"Action Type",type:"string",meta:{width:"half",interface:"select-dropdown",note:"Select the action type.",options:{choices:[{text:"Link",value:"link"},{text:"Flow",value:"flow"}]}},schema:{default_value:"link"}},{field:"url",type:"string",name:"$t:url",meta:{width:"full",interface:"system-display-template",note:"Enter a URL to navigate to when the button is clicked. You can include fields from the current item as variables. For example: https://example.com/articles/{{ id }}/{{ slug }}. NOTE: this interface ONLY supports root level fields, it does NOT support showing relational fields.",options:{collectionName:e.collection,font:"monospace",placeholder:"https://example.com/articles/{{ id }}/{{ slug }}"},hidden:!0,conditions:[{rule:{actionType:{_eq:"link"}},hidden:!1}]}},{field:"flow",type:"string",name:"Flow",meta:{width:"full",interface:"collection-item-dropdown",note:"Select a Flow to run when the button is clicked.",hidden:!0,options:{selectedCollection:"directus_flows",placeholder:"Select a flow",template:"{{ name }}",filter:{trigger:{_eq:"manual"}}},conditions:[{rule:{actionType:{_eq:"flow"}},hidden:!1}]}}]}}}],types:["alias"],localTypes:["presentation"],group:"presentation",autoKey:!0,hideLabel:!0});export{fe as default};