directus-extension-field-actions
Version:
Add advanced link & copy functionalities to your directus fields. Supports interfaces as well as displays.
2 lines (1 loc) • 20.9 kB
JavaScript
import{useStores as e,defineInterface as t,defineDisplay as a}from"@directus/extensions-sdk";import{computed as n,defineComponent as i,ref as o,resolveComponent as l,openBlock as r,createElementBlock as d,renderSlot as c,createVNode as p,withCtx as s,createTextVNode as u,createElementVNode as f,toDisplayString as v,unref as y,pushScopeId as g,popScopeId as h,resolveDirective as m,createBlock as k,resolveDynamicComponent as b,withDirectives as w,createSlots as _,normalizeClass as x,withModifiers as L,createCommentVNode as S}from"vue";import{useI18n as C}from"vue-i18n";function A(){const{t:e}=C();return{isCopySupported:n((()=>{var e;return!!(null==(e=null==navigator?void 0:navigator.clipboard)?void 0:e.writeText)})),isPasteSupported:n((()=>{var e;return!!(null==(e=null==navigator?void 0:navigator.clipboard)?void 0:e.readText)})),copyToClipboard:async function(t,a,n){var i,o,l;try{return await(null==(i=null==navigator?void 0:navigator.clipboard)?void 0:i.writeText(t)),a.add({title:null!=(o=null==n?void 0:n.success)?o:e("copy_raw_value_success")}),!0}catch(t){return a.add({type:"error",title:null!=(l=null==n?void 0:n.fail)?l:e("copy_raw_value_fail")}),!1}},pasteFromClipboard:async function(t,a){var n,i,o;try{const o=await(null==(n=null==navigator?void 0:navigator.clipboard)?void 0:n.readText());return t.add({title:null!=(i=null==a?void 0:a.success)?i:e("paste_raw_value_success")}),o}catch(n){return t.add({type:"error",title:null!=(o=null==a?void 0:a.fail)?o:e("paste_raw_value_fail")}),null}}}}function N(t){return n((()=>{var a;if("$project_url"===t){return(null==(a=e().useSettingsStore().settings)?void 0:a.project_url)||""}return t||""}))}function P(e){return{computedLink:n((()=>N(e.linkPrefix).value+e.value)),computedCopyValue:n((()=>N(e.copyPrefix).value+e.value))}}const T=e=>(g("data-v-b7b2e3f9"),e=e(),h(),e),$={class:"defa-link-preview"},B=T((()=>f("em",null,"Note: You can permanently disable this warning in the display / interface settings",-1)));var M=i({__name:"linkWrapper",props:{target:{type:String,default:"_blank"},href:{type:String,required:!0},safeMode:{type:Boolean,default:!1}},setup(e){const t=e,{t:a}=C(),n=o(!1);function i(e){const a=new URL(t.href,window.location.origin).origin!==window.location.origin;t.safeMode&&a?n.value=!0:window.open(t.href,t.target,"noopener, noreferrer")}return(o,g)=>{const h=l("v-card-title"),m=l("v-card-text"),k=l("v-button"),b=l("v-card-actions"),w=l("v-card"),_=l("v-dialog");return r(),d("div",{class:"defa-link-wrapper",onClick:i},[c(o.$slots,"default",{},void 0,!0),p(_,{"model-value":n.value,onEsc:g[2]||(g[2]=e=>n.value=!1),"onUpdate:modelValue":g[3]||(g[3]=e=>n.value=!1)},{default:s((()=>[p(w,null,{default:s((()=>[p(h,null,{default:s((()=>[u("Are you sure you want to open this link?")])),_:1}),p(m,null,{default:s((()=>[f("div",$,[f("code",null,v(t.href),1)]),B])),_:1}),p(b,null,{default:s((()=>[p(k,{secondary:"",onClick:g[0]||(g[0]=e=>n.value=!1)},{default:s((()=>[u(v(y(a)("cancel")),1)])),_:1}),p(k,{href:e.href,target:e.target,onClick:g[1]||(g[1]=e=>n.value=!1)},{default:s((()=>[u(" Open Link ")])),_:1},8,["href","target"])])),_:1})])),_:1})])),_:1},8,["model-value"])])}}}),O=[],E=[];function j(e,t){if(e&&"undefined"!=typeof document){var a,n=!0===t.prepend?"prepend":"append",i=!0===t.singleTag,o="string"==typeof t.container?document.querySelector(t.container):document.getElementsByTagName("head")[0];if(i){var l=O.indexOf(o);-1===l&&(l=O.push(o)-1,E[l]={}),a=E[l]&&E[l][n]?E[l][n]:E[l][n]=r()}else a=r();65279===e.charCodeAt(0)&&(e=e.substring(1)),a.styleSheet?a.styleSheet.cssText+=e:a.appendChild(document.createTextNode(e))}function r(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),t.attributes)for(var a=Object.keys(t.attributes),i=0;i<a.length;i++)e.setAttribute(a[i],t.attributes[a[i]]);var l="prepend"===n?"afterbegin":"beforeend";return o.insertAdjacentElement(l,e),e}}j(".defa-link-preview[data-v-b7b2e3f9] {\n background-color: var(--theme--background-normal);\n padding: 1rem;\n}\n\nem[data-v-b7b2e3f9] {\n display: block;\n font-size: 0.875rem;\n margin-top: 0.5rem;\n}",{});var D=(e,t)=>{const a=e.__vccOpts||e;for(const[e,n]of t)a[e]=n;return a},I=D(M,[["__scopeId","data-v-b7b2e3f9"],["__file","linkWrapper.vue"]]);const V={class:"action-interface"};var F=i({__name:"interface",props:{value:{type:[String,Number],default:null},clickAction:{type:String,default:"default"},showCopy:{type:Boolean,default:!1},copyPosition:{type:String,default:"end"},copyPrefix:{type:String,default:""},showLink:{type:Boolean,default:!1},linkPosition:{type:String,default:"end"},linkPrefix:{type:String,default:""},placeholder:{type:String,default:null},iconLeft:{type:String,default:null},iconRight:{type:String,default:null},min:{type:Number,default:void 0},max:{type:Number,default:void 0},step:{type:Number,default:1},type:{type:String,default:null},disabled:{type:Boolean,default:!1},openLinkAsNewTab:{type:Boolean,default:!0},openLinkSafeMode:{type:String,default:"never"}},emits:["input"],setup(t,{emit:a}){const i=t,{isCopySupported:o,copyToClipboard:c}=A(),{useNotificationsStore:u}=e(),f=u(),{computedLink:v,computedCopyValue:g}=P(i),h=n((()=>["bigInteger","integer","float","decimal"].includes(i.type)?"number":"text"));async function C(){await c(`${g.value}`,f)}function N(e){"copy"===i.clickAction&&i.disabled&&i.value&&(e.stopPropagation(),C())}const T=n((()=>"copy"===i.clickAction&&o?"Copy value":"link"===i.clickAction?"Open link":void 0));return(e,a)=>{const n=l("v-icon"),i=l("v-input"),c=l("v-button"),u=m("tooltip");return r(),d("div",V,[(r(),k(b("link"===t.clickAction?I:"div"),{href:y(v),target:t.openLinkAsNewTab?"_blank":"_self",safeMode:"always"===t.openLinkSafeMode,class:"dynamic-input-wrapper"},{default:s((()=>[w((r(),k(i,{"model-value":t.value,disabled:t.disabled,type:h.value,placeholder:t.placeholder,min:t.min,max:t.max,step:t.step,"onUpdate:modelValue":a[0]||(a[0]=t=>e.$emit("input",t)),onClick:N},_({_:2},[t.iconLeft?{name:"prepend",fn:s((()=>[p(n,{name:t.iconLeft},null,8,["name"])])),key:"0"}:void 0,t.iconRight?{name:"append",fn:s((()=>[p(n,{name:t.iconRight},null,8,["name"])])),key:"1"}:void 0]),1032,["model-value","disabled","type","placeholder","min","max","step"])),[[u,T.value]])])),_:1},8,["href","target","safeMode"])),t.showCopy&&y(o)?w((r(),k(c,{key:0,disabled:!t.value,icon:"",secondary:"",xLarge:"",class:x("start"===t.copyPosition?"-order-1":"order-1")},{default:s((()=>[p(n,{name:"content_copy",onClick:L(C,["stop"])})])),_:1},8,["disabled","class"])),[[u,t.value?`Copy: ${y(g)}`:"Can't copy empty value"]]):S("v-if",!0),p(I,{href:y(v),target:t.openLinkAsNewTab?"_blank":"_self",safeMode:"always"===t.openLinkSafeMode,class:x("start"===t.linkPosition?"-order-1":"order-1")},{default:s((()=>[t.showLink?w((r(),k(c,{key:0,disabled:!t.value,icon:"",secondary:"",xLarge:""},{default:s((()=>[p(n,{name:"open_in_new"})])),_:1},8,["disabled"])),[[u,t.value?`Follow link: ${y(v)}`:"Can't follow empty link"]]):S("v-if",!0)])),_:1},8,["href","target","safeMode","class"])])}}});j(".action-interface .v-input input:disabled {\n /* disable click events on disabled inputs, so that the click event can be handled by the parent div\n \t * For some reason we can't go with a normal :deep() selector in the scoped stye\n */\n pointer-events: none;\n}",{});function W(e){const t=[{text:"Copy to clipboard",value:"copy"},{text:"Default click action",value:"default"}];return e&&t.push({text:"Open link",value:"link"}),t}j(".action-interface[data-v-cf9a016b] {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n}\n.action-interface[data-v-cf9a016b] .dynamic-input-wrapper[data-v-cf9a016b] {\n width: 100%;\n}\n.action-interface[data-v-cf9a016b] > div[data-v-cf9a016b] {\n display: inherit;\n}\n.action-interface[data-v-cf9a016b] > div[data-v-cf9a016b].order-1[data-v-cf9a016b] {\n order: 1;\n}\n.action-interface[data-v-cf9a016b] > div[data-v-cf9a016b].-order-1[data-v-cf9a016b] {\n order: -1;\n}",{});var R=t({id:"field-actions",name:"Action interface",icon:"ads_click",description:"Display content with linking and copy to clipboard options",component:D(F,[["__scopeId","data-v-cf9a016b"],["__file","interface.vue"]]),types:["uuid","string","text","bigInteger","integer","decimal","float"],options:({field:e})=>{var t,a,n;const i=["string","text"].includes(null!=(t=e.type)?t:"unknown"),o=["bigInteger","integer","float","decimal"].includes(null!=(a=e.type)?a:"unknown"),l=[{field:"groupCopySettings",name:"Copy item settings",type:"alias",meta:{field:"groupCopySettings",interface:"group-detail",special:["alias","no-data","group"],options:{start:"closed",headerIcon:"content_copy"}}},{field:"groupLinkSettings",name:"Link item settings",type:"alias",meta:{field:"groupLinkSettings",interface:"group-detail",special:["alias","no-data","group"],options:{start:"closed",headerIcon:"open_in_new"}}},{field:"showCopy",name:"Display copy icon",type:"boolean",meta:{width:"full",interface:"boolean",options:{label:"Display a copy button next to the item"},group:"groupCopySettings"},schema:{default_value:!1}},{field:"copyPosition",name:"Copy icon position",type:"string",meta:{width:"half",interface:"select-radio",options:{choices:[{text:"Start",value:"start"},{text:"End",value:"end"}]},group:"groupCopySettings"},schema:{default_value:"end"}},{field:"copyPrefix",name:"Copy value prefix",type:"string",meta:{width:"half",interface:"select-dropdown",options:{placeholder:"Enter prefix or select variable",choices:[{text:"$project_url",value:"$project_url"},{text:"https://",value:"https://"}],allowOther:!0,allowNone:!0},note:"Copies the field value with the given prefix",group:"groupCopySettings"},schema:{default_value:""}},{field:"showLink",name:"Display link icon",type:"boolean",meta:{width:"full",interface:"boolean",options:{label:"Display a link button next to the item"},group:"groupLinkSettings"},schema:{default_value:!1}},{field:"linkPosition",name:"Link icon position",type:"string",meta:{width:"half",interface:"select-radio",options:{choices:[{text:"Start",value:"start"},{text:"End",value:"end"}]},group:"groupLinkSettings"},schema:{default_value:"end"}},{field:"linkPrefix",name:"Link value prefix",type:"string",meta:{width:"half",interface:"select-dropdown",options:{placeholder:"Enter prefix or select variable",choices:[{text:"$project_url",value:"$project_url"},{text:"Mail-Link (mailto:)",value:"mailto:"},{text:"Phole-Link (tel:)",value:"tel:"},{text:"https://",value:"https://"}],allowOther:!0,allowNone:!0},note:"Links to the field value with the given prefix",group:"groupLinkSettings"},schema:{default_value:""}},{field:"openLinkAsNewTab",name:"Link target",type:"boolean",meta:{width:"full",interface:"select-radio",options:{choices:[{text:"New Tab",value:!0},{text:"Current Tab",value:!1}]},group:"groupLinkSettings"},schema:{default_value:!0}},{field:"openLinkSafeMode",name:"Warn before following external links",type:"string",meta:{width:"full",interface:"select-radio",options:{choices:[{text:"Never",value:"never"},{text:"Always",value:"always"}]},group:"groupLinkSettings"},schema:{default_value:"never"}}],r=[{field:"clickAction",name:"Click Action (when clicking on the value)",type:"string",meta:{width:"full",interface:"select-dropdown",options:{choices:W(i)}},schema:{default_value:"default"}}];return[{field:"placeholder",name:"$t:placeholder",meta:{width:"half",interface:"system-input-translated-string",options:{placeholder:"$t:enter_a_placeholder"}}},{field:"iconLeft",name:"$t:icon_left",type:"string",meta:{width:"half",interface:"select-icon"}},{field:"iconRight",name:"$t:icon_right",type:"string",meta:{width:"half",interface:"select-icon"}},...o?[{field:"min",name:"$t:interfaces.input.minimum_value",type:"integer",meta:{width:"half",interface:"input"}},{field:"max",name:"$t:interfaces.input.maximum_value",type:"integer",meta:{width:"half",interface:"input"}},{field:"step",name:"$t:interfaces.input.step_interval",type:"integer",meta:{width:"half",interface:"input"},schema:{default_value:1}}]:[],...(null==(n=e.meta)?void 0:n.readonly)?r:[],...l]}});const q={key:1,class:"action-display"},U={key:0,class:"ml-2"},z={key:0,class:"ml-2"};var H=i({__name:"display",props:{value:{type:String,default:null},type:{type:String,required:!0},interfaceOptions:{type:Object,default:{}},hideFieldValue:{type:Boolean,default:!1},clickAction:{type:String,default:"default"},showCopy:{type:Boolean,default:!1},copyPosition:{type:String,default:"end"},copyPrefix:{type:String,default:""},copyButtonLabel:{type:String,default:""},showLink:{type:Boolean,default:!1},linkPosition:{type:String,default:"end"},linkPrefix:{type:String,default:""},linkButtonLabel:{type:String,default:""},openLinkAsNewTab:{type:Boolean,default:!0},openLinkSafeMode:{type:String,default:"never"}},setup(t){const a=t,{isCopySupported:i,copyToClipboard:o}=A(),{useNotificationsStore:c}=e(),u=c(),{computedLink:g,computedCopyValue:h}=P(a);async function _(){await o(h.value,u)}function C(e){"copy"===a.clickAction&&(e.stopPropagation(),_())}const N=n((()=>"default"!==a.clickAction&&(!("copy"!==a.clickAction||!i)||"link"===a.clickAction))),T=n((()=>"copy"===a.clickAction&&i?"Copy value":"link"===a.clickAction?"Open link":void 0));return(e,a)=>{const n=l("value-null"),o=l("v-icon"),c=m("tooltip");return t.value?(r(),d("span",q,[S(" NOTE: @click.stop to prevent the opening of item page "),t.hideFieldValue?S("v-if",!0):w((r(),k(b("link"===t.clickAction?I:"span"),{key:0,href:y(g),target:t.openLinkAsNewTab?"_blank":"_self",safeMode:"always"===t.openLinkSafeMode,onClick:a[0]||(a[0]=L((()=>{}),["stop"]))},{default:s((()=>[f("span",{class:x(N.value?"action-background":""),onClick:C},v(t.value),3)])),_:1},8,["href","target","safeMode"])),[[c,T.value,void 0,{left:!0}]]),t.showCopy&&y(i)?w((r(),k(b(t.copyButtonLabel?"v-button":"span"),{key:1,outlined:"",xSmall:"",class:x("start"===t.copyPosition?"-order-1":"order-1"),onClick:L(_,["stop"])},{default:s((()=>[p(o,{name:"content_copy",color:t.copyButtonLabel?"primary":""},null,8,["color"]),t.copyButtonLabel?(r(),d("span",U,v(t.copyButtonLabel),1)):S("v-if",!0)])),_:1},8,["class"])),[[c,`Copy: ${y(h)}`]]):S("v-if",!0),S(" NOTE: @click.stop to prevent the opening of item page "),t.showLink?(r(),k(I,{key:2,href:y(g),target:t.openLinkAsNewTab?"_blank":"_self",safeMode:"always"===t.openLinkSafeMode,class:x("start"===t.linkPosition?"-order-1":"order-1"),onClick:a[1]||(a[1]=L((()=>{}),["stop"]))},{default:s((()=>[w((r(),k(b(t.linkButtonLabel?"v-button":"div"),{outlined:"",xSmall:""},{default:s((()=>[p(o,{name:"open_in_new",color:t.linkButtonLabel?"primary":""},null,8,["color"]),t.linkButtonLabel?(r(),d("span",z,v(t.linkButtonLabel),1)):S("v-if",!0)])),_:1})),[[c,`Follow link: ${y(g)}`]])])),_:1},8,["href","target","safeMode","class"])):S("v-if",!0)])):(r(),k(n,{key:0}))}}});j(".header-bar .title-container .action-display .action-background {\n line-height: 2rem;\n padding-top: 0;\n padding-bottom: 0;\n}\n\n.render-template:has(.action-display) {\n display: flex;\n align-items: center;\n}",{});j(".action-display[data-v-d23fd0fc] {\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n}\n.action-display[data-v-d23fd0fc] span[data-v-d23fd0fc],\n.action-display[data-v-d23fd0fc] a[data-v-d23fd0fc],\n.action-display[data-v-d23fd0fc] div[data-v-d23fd0fc] {\n display: inherit;\n}\n.action-display[data-v-d23fd0fc] span[data-v-d23fd0fc].order-1[data-v-d23fd0fc],\n.action-display[data-v-d23fd0fc] a[data-v-d23fd0fc].order-1[data-v-d23fd0fc],\n.action-display[data-v-d23fd0fc] div[data-v-d23fd0fc].order-1[data-v-d23fd0fc] {\n order: 1;\n}\n.action-display[data-v-d23fd0fc] span[data-v-d23fd0fc].-order-1[data-v-d23fd0fc],\n.action-display[data-v-d23fd0fc] a[data-v-d23fd0fc].-order-1[data-v-d23fd0fc],\n.action-display[data-v-d23fd0fc] div[data-v-d23fd0fc].-order-1[data-v-d23fd0fc] {\n order: -1;\n}\n.action-display[data-v-d23fd0fc] .ml-2[data-v-d23fd0fc] {\n margin-left: 0.5rem;\n}\n.action-display[data-v-d23fd0fc] [data-v-d23fd0fc] .v-icon {\n --v-icon-size: 18px;\n --v-icon-color: var(--theme--foreground-subdued);\n}\n.action-display[data-v-d23fd0fc] [data-v-d23fd0fc] .v-icon[data-v-d23fd0fc]:hover {\n --v-icon-color: var(--theme--primary);\n}\n.action-display[data-v-d23fd0fc] .action-background[data-v-d23fd0fc] {\n background-color: var(--theme--primary-background);\n color: var(--theme--primary);\n padding: 0.5rem 1rem;\n border-radius: 5rem; /* arbitrary value for a nice smooth rounding */\n}\n.action-display[data-v-d23fd0fc] .action-background[data-v-d23fd0fc][data-v-d23fd0fc]:hover {\n background-color: color-mix(in srgb, var(--theme--background), var(--theme--primary) 25%); /* like --theme--primary-background but with 25% */\n}",{});const Y=[R],G=[a({id:"field-actions",name:"Action display",icon:"ads_click",description:"Display content with linking and copy to clipboard options",component:D(H,[["__scopeId","data-v-d23fd0fc"],["__file","display.vue"]]),types:["uuid","string","text","bigInteger","integer","decimal","float"],options:({field:e})=>{var t;const a=[{field:"groupCopySettings",name:"Copy item settings",type:"alias",meta:{field:"groupCopySettings",interface:"group-detail",special:["alias","no-data","group"],options:{start:"closed",headerIcon:"content_copy"}}},{field:"groupLinkSettings",name:"Link item settings",type:"alias",meta:{field:"groupLinkSettings",interface:"group-detail",special:["alias","no-data","group"],options:{start:"closed",headerIcon:"open_in_new"}}},{field:"showCopy",name:"Display copy icon",type:"boolean",meta:{width:"full",interface:"boolean",options:{label:"Display a copy button next to the item"},group:"groupCopySettings"},schema:{default_value:!1}},{field:"copyPosition",name:"Copy icon position",type:"string",meta:{width:"half",interface:"select-radio",options:{choices:[{text:"Start",value:"start"},{text:"End",value:"end"}]},group:"groupCopySettings"},schema:{default_value:"end"}},{field:"copyPrefix",name:"Copy value prefix",type:"string",meta:{width:"half",interface:"select-dropdown",options:{placeholder:"Enter prefix or select variable",choices:[{text:"$project_url",value:"$project_url"},{text:"https://",value:"https://"}],allowOther:!0,allowNone:!0},note:"Copies the field value with the given prefix",group:"groupCopySettings"},schema:{default_value:""}},{field:"showLink",name:"Display link icon",type:"boolean",meta:{width:"full",interface:"boolean",options:{label:"Display a link button next to the item"},group:"groupLinkSettings"},schema:{default_value:!1}},{field:"linkPosition",name:"Link icon position",type:"string",meta:{width:"half",interface:"select-radio",options:{choices:[{text:"Start",value:"start"},{text:"End",value:"end"}]},group:"groupLinkSettings"},schema:{default_value:"end"}},{field:"linkPrefix",name:"Link value prefix",type:"string",meta:{width:"half",interface:"select-dropdown",options:{placeholder:"Enter prefix or select variable",choices:[{text:"$project_url",value:"$project_url"},{text:"Mail-Link (mailto:)",value:"mailto:"},{text:"Phole-Link (tel:)",value:"tel:"},{text:"https://",value:"https://"}],allowOther:!0,allowNone:!0},note:"Links to the field value with the given prefix",group:"groupLinkSettings"},schema:{default_value:""}},{field:"openLinkAsNewTab",name:"Link target",type:"boolean",meta:{width:"full",interface:"select-radio",options:{choices:[{text:"New Tab",value:!0},{text:"Current Tab",value:!1}]},group:"groupLinkSettings"},schema:{default_value:!0}},{field:"openLinkSafeMode",name:"Warn before following external links",type:"string",meta:{width:"full",interface:"select-radio",options:{choices:[{text:"Never",value:"never"},{text:"Always",value:"always"}]},group:"groupLinkSettings"},schema:{default_value:"never"}}];return[...[{field:"hideFieldValue",name:"Hide field value",type:"boolean",meta:{width:"full",interface:"v-checkbox",note:"When enabled the field value will be hidden. Can be used to only show the actions"},schema:{default_value:!1}},{field:"clickAction",name:"Click Action (when clicking on the value)",type:"string",meta:{width:"full",interface:"select-dropdown",options:{choices:W(["string","text"].includes(null!=(t=e.type)?t:"unknown"))}},schema:{default_value:"default"}}],...a,{field:"copyButtonLabel",name:"Copy button label",type:"string",meta:{width:"half",interface:"system-input-translated-string",group:"groupCopySettings",note:"When used the copy icon will be shown as button with the given label"},schema:{default_value:""}},{field:"linkButtonLabel",name:"Link button label",type:"string",meta:{width:"half",interface:"system-input-translated-string",group:"groupLinkSettings",note:"When used the link icon will be shown as button with the given label"},schema:{default_value:""}}]}})],J=[],K=[],Q=[],X=[],Z=[];export{G as displays,Y as interfaces,J as layouts,K as modules,Z as operations,Q as panels,X as themes};