@dialpad/dialtone 9.34.5 → 9.34.6
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 +28 -117
- package/dist/css/dialtone.css +2 -2
- package/dist/tokens/css/variables-dark.css +1 -1
- package/dist/tokens/css/variables-expressive-dark.css +1 -1
- package/dist/tokens/css/variables-expressive-light.css +1 -1
- package/dist/tokens/css/variables-expressive-sm-dark.css +1 -1
- package/dist/tokens/css/variables-expressive-sm-light.css +1 -1
- package/dist/tokens/css/variables-light.css +1 -1
- package/dist/tokens/css/variables-tmo-dark.css +1 -1
- package/dist/tokens/css/variables-tmo-light.css +1 -1
- package/dist/tokens/less/variables-dark.less +1 -1
- package/dist/tokens/less/variables-expressive-dark.less +1 -1
- package/dist/tokens/less/variables-expressive-light.less +1 -1
- package/dist/tokens/less/variables-expressive-sm-dark.less +1 -1
- package/dist/tokens/less/variables-expressive-sm-light.less +1 -1
- package/dist/tokens/less/variables-light.less +1 -1
- package/dist/tokens/less/variables-tmo-dark.less +1 -1
- package/dist/tokens/less/variables-tmo-light.less +1 -1
- package/dist/vue2/lib/datepicker.cjs +4 -4
- package/dist/vue2/lib/datepicker.cjs.map +1 -1
- package/dist/vue2/lib/datepicker.js +4 -4
- package/dist/vue2/lib/datepicker.js.map +1 -1
- package/dist/vue3/lib/datepicker.cjs +8 -4
- package/dist/vue3/lib/datepicker.cjs.map +1 -1
- package/dist/vue3/lib/datepicker.js +8 -4
- package/dist/vue3/lib/datepicker.js.map +1 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -11,13 +11,13 @@ All packages of the monorepo are combined into a single Dialtone package for eas
|
|
|
11
11
|
#### Vue 3
|
|
12
12
|
|
|
13
13
|
```shell
|
|
14
|
-
npm install @dialpad/dialtone@
|
|
14
|
+
npm install @dialpad/dialtone@latest @tiptap/vue-3
|
|
15
15
|
```
|
|
16
16
|
|
|
17
17
|
#### Vue 2
|
|
18
18
|
|
|
19
19
|
```shell
|
|
20
|
-
npm install @dialpad/dialtone@
|
|
20
|
+
npm install @dialpad/dialtone@latest @linusborg/vue-simple-portal @tiptap/vue-2
|
|
21
21
|
```
|
|
22
22
|
|
|
23
23
|
### Import packages:
|
|
@@ -100,6 +100,32 @@ import { DtButton } from "@dialpad/dialtone/vue3"
|
|
|
100
100
|
import { DtButton } from "@dialpad/dialtone/vue3/lib/button"
|
|
101
101
|
```
|
|
102
102
|
|
|
103
|
+
#### Dialtone Tokens
|
|
104
|
+
|
|
105
|
+
Dialtone tokens doesn't have a default export, so you need to access
|
|
106
|
+
the files directly as following:
|
|
107
|
+
|
|
108
|
+
- CSS
|
|
109
|
+
|
|
110
|
+
```css
|
|
111
|
+
@import "@dialpad/dialtone/tokens/variables-light.css" // Light tokens
|
|
112
|
+
@import "@dialpad/dialtone/tokens/variables-dark.css" // Dark tokens
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
- LESS
|
|
116
|
+
|
|
117
|
+
```less
|
|
118
|
+
@import "@dialpad/dialtone/tokens/variables-light.less" // Light tokens
|
|
119
|
+
@import "@dialpad/dialtone/tokens/variables-dark.less" // Dark tokens
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
- JSON
|
|
123
|
+
|
|
124
|
+
```js
|
|
125
|
+
import "@dialpad/dialtone/tokens/tokens-light.json" // Light tokens
|
|
126
|
+
import "@dialpad/dialtone/tokens/tokens-dark.json" // Dark tokens
|
|
127
|
+
```
|
|
128
|
+
|
|
103
129
|
## About this repo
|
|
104
130
|
|
|
105
131
|
The @dialpad/dialtone repository is a monorepo composed of Dialtone NPM packages and apps.
|
|
@@ -370,118 +396,3 @@ This will trigger the [release action](.github/workflows/release.yml), release c
|
|
|
370
396
|
|
|
371
397
|
1. Run the `nx release` on selected packages (all if `package` is empty).
|
|
372
398
|
2. An [action](https://github.com/dialpad/dialtone/actions/workflows/publish.yml) will publish the packages with its corresponding tag.
|
|
373
|
-
|
|
374
|
-
## Usage
|
|
375
|
-
|
|
376
|
-
### Install it via NPM:
|
|
377
|
-
|
|
378
|
-
#### Vue 3
|
|
379
|
-
|
|
380
|
-
```shell
|
|
381
|
-
npm install @dialpad/dialtone@next @tiptap/vue-3
|
|
382
|
-
```
|
|
383
|
-
|
|
384
|
-
#### Vue 2
|
|
385
|
-
|
|
386
|
-
```shell
|
|
387
|
-
npm install @dialpad/dialtone@next @linusborg/vue-simple-portal @tiptap/vue-2
|
|
388
|
-
```
|
|
389
|
-
|
|
390
|
-
### Import packages:
|
|
391
|
-
|
|
392
|
-
#### Dialtone CSS
|
|
393
|
-
|
|
394
|
-
- CSS
|
|
395
|
-
|
|
396
|
-
```css
|
|
397
|
-
@import "@dialpad/dialtone/css";
|
|
398
|
-
```
|
|
399
|
-
|
|
400
|
-
- Javascript
|
|
401
|
-
|
|
402
|
-
```js
|
|
403
|
-
import "@dialpad/dialtone/css";
|
|
404
|
-
```
|
|
405
|
-
|
|
406
|
-
#### Dialtone eslint-plugin
|
|
407
|
-
|
|
408
|
-
```js
|
|
409
|
-
import dialtone from "@dialpad/dialtone/eslint-plugin"
|
|
410
|
-
```
|
|
411
|
-
|
|
412
|
-
#### Dialtone icons
|
|
413
|
-
|
|
414
|
-
- Importing for Vue 2:
|
|
415
|
-
|
|
416
|
-
```js
|
|
417
|
-
// Named import
|
|
418
|
-
import { DtIconArrowUp } from '@dialpad/dialtone-icons/vue2';
|
|
419
|
-
|
|
420
|
-
// Default import (Prefered if using webpack as it is tree-shakeable by default)
|
|
421
|
-
import DtIconArrowUp from '@dialpad/dialtone-icons/vue2/arrow-up';
|
|
422
|
-
```
|
|
423
|
-
|
|
424
|
-
- Importing for Vue 3:
|
|
425
|
-
|
|
426
|
-
```js
|
|
427
|
-
// Named import
|
|
428
|
-
import { DtIconArrowUp } from '@dialpad/dialtone-icons/vue3';
|
|
429
|
-
|
|
430
|
-
// Default import (Prefered if using webpack as it is tree-shakeable by default)
|
|
431
|
-
import DtIconArrowUp from '@dialpad/dialtone-icons/vue3/arrow-up';
|
|
432
|
-
```
|
|
433
|
-
|
|
434
|
-
- Importing json files
|
|
435
|
-
|
|
436
|
-
```js
|
|
437
|
-
import keywords from '@dialpad/dialtone-icons/keywords.json';
|
|
438
|
-
import iconsList from '@dialpad/dialtone-icons/icons.json';
|
|
439
|
-
```
|
|
440
|
-
|
|
441
|
-
#### Dialtone Vue
|
|
442
|
-
|
|
443
|
-
- Vue 2
|
|
444
|
-
|
|
445
|
-
```js
|
|
446
|
-
// Named import
|
|
447
|
-
import { DtButton } from "@dialpad/dialtone/vue2"
|
|
448
|
-
|
|
449
|
-
// Default import (Prefered if using webpack as it is tree-shakeable by default)
|
|
450
|
-
import { DtButton } from "@dialpad/dialtone/vue2/lib/button"
|
|
451
|
-
```
|
|
452
|
-
|
|
453
|
-
- Vue 3
|
|
454
|
-
|
|
455
|
-
```js
|
|
456
|
-
// Named import
|
|
457
|
-
import { DtButton } from "@dialpad/dialtone/vue3"
|
|
458
|
-
|
|
459
|
-
// Default import (Prefered if using webpack as it is tree-shakeable by default)
|
|
460
|
-
import { DtButton } from "@dialpad/dialtone/vue3/lib/button"
|
|
461
|
-
```
|
|
462
|
-
|
|
463
|
-
#### Dialtone Tokens
|
|
464
|
-
|
|
465
|
-
Dialtone tokens doesn't have a default export, so you need to access
|
|
466
|
-
the files directly as following:
|
|
467
|
-
|
|
468
|
-
- CSS
|
|
469
|
-
|
|
470
|
-
```css
|
|
471
|
-
@import "@dialpad/dialtone/tokens/variables-light.css" // Light tokens
|
|
472
|
-
@import "@dialpad/dialtone/tokens/variables-dark.css" // Dark tokens
|
|
473
|
-
```
|
|
474
|
-
|
|
475
|
-
- LESS
|
|
476
|
-
|
|
477
|
-
```less
|
|
478
|
-
@import "@dialpad/dialtone/tokens/variables-light.less" // Light tokens
|
|
479
|
-
@import "@dialpad/dialtone/tokens/variables-dark.less" // Dark tokens
|
|
480
|
-
```
|
|
481
|
-
|
|
482
|
-
- JSON
|
|
483
|
-
|
|
484
|
-
```js
|
|
485
|
-
import "@dialpad/dialtone/tokens/tokens-light.json" // Light tokens
|
|
486
|
-
import "@dialpad/dialtone/tokens/tokens-dark.json" // Dark tokens
|
|
487
|
-
```
|
package/dist/css/dialtone.css
CHANGED
|
@@ -7485,7 +7485,7 @@ body {
|
|
|
7485
7485
|
}
|
|
7486
7486
|
/**
|
|
7487
7487
|
* Do not edit directly
|
|
7488
|
-
* Generated on Wed, 15 May 2024
|
|
7488
|
+
* Generated on Wed, 15 May 2024 21:42:14 GMT
|
|
7489
7489
|
*/
|
|
7490
7490
|
|
|
7491
7491
|
.dialtone-theme-light {
|
|
@@ -8302,7 +8302,7 @@ body {
|
|
|
8302
8302
|
|
|
8303
8303
|
/**
|
|
8304
8304
|
* Do not edit directly
|
|
8305
|
-
* Generated on Wed, 15 May 2024
|
|
8305
|
+
* Generated on Wed, 15 May 2024 21:42:14 GMT
|
|
8306
8306
|
*/
|
|
8307
8307
|
|
|
8308
8308
|
.dialtone-theme-dark {
|
|
@@ -266,25 +266,25 @@ const _sfc_main$2 = {
|
|
|
266
266
|
};
|
|
267
267
|
var _sfc_render$2 = function render() {
|
|
268
268
|
var _vm = this, _c = _vm._self._c;
|
|
269
|
-
return _c("dt-stack", { staticClass: "d-datepicker__month-year", attrs: { "direction": "row", "gap": "300" } }, [_c("dt-stack", { staticClass: "d-datepicker__nav", attrs: { "as": "nav", "direction": "row", "gap": "200" } }, [_c("dt-tooltip", { attrs: { "message": _vm.prevYearLabel, "placement": "top" }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
|
|
269
|
+
return _c("dt-stack", { staticClass: "d-datepicker__month-year", attrs: { "direction": "row", "gap": "300" } }, [_c("dt-stack", { staticClass: "d-datepicker__nav", attrs: { "as": "nav", "direction": "row", "gap": "200" } }, [_c("dt-tooltip", { attrs: { "message": _vm.prevYearLabel, "placement": "top", "fallback-placements": ["top-start", "auto"] }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
|
|
270
270
|
return [_c("dt-button", { ref: _vm.refNames[0], staticClass: "d-datepicker__nav-btn", attrs: { "id": "prevYearButton", "size": "xs", "importance": "clear", "kind": "muted", "circle": true, "type": "button", "aria-label": `${_vm.changeToLabel} ${_vm.prevYearLabel} ${_vm.selectYear - 1}` }, on: { "click": function($event) {
|
|
271
271
|
return _vm.changeYear(-1);
|
|
272
272
|
}, "keydown": function($event) {
|
|
273
273
|
return _vm.handleKeyDown($event);
|
|
274
274
|
} } }, [_c("dt-icon", { attrs: { "name": "chevrons-left", "size": "200" } })], 1)];
|
|
275
|
-
}, proxy: true }]) }), _c("dt-tooltip", { attrs: { "message": _vm.prevMonthLabel, "placement": "top" }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
|
|
275
|
+
}, proxy: true }]) }), _c("dt-tooltip", { attrs: { "message": _vm.prevMonthLabel, "placement": "top", "fallback-placements": ["top-end", "auto"] }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
|
|
276
276
|
return [_c("dt-button", { ref: _vm.refNames[1], staticClass: "d-datepicker__nav-btn", attrs: { "id": "prevMonthButton", "size": "xs", "importance": "clear", "kind": "muted", "circle": true, "type": "button", "aria-label": `${_vm.changeToLabel} ${_vm.prevMonthLabel} ${_vm.formattedMonth(_vm.selectMonth - 1)}` }, on: { "click": function($event) {
|
|
277
277
|
return _vm.changeMonth(-1);
|
|
278
278
|
}, "keydown": function($event) {
|
|
279
279
|
return _vm.handleKeyDown($event);
|
|
280
280
|
} } }, [_c("dt-icon", { attrs: { "name": "chevron-left", "size": "200" } })], 1)];
|
|
281
|
-
}, proxy: true }]) })], 1), _c("div", { staticClass: "d-datepicker__month-year-title", attrs: { "id": "calendar-heading" } }, [_vm._v(" " + _vm._s(_vm.formattedMonth(_vm.selectMonth)) + " " + _vm._s(_vm.selectYear) + " ")]), _c("dt-stack", { staticClass: "d-datepicker__nav", attrs: { "as": "nav", "direction": "row", "gap": "200" } }, [_c("dt-tooltip", { attrs: { "message": _vm.nextMonthLabel, "placement": "top" }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
|
|
281
|
+
}, proxy: true }]) })], 1), _c("div", { staticClass: "d-datepicker__month-year-title", attrs: { "id": "calendar-heading" } }, [_vm._v(" " + _vm._s(_vm.formattedMonth(_vm.selectMonth)) + " " + _vm._s(_vm.selectYear) + " ")]), _c("dt-stack", { staticClass: "d-datepicker__nav", attrs: { "as": "nav", "direction": "row", "gap": "200" } }, [_c("dt-tooltip", { attrs: { "message": _vm.nextMonthLabel, "placement": "top", "fallback-placements": ["top-start", "auto"] }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
|
|
282
282
|
return [_c("dt-button", { ref: _vm.refNames[2], staticClass: "d-datepicker__nav-btn", attrs: { "id": "nextMonthButton", "size": "xs", "importance": "clear", "circle": true, "kind": "muted", "type": "button", "aria-label": `${_vm.changeToLabel} ${_vm.nextMonthLabel} ${_vm.formattedMonth(_vm.selectMonth + 1)}` }, on: { "click": function($event) {
|
|
283
283
|
return _vm.changeMonth(1);
|
|
284
284
|
}, "keydown": function($event) {
|
|
285
285
|
return _vm.handleKeyDown($event);
|
|
286
286
|
} } }, [_c("dt-icon", { attrs: { "name": "chevron-right", "size": "200" } })], 1)];
|
|
287
|
-
}, proxy: true }]) }), _c("dt-tooltip", { attrs: { "message": _vm.nextYearLabel, "placement": "top" }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
|
|
287
|
+
}, proxy: true }]) }), _c("dt-tooltip", { attrs: { "message": _vm.nextYearLabel, "placement": "top", "fallback-placements": ["top-end", "auto"] }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
|
|
288
288
|
return [_c("dt-button", { ref: _vm.refNames[3], staticClass: "d-datepicker__nav-btn", attrs: { "id": "nextYearButton", "size": "xs", "kind": "muted", "circle": true, "importance": "clear", "type": "button", "aria-label": `${_vm.changeToLabel} ${_vm.nextYearLabel} ${_vm.selectYear + 1}` }, on: { "click": function($event) {
|
|
289
289
|
return _vm.changeYear(1);
|
|
290
290
|
}, "keydown": function($event) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"datepicker.cjs","sources":["../../components/datepicker/datepicker_constants.js","../../components/datepicker/utils.js","../../components/datepicker/modules/month-year-picker.vue","../../components/datepicker/modules/calendar.vue","../../components/datepicker/datepicker.vue","../../components/datepicker/formatUtils.js"],"sourcesContent":["/**\n * Week start day\n * 0 - Sunday\n * 1 - Monday\n */\nexport const WEEK_START = 0;\n\nexport const MONTH_FORMAT = 'MMMM';\n\nexport const INTL_MONTH_FORMAT = 'long';\n","import {\n startOfWeek, addDays, getMonth, isEqual,\n addMonths, startOfMonth, getDay, getDate,\n subMonths, endOfMonth,\n} from 'date-fns';\nimport { WEEK_START } from '@/components/datepicker/datepicker_constants.js';\n\nconst _parsedGetDate = (value) => (value ? new Date(value) : new Date());\n\n/**\n * Get 7 days from the provided start date, month is used to check\n * whether the date is from the specified month or in the offset\n */\nconst getWeekDays = (startDay, month, selectedDay) => {\n const startDate = _parsedGetDate(JSON.parse(JSON.stringify(startDay)));\n const dates = [];\n for (let i = 0; i < 7; i++) {\n const next = addDays(startDate, i);\n const isNext = getMonth(next) !== month;\n dates.push({\n text: next.getDate(),\n value: next,\n currentMonth: !isNext,\n isFirstDayOfMonth: next.getDate() === 1 && !isNext,\n // will be selected if the date is the same as the selected day and is from the current month\n selected: selectedDay ? (next.getDate() === selectedDay && !isNext) : false,\n });\n }\n return dates;\n};\n\nconst isDateEqual = (date, dateToCompare) => {\n if (!date || !dateToCompare) {\n return false;\n }\n return isEqual(date, dateToCompare);\n};\n\n/**\n * Get days for the calendar to be displayed in a table grouped by weeks\n */\nexport const getCalendarDays = (month, year, selectedDay) => {\n const weeks = [];\n const firstDate = _parsedGetDate(new Date(year, month));\n const lastDate = _parsedGetDate(new Date(year, month + 1, 0));\n\n const weekStartsOn = WEEK_START;\n\n const firstDateInCalendar = startOfWeek(firstDate, { weekStartsOn });\n\n const addDaysToWeek = (date) => {\n const days = getWeekDays(date, month, selectedDay);\n\n weeks.push({ days });\n\n if (\n !weeks[weeks.length - 1].days.some((day) =>\n isDateEqual(day.value, lastDate),\n )\n ) {\n const nextDate = addDays(date, 7);\n addDaysToWeek(nextDate);\n }\n };\n\n addDaysToWeek(firstDateInCalendar);\n\n return weeks;\n};\n\n/**\n * Generate week day names based on locale and in order specified in week start\n */\nexport const getWeekDayNames = (locale, weekStart) => {\n // Get list in order from sun ... sat\n const days = [1, 2, 3, 4, 5, 6, 7].map((day) => {\n return new Intl.DateTimeFormat(locale, { weekday: 'short', timeZone: 'UTC' })\n .format(new Date(`2017-01-0${day}T00:00:00+00:00`))\n .slice(0, 2);\n });\n\n // Get days that are in order before specified week start\n const beforeWeekStart = days.slice(0, weekStart);\n // Get days that are in order after specified week start\n const afterWeekStart = days.slice(weekStart + 1, days.length);\n\n // return them in correct order\n return [days[weekStart]].concat(...afterWeekStart).concat(...beforeWeekStart);\n};\n\nexport const formatMonth = (month, monthFormat, locale) => {\n return new Intl.DateTimeFormat(locale, { month: monthFormat }).format(new Date(2000, month, 1));\n};\n\nexport const calculateNextFocusDate = (currentDate) => {\n const date = new Date(currentDate);\n const currentWeekday = getDay(date);\n const nextMonthDate = addMonths(date, 1);\n const nextMonthStart = startOfMonth(nextMonthDate);\n const nextMonthStartWeekday = getDay(nextMonthStart);\n\n const dayDifference = (currentWeekday - nextMonthStartWeekday + 7) % 7;\n\n // Add the difference in days to the first day of the next month\n const focusDate = addDays(nextMonthStart, dayDifference);\n\n // Returns only the day of the month\n return getDate(focusDate);\n};\n\nexport const calculatePrevFocusDate = (currentDate) => {\n const date = new Date(currentDate);\n const currentWeekday = getDay(date);\n\n // Move to the last day of the previous month\n const lastDayOfPrevMonth = endOfMonth(subMonths(date, 1));\n let focusDate = lastDayOfPrevMonth;\n\n // Adjust to the same weekday in the last week of the previous month\n while (getDay(focusDate) !== currentWeekday) {\n focusDate = addDays(focusDate, -1);\n }\n\n // Returns only the day of the month\n return getDate(focusDate);\n};\n","<template>\n <dt-stack\n direction=\"row\"\n class=\"d-datepicker__month-year\"\n gap=\"300\"\n >\n <dt-stack\n as=\"nav\"\n direction=\"row\"\n gap=\"200\"\n class=\"d-datepicker__nav\"\n >\n <dt-tooltip\n :message=\"prevYearLabel\"\n placement=\"top\"\n >\n <template #anchor>\n <dt-button\n id=\"prevYearButton\"\n :ref=\"refNames[0]\"\n size=\"xs\"\n importance=\"clear\"\n kind=\"muted\"\n :circle=\"true\"\n class=\"d-datepicker__nav-btn\"\n type=\"button\"\n :aria-label=\"`${changeToLabel} ${prevYearLabel} ${selectYear - 1}`\"\n @click=\"changeYear(-1)\"\n @keydown=\"handleKeyDown($event)\"\n >\n <dt-icon\n name=\"chevrons-left\"\n size=\"200\"\n />\n </dt-button>\n </template>\n </dt-tooltip>\n <dt-tooltip\n :message=\"prevMonthLabel\"\n placement=\"top\"\n >\n <template #anchor>\n <dt-button\n id=\"prevMonthButton\"\n :ref=\"refNames[1]\"\n size=\"xs\"\n importance=\"clear\"\n kind=\"muted\"\n :circle=\"true\"\n class=\"d-datepicker__nav-btn\"\n type=\"button\"\n :aria-label=\"`${changeToLabel} ${prevMonthLabel} ${formattedMonth(selectMonth - 1)}`\"\n @click=\"changeMonth(-1)\"\n @keydown=\"handleKeyDown($event)\"\n >\n <dt-icon\n name=\"chevron-left\"\n size=\"200\"\n />\n </dt-button>\n </template>\n </dt-tooltip>\n </dt-stack>\n <div\n id=\"calendar-heading\"\n class=\"d-datepicker__month-year-title\"\n >\n {{ formattedMonth(selectMonth) }}\n\n {{ selectYear }}\n </div>\n <dt-stack\n as=\"nav\"\n direction=\"row\"\n gap=\"200\"\n class=\"d-datepicker__nav\"\n >\n <dt-tooltip\n :message=\"nextMonthLabel\"\n placement=\"top\"\n >\n <template #anchor>\n <dt-button\n id=\"nextMonthButton\"\n :ref=\"refNames[2]\"\n size=\"xs\"\n importance=\"clear\"\n :circle=\"true\"\n kind=\"muted\"\n class=\"d-datepicker__nav-btn\"\n type=\"button\"\n :aria-label=\"`${changeToLabel} ${nextMonthLabel} ${formattedMonth(selectMonth + 1)}`\"\n @click=\"changeMonth(1)\"\n @keydown=\"handleKeyDown($event)\"\n >\n <dt-icon\n name=\"chevron-right\"\n size=\"200\"\n />\n </dt-button>\n </template>\n </dt-tooltip>\n <dt-tooltip\n :message=\"nextYearLabel\"\n placement=\"top\"\n >\n <template #anchor>\n <dt-button\n id=\"nextYearButton\"\n :ref=\"refNames[3]\"\n size=\"xs\"\n kind=\"muted\"\n :circle=\"true\"\n importance=\"clear\"\n class=\"d-datepicker__nav-btn\"\n type=\"button\"\n :aria-label=\"`${changeToLabel} ${nextYearLabel} ${selectYear + 1}`\"\n @click=\"changeYear(1)\"\n @keydown=\"handleKeyDown($event)\"\n >\n <dt-icon\n name=\"chevrons-right\"\n size=\"200\"\n />\n </dt-button>\n </template>\n </dt-tooltip>\n </dt-stack>\n </dt-stack>\n</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport { getYear, addMonths, getMonth, set, subMonths, getDate } from 'date-fns';\nimport { getCalendarDays, formatMonth } from '../utils';\nimport { INTL_MONTH_FORMAT } from '../datepicker_constants';\nimport DtStack from '@/components/stack/stack.vue';\nimport DtTooltip from '@/components/tooltip/tooltip.vue';\nimport DtButton from '@/components/button/button.vue';\n\nexport default {\n name: 'DtDatepickerMonthYearPicker',\n\n components: { DtButton, DtTooltip, DtStack, DtIcon },\n\n props: {\n locale: {\n type: String,\n required: true,\n },\n\n prevMonthLabel: {\n type: String,\n required: true,\n },\n\n nextMonthLabel: {\n type: String,\n required: true,\n },\n\n prevYearLabel: {\n type: String,\n required: true,\n },\n\n nextYearLabel: {\n type: String,\n required: true,\n },\n\n changeToLabel: {\n type: String,\n required: true,\n },\n\n selectedDate: {\n type: Date,\n required: true,\n },\n },\n\n emits: [\n /**\n * Will retrieve the calendar days of the given date\n *\n * @event calendar-days\n * @type {Array}\n */\n 'calendar-days',\n\n /**\n * Will focus first day in calendar\n *\n * @event focus-first-day\n */\n 'focus-first-day',\n\n /**\n * Will focus last day in calendar\n *\n * @event focus-last-day\n */\n 'focus-last-day',\n\n /**\n * Will close the datepicker\n *\n * @event close-datepicker\n */\n 'close-datepicker',\n ],\n\n data () {\n return {\n selectMonth: getMonth(this.selectedDate),\n selectYear: getYear(this.selectedDate),\n highlightedDay: null,\n focusPicker: 0,\n focusRefs: [],\n refNames: ['prevYearButtonRef', 'prevMonthButtonRef', 'nextMonthButtonRef', 'nextYearButtonRef'],\n };\n },\n\n computed: {\n // Get days for the currently selected month and year and highlight the selected day\n calendarDays () {\n return getCalendarDays(this.selectMonth, this.selectYear, this.highlightedDay);\n },\n\n formattedMonth () {\n return (month) => formatMonth(month, INTL_MONTH_FORMAT, this.locale);\n },\n },\n\n watch: {\n selectMonth: {\n handler () {\n this.highlightDay();\n this.$emit('calendar-days', this.calendarDays);\n },\n\n immediate: true,\n },\n\n selectYear: {\n handler () {\n this.highlightDay();\n this.$emit('calendar-days', this.calendarDays);\n },\n\n immediate: true,\n },\n\n },\n\n mounted () {\n this.setButtonsRef();\n this.focusMonthYearPicker();\n },\n\n methods: {\n setButtonsRef () {\n this.focusRefs = this.refNames.map(refName => this.$refs[refName]);\n },\n\n focusMonthYearPicker () {\n this.focusPicker = 0;\n this.focusRefs[0].$el.focus();\n },\n\n handleKeyDown (event) {\n switch (event.key) {\n case 'ArrowLeft':\n event.preventDefault();\n if (this.focusPicker === 0) {\n this.focusPicker = 3;\n this.focusRefs[this.focusPicker].$el.focus();\n } else {\n this.focusPicker--;\n this.focusRefs[this.focusPicker].$el.focus();\n }\n break;\n\n case 'ArrowRight':\n event.preventDefault();\n if (this.focusPicker === 3) {\n this.focusPicker = 0;\n this.focusRefs[this.focusPicker].$el.focus();\n } else {\n this.focusPicker++;\n this.focusRefs[this.focusPicker].$el.focus();\n }\n break;\n\n case 'ArrowDown':\n event.preventDefault();\n this.$emit('focus-first-day');\n break;\n\n case 'Tab':\n event.preventDefault();\n this.$emit('focus-first-day');\n break;\n\n case 'Escape':\n this.$emit('close-datepicker');\n break;\n }\n },\n\n highlightDay () {\n const year = getYear(this.selectedDate);\n const month = getMonth(this.selectedDate);\n\n if (year !== this.selectYear || month !== this.selectMonth) {\n this.highlightedDay = null;\n } else {\n this.highlightedDay = getDate(this.selectedDate);\n }\n },\n\n changeMonth (value) {\n // Adjust year when changing from January to December or vice versa\n if ((this.selectMonth === 0 && value === -1) || (this.selectMonth === 11 && value === 1)) {\n this.selectYear += value;\n }\n\n // Calculate the new date by adding or subtracting months\n const initialDate = set(this.selectedDate, { month: this.selectMonth, year: this.selectYear });\n const newDate = value === 1 ? addMonths(initialDate, 1) : subMonths(initialDate, 1);\n\n // Update the selected month\n this.selectMonth = getMonth(newDate);\n },\n\n changeYear (value) {\n this.selectYear = this.selectYear + value;\n },\n\n goToNextMonth () {\n this.changeMonth(1);\n },\n\n goToPrevMonth () {\n this.changeMonth(-1);\n },\n },\n};\n</script>\n","<template>\n <table\n class=\"d-datepicker__calendar\"\n aria-labelledby=\"calendar-heading\"\n >\n <thead>\n <tr>\n <th\n v-for=\"day in weekDays\"\n :key=\"day\"\n scope=\"col\"\n class=\"d-datepicker__cell d-datepicker__cell--header\"\n >\n <span\n class=\"d-datepicker__weekday\"\n :title=\"day\"\n :aria-label=\"day\"\n > {{ day }}</span>\n </th>\n </tr>\n </thead>\n <tbody>\n <tr\n v-for=\"(week, indexWeek) in calendarDays\"\n :key=\"indexWeek\"\n >\n <td\n v-for=\"(day, indexDays) in week.days\"\n :key=\"indexWeek + indexDays\"\n class=\"d-datepicker__cell\"\n role=\"listbox\"\n >\n <dt-button\n :ref=\"`buttonRef_${indexWeek}_${indexDays}`\"\n class=\"d-datepicker__day\"\n :circle=\"true\"\n size=\"sm\"\n importance=\"clear\"\n :disabled=\"!day.currentMonth\"\n :class=\"{\n 'd-datepicker__day--disabled': !day.currentMonth,\n 'd-datepicker__day--selected': selectedDay\n ? ((day.text === selectedDay) && day.currentMonth)\n : day.selected,\n }\"\n type=\"button\"\n :aria-selected=\"!!selectedDay ? ((day.text === selectedDay) && day.currentMonth) : day.selected\"\n :aria-label=\"dayAriaLabel(day)\"\n role=\"option\"\n @click=\"selectDay(day)\"\n @keydown=\"handleKeyDown($event)\"\n >\n {{ day.text }}\n </dt-button>\n </td>\n </tr>\n </tbody>\n </table>\n</template>\n\n<script>\nimport { getWeekDayNames, calculateNextFocusDate, calculatePrevFocusDate } from '@/components/datepicker/utils';\nimport { WEEK_START, MONTH_FORMAT } from '@/components/datepicker/datepicker_constants.js';\nimport { format, getYear } from 'date-fns';\nimport DtButton from '@/components/button/button.vue';\n\nexport default {\n name: 'DtDatepickerCalendar',\n components: { DtButton },\n\n props: {\n calendarDays: {\n type: Array,\n required: true,\n },\n\n locale: {\n type: String,\n required: true,\n },\n\n selectDayLabel: {\n type: String,\n required: true,\n },\n },\n\n emits: [\n /**\n * Event fired when a date is selected\n *\n * @event select-date\n * @type {Date}\n */\n 'select-date',\n\n /**\n * Will focus the month and year picker\n *\n * @event focus-month-year-picker\n */\n 'focus-month-year-picker',\n\n /**\n * Will close the datepicker\n *\n * @event close-datepicker\n */\n 'close-datepicker',\n ],\n\n data () {\n return {\n // local selectedDay to override the received by props calendarDays\n selectedDay: null,\n focusDay: 0,\n daysRef: [],\n };\n },\n\n computed: {\n weekDays () {\n return getWeekDayNames(this.locale, WEEK_START);\n },\n },\n\n watch: {\n calendarDays () {\n // on calendarDays update, reset our local variables\n this.focusDay = 0;\n this.selectedDay = null;\n\n this.daysRef = [];\n\n this.$nextTick(() => {\n this.daysRef = [];\n this.setDayRef();\n });\n },\n },\n\n methods: {\n dayAriaLabel (day) {\n return `${this.selectDayLabel} ${day.text} ${format(day.value, MONTH_FORMAT)} ${getYear(day.value)}`;\n },\n\n setDayRef (el, day) {\n this.calendarDays.forEach((week, weekIndex) => {\n week.days.forEach((day, dayIndex) => {\n const refKey = `buttonRef_${weekIndex}_${dayIndex}`;\n const dayButton = this.$refs[refKey];\n if (dayButton && day.currentMonth) {\n this.daysRef.push({ el: dayButton[0], day });\n }\n });\n });\n },\n\n handleKeyDown (event) {\n switch (event.key) {\n case 'ArrowUp':\n event.preventDefault();\n this.focusDay -= 7;\n try {\n this.daysRef[this.focusDay].el.$el.focus();\n } catch (error) {\n const prevFocusDate = calculatePrevFocusDate(this.daysRef[this.focusDay + 7].day.value);\n this.$emit('go-to-prev-month');\n this.$nextTick(() => {\n this.setDayRef();\n this.daysRef[prevFocusDate - 1].el.$el.focus();\n this.focusDay += prevFocusDate - 1;\n });\n }\n break;\n\n case 'ArrowDown':\n event.preventDefault();\n this.focusDay += 7;\n try {\n this.daysRef[this.focusDay].el.$el.focus();\n } catch (error) {\n const nextFocusDate = calculateNextFocusDate(this.daysRef[this.focusDay - 7].day.value);\n this.$emit('go-to-next-month');\n this.$nextTick(() => {\n this.setDayRef();\n this.daysRef[nextFocusDate - 1].el.$el.focus();\n this.focusDay += nextFocusDate - 1;\n });\n }\n break;\n\n case 'ArrowLeft':\n event.preventDefault();\n if (this.focusDay > 0) {\n this.focusDay -= 1;\n this.daysRef[this.focusDay].el.$el.focus();\n } else {\n // if we are on month first day, jump to last day of prev month\n this.$emit('go-to-prev-month');\n this.$nextTick(() => {\n this.focusLastDay();\n });\n }\n break;\n\n case 'ArrowRight':\n event.preventDefault();\n if (this.focusDay < this.daysRef.length - 1) {\n this.focusDay += 1;\n this.daysRef[this.focusDay].el.$el.focus();\n } else {\n // if we are on month last day, jump to first day of next month\n this.$emit('go-to-next-month');\n this.$nextTick(() => {\n this.focusFirstDay();\n });\n }\n break;\n\n case 'Tab':\n event.preventDefault();\n this.$emit('focus-month-year-picker');\n break;\n\n case 'Escape':\n this.$emit('close-datepicker');\n break;\n }\n },\n\n focusFirstDay () {\n this.focusDay = 0;\n this.$nextTick(() => {\n this.daysRef[this.focusDay].el.$el.focus();\n });\n },\n\n focusLastDay () {\n this.$nextTick(() => {\n this.focusDay = this.daysRef.length - 1;\n this.daysRef[this.focusDay].el.$el.focus();\n });\n },\n\n selectDay (day) {\n if (!day.currentMonth) { return; }\n\n // local selectedDay is updated when a day is selected\n this.selectedDay = day.text;\n this.$emit('select-date', day.value);\n },\n },\n};\n</script>\n","<!-- eslint-disable vue/multi-word-component-names -->\n<template>\n <dt-stack\n class=\"d-datepicker\"\n gap=\"400\"\n >\n <div class=\"d-datepicker__hd\">\n <month-year-picker\n ref=\"monthYearPicker\"\n :locale=\"locale\"\n :prev-month-label=\"prevMonthLabel\"\n :next-month-label=\"nextMonthLabel\"\n :prev-year-label=\"prevYearLabel\"\n :next-year-label=\"nextYearLabel\"\n :change-to-label=\"changeToLabel\"\n :selected-date=\"selectedDate\"\n @calendar-days=\"updateCalendarDays\"\n @focus-first-day=\"$refs.calendar.focusFirstDay()\"\n @focus-last-day=\"$refs.calendar.focusLastDay()\"\n @close-datepicker=\"$emit('close-datepicker')\"\n />\n </div>\n <div class=\"d-datepicker__bd\">\n <calendar\n ref=\"calendar\"\n :locale=\"locale\"\n :calendar-days=\"calendarDays\"\n :select-day-label=\"selectDayLabel\"\n @select-date=\"$emit('selected-date', $event)\"\n @focus-month-year-picker=\"$refs.monthYearPicker.focusMonthYearPicker()\"\n @close-datepicker=\"$emit('close-datepicker')\"\n @go-to-next-month=\"$refs.monthYearPicker.goToNextMonth()\"\n @go-to-prev-month=\"$refs.monthYearPicker.goToPrevMonth()\"\n />\n </div>\n </dt-stack>\n</template>\n\n<script>\nimport MonthYearPicker from './modules/month-year-picker.vue';\nimport Calendar from './modules/calendar.vue';\nimport DtStack from '@/components/stack/stack.vue';\n\nexport default {\n name: 'DtDatepicker',\n\n components: { DtStack, MonthYearPicker, Calendar },\n\n props: {\n /**\n * Label for the previous month button\n *\n * @type {String}\n * @example 'Previous month'\n */\n prevMonthLabel: {\n type: String,\n required: true,\n },\n\n /**\n * Label for the next month button\n *\n * @type {String}\n * @example 'Next month'\n */\n nextMonthLabel: {\n type: String,\n required: true,\n },\n\n /**\n * Label for the previous year button\n *\n * @type {String}\n * @example 'Previous year'\n */\n prevYearLabel: {\n type: String,\n required: true,\n },\n\n /**\n * Label for the next year button\n *\n * @type {String}\n * @example 'Next year'\n */\n nextYearLabel: {\n type: String,\n required: true,\n },\n\n /**\n * Label for the select day button\n *\n * @type {String}\n * @example 'Select day'\n */\n selectDayLabel: {\n type: String,\n required: true,\n },\n\n /**\n * Label for the change to button\n *\n * @type {String}\n * @example 'Change to'\n */\n changeToLabel: {\n type: String,\n required: true,\n },\n\n /**\n * Locale for the calendar\n *\n * @type {String}\n */\n locale: {\n type: String,\n default: 'en-US',\n },\n\n /**\n * Selected date\n *\n * @type {Date}\n */\n selectedDate: {\n type: Date,\n default: () => (new Date()),\n },\n },\n\n emits: [\n /**\n * Event fired when a date is selected\n *\n * @event selected-date\n * @type {Date}\n */\n 'selected-date',\n\n /**\n * Event fired when user presses the esc key\n *\n * @event close-datepicker\n */\n 'close-datepicker',\n ],\n\n data () {\n return {\n calendarDays: [],\n };\n },\n\n methods: {\n updateCalendarDays (days) {\n this.calendarDays = days;\n },\n },\n};\n</script>\n","export function formatLong (date, locale = 'default') {\n return new Intl.DateTimeFormat(locale, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }).format(date);\n}\n\nexport function formatMedium (date, locale = 'default') {\n return new Intl.DateTimeFormat(locale, { year: 'numeric', month: 'long', day: 'numeric' }).format(date);\n}\n\nexport function formatShort (date, locale = 'default', showWeekday = true) {\n const options = showWeekday ? { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' } : { year: 'numeric', month: 'short', day: 'numeric' };\n return new Intl.DateTimeFormat(locale, options).format(date);\n}\n\nexport function formatNoYear (date, locale = 'default', abbreviated = false) {\n const monthFormat = abbreviated ? 'short' : 'long';\n return new Intl.DateTimeFormat(locale, { month: monthFormat, day: 'numeric' }).format(date);\n}\n\nexport function formatNumerical (date, locale = 'default') {\n return new Intl.DateTimeFormat(locale, { year: '2-digit', month: '2-digit', day: '2-digit' }).format(date);\n}\n\nexport default {\n formatLong,\n formatMedium,\n formatShort,\n formatNoYear,\n formatNumerical,\n};\n"],"names":["addDays","getMonth","isEqual","startOfWeek","getDay","addMonths","startOfMonth","getDate","endOfMonth","subMonths","_sfc_main","DtButton","DtTooltip","DtStack","DtIcon","getYear","set","format","day"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"datepicker.cjs","sources":["../../components/datepicker/datepicker_constants.js","../../components/datepicker/utils.js","../../components/datepicker/modules/month-year-picker.vue","../../components/datepicker/modules/calendar.vue","../../components/datepicker/datepicker.vue","../../components/datepicker/formatUtils.js"],"sourcesContent":["/**\n * Week start day\n * 0 - Sunday\n * 1 - Monday\n */\nexport const WEEK_START = 0;\n\nexport const MONTH_FORMAT = 'MMMM';\n\nexport const INTL_MONTH_FORMAT = 'long';\n","import {\n startOfWeek, addDays, getMonth, isEqual,\n addMonths, startOfMonth, getDay, getDate,\n subMonths, endOfMonth,\n} from 'date-fns';\nimport { WEEK_START } from '@/components/datepicker/datepicker_constants.js';\n\nconst _parsedGetDate = (value) => (value ? new Date(value) : new Date());\n\n/**\n * Get 7 days from the provided start date, month is used to check\n * whether the date is from the specified month or in the offset\n */\nconst getWeekDays = (startDay, month, selectedDay) => {\n const startDate = _parsedGetDate(JSON.parse(JSON.stringify(startDay)));\n const dates = [];\n for (let i = 0; i < 7; i++) {\n const next = addDays(startDate, i);\n const isNext = getMonth(next) !== month;\n dates.push({\n text: next.getDate(),\n value: next,\n currentMonth: !isNext,\n isFirstDayOfMonth: next.getDate() === 1 && !isNext,\n // will be selected if the date is the same as the selected day and is from the current month\n selected: selectedDay ? (next.getDate() === selectedDay && !isNext) : false,\n });\n }\n return dates;\n};\n\nconst isDateEqual = (date, dateToCompare) => {\n if (!date || !dateToCompare) {\n return false;\n }\n return isEqual(date, dateToCompare);\n};\n\n/**\n * Get days for the calendar to be displayed in a table grouped by weeks\n */\nexport const getCalendarDays = (month, year, selectedDay) => {\n const weeks = [];\n const firstDate = _parsedGetDate(new Date(year, month));\n const lastDate = _parsedGetDate(new Date(year, month + 1, 0));\n\n const weekStartsOn = WEEK_START;\n\n const firstDateInCalendar = startOfWeek(firstDate, { weekStartsOn });\n\n const addDaysToWeek = (date) => {\n const days = getWeekDays(date, month, selectedDay);\n\n weeks.push({ days });\n\n if (\n !weeks[weeks.length - 1].days.some((day) =>\n isDateEqual(day.value, lastDate),\n )\n ) {\n const nextDate = addDays(date, 7);\n addDaysToWeek(nextDate);\n }\n };\n\n addDaysToWeek(firstDateInCalendar);\n\n return weeks;\n};\n\n/**\n * Generate week day names based on locale and in order specified in week start\n */\nexport const getWeekDayNames = (locale, weekStart) => {\n // Get list in order from sun ... sat\n const days = [1, 2, 3, 4, 5, 6, 7].map((day) => {\n return new Intl.DateTimeFormat(locale, { weekday: 'short', timeZone: 'UTC' })\n .format(new Date(`2017-01-0${day}T00:00:00+00:00`))\n .slice(0, 2);\n });\n\n // Get days that are in order before specified week start\n const beforeWeekStart = days.slice(0, weekStart);\n // Get days that are in order after specified week start\n const afterWeekStart = days.slice(weekStart + 1, days.length);\n\n // return them in correct order\n return [days[weekStart]].concat(...afterWeekStart).concat(...beforeWeekStart);\n};\n\nexport const formatMonth = (month, monthFormat, locale) => {\n return new Intl.DateTimeFormat(locale, { month: monthFormat }).format(new Date(2000, month, 1));\n};\n\nexport const calculateNextFocusDate = (currentDate) => {\n const date = new Date(currentDate);\n const currentWeekday = getDay(date);\n const nextMonthDate = addMonths(date, 1);\n const nextMonthStart = startOfMonth(nextMonthDate);\n const nextMonthStartWeekday = getDay(nextMonthStart);\n\n const dayDifference = (currentWeekday - nextMonthStartWeekday + 7) % 7;\n\n // Add the difference in days to the first day of the next month\n const focusDate = addDays(nextMonthStart, dayDifference);\n\n // Returns only the day of the month\n return getDate(focusDate);\n};\n\nexport const calculatePrevFocusDate = (currentDate) => {\n const date = new Date(currentDate);\n const currentWeekday = getDay(date);\n\n // Move to the last day of the previous month\n const lastDayOfPrevMonth = endOfMonth(subMonths(date, 1));\n let focusDate = lastDayOfPrevMonth;\n\n // Adjust to the same weekday in the last week of the previous month\n while (getDay(focusDate) !== currentWeekday) {\n focusDate = addDays(focusDate, -1);\n }\n\n // Returns only the day of the month\n return getDate(focusDate);\n};\n","<template>\n <dt-stack\n direction=\"row\"\n class=\"d-datepicker__month-year\"\n gap=\"300\"\n >\n <dt-stack\n as=\"nav\"\n direction=\"row\"\n gap=\"200\"\n class=\"d-datepicker__nav\"\n >\n <dt-tooltip\n :message=\"prevYearLabel\"\n placement=\"top\"\n :fallback-placements=\"['top-start', 'auto']\"\n >\n <template #anchor>\n <dt-button\n id=\"prevYearButton\"\n :ref=\"refNames[0]\"\n size=\"xs\"\n importance=\"clear\"\n kind=\"muted\"\n :circle=\"true\"\n class=\"d-datepicker__nav-btn\"\n type=\"button\"\n :aria-label=\"`${changeToLabel} ${prevYearLabel} ${selectYear - 1}`\"\n @click=\"changeYear(-1)\"\n @keydown=\"handleKeyDown($event)\"\n >\n <dt-icon\n name=\"chevrons-left\"\n size=\"200\"\n />\n </dt-button>\n </template>\n </dt-tooltip>\n <dt-tooltip\n :message=\"prevMonthLabel\"\n placement=\"top\"\n :fallback-placements=\"['top-end', 'auto']\"\n >\n <template #anchor>\n <dt-button\n id=\"prevMonthButton\"\n :ref=\"refNames[1]\"\n size=\"xs\"\n importance=\"clear\"\n kind=\"muted\"\n :circle=\"true\"\n class=\"d-datepicker__nav-btn\"\n type=\"button\"\n :aria-label=\"`${changeToLabel} ${prevMonthLabel} ${formattedMonth(selectMonth - 1)}`\"\n @click=\"changeMonth(-1)\"\n @keydown=\"handleKeyDown($event)\"\n >\n <dt-icon\n name=\"chevron-left\"\n size=\"200\"\n />\n </dt-button>\n </template>\n </dt-tooltip>\n </dt-stack>\n <div\n id=\"calendar-heading\"\n class=\"d-datepicker__month-year-title\"\n >\n {{ formattedMonth(selectMonth) }}\n\n {{ selectYear }}\n </div>\n <dt-stack\n as=\"nav\"\n direction=\"row\"\n gap=\"200\"\n class=\"d-datepicker__nav\"\n >\n <dt-tooltip\n :message=\"nextMonthLabel\"\n placement=\"top\"\n :fallback-placements=\"['top-start', 'auto']\"\n >\n <template #anchor>\n <dt-button\n id=\"nextMonthButton\"\n :ref=\"refNames[2]\"\n size=\"xs\"\n importance=\"clear\"\n :circle=\"true\"\n kind=\"muted\"\n class=\"d-datepicker__nav-btn\"\n type=\"button\"\n :aria-label=\"`${changeToLabel} ${nextMonthLabel} ${formattedMonth(selectMonth + 1)}`\"\n @click=\"changeMonth(1)\"\n @keydown=\"handleKeyDown($event)\"\n >\n <dt-icon\n name=\"chevron-right\"\n size=\"200\"\n />\n </dt-button>\n </template>\n </dt-tooltip>\n <dt-tooltip\n :message=\"nextYearLabel\"\n placement=\"top\"\n :fallback-placements=\"['top-end', 'auto']\"\n >\n <template #anchor>\n <dt-button\n id=\"nextYearButton\"\n :ref=\"refNames[3]\"\n size=\"xs\"\n kind=\"muted\"\n :circle=\"true\"\n importance=\"clear\"\n class=\"d-datepicker__nav-btn\"\n type=\"button\"\n :aria-label=\"`${changeToLabel} ${nextYearLabel} ${selectYear + 1}`\"\n @click=\"changeYear(1)\"\n @keydown=\"handleKeyDown($event)\"\n >\n <dt-icon\n name=\"chevrons-right\"\n size=\"200\"\n />\n </dt-button>\n </template>\n </dt-tooltip>\n </dt-stack>\n </dt-stack>\n</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport { getYear, addMonths, getMonth, set, subMonths, getDate } from 'date-fns';\nimport { getCalendarDays, formatMonth } from '../utils';\nimport { INTL_MONTH_FORMAT } from '../datepicker_constants';\nimport DtStack from '@/components/stack/stack.vue';\nimport DtTooltip from '@/components/tooltip/tooltip.vue';\nimport DtButton from '@/components/button/button.vue';\n\nexport default {\n name: 'DtDatepickerMonthYearPicker',\n\n components: { DtButton, DtTooltip, DtStack, DtIcon },\n\n props: {\n locale: {\n type: String,\n required: true,\n },\n\n prevMonthLabel: {\n type: String,\n required: true,\n },\n\n nextMonthLabel: {\n type: String,\n required: true,\n },\n\n prevYearLabel: {\n type: String,\n required: true,\n },\n\n nextYearLabel: {\n type: String,\n required: true,\n },\n\n changeToLabel: {\n type: String,\n required: true,\n },\n\n selectedDate: {\n type: Date,\n required: true,\n },\n },\n\n emits: [\n /**\n * Will retrieve the calendar days of the given date\n *\n * @event calendar-days\n * @type {Array}\n */\n 'calendar-days',\n\n /**\n * Will focus first day in calendar\n *\n * @event focus-first-day\n */\n 'focus-first-day',\n\n /**\n * Will focus last day in calendar\n *\n * @event focus-last-day\n */\n 'focus-last-day',\n\n /**\n * Will close the datepicker\n *\n * @event close-datepicker\n */\n 'close-datepicker',\n ],\n\n data () {\n return {\n selectMonth: getMonth(this.selectedDate),\n selectYear: getYear(this.selectedDate),\n highlightedDay: null,\n focusPicker: 0,\n focusRefs: [],\n refNames: ['prevYearButtonRef', 'prevMonthButtonRef', 'nextMonthButtonRef', 'nextYearButtonRef'],\n };\n },\n\n computed: {\n // Get days for the currently selected month and year and highlight the selected day\n calendarDays () {\n return getCalendarDays(this.selectMonth, this.selectYear, this.highlightedDay);\n },\n\n formattedMonth () {\n return (month) => formatMonth(month, INTL_MONTH_FORMAT, this.locale);\n },\n },\n\n watch: {\n selectMonth: {\n handler () {\n this.highlightDay();\n this.$emit('calendar-days', this.calendarDays);\n },\n\n immediate: true,\n },\n\n selectYear: {\n handler () {\n this.highlightDay();\n this.$emit('calendar-days', this.calendarDays);\n },\n\n immediate: true,\n },\n\n },\n\n mounted () {\n this.setButtonsRef();\n this.focusMonthYearPicker();\n },\n\n methods: {\n setButtonsRef () {\n this.focusRefs = this.refNames.map(refName => this.$refs[refName]);\n },\n\n focusMonthYearPicker () {\n this.focusPicker = 0;\n this.focusRefs[0].$el.focus();\n },\n\n handleKeyDown (event) {\n switch (event.key) {\n case 'ArrowLeft':\n event.preventDefault();\n if (this.focusPicker === 0) {\n this.focusPicker = 3;\n this.focusRefs[this.focusPicker].$el.focus();\n } else {\n this.focusPicker--;\n this.focusRefs[this.focusPicker].$el.focus();\n }\n break;\n\n case 'ArrowRight':\n event.preventDefault();\n if (this.focusPicker === 3) {\n this.focusPicker = 0;\n this.focusRefs[this.focusPicker].$el.focus();\n } else {\n this.focusPicker++;\n this.focusRefs[this.focusPicker].$el.focus();\n }\n break;\n\n case 'ArrowDown':\n event.preventDefault();\n this.$emit('focus-first-day');\n break;\n\n case 'Tab':\n event.preventDefault();\n this.$emit('focus-first-day');\n break;\n\n case 'Escape':\n this.$emit('close-datepicker');\n break;\n }\n },\n\n highlightDay () {\n const year = getYear(this.selectedDate);\n const month = getMonth(this.selectedDate);\n\n if (year !== this.selectYear || month !== this.selectMonth) {\n this.highlightedDay = null;\n } else {\n this.highlightedDay = getDate(this.selectedDate);\n }\n },\n\n changeMonth (value) {\n // Adjust year when changing from January to December or vice versa\n if ((this.selectMonth === 0 && value === -1) || (this.selectMonth === 11 && value === 1)) {\n this.selectYear += value;\n }\n\n // Calculate the new date by adding or subtracting months\n const initialDate = set(this.selectedDate, { month: this.selectMonth, year: this.selectYear });\n const newDate = value === 1 ? addMonths(initialDate, 1) : subMonths(initialDate, 1);\n\n // Update the selected month\n this.selectMonth = getMonth(newDate);\n },\n\n changeYear (value) {\n this.selectYear = this.selectYear + value;\n },\n\n goToNextMonth () {\n this.changeMonth(1);\n },\n\n goToPrevMonth () {\n this.changeMonth(-1);\n },\n },\n};\n</script>\n","<template>\n <table\n class=\"d-datepicker__calendar\"\n aria-labelledby=\"calendar-heading\"\n >\n <thead>\n <tr>\n <th\n v-for=\"day in weekDays\"\n :key=\"day\"\n scope=\"col\"\n class=\"d-datepicker__cell d-datepicker__cell--header\"\n >\n <span\n class=\"d-datepicker__weekday\"\n :title=\"day\"\n :aria-label=\"day\"\n > {{ day }}</span>\n </th>\n </tr>\n </thead>\n <tbody>\n <tr\n v-for=\"(week, indexWeek) in calendarDays\"\n :key=\"indexWeek\"\n >\n <td\n v-for=\"(day, indexDays) in week.days\"\n :key=\"indexWeek + indexDays\"\n class=\"d-datepicker__cell\"\n role=\"listbox\"\n >\n <dt-button\n :ref=\"`buttonRef_${indexWeek}_${indexDays}`\"\n class=\"d-datepicker__day\"\n :circle=\"true\"\n size=\"sm\"\n importance=\"clear\"\n :disabled=\"!day.currentMonth\"\n :class=\"{\n 'd-datepicker__day--disabled': !day.currentMonth,\n 'd-datepicker__day--selected': selectedDay\n ? ((day.text === selectedDay) && day.currentMonth)\n : day.selected,\n }\"\n type=\"button\"\n :aria-selected=\"!!selectedDay ? ((day.text === selectedDay) && day.currentMonth) : day.selected\"\n :aria-label=\"dayAriaLabel(day)\"\n role=\"option\"\n @click=\"selectDay(day)\"\n @keydown=\"handleKeyDown($event)\"\n >\n {{ day.text }}\n </dt-button>\n </td>\n </tr>\n </tbody>\n </table>\n</template>\n\n<script>\nimport { getWeekDayNames, calculateNextFocusDate, calculatePrevFocusDate } from '@/components/datepicker/utils';\nimport { WEEK_START, MONTH_FORMAT } from '@/components/datepicker/datepicker_constants.js';\nimport { format, getYear } from 'date-fns';\nimport DtButton from '@/components/button/button.vue';\n\nexport default {\n name: 'DtDatepickerCalendar',\n components: { DtButton },\n\n props: {\n calendarDays: {\n type: Array,\n required: true,\n },\n\n locale: {\n type: String,\n required: true,\n },\n\n selectDayLabel: {\n type: String,\n required: true,\n },\n },\n\n emits: [\n /**\n * Event fired when a date is selected\n *\n * @event select-date\n * @type {Date}\n */\n 'select-date',\n\n /**\n * Will focus the month and year picker\n *\n * @event focus-month-year-picker\n */\n 'focus-month-year-picker',\n\n /**\n * Will close the datepicker\n *\n * @event close-datepicker\n */\n 'close-datepicker',\n ],\n\n data () {\n return {\n // local selectedDay to override the received by props calendarDays\n selectedDay: null,\n focusDay: 0,\n daysRef: [],\n };\n },\n\n computed: {\n weekDays () {\n return getWeekDayNames(this.locale, WEEK_START);\n },\n },\n\n watch: {\n calendarDays () {\n // on calendarDays update, reset our local variables\n this.focusDay = 0;\n this.selectedDay = null;\n\n this.daysRef = [];\n\n this.$nextTick(() => {\n this.daysRef = [];\n this.setDayRef();\n });\n },\n },\n\n methods: {\n dayAriaLabel (day) {\n return `${this.selectDayLabel} ${day.text} ${format(day.value, MONTH_FORMAT)} ${getYear(day.value)}`;\n },\n\n setDayRef (el, day) {\n this.calendarDays.forEach((week, weekIndex) => {\n week.days.forEach((day, dayIndex) => {\n const refKey = `buttonRef_${weekIndex}_${dayIndex}`;\n const dayButton = this.$refs[refKey];\n if (dayButton && day.currentMonth) {\n this.daysRef.push({ el: dayButton[0], day });\n }\n });\n });\n },\n\n handleKeyDown (event) {\n switch (event.key) {\n case 'ArrowUp':\n event.preventDefault();\n this.focusDay -= 7;\n try {\n this.daysRef[this.focusDay].el.$el.focus();\n } catch (error) {\n const prevFocusDate = calculatePrevFocusDate(this.daysRef[this.focusDay + 7].day.value);\n this.$emit('go-to-prev-month');\n this.$nextTick(() => {\n this.setDayRef();\n this.daysRef[prevFocusDate - 1].el.$el.focus();\n this.focusDay += prevFocusDate - 1;\n });\n }\n break;\n\n case 'ArrowDown':\n event.preventDefault();\n this.focusDay += 7;\n try {\n this.daysRef[this.focusDay].el.$el.focus();\n } catch (error) {\n const nextFocusDate = calculateNextFocusDate(this.daysRef[this.focusDay - 7].day.value);\n this.$emit('go-to-next-month');\n this.$nextTick(() => {\n this.setDayRef();\n this.daysRef[nextFocusDate - 1].el.$el.focus();\n this.focusDay += nextFocusDate - 1;\n });\n }\n break;\n\n case 'ArrowLeft':\n event.preventDefault();\n if (this.focusDay > 0) {\n this.focusDay -= 1;\n this.daysRef[this.focusDay].el.$el.focus();\n } else {\n // if we are on month first day, jump to last day of prev month\n this.$emit('go-to-prev-month');\n this.$nextTick(() => {\n this.focusLastDay();\n });\n }\n break;\n\n case 'ArrowRight':\n event.preventDefault();\n if (this.focusDay < this.daysRef.length - 1) {\n this.focusDay += 1;\n this.daysRef[this.focusDay].el.$el.focus();\n } else {\n // if we are on month last day, jump to first day of next month\n this.$emit('go-to-next-month');\n this.$nextTick(() => {\n this.focusFirstDay();\n });\n }\n break;\n\n case 'Tab':\n event.preventDefault();\n this.$emit('focus-month-year-picker');\n break;\n\n case 'Escape':\n this.$emit('close-datepicker');\n break;\n }\n },\n\n focusFirstDay () {\n this.focusDay = 0;\n this.$nextTick(() => {\n this.daysRef[this.focusDay].el.$el.focus();\n });\n },\n\n focusLastDay () {\n this.$nextTick(() => {\n this.focusDay = this.daysRef.length - 1;\n this.daysRef[this.focusDay].el.$el.focus();\n });\n },\n\n selectDay (day) {\n if (!day.currentMonth) { return; }\n\n // local selectedDay is updated when a day is selected\n this.selectedDay = day.text;\n this.$emit('select-date', day.value);\n },\n },\n};\n</script>\n","<!-- eslint-disable vue/multi-word-component-names -->\n<template>\n <dt-stack\n class=\"d-datepicker\"\n gap=\"400\"\n >\n <div class=\"d-datepicker__hd\">\n <month-year-picker\n ref=\"monthYearPicker\"\n :locale=\"locale\"\n :prev-month-label=\"prevMonthLabel\"\n :next-month-label=\"nextMonthLabel\"\n :prev-year-label=\"prevYearLabel\"\n :next-year-label=\"nextYearLabel\"\n :change-to-label=\"changeToLabel\"\n :selected-date=\"selectedDate\"\n @calendar-days=\"updateCalendarDays\"\n @focus-first-day=\"$refs.calendar.focusFirstDay()\"\n @focus-last-day=\"$refs.calendar.focusLastDay()\"\n @close-datepicker=\"$emit('close-datepicker')\"\n />\n </div>\n <div class=\"d-datepicker__bd\">\n <calendar\n ref=\"calendar\"\n :locale=\"locale\"\n :calendar-days=\"calendarDays\"\n :select-day-label=\"selectDayLabel\"\n @select-date=\"$emit('selected-date', $event)\"\n @focus-month-year-picker=\"$refs.monthYearPicker.focusMonthYearPicker()\"\n @close-datepicker=\"$emit('close-datepicker')\"\n @go-to-next-month=\"$refs.monthYearPicker.goToNextMonth()\"\n @go-to-prev-month=\"$refs.monthYearPicker.goToPrevMonth()\"\n />\n </div>\n </dt-stack>\n</template>\n\n<script>\nimport MonthYearPicker from './modules/month-year-picker.vue';\nimport Calendar from './modules/calendar.vue';\nimport DtStack from '@/components/stack/stack.vue';\n\nexport default {\n name: 'DtDatepicker',\n\n components: { DtStack, MonthYearPicker, Calendar },\n\n props: {\n /**\n * Label for the previous month button\n *\n * @type {String}\n * @example 'Previous month'\n */\n prevMonthLabel: {\n type: String,\n required: true,\n },\n\n /**\n * Label for the next month button\n *\n * @type {String}\n * @example 'Next month'\n */\n nextMonthLabel: {\n type: String,\n required: true,\n },\n\n /**\n * Label for the previous year button\n *\n * @type {String}\n * @example 'Previous year'\n */\n prevYearLabel: {\n type: String,\n required: true,\n },\n\n /**\n * Label for the next year button\n *\n * @type {String}\n * @example 'Next year'\n */\n nextYearLabel: {\n type: String,\n required: true,\n },\n\n /**\n * Label for the select day button\n *\n * @type {String}\n * @example 'Select day'\n */\n selectDayLabel: {\n type: String,\n required: true,\n },\n\n /**\n * Label for the change to button\n *\n * @type {String}\n * @example 'Change to'\n */\n changeToLabel: {\n type: String,\n required: true,\n },\n\n /**\n * Locale for the calendar\n *\n * @type {String}\n */\n locale: {\n type: String,\n default: 'en-US',\n },\n\n /**\n * Selected date\n *\n * @type {Date}\n */\n selectedDate: {\n type: Date,\n default: () => (new Date()),\n },\n },\n\n emits: [\n /**\n * Event fired when a date is selected\n *\n * @event selected-date\n * @type {Date}\n */\n 'selected-date',\n\n /**\n * Event fired when user presses the esc key\n *\n * @event close-datepicker\n */\n 'close-datepicker',\n ],\n\n data () {\n return {\n calendarDays: [],\n };\n },\n\n methods: {\n updateCalendarDays (days) {\n this.calendarDays = days;\n },\n },\n};\n</script>\n","export function formatLong (date, locale = 'default') {\n return new Intl.DateTimeFormat(locale, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }).format(date);\n}\n\nexport function formatMedium (date, locale = 'default') {\n return new Intl.DateTimeFormat(locale, { year: 'numeric', month: 'long', day: 'numeric' }).format(date);\n}\n\nexport function formatShort (date, locale = 'default', showWeekday = true) {\n const options = showWeekday ? { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' } : { year: 'numeric', month: 'short', day: 'numeric' };\n return new Intl.DateTimeFormat(locale, options).format(date);\n}\n\nexport function formatNoYear (date, locale = 'default', abbreviated = false) {\n const monthFormat = abbreviated ? 'short' : 'long';\n return new Intl.DateTimeFormat(locale, { month: monthFormat, day: 'numeric' }).format(date);\n}\n\nexport function formatNumerical (date, locale = 'default') {\n return new Intl.DateTimeFormat(locale, { year: '2-digit', month: '2-digit', day: '2-digit' }).format(date);\n}\n\nexport default {\n formatLong,\n formatMedium,\n formatShort,\n formatNoYear,\n formatNumerical,\n};\n"],"names":["addDays","getMonth","isEqual","startOfWeek","getDay","addMonths","startOfMonth","getDate","endOfMonth","subMonths","_sfc_main","DtButton","DtTooltip","DtStack","DtIcon","getYear","set","format","day"],"mappings":"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"}
|
|
@@ -264,25 +264,25 @@ const _sfc_main$2 = {
|
|
|
264
264
|
};
|
|
265
265
|
var _sfc_render$2 = function render() {
|
|
266
266
|
var _vm = this, _c = _vm._self._c;
|
|
267
|
-
return _c("dt-stack", { staticClass: "d-datepicker__month-year", attrs: { "direction": "row", "gap": "300" } }, [_c("dt-stack", { staticClass: "d-datepicker__nav", attrs: { "as": "nav", "direction": "row", "gap": "200" } }, [_c("dt-tooltip", { attrs: { "message": _vm.prevYearLabel, "placement": "top" }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
|
|
267
|
+
return _c("dt-stack", { staticClass: "d-datepicker__month-year", attrs: { "direction": "row", "gap": "300" } }, [_c("dt-stack", { staticClass: "d-datepicker__nav", attrs: { "as": "nav", "direction": "row", "gap": "200" } }, [_c("dt-tooltip", { attrs: { "message": _vm.prevYearLabel, "placement": "top", "fallback-placements": ["top-start", "auto"] }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
|
|
268
268
|
return [_c("dt-button", { ref: _vm.refNames[0], staticClass: "d-datepicker__nav-btn", attrs: { "id": "prevYearButton", "size": "xs", "importance": "clear", "kind": "muted", "circle": true, "type": "button", "aria-label": `${_vm.changeToLabel} ${_vm.prevYearLabel} ${_vm.selectYear - 1}` }, on: { "click": function($event) {
|
|
269
269
|
return _vm.changeYear(-1);
|
|
270
270
|
}, "keydown": function($event) {
|
|
271
271
|
return _vm.handleKeyDown($event);
|
|
272
272
|
} } }, [_c("dt-icon", { attrs: { "name": "chevrons-left", "size": "200" } })], 1)];
|
|
273
|
-
}, proxy: true }]) }), _c("dt-tooltip", { attrs: { "message": _vm.prevMonthLabel, "placement": "top" }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
|
|
273
|
+
}, proxy: true }]) }), _c("dt-tooltip", { attrs: { "message": _vm.prevMonthLabel, "placement": "top", "fallback-placements": ["top-end", "auto"] }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
|
|
274
274
|
return [_c("dt-button", { ref: _vm.refNames[1], staticClass: "d-datepicker__nav-btn", attrs: { "id": "prevMonthButton", "size": "xs", "importance": "clear", "kind": "muted", "circle": true, "type": "button", "aria-label": `${_vm.changeToLabel} ${_vm.prevMonthLabel} ${_vm.formattedMonth(_vm.selectMonth - 1)}` }, on: { "click": function($event) {
|
|
275
275
|
return _vm.changeMonth(-1);
|
|
276
276
|
}, "keydown": function($event) {
|
|
277
277
|
return _vm.handleKeyDown($event);
|
|
278
278
|
} } }, [_c("dt-icon", { attrs: { "name": "chevron-left", "size": "200" } })], 1)];
|
|
279
|
-
}, proxy: true }]) })], 1), _c("div", { staticClass: "d-datepicker__month-year-title", attrs: { "id": "calendar-heading" } }, [_vm._v(" " + _vm._s(_vm.formattedMonth(_vm.selectMonth)) + " " + _vm._s(_vm.selectYear) + " ")]), _c("dt-stack", { staticClass: "d-datepicker__nav", attrs: { "as": "nav", "direction": "row", "gap": "200" } }, [_c("dt-tooltip", { attrs: { "message": _vm.nextMonthLabel, "placement": "top" }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
|
|
279
|
+
}, proxy: true }]) })], 1), _c("div", { staticClass: "d-datepicker__month-year-title", attrs: { "id": "calendar-heading" } }, [_vm._v(" " + _vm._s(_vm.formattedMonth(_vm.selectMonth)) + " " + _vm._s(_vm.selectYear) + " ")]), _c("dt-stack", { staticClass: "d-datepicker__nav", attrs: { "as": "nav", "direction": "row", "gap": "200" } }, [_c("dt-tooltip", { attrs: { "message": _vm.nextMonthLabel, "placement": "top", "fallback-placements": ["top-start", "auto"] }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
|
|
280
280
|
return [_c("dt-button", { ref: _vm.refNames[2], staticClass: "d-datepicker__nav-btn", attrs: { "id": "nextMonthButton", "size": "xs", "importance": "clear", "circle": true, "kind": "muted", "type": "button", "aria-label": `${_vm.changeToLabel} ${_vm.nextMonthLabel} ${_vm.formattedMonth(_vm.selectMonth + 1)}` }, on: { "click": function($event) {
|
|
281
281
|
return _vm.changeMonth(1);
|
|
282
282
|
}, "keydown": function($event) {
|
|
283
283
|
return _vm.handleKeyDown($event);
|
|
284
284
|
} } }, [_c("dt-icon", { attrs: { "name": "chevron-right", "size": "200" } })], 1)];
|
|
285
|
-
}, proxy: true }]) }), _c("dt-tooltip", { attrs: { "message": _vm.nextYearLabel, "placement": "top" }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
|
|
285
|
+
}, proxy: true }]) }), _c("dt-tooltip", { attrs: { "message": _vm.nextYearLabel, "placement": "top", "fallback-placements": ["top-end", "auto"] }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
|
|
286
286
|
return [_c("dt-button", { ref: _vm.refNames[3], staticClass: "d-datepicker__nav-btn", attrs: { "id": "nextYearButton", "size": "xs", "kind": "muted", "circle": true, "importance": "clear", "type": "button", "aria-label": `${_vm.changeToLabel} ${_vm.nextYearLabel} ${_vm.selectYear + 1}` }, on: { "click": function($event) {
|
|
287
287
|
return _vm.changeYear(1);
|
|
288
288
|
}, "keydown": function($event) {
|