@xcpcio/board-app 0.26.0 → 0.27.0

package/dist/assets/index-e972e718.js

@@ -0,0 +1 @@
+import{g as C,h as w,i as u,u as V,o,c as n,j as t,n as E,d as s,k as S,t as p,l as g,m as F,p as R,B as I,q as A,w as O,s as q,v as M,x as Q,y as X,F as N,z as G,A as H,R as J,b as $,a as K,C as j}from"./index-7955279c.js";import{u as P}from"./useQueryBoardData-78fadedd.js";import{g as W,_ as Y}from"./DataSourceInput.vue_vue_type_script_setup_true_lang-effb1be0.js";import"./TheInput.vue_vue_type_script_setup_true_lang-2b1997a6.js";const Z={flex:"","flex-1":"","flex-col":"","justify-center":"","items-start":""},ee={class:"resolver-team-name",truncate:"","overflow-hidden":""},te=s("div",{flex:"","flex-row":"","text-sm":"","items-start":"","gap-x-2":""},null,-1),oe={"w-32":"",flex:"","flex-shrink-0":"","flex-row":"","justify-start":"","items-center":""},ne=C({__name:"BalloonBlock",props:{index:null,balloon:null},setup(f){const a=f,_=w(()=>a.index),r=w(()=>a.balloon),c=u(null),i=V(c);function x(e){return[e.location,e.organization,e.name].filter(d=>d).join(" - ")}function v(e){return typeof e=="string"?e:F&&(e!=null&&e.dark)?e.dark:e.light}return(e,b)=>{var d,l,h,k;return o(),n("div",{ref_key:"el",ref:c,"h-24":""},[t(i)?(o(),n("div",{key:0,"h-24":"",flex:"","flex-row":"","gap-x-4":"","font-mono":"","text-4xl":"",class:E([t(_)%2===0?"bg-resolver-bg-zero":"bg-resolver-bg-one"])},[s("div",{"w-20":"",flex:"","flex-shrink-0":"","justify-center":"","items-center":"",style:S({backgroundColor:v(((l=(d=t(r).problem)==null?void 0:d.balloonColor)==null?void 0:l.background_color)??"rgba(0, 0, 0, 0.5)")})},[s("div",{style:S({color:v(((k=(h=t(r).problem)==null?void 0:h.balloonColor)==null?void 0:k.color)??"#fff")})},p(t(r).problem.label),5)],4),s("div",Z,[s("div",ee,p(x(t(r).team)),1),te]),s("div",oe,p(t(r).submission.timestampToMinute),1)],2)):g("",!0)],512)}}}),se={class:"bg-[#323443]","text-gray-200":""},ae={key:0},le={flex:"","flex-col":"","justify-center":"","items-center":"","w-screen":"","h-screen":"","text-xl":"",italic:""},re={key:0},ce={key:1},ie={flex:"","flex-col":"","justify-between":""},ue=C({__name:"Balloon",props:{dataSourceUrl:null},setup(f){const a=f,_=R(I),{t:r}=A(),c=u(!1),i=u({}),x=u([]),v=u([]),e=u({}),b=u(new Date);function d(){const m=new J(i.value,x.value,v.value);m.buildBalloons(),e.value=m}const{data:l,isError:h,error:k}=P(a.dataSourceUrl,b);O(l,async()=>{var m,B,y;l.value===null||l.value===void 0||(i.value=q((m=l.value)==null?void 0:m.contest),_.value=`${i.value.name} | ${I}`,x.value=M((B=l.value)==null?void 0:B.teams),v.value=Q((y=l.value)==null?void 0:y.submissions),d(),c.value=!0)});const U=w(()=>e.value.balloons),z=setInterval(()=>{b.value=new Date},1e3);return X(()=>{clearInterval(z)}),(m,B)=>{const y=ne;return o(),n("div",se,[t(c)?(o(),n("div",ce,[s("div",ie,[(o(!0),n(N,null,G(t(U),(D,L)=>(o(),H(y,{key:D.key,index:L,balloon:D},null,8,["index","balloon"]))),128))])])):(o(),n("div",ae,[s("div",le,[s("div",null,p(t(r)("common.loading"))+"... ",1),t(h)?(o(),n("div",re,p(t(k)),1)):g("",!0)])]))])}}}),_e={key:0},de={"mt-20":""},me={key:1},fe=C({__name:"CustomBalloon",setup(f){const a=W();return(_,r)=>{const c=Y,i=ue;return o(),n(N,null,[t(a).length===0?(o(),n("div",_e,[s("div",de,[$(c)])])):g("",!0),t(a).length>0?(o(),n("div",me,[$(i,{"data-source-url":t(a)},null,8,["data-source-url"])])):g("",!0)],64)}}}),T={};function ve(f,a){const _=fe;return o(),n("div",null,[$(_)])}typeof j=="function"&&j(T);const ke=K(T,[["render",ve]]);export{ke as default};

package/dist/assets/index-layout-f3e9e819.js

@@ -0,0 +1 @@
+import{a as s,r as a,o as c,c as r,b as e,d as _,F as m,e as p,f as l}from"./index-7955279c.js";const i={},d={class:"lg:mt-[-52px]","py-2":"","text-gray-700":"","dark:text-gray-200":""};function u(x,f){const o=p,t=a("RouterView"),n=l;return c(),r(m,null,[e(o,{width:"sm:w-[1024px] lg:w-screen"}),_("main",d,[e(t),e(n,{class:"sm:w-[1024px] lg:w-screen"})])],64)}const w=s(i,[["render",u]]);export{w as default};

package/dist/assets/test-94bf1ee1.js

@@ -0,0 +1 @@
+import{_ as m}from"./TheInput.vue_vue_type_script_setup_true_lang-2b1997a6.js";import{g as _,i as p,D as f,q as h,o as b,c as v,d as e,t as n,j as o,b as y,E as x,G as g,C as l}from"./index-7955279c.js";import{u as w}from"./user-c31467e6.js";const V={flex:"","flex-col":"","justify-center":"","items-center":""},k=e("div",{"text-4xl":""},[e("div",{"i-carbon-campsite":""})],-1),C=e("p",null,[e("a",{rel:"noreferrer",href:"https://github.com/antfu/vitesse",target:"_blank"}," Vitesse ")],-1),I={"text-sm":"","opacity-75":""},B=e("div",{"py-4":""},null,-1),K={"w-48":""},N={class:"hidden",for:"input"},R=["disabled"],U=_({name:"IndexPage",__name:"test",setup(j){const r=w(),t=p(r.savedName),c=f();function a(){t.value&&c.push(`/hi/${encodeURIComponent(t.value)}`)}const{t:s}=h();return(D,i)=>{const d=m;return b(),v("div",V,[k,C,e("p",null,[e("em",I,n(o(s)("intro.desc")),1)]),B,e("div",K,[y(d,{modelValue:o(t),"onUpdate:modelValue":i[0]||(i[0]=u=>x(t)?t.value=u:null),placeholder:o(s)("intro.whats-your-name"),autocomplete:"false",onKeydown:g(a,["enter"])},null,8,["modelValue","placeholder","onKeydown"]),e("label",N,n(o(s)("intro.whats-your-name")),1)]),e("div",null,[e("button",{"m-3":"","text-sm":"",btn:"",disabled:!o(t),onClick:a},n(o(s)("button.go")),9,R)])])}}});typeof l=="function"&&l(U);export{U as default};

