Joururi/leim-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Renamed project to tools

Browse Source 
Also added tooltip fixes
This commit is contained in:
Alexis
2024-05-05 16:48:48 +02:00
parent bf5b951e75
commit 77892e79a1
13 changed files with 35 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
README.md
View File

@@ -1,61 +1,5 @@
# vue-project # Leim Tools
A congregate of tools used to visualize TTRPG elements and help content creators (mostly me for now tbh) build their worlds.
This template should help get you started developing with Vue 3 in Vite. ## Timeline
Visual helper for time-related data, such as events, eras and characters. Helpful to know how old a character is while something is happening in the world, or how far two events are separated in the timeline.
## Recommended IDE Setup
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
## Type Support for `.vue` Imports in TS
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
## Customize configuration
See [Vite Configuration Reference](https://vitejs.dev/config/).
## Project Setup
```sh
npm install
```
### Compile and Hot-Reload for Development
```sh
npm run dev
```
### Type-Check, Compile and Minify for Production
```sh
npm run build
```
### Run Headed Component Tests with [Cypress Component Testing](https://on.cypress.io/component)
```sh
npm run test:unit:dev # or `npm run test:unit` for headless testing
```
### Run End-to-End Tests with [Cypress](https://www.cypress.io/)
```sh
npm run test:e2e:dev
```
This runs the end-to-end tests against the Vite development server.
It is much faster than the production build.
But it's still recommended to test the production build with `test:e2e` before deploying (e.g. in CI environments):
```sh
npm run build
npm run test:e2e
```
### Lint with [ESLint](https://eslint.org/)
```sh
npm run lint
```

8
index.html
View File

@@ -9,8 +9,6 @@
<meta name="description" content="Outil de visualisation chronologique des évènements de Léim" /> <meta name="description" content="Outil de visualisation chronologique des évènements de Léim" />
<meta name="generator" content="VueJS" /> <meta name="generator" content="VueJS" />
<title>Chronologie — Leim Wiki</title>
<meta name="robots" content="noindex, nofollow"> <meta name="robots" content="noindex, nofollow">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon.png">
@@ -21,9 +19,9 @@
<meta name="msapplication-TileColor" content="#00aba9"> <meta name="msapplication-TileColor" content="#00aba9">
<meta name="theme-color" content="#a9d1eb"> <meta name="theme-color" content="#a9d1eb">
<meta property="og:title" content="Chronologie — Leim Wiki"/> <meta property="og:title" content="Outils — Leim Wiki"/>
<meta property="og:type" content="timeline" /> <meta property="og:type" content="tabletop-tools" />
<meta property="og:url" content="timeline.alexcreates.fr" /> <meta property="og:url" content="ttt.alexcreates.fr" />
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

4
package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "vue-project", "name": "leim-tool",
"version": "0.0.0", "version": "0.1.0",
"private": true, "private": true,
"type": "module", "type": "module",
"scripts": { "scripts": {

8
src/components/calendar/CalendarMenuNav.vue
View File

@@ -147,7 +147,7 @@ function toFutureFar(): void {
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<TooltipProvider :delayDuration="250"> <TooltipProvider :delayDuration="250">
<Tooltip> <Tooltip>
<TooltipTrigger> <TooltipTrigger as-child>
<Button variant="outline" size="icon" @click="toPastFar()"> <Button variant="outline" size="icon" @click="toPastFar()">
<PhCaretDoubleLeft size="18" /> <PhCaretDoubleLeft size="18" />
</Button> </Button>
@@ -160,7 +160,7 @@ function toFutureFar(): void {
<TooltipProvider :delayDuration="250"> <TooltipProvider :delayDuration="250">
<Tooltip> <Tooltip>
<TooltipTrigger> <TooltipTrigger as-child>
<Button variant="outline" size="icon" @click="toPastNear()"> <Button variant="outline" size="icon" @click="toPastNear()">
<PhCaretLeft size="18" /> <PhCaretLeft size="18" />
</Button> </Button>
@@ -173,7 +173,7 @@ function toFutureFar(): void {
<TooltipProvider :delayDuration="250"> <TooltipProvider :delayDuration="250">
<Tooltip> <Tooltip>
<TooltipTrigger> <TooltipTrigger as-child>
<Button variant="outline" size="icon" @click="toFutureNear()"> <Button variant="outline" size="icon" @click="toFutureNear()">
<PhCaretRight size="18" /> <PhCaretRight size="18" />
</Button> </Button>
@@ -186,7 +186,7 @@ function toFutureFar(): void {
<TooltipProvider :delayDuration="250"> <TooltipProvider :delayDuration="250">
<Tooltip> <Tooltip>
<TooltipTrigger> <TooltipTrigger as-child>
<Button variant="outline" size="icon" @click="toFutureFar()"> <Button variant="outline" size="icon" @click="toFutureFar()">
<PhCaretDoubleRight size="18" /> <PhCaretDoubleRight size="18" />
</Button> </Button>

4
src/components/calendar/CalendarMenuSubnav.vue
View File

@@ -68,7 +68,7 @@ function handleGotoPreviousEventPage(position: 'next' | 'prev' = 'next') {
<div class="border-slate-700 border-x-[1px] border-t-[1px] rounded-t-sm"> <div class="border-slate-700 border-x-[1px] border-t-[1px] rounded-t-sm">
<TooltipProvider :delayDuration="250"> <TooltipProvider :delayDuration="250">
<Tooltip> <Tooltip>
<TooltipTrigger> <TooltipTrigger as-child>
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
@@ -87,7 +87,7 @@ function handleGotoPreviousEventPage(position: 'next' | 'prev' = 'next') {
<div class="border-slate-700 border-x-[1px] border-t-[1px] rounded-t-sm"> <div class="border-slate-700 border-x-[1px] border-t-[1px] rounded-t-sm">
<TooltipProvider :delayDuration="250"> <TooltipProvider :delayDuration="250">
<Tooltip> <Tooltip>
<TooltipTrigger> <TooltipTrigger as-child>
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"

2
src/components/calendar/CalendarMenuToday.vue
View File

@@ -20,7 +20,7 @@ const isDefaultDate = computed(() => {
<template> <template>
<TooltipProvider :delayDuration="250"> <TooltipProvider :delayDuration="250">
<Tooltip> <Tooltip>
<TooltipTrigger> <TooltipTrigger as-child>
<Button @click="jumpToDefaultDate" size="sm" :disabled="isDefaultDate"> <Button @click="jumpToDefaultDate" size="sm" :disabled="isDefaultDate">
Aujourd'hui Aujourd'hui
</Button> </Button>

2
src/components/calendar/CalendarSwitch.vue
View File

@@ -20,7 +20,7 @@ const viewTypeTitle = computed(() => getViewTypeTitle(currentConfig.viewType))
<template> <template>
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger> <DropdownMenuTrigger as-child>
<Button size="sm" variant="secondary"> <Button size="sm" variant="secondary">
<PhCalendarBlank size="18" weight="fill" /> <PhCalendarBlank size="18" weight="fill" />

4
src/components/calendar/Sidebar.vue
View File

@@ -19,7 +19,7 @@ const { revealAdvancedSearch } = useCalendar()
<li> <li>
<TooltipProvider :delayDuration="100"> <TooltipProvider :delayDuration="100">
<Tooltip> <Tooltip>
<TooltipTrigger> <TooltipTrigger as-child>
<Button variant="ghost" size="icon" class="rounded-full" as-child> <Button variant="ghost" size="icon" class="rounded-full" as-child>
<RouterLink to="/"> <RouterLink to="/">
<PhHouse size="24" weight="fill" /> <PhHouse size="24" weight="fill" />
@@ -35,7 +35,7 @@ const { revealAdvancedSearch } = useCalendar()
<li> <li>
<TooltipProvider :delayDuration="100"> <TooltipProvider :delayDuration="100">
<Tooltip> <Tooltip>
<TooltipTrigger> <TooltipTrigger as-child>
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"

4
src/components/calendar/search/CalendarSearch.vue
View File

@@ -361,7 +361,7 @@ function handleCategorySelect(e: any) {
<TooltipProvider :delayDuration="250"> <TooltipProvider :delayDuration="250">
<Tooltip> <Tooltip>
<TooltipTrigger> <TooltipTrigger as-child>
<Button <Button
:variant="selectedOrder === 'desc' ? 'secondary' : 'outline'" :variant="selectedOrder === 'desc' ? 'secondary' : 'outline'"
size="icon" size="icon"
@@ -378,7 +378,7 @@ function handleCategorySelect(e: any) {
<TooltipProvider :delayDuration="250"> <TooltipProvider :delayDuration="250">
<Tooltip> <Tooltip>
<TooltipTrigger> <TooltipTrigger as-child>
<Button <Button
:variant="selectedOrder === 'asc' ? 'secondary' : 'outline'" :variant="selectedOrder === 'asc' ? 'secondary' : 'outline'"
size="icon" size="icon"

8
src/components/calendar/search/lists/CharacterCallout.vue
View File

@@ -39,7 +39,7 @@ const { getFormattedDateTitle } = useCalendar()
<li v-if="character.birth"> <li v-if="character.birth">
<TooltipProvider :delayDuration="100"> <TooltipProvider :delayDuration="100">
<Tooltip> <Tooltip>
<TooltipTrigger> <TooltipTrigger as-child>
<Button <Button
@click="$emit('query:date-jump', character.birth!)" @click="$emit('query:date-jump', character.birth!)"
variant="ghost" variant="ghost"
@@ -49,7 +49,7 @@ const { getFormattedDateTitle } = useCalendar()
{{ getFormattedDateTitle(character.birth, true) }} {{ getFormattedDateTitle(character.birth, true) }}
</Button> </Button>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent> <TooltipContent :side="'bottom'" :align="'end'" :align-offset="20">
<p>Date de naissance</p> <p>Date de naissance</p>
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
@@ -59,7 +59,7 @@ const { getFormattedDateTitle } = useCalendar()
<li v-if="character.death"> <li v-if="character.death">
<TooltipProvider :delayDuration="100"> <TooltipProvider :delayDuration="100">
<Tooltip> <Tooltip>
<TooltipTrigger> <TooltipTrigger as-child>
<Button <Button
@click="$emit('query:date-jump', character.death!)" @click="$emit('query:date-jump', character.death!)"
variant="ghost" variant="ghost"
@@ -69,7 +69,7 @@ const { getFormattedDateTitle } = useCalendar()
{{ getFormattedDateTitle(character.death, true) }} {{ getFormattedDateTitle(character.death, true) }}
</Button> </Button>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent> <TooltipContent :side="'bottom'" :align="'start'" :align-offset="20">
<p>Date de décès</p> <p>Date de décès</p>
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>

4
src/views/CalendarPage.vue
View File

@@ -2,6 +2,8 @@
import { storeToRefs } from 'pinia' import { storeToRefs } from 'pinia'
import { onMounted } from 'vue' import { onMounted } from 'vue'
import { useCalendar } from '@/stores/CalendarStore' import { useCalendar } from '@/stores/CalendarStore'
import { useTitle } from '@vueuse/core'
import { titleTemplate } from './meta'
import Calendar from '@/components/calendar/Calendar.vue' import Calendar from '@/components/calendar/Calendar.vue'
import Sidebar from '@/components/calendar/Sidebar.vue' import Sidebar from '@/components/calendar/Sidebar.vue'
@@ -11,6 +13,8 @@ const { validateUrlParams } = useCalendar()
const { isAdvancedSearchOpen } = storeToRefs(useCalendar()) const { isAdvancedSearchOpen } = storeToRefs(useCalendar())
onMounted(() => validateUrlParams()) onMounted(() => validateUrlParams())
useTitle('Calendrier', titleTemplate)
</script> </script>
<template> <template>

5
src/views/HomePage.vue
View File

@@ -1,6 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { useTitle } from '@vueuse/core'
import { titleTemplate } from './meta'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge' import { Badge } from '@/components/ui/badge'
useTitle('Outils', titleTemplate)
</script> </script>
<template> <template>

1
src/views/meta.ts Normal file
View File

@@ -0,0 +1 @@
export const titleTemplate = { titleTemplate: '%s — TTTools' }