@directus-labs/extension-steps-component
Version:
Displays a clickable list of steps that the user can follow to complete a task.
2 lines (1 loc) • 6.12 kB
JavaScript
import{defineInterface as e}from"@directus/extensions-sdk";import{defineComponent as t,computed as n,resolveComponent as r,resolveDirective as o,openBlock as a,createElementBlock as i,createElementVNode as s,Fragment as d,renderList as l,withDirectives as c,normalizeClass as p,createBlock as u,toDisplayString as v,createCommentVNode as b}from"vue";const m={class:"steps-wrapper"},h={class:"steps-container"},f=["onClick","disabled"],g={class:"step-icon"},x={key:1},y={class:"step-text"},w={key:0,class:"connecting-bar-wrapper"};var k=t({__name:"interface",props:{value:{type:[String,Number,Boolean,null],default:null},choices:{default:[]},disabled:{type:Boolean}},emits:["input"],setup(e,{emit:t}){const k=e,T=n((()=>k.choices.findIndex((e=>e.value===k.value)))),_=t;return(e,t)=>{const n=r("VIcon"),S=o("tooltip");return a(),i("div",m,[s("div",h,[(a(!0),i(d,null,l(e.choices,((t,r)=>(a(),i("div",{key:t.value,class:"step-wrapper"},[c((a(),i("button",{class:p(["step",{active:t.value===e.value,completed:T.value>r}]),onClick:e=>{return n=t.value,void(k.disabled||_("input",n));var n},disabled:e.disabled},[s("div",g,[t.icon?(a(),u(n,{key:0,name:t.icon},null,8,["name"])):(a(),i("span",x,v(r+1),1))]),s("div",y,v(t.text),1)],10,f)),[[S,t.text]]),r<e.choices.length-1?(a(),i("div",w,[s("div",{class:p(["connecting-bar",{completed:T.value>r}])},null,2)])):b("v-if",!0)])))),128))])])}}}),T=[],_=[];!function(e,t){if(e&&"undefined"!=typeof document){var n,r=!0===t.prepend?"prepend":"append",o=!0===t.singleTag,a="string"==typeof t.container?document.querySelector(t.container):document.getElementsByTagName("head")[0];if(o){var i=T.indexOf(a);-1===i&&(i=T.push(a)-1,_[i]={}),n=_[i]&&_[i][r]?_[i][r]:_[i][r]=s()}else n=s();65279===e.charCodeAt(0)&&(e=e.substring(1)),n.styleSheet?n.styleSheet.cssText+=e:n.appendChild(document.createTextNode(e))}function s(){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"===r?"afterbegin":"beforeend";return a.insertAdjacentElement(i,e),e}}("\n.steps-wrapper[data-v-b6037049] {\n position: relative;\n overflow: hidden;\n}\n.steps-container[data-v-b6037049] {\n display: flex;\n align-items: start;\n justify-content: space-around;\n overflow-x: auto;\n scrollbar-width: none; /* Firefox */\n padding: var(--theme--form--field--input--padding);\n border-radius: var(--theme--border-radius);\n border: var(--theme--border-width) solid\n var(--v-input-border-color, var(--theme--form--field--input--border-color));\n}\n.steps-container[data-v-b6037049]::-webkit-scrollbar {\n display: none; /* WebKit */\n}\n.step-wrapper[data-v-b6037049] {\n display: flex;\n width: 100%;\n flex-direction: column;\n align-items: center;\n position: relative;\n}\n.step[data-v-b6037049] {\n display: flex;\n flex-direction: column;\n align-items: center;\n cursor: pointer;\n margin: 0;\n border: none;\n background: none;\n padding: 0 10px;\n outline: none;\n}\n.step:hover .step-icon[data-v-b6037049] {\n border-color: var(--theme--primary);\n color: var(--theme--primary);\n}\n.step:hover .step-text[data-v-b6037049] {\n color: var(--theme--primary);\n}\n.step.completed:hover .step-icon[data-v-b6037049] {\n background: color-mix(in srgb, var(--theme--primary), var(--theme--background) 20%);\n}\n.connecting-bar-wrapper[data-v-b6037049] {\n position: absolute;\n top: 20px;\n left: 50%;\n width: 100%;\n height: 3px;\n}\n.connecting-bar[data-v-b6037049] {\n transition: background-color 0.2s;\n width: 100%;\n height: 3px;\n background-color: var(--theme--border-color);\n}\n.connecting-bar.completed[data-v-b6037049] {\n background-color: var(--theme--primary);\n}\n.step-icon[data-v-b6037049] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n background-color: var(--theme--background);\n color: var(--theme--border-color);\n border: 2px solid var(--theme--border-color);\n font-size: 16px;\n font-weight: bold;\n z-index: 1;\n}\n.step-text[data-v-b6037049] {\n color: var(--theme--border-color);\n margin-top: 5px;\n text-align: center;\n font-size: 14px;\n line-height: 16px;\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n}\n.step.active .step-text[data-v-b6037049] {\n color: var(--theme--primary);\n font-weight: 600;\n}\n.step.completed .step-text[data-v-b6037049] {\n color: var(--theme--foreground);\n}\n.step.active .step-icon[data-v-b6037049] {\n background-color: var(--theme--background);\n color: var(--theme--primary);\n border: 2px solid var(--theme--primary);\n}\n.step.completed .step-icon[data-v-b6037049] {\n background-color: var(--theme--primary);\n color: var(--theme--background);\n border-color: transparent;\n}\nbutton[data-v-b6037049]:disabled {\n cursor: not-allowed;\n}\n ",{});const S=[e({id:"steps-interface",name:"Steps",icon:"step",description:"Displays a clickable list of steps that the user can follow to complete a task.",component:((e,t)=>{const n=e.__vccOpts||e;for(const[e,r]of t)n[e]=r;return n})(k,[["__scopeId","data-v-b6037049"],["__file","interface.vue"]]),options:[{field:"choices",name:"Steps",type:"json",description:"List of steps to display.",meta:{width:"full",interface:"list",options:{fields:[{field:"text",name:"Text",type:"string",meta:{required:!0,interface:"input",width:"half",note:"The label to display."}},{field:"value",name:"Value",description:"The value of the step.",meta:{required:!0,interface:"input",width:"half",note:"The value that gets stored."}},{field:"icon",name:"Icon",meta:{interface:"select-icon",width:"full",note:"The icon to display. (Optional)"}}]}}}],types:["string","integer"]})],j=[],A=[],C=[],I=[],O=[],q=[];export{j as displays,S as interfaces,A as layouts,C as modules,q as operations,I as panels,O as themes};