@admin-layout/tailwind-ui 10.1.1-alpha.14 → 10.1.1-alpha.21
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/lib/components/DatePicker/DatePicker.d.ts +5 -0
- package/lib/components/DatePicker/DatePicker.d.ts.map +1 -0
- package/lib/components/DatePicker/DatePicker.js +218 -0
- package/lib/components/DatePicker/DatePicker.js.map +1 -0
- package/lib/components/DatePicker/index.d.ts +3 -0
- package/lib/components/DatePicker/index.d.ts.map +1 -0
- package/lib/components/DatePicker/machine.d.ts +3 -0
- package/lib/components/DatePicker/machine.d.ts.map +1 -0
- package/lib/components/DatePicker/machine.js +95 -0
- package/lib/components/DatePicker/machine.js.map +1 -0
- package/lib/components/DatePicker/types.d.ts +34 -0
- package/lib/components/DatePicker/types.d.ts.map +1 -0
- package/lib/components/DatePicker/utils.d.ts +25 -0
- package/lib/components/DatePicker/utils.d.ts.map +1 -0
- package/lib/components/DatePicker/utils.js +28 -0
- package/lib/components/DatePicker/utils.js.map +1 -0
- package/lib/components/index.d.ts +1 -0
- package/lib/components/index.d.ts.map +1 -1
- package/lib/index.js +1 -1
- package/package.json +3 -3
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAI1C,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAmPhD,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -0,0 +1,218 @@
|
|
|
1
|
+
import {jsxs,jsx}from'react/jsx-runtime';import {useRef,useEffect}from'react';import {useActor}from'@xstate/react';import {datePickerMachine}from'./machine.js';import {getDaysInMonth,getYearsRange,months}from'./utils.js';const DatePicker = ({
|
|
2
|
+
value,
|
|
3
|
+
onChange,
|
|
4
|
+
placeholder = 'Select date',
|
|
5
|
+
className = ''
|
|
6
|
+
}) => {
|
|
7
|
+
const [state, send] = useActor(datePickerMachine.provide({
|
|
8
|
+
actors: {}
|
|
9
|
+
}));
|
|
10
|
+
const containerRef = useRef(null);
|
|
11
|
+
useEffect(() => {
|
|
12
|
+
if (value) {
|
|
13
|
+
send({
|
|
14
|
+
type: 'SELECT_DATE',
|
|
15
|
+
date: value
|
|
16
|
+
});
|
|
17
|
+
}
|
|
18
|
+
}, [value]);
|
|
19
|
+
useEffect(() => {
|
|
20
|
+
const handleClickOutside = event => {
|
|
21
|
+
if (containerRef.current && !containerRef.current.contains(event.target)) {
|
|
22
|
+
send({
|
|
23
|
+
type: 'CLICK_OUTSIDE'
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
};
|
|
27
|
+
document.addEventListener('mousedown', handleClickOutside);
|
|
28
|
+
return () => {
|
|
29
|
+
document.removeEventListener('mousedown', handleClickOutside);
|
|
30
|
+
};
|
|
31
|
+
}, []);
|
|
32
|
+
const handleDateSelect = date => {
|
|
33
|
+
send({
|
|
34
|
+
type: 'SELECT_DATE',
|
|
35
|
+
date
|
|
36
|
+
});
|
|
37
|
+
onChange && onChange(date);
|
|
38
|
+
};
|
|
39
|
+
const currentDate = new Date();
|
|
40
|
+
const {
|
|
41
|
+
selectedDate,
|
|
42
|
+
currentMonth,
|
|
43
|
+
isOpen,
|
|
44
|
+
inputValue
|
|
45
|
+
} = state.context;
|
|
46
|
+
// Generate dates in a linear array
|
|
47
|
+
const daysInMonth = getDaysInMonth(currentMonth.getFullYear(), currentMonth.getMonth());
|
|
48
|
+
const dates = Array.from({
|
|
49
|
+
length: daysInMonth
|
|
50
|
+
}, (_, i) => {
|
|
51
|
+
return new Date(currentMonth.getFullYear(), currentMonth.getMonth(), i + 1);
|
|
52
|
+
});
|
|
53
|
+
// Group dates into rows (5 rows of 7 days each - may have empty cells)
|
|
54
|
+
const numberOfRows = Math.ceil(daysInMonth / 7);
|
|
55
|
+
const years = getYearsRange(currentDate.getFullYear());
|
|
56
|
+
return jsxs("div", {
|
|
57
|
+
ref: containerRef,
|
|
58
|
+
className: `relative ${className}`,
|
|
59
|
+
children: [jsxs("div", {
|
|
60
|
+
className: "relative",
|
|
61
|
+
children: [jsx("input", {
|
|
62
|
+
type: "text",
|
|
63
|
+
className: "w-full px-2 py-1 h-7 border border-gray-300 hover:border-blue-400 focus:border-blue-400 \n rounded text-xs transition-colors duration-200 ease-in-out shadow-sm \n focus:outline-none focus:ring-0",
|
|
64
|
+
placeholder: placeholder,
|
|
65
|
+
value: inputValue,
|
|
66
|
+
onChange: e => send({
|
|
67
|
+
type: 'INPUT_CHANGE',
|
|
68
|
+
value: e.target.value
|
|
69
|
+
}),
|
|
70
|
+
onClick: () => send({
|
|
71
|
+
type: 'TOGGLE_CALENDAR'
|
|
72
|
+
}),
|
|
73
|
+
readOnly: true
|
|
74
|
+
}), jsx("div", {
|
|
75
|
+
className: "absolute inset-y-0 right-0 flex items-center px-2 cursor-pointer text-gray-400",
|
|
76
|
+
onClick: () => send({
|
|
77
|
+
type: 'TOGGLE_CALENDAR'
|
|
78
|
+
}),
|
|
79
|
+
children: jsx("svg", {
|
|
80
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
81
|
+
className: "h-3 w-3",
|
|
82
|
+
fill: "none",
|
|
83
|
+
viewBox: "0 0 24 24",
|
|
84
|
+
stroke: "currentColor",
|
|
85
|
+
children: jsx("path", {
|
|
86
|
+
strokeLinecap: "round",
|
|
87
|
+
strokeLinejoin: "round",
|
|
88
|
+
strokeWidth: 2,
|
|
89
|
+
d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
|
|
90
|
+
})
|
|
91
|
+
})
|
|
92
|
+
})]
|
|
93
|
+
}), isOpen && jsxs("div", {
|
|
94
|
+
className: "absolute z-50 mt-1 w-72 bg-white rounded shadow-md border border-gray-200",
|
|
95
|
+
children: [jsx("div", {
|
|
96
|
+
className: "px-1 py-1 border-b border-gray-200",
|
|
97
|
+
children: jsxs("div", {
|
|
98
|
+
className: "flex justify-between items-center",
|
|
99
|
+
children: [jsx("button", {
|
|
100
|
+
className: "p-0.5 hover:bg-gray-100 text-gray-600 rounded flex items-center justify-center w-5 h-5",
|
|
101
|
+
onClick: () => send({
|
|
102
|
+
type: 'PREV_MONTH'
|
|
103
|
+
}),
|
|
104
|
+
children: jsx("svg", {
|
|
105
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
106
|
+
className: "h-3 w-3",
|
|
107
|
+
fill: "none",
|
|
108
|
+
viewBox: "0 0 24 24",
|
|
109
|
+
stroke: "currentColor",
|
|
110
|
+
children: jsx("path", {
|
|
111
|
+
strokeLinecap: "round",
|
|
112
|
+
strokeLinejoin: "round",
|
|
113
|
+
strokeWidth: 2.5,
|
|
114
|
+
d: "M15 19l-7-7 7-7"
|
|
115
|
+
})
|
|
116
|
+
})
|
|
117
|
+
}), jsxs("div", {
|
|
118
|
+
className: "flex items-center space-x-1 text-xs",
|
|
119
|
+
children: [jsx("select", {
|
|
120
|
+
className: "appearance-none bg-transparent cursor-pointer py-0 px-1 pr-6 w-20 rounded hover:bg-gray-100 text-gray-800 border-0 focus:outline-none focus:ring-0 text-xs",
|
|
121
|
+
value: currentMonth.getMonth(),
|
|
122
|
+
onChange: e => send({
|
|
123
|
+
type: 'SELECT_MONTH',
|
|
124
|
+
month: parseInt(e.target.value)
|
|
125
|
+
}),
|
|
126
|
+
style: {
|
|
127
|
+
backgroundPosition: 'right 4px center'
|
|
128
|
+
},
|
|
129
|
+
children: months.map((month, index) => jsx("option", {
|
|
130
|
+
value: index,
|
|
131
|
+
children: month
|
|
132
|
+
}, month))
|
|
133
|
+
}), jsx("select", {
|
|
134
|
+
className: "appearance-none bg-transparent cursor-pointer py-0 px-1 pr-6 w-14 rounded hover:bg-gray-100 text-gray-800 border-0 focus:outline-none focus:ring-0 text-xs",
|
|
135
|
+
value: currentMonth.getFullYear(),
|
|
136
|
+
onChange: e => send({
|
|
137
|
+
type: 'SELECT_YEAR',
|
|
138
|
+
year: parseInt(e.target.value)
|
|
139
|
+
}),
|
|
140
|
+
style: {
|
|
141
|
+
backgroundPosition: 'right 4px center'
|
|
142
|
+
},
|
|
143
|
+
children: years.map(year => jsx("option", {
|
|
144
|
+
value: year,
|
|
145
|
+
children: year
|
|
146
|
+
}, year))
|
|
147
|
+
})]
|
|
148
|
+
}), jsx("button", {
|
|
149
|
+
className: "p-0.5 hover:bg-gray-100 text-gray-600 rounded flex items-center justify-center w-5 h-5",
|
|
150
|
+
onClick: () => send({
|
|
151
|
+
type: 'NEXT_MONTH'
|
|
152
|
+
}),
|
|
153
|
+
children: jsx("svg", {
|
|
154
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
155
|
+
className: "h-3 w-3",
|
|
156
|
+
fill: "none",
|
|
157
|
+
viewBox: "0 0 24 24",
|
|
158
|
+
stroke: "currentColor",
|
|
159
|
+
children: jsx("path", {
|
|
160
|
+
strokeLinecap: "round",
|
|
161
|
+
strokeLinejoin: "round",
|
|
162
|
+
strokeWidth: 2.5,
|
|
163
|
+
d: "M9 5l7 7-7 7"
|
|
164
|
+
})
|
|
165
|
+
})
|
|
166
|
+
})]
|
|
167
|
+
})
|
|
168
|
+
}), jsxs("div", {
|
|
169
|
+
className: "border-b border-gray-200",
|
|
170
|
+
children: [jsx("div", {
|
|
171
|
+
className: "flex border-b border-gray-100 bg-gray-50",
|
|
172
|
+
children: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map((day, index) => jsx("div", {
|
|
173
|
+
className: `flex-1 px-1 py-1 text-xs text-center font-medium text-gray-700 ${index < 6 ? 'border-r border-gray-100' : ''}`,
|
|
174
|
+
children: day
|
|
175
|
+
}, day))
|
|
176
|
+
}), jsx("div", {
|
|
177
|
+
className: "p-0",
|
|
178
|
+
children: Array.from({
|
|
179
|
+
length: numberOfRows
|
|
180
|
+
}).map((_, rowIndex) => jsx("div", {
|
|
181
|
+
className: "flex border-b border-gray-100 last:border-b-0",
|
|
182
|
+
children: Array.from({
|
|
183
|
+
length: 7
|
|
184
|
+
}).map((_, colIndex) => {
|
|
185
|
+
const dateIndex = rowIndex * 7 + colIndex;
|
|
186
|
+
// Return empty cell if out of range
|
|
187
|
+
if (dateIndex >= dates.length) {
|
|
188
|
+
return jsx("div", {
|
|
189
|
+
className: "flex-1 h-6 border-r border-gray-100 last:border-r-0"
|
|
190
|
+
}, `empty-${rowIndex}-${colIndex}`);
|
|
191
|
+
}
|
|
192
|
+
const date = dates[dateIndex];
|
|
193
|
+
const isToday = date.getDate() === currentDate.getDate() && date.getMonth() === currentDate.getMonth() && date.getFullYear() === currentDate.getFullYear();
|
|
194
|
+
const isSelected = selectedDate && date.getDate() === selectedDate.getDate() && date.getMonth() === selectedDate.getMonth() && date.getFullYear() === selectedDate.getFullYear();
|
|
195
|
+
return jsx("div", {
|
|
196
|
+
className: `
|
|
197
|
+
flex-1 h-6 flex items-center justify-center text-xs cursor-pointer transition-colors
|
|
198
|
+
border-r border-gray-100 last:border-r-0
|
|
199
|
+
${isToday && !isSelected ? 'font-bold text-blue-600' : ''}
|
|
200
|
+
${isSelected ? 'bg-blue-50 text-blue-700 font-medium' : 'hover:bg-gray-50'}
|
|
201
|
+
`,
|
|
202
|
+
onClick: () => handleDateSelect(date),
|
|
203
|
+
children: date.getDate()
|
|
204
|
+
}, `date-${date.getDate()}`);
|
|
205
|
+
})
|
|
206
|
+
}, `row-${rowIndex}`))
|
|
207
|
+
})]
|
|
208
|
+
}), jsx("div", {
|
|
209
|
+
className: "py-1 px-1 flex justify-end",
|
|
210
|
+
children: jsx("button", {
|
|
211
|
+
className: "px-2 py-0.5 text-xs text-blue-600 hover:bg-blue-50 transition-colors",
|
|
212
|
+
onClick: () => handleDateSelect(new Date()),
|
|
213
|
+
children: "Today"
|
|
214
|
+
})
|
|
215
|
+
})]
|
|
216
|
+
})]
|
|
217
|
+
});
|
|
218
|
+
};export{DatePicker,DatePicker as default};//# sourceMappingURL=DatePicker.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DatePicker.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { DatePickerContext, DatePickerEvent } from './types';
|
|
2
|
+
export declare const datePickerMachine: import("xstate").StateMachine<DatePickerContext, DatePickerEvent, Record<string, import("xstate").AnyActorRef>, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject, string, import("xstate").StateValue, string, unknown, {}, import("xstate").EventObject, import("xstate").MetaObject, any>;
|
|
3
|
+
//# sourceMappingURL=machine.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"machine.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/machine.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAG7D,eAAO,MAAM,iBAAiB,uVAgF5B,CAAC"}
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
import {createMachine,assign}from'xstate';import {formatDate}from'./utils.js';const datePickerMachine = createMachine({
|
|
2
|
+
id: 'datePicker',
|
|
3
|
+
types: {},
|
|
4
|
+
initial: 'idle',
|
|
5
|
+
context: {
|
|
6
|
+
selectedDate: null,
|
|
7
|
+
currentMonth: new Date(),
|
|
8
|
+
isOpen: false,
|
|
9
|
+
inputValue: ''
|
|
10
|
+
},
|
|
11
|
+
states: {
|
|
12
|
+
idle: {
|
|
13
|
+
on: {
|
|
14
|
+
TOGGLE_CALENDAR: {
|
|
15
|
+
actions: assign(({
|
|
16
|
+
context
|
|
17
|
+
}) => ({
|
|
18
|
+
isOpen: !context.isOpen
|
|
19
|
+
}))
|
|
20
|
+
},
|
|
21
|
+
SELECT_DATE: {
|
|
22
|
+
actions: assign(({
|
|
23
|
+
context,
|
|
24
|
+
event
|
|
25
|
+
}) => {
|
|
26
|
+
const formattedDate = formatDate(event.date);
|
|
27
|
+
return {
|
|
28
|
+
selectedDate: event.date,
|
|
29
|
+
inputValue: formattedDate,
|
|
30
|
+
isOpen: false
|
|
31
|
+
};
|
|
32
|
+
})
|
|
33
|
+
},
|
|
34
|
+
NEXT_MONTH: {
|
|
35
|
+
actions: assign(({
|
|
36
|
+
context
|
|
37
|
+
}) => {
|
|
38
|
+
const nextMonth = new Date(context.currentMonth);
|
|
39
|
+
nextMonth.setMonth(nextMonth.getMonth() + 1);
|
|
40
|
+
return {
|
|
41
|
+
currentMonth: nextMonth
|
|
42
|
+
};
|
|
43
|
+
})
|
|
44
|
+
},
|
|
45
|
+
PREV_MONTH: {
|
|
46
|
+
actions: assign(({
|
|
47
|
+
context
|
|
48
|
+
}) => {
|
|
49
|
+
const prevMonth = new Date(context.currentMonth);
|
|
50
|
+
prevMonth.setMonth(prevMonth.getMonth() - 1);
|
|
51
|
+
return {
|
|
52
|
+
currentMonth: prevMonth
|
|
53
|
+
};
|
|
54
|
+
})
|
|
55
|
+
},
|
|
56
|
+
SELECT_YEAR: {
|
|
57
|
+
actions: assign(({
|
|
58
|
+
context,
|
|
59
|
+
event
|
|
60
|
+
}) => {
|
|
61
|
+
const newDate = new Date(context.currentMonth);
|
|
62
|
+
newDate.setFullYear(event.year);
|
|
63
|
+
return {
|
|
64
|
+
currentMonth: newDate
|
|
65
|
+
};
|
|
66
|
+
})
|
|
67
|
+
},
|
|
68
|
+
SELECT_MONTH: {
|
|
69
|
+
actions: assign(({
|
|
70
|
+
context,
|
|
71
|
+
event
|
|
72
|
+
}) => {
|
|
73
|
+
const newDate = new Date(context.currentMonth);
|
|
74
|
+
newDate.setMonth(event.month);
|
|
75
|
+
return {
|
|
76
|
+
currentMonth: newDate
|
|
77
|
+
};
|
|
78
|
+
})
|
|
79
|
+
},
|
|
80
|
+
INPUT_CHANGE: {
|
|
81
|
+
actions: assign(({
|
|
82
|
+
event
|
|
83
|
+
}) => ({
|
|
84
|
+
inputValue: event.value
|
|
85
|
+
}))
|
|
86
|
+
},
|
|
87
|
+
CLICK_OUTSIDE: {
|
|
88
|
+
actions: assign({
|
|
89
|
+
isOpen: false
|
|
90
|
+
})
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
});export{datePickerMachine};//# sourceMappingURL=machine.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"machine.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
export type DatePickerContext = {
|
|
2
|
+
selectedDate: Date | null;
|
|
3
|
+
currentMonth: Date;
|
|
4
|
+
isOpen: boolean;
|
|
5
|
+
inputValue: string;
|
|
6
|
+
};
|
|
7
|
+
export type DatePickerEvent = {
|
|
8
|
+
type: 'TOGGLE_CALENDAR';
|
|
9
|
+
} | {
|
|
10
|
+
type: 'SELECT_DATE';
|
|
11
|
+
date: Date;
|
|
12
|
+
} | {
|
|
13
|
+
type: 'NEXT_MONTH';
|
|
14
|
+
} | {
|
|
15
|
+
type: 'PREV_MONTH';
|
|
16
|
+
} | {
|
|
17
|
+
type: 'SELECT_YEAR';
|
|
18
|
+
year: number;
|
|
19
|
+
} | {
|
|
20
|
+
type: 'SELECT_MONTH';
|
|
21
|
+
month: number;
|
|
22
|
+
} | {
|
|
23
|
+
type: 'INPUT_CHANGE';
|
|
24
|
+
value: string;
|
|
25
|
+
} | {
|
|
26
|
+
type: 'CLICK_OUTSIDE';
|
|
27
|
+
};
|
|
28
|
+
export interface DatePickerProps {
|
|
29
|
+
value?: Date;
|
|
30
|
+
onChange?: (date: Date) => void;
|
|
31
|
+
placeholder?: string;
|
|
32
|
+
className?: string;
|
|
33
|
+
}
|
|
34
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,iBAAiB,GAAG;IAC5B,YAAY,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,YAAY,EAAE,IAAI,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,eAAe,GACrB;IAAE,IAAI,EAAE,iBAAiB,CAAA;CAAE,GAC3B;IAAE,IAAI,EAAE,aAAa,CAAC;IAAC,IAAI,EAAE,IAAI,CAAA;CAAE,GACnC;IAAE,IAAI,EAAE,YAAY,CAAA;CAAE,GACtB;IAAE,IAAI,EAAE,YAAY,CAAA;CAAE,GACtB;IAAE,IAAI,EAAE,aAAa,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GACrC;IAAE,IAAI,EAAE,cAAc,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GACvC;IAAE,IAAI,EAAE,cAAc,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GACvC;IAAE,IAAI,EAAE,eAAe,CAAA;CAAE,CAAC;AAEhC,MAAM,WAAW,eAAe;IAC5B,KAAK,CAAC,EAAE,IAAI,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Format a date to a readable string (e.g. "Jan 1, 2023")
|
|
3
|
+
*/
|
|
4
|
+
export declare const formatDate: (date: Date) => string;
|
|
5
|
+
/**
|
|
6
|
+
* Returns the number of days in a month
|
|
7
|
+
*/
|
|
8
|
+
export declare const getDaysInMonth: (year: number, month: number) => number;
|
|
9
|
+
/**
|
|
10
|
+
* Returns the day of week (0-6) for the first day of the month
|
|
11
|
+
*/
|
|
12
|
+
export declare const getFirstDayOfMonth: (year: number, month: number) => number;
|
|
13
|
+
/**
|
|
14
|
+
* Creates a grid of days for a month calendar view
|
|
15
|
+
*/
|
|
16
|
+
export declare const createDaysGrid: (year: number, month: number) => any[];
|
|
17
|
+
/**
|
|
18
|
+
* Array of month names
|
|
19
|
+
*/
|
|
20
|
+
export declare const months: string[];
|
|
21
|
+
/**
|
|
22
|
+
* Creates an array of years for year selection (20 years before and after current year)
|
|
23
|
+
*/
|
|
24
|
+
export declare const getYearsRange: (currentYear: number) => number[];
|
|
25
|
+
//# sourceMappingURL=utils.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/utils.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,UAAU,GAAI,MAAM,IAAI,KAAG,MAMvC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,GAAI,MAAM,MAAM,EAAE,OAAO,MAAM,KAAG,MAE5D,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB,GAAI,MAAM,MAAM,EAAE,OAAO,MAAM,KAAG,MAEhE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,GAAI,MAAM,MAAM,EAAE,OAAO,MAAM,UAgBzD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,MAAM,UAalB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,GAAI,aAAa,MAAM,KAAG,MAAM,EAEzD,CAAC"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Format a date to a readable string (e.g. "Jan 1, 2023")
|
|
3
|
+
*/
|
|
4
|
+
const formatDate = date => {
|
|
5
|
+
return date.toLocaleDateString('en-US', {
|
|
6
|
+
year: 'numeric',
|
|
7
|
+
month: 'short',
|
|
8
|
+
day: 'numeric'
|
|
9
|
+
});
|
|
10
|
+
};
|
|
11
|
+
/**
|
|
12
|
+
* Returns the number of days in a month
|
|
13
|
+
*/
|
|
14
|
+
const getDaysInMonth = (year, month) => {
|
|
15
|
+
return new Date(year, month + 1, 0).getDate();
|
|
16
|
+
};
|
|
17
|
+
/**
|
|
18
|
+
* Array of month names
|
|
19
|
+
*/
|
|
20
|
+
const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
|
|
21
|
+
/**
|
|
22
|
+
* Creates an array of years for year selection (20 years before and after current year)
|
|
23
|
+
*/
|
|
24
|
+
const getYearsRange = currentYear => {
|
|
25
|
+
return Array.from({
|
|
26
|
+
length: 41
|
|
27
|
+
}, (_, i) => currentYear - 20 + i);
|
|
28
|
+
};export{formatDate,getDaysInMonth,getYearsRange,months};//# sourceMappingURL=utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../../../src/components/DatePicker/utils.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA;;AAEG;AACH,MAAA,UAAuB,GAAA,IAAA,IAAI;AAQ3B,EAAA,OAAA,IAAA,CAAA,kBAAA,CAAA,OAAA,EAAA;;AAEG,IAAA,KAAA,EAAA,OAAA;AACH,IAAO,GAAA,EAAA;AAIP,GAAA,CAAA;;AAEG;AACH;AAIA;;AAEG,EAAA,OAAA,IAAA,IAAA,CAAA,IAAA,EAAA,KAAA,GAAA,CAAA,EAAA,CAAA,CAAA,CAAA,OAAA,EAAA;AACH;;;;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,OAAO,EAAE,WAAW,EAAE,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,WAAW,EAAE,CAAC"}
|
package/lib/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export{default as PageLoading}from'./components/PageLoading/index.js';export{ApplicationErrorHandler}from'./components/ErrorHandlers/ApplicationErrorHandler.js';export{ErrorBoundary}from'./components/ErrorHandlers/ErrorBoundary.js';export{LayoutErrorBoundary}from'./components/ErrorHandlers/LayoutErrorBoundary.js';export{ReactTable}from'./components/ReactTable/Table.js';export{DefaultColumnFilter,SelectColumnFilter}from'./components/ReactTable/TableFilters.js';export{Error404}from'./components/ErrorPages/404.js';export{Error500}from'./components/ErrorPages/500.js';export{Error403}from'./components/ErrorPages/403.js';export{PageContainer}from'./components/PageContainer/PageContainer.js';export{Spin}from'./components/Spin/index.js';export{OTPInput}from'./components/OTP/OTPInput.js';export{SingleInput}from'./components/OTP/SingleInput.js';export{useOTPInput}from'./components/OTP/hooks.js';export{OTPVerification}from'./components/OTP/OTPVerification.js';export{ToastContainer,useToast,useToastCloseAll}from'./hooks/useToast.js';//# sourceMappingURL=index.js.map
|
|
1
|
+
export{default as PageLoading}from'./components/PageLoading/index.js';export{ApplicationErrorHandler}from'./components/ErrorHandlers/ApplicationErrorHandler.js';export{ErrorBoundary}from'./components/ErrorHandlers/ErrorBoundary.js';export{LayoutErrorBoundary}from'./components/ErrorHandlers/LayoutErrorBoundary.js';export{ReactTable}from'./components/ReactTable/Table.js';export{DefaultColumnFilter,SelectColumnFilter}from'./components/ReactTable/TableFilters.js';export{Error404}from'./components/ErrorPages/404.js';export{Error500}from'./components/ErrorPages/500.js';export{Error403}from'./components/ErrorPages/403.js';export{PageContainer}from'./components/PageContainer/PageContainer.js';export{Spin}from'./components/Spin/index.js';export{OTPInput}from'./components/OTP/OTPInput.js';export{SingleInput}from'./components/OTP/SingleInput.js';export{useOTPInput}from'./components/OTP/hooks.js';export{OTPVerification}from'./components/OTP/OTPVerification.js';export{DatePicker}from'./components/DatePicker/DatePicker.js';export{ToastContainer,useToast,useToastCloseAll}from'./hooks/useToast.js';//# sourceMappingURL=index.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@admin-layout/tailwind-ui",
|
|
3
|
-
"version": "10.1.1-alpha.
|
|
3
|
+
"version": "10.1.1-alpha.21",
|
|
4
4
|
"description": "Sample core for higher packages to depend on",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"author": "CDMBase LLC",
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"watch": "npm run build:lib:watch"
|
|
22
22
|
},
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@admin-layout/client": "10.1.1-alpha.
|
|
24
|
+
"@admin-layout/client": "10.1.1-alpha.21"
|
|
25
25
|
},
|
|
26
26
|
"peerDependencies": {
|
|
27
27
|
"history": "*",
|
|
@@ -34,5 +34,5 @@
|
|
|
34
34
|
"typescript": {
|
|
35
35
|
"definition": "lib/index.d.ts"
|
|
36
36
|
},
|
|
37
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "fd950a4fa0ad32d54b8017ce0ab23778a2666d5e"
|
|
38
38
|
}
|