Skip to content

Commit 28bb5a5

Browse files
JasenkooJasenkoo
committed
feat: Headless components (WIP)
1 parent b59683e commit 28bb5a5

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

58 files changed

+2149
-34
lines changed

‎.gitattributes

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
* text=auto eol=lf

‎dev/DatePicker/DatePicker.vue

+107
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
<template>
2+
<DpRoot v-model="selectedDate" class="relative">
3+
<DpTrigger v-slot="{ clearValue, inputValue }" class="relative">
4+
<DpInput
5+
class="w-full border border-neutral-500 px-2 py-1 rounded-sm focus:outline-none cursor-pointer bg-neutral-800 text-neutral-300"
6+
placeholder="Select date"
7+
/>
8+
<button
9+
v-if="inputValue"
10+
class="absolute top-2/4 right-1 -translate-y-2/4 cursor-pointer"
11+
@click="clearValue"
12+
>
13+
<CancelIcon class="size-4 text-neutral-400" />
14+
</button>
15+
</DpTrigger>
16+
<DpMenu class="bg-neutral-800 border border-neutral-500 rounded-sm text-neutral-300">
17+
<DpInstance>
18+
<DpCalendar v-slot="{ month, year, nextMonth, prevMonth }">
19+
<div class="flex items-center w-full p-0.5">
20+
<button
21+
class="rounded-full p-1 hover:bg-neutral-700 cursor-pointer transition-colors"
22+
@click="prevMonth"
23+
>
24+
<ChevronLeftIcon class="size-4" />
25+
</button>
26+
<button
27+
class="py-1 px-1 hover:bg-neutral-700 rounded-sm cursor-pointer w-full transition-colors"
28+
>
29+
{{ month.label }}
30+
</button>
31+
<button
32+
class="py-1 px-1 hover:bg-neutral-700 rounded-sm cursor-pointer w-full transition-colors"
33+
>
34+
{{ year }}
35+
</button>
36+
<button
37+
class="rounded-full p-1 hover:bg-neutral-700 cursor-pointer transition-colors"
38+
@click="nextMonth"
39+
>
40+
<ChevronRightIcon class="size-4" />
41+
</button>
42+
</div>
43+
<DpCalendarGrid class="w-full table-fixed max-w-[250px] border-collapse">
44+
<DpCalendarGridHead>
45+
<DpCalendarGridHeadRow v-slot="{ days }">
46+
<DpCalendarGridHeadCell
47+
v-for="(day, i) in days"
48+
:key="i"
49+
class="border-b border-b-neutral-500"
50+
>
51+
{{ day.label }}
52+
</DpCalendarGridHeadCell>
53+
</DpCalendarGridHeadRow>
54+
</DpCalendarGridHead>
55+
<DpCalendarGridBody v-slot="{ weeks }">
56+
<DpCalendarGridRow v-for="(week, i) in weeks" :key="i">
57+
<DpCalendarCell
58+
v-for="(day, j) in week.days"
59+
:key="j"
60+
v-slot="{ isToday }"
61+
:day="day.value"
62+
class="text-center h-[35px]"
63+
>
64+
<DPCalendarCellTrigger
65+
class="text-center cursor-pointer hover:bg-neutral-700 h-full w-full transition-colors rounded-sm relative"
66+
:class="{
67+
'text-neutral-700': !day.current,
68+
}"
69+
>
70+
<span
71+
v-if="isToday"
72+
class="w-1 h-1 absolute top-1 right-1 bg-blue-500 rounded-full"
73+
></span>
74+
{{ day.label }}
75+
</DPCalendarCellTrigger>
76+
</DpCalendarCell>
77+
</DpCalendarGridRow>
78+
</DpCalendarGridBody>
79+
</DpCalendarGrid>
80+
</DpCalendar>
81+
</DpInstance>
82+
</DpMenu>
83+
</DpRoot>
84+
</template>
85+
86+
<script lang="ts" setup>
87+
import {
88+
DpRoot,
89+
DpTrigger,
90+
DpInput,
91+
DpMenu,
92+
DpCalendar,
93+
DpInstance,
94+
DpCalendarGrid,
95+
DpCalendarGridRow,
96+
DpCalendarCell,
97+
DpCalendarGridHeadRow,
98+
DpCalendarGridHead,
99+
DpCalendarGridHeadCell,
100+
DpCalendarGridBody,
101+
DPCalendarCellTrigger,
102+
} from '@packages/index.ts';
103+
import { CancelIcon, ChevronLeftIcon, ChevronRightIcon } from '@/components/Icons';
104+
import { ref } from 'vue';
105+
106+
const selectedDate = ref(new Date());
107+
</script>

‎dev/index.css

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@import "tailwindcss";
2+
3+
html, body, #app {
4+
width: 100%;
5+
height: 100%;
6+
}

‎dev/serve.vue

+7-6
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
<template>
2-
<div class="wrapper">
3-
<Datepicker v-model="selectedDate" placeholder="Select Date" />
2+
<div class="bg-neutral-900 w-full h-full">
3+
<div class="flex items-top justify-center h-full w-full p-8">
4+
<div class="p-8 w-[500px]">
5+
<DatePicker></DatePicker>
6+
</div>
7+
</div>
48
</div>
59
</template>
610

711
<script lang="ts" setup>
8-
import { ref } from 'vue';
9-
import Datepicker from '../src/VueDatePicker/VueDatePicker.vue';
10-
11-
const selectedDate = ref();
12+
import DatePicker from './DatePicker/DatePicker.vue';
1213
</script>
1314

1415
<style lang="scss">

‎index.html

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>@vuepic/vue-datepicker</title>
7+
<link href="/dev/index.css" rel="stylesheet">
78
</head>
89
<body>
910
<div id="app"></div>

0 commit comments

Comments
 (0)