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

Added phosphor icons

Browse Source
This commit is contained in:
Alexis
2024-04-04 18:24:55 +02:00
parent 71ae831483
commit 8e500c4654
7 changed files with 42 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
package-lock.json generated
View File

@@ -8,6 +8,7 @@
"name": "vue-project",
"version": "0.0.0",
"dependencies": {
"@phosphor-icons/vue": "^2.1.6",
"@vueuse/core": "^10.9.0",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.0",
@@ -888,6 +889,17 @@
"node": ">= 8"
}
},
"node_modules/@phosphor-icons/vue": {
"version": "2.1.6",
"resolved": "https://registry.npmjs.org/@phosphor-icons/vue/-/vue-2.1.6.tgz",
"integrity": "sha512-j4iVvNT4JbDR2udIVfakKZHd14i3jCvO4b24OC0W/1rasftU8qVg1Tnb3QDwAT0teNU+UxvaM+kCWxfGHC2dUg==",
"engines": {
"node": ">=14"
},
"peerDependencies": {
"vue": ">=3.2.39"
}
},
"node_modules/@pkgjs/parseargs": {
"version": "0.11.0",
"resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",

1
package.json
View File

@@ -17,6 +17,7 @@
"format": "prettier --write src/"
},
"dependencies": {
"@phosphor-icons/vue": "^2.1.6",
"@vueuse/core": "^10.9.0",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.0",

3
src/assets/main.css
View File

@@ -75,7 +75,4 @@
body {
@apply bg-background text-foreground;
}
svg {
fill: hsl(var(--foreground));
}
}

5
src/components/calendar/CalendarMenu.vue
View File

@@ -3,6 +3,7 @@ import { useCalendar } from '@/stores/calendar'
import CalendarMenuToday from './CalendarMenuToday.vue'
import CalendarMenuNav from './CalendarMenuNav.vue'
import CalendarSwitch from './CalendarSwitch.vue'
import CalendarMenuSearch from './CalendarMenuSearch.vue'
const { currentDate } = useCalendar()
</script>
@@ -29,7 +30,9 @@ const { currentDate } = useCalendar()
</h1>
</div>
</div>
<div class="md:col-span-3"></div>
<div class="md:col-span-3">
<CalendarMenuSearch />
</div>
</div>
</div>
</header>

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

@@ -2,6 +2,12 @@
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
import { useCalendar } from '@/stores/calendar'
import Button from '../ui/button/Button.vue'
import {
PhCaretDoubleLeft,
PhCaretDoubleRight,
PhCaretLeft,
PhCaretRight
} from '@phosphor-icons/vue'
const { decrementMonth, incrementMonth, decrementYear, incrementYear } = useCalendar()
</script>
@@ -14,11 +20,7 @@ const { decrementMonth, incrementMonth, decrementYear, incrementYear } = useCale
<Tooltip>
<TooltipTrigger>
<Button variant="outline" size="icon" @click="decrementYear()">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 256 256">
<path
d="M205.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L131.31,128ZM51.31,128l74.35-74.34a8,8,0,0,0-11.32-11.32l-80,80a8,8,0,0,0,0,11.32l80,80a8,8,0,0,0,11.32-11.32Z"
/>
</svg>
<PhCaretDoubleLeft size="18" />
</Button>
</TooltipTrigger>
<TooltipContent>
@@ -31,11 +33,7 @@ const { decrementMonth, incrementMonth, decrementYear, incrementYear } = useCale
<Tooltip>
<TooltipTrigger>
<Button variant="outline" size="icon" @click="decrementMonth()">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 256 256">
<path
d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"
/>
</svg>
<PhCaretLeft size="18" />
</Button>
</TooltipTrigger>
<TooltipContent>
@@ -48,11 +46,7 @@ const { decrementMonth, incrementMonth, decrementYear, incrementYear } = useCale
<Tooltip>
<TooltipTrigger>
<Button variant="outline" size="icon" @click="incrementMonth()">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 256 256">
<path
d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"
/>
</svg>
<PhCaretRight size="18" />
</Button>
</TooltipTrigger>
<TooltipContent>
@@ -65,11 +59,8 @@ const { decrementMonth, incrementMonth, decrementYear, incrementYear } = useCale
<Tooltip>
<TooltipTrigger>
<Button variant="outline" size="icon" @click="incrementYear()">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 256 256">
<path
d="M141.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L124.69,128,50.34,53.66A8,8,0,0,1,61.66,42.34l80,80A8,8,0,0,1,141.66,133.66Zm80-11.32-80-80a8,8,0,0,0-11.32,11.32L204.69,128l-74.35,74.34a8,8,0,0,0,11.32,11.32l80-80A8,8,0,0,0,221.66,122.34Z"
></path></svg
></Button>
<PhCaretDoubleRight size="18" />
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Année suivante</p>

12
src/components/calendar/CalendarMenuSearch.vue Normal file
View File

@@ -0,0 +1,12 @@
<script lang="ts" setup>
import { Button } from '@/components/ui/button'
import { PhMagnifyingGlass } from '@phosphor-icons/vue'
</script>
<template>
<Button size="default">
<PhMagnifyingGlass size="18" weight="fill" />
Rechercher
</Button>
</template>

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

@@ -10,6 +10,7 @@ import {
import Button from '../ui/button/Button.vue'
import { useCalendar } from '@/stores/calendar'
import { computed } from 'vue'
import { PhCalendarBlank } from '@phosphor-icons/vue'
const { currentConfig, viewTypeOptions, getViewTypeTitle, setViewType } = useCalendar()
@@ -20,11 +21,7 @@ const viewTypeTitle = computed(() => getViewTypeTitle(currentConfig.viewType))
<DropdownMenu>
<DropdownMenuTrigger>
<Button size="sm" variant="secondary">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 256 256">
<path
d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Zm-68-76a12,12,0,1,1-12-12A12,12,0,0,1,140,132Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,184,132ZM96,172a12,12,0,1,1-12-12A12,12,0,0,1,96,172Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,140,172Zm44,0a12,12,0,1,1-12-12A12,12,0,0,1,184,172Z"
/>
</svg>
<PhCalendarBlank size="18" weight="fill" />
{{ viewTypeTitle }}
</Button>