package/dist/assets/useQueryBoardData-78fadedd.js

@@ -0,0 +1 @@
+import{ak as M,al as S,am as K,an as U,ao as D,ap as B,aq as W,ar as V,as as A,at as z,au as N,av as H,aw as Y,ax as _,h as P,ay as $,w as b,az as x,aA as G,aB as J,aC as X,aD as Z,j as C,aE as ee,aF as te}from"./index-7955279c.js";class se extends M{constructor(e,t){super(),this.client=e,this.options=t,this.trackedProps=new Set,this.selectError=null,this.bindMethods(),this.setOptions(t)}bindMethods(){this.remove=this.remove.bind(this),this.refetch=this.refetch.bind(this)}onSubscribe(){this.listeners.size===1&&(this.currentQuery.addObserver(this),k(this.currentQuery,this.options)&&this.executeFetch(),this.updateTimers())}onUnsubscribe(){this.hasListeners()||this.destroy()}shouldFetchOnReconnect(){return E(this.currentQuery,this.options,this.options.refetchOnReconnect)}shouldFetchOnWindowFocus(){return E(this.currentQuery,this.options,this.options.refetchOnWindowFocus)}destroy(){this.listeners=new Set,this.clearStaleTimeout(),this.clearRefetchInterval(),this.currentQuery.removeObserver(this)}setOptions(e,t){const s=this.options,u=this.currentQuery;if(this.options=this.client.defaultQueryOptions(e),S(s,this.options)||this.client.getQueryCache().notify({type:"observerOptionsUpdated",query:this.currentQuery,observer:this}),typeof this.options.enabled<"u"&&typeof this.options.enabled!="boolean")throw new Error("Expected enabled to be a boolean");this.options.queryKey||(this.options.queryKey=s.queryKey),this.updateQuery();const i=this.hasListeners();i&&j(this.currentQuery,u,this.options,s)&&this.executeFetch(),this.updateResult(t),i&&(this.currentQuery!==u||this.options.enabled!==s.enabled||this.options.staleTime!==s.staleTime)&&this.updateStaleTimeout();const n=this.computeRefetchInterval();i&&(this.currentQuery!==u||this.options.enabled!==s.enabled||n!==this.currentRefetchInterval)&&this.updateRefetchInterval(n)}getOptimisticResult(e){const t=this.client.getQueryCache().build(this.client,e),s=this.createResult(t,e);return ie(this,s,e)&&(this.currentResult=s,this.currentResultOptions=this.options,this.currentResultState=this.currentQuery.state),s}getCurrentResult(){return this.currentResult}trackResult(e){const t={};return Object.keys(e).forEach(s=>{Object.defineProperty(t,s,{configurable:!1,enumerable:!0,get:()=>(this.trackedProps.add(s),e[s])})}),t}getCurrentQuery(){return this.currentQuery}remove(){this.client.getQueryCache().remove(this.currentQuery)}refetch({refetchPage:e,...t}={}){return this.fetch({...t,meta:{refetchPage:e}})}fetchOptimistic(e){const t=this.client.defaultQueryOptions(e),s=this.client.getQueryCache().build(this.client,t);return s.isFetchingOptimistic=!0,s.fetch().then(()=>this.createResult(s,t))}fetch(e){var t;return this.executeFetch({...e,cancelRefetch:(t=e.cancelRefetch)!=null?t:!0}).then(()=>(this.updateResult(),this.currentResult))}executeFetch(e){this.updateQuery();let t=this.currentQuery.fetch(this.options,e);return e!=null&&e.throwOnError||(t=t.catch(K)),t}updateStaleTimeout(){if(this.clearStaleTimeout(),U||this.currentResult.isStale||!D(this.options.staleTime))return;const t=B(this.currentResult.dataUpdatedAt,this.options.staleTime)+1;this.staleTimeoutId=setTimeout(()=>{this.currentResult.isStale||this.updateResult()},t)}computeRefetchInterval(){var e;return typeof this.options.refetchInterval=="function"?this.options.refetchInterval(this.currentResult.data,this.currentQuery):(e=this.options.refetchInterval)!=null?e:!1}updateRefetchInterval(e){this.clearRefetchInterval(),this.currentRefetchInterval=e,!(U||this.options.enabled===!1||!D(this.currentRefetchInterval)||this.currentRefetchInterval===0)&&(this.refetchIntervalId=setInterval(()=>{(this.options.refetchIntervalInBackground||W.isFocused())&&this.executeFetch()},this.currentRefetchInterval))}updateTimers(){this.updateStaleTimeout(),this.updateRefetchInterval(this.computeRefetchInterval())}clearStaleTimeout(){this.staleTimeoutId&&(clearTimeout(this.staleTimeoutId),this.staleTimeoutId=void 0)}clearRefetchInterval(){this.refetchIntervalId&&(clearInterval(this.refetchIntervalId),this.refetchIntervalId=void 0)}createResult(e,t){const s=this.currentQuery,u=this.options,i=this.currentResult,n=this.currentResultState,a=this.currentResultOptions,l=e!==s,h=l?e.state:this.currentQueryInitialState,o=l?this.currentResult:this.previousQueryResult,{state:c}=e;let{dataUpdatedAt:d,error:R,errorUpdatedAt:m,fetchStatus:v,status:f}=c,w=!1,F=!1,y;if(t._optimisticResults){const p=this.hasListeners(),O=!p&&k(e,t),L=p&&j(e,s,t,u);(O||L)&&(v=V(e.options.networkMode)?"fetching":"paused",d||(f="loading")),t._optimisticResults==="isRestoring"&&(v="idle")}if(t.keepPreviousData&&!c.dataUpdatedAt&&o!=null&&o.isSuccess&&f!=="error")y=o.data,d=o.dataUpdatedAt,f=o.status,w=!0;else if(t.select&&typeof c.data<"u")if(i&&c.data===(n==null?void 0:n.data)&&t.select===this.selectFn)y=this.selectResult;else try{this.selectFn=t.select,y=t.select(c.data),y=A(i==null?void 0:i.data,y,t),this.selectResult=y,this.selectError=null}catch(p){this.selectError=p}else y=c.data;if(typeof t.placeholderData<"u"&&typeof y>"u"&&f==="loading"){let p;if(i!=null&&i.isPlaceholderData&&t.placeholderData===(a==null?void 0:a.placeholderData))p=i.data;else if(p=typeof t.placeholderData=="function"?t.placeholderData():t.placeholderData,t.select&&typeof p<"u")try{p=t.select(p),this.selectError=null}catch(O){this.selectError=O}typeof p<"u"&&(f="success",y=A(i==null?void 0:i.data,p,t),F=!0)}this.selectError&&(R=this.selectError,y=this.selectResult,m=Date.now(),f="error");const Q=v==="fetching",g=f==="loading",I=f==="error";return{status:f,fetchStatus:v,isLoading:g,isSuccess:f==="success",isError:I,isInitialLoading:g&&Q,data:y,dataUpdatedAt:d,error:R,errorUpdatedAt:m,failureCount:c.fetchFailureCount,failureReason:c.fetchFailureReason,errorUpdateCount:c.errorUpdateCount,isFetched:c.dataUpdateCount>0||c.errorUpdateCount>0,isFetchedAfterMount:c.dataUpdateCount>h.dataUpdateCount||c.errorUpdateCount>h.errorUpdateCount,isFetching:Q,isRefetching:Q&&!g,isLoadingError:I&&c.dataUpdatedAt===0,isPaused:v==="paused",isPlaceholderData:F,isPreviousData:w,isRefetchError:I&&c.dataUpdatedAt!==0,isStale:T(e,t),refetch:this.refetch,remove:this.remove}}updateResult(e){const t=this.currentResult,s=this.createResult(this.currentQuery,this.options);if(this.currentResultState=this.currentQuery.state,this.currentResultOptions=this.options,S(s,t))return;this.currentResult=s;const u={cache:!0},i=()=>{if(!t)return!0;const{notifyOnChangeProps:n}=this.options,a=typeof n=="function"?n():n;if(a==="all"||!a&&!this.trackedProps.size)return!0;const l=new Set(a??this.trackedProps);return this.options.useErrorBoundary&&l.add("error"),Object.keys(this.currentResult).some(h=>{const o=h;return this.currentResult[o]!==t[o]&&l.has(o)})};(e==null?void 0:e.listeners)!==!1&&i()&&(u.listeners=!0),this.notify({...u,...e})}updateQuery(){const e=this.client.getQueryCache().build(this.client,this.options);if(e===this.currentQuery)return;const t=this.currentQuery;this.currentQuery=e,this.currentQueryInitialState=e.state,this.previousQueryResult=this.currentResult,this.hasListeners()&&(t==null||t.removeObserver(this),e.addObserver(this))}onQueryUpdate(e){const t={};e.type==="success"?t.onSuccess=!e.manual:e.type==="error"&&!z(e.error)&&(t.onError=!0),this.updateResult(t),this.hasListeners()&&this.updateTimers()}notify(e){N.batch(()=>{if(e.onSuccess){var t,s,u,i;(t=(s=this.options).onSuccess)==null||t.call(s,this.currentResult.data),(u=(i=this.options).onSettled)==null||u.call(i,this.currentResult.data,null)}else if(e.onError){var n,a,l,h;(n=(a=this.options).onError)==null||n.call(a,this.currentResult.error),(l=(h=this.options).onSettled)==null||l.call(h,void 0,this.currentResult.error)}e.listeners&&this.listeners.forEach(({listener:o})=>{o(this.currentResult)}),e.cache&&this.client.getQueryCache().notify({query:this.currentQuery,type:"observerResultsUpdated"})})}}function re(r,e){return e.enabled!==!1&&!r.state.dataUpdatedAt&&!(r.state.status==="error"&&e.retryOnMount===!1)}function k(r,e){return re(r,e)||r.state.dataUpdatedAt>0&&E(r,e,e.refetchOnMount)}function E(r,e,t){if(e.enabled!==!1){const s=typeof t=="function"?t(r):t;return s==="always"||s!==!1&&T(r,e)}return!1}function j(r,e,t,s){return t.enabled!==!1&&(r!==e||s.enabled===!1)&&(!t.suspense||r.state.status!=="error")&&T(r,t)}function T(r,e){return r.isStaleByTime(e.staleTime)}function ie(r,e,t){return t.keepPreviousData?!1:t.placeholderData!==void 0?e.isPlaceholderData:!S(r.getCurrentResult(),e)}function ne(r=""){var e;if(!((e=H())==null?void 0:e.proxy))throw new Error("vue-query hooks can only be used inside setup() function.");const s=_(r),u=Y(s);if(!u)throw new Error("No 'queryClient' found in Vue context, use 'VueQueryPlugin' to properly initialize the library.");return u}function ue(r,e,t={},s={}){var u;const i=P(()=>ae(e,t,s)),n=(u=i.value.queryClient)!=null?u:ne(i.value.queryClientKey),a=P(()=>{const d=n.defaultQueryOptions(i.value);return d._optimisticResults=n.isRestoring.value?"isRestoring":"optimistic",d}),l=new r(n,a.value),h=$(l.getCurrentResult());let o=()=>{};b(n.isRestoring,d=>{d||(o(),o=l.subscribe(R=>{x(h,R)}))},{immediate:!0}),b(a,()=>{l.setOptions(a.value),x(h,l.getCurrentResult())}),G(()=>{o()});const c=()=>new Promise((d,R)=>{let m=()=>{};const v=()=>{if(a.value.enabled!==!1){const f=l.getOptimisticResult(a.value);f.isStale?(m(),l.fetchOptimistic(a.value).then(d,R)):(m(),d(f))}};v(),m=b(a,v,{deep:!0})});return b(()=>h.error,d=>{if(h.isError&&!h.isFetching&&J(a.value.useErrorBoundary,[d,l.getCurrentQuery()]))throw d}),{...X(Z(h)),suspense:c}}function ae(r,e={},t={}){const s=C(r),u=C(e),i=C(t);let n=s;return ee(s)?typeof u=="function"?n={...i,queryKey:s,queryFn:u}:n={...u,queryKey:s}:n=s,te(n)}function le(r,e,t){const s=ue(se,r,e,t);return{...s,refetch:s.refetch.value,remove:s.remove.value}}const ce=3,q=30*1e3;async function oe(r,e){const t=r.startsWith("/")?r.slice(1):r;let s=`${window.DATA_HOST}${t}`;r.startsWith("http")&&(s=r),s.endsWith("/")&&(s=s.slice(0,-1));const u=await fetch(`${s}/config.json?t=${e??0}`),i=await fetch(`${s}/team.json?t=${e??0}`),n=await fetch(`${s}/run.json?t=${e??0}`);return Promise.all([u.json(),i.json(),n.json()]).then(l=>({contest:l[0],teams:l[1],submissions:l[2]}))}function fe(r,e){return le({queryKey:[r,e.value.getTime()],queryFn:()=>oe(r,e.value.getTime()),retry:ce,staleTime:q,refetchInterval:q})}export{fe as u};

