directus-extension-field-actions
Version:
Add advanced link & copy functionalities to your directus fields. Supports interfaces as well as displays.
2 lines (1 loc) • 19.2 kB
JavaScript
import{useStores as e,defineInterface as t,defineDisplay as n}from"@directus/extensions-sdk";import{computed as o,defineComponent as i,ref as a,resolveComponent as l,createElementBlock as r,openBlock as p,renderSlot as s,createVNode as d,withCtx as c,createTextVNode as u,createElementVNode as f,toDisplayString as y,unref as m,resolveDirective as g,createBlock as v,withDirectives as h,createCommentVNode as k,resolveDynamicComponent as b,createSlots as w,normalizeClass as _,withModifiers as C}from"vue";import{useI18n as L}from"vue-i18n";function x(){const{t:e}=L();return{isCopySupported:o(()=>!!navigator?.clipboard?.writeText),isPasteSupported:o(()=>!!navigator?.clipboard?.readText),copyToClipboard:async function(t,n,o){try{return await(navigator?.clipboard?.writeText(t)),n.add({title:o?.success??e("copy_raw_value_success")}),!0}catch(t){return n.add({type:"error",title:o?.fail??e("copy_raw_value_fail")}),!1}},pasteFromClipboard:async function(t,n){try{const o=await(navigator?.clipboard?.readText());return t.add({title:n?.success??e("paste_raw_value_success")}),o}catch(o){return t.add({type:"error",title:n?.fail??e("paste_raw_value_fail")}),null}}}}function T(t){return o(()=>{if("$project_url"===t){const t=e().useSettingsStore();return t.settings?.project_url||""}return t||""})}function S(e){return{computedLink:o(()=>T(e.linkPrefix).value+e.value),computedCopyValue:o(()=>T(e.copyPrefix).value+e.value)}}const A={class:"defa-link-preview"};var B=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:n}=L(),o=a(!1);function i(e){const n=new URL(t.href,window.location.origin).origin!==window.location.origin;t.safeMode&&n?o.value=!0:window.open(t.href,t.target,"noopener, noreferrer")}return(a,g)=>{const v=l("v-card-title"),h=l("v-card-text"),k=l("v-button"),b=l("v-card-actions"),w=l("v-card"),_=l("v-dialog");return p(),r("div",{class:"defa-link-wrapper",onClick:i},[s(a.$slots,"default",{},void 0,!0),d(_,{"model-value":o.value,onEsc:g[2]||(g[2]=e=>o.value=!1),"onUpdate:modelValue":g[3]||(g[3]=e=>o.value=!1)},{default:c(()=>[d(w,null,{default:c(()=>[d(v,null,{default:c(()=>[...g[4]||(g[4]=[u("Are you sure you want to open this link?",-1)])]),_:1}),d(h,null,{default:c(()=>[f("div",A,[f("code",null,y(t.href),1)]),g[5]||(g[5]=f("em",null,"Note: You can permanently disable this warning in the display / interface settings",-1))]),_:1}),d(b,null,{default:c(()=>[d(k,{secondary:"",onClick:g[0]||(g[0]=e=>o.value=!1)},{default:c(()=>[u(y(m(n)("cancel")),1)]),_:1}),d(k,{href:e.href,target:e.target,onClick:g[1]||(g[1]=e=>o.value=!1)},{default:c(()=>[...g[6]||(g[6]=[u(" Open link ",-1)])]),_:1},8,["href","target"])]),_:1})]),_:1})]),_:1},8,["model-value"])])}}}),N=[],P=[];function M(e,t){if(e&&"undefined"!=typeof document){var n,o=!0===t.prepend?"prepend":"append",i=!0===t.singleTag,a="string"==typeof t.container?document.querySelector(t.container):document.getElementsByTagName("head")[0];if(i){var l=N.indexOf(a);-1===l&&(l=N.push(a)-1,P[l]={}),n=P[l]&&P[l][o]?P[l][o]:P[l][o]=r()}else n=r();65279===e.charCodeAt(0)&&(e=e.substring(1)),n.styleSheet?n.styleSheet.cssText+=e:n.appendChild(document.createTextNode(e))}function r(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),t.attributes)for(var n=Object.keys(t.attributes),i=0;i<n.length;i++)e.setAttribute(n[i],t.attributes[n[i]]);var l="prepend"===o?"afterbegin":"beforeend";return a.insertAdjacentElement(l,e),e}}M(".defa-link-preview[data-v-73fe7b9f] {\n background-color: var(--theme--background-normal);\n padding: 1rem;\n}\n\nem[data-v-73fe7b9f] {\n display: block;\n font-size: 0.875rem;\n margin-top: 0.5rem;\n}",{});var $=(e,t)=>{const n=e.__vccOpts||e;for(const[e,o]of t)n[e]=o;return n},O=$(B,[["__scopeId","data-v-73fe7b9f"]]);function E(e){const{isCopySupported:t}=x(),n=o(()=>!1===t.value?"Copying not supported":e.useCustomCopyTooltip?e.customCopyTooltip:"Copy value"),i=o(()=>e.useCustomLinkTooltip?e.customLinkTooltip:"Open link"),a=o(()=>"copy"===e.clickAction?n.value:"link"===e.clickAction?i.value:null);return{copyTooltip:n,linkTooltip:i,actionTooltip:a}}const j={class:"action-interface"};var I=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:""},useCustomCopyTooltip:{type:Boolean,default:!1},customCopyTooltip:{type:String,default:null},showLink:{type:Boolean,default:!1},linkPosition:{type:String,default:"end"},linkPrefix:{type:String,default:""},useCustomLinkTooltip:{type:Boolean,default:!1},customLinkTooltip:{type:String,default:null},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:n}){const i=t,{isCopySupported:a,copyToClipboard:s}=x(),{useNotificationsStore:u}=e(),f=u(),{computedLink:y,computedCopyValue:L}=S(i),{copyTooltip:T,linkTooltip:A,actionTooltip:B}=E({clickAction:i.clickAction,useCustomCopyTooltip:i.useCustomCopyTooltip,customCopyTooltip:i.customCopyTooltip,useCustomLinkTooltip:i.useCustomLinkTooltip,customLinkTooltip:i.customLinkTooltip}),N=o(()=>["bigInteger","integer","float","decimal"].includes(i.type)?"number":"text");async function P(){await s(`${L.value}`,f)}function M(e){"copy"===i.clickAction&&i.disabled&&i.value&&(e.stopPropagation(),P())}return(e,n)=>{const o=l("v-icon"),i=l("v-input"),s=l("v-button"),u=g("tooltip");return p(),r("div",j,[(p(),v(b("link"===t.clickAction?O:"div"),{href:m(y),target:t.openLinkAsNewTab?"_blank":"_self",safeMode:"always"===t.openLinkSafeMode,class:"dynamic-input-wrapper"},{default:c(()=>[h((p(),v(i,{"model-value":t.value,disabled:t.disabled,type:N.value,placeholder:t.placeholder,min:t.min,max:t.max,step:t.step,"onUpdate:modelValue":n[0]||(n[0]=t=>e.$emit("input",t)),onClick:M},w({_:2},[t.iconLeft?{name:"prepend",fn:c(()=>[d(o,{name:t.iconLeft},null,8,["name"])]),key:"0"}:void 0,t.iconRight?{name:"append",fn:c(()=>[d(o,{name:t.iconRight},null,8,["name"])]),key:"1"}:void 0]),1032,["model-value","disabled","type","placeholder","min","max","step"])),[[u,m(B)]])]),_:1},8,["href","target","safeMode"])),t.showCopy&&m(a)?h((p(),v(s,{key:0,disabled:!t.value,icon:"",secondary:"",xLarge:"",class:_("start"===t.copyPosition?"-order-1":"order-1")},{default:c(()=>[d(o,{name:"content_copy",onClick:C(P,["stop"])})]),_:1},8,["disabled","class"])),[[u,m(T)]]):k("v-if",!0),d(O,{href:m(y),target:t.openLinkAsNewTab?"_blank":"_self",safeMode:"always"===t.openLinkSafeMode,class:_("start"===t.linkPosition?"-order-1":"order-1")},{default:c(()=>[t.showLink?h((p(),v(s,{key:0,disabled:!t.value,icon:"",secondary:"",xLarge:""},{default:c(()=>[d(o,{name:"open_in_new"})]),_:1},8,["disabled"])),[[u,m(A)]]):k("v-if",!0)]),_:1},8,["href","target","safeMode","class"])])}}});M(".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 V(e,t){return[{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:"useCustomCopyTooltip",name:"Custom Tooltip",type:"boolean",meta:{width:"half",interface:"boolean",options:{label:"Enable"},note:"Use a custom tooltip for the copy button",group:"groupCopySettings"},schema:{default_value:!1}},{field:"customCopyTooltip",name:"Tooltip content",type:"string",meta:{width:"half",interface:"system-input-translated-string",group:"groupCopySettings",hidden:F(e,t,"useCustomCopyTooltip",!0)},schema:{default_value:"Copy 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:"useCustomLinkTooltip",name:"Custom Tooltip",type:"boolean",meta:{width:"half",interface:"boolean",options:{label:"Enable"},note:"Use a custom tooltip for the link button",group:"groupLinkSettings"},schema:{default_value:!1}},{field:"customLinkTooltip",name:"Tooltip content",type:"string",meta:{width:"half",interface:"system-input-translated-string",group:"groupLinkSettings",hidden:F(e,t,"useCustomLinkTooltip",!0)},schema:{default_value:"Open link"}},{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"}}]}function D(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}function F(e,t,n,o){const i="display"===t?e.meta?.display_options:e.meta?.options;return i?.[n]!==o}M(".action-interface[data-v-8da14a1e] {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n}\n.action-interface .dynamic-input-wrapper[data-v-8da14a1e] {\n width: 100%;\n}\n.action-interface > div[data-v-8da14a1e] {\n display: inherit;\n}\n.action-interface > div.order-1[data-v-8da14a1e] {\n order: 1;\n}\n.action-interface > div.-order-1[data-v-8da14a1e] {\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:$(I,[["__scopeId","data-v-8da14a1e"]]),types:["uuid","string","text","bigInteger","integer","decimal","float"],options:({field:e})=>{const t=["string","text"].includes(e.type??"unknown"),n=["bigInteger","integer","float","decimal"].includes(e.type??"unknown"),o=V(e,"interface"),i=[{field:"clickAction",name:"Click Action (when clicking on the value)",type:"string",meta:{width:"full",interface:"select-dropdown",options:{choices:D(t)}},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"}},...n?[{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}}]:[],...e.meta?.readonly?i:[],...o]}});const U={key:1,class:"action-display"},W={key:0,class:"ml-2"},q={key:0,class:"ml-2"};var z=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:""},useCustomCopyTooltip:{type:Boolean,default:!1},customCopyTooltip:{type:String,default:null},copyButtonLabel:{type:String,default:""},showLink:{type:Boolean,default:!1},linkPosition:{type:String,default:"end"},linkPrefix:{type:String,default:""},useCustomLinkTooltip:{type:Boolean,default:!1},customLinkTooltip:{type:String,default:null},linkButtonLabel:{type:String,default:""},openLinkAsNewTab:{type:Boolean,default:!0},openLinkSafeMode:{type:String,default:"never"}},setup(t){const n=t,{isCopySupported:i,copyToClipboard:a}=x(),{useNotificationsStore:s}=e(),u=s(),{computedLink:w,computedCopyValue:L}=S(n),{copyTooltip:T,linkTooltip:A,actionTooltip:B}=E({clickAction:n.clickAction,useCustomCopyTooltip:n.useCustomCopyTooltip,customCopyTooltip:n.customCopyTooltip,useCustomLinkTooltip:n.useCustomLinkTooltip,customLinkTooltip:n.customLinkTooltip});async function N(){await a(L.value,u)}function P(e){"copy"===n.clickAction&&(e.stopPropagation(),N())}const M=o(()=>"default"!==n.clickAction&&(!("copy"!==n.clickAction||!i)||"link"===n.clickAction));return(e,n)=>{const o=l("value-null"),a=l("v-icon"),s=g("tooltip");return t.value?(p(),r("span",U,[k(" NOTE: @click.stop to prevent the opening of item page "),t.hideFieldValue?k("v-if",!0):h((p(),v(b("link"===t.clickAction?O:"span"),{key:0,href:m(w),target:t.openLinkAsNewTab?"_blank":"_self",safeMode:"always"===t.openLinkSafeMode,onClick:n[0]||(n[0]=C(()=>{},["stop"]))},{default:c(()=>[f("span",{class:_(M.value?"action-background":""),onClick:P},y(t.value),3)]),_:1},8,["href","target","safeMode"])),[[s,m(B),void 0,{left:!0}]]),t.showCopy&&m(i)?h((p(),v(b(t.copyButtonLabel?"v-button":"span"),{key:1,outlined:"",xSmall:"",class:_("start"===t.copyPosition?"-order-1":"order-1"),onClick:C(N,["stop"])},{default:c(()=>[d(a,{name:"content_copy",color:t.copyButtonLabel?"primary":""},null,8,["color"]),t.copyButtonLabel?(p(),r("span",W,y(t.copyButtonLabel),1)):k("v-if",!0)]),_:1},8,["class"])),[[s,m(T)]]):k("v-if",!0),k(" NOTE: @click.stop to prevent the opening of item page "),t.showLink?(p(),v(O,{key:2,href:m(w),target:t.openLinkAsNewTab?"_blank":"_self",safeMode:"always"===t.openLinkSafeMode,class:_("start"===t.linkPosition?"-order-1":"order-1"),onClick:n[1]||(n[1]=C(()=>{},["stop"]))},{default:c(()=>[h((p(),v(b(t.linkButtonLabel?"v-button":"div"),{outlined:"",xSmall:""},{default:c(()=>[d(a,{name:"open_in_new",color:t.linkButtonLabel?"primary":""},null,8,["color"]),t.linkButtonLabel?(p(),r("span",q,y(t.linkButtonLabel),1)):k("v-if",!0)]),_:1})),[[s,m(A)]])]),_:1},8,["href","target","safeMode","class"])):k("v-if",!0)])):(p(),v(o,{key:0}))}}});M(".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}",{});M(".action-display[data-v-562256de] {\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n}\n.action-display span[data-v-562256de],\n.action-display a[data-v-562256de],\n.action-display div[data-v-562256de] {\n display: inherit;\n}\n.action-display span.order-1[data-v-562256de],\n.action-display a.order-1[data-v-562256de],\n.action-display div.order-1[data-v-562256de] {\n order: 1;\n}\n.action-display span.-order-1[data-v-562256de],\n.action-display a.-order-1[data-v-562256de],\n.action-display div.-order-1[data-v-562256de] {\n order: -1;\n}\n.action-display .ml-2[data-v-562256de] {\n margin-left: 0.5rem;\n}\n.action-display [data-v-562256de] .v-icon {\n --v-icon-size: 18px;\n --v-icon-color: var(--theme--foreground-subdued);\n}\n.action-display [data-v-562256de] .v-icon:hover {\n --v-icon-color: var(--theme--primary);\n}\n.action-display .action-background[data-v-562256de] {\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 .action-background[data-v-562256de]:hover {\n background-color: color-mix(in srgb, var(--theme--background), var(--theme--primary) 25%); /* like --theme--primary-background but with 25% */\n}",{});const H=[R],Y=[n({id:"field-actions",name:"Action display",icon:"ads_click",description:"Display content with linking and copy to clipboard options",component:$(z,[["__scopeId","data-v-562256de"]]),types:["uuid","string","text","bigInteger","integer","decimal","float"],options:({field:e})=>{const t=["string","text"].includes(e.type??"unknown"),n=V(e,"display");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:D(t)}},schema:{default_value:"default"}}],...n,{field:"copyButtonLabel",name:"Copy button label",type:"string",meta:{width:"full",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:"full",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:""}}]}})],G=[],J=[],K=[],Q=[],X=[];export{Y as displays,H as interfaces,G as layouts,J as modules,X as operations,K as panels,Q as themes};