@devix-tecnologia/directus-extension-inframe/dist/index.js

Extensão para módulo de visualização de conteúdo em iframes

import{useApi as e,defineModule as t}from"@directus/extensions-sdk";import{ref as n,defineComponent as a,resolveComponent as r,createElementBlock as i,openBlock as o,createElementVNode as s,Fragment as l,renderList as d,createVNode as c,withCtx as m,toDisplayString as u,watch as p,onMounted as f,createBlock as g,createCommentVNode as v,createSlots as h}from"vue";import{useRouter as b,useRoute as y}from"vue-router";const x=async e=>(await e.get("/users/me")).data.data.language||"en-US",w=e=>e&&0!==e.length&&e[0]&&e[0].title?e[0].title:"Item inFrame",k=()=>{const t=n([]),a=n(!1),r=e();return{items:t,loading:a,fetchItems:async()=>{a.value=!0;try{const e=await x(r),n=await r.get("/items/inframe",{params:{fields:["id","sort","status","icon","url","thumbnail","translations.languages_code","translations.title"],deep:{translations:{_filter:{languages_code:{_eq:e}}}},filter:{status:{_eq:"published"}},sort:["sort"]}});t.value=n.data}finally{a.value=!1}},getTitle:w}},_=()=>{const t=n(null),a=n(!1),r=e();return{item:t,loading:a,fetchItem:async e=>{if(e){a.value=!0;try{const n=await x(r),a=await r.get(`/items/inframe/${e}`,{params:{fields:["id","status","sort","icon","url","thumbnail","translations.languages_code","translations.title"],deep:{translations:{_filter:{languages_code:{_eq:n}}}},filter:{status:{_eq:"published"}}}});t.value=a.data}finally{a.value=!1}}},getTitle:w}};var I=a({name:"NavMenu",props:{items:{type:Array,required:!0}},setup(){const{getTitle:e}=k();return{getTitle:e}}}),T=[],q=[];function R(e,t){if(e&&"undefined"!=typeof document){var n,a=!0===t.prepend?"prepend":"append",r=!0===t.singleTag,i="string"==typeof t.container?document.querySelector(t.container):document.getElementsByTagName("head")[0];if(r){var o=T.indexOf(i);-1===o&&(o=T.push(i)-1,q[o]={}),n=q[o]&&q[o][a]?q[o][a]:q[o][a]=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),r=0;r<n.length;r++)e.setAttribute(n[r],t.attributes[n[r]]);var o="prepend"===a?"afterbegin":"beforeend";return i.insertAdjacentElement(o,e),e}}R("\n.nav-menu[data-v-33faf0a5] {\n  margin-top: 20px;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n}\n.menu-list[data-v-33faf0a5] {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n.menu-item[data-v-33faf0a5] {\n  margin-bottom: 8px;\n}\n.menu-link[data-v-33faf0a5] {\n  display: flex;\n  align-items: center;\n  text-decoration: none;\n  color: var(--theme--foreground-accent);\n  font-size: 16px;\n  padding: 12px 20px;\n  transition:\n    background-color 0.3s ease,\n    color 0.3s ease;\n}\n.menu-link[data-v-33faf0a5]:hover {\n  background-color: var(--theme--primary-light);\n  color: var(--theme--primary);\n}\n.menu-link.active-link[data-v-33faf0a5] {\n  background-color: var(--theme--primary);\n  color: var(--white);\n  font-weight: bold;\n}\n.menu-icon[data-v-33faf0a5] {\n  margin-right: 10px;\n  font-size: 20px;\n}\n.menu-link span[data-v-33faf0a5] {\n  font-weight: 500;\n}\n",{});var S=(e,t)=>{const n=e.__vccOpts||e;for(const[e,a]of t)n[e]=a;return n};const A={class:"nav-menu"},z={class:"menu-list"},N={class:"menu-link-text"};var j=S(I,[["render",function(e,t,n,a,p,f){const g=r("v-icon"),v=r("router-link");return o(),i("nav",A,[s("ul",z,[(o(!0),i(l,null,d(e.items,t=>(o(),i("li",{key:t.id,class:"menu-item"},[c(v,{to:`/inframe/${t.id}`,class:"menu-link","active-class":"active-link"},{default:m(()=>[c(g,{class:"menu-icon",name:t.icon},null,8,["name"]),s("span",N,u(e.getTitle(t.translations)),1)]),_:2},1032,["to"])]))),128))])])}],["__scopeId","data-v-33faf0a5"]]);const C="directus_inframe_last_route",O="lastRoute",M=()=>{const e=b(),t=y(),a=n(!1),r=n=>{const a=n||t.params.id;if(a)try{localStorage.setItem(C,a);const n={...t.query};n[O]=a,e.replace({path:t.path,query:n}).catch(()=>{})}catch(e){}},i=()=>{try{const e=t.query[O];if(e)return e;const n=localStorage.getItem(C);if(n)return n}catch(e){}return null};return{saveCurrentRoute:r,getLastRoute:i,restoreLastRoute:async()=>{const t=i();if(!t)return!1;try{return a.value=!0,await e.push(`/inframe/${t}`),!0}catch(e){return!1}finally{a.value=!1}},clearSavedRoute:()=>{try{localStorage.removeItem(C);const n={...t.query};delete n[O],e.replace({path:t.path,query:n}).catch(()=>{})}catch(e){}},startAutoSave:()=>{p(()=>t.params.id,e=>{!a.value&&e&&r(e)},{immediate:!1})},isRestoringRoute:a}};var D=a({name:"InframeList",components:{NavMenu:j},setup(){const{items:e,fetchItems:t,getTitle:n}=k(),a=b(),{restoreLastRoute:r,startAutoSave:i}=M();return f(async()=>{await t(),i();if(!await r()&&e.value&&e.value.length>0){const t=e.value[0];t&&a.push(`/inframe/${t.id}`)}}),{items:e,page_title:"Organograma",getTitle:n}}});R("\n.container[data-v-b493d20e] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 20px;\n  padding: 20px 50px;\n}\n.card-container[data-v-b493d20e] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 20px;\n  width: 100%;\n}\n.card[data-v-b493d20e] {\n  background-color: #ffffff;\n  border-radius: 8px;\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n  flex: 1 1 25%;\n  height: 200px;\n  display: flex;\n  flex-direction: column; /* Para garantir que o conteúdo não sobreponha a imagem */\n  justify-content: flex-end; /* Ajusta o conteúdo para o fundo */\n  align-items: center;\n  text-align: center;\n  overflow: hidden;\n  transition:\n    transform 0.3s ease,\n    box-shadow 0.3s ease;\n}\n.card[data-v-b493d20e]:hover {\n  transform: translateY(-10px);\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);\n}\n.card-link[data-v-b493d20e] {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end; /* Coloca o conteúdo no fundo do link */\n  align-items: center;\n  height: 100%;\n  text-decoration: none; /* Remove o estilo de link */\n  background-size: cover;\n  background-position: center;\n  background-repeat: no-repeat;\n  padding: 0;\n  width: 100%;\n}\n.card-header h3[data-v-b493d20e] {\n  margin: 0; /* Remove a margem para melhor controle de espaçamento */\n  padding: 10px;\n  background: var(--theme--primary);\n  width: 100%;\n}\n.card-header[data-v-b493d20e] {\n  background-color: var(--theme--primary-light);\n  padding: 0;\n  font-size: 18px;\n  font-weight: bold;\n  color: var(--white);\n  width: 100%;\n}\n.card-body[data-v-b493d20e] {\n  padding: 16px;\n  font-size: 14px;\n  color: var(--theme--foreground);\n}\n.card-body p[data-v-b493d20e] {\n  margin: 0;\n}\n",{});const E={class:"container"};var L=S(D,[["render",function(e,t,n,a,i,l){const d=r("NavMenu"),u=r("router-view"),p=r("private-view");return o(),g(p,{title:e.page_title},{navigation:m(()=>[c(d,{items:e.items},null,8,["items"])]),default:m(()=>[s("div",E,[v(" O router-view vai renderizar o conteúdo do primeiro item automaticamente "),c(u)])]),_:1},8,["title"])}],["__scopeId","data-v-b493d20e"]]),$=a({name:"ItemDetail",components:{NavMenu:j},props:{item:{type:Object,required:!0},items:{type:Array,required:!0},loading:{type:Boolean,default:!1},title:{type:String,default:""}},setup:e=>({...e,breadcrumb:[{name:"Home",to:"/inframe"}]})});R("\n.header-bar[data-v-978ef17c] {\n  display: none !important;\n}\n[data-v-978ef17c] .header-bar {\n  display: none !important;\n}\n.container[data-v-978ef17c] {\n  margin: 20px 50px;\n}\nh2[data-v-978ef17c] {\n  color: var(--theme--foreground-accent);\n  margin-bottom: 10px;\n}\np[data-v-978ef17c] {\n  font-size: 16px;\n  line-height: 1.5;\n  color: var(--theme--foreground-accent);\n}\n.main[data-v-978ef17c] {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n}\n.iframe-area[data-v-978ef17c] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  overflow: hidden !important;\n}\niframe[data-v-978ef17c] {\n  width: 100%;\n  height: 100%;\n  border: none;\n}\n",{});const B={class:"main"},F={key:0},H={key:1},P={class:"iframe-area"},U=["src"],Y={key:2};var G=a({name:"ItemDetailRoute",components:{ItemDetail:S($,[["render",function(e,t,n,a,l,d){const u=r("v-breadcrumb"),p=r("NavMenu"),f=r("private-view");return e.item?(o(),g(f,{key:0,title:e.title},h({navigation:m(()=>[c(p,{items:e.items},null,8,["items"])]),default:m(()=>[s("div",B,[e.loading?(o(),i("div",F,[...t[0]||(t[0]=[s("p",null,"Carregando...",-1)])])):e.item?(o(),i("div",H,[s("div",P,[s("iframe",{src:e.item.url,frameborder:"0",sandbox:"allow-scripts allow-same-origin"},null,8,U)])])):(o(),i("div",Y,[...t[1]||(t[1]=[s("p",null,"Erro ao carregar dados. Tente novamente mais tarde.",-1)])]))])]),_:2},[e.breadcrumb.length>0?{name:"headline",fn:m(()=>[c(u,{items:e.breadcrumb},null,8,["items"])]),key:"0"}:void 0]),1032,["title"])):v("v-if",!0)}],["__scopeId","data-v-978ef17c"]])},setup(){const e=y(),{items:t,fetchItems:n,getTitle:a}=k(),{item:r,loading:i,fetchItem:o}=_(),{saveCurrentRoute:s,startAutoSave:l}=M();return f(async()=>{await n();const t=e.params.id;t&&(await o(t),s(t)),l()}),p(()=>e.params.id,async e=>{e&&(await o(e),s(e))}),{item:r,items:t,loading:i,getTitle:a}}});var J=t({id:"inframe",name:"Relatórios",icon:"document_scanner",routes:[{path:"",props:!0,component:L},{path:":id",component:S(G,[["render",function(e,t,n,a,i,s){const l=r("ItemDetail");return o(),g(l,{item:e.item,items:e.items,loading:e.loading,title:e.getTitle(e.item?.translations||[])},null,8,["item","items","loading","title"])}]]),props:!0}]});export{J as default};