first commit
This commit is contained in:
commit
eb2f504652
32490 changed files with 5731109 additions and 0 deletions
21
node_modules/vue3-datepicker/LICENSE
generated
vendored
Normal file
21
node_modules/vue3-datepicker/LICENSE
generated
vendored
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
MIT License
|
||||
|
||||
Copyright (c) 2020 Ilia Borovitinov
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
95
node_modules/vue3-datepicker/README.md
generated
vendored
Normal file
95
node_modules/vue3-datepicker/README.md
generated
vendored
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
# Vue 3 Datepicker
|
||||
|
||||
Documentation: https://icehaunter.github.io/vue3-datepicker/
|
||||
|
||||
This is a basic (at least for now) reimplementation of https://github.com/icehaunter/vuejs-datepicker in Vue 3 and with greatly cleaned up code.
|
||||
|
||||
All date manipulation and formatting are done via the amazing [`date-fns`](https://date-fns.org/) library, so it's a direct dependency of this picker.
|
||||
|
||||
## Installation
|
||||
|
||||
Package is available on NPM: https://www.npmjs.com/package/vue3-datepicker
|
||||
|
||||
```sh
|
||||
npm i vue3-datepicker
|
||||
```
|
||||
|
||||
The component is packaged mainly for use with bundlers, if you require a browser build - post an issue.
|
||||
|
||||
## Usage
|
||||
|
||||
For more examples see https://icehaunter.github.io/vue3-datepicker/examples.html
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<datepicker
|
||||
v-model="selected"
|
||||
:locale="locale"
|
||||
:upperLimit="to"
|
||||
:lowerLimit="from"
|
||||
:clearable="true"
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Props and attributes
|
||||
|
||||
Attribute fallthrough is enabled, so any attribute you apply to the component will be passed down to the input.
|
||||
|
||||
All props which accept formatting strings for dates use [`date-fns` formatting function](https://date-fns.org/docs/format) under the hood, so see that function's documentation for patterns.
|
||||
|
||||
Main interaction to date selection is done via `v-model` with `Date` as expected type of the value passed.
|
||||
|
||||
Full props documentation is available at https://icehaunter.github.io/vue3-datepicker/config.html#props
|
||||
|
||||
| ID | Type | Default | Description |
|
||||
| ------------------------ | -------------------------------------------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| `upperLimit` | `Date` | | Upper limit for available dates for picking |
|
||||
| `lowerLimit` | `Date` | | Lower limit for available dates for picking |
|
||||
| `startingViewDate` | `Date` | `() => new Date()` | Date on which to focus when empty datepicker is opened. Default is "right now" |
|
||||
| `disabledDates` | `{ dates: Date[] }` | | Dates not available for picking |
|
||||
| `disabledTime` | `{ dates: Date[] }` | | Dates not available for time picking |
|
||||
| `startingView` | `'time' \| 'day' \| 'month' \| 'year'` | `'day'` | View on which the date picker should open. Can be either `year`, `month`, or `day` |
|
||||
| `minimumView` | `'time' \| 'day' \| 'month' \| 'year'` | `'day'` | If set, lower-level views won't show |
|
||||
| `dayPickerHeadingFormat` | `String` | `LLLL yyyy` | `date-fns`-type formatting for a day view heading |
|
||||
| `dayFormat` | `String` | `dd` | `date-fns`-type formatting for each day on the day view |
|
||||
| `weekdayFormat` | `String` | `EE` | `date-fns`-type formatting for a line of weekdays on day view |
|
||||
| `inputFormat` | `String` | `yyyy-MM-dd` | `date-fns`-type format in which the string in the input should be both parsed and displayed |
|
||||
| `locale` | [`Locale`](https://date-fns.org/v2.16.1/docs/I18n#usage) | `date-fns/locale/en` | [`date-fns` locale object](https://date-fns.org/v2.16.1/docs/I18n#usage). Used in string formatting (see default `dayPickerHeadingFormat`) |
|
||||
| `disabled` | `Boolean` | `false` | Disables datepicker and prevents it's opening |
|
||||
| `typeable` | `Boolean` | `false` | Allows user to input date manually |
|
||||
| `weekStartsOn` | `Number` | 1 | Day on which the week should start. Number from 0 to 6, where 0 is Sunday and 6 is Saturday. Week starts with a Monday (1) by default |
|
||||
| `clearable` | `Boolean` | `false` | Allows clearing the selected date and setting the value to `null` |
|
||||
| `allowOutsideInterval` | `Boolean` | `false` | Allows user to click dates outside of current interval |
|
||||
|
||||
### Events
|
||||
|
||||
- `opened`: Emitted every time the popup opens, including on field focus
|
||||
- `closed`: Emitted every time the popup closes, including on field blur
|
||||
- `decadePageChanged`: Emitted when a page is changed on the year picker view, displaying a different decade. Has a date that is included in the shown decade as an argument.
|
||||
- `yearPageChanged`: Emitted when a page is changed on the month picker view, displaying a different year. Has a date that is included in the shown year as an argument.
|
||||
- `monthPageChanged`: Emitted when a page is changed on the day picker view, displaying a different month. Has a date that is included in the shown month as an argument.
|
||||
|
||||
## Compatibility
|
||||
|
||||
Package is transpiled and should be usable for everyone with ES6 and above, but the styling of the datepicker itself uses CSS Grid and CSS variables.
|
||||
|
||||
## Example
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<datepicker v-model="picked" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Datepicker from '../src/datepicker/Datepicker.vue'
|
||||
components: {
|
||||
Datepicker
|
||||
},
|
||||
data(): {
|
||||
return {
|
||||
picked: new Date();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
BIN
node_modules/vue3-datepicker/dist/favicon.ico
generated
vendored
Normal file
BIN
node_modules/vue3-datepicker/dist/favicon.ico
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
438
node_modules/vue3-datepicker/dist/types/Datepicker.vue.d.ts
generated
vendored
Normal file
438
node_modules/vue3-datepicker/dist/types/Datepicker.vue.d.ts
generated
vendored
Normal file
|
|
@ -0,0 +1,438 @@
|
|||
import { PropType } from 'vue';
|
||||
declare const _sfc_main: import("vue").DefineComponent<{
|
||||
placeholder: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
/**
|
||||
* `v-model` for selected date
|
||||
*/
|
||||
modelValue: {
|
||||
type: PropType<Date>;
|
||||
required: false;
|
||||
};
|
||||
/**
|
||||
* Dates not available for picking
|
||||
*/
|
||||
disabledDates: {
|
||||
type: PropType<{
|
||||
dates?: Date[] | undefined;
|
||||
predicate?: ((currentDate: Date) => boolean) | undefined;
|
||||
}>;
|
||||
required: false;
|
||||
};
|
||||
allowOutsideInterval: {
|
||||
type: BooleanConstructor;
|
||||
required: false;
|
||||
default: boolean;
|
||||
};
|
||||
/**
|
||||
* Time not available for picking
|
||||
*/
|
||||
disabledTime: {
|
||||
type: PropType<{
|
||||
dates?: Date[] | undefined;
|
||||
predicate?: ((currentDate: Date) => boolean) | undefined;
|
||||
}>;
|
||||
required: false;
|
||||
};
|
||||
/**
|
||||
* Upper limit for available dates for picking
|
||||
*/
|
||||
upperLimit: {
|
||||
type: PropType<Date>;
|
||||
required: false;
|
||||
};
|
||||
/**
|
||||
* Lower limit for available dates for picking
|
||||
*/
|
||||
lowerLimit: {
|
||||
type: PropType<Date>;
|
||||
required: false;
|
||||
};
|
||||
/**
|
||||
* View on which the date picker should open. Can be either `year`, `month`, `day` or `time`
|
||||
*/
|
||||
startingView: {
|
||||
type: PropType<"time" | "day" | "month" | "year">;
|
||||
required: false;
|
||||
default: string;
|
||||
validate: (v: unknown) => boolean;
|
||||
};
|
||||
/**
|
||||
* Date which should be the "center" of the initial view.
|
||||
* When an empty datepicker opens, it focuses on the month/year
|
||||
* that contains this date
|
||||
*/
|
||||
startingViewDate: {
|
||||
type: PropType<Date>;
|
||||
required: false;
|
||||
default: () => Date;
|
||||
};
|
||||
/**
|
||||
* `date-fns`-type formatting for a month view heading
|
||||
*/
|
||||
dayPickerHeadingFormat: {
|
||||
type: StringConstructor;
|
||||
required: false;
|
||||
default: string;
|
||||
};
|
||||
/**
|
||||
* `date-fns`-type formatting for the month picker view
|
||||
*/
|
||||
monthListFormat: {
|
||||
type: StringConstructor;
|
||||
required: false;
|
||||
default: string;
|
||||
};
|
||||
/**
|
||||
* `date-fns`-type formatting for a line of weekdays on day view
|
||||
*/
|
||||
weekdayFormat: {
|
||||
type: StringConstructor;
|
||||
required: false;
|
||||
default: string;
|
||||
};
|
||||
/**
|
||||
* `date-fns`-type formatting for the day picker view
|
||||
*/
|
||||
dayFormat: {
|
||||
type: StringConstructor;
|
||||
required: false;
|
||||
default: string;
|
||||
};
|
||||
/**
|
||||
* `date-fns`-type format in which the string in the input should be both
|
||||
* parsed and displayed
|
||||
*/
|
||||
inputFormat: {
|
||||
type: StringConstructor;
|
||||
required: false;
|
||||
default: string;
|
||||
};
|
||||
/**
|
||||
* [`date-fns` locale object](https://date-fns.org/v2.16.1/docs/I18n#usage).
|
||||
* Used in string formatting (see default `dayPickerHeadingFormat`)
|
||||
*/
|
||||
locale: {
|
||||
type: PropType<Locale>;
|
||||
required: false;
|
||||
};
|
||||
/**
|
||||
* Day on which the week should start.
|
||||
*
|
||||
* Number from 0 to 6, where 0 is Sunday and 6 is Saturday.
|
||||
* Week starts with a Monday (1) by default
|
||||
*/
|
||||
weekStartsOn: {
|
||||
type: PropType<0 | 1 | 2 | 3 | 4 | 5 | 6>;
|
||||
required: false;
|
||||
default: number;
|
||||
validator: (value: any) => boolean;
|
||||
};
|
||||
/**
|
||||
* Disables datepicker and prevents it's opening
|
||||
*/
|
||||
disabled: {
|
||||
type: BooleanConstructor;
|
||||
required: false;
|
||||
default: boolean;
|
||||
};
|
||||
/**
|
||||
* Clears selected date
|
||||
*/
|
||||
clearable: {
|
||||
type: BooleanConstructor;
|
||||
required: false;
|
||||
default: boolean;
|
||||
};
|
||||
typeable: {
|
||||
type: BooleanConstructor;
|
||||
required: false;
|
||||
default: boolean;
|
||||
};
|
||||
/**
|
||||
* If set, lower-level views won't show
|
||||
*/
|
||||
minimumView: {
|
||||
type: PropType<"time" | "day" | "month" | "year">;
|
||||
required: false;
|
||||
default: string;
|
||||
validate: (v: unknown) => boolean;
|
||||
};
|
||||
}, {
|
||||
blur: () => void;
|
||||
focus: () => void;
|
||||
click: () => boolean;
|
||||
input: import("vue").Ref<string>;
|
||||
inputRef: import("vue").Ref<HTMLInputElement | null>;
|
||||
pageDate: import("vue").Ref<{
|
||||
toString: () => string;
|
||||
toDateString: () => string;
|
||||
toTimeString: () => string;
|
||||
toLocaleString: {
|
||||
(): string;
|
||||
(locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string;
|
||||
(locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string;
|
||||
};
|
||||
toLocaleDateString: {
|
||||
(): string;
|
||||
(locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string;
|
||||
(locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string;
|
||||
};
|
||||
toLocaleTimeString: {
|
||||
(): string;
|
||||
(locales?: string | string[] | undefined, options?: Intl.DateTimeFormatOptions | undefined): string;
|
||||
(locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions | undefined): string;
|
||||
};
|
||||
valueOf: () => number;
|
||||
getTime: () => number;
|
||||
getFullYear: () => number;
|
||||
getUTCFullYear: () => number;
|
||||
getMonth: () => number;
|
||||
getUTCMonth: () => number;
|
||||
getDate: () => number;
|
||||
getUTCDate: () => number;
|
||||
getDay: () => number;
|
||||
getUTCDay: () => number;
|
||||
getHours: () => number;
|
||||
getUTCHours: () => number;
|
||||
getMinutes: () => number;
|
||||
getUTCMinutes: () => number;
|
||||
getSeconds: () => number;
|
||||
getUTCSeconds: () => number;
|
||||
getMilliseconds: () => number;
|
||||
getUTCMilliseconds: () => number;
|
||||
getTimezoneOffset: () => number;
|
||||
setTime: (time: number) => number;
|
||||
setMilliseconds: (ms: number) => number;
|
||||
setUTCMilliseconds: (ms: number) => number;
|
||||
setSeconds: (sec: number, ms?: number | undefined) => number;
|
||||
setUTCSeconds: (sec: number, ms?: number | undefined) => number;
|
||||
setMinutes: (min: number, sec?: number | undefined, ms?: number | undefined) => number;
|
||||
setUTCMinutes: (min: number, sec?: number | undefined, ms?: number | undefined) => number;
|
||||
setHours: (hours: number, min?: number | undefined, sec?: number | undefined, ms?: number | undefined) => number;
|
||||
setUTCHours: (hours: number, min?: number | undefined, sec?: number | undefined, ms?: number | undefined) => number;
|
||||
setDate: (date: number) => number;
|
||||
setUTCDate: (date: number) => number;
|
||||
setMonth: (month: number, date?: number | undefined) => number;
|
||||
setUTCMonth: (month: number, date?: number | undefined) => number;
|
||||
setFullYear: (year: number, month?: number | undefined, date?: number | undefined) => number;
|
||||
setUTCFullYear: (year: number, month?: number | undefined, date?: number | undefined) => number;
|
||||
toUTCString: () => string;
|
||||
toISOString: () => string;
|
||||
toJSON: (key?: any) => string;
|
||||
[Symbol.toPrimitive]: {
|
||||
(hint: "default"): string;
|
||||
(hint: "string"): string;
|
||||
(hint: "number"): number;
|
||||
(hint: string): string | number;
|
||||
};
|
||||
}>;
|
||||
renderView: (view?: "time" | "day" | "month" | "year" | "none") => void;
|
||||
updatePageDate: (view: 'year' | 'month' | 'day', newPageDate: Date) => void;
|
||||
selectYear: (date: Date) => void;
|
||||
selectMonth: (date: Date) => void;
|
||||
selectDay: (date: Date) => void;
|
||||
selectTime: (date: Date) => void;
|
||||
keyUp: (event: KeyboardEvent) => void;
|
||||
viewShown: import("vue").Ref<"time" | "day" | "month" | "year" | "none">;
|
||||
goBackFromTimepicker: () => "day" | null;
|
||||
clearModelValue: () => void;
|
||||
initialView: import("vue").ComputedRef<"time" | "day" | "month" | "year">;
|
||||
log: (e: any) => void;
|
||||
variables: (object: Record<string, string> | undefined) => {
|
||||
[k: string]: string;
|
||||
};
|
||||
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||
'update:modelValue': (value: Date | null | undefined) => boolean;
|
||||
decadePageChanged: (pageDate: Date) => true;
|
||||
yearPageChanged: (pageDate: Date) => true;
|
||||
monthPageChanged: (pageDate: Date) => true;
|
||||
opened: () => true;
|
||||
closed: () => true;
|
||||
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
||||
placeholder: {
|
||||
type: StringConstructor;
|
||||
default: string;
|
||||
};
|
||||
/**
|
||||
* `v-model` for selected date
|
||||
*/
|
||||
modelValue: {
|
||||
type: PropType<Date>;
|
||||
required: false;
|
||||
};
|
||||
/**
|
||||
* Dates not available for picking
|
||||
*/
|
||||
disabledDates: {
|
||||
type: PropType<{
|
||||
dates?: Date[] | undefined;
|
||||
predicate?: ((currentDate: Date) => boolean) | undefined;
|
||||
}>;
|
||||
required: false;
|
||||
};
|
||||
allowOutsideInterval: {
|
||||
type: BooleanConstructor;
|
||||
required: false;
|
||||
default: boolean;
|
||||
};
|
||||
/**
|
||||
* Time not available for picking
|
||||
*/
|
||||
disabledTime: {
|
||||
type: PropType<{
|
||||
dates?: Date[] | undefined;
|
||||
predicate?: ((currentDate: Date) => boolean) | undefined;
|
||||
}>;
|
||||
required: false;
|
||||
};
|
||||
/**
|
||||
* Upper limit for available dates for picking
|
||||
*/
|
||||
upperLimit: {
|
||||
type: PropType<Date>;
|
||||
required: false;
|
||||
};
|
||||
/**
|
||||
* Lower limit for available dates for picking
|
||||
*/
|
||||
lowerLimit: {
|
||||
type: PropType<Date>;
|
||||
required: false;
|
||||
};
|
||||
/**
|
||||
* View on which the date picker should open. Can be either `year`, `month`, `day` or `time`
|
||||
*/
|
||||
startingView: {
|
||||
type: PropType<"time" | "day" | "month" | "year">;
|
||||
required: false;
|
||||
default: string;
|
||||
validate: (v: unknown) => boolean;
|
||||
};
|
||||
/**
|
||||
* Date which should be the "center" of the initial view.
|
||||
* When an empty datepicker opens, it focuses on the month/year
|
||||
* that contains this date
|
||||
*/
|
||||
startingViewDate: {
|
||||
type: PropType<Date>;
|
||||
required: false;
|
||||
default: () => Date;
|
||||
};
|
||||
/**
|
||||
* `date-fns`-type formatting for a month view heading
|
||||
*/
|
||||
dayPickerHeadingFormat: {
|
||||
type: StringConstructor;
|
||||
required: false;
|
||||
default: string;
|
||||
};
|
||||
/**
|
||||
* `date-fns`-type formatting for the month picker view
|
||||
*/
|
||||
monthListFormat: {
|
||||
type: StringConstructor;
|
||||
required: false;
|
||||
default: string;
|
||||
};
|
||||
/**
|
||||
* `date-fns`-type formatting for a line of weekdays on day view
|
||||
*/
|
||||
weekdayFormat: {
|
||||
type: StringConstructor;
|
||||
required: false;
|
||||
default: string;
|
||||
};
|
||||
/**
|
||||
* `date-fns`-type formatting for the day picker view
|
||||
*/
|
||||
dayFormat: {
|
||||
type: StringConstructor;
|
||||
required: false;
|
||||
default: string;
|
||||
};
|
||||
/**
|
||||
* `date-fns`-type format in which the string in the input should be both
|
||||
* parsed and displayed
|
||||
*/
|
||||
inputFormat: {
|
||||
type: StringConstructor;
|
||||
required: false;
|
||||
default: string;
|
||||
};
|
||||
/**
|
||||
* [`date-fns` locale object](https://date-fns.org/v2.16.1/docs/I18n#usage).
|
||||
* Used in string formatting (see default `dayPickerHeadingFormat`)
|
||||
*/
|
||||
locale: {
|
||||
type: PropType<Locale>;
|
||||
required: false;
|
||||
};
|
||||
/**
|
||||
* Day on which the week should start.
|
||||
*
|
||||
* Number from 0 to 6, where 0 is Sunday and 6 is Saturday.
|
||||
* Week starts with a Monday (1) by default
|
||||
*/
|
||||
weekStartsOn: {
|
||||
type: PropType<0 | 1 | 2 | 3 | 4 | 5 | 6>;
|
||||
required: false;
|
||||
default: number;
|
||||
validator: (value: any) => boolean;
|
||||
};
|
||||
/**
|
||||
* Disables datepicker and prevents it's opening
|
||||
*/
|
||||
disabled: {
|
||||
type: BooleanConstructor;
|
||||
required: false;
|
||||
default: boolean;
|
||||
};
|
||||
/**
|
||||
* Clears selected date
|
||||
*/
|
||||
clearable: {
|
||||
type: BooleanConstructor;
|
||||
required: false;
|
||||
default: boolean;
|
||||
};
|
||||
typeable: {
|
||||
type: BooleanConstructor;
|
||||
required: false;
|
||||
default: boolean;
|
||||
};
|
||||
/**
|
||||
* If set, lower-level views won't show
|
||||
*/
|
||||
minimumView: {
|
||||
type: PropType<"time" | "day" | "month" | "year">;
|
||||
required: false;
|
||||
default: string;
|
||||
validate: (v: unknown) => boolean;
|
||||
};
|
||||
}>> & {
|
||||
"onUpdate:modelValue"?: ((value: Date | null | undefined) => any) | undefined;
|
||||
onDecadePageChanged?: ((pageDate: Date) => any) | undefined;
|
||||
onYearPageChanged?: ((pageDate: Date) => any) | undefined;
|
||||
onMonthPageChanged?: ((pageDate: Date) => any) | undefined;
|
||||
onOpened?: (() => any) | undefined;
|
||||
onClosed?: (() => any) | undefined;
|
||||
}, {
|
||||
placeholder: string;
|
||||
allowOutsideInterval: boolean;
|
||||
startingView: "time" | "day" | "month" | "year";
|
||||
startingViewDate: Date;
|
||||
dayPickerHeadingFormat: string;
|
||||
monthListFormat: string;
|
||||
weekdayFormat: string;
|
||||
dayFormat: string;
|
||||
inputFormat: string;
|
||||
weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
|
||||
disabled: boolean;
|
||||
clearable: boolean;
|
||||
typeable: boolean;
|
||||
minimumView: "time" | "day" | "month" | "year";
|
||||
}, {}>;
|
||||
export default _sfc_main;
|
||||
134
node_modules/vue3-datepicker/dist/types/DayPicker.vue.d.ts
generated
vendored
Normal file
134
node_modules/vue3-datepicker/dist/types/DayPicker.vue.d.ts
generated
vendored
Normal file
|
|
@ -0,0 +1,134 @@
|
|||
import { PropType } from 'vue';
|
||||
import { Item } from './PickerPopup.vue';
|
||||
declare const _sfc_main: import("vue").DefineComponent<{
|
||||
selected: {
|
||||
type: PropType<Date>;
|
||||
required: false;
|
||||
};
|
||||
pageDate: {
|
||||
type: PropType<Date>;
|
||||
required: true;
|
||||
};
|
||||
format: {
|
||||
type: StringConstructor;
|
||||
required: false;
|
||||
default: string;
|
||||
};
|
||||
headingFormat: {
|
||||
type: StringConstructor;
|
||||
required: false;
|
||||
default: string;
|
||||
};
|
||||
weekdayFormat: {
|
||||
type: StringConstructor;
|
||||
required: false;
|
||||
default: string;
|
||||
};
|
||||
locale: {
|
||||
type: PropType<Locale>;
|
||||
required: false;
|
||||
};
|
||||
weekStartsOn: {
|
||||
type: PropType<0 | 1 | 2 | 3 | 4 | 5 | 6>;
|
||||
required: false;
|
||||
default: number;
|
||||
validator: (i: unknown) => boolean;
|
||||
};
|
||||
lowerLimit: {
|
||||
type: PropType<Date>;
|
||||
required: false;
|
||||
};
|
||||
upperLimit: {
|
||||
type: PropType<Date>;
|
||||
required: false;
|
||||
};
|
||||
disabledDates: {
|
||||
type: PropType<{
|
||||
dates?: Date[] | undefined;
|
||||
predicate?: ((target: Date) => boolean) | undefined;
|
||||
}>;
|
||||
required: false;
|
||||
};
|
||||
allowOutsideInterval: {
|
||||
type: BooleanConstructor;
|
||||
required: false;
|
||||
default: boolean;
|
||||
};
|
||||
}, {
|
||||
weekDays: import("vue").ComputedRef<string[]>;
|
||||
days: import("vue").ComputedRef<Item[]>;
|
||||
heading: import("vue").ComputedRef<string>;
|
||||
leftDisabled: import("vue").ComputedRef<boolean | undefined>;
|
||||
rightDisabled: import("vue").ComputedRef<boolean | undefined>;
|
||||
previousPage: () => void;
|
||||
nextPage: () => void;
|
||||
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||
'update:pageDate': (date: Date) => boolean;
|
||||
select: (date: Date) => boolean;
|
||||
back: () => true;
|
||||
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
||||
selected: {
|
||||
type: PropType<Date>;
|
||||
required: false;
|
||||
};
|
||||
pageDate: {
|
||||
type: PropType<Date>;
|
||||
required: true;
|
||||
};
|
||||
format: {
|
||||
type: StringConstructor;
|
||||
required: false;
|
||||
default: string;
|
||||
};
|
||||
headingFormat: {
|
||||
type: StringConstructor;
|
||||
required: false;
|
||||
default: string;
|
||||
};
|
||||
weekdayFormat: {
|
||||
type: StringConstructor;
|
||||
required: false;
|
||||
default: string;
|
||||
};
|
||||
locale: {
|
||||
type: PropType<Locale>;
|
||||
required: false;
|
||||
};
|
||||
weekStartsOn: {
|
||||
type: PropType<0 | 1 | 2 | 3 | 4 | 5 | 6>;
|
||||
required: false;
|
||||
default: number;
|
||||
validator: (i: unknown) => boolean;
|
||||
};
|
||||
lowerLimit: {
|
||||
type: PropType<Date>;
|
||||
required: false;
|
||||
};
|
||||
upperLimit: {
|
||||
type: PropType<Date>;
|
||||
required: false;
|
||||
};
|
||||
disabledDates: {
|
||||
type: PropType<{
|
||||
dates?: Date[] | undefined;
|
||||
predicate?: ((target: Date) => boolean) | undefined;
|
||||
}>;
|
||||
required: false;
|
||||
};
|
||||
allowOutsideInterval: {
|
||||
type: BooleanConstructor;
|
||||
required: false;
|
||||
default: boolean;
|
||||
};
|
||||
}>> & {
|
||||
"onUpdate:pageDate"?: ((date: Date) => any) | undefined;
|
||||
onSelect?: ((date: Date) => any) | undefined;
|
||||
onBack?: (() => any) | undefined;
|
||||
}, {
|
||||
allowOutsideInterval: boolean;
|
||||
weekdayFormat: string;
|
||||
weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
|
||||
format: string;
|
||||
headingFormat: string;
|
||||
}, {}>;
|
||||
export default _sfc_main;
|
||||
79
node_modules/vue3-datepicker/dist/types/MonthPicker.vue.d.ts
generated
vendored
Normal file
79
node_modules/vue3-datepicker/dist/types/MonthPicker.vue.d.ts
generated
vendored
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
import { PropType } from 'vue';
|
||||
import { Item } from './PickerPopup.vue';
|
||||
declare const _sfc_main: import("vue").DefineComponent<{
|
||||
/**
|
||||
* Currently selected date, needed for highlighting
|
||||
*/
|
||||
selected: {
|
||||
type: PropType<Date>;
|
||||
required: false;
|
||||
};
|
||||
pageDate: {
|
||||
type: PropType<Date>;
|
||||
required: true;
|
||||
};
|
||||
format: {
|
||||
type: StringConstructor;
|
||||
required: false;
|
||||
default: string;
|
||||
};
|
||||
locale: {
|
||||
type: PropType<Locale>;
|
||||
required: false;
|
||||
};
|
||||
lowerLimit: {
|
||||
type: PropType<Date>;
|
||||
required: false;
|
||||
};
|
||||
upperLimit: {
|
||||
type: PropType<Date>;
|
||||
required: false;
|
||||
};
|
||||
}, {
|
||||
months: import("vue").ComputedRef<Item[]>;
|
||||
heading: import("vue").ComputedRef<number>;
|
||||
leftDisabled: import("vue").ComputedRef<boolean | undefined>;
|
||||
rightDisabled: import("vue").ComputedRef<boolean | undefined>;
|
||||
previousPage: () => void;
|
||||
nextPage: () => void;
|
||||
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||
'update:pageDate': (date: Date) => boolean;
|
||||
select: (date: Date) => boolean;
|
||||
back: () => true;
|
||||
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
||||
/**
|
||||
* Currently selected date, needed for highlighting
|
||||
*/
|
||||
selected: {
|
||||
type: PropType<Date>;
|
||||
required: false;
|
||||
};
|
||||
pageDate: {
|
||||
type: PropType<Date>;
|
||||
required: true;
|
||||
};
|
||||
format: {
|
||||
type: StringConstructor;
|
||||
required: false;
|
||||
default: string;
|
||||
};
|
||||
locale: {
|
||||
type: PropType<Locale>;
|
||||
required: false;
|
||||
};
|
||||
lowerLimit: {
|
||||
type: PropType<Date>;
|
||||
required: false;
|
||||
};
|
||||
upperLimit: {
|
||||
type: PropType<Date>;
|
||||
required: false;
|
||||
};
|
||||
}>> & {
|
||||
"onUpdate:pageDate"?: ((date: Date) => any) | undefined;
|
||||
onSelect?: ((date: Date) => any) | undefined;
|
||||
onBack?: (() => any) | undefined;
|
||||
}, {
|
||||
format: string;
|
||||
}, {}>;
|
||||
export default _sfc_main;
|
||||
80
node_modules/vue3-datepicker/dist/types/PickerPopup.vue.d.ts
generated
vendored
Normal file
80
node_modules/vue3-datepicker/dist/types/PickerPopup.vue.d.ts
generated
vendored
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
import { PropType } from 'vue';
|
||||
export interface Item {
|
||||
key: string;
|
||||
value: Date;
|
||||
display: number | string;
|
||||
disabled: boolean;
|
||||
selected: boolean;
|
||||
current?: boolean;
|
||||
}
|
||||
export type ViewMode = 'year' | 'month' | 'day' | 'time' | 'custom';
|
||||
declare const _sfc_main: import("vue").DefineComponent<{
|
||||
headingClickable: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
leftDisabled: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
rightDisabled: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
columnCount: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
items: {
|
||||
type: PropType<Item[]>;
|
||||
default: () => Item[];
|
||||
};
|
||||
viewMode: {
|
||||
type: PropType<ViewMode>;
|
||||
required: true;
|
||||
validate: (x: unknown) => boolean;
|
||||
};
|
||||
}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||
elementClick: (value: Date) => boolean;
|
||||
left: () => true;
|
||||
right: () => true;
|
||||
heading: () => true;
|
||||
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
||||
headingClickable: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
leftDisabled: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
rightDisabled: {
|
||||
type: BooleanConstructor;
|
||||
default: boolean;
|
||||
};
|
||||
columnCount: {
|
||||
type: NumberConstructor;
|
||||
default: number;
|
||||
};
|
||||
items: {
|
||||
type: PropType<Item[]>;
|
||||
default: () => Item[];
|
||||
};
|
||||
viewMode: {
|
||||
type: PropType<ViewMode>;
|
||||
required: true;
|
||||
validate: (x: unknown) => boolean;
|
||||
};
|
||||
}>> & {
|
||||
onHeading?: (() => any) | undefined;
|
||||
onElementClick?: ((value: Date) => any) | undefined;
|
||||
onLeft?: (() => any) | undefined;
|
||||
onRight?: (() => any) | undefined;
|
||||
}, {
|
||||
leftDisabled: boolean;
|
||||
rightDisabled: boolean;
|
||||
headingClickable: boolean;
|
||||
columnCount: number;
|
||||
items: Item[];
|
||||
}, {}>;
|
||||
export default _sfc_main;
|
||||
66
node_modules/vue3-datepicker/dist/types/Timepicker.vue.d.ts
generated
vendored
Normal file
66
node_modules/vue3-datepicker/dist/types/Timepicker.vue.d.ts
generated
vendored
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
import { ComputedRef, Ref, PropType } from 'vue';
|
||||
interface Item {
|
||||
value: number;
|
||||
date: Date;
|
||||
selected: boolean | undefined;
|
||||
ref: Ref<null | HTMLElement>;
|
||||
}
|
||||
declare const _sfc_main: import("vue").DefineComponent<{
|
||||
selected: {
|
||||
type: PropType<Date>;
|
||||
required: false;
|
||||
};
|
||||
pageDate: {
|
||||
type: PropType<Date>;
|
||||
required: true;
|
||||
};
|
||||
visible: {
|
||||
type: BooleanConstructor;
|
||||
required: true;
|
||||
};
|
||||
disabledTime: {
|
||||
type: PropType<{
|
||||
dates?: Date[] | undefined;
|
||||
predicate?: ((target: Date) => boolean) | undefined;
|
||||
}>;
|
||||
required: false;
|
||||
};
|
||||
}, {
|
||||
hoursListRef: Ref<HTMLElement | null>;
|
||||
minutesListRef: Ref<HTMLElement | null>;
|
||||
hours: Ref<number>;
|
||||
minutes: Ref<number>;
|
||||
hoursList: ComputedRef<Item[]>;
|
||||
minutesList: ComputedRef<Item[]>;
|
||||
padStartZero: (item: number) => string;
|
||||
selectMinutes: (item: Item) => void;
|
||||
isEnabled: (target: Date) => boolean;
|
||||
scroll: () => void;
|
||||
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||
select: (date: Date) => boolean;
|
||||
back: () => true;
|
||||
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
||||
selected: {
|
||||
type: PropType<Date>;
|
||||
required: false;
|
||||
};
|
||||
pageDate: {
|
||||
type: PropType<Date>;
|
||||
required: true;
|
||||
};
|
||||
visible: {
|
||||
type: BooleanConstructor;
|
||||
required: true;
|
||||
};
|
||||
disabledTime: {
|
||||
type: PropType<{
|
||||
dates?: Date[] | undefined;
|
||||
predicate?: ((target: Date) => boolean) | undefined;
|
||||
}>;
|
||||
required: false;
|
||||
};
|
||||
}>> & {
|
||||
onSelect?: ((date: Date) => any) | undefined;
|
||||
onBack?: (() => any) | undefined;
|
||||
}, {}, {}>;
|
||||
export default _sfc_main;
|
||||
51
node_modules/vue3-datepicker/dist/types/YearPicker.vue.d.ts
generated
vendored
Normal file
51
node_modules/vue3-datepicker/dist/types/YearPicker.vue.d.ts
generated
vendored
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
import { PropType } from 'vue';
|
||||
import { Item } from './PickerPopup.vue';
|
||||
declare const _sfc_main: import("vue").DefineComponent<{
|
||||
selected: {
|
||||
type: PropType<Date>;
|
||||
required: false;
|
||||
};
|
||||
pageDate: {
|
||||
type: PropType<Date>;
|
||||
required: true;
|
||||
};
|
||||
lowerLimit: {
|
||||
type: PropType<Date>;
|
||||
required: false;
|
||||
};
|
||||
upperLimit: {
|
||||
type: PropType<Date>;
|
||||
required: false;
|
||||
};
|
||||
}, {
|
||||
years: import("vue").ComputedRef<Item[]>;
|
||||
heading: import("vue").ComputedRef<string>;
|
||||
leftDisabled: import("vue").ComputedRef<boolean | undefined>;
|
||||
rightDisabled: import("vue").ComputedRef<boolean | undefined>;
|
||||
previousPage: () => void;
|
||||
nextPage: () => void;
|
||||
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||
'update:pageDate': (date: Date) => boolean;
|
||||
select: (date: Date) => boolean;
|
||||
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
||||
selected: {
|
||||
type: PropType<Date>;
|
||||
required: false;
|
||||
};
|
||||
pageDate: {
|
||||
type: PropType<Date>;
|
||||
required: true;
|
||||
};
|
||||
lowerLimit: {
|
||||
type: PropType<Date>;
|
||||
required: false;
|
||||
};
|
||||
upperLimit: {
|
||||
type: PropType<Date>;
|
||||
required: false;
|
||||
};
|
||||
}>> & {
|
||||
"onUpdate:pageDate"?: ((date: Date) => any) | undefined;
|
||||
onSelect?: ((date: Date) => any) | undefined;
|
||||
}, {}, {}>;
|
||||
export default _sfc_main;
|
||||
1
node_modules/vue3-datepicker/dist/vue3-datepicker.css
generated
vendored
Normal file
1
node_modules/vue3-datepicker/dist/vue3-datepicker.css
generated
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
.v3dp__popout[data-v-65eb861b]{z-index:10;position:absolute;text-align:center;width:17.5em;background-color:var(--popout-bg-color);box-shadow:var(--box-shadow);border-radius:var(--border-radius);padding:8px 0 1em;color:var(--text-color)}.v3dp__popout *[data-v-65eb861b]{color:inherit;font-size:inherit;font-weight:inherit}.v3dp__popout[data-v-65eb861b] button{background:none;border:none;outline:none}.v3dp__popout[data-v-65eb861b] button:not(:disabled){cursor:pointer}.v3dp__heading[data-v-65eb861b]{width:100%;display:flex;height:var(--heading-size);line-height:var(--heading-size);font-weight:var(--heading-weight)}.v3dp__heading__button[data-v-65eb861b]{background:none;border:none;padding:0;display:flex;justify-content:center;align-items:center;width:var(--heading-size)}button.v3dp__heading__center[data-v-65eb861b]:hover,.v3dp__heading__button[data-v-65eb861b]:not(:disabled):hover{background-color:var(--heading-hover-color)}.v3dp__heading__center[data-v-65eb861b]{flex:1}.v3dp__heading__icon[data-v-65eb861b]{height:12px;stroke:var(--arrow-color)}.v3dp__heading__button:disabled .v3dp__heading__icon[data-v-65eb861b]{stroke:var(--elem-disabled-color)}.v3dp__subheading[data-v-65eb861b],.v3dp__elements[data-v-65eb861b]{display:grid;grid-template-columns:var(--popout-column-definition);font-size:var(--elem-font-size)}.v3dp__subheading[data-v-65eb861b]{margin-top:1em}.v3dp__divider[data-v-65eb861b]{border:1px solid var(--divider-color);border-radius:3px}.v3dp__elements[data-v-65eb861b] button:disabled{color:var(--elem-disabled-color)}.v3dp__elements[data-v-65eb861b] button{padding:.3em .6em}.v3dp__elements[data-v-65eb861b] button span{display:block;line-height:1.9em;height:1.8em;border-radius:var(--elem-border-radius)}.v3dp__elements[data-v-65eb861b] button:not(:disabled):hover span{background-color:var(--elem-hover-bg-color);color:var(--elem-hover-color)}.v3dp__elements[data-v-65eb861b] button.selected span{background-color:var(--elem-selected-bg-color);color:var(--elem-selected-color)}.v3dp__elements[data-v-65eb861b] button.current span{font-weight:var(--elem-current-font-weight);outline:1px solid var(--elem-current-outline-color)}.v3dp__column[data-v-81ac698d]{display:flex;flex-direction:column;overflow-y:auto;height:190px}.v3dp__datepicker{--popout-bg-color: var(--vdp-bg-color, #fff);--box-shadow: var( --vdp-box-shadow, 0 4px 10px 0 rgba(128, 144, 160, .1), 0 0 1px 0 rgba(128, 144, 160, .81) );--text-color: var(--vdp-text-color, #000000);--border-radius: var(--vdp-border-radius, 3px);--heading-size: var(--vdp-heading-size, 2.5em);--heading-weight: var(--vdp-heading-weight, bold);--heading-hover-color: var(--vdp-heading-hover-color, #eeeeee);--arrow-color: var(--vdp-arrow-color, currentColor);--elem-color: var(--vdp-elem-color, currentColor);--elem-disabled-color: var(--vdp-disabled-color, #d5d9e0);--elem-hover-color: var(--vdp-hover-color, #fff);--elem-hover-bg-color: var(--vdp-hover-bg-color, #0baf74);--elem-selected-color: var(--vdp-selected-color, #fff);--elem-selected-bg-color: var(--vdp-selected-bg-color, #0baf74);--elem-current-outline-color: var(--vdp-current-date-outline-color, #888);--elem-current-font-weight: var(--vdp-current-date-font-weight, bold);--elem-font-size: var(--vdp-elem-font-size, .8em);--elem-border-radius: var(--vdp-elem-border-radius, 3px);--divider-color: var(--vdp-divider-color, var(--elem-disabled-color));position:relative}.v3dp__clearable{display:inline;position:relative;left:-15px;cursor:pointer}
|
||||
965
node_modules/vue3-datepicker/dist/vue3-datepicker.mjs
generated
vendored
Normal file
965
node_modules/vue3-datepicker/dist/vue3-datepicker.mjs
generated
vendored
Normal file
|
|
@ -0,0 +1,965 @@
|
|||
import { defineComponent as B, openBlock as h, createElementBlock as S, normalizeClass as R, normalizeStyle as re, withModifiers as C, createElementVNode as m, renderSlot as F, createBlock as N, resolveDynamicComponent as pe, withCtx as M, Fragment as H, createCommentVNode as ge, renderList as Z, toDisplayString as O, pushScopeId as ve, popScopeId as ye, computed as u, resolveComponent as q, createTextVNode as K, ref as $, watch as ne, nextTick as be, watchEffect as X, withDirectives as P, mergeProps as he, vModelText as De, vShow as I, createVNode as A } from "vue";
|
||||
import { isValid as w, startOfDecade as ke, endOfDecade as we, eachYearOfInterval as Le, getYear as L, getDecade as U, isBefore as j, isAfter as Y, subYears as de, addYears as ue, startOfYear as $e, endOfYear as Se, format as z, eachMonthOfInterval as _e, isSameMonth as ee, isSameYear as ie, startOfMonth as ce, endOfMonth as me, startOfWeek as Ve, endOfWeek as Oe, setDay as qe, eachDayOfInterval as Ce, isSameDay as x, isWithinInterval as Me, startOfDay as Pe, endOfDay as Fe, subMonths as Be, addMonths as Te, set as le, isSameHour as Ee, isSameMinute as Ie, parse as oe, max as Re, min as He } from "date-fns";
|
||||
const je = ["year", "month", "day", "time", "custom"], Ye = B({
|
||||
emits: {
|
||||
elementClick: (e) => w(e),
|
||||
left: () => !0,
|
||||
right: () => !0,
|
||||
heading: () => !0
|
||||
},
|
||||
props: {
|
||||
headingClickable: {
|
||||
type: Boolean,
|
||||
default: !1
|
||||
},
|
||||
leftDisabled: {
|
||||
type: Boolean,
|
||||
default: !1
|
||||
},
|
||||
rightDisabled: {
|
||||
type: Boolean,
|
||||
default: !1
|
||||
},
|
||||
columnCount: {
|
||||
type: Number,
|
||||
default: 7
|
||||
},
|
||||
items: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
viewMode: {
|
||||
type: String,
|
||||
required: !0,
|
||||
validate: (e) => typeof e == "string" && je.includes(e)
|
||||
}
|
||||
}
|
||||
});
|
||||
const T = (e, t) => {
|
||||
const r = e.__vccOpts || e;
|
||||
for (const [l, o] of t)
|
||||
r[l] = o;
|
||||
return r;
|
||||
}, te = (e) => (ve("data-v-65eb861b"), e = e(), ye(), e), Ne = { class: "v3dp__heading" }, Ae = ["disabled"], Ue = /* @__PURE__ */ te(() => /* @__PURE__ */ m("svg", {
|
||||
class: "v3dp__heading__icon",
|
||||
xmlns: "http://www.w3.org/2000/svg",
|
||||
viewBox: "0 0 6 8"
|
||||
}, [
|
||||
/* @__PURE__ */ m("g", {
|
||||
fill: "none",
|
||||
"fill-rule": "evenodd"
|
||||
}, [
|
||||
/* @__PURE__ */ m("path", {
|
||||
stroke: "none",
|
||||
d: "M-9 16V-8h24v24z"
|
||||
}),
|
||||
/* @__PURE__ */ m("path", {
|
||||
"stroke-linecap": "round",
|
||||
"stroke-linejoin": "round",
|
||||
d: "M5 0L1 4l4 4"
|
||||
})
|
||||
])
|
||||
], -1)), We = ["disabled"], Ze = /* @__PURE__ */ te(() => /* @__PURE__ */ m("svg", {
|
||||
class: "v3dp__heading__icon",
|
||||
xmlns: "http://www.w3.org/2000/svg",
|
||||
viewBox: "0 0 6 8"
|
||||
}, [
|
||||
/* @__PURE__ */ m("g", {
|
||||
fill: "none",
|
||||
"fill-rule": "evenodd"
|
||||
}, [
|
||||
/* @__PURE__ */ m("path", {
|
||||
stroke: "none",
|
||||
d: "M15-8v24H-9V-8z"
|
||||
}),
|
||||
/* @__PURE__ */ m("path", {
|
||||
"stroke-linecap": "round",
|
||||
"stroke-linejoin": "round",
|
||||
d: "M1 8l4-4-4-4"
|
||||
})
|
||||
])
|
||||
], -1)), ze = { class: "v3dp__body" }, Ke = { class: "v3dp__subheading" }, Ge = /* @__PURE__ */ te(() => /* @__PURE__ */ m("hr", { class: "v3dp__divider" }, null, -1)), Je = { class: "v3dp__elements" }, Qe = ["disabled", "onClick"];
|
||||
function Xe(e, t, r, l, o, p) {
|
||||
return h(), S("div", {
|
||||
class: R(["v3dp__popout", `v3dp__popout-${e.viewMode}`]),
|
||||
style: re({ ["--popout-column-definition"]: `repeat(${e.columnCount}, 1fr)` }),
|
||||
onMousedown: t[3] || (t[3] = C(() => {
|
||||
}, ["prevent"]))
|
||||
}, [
|
||||
m("div", Ne, [
|
||||
m("button", {
|
||||
class: "v3dp__heading__button v3dp__heading__button__left",
|
||||
disabled: e.leftDisabled,
|
||||
onClick: t[0] || (t[0] = C((n) => e.$emit("left"), ["stop", "prevent"]))
|
||||
}, [
|
||||
F(e.$slots, "arrow-left", {}, () => [
|
||||
Ue
|
||||
], !0)
|
||||
], 8, Ae),
|
||||
(h(), N(pe(e.headingClickable ? "button" : "span"), {
|
||||
class: "v3dp__heading__center",
|
||||
onClick: t[1] || (t[1] = C((n) => e.$emit("heading"), ["stop", "prevent"]))
|
||||
}, {
|
||||
default: M(() => [
|
||||
F(e.$slots, "heading", {}, void 0, !0)
|
||||
]),
|
||||
_: 3
|
||||
})),
|
||||
m("button", {
|
||||
class: "v3dp__heading__button v3dp__heading__button__right",
|
||||
disabled: e.rightDisabled,
|
||||
onClick: t[2] || (t[2] = C((n) => e.$emit("right"), ["stop", "prevent"]))
|
||||
}, [
|
||||
F(e.$slots, "arrow-right", {}, () => [
|
||||
Ze
|
||||
], !0)
|
||||
], 8, We)
|
||||
]),
|
||||
m("div", ze, [
|
||||
"subheading" in e.$slots ? (h(), S(H, { key: 0 }, [
|
||||
m("div", Ke, [
|
||||
F(e.$slots, "subheading", {}, void 0, !0)
|
||||
]),
|
||||
Ge
|
||||
], 64)) : ge("", !0),
|
||||
m("div", Je, [
|
||||
F(e.$slots, "body", {}, () => [
|
||||
(h(!0), S(H, null, Z(e.items, (n) => (h(), S("button", {
|
||||
key: n.key,
|
||||
disabled: n.disabled,
|
||||
class: R([
|
||||
{
|
||||
selected: n.selected,
|
||||
current: n.current
|
||||
},
|
||||
`v3dp__element__button__${e.viewMode}`
|
||||
]),
|
||||
onClick: C((a) => e.$emit("elementClick", n.value), ["stop", "prevent"])
|
||||
}, [
|
||||
m("span", null, O(n.display), 1)
|
||||
], 10, Qe))), 128))
|
||||
], !0)
|
||||
])
|
||||
])
|
||||
], 38);
|
||||
}
|
||||
const G = /* @__PURE__ */ T(Ye, [["render", Xe], ["__scopeId", "data-v-65eb861b"]]), xe = B({
|
||||
components: {
|
||||
PickerPopup: G
|
||||
},
|
||||
emits: {
|
||||
"update:pageDate": (e) => w(e),
|
||||
select: (e) => w(e)
|
||||
},
|
||||
props: {
|
||||
selected: {
|
||||
type: Date,
|
||||
required: !1
|
||||
},
|
||||
pageDate: {
|
||||
type: Date,
|
||||
required: !0
|
||||
},
|
||||
lowerLimit: {
|
||||
type: Date,
|
||||
required: !1
|
||||
},
|
||||
upperLimit: {
|
||||
type: Date,
|
||||
required: !1
|
||||
}
|
||||
},
|
||||
setup(e, { emit: t }) {
|
||||
const r = u(() => ke(e.pageDate)), l = u(() => we(e.pageDate)), o = (b, y, i) => !y && !i ? !0 : !(y && L(b) < L(y) || i && L(b) > L(i)), p = u(
|
||||
() => Le({
|
||||
start: r.value,
|
||||
end: l.value
|
||||
}).map(
|
||||
(b) => ({
|
||||
value: b,
|
||||
key: String(L(b)),
|
||||
display: L(b),
|
||||
selected: !!e.selected && L(b) === L(e.selected),
|
||||
disabled: !o(b, e.lowerLimit, e.upperLimit)
|
||||
})
|
||||
)
|
||||
), n = u(() => {
|
||||
const b = L(r.value), y = L(l.value);
|
||||
return `${b} - ${y}`;
|
||||
}), a = u(
|
||||
() => e.lowerLimit && (U(e.lowerLimit) === U(e.pageDate) || j(e.pageDate, e.lowerLimit))
|
||||
), f = u(
|
||||
() => e.upperLimit && (U(e.upperLimit) === U(e.pageDate) || Y(e.pageDate, e.upperLimit))
|
||||
);
|
||||
return {
|
||||
years: p,
|
||||
heading: n,
|
||||
leftDisabled: a,
|
||||
rightDisabled: f,
|
||||
previousPage: () => t("update:pageDate", de(e.pageDate, 10)),
|
||||
nextPage: () => t("update:pageDate", ue(e.pageDate, 10))
|
||||
};
|
||||
}
|
||||
});
|
||||
function et(e, t, r, l, o, p) {
|
||||
const n = q("picker-popup");
|
||||
return h(), N(n, {
|
||||
columnCount: 3,
|
||||
leftDisabled: e.leftDisabled,
|
||||
rightDisabled: e.rightDisabled,
|
||||
items: e.years,
|
||||
viewMode: "year",
|
||||
onLeft: e.previousPage,
|
||||
onRight: e.nextPage,
|
||||
onElementClick: t[0] || (t[0] = (a) => e.$emit("select", a))
|
||||
}, {
|
||||
heading: M(() => [
|
||||
K(O(e.heading), 1)
|
||||
]),
|
||||
_: 1
|
||||
}, 8, ["leftDisabled", "rightDisabled", "items", "onLeft", "onRight"]);
|
||||
}
|
||||
const tt = /* @__PURE__ */ T(xe, [["render", et]]), at = B({
|
||||
components: {
|
||||
PickerPopup: G
|
||||
},
|
||||
emits: {
|
||||
"update:pageDate": (e) => w(e),
|
||||
select: (e) => w(e),
|
||||
back: () => !0
|
||||
},
|
||||
props: {
|
||||
/**
|
||||
* Currently selected date, needed for highlighting
|
||||
*/
|
||||
selected: {
|
||||
type: Date,
|
||||
required: !1
|
||||
},
|
||||
pageDate: {
|
||||
type: Date,
|
||||
required: !0
|
||||
},
|
||||
format: {
|
||||
type: String,
|
||||
required: !1,
|
||||
default: "LLL"
|
||||
},
|
||||
locale: {
|
||||
type: Object,
|
||||
required: !1
|
||||
},
|
||||
lowerLimit: {
|
||||
type: Date,
|
||||
required: !1
|
||||
},
|
||||
upperLimit: {
|
||||
type: Date,
|
||||
required: !1
|
||||
}
|
||||
},
|
||||
setup(e, { emit: t }) {
|
||||
const r = u(() => $e(e.pageDate)), l = u(() => Se(e.pageDate)), o = u(
|
||||
() => (y) => z(y, e.format, {
|
||||
locale: e.locale
|
||||
})
|
||||
), p = (y, i, D) => !i && !D ? !0 : !(i && j(y, ce(i)) || D && Y(y, me(D))), n = u(
|
||||
() => _e({
|
||||
start: r.value,
|
||||
end: l.value
|
||||
}).map(
|
||||
(y) => ({
|
||||
value: y,
|
||||
display: o.value(y),
|
||||
key: o.value(y),
|
||||
selected: !!e.selected && ee(e.selected, y),
|
||||
disabled: !p(y, e.lowerLimit, e.upperLimit)
|
||||
})
|
||||
)
|
||||
), a = u(() => L(r.value)), f = u(
|
||||
() => e.lowerLimit && (ie(e.lowerLimit, e.pageDate) || j(e.pageDate, e.lowerLimit))
|
||||
), _ = u(
|
||||
() => e.upperLimit && (ie(e.upperLimit, e.pageDate) || Y(e.pageDate, e.upperLimit))
|
||||
);
|
||||
return {
|
||||
months: n,
|
||||
heading: a,
|
||||
leftDisabled: f,
|
||||
rightDisabled: _,
|
||||
previousPage: () => t("update:pageDate", de(e.pageDate, 1)),
|
||||
nextPage: () => t("update:pageDate", ue(e.pageDate, 1))
|
||||
};
|
||||
}
|
||||
});
|
||||
function nt(e, t, r, l, o, p) {
|
||||
const n = q("picker-popup");
|
||||
return h(), N(n, {
|
||||
headingClickable: "",
|
||||
columnCount: 3,
|
||||
items: e.months,
|
||||
leftDisabled: e.leftDisabled,
|
||||
rightDisabled: e.rightDisabled,
|
||||
viewMode: "month",
|
||||
onLeft: e.previousPage,
|
||||
onRight: e.nextPage,
|
||||
onHeading: t[0] || (t[0] = (a) => e.$emit("back")),
|
||||
onElementClick: t[1] || (t[1] = (a) => e.$emit("select", a))
|
||||
}, {
|
||||
heading: M(() => [
|
||||
K(O(e.heading), 1)
|
||||
]),
|
||||
_: 1
|
||||
}, 8, ["items", "leftDisabled", "rightDisabled", "onLeft", "onRight"]);
|
||||
}
|
||||
const it = /* @__PURE__ */ T(at, [["render", nt]]), lt = B({
|
||||
components: {
|
||||
PickerPopup: G
|
||||
},
|
||||
emits: {
|
||||
"update:pageDate": (e) => w(e),
|
||||
select: (e) => w(e),
|
||||
back: () => !0
|
||||
},
|
||||
props: {
|
||||
selected: {
|
||||
type: Date,
|
||||
required: !1
|
||||
},
|
||||
pageDate: {
|
||||
type: Date,
|
||||
required: !0
|
||||
},
|
||||
format: {
|
||||
type: String,
|
||||
required: !1,
|
||||
default: "dd"
|
||||
},
|
||||
headingFormat: {
|
||||
type: String,
|
||||
required: !1,
|
||||
default: "LLLL yyyy"
|
||||
},
|
||||
weekdayFormat: {
|
||||
type: String,
|
||||
required: !1,
|
||||
default: "EE"
|
||||
},
|
||||
locale: {
|
||||
type: Object,
|
||||
required: !1
|
||||
},
|
||||
weekStartsOn: {
|
||||
type: Number,
|
||||
required: !1,
|
||||
default: 1,
|
||||
validator: (e) => typeof e == "number" && Number.isInteger(e) && e >= 0 && e <= 6
|
||||
},
|
||||
lowerLimit: {
|
||||
type: Date,
|
||||
required: !1
|
||||
},
|
||||
upperLimit: {
|
||||
type: Date,
|
||||
required: !1
|
||||
},
|
||||
disabledDates: {
|
||||
type: Object,
|
||||
required: !1
|
||||
},
|
||||
allowOutsideInterval: {
|
||||
type: Boolean,
|
||||
required: !1,
|
||||
default: !1
|
||||
}
|
||||
},
|
||||
setup(e, { emit: t }) {
|
||||
const r = u(
|
||||
() => (g) => (v) => z(v, g, {
|
||||
locale: e.locale,
|
||||
weekStartsOn: e.weekStartsOn
|
||||
})
|
||||
), l = u(() => ce(e.pageDate)), o = u(() => me(e.pageDate)), p = u(() => ({
|
||||
start: l.value,
|
||||
end: o.value
|
||||
})), n = u(() => ({
|
||||
start: Ve(l.value, {
|
||||
weekStartsOn: e.weekStartsOn
|
||||
}),
|
||||
end: Oe(o.value, {
|
||||
weekStartsOn: e.weekStartsOn
|
||||
})
|
||||
})), a = u(() => {
|
||||
const g = e.weekStartsOn, v = r.value(e.weekdayFormat);
|
||||
return Array.from(Array(7)).map((c, k) => (g + k) % 7).map(
|
||||
(c) => qe(/* @__PURE__ */ new Date(), c, {
|
||||
weekStartsOn: e.weekStartsOn
|
||||
})
|
||||
).map(v);
|
||||
}), f = (g, v, c, k) => {
|
||||
var E, J;
|
||||
return (E = k == null ? void 0 : k.dates) != null && E.some((ae) => x(g, ae)) || (J = k == null ? void 0 : k.predicate) != null && J.call(k, g) ? !1 : !v && !c ? !0 : !(v && j(g, Pe(v)) || c && Y(g, Fe(c)));
|
||||
}, _ = u(() => {
|
||||
const g = /* @__PURE__ */ new Date(), v = r.value(e.format);
|
||||
return Ce(n.value).map(
|
||||
(c) => ({
|
||||
value: c,
|
||||
display: v(c),
|
||||
selected: !!e.selected && x(e.selected, c),
|
||||
current: x(g, c),
|
||||
disabled: !e.allowOutsideInterval && !Me(c, p.value) || !f(
|
||||
c,
|
||||
e.lowerLimit,
|
||||
e.upperLimit,
|
||||
e.disabledDates
|
||||
),
|
||||
key: r.value("yyyy-MM-dd")(c)
|
||||
})
|
||||
);
|
||||
}), d = u(
|
||||
() => r.value(e.headingFormat)(e.pageDate)
|
||||
), b = u(
|
||||
() => e.lowerLimit && (ee(e.lowerLimit, e.pageDate) || j(e.pageDate, e.lowerLimit))
|
||||
), y = u(
|
||||
() => e.upperLimit && (ee(e.upperLimit, e.pageDate) || Y(e.pageDate, e.upperLimit))
|
||||
);
|
||||
return {
|
||||
weekDays: a,
|
||||
days: _,
|
||||
heading: d,
|
||||
leftDisabled: b,
|
||||
rightDisabled: y,
|
||||
previousPage: () => t("update:pageDate", Be(e.pageDate, 1)),
|
||||
nextPage: () => t("update:pageDate", Te(e.pageDate, 1))
|
||||
};
|
||||
}
|
||||
});
|
||||
function ot(e, t, r, l, o, p) {
|
||||
const n = q("picker-popup");
|
||||
return h(), N(n, {
|
||||
headingClickable: "",
|
||||
leftDisabled: e.leftDisabled,
|
||||
rightDisabled: e.rightDisabled,
|
||||
items: e.days,
|
||||
viewMode: "day",
|
||||
onLeft: e.previousPage,
|
||||
onRight: e.nextPage,
|
||||
onHeading: t[0] || (t[0] = (a) => e.$emit("back")),
|
||||
onElementClick: t[1] || (t[1] = (a) => e.$emit("select", a))
|
||||
}, {
|
||||
heading: M(() => [
|
||||
K(O(e.heading), 1)
|
||||
]),
|
||||
subheading: M(() => [
|
||||
(h(!0), S(H, null, Z(e.weekDays, (a, f) => (h(), S("span", {
|
||||
key: a,
|
||||
class: R(`v3dp__subheading__weekday__${f}`)
|
||||
}, O(a), 3))), 128))
|
||||
]),
|
||||
_: 1
|
||||
}, 8, ["leftDisabled", "rightDisabled", "items", "onLeft", "onRight"]);
|
||||
}
|
||||
const st = /* @__PURE__ */ T(lt, [["render", ot]]);
|
||||
function se(e, t) {
|
||||
const r = e.getBoundingClientRect(), l = {
|
||||
height: e.clientHeight,
|
||||
width: e.clientWidth
|
||||
}, o = t.getBoundingClientRect();
|
||||
if (!(o.top >= r.top && o.bottom <= r.top + l.height)) {
|
||||
const n = o.top - r.top, a = o.bottom - r.bottom;
|
||||
Math.abs(n) < Math.abs(a) ? e.scrollTop += n : e.scrollTop += a;
|
||||
}
|
||||
}
|
||||
const rt = B({
|
||||
components: {
|
||||
PickerPopup: G
|
||||
},
|
||||
emits: {
|
||||
select: (e) => w(e),
|
||||
back: () => !0
|
||||
},
|
||||
props: {
|
||||
selected: {
|
||||
type: Date,
|
||||
required: !1
|
||||
},
|
||||
pageDate: {
|
||||
type: Date,
|
||||
required: !0
|
||||
},
|
||||
visible: {
|
||||
type: Boolean,
|
||||
required: !0
|
||||
},
|
||||
disabledTime: {
|
||||
type: Object,
|
||||
required: !1
|
||||
}
|
||||
},
|
||||
setup(e, { emit: t }) {
|
||||
const r = $(null), l = $(null), o = u(() => e.pageDate ?? e.selected), p = $(o.value.getHours()), n = $(o.value.getMinutes());
|
||||
ne(
|
||||
() => e.selected,
|
||||
(i) => {
|
||||
let D = 0, g = 0;
|
||||
i && (D = i.getHours(), g = i.getMinutes()), p.value = D, n.value = g;
|
||||
}
|
||||
);
|
||||
const a = u(
|
||||
() => [...Array(24).keys()].map(
|
||||
(i) => ({
|
||||
value: i,
|
||||
date: le(new Date(o.value.getTime()), {
|
||||
hours: i,
|
||||
minutes: n.value,
|
||||
seconds: 0
|
||||
}),
|
||||
selected: p.value === i,
|
||||
ref: $(null)
|
||||
})
|
||||
)
|
||||
), f = u(
|
||||
() => [...Array(60).keys()].map((i) => ({
|
||||
value: i,
|
||||
date: le(new Date(o.value.getTime()), {
|
||||
hours: p.value,
|
||||
minutes: i,
|
||||
seconds: 0
|
||||
}),
|
||||
selected: n.value === i,
|
||||
ref: $(null)
|
||||
}))
|
||||
), _ = (i) => {
|
||||
n.value = i.value, t("select", i.date);
|
||||
}, d = () => {
|
||||
const i = a.value.find(
|
||||
(g) => {
|
||||
var v, c;
|
||||
return ((c = (v = g.ref.value) == null ? void 0 : v.classList) == null ? void 0 : c.contains("selected")) ?? !1;
|
||||
}
|
||||
), D = f.value.find(
|
||||
(g) => {
|
||||
var v, c;
|
||||
return ((c = (v = g.ref.value) == null ? void 0 : v.classList) == null ? void 0 : c.contains("selected")) ?? !1;
|
||||
}
|
||||
);
|
||||
i && D && (se(r.value, i.ref.value), se(l.value, D.ref.value));
|
||||
};
|
||||
return ne(
|
||||
() => e.visible,
|
||||
(i) => {
|
||||
i && be(d);
|
||||
}
|
||||
), {
|
||||
hoursListRef: r,
|
||||
minutesListRef: l,
|
||||
hours: p,
|
||||
minutes: n,
|
||||
hoursList: a,
|
||||
minutesList: f,
|
||||
padStartZero: (i) => `0${i}`.substr(-2),
|
||||
selectMinutes: _,
|
||||
isEnabled: (i) => {
|
||||
var D, g, v, c;
|
||||
return !((g = (D = e.disabledTime) == null ? void 0 : D.dates) != null && g.some(
|
||||
(k) => Ee(i, k) && Ie(i, k)
|
||||
) || (c = (v = e.disabledTime) == null ? void 0 : v.predicate) != null && c.call(v, i));
|
||||
},
|
||||
scroll: d
|
||||
};
|
||||
}
|
||||
});
|
||||
const dt = {
|
||||
ref: "hoursListRef",
|
||||
class: "v3dp__column"
|
||||
}, ut = ["disabled", "onClick"], ct = {
|
||||
ref: "minutesListRef",
|
||||
class: "v3dp__column"
|
||||
}, mt = ["disabled", "onClick"];
|
||||
function ft(e, t, r, l, o, p) {
|
||||
const n = q("picker-popup");
|
||||
return h(), N(n, {
|
||||
headingClickable: "",
|
||||
columnCount: 2,
|
||||
leftDisabled: !0,
|
||||
rightDisabled: !0,
|
||||
viewMode: "time",
|
||||
onHeading: t[0] || (t[0] = (a) => e.$emit("back"))
|
||||
}, {
|
||||
heading: M(() => [
|
||||
K(O(e.padStartZero(e.hours)) + ":" + O(e.padStartZero(e.minutes)), 1)
|
||||
]),
|
||||
body: M(() => [
|
||||
m("div", dt, [
|
||||
(h(!0), S(H, null, Z(e.hoursList, (a) => (h(), S("button", {
|
||||
key: a.value,
|
||||
ref_for: !0,
|
||||
ref: a.ref,
|
||||
class: R([{ selected: a.selected }, "v3dp__element_button__hour"]),
|
||||
disabled: !e.isEnabled(a.date),
|
||||
onClick: C((f) => e.hours = a.value, ["stop", "prevent"])
|
||||
}, [
|
||||
m("span", null, O(e.padStartZero(a.value)), 1)
|
||||
], 10, ut))), 128))
|
||||
], 512),
|
||||
m("div", ct, [
|
||||
(h(!0), S(H, null, Z(e.minutesList, (a) => (h(), S("button", {
|
||||
key: a.value,
|
||||
ref_for: !0,
|
||||
ref: a.ref,
|
||||
class: R([{ selected: a.selected }, "v3dp__element_button__minute"]),
|
||||
disabled: !e.isEnabled(a.date),
|
||||
onClick: C((f) => e.selectMinutes(a), ["stop", "prevent"])
|
||||
}, [
|
||||
m("span", null, O(e.padStartZero(a.value)), 1)
|
||||
], 10, mt))), 128))
|
||||
], 512)
|
||||
]),
|
||||
_: 1
|
||||
});
|
||||
}
|
||||
const pt = /* @__PURE__ */ T(rt, [["render", ft], ["__scopeId", "data-v-81ac698d"]]), W = ["time", "day", "month", "year"], gt = (e, t, r = void 0) => {
|
||||
let l = r || /* @__PURE__ */ new Date();
|
||||
return e && (l = Re([e, l])), t && (l = He([t, l])), l;
|
||||
}, vt = B({
|
||||
components: {
|
||||
YearPicker: tt,
|
||||
MonthPicker: it,
|
||||
DayPicker: st,
|
||||
TimePicker: pt
|
||||
},
|
||||
inheritAttrs: !1,
|
||||
props: {
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
/**
|
||||
* `v-model` for selected date
|
||||
*/
|
||||
modelValue: {
|
||||
type: Date,
|
||||
required: !1
|
||||
},
|
||||
/**
|
||||
* Dates not available for picking
|
||||
*/
|
||||
disabledDates: {
|
||||
type: Object,
|
||||
required: !1
|
||||
},
|
||||
allowOutsideInterval: {
|
||||
type: Boolean,
|
||||
required: !1,
|
||||
default: !1
|
||||
},
|
||||
/**
|
||||
* Time not available for picking
|
||||
*/
|
||||
disabledTime: {
|
||||
type: Object,
|
||||
required: !1
|
||||
},
|
||||
/**
|
||||
* Upper limit for available dates for picking
|
||||
*/
|
||||
upperLimit: {
|
||||
type: Date,
|
||||
required: !1
|
||||
},
|
||||
/**
|
||||
* Lower limit for available dates for picking
|
||||
*/
|
||||
lowerLimit: {
|
||||
type: Date,
|
||||
required: !1
|
||||
},
|
||||
/**
|
||||
* View on which the date picker should open. Can be either `year`, `month`, `day` or `time`
|
||||
*/
|
||||
startingView: {
|
||||
type: String,
|
||||
required: !1,
|
||||
default: "day",
|
||||
validate: (e) => typeof e == "string" && W.includes(e)
|
||||
},
|
||||
/**
|
||||
* Date which should be the "center" of the initial view.
|
||||
* When an empty datepicker opens, it focuses on the month/year
|
||||
* that contains this date
|
||||
*/
|
||||
startingViewDate: {
|
||||
type: Date,
|
||||
required: !1,
|
||||
default: () => /* @__PURE__ */ new Date()
|
||||
},
|
||||
/**
|
||||
* `date-fns`-type formatting for a month view heading
|
||||
*/
|
||||
dayPickerHeadingFormat: {
|
||||
type: String,
|
||||
required: !1,
|
||||
default: "LLLL yyyy"
|
||||
},
|
||||
/**
|
||||
* `date-fns`-type formatting for the month picker view
|
||||
*/
|
||||
monthListFormat: {
|
||||
type: String,
|
||||
required: !1,
|
||||
default: "LLL"
|
||||
},
|
||||
/**
|
||||
* `date-fns`-type formatting for a line of weekdays on day view
|
||||
*/
|
||||
weekdayFormat: {
|
||||
type: String,
|
||||
required: !1,
|
||||
default: "EE"
|
||||
},
|
||||
/**
|
||||
* `date-fns`-type formatting for the day picker view
|
||||
*/
|
||||
dayFormat: {
|
||||
type: String,
|
||||
required: !1,
|
||||
default: "dd"
|
||||
},
|
||||
/**
|
||||
* `date-fns`-type format in which the string in the input should be both
|
||||
* parsed and displayed
|
||||
*/
|
||||
inputFormat: {
|
||||
type: String,
|
||||
required: !1,
|
||||
default: "yyyy-MM-dd"
|
||||
},
|
||||
/**
|
||||
* [`date-fns` locale object](https://date-fns.org/v2.16.1/docs/I18n#usage).
|
||||
* Used in string formatting (see default `dayPickerHeadingFormat`)
|
||||
*/
|
||||
locale: {
|
||||
type: Object,
|
||||
required: !1
|
||||
},
|
||||
/**
|
||||
* Day on which the week should start.
|
||||
*
|
||||
* Number from 0 to 6, where 0 is Sunday and 6 is Saturday.
|
||||
* Week starts with a Monday (1) by default
|
||||
*/
|
||||
weekStartsOn: {
|
||||
type: Number,
|
||||
required: !1,
|
||||
default: 1,
|
||||
validator: (e) => [0, 1, 2, 3, 4, 5, 6].includes(e)
|
||||
},
|
||||
/**
|
||||
* Disables datepicker and prevents it's opening
|
||||
*/
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
required: !1,
|
||||
default: !1
|
||||
},
|
||||
/**
|
||||
* Clears selected date
|
||||
*/
|
||||
clearable: {
|
||||
type: Boolean,
|
||||
required: !1,
|
||||
default: !1
|
||||
},
|
||||
/*
|
||||
* Allows user to input date manually
|
||||
*/
|
||||
typeable: {
|
||||
type: Boolean,
|
||||
required: !1,
|
||||
default: !1
|
||||
},
|
||||
/**
|
||||
* If set, lower-level views won't show
|
||||
*/
|
||||
minimumView: {
|
||||
type: String,
|
||||
required: !1,
|
||||
default: "day",
|
||||
validate: (e) => typeof e == "string" && W.includes(e)
|
||||
}
|
||||
},
|
||||
emits: {
|
||||
"update:modelValue": (e) => e == null || w(e),
|
||||
decadePageChanged: (e) => !0,
|
||||
yearPageChanged: (e) => !0,
|
||||
monthPageChanged: (e) => !0,
|
||||
opened: () => !0,
|
||||
closed: () => !0
|
||||
},
|
||||
setup(e, { emit: t, attrs: r }) {
|
||||
const l = $("none"), o = $(e.startingViewDate), p = $(null), n = $(!1), a = $("");
|
||||
X(() => {
|
||||
const s = oe(a.value, e.inputFormat, /* @__PURE__ */ new Date(), {
|
||||
locale: e.locale
|
||||
});
|
||||
w(s) && (o.value = s);
|
||||
}), X(
|
||||
() => a.value = e.modelValue && w(e.modelValue) ? z(e.modelValue, e.inputFormat, {
|
||||
locale: e.locale
|
||||
}) : ""
|
||||
);
|
||||
const f = (s = "none") => {
|
||||
e.disabled || (s !== "none" && l.value === "none" && (o.value = e.modelValue || gt(e.lowerLimit, e.upperLimit, o.value)), l.value = s, t(s !== "none" ? "opened" : "closed"));
|
||||
};
|
||||
X(() => {
|
||||
e.disabled && (l.value = "none");
|
||||
});
|
||||
const _ = (s, V) => {
|
||||
o.value = V, s === "year" ? t("decadePageChanged", V) : s === "month" ? t("yearPageChanged", V) : s === "day" && t("monthPageChanged", V);
|
||||
}, d = (s) => {
|
||||
o.value = s, e.minimumView === "year" ? (f("none"), t("update:modelValue", s)) : l.value = "month";
|
||||
}, b = (s) => {
|
||||
o.value = s, e.minimumView === "month" ? (f("none"), t("update:modelValue", s)) : l.value = "day";
|
||||
}, y = (s) => {
|
||||
o.value = s, e.minimumView === "day" ? (f("none"), t("update:modelValue", s)) : l.value = "time";
|
||||
}, i = (s) => {
|
||||
f("none"), t("update:modelValue", s);
|
||||
}, D = () => {
|
||||
e.clearable && (f("none"), t("update:modelValue", null), o.value = e.startingViewDate);
|
||||
}, g = () => n.value = !0, v = () => f(E.value), c = () => {
|
||||
n.value = !1, f();
|
||||
}, k = (s) => {
|
||||
const V = s.keyCode ? s.keyCode : s.which;
|
||||
if ([
|
||||
27,
|
||||
// escape
|
||||
13
|
||||
// enter
|
||||
].includes(V) && p.value.blur(), e.typeable) {
|
||||
const Q = oe(
|
||||
p.value.value,
|
||||
e.inputFormat,
|
||||
/* @__PURE__ */ new Date(),
|
||||
{ locale: e.locale }
|
||||
);
|
||||
w(Q) && a.value === z(Q, e.inputFormat, { locale: e.locale }) && (a.value = p.value.value, t("update:modelValue", Q));
|
||||
}
|
||||
}, E = u(() => {
|
||||
const s = W.indexOf(e.startingView), V = W.indexOf(e.minimumView);
|
||||
return s < V ? e.minimumView : e.startingView;
|
||||
});
|
||||
return {
|
||||
blur: c,
|
||||
focus: v,
|
||||
click: g,
|
||||
input: a,
|
||||
inputRef: p,
|
||||
pageDate: o,
|
||||
renderView: f,
|
||||
updatePageDate: _,
|
||||
selectYear: d,
|
||||
selectMonth: b,
|
||||
selectDay: y,
|
||||
selectTime: i,
|
||||
keyUp: k,
|
||||
viewShown: l,
|
||||
goBackFromTimepicker: () => e.startingView === "time" && e.minimumView === "time" ? null : l.value = "day",
|
||||
clearModelValue: D,
|
||||
initialView: E,
|
||||
log: (s) => console.log(s),
|
||||
variables: (s) => Object.fromEntries(
|
||||
Object.entries(s ?? {}).filter(([V, fe]) => V.startsWith("--"))
|
||||
)
|
||||
};
|
||||
}
|
||||
});
|
||||
const yt = { class: "v3dp__input_wrapper" }, bt = ["readonly", "placeholder", "disabled", "tabindex"], ht = { class: "v3dp__clearable" };
|
||||
function Dt(e, t, r, l, o, p) {
|
||||
const n = q("year-picker"), a = q("month-picker"), f = q("day-picker"), _ = q("time-picker");
|
||||
return h(), S("div", {
|
||||
class: "v3dp__datepicker",
|
||||
style: re(e.variables(e.$attrs.style))
|
||||
}, [
|
||||
m("div", yt, [
|
||||
P(m("input", he({
|
||||
type: "text",
|
||||
ref: "inputRef",
|
||||
readonly: !e.typeable,
|
||||
"onUpdate:modelValue": t[0] || (t[0] = (d) => e.input = d)
|
||||
}, e.$attrs, {
|
||||
placeholder: e.placeholder,
|
||||
disabled: e.disabled,
|
||||
tabindex: e.disabled ? -1 : 0,
|
||||
onKeyup: t[1] || (t[1] = (...d) => e.keyUp && e.keyUp(...d)),
|
||||
onBlur: t[2] || (t[2] = (...d) => e.blur && e.blur(...d)),
|
||||
onFocus: t[3] || (t[3] = (...d) => e.focus && e.focus(...d)),
|
||||
onClick: t[4] || (t[4] = (...d) => e.click && e.click(...d))
|
||||
}), null, 16, bt), [
|
||||
[De, e.input]
|
||||
]),
|
||||
P(m("div", ht, [
|
||||
F(e.$slots, "clear", { onClear: e.clearModelValue }, () => [
|
||||
m("i", {
|
||||
onClick: t[5] || (t[5] = (d) => e.clearModelValue())
|
||||
}, "x")
|
||||
])
|
||||
], 512), [
|
||||
[I, e.clearable && e.modelValue]
|
||||
])
|
||||
]),
|
||||
P(A(n, {
|
||||
pageDate: e.pageDate,
|
||||
"onUpdate:pageDate": t[6] || (t[6] = (d) => e.updatePageDate("year", d)),
|
||||
selected: e.modelValue,
|
||||
lowerLimit: e.lowerLimit,
|
||||
upperLimit: e.upperLimit,
|
||||
onSelect: e.selectYear
|
||||
}, null, 8, ["pageDate", "selected", "lowerLimit", "upperLimit", "onSelect"]), [
|
||||
[I, e.viewShown === "year"]
|
||||
]),
|
||||
P(A(a, {
|
||||
pageDate: e.pageDate,
|
||||
"onUpdate:pageDate": t[7] || (t[7] = (d) => e.updatePageDate("month", d)),
|
||||
selected: e.modelValue,
|
||||
onSelect: e.selectMonth,
|
||||
lowerLimit: e.lowerLimit,
|
||||
upperLimit: e.upperLimit,
|
||||
format: e.monthListFormat,
|
||||
locale: e.locale,
|
||||
onBack: t[8] || (t[8] = (d) => e.viewShown = "year")
|
||||
}, null, 8, ["pageDate", "selected", "onSelect", "lowerLimit", "upperLimit", "format", "locale"]), [
|
||||
[I, e.viewShown === "month"]
|
||||
]),
|
||||
P(A(f, {
|
||||
pageDate: e.pageDate,
|
||||
"onUpdate:pageDate": t[9] || (t[9] = (d) => e.updatePageDate("day", d)),
|
||||
selected: e.modelValue,
|
||||
weekStartsOn: e.weekStartsOn,
|
||||
lowerLimit: e.lowerLimit,
|
||||
upperLimit: e.upperLimit,
|
||||
headingFormat: e.dayPickerHeadingFormat,
|
||||
disabledDates: e.disabledDates,
|
||||
locale: e.locale,
|
||||
weekdayFormat: e.weekdayFormat,
|
||||
"allow-outside-interval": e.allowOutsideInterval,
|
||||
format: e.dayFormat,
|
||||
onSelect: e.selectDay,
|
||||
onBack: t[10] || (t[10] = (d) => e.viewShown = "month")
|
||||
}, null, 8, ["pageDate", "selected", "weekStartsOn", "lowerLimit", "upperLimit", "headingFormat", "disabledDates", "locale", "weekdayFormat", "allow-outside-interval", "format", "onSelect"]), [
|
||||
[I, e.viewShown === "day"]
|
||||
]),
|
||||
P(A(_, {
|
||||
pageDate: e.pageDate,
|
||||
visible: e.viewShown === "time",
|
||||
selected: e.modelValue,
|
||||
disabledTime: e.disabledTime,
|
||||
onSelect: e.selectTime,
|
||||
onBack: e.goBackFromTimepicker
|
||||
}, null, 8, ["pageDate", "visible", "selected", "disabledTime", "onSelect", "onBack"]), [
|
||||
[I, e.viewShown === "time"]
|
||||
])
|
||||
], 4);
|
||||
}
|
||||
const Lt = /* @__PURE__ */ T(vt, [["render", Dt]]);
|
||||
export {
|
||||
Lt as default
|
||||
};
|
||||
1
node_modules/vue3-datepicker/dist/vue3-datepicker.umd.js
generated
vendored
Normal file
1
node_modules/vue3-datepicker/dist/vue3-datepicker.umd.js
generated
vendored
Normal file
File diff suppressed because one or more lines are too long
67
node_modules/vue3-datepicker/package.json
generated
vendored
Normal file
67
node_modules/vue3-datepicker/package.json
generated
vendored
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
{
|
||||
"author": {
|
||||
"email": "icehaunter@gmail.com",
|
||||
"name": "Ilya Borovitinov"
|
||||
},
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=10.16.0"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/icehaunter/vue3-datepicker.git"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/icehaunter/vue3-datepicker/issues"
|
||||
},
|
||||
"private": false,
|
||||
"name": "vue3-datepicker",
|
||||
"version": "0.3.8",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"description": "A simple Vue 3 datepicker component. Supports disabling of dates, translations. Dependent on date-fns.",
|
||||
"keywords": [
|
||||
"vue",
|
||||
"vue 3",
|
||||
"component",
|
||||
"datepicker",
|
||||
"date-picker",
|
||||
"calendar",
|
||||
"date-fns"
|
||||
],
|
||||
"main": "dist/vue3-datepicker.umd.js",
|
||||
"module": "dist/vue3-datepicker.mjs",
|
||||
"style": "dist/vue3-datepicker.css",
|
||||
"types": "./dist/types/Datepicker.vue.d.ts",
|
||||
"files": [
|
||||
"src/datepicker",
|
||||
"dist"
|
||||
],
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"dev:docs": "vitepress dev docs",
|
||||
"build:component": "vite build",
|
||||
"build:docs": "vitepress build docs",
|
||||
"preview:docs": "vitepress preview docs",
|
||||
"format": "prettier -w ."
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/types": "^7.22.4",
|
||||
"@types/node": "^20.2.5",
|
||||
"@vitejs/plugin-vue": "^4.2.3",
|
||||
"@vue/compiler-sfc": "^3.3.4",
|
||||
"prettier": "^2.8.8",
|
||||
"typescript": "^4.8.4",
|
||||
"vite": "^4.3.9",
|
||||
"vite-plugin-dts": "^2.3.0",
|
||||
"vitepress": "^1.0.0-beta.1",
|
||||
"vue": "^3.3.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^3.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"date-fns": "^2.22.1"
|
||||
}
|
||||
}
|
||||
509
node_modules/vue3-datepicker/src/datepicker/Datepicker.vue
generated
vendored
Normal file
509
node_modules/vue3-datepicker/src/datepicker/Datepicker.vue
generated
vendored
Normal file
|
|
@ -0,0 +1,509 @@
|
|||
<template>
|
||||
<div
|
||||
class="v3dp__datepicker"
|
||||
:style="variables($attrs.style as Record<string, string> | undefined)"
|
||||
>
|
||||
<div class="v3dp__input_wrapper">
|
||||
<input
|
||||
type="text"
|
||||
ref="inputRef"
|
||||
:readonly="!typeable"
|
||||
v-model="input"
|
||||
v-bind="$attrs"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
:tabindex="disabled ? -1 : 0"
|
||||
@keyup="keyUp"
|
||||
@blur="blur"
|
||||
@focus="focus"
|
||||
@click="click"
|
||||
/>
|
||||
<div class="v3dp__clearable" v-show="clearable && modelValue">
|
||||
<slot name="clear" :onClear="clearModelValue">
|
||||
<i @click="clearModelValue()">x</i>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
<year-picker
|
||||
v-show="viewShown === 'year'"
|
||||
:pageDate="pageDate"
|
||||
@update:pageDate="(v) => updatePageDate('year', v)"
|
||||
:selected="modelValue"
|
||||
:lowerLimit="lowerLimit"
|
||||
:upperLimit="upperLimit"
|
||||
@select="selectYear"
|
||||
/>
|
||||
<month-picker
|
||||
v-show="viewShown === 'month'"
|
||||
:pageDate="pageDate"
|
||||
@update:pageDate="(v) => updatePageDate('month', v)"
|
||||
:selected="modelValue"
|
||||
@select="selectMonth"
|
||||
:lowerLimit="lowerLimit"
|
||||
:upperLimit="upperLimit"
|
||||
:format="monthListFormat"
|
||||
:locale="locale"
|
||||
@back="viewShown = 'year'"
|
||||
/>
|
||||
<day-picker
|
||||
v-show="viewShown === 'day'"
|
||||
:pageDate="pageDate"
|
||||
@update:pageDate="(v) => updatePageDate('day', v)"
|
||||
:selected="modelValue"
|
||||
:weekStartsOn="weekStartsOn"
|
||||
:lowerLimit="lowerLimit"
|
||||
:upperLimit="upperLimit"
|
||||
:headingFormat="dayPickerHeadingFormat"
|
||||
:disabledDates="disabledDates"
|
||||
:locale="locale"
|
||||
:weekdayFormat="weekdayFormat"
|
||||
:allow-outside-interval="allowOutsideInterval"
|
||||
:format="dayFormat"
|
||||
@select="selectDay"
|
||||
@back="viewShown = 'month'"
|
||||
/>
|
||||
<time-picker
|
||||
v-show="viewShown === 'time'"
|
||||
:pageDate="pageDate"
|
||||
:visible="viewShown === 'time'"
|
||||
:selected="modelValue"
|
||||
:disabledTime="disabledTime"
|
||||
@select="selectTime"
|
||||
@back="goBackFromTimepicker"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, computed, watchEffect, PropType } from 'vue'
|
||||
import { parse, isValid, format, max, min } from 'date-fns'
|
||||
import YearPicker from './YearPicker.vue'
|
||||
import MonthPicker from './MonthPicker.vue'
|
||||
import DayPicker from './DayPicker.vue'
|
||||
import TimePicker from './Timepicker.vue'
|
||||
|
||||
const TIME_RESOLUTIONS = ['time', 'day', 'month', 'year']
|
||||
|
||||
const boundedDate = (
|
||||
lower: Date | undefined,
|
||||
upper: Date | undefined,
|
||||
target: Date | undefined = undefined
|
||||
) => {
|
||||
let date = target || new Date()
|
||||
|
||||
if (lower) date = max([lower, date])
|
||||
if (upper) date = min([upper, date])
|
||||
|
||||
return date
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
YearPicker,
|
||||
MonthPicker,
|
||||
DayPicker,
|
||||
TimePicker,
|
||||
},
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
/**
|
||||
* `v-model` for selected date
|
||||
*/
|
||||
modelValue: {
|
||||
type: Date as PropType<Date>,
|
||||
required: false,
|
||||
},
|
||||
/**
|
||||
* Dates not available for picking
|
||||
*/
|
||||
disabledDates: {
|
||||
type: Object as PropType<{
|
||||
dates?: Date[]
|
||||
predicate?: (currentDate: Date) => boolean
|
||||
}>,
|
||||
required: false,
|
||||
},
|
||||
allowOutsideInterval: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
/**
|
||||
* Time not available for picking
|
||||
*/
|
||||
disabledTime: {
|
||||
type: Object as PropType<{
|
||||
dates?: Date[]
|
||||
predicate?: (currentDate: Date) => boolean
|
||||
}>,
|
||||
required: false,
|
||||
},
|
||||
/**
|
||||
* Upper limit for available dates for picking
|
||||
*/
|
||||
upperLimit: {
|
||||
type: Date as PropType<Date>,
|
||||
required: false,
|
||||
},
|
||||
/**
|
||||
* Lower limit for available dates for picking
|
||||
*/
|
||||
lowerLimit: {
|
||||
type: Date as PropType<Date>,
|
||||
required: false,
|
||||
},
|
||||
/**
|
||||
* View on which the date picker should open. Can be either `year`, `month`, `day` or `time`
|
||||
*/
|
||||
startingView: {
|
||||
type: String as PropType<'year' | 'month' | 'day' | 'time'>,
|
||||
required: false,
|
||||
default: 'day',
|
||||
validate: (v: unknown) =>
|
||||
typeof v === 'string' && TIME_RESOLUTIONS.includes(v),
|
||||
},
|
||||
/**
|
||||
* Date which should be the "center" of the initial view.
|
||||
* When an empty datepicker opens, it focuses on the month/year
|
||||
* that contains this date
|
||||
*/
|
||||
startingViewDate: {
|
||||
type: Date as PropType<Date>,
|
||||
required: false,
|
||||
default: () => new Date(),
|
||||
},
|
||||
/**
|
||||
* `date-fns`-type formatting for a month view heading
|
||||
*/
|
||||
dayPickerHeadingFormat: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'LLLL yyyy',
|
||||
},
|
||||
/**
|
||||
* `date-fns`-type formatting for the month picker view
|
||||
*/
|
||||
monthListFormat: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'LLL',
|
||||
},
|
||||
/**
|
||||
* `date-fns`-type formatting for a line of weekdays on day view
|
||||
*/
|
||||
weekdayFormat: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'EE',
|
||||
},
|
||||
/**
|
||||
* `date-fns`-type formatting for the day picker view
|
||||
*/
|
||||
dayFormat: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'dd',
|
||||
},
|
||||
/**
|
||||
* `date-fns`-type format in which the string in the input should be both
|
||||
* parsed and displayed
|
||||
*/
|
||||
inputFormat: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'yyyy-MM-dd',
|
||||
},
|
||||
/**
|
||||
* [`date-fns` locale object](https://date-fns.org/v2.16.1/docs/I18n#usage).
|
||||
* Used in string formatting (see default `dayPickerHeadingFormat`)
|
||||
*/
|
||||
locale: {
|
||||
type: Object as PropType<Locale>,
|
||||
required: false,
|
||||
},
|
||||
/**
|
||||
* Day on which the week should start.
|
||||
*
|
||||
* Number from 0 to 6, where 0 is Sunday and 6 is Saturday.
|
||||
* Week starts with a Monday (1) by default
|
||||
*/
|
||||
weekStartsOn: {
|
||||
type: Number as PropType<0 | 1 | 2 | 3 | 4 | 5 | 6>,
|
||||
required: false,
|
||||
default: 1,
|
||||
validator: (value: any) => [0, 1, 2, 3, 4, 5, 6].includes(value),
|
||||
},
|
||||
/**
|
||||
* Disables datepicker and prevents it's opening
|
||||
*/
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
/**
|
||||
* Clears selected date
|
||||
*/
|
||||
clearable: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
/*
|
||||
* Allows user to input date manually
|
||||
*/
|
||||
typeable: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
/**
|
||||
* If set, lower-level views won't show
|
||||
*/
|
||||
minimumView: {
|
||||
type: String as PropType<'year' | 'month' | 'day' | 'time'>,
|
||||
required: false,
|
||||
default: 'day',
|
||||
validate: (v: unknown) =>
|
||||
typeof v === 'string' && TIME_RESOLUTIONS.includes(v),
|
||||
},
|
||||
},
|
||||
emits: {
|
||||
'update:modelValue': (value: Date | null | undefined) =>
|
||||
value === null || value === undefined || isValid(value),
|
||||
decadePageChanged: (pageDate: Date) => true,
|
||||
yearPageChanged: (pageDate: Date) => true,
|
||||
monthPageChanged: (pageDate: Date) => true,
|
||||
opened: () => true,
|
||||
closed: () => true,
|
||||
},
|
||||
setup(props, { emit, attrs }) {
|
||||
const viewShown = ref('none' as 'year' | 'month' | 'day' | 'time' | 'none')
|
||||
const pageDate = ref<Date>(props.startingViewDate)
|
||||
const inputRef = ref(null as HTMLInputElement | null)
|
||||
const isFocused = ref(false)
|
||||
|
||||
const input = ref('')
|
||||
watchEffect(() => {
|
||||
const parsed = parse(input.value, props.inputFormat, new Date(), {
|
||||
locale: props.locale,
|
||||
})
|
||||
if (isValid(parsed)) {
|
||||
pageDate.value = parsed
|
||||
}
|
||||
})
|
||||
|
||||
watchEffect(
|
||||
() =>
|
||||
(input.value =
|
||||
props.modelValue && isValid(props.modelValue)
|
||||
? format(props.modelValue, props.inputFormat, {
|
||||
locale: props.locale,
|
||||
})
|
||||
: '')
|
||||
)
|
||||
|
||||
const renderView = (view: typeof viewShown.value = 'none') => {
|
||||
if (!props.disabled) {
|
||||
if (view !== 'none' && viewShown.value === 'none')
|
||||
pageDate.value =
|
||||
props.modelValue ||
|
||||
boundedDate(props.lowerLimit, props.upperLimit, pageDate.value)
|
||||
viewShown.value = view
|
||||
|
||||
if (view !== 'none') {
|
||||
emit('opened')
|
||||
} else {
|
||||
emit('closed')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
watchEffect(() => {
|
||||
if (props.disabled) viewShown.value = 'none'
|
||||
})
|
||||
|
||||
const updatePageDate = (
|
||||
view: 'year' | 'month' | 'day',
|
||||
newPageDate: Date
|
||||
) => {
|
||||
// We need to emit "page changed" event and set the page date
|
||||
pageDate.value = newPageDate
|
||||
|
||||
if (view === 'year') emit('decadePageChanged', newPageDate)
|
||||
else if (view === 'month') emit('yearPageChanged', newPageDate)
|
||||
else if (view === 'day') emit('monthPageChanged', newPageDate)
|
||||
}
|
||||
|
||||
const selectYear = (date: Date) => {
|
||||
pageDate.value = date
|
||||
|
||||
if (props.minimumView === 'year') {
|
||||
renderView('none')
|
||||
emit('update:modelValue', date)
|
||||
} else {
|
||||
viewShown.value = 'month'
|
||||
}
|
||||
}
|
||||
const selectMonth = (date: Date) => {
|
||||
pageDate.value = date
|
||||
|
||||
if (props.minimumView === 'month') {
|
||||
renderView('none')
|
||||
emit('update:modelValue', date)
|
||||
} else {
|
||||
viewShown.value = 'day'
|
||||
}
|
||||
}
|
||||
const selectDay = (date: Date) => {
|
||||
pageDate.value = date
|
||||
|
||||
if (props.minimumView === 'day') {
|
||||
renderView('none')
|
||||
emit('update:modelValue', date)
|
||||
} else {
|
||||
viewShown.value = 'time'
|
||||
}
|
||||
}
|
||||
|
||||
const selectTime = (date: Date) => {
|
||||
renderView('none')
|
||||
emit('update:modelValue', date)
|
||||
}
|
||||
|
||||
const clearModelValue = () => {
|
||||
if (props.clearable) {
|
||||
renderView('none')
|
||||
emit('update:modelValue', null)
|
||||
pageDate.value = props.startingViewDate
|
||||
}
|
||||
}
|
||||
|
||||
const click = () => (isFocused.value = true)
|
||||
|
||||
const focus = () => renderView(initialView.value)
|
||||
|
||||
const blur = () => {
|
||||
isFocused.value = false
|
||||
renderView()
|
||||
}
|
||||
|
||||
const keyUp = (event: KeyboardEvent) => {
|
||||
const code = event.keyCode ? event.keyCode : event.which
|
||||
// close calendar if escape or enter are pressed
|
||||
const closeButton = [
|
||||
27, // escape
|
||||
13, // enter
|
||||
].includes(code)
|
||||
|
||||
if (closeButton) {
|
||||
inputRef.value!.blur()
|
||||
}
|
||||
if (props.typeable) {
|
||||
const parsedDate = parse(
|
||||
inputRef.value!.value,
|
||||
props.inputFormat,
|
||||
new Date(),
|
||||
{ locale: props.locale }
|
||||
)
|
||||
|
||||
// If the date is formatted back same way as it was inputted, then we're not disturbing user input
|
||||
if (
|
||||
isValid(parsedDate) &&
|
||||
input.value ===
|
||||
format(parsedDate, props.inputFormat, { locale: props.locale })
|
||||
) {
|
||||
input.value = inputRef.value!.value
|
||||
emit('update:modelValue', parsedDate)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const initialView = computed(() => {
|
||||
const startingViewOrder = TIME_RESOLUTIONS.indexOf(props.startingView)
|
||||
const minimumViewOrder = TIME_RESOLUTIONS.indexOf(props.minimumView)
|
||||
|
||||
return startingViewOrder < minimumViewOrder
|
||||
? props.minimumView
|
||||
: props.startingView
|
||||
})
|
||||
|
||||
const variables = (object: Record<string, string> | undefined) =>
|
||||
Object.fromEntries(
|
||||
Object.entries(object ?? {}).filter(([key, _]) => key.startsWith('--'))
|
||||
)
|
||||
|
||||
const goBackFromTimepicker = () =>
|
||||
props.startingView === 'time' && props.minimumView === 'time'
|
||||
? null
|
||||
: (viewShown.value = 'day')
|
||||
|
||||
return {
|
||||
blur,
|
||||
focus,
|
||||
click,
|
||||
input,
|
||||
inputRef,
|
||||
pageDate,
|
||||
renderView,
|
||||
updatePageDate,
|
||||
selectYear,
|
||||
selectMonth,
|
||||
selectDay,
|
||||
selectTime,
|
||||
keyUp,
|
||||
viewShown,
|
||||
goBackFromTimepicker,
|
||||
clearModelValue,
|
||||
initialView,
|
||||
log: (e: any) => console.log(e),
|
||||
variables,
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.v3dp__datepicker {
|
||||
--popout-bg-color: var(--vdp-bg-color, #fff);
|
||||
--box-shadow: var(
|
||||
--vdp-box-shadow,
|
||||
0 4px 10px 0 rgba(128, 144, 160, 0.1),
|
||||
0 0 1px 0 rgba(128, 144, 160, 0.81)
|
||||
);
|
||||
--text-color: var(--vdp-text-color, #000000);
|
||||
--border-radius: var(--vdp-border-radius, 3px);
|
||||
--heading-size: var(--vdp-heading-size, 2.5em); /* 40px for 16px font */
|
||||
--heading-weight: var(--vdp-heading-weight, bold);
|
||||
--heading-hover-color: var(--vdp-heading-hover-color, #eeeeee);
|
||||
--arrow-color: var(--vdp-arrow-color, currentColor);
|
||||
|
||||
--elem-color: var(--vdp-elem-color, currentColor);
|
||||
--elem-disabled-color: var(--vdp-disabled-color, #d5d9e0);
|
||||
--elem-hover-color: var(--vdp-hover-color, #fff);
|
||||
--elem-hover-bg-color: var(--vdp-hover-bg-color, #0baf74);
|
||||
--elem-selected-color: var(--vdp-selected-color, #fff);
|
||||
--elem-selected-bg-color: var(--vdp-selected-bg-color, #0baf74);
|
||||
|
||||
--elem-current-outline-color: var(--vdp-current-date-outline-color, #888);
|
||||
--elem-current-font-weight: var(--vdp-current-date-font-weight, bold);
|
||||
|
||||
--elem-font-size: var(--vdp-elem-font-size, 0.8em);
|
||||
--elem-border-radius: var(--vdp-elem-border-radius, 3px);
|
||||
|
||||
--divider-color: var(--vdp-divider-color, var(--elem-disabled-color));
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.v3dp__clearable {
|
||||
display: inline;
|
||||
position: relative;
|
||||
left: -15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
223
node_modules/vue3-datepicker/src/datepicker/DayPicker.vue
generated
vendored
Normal file
223
node_modules/vue3-datepicker/src/datepicker/DayPicker.vue
generated
vendored
Normal file
|
|
@ -0,0 +1,223 @@
|
|||
<template>
|
||||
<picker-popup
|
||||
headingClickable
|
||||
:leftDisabled="leftDisabled"
|
||||
:rightDisabled="rightDisabled"
|
||||
:items="days"
|
||||
viewMode="day"
|
||||
@left="previousPage"
|
||||
@right="nextPage"
|
||||
@heading="$emit('back')"
|
||||
@elementClick="$emit('select', $event)"
|
||||
>
|
||||
<template #heading>{{ heading }}</template>
|
||||
<template #subheading>
|
||||
<span
|
||||
v-for="(day, index) in weekDays"
|
||||
:key="day"
|
||||
:class="`v3dp__subheading__weekday__${index}`"
|
||||
>
|
||||
{{ day }}
|
||||
</span>
|
||||
</template>
|
||||
</picker-popup>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, computed, ref, watchEffect, PropType } from 'vue'
|
||||
import {
|
||||
startOfMonth,
|
||||
endOfMonth,
|
||||
eachDayOfInterval,
|
||||
subMonths,
|
||||
addMonths,
|
||||
startOfWeek,
|
||||
endOfWeek,
|
||||
isSameDay,
|
||||
setDay,
|
||||
isWithinInterval,
|
||||
isBefore,
|
||||
isAfter,
|
||||
isSameMonth,
|
||||
endOfDay,
|
||||
startOfDay,
|
||||
isValid,
|
||||
format as formatDate,
|
||||
} from 'date-fns'
|
||||
import PickerPopup, { Item } from './PickerPopup.vue'
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
PickerPopup,
|
||||
},
|
||||
emits: {
|
||||
'update:pageDate': (date: Date) => isValid(date),
|
||||
select: (date: Date) => isValid(date),
|
||||
back: () => true,
|
||||
},
|
||||
props: {
|
||||
selected: {
|
||||
type: Date as PropType<Date>,
|
||||
required: false,
|
||||
},
|
||||
pageDate: {
|
||||
type: Date as PropType<Date>,
|
||||
required: true,
|
||||
},
|
||||
format: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'dd',
|
||||
},
|
||||
headingFormat: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'LLLL yyyy',
|
||||
},
|
||||
weekdayFormat: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'EE',
|
||||
},
|
||||
locale: {
|
||||
type: Object as PropType<Locale>,
|
||||
required: false,
|
||||
},
|
||||
weekStartsOn: {
|
||||
type: Number as PropType<1 | 2 | 3 | 4 | 5 | 6 | 0>,
|
||||
required: false,
|
||||
default: 1,
|
||||
validator: (i: unknown): boolean =>
|
||||
typeof i === 'number' && Number.isInteger(i) && i >= 0 && i <= 6,
|
||||
},
|
||||
lowerLimit: {
|
||||
type: Date as PropType<Date>,
|
||||
required: false,
|
||||
},
|
||||
upperLimit: {
|
||||
type: Date as PropType<Date>,
|
||||
required: false,
|
||||
},
|
||||
disabledDates: {
|
||||
type: Object as PropType<{
|
||||
dates?: Date[]
|
||||
predicate?: (target: Date) => boolean
|
||||
}>,
|
||||
required: false,
|
||||
},
|
||||
allowOutsideInterval: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
const format = computed(
|
||||
() => (format: string) => (value: Date | number) =>
|
||||
formatDate(value, format, {
|
||||
locale: props.locale,
|
||||
weekStartsOn: props.weekStartsOn,
|
||||
})
|
||||
)
|
||||
|
||||
const monthStart = computed(() => startOfMonth(props.pageDate))
|
||||
const monthEnd = computed(() => endOfMonth(props.pageDate))
|
||||
const currentMonth = computed(() => ({
|
||||
start: monthStart.value,
|
||||
end: monthEnd.value,
|
||||
}))
|
||||
|
||||
const displayedInterval = computed(() => ({
|
||||
start: startOfWeek(monthStart.value, {
|
||||
weekStartsOn: props.weekStartsOn,
|
||||
}),
|
||||
end: endOfWeek(monthEnd.value, {
|
||||
weekStartsOn: props.weekStartsOn,
|
||||
}),
|
||||
}))
|
||||
|
||||
const weekDays = computed(() => {
|
||||
const initial = props.weekStartsOn
|
||||
const dayFormat = format.value(props.weekdayFormat)
|
||||
return Array.from(Array(7))
|
||||
.map((_, i) => (initial + i) % 7)
|
||||
.map((v) =>
|
||||
setDay(new Date(), v, {
|
||||
weekStartsOn: props.weekStartsOn,
|
||||
})
|
||||
)
|
||||
.map(dayFormat)
|
||||
})
|
||||
|
||||
const isEnabled = (
|
||||
target: Date,
|
||||
lower?: Date,
|
||||
upper?: Date,
|
||||
disabledDates?: { dates?: Date[]; predicate?: (target: Date) => boolean }
|
||||
): boolean => {
|
||||
if (disabledDates?.dates?.some((date) => isSameDay(target, date)))
|
||||
return false
|
||||
if (disabledDates?.predicate?.(target)) return false
|
||||
if (!lower && !upper) return true
|
||||
if (lower && isBefore(target, startOfDay(lower))) return false
|
||||
if (upper && isAfter(target, endOfDay(upper))) return false
|
||||
return true
|
||||
}
|
||||
|
||||
const days = computed(() => {
|
||||
const today = new Date()
|
||||
const dayFormat = format.value(props.format)
|
||||
return eachDayOfInterval(displayedInterval.value).map(
|
||||
(value): Item => ({
|
||||
value,
|
||||
display: dayFormat(value),
|
||||
selected: !!props.selected && isSameDay(props.selected, value),
|
||||
current: isSameDay(today, value),
|
||||
disabled:
|
||||
(!props.allowOutsideInterval &&
|
||||
!isWithinInterval(value, currentMonth.value)) ||
|
||||
!isEnabled(
|
||||
value,
|
||||
props.lowerLimit,
|
||||
props.upperLimit,
|
||||
props.disabledDates
|
||||
),
|
||||
key: format.value('yyyy-MM-dd')(value),
|
||||
})
|
||||
)
|
||||
})
|
||||
|
||||
const heading = computed(() =>
|
||||
format.value(props.headingFormat)(props.pageDate)
|
||||
)
|
||||
const leftDisabled = computed(
|
||||
() =>
|
||||
props.lowerLimit &&
|
||||
(isSameMonth(props.lowerLimit, props.pageDate) ||
|
||||
isBefore(props.pageDate, props.lowerLimit))
|
||||
)
|
||||
const rightDisabled = computed(
|
||||
() =>
|
||||
props.upperLimit &&
|
||||
(isSameMonth(props.upperLimit, props.pageDate) ||
|
||||
isAfter(props.pageDate, props.upperLimit))
|
||||
)
|
||||
|
||||
const previousPage = () =>
|
||||
emit('update:pageDate', subMonths(props.pageDate, 1))
|
||||
const nextPage = () => emit('update:pageDate', addMonths(props.pageDate, 1))
|
||||
|
||||
return {
|
||||
weekDays,
|
||||
days,
|
||||
heading,
|
||||
leftDisabled,
|
||||
rightDisabled,
|
||||
previousPage,
|
||||
nextPage,
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
145
node_modules/vue3-datepicker/src/datepicker/MonthPicker.vue
generated
vendored
Normal file
145
node_modules/vue3-datepicker/src/datepicker/MonthPicker.vue
generated
vendored
Normal file
|
|
@ -0,0 +1,145 @@
|
|||
<template>
|
||||
<picker-popup
|
||||
headingClickable
|
||||
:columnCount="3"
|
||||
:items="months"
|
||||
:leftDisabled="leftDisabled"
|
||||
:rightDisabled="rightDisabled"
|
||||
viewMode="month"
|
||||
@left="previousPage"
|
||||
@right="nextPage"
|
||||
@heading="$emit('back')"
|
||||
@elementClick="$emit('select', $event)"
|
||||
>
|
||||
<template #heading>{{ heading }}</template>
|
||||
</picker-popup>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, computed, ref, watchEffect, PropType } from 'vue'
|
||||
import {
|
||||
startOfYear,
|
||||
endOfYear,
|
||||
eachMonthOfInterval,
|
||||
getMonth,
|
||||
getYear,
|
||||
subYears,
|
||||
addYears,
|
||||
format,
|
||||
isSameMonth,
|
||||
isBefore,
|
||||
isAfter,
|
||||
isSameYear,
|
||||
startOfMonth,
|
||||
endOfMonth,
|
||||
isValid,
|
||||
format as formatDate,
|
||||
} from 'date-fns'
|
||||
import PickerPopup, { Item } from './PickerPopup.vue'
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
PickerPopup,
|
||||
},
|
||||
emits: {
|
||||
'update:pageDate': (date: Date) => isValid(date),
|
||||
select: (date: Date) => isValid(date),
|
||||
back: () => true,
|
||||
},
|
||||
props: {
|
||||
/**
|
||||
* Currently selected date, needed for highlighting
|
||||
*/
|
||||
selected: {
|
||||
type: Date as PropType<Date>,
|
||||
required: false,
|
||||
},
|
||||
pageDate: {
|
||||
type: Date as PropType<Date>,
|
||||
required: true,
|
||||
},
|
||||
format: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'LLL',
|
||||
},
|
||||
locale: {
|
||||
type: Object as PropType<Locale>,
|
||||
required: false,
|
||||
},
|
||||
lowerLimit: {
|
||||
type: Date as PropType<Date>,
|
||||
required: false,
|
||||
},
|
||||
upperLimit: {
|
||||
type: Date as PropType<Date>,
|
||||
required: false,
|
||||
},
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
const from = computed(() => startOfYear(props.pageDate))
|
||||
const to = computed(() => endOfYear(props.pageDate))
|
||||
|
||||
const format = computed(
|
||||
() => (value: Date | number) =>
|
||||
formatDate(value, props.format, {
|
||||
locale: props.locale,
|
||||
})
|
||||
)
|
||||
|
||||
const isEnabled = (
|
||||
target: Date,
|
||||
lower: Date | undefined,
|
||||
upper: Date | undefined
|
||||
): boolean => {
|
||||
if (!lower && !upper) return true
|
||||
if (lower && isBefore(target, startOfMonth(lower))) return false
|
||||
if (upper && isAfter(target, endOfMonth(upper))) return false
|
||||
return true
|
||||
}
|
||||
|
||||
const months = computed(() =>
|
||||
eachMonthOfInterval({
|
||||
start: from.value,
|
||||
end: to.value,
|
||||
}).map(
|
||||
(value): Item => ({
|
||||
value,
|
||||
display: format.value(value),
|
||||
key: format.value(value),
|
||||
selected: !!props.selected && isSameMonth(props.selected, value),
|
||||
disabled: !isEnabled(value, props.lowerLimit, props.upperLimit),
|
||||
})
|
||||
)
|
||||
)
|
||||
|
||||
const heading = computed(() => getYear(from.value))
|
||||
|
||||
const leftDisabled = computed(
|
||||
() =>
|
||||
props.lowerLimit &&
|
||||
(isSameYear(props.lowerLimit, props.pageDate) ||
|
||||
isBefore(props.pageDate, props.lowerLimit))
|
||||
)
|
||||
const rightDisabled = computed(
|
||||
() =>
|
||||
props.upperLimit &&
|
||||
(isSameYear(props.upperLimit, props.pageDate) ||
|
||||
isAfter(props.pageDate, props.upperLimit))
|
||||
)
|
||||
|
||||
const previousPage = () =>
|
||||
emit('update:pageDate', subYears(props.pageDate, 1))
|
||||
const nextPage = () => emit('update:pageDate', addYears(props.pageDate, 1))
|
||||
|
||||
return {
|
||||
months,
|
||||
heading,
|
||||
leftDisabled,
|
||||
rightDisabled,
|
||||
previousPage,
|
||||
nextPage,
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
255
node_modules/vue3-datepicker/src/datepicker/PickerPopup.vue
generated
vendored
Normal file
255
node_modules/vue3-datepicker/src/datepicker/PickerPopup.vue
generated
vendored
Normal file
|
|
@ -0,0 +1,255 @@
|
|||
<template>
|
||||
<div
|
||||
class="v3dp__popout"
|
||||
:class="`v3dp__popout-${viewMode}`"
|
||||
:style="{ ['--popout-column-definition' as any]: `repeat(${columnCount}, 1fr)` }"
|
||||
@mousedown.prevent
|
||||
>
|
||||
<div class="v3dp__heading">
|
||||
<button
|
||||
class="v3dp__heading__button v3dp__heading__button__left"
|
||||
:disabled="leftDisabled"
|
||||
@click.stop.prevent="$emit('left')"
|
||||
>
|
||||
<slot name="arrow-left">
|
||||
<svg
|
||||
class="v3dp__heading__icon"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 6 8"
|
||||
>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<path stroke="none" d="M-9 16V-8h24v24z" />
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M5 0L1 4l4 4"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</slot>
|
||||
</button>
|
||||
<component
|
||||
:is="headingClickable ? 'button' : 'span'"
|
||||
class="v3dp__heading__center"
|
||||
@click.stop.prevent="$emit('heading')"
|
||||
>
|
||||
<slot name="heading" />
|
||||
</component>
|
||||
<button
|
||||
class="v3dp__heading__button v3dp__heading__button__right"
|
||||
:disabled="rightDisabled"
|
||||
@click.stop.prevent="$emit('right')"
|
||||
>
|
||||
<slot name="arrow-right">
|
||||
<svg
|
||||
class="v3dp__heading__icon"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 6 8"
|
||||
>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<path stroke="none" d="M15-8v24H-9V-8z" />
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M1 8l4-4-4-4"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</slot>
|
||||
</button>
|
||||
</div>
|
||||
<div class="v3dp__body">
|
||||
<template v-if="'subheading' in $slots">
|
||||
<div class="v3dp__subheading">
|
||||
<slot name="subheading" />
|
||||
</div>
|
||||
<hr class="v3dp__divider" />
|
||||
</template>
|
||||
<div class="v3dp__elements">
|
||||
<slot name="body">
|
||||
<button
|
||||
v-for="item in items"
|
||||
:key="item.key"
|
||||
:disabled="item.disabled"
|
||||
:class="[
|
||||
{
|
||||
selected: item.selected,
|
||||
current: item.current,
|
||||
},
|
||||
`v3dp__element__button__${viewMode}`,
|
||||
]"
|
||||
@click.stop.prevent="$emit('elementClick', item.value)"
|
||||
>
|
||||
<span>{{ item.display }}</span>
|
||||
</button>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { isValid } from 'date-fns'
|
||||
import { defineComponent, PropType, computed } from 'vue'
|
||||
|
||||
export interface Item {
|
||||
key: string
|
||||
value: Date
|
||||
display: number | string
|
||||
disabled: boolean
|
||||
selected: boolean
|
||||
current?: boolean
|
||||
}
|
||||
|
||||
export type ViewMode = 'year' | 'month' | 'day' | 'time' | 'custom'
|
||||
const VIEW_MODES = ['year', 'month', 'day', 'time', 'custom']
|
||||
|
||||
export default defineComponent({
|
||||
emits: {
|
||||
elementClick: (value: Date) => isValid(value),
|
||||
left: () => true,
|
||||
right: () => true,
|
||||
heading: () => true,
|
||||
},
|
||||
props: {
|
||||
headingClickable: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
leftDisabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
rightDisabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
columnCount: {
|
||||
type: Number,
|
||||
default: 7,
|
||||
},
|
||||
items: {
|
||||
type: Array as PropType<Item[]>,
|
||||
default: (): Item[] => [],
|
||||
},
|
||||
viewMode: {
|
||||
type: String as PropType<ViewMode>,
|
||||
required: true,
|
||||
validate: (x: unknown) => typeof x === 'string' && VIEW_MODES.includes(x),
|
||||
},
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.v3dp__popout {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
/* bottom: 0; */
|
||||
text-align: center;
|
||||
width: 17.5em;
|
||||
background-color: var(--popout-bg-color);
|
||||
box-shadow: var(--box-shadow);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 8px 0 1em;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.v3dp__popout * {
|
||||
color: inherit;
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
.v3dp__popout :deep(button) {
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.v3dp__popout :deep(button:not(:disabled)) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.v3dp__heading {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: var(--heading-size);
|
||||
line-height: var(--heading-size);
|
||||
font-weight: var(--heading-weight);
|
||||
}
|
||||
|
||||
.v3dp__heading__button {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: var(--heading-size);
|
||||
}
|
||||
|
||||
button.v3dp__heading__center:hover,
|
||||
.v3dp__heading__button:not(:disabled):hover {
|
||||
background-color: var(--heading-hover-color);
|
||||
}
|
||||
|
||||
.v3dp__heading__center {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.v3dp__heading__icon {
|
||||
height: 12px;
|
||||
stroke: var(--arrow-color);
|
||||
}
|
||||
|
||||
.v3dp__heading__button:disabled .v3dp__heading__icon {
|
||||
stroke: var(--elem-disabled-color);
|
||||
}
|
||||
|
||||
.v3dp__subheading,
|
||||
.v3dp__elements {
|
||||
display: grid;
|
||||
grid-template-columns: var(--popout-column-definition);
|
||||
font-size: var(--elem-font-size);
|
||||
}
|
||||
|
||||
.v3dp__subheading {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.v3dp__divider {
|
||||
border: 1px solid var(--divider-color);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.v3dp__elements :deep(button:disabled) {
|
||||
color: var(--elem-disabled-color);
|
||||
}
|
||||
|
||||
.v3dp__elements :deep(button) {
|
||||
padding: 0.3em 0.6em;
|
||||
}
|
||||
|
||||
.v3dp__elements :deep(button span) {
|
||||
display: block;
|
||||
line-height: 1.9em;
|
||||
height: 1.8em;
|
||||
border-radius: var(--elem-border-radius);
|
||||
}
|
||||
|
||||
.v3dp__elements :deep(button:not(:disabled):hover span) {
|
||||
background-color: var(--elem-hover-bg-color);
|
||||
color: var(--elem-hover-color);
|
||||
}
|
||||
|
||||
.v3dp__elements :deep(button.selected span) {
|
||||
background-color: var(--elem-selected-bg-color);
|
||||
color: var(--elem-selected-color);
|
||||
}
|
||||
|
||||
.v3dp__elements :deep(button.current span) {
|
||||
font-weight: var(--elem-current-font-weight);
|
||||
outline: 1px solid var(--elem-current-outline-color);
|
||||
}
|
||||
</style>
|
||||
233
node_modules/vue3-datepicker/src/datepicker/Timepicker.vue
generated
vendored
Normal file
233
node_modules/vue3-datepicker/src/datepicker/Timepicker.vue
generated
vendored
Normal file
|
|
@ -0,0 +1,233 @@
|
|||
<template>
|
||||
<picker-popup
|
||||
headingClickable
|
||||
:columnCount="2"
|
||||
:leftDisabled="true"
|
||||
:rightDisabled="true"
|
||||
viewMode="time"
|
||||
@heading="$emit('back')"
|
||||
>
|
||||
<template #heading
|
||||
>{{ padStartZero(hours) }}:{{ padStartZero(minutes) }}</template
|
||||
>
|
||||
<template #body>
|
||||
<div ref="hoursListRef" class="v3dp__column">
|
||||
<button
|
||||
v-for="item in hoursList"
|
||||
:key="item.value"
|
||||
:ref="item.ref"
|
||||
:class="[{ selected: item.selected }, 'v3dp__element_button__hour']"
|
||||
:disabled="!isEnabled(item.date)"
|
||||
@click.stop.prevent="hours = item.value"
|
||||
>
|
||||
<span>{{ padStartZero(item.value) }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div ref="minutesListRef" class="v3dp__column">
|
||||
<button
|
||||
v-for="item in minutesList"
|
||||
:key="item.value"
|
||||
:ref="item.ref"
|
||||
:class="[{ selected: item.selected }, 'v3dp__element_button__minute']"
|
||||
:disabled="!isEnabled(item.date)"
|
||||
@click.stop.prevent="selectMinutes(item)"
|
||||
>
|
||||
<span>{{ padStartZero(item.value) }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</picker-popup>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {
|
||||
defineComponent,
|
||||
computed,
|
||||
ref,
|
||||
watch,
|
||||
nextTick,
|
||||
ComputedRef,
|
||||
Ref,
|
||||
PropType,
|
||||
} from 'vue'
|
||||
import { isSameHour, isSameMinute, isValid, set } from 'date-fns'
|
||||
import PickerPopup from './PickerPopup.vue'
|
||||
|
||||
interface Item {
|
||||
value: number
|
||||
date: Date
|
||||
selected: boolean | undefined
|
||||
ref: Ref<null | HTMLElement>
|
||||
}
|
||||
|
||||
function scrollParentToChild(parent: HTMLElement, child: HTMLElement) {
|
||||
const parentRect = parent.getBoundingClientRect()
|
||||
const parentViewableArea = {
|
||||
height: parent.clientHeight,
|
||||
width: parent.clientWidth,
|
||||
}
|
||||
|
||||
const childRect = child.getBoundingClientRect()
|
||||
const isViewable =
|
||||
childRect.top >= parentRect.top &&
|
||||
childRect.bottom <= parentRect.top + parentViewableArea.height
|
||||
|
||||
if (!isViewable) {
|
||||
const scrollTop = childRect.top - parentRect.top
|
||||
const scrollBot = childRect.bottom - parentRect.bottom
|
||||
if (Math.abs(scrollTop) < Math.abs(scrollBot)) {
|
||||
parent.scrollTop += scrollTop
|
||||
} else {
|
||||
parent.scrollTop += scrollBot
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
PickerPopup,
|
||||
},
|
||||
emits: {
|
||||
select: (date: Date) => isValid(date),
|
||||
back: () => true,
|
||||
},
|
||||
props: {
|
||||
selected: {
|
||||
type: Date as PropType<Date>,
|
||||
required: false,
|
||||
},
|
||||
pageDate: {
|
||||
type: Date as PropType<Date>,
|
||||
required: true,
|
||||
},
|
||||
visible: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
disabledTime: {
|
||||
type: Object as PropType<{
|
||||
dates?: Date[]
|
||||
predicate?: (target: Date) => boolean
|
||||
}>,
|
||||
required: false,
|
||||
},
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
const hoursListRef = ref(null as HTMLElement | null)
|
||||
const minutesListRef = ref(null as HTMLElement | null)
|
||||
|
||||
const currentDate = computed(() => props.pageDate ?? props.selected)
|
||||
|
||||
const hours = ref(currentDate.value.getHours())
|
||||
const minutes = ref(currentDate.value.getMinutes())
|
||||
|
||||
watch(
|
||||
() => props.selected,
|
||||
(value: Date | undefined) => {
|
||||
let newHours = 0
|
||||
let newMinutes = 0
|
||||
|
||||
if (value) {
|
||||
newHours = value.getHours()
|
||||
newMinutes = value.getMinutes()
|
||||
}
|
||||
|
||||
hours.value = newHours
|
||||
minutes.value = newMinutes
|
||||
}
|
||||
)
|
||||
|
||||
const hoursList: ComputedRef<Item[]> = computed(() =>
|
||||
[...Array(24).keys()].map(
|
||||
(value): Item => ({
|
||||
value,
|
||||
date: set(new Date(currentDate.value.getTime()), {
|
||||
hours: value,
|
||||
minutes: minutes.value,
|
||||
seconds: 0,
|
||||
}),
|
||||
selected: hours.value === value,
|
||||
ref: ref(null),
|
||||
})
|
||||
)
|
||||
)
|
||||
const minutesList: ComputedRef<Item[]> = computed(() =>
|
||||
[...Array(60).keys()].map((value) => ({
|
||||
value,
|
||||
date: set(new Date(currentDate.value.getTime()), {
|
||||
hours: hours.value,
|
||||
minutes: value,
|
||||
seconds: 0,
|
||||
}),
|
||||
selected: minutes.value === value,
|
||||
ref: ref(null),
|
||||
}))
|
||||
)
|
||||
|
||||
const selectMinutes = (item: Item) => {
|
||||
minutes.value = item.value
|
||||
|
||||
emit('select', item.date)
|
||||
}
|
||||
|
||||
const scroll = () => {
|
||||
const currentHour = hoursList.value.find(
|
||||
(item) => item.ref.value?.classList?.contains('selected') ?? false
|
||||
)
|
||||
const currentMinute = minutesList.value.find(
|
||||
(item) => item.ref.value?.classList?.contains('selected') ?? false
|
||||
)
|
||||
|
||||
if (currentHour && currentMinute) {
|
||||
scrollParentToChild(hoursListRef.value!, currentHour.ref.value!)
|
||||
scrollParentToChild(minutesListRef.value!, currentMinute.ref.value!)
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
nextTick(scroll)
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
const isEnabled = (target: Date): boolean => {
|
||||
if (
|
||||
props.disabledTime?.dates?.some(
|
||||
(date) => isSameHour(target, date) && isSameMinute(target, date)
|
||||
)
|
||||
) {
|
||||
return false
|
||||
}
|
||||
if (props.disabledTime?.predicate?.(target)) return false
|
||||
return true
|
||||
}
|
||||
|
||||
const padStartZero = (item: number): string => `0${item}`.substr(-2)
|
||||
|
||||
return {
|
||||
hoursListRef,
|
||||
minutesListRef,
|
||||
hours,
|
||||
minutes,
|
||||
hoursList,
|
||||
minutesList,
|
||||
padStartZero,
|
||||
selectMinutes,
|
||||
isEnabled,
|
||||
scroll,
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.v3dp__column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
height: 190px;
|
||||
}
|
||||
</style>
|
||||
123
node_modules/vue3-datepicker/src/datepicker/YearPicker.vue
generated
vendored
Normal file
123
node_modules/vue3-datepicker/src/datepicker/YearPicker.vue
generated
vendored
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
<template>
|
||||
<picker-popup
|
||||
:columnCount="3"
|
||||
:leftDisabled="leftDisabled"
|
||||
:rightDisabled="rightDisabled"
|
||||
:items="years"
|
||||
viewMode="year"
|
||||
@left="previousPage"
|
||||
@right="nextPage"
|
||||
@elementClick="$emit('select', $event)"
|
||||
>
|
||||
<template #heading>{{ heading }}</template>
|
||||
</picker-popup>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, computed, ref, watchEffect, PropType } from 'vue'
|
||||
import {
|
||||
startOfDecade,
|
||||
endOfDecade,
|
||||
eachYearOfInterval,
|
||||
getYear,
|
||||
subYears,
|
||||
addYears,
|
||||
isAfter,
|
||||
isBefore,
|
||||
getDecade,
|
||||
isValid,
|
||||
} from 'date-fns'
|
||||
import PickerPopup, { Item } from './PickerPopup.vue'
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
PickerPopup,
|
||||
},
|
||||
emits: {
|
||||
'update:pageDate': (date: Date) => isValid(date),
|
||||
select: (date: Date) => isValid(date),
|
||||
},
|
||||
props: {
|
||||
selected: {
|
||||
type: Date as PropType<Date>,
|
||||
required: false,
|
||||
},
|
||||
pageDate: {
|
||||
type: Date as PropType<Date>,
|
||||
required: true,
|
||||
},
|
||||
lowerLimit: {
|
||||
type: Date as PropType<Date>,
|
||||
required: false,
|
||||
},
|
||||
upperLimit: {
|
||||
type: Date as PropType<Date>,
|
||||
required: false,
|
||||
},
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
const from = computed(() => startOfDecade(props.pageDate))
|
||||
const to = computed(() => endOfDecade(props.pageDate))
|
||||
|
||||
const isEnabled = (
|
||||
target: Date,
|
||||
lower: Date | undefined,
|
||||
upper: Date | undefined
|
||||
): boolean => {
|
||||
if (!lower && !upper) return true
|
||||
if (lower && getYear(target) < getYear(lower)) return false
|
||||
if (upper && getYear(target) > getYear(upper)) return false
|
||||
return true
|
||||
}
|
||||
|
||||
const years = computed(() =>
|
||||
eachYearOfInterval({
|
||||
start: from.value,
|
||||
end: to.value,
|
||||
}).map(
|
||||
(value): Item => ({
|
||||
value,
|
||||
key: String(getYear(value)),
|
||||
display: getYear(value),
|
||||
selected:
|
||||
!!props.selected && getYear(value) === getYear(props.selected),
|
||||
disabled: !isEnabled(value, props.lowerLimit, props.upperLimit),
|
||||
})
|
||||
)
|
||||
)
|
||||
|
||||
const heading = computed(() => {
|
||||
const start = getYear(from.value)
|
||||
const end = getYear(to.value)
|
||||
|
||||
return `${start} - ${end}`
|
||||
})
|
||||
|
||||
const leftDisabled = computed(
|
||||
() =>
|
||||
props.lowerLimit &&
|
||||
(getDecade(props.lowerLimit) === getDecade(props.pageDate) ||
|
||||
isBefore(props.pageDate, props.lowerLimit))
|
||||
)
|
||||
const rightDisabled = computed(
|
||||
() =>
|
||||
props.upperLimit &&
|
||||
(getDecade(props.upperLimit) === getDecade(props.pageDate) ||
|
||||
isAfter(props.pageDate, props.upperLimit))
|
||||
)
|
||||
|
||||
const previousPage = () =>
|
||||
emit('update:pageDate', subYears(props.pageDate, 10))
|
||||
const nextPage = () => emit('update:pageDate', addYears(props.pageDate, 10))
|
||||
|
||||
return {
|
||||
years,
|
||||
heading,
|
||||
leftDisabled,
|
||||
rightDisabled,
|
||||
previousPage,
|
||||
nextPage,
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue