UNPKG

@directus-labs/tour-group-interface

Version:

Create an interactive tour for your form.

2 lines (1 loc) • 34.8 kB
1
2
import{defineInterface as e,useStores as t}from"@directus/extensions-sdk";import{defineComponent as o,onMounted as r,computed as n,ref as i,onUnmounted as a,resolveComponent as s,openBlock as l,createElementBlock as d,unref as p,createBlock as v,Teleport as c,withCtx as u,createVNode as m,createElementVNode as f,toDisplayString as h,createCommentVNode as g}from"vue";import{useI18n as w}from"vue-i18n";let b={};function y(e={}){b={animate:!0,allowClose:!0,overlayOpacity:.7,smoothScroll:!1,disableActiveInteraction:!1,showProgress:!1,stagePadding:10,stageRadius:5,popoverOffset:10,showButtons:["next","previous","close"],disableButtons:[],overlayColor:"#000",...e}}function x(e){return e?b[e]:b}function k(e,t,o,r){return(e/=r/2)<1?o/2*e*e+t:-o/2*(--e*(e-2)-1)+t}function C(e){const t='a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])';return e.flatMap((e=>{const o=e.matches(t),r=Array.from(e.querySelectorAll(t));return[...o?[e]:[],...r]})).filter((e=>"none"!==getComputedStyle(e).pointerEvents&&function(e){return!!(e.offsetWidth||e.offsetHeight||e.getClientRects().length)}(e)))}function _(e){if(!e||function(e){const t=e.getBoundingClientRect();return t.top>=0&&t.left>=0&&t.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&t.right<=(window.innerWidth||document.documentElement.clientWidth)}(e))return;const t=x("smoothScroll");e.scrollIntoView({behavior:!t||E(e)?"auto":"smooth",inline:"center",block:"center"})}function E(e){if(!e||!e.parentElement)return;const t=e.parentElement;return t.scrollHeight>t.clientHeight}let $={};function B(e,t){$[e]=t}function L(e){return e?$[e]:$}function P(){$={}}let A={};function S(e,t){A[e]=t}function T(e){var t;null==(t=A[e])||t.call(A)}function H(e){if(!e)return;const t=e.getBoundingClientRect(),o={x:t.x,y:t.y,width:t.width,height:t.height};B("__activeStagePosition",o),D(o)}function M(e){const t=function(e){const t=window.innerWidth,o=window.innerHeight,r=document.createElementNS("http://www.w3.org/2000/svg","svg");r.classList.add("driver-overlay","driver-overlay-animated"),r.setAttribute("viewBox",`0 0 ${t} ${o}`),r.setAttribute("xmlSpace","preserve"),r.setAttribute("xmlnsXlink","http://www.w3.org/1999/xlink"),r.setAttribute("version","1.1"),r.setAttribute("preserveAspectRatio","xMinYMin slice"),r.style.fillRule="evenodd",r.style.clipRule="evenodd",r.style.strokeLinejoin="round",r.style.strokeMiterlimit="2",r.style.zIndex="10000",r.style.position="fixed",r.style.top="0",r.style.left="0",r.style.width="100%",r.style.height="100%";const n=document.createElementNS("http://www.w3.org/2000/svg","path");return n.setAttribute("d",I(e)),n.style.fill=x("overlayColor")||"rgb(0,0,0)",n.style.opacity=`${x("overlayOpacity")}`,n.style.pointerEvents="auto",n.style.cursor="auto",r.appendChild(n),r}(e);document.body.appendChild(t),O(t,(e=>{"path"===e.target.tagName&&T("overlayClick")})),B("__overlaySvg",t)}function D(e){const t=L("__overlaySvg");if(!t)return void M(e);const o=t.firstElementChild;if("path"!==(null==o?void 0:o.tagName))throw new Error("no path element found in stage svg");o.setAttribute("d",I(e))}function I(e){const t=window.innerWidth,o=window.innerHeight,r=x("stagePadding")||0,n=x("stageRadius")||0,i=e.width+2*r,a=e.height+2*r,s=Math.min(n,i/2,a/2),l=Math.floor(Math.max(s,0)),d=i-2*l,p=a-2*l;return`M${t},0L0,0L0,${o}L${t},${o}L${t},0Z\n M${e.x-r+l},${e.y-r} h${d} a${l},${l} 0 0 1 ${l},${l} v${p} a${l},${l} 0 0 1 -${l},${l} h-${d} a${l},${l} 0 0 1 -${l},-${l} v-${p} a${l},${l} 0 0 1 ${l},-${l} z`}function N(e){const{element:t}=e;let o="string"==typeof t?document.querySelector(t):t;o||(o=function(){const e=document.getElementById("driver-dummy-element");if(e)return e;let t=document.createElement("div");return t.id="driver-dummy-element",t.style.width="0",t.style.height="0",t.style.pointerEvents="none",t.style.opacity="0",t.style.position="fixed",t.style.top="50%",t.style.left="50%",document.body.appendChild(t),t}()),function(e,t){const o=Date.now(),r=L("__activeStep"),n=L("__activeElement")||e,i=!n||n===e,a="driver-dummy-element"===e.id,s="driver-dummy-element"===n.id,l=x("animate"),d=t.onHighlightStarted||x("onHighlightStarted"),p=(null==t?void 0:t.onHighlighted)||x("onHighlighted"),v=(null==r?void 0:r.onDeselected)||x("onDeselected"),c=x(),u=L();!i&&v&&v(s?void 0:n,r,{config:c,state:u}),d&&d(a?void 0:e,t,{config:c,state:u});const m=!i&&l;let f=!1;(function(){const e=L("popover");e&&(e.wrapper.style.display="none")})(),B("previousStep",r),B("previousElement",n),B("activeStep",t),B("activeElement",e);const h=()=>{if(L("__transitionCallback")!==h)return;const i=Date.now()-o,s=400-i<=200;t.popover&&s&&!f&&m&&(j(e,t),f=!0),x("animate")&&i<400?function(e,t,o,r){let n=L("__activeStagePosition");const i=n||o.getBoundingClientRect(),a=r.getBoundingClientRect();n={x:k(e,i.x,a.x-i.x,t),y:k(e,i.y,a.y-i.y,t),width:k(e,i.width,a.width-i.width,t),height:k(e,i.height,a.height-i.height,t)},D(n),B("__activeStagePosition",n)}(i,400,n,e):(H(e),p&&p(a?void 0:e,t,{config:x(),state:L()}),B("__transitionCallback",void 0),B("__previousStep",r),B("__previousElement",n),B("__activeStep",t),B("__activeElement",e)),window.requestAnimationFrame(h)};B("__transitionCallback",h),window.requestAnimationFrame(h),_(e),!m&&t.popover&&j(e,t),n.classList.remove("driver-active-element","driver-no-interaction"),n.removeAttribute("aria-haspopup"),n.removeAttribute("aria-expanded"),n.removeAttribute("aria-controls"),x("disableActiveInteraction")&&e.classList.add("driver-no-interaction"),e.classList.add("driver-active-element"),e.setAttribute("aria-haspopup","dialog"),e.setAttribute("aria-expanded","true"),e.setAttribute("aria-controls","driver-popover-content")}(o,e)}function W(){const e=L("__activeElement"),t=L("__activeStep");e&&(H(e),function(){const e=L("__activeStagePosition"),t=L("__overlaySvg");if(!e)return;if(!t)return void console.warn("No stage svg found.");const o=window.innerWidth,r=window.innerHeight;t.setAttribute("viewBox",`0 0 ${o} ${r}`)}(),G(e,t))}function z(){const e=L("__resizeTimeout");e&&window.cancelAnimationFrame(e),B("__resizeTimeout",window.requestAnimationFrame(W))}function R(e){var t;if(!L("isInitialized")||"Tab"!==e.key&&9!==e.keyCode)return;const o=L("__activeElement"),r=null==(t=L("popover"))?void 0:t.wrapper,n=C([...r?[r]:[],...o?[o]:[]]),i=n[0],a=n[n.length-1];if(e.preventDefault(),e.shiftKey){const e=n[n.indexOf(document.activeElement)-1]||a;null==e||e.focus()}else{const e=n[n.indexOf(document.activeElement)+1]||i;null==e||e.focus()}}function F(e){var t;(null==(t=x("allowKeyboardControl"))||t)&&("Escape"===e.key?T("escapePress"):"ArrowRight"===e.key?T("arrowRightPress"):"ArrowLeft"===e.key&&T("arrowLeftPress"))}function O(e,t,o){const r=(t,r)=>{const n=t.target;e.contains(n)&&((!o||o(n))&&(t.preventDefault(),t.stopPropagation(),t.stopImmediatePropagation()),null==r||r(t))};document.addEventListener("pointerdown",r,!0),document.addEventListener("mousedown",r,!0),document.addEventListener("pointerup",r,!0),document.addEventListener("mouseup",r,!0),document.addEventListener("click",(e=>{r(e,t)}),!0)}function j(e,t){var o,r;let n=L("popover");n&&document.body.removeChild(n.wrapper),n=function(){const e=document.createElement("div");e.classList.add("driver-popover");const t=document.createElement("div");t.classList.add("driver-popover-arrow");const o=document.createElement("header");o.id="driver-popover-title",o.classList.add("driver-popover-title"),o.style.display="none",o.innerText="Popover Title";const r=document.createElement("div");r.id="driver-popover-description",r.classList.add("driver-popover-description"),r.style.display="none",r.innerText="Popover description is here";const n=document.createElement("button");n.type="button",n.classList.add("driver-popover-close-btn"),n.setAttribute("aria-label","Close"),n.innerHTML="&times;";const i=document.createElement("footer");i.classList.add("driver-popover-footer");const a=document.createElement("span");a.classList.add("driver-popover-progress-text"),a.innerText="";const s=document.createElement("span");s.classList.add("driver-popover-navigation-btns");const l=document.createElement("button");l.type="button",l.classList.add("driver-popover-prev-btn"),l.innerHTML="&larr; Previous";const d=document.createElement("button");return d.type="button",d.classList.add("driver-popover-next-btn"),d.innerHTML="Next &rarr;",s.appendChild(l),s.appendChild(d),i.appendChild(a),i.appendChild(s),e.appendChild(n),e.appendChild(t),e.appendChild(o),e.appendChild(r),e.appendChild(i),{wrapper:e,arrow:t,title:o,description:r,footer:i,previousButton:l,nextButton:d,closeButton:n,footerButtons:s,progress:a}}(),document.body.appendChild(n.wrapper);const{title:i,description:a,showButtons:s,disableButtons:l,showProgress:d,nextBtnText:p=x("nextBtnText")||"Next &rarr;",prevBtnText:v=x("prevBtnText")||"&larr; Previous",progressText:c=x("progressText")||"{current} of {total}"}=t.popover||{};n.nextButton.innerHTML=p,n.previousButton.innerHTML=v,n.progress.innerHTML=c,i?(n.title.innerHTML=i,n.title.style.display="block"):n.title.style.display="none",a?(n.description.innerHTML=a,n.description.style.display="block"):n.description.style.display="none";const u=s||x("showButtons"),m=d||x("showProgress")||!1,f=(null==u?void 0:u.includes("next"))||(null==u?void 0:u.includes("previous"))||m;n.closeButton.style.display=u.includes("close")?"block":"none",f?(n.footer.style.display="flex",n.progress.style.display=m?"block":"none",n.nextButton.style.display=u.includes("next")?"block":"none",n.previousButton.style.display=u.includes("previous")?"block":"none"):n.footer.style.display="none";const h=l||x("disableButtons")||[];null!=h&&h.includes("next")&&(n.nextButton.disabled=!0,n.nextButton.classList.add("driver-popover-btn-disabled")),null!=h&&h.includes("previous")&&(n.previousButton.disabled=!0,n.previousButton.classList.add("driver-popover-btn-disabled")),null!=h&&h.includes("close")&&(n.closeButton.disabled=!0,n.closeButton.classList.add("driver-popover-btn-disabled"));const g=n.wrapper;g.style.display="block",g.style.left="",g.style.top="",g.style.bottom="",g.style.right="",g.id="driver-popover-content",g.setAttribute("role","dialog"),g.setAttribute("aria-labelledby","driver-popover-title"),g.setAttribute("aria-describedby","driver-popover-description");n.arrow.className="driver-popover-arrow";const w=(null==(o=t.popover)?void 0:o.popoverClass)||x("popoverClass")||"";g.className=`driver-popover ${w}`.trim(),O(n.wrapper,(o=>{var r,n,i;const a=o.target,s=(null==(r=t.popover)?void 0:r.onNextClick)||x("onNextClick"),l=(null==(n=t.popover)?void 0:n.onPrevClick)||x("onPrevClick"),d=(null==(i=t.popover)?void 0:i.onCloseClick)||x("onCloseClick");return a.classList.contains("driver-popover-next-btn")?s?s(e,t,{config:x(),state:L()}):T("nextClick"):a.classList.contains("driver-popover-prev-btn")?l?l(e,t,{config:x(),state:L()}):T("prevClick"):a.classList.contains("driver-popover-close-btn")?d?d(e,t,{config:x(),state:L()}):T("closeClick"):void 0}),(e=>!(null!=n&&n.description.contains(e))&&!(null!=n&&n.title.contains(e))&&"string"==typeof e.className&&e.className.includes("driver-popover"))),B("popover",n);const b=(null==(r=t.popover)?void 0:r.onPopoverRender)||x("onPopoverRender");b&&b(n,{config:x(),state:L()}),G(e,t),_(g);const y=C([g,...e.classList.contains("driver-dummy-element")?[]:[e]]);y.length>0&&y[0].focus()}function q(){const e=L("popover");if(null==e||!e.wrapper)return;const t=e.wrapper.getBoundingClientRect(),o=x("stagePadding")||0,r=x("popoverOffset")||0;return{width:t.width+o+r,height:t.height+o+r,realWidth:t.width,realHeight:t.height}}function V(e,t){const{elementDimensions:o,popoverDimensions:r,popoverPadding:n,popoverArrowDimensions:i}=t;return"start"===e?Math.max(Math.min(o.top-n,window.innerHeight-r.realHeight-i.width),i.width):"end"===e?Math.max(Math.min(o.top-(null==r?void 0:r.realHeight)+o.height+n,window.innerHeight-(null==r?void 0:r.realHeight)-i.width),i.width):"center"===e?Math.max(Math.min(o.top+o.height/2-(null==r?void 0:r.realHeight)/2,window.innerHeight-(null==r?void 0:r.realHeight)-i.width),i.width):0}function K(e,t){const{elementDimensions:o,popoverDimensions:r,popoverPadding:n,popoverArrowDimensions:i}=t;return"start"===e?Math.max(Math.min(o.left-n,window.innerWidth-r.realWidth-i.width),i.width):"end"===e?Math.max(Math.min(o.left-(null==r?void 0:r.realWidth)+o.width+n,window.innerWidth-(null==r?void 0:r.realWidth)-i.width),i.width):"center"===e?Math.max(Math.min(o.left+o.width/2-(null==r?void 0:r.realWidth)/2,window.innerWidth-(null==r?void 0:r.realWidth)-i.width),i.width):0}function G(e,t){const o=L("popover");if(!o)return;const{align:r="start",side:n="left"}=(null==t?void 0:t.popover)||{},i=r,a="driver-dummy-element"===e.id?"over":n,s=x("stagePadding")||0,l=q(),d=o.arrow.getBoundingClientRect(),p=e.getBoundingClientRect(),v=p.top-l.height;let c=v>=0;const u=window.innerHeight-(p.bottom+l.height);let m=u>=0;const f=p.left-l.width;let h=f>=0;const g=window.innerWidth-(p.right+l.width);let w=g>=0;const b=!(c||m||h||w);let y=a;if("top"===a&&c?w=h=m=!1:"bottom"===a&&m?w=h=c=!1:"left"===a&&h?w=c=m=!1:"right"===a&&w&&(h=c=m=!1),"over"===a){const e=window.innerWidth/2-l.realWidth/2,t=window.innerHeight/2-l.realHeight/2;o.wrapper.style.left=`${e}px`,o.wrapper.style.right="auto",o.wrapper.style.top=`${t}px`,o.wrapper.style.bottom="auto"}else if(b){const e=window.innerWidth/2-(null==l?void 0:l.realWidth)/2,t=10;o.wrapper.style.left=`${e}px`,o.wrapper.style.right="auto",o.wrapper.style.bottom=`${t}px`,o.wrapper.style.top="auto"}else if(h){const e=Math.min(f,window.innerWidth-(null==l?void 0:l.realWidth)-d.width),t=V(i,{elementDimensions:p,popoverDimensions:l,popoverPadding:s,popoverArrowDimensions:d});o.wrapper.style.left=`${e}px`,o.wrapper.style.top=`${t}px`,o.wrapper.style.bottom="auto",o.wrapper.style.right="auto",y="left"}else if(w){const e=Math.min(g,window.innerWidth-(null==l?void 0:l.realWidth)-d.width),t=V(i,{elementDimensions:p,popoverDimensions:l,popoverPadding:s,popoverArrowDimensions:d});o.wrapper.style.right=`${e}px`,o.wrapper.style.top=`${t}px`,o.wrapper.style.bottom="auto",o.wrapper.style.left="auto",y="right"}else if(c){const e=Math.min(v,window.innerHeight-l.realHeight-d.width);let t=K(i,{elementDimensions:p,popoverDimensions:l,popoverPadding:s,popoverArrowDimensions:d});o.wrapper.style.top=`${e}px`,o.wrapper.style.left=`${t}px`,o.wrapper.style.bottom="auto",o.wrapper.style.right="auto",y="top"}else if(m){const e=Math.min(u,window.innerHeight-(null==l?void 0:l.realHeight)-d.width);let t=K(i,{elementDimensions:p,popoverDimensions:l,popoverPadding:s,popoverArrowDimensions:d});o.wrapper.style.left=`${t}px`,o.wrapper.style.bottom=`${e}px`,o.wrapper.style.top="auto",o.wrapper.style.right="auto",y="bottom"}b?o.arrow.classList.add("driver-popover-arrow-none"):function(e,t,o){const r=L("popover");if(!r)return;const n=o.getBoundingClientRect(),i=q(),a=r.arrow,s=i.width,l=window.innerWidth,d=n.width,p=n.left,v=i.height,c=window.innerHeight,u=n.top,m=n.height;a.className="driver-popover-arrow";let f=t,h=e;"top"===t?(p+d<=0?(f="right",h="end"):p+d-s<=0&&(f="top",h="start"),p>=l?(f="left",h="end"):p+s>=l&&(f="top",h="end")):"bottom"===t?(p+d<=0?(f="right",h="start"):p+d-s<=0&&(f="bottom",h="start"),p>=l?(f="left",h="start"):p+s>=l&&(f="bottom",h="end")):"left"===t?(u+m<=0?(f="bottom",h="end"):u+m-v<=0&&(f="left",h="start"),u>=c?(f="top",h="end"):u+v>=c&&(f="left",h="end")):"right"===t&&(u+m<=0?(f="bottom",h="start"):u+m-v<=0&&(f="right",h="start"),u>=c?(f="top",h="start"):u+v>=c&&(f="right",h="end")),f?(a.classList.add(`driver-popover-arrow-side-${f}`),a.classList.add(`driver-popover-arrow-align-${h}`)):a.classList.add("driver-popover-arrow-none")}(i,y,e)}function U(e={}){function t(){x("allowClose")&&l()}function o(){const e=L("activeIndex"),t=x("steps")||[];if(void 0===e)return;const o=e+1;t[o]?s(o):l()}function r(){const e=L("activeIndex"),t=x("steps")||[];if(void 0===e)return;const o=e-1;t[o]?s(o):l()}function n(){var e;if(L("__transitionCallback"))return;const t=L("activeIndex"),o=L("__activeStep"),n=L("__activeElement");if(void 0===t||void 0===o||void 0===L("activeIndex"))return;const i=(null==(e=o.popover)?void 0:e.onPrevClick)||x("onPrevClick");if(i)return i(n,o,{config:x(),state:L()});r()}function i(){var e;if(L("__transitionCallback"))return;const t=L("activeIndex"),r=L("__activeStep"),n=L("__activeElement");if(void 0===t||void 0===r)return;const i=(null==(e=r.popover)?void 0:e.onNextClick)||x("onNextClick");if(i)return i(n,r,{config:x(),state:L()});o()}function a(){L("isInitialized")||(B("isInitialized",!0),document.body.classList.add("driver-active",x("animate")?"driver-fade":"driver-simple"),window.addEventListener("keyup",F,!1),window.addEventListener("keydown",R,!1),window.addEventListener("resize",z),window.addEventListener("scroll",z),S("overlayClick",t),S("escapePress",t),S("arrowLeftPress",n),S("arrowRightPress",i))}function s(e=0){var t,o,r,n,i,a,d,p;const v=x("steps");if(!v)return console.error("No steps to drive through"),void l();if(!v[e])return void l();B("__activeOnDestroyed",document.activeElement),B("activeIndex",e);const c=v[e],u=v[e+1],m=v[e-1],f=(null==(t=c.popover)?void 0:t.doneBtnText)||x("doneBtnText")||"Done",h=x("allowClose"),g=void 0!==(null==(o=c.popover)?void 0:o.showProgress)?null==(r=c.popover)?void 0:r.showProgress:x("showProgress"),w=((null==(n=c.popover)?void 0:n.progressText)||x("progressText")||"{{current}} of {{total}}").replace("{{current}}",`${e+1}`).replace("{{total}}",`${v.length}`),b=(null==(i=c.popover)?void 0:i.showButtons)||x("showButtons"),y=["next","previous",...h?["close"]:[]].filter((e=>!(null!=b&&b.length)||b.includes(e))),k=(null==(a=c.popover)?void 0:a.onNextClick)||x("onNextClick"),C=(null==(d=c.popover)?void 0:d.onPrevClick)||x("onPrevClick"),_=(null==(p=c.popover)?void 0:p.onCloseClick)||x("onCloseClick");N({...c,popover:{showButtons:y,nextBtnText:u?void 0:f,disableButtons:[...m?[]:["previous"]],showProgress:g,progressText:w,onNextClick:k||(()=>{u?s(e+1):l()}),onPrevClick:C||(()=>{s(e-1)}),onCloseClick:_||(()=>{l()}),...(null==c?void 0:c.popover)||{}}})}function l(e=!0){const t=L("__activeElement"),o=L("__activeStep"),r=L("__activeOnDestroyed"),n=x("onDestroyStarted");if(e&&n){return void n(!t||"driver-dummy-element"===(null==t?void 0:t.id)?void 0:t,o,{config:x(),state:L()})}const i=(null==o?void 0:o.onDeselected)||x("onDeselected"),a=x("onDestroyed");if(document.body.classList.remove("driver-active","driver-fade","driver-simple"),window.removeEventListener("keyup",F),window.removeEventListener("resize",z),window.removeEventListener("scroll",z),function(){var e;const t=L("popover");t&&(null==(e=t.wrapper.parentElement)||e.removeChild(t.wrapper))}(),function(){var e;null==(e=document.getElementById("driver-dummy-element"))||e.remove(),document.querySelectorAll(".driver-active-element").forEach((e=>{e.classList.remove("driver-active-element","driver-no-interaction"),e.removeAttribute("aria-haspopup"),e.removeAttribute("aria-expanded"),e.removeAttribute("aria-controls")}))}(),function(){const e=L("__overlaySvg");e&&e.remove()}(),A={},P(),t&&o){const e="driver-dummy-element"===t.id;i&&i(e?void 0:t,o,{config:x(),state:L()}),a&&a(e?void 0:t,o,{config:x(),state:L()})}r&&r.focus()}return y(e),{isActive:()=>L("isInitialized")||!1,refresh:z,drive:(e=0)=>{a(),s(e)},setConfig:y,setSteps:e=>{P(),y({...x(),steps:e})},getConfig:x,getState:L,getActiveIndex:()=>L("activeIndex"),isFirstStep:()=>0===L("activeIndex"),isLastStep:()=>{const e=x("steps")||[],t=L("activeIndex");return void 0!==t&&t===e.length-1},getActiveStep:()=>L("activeStep"),getActiveElement:()=>L("activeElement"),getPreviousElement:()=>L("previousElement"),getPreviousStep:()=>L("previousStep"),moveNext:o,movePrevious:r,moveTo:function(e){(x("steps")||[])[e]?s(e):l()},hasNextStep:()=>{const e=x("steps")||[],t=L("activeIndex");return void 0!==t&&e[t+1]},hasPreviousStep:()=>{const e=x("steps")||[],t=L("activeIndex");return void 0!==t&&e[t-1]},highlight:e=>{a(),N({...e,popover:e.popover?{showButtons:[],showProgress:!1,progressText:"",...e.popover}:void 0})},destroy:()=>{l(!1)}}}var X="subscriptions",Y="Start the tour",Z="Are you sure you want to leave the tour?";const J={class:"tour-group"};var Q=o({__name:"interface",props:{field:{},fields:{},values:{},initialValues:{},primaryKey:{},disabled:{type:Boolean},batchMode:{type:Boolean},batchActiveFields:{default:()=>[]},loading:{type:Boolean},validationErrors:{default:()=>[]},badge:{},rawEditorEnabled:{type:Boolean},direction:{},steps:{},buttonIcon:{default:X},buttonTooltip:{default:Y},exitMessage:{default:Z}},emits:["apply"],setup(e){const t=e,{updatedFields:o,injectFieldClasses:b}=function(){const e="tour-field";return{updatedFields:n((()=>t.fields.map((e=>{var t,o,r;return e.meta?(e.meta.options={...null==(t=e.meta)?void 0:t.options,class:`${(null==(r=null==(o=e.meta)?void 0:o.options)?void 0:r.class)?`${e.meta.options.class} `:""}tour-input-${e.field}`},e):e})))),injectFieldClasses:async function(){var r,n,i;for(const a of t.fields){if(!(null==(n=null==(r=a.meta)?void 0:r.options)?void 0:n.class))return;const t=6;let s,l=0;do{await o(l?50:0),l++,s=document.querySelector(`.tour-input-${a.field}`)}while(!s&&l<t);if(!s)return;null==(i=null==s?void 0:s.closest(".field"))||i.classList.add(`${e}-${a.field}`,"tour-field")}}};function o(e){return new Promise((t=>setTimeout(t,e)))}}(),{injectButtonBar:y,rootFormExists:x}=function(){return{injectButtonBar:function(){var o;if(!(null==(o=t.steps)?void 0:o.length))return;if(document.querySelector(".tour-group-nav-bar"))return;const r=e();if(!r)return;const n=document.createElement("div");n.classList.add("tour-group-nav-bar"),null==r||r.prepend(n)},rootFormExists:function(){return!!e()}};function e(){return document.querySelector("main>.v-form")}}(),{tourReady:k,initTour:C,startTour:_}=function(){const{t:e}=w();let o,r,s;const l=i(!1),d=n((()=>l.value));return a((function(){null==o||o.destroy()})),{tourReady:d,initTour:p,startTour:function(){if(!o||!(null==s?void 0:s.length))return;o.setConfig({...r,steps:s,onDestroyStarted:v}),o.drive()}};function p(){var n;if(!(null==(n=t.steps)?void 0:n.length))return;o=U();const i=parseInt(getComputedStyle(document.documentElement).getPropertyValue("--theme--border-radius").trim().replace("px",""));async function a(){setTimeout((()=>o.moveTo(o.getActiveIndex()+1)),50)}r={showProgress:!0,progressText:"{{current}}/{{total}}",showButtons:["next","previous"],nextBtnText:e("next"),prevBtnText:e("back"),doneBtnText:e("done"),popoverClass:"tour-group-theme",overlayOpacity:1,stagePadding:12,stageRadius:i||6},s=t.steps.filter((({element:e})=>!!e)).map((({element:e,forceClick:t,preventBack:r,...n},i)=>{let s=[],l=()=>o.moveTo(i+1),d=()=>o.moveTo(i-1),p=e=>{};return t&&(s.push("next"),l=()=>{},p=e=>{null==e||e.removeEventListener("click",a),null==e||e.addEventListener("click",a)}),r&&(s.push("previous"),d=()=>{}),{element:e,popover:{...n,disableButtons:s,onNextClick:l,onPrevClick:d},onHighlighted:p}})),l.value=!0}function v(){o.hasNextStep()&&!confirm(t.exitMessage)||o.destroy()}}();return r((async()=>{await b(),x()&&(y(),C())})),(e,t)=>{var r;const n=s("v-icon"),i=s("v-button"),a=s("v-form");return l(),d("div",J,[p(k)?(l(),v(c,{key:0,to:".tour-group-nav-bar"},[p(k)?(l(),v(i,{key:0,onClick:p(_),class:"tour-group-nav-btn","x-small":"",secondary:""},{default:u((()=>[m(n,{name:e.buttonIcon,small:""},null,8,["name"]),f("span",null,h(e.buttonTooltip),1)])),_:1},8,["onClick"])):g("v-if",!0)])):g("v-if",!0),m(a,{"initial-values":e.initialValues,fields:p(o),"model-value":e.values,"primary-key":e.primaryKey,group:null==(r=e.field.meta)?void 0:r.field,"validation-errors":e.validationErrors,loading:e.loading,disabled:e.disabled,badge:e.badge,"raw-editor-enabled":e.rawEditorEnabled,direction:e.direction,"show-no-visible-fields":!1,"show-validation-errors":!1,"onUpdate:modelValue":t[0]||(t[0]=t=>e.$emit("apply",t))},null,8,["initial-values","fields","model-value","primary-key","group","validation-errors","loading","disabled","badge","raw-editor-enabled","direction"])])}}}),ee=[],te=[];function oe(e,t){if(e&&"undefined"!=typeof document){var o,r=!0===t.prepend?"prepend":"append",n=!0===t.singleTag,i="string"==typeof t.container?document.querySelector(t.container):document.getElementsByTagName("head")[0];if(n){var a=ee.indexOf(i);-1===a&&(a=ee.push(i)-1,te[a]={}),o=te[a]&&te[a][r]?te[a][r]:te[a][r]=s()}else o=s();65279===e.charCodeAt(0)&&(e=e.substring(1)),o.styleSheet?o.styleSheet.cssText+=e:o.appendChild(document.createTextNode(e))}function s(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),t.attributes)for(var o=Object.keys(t.attributes),n=0;n<o.length;n++)e.setAttribute(o[n],t.attributes[o[n]]);var a="prepend"===r?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}oe("\n.tour-group[data-v-e51c3e7a] {\n position: relative;\n}\n.tour-group-nav-btn[data-v-e51c3e7a] {\n --v-icon-color: var(--theme--primary);\n --v-icon-color-hover: var(--v-icon-color);\n}\n.tour-group-nav-btn[data-v-e51c3e7a] .button {\n padding: 0 8px;\n}\n.tour-group-nav-btn[data-v-e51c3e7a] .button .content {\n gap: 6px;\n}\n",{});oe('\n.tour-group-nav-bar {\n display: flex;\n flex-wrap: wrap;\n gap: 4px;\n margin-bottom: -8px;\n grid-column: start/full;\n}\n.driver-active .driver-overlay,.driver-active *{pointer-events:none}\n.driver-active .driver-active-element,.driver-active .driver-active-element *,.driver-popover,.driver-popover *{pointer-events:auto}\n@keyframes animate-fade-in{0%{opacity:0}to{opacity:1}}\n.driver-fade .driver-overlay{animation:animate-fade-in .2s ease-in-out}\n.driver-fade .driver-popover{animation:animate-fade-in .2s}\n.driver-popover{all:unset;box-sizing:border-box;color:#2d2d2d;margin:0;padding:15px;border-radius:5px;min-width:250px;max-width:300px;box-shadow:0 1px 10px #0006;z-index:1000000000;position:fixed;top:0;right:0;background-color:#fff}\n.driver-popover *{font-family:Helvetica Neue,Inter,ui-sans-serif,"Apple Color Emoji",Helvetica,Arial,sans-serif}\n.driver-popover-title{font:19px/normal sans-serif;font-weight:700;display:block;position:relative;line-height:1.5;zoom:1;margin:0}\n.driver-popover-close-btn{all:unset;position:absolute;top:0;right:0;width:32px;height:28px;cursor:pointer;font-size:18px;font-weight:500;color:#d2d2d2;z-index:1;text-align:center;transition:color;transition-duration:.2s}\n.driver-popover-close-btn:hover,.driver-popover-close-btn:focus{color:#2d2d2d}\n.driver-popover-title[style*=block]+.driver-popover-description{margin-top:5px}\n.driver-popover-description{margin-bottom:0;font:14px/normal sans-serif;line-height:1.5;font-weight:400;zoom:1}\n.driver-popover-footer{margin-top:15px;text-align:right;zoom:1;display:flex;align-items:center;justify-content:space-between}\n.driver-popover-progress-text{font-size:13px;font-weight:400;color:#727272;zoom:1}\n.driver-popover-footer button{all:unset;display:inline-block;box-sizing:border-box;padding:3px 7px;text-decoration:none;text-shadow:1px 1px 0 #fff;background-color:#fff;color:#2d2d2d;font:12px/normal sans-serif;cursor:pointer;outline:0;zoom:1;line-height:1.3;border:1px solid #ccc;border-radius:3px}\n.driver-popover-footer .driver-popover-btn-disabled{opacity:.5;pointer-events:none}\n:not(body):has(>.driver-active-element){overflow:hidden!important}\n.driver-no-interaction,.driver-no-interaction *{pointer-events:none!important}\n.driver-popover-footer button:hover,.driver-popover-footer button:focus{background-color:#f7f7f7}\n.driver-popover-navigation-btns{display:flex;flex-grow:1;justify-content:flex-end}\n.driver-popover-navigation-btns button+button{margin-left:4px}\n.driver-popover-arrow{content:"";position:absolute;border:5px solid #fff}\n.driver-popover-arrow-side-over{display:none}\n.driver-popover-arrow-side-left{left:100%;border-right-color:transparent;border-bottom-color:transparent;border-top-color:transparent}\n.driver-popover-arrow-side-right{right:100%;border-left-color:transparent;border-bottom-color:transparent;border-top-color:transparent}\n.driver-popover-arrow-side-top{top:100%;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}\n.driver-popover-arrow-side-bottom{bottom:100%;border-left-color:transparent;border-top-color:transparent;border-right-color:transparent}\n.driver-popover-arrow-side-center{display:none}\n.driver-popover-arrow-side-left.driver-popover-arrow-align-start,.driver-popover-arrow-side-right.driver-popover-arrow-align-start{top:15px}\n.driver-popover-arrow-side-top.driver-popover-arrow-align-start,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-start{left:15px}\n.driver-popover-arrow-align-end.driver-popover-arrow-side-left,.driver-popover-arrow-align-end.driver-popover-arrow-side-right{bottom:15px}\n.driver-popover-arrow-side-top.driver-popover-arrow-align-end,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-end{right:15px}\n.driver-popover-arrow-side-left.driver-popover-arrow-align-center,.driver-popover-arrow-side-right.driver-popover-arrow-align-center{top:50%;margin-top:-5px}\n.driver-popover-arrow-side-top.driver-popover-arrow-align-center,.driver-popover-arrow-side-bottom.driver-popover-arrow-align-center{left:50%;margin-left:-5px}\n.driver-popover-arrow-none{display:none}\n\n /* driver.js overwrites */\nsvg.driver-overlay path {\n fill: var(--overlay-color) !important;\n}\n.driver-popover.tour-group-theme * {\n font-family: inherit;\n}\n.driver-popover.tour-group-theme {\n padding: 20px;\n max-width: 360px;\n background-color: var(--theme--background);\n border-radius: var(--theme--border-radius);\n color: var(--theme--foreground);\n}\n.driver-popover.tour-group-theme .driver-popover-description,\n .driver-popover.tour-group-theme .driver-popover-progress-text,\n .driver-popover.tour-group-theme .driver-popover-footer button {\n font-size: 15px;\n line-height: 22px;\n font-weight: 500;\n}\n.driver-popover.tour-group-theme .driver-popover-title {\n font-size: 16px;\n line-height: 1.6;\n font-weight: 600;\n color: var(--theme--foreground-accent);\n}\n.driver-popover.tour-group-theme .driver-popover-progress-text {\n color: var(--theme--foreground-subdued);\n}\n.driver-popover.tour-group-theme .driver-popover-footer button {\n text-shadow: none;\n background-color: var(--theme--background-normal);\n color: var(--theme--foreground);\n border: none;\n border-radius: var(--theme--border-radius);\n padding: 4px 24px;\n}\n.driver-popover.tour-group-theme .driver-popover-footer button:hover {\n background-color: var(--theme--background-accent);\n}\n.driver-popover.tour-group-theme .driver-popover-footer button:focus {\n background-color: var(--theme--background-normal);\n}\n.driver-popover.tour-group-theme\n .driver-popover-arrow-side-left.driver-popover-arrow {\n border-left-color: var(--theme--background);\n}\n.driver-popover.tour-group-theme\n .driver-popover-arrow-side-right.driver-popover-arrow {\n border-right-color: var(--theme--background);\n}\n.driver-popover.tour-group-theme\n .driver-popover-arrow-side-top.driver-popover-arrow {\n border-top-color: var(--theme--background);\n}\n.driver-popover.tour-group-theme\n .driver-popover-arrow-side-bottom.driver-popover-arrow {\n border-bottom-color: var(--theme--background);\n}\n',{});var re=e({id:"directus-labs-tour-group-interface",name:"Tour",icon:"subscriptions",description:"Create an interactive tour for your form.",component:((e,t)=>{const o=e.__vccOpts||e;for(const[e,r]of t)o[e]=r;return o})(Q,[["__scopeId","data-v-e51c3e7a"],["__file","interface.vue"]]),localTypes:["group"],group:"group",types:["alias"],options({collection:e,field:o}){const{useFieldsStore:r}=t(),n=r(),i=[];return function t(o=""){if(!o)return;const r=n.getFieldGroupChildren(e,o);null==r||r.forEach((e=>{var o,r;const n=null==(r=null==(o=e.meta)?void 0:o.special)?void 0:r.includes("group");i.push(`${e.name}: ${n?"":`<code>.tour-field-${e.field}</code>, `}<code>.tour-input-${e.field}</code>`),n&&t(e.field)}))}(o.field),{standard:[{field:"steps",name:"Tour Steps",meta:{width:"full",interface:"list",options:{addLabel:"Add Step",template:"{{ title }} · {{ description }}",fields:[{field:"element",type:"string",name:"Element (Selector)",meta:{interface:"input",width:"half",options:{placeholder:".tour-field-title"}},schema:{default_value:""}},{field:"title",type:"string",name:"$t:title",meta:{interface:"system-input-translated-string",width:"half"},schema:{default_value:""}},{field:"description",type:"string",name:"$t:description",meta:{interface:"system-input-translated-string",width:"full"},schema:{default_value:""}},{field:"side",name:"Position Side",type:"string",meta:{interface:"select-dropdown",width:"half",options:{choices:[{text:"$t:top",value:"top"},{text:"$t:right",value:"right"},{text:"$t:bottom",value:"bottom"},{text:"$t:left",value:"left"},{text:"Over",value:"over"}]}},schema:{default_value:"bottom"}},{field:"align",name:"Position Alignment",type:"string",meta:{interface:"select-dropdown",width:"half",options:{choices:[{text:"$t:start",value:"start"},{text:"$t:center",value:"center"},{text:"End",value:"end"}]}},schema:{default_value:"start"}},{field:"forceClick",name:"Force Click",type:"boolean",meta:{width:"half",interface:"boolean",options:{label:"Force the user to click the element"}},schema:{default_value:!1}},{field:"preventBack",name:"Prevent Back Navigation",type:"boolean",meta:{width:"half",interface:"boolean",options:{label:"Prevent the user from navigating back"}},schema:{default_value:!1}},{field:"notice",type:"alias",meta:{interface:"presentation-notice",options:{color:"normal",text:`<strong>The group tries to create these classes for its fields:</strong><br>${(null==i?void 0:i.length)?i.join("<br>"):"No fields in this group."}`}}}]}},schema:{default_value:null}}],advanced:[{field:"buttonIcon",name:"Button Icon",meta:{width:"half",interface:"select-icon"},schema:{default_value:X}},{field:"buttonTooltip",name:"Button Label",meta:{width:"half",interface:"system-input-translated-string",options:{placeholder:Y}},schema:{default_value:null}},{field:"exitMessage",name:"Exit Message",meta:{width:"full",interface:"system-input-translated-string",options:{placeholder:Z}},schema:{default_value:null}}]}}});export{re as default};