@cristiancananau/vue-material-datetime-picker 1.0.0
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/LICENSE +21 -0
- package/README.md +230 -0
- package/dist/style.css +2 -0
- package/dist/vue-material-datetime-picker.js +1013 -0
- package/dist/vue-material-datetime-picker.umd.cjs +1 -0
- package/package.json +64 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Cristian Cananau
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,230 @@
|
|
|
1
|
+
# vue-material-datetime-picker
|
|
2
|
+
|
|
3
|
+
[](https://github.com/cristiancananau/vue-material-datetime-picker/actions/workflows/ci.yml)
|
|
4
|
+
[](LICENSE)
|
|
5
|
+
|
|
6
|
+
A Material-design date & time picker for **Vue 3** with calendar, clock, range,
|
|
7
|
+
locale, and controlled-input workflows. Only [moment](https://momentjs.com/) is
|
|
8
|
+
required as a peer dependency.
|
|
9
|
+
|
|
10
|
+
| Calendar | 24h clock | 12h AM/PM |
|
|
11
|
+
| --- | --- | --- |
|
|
12
|
+
|  |  |  |
|
|
13
|
+
|
|
14
|
+
## Features
|
|
15
|
+
|
|
16
|
+
- π
Date, time, or combined date & time picking (calendar β hour clock β minute clock)
|
|
17
|
+
- π SVG analog clock with 24-hour dual ring or 12-hour AM/PM mode (`shortTime`)
|
|
18
|
+
- π i18n: moment drives month/weekday names; built-in button texts for **en** (default), **de**, **fr**, **es** β extendable
|
|
19
|
+
- π `minDate` / `maxDate` limits enforced per day, hour, and minute
|
|
20
|
+
- π« Disable weekdays (`disabledDays`, ISO weekday numbers)
|
|
21
|
+
- π Year picker, month-only mode, week start day, Now/Clear buttons, auto-advance on click
|
|
22
|
+
- π¨ Themeable `vmdp-*` CSS class hooks and CSS variables
|
|
23
|
+
- 𧩠Use as a drop-in input (`<MaterialDatetimeInput>`) or a fully controlled modal (`<MaterialDatetimePicker>`)
|
|
24
|
+
|
|
25
|
+
## Installation
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
npm install vue-material-datetime-picker moment
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
## Quick start
|
|
32
|
+
|
|
33
|
+
Register the plugin (registers both components globally):
|
|
34
|
+
|
|
35
|
+
```js
|
|
36
|
+
// main.js
|
|
37
|
+
import { createApp } from 'vue'
|
|
38
|
+
import App from './App.vue'
|
|
39
|
+
import MaterialDatetimePicker from 'vue-material-datetime-picker'
|
|
40
|
+
import 'vue-material-datetime-picker/style.css'
|
|
41
|
+
|
|
42
|
+
createApp(App)
|
|
43
|
+
.use(MaterialDatetimePicker) // options: { lang: 'de', locales: { β¦ } }
|
|
44
|
+
.mount('#app')
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
Then use the input wrapper. It shows a readonly input and opens the picker on focus:
|
|
48
|
+
|
|
49
|
+
```vue
|
|
50
|
+
<template>
|
|
51
|
+
<MaterialDatetimeInput v-model="value" format="YYYY-MM-DD HH:mm" placeholder="Pick date & timeβ¦" />
|
|
52
|
+
</template>
|
|
53
|
+
|
|
54
|
+
<script>
|
|
55
|
+
export default {
|
|
56
|
+
data() {
|
|
57
|
+
return { value: '' } // v-model is a formatted string, e.g. "2026-07-24 18:45"
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
</script>
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
Or import the components individually without the plugin:
|
|
64
|
+
|
|
65
|
+
```js
|
|
66
|
+
import { MaterialDatetimePicker, MaterialDatetimeInput } from 'vue-material-datetime-picker'
|
|
67
|
+
import 'vue-material-datetime-picker/style.css'
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
### Controlled modal
|
|
71
|
+
|
|
72
|
+
Mount the picker yourself when you need full control β it commits to `v-model`
|
|
73
|
+
only when the user confirms with OK:
|
|
74
|
+
|
|
75
|
+
```vue
|
|
76
|
+
<template>
|
|
77
|
+
<button @click="open = true">Open picker</button>
|
|
78
|
+
<MaterialDatetimePicker
|
|
79
|
+
v-if="open"
|
|
80
|
+
v-model="value"
|
|
81
|
+
format="YYYY-MM-DD HH:mm"
|
|
82
|
+
@close="open = false"
|
|
83
|
+
/>
|
|
84
|
+
</template>
|
|
85
|
+
|
|
86
|
+
<script>
|
|
87
|
+
export default {
|
|
88
|
+
data() {
|
|
89
|
+
return { open: false, value: '' }
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
</script>
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
## Examples
|
|
96
|
+
|
|
97
|
+
Date only:
|
|
98
|
+
|
|
99
|
+
```html
|
|
100
|
+
<MaterialDatetimeInput v-model="date" :time="false" format="YYYY-MM-DD" />
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
Time only with a 12-hour clock and AM/PM buttons:
|
|
104
|
+
|
|
105
|
+
```html
|
|
106
|
+
<MaterialDatetimeInput v-model="time" :date="false" short-time format="hh:mm A" />
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
Limits and disabled weekends (ISO weekdays: 1 = Monday β¦ 7 = Sunday):
|
|
110
|
+
|
|
111
|
+
```html
|
|
112
|
+
<MaterialDatetimeInput
|
|
113
|
+
v-model="value"
|
|
114
|
+
:time="false"
|
|
115
|
+
format="YYYY-MM-DD"
|
|
116
|
+
min-date="2026-07-01"
|
|
117
|
+
max-date="2026-07-31"
|
|
118
|
+
:disabled-days="[6, 7]"
|
|
119
|
+
/>
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
German UI, Monday week start, Now/Clear buttons, auto-advance on click:
|
|
123
|
+
|
|
124
|
+
```html
|
|
125
|
+
<MaterialDatetimeInput
|
|
126
|
+
v-model="value"
|
|
127
|
+
lang="de"
|
|
128
|
+
:week-start="1"
|
|
129
|
+
now-button
|
|
130
|
+
clear-button
|
|
131
|
+
switch-on-click
|
|
132
|
+
format="DD.MM.YYYY HH:mm"
|
|
133
|
+
/>
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
A runnable demo with all of these lives in [`demo/`](demo/App.vue) β start it with `npm run dev`.
|
|
137
|
+
|
|
138
|
+
## Props
|
|
139
|
+
|
|
140
|
+
Both components accept the same props (`MaterialDatetimeInput` additionally takes `placeholder`).
|
|
141
|
+
|
|
142
|
+
| Prop | Type | Default | Description |
|
|
143
|
+
| --- | --- | --- | --- |
|
|
144
|
+
| `modelValue` (v-model) | `String` | `''` | The value as a formatted string (per `format`). Committed on OK. |
|
|
145
|
+
| `date` | `Boolean` | `true` | Show the calendar step. |
|
|
146
|
+
| `time` | `Boolean` | `true` | Show the clock steps (hours β minutes). |
|
|
147
|
+
| `format` | `String` | `'YYYY-MM-DD'` | moment format used to parse and emit the value. |
|
|
148
|
+
| `lang` | `String` | `'en'` | Language for month/weekday names (moment locale) and button texts. |
|
|
149
|
+
| `minDate` | `String \| Date \| moment` | `null` | Earliest selectable date/time (strings parsed with `format`). |
|
|
150
|
+
| `maxDate` | `String \| Date \| moment` | `null` | Latest selectable date/time. |
|
|
151
|
+
| `currentDate` | `String \| Date \| moment` | `null` | Initial date shown when `modelValue` is empty. |
|
|
152
|
+
| `weekStart` | `Number` | `0` | First day of the week (0 = Sunday, 1 = Monday, β¦). |
|
|
153
|
+
| `disabledDays` | `Number[]` | `[]` | ISO weekdays that cannot be picked (1 = Mon β¦ 7 = Sun). |
|
|
154
|
+
| `shortTime` | `Boolean` | `false` | 12-hour clock with AM/PM instead of the 24-hour dual ring. |
|
|
155
|
+
| `clearButton` | `Boolean` | `false` | Show a Clear button (emits `''` and closes). |
|
|
156
|
+
| `nowButton` | `Boolean` | `false` | Show a Now button (jumps to the current date/time). |
|
|
157
|
+
| `switchOnClick` | `Boolean` | `false` | Auto-advance to the next step 200 ms after a selection. |
|
|
158
|
+
| `monthPicker` | `Boolean` | `false` | Hide the day grid β pick month/year only. |
|
|
159
|
+
| `yearPicker` | `Boolean` | `true` | Allow opening the year list by clicking the year. |
|
|
160
|
+
| `okText` / `cancelText` / `clearText` / `nowText` | `String` | from locale | Override individual button texts. |
|
|
161
|
+
| `placeholder` (input only) | `String` | `''` | Placeholder for the readonly input. |
|
|
162
|
+
|
|
163
|
+
## Events
|
|
164
|
+
|
|
165
|
+
| Event | Payload | Description |
|
|
166
|
+
| --- | --- | --- |
|
|
167
|
+
| `update:modelValue` | `String` | The formatted value on OK (or `''` on Clear). |
|
|
168
|
+
| `open` | β | Picker was opened. |
|
|
169
|
+
| `close` | β | Picker was closed (OK, Cancel, β, ESC, or backdrop click). |
|
|
170
|
+
| `date-selected` | `moment` | A day was clicked in the calendar. |
|
|
171
|
+
| `year-selected` | `moment` | A year was picked from the year list. |
|
|
172
|
+
|
|
173
|
+
## Internationalisation
|
|
174
|
+
|
|
175
|
+
Two things are localised:
|
|
176
|
+
|
|
177
|
+
1. **Month and weekday names** come from moment. Import the moment locale(s) you
|
|
178
|
+
need once in your app and set `lang`:
|
|
179
|
+
|
|
180
|
+
```js
|
|
181
|
+
import moment from 'moment'
|
|
182
|
+
import 'moment/dist/locale/de'
|
|
183
|
+
moment.locale('en') // keep the global default explicit
|
|
184
|
+
```
|
|
185
|
+
|
|
186
|
+
2. **Button texts** (`OK`, `Cancel`, `Clear`, `Now`) are built in for `en`, `de`,
|
|
187
|
+
`fr`, `es`. English is the default and the fallback for missing keys.
|
|
188
|
+
|
|
189
|
+
Set a default language and add your own translations at install time:
|
|
190
|
+
|
|
191
|
+
```js
|
|
192
|
+
app.use(MaterialDatetimePicker, {
|
|
193
|
+
lang: 'nl',
|
|
194
|
+
locales: {
|
|
195
|
+
nl: { ok: 'OK', cancel: 'Annuleren', clear: 'Wissen', now: 'Nu' }
|
|
196
|
+
}
|
|
197
|
+
})
|
|
198
|
+
```
|
|
199
|
+
|
|
200
|
+
The `lang` prop on a component overrides the plugin default, and the
|
|
201
|
+
`okText`/`cancelText`/`clearText`/`nowText` props override everything.
|
|
202
|
+
|
|
203
|
+
## Theming
|
|
204
|
+
|
|
205
|
+
The picker ships with an indigo/blue palette and exposes stable `vmdp-*` class
|
|
206
|
+
hooks plus CSS variables for every color in it β override any of them on `.vmdp`.
|
|
207
|
+
For example, a teal theme:
|
|
208
|
+
|
|
209
|
+
```css
|
|
210
|
+
.vmdp {
|
|
211
|
+
--vmdp-primary: #00695c;
|
|
212
|
+
--vmdp-accent: #10b981;
|
|
213
|
+
--vmdp-accent-soft: #d9f5ea;
|
|
214
|
+
--vmdp-primary-hover: rgba(0, 105, 92, 0.10);
|
|
215
|
+
--vmdp-clock-face: #e8f2f0;
|
|
216
|
+
}
|
|
217
|
+
```
|
|
218
|
+
|
|
219
|
+
## Development
|
|
220
|
+
|
|
221
|
+
```bash
|
|
222
|
+
npm install
|
|
223
|
+
npm run dev # demo app at http://localhost:5173
|
|
224
|
+
npm test # Vitest unit tests
|
|
225
|
+
npm run build # library build to dist/
|
|
226
|
+
```
|
|
227
|
+
|
|
228
|
+
## License
|
|
229
|
+
|
|
230
|
+
MIT
|
package/dist/style.css
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
.vmdp{--vmdp-primary:#303f9f;--vmdp-accent:#46f;--vmdp-accent-soft:#e8eaff;--vmdp-muted:#757575;--vmdp-disabled:#bdbdbd;--vmdp-primary-hover:#303f9f1a;--vmdp-clock-face:#eef0f7;z-index:2000;-webkit-user-select:none;user-select:none;background:#0f132d73;justify-content:center;align-items:center;font-size:15px;display:flex;position:fixed;inset:0}.vmdp .vmdp-content{background:#fff;border-radius:12px;width:300px;max-width:90vw;max-height:96vh;position:relative;overflow-y:auto;box-shadow:0 18px 40px #151c4a47,0 4px 12px #151c4a29}.vmdp header.vmdp-header{background:var(--vmdp-primary);color:#ffffffd1;text-align:center;letter-spacing:.14em;text-transform:uppercase;padding:1em .5em .1em;font-size:.75em;font-weight:600;position:relative}.vmdp .vmdp-close{align-items:center;display:flex;position:absolute;top:0;bottom:0;right:.5em}.vmdp .vmdp-close>a{color:#fff;border-radius:4px;display:inline-flex}.vmdp .vmdp-close .vmdp-icon{width:18px;height:18px}.vmdp div.vmdp-date,.vmdp div.vmdp-time{background:var(--vmdp-primary);text-align:center;color:#fff;padding:.2em 10px .9em}.vmdp div.vmdp-date>div{margin:0;padding:0}.vmdp div.vmdp-actual-month{letter-spacing:.18em;color:#ffffffd1;font-size:1em;font-weight:500}.vmdp div.vmdp-actual-num,.vmdp div.vmdp-actual-maxtime{font-size:3.6em;font-weight:300;line-height:1.05}.vmdp div.vmdp-actual-year{letter-spacing:.08em;color:var(--vmdp-accent-soft);cursor:pointer;font-size:1em}.vmdp div.vmdp-actual-year.disabled{cursor:default}.vmdp .p10,.vmdp .p20,.vmdp .p60,.vmdp .p80{display:inline-block}.vmdp .p10{width:10%}.vmdp .p20{width:20%}.vmdp .p60{width:60%}.vmdp .p80{width:80%}.vmdp .p10>a{color:#fffc;cursor:pointer;border-radius:4px;text-decoration:none;transition:color .15s;display:inline-flex}.vmdp .p10>a:hover{color:#fff}.vmdp div.vmdp-picker{text-align:center;padding:1em}.vmdp div.vmdp-picker-month{text-align:center;text-transform:uppercase;padding-bottom:20px;font-weight:500}.vmdp div.vmdp-actual-time{text-align:center;font-weight:500}.vmdp table.vmdp-picker-days{border-collapse:collapse;width:100%;min-height:251px;margin:0}.vmdp table.vmdp-picker-days,.vmdp table.vmdp-picker-days tr,.vmdp table.vmdp-picker-days tr>td{border:none}.vmdp table.vmdp-picker-days tr>th{color:var(--vmdp-muted);text-align:center;padding:.4em .3em;font-weight:700}.vmdp table.vmdp-picker-days tr>td{text-align:center;padding:.5em .3em;font-size:.8em;font-weight:700}.vmdp table.vmdp-picker-days tr>td>span.vmdp-select-day{color:var(--vmdp-disabled);padding:.4em .5em .5em .6em}.vmdp table.vmdp-picker-days tr>td>a{color:#212121;cursor:pointer;border-radius:50%;padding:.4em .5em .5em .6em;text-decoration:none;transition:background-color .15s;display:inline-block}.vmdp table.vmdp-picker-days tr>td>a:hover{background:var(--vmdp-accent-soft)}.vmdp table.vmdp-picker-days tr>td>a.selected{background:var(--vmdp-accent);color:#fff}.vmdp a.vmdp-meridien-am,.vmdp a.vmdp-meridien-pm{color:#212121;background:var(--vmdp-clock-face);cursor:pointer;border-radius:50%;padding:.7em .5em;font-size:1em;font-weight:500;text-decoration:none;transition:background-color .15s,color .15s;position:relative;top:10px}.vmdp .vmdp-actual-meridien a.selected{background:var(--vmdp-accent);color:#fff}.vmdp .vmdp-svg-clock{margin-top:10px}.vmdp .svg-clock{width:100%;max-width:260px;height:auto;margin:0 auto;display:block}.vmdp .vmdp-picker-year{text-align:center}.vmdp .year-picker-item{cursor:pointer;border-radius:999px;padding:.4em 0;font-size:1.1em;transition:background-color .15s}.vmdp .year-picker-item:hover{background:var(--vmdp-primary-hover)}.vmdp .year-picker-item.active{color:var(--vmdp-accent);font-size:1.4em;font-weight:700}.vmdp .vmdp-select-year-range{color:var(--vmdp-primary);cursor:pointer;border-radius:4px;padding:.2em;display:inline-flex}.vmdp .vmdp-buttons{text-align:right;padding:0 1em 1em}.vmdp .vmdp-btn{color:var(--vmdp-primary);font:inherit;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;background:0 0;border:none;border-radius:999px;margin-left:.3em;padding:.55em 1.1em;font-size:.85em;font-weight:600;transition:background-color .15s,color .15s}.vmdp .vmdp-btn:hover{background:var(--vmdp-primary-hover)}.vmdp .vmdp-btn-ok{background:var(--vmdp-accent);color:#fff}.vmdp .vmdp-btn-ok:hover{background:var(--vmdp-primary)}.vmdp .vmdp-btn:focus-visible,.vmdp .year-picker-item:focus-visible,.vmdp table.vmdp-picker-days tr>td>a:focus-visible,.vmdp .vmdp-select-year-range:focus-visible,.vmdp a.vmdp-meridien-am:focus-visible,.vmdp a.vmdp-meridien-pm:focus-visible{outline:2px solid var(--vmdp-accent);outline-offset:2px}.vmdp .vmdp-close>a:focus-visible,.vmdp .p10>a:focus-visible{outline-offset:2px;outline:2px solid #ffffffe6}.vmdp .invisible{visibility:hidden}.vmdp .left{float:left}.vmdp .right{float:right}.vmdp .clearfix{clear:both}.vmdp .center{text-align:center}.vmdp .vmdp-icon{vertical-align:middle;fill:currentColor;width:24px;height:24px}@media (prefers-reduced-motion:reduce){.vmdp,.vmdp *{transition:none!important}}.vmdp-input{cursor:pointer}
|
|
2
|
+
/*$vite$:1*/
|
|
@@ -0,0 +1,1013 @@
|
|
|
1
|
+
import e from "moment";
|
|
2
|
+
import { Fragment as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, h as c, mergeProps as l, normalizeClass as u, openBlock as d, renderList as f, resolveComponent as p, toDisplayString as m, vShow as h, withDirectives as g, withModifiers as _ } from "vue";
|
|
3
|
+
//#region src/constants.js
|
|
4
|
+
var v = "YYYY-MM-DD", y = Object.freeze([
|
|
5
|
+
"update:modelValue",
|
|
6
|
+
"open",
|
|
7
|
+
"close",
|
|
8
|
+
"date-selected",
|
|
9
|
+
"year-selected"
|
|
10
|
+
]), b = Object.freeze({
|
|
11
|
+
DATE: "date",
|
|
12
|
+
HOURS: "hours",
|
|
13
|
+
MINUTES: "minutes"
|
|
14
|
+
}), x = Object.freeze({
|
|
15
|
+
MONTH: "month",
|
|
16
|
+
MONTHS: "months",
|
|
17
|
+
YEAR: "year",
|
|
18
|
+
YEARS: "years",
|
|
19
|
+
HOURS: "hours"
|
|
20
|
+
}), S = Object.freeze({
|
|
21
|
+
DAYS_PER_WEEK: 7,
|
|
22
|
+
FIRST_DAY_OF_MONTH: 1,
|
|
23
|
+
LAST_WEEKDAY_INDEX: 6
|
|
24
|
+
}), C = Object.freeze({
|
|
25
|
+
DEFAULT_MIN_YEAR: 1850,
|
|
26
|
+
DEFAULT_MAX_YEAR: 2200,
|
|
27
|
+
PAGE_SIZE: 7,
|
|
28
|
+
RADIUS: 3
|
|
29
|
+
}), w = Object.freeze({
|
|
30
|
+
VIEW_BOX: "0,0,400,400",
|
|
31
|
+
CENTER: 200,
|
|
32
|
+
FACE_RADIUS: 192,
|
|
33
|
+
CENTER_DOT_RADIUS: 15,
|
|
34
|
+
OUTER_RADIUS: 162,
|
|
35
|
+
INNER_HOUR_RADIUS: 110,
|
|
36
|
+
MINUTE_DOT_RADIUS: 158,
|
|
37
|
+
OUTER_HIT_RADIUS: 30,
|
|
38
|
+
INNER_HIT_RADIUS: 20,
|
|
39
|
+
TEXT_Y_OFFSET: 7,
|
|
40
|
+
HOUR_FONT_SIZE: 20,
|
|
41
|
+
INNER_HOUR_FONT_SIZE: 22,
|
|
42
|
+
MINUTE_FONT_SIZE: 20,
|
|
43
|
+
HOUR_HAND_LENGTH: {
|
|
44
|
+
LONG: -120,
|
|
45
|
+
SHORT: -90
|
|
46
|
+
},
|
|
47
|
+
MINUTE_HAND_LENGTH: -150,
|
|
48
|
+
HOURS_PER_RING: 12,
|
|
49
|
+
HOURS_PER_DAY: 24,
|
|
50
|
+
MINUTES_PER_HOUR: 60,
|
|
51
|
+
MINUTE_LABEL_STEP: 5,
|
|
52
|
+
DEGREES_PER_CIRCLE: 360
|
|
53
|
+
}), T = Object.freeze({
|
|
54
|
+
FACE: "var(--vmdp-clock-face)",
|
|
55
|
+
DISABLED: "var(--vmdp-disabled)",
|
|
56
|
+
CENTER_DOT: "var(--vmdp-muted)",
|
|
57
|
+
SELECTED: "var(--vmdp-accent)",
|
|
58
|
+
TEXT: "#000",
|
|
59
|
+
SELECTED_TEXT: "#fff",
|
|
60
|
+
TRANSPARENT: "transparent"
|
|
61
|
+
}), ee = Object.freeze([b.HOURS, b.MINUTES]), E = {
|
|
62
|
+
modelValue: {
|
|
63
|
+
type: String,
|
|
64
|
+
default: ""
|
|
65
|
+
},
|
|
66
|
+
date: {
|
|
67
|
+
type: Boolean,
|
|
68
|
+
default: !0
|
|
69
|
+
},
|
|
70
|
+
time: {
|
|
71
|
+
type: Boolean,
|
|
72
|
+
default: !0
|
|
73
|
+
},
|
|
74
|
+
format: {
|
|
75
|
+
type: String,
|
|
76
|
+
default: v
|
|
77
|
+
},
|
|
78
|
+
lang: {
|
|
79
|
+
type: String,
|
|
80
|
+
default: null
|
|
81
|
+
},
|
|
82
|
+
minDate: {
|
|
83
|
+
type: [
|
|
84
|
+
String,
|
|
85
|
+
Date,
|
|
86
|
+
Object
|
|
87
|
+
],
|
|
88
|
+
default: null
|
|
89
|
+
},
|
|
90
|
+
maxDate: {
|
|
91
|
+
type: [
|
|
92
|
+
String,
|
|
93
|
+
Date,
|
|
94
|
+
Object
|
|
95
|
+
],
|
|
96
|
+
default: null
|
|
97
|
+
},
|
|
98
|
+
currentDate: {
|
|
99
|
+
type: [
|
|
100
|
+
String,
|
|
101
|
+
Date,
|
|
102
|
+
Object
|
|
103
|
+
],
|
|
104
|
+
default: null
|
|
105
|
+
},
|
|
106
|
+
weekStart: {
|
|
107
|
+
type: Number,
|
|
108
|
+
default: 0
|
|
109
|
+
},
|
|
110
|
+
disabledDays: {
|
|
111
|
+
type: Array,
|
|
112
|
+
default: () => []
|
|
113
|
+
},
|
|
114
|
+
shortTime: {
|
|
115
|
+
type: Boolean,
|
|
116
|
+
default: !1
|
|
117
|
+
},
|
|
118
|
+
clearButton: {
|
|
119
|
+
type: Boolean,
|
|
120
|
+
default: !1
|
|
121
|
+
},
|
|
122
|
+
nowButton: {
|
|
123
|
+
type: Boolean,
|
|
124
|
+
default: !1
|
|
125
|
+
},
|
|
126
|
+
switchOnClick: {
|
|
127
|
+
type: Boolean,
|
|
128
|
+
default: !1
|
|
129
|
+
},
|
|
130
|
+
monthPicker: {
|
|
131
|
+
type: Boolean,
|
|
132
|
+
default: !1
|
|
133
|
+
},
|
|
134
|
+
yearPicker: {
|
|
135
|
+
type: Boolean,
|
|
136
|
+
default: !0
|
|
137
|
+
},
|
|
138
|
+
okText: {
|
|
139
|
+
type: String,
|
|
140
|
+
default: null
|
|
141
|
+
},
|
|
142
|
+
cancelText: {
|
|
143
|
+
type: String,
|
|
144
|
+
default: null
|
|
145
|
+
},
|
|
146
|
+
clearText: {
|
|
147
|
+
type: String,
|
|
148
|
+
default: null
|
|
149
|
+
},
|
|
150
|
+
nowText: {
|
|
151
|
+
type: String,
|
|
152
|
+
default: null
|
|
153
|
+
}
|
|
154
|
+
}, D = "vmdp-options", O = {
|
|
155
|
+
en: {
|
|
156
|
+
ok: "OK",
|
|
157
|
+
cancel: "Cancel",
|
|
158
|
+
clear: "Clear",
|
|
159
|
+
now: "Now"
|
|
160
|
+
},
|
|
161
|
+
de: {
|
|
162
|
+
ok: "OK",
|
|
163
|
+
cancel: "Abbrechen",
|
|
164
|
+
clear: "LΓΆschen",
|
|
165
|
+
now: "Jetzt"
|
|
166
|
+
},
|
|
167
|
+
fr: {
|
|
168
|
+
ok: "OK",
|
|
169
|
+
cancel: "Annuler",
|
|
170
|
+
clear: "Effacer",
|
|
171
|
+
now: "Maintenant"
|
|
172
|
+
},
|
|
173
|
+
es: {
|
|
174
|
+
ok: "OK",
|
|
175
|
+
cancel: "Cancelar",
|
|
176
|
+
clear: "Borrar",
|
|
177
|
+
now: "Ahora"
|
|
178
|
+
}
|
|
179
|
+
};
|
|
180
|
+
function k(e, t = {}) {
|
|
181
|
+
let n = {
|
|
182
|
+
...O,
|
|
183
|
+
...t
|
|
184
|
+
};
|
|
185
|
+
return {
|
|
186
|
+
...O.en,
|
|
187
|
+
...n[e] || {}
|
|
188
|
+
};
|
|
189
|
+
}
|
|
190
|
+
//#endregion
|
|
191
|
+
//#region src/core.js
|
|
192
|
+
function A(t, n, r) {
|
|
193
|
+
if (t == null || t === "") return null;
|
|
194
|
+
let i;
|
|
195
|
+
return i = e.isMoment(t) ? e(t) : t instanceof Date ? e(t.getTime()) : typeof t == "string" && n ? e(t, n) : e(t), i.locale(r);
|
|
196
|
+
}
|
|
197
|
+
function j(t, n, r = !1, i = !1) {
|
|
198
|
+
if (n == null) return !0;
|
|
199
|
+
let a = e(n), o = e(t);
|
|
200
|
+
return !r && !i && (a.hour(0), o.hour(0)), i || (a.minute(0), o.minute(0)), a.second(0).millisecond(0), o.second(0).millisecond(0), o.valueOf() >= a.valueOf();
|
|
201
|
+
}
|
|
202
|
+
function M(t, n, r = !1, i = !1) {
|
|
203
|
+
if (n == null) return !0;
|
|
204
|
+
let a = e(n), o = e(t);
|
|
205
|
+
return !r && !i && (a.hour(0), o.hour(0)), i || (a.minute(0), o.minute(0)), a.second(0).millisecond(0), o.second(0).millisecond(0), o.valueOf() <= a.valueOf();
|
|
206
|
+
}
|
|
207
|
+
function te(t, n, r) {
|
|
208
|
+
let i = t;
|
|
209
|
+
return j(i, n) || (i = e(n)), M(i, r) || (i = e(r)), i;
|
|
210
|
+
}
|
|
211
|
+
function ne({ modelValue: t, currentDate: n, format: r, lang: i, minDate: a, maxDate: o }) {
|
|
212
|
+
let s = A(t, r, i) || A(n, r, i);
|
|
213
|
+
return (!s || !s.isValid()) && (s = e().locale(i)), te(s, a, o);
|
|
214
|
+
}
|
|
215
|
+
function re(t, n, r) {
|
|
216
|
+
let i = e(t).locale(r).startOf("month"), a = [];
|
|
217
|
+
for (let e = n; a.length < S.DAYS_PER_WEEK; e++) e > S.LAST_WEEKDAY_INDEX && (e = 0), a.push(e);
|
|
218
|
+
let o = [], s = a.indexOf(i.day());
|
|
219
|
+
for (let e = 0; e < s; e++) o.push(null);
|
|
220
|
+
let c = i.daysInMonth();
|
|
221
|
+
for (let t = S.FIRST_DAY_OF_MONTH; t <= c; t++) o.push(e(i).date(t));
|
|
222
|
+
for (; o.length % S.DAYS_PER_WEEK !== 0;) o.push(null);
|
|
223
|
+
let l = [];
|
|
224
|
+
for (let e = 0; e < o.length; e += S.DAYS_PER_WEEK) l.push(o.slice(e, e + S.DAYS_PER_WEEK));
|
|
225
|
+
return {
|
|
226
|
+
dayOrder: a,
|
|
227
|
+
weeks: l
|
|
228
|
+
};
|
|
229
|
+
}
|
|
230
|
+
function ie(e, { minDate: t = null, maxDate: n = null, disabledDays: r = [] } = {}) {
|
|
231
|
+
return j(e, t) && M(e, n) && r.indexOf(e.isoWeekday()) === -1;
|
|
232
|
+
}
|
|
233
|
+
function N(t, n, r, { minDate: i = null, maxDate: a = null } = {}) {
|
|
234
|
+
let o = e(t);
|
|
235
|
+
return r ? (o.hour(n).minute(0).second(0), j(o, i, !0, !1) && M(o, a, !0, !1)) : (o.minute(n).second(0), j(o, i, !0, !0) && M(o, a, !0, !0));
|
|
236
|
+
}
|
|
237
|
+
function P(e, t, n) {
|
|
238
|
+
return {
|
|
239
|
+
x: -(n * Math.sin(-Math.PI * 2 * (e / t))),
|
|
240
|
+
y: -(n * Math.cos(-Math.PI * 2 * (e / t)))
|
|
241
|
+
};
|
|
242
|
+
}
|
|
243
|
+
//#endregion
|
|
244
|
+
//#region \0plugin-vue:export-helper
|
|
245
|
+
var F = (e, t) => {
|
|
246
|
+
let n = e.__vccOpts || e;
|
|
247
|
+
for (let [e, r] of t) n[e] = r;
|
|
248
|
+
return n;
|
|
249
|
+
}, I = {
|
|
250
|
+
name: "PickerCalendar",
|
|
251
|
+
props: {
|
|
252
|
+
current: {
|
|
253
|
+
type: Object,
|
|
254
|
+
required: !0
|
|
255
|
+
},
|
|
256
|
+
lang: {
|
|
257
|
+
type: String,
|
|
258
|
+
default: "en"
|
|
259
|
+
},
|
|
260
|
+
weekStart: {
|
|
261
|
+
type: Number,
|
|
262
|
+
default: 0
|
|
263
|
+
},
|
|
264
|
+
minDate: {
|
|
265
|
+
type: Object,
|
|
266
|
+
default: null
|
|
267
|
+
},
|
|
268
|
+
maxDate: {
|
|
269
|
+
type: Object,
|
|
270
|
+
default: null
|
|
271
|
+
},
|
|
272
|
+
disabledDays: {
|
|
273
|
+
type: Array,
|
|
274
|
+
default: () => []
|
|
275
|
+
}
|
|
276
|
+
},
|
|
277
|
+
emits: ["select"],
|
|
278
|
+
computed: {
|
|
279
|
+
calendar() {
|
|
280
|
+
return re(this.current, this.weekStart, this.lang);
|
|
281
|
+
},
|
|
282
|
+
monthTitle() {
|
|
283
|
+
return e(this.current).locale(this.lang).format("MMMM YYYY");
|
|
284
|
+
},
|
|
285
|
+
weekdayLabels() {
|
|
286
|
+
return this.calendar.dayOrder.map((t) => e().locale(this.lang).day(t).format("dd").substring(0, 1));
|
|
287
|
+
}
|
|
288
|
+
},
|
|
289
|
+
methods: {
|
|
290
|
+
isSelectable(e) {
|
|
291
|
+
return ie(e, {
|
|
292
|
+
minDate: this.minDate,
|
|
293
|
+
maxDate: this.maxDate,
|
|
294
|
+
disabledDays: this.disabledDays
|
|
295
|
+
});
|
|
296
|
+
},
|
|
297
|
+
isSelected(e) {
|
|
298
|
+
return e.isSame(this.current, "day");
|
|
299
|
+
}
|
|
300
|
+
}
|
|
301
|
+
}, L = { class: "vmdp-picker-calendar" }, R = { class: "vmdp-picker-month" }, z = { class: "vmdp-picker-days" }, B = ["onClick"], V = {
|
|
302
|
+
key: 1,
|
|
303
|
+
class: "vmdp-select-day"
|
|
304
|
+
};
|
|
305
|
+
function H(e, n, o, s, c, l) {
|
|
306
|
+
return d(), i("div", L, [a("div", R, m(l.monthTitle), 1), a("table", z, [a("thead", null, [a("tr", null, [(d(!0), i(t, null, f(l.weekdayLabels, (e, t) => (d(), i("th", { key: t }, m(e), 1))), 128))])]), a("tbody", null, [(d(!0), i(t, null, f(l.calendar.weeks, (n, a) => (d(), i("tr", { key: a }, [(d(!0), i(t, null, f(n, (n, a) => (d(), i("td", { key: a }, [n ? (d(), i(t, { key: 0 }, [l.isSelectable(n) ? (d(), i("a", {
|
|
307
|
+
key: 0,
|
|
308
|
+
href: "#",
|
|
309
|
+
class: u(["vmdp-select-day", { selected: l.isSelected(n) }]),
|
|
310
|
+
onClick: _((t) => e.$emit("select", n), ["prevent"])
|
|
311
|
+
}, m(n.format("DD")), 11, B)) : (d(), i("span", V, m(n.format("DD")), 1))], 64)) : r("", !0)]))), 128))]))), 128))])])]);
|
|
312
|
+
}
|
|
313
|
+
var U = /*#__PURE__*/ F(I, [["render", H]]), W = {
|
|
314
|
+
name: "PickerClock",
|
|
315
|
+
props: {
|
|
316
|
+
mode: {
|
|
317
|
+
type: String,
|
|
318
|
+
required: !0,
|
|
319
|
+
validator: (e) => ee.includes(e)
|
|
320
|
+
},
|
|
321
|
+
value: {
|
|
322
|
+
type: Object,
|
|
323
|
+
required: !0
|
|
324
|
+
},
|
|
325
|
+
shortTime: {
|
|
326
|
+
type: Boolean,
|
|
327
|
+
default: !1
|
|
328
|
+
},
|
|
329
|
+
pm: {
|
|
330
|
+
type: Boolean,
|
|
331
|
+
default: !1
|
|
332
|
+
},
|
|
333
|
+
minDate: {
|
|
334
|
+
type: Object,
|
|
335
|
+
default: null
|
|
336
|
+
},
|
|
337
|
+
maxDate: {
|
|
338
|
+
type: Object,
|
|
339
|
+
default: null
|
|
340
|
+
}
|
|
341
|
+
},
|
|
342
|
+
emits: ["select"],
|
|
343
|
+
computed: {
|
|
344
|
+
clock() {
|
|
345
|
+
return w;
|
|
346
|
+
},
|
|
347
|
+
clockColor() {
|
|
348
|
+
return T;
|
|
349
|
+
},
|
|
350
|
+
limits() {
|
|
351
|
+
return {
|
|
352
|
+
minDate: this.minDate,
|
|
353
|
+
maxDate: this.maxDate
|
|
354
|
+
};
|
|
355
|
+
},
|
|
356
|
+
clockTransform() {
|
|
357
|
+
return `translate(${w.CENTER},${w.CENTER})`;
|
|
358
|
+
},
|
|
359
|
+
isHourMode() {
|
|
360
|
+
return this.mode === b.HOURS;
|
|
361
|
+
},
|
|
362
|
+
isMinuteMode() {
|
|
363
|
+
return this.mode === b.MINUTES;
|
|
364
|
+
},
|
|
365
|
+
hourHandLength() {
|
|
366
|
+
return this.shortTime ? w.HOUR_HAND_LENGTH.LONG : w.HOUR_HAND_LENGTH.SHORT;
|
|
367
|
+
},
|
|
368
|
+
hourHandRotation() {
|
|
369
|
+
return `rotate(${w.DEGREES_PER_CIRCLE * this.value.hour() / w.HOURS_PER_RING})`;
|
|
370
|
+
},
|
|
371
|
+
minuteHandRotation() {
|
|
372
|
+
return `rotate(${w.DEGREES_PER_CIRCLE * this.value.minute() / w.MINUTES_PER_HOUR})`;
|
|
373
|
+
},
|
|
374
|
+
hourItems() {
|
|
375
|
+
let e = [], t = this.value.hour();
|
|
376
|
+
for (let n = 0; n < w.HOURS_PER_RING; n++) {
|
|
377
|
+
let r = this.shortTime && this.pm ? n + w.HOURS_PER_RING : n;
|
|
378
|
+
e.push({
|
|
379
|
+
value: n,
|
|
380
|
+
label: n === 0 && this.shortTime ? w.HOURS_PER_RING : n,
|
|
381
|
+
fontSize: w.HOUR_FONT_SIZE,
|
|
382
|
+
...P(n, w.HOURS_PER_RING, w.OUTER_RADIUS),
|
|
383
|
+
selected: this.shortTime ? t % w.HOURS_PER_RING === n : t === n,
|
|
384
|
+
enabled: N(this.value, r, !0, this.limits)
|
|
385
|
+
});
|
|
386
|
+
}
|
|
387
|
+
if (!this.shortTime) for (let n = w.HOURS_PER_RING; n < w.HOURS_PER_DAY; n++) e.push({
|
|
388
|
+
value: n,
|
|
389
|
+
label: n,
|
|
390
|
+
fontSize: w.INNER_HOUR_FONT_SIZE,
|
|
391
|
+
...P(n - w.HOURS_PER_RING, w.HOURS_PER_RING, w.INNER_HOUR_RADIUS),
|
|
392
|
+
selected: t === n,
|
|
393
|
+
enabled: N(this.value, n, !0, this.limits)
|
|
394
|
+
});
|
|
395
|
+
return e;
|
|
396
|
+
},
|
|
397
|
+
minuteItems() {
|
|
398
|
+
let e = [], t = this.value.minute();
|
|
399
|
+
for (let n = 0; n < w.MINUTES_PER_HOUR; n++) {
|
|
400
|
+
let r = n % w.MINUTE_LABEL_STEP === 0;
|
|
401
|
+
e.push({
|
|
402
|
+
value: n,
|
|
403
|
+
r: r ? w.OUTER_HIT_RADIUS : w.INNER_HIT_RADIUS,
|
|
404
|
+
...P(n, w.MINUTES_PER_HOUR, r ? w.OUTER_RADIUS : w.MINUTE_DOT_RADIUS),
|
|
405
|
+
selected: t === n,
|
|
406
|
+
enabled: N(this.value, n, !1, this.limits)
|
|
407
|
+
});
|
|
408
|
+
}
|
|
409
|
+
return e;
|
|
410
|
+
},
|
|
411
|
+
minuteLabels() {
|
|
412
|
+
return this.minuteItems.filter((e) => e.value % w.MINUTE_LABEL_STEP === 0).map((e) => ({
|
|
413
|
+
...e,
|
|
414
|
+
label: e.value,
|
|
415
|
+
...P(e.value, w.MINUTES_PER_HOUR, w.OUTER_RADIUS)
|
|
416
|
+
}));
|
|
417
|
+
}
|
|
418
|
+
},
|
|
419
|
+
methods: {
|
|
420
|
+
textColor(e) {
|
|
421
|
+
return e.selected ? T.SELECTED_TEXT : e.enabled ? T.TEXT : T.DISABLED;
|
|
422
|
+
},
|
|
423
|
+
pick(e) {
|
|
424
|
+
e.enabled && this.$emit("select", e.value);
|
|
425
|
+
}
|
|
426
|
+
}
|
|
427
|
+
}, G = { class: "vmdp-svg-clock" }, K = ["viewBox"], q = ["transform"], J = [
|
|
428
|
+
"r",
|
|
429
|
+
"fill",
|
|
430
|
+
"stroke"
|
|
431
|
+
], Y = [
|
|
432
|
+
"y2",
|
|
433
|
+
"stroke",
|
|
434
|
+
"transform"
|
|
435
|
+
], ae = [
|
|
436
|
+
"y2",
|
|
437
|
+
"stroke",
|
|
438
|
+
"transform"
|
|
439
|
+
], oe = ["r", "fill"], se = [
|
|
440
|
+
"r",
|
|
441
|
+
"cx",
|
|
442
|
+
"cy",
|
|
443
|
+
"fill",
|
|
444
|
+
"onClick"
|
|
445
|
+
], ce = [
|
|
446
|
+
"font-size",
|
|
447
|
+
"x",
|
|
448
|
+
"y",
|
|
449
|
+
"fill",
|
|
450
|
+
"onClick"
|
|
451
|
+
], le = [
|
|
452
|
+
"r",
|
|
453
|
+
"cx",
|
|
454
|
+
"cy",
|
|
455
|
+
"fill",
|
|
456
|
+
"onClick"
|
|
457
|
+
], ue = [
|
|
458
|
+
"font-size",
|
|
459
|
+
"x",
|
|
460
|
+
"y",
|
|
461
|
+
"fill",
|
|
462
|
+
"onClick"
|
|
463
|
+
];
|
|
464
|
+
function de(e, n, r, o, s, c) {
|
|
465
|
+
return d(), i("div", G, [(d(), i("svg", {
|
|
466
|
+
class: "svg-clock",
|
|
467
|
+
viewBox: c.clock.VIEW_BOX
|
|
468
|
+
}, [a("g", { transform: c.clockTransform }, [
|
|
469
|
+
a("circle", {
|
|
470
|
+
r: c.clock.FACE_RADIUS,
|
|
471
|
+
fill: c.clockColor.FACE,
|
|
472
|
+
stroke: c.clockColor.DISABLED,
|
|
473
|
+
"stroke-width": "2"
|
|
474
|
+
}, null, 8, J),
|
|
475
|
+
a("line", {
|
|
476
|
+
class: "minute-hand",
|
|
477
|
+
x1: "0",
|
|
478
|
+
y1: "0",
|
|
479
|
+
x2: "0",
|
|
480
|
+
y2: c.clock.MINUTE_HAND_LENGTH,
|
|
481
|
+
stroke: c.isMinuteMode ? c.clockColor.SELECTED : c.clockColor.DISABLED,
|
|
482
|
+
"stroke-width": "2",
|
|
483
|
+
transform: c.minuteHandRotation
|
|
484
|
+
}, null, 8, Y),
|
|
485
|
+
a("line", {
|
|
486
|
+
class: "hour-hand",
|
|
487
|
+
x1: "0",
|
|
488
|
+
y1: "0",
|
|
489
|
+
x2: "0",
|
|
490
|
+
y2: c.hourHandLength,
|
|
491
|
+
stroke: c.isHourMode ? c.clockColor.SELECTED : c.clockColor.DISABLED,
|
|
492
|
+
"stroke-width": "8",
|
|
493
|
+
transform: c.hourHandRotation
|
|
494
|
+
}, null, 8, ae),
|
|
495
|
+
a("circle", {
|
|
496
|
+
r: c.clock.CENTER_DOT_RADIUS,
|
|
497
|
+
fill: c.clockColor.CENTER_DOT
|
|
498
|
+
}, null, 8, oe),
|
|
499
|
+
c.isHourMode ? (d(!0), i(t, { key: 0 }, f(c.hourItems, (e) => (d(), i("g", { key: "h" + e.value }, [a("circle", {
|
|
500
|
+
class: u(["vmdp-select-hour", { disabled: !e.enabled }]),
|
|
501
|
+
r: c.clock.OUTER_HIT_RADIUS,
|
|
502
|
+
cx: e.x,
|
|
503
|
+
cy: e.y,
|
|
504
|
+
fill: e.selected ? c.clockColor.SELECTED : c.clockColor.TRANSPARENT,
|
|
505
|
+
style: { cursor: "pointer" },
|
|
506
|
+
onClick: (t) => c.pick(e)
|
|
507
|
+
}, null, 10, se), a("text", {
|
|
508
|
+
class: u(["vmdp-select-hour-text", { disabled: !e.enabled }]),
|
|
509
|
+
"text-anchor": "middle",
|
|
510
|
+
"font-weight": "bold",
|
|
511
|
+
"font-size": e.fontSize,
|
|
512
|
+
x: e.x,
|
|
513
|
+
y: e.y + c.clock.TEXT_Y_OFFSET,
|
|
514
|
+
fill: c.textColor(e),
|
|
515
|
+
style: { cursor: "pointer" },
|
|
516
|
+
onClick: (t) => c.pick(e)
|
|
517
|
+
}, m(e.label), 11, ce)]))), 128)) : (d(), i(t, { key: 1 }, [(d(!0), i(t, null, f(c.minuteItems, (e) => (d(), i("circle", {
|
|
518
|
+
key: "m" + e.value,
|
|
519
|
+
class: u(["vmdp-select-minute", { disabled: !e.enabled }]),
|
|
520
|
+
r: e.r,
|
|
521
|
+
cx: e.x,
|
|
522
|
+
cy: e.y,
|
|
523
|
+
fill: e.selected ? c.clockColor.SELECTED : c.clockColor.TRANSPARENT,
|
|
524
|
+
style: { cursor: "pointer" },
|
|
525
|
+
onClick: (t) => c.pick(e)
|
|
526
|
+
}, null, 10, le))), 128)), (d(!0), i(t, null, f(c.minuteLabels, (e) => (d(), i("text", {
|
|
527
|
+
key: "tm" + e.value,
|
|
528
|
+
class: u(["vmdp-select-minute-text", { disabled: !e.enabled }]),
|
|
529
|
+
"text-anchor": "middle",
|
|
530
|
+
"font-weight": "bold",
|
|
531
|
+
"font-size": c.clock.MINUTE_FONT_SIZE,
|
|
532
|
+
x: e.x,
|
|
533
|
+
y: e.y + c.clock.TEXT_Y_OFFSET,
|
|
534
|
+
fill: c.textColor(e),
|
|
535
|
+
style: { cursor: "pointer" },
|
|
536
|
+
onClick: (t) => c.pick(e)
|
|
537
|
+
}, m(e.label), 11, ue))), 128))], 64))
|
|
538
|
+
], 8, q)], 8, K))]);
|
|
539
|
+
}
|
|
540
|
+
var fe = /*#__PURE__*/ F(W, [["render", de]]);
|
|
541
|
+
//#endregion
|
|
542
|
+
//#region src/icons.js
|
|
543
|
+
function X(e, t) {
|
|
544
|
+
let n = () => c("svg", {
|
|
545
|
+
class: ["vmdp-icon", e],
|
|
546
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
547
|
+
viewBox: "0 0 24 24",
|
|
548
|
+
fill: "currentColor",
|
|
549
|
+
"aria-hidden": "true"
|
|
550
|
+
}, [c("path", { d: t })]);
|
|
551
|
+
return n.displayName = e, n;
|
|
552
|
+
}
|
|
553
|
+
var pe = X("vmdp-icon-close", "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"), me = X("vmdp-icon-chevron-left", "M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"), he = X("vmdp-icon-chevron-right", "M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"), ge = {
|
|
554
|
+
name: "PickerYears",
|
|
555
|
+
components: {
|
|
556
|
+
IconArrowUp: X("vmdp-icon-arrow-up", "M7.41 15.41 12 10.83l4.59 4.58L18 14l-6-6-6 6z"),
|
|
557
|
+
IconArrowDown: X("vmdp-icon-arrow-down", "M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z")
|
|
558
|
+
},
|
|
559
|
+
props: {
|
|
560
|
+
midYear: {
|
|
561
|
+
type: Number,
|
|
562
|
+
required: !0
|
|
563
|
+
},
|
|
564
|
+
currentYear: {
|
|
565
|
+
type: Number,
|
|
566
|
+
required: !0
|
|
567
|
+
},
|
|
568
|
+
minYear: {
|
|
569
|
+
type: Number,
|
|
570
|
+
default: C.DEFAULT_MIN_YEAR
|
|
571
|
+
},
|
|
572
|
+
maxYear: {
|
|
573
|
+
type: Number,
|
|
574
|
+
default: C.DEFAULT_MAX_YEAR
|
|
575
|
+
}
|
|
576
|
+
},
|
|
577
|
+
emits: ["select", "page"],
|
|
578
|
+
computed: {
|
|
579
|
+
years() {
|
|
580
|
+
let e = [];
|
|
581
|
+
for (let t = this.midYear - C.RADIUS; t <= this.midYear + C.RADIUS; t++) e.push(t);
|
|
582
|
+
return e;
|
|
583
|
+
},
|
|
584
|
+
canPageBefore() {
|
|
585
|
+
return this.minYear < this.midYear - C.RADIUS;
|
|
586
|
+
},
|
|
587
|
+
canPageAfter() {
|
|
588
|
+
return this.maxYear > this.midYear + C.RADIUS;
|
|
589
|
+
}
|
|
590
|
+
}
|
|
591
|
+
}, _e = { class: "vmdp-picker-year" }, ve = ["onClick"];
|
|
592
|
+
function ye(e, n, r, o, c, l) {
|
|
593
|
+
let h = p("IconArrowUp"), g = p("IconArrowDown");
|
|
594
|
+
return d(), i("div", _e, [
|
|
595
|
+
a("div", null, [a("a", {
|
|
596
|
+
href: "#",
|
|
597
|
+
class: u(["vmdp-select-year-range before", { invisible: !l.canPageBefore }]),
|
|
598
|
+
onClick: n[0] ||= _((t) => e.$emit("page", -1), ["prevent"])
|
|
599
|
+
}, [s(h)], 2)]),
|
|
600
|
+
(d(!0), i(t, null, f(l.years, (t) => (d(), i("div", {
|
|
601
|
+
key: t,
|
|
602
|
+
class: u(["year-picker-item", {
|
|
603
|
+
active: t === r.currentYear,
|
|
604
|
+
invisible: t < r.minYear || t > r.maxYear
|
|
605
|
+
}]),
|
|
606
|
+
onClick: (n) => e.$emit("select", t)
|
|
607
|
+
}, m(t), 11, ve))), 128)),
|
|
608
|
+
a("div", null, [a("a", {
|
|
609
|
+
href: "#",
|
|
610
|
+
class: u(["vmdp-select-year-range after", { invisible: !l.canPageAfter }]),
|
|
611
|
+
onClick: n[1] ||= _((t) => e.$emit("page", 1), ["prevent"])
|
|
612
|
+
}, [s(g)], 2)])
|
|
613
|
+
]);
|
|
614
|
+
}
|
|
615
|
+
//#endregion
|
|
616
|
+
//#region src/components/MaterialDatetimePicker.vue
|
|
617
|
+
var be = {
|
|
618
|
+
name: "MaterialDatetimePicker",
|
|
619
|
+
components: {
|
|
620
|
+
PickerCalendar: U,
|
|
621
|
+
PickerClock: fe,
|
|
622
|
+
PickerYears: /* @__PURE__ */ F(ge, [["render", ye]]),
|
|
623
|
+
IconClose: pe,
|
|
624
|
+
IconChevronLeft: me,
|
|
625
|
+
IconChevronRight: he
|
|
626
|
+
},
|
|
627
|
+
props: E,
|
|
628
|
+
emits: y,
|
|
629
|
+
inject: { pluginOptions: {
|
|
630
|
+
from: D,
|
|
631
|
+
default: () => ({})
|
|
632
|
+
} },
|
|
633
|
+
data() {
|
|
634
|
+
return {
|
|
635
|
+
current: null,
|
|
636
|
+
view: b.DATE,
|
|
637
|
+
showYearPicker: !1,
|
|
638
|
+
midYear: 0,
|
|
639
|
+
switchTimer: null
|
|
640
|
+
};
|
|
641
|
+
},
|
|
642
|
+
computed: {
|
|
643
|
+
effectiveLang() {
|
|
644
|
+
return this.lang || this.pluginOptions.lang || "en";
|
|
645
|
+
},
|
|
646
|
+
texts() {
|
|
647
|
+
let e = k(this.effectiveLang, this.pluginOptions.locales);
|
|
648
|
+
return {
|
|
649
|
+
ok: this.okText ?? e.ok,
|
|
650
|
+
cancel: this.cancelText ?? e.cancel,
|
|
651
|
+
clear: this.clearText ?? e.clear,
|
|
652
|
+
now: this.nowText ?? e.now
|
|
653
|
+
};
|
|
654
|
+
},
|
|
655
|
+
min() {
|
|
656
|
+
return A(this.minDate, this.format, this.effectiveLang);
|
|
657
|
+
},
|
|
658
|
+
max() {
|
|
659
|
+
return A(this.maxDate, this.format, this.effectiveLang);
|
|
660
|
+
},
|
|
661
|
+
minYear() {
|
|
662
|
+
return this.min ? this.min.year() : C.DEFAULT_MIN_YEAR;
|
|
663
|
+
},
|
|
664
|
+
maxYear() {
|
|
665
|
+
return this.max ? this.max.year() : C.DEFAULT_MAX_YEAR;
|
|
666
|
+
},
|
|
667
|
+
isDateView() {
|
|
668
|
+
return this.view === b.DATE;
|
|
669
|
+
},
|
|
670
|
+
isClockView() {
|
|
671
|
+
return this.view === b.HOURS || this.view === b.MINUTES;
|
|
672
|
+
},
|
|
673
|
+
shouldCommitFromDateView() {
|
|
674
|
+
return this.monthPicker || !this.time;
|
|
675
|
+
},
|
|
676
|
+
isPM() {
|
|
677
|
+
return this.current.hour() >= w.HOURS_PER_RING;
|
|
678
|
+
},
|
|
679
|
+
headerText() {
|
|
680
|
+
return this.date ? this.current.format("dddd") : this.shortTime ? this.current.format("A") : " ";
|
|
681
|
+
},
|
|
682
|
+
formattedTime() {
|
|
683
|
+
return this.current.format(this.shortTime ? "hh:mm A" : "HH:mm");
|
|
684
|
+
},
|
|
685
|
+
prevMonthVisible() {
|
|
686
|
+
return j(e(this.current).startOf(x.MONTH), this.min);
|
|
687
|
+
},
|
|
688
|
+
nextMonthVisible() {
|
|
689
|
+
return M(e(this.current).endOf(x.MONTH), this.max);
|
|
690
|
+
},
|
|
691
|
+
prevYearVisible() {
|
|
692
|
+
return j(e(this.current).startOf(x.YEAR), this.min);
|
|
693
|
+
},
|
|
694
|
+
nextYearVisible() {
|
|
695
|
+
return M(e(this.current).endOf(x.YEAR), this.max);
|
|
696
|
+
}
|
|
697
|
+
},
|
|
698
|
+
created() {
|
|
699
|
+
this.current = ne({
|
|
700
|
+
modelValue: this.modelValue,
|
|
701
|
+
currentDate: this.currentDate,
|
|
702
|
+
format: this.format,
|
|
703
|
+
lang: this.effectiveLang,
|
|
704
|
+
minDate: this.min,
|
|
705
|
+
maxDate: this.max
|
|
706
|
+
}), this.view = this.date ? b.DATE : b.HOURS, this.midYear = this.current.year();
|
|
707
|
+
},
|
|
708
|
+
mounted() {
|
|
709
|
+
window.addEventListener("keydown", this.onKeydown), this.$emit("open");
|
|
710
|
+
},
|
|
711
|
+
beforeUnmount() {
|
|
712
|
+
window.removeEventListener("keydown", this.onKeydown), this.clearSwitchTimer();
|
|
713
|
+
},
|
|
714
|
+
methods: {
|
|
715
|
+
onKeydown(e) {
|
|
716
|
+
e.key === "Escape" && this.close();
|
|
717
|
+
},
|
|
718
|
+
close() {
|
|
719
|
+
this.clearSwitchTimer(), this.$emit("close");
|
|
720
|
+
},
|
|
721
|
+
commit() {
|
|
722
|
+
this.$emit("update:modelValue", e(this.current).locale(this.effectiveLang).format(this.format));
|
|
723
|
+
},
|
|
724
|
+
commitAndClose() {
|
|
725
|
+
this.commit(), this.close();
|
|
726
|
+
},
|
|
727
|
+
manualOk() {
|
|
728
|
+
this.clearSwitchTimer(), this.ok();
|
|
729
|
+
},
|
|
730
|
+
ok() {
|
|
731
|
+
if (this.view === b.DATE) {
|
|
732
|
+
this.shouldCommitFromDateView ? this.commitAndClose() : this.view = b.HOURS;
|
|
733
|
+
return;
|
|
734
|
+
}
|
|
735
|
+
if (this.view === b.HOURS) {
|
|
736
|
+
this.view = b.MINUTES;
|
|
737
|
+
return;
|
|
738
|
+
}
|
|
739
|
+
this.commitAndClose();
|
|
740
|
+
},
|
|
741
|
+
manualCancel() {
|
|
742
|
+
this.clearSwitchTimer(), this.cancel();
|
|
743
|
+
},
|
|
744
|
+
cancel() {
|
|
745
|
+
if (!this.time || this.view === b.DATE) {
|
|
746
|
+
this.close();
|
|
747
|
+
return;
|
|
748
|
+
}
|
|
749
|
+
if (this.view === b.HOURS) {
|
|
750
|
+
if (this.date) {
|
|
751
|
+
this.view = b.DATE;
|
|
752
|
+
return;
|
|
753
|
+
}
|
|
754
|
+
this.close();
|
|
755
|
+
return;
|
|
756
|
+
}
|
|
757
|
+
this.view = b.HOURS;
|
|
758
|
+
},
|
|
759
|
+
now() {
|
|
760
|
+
this.current = e().locale(this.effectiveLang);
|
|
761
|
+
},
|
|
762
|
+
clear() {
|
|
763
|
+
this.$emit("update:modelValue", ""), this.close();
|
|
764
|
+
},
|
|
765
|
+
previousMonth() {
|
|
766
|
+
this.shiftCurrentDate(-1, x.MONTHS);
|
|
767
|
+
},
|
|
768
|
+
nextMonth() {
|
|
769
|
+
this.shiftCurrentDate(1, x.MONTHS);
|
|
770
|
+
},
|
|
771
|
+
previousYear() {
|
|
772
|
+
this.shiftCurrentDate(-1, x.YEARS);
|
|
773
|
+
},
|
|
774
|
+
nextYear() {
|
|
775
|
+
this.shiftCurrentDate(1, x.YEARS);
|
|
776
|
+
},
|
|
777
|
+
shiftCurrentDate(t, n) {
|
|
778
|
+
this.current = e(this.current).add(t, n), this.showYearPicker = !1;
|
|
779
|
+
},
|
|
780
|
+
toggleYearPicker() {
|
|
781
|
+
this.yearPicker && (this.midYear = this.current.year(), this.showYearPicker = !this.showYearPicker);
|
|
782
|
+
},
|
|
783
|
+
pageYears(e) {
|
|
784
|
+
this.midYear += e * C.PAGE_SIZE;
|
|
785
|
+
},
|
|
786
|
+
selectYear(t) {
|
|
787
|
+
this.current = e(this.current).year(t), this.showYearPicker = !1, this.$emit("year-selected", e(this.current));
|
|
788
|
+
},
|
|
789
|
+
selectDay(t) {
|
|
790
|
+
this.current = e(this.current).year(t.year()).month(t.month()).date(t.date()), this.$emit("date-selected", e(this.current)), this.switchOnClick && this.scheduleSwitch(() => this.ok());
|
|
791
|
+
},
|
|
792
|
+
selectAM() {
|
|
793
|
+
this.current.hour() >= w.HOURS_PER_RING && (this.current = e(this.current).subtract(w.HOURS_PER_RING, x.HOURS));
|
|
794
|
+
},
|
|
795
|
+
selectPM() {
|
|
796
|
+
this.current.hour() < w.HOURS_PER_RING && (this.current = e(this.current).add(w.HOURS_PER_RING, x.HOURS));
|
|
797
|
+
},
|
|
798
|
+
clearSwitchTimer() {
|
|
799
|
+
clearTimeout(this.switchTimer), this.switchTimer = null;
|
|
800
|
+
},
|
|
801
|
+
scheduleSwitch(e) {
|
|
802
|
+
this.clearSwitchTimer(), this.switchTimer = setTimeout(e, 200);
|
|
803
|
+
},
|
|
804
|
+
onClockSelect(t) {
|
|
805
|
+
if (this.view === b.HOURS) {
|
|
806
|
+
let n = t;
|
|
807
|
+
this.shortTime && this.isPM && n < w.HOURS_PER_RING && (n += w.HOURS_PER_RING), this.current = e(this.current).hour(n), this.switchOnClick && this.scheduleSwitch(() => {
|
|
808
|
+
this.view = b.MINUTES;
|
|
809
|
+
});
|
|
810
|
+
} else this.current = e(this.current).minute(t), this.switchOnClick && this.scheduleSwitch(() => {
|
|
811
|
+
this.commitAndClose();
|
|
812
|
+
});
|
|
813
|
+
}
|
|
814
|
+
}
|
|
815
|
+
}, xe = { class: "vmdp-date-view" }, Se = { class: "vmdp-header" }, Ce = { class: "vmdp-actual-day" }, we = { class: "vmdp-close" }, Te = {
|
|
816
|
+
key: 0,
|
|
817
|
+
class: "vmdp-date"
|
|
818
|
+
}, Ee = { class: "left center p10" }, De = { class: "vmdp-actual-month p80" }, Oe = { class: "right center p10" }, ke = { class: "vmdp-actual-num" }, Ae = { class: "left center p10" }, je = { class: "right center p10" }, Me = {
|
|
819
|
+
key: 1,
|
|
820
|
+
class: "vmdp-time"
|
|
821
|
+
}, Ne = { class: "vmdp-actual-maxtime" }, Pe = { class: "vmdp-picker" }, Fe = {
|
|
822
|
+
key: 2,
|
|
823
|
+
class: "vmdp-picker-datetime"
|
|
824
|
+
}, Ie = { class: "vmdp-actual-meridien" }, Z = { class: "left p20" }, Le = { class: "vmdp-actual-time p60" }, Re = { class: "right p20" }, ze = { class: "vmdp-buttons" };
|
|
825
|
+
function Be(e, c, l, f, v, y) {
|
|
826
|
+
let b = p("IconClose"), x = p("IconChevronLeft"), S = p("IconChevronRight"), C = p("PickerYears"), w = p("PickerCalendar"), T = p("PickerClock");
|
|
827
|
+
return d(), i("div", {
|
|
828
|
+
class: "vmdp",
|
|
829
|
+
onClick: c[13] ||= (...e) => y.close && y.close(...e)
|
|
830
|
+
}, [a("div", {
|
|
831
|
+
class: "vmdp-content",
|
|
832
|
+
onClick: c[12] ||= _(() => {}, ["stop"])
|
|
833
|
+
}, [a("div", xe, [
|
|
834
|
+
a("header", Se, [a("div", Ce, m(y.headerText), 1), a("div", we, [a("a", {
|
|
835
|
+
href: "#",
|
|
836
|
+
onClick: c[0] ||= _((...e) => y.close && y.close(...e), ["prevent"])
|
|
837
|
+
}, [s(b)])])]),
|
|
838
|
+
e.date ? (d(), i("div", Te, [
|
|
839
|
+
a("div", null, [
|
|
840
|
+
a("div", Ee, [a("a", {
|
|
841
|
+
href: "#",
|
|
842
|
+
class: u(["vmdp-select-month-before", { invisible: !y.prevMonthVisible }]),
|
|
843
|
+
onClick: c[1] ||= _((...e) => y.previousMonth && y.previousMonth(...e), ["prevent"])
|
|
844
|
+
}, [s(x)], 2)]),
|
|
845
|
+
a("div", De, m(v.current.format("MMM").toUpperCase()), 1),
|
|
846
|
+
a("div", Oe, [a("a", {
|
|
847
|
+
href: "#",
|
|
848
|
+
class: u(["vmdp-select-month-after", { invisible: !y.nextMonthVisible }]),
|
|
849
|
+
onClick: c[2] ||= _((...e) => y.nextMonth && y.nextMonth(...e), ["prevent"])
|
|
850
|
+
}, [s(S)], 2)]),
|
|
851
|
+
c[14] ||= a("div", { class: "clearfix" }, null, -1)
|
|
852
|
+
]),
|
|
853
|
+
a("div", ke, m(v.current.format("DD")), 1),
|
|
854
|
+
a("div", null, [
|
|
855
|
+
a("div", Ae, [a("a", {
|
|
856
|
+
href: "#",
|
|
857
|
+
class: u(["vmdp-select-year-before", { invisible: !y.prevYearVisible }]),
|
|
858
|
+
onClick: c[3] ||= _((...e) => y.previousYear && y.previousYear(...e), ["prevent"])
|
|
859
|
+
}, [s(x)], 2)]),
|
|
860
|
+
a("div", {
|
|
861
|
+
class: u(["vmdp-actual-year p80", { disabled: !e.yearPicker }]),
|
|
862
|
+
onClick: c[4] ||= (...e) => y.toggleYearPicker && y.toggleYearPicker(...e)
|
|
863
|
+
}, m(v.current.format("YYYY")), 3),
|
|
864
|
+
a("div", je, [a("a", {
|
|
865
|
+
href: "#",
|
|
866
|
+
class: u(["vmdp-select-year-after", { invisible: !y.nextYearVisible }]),
|
|
867
|
+
onClick: c[5] ||= _((...e) => y.nextYear && y.nextYear(...e), ["prevent"])
|
|
868
|
+
}, [s(S)], 2)]),
|
|
869
|
+
c[15] ||= a("div", { class: "clearfix" }, null, -1)
|
|
870
|
+
])
|
|
871
|
+
])) : r("", !0),
|
|
872
|
+
!e.date && e.time ? (d(), i("div", Me, [a("div", Ne, m(y.formattedTime), 1)])) : r("", !0),
|
|
873
|
+
a("div", Pe, [y.isDateView && v.showYearPicker ? (d(), n(C, {
|
|
874
|
+
key: 0,
|
|
875
|
+
"mid-year": v.midYear,
|
|
876
|
+
"current-year": v.current.year(),
|
|
877
|
+
"min-year": y.minYear,
|
|
878
|
+
"max-year": y.maxYear,
|
|
879
|
+
onSelect: y.selectYear,
|
|
880
|
+
onPage: y.pageYears
|
|
881
|
+
}, null, 8, [
|
|
882
|
+
"mid-year",
|
|
883
|
+
"current-year",
|
|
884
|
+
"min-year",
|
|
885
|
+
"max-year",
|
|
886
|
+
"onSelect",
|
|
887
|
+
"onPage"
|
|
888
|
+
])) : y.isDateView && !e.monthPicker ? (d(), n(w, {
|
|
889
|
+
key: 1,
|
|
890
|
+
current: v.current,
|
|
891
|
+
lang: y.effectiveLang,
|
|
892
|
+
"week-start": e.weekStart,
|
|
893
|
+
"min-date": y.min,
|
|
894
|
+
"max-date": y.max,
|
|
895
|
+
"disabled-days": e.disabledDays,
|
|
896
|
+
onSelect: y.selectDay
|
|
897
|
+
}, null, 8, [
|
|
898
|
+
"current",
|
|
899
|
+
"lang",
|
|
900
|
+
"week-start",
|
|
901
|
+
"min-date",
|
|
902
|
+
"max-date",
|
|
903
|
+
"disabled-days",
|
|
904
|
+
"onSelect"
|
|
905
|
+
])) : y.isClockView ? (d(), i("div", Fe, [a("div", Ie, [
|
|
906
|
+
a("div", Z, [g(a("a", {
|
|
907
|
+
href: "#",
|
|
908
|
+
class: u(["vmdp-meridien-am", { selected: !y.isPM }]),
|
|
909
|
+
onClick: c[6] ||= _((...e) => y.selectAM && y.selectAM(...e), ["prevent"])
|
|
910
|
+
}, "AM", 2), [[h, e.shortTime]])]),
|
|
911
|
+
a("div", Le, [e.date ? (d(), i(t, { key: 0 }, [o(m(y.formattedTime), 1)], 64)) : r("", !0)]),
|
|
912
|
+
a("div", Re, [g(a("a", {
|
|
913
|
+
href: "#",
|
|
914
|
+
class: u(["vmdp-meridien-pm", { selected: y.isPM }]),
|
|
915
|
+
onClick: c[7] ||= _((...e) => y.selectPM && y.selectPM(...e), ["prevent"])
|
|
916
|
+
}, "PM", 2), [[h, e.shortTime]])]),
|
|
917
|
+
c[16] ||= a("div", { class: "clearfix" }, null, -1)
|
|
918
|
+
]), s(T, {
|
|
919
|
+
mode: v.view,
|
|
920
|
+
value: v.current,
|
|
921
|
+
"short-time": e.shortTime,
|
|
922
|
+
pm: y.isPM,
|
|
923
|
+
"min-date": y.min,
|
|
924
|
+
"max-date": y.max,
|
|
925
|
+
onSelect: y.onClockSelect
|
|
926
|
+
}, null, 8, [
|
|
927
|
+
"mode",
|
|
928
|
+
"value",
|
|
929
|
+
"short-time",
|
|
930
|
+
"pm",
|
|
931
|
+
"min-date",
|
|
932
|
+
"max-date",
|
|
933
|
+
"onSelect"
|
|
934
|
+
])])) : r("", !0)]),
|
|
935
|
+
a("div", ze, [
|
|
936
|
+
e.nowButton ? (d(), i("button", {
|
|
937
|
+
key: 0,
|
|
938
|
+
type: "button",
|
|
939
|
+
class: "vmdp-btn vmdp-btn-now",
|
|
940
|
+
onClick: c[8] ||= (...e) => y.now && y.now(...e)
|
|
941
|
+
}, m(y.texts.now), 1)) : r("", !0),
|
|
942
|
+
e.clearButton ? (d(), i("button", {
|
|
943
|
+
key: 1,
|
|
944
|
+
type: "button",
|
|
945
|
+
class: "vmdp-btn vmdp-btn-clear",
|
|
946
|
+
onClick: c[9] ||= (...e) => y.clear && y.clear(...e)
|
|
947
|
+
}, m(y.texts.clear), 1)) : r("", !0),
|
|
948
|
+
a("button", {
|
|
949
|
+
type: "button",
|
|
950
|
+
class: "vmdp-btn vmdp-btn-cancel",
|
|
951
|
+
onClick: c[10] ||= (...e) => y.manualCancel && y.manualCancel(...e)
|
|
952
|
+
}, m(y.texts.cancel), 1),
|
|
953
|
+
a("button", {
|
|
954
|
+
type: "button",
|
|
955
|
+
class: "vmdp-btn vmdp-btn-ok",
|
|
956
|
+
onClick: c[11] ||= (...e) => y.manualOk && y.manualOk(...e)
|
|
957
|
+
}, m(y.texts.ok), 1)
|
|
958
|
+
])
|
|
959
|
+
])])]);
|
|
960
|
+
}
|
|
961
|
+
var Q = /*#__PURE__*/ F(be, [["render", Be]]), Ve = {
|
|
962
|
+
name: "MaterialDatetimeInput",
|
|
963
|
+
components: { MaterialDatetimePicker: Q },
|
|
964
|
+
props: {
|
|
965
|
+
...E,
|
|
966
|
+
placeholder: {
|
|
967
|
+
type: String,
|
|
968
|
+
default: ""
|
|
969
|
+
}
|
|
970
|
+
},
|
|
971
|
+
emits: y,
|
|
972
|
+
data() {
|
|
973
|
+
return { isOpen: !1 };
|
|
974
|
+
},
|
|
975
|
+
computed: { pickerBindings() {
|
|
976
|
+
let { placeholder: e, ...t } = this.$props;
|
|
977
|
+
return t;
|
|
978
|
+
} },
|
|
979
|
+
methods: {
|
|
980
|
+
open() {
|
|
981
|
+
this.isOpen = !0;
|
|
982
|
+
},
|
|
983
|
+
onClose() {
|
|
984
|
+
this.isOpen = !1, this.$emit("close");
|
|
985
|
+
}
|
|
986
|
+
}
|
|
987
|
+
}, He = { class: "vmdp-input-wrapper" }, Ue = ["value", "placeholder"];
|
|
988
|
+
function We(e, t, o, s, c, u) {
|
|
989
|
+
let f = p("MaterialDatetimePicker");
|
|
990
|
+
return d(), i("span", He, [a("input", {
|
|
991
|
+
class: "vmdp-input",
|
|
992
|
+
type: "text",
|
|
993
|
+
readonly: "",
|
|
994
|
+
value: e.modelValue,
|
|
995
|
+
placeholder: o.placeholder,
|
|
996
|
+
onFocus: t[0] ||= (...e) => u.open && u.open(...e),
|
|
997
|
+
onClick: t[1] ||= (...e) => u.open && u.open(...e)
|
|
998
|
+
}, null, 40, Ue), c.isOpen ? (d(), n(f, l({ key: 0 }, u.pickerBindings, {
|
|
999
|
+
"onUpdate:modelValue": t[2] ||= (t) => e.$emit("update:modelValue", t),
|
|
1000
|
+
onOpen: t[3] ||= (t) => e.$emit("open"),
|
|
1001
|
+
onClose: u.onClose,
|
|
1002
|
+
onDateSelected: t[4] ||= (t) => e.$emit("date-selected", t),
|
|
1003
|
+
onYearSelected: t[5] ||= (t) => e.$emit("year-selected", t)
|
|
1004
|
+
}), null, 16, ["onClose"])) : r("", !0)]);
|
|
1005
|
+
}
|
|
1006
|
+
var $ = /*#__PURE__*/ F(Ve, [["render", We]]), Ge = { install(e, t = {}) {
|
|
1007
|
+
e.provide(D, {
|
|
1008
|
+
lang: t.lang || "en",
|
|
1009
|
+
locales: t.locales || {}
|
|
1010
|
+
}), e.component("MaterialDatetimePicker", Q), e.component("MaterialDatetimeInput", $);
|
|
1011
|
+
} };
|
|
1012
|
+
//#endregion
|
|
1013
|
+
export { $ as MaterialDatetimeInput, Q as MaterialDatetimePicker, D as VMDP_OPTIONS, Ge as default, k as getLocaleTexts, O as locales };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("moment"),require("vue")):typeof define==`function`&&define.amd?define([`exports`,`moment`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.VueMaterialDatetimePicker={},e.moment,e.Vue))})(this,function(e,t,n){Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var r=Object.create,i=Object.defineProperty,a=Object.getOwnPropertyDescriptor,o=Object.getOwnPropertyNames,s=Object.getPrototypeOf,c=Object.prototype.hasOwnProperty,l=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var s=o(t),l=0,u=s.length,d;l<u;l++)d=s[l],!c.call(e,d)&&d!==n&&i(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(r=a(t,d))||r.enumerable});return e},u=(e,t,n)=>(n=e==null?{}:r(s(e)),l(t||!e||!e.__esModule?i(n,`default`,{value:e,enumerable:!0}):n,e));let d=u(t,1);t=u(t);var f=`YYYY-MM-DD`,p=Object.freeze([`update:modelValue`,`open`,`close`,`date-selected`,`year-selected`]),m=Object.freeze({DATE:`date`,HOURS:`hours`,MINUTES:`minutes`}),h=Object.freeze({MONTH:`month`,MONTHS:`months`,YEAR:`year`,YEARS:`years`,HOURS:`hours`}),g=Object.freeze({DAYS_PER_WEEK:7,FIRST_DAY_OF_MONTH:1,LAST_WEEKDAY_INDEX:6}),_=Object.freeze({DEFAULT_MIN_YEAR:1850,DEFAULT_MAX_YEAR:2200,PAGE_SIZE:7,RADIUS:3}),v=Object.freeze({VIEW_BOX:`0,0,400,400`,CENTER:200,FACE_RADIUS:192,CENTER_DOT_RADIUS:15,OUTER_RADIUS:162,INNER_HOUR_RADIUS:110,MINUTE_DOT_RADIUS:158,OUTER_HIT_RADIUS:30,INNER_HIT_RADIUS:20,TEXT_Y_OFFSET:7,HOUR_FONT_SIZE:20,INNER_HOUR_FONT_SIZE:22,MINUTE_FONT_SIZE:20,HOUR_HAND_LENGTH:{LONG:-120,SHORT:-90},MINUTE_HAND_LENGTH:-150,HOURS_PER_RING:12,HOURS_PER_DAY:24,MINUTES_PER_HOUR:60,MINUTE_LABEL_STEP:5,DEGREES_PER_CIRCLE:360}),y=Object.freeze({FACE:`var(--vmdp-clock-face)`,DISABLED:`var(--vmdp-disabled)`,CENTER_DOT:`var(--vmdp-muted)`,SELECTED:`var(--vmdp-accent)`,TEXT:`#000`,SELECTED_TEXT:`#fff`,TRANSPARENT:`transparent`}),ee=Object.freeze([m.HOURS,m.MINUTES]),b={modelValue:{type:String,default:``},date:{type:Boolean,default:!0},time:{type:Boolean,default:!0},format:{type:String,default:f},lang:{type:String,default:null},minDate:{type:[String,Date,Object],default:null},maxDate:{type:[String,Date,Object],default:null},currentDate:{type:[String,Date,Object],default:null},weekStart:{type:Number,default:0},disabledDays:{type:Array,default:()=>[]},shortTime:{type:Boolean,default:!1},clearButton:{type:Boolean,default:!1},nowButton:{type:Boolean,default:!1},switchOnClick:{type:Boolean,default:!1},monthPicker:{type:Boolean,default:!1},yearPicker:{type:Boolean,default:!0},okText:{type:String,default:null},cancelText:{type:String,default:null},clearText:{type:String,default:null},nowText:{type:String,default:null}},x=`vmdp-options`,S={en:{ok:`OK`,cancel:`Cancel`,clear:`Clear`,now:`Now`},de:{ok:`OK`,cancel:`Abbrechen`,clear:`LΓΆschen`,now:`Jetzt`},fr:{ok:`OK`,cancel:`Annuler`,clear:`Effacer`,now:`Maintenant`},es:{ok:`OK`,cancel:`Cancelar`,clear:`Borrar`,now:`Ahora`}};function C(e,t={}){let n={...S,...t};return{...S.en,...n[e]||{}}}function w(e,t,n){if(e==null||e===``)return null;let r;return r=d.default.isMoment(e)?(0,d.default)(e):e instanceof Date?(0,d.default)(e.getTime()):typeof e==`string`&&t?(0,d.default)(e,t):(0,d.default)(e),r.locale(n)}function T(e,t,n=!1,r=!1){if(t==null)return!0;let i=(0,d.default)(t),a=(0,d.default)(e);return!n&&!r&&(i.hour(0),a.hour(0)),r||(i.minute(0),a.minute(0)),i.second(0).millisecond(0),a.second(0).millisecond(0),a.valueOf()>=i.valueOf()}function E(e,t,n=!1,r=!1){if(t==null)return!0;let i=(0,d.default)(t),a=(0,d.default)(e);return!n&&!r&&(i.hour(0),a.hour(0)),r||(i.minute(0),a.minute(0)),i.second(0).millisecond(0),a.second(0).millisecond(0),a.valueOf()<=i.valueOf()}function te(e,t,n){let r=e;return T(r,t)||(r=(0,d.default)(t)),E(r,n)||(r=(0,d.default)(n)),r}function ne({modelValue:e,currentDate:t,format:n,lang:r,minDate:i,maxDate:a}){let o=w(e,n,r)||w(t,n,r);return(!o||!o.isValid())&&(o=(0,d.default)().locale(r)),te(o,i,a)}function re(e,t,n){let r=(0,d.default)(e).locale(n).startOf(`month`),i=[];for(let e=t;i.length<g.DAYS_PER_WEEK;e++)e>g.LAST_WEEKDAY_INDEX&&(e=0),i.push(e);let a=[],o=i.indexOf(r.day());for(let e=0;e<o;e++)a.push(null);let s=r.daysInMonth();for(let e=g.FIRST_DAY_OF_MONTH;e<=s;e++)a.push((0,d.default)(r).date(e));for(;a.length%g.DAYS_PER_WEEK!==0;)a.push(null);let c=[];for(let e=0;e<a.length;e+=g.DAYS_PER_WEEK)c.push(a.slice(e,e+g.DAYS_PER_WEEK));return{dayOrder:i,weeks:c}}function ie(e,{minDate:t=null,maxDate:n=null,disabledDays:r=[]}={}){return T(e,t)&&E(e,n)&&r.indexOf(e.isoWeekday())===-1}function D(e,t,n,{minDate:r=null,maxDate:i=null}={}){let a=(0,d.default)(e);return n?(a.hour(t).minute(0).second(0),T(a,r,!0,!1)&&E(a,i,!0,!1)):(a.minute(t).second(0),T(a,r,!0,!0)&&E(a,i,!0,!0))}function O(e,t,n){return{x:-(n*Math.sin(-Math.PI*2*(e/t))),y:-(n*Math.cos(-Math.PI*2*(e/t)))}}var k=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n},A={name:`PickerCalendar`,props:{current:{type:Object,required:!0},lang:{type:String,default:`en`},weekStart:{type:Number,default:0},minDate:{type:Object,default:null},maxDate:{type:Object,default:null},disabledDays:{type:Array,default:()=>[]}},emits:[`select`],computed:{calendar(){return re(this.current,this.weekStart,this.lang)},monthTitle(){return(0,t.default)(this.current).locale(this.lang).format(`MMMM YYYY`)},weekdayLabels(){return this.calendar.dayOrder.map(e=>(0,t.default)().locale(this.lang).day(e).format(`dd`).substring(0,1))}},methods:{isSelectable(e){return ie(e,{minDate:this.minDate,maxDate:this.maxDate,disabledDays:this.disabledDays})},isSelected(e){return e.isSame(this.current,`day`)}}},j={class:`vmdp-picker-calendar`},M={class:`vmdp-picker-month`},N={class:`vmdp-picker-days`},P=[`onClick`],F={key:1,class:`vmdp-select-day`};function I(e,t,r,i,a,o){return(0,n.openBlock)(),(0,n.createElementBlock)(`div`,j,[(0,n.createElementVNode)(`div`,M,(0,n.toDisplayString)(o.monthTitle),1),(0,n.createElementVNode)(`table`,N,[(0,n.createElementVNode)(`thead`,null,[(0,n.createElementVNode)(`tr`,null,[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(o.weekdayLabels,(e,t)=>((0,n.openBlock)(),(0,n.createElementBlock)(`th`,{key:t},(0,n.toDisplayString)(e),1))),128))])]),(0,n.createElementVNode)(`tbody`,null,[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(o.calendar.weeks,(t,r)=>((0,n.openBlock)(),(0,n.createElementBlock)(`tr`,{key:r},[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(t,(t,r)=>((0,n.openBlock)(),(0,n.createElementBlock)(`td`,{key:r},[t?((0,n.openBlock)(),(0,n.createElementBlock)(n.Fragment,{key:0},[o.isSelectable(t)?((0,n.openBlock)(),(0,n.createElementBlock)(`a`,{key:0,href:`#`,class:(0,n.normalizeClass)([`vmdp-select-day`,{selected:o.isSelected(t)}]),onClick:(0,n.withModifiers)(n=>e.$emit(`select`,t),[`prevent`])},(0,n.toDisplayString)(t.format(`DD`)),11,P)):((0,n.openBlock)(),(0,n.createElementBlock)(`span`,F,(0,n.toDisplayString)(t.format(`DD`)),1))],64)):(0,n.createCommentVNode)(``,!0)]))),128))]))),128))])])])}var L=k(A,[[`render`,I]]),R={name:`PickerClock`,props:{mode:{type:String,required:!0,validator:e=>ee.includes(e)},value:{type:Object,required:!0},shortTime:{type:Boolean,default:!1},pm:{type:Boolean,default:!1},minDate:{type:Object,default:null},maxDate:{type:Object,default:null}},emits:[`select`],computed:{clock(){return v},clockColor(){return y},limits(){return{minDate:this.minDate,maxDate:this.maxDate}},clockTransform(){return`translate(${v.CENTER},${v.CENTER})`},isHourMode(){return this.mode===m.HOURS},isMinuteMode(){return this.mode===m.MINUTES},hourHandLength(){return this.shortTime?v.HOUR_HAND_LENGTH.LONG:v.HOUR_HAND_LENGTH.SHORT},hourHandRotation(){return`rotate(${v.DEGREES_PER_CIRCLE*this.value.hour()/v.HOURS_PER_RING})`},minuteHandRotation(){return`rotate(${v.DEGREES_PER_CIRCLE*this.value.minute()/v.MINUTES_PER_HOUR})`},hourItems(){let e=[],t=this.value.hour();for(let n=0;n<v.HOURS_PER_RING;n++){let r=this.shortTime&&this.pm?n+v.HOURS_PER_RING:n;e.push({value:n,label:n===0&&this.shortTime?v.HOURS_PER_RING:n,fontSize:v.HOUR_FONT_SIZE,...O(n,v.HOURS_PER_RING,v.OUTER_RADIUS),selected:this.shortTime?t%v.HOURS_PER_RING===n:t===n,enabled:D(this.value,r,!0,this.limits)})}if(!this.shortTime)for(let n=v.HOURS_PER_RING;n<v.HOURS_PER_DAY;n++)e.push({value:n,label:n,fontSize:v.INNER_HOUR_FONT_SIZE,...O(n-v.HOURS_PER_RING,v.HOURS_PER_RING,v.INNER_HOUR_RADIUS),selected:t===n,enabled:D(this.value,n,!0,this.limits)});return e},minuteItems(){let e=[],t=this.value.minute();for(let n=0;n<v.MINUTES_PER_HOUR;n++){let r=n%v.MINUTE_LABEL_STEP===0;e.push({value:n,r:r?v.OUTER_HIT_RADIUS:v.INNER_HIT_RADIUS,...O(n,v.MINUTES_PER_HOUR,r?v.OUTER_RADIUS:v.MINUTE_DOT_RADIUS),selected:t===n,enabled:D(this.value,n,!1,this.limits)})}return e},minuteLabels(){return this.minuteItems.filter(e=>e.value%v.MINUTE_LABEL_STEP===0).map(e=>({...e,label:e.value,...O(e.value,v.MINUTES_PER_HOUR,v.OUTER_RADIUS)}))}},methods:{textColor(e){return e.selected?y.SELECTED_TEXT:e.enabled?y.TEXT:y.DISABLED},pick(e){e.enabled&&this.$emit(`select`,e.value)}}},z={class:`vmdp-svg-clock`},B=[`viewBox`],V=[`transform`],H=[`r`,`fill`,`stroke`],U=[`y2`,`stroke`,`transform`],W=[`y2`,`stroke`,`transform`],G=[`r`,`fill`],K=[`r`,`cx`,`cy`,`fill`,`onClick`],q=[`font-size`,`x`,`y`,`fill`,`onClick`],J=[`r`,`cx`,`cy`,`fill`,`onClick`],Y=[`font-size`,`x`,`y`,`fill`,`onClick`];function ae(e,t,r,i,a,o){return(0,n.openBlock)(),(0,n.createElementBlock)(`div`,z,[((0,n.openBlock)(),(0,n.createElementBlock)(`svg`,{class:`svg-clock`,viewBox:o.clock.VIEW_BOX},[(0,n.createElementVNode)(`g`,{transform:o.clockTransform},[(0,n.createElementVNode)(`circle`,{r:o.clock.FACE_RADIUS,fill:o.clockColor.FACE,stroke:o.clockColor.DISABLED,"stroke-width":`2`},null,8,H),(0,n.createElementVNode)(`line`,{class:`minute-hand`,x1:`0`,y1:`0`,x2:`0`,y2:o.clock.MINUTE_HAND_LENGTH,stroke:o.isMinuteMode?o.clockColor.SELECTED:o.clockColor.DISABLED,"stroke-width":`2`,transform:o.minuteHandRotation},null,8,U),(0,n.createElementVNode)(`line`,{class:`hour-hand`,x1:`0`,y1:`0`,x2:`0`,y2:o.hourHandLength,stroke:o.isHourMode?o.clockColor.SELECTED:o.clockColor.DISABLED,"stroke-width":`8`,transform:o.hourHandRotation},null,8,W),(0,n.createElementVNode)(`circle`,{r:o.clock.CENTER_DOT_RADIUS,fill:o.clockColor.CENTER_DOT},null,8,G),o.isHourMode?((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,{key:0},(0,n.renderList)(o.hourItems,e=>((0,n.openBlock)(),(0,n.createElementBlock)(`g`,{key:`h`+e.value},[(0,n.createElementVNode)(`circle`,{class:(0,n.normalizeClass)([`vmdp-select-hour`,{disabled:!e.enabled}]),r:o.clock.OUTER_HIT_RADIUS,cx:e.x,cy:e.y,fill:e.selected?o.clockColor.SELECTED:o.clockColor.TRANSPARENT,style:{cursor:`pointer`},onClick:t=>o.pick(e)},null,10,K),(0,n.createElementVNode)(`text`,{class:(0,n.normalizeClass)([`vmdp-select-hour-text`,{disabled:!e.enabled}]),"text-anchor":`middle`,"font-weight":`bold`,"font-size":e.fontSize,x:e.x,y:e.y+o.clock.TEXT_Y_OFFSET,fill:o.textColor(e),style:{cursor:`pointer`},onClick:t=>o.pick(e)},(0,n.toDisplayString)(e.label),11,q)]))),128)):((0,n.openBlock)(),(0,n.createElementBlock)(n.Fragment,{key:1},[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(o.minuteItems,e=>((0,n.openBlock)(),(0,n.createElementBlock)(`circle`,{key:`m`+e.value,class:(0,n.normalizeClass)([`vmdp-select-minute`,{disabled:!e.enabled}]),r:e.r,cx:e.x,cy:e.y,fill:e.selected?o.clockColor.SELECTED:o.clockColor.TRANSPARENT,style:{cursor:`pointer`},onClick:t=>o.pick(e)},null,10,J))),128)),((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(o.minuteLabels,e=>((0,n.openBlock)(),(0,n.createElementBlock)(`text`,{key:`tm`+e.value,class:(0,n.normalizeClass)([`vmdp-select-minute-text`,{disabled:!e.enabled}]),"text-anchor":`middle`,"font-weight":`bold`,"font-size":o.clock.MINUTE_FONT_SIZE,x:e.x,y:e.y+o.clock.TEXT_Y_OFFSET,fill:o.textColor(e),style:{cursor:`pointer`},onClick:t=>o.pick(e)},(0,n.toDisplayString)(e.label),11,Y))),128))],64))],8,V)],8,B))])}var oe=k(R,[[`render`,ae]]);function X(e,t){let r=()=>(0,n.h)(`svg`,{class:[`vmdp-icon`,e],xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 24 24`,fill:`currentColor`,"aria-hidden":`true`},[(0,n.h)(`path`,{d:t})]);return r.displayName=e,r}var se=X(`vmdp-icon-close`,`M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z`),ce=X(`vmdp-icon-chevron-left`,`M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z`),le=X(`vmdp-icon-chevron-right`,`M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z`),ue={name:`PickerYears`,components:{IconArrowUp:X(`vmdp-icon-arrow-up`,`M7.41 15.41 12 10.83l4.59 4.58L18 14l-6-6-6 6z`),IconArrowDown:X(`vmdp-icon-arrow-down`,`M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z`)},props:{midYear:{type:Number,required:!0},currentYear:{type:Number,required:!0},minYear:{type:Number,default:_.DEFAULT_MIN_YEAR},maxYear:{type:Number,default:_.DEFAULT_MAX_YEAR}},emits:[`select`,`page`],computed:{years(){let e=[];for(let t=this.midYear-_.RADIUS;t<=this.midYear+_.RADIUS;t++)e.push(t);return e},canPageBefore(){return this.minYear<this.midYear-_.RADIUS},canPageAfter(){return this.maxYear>this.midYear+_.RADIUS}}},de={class:`vmdp-picker-year`},fe=[`onClick`];function pe(e,t,r,i,a,o){let s=(0,n.resolveComponent)(`IconArrowUp`),c=(0,n.resolveComponent)(`IconArrowDown`);return(0,n.openBlock)(),(0,n.createElementBlock)(`div`,de,[(0,n.createElementVNode)(`div`,null,[(0,n.createElementVNode)(`a`,{href:`#`,class:(0,n.normalizeClass)([`vmdp-select-year-range before`,{invisible:!o.canPageBefore}]),onClick:t[0]||=(0,n.withModifiers)(t=>e.$emit(`page`,-1),[`prevent`])},[(0,n.createVNode)(s)],2)]),((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(o.years,t=>((0,n.openBlock)(),(0,n.createElementBlock)(`div`,{key:t,class:(0,n.normalizeClass)([`year-picker-item`,{active:t===r.currentYear,invisible:t<r.minYear||t>r.maxYear}]),onClick:n=>e.$emit(`select`,t)},(0,n.toDisplayString)(t),11,fe))),128)),(0,n.createElementVNode)(`div`,null,[(0,n.createElementVNode)(`a`,{href:`#`,class:(0,n.normalizeClass)([`vmdp-select-year-range after`,{invisible:!o.canPageAfter}]),onClick:t[1]||=(0,n.withModifiers)(t=>e.$emit(`page`,1),[`prevent`])},[(0,n.createVNode)(c)],2)])])}var me={name:`MaterialDatetimePicker`,components:{PickerCalendar:L,PickerClock:oe,PickerYears:k(ue,[[`render`,pe]]),IconClose:se,IconChevronLeft:ce,IconChevronRight:le},props:b,emits:p,inject:{pluginOptions:{from:x,default:()=>({})}},data(){return{current:null,view:m.DATE,showYearPicker:!1,midYear:0,switchTimer:null}},computed:{effectiveLang(){return this.lang||this.pluginOptions.lang||`en`},texts(){let e=C(this.effectiveLang,this.pluginOptions.locales);return{ok:this.okText??e.ok,cancel:this.cancelText??e.cancel,clear:this.clearText??e.clear,now:this.nowText??e.now}},min(){return w(this.minDate,this.format,this.effectiveLang)},max(){return w(this.maxDate,this.format,this.effectiveLang)},minYear(){return this.min?this.min.year():_.DEFAULT_MIN_YEAR},maxYear(){return this.max?this.max.year():_.DEFAULT_MAX_YEAR},isDateView(){return this.view===m.DATE},isClockView(){return this.view===m.HOURS||this.view===m.MINUTES},shouldCommitFromDateView(){return this.monthPicker||!this.time},isPM(){return this.current.hour()>=v.HOURS_PER_RING},headerText(){return this.date?this.current.format(`dddd`):this.shortTime?this.current.format(`A`):` `},formattedTime(){return this.current.format(this.shortTime?`hh:mm A`:`HH:mm`)},prevMonthVisible(){return T((0,t.default)(this.current).startOf(h.MONTH),this.min)},nextMonthVisible(){return E((0,t.default)(this.current).endOf(h.MONTH),this.max)},prevYearVisible(){return T((0,t.default)(this.current).startOf(h.YEAR),this.min)},nextYearVisible(){return E((0,t.default)(this.current).endOf(h.YEAR),this.max)}},created(){this.current=ne({modelValue:this.modelValue,currentDate:this.currentDate,format:this.format,lang:this.effectiveLang,minDate:this.min,maxDate:this.max}),this.view=this.date?m.DATE:m.HOURS,this.midYear=this.current.year()},mounted(){window.addEventListener(`keydown`,this.onKeydown),this.$emit(`open`)},beforeUnmount(){window.removeEventListener(`keydown`,this.onKeydown),this.clearSwitchTimer()},methods:{onKeydown(e){e.key===`Escape`&&this.close()},close(){this.clearSwitchTimer(),this.$emit(`close`)},commit(){this.$emit(`update:modelValue`,(0,t.default)(this.current).locale(this.effectiveLang).format(this.format))},commitAndClose(){this.commit(),this.close()},manualOk(){this.clearSwitchTimer(),this.ok()},ok(){if(this.view===m.DATE){this.shouldCommitFromDateView?this.commitAndClose():this.view=m.HOURS;return}if(this.view===m.HOURS){this.view=m.MINUTES;return}this.commitAndClose()},manualCancel(){this.clearSwitchTimer(),this.cancel()},cancel(){if(!this.time||this.view===m.DATE){this.close();return}if(this.view===m.HOURS){if(this.date){this.view=m.DATE;return}this.close();return}this.view=m.HOURS},now(){this.current=(0,t.default)().locale(this.effectiveLang)},clear(){this.$emit(`update:modelValue`,``),this.close()},previousMonth(){this.shiftCurrentDate(-1,h.MONTHS)},nextMonth(){this.shiftCurrentDate(1,h.MONTHS)},previousYear(){this.shiftCurrentDate(-1,h.YEARS)},nextYear(){this.shiftCurrentDate(1,h.YEARS)},shiftCurrentDate(e,n){this.current=(0,t.default)(this.current).add(e,n),this.showYearPicker=!1},toggleYearPicker(){this.yearPicker&&(this.midYear=this.current.year(),this.showYearPicker=!this.showYearPicker)},pageYears(e){this.midYear+=e*_.PAGE_SIZE},selectYear(e){this.current=(0,t.default)(this.current).year(e),this.showYearPicker=!1,this.$emit(`year-selected`,(0,t.default)(this.current))},selectDay(e){this.current=(0,t.default)(this.current).year(e.year()).month(e.month()).date(e.date()),this.$emit(`date-selected`,(0,t.default)(this.current)),this.switchOnClick&&this.scheduleSwitch(()=>this.ok())},selectAM(){this.current.hour()>=v.HOURS_PER_RING&&(this.current=(0,t.default)(this.current).subtract(v.HOURS_PER_RING,h.HOURS))},selectPM(){this.current.hour()<v.HOURS_PER_RING&&(this.current=(0,t.default)(this.current).add(v.HOURS_PER_RING,h.HOURS))},clearSwitchTimer(){clearTimeout(this.switchTimer),this.switchTimer=null},scheduleSwitch(e){this.clearSwitchTimer(),this.switchTimer=setTimeout(e,200)},onClockSelect(e){if(this.view===m.HOURS){let n=e;this.shortTime&&this.isPM&&n<v.HOURS_PER_RING&&(n+=v.HOURS_PER_RING),this.current=(0,t.default)(this.current).hour(n),this.switchOnClick&&this.scheduleSwitch(()=>{this.view=m.MINUTES})}else this.current=(0,t.default)(this.current).minute(e),this.switchOnClick&&this.scheduleSwitch(()=>{this.commitAndClose()})}}},he={class:`vmdp-date-view`},ge={class:`vmdp-header`},_e={class:`vmdp-actual-day`},ve={class:`vmdp-close`},ye={key:0,class:`vmdp-date`},be={class:`left center p10`},xe={class:`vmdp-actual-month p80`},Se={class:`right center p10`},Ce={class:`vmdp-actual-num`},we={class:`left center p10`},Te={class:`right center p10`},Ee={key:1,class:`vmdp-time`},De={class:`vmdp-actual-maxtime`},Oe={class:`vmdp-picker`},ke={key:2,class:`vmdp-picker-datetime`},Z={class:`vmdp-actual-meridien`},Ae={class:`left p20`},je={class:`vmdp-actual-time p60`},Me={class:`right p20`},Ne={class:`vmdp-buttons`};function Pe(e,t,r,i,a,o){let s=(0,n.resolveComponent)(`IconClose`),c=(0,n.resolveComponent)(`IconChevronLeft`),l=(0,n.resolveComponent)(`IconChevronRight`),u=(0,n.resolveComponent)(`PickerYears`),d=(0,n.resolveComponent)(`PickerCalendar`),f=(0,n.resolveComponent)(`PickerClock`);return(0,n.openBlock)(),(0,n.createElementBlock)(`div`,{class:`vmdp`,onClick:t[13]||=(...e)=>o.close&&o.close(...e)},[(0,n.createElementVNode)(`div`,{class:`vmdp-content`,onClick:t[12]||=(0,n.withModifiers)(()=>{},[`stop`])},[(0,n.createElementVNode)(`div`,he,[(0,n.createElementVNode)(`header`,ge,[(0,n.createElementVNode)(`div`,_e,(0,n.toDisplayString)(o.headerText),1),(0,n.createElementVNode)(`div`,ve,[(0,n.createElementVNode)(`a`,{href:`#`,onClick:t[0]||=(0,n.withModifiers)((...e)=>o.close&&o.close(...e),[`prevent`])},[(0,n.createVNode)(s)])])]),e.date?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,ye,[(0,n.createElementVNode)(`div`,null,[(0,n.createElementVNode)(`div`,be,[(0,n.createElementVNode)(`a`,{href:`#`,class:(0,n.normalizeClass)([`vmdp-select-month-before`,{invisible:!o.prevMonthVisible}]),onClick:t[1]||=(0,n.withModifiers)((...e)=>o.previousMonth&&o.previousMonth(...e),[`prevent`])},[(0,n.createVNode)(c)],2)]),(0,n.createElementVNode)(`div`,xe,(0,n.toDisplayString)(a.current.format(`MMM`).toUpperCase()),1),(0,n.createElementVNode)(`div`,Se,[(0,n.createElementVNode)(`a`,{href:`#`,class:(0,n.normalizeClass)([`vmdp-select-month-after`,{invisible:!o.nextMonthVisible}]),onClick:t[2]||=(0,n.withModifiers)((...e)=>o.nextMonth&&o.nextMonth(...e),[`prevent`])},[(0,n.createVNode)(l)],2)]),t[14]||=(0,n.createElementVNode)(`div`,{class:`clearfix`},null,-1)]),(0,n.createElementVNode)(`div`,Ce,(0,n.toDisplayString)(a.current.format(`DD`)),1),(0,n.createElementVNode)(`div`,null,[(0,n.createElementVNode)(`div`,we,[(0,n.createElementVNode)(`a`,{href:`#`,class:(0,n.normalizeClass)([`vmdp-select-year-before`,{invisible:!o.prevYearVisible}]),onClick:t[3]||=(0,n.withModifiers)((...e)=>o.previousYear&&o.previousYear(...e),[`prevent`])},[(0,n.createVNode)(c)],2)]),(0,n.createElementVNode)(`div`,{class:(0,n.normalizeClass)([`vmdp-actual-year p80`,{disabled:!e.yearPicker}]),onClick:t[4]||=(...e)=>o.toggleYearPicker&&o.toggleYearPicker(...e)},(0,n.toDisplayString)(a.current.format(`YYYY`)),3),(0,n.createElementVNode)(`div`,Te,[(0,n.createElementVNode)(`a`,{href:`#`,class:(0,n.normalizeClass)([`vmdp-select-year-after`,{invisible:!o.nextYearVisible}]),onClick:t[5]||=(0,n.withModifiers)((...e)=>o.nextYear&&o.nextYear(...e),[`prevent`])},[(0,n.createVNode)(l)],2)]),t[15]||=(0,n.createElementVNode)(`div`,{class:`clearfix`},null,-1)])])):(0,n.createCommentVNode)(``,!0),!e.date&&e.time?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,Ee,[(0,n.createElementVNode)(`div`,De,(0,n.toDisplayString)(o.formattedTime),1)])):(0,n.createCommentVNode)(``,!0),(0,n.createElementVNode)(`div`,Oe,[o.isDateView&&a.showYearPicker?((0,n.openBlock)(),(0,n.createBlock)(u,{key:0,"mid-year":a.midYear,"current-year":a.current.year(),"min-year":o.minYear,"max-year":o.maxYear,onSelect:o.selectYear,onPage:o.pageYears},null,8,[`mid-year`,`current-year`,`min-year`,`max-year`,`onSelect`,`onPage`])):o.isDateView&&!e.monthPicker?((0,n.openBlock)(),(0,n.createBlock)(d,{key:1,current:a.current,lang:o.effectiveLang,"week-start":e.weekStart,"min-date":o.min,"max-date":o.max,"disabled-days":e.disabledDays,onSelect:o.selectDay},null,8,[`current`,`lang`,`week-start`,`min-date`,`max-date`,`disabled-days`,`onSelect`])):o.isClockView?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,ke,[(0,n.createElementVNode)(`div`,Z,[(0,n.createElementVNode)(`div`,Ae,[(0,n.withDirectives)((0,n.createElementVNode)(`a`,{href:`#`,class:(0,n.normalizeClass)([`vmdp-meridien-am`,{selected:!o.isPM}]),onClick:t[6]||=(0,n.withModifiers)((...e)=>o.selectAM&&o.selectAM(...e),[`prevent`])},`AM`,2),[[n.vShow,e.shortTime]])]),(0,n.createElementVNode)(`div`,je,[e.date?((0,n.openBlock)(),(0,n.createElementBlock)(n.Fragment,{key:0},[(0,n.createTextVNode)((0,n.toDisplayString)(o.formattedTime),1)],64)):(0,n.createCommentVNode)(``,!0)]),(0,n.createElementVNode)(`div`,Me,[(0,n.withDirectives)((0,n.createElementVNode)(`a`,{href:`#`,class:(0,n.normalizeClass)([`vmdp-meridien-pm`,{selected:o.isPM}]),onClick:t[7]||=(0,n.withModifiers)((...e)=>o.selectPM&&o.selectPM(...e),[`prevent`])},`PM`,2),[[n.vShow,e.shortTime]])]),t[16]||=(0,n.createElementVNode)(`div`,{class:`clearfix`},null,-1)]),(0,n.createVNode)(f,{mode:a.view,value:a.current,"short-time":e.shortTime,pm:o.isPM,"min-date":o.min,"max-date":o.max,onSelect:o.onClockSelect},null,8,[`mode`,`value`,`short-time`,`pm`,`min-date`,`max-date`,`onSelect`])])):(0,n.createCommentVNode)(``,!0)]),(0,n.createElementVNode)(`div`,Ne,[e.nowButton?((0,n.openBlock)(),(0,n.createElementBlock)(`button`,{key:0,type:`button`,class:`vmdp-btn vmdp-btn-now`,onClick:t[8]||=(...e)=>o.now&&o.now(...e)},(0,n.toDisplayString)(o.texts.now),1)):(0,n.createCommentVNode)(``,!0),e.clearButton?((0,n.openBlock)(),(0,n.createElementBlock)(`button`,{key:1,type:`button`,class:`vmdp-btn vmdp-btn-clear`,onClick:t[9]||=(...e)=>o.clear&&o.clear(...e)},(0,n.toDisplayString)(o.texts.clear),1)):(0,n.createCommentVNode)(``,!0),(0,n.createElementVNode)(`button`,{type:`button`,class:`vmdp-btn vmdp-btn-cancel`,onClick:t[10]||=(...e)=>o.manualCancel&&o.manualCancel(...e)},(0,n.toDisplayString)(o.texts.cancel),1),(0,n.createElementVNode)(`button`,{type:`button`,class:`vmdp-btn vmdp-btn-ok`,onClick:t[11]||=(...e)=>o.manualOk&&o.manualOk(...e)},(0,n.toDisplayString)(o.texts.ok),1)])])])])}var Q=k(me,[[`render`,Pe]]),Fe={name:`MaterialDatetimeInput`,components:{MaterialDatetimePicker:Q},props:{...b,placeholder:{type:String,default:``}},emits:p,data(){return{isOpen:!1}},computed:{pickerBindings(){let{placeholder:e,...t}=this.$props;return t}},methods:{open(){this.isOpen=!0},onClose(){this.isOpen=!1,this.$emit(`close`)}}},Ie={class:`vmdp-input-wrapper`},Le=[`value`,`placeholder`];function Re(e,t,r,i,a,o){let s=(0,n.resolveComponent)(`MaterialDatetimePicker`);return(0,n.openBlock)(),(0,n.createElementBlock)(`span`,Ie,[(0,n.createElementVNode)(`input`,{class:`vmdp-input`,type:`text`,readonly:``,value:e.modelValue,placeholder:r.placeholder,onFocus:t[0]||=(...e)=>o.open&&o.open(...e),onClick:t[1]||=(...e)=>o.open&&o.open(...e)},null,40,Le),a.isOpen?((0,n.openBlock)(),(0,n.createBlock)(s,(0,n.mergeProps)({key:0},o.pickerBindings,{"onUpdate:modelValue":t[2]||=t=>e.$emit(`update:modelValue`,t),onOpen:t[3]||=t=>e.$emit(`open`),onClose:o.onClose,onDateSelected:t[4]||=t=>e.$emit(`date-selected`,t),onYearSelected:t[5]||=t=>e.$emit(`year-selected`,t)}),null,16,[`onClose`])):(0,n.createCommentVNode)(``,!0)])}var $=k(Fe,[[`render`,Re]]);e.MaterialDatetimeInput=$,e.MaterialDatetimePicker=Q,e.VMDP_OPTIONS=x,e.default={install(e,t={}){e.provide(x,{lang:t.lang||`en`,locales:t.locales||{}}),e.component(`MaterialDatetimePicker`,Q),e.component(`MaterialDatetimeInput`,$)}},e.getLocaleTexts=C,e.locales=S});
|
package/package.json
ADDED
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@cristiancananau/vue-material-datetime-picker",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "Material-design date and time picker components for Vue 3",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"author": "Cristian Cananau",
|
|
7
|
+
"type": "module",
|
|
8
|
+
"keywords": [
|
|
9
|
+
"vue",
|
|
10
|
+
"vue3",
|
|
11
|
+
"datepicker",
|
|
12
|
+
"datetimepicker",
|
|
13
|
+
"timepicker",
|
|
14
|
+
"material-design",
|
|
15
|
+
"vite"
|
|
16
|
+
],
|
|
17
|
+
"repository": {
|
|
18
|
+
"type": "git",
|
|
19
|
+
"url": "git+https://github.com/cristiancananau/vue-material-datetime-picker.git"
|
|
20
|
+
},
|
|
21
|
+
"bugs": {
|
|
22
|
+
"url": "https://github.com/cristiancananau/vue-material-datetime-picker/issues"
|
|
23
|
+
},
|
|
24
|
+
"homepage": "https://github.com/cristiancananau/vue-material-datetime-picker#readme",
|
|
25
|
+
"files": [
|
|
26
|
+
"dist",
|
|
27
|
+
"README.md",
|
|
28
|
+
"LICENSE"
|
|
29
|
+
],
|
|
30
|
+
"sideEffects": [
|
|
31
|
+
"*.css",
|
|
32
|
+
"**/*.css"
|
|
33
|
+
],
|
|
34
|
+
"main": "./dist/vue-material-datetime-picker.umd.cjs",
|
|
35
|
+
"module": "./dist/vue-material-datetime-picker.js",
|
|
36
|
+
"exports": {
|
|
37
|
+
".": {
|
|
38
|
+
"import": "./dist/vue-material-datetime-picker.js",
|
|
39
|
+
"require": "./dist/vue-material-datetime-picker.umd.cjs"
|
|
40
|
+
},
|
|
41
|
+
"./style.css": "./dist/style.css"
|
|
42
|
+
},
|
|
43
|
+
"scripts": {
|
|
44
|
+
"dev": "vite",
|
|
45
|
+
"build": "vite build",
|
|
46
|
+
"preview": "vite preview",
|
|
47
|
+
"test": "vitest run",
|
|
48
|
+
"test:watch": "vitest",
|
|
49
|
+
"prepublishOnly": "npm test && npm run build"
|
|
50
|
+
},
|
|
51
|
+
"peerDependencies": {
|
|
52
|
+
"moment": "^2.29.0",
|
|
53
|
+
"vue": "^3.4.0"
|
|
54
|
+
},
|
|
55
|
+
"devDependencies": {
|
|
56
|
+
"@vitejs/plugin-vue": "^6.0.7",
|
|
57
|
+
"@vue/test-utils": "^2.4.6",
|
|
58
|
+
"jsdom": "^29.1.1",
|
|
59
|
+
"moment": "^2.30.1",
|
|
60
|
+
"vite": "^8.1.4",
|
|
61
|
+
"vitest": "^4.1.10",
|
|
62
|
+
"vue": "^3.4.29"
|
|
63
|
+
}
|
|
64
|
+
}
|