Follow-up for date tooltip (#766)

- ​load the Tooltip component on demand
- to show date in format same to Github and Gitea use it for commit ago time tooltips

web/package.json

@@ -20,6 +20,7 @@
     "@kyvg/vue3-notification": "2.3.4",
     "@meforma/vue-toaster": "1.2.2",
     "ansi-to-html": "0.7.2",
+    "dayjs": "1.10.7",
     "floating-vue": "2.0.0-beta.5",
     "fuse.js": "6.4.6",
     "humanize-duration": "3.27.0",

web/src/components/build-feed/BuildFeedItem.vue

@@ -7,7 +7,10 @@
       <div class="flex flex-col mt-2">
         <div class="flex space-x-2 items-center">
           <Icon name="since" />
-          <span v-tooltip="'Created at ' + created">{{ since }}</span>
+          <Tooltip>
+            <span>{{ since }}</span>
+            <template #popper><span class="font-bold">Created</span> {{ created }}</template>
+          </Tooltip>
         </div>
         <div class="flex space-x-2 items-center">
           <Icon name="duration" />
@@ -19,6 +22,7 @@
 </template>
 
 <script lang="ts">
+import { Tooltip } from 'floating-vue';
 import { defineComponent, PropType, toRef } from 'vue';
 
 import Icon from '~/components/atomic/Icon.vue';
@@ -29,7 +33,7 @@ import { BuildFeed } from '~/lib/api/types';
 export default defineComponent({
   name: 'BuildFeedItem',
 
-  components: { BuildStatusIcon, Icon },
+  components: { BuildStatusIcon, Icon, Tooltip },
 
   props: {
     build: {

web/src/components/repo/build/BuildItem.vue

@@ -60,7 +60,10 @@
 
         <div class="flex space-x-2 items-center min-w-0">
           <Icon name="since" />
-          <span v-tooltip="'Created at ' + created" class="truncate">{{ since }}</span>
+          <Tooltip>
+            <span>{{ since }}</span>
+            <template #popper><span class="font-bold">Created</span> {{ created }}</template>
+          </Tooltip>
         </div>
       </div>
     </div>
@@ -68,6 +71,7 @@
 </template>
 
 <script lang="ts">
+import { Tooltip } from 'floating-vue';
 import { defineComponent, PropType, toRef } from 'vue';
 
 import Icon from '~/components/atomic/Icon.vue';
@@ -81,7 +85,7 @@ import { Build } from '~/lib/api/types';
 export default defineComponent({
   name: 'BuildItem',
 
-  components: { Icon, BuildStatusIcon, ListItem, BuildRunningIcon },
+  components: { Icon, BuildStatusIcon, ListItem, BuildRunningIcon, Tooltip },
 
   props: {
     build: {

web/src/compositions/useBuild.ts

@@ -1,11 +1,14 @@
 import { computed, Ref } from 'vue';
 
+import { useDate } from '~/compositions/useDate';
 import { useElapsedTime } from '~/compositions/useElapsedTime';
 import { Build } from '~/lib/api/types';
 import { prettyDuration } from '~/utils/duration';
 import { convertEmojis } from '~/utils/emoji';
 import timeAgo from '~/utils/timeAgo';
 
+const { toLocaleString } = useDate();
+
 export default (build: Ref<Build | undefined>) => {
   const sinceRaw = computed(() => {
     if (!build.value) {
@@ -104,8 +107,8 @@ export default (build: Ref<Build | undefined>) => {
 
     const start = build.value.created_at || 0;
 
-    // sv-SE is in format YYYY-MM-DD HH:m:s
+    return toLocaleString(new Date(start * 1000));
-    return new Date(start * 1000).toLocaleString('sv-SE');
   });
+
   return { since, duration, message, prettyRef, created };
 };

web/src/compositions/useDate.ts

@@ -0,0 +1,18 @@
+import dayjs from 'dayjs';
+import advancedFormat from 'dayjs/plugin/advancedFormat';
+import timezone from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
+
+dayjs.extend(timezone);
+dayjs.extend(utc);
+dayjs.extend(advancedFormat);
+
+export function useDate() {
+  function toLocaleString(date: Date) {
+    return dayjs(date).format('MMM D, YYYY, HH:mm z');
+  }
+
+  return {
+    toLocaleString,
+  };
+}

web/src/main.ts

@@ -2,7 +2,6 @@ import 'windi.css';
 import 'floating-vue/dist/style.css'; // eslint-disable-line no-restricted-imports
 import '~/compositions/useFavicon';
 
-import { Tooltip, VClosePopper, VTooltip } from 'floating-vue';
 import { createPinia } from 'pinia';
 import { createApp } from 'vue';
 
@@ -16,11 +15,6 @@ const app = createApp(App);
 app.use(router);
 app.use(notifications);
 
-app.directive('tooltip', VTooltip);
-app.directive('close-popper', VClosePopper);
-app.component('v-tooltip', Tooltip); // eslint-disable-line vue/component-definition-name-casing
-app.component('VTooltip', Tooltip);
-
 app.use(createPinia());
 app.mount('#app');
 

web/src/views/repo/build/BuildWrapper.vue

@@ -51,7 +51,10 @@
         <div class="flex justify-between gap-x-4 text-gray-500 flex-shrink-0 pb-2 md:p-0 mx-auto md:mr-0">
           <div class="flex space-x-1 items-center flex-shrink-0">
             <Icon name="since" />
-            <span v-tooltip="'Created at ' + created">{{ since }}</span>
+            <Tooltip>
+              <span>{{ since }}</span>
+              <template #popper><span class="font-bold">Created</span> {{ created }}</template>
+            </Tooltip>
           </div>
           <div class="flex space-x-1 items-center flex-shrink-0">
             <Icon name="duration" />
@@ -66,6 +69,7 @@
 </template>
 
 <script lang="ts">
+import { Tooltip } from 'floating-vue';
 import {
   computed,
   defineComponent,
@@ -105,6 +109,7 @@ export default defineComponent({
     IconButton,
     Tabs,
     Tab,
+    Tooltip,
   },
 
   props: {

web/yarn.lock

@@ -862,6 +862,11 @@ csstype@^2.6.8:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.19.tgz#feeb5aae89020bb389e1f63669a5ed490e391caa"
   integrity sha512-ZVxXaNy28/k3kJg0Fou5MiYpp88j7H9hLZp8PDC3jV0WFjfH5E9xHb56L0W59cPbKbcHXeP4qyT8PrHp8t6LcQ==
 
+dayjs@1.10.7:
+  version "1.10.7"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.7.tgz#2cf5f91add28116748440866a0a1d26f3a6ce468"
+  integrity sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig==
+
 debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"