v-datepicker-lite 0.0.2 → 0.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +64 -79
- package/index.js +1292 -786
- package/package.json +9 -3
- package/style.css +1 -1
- package/types/index.d.ts +36 -36
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "v-datepicker-lite",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.4",
|
|
4
4
|
"description": "A lightweight Vue 3 date picker with date, time, date-time, week, and month modes",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": "safdar-azeem",
|
|
@@ -47,7 +47,13 @@
|
|
|
47
47
|
"vite-plugin-dts": "^3.9.1",
|
|
48
48
|
"vue-tsc": "^2.0.21"
|
|
49
49
|
},
|
|
50
|
-
"
|
|
51
|
-
"
|
|
50
|
+
"prettier": {
|
|
51
|
+
"printWidth": 105,
|
|
52
|
+
"semi": false,
|
|
53
|
+
"singleQuote": true,
|
|
54
|
+
"trailingComma": "es5",
|
|
55
|
+
"tabWidth": 3,
|
|
56
|
+
"endOfLine": "auto",
|
|
57
|
+
"bracketSameLine": true
|
|
52
58
|
}
|
|
53
59
|
}
|
package/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--date-picker-primary: #
|
|
1
|
+
:root{--date-picker-primary: #2d66ed;--date-picker-primary-fg: #ffffff;--date-picker-text: inherit;--date-picker-border: #00000020;--date-picker-secondary: #00000010;--date-picker-hover: #00000010;--date-picker-disabled: #000000b4;--date-picker-today: #00000010;--date-picker-radius: .375em}.ml-auto{margin-left:auto}.date-picker{position:relative;display:inline-block;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;color:var(--date-picker-text)}.date-picker-content{padding:0 .5em .5em}.date-picker-table{width:100%;border-collapse:collapse;border-spacing:0;margin:0}.date-picker-table:not(.date-picker-week-table) .date-picker-day-cell{padding:.13em}td,th{padding:0;margin:0;border:none}.date-picker-weekdays-row th{padding:.6em 0;font-size:.78em}.date-picker-weekday{display:flex;align-items:center;justify-content:center;height:2em;font-size:.75em;font-weight:500;opacity:.5;padding:.25em}.date-picker-days-body tr{border:none}.date-picker-day{display:flex;align-items:center;justify-content:center;width:100%;height:2em;border:none;background:none;border-radius:var(--date-picker-radius);cursor:pointer;font-size:.95em;color:var(--date-picker-text)}.date-picker-day:hover{background:var(--date-picker-hover)}.date-picker-day.other-month{opacity:.4}.date-picker-day.today{background:var(--date-picker-today);font-weight:400}.date-picker-day.selected{background:var(--date-picker-primary);color:var(--date-picker-primary-fg)}.date-picker-day.disabled{cursor:not-allowed;opacity:.5}.date-picker-day.disabled:hover{background:none}.date-picker-datetime-layout{display:flex;gap:.65em;width:100%}.date-picker-date-section{flex:1;height:100%}.date-picker-datetime-layout .date-picker-date-section{width:75%}.date-picker-time-section{width:100%;max-width:74px;border-left:1px solid var(--date-picker-border);display:flex;flex-direction:column}.date-picker-time-section .time-picker-container{flex:1;overflow-y:auto}.date-picker-week-table .date-picker-week-row{cursor:pointer}.date-picker-week-table .date-picker-week-row:not(.selected):hover td{background:var(--date-picker-hover)}.date-picker-week-table td{border-radius:0;padding:0}.date-picker-week-table .date-picker-day-cell .date-picker-day{border-radius:0}.date-picker-week-header{text-align:center}.date-picker-week-row .date-picker-week-number-cell{height:90%;padding-right:5px;background:var(--date-picker-secondary);opacity:.7;border-bottom:1px solid var(--date-picker-border);text-align:center;width:2.5em;font-size:.8em}.date-picker-week-row:last-child .date-picker-week-number-cell{border-bottom:none}.date-picker-week-row.selected .date-picker-day{background:var(--date-picker-primary);color:var(--date-picker-primary-fg)}.date-picker-months-table{width:100%}.date-picker-months-body .date-picker-month-cell{padding:2px}.date-picker-month{display:flex;align-items:center;justify-content:center;width:100%;height:2.5em;border:none;background:none;border-radius:var(--date-picker-radius);cursor:pointer;font-size:inherit;color:var(--date-picker-text)}.date-picker-month:hover{background:var(--date-picker-hover)}.date-picker-month.selected{background:var(--date-picker-primary);color:var(--date-picker-primary-fg)}.year-view-layout{display:flex;gap:1px;height:100%;padding-right:2px}.years-section{width:25%;min-width:60px;max-width:80px;border-right:1px solid var(--date-picker-border);display:flex;flex-direction:column;height:100%}.years-list{display:flex;flex-direction:column;flex:1;overflow-y:auto;overflow-x:hidden}.year-item{display:flex;align-items:center;justify-content:center;padding:.5em;border:none;background:none;cursor:pointer;font-size:.875em;color:var(--date-picker-text);transition:background-color .15s ease;white-space:nowrap;flex-shrink:0}.year-item:hover{background:var(--date-picker-hover)}.year-item.selected{background:var(--date-picker-primary);color:var(--date-picker-primary-fg)}.year-item.current{font-weight:600}.months-section{width:75%;display:flex;flex-direction:column;height:100%}.months-section .date-picker-months-table{overflow:auto;flex:1}.year-view-layout .months-section{padding:5px 3px;height:94.5%}.time-picker-container{height:100%;display:flex;flex-direction:column}.time-wheel{height:100%;overflow-y:auto;display:flex;flex-direction:column;border:1px solid var(--date-picker-border);border-radius:var(--date-picker-radius)}.time-option{height:30px;display:flex;align-items:center;justify-content:center;width:100%;cursor:pointer;font-size:.875em;color:var(--date-picker-text);flex-shrink:0}.time-option:hover{background:var(--date-picker-hover)}.time-option.selected{background:var(--date-picker-primary);color:var(--date-picker-primary-fg);font-weight:500}.date-picker-time-section .time-wheel{border:none;border-radius:0;height:100%;max-height:none}.date-picker-header{display:flex;align-items:center;justify-content:space-between;padding:.45em .4em;gap:.2em;border-bottom:1px solid var(--date-picker-border)}.date-picker-nav-button{display:flex;align-items:center;justify-content:center;width:1.65em;height:1.65em;border:none;background:none;border-radius:var(--date-picker-radius);cursor:pointer;transition:background-color .15s ease;opacity:.7}.date-picker-nav-button:hover:not(:disabled){background:var(--date-picker-hover)}.date-picker-nav-button:disabled{opacity:.5;cursor:not-allowed}.date-picker-nav-icon,.date-picker-header *{color:inherit!important}.date-picker-nav-icon svg{width:1.3em;height:1.3em;color:inherit!important;fill:currentColor!important}.date-picker-title{font-weight:600;font-size:1em;cursor:pointer;padding:.25em .5em;border-radius:var(--date-picker-radius);transition:background-color .15s ease;border:none;background:none;color:inherit}.date-picker-title:hover{background:var(--date-picker-hover)}.date-picker svg{display:flex;color:inherit}.date-picker *::-webkit-scrollbar{height:3px;width:3px}.date-picker *::-webkit-scrollbar-track{border-radius:5px;background-color:transparent}.date-picker *::-webkit-scrollbar-track:hover{background-color:transparent}.date-picker *::-webkit-scrollbar-track:active{background-color:transparent}.date-picker *::-webkit-scrollbar-thumb{border-radius:2px;background-color:var(--date-picker-border)}.date-picker *::-webkit-scrollbar-thumb:hover{background-color:var(--date-picker-border)}.date-picker *::-webkit-scrollbar-thumb:active{background-color:var(--date-picker-border)}
|
package/types/index.d.ts
CHANGED
|
@@ -1,58 +1,58 @@
|
|
|
1
1
|
export interface DisabledDateRange {
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
start: string
|
|
3
|
+
end?: string
|
|
4
4
|
}
|
|
5
5
|
|
|
6
6
|
export interface DatePickerProps {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
7
|
+
value?: Date | string | null
|
|
8
|
+
mode?: 'date' | 'time' | 'dateTime' | 'week' | 'month'
|
|
9
|
+
minDate?: string
|
|
10
|
+
maxDate?: string
|
|
11
|
+
disabledDates?: DisabledDateRange[]
|
|
12
|
+
format?: string
|
|
13
|
+
disabled?: boolean
|
|
14
|
+
readonly?: boolean
|
|
15
|
+
timeFormat?: '12h' | '24h'
|
|
16
|
+
timeInterval?: 15 | 30 | 60
|
|
17
17
|
}
|
|
18
18
|
|
|
19
19
|
export interface DatePickerEmits {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
20
|
+
'update:value': [value: Date | string | null]
|
|
21
|
+
change: [value: Date | string | null]
|
|
22
|
+
select: [value: Date | string | null]
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
export interface CalendarDate {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
26
|
+
date: Date
|
|
27
|
+
day: number
|
|
28
|
+
month: number
|
|
29
|
+
year: number
|
|
30
|
+
isCurrentMonth: boolean
|
|
31
|
+
isToday: boolean
|
|
32
|
+
isSelected: boolean
|
|
33
|
+
isDisabled: boolean
|
|
34
|
+
weekNumber?: number
|
|
35
35
|
}
|
|
36
36
|
|
|
37
37
|
export interface WeekData {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
38
|
+
weekNumber: number
|
|
39
|
+
days: CalendarDate[]
|
|
40
|
+
isSelected: boolean
|
|
41
41
|
}
|
|
42
42
|
|
|
43
43
|
export interface MonthData {
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
44
|
+
month: number
|
|
45
|
+
year: number
|
|
46
|
+
name: string
|
|
47
|
+
isSelected: boolean
|
|
48
|
+
isDisabled: boolean
|
|
49
49
|
}
|
|
50
50
|
|
|
51
51
|
export interface YearData {
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
52
|
+
year: number
|
|
53
|
+
isSelected: boolean
|
|
54
|
+
isDisabled: boolean
|
|
55
|
+
isCurrent: boolean
|
|
56
56
|
}
|
|
57
57
|
|
|
58
58
|
export type DatePickerMode = 'date' | 'time' | 'dateTime' | 'week' | 'month'
|