package/dist/assets/user-c31467e6.js

@@ -0,0 +1 @@
+import{aH as m,i as r,h as t}from"./index-7955279c.js";const l=m("user",()=>{const e=r(""),s=r(new Set),o=t(()=>Array.from(s.value)),u=t(()=>o.value.filter(a=>a!==e.value));function n(a){e.value&&s.value.add(e.value),e.value=a}return{setNewName:n,otherNames:u,savedName:e}});export{l as u};

package/dist/assets/virtual_pwa-register-d035b16b.js

@@ -0,0 +1 @@
+import{_ as u}from"./index-7955279c.js";function p(d={}){const{immediate:l=!1,onNeedRefresh:v,onOfflineReady:t,onRegistered:r,onRegisteredSW:o,onRegisterError:s}=d;let i,n;const c=async(a=!0)=>{await n};async function f(){if("serviceWorker"in navigator){const{Workbox:a}=await u(()=>import("./workbox-window.prod.es5-a7b12eab.js"),[],import.meta.url);i=new a("/sw.js",{scope:"/",type:"classic"}),i.addEventListener("activated",e=>{(e.isUpdate||e.isExternal)&&window.location.reload()}),i.addEventListener("installed",e=>{e.isUpdate||t==null||t()}),i.register({immediate:l}).then(e=>{o?o("/sw.js",e):r==null||r(e)}).catch(e=>{s==null||s(e)})}}return n=f(),c}export{p as registerSW};

