UNPKG

slidev-theme-oqtopus

Version:

Slidev theme for OQTOPUS presentations

2 lines (1 loc) 2.73 kB
import{z as p,f as v,o as a,g as n,i as C,j as d,ad as e,n as g,t as f,b as w,w as s,e as u,v as $,x,T as c}from"./modules/vue-m8pkr6j7.js";import{u as b,f as y}from"./slidev/context-DVBmw4Sk.js";import{_ as D}from"./index-rxBs4b9Q.js";import{I as M}from"./default-BPZUhb-i.js";import"./modules/shiki-DLbbKDLo.js";import"./SlideLayout-Dz7TN6RJ.js";import"./OqtopusLogo-Dbu4SNa4.js";import"./OqtopusSymbol-dDKLCRNZ.js";const S={class:"metrics-card"},V={class:"metrics-header"},_={class:"metric-icon"},k={class:"metric-title"},I={class:"metric-value"},P={class:"metric-subtitle"},T={class:"trend-icon"},B={class:"trend-text"},N={__name:"MetricsCard",props:{trend:{type:String,default:""},trendDirection:{type:String,default:"up",validator:o=>["up","down","stable"].includes(o)}},setup(o){b();const i=o,l=p(()=>({"trend-up":i.trendDirection==="up","trend-down":i.trendDirection==="down","trend-stable":i.trendDirection==="stable"})),m=p(()=>{switch(i.trendDirection){case"up":return"↗️";case"down":return"↘️";case"stable":return"→";default:return"→"}});return(t,r)=>(a(),v("div",S,[n("div",V,[n("div",_,[d(t.$slots,"icon",{},()=>[r[0]||(r[0]=e("📊"))],!0)]),n("div",k,[d(t.$slots,"title",{},()=>[r[1]||(r[1]=e("Metric"))],!0)])]),n("div",I,[d(t.$slots,"value",{},()=>[r[2]||(r[2]=e("0"))],!0)]),n("div",P,[d(t.$slots,"subtitle",{},()=>[r[3]||(r[3]=e("Performance Indicator"))],!0)]),o.trend?(a(),v("div",{key:0,class:g(["metric-trend",l.value])},[n("span",T,f(m.value),1),n("span",B,f(o.trend),1)],2)):C("v-if",!0)]))}},z=D(N,[["__scopeId","data-v-3f40232c"]]),E={class:"grid grid-cols-3 gap-6 mt-8"},G={__name:"example.md__slidev_8",setup(o){const{$clicksContext:i,$frontmatter:l}=b();return i.setup(),(m,t)=>{const r=z;return a(),w(M,$(x(c(y)(c(l),7))),{default:s(()=>[t[12]||(t[12]=n("h1",null,"Custom Components",-1)),t[13]||(t[13]=n("h2",null,"Enhance Your Slides with Pre-built Elements",-1)),t[14]||(t[14]=n("p",null,"This theme provides several custom Vue components to enrich your presentations.",-1)),n("div",E,[u(r,{trend:"15%","trend-direction":"up"},{icon:s(()=>t[0]||(t[0]=[e("📈")])),title:s(()=>t[1]||(t[1]=[e("Metric 1")])),value:s(()=>t[2]||(t[2]=[e("123")])),subtitle:s(()=>t[3]||(t[3]=[e("Units/day")])),_:1}),u(r,{trend:"8ms","trend-direction":"down"},{icon:s(()=>t[4]||(t[4]=[e("📉")])),title:s(()=>t[5]||(t[5]=[e("Metric 2")])),value:s(()=>t[6]||(t[6]=[e("45.6")])),subtitle:s(()=>t[7]||(t[7]=[e("Avg. Value")])),_:1}),u(r,{trend:"99.8%","trend-direction":"stable"},{icon:s(()=>t[8]||(t[8]=[e("📊")])),title:s(()=>t[9]||(t[9]=[e("Metric 3")])),value:s(()=>t[10]||(t[10]=[e("789")])),subtitle:s(()=>t[11]||(t[11]=[e("Total Count")])),_:1})])]),_:1,__:[12,13,14]},16)}}};export{G as default};