|
1 | 1 | <template> |
2 | 2 | <VueDatepicker |
3 | | - v-bind="$props" |
| 3 | + :value="value" |
| 4 | + :name="name" |
| 5 | + :id="id" |
| 6 | + :format="format" |
| 7 | + :language="language" |
| 8 | + :open-date="openDate" |
| 9 | + :day-cell-content="dayCellContent" |
| 10 | + :full-month-name="fullMonthName" |
| 11 | + :disabled-dates="disabledDates" |
| 12 | + :highlighted="highlighted" |
| 13 | + :placeholder="placeholder" |
| 14 | + :inline="inline" |
| 15 | + :calendar-class="computedCalendarClass" |
| 16 | + :input-class="inputClass" |
| 17 | + :wrapper-class="wrapperClass" |
| 18 | + :monday-first="mondayFirst" |
| 19 | + :clear-button="clearButton" |
| 20 | + :clear-button-icon="clearButtonIcon" |
| 21 | + :calendar-button="calendarButton" |
| 22 | + :calendar-button-icon="calendarButtonIcon" |
| 23 | + :calendar-button-icon-content="calendarButtonIconContent" |
| 24 | + :initial-view="initialView" |
| 25 | + :disabled="disabled" |
| 26 | + :required="required" |
| 27 | + :typeable="typeable" |
| 28 | + :use-utc="useUtc" |
| 29 | + :minimum-view="minimumView" |
| 30 | + :maximum-view="maximumView" |
4 | 31 | v-on="$listeners"> |
5 | 32 | <slot name="beforeCalendarHeader" slot="beforeCalendarHeader" /> |
6 | 33 | <slot name="afterDateInput" slot="afterDateInput" /> |
@@ -86,7 +113,10 @@ export default { |
86 | 113 | /** |
87 | 114 | * The CSS class applied to the calendar element. |
88 | 115 | */ |
89 | | - calendarClass: [String, Object, Array], |
| 116 | + calendarClass: { |
| 117 | + type: [String, Object, Array], |
| 118 | + default: '' |
| 119 | + }, |
90 | 120 | /** |
91 | 121 | * The CSS Class applied to the input element. |
92 | 122 | */ |
@@ -155,6 +185,20 @@ export default { |
155 | 185 | maximumView: { |
156 | 186 | type: String, |
157 | 187 | default: 'year' |
| 188 | + }, |
| 189 | + /** |
| 190 | + * Whether the datepicker should be small, or not. |
| 191 | + */ |
| 192 | + small: { |
| 193 | + type: Boolean, |
| 194 | + default: false |
| 195 | + } |
| 196 | + }, |
| 197 | + computed: { |
| 198 | + computedCalendarClass() { |
| 199 | + let _calendarClass = this.small ? 'vdp-datepicker__small' : '' |
| 200 | +
|
| 201 | + return _calendarClass += this.calendarClass |
158 | 202 | } |
159 | 203 | } |
160 | 204 | } |
@@ -193,92 +237,150 @@ export default { |
193 | 237 | $datepicker-cell-line-height: 2; |
194 | 238 | $datepicker-cell-font-size: 1rem; |
195 | 239 |
|
196 | | - .vdp-datepicker__calendar { |
197 | | - color: $datepicker-color; |
198 | | - padding: $datepicker-padding-y $datepicker-padding-x; |
199 | | - min-width: $datepicker-min-width; |
200 | | - font-size: $datepicker-font-size; |
201 | | - font-weight: $datepicker-font-weight; |
202 | | - font-family: $font-system; |
203 | | - background-color: $datepicker-background-color; |
204 | | - border: $datepicker-border; |
205 | | - border-radius: $datepicker-border-radius; |
206 | | - box-shadow: $datepicker-drop-shadows; |
207 | | - border: 1px solid rgba($black,.15) !important; |
208 | | -
|
209 | | - // Header |
210 | | - header { |
211 | | - display: flex; |
212 | | - padding-bottom: 10px; |
213 | | -
|
214 | | - span { |
215 | | - transition: $transition-default; |
216 | | - border-radius: $border-radius-default; |
217 | | - font-weight: 500; |
| 240 | + $datepicker-small-padding-y: .625rem; |
| 241 | + $datepicker-small-padding-x: .625rem; |
| 242 | + $datepicker-small-font-size: .75rem; |
| 243 | + $datepicker-small-max-width: 235px; |
218 | 244 |
|
219 | | - &.next:after { |
220 | | - border-left-color: $color-silver-sand; |
221 | | - } |
| 245 | + $datepicker-small-day-font-size: 12px; |
| 246 | + $datepicker-small-day-font-weight: 500; |
| 247 | + $datepicker-small-day-width: 1.875rem; |
| 248 | + $datepicker-small-day-height: 1.875rem; |
| 249 | + $datepicker-small-day-line-height: 2.25; |
222 | 250 |
|
223 | | - &.prev:after { |
224 | | - border-right-color: $color-silver-sand; |
225 | | - } |
226 | | - } |
227 | | - } |
| 251 | + $datepicker-small-day-header-font-size: 100%; |
228 | 252 |
|
229 | | - // Header elements and specific calendar cells. |
230 | | - header span, |
231 | | - .cell.day:not(.disabled):not(.blank), .cell.month, .cell.year { |
232 | | - &:hover { |
233 | | - background-color: $datepicker-cell-hover-color; |
234 | | - border-color: $border-color !important; |
235 | | - } |
236 | | - } |
| 253 | + div.vdp-datepicker { |
| 254 | + &__calendar { |
| 255 | + color: $datepicker-color; |
| 256 | + padding: $datepicker-padding-y $datepicker-padding-x; |
| 257 | + min-width: $datepicker-min-width; |
| 258 | + font-size: $datepicker-font-size; |
| 259 | + font-weight: $datepicker-font-weight; |
| 260 | + font-family: $font-system; |
| 261 | + background-color: $datepicker-background-color; |
| 262 | + border: $datepicker-border; |
| 263 | + border-radius: $datepicker-border-radius; |
| 264 | + box-shadow: $datepicker-drop-shadows; |
| 265 | + border: 1px solid rgba($black,.15) !important; |
237 | 266 |
|
238 | | - // Cells |
239 | | - .cell { |
240 | | - line-height: $datepicker-cell-line-height; |
241 | | - font-size: $datepicker-cell-font-size; |
242 | | - border-radius: $border-radius-default; |
243 | | - transition: $transition-default; |
244 | | - border-color: $border-color; |
245 | | - height: auto; |
246 | | -
|
247 | | - // Day headers |
248 | | - &.day-header { |
249 | | - font-weight: 500; |
250 | | - } |
| 267 | + // Header |
| 268 | + header { |
| 269 | + display: flex; |
| 270 | + padding-bottom: 10px; |
251 | 271 |
|
252 | | - // Days |
253 | | - &.day { |
254 | | - width: $datepicker-cell-width; |
255 | | - height: $datepicker-cell-height; |
256 | | - border-radius: 50%; |
257 | | - } |
| 272 | + span { |
| 273 | + transition: $transition-default; |
| 274 | + border-radius: $border-radius-default; |
| 275 | + font-weight: 500; |
| 276 | +
|
| 277 | + &.next:after { |
| 278 | + border-left-color: $color-silver-sand; |
| 279 | + } |
258 | 280 |
|
259 | | - // Months |
260 | | - &.month, |
261 | | - &.year { |
262 | | - height: $datepicker-cell-height; |
263 | | - font-size: 12px; |
264 | | - line-height: 33px; |
| 281 | + &.prev:after { |
| 282 | + border-right-color: $color-silver-sand; |
| 283 | + } |
| 284 | + } |
265 | 285 | } |
266 | 286 |
|
267 | | - // Selected |
268 | | - &.selected, |
269 | | - &.highlighted.selected { |
270 | | - background: $color-primary !important; |
271 | | - color: $white; |
| 287 | + // Header elements and specific calendar cells. |
| 288 | + header span, |
| 289 | + .cell.day:not(.disabled):not(.blank), .cell.month, .cell.year { |
272 | 290 | &:hover { |
273 | | - background: darken($color-primary, 5) !important; |
| 291 | + background-color: $datepicker-cell-hover-color; |
274 | 292 | border-color: $border-color !important; |
275 | 293 | } |
276 | 294 | } |
277 | 295 |
|
278 | | - &.highlighted { |
279 | | - background: lighten($color-primary, 45) !important; |
280 | | - &:hover { |
281 | | - border-color: $border-color !important; |
| 296 | + // Cells |
| 297 | + .cell { |
| 298 | + line-height: $datepicker-cell-line-height; |
| 299 | + font-size: $datepicker-cell-font-size; |
| 300 | + border-radius: $border-radius-default; |
| 301 | + transition: $transition-default; |
| 302 | + border-color: $border-color; |
| 303 | + height: auto; |
| 304 | +
|
| 305 | + // Day headers |
| 306 | + &.day-header { |
| 307 | + font-weight: 500; |
| 308 | + } |
| 309 | +
|
| 310 | + // Days |
| 311 | + &.day { |
| 312 | + width: $datepicker-cell-width; |
| 313 | + height: $datepicker-cell-height; |
| 314 | + border-radius: 50%; |
| 315 | + } |
| 316 | +
|
| 317 | + // Months |
| 318 | + &.month, |
| 319 | + &.year { |
| 320 | + height: $datepicker-cell-height; |
| 321 | + font-size: 12px; |
| 322 | + line-height: 33px; |
| 323 | + } |
| 324 | +
|
| 325 | + // Selected |
| 326 | + &.selected, |
| 327 | + &.highlighted.selected { |
| 328 | + background: $color-primary !important; |
| 329 | + color: $white; |
| 330 | + &:hover { |
| 331 | + background: darken($color-primary, 5) !important; |
| 332 | + border-color: $border-color !important; |
| 333 | + } |
| 334 | + } |
| 335 | +
|
| 336 | + &.highlighted { |
| 337 | + background: $color-primary; |
| 338 | + color: $white; |
| 339 | +
|
| 340 | + &:hover { |
| 341 | + background: darken($color-primary, 5) !important; |
| 342 | + border-color: $border-color !important; |
| 343 | + } |
| 344 | +
|
| 345 | + &:not(.highlight-start):not(.highlight-end) { |
| 346 | + border-radius: 0; |
| 347 | + } |
| 348 | +
|
| 349 | + &.highlight-start { |
| 350 | + border-top-right-radius: 0; |
| 351 | + border-bottom-right-radius: 0; |
| 352 | + } |
| 353 | +
|
| 354 | + &.highlight-end { |
| 355 | + border-top-left-radius: 0; |
| 356 | + border-bottom-left-radius: 0; |
| 357 | + } |
| 358 | + } |
| 359 | + } |
| 360 | + } |
| 361 | +
|
| 362 | + // Small Datepicker modifier. |
| 363 | + &__small { |
| 364 | + padding: $datepicker-small-padding-y $datepicker-small-padding-x; |
| 365 | + font-size: $datepicker-small-font-size; |
| 366 | + max-width: $datepicker-small-max-width; |
| 367 | +
|
| 368 | + .cell { |
| 369 | + &.day { |
| 370 | + width: $datepicker-small-day-width; |
| 371 | + height: $datepicker-small-day-height; |
| 372 | + line-height: $datepicker-small-day-line-height; |
| 373 | + } |
| 374 | +
|
| 375 | + &.day, |
| 376 | + &.month, |
| 377 | + &.year { |
| 378 | + font-size: $datepicker-small-day-font-size; |
| 379 | + font-weight: $datepicker-small-day-font-weight; |
| 380 | + } |
| 381 | +
|
| 382 | + &.day-header { |
| 383 | + font-size: $datepicker-small-day-header-font-size; |
282 | 384 | } |
283 | 385 | } |
284 | 386 | } |
|
0 commit comments