package/dist/index.html

@@ -1 +1,122 @@
-<!DOCTYPE html><html lang="en" data-critters-container><head><meta charset="UTF-8"><!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> --><link rel="apple-touch-icon" href="https://cdn.jsdelivr.net/npm/@xcpcio/board-app@0.26.0/dist/balloon-192x192.png"><link rel="mask-icon" href="https://cdn.jsdelivr.net/npm/@xcpcio/board-app@0.26.0/dist/balloon-512x512.svg" color="#00aba9"><meta name="msapplication-TileColor" content="#00aba9"><script>function normalizePath(_){for(;_.endsWith("/");)_=_.slice(0,-1);return _+"/"}{let _="__CDN_HOST__";_=normalizePath(_),window.CDN_HOST=_}try{let _=__DATA_HOST__;_=normalizePath(_),window.DATA_HOST=_}catch(_){window.DATA_HOST="/data/"}try{let _=__DATA_REGION__;window.DATA_REGION=_}catch(_){window.DATA_REGION="CN"}</script><script>!function(){var e=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches,t=localStorage.getItem("vueuse-color-scheme")||"auto";("dark"===t||e&&"light"!==t)&&document.documentElement.classList.toggle("dark",!0)}()</script><script type="module" async crossorigin src="https://cdn.jsdelivr.net/npm/@xcpcio/board-app@0.26.0/dist/assets/app-229ad629.js"></script><link rel="manifest" href="/manifest.webmanifest"><style></style><link rel="modulepreload" crossorigin href="/assets/index-layout-d88ea34a.js"><title>Board - XCPCIO</title><meta name="description" content="XCPCIO-Board 主要收录 *CPC 系列竞赛的榜单。"><meta name="keywords" content="icpc, ccpc, rank, board, standings"><meta name="theme-color" content="#ffffff"><link rel="icon" type="image/svg+xml" href="/favicon.svg"></head><body class="font-sans"><div id="app" data-server-rendered="true"><!--[--><header class="header z-40 sm:w-[1024px] lg:w-screen" data-v-a79e7085><button title="Scroll to top" fixed bottom-6 right-6 z-100 h-10 w-10 rounded-full transition duration-300 print:hidden hover-bg-hex-8883 hover:op100 class="op0! pointer-events-none" data-v-a79e7085><div i-ri-arrow-up-line data-v-a79e7085></div></button><nav class="nav" text-xl data-v-a79e7085><div class="spacer" data-v-a79e7085></div><div class="right" print:op0 data-v-a79e7085><a aria-current="page" href="/" class="router-link-active router-link-exact-active" icon-btn title="Home" focusable="false" data-v-a79e7085><div i-ion-balloon-sharp data-v-a79e7085></div></a><a icon-btn title="Change languages" data-v-a79e7085><div i-carbon-language data-v-a79e7085></div></a><a icon-btn title="Toggle dark mode" data-v-a79e7085><div i="carbon-sun dark:carbon-moon" data-v-a79e7085></div></a><a icon-btn rel="noreferrer" href="https://github.com/xcpcio/xcpcio" target="_blank" title="GitHub" data-v-a79e7085><div i-carbon-logo-github data-v-a79e7085></div></a></div></nav></header><main class="lg:mt-[-52px]" py-2 text-gray-700 dark:text-gray-200><!----><footer mt-8 py-4 md:py-8 lg:py-10 w-full flex justify-center items-center class="sm:w-[1024px] lg:w-screen"><div text-center w-full><a aria-current="page" href="/" class="router-link-active router-link-exact-active" flex items-center justify-center text-2xl font-semibold text-gray-900 dark:text-white><div i-ion-balloon-sharp mr-4 h-8></div>Get more balloons</a><p my-6 text-gray-500 dark:text-gray-400 w-full flex justify-center>Open-source project of ICPC/CCPC Standings.</p><ul mb-6 w-full flex flex-wrap items-center justify-center text-gray-900 dark:text-white><li><a aria-current="page" href="/" class="router-link-active router-link-exact-active" mr-4 md:mr-6 hover:underline>Home</a></li><li><div class="v-popper v-popper--theme-tooltip" w-inherit><!--[--><!--[--><a href="https://github.com/xcpcio/xcpcio" class="mr-4 md:mr-6 hover:underline" rel="noreferrer" target="_blank" title="GitHub">GitHub</a><!--]--><div id="popper_zv4wo56w_7vyav6" class="v-popper__popper v-popper--theme-tooltip v-popper__popper--hidden v-popper__popper--hide-to" style="position:absolute;transform:translate3d(0,0,0)" aria-hidden="true" data-popper-placement><div class="v-popper__backdrop"></div><div class="v-popper__wrapper" style><div class="v-popper__inner"><!----></div><div class="v-popper__arrow-container" style="left:0;top:0"><div class="v-popper__arrow-outer"></div><div class="v-popper__arrow-inner"></div></div></div></div><!--]--></div></li><li><div class="v-popper v-popper--theme-tooltip" w-inherit><!--[--><!--[--><a href="mailto:hi@dup4.com" mr-4 md:mr-6 hover:underline>Contact</a><!--]--><div id="popper_knqhjmbu_7vyavk" class="v-popper__popper v-popper--theme-tooltip v-popper__popper--hidden v-popper__popper--hide-to" style="position:absolute;transform:translate3d(0,0,0)" aria-hidden="true" data-popper-placement><div class="v-popper__backdrop"></div><div class="v-popper__wrapper" style><div class="v-popper__inner"><!----></div><div class="v-popper__arrow-container" style="left:0;top:0"><div class="v-popper__arrow-outer"></div><div class="v-popper__arrow-inner"></div></div></div></div><!--]--></div></li></ul><span text-sm text-gray-500 sm:text-center dark:text-gray-400 w-full>© 2020-PRESENT <a aria-current="page" href="/" class="router-link-active router-link-exact-active" hover:underline>XCPCIO™</a>. All Rights Reserved.</span></div></footer></main><!--]--></div><script>window.__INITIAL_STATE__='{"pinia":{}}'</script><noscript>This website requires JavaScript to function properly. Please enable JavaScript to continue.</noscript><script>try{var umamiJSUrl=__UMAMI_JS_URL__,umamiWebsiteId=__UMAMI_WEBSITE_ID__;!function(){var e=document.createElement("script"),t=(e.src=umamiJSUrl,e.defer=!0,e.setAttribute("data-website-id",umamiWebsiteId),document.getElementsByTagName("script")[0]);t.parentNode.insertBefore(e,t)}()}catch(e){}try{var plausibleJSUrl=__PLAUSIBLE_JS_URL__,plausibleDataDomain=__PLAUSIBLE_DATA_DOMAIN__;!function(){var e=document.createElement("script"),t=(e.src=plausibleJSUrl,e.defer=!0,e.setAttribute("data-domain",plausibleDataDomain),document.getElementsByTagName("script")[0]);t.parentNode.insertBefore(e,t)}()}catch(e){}try{var baiduAnalyticsId=__BAIDU_ANALYTICS_ID__,_hmt=_hmt||[];!function(){var e=document.createElement("script"),t=(e.src="https://hm.baidu.com/hm.js?"+baiduAnalyticsId,document.getElementsByTagName("script")[0]);t.parentNode.insertBefore(e,t)}()}catch(e){}try{var googleAnalyticsId=__GOOGLE_ANALYTICS_ID__;!function(){var e,t,a,r;location.port||(e=window,r=document,t="script",a="ga",e.GoogleAnalyticsObject=a,e.ga=e.ga||function(){(e.ga.q=e.ga.q||[]).push(arguments)},e.ga.l=+new Date,a=r.createElement(t),r=r.getElementsByTagName(t)[0],a.async=1,a.src="//www.google-analytics.com/analytics.js",r.parentNode.insertBefore(a,r),ga("create",""+googleAnalyticsId,"auto"),ga("send","pageview"))}()}catch(e){}</script></body></html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
+  <link rel="apple-touch-icon" href="https://cdn.jsdelivr.net/npm/@xcpcio/board-app@0.27.0/dist/balloon-192x192.png">
+  <link rel="mask-icon" href="https://cdn.jsdelivr.net/npm/@xcpcio/board-app@0.27.0/dist/balloon-512x512.svg" color="#00aba9">
+  <meta name="msapplication-TileColor" content="#00aba9">
+  <script>
+    function normalizePath(path) {
+      while (path.endsWith("/")) {
+        path = path.slice(0, -1);
+      }
+      return `${path}/`;
+    }
+
+    {
+      let CDN_HOST = "__CDN_HOST__";
+      CDN_HOST = normalizePath(CDN_HOST);
+      window.CDN_HOST = CDN_HOST;
+    }
+
+    try {
+      let DATA_HOST = __DATA_HOST__;
+      DATA_HOST = normalizePath(DATA_HOST);
+      window.DATA_HOST = DATA_HOST;
+    } catch (e) {
+      window.DATA_HOST = "/data/";
+    }
+
+    try {
+      let DATA_REGION = __DATA_REGION__;
+      window.DATA_REGION = DATA_REGION;
+    } catch (e) {
+      window.DATA_REGION = "CN";
+    }
+  </script>
+  <script>
+    (function () {
+      const prefersDark = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+      const setting = localStorage.getItem("vueuse-color-scheme") || "auto";
+      if (setting === "dark" || (prefersDark && setting !== "light")) {
+        document.documentElement.classList.toggle("dark", true);
+      }
+    })();
+  </script>
+  <script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@xcpcio/board-app@0.27.0/dist/assets/index-7955279c.js"></script>
+<link rel="manifest" href="/manifest.webmanifest"><style></style></head>
+<body class="font-sans">
+  <div id="app"></div>
+  
+  <noscript>This website requires JavaScript to function properly. Please enable JavaScript to continue.</noscript>
+  <script>
+    try {
+        var umamiJSUrl = __UMAMI_JS_URL__;
+        var umamiWebsiteId = __UMAMI_WEBSITE_ID__;
+        (function () {
+            var script = document.createElement("script");
+            script.src = umamiJSUrl;
+            script.defer = true;
+            script.setAttribute("data-website-id", umamiWebsiteId);
+            var s = document.getElementsByTagName("script")[0];
+            s.parentNode.insertBefore(script, s);
+        })();
+    } catch (e) {}
+
+    try {
+        var plausibleJSUrl = __PLAUSIBLE_JS_URL__;
+        var plausibleDataDomain = __PLAUSIBLE_DATA_DOMAIN__;
+        (function () {
+            var script = document.createElement("script");
+            script.src = plausibleJSUrl;
+            script.defer = true;
+            script.setAttribute("data-domain", plausibleDataDomain);
+            var s = document.getElementsByTagName("script")[0];
+            s.parentNode.insertBefore(script, s);
+        })();
+    } catch (e) {}
+
+    try {
+        var baiduAnalyticsId = __BAIDU_ANALYTICS_ID__;
+        var _hmt = _hmt || [];
+        (function () {
+            var hm = document.createElement("script");
+            hm.src = `https://hm.baidu.com/hm.js?${baiduAnalyticsId}`;
+            var s = document.getElementsByTagName("script")[0];
+            s.parentNode.insertBefore(hm, s);
+        })();
+    } catch (e) {}
+
+    try {
+        var googleAnalyticsId = __GOOGLE_ANALYTICS_ID__;
+        (function () {
+            if (!location.port) {
+                (function (i, s, o, g, r, a, m) {
+                    i["GoogleAnalyticsObject"] = r;
+                    (i[r] =
+                    i[r] ||
+                    function () {
+                        (i[r].q = i[r].q || []).push(arguments);
+                    }),
+                    (i[r].l = 1 * new Date());
+                    (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
+                    a.async = 1;
+                    a.src = g;
+                    m.parentNode.insertBefore(a, m);
+                })(
+                    window,
+                    document,
+                    "script",
+                    "//www.google-analytics.com/analytics.js",
+                    "ga"
+                );
+                ga("create", `${googleAnalyticsId}`, "auto");
+                ga("send", "pageview");
+            }
+        })();
+    } catch (e) {}
+  </script>
+
+</body>
+</html>

package/dist/sw.js

@@ -1 +1 @@
-if(!self.define){let e,s={};const l=(l,i)=>(l=new URL(l+".js",i).href,s[l]||new Promise((s=>{if("document"in self){const e=document.createElement("script");e.src=l,e.onload=s,document.head.appendChild(e)}else e=l,importScripts(l),s()})).then((()=>{let e=s[l];if(!e)throw new Error(`Module ${l} didn’t register its module`);return e})));self.define=(i,n)=>{const r=e||("document"in self?document.currentScript.src:"")||location.href;if(s[r])return;let u={};const t=e=>l(e,r),a={module:{uri:r},exports:u,require:t};s[r]=Promise.all(i.map((e=>a[e]||t(e)))).then((e=>(n(...e),u)))}}define(["./workbox-b8d87ee1"],(function(e){"use strict";self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"about.html",revision:"d485ee3168acf5e6186b8b63a81da132"},{url:"assets/_...all_-ccdf65e0.js",revision:null},{url:"assets/_...all_-f6dd53aa.css",revision:null},{url:"assets/_name_-41975e46.js",revision:null},{url:"assets/about-ed4e51a8.js",revision:null},{url:"assets/app-229ad629.js",revision:null},{url:"assets/board-layout-22e4dc7d.js",revision:null},{url:"assets/DataSourceInput.vue_vue_type_script_setup_true_lang-b63d8c0a.js",revision:null},{url:"assets/en-644e039f.js",revision:null},{url:"assets/headless-254ddfda.js",revision:null},{url:"assets/home-ff1bf49b.js",revision:null},{url:"assets/index-00889800.css",revision:null},{url:"assets/index-4ec61f53.js",revision:null},{url:"assets/index-layout-d88ea34a.js",revision:null},{url:"assets/test-0bd7427d.js",revision:null},{url:"assets/TheInput.vue_vue_type_script_setup_true_lang-01db0210.js",revision:null},{url:"assets/user-b4f3ed5d.js",revision:null},{url:"assets/virtual_pwa-register-123217d5.js",revision:null},{url:"assets/workbox-window.prod.es5-a7b12eab.js",revision:null},{url:"assets/zh-CN-44b801f0.js",revision:null},{url:"balloon.html",revision:"6905add912497b05896d4c794bd4bead"},{url:"index.html",revision:"d29bab4c1a83515d7987ec2469c63312"},{url:"test.html",revision:"30f873fefdfe20ee8827d817d7ef703b"},{url:"favicon.svg",revision:"5a744f4ccbb122d4a0575be779ddcd43"},{url:"safari-pinned-tab.svg",revision:"5eaf74d1c43d30e0af743b68a3f48504"},{url:"balloon2-192x192.png",revision:"c857ae6d9dfae118ab4397d4358422bd"},{url:"balloon2-512x512.png",revision:"065594f4f743fe3884793c03d3fe7d9e"},{url:"manifest.webmanifest",revision:"3082e8d8ebc9619c6c1055ff243a02a8"}],{}),e.cleanupOutdatedCaches(),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("index.html")))}));
+if(!self.define){let s,e={};const l=(l,r)=>(l=new URL(l+".js",r).href,e[l]||new Promise((e=>{if("document"in self){const s=document.createElement("script");s.src=l,s.onload=e,document.head.appendChild(s)}else s=l,importScripts(l),e()})).then((()=>{let s=e[l];if(!s)throw new Error(`Module ${l} didn’t register its module`);return s})));self.define=(r,n)=>{const i=s||("document"in self?document.currentScript.src:"")||location.href;if(e[i])return;let u={};const t=s=>l(s,i),a={module:{uri:i},exports:u,require:t};e[i]=Promise.all(r.map((s=>a[s]||t(s)))).then((s=>(n(...s),u)))}}define(["./workbox-b8d87ee1"],(function(s){"use strict";self.skipWaiting(),s.clientsClaim(),s.precacheAndRoute([{url:"assets/_...all_-bb67b33f.js",revision:null},{url:"assets/_name_-d0a3d653.js",revision:null},{url:"assets/about-8e4f6558.js",revision:null},{url:"assets/Board-88436e20.js",revision:null},{url:"assets/board-c38fef02.js",revision:null},{url:"assets/Board-f6dd53aa.css",revision:null},{url:"assets/board-layout-2f8b4c8e.js",revision:null},{url:"assets/DataSourceInput.vue_vue_type_script_setup_true_lang-effb1be0.js",revision:null},{url:"assets/en-644e039f.js",revision:null},{url:"assets/headless-04b3d2be.js",revision:null},{url:"assets/home-f7c22489.js",revision:null},{url:"assets/index-522cf95a.css",revision:null},{url:"assets/index-7955279c.js",revision:null},{url:"assets/index-e972e718.js",revision:null},{url:"assets/index-layout-f3e9e819.js",revision:null},{url:"assets/test-94bf1ee1.js",revision:null},{url:"assets/TheInput.vue_vue_type_script_setup_true_lang-2b1997a6.js",revision:null},{url:"assets/useQueryBoardData-78fadedd.js",revision:null},{url:"assets/user-c31467e6.js",revision:null},{url:"assets/virtual_pwa-register-d035b16b.js",revision:null},{url:"assets/workbox-window.prod.es5-a7b12eab.js",revision:null},{url:"assets/zh-CN-44b801f0.js",revision:null},{url:"index.html",revision:"d6c322c4d573a247a7102037db2cd17c"},{url:"favicon.svg",revision:"5a744f4ccbb122d4a0575be779ddcd43"},{url:"safari-pinned-tab.svg",revision:"5eaf74d1c43d30e0af743b68a3f48504"},{url:"balloon2-192x192.png",revision:"c857ae6d9dfae118ab4397d4358422bd"},{url:"balloon2-512x512.png",revision:"065594f4f743fe3884793c03d3fe7d9e"},{url:"manifest.webmanifest",revision:"3082e8d8ebc9619c6c1055ff243a02a8"}],{}),s.cleanupOutdatedCaches(),s.registerRoute(new s.NavigationRoute(s.createHandlerBoundToURL("index.html")))}));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xcpcio/board-app",
   "type": "module",
