test/crm
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: datepicker espresso style

Browse Source
This commit is contained in:
Shariq Ansari 2024-02-07 20:23:31 +05:30
parent 3e1b3d9bf2
commit 4849860501
1 changed files with 54 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
frontend/src/components/Controls/DatePicker.vue
View File

@ -18,88 +18,86 @@
</template> </template>
<template #body="{ togglePopover }"> <template #body="{ togglePopover }">
<div <div
class="my-2 w-fit select-none space-y-3 rounded border border-gray-50 bg-white p-3 text-base shadow" class="mt-2 w-fit select-none divide-y rounded-lg bg-white text-base shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
> >
<div class="flex items-center text-gray-700"> <div class="flex items-center p-1 text-gray-500">
<div <Button variant="ghost" class="h-7 w-7" @click="prevMonth">
class="flex h-6 w-6 cursor-pointer items-center justify-center rounded hover:bg-gray-100" <FeatherIcon stroke-width="2" name="chevron-left" class="h-4 w-4" />
> </Button>
<FeatherIcon <div class="flex-1 text-center text-base font-medium text-gray-700">
@click="prevMonth"
name="chevron-left"
class="h-5 w-5"
/>
</div>
<div class="flex-1 text-center text-lg font-medium text-blue-500">
{{ formatMonth }} {{ formatMonth }}
</div> </div>
<div <Button variant="ghost" class="h-7 w-7" @click="nextMonth">
class="flex h-6 w-6 cursor-pointer items-center justify-center rounded hover:bg-gray-100"
>
<FeatherIcon <FeatherIcon
@click="nextMonth" stroke-width="2"
name="chevron-right" name="chevron-right"
class="h-5 w-5" class="h-4 w-4"
/> />
</div> </Button>
</div> </div>
<div class="flex space-x-2"> <div class="flex items-center justify-center gap-1 p-1">
<Input <TextInput
class="text-sm"
type="text" type="text"
:value="value" :value="value"
@change="selectDate(getDate($event)) || togglePopover()" @change="selectDate(getDate($event)) || togglePopover()"
></Input> />
<Button class="h-7" @click="selectDate(getDate()) || togglePopover()"> <Button
Today label="Today"
</Button> class="text-sm"
@click="selectDate(getDate()) || togglePopover()"
/>
</div> </div>
<div class="mt-2 flex flex-col items-center justify-center text-base"> <div
<div class="flex w-full items-center space-x-1 text-gray-600"> class="flex flex-col items-center justify-center p-1 text-gray-800"
>
<div class="flex items-center text-xs uppercase">
<div <div
class="flex h-[30px] w-[30px] items-center justify-center text-center" class="flex h-6 w-8 items-center justify-center text-center"
v-for="(d, i) in ['S', 'M', 'T', 'W', 'T', 'F', 'S']" v-for="(d, i) in ['su', 'mo', 'tu', 'we', 'th', 'fr', 'sa']"
:key="i" :key="i"
> >
{{ d }} {{ d }}
</div> </div>
</div> </div>
<div v-for="(week, i) in datesAsWeeks" :key="i" class="mt-1"> <div
<div class="flex w-full items-center"> class="flex items-center"
<div v-for="(week, i) in datesAsWeeks"
v-for="date in week" :key="i"
:key="toValue(date)" >
class="mr-1 flex h-[30px] w-[30px] cursor-pointer items-center justify-center rounded last:mr-0 hover:bg-blue-50 hover:text-blue-500" <div
:class="{ v-for="date in week"
'text-gray-600': date.getMonth() !== currentMonth - 1, :key="toValue(date)"
'text-blue-500': toValue(date) === toValue(today), class="flex h-8 w-8 cursor-pointer items-center justify-center rounded hover:bg-gray-50"
'bg-blue-50 font-semibold text-blue-500': :class="{
toValue(date) === value, 'text-gray-400': date.getMonth() !== currentMonth - 1,
}" 'font-extrabold text-gray-900':
@click=" toValue(date) === toValue(today),
() => { 'bg-gray-800 text-white hover:bg-gray-800':
selectDate(date) toValue(date) === value,
togglePopover() }"
} @click="
" () => {
> selectDate(date)
{{ date.getDate() }} togglePopover()
</div> }
"
>
{{ date.getDate() }}
</div> </div>
</div> </div>
</div> </div>
<div class="flex justify-end p-1">
<div class="mt-1 flex w-full justify-end"> <Button
<div label="Clear"
class="cursor-pointer rounded px-2 py-1 hover:bg-gray-100" class="text-sm"
@click=" @click="
() => { () => {
selectDate('') selectDate('')
togglePopover() togglePopover()
} }
" "
> />
Clear
</div>
</div> </div>
</div> </div>
</template> </template>