-  "version": "0.26.0",
+  "version": "0.27.0",
   "description": "XCPCIO Board App",
   "author": "Dup4 <lyuzhi.pan@gmail.com>",
   "license": "MIT",
@@ -53,8 +53,8 @@
     "vue-router": "^4.2.4",
     "vue-search-select": "^3.1.2",
     "vue-toast-notification": "^3",
-    "@xcpcio/core": "0.26.0",
-    "@xcpcio/types": "0.26.0"
+    "@xcpcio/core": "0.27.0",
+    "@xcpcio/types": "0.27.0"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.39.8",
@@ -104,7 +104,7 @@
     "workbox-window": "^7.0.0"
   },
   "scripts": {
-    "build": "vite-ssg build",
+    "build": "vite build",
     "dev": "vite --port 3333",
     "lint": "eslint .",
     "lint:fix": "eslint --fix .",

package/src/components/ContestIndexUI.vue

@@ -61,21 +61,27 @@ onUnmounted(() => {
               >
             </div>
 
-            <VTooltip
+            <div
+              class="title"
               w-inherit
             >
-              <div
-                class="title"
-                overflow-hidden
-                text-2xl truncate
-              >
-                {{ contest.name }}
-              </div>
+              <Tooltip>
+                <div
+                  overflow-hidden
+                  text-2xl truncate
+                >
+                  {{ contest.name }}
+                </div>
 
-              <template #popper>
-                {{ contest.name }}
-              </template>
-            </VTooltip>
+                <template #popper>
+                  <div
+                    text-lg
+                  >
+                    {{ contest.name }}
+                  </div>
+                </template>
+              </Tooltip>
+            </div>
           </div>
 
           <div flex items-end>

package/src/components/Footer.vue

@@ -73,53 +73,57 @@ const dataRegion = computed(() => {
         </li>
 
         <li>
-          <VTooltip
-            w-inherit
+          <div
+            mr-4 md:mr-6
           >
-            <a
-              :href="GITHUB_URL"
-              class="mr-4 md:mr-6 hover:underline"
-              rel="noreferrer"
-              target="_blank"
-              title="GitHub"
-            >
-              GitHub
-            </a>
-
-            <template #popper>
-              <div
-                flex justify-center
-                flex-col
+            <Tooltip>
+              <a
+                :href="GITHUB_URL"
+                hover:underline
+                rel="noreferrer"
+                target="_blank"
+                title="GitHub"
               >
-                <div>Tag: {{ VERSION }}</div>
-                <div>Sha: {{ GITHUB_SHA }}</div>
-              </div>
-            </template>
-          </VTooltip>
+                GitHub
+              </a>
+
+              <template #popper>
+                <div
+                  flex justify-center items-start
+                  flex-col
+                >
+                  <div>Tag: {{ VERSION }}</div>
+                  <div>Sha: {{ GITHUB_SHA }}</div>
+                </div>
+              </template>
+            </Tooltip>
+          </div>
         </li>
 
         <li>
-          <VTooltip
-            w-inherit
+          <div
+            mr-4 md:mr-6
           >
-            <a
-              href="mailto:hi@dup4.com"
-              mr-4 md:mr-6 hover:underline
-            >
-              Contact
-            </a>
-
-            <template #popper>
-              <div
-                flex justify-center
-                flex-col
+            <Tooltip>
+              <a
+                href="mailto:hi@dup4.com"
+                hover:underline
               >
-                <div>CDN Host: {{ cdnHost }}</div>
-                <div>DATA Host: {{ dataHost }}</div>
-                <div>Data Region: {{ dataRegion }}</div>
-              </div>
-            </template>
-          </VTooltip>
+                Contact
+              </a>
+
+              <template #popper>
+                <div
+                  flex justify-center items-start
+                  flex-col
+                >
+                  <div>CDN Host: {{ cdnHost }}</div>
+                  <div>DATA Host: {{ dataHost }}</div>
+                  <div>Data Region: {{ dataRegion }}</div>
+                </div>
+              </template>
+            </Tooltip>
+          </div>
         </li>
       </ul>
 

package/src/components/board/BoardTab.vue

@@ -79,7 +79,7 @@ onMounted(() => {
     flex
   >
     <div>
-      <VTooltip
+      <Tooltip
         w-inherit
       >
         <div>
@@ -98,7 +98,7 @@ onMounted(() => {
             </div>
           </div>
         </template>
-      </VTooltip>
+      </Tooltip>
     </div>
 
     <div

package/src/components/flowbite/Tooltip.css

@@ -0,0 +1,172 @@
+.tooltip-arrow,.tooltip-arrow:before {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: inherit;
+}
+
+.tooltip-arrow {
+  visibility: hidden;
+}
+
+.tooltip-arrow:before {
+  content: "";
+  visibility: visible;
+  transform: rotate(45deg);
+}
+
+[data-tooltip-style^='light'] + .tooltip > .tooltip-arrow:before {
+  border-style: solid;
+  border-color: #e5e7eb;
+}
+
+[data-tooltip-style^='light'] + .tooltip[data-popper-placement^='top'] > .tooltip-arrow:before {
+  border-bottom-width: 1px;
+  border-right-width: 1px;
+}
+
+[data-tooltip-style^='light'] + .tooltip[data-popper-placement^='right'] > .tooltip-arrow:before {
+  border-bottom-width: 1px;
+  border-left-width: 1px;
+}
+
+[data-tooltip-style^='light'] + .tooltip[data-popper-placement^='bottom'] > .tooltip-arrow:before {
+  border-top-width: 1px;
+  border-left-width: 1px;
+}
+
+[data-tooltip-style^='light'] + .tooltip[data-popper-placement^='left'] > .tooltip-arrow:before {
+  border-top-width: 1px;
+  border-right-width: 1px;
+}
+
+.tooltip[data-popper-placement^='top'] > .tooltip-arrow {
+  bottom: -4px;
+}
+
+.tooltip[data-popper-placement^='bottom'] > .tooltip-arrow {
+  top: -4px;
+}
+
+.tooltip[data-popper-placement^='left'] > .tooltip-arrow {
+  right: -4px;
+}
+
+.tooltip[data-popper-placement^='right'] > .tooltip-arrow {
+  left: -4px;
+}
+
+.tooltip.invisible > .tooltip-arrow:before {
+  visibility: hidden;
+}
+
+[data-popper-arrow],[data-popper-arrow]:before {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: inherit;
+}
+
+[data-popper-arrow] {
+  visibility: hidden;
+}
+
+[data-popper-arrow]:before {
+  content: "";
+  visibility: visible;
+  transform: rotate(45deg);
+}
+
+[data-popper-arrow]:after {
+  content: "";
+  visibility: visible;
+  transform: rotate(45deg);
+  position: absolute;
+  width: 9px;
+  height: 9px;
+  background: inherit;
+}
+
+[role="tooltip"] > [data-popper-arrow]:before {
+  border-style: solid;
+  border-color: #e5e7eb;
+}
+
+.dark [role="tooltip"] > [data-popper-arrow]:before {
+  border-style: solid;
+  border-color: #4b5563;
+}
+
+[role="tooltip"] > [data-popper-arrow]:after {
+  border-style: solid;
+  border-color: #e5e7eb;
+}
+
+.dark [role="tooltip"] > [data-popper-arrow]:after {
+  border-style: solid;
+  border-color: #4b5563;
+}
+
+[data-popover][role="tooltip"][data-popper-placement^='top'] > [data-popper-arrow]:before {
+  border-bottom-width: 1px;
+  border-right-width: 1px;
+}
+
+[data-popover][role="tooltip"][data-popper-placement^='top'] > [data-popper-arrow]:after {
+  border-bottom-width: 1px;
+  border-right-width: 1px;
+}
+
+[data-popover][role="tooltip"][data-popper-placement^='right'] > [data-popper-arrow]:before {
+  border-bottom-width: 1px;
+  border-left-width: 1px;
+}
+
+[data-popover][role="tooltip"][data-popper-placement^='right'] > [data-popper-arrow]:after {
+  border-bottom-width: 1px;
+  border-left-width: 1px;
+}
+
+[data-popover][role="tooltip"][data-popper-placement^='bottom'] > [data-popper-arrow]:before {
+  border-top-width: 1px;
+  border-left-width: 1px;
+}
+
+[data-popover][role="tooltip"][data-popper-placement^='bottom'] > [data-popper-arrow]:after {
+  border-top-width: 1px;
+  border-left-width: 1px;
+}
+
+[data-popover][role="tooltip"][data-popper-placement^='left'] > [data-popper-arrow]:before {
+  border-top-width: 1px;
+  border-right-width: 1px;
+}
+
+[data-popover][role="tooltip"][data-popper-placement^='left'] > [data-popper-arrow]:after {
+  border-top-width: 1px;
+  border-right-width: 1px;
+}
+
+[data-popover][role="tooltip"][data-popper-placement^='top'] > [data-popper-arrow] {
+  bottom: -5px;
+}
+
+[data-popover][role="tooltip"][data-popper-placement^='bottom'] > [data-popper-arrow] {
+  top: -5px;
+}
+
+[data-popover][role="tooltip"][data-popper-placement^='left'] > [data-popper-arrow] {
+  right: -5px;
+}
+
+[data-popover][role="tooltip"][data-popper-placement^='right'] > [data-popper-arrow] {
+  left: -5px;
+}
+
+[role="tooltip"].invisible > [data-popper-arrow]:before {
+  visibility: hidden;
+}
+
+[role="tooltip"].invisible > [data-popper-arrow]:after {
+  visibility: hidden;
+}

package/src/components/flowbite/Tooltip.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { Tooltip } from "flowbite";
+import type { TooltipInterface, TooltipOptions } from "flowbite";
+
+import "./Tooltip.css";
+
+const props = defineProps<{
+  placement?: "left" | "right" | "top" | "bottom",
+}>();
+
+const tooltipTargetEl = ref(null);
+const tooltipTriggerEl = ref(null);
+
+// eslint-disable-next-line unused-imports/no-unused-vars
+let tooltip: TooltipInterface | null = null;
+
+const placement = computed(() => {
+  return props.placement ?? "top";
+});
+
+onMounted(() => {
+  if (tooltipTargetEl.value && tooltipTriggerEl.value) {
+    const options: TooltipOptions = {
+      placement: placement.value as unknown as undefined,
+      triggerType: "hover",
+    };
+
+    tooltip = new Tooltip(tooltipTargetEl.value, tooltipTriggerEl.value, options);
+  }
+});
+</script>
+
+<template>
+  <div>
+    <div
+      ref="tooltipTriggerEl"
+    >
+      <slot />
+    </div>
+
+    <div
+      ref="tooltipTargetEl"
+      role="tooltip"
+      class="tooltip inline-block absolute invisible px-3 py-2 transition-opacity duration-300 shadow-sm opacity-0"
+      z-9999
+      rounded
+      text-base text-white font-medium
+      bg-gray-900 dark:bg-gray-700
+    >
+      <div>
+        <slot
+          name="popper"
+        />
+      </div>
+
+      <div
+        class="tooltip-arrow"
+        data-popper-arrow
+      />
+    </div>
+  </div>
+</template>

package/src/components.d.ts

@@ -45,6 +45,7 @@ declare module 'vue' {
     TeamUI: typeof import('./components/board/TeamUI.vue')['default']
     TheCounter: typeof import('./components/TheCounter.vue')['default']
     TheInput: typeof import('./components/TheInput.vue')['default']
+    Tooltip: typeof import('./components/flowbite/Tooltip.vue')['default']
     Utility: typeof import('./components/board/Utility.vue')['default']
   }
 }