From 80817b7aa04f4645825422388e2df47e6b283d6a Mon Sep 17 00:00:00 2001 From: shubhadip Date: Sat, 7 Nov 2020 16:21:06 +0530 Subject: [PATCH] init --- .browserslistrc | 3 + .editorconfig | 8 + .env.development | 3 + .env.production | 1 + .env.testing | 1 + .eslintignore | 11 + .eslintrc.js | 113 + .gitignore | 29 + .prettierrc.json | 12 + README.md | 181 + babel.config.js | 3 + build/rollup-dev.config.js | 104 + build/rollup.config.js | 199 + dist/datepicker.cjs.js | 2690 ++++ dist/datepicker.esm.js | 2690 ++++ dist/datepicker.min.js | 1 + example/datepicker.js | 11118 ++++++++++++++ example/index.html | 11 + package.json | 104 + postcss.config.js | 15 + public/assets/icons/chevron-down.svg | 1 + public/favicon.ico | Bin 0 -> 4286 bytes public/index.html | 17 + src/App.vue | 193 + src/assets/calendar.svg | 1 + src/components/datepicker/DateInput.vue | 262 + src/components/datepicker/Datepicker.vue | 661 + src/components/datepicker/PickerDay.vue | 515 + src/components/datepicker/PickerMonth.vue | 308 + src/components/datepicker/PickerYear.vue | 290 + src/components/datepicker/datepicker.css | 196 + src/components/datepicker/locale/index.ts | 74 + src/components/datepicker/utils/DateUtils.ts | 279 + src/directives/click-outside.ts | 70 + src/main.ts | 4 + src/shared/enum.ts | 15 + src/shared/interfaces.ts | 36 + src/shared/utils.ts | 7 + src/shared/validations.ts | 76 + src/shims-vue.d.ts | 5 + tests/unit/.eslintrc | 9 + tests/unit/jest.conf.js | 18 + tests/unit/setup.js | 3 + tests/unit/specs/DateUtils.spec.js | 200 + testumdbuild/app.js | 43 + testumdbuild/appdatepicker.min.js | 1 + testumdbuild/index.html | 53 + tsconfig.json | 23 + types/index.d.ts | 28 + yarn.lock | 13446 +++++++++++++++++ 50 files changed, 34131 insertions(+) create mode 100644 .browserslistrc create mode 100644 .editorconfig create mode 100644 .env.development create mode 100644 .env.production create mode 100644 .env.testing create mode 100644 .eslintignore create mode 100644 .eslintrc.js create mode 100644 .gitignore create mode 100644 .prettierrc.json create mode 100644 README.md create mode 100644 babel.config.js create mode 100644 build/rollup-dev.config.js create mode 100644 build/rollup.config.js create mode 100644 dist/datepicker.cjs.js create mode 100644 dist/datepicker.esm.js create mode 100644 dist/datepicker.min.js create mode 100644 example/datepicker.js create mode 100644 example/index.html create mode 100644 package.json create mode 100644 postcss.config.js create mode 100644 public/assets/icons/chevron-down.svg create mode 100644 public/favicon.ico create mode 100644 public/index.html create mode 100644 src/App.vue create mode 100644 src/assets/calendar.svg create mode 100644 src/components/datepicker/DateInput.vue create mode 100644 src/components/datepicker/Datepicker.vue create mode 100644 src/components/datepicker/PickerDay.vue create mode 100644 src/components/datepicker/PickerMonth.vue create mode 100644 src/components/datepicker/PickerYear.vue create mode 100644 src/components/datepicker/datepicker.css create mode 100644 src/components/datepicker/locale/index.ts create mode 100644 src/components/datepicker/utils/DateUtils.ts create mode 100644 src/directives/click-outside.ts create mode 100644 src/main.ts create mode 100644 src/shared/enum.ts create mode 100644 src/shared/interfaces.ts create mode 100644 src/shared/utils.ts create mode 100644 src/shared/validations.ts create mode 100644 src/shims-vue.d.ts create mode 100644 tests/unit/.eslintrc create mode 100644 tests/unit/jest.conf.js create mode 100644 tests/unit/setup.js create mode 100644 tests/unit/specs/DateUtils.spec.js create mode 100644 testumdbuild/app.js create mode 100644 testumdbuild/appdatepicker.min.js create mode 100644 testumdbuild/index.html create mode 100644 tsconfig.json create mode 100644 types/index.d.ts create mode 100644 yarn.lock diff --git a/.browserslistrc b/.browserslistrc new file mode 100644 index 0000000..214388f --- /dev/null +++ b/.browserslistrc @@ -0,0 +1,3 @@ +> 1% +last 2 versions +not dead diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..8815108 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,8 @@ +[*.{js,jsx,ts,tsx,vue}] +indent_style = space +indent_size = 2 +end_of_line = lf +trim_trailing_whitespace = true +insert_final_newline = true +max_line_length = 100 +format_on_save = true \ No newline at end of file diff --git a/.env.development b/.env.development new file mode 100644 index 0000000..f7401d0 --- /dev/null +++ b/.env.development @@ -0,0 +1,3 @@ +NODE_ENV=development + + diff --git a/.env.production b/.env.production new file mode 100644 index 0000000..cbde1cc --- /dev/null +++ b/.env.production @@ -0,0 +1 @@ +NODE_ENV=production diff --git a/.env.testing b/.env.testing new file mode 100644 index 0000000..cbde1cc --- /dev/null +++ b/.env.testing @@ -0,0 +1 @@ +NODE_ENV=production diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..3e1c48c --- /dev/null +++ b/.eslintignore @@ -0,0 +1,11 @@ +build/ +node_modules/ +src/shims-tsx.d.ts +src/shims-vue.d.ts +*.config.js +src/main.ts +test/ +dist/*.hot-update.json +dist/index.html +dist/webpack-stats.json +tests/ \ No newline at end of file diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..bf72098 --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,113 @@ +module.exports = { + root: true, + env: { + node: true, + }, + extends: [ + 'plugin:@typescript-eslint/recommended-requiring-type-checking', + 'plugin:vue/vue3-essential', + '@vue/airbnb', + '@vue/typescript/recommended', + '@vue/prettier', + '@vue/prettier/@typescript-eslint', + ], + parserOptions: { + ecmaVersion: 2020, + sourceType: 'module', + project: './tsconfig.json', + createDefaultProgram: true, + }, + plugins: ['@typescript-eslint'], + rules: { + 'no-unused-vars': 'off', + 'no-useless-constructor': 'off', + indent: 'off', + 'no-tabs': 'error', + 'max-len': [2, 140, 4, { ignoreUrls: true }], + 'no-template-curly-in-string': 'error', + 'prefer-arrow-callback': 'error', + 'no-param-reassign': 'off', + 'class-methods-use-this': 'off', + 'import/prefer-default-export': 'off', + 'comma-dangle': 'off', + 'no-restricted-syntax': 'off', + 'no-unused-expressions': ['warn', { allowShortCircuit: true, allowTernary: true }], + '@typescript-eslint/no-unused-vars': 'error', + '@typescript-eslint/no-useless-constructor': 'error', + '@typescript-eslint/default-param-last': 'error', + '@typescript-eslint/explicit-function-return-type': 'error', + '@typescript-eslint/no-empty-interface': 'warn', + '@typescript-eslint/no-explicit-any': 'off', + '@typescript-eslint/no-implied-eval': 'error', + '@typescript-eslint/no-inferrable-types': 'error', + '@typescript-eslint/no-unnecessary-boolean-literal-compare': 'error', + '@typescript-eslint/interface-name-prefix': 'off', + '@typescript-eslint/indent': ['error', 2], + '@typescript-eslint/naming-convention': [ + 'warn', + { + selector: 'parameter', + format: ['camelCase'], + leadingUnderscore: 'allow', + }, + + { + selector: 'memberLike', + modifiers: ['private'], + format: ['camelCase'], + leadingUnderscore: 'allow', + }, + + { + selector: 'typeLike', + format: ['PascalCase'], + }, + { + selector: 'class', + format: ['PascalCase'], + }, + { + selector: 'interface', + format: ['PascalCase'], + prefix: ['I'], + }, + { + selector: 'enum', + format: ['PascalCase'], + }, + ], + 'require-jsdoc': [ + 'error', + { + require: { + FunctionDeclaration: true, + MethodDefinition: false, + ClassDeclaration: false, + ArrowFunctionExpression: false, + FunctionExpression: false, + }, + }, + ], + 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', + 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', + }, + settings: { + 'import/extensions': ['.js', '.ts'], + 'import/parsers': { + '@typescript-eslint/parser': ['.ts', '.tsx'], + }, + 'import/resolver': { + node: { + extensions: ['.js', '.jsx', '.ts', '.tsx', 'd.ts'], + }, + }, + }, + overrides: [ + { + files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'], + env: { + jest: true, + }, + }, + ], +}; diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..2269bb7 --- /dev/null +++ b/.gitignore @@ -0,0 +1,29 @@ +.DS_Store +node_modules + +# local env files +.env.local +.env.*.local +.vscode +# Log files +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# Editor directories and files +.idea +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? +dist/assets +dist/webpack-stats.json +dist/index.html +dist/favicon.ico +dist/js/ +dist/img/ +dist/app-*.js +dist/*.hot-update.js +dist/*.hot-update.json +.eslintcache \ No newline at end of file diff --git a/.prettierrc.json b/.prettierrc.json new file mode 100644 index 0000000..1b6814e --- /dev/null +++ b/.prettierrc.json @@ -0,0 +1,12 @@ +{ + "printWidth": 120, + "tabWidth": 2, + "tabs": false, + "semi": true, + "singleQuote": true, + "quoteProps": "as-needed", + "trailingComma": "es5", + "bracketSpacing": true, + "jsxBracketSameLine": false, + "arrowParens": "always" +} diff --git a/README.md b/README.md new file mode 100644 index 0000000..cbfac4e --- /dev/null +++ b/README.md @@ -0,0 +1,181 @@ +# Vue 3 Datepicker + +A datepicker Vue component. Compatible with Vue 3 Only + +- [Install](#install) +- [Usage](#usage) +- [Date Formatting](#date-formatting) +- [Props](#available-props) +- [Events](#events) +- [Disabled dates](#disabled-dates) +- [Highlighted dates](#highlighted-dates) + +To view demo examples locally clone the repo and run `npm install && npm run serve` + +## Install + +``` bash +npm install vuejs3-datepicker --save + +yarn add vuejs3-datepicker +``` + +``` javascript +import Datepicker from 'vuejs3-datepicker'; + +export default { + // ... + components: { + Datepicker + } + // ... +} +``` + +## Usage + +``` html + +``` + +*value* prop if passed should be a Date object + +``` html + + +``` +support name attribute for normal html form submission +``` html + +``` +Using `v-model` +``` html + +``` +Emits events +``` html + +``` +Inline always open version +``` html + +``` +Programtic Acess of value of datepicker +```html + +``` +```javascript +const isValid = (inputRef.value as any).isValid(); +const { selectedDate } = (inputRef.value as any).value; +``` + +## Available props + +| Prop | Type | Default | Description | +|-------------------------------|-----------------|-------------|------------------------------------------| +| modelValue | Date\|String | | Date value of the datepicker | +| value | Date\|String | | Date value of the datepicker | +| format | String\|Function| dd MMM yyyy | Date formatting string or function | +| full-month-name | Boolean | false | To show the full month name | +| disabled-dates | Object | | See below for configuration | +| placeholder | String | | Input placeholder text | +| inline | Boolean | | To show the datepicker always open | +| calendar-class | String\|Object | | CSS class applied to the calendar el | +| input-class | String\|Object | | CSS class applied to the input el | +| wrapper-class | String\|Object | | CSS class applied to the outer div | +| monday-first | Boolean | false | To start the week on Monday | +| clear-button | Boolean | false | Show an icon for clearing the date | +| clear-button-icon | String | | Use icon for button (ex: fa fa-times) | +| calendar-button | Boolean | false | Show an icon that that can be clicked | +| calendar-button-icon | String | | Use icon for button (ex: fa fa-calendar) | +| calendar-button-icon-content | String | | Use for material-icons (ex: event) | +| day-cell-content | Function | | Use to render custom content in day cell | +| initial-view | String | minimumView | If set, open on that view | +| disabled | Boolean | false | If true, disable Datepicker on screen | +| required | Boolean | false | Sets html required attribute on input | +| typeable | Boolean | false | If true, allow the user to type the date | +| use-utc | Boolean | false | use UTC for time calculations | +| open-date | Date\|String | | If set, open on that date | +| minimum-view | String | 'day' | If set, lower-level views won't show | +| maximum-view | String | 'year' | If set, higher-level views won't show | +| autovalidate | Boolean | false | Basic Date Validtion on Blur | +| validations | Array | | Accepts an Array of Objects [{'name':'required', message: 'custom Message'}]| + + +## Events + +These events are emitted on actions in the datepicker + +| Event | Output | Description | +|-------------------|------------|--------------------------------------| +| opened | | The picker is opened | +| closed | | The picker is closed | +| selected | Date\|null | A date has been selected | +| input | Date\|null | Input value has been modified | +| cleared | | Selected date has been cleared | +| changed-month | Object | Month page has been changed | +| changed-year | Object | Year page has been changed | +| changed-decade | Object | Decade page has been changed | + + +#### Function formatter + +Delegates date formatting to provided function. +Function will be called with date and it has to return formated date as a string. +This allow us to use moment, date-fns, globalize or any other library to format date. + +``` html + + +``` + +## Disabled Dates +Dates can be disabled in a number of ways. + +``` html + + +``` + +## Highlighted Dates +``` html + + +``` \ No newline at end of file diff --git a/babel.config.js b/babel.config.js new file mode 100644 index 0000000..ecf612a --- /dev/null +++ b/babel.config.js @@ -0,0 +1,3 @@ +module.exports = { + presets: ['@babel/preset-typescript', '@babel/preset-env'], +}; diff --git a/build/rollup-dev.config.js b/build/rollup-dev.config.js new file mode 100644 index 0000000..35f648b --- /dev/null +++ b/build/rollup-dev.config.js @@ -0,0 +1,104 @@ +import path from 'path'; +import vue from 'rollup-plugin-vue'; +import alias from '@rollup/plugin-alias'; +import commonjs from '@rollup/plugin-commonjs'; +import resolve from '@rollup/plugin-node-resolve'; +import replace from '@rollup/plugin-replace'; +import babel from '@rollup/plugin-babel'; +import PostCSS from 'rollup-plugin-postcss'; +import autoprefixer from 'autoprefixer'; +import simplevars from 'postcss-simple-vars'; +import typescript from 'rollup-plugin-typescript2'; +import nested from 'postcss-nested'; +import serve from 'rollup-plugin-serve' +import image from '@rollup/plugin-image'; +import livereload from 'rollup-plugin-livereload' + +const postcssPluginList = [ + simplevars, + nested, + autoprefixer({ + overrideBrowserslist: '> 1%, IE 6, Explorer >= 10, Safari >= 7', + }) +]; + +const baseConfig = { + plugins: { + preVue: [ + alias({ + entries: [{ find: 'vue', replacement: 'node_modules/vue/dist/vue.runtime.esm-browser.js' }], + customResolver: resolve({ + extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'], + }), + }), + ], + replace: { + 'process.env.NODE_ENV': JSON.stringify('production'), + __VUE_OPTIONS_API__: JSON.stringify(true), + __VUE_PROD_DEVTOOLS__: JSON.stringify(false), + }, + vue: { + target: 'browser', + preprocessStyles: true, + postcssPlugins: [...postcssPluginList], + }, + postVue: [ + PostCSS({ + modules: { + generateScopedName: '[local]___[hash:base64:5]', + }, + include: /&module=.*\.css$/, + }), + PostCSS({ include: /(? 1%, IE 6, Explorer >= 10, Safari >= 7', + }) +]; + +const argv = minimist(process.argv.slice(2)); + +const projectRoot = path.resolve(__dirname, '..'); + +const baseConfig = { + plugins: { + preVue: [ + alias({ + entries: [ + { + find: '@', + replacement: `${path.resolve(projectRoot, 'src')}`, + }, + ], + customResolver: resolve({ + extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'], + }), + }), + ], + replace: { + 'process.env.NODE_ENV': JSON.stringify('production'), + __VUE_OPTIONS_API__: JSON.stringify(true), + __VUE_PROD_DEVTOOLS__: JSON.stringify(false), + }, + vue: { + target: 'browser', + preprocessStyles: true, + postcssPlugins: [...postcssPluginList], + }, + postVue: [ + PostCSS({ + modules: { + generateScopedName: '[local]___[hash:base64:5]', + }, + include: /&module=.*\.css$/, + }), + PostCSS({ include: /(? fs.statSync(path.join(baseFolder + componentsFolder, f)).isDirectory()); + + +const capitalize = (s) => { + if (typeof s !== 'string') return ''; + return s.charAt(0).toUpperCase() + s.slice(1); +}; + +// Customize configs for individual targets +let buildFormats = []; + +if (!argv.format) { + const esConfig = { + ...baseConfig, + input: './src/components/datepicker/Datepicker.vue', + external, + output: { + // format: 'esm', + // dir: 'dist/esm', + // exports: 'named', + format: 'esm', + file: 'dist/datepicker.esm.js', + }, + plugins: [ + typescript(), + commonjs(), + replace(baseConfig.plugins.replace), + ...baseConfig.plugins.preVue, + vue(baseConfig.plugins.vue), + ...baseConfig.plugins.postVue, + babel({ + ...baseConfig.plugins.babel, + presets: [['@babel/preset-env', { modules: false }]], + }), + ], + }; + const cjsBuild = { + input: './src/components/datepicker/Datepicker.vue', + external, + output: { + // format: 'cjs', + // dir: 'dist/cjs', + // exports: 'named', + format: 'esm', + file: 'dist/datepicker.cjs.js', + globals + }, + plugins: [ + typescript(), + commonjs(), + replace(baseConfig.plugins.replace), + ...baseConfig.plugins.preVue, + vue(baseConfig.plugins.vue), + ...baseConfig.plugins.postVue, + babel({ + ...baseConfig.plugins.babel, + presets: [['@babel/preset-env', { modules: false }]], + }), + ], + }; + const umdBuild = { + input: './src/components/datepicker/Datepicker.vue', + external, + output: { + format: 'umd', + name: capitalize('datepicker'), + // dir: 'dist/umd', + // exports: 'named', + file: 'dist/datepicker.min.js', + globals + // globals, + }, + plugins: [ + typescript(), + commonjs(), + replace(baseConfig.plugins.replace), + ...baseConfig.plugins.preVue, + vue(baseConfig.plugins.vue), + ...baseConfig.plugins.postVue, + babel({ + ...baseConfig.plugins.babel, + presets: [['@babel/preset-env', { modules: false }]], + }), + terser({ + output: { + comments: '/^!/', + }, + }) + ], + }; + buildFormats.push(esConfig); + buildFormats.push(cjsBuild); + buildFormats.push(umdBuild); + buildFormats + +} + +// Export config +export default buildFormats; diff --git a/dist/datepicker.cjs.js b/dist/datepicker.cjs.js new file mode 100644 index 0000000..57552a7 --- /dev/null +++ b/dist/datepicker.cjs.js @@ -0,0 +1,2690 @@ +import { defineComponent, ref, computed, watch, openBlock, createBlock, createCommentVNode, createVNode, createTextVNode, toDisplayString, renderSlot, withDirectives, withModifiers, Fragment, renderList, vShow, reactive, resolveComponent, withCtx } from 'vue'; + +function _typeof(obj) { + "@babel/helpers - typeof"; + + if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { + _typeof = function (obj) { + return typeof obj; + }; + } else { + _typeof = function (obj) { + return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; + }; + } + + return _typeof(obj); +} + +function _slicedToArray(arr, i) { + return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); +} + +function _arrayWithHoles(arr) { + if (Array.isArray(arr)) return arr; +} + +function _iterableToArrayLimit(arr, i) { + if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; + var _arr = []; + var _n = true; + var _d = false; + var _e = undefined; + + try { + for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { + _arr.push(_s.value); + + if (i && _arr.length === i) break; + } + } catch (err) { + _d = true; + _e = err; + } finally { + try { + if (!_n && _i["return"] != null) _i["return"](); + } finally { + if (_d) throw _e; + } + } + + return _arr; +} + +function _unsupportedIterableToArray(o, minLen) { + if (!o) return; + if (typeof o === "string") return _arrayLikeToArray(o, minLen); + var n = Object.prototype.toString.call(o).slice(8, -1); + if (n === "Object" && o.constructor) n = o.constructor.name; + if (n === "Map" || n === "Set") return Array.from(o); + if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); +} + +function _arrayLikeToArray(arr, len) { + if (len == null || len > arr.length) len = arr.length; + + for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; + + return arr2; +} + +function _nonIterableRest() { + throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); +} + +function _createForOfIteratorHelper(o, allowArrayLike) { + var it; + + if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { + if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { + if (it) o = it; + var i = 0; + + var F = function () {}; + + return { + s: F, + n: function () { + if (i >= o.length) return { + done: true + }; + return { + done: false, + value: o[i++] + }; + }, + e: function (e) { + throw e; + }, + f: F + }; + } + + throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); + } + + var normalCompletion = true, + didErr = false, + err; + return { + s: function () { + it = o[Symbol.iterator](); + }, + n: function () { + var step = it.next(); + normalCompletion = step.done; + return step; + }, + e: function (e) { + didErr = true; + err = e; + }, + f: function () { + try { + if (!normalCompletion && it.return != null) it.return(); + } finally { + if (didErr) throw err; + } + } + }; +} + +// import en from '@/components/datepicker/locale/translations/en'; + +/** + * Returns the full year, using UTC or not + * @param {Date} date + */ +var getFullYear = function getFullYear(date) { + var useUtc = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; + return useUtc ? date.getUTCFullYear() : date.getFullYear(); +}; +/** + * Returns the month, using UTC or not + * @param {Date} date + */ + +var getMonth = function getMonth(date) { + var useUtc = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; + return useUtc ? date.getUTCMonth() : date.getMonth(); +}; +/** + * Returns the date, using UTC or not + * @param {Date} date + */ + +var getDate = function getDate(date) { + var useUtc = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; + return useUtc ? date.getUTCDate() : date.getDate(); +}; +/** + * Returns the day, using UTC or not + * @param {Date} date + */ + +var getDay = function getDay(date) { + var useUtc = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; + return useUtc ? date.getUTCDay() : date.getDay(); +}; +/** + * Sets the full year, using UTC or not + * @param {Date} date + */ + +var setFullYear = function setFullYear(date, value) { + var useUtc = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false; + return useUtc ? date.setUTCFullYear(value) : date.setFullYear(value); +}; +/** + * Sets the month, using UTC or not + * @param {Date} date + */ + +var setMonth = function setMonth(date, value) { + var useUtc = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false; + return useUtc ? date.setUTCMonth(value) : date.setMonth(value); +}; +/** + * Sets the date, using UTC or not + * @param {Date} date + * @param {Number} value + */ + +var setDate = function setDate(date, value) { + var useUtc = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false; + return useUtc ? date.setUTCDate(value) : date.setDate(value); +}; +/** + * Check if date1 is equivalent to date2, without comparing the time + * @see https://stackoverflow.com/a/6202196/4455925 + * @param {Date} date1 + * @param {Date} date2 + */ + +var compareDates = function compareDates(date1, date2) { + var useUtc = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true; + var d1 = new Date(date1.getTime()); + var d2 = new Date(date2.getTime()); + + if (useUtc) { + d1.setUTCHours(0, 0, 0, 0); + d2.setUTCHours(0, 0, 0, 0); + } else { + d1.setHours(0, 0, 0, 0); + d2.setHours(0, 0, 0, 0); + } + + return d1.getTime() === d2.getTime(); +}; +/** + * Validates a date object + * @param {Date} date - an object instantiated with the new Date constructor + * @return {Boolean} + */ + +var isValidDate = function isValidDate(date) { + if (Object.prototype.toString.call(date) !== '[object Date]') { + return false; + } + + return !Number.isNaN(date.getTime()); +}; +/** + * Return abbreviated week day name + * @param {Date} + * @param {Array} + * @return {String} + */ + +var getDayNameAbbr = function getDayNameAbbr(date, days) { + if (_typeof(date) !== 'object') { + throw TypeError('Invalid Type'); + } + + return days[getDay(date)]; +}; +/** + * Return name of the month + * @param {Number|Date} + * @param {Array} + * @return {String} + */ + +var getMonthName = function getMonthName(month, months) { + if (!months) { + throw Error('missing 2nd parameter Months array'); + } + + if (_typeof(month) === 'object') { + return months[getMonth(month)]; + } + + if (typeof month === 'number') { + return months[month]; + } + + throw TypeError('Invalid type'); +}; +/** + * Return an abbreviated version of the month + * @param {Number|Date} + * @return {String} + */ + +var getMonthNameAbbr = function getMonthNameAbbr(month, monthsAbbr) { + if (!monthsAbbr) { + throw Error('missing 2nd paramter Months array'); + } + + if (_typeof(month) === 'object') { + return monthsAbbr[getMonth(month)]; + } + + if (typeof month === 'number') { + return monthsAbbr[month]; + } + + throw TypeError('Invalid type'); +}; +/** + * Alternative get total number of days in month + * @param {Number} year + * @param {Number} m + * @return {Number} + */ + +var daysInMonth = function daysInMonth(year, month) { + if (/8|3|5|10/.test(month)) { + return 30; + } + + if (month === 1) { + if (!(year % 4) && year % 100 || !(year % 400)) { + return 29; + } + + return 28; + } + + return 31; // return /8|3|5|10/.test(month as string) + // ? 30 + // : month === 1 + // ? (!(year % 4) && year % 100) || !(year % 400) + // ? 29 + // : 28 + // : 31; +}; +/** + * Get nth suffix for date + * @param {Number} day + * @return {String} + */ + +var getNthSuffix = function getNthSuffix(day) { + switch (day) { + case 1: + case 21: + case 31: + return 'st'; + + case 2: + case 22: + return 'nd'; + + case 3: + case 23: + return 'rd'; + + default: + return 'th'; + } +}; +/** + * Formats date object + * @param {Date} + * @param {String} + * @param {Object} + * @return {String} + */ + +var formatDate = function formatDate(date, format, translation) { + var year = getFullYear(date); + var month = getMonth(date) + 1; + var day = getDate(date); + var str = format.replace(/dd/, "0".concat(day).slice(-2)).replace(/d/, day).replace(/yyyy/, year).replace(/yy/, String(year).slice(2)).replace(/MMMM/, getMonthName(getMonth(date), translation.months)).replace(/MMM/, getMonthNameAbbr(getMonth(date), translation.monthsAbbr)).replace(/MM/, "0".concat(month).slice(-2)).replace(/M(?!a|ä|e)/, month.toString()).replace(/su/, getNthSuffix(getDate(date))).replace(/D(?!e|é|i)/, getDayNameAbbr(date, translation.days)); + return str; +}; +/** + * method used as a prop validator for input values + * @param {*} val + * @return {Boolean} + */ + +var validateDateInput = function validateDateInput(val) { + return val === null || val instanceof Date || typeof val === 'string' || typeof val === 'number'; +}; + +var script = defineComponent({ + name: 'DateInput', + props: { + selectedDate: { + type: Date + }, + resetTypedDate: { + type: [Date] + }, + format: { + type: [String, Function] + }, + translation: { + type: Object + }, + inline: { + type: Boolean + }, + id: { + type: String + }, + name: { + type: String + }, + openDate: { + type: Date + }, + placeholder: { + type: String + }, + inputClass: { + type: String + }, + clearButton: { + type: Boolean + }, + clearButtonIcon: { + type: String + }, + calendarButton: { + type: Boolean + }, + calendarButtonIcon: { + type: String + }, + calendarButtonIconContent: { + type: String + }, + disabled: { + type: Boolean + }, + required: { + type: Boolean + }, + typeable: { + type: Boolean + }, + bootstrapStyling: { + type: Boolean + }, + useUtc: { + type: Boolean + }, + minimumView: { + type: String, + default: 'day' + }, + maximumView: { + type: String, + default: 'year' + }, + clearError: { + type: Function, + required: true + }, + hideInput: { + type: Boolean, + default: true + } + }, + emits: ['showCalendar', 'typedDate', 'clearDate', 'closeCalendar'], + setup: function setup(props, _ref) { + var emit = _ref.emit; + var typedDate = ref(); + var inputRef = ref(null); // computed + + var computedInputClass = computed(function () { + if (props.bootstrapStyling) { + if (typeof props.inputClass === 'string') { + return [props.inputClass, 'form-control'].join(' '); + } // tbd : need to add here props.inputClass + + + return { + 'form-control': true + }; + } + + return props.inputClass; + }); + var formattedValue = computed(function () { + if (!props.selectedDate) { + return null; + } + + if (typedDate.value) { + return typedDate.value; + } + + var date = typeof props.format === 'function' ? props.format(props.selectedDate) : formatDate(new Date(props.selectedDate), props.format, props.translation); + + if (props.minimumView === props.maximumView) { + var _date$split = date.split(' '), + _date$split2 = _slicedToArray(_date$split, 3), + y = _date$split2[1], + z = _date$split2[2]; + + if (props.maximumView === 'month') { + date = y; + } else if (props.maximumView === 'year') { + date = z; + } + } + + return date; + }); // watchers + + watch(function () { + return props.resetTypedDate; + }, function () { + typedDate.value = ''; + }); + /** + * open Calendar + */ + + function showCalendar() { + emit('showCalendar'); + } + /** + * Attempt to parse a typed date + * @param {Event} event + */ + + + function parseTypedDate(event) { + if ([27, 13 // enter + ].includes(event.keyCode)) { + inputRef.value.blur(); + } + + if (props.typeable) { + var value = inputRef.value.value; + var temptypedDate = Date.parse(value); + + if (!isNaN(temptypedDate)) { + typedDate.value = value; + emit('typedDate', temptypedDate); + } + } + } + /** + * emit a clearDate event + */ + + + function clearDate() { + emit('clearDate'); + } + /** + * nullify the typed date to defer to regular formatting + * called once the input is blurred + */ + + + function inputBlurred() { + if (props.typeable && Number.isNaN(Date.parse(inputRef.value.value))) { + clearDate(); // need to check this if required + + inputRef.value.value = null; + typedDate.value = ''; + } + + emit('closeCalendar', true); + } + /** + * nullify the error + * called once the input is focused + */ + + + function onFocus() { + props.clearError(); + } + + return { + typedDate: typedDate, + computedInputClass: computedInputClass, + formattedValue: formattedValue, + showCalendar: showCalendar, + parseTypedDate: parseTypedDate, + inputBlurred: inputBlurred, + onFocus: onFocus, + inputRef: inputRef + }; + } +}); + +const img = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' height='16' width='16' role='img' aria-hidden='true' data-icon='calendarAlt'%3e%3cpath fill='currentColor' d='M400 64h-48V12c0-6.6-5.4-12-12-12h-8c-6.6 0-12 5.4-12 12v52H128V12c0-6.6-5.4-12-12-12h-8c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM48 96h352c8.8 0 16 7.2 16 16v48H32v-48c0-8.8 7.2-16 16-16zm352 384H48c-8.8 0-16-7.2-16-16V192h384v272c0 8.8-7.2 16-16 16zM148 320h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm96 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm96 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm-96 96h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm-96 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm192 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12z'%3e%3c/path%3e%3c/svg%3e"; + +const _hoisted_1 = { key: 0 }; +const _hoisted_2 = { key: 0 }; +const _hoisted_3 = /*#__PURE__*/createVNode("img", { src: img }, null, -1 /* HOISTED */); +const _hoisted_4 = { key: 0 }; +const _hoisted_5 = /*#__PURE__*/createTextVNode("Default"); + +function render(_ctx, _cache, $props, $setup, $data, $options) { + return (openBlock(), createBlock("div", { + class: { 'input-group': _ctx.bootstrapStyling } + }, [ + createCommentVNode(" Calendar Button "), + (_ctx.calendarButton) + ? (openBlock(), createBlock("span", { + key: 0, + class: ["vuejs3-datepicker__calendar-button", { 'input-group-prepend': _ctx.bootstrapStyling }], + onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.showCalendar(...args))), + style: { 'cursor:not-allowed;': _ctx.disabled } + }, [ + createVNode("span", { + class: { 'input-group-text': _ctx.bootstrapStyling } + }, [ + createVNode("i", { class: _ctx.calendarButtonIcon }, [ + createTextVNode(toDisplayString(_ctx.calendarButtonIconContent) + " ", 1 /* TEXT */), + (!_ctx.calendarButtonIcon) + ? (openBlock(), createBlock("span", _hoisted_1, "…")) + : createCommentVNode("v-if", true) + ], 2 /* CLASS */) + ], 2 /* CLASS */) + ], 6 /* CLASS, STYLE */)) + : createCommentVNode("v-if", true), + createVNode("div", null, [ + (!_ctx.inline) + ? (openBlock(), createBlock("span", _hoisted_2, [ + _hoisted_3 + ])) + : createCommentVNode("v-if", true), + createVNode("input", { + type: _ctx.inline ? 'hidden' : 'text', + class: _ctx.computedInputClass, + name: _ctx.name, + ref: "inputRef", + id: _ctx.id, + value: _ctx.formattedValue, + "open-date": _ctx.openDate, + placeholder: _ctx.placeholder, + "clear-button": _ctx.clearButton, + disabled: _ctx.disabled, + required: _ctx.required, + readonly: !_ctx.typeable, + onClick: _cache[2] || (_cache[2] = (...args) => (_ctx.showCalendar(...args))), + onKeyup: _cache[3] || (_cache[3] = (...args) => (_ctx.parseTypedDate(...args))), + onBlur: _cache[4] || (_cache[4] = (...args) => (_ctx.inputBlurred(...args))), + onFocus: _cache[5] || (_cache[5] = (...args) => (_ctx.onFocus(...args))), + autocomplete: "off" + }, null, 42 /* CLASS, PROPS, HYDRATE_EVENTS */, ["type", "name", "id", "value", "open-date", "placeholder", "clear-button", "disabled", "required", "readonly"]) + ]), + createCommentVNode(" Clear Button "), + (_ctx.clearButton && _ctx.selectedDate) + ? (openBlock(), createBlock("span", { + key: 1, + class: ["vuejs3-datepicker__clear-button", { 'input-group-append': _ctx.bootstrapStyling }], + onClick: _cache[6] || (_cache[6] = $event => (_ctx.clearDate())) + }, [ + createVNode("span", { + class: { 'input-group-text': _ctx.bootstrapStyling } + }, [ + createVNode("i", { class: _ctx.clearButtonIcon }, [ + (!_ctx.clearButtonIcon) + ? (openBlock(), createBlock("span", _hoisted_4, "×")) + : createCommentVNode("v-if", true) + ], 2 /* CLASS */) + ], 2 /* CLASS */) + ], 2 /* CLASS */)) + : createCommentVNode("v-if", true), + renderSlot(_ctx.$slots, "afterDateInput", {}, () => [ + _hoisted_5 + ]) + ], 2 /* CLASS */)) +} + +script.render = render; +script.__file = "src/components/datepicker/DateInput.vue"; + +var script$1 = defineComponent({ + name: 'PickerDay', + props: { + showDayView: { + type: Boolean + }, + selectedDate: { + type: Date, + default: new Date() + }, + pageDate: { + type: Date, + default: new Date() + }, + pageTimestamp: { + type: Number + }, + fullMonthName: { + type: Boolean + }, + allowedToShowView: { + type: Function + }, + dayCellContent: { + type: Function, + default: function _default(day) { + return day.date; + } + }, + disabledDates: { + type: Object + }, + highlighted: { + type: Object + }, + calendarClass: { + type: [String, Object, Array] + }, + calendarStyle: { + type: Object + }, + translation: { + type: Object + }, + isRtl: { + type: Boolean + }, + mondayFirst: { + type: Boolean + }, + useUtc: { + type: Boolean + } + }, + emits: ['show-year-calendar', 'changed-month', 'show-month-calendar', 'selected-disabled', 'select-date'], + setup: function setup(props, _ref) { + var emit = _ref.emit; + + /** ********************************** Methods *********************************** */ + + /** + * Whether a day is highlighted and it is the first date + * in the highlighted range of dates + * @param {string | Date} + */ + function selectDate(date) { + if (date.isDisabled) { + emit('selected-disabled', date); + } + + emit('select-date', date); + } + /** + * Emit an event to show the month picker + */ + + + function showMonthCalendar() { + emit('show-month-calendar'); + } + /** + * Emit an event to show the year picker + */ + + + function showYearCalendar() { + emit('show-year-calendar'); + } + /** + * Change the page month + * @param {Number} incrementBy + */ + + + function changeMonth(incrementBy) { + var date = props.pageDate; + setMonth(date, getMonth(date) + incrementBy); + emit('changed-month', date); + } + /** + * Is the previous month disabled? + * @return {Boolean} + */ + + + function isPreviousMonthDisabled() { + var d = props.disabledDates; + + if (!d || !d.to) { + return false; + } + + var t = props.pageDate; + return getMonth(d.to) >= getMonth(t) && getFullYear(d.to) >= getFullYear(t); + } + /** + * Decrement the page month + */ + + + function previousMonth() { + if (!isPreviousMonthDisabled()) { + changeMonth(-1); + } + } + /** + * Is the next month disabled? + * @return {Boolean} + */ + + + function isNextMonthDisabled() { + var d = props.disabledDates; + + if (!d || !d.from) { + return false; + } + + var t = props.pageDate; + return getMonth(d.from) <= getMonth(t) && getFullYear(d.from) <= getFullYear(t); + } + /** + * Increment the current page month + */ + + + function nextMonth() { + if (!isNextMonthDisabled()) { + changeMonth(+1); + } + } + /** + * Whether a day is selected + * @param {Date} + * @return {Boolean} + */ + + + function isSelectedDate(dObj) { + return props.selectedDate ? compareDates(props.selectedDate, dObj) : false; + } + /** + * Whether a date is disabled + * @return {Boolean} + */ + + + function isDisabledDate(date) { + var disabledDates = false; + var t = props.disabledDates; + if (!t) return disabledDates; + + if (typeof t === 'undefined') { + return false; + } + + if (typeof t.dates !== 'undefined') { + t.dates.forEach(function (d) { + if (compareDates(date, d)) { + disabledDates = true; // return true; + } + }); + } + + if (typeof t.to !== 'undefined' && t.to && date < t.to) { + disabledDates = true; + } + + if (typeof t.from !== 'undefined' && t.from && date > t.from) { + disabledDates = true; + } + + if (typeof t.ranges !== 'undefined') { + t.ranges.forEach(function (range) { + if (typeof range.from !== 'undefined' && range.from && typeof range.to !== 'undefined' && range.to) { + if (date < range.to && date > range.from) { + disabledDates = true; // return true; + } + } + }); + } + + if (typeof t.days !== 'undefined' && t.days.indexOf(getDay(date)) !== -1) { + disabledDates = true; + } + + if (typeof t.daysOfMonth !== 'undefined' && t.daysOfMonth.indexOf(getDate(date)) !== -1) { + disabledDates = true; + } + + if (typeof t.customPredictor === 'function' && t.customPredictor(date)) { + disabledDates = true; + } + + return disabledDates; + } + /** + * Helper + * @param {mixed} prop + * @return {Boolean} + */ + + + function isDefined(prop) { + return typeof prop !== 'undefined' && prop; + } + /** + * Whether a date is highlighted or not + * @return {Boolean} + */ + + + function isHighlightedDate(date) { + var h = props.highlighted; + + if (!(h && h.includeDisabled) && isDisabledDate(date)) { + return false; + } + + var highlighted = false; + + if (typeof h === 'undefined') { + return false; + } + + if (typeof h.dates !== 'undefined') { + h.dates.forEach(function (d) { + if (compareDates(date, d)) { + highlighted = true; // return true; + } + }); + } + + if (isDefined(h.from) && isDefined(h.to)) { + highlighted = date >= h.from && date <= h.to; + } + + if (typeof h.days !== 'undefined' && h.days.indexOf(getDay(date)) !== -1) { + highlighted = true; + } + + if (typeof h.daysOfMonth !== 'undefined' && h.daysOfMonth.indexOf(getDate(date)) !== -1) { + highlighted = true; + } + + if (typeof h.customPredictor === 'function' && h.customPredictor(date)) { + highlighted = true; + } + + return highlighted; + } + /** + * Returns Css Classes for a day element + */ + + + function dayClasses(day) { + return { + selected: day.isSelected, + disabled: day.isDisabled, + highlighted: day.isHighlighted, + today: day.isToday, + weekend: day.isWeekend, + sat: day.isSaturday, + sun: day.isSunday, + 'highlight-start': day.isHighlightStart, + 'highlight-end': day.isHighlightEnd + }; + } + /** + * Whether a day is highlighted and it is the first date + * in the highlighted range of dates + * @param {Date} + * @return {Boolean} + */ + + + function isHighlightStart(date) { + var h = props.highlighted; + if (!h) return false; + return isHighlightedDate(date) && h.from instanceof Date && getFullYear(h.from) === getFullYear(date) && getMonth(h.from) === getMonth(date) && getDate(h.from) === getDate(date); + } + /** + * Whether a day is highlighted and it is the first date + * in the highlighted range of dates + * @param {Date} + * @return {Boolean} + */ + + + function isHighlightEnd(date) { + var h = props.highlighted; + if (!h) return false; + return isHighlightedDate(date) && h.to instanceof Date && getFullYear(h.to) === getFullYear(date) && getMonth(h.to) === getMonth(date) && getDate(h.to) === getDate(date); + } + /** ********************************** Computed *********************************** */ + + /** + * Returns an array of day names + * @return {String[]} + */ + + + var daysOfWeek = computed(function () { + if (props.mondayFirst) { + var tempDays = props.translation && props.translation.days && props.translation.days.slice(); + tempDays.push(tempDays.shift()); + return tempDays; + } + + return props.translation && props.translation.days; + }); + var blankDays = computed(function () { + var d = props.pageDate; + var dObj = props.useUtc ? new Date(Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), 1)) : new Date(d.getFullYear(), d.getMonth(), 1, d.getHours(), d.getMinutes()); + + if (props.mondayFirst) { + return getDay(dObj) > 0 ? getDay(dObj) - 1 : 6; + } + + return getDay(dObj); + }); + /** + * @return {Object[]} + */ + + var days = computed(function () { + var d = props.pageDate; + var tdays = []; // set up a new date object to the beginning of the current 'page' + + var dObj = props.useUtc ? new Date(Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), 1)) : new Date(d.getFullYear(), d.getMonth(), 1, d.getHours(), d.getMinutes()); + var t = daysInMonth(getFullYear(dObj), getMonth(dObj)); + + for (var i = 0; i < t; i += 1) { + tdays.push({ + date: getDate(dObj), + timestamp: dObj.getTime(), + isSelected: isSelectedDate(dObj), + isDisabled: isDisabledDate(dObj), + isHighlighted: isHighlightedDate(dObj), + isHighlightStart: isHighlightStart(dObj), + isHighlightEnd: isHighlightEnd(dObj), + isToday: compareDates(dObj, new Date()), + isWeekend: getDay(dObj) === 0 || getDay(dObj) === 6, + isSaturday: getDay(dObj) === 6, + isSunday: getDay(dObj) === 0 + }); + setDate(dObj, getDate(dObj) + 1); + } + + return tdays; + }); + /** + * Gets the name of the month the current page is on + * @return {String} + */ + + var currMonthName = computed(function () { + var monthName = props.fullMonthName ? props.translation && props.translation.months : props.translation && props.translation.monthsAbbr; + return getMonthNameAbbr(getMonth(props.pageDate), monthName); + }); + /** + * Gets the name of the month the current page is on + * @return {String} + */ + + var monthName = computed(function () { + var tempName = props.translation && props.translation.months; + return getMonthName(getMonth(props.pageDate), tempName); + }); + /** + * Gets the name of the year that current page is on + * @return {Number} + */ + + var currYearName = computed(function () { + var yearSuffix = props.translation && props.translation.yearSuffix; + return "".concat(getFullYear(props.pageDate)).concat(yearSuffix); + }); + /** + * Is this translation using year/month/day format? + * @return {Boolean} + */ + + var isYmd = computed(function () { + return (props.translation && props.translation.ymd && props.translation && props.translation.ymd) === true; + }); + /** + * Is the left hand navigation button disabled? + * @return {Boolean} + */ + + var isLeftNavDisabled = computed(function () { + return props.isRtl ? isNextMonthDisabled() : isPreviousMonthDisabled(); + }); + /** + * Is the right hand navigation button disabled? + * @return {Boolean} + */ + + var isRightNavDisabled = computed(function () { + return props.isRtl ? isPreviousMonthDisabled() : isNextMonthDisabled(); + }); + var getDayName = computed(function () { + return props.selectedDate ? getDayNameAbbr(props.selectedDate, props.translation && props.translation.daysNames) : null; + }); + var getDisplayDate = computed(function () { + return props.selectedDate ? getDate(props.selectedDate) : null; + }); + return { + isDefined: isDefined, + showMonthCalendar: showMonthCalendar, + daysOfWeek: daysOfWeek, + blankDays: blankDays, + isYmd: isYmd, + days: days, + currMonthName: currMonthName, + currYearName: currYearName, + isLeftNavDisabled: isLeftNavDisabled, + isRightNavDisabled: isRightNavDisabled, + selectDate: selectDate, + previousMonth: previousMonth, + nextMonth: nextMonth, + dayClasses: dayClasses, + monthName: monthName, + getDayName: getDayName, + getDisplayDate: getDisplayDate, + showYearCalendar: showYearCalendar + }; + } +}); + +const _hoisted_1$1 = { key: 0 }; + +function render$1(_ctx, _cache, $props, $setup, $data, $options) { + return withDirectives((openBlock(), createBlock("div", { + class: [_ctx.calendarClass, 'vuejs3-datepicker__calendar'], + style: _ctx.calendarStyle, + onMousedown: _cache[5] || (_cache[5] = withModifiers(() => {}, ["prevent"])) + }, [ + renderSlot(_ctx.$slots, "beforeCalendarHeader"), + createVNode("section", null, [ + createVNode("p", { + onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.showYearCalendar(...args))) + }, toDisplayString(_ctx.currYearName), 1 /* TEXT */), + (_ctx.selectedDate) + ? (openBlock(), createBlock("p", _hoisted_1$1, toDisplayString(_ctx.getDayName) + " " + toDisplayString(_ctx.getDisplayDate) + " " + toDisplayString(_ctx.monthName), 1 /* TEXT */)) + : createCommentVNode("v-if", true) + ]), + createVNode("header", null, [ + createVNode("span", { + onClick: _cache[2] || (_cache[2] = $event => (_ctx.isRtl ? _ctx.nextMonth() : _ctx.previousMonth())), + class: ["prev", { disabled: _ctx.isLeftNavDisabled }] + }, "<", 2 /* CLASS */), + createVNode("span", { + class: ["day__month_btn", _ctx.allowedToShowView('month') ? 'up' : ''], + onClick: _cache[3] || (_cache[3] = (...args) => (_ctx.showMonthCalendar(...args))) + }, toDisplayString(_ctx.isYmd ? _ctx.currYearName : _ctx.currMonthName) + " " + toDisplayString(_ctx.isYmd ? _ctx.currMonthName : _ctx.currYearName), 3 /* TEXT, CLASS */), + createVNode("span", { + onClick: _cache[4] || (_cache[4] = $event => (_ctx.isRtl ? _ctx.previousMonth() : _ctx.nextMonth())), + class: ["next", { disabled: _ctx.isRightNavDisabled }] + }, ">", 2 /* CLASS */) + ]), + createVNode("div", { + class: _ctx.isRtl ? 'flex-rtl' : '' + }, [ + (openBlock(true), createBlock(Fragment, null, renderList(_ctx.daysOfWeek, (d) => { + return (openBlock(), createBlock("span", { + class: "cell day-header", + key: d.timestamp + }, toDisplayString(d), 1 /* TEXT */)) + }), 128 /* KEYED_FRAGMENT */)), + (_ctx.blankDays > 0) + ? (openBlock(true), createBlock(Fragment, { key: 0 }, renderList(_ctx.blankDays, (d) => { + return (openBlock(), createBlock("span", { + class: "cell day blank", + key: d.timestamp + })) + }), 128 /* KEYED_FRAGMENT */)) + : createCommentVNode("v-if", true), + (openBlock(true), createBlock(Fragment, null, renderList(_ctx.days, (day) => { + return (openBlock(), createBlock("span", { + class: ["cell day", _ctx.dayClasses(day)], + key: day.timestamp, + innerHTML: _ctx.dayCellContent(day), + onClick: $event => (_ctx.selectDate(day)) + }, null, 10 /* CLASS, PROPS */, ["innerHTML", "onClick"])) + }), 128 /* KEYED_FRAGMENT */)) + ], 2 /* CLASS */) + ], 38 /* CLASS, STYLE, HYDRATE_EVENTS */)), [ + [vShow, _ctx.showDayView] + ]) +} + +script$1.render = render$1; +script$1.__file = "src/components/datepicker/PickerDay.vue"; + +var script$2 = defineComponent({ + name: 'PickerMonth', + props: { + showMonthView: { + type: Boolean + }, + selectedDate: { + type: Date, + default: new Date() + }, + pageDate: { + type: Date, + default: new Date() + }, + pageTimestamp: { + type: Number + }, + disabledDates: { + type: Object + }, + calendarClass: { + type: [String, Object, Array] + }, + calendarStyle: { + type: Object + }, + translation: { + type: Object + }, + isRtl: { + type: Boolean + }, + allowedToShowView: { + type: Function + }, + useUtc: { + type: Boolean + }, + fullMonthName: { + type: Boolean + } + }, + setup: function setup(props, _ref) { + var emit = _ref.emit; + + /** ********************************** Methods *********************************** */ + + /** + * Emits a selectMonth event + * @param {Object} month + */ + function selectMonth(month) { + if (!month.isDisabled) { + emit('select-month', month); + } + } + /** + * Changes the year up or down + * @param {Number} incrementBy + */ + + + function changeYear(incrementBy) { + var date = props.pageDate; + setFullYear(date, getFullYear(date) + incrementBy); + emit('changed-year', date); + } + /** + * Checks if the previous year is disabled or not + * @return {Boolean} + */ + + + function isPreviousYearDisabled() { + var d = props.disabledDates; + + if (!d || !d.to) { + return false; + } + + return getFullYear(d.to) >= getFullYear(props.pageDate); + } + /** + * Decrements the year + */ + + + function previousYear() { + if (!isPreviousYearDisabled()) { + changeYear(-1); + } + } + /** + * Checks if the next year is disabled or not + * @return {Boolean} + */ + + + function isNextYearDisabled() { + var d = props.disabledDates; + + if (!d || !d.from) { + return false; + } + + return getFullYear(d.from) <= getFullYear(props.pageDate); + } + /** + * Increments the year + */ + + + function nextYear() { + if (!isNextYearDisabled()) { + changeYear(1); + } + } + /** + * Emits an event that shows the year calendar + */ + + + function showYearCalendar() { + emit('show-year-calendar'); + } + /** + * Whether the selected date is in this month + * @param {Date} + * @return {Boolean} + */ + + + function isSelectedMonth(date) { + var d = props.selectedDate; + return d && getFullYear(d) === getFullYear(date) && getMonth(d) === getMonth(date); + } + /** + * Whether a month is disabled + * @param {Date} + * @return {Boolean} + */ + + + function isDisabledMonth(date) { + var disabledDates = false; + var d = props.disabledDates; + if (!d) return false; + + if (typeof d === 'undefined') { + return false; + } + + if (typeof d.to !== 'undefined' && d.to) { + if (getMonth(date) < getMonth(d.to) && getFullYear(date) <= getFullYear(d.to) || getFullYear(date) < getFullYear(d.to)) { + disabledDates = true; + } + } + + if (typeof d.from !== 'undefined' && d.from) { + if (getMonth(date) > getMonth(d.from) && getFullYear(date) >= getFullYear(d.from) || getFullYear(date) > getFullYear(d.from)) { + disabledDates = true; + } + } + + if (typeof d.customPredictor === 'function' && d.customPredictor(date)) { + disabledDates = true; + } + + return disabledDates; + } + /** ********************************** Computed *********************************** */ + + + var months = computed(function () { + var d = props.pageDate; + var tmonths = []; // set up a new date object to the beginning of the current 'page' + + var dObj = props.useUtc ? new Date(Date.UTC(d.getUTCFullYear(), 0, d.getUTCDate())) : new Date(d.getFullYear(), 0, d.getDate(), d.getHours(), d.getMinutes()); + + for (var i = 0; i < 12; i += 1) { + tmonths.push({ + month: getMonthName(i, props.translation && props.translation.months), + timestamp: dObj.getTime(), + isSelected: isSelectedMonth(dObj), + isDisabled: isDisabledMonth(dObj) + }); + setMonth(dObj, getMonth(dObj) + 1); + } + + return tmonths; + }); + /** + * Get year name on current page. + * @return {String} + */ + + var pageYearName = computed(function () { + var yearSuffix = props.translation && props.translation.yearSuffix; + return "".concat(getFullYear(props.pageDate)).concat(yearSuffix); + }); + /** + * Is the left hand navigation disabled + * @return {Boolean} + */ + + var isLeftNavDisabled = computed(function () { + return props.isRtl ? isNextYearDisabled() : isPreviousYearDisabled(); + }); + /** + * Is the right hand navigation disabled + * @return {Boolean} + */ + + var isRightNavDisabled = computed(function () { + return props.isRtl ? isPreviousYearDisabled() : isNextYearDisabled(); + }); + /** + * Gets the name of the month the current page is on + * @return {String} + */ + + var monthName = computed(function () { + var tempName = props.translation && props.translation.months; + return getMonthName(getMonth(props.pageDate), tempName); + }); + var getDisplayDate = computed(function () { + return props.selectedDate ? getDate(props.selectedDate) : null; + }); + var getDayName = computed(function () { + return props.selectedDate ? getDayNameAbbr(props.selectedDate, props.translation && props.translation.daysNames) : null; + }); + /** + * Gets the name of the year that current page is on + * @return {Number} + */ + + var currYearName = computed(function () { + var yearSuffix = props.translation && props.translation.yearSuffix; + return "".concat(getFullYear(props.pageDate)).concat(yearSuffix); + }); + /** + * Gets the name of the month the current page is on + * @return {String} + */ + + var currMonthName = computed(function () { + var monthName = props.fullMonthName ? props.translation && props.translation.months : props.translation && props.translation.monthsAbbr; + return getMonthNameAbbr(getMonth(props.pageDate), monthName); + }); + return { + isRightNavDisabled: isRightNavDisabled, + isLeftNavDisabled: isLeftNavDisabled, + pageYearName: pageYearName, + months: months, + selectMonth: selectMonth, + previousYear: previousYear, + nextYear: nextYear, + currYearName: currYearName, + getDisplayDate: getDisplayDate, + monthName: monthName, + showYearCalendar: showYearCalendar, + getDayName: getDayName + }; + } +}); + +const _hoisted_1$2 = { key: 0 }; + +function render$2(_ctx, _cache, $props, $setup, $data, $options) { + return withDirectives((openBlock(), createBlock("div", { + class: [_ctx.calendarClass, 'vuejs3-datepicker__calendar'], + style: _ctx.calendarStyle, + onMousedown: _cache[5] || (_cache[5] = withModifiers(() => {}, ["prevent"])) + }, [ + renderSlot(_ctx.$slots, "beforeCalendarHeader"), + createVNode("section", null, [ + createVNode("p", { + onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.showYearCalendar(...args))) + }, toDisplayString(_ctx.currYearName), 1 /* TEXT */), + (_ctx.selectedDate) + ? (openBlock(), createBlock("p", _hoisted_1$2, toDisplayString(_ctx.getDayName) + " " + toDisplayString(_ctx.getDisplayDate) + " " + toDisplayString(_ctx.monthName), 1 /* TEXT */)) + : createCommentVNode("v-if", true) + ]), + createVNode("header", null, [ + createVNode("span", { + onClick: _cache[2] || (_cache[2] = $event => (_ctx.isRtl ? _ctx.nextYear() : _ctx.previousYear())), + class: ["prev", { disabled: _ctx.isLeftNavDisabled }] + }, "<", 2 /* CLASS */), + createVNode("span", { + class: ["month__year_btn", _ctx.allowedToShowView('year') ? 'up' : ''], + onClick: _cache[3] || (_cache[3] = (...args) => (_ctx.showYearCalendar(...args))) + }, toDisplayString(_ctx.pageYearName), 3 /* TEXT, CLASS */), + createVNode("span", { + onClick: _cache[4] || (_cache[4] = $event => (_ctx.isRtl ? _ctx.previousYear() : _ctx.nextYear())), + class: ["next", { disabled: _ctx.isRightNavDisabled }] + }, ">", 2 /* CLASS */) + ]), + (openBlock(true), createBlock(Fragment, null, renderList(_ctx.months, (month) => { + return (openBlock(), createBlock("span", { + class: ["cell month", { selected: month.isSelected, disabled: month.isDisabled }], + key: month.timestamp, + onClick: withModifiers($event => (_ctx.selectMonth(month)), ["stop"]) + }, toDisplayString(month.month), 11 /* TEXT, CLASS, PROPS */, ["onClick"])) + }), 128 /* KEYED_FRAGMENT */)) + ], 38 /* CLASS, STYLE, HYDRATE_EVENTS */)), [ + [vShow, _ctx.showMonthView] + ]) +} + +script$2.render = render$2; +script$2.__file = "src/components/datepicker/PickerMonth.vue"; + +var script$3 = defineComponent({ + name: 'PickerYear', + props: { + showYearView: { + type: Boolean + }, + selectedDate: { + type: Date, + default: new Date() + }, + pageDate: { + type: Date, + default: new Date() + }, + pageTimestamp: { + type: Number + }, + disabledDates: { + type: Object + }, + highlighted: { + type: Object + }, + calendarClass: { + type: [String, Object, Array] + }, + calendarStyle: { + type: Object + }, + translation: { + type: Object + }, + isRtl: { + type: Boolean + }, + allowedToShowView: { + type: Function + }, + useUtc: { + type: Boolean + }, + fullMonthName: { + type: Boolean + } + }, + setup: function setup(props, _ref) { + var emit = _ref.emit; + + /** ********************************** Methods *********************************** */ + + /** + * Select year + * @param {year} + */ + function selectYear(year) { + if (!year.isDisabled) { + emit('select-year', year); + } + } + /** + * Change year (increment / decrement) + * @param {number} + */ + + + function changeYear(incrementBy) { + var date = props.pageDate; + setFullYear(date, getFullYear(date) + incrementBy); + emit('changed-decade', date); + } + /** + * checks if previous decade is disabled + */ + + + function isPreviousDecadeDisabled() { + var d = props.disabledDates; + + if (!d || !d.to) { + return false; + } + + var disabledYear = getFullYear(d.to); + var lastYearInPreviousPage = Math.floor(getFullYear(props.pageDate) / 10) * 10 - 1; + return disabledYear > lastYearInPreviousPage; + } + /** + * changes year to previous decade + */ + + + function previousDecade() { + if (!isPreviousDecadeDisabled()) { + changeYear(-10); + } + } + /** + * check if next decade is disabled + */ + + + function isNextDecadeDisabled() { + var d = props.disabledDates; + + if (!d || !d.from) { + return false; + } + + var disabledYear = getFullYear(d.from); + var firstYearInNextPage = Math.ceil(getFullYear(props.pageDate) / 10) * 10; + return disabledYear < firstYearInNextPage; + } + /** + * moves year to next decade + */ + + + function nextDecade() { + if (!isNextDecadeDisabled()) { + changeYear(10); + } + } + /** + * Whether the selected date is in this year + * @param {Date} + * @return {Boolean} + */ + + + function isSelectedYear(date) { + return props.selectedDate ? getFullYear(props.selectedDate) === getFullYear(date) : false; + } + /** + * Whether a year is disabled + * @param {Date} + * @return {Boolean} + */ + + + function isDisabledYear(date) { + var disabledDates = false; + + if (typeof props.disabledDates === 'undefined' || !props.disabledDates) { + return false; + } + + if (typeof props.disabledDates.to !== 'undefined' && props.disabledDates.to) { + if (getFullYear(date) < getFullYear(props.disabledDates.to)) { + disabledDates = true; + } + } + + if (typeof props.disabledDates.from !== 'undefined' && props.disabledDates.from) { + if (getFullYear(date) > getFullYear(props.disabledDates.from)) { + disabledDates = true; + } + } + + if (typeof props.disabledDates.customPredictor === 'function' && props.disabledDates.customPredictor(date)) { + disabledDates = true; + } + + return disabledDates; + } + /** ********************************** Computed *********************************** */ + + + var years = computed(function () { + var d = props.pageDate; + var tyears = []; // set up a new date object to the beginning of the current 'page'7 + + var dObj = props.useUtc ? new Date(Date.UTC(Math.floor(d.getUTCFullYear() / 10) * 10, d.getUTCMonth(), d.getUTCDate())) : new Date(Math.floor(d.getFullYear() / 10) * 10, d.getMonth(), d.getDate(), d.getHours(), d.getMinutes()); + + for (var i = 0; i < 10; i += 1) { + tyears.push({ + year: getFullYear(dObj), + timestamp: dObj.getTime(), + isSelected: isSelectedYear(dObj), + isDisabled: isDisabledYear(dObj) + }); + setFullYear(dObj, getFullYear(dObj) + 1); + } + + return tyears; + }); + /** + * @return {String} + */ + + var getPageDecade = computed(function () { + var decadeStart = Math.floor(getFullYear(props.pageDate) / 10) * 10; + var decadeEnd = decadeStart + 9; + var yearSuffix = props.translation && props.translation.yearSuffix; + return "".concat(decadeStart, " - ").concat(decadeEnd).concat(yearSuffix); + }); + /** + * Is the left hand navigation button disabled? + * @return {Boolean} + */ + + var isLeftNavDisabled = computed(function () { + return props.isRtl ? isNextDecadeDisabled() : isPreviousDecadeDisabled(); + }); + /** + * Is the right hand navigation button disabled? + * @return {Boolean} + */ + + var isRightNavDisabled = computed(function () { + return props.isRtl ? isPreviousDecadeDisabled() : isNextDecadeDisabled(); + }); + var getDayName = computed(function () { + return props.selectedDate ? getDayNameAbbr(props.selectedDate, props.translation && props.translation.daysNames) : null; + }); + /** + * Gets the name of the month the current page is on + * @return {String} + */ + + var monthName = computed(function () { + var tempName = props.translation && props.translation.months; + return getMonthName(getMonth(props.pageDate), tempName); + }); + var getDisplayDate = computed(function () { + return props.selectedDate ? getDate(props.selectedDate) : null; + }); + /** + * Gets the name of the year that current page is on + * @return {Number} + */ + + var currYearName = computed(function () { + var yearSuffix = props.translation && props.translation.yearSuffix; + return "".concat(getFullYear(props.pageDate)).concat(yearSuffix); + }); + /** + * Gets the name of the month the current page is on + * @return {String} + */ + + var currMonthName = computed(function () { + var monthName = props.fullMonthName ? props.translation && props.translation.months : props.translation && props.translation.monthsAbbr; + return getMonthNameAbbr(getMonth(props.pageDate), monthName); + }); + return { + isRightNavDisabled: isRightNavDisabled, + isLeftNavDisabled: isLeftNavDisabled, + getPageDecade: getPageDecade, + years: years, + nextDecade: nextDecade, + previousDecade: previousDecade, + selectYear: selectYear, + getDayName: getDayName, + monthName: monthName, + getDisplayDate: getDisplayDate, + currYearName: currYearName, + currMonthName: currMonthName + }; + } +}); + +const _hoisted_1$3 = { key: 0 }; + +function render$3(_ctx, _cache, $props, $setup, $data, $options) { + return withDirectives((openBlock(), createBlock("div", { + class: [_ctx.calendarClass, 'vuejs3-datepicker__calendar'], + style: _ctx.calendarStyle, + onMousedown: _cache[3] || (_cache[3] = withModifiers(() => {}, ["prevent"])) + }, [ + renderSlot(_ctx.$slots, "beforeCalendarHeader"), + createVNode("section", null, [ + createVNode("p", null, toDisplayString(_ctx.currYearName), 1 /* TEXT */), + (_ctx.selectedDate) + ? (openBlock(), createBlock("p", _hoisted_1$3, toDisplayString(_ctx.getDayName) + " " + toDisplayString(_ctx.getDisplayDate) + " " + toDisplayString(_ctx.monthName), 1 /* TEXT */)) + : createCommentVNode("v-if", true) + ]), + createVNode("header", null, [ + createVNode("span", { + onClick: _cache[1] || (_cache[1] = $event => (_ctx.isRtl ? _ctx.nextDecade() : _ctx.previousDecade())), + class: ["prev", { disabled: _ctx.isLeftNavDisabled }] + }, "<", 2 /* CLASS */), + createVNode("span", null, toDisplayString(_ctx.getPageDecade), 1 /* TEXT */), + createVNode("span", { + onClick: _cache[2] || (_cache[2] = $event => (_ctx.isRtl ? _ctx.previousDecade() : _ctx.nextDecade())), + class: ["next", { disabled: _ctx.isRightNavDisabled }] + }, ">", 2 /* CLASS */) + ]), + (openBlock(true), createBlock(Fragment, null, renderList(_ctx.years, (year) => { + return (openBlock(), createBlock("span", { + class: ["cell year", { selected: year.isSelected, disabled: year.isDisabled }], + key: year.timestamp, + onClick: withModifiers($event => (_ctx.selectYear(year)), ["stop"]) + }, toDisplayString(year.year), 11 /* TEXT, CLASS, PROPS */, ["onClick"])) + }), 128 /* KEYED_FRAGMENT */)) + ], 38 /* CLASS, STYLE, HYDRATE_EVENTS */)), [ + [vShow, _ctx.showYearView] + ]) +} + +script$3.render = render$3; +script$3.__file = "src/components/datepicker/PickerYear.vue"; + +var af = function af() { + var langName = 'Afrikaans'; + var monthFullName = ['Januarie', 'Februarie', 'Maart', 'April', 'Mei', 'Junie', 'Julie', 'Augustus', 'September', 'Oktober', 'November', 'Desember']; + var shortName = ['Jan', 'Feb', 'Mrt', 'Apr', 'Mei', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Des']; + var days = ['So.', 'Ma.', 'Di.', 'Wo.', 'Do.', 'Vr.', 'Sa.']; + var rtl = false; + var ymd = false; + var yearSuffix = ''; + return { + months: monthFullName, + monthsAbbr: shortName, + days: days, + yearSuffix: yearSuffix, + ymd: ymd, + rtl: rtl, + langName: langName, + // tbd: need fullName of days + daysNames: days + }; +}; + +var en = function en() { + var langName = 'English'; + var monthFullName = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; + var shortName = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; + var days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; + var daysNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; + var rtl = false; + var ymd = false; + var yearSuffix = ''; + return { + months: monthFullName, + monthsAbbr: shortName, + days: days, + language: langName, + yearSuffix: yearSuffix, + ymd: ymd, + rtl: rtl, + langName: langName, + daysNames: daysNames + }; +}; + +var data = { + af: af(), + en: en() +}; + +/** + * Returns true if data is null or undefined + * @param data + */ +var isNullUndefined = function isNullUndefined(data) { + return data === null || data === undefined; +}; + +var ValidationMessages; + +(function (ValidationMessages) { + ValidationMessages["required"] = "Please enter this value"; +})(ValidationMessages || (ValidationMessages = {})); + +var VALIDATORS; + +(function (VALIDATORS) { + VALIDATORS["REQUIRED"] = "required"; +})(VALIDATORS || (VALIDATORS = {})); + +var KeyName; + +(function (KeyName) { + KeyName["Enter"] = "Enter"; + KeyName["ArrowUp"] = "ArrowUp"; + KeyName["ArrowDown"] = "ArrowDown"; + KeyName["Escape"] = "Escape"; + KeyName["Tab"] = "Tab"; +})(KeyName || (KeyName = {})); + +/** + * Required validation + * @param value + */ + +var required = function required(value) { + if (isNullUndefined(value)) { + return false; + } + + if (_typeof(value) === 'object' && !Object.keys(value).length) { + if (Object.prototype.toString.call(value) === '[object Date]' && value) { + return true; + } + + return false; + } + + if (typeof value === 'string' && value.trim() === '') { + return false; + } + + if (value.constructor === Array && value.length <= 0) { + return false; + } + + return true; +}; + +var validationRules = { + required: required +}; +/** + * + * @param validationName + * @param validationObj + * @param value + */ + +var callValidator = function callValidator(validationName, validationObj, value) { + var isValid = true; + + switch (validationName) { + default: + if (validationRules[validationName]) { + isValid = validationRules[validationName](value); + } + + break; + } + + return isValid; +}; // helper validation functions + +/** + * + * @param value + * @param validationArray + */ + + +var validationHandler = function validationHandler(value, validationArray) { + var validationObject = { + isValid: true, + message: '' + }; + + var _iterator = _createForOfIteratorHelper(validationArray), + _step; + + try { + for (_iterator.s(); !(_step = _iterator.n()).done;) { + var validation = _step.value; + validationObject.isValid = callValidator(validation.name, validation, value); + validationObject.message = ''; + + if (!validationObject.isValid) { + // checking if custom message is passed if not then use standard msgs + if (validation.message) { + validationObject.message = validation.message; + } else { + validationObject.message = ValidationMessages[validation.name]; + } // break if any one validation is failed + + + break; + } + } + } catch (err) { + _iterator.e(err); + } finally { + _iterator.f(); + } + + return validationObject; +}; + +var script$4 = defineComponent({ + name: 'Datepicker', + components: { + DateInput: script, + PickerDay: script$1, + PickerMonth: script$2, + PickerYear: script$3 + }, + props: { + modelValue: { + type: [Date, String] + }, + value: { + type: [Date, String] + }, + format: { + type: [String, Function], + default: 'dd MMM yyyy' + }, + language: { + type: String, + default: 'en' + }, + openDate: { + validator: function validator(val) { + return validateDateInput(val); + }, + type: Date + }, + minimumView: { + type: String, + default: 'day' + }, + maximumView: { + type: String, + default: 'year' + }, + name: { + type: String + }, + id: { + type: String + }, + dayCellContent: { + type: Function + }, + fullMonthName: { + type: Boolean + }, + disabledDates: { + type: Object + }, + highlighted: { + type: Object + }, + placeholder: { + type: String + }, + inline: { + type: Boolean + }, + calendarClass: { + type: [String, Object, Array] + }, + inputClass: { + type: [String, Object, Array] + }, + wrapperClass: { + type: [String, Object, Array] + }, + mondayFirst: { + type: Boolean + }, + clearButton: { + type: Boolean + }, + clearButtonIcon: { + type: String + }, + calendarButton: { + type: Boolean + }, + calendarButtonIcon: { + type: String + }, + calendarButtonIconContent: { + type: String + }, + bootstrapStyling: { + type: Boolean + }, + initialView: { + type: String + }, + disabled: { + type: Boolean + }, + required: { + type: Boolean + }, + typeable: { + type: Boolean + }, + useUtc: { + type: Boolean + }, + + /** + * Validations array of objects of type IValidationRule to valdiate the input + * @values IValidationRule[] + */ + validations: { + type: Array, + default: function _default() { + return []; + } + }, + autoValidate: { + type: Boolean, + default: false + }, + hideInput: { + type: Boolean, + default: true + } + }, + emits: ['input', 'cleared', 'update:modelValue', 'closed', 'changed-month', 'changed-year', 'changed-day', 'selected', 'selected-disabled'], + setup: function setup(props, _ref) { + var emit = _ref.emit; + var initmodelvalue = new Date(props.modelValue); + var pageTimestamp = ref(0); + var selectedDate = ref(null); + + if (props.modelValue && isValidDate(initmodelvalue)) { + pageTimestamp.value = setDate(initmodelvalue, 1); + selectedDate.value = initmodelvalue; + } else { + pageTimestamp.value = setDate(new Date(), 1); + } + + var showDayView = ref(false); + var showMonthView = ref(false); + var showYearView = ref(false); + var calendarHeight = ref(0); + var resetTypedDate = ref(new Date()); + var validation = reactive({ + isValid: true, + message: '' + }); + /** ********************************** Computed *********************************** */ + + var computedInitialView = computed(function () { + if (!props.initialView) { + return props.minimumView; + } + + return props.initialView; + }); + var pageDate = computed(function () { + return new Date(pageTimestamp.value); + }); + var translation = computed(function () { + var temp = data; + return temp[props.language]; + }); + var isInline = computed(function () { + return !!props.inline; + }); + var calendarStyle = computed(function () { + return { + position: isInline.value ? 'static' : undefined + }; + }); + var isOpen = computed(function () { + return showDayView.value || showMonthView.value || showYearView.value; + }); + var isRtl = computed(function () { + return translation.value && translation.value.rtl === true; + }); + /** ********************************** Methods *********************************** */ + + /** + * Sets the date that the calendar should open on + */ + + function setPageDate(date) { + if (!date) { + if (props.openDate) { + date = new Date(props.openDate); + } else { + date = new Date(); + } + } + + pageTimestamp.value = setDate(new Date(date), 1); + } + /** + * Are we allowed to show a specific picker view? + * @param {String} view + * @return {Boolean} + */ + + + function allowedToShowView(view) { + var views = ['day', 'month', 'year']; + var minimumViewIndex = views.indexOf(props.minimumView); + var maximumViewIndex = views.indexOf(props.maximumView); + var viewIndex = views.indexOf(view); + return viewIndex >= minimumViewIndex && viewIndex <= maximumViewIndex; + } + /** + * Close all calendar layers + * @param {Boolean} emitEvent - emit close event + */ + + + function close(emitEvent) { + showDayView.value = false; + showMonthView.value = false; + showYearView.value = false; + + if (!isInline.value) { + if (emitEvent) { + if (props.autoValidate) { + isValid(); + } + + emit('closed'); + } + } + } + /** + * Show the day picker + * @return {Boolean} + */ + + + function showDayCalendar() { + if (!allowedToShowView('day')) { + return false; + } + + close(); + showDayView.value = true; + return true; + } + /** + * Show the month picker + * @return {Boolean} + */ + + + function showMonthCalendar() { + if (!allowedToShowView('month')) { + return false; + } + + close(); + showMonthView.value = true; + return true; + } + /** + * Show the year picker + * @return {Boolean} + */ + + + function showYearCalendar() { + if (!allowedToShowView('year')) { + return false; + } + + close(); + showYearView.value = true; + return true; + } + /** + * Sets the initial picker page view: day, month or year + */ + + + function setInitialView() { + var initialView = computedInitialView.value; + + if (!allowedToShowView(initialView)) { + throw new Error("initialView '".concat(initialView, "' cannot be rendered based on minimum '").concat(props.minimumView, "' and maximum '").concat(props.maximumView, "'")); + } + + switch (initialView) { + case 'year': + showYearCalendar(); + break; + + case 'month': + showMonthCalendar(); + break; + + default: + showDayCalendar(); + break; + } + } + /** + * Effectively a toggle to show/hide the calendar + * @return {mixed} + */ + + + function showCalendar() { + if (props.disabled || isInline.value) { + return false; + } + + if (isOpen.value) { + return close(true); + } + + setInitialView(); + return true; + } + /** + * Set the selected date + * @param {Number} timestamp + */ + + + function setDate1(timestamp) { + var date = new Date(timestamp); + selectedDate.value = date; + setPageDate(date); + emit('selected', date); + + if (props.modelValue) { + emit('update:modelValue', date); + } else { + emit('input', date); + } + } + /** + * Clear the selected date + */ + + + function clearDate() { + selectedDate.value = null; + setPageDate(); + emit('selected', null); + + if (props.modelValue) { + emit('update:modelValue', null); + } else { + emit('input', null); + } + + emit('cleared'); + } + /** + * @param {Object} date + */ + + + function selectDate(date) { + setDate1(date.timestamp); + + if (!isInline.value) { + close(true); + } + + resetTypedDate.value = new Date(); + } + /** + * @param {Object} date + */ + + + function selectDisabledDate(date) { + emit('selected-disabled', date); + } + /** + * @param {Object} month + */ + + + function selectMonth(month) { + var date = new Date(month.timestamp); + + if (allowedToShowView('day')) { + setPageDate(date); + showDayCalendar(); + } else { + selectDate(month); + } + + emit('changed-month', month); + } + /** + * @param {Object} year + */ + + + function selectYear(year) { + var date = new Date(year.timestamp); + + if (allowedToShowView('month')) { + setPageDate(date); + showMonthCalendar(); + } else { + selectDate(year); + } + + emit('changed-year', year); + } + /** + * Set the datepicker value + * @param {Date|String|Number|null} date + */ + + + function setValue(date) { + var tempDate = date; + + if (typeof date === 'string' || typeof date === 'number') { + var parsed = new Date(date); + tempDate = Number.isNaN(parsed.valueOf()) ? null : parsed; + } + + if (!tempDate) { + setPageDate(); + selectedDate.value = null; + return; + } + + selectedDate.value = date; + setPageDate(date); + } + /** + * Handles a month change from the day picker + */ + + + function handleChangedMonthFromDayPicker(date) { + setPageDate(date); + emit('changed-month', date); + } + /** + * Set the date from a typedDate event + */ + + + function setTypedDate(date) { + setDate1(date.getTime()); + } + /** + * Initiate the component + */ + + + function init() { + if (props.value) { + setValue(props.value); + } + + if (isInline.value) { + setInitialView(); + } + } + /** + * Calls the validationHandler to check the validations, + * whether the state of input is valid or not. + * + * @returns boolean whether current state of the input is valid or not + */ + + + function isValid() { + var response = validationHandler(selectedDate.value, props.validations); + validation.isValid = response.isValid; + validation.message = response.message; + return validation.isValid; + } + /** + * Reset Validation Message + */ + + + function clearError() { + validation.message = ''; + validation.isValid = true; + } + /** ********************************** Watchers *********************************** */ + + + watch(function () { + return props.modelValue; + }, function (curr) { + setValue(curr); + }); + watch(function () { + return props.value; + }, function (curr) { + setValue(curr); + }); + watch(function () { + return props.openDate; + }, function () { + setPageDate(); + }); + watch(function () { + return props.initialView; + }, function () { + setInitialView(); + }); + /** + * test + */ + + function onClose() { + debugger; + } + + init(); + return { + pageTimestamp: pageTimestamp, + selectedDate: selectedDate, + showDayView: showDayView, + showMonthView: showMonthView, + showYearView: showYearView, + calendarHeight: calendarHeight, + resetTypedDate: resetTypedDate, + // computed + pageDate: pageDate, + translation: translation, + calendarStyle: calendarStyle, + isOpen: isOpen, + isInline: isInline, + isRtl: isRtl, + // methods + setTypedDate: setTypedDate, + handleChangedMonthFromDayPicker: handleChangedMonthFromDayPicker, + selectYear: selectYear, + selectMonth: selectMonth, + selectDisabledDate: selectDisabledDate, + clearDate: clearDate, + showCalendar: showCalendar, + close: close, + allowedToShowView: allowedToShowView, + showYearCalendar: showYearCalendar, + showMonthCalendar: showMonthCalendar, + setPageDate: setPageDate, + selectDate: selectDate, + validation: validation, + isValid: isValid, + clearError: clearError, + onClose: onClose + }; + } +}); + +const _hoisted_1$4 = { + key: 0, + class: "dp-error" +}; + +function render$4(_ctx, _cache, $props, $setup, $data, $options) { + const _component_date_input = resolveComponent("date-input"); + const _component_picker_day = resolveComponent("picker-day"); + const _component_picker_month = resolveComponent("picker-month"); + const _component_picker_year = resolveComponent("picker-year"); + + return (openBlock(), createBlock("div", { + class: ["vuejs3-datepicker", [_ctx.wrapperClass, _ctx.isRtl ? 'rtl' : '']] + }, [ + createVNode(_component_date_input, { + selectedDate: _ctx.selectedDate, + resetTypedDate: _ctx.resetTypedDate, + format: _ctx.format, + translation: _ctx.translation, + inline: _ctx.inline, + id: _ctx.id, + name: _ctx.name, + openDate: _ctx.openDate, + placeholder: _ctx.placeholder, + inputClass: _ctx.inputClass, + typeable: _ctx.typeable, + clearButton: _ctx.clearButton, + clearButtonIcon: _ctx.clearButtonIcon, + calendarButton: _ctx.calendarButton, + calendarButtonIcon: _ctx.calendarButtonIcon, + calendarButtonIconContent: _ctx.calendarButtonIconContent, + disabled: _ctx.disabled, + required: _ctx.required, + bootstrapStyling: _ctx.bootstrapStyling, + "use-utc": _ctx.useUtc, + onShowCalendar: _ctx.showCalendar, + onCloseCalendar: _ctx.close, + onTypedDate: _ctx.setTypedDate, + onClearDate: _ctx.clearDate, + minimumView: _ctx.minimumView, + maximumView: _ctx.maximumView, + clearError: _ctx.clearError, + hideInput: _ctx.hideInput + }, { + afterDateInput: withCtx(() => [ + renderSlot(_ctx.$slots, "afterDateInput") + ]), + _: 1 + }, 8 /* PROPS */, ["selectedDate", "resetTypedDate", "format", "translation", "inline", "id", "name", "openDate", "placeholder", "inputClass", "typeable", "clearButton", "clearButtonIcon", "calendarButton", "calendarButtonIcon", "calendarButtonIconContent", "disabled", "required", "bootstrapStyling", "use-utc", "onShowCalendar", "onCloseCalendar", "onTypedDate", "onClearDate", "minimumView", "maximumView", "clearError", "hideInput"]), + (!_ctx.validation.isValid) + ? (openBlock(), createBlock("div", _hoisted_1$4, toDisplayString(_ctx.validation.message), 1 /* TEXT */)) + : createCommentVNode("v-if", true), + createCommentVNode("Day View "), + (_ctx.allowedToShowView('day')) + ? (openBlock(), createBlock(_component_picker_day, { + key: 1, + pageDate: _ctx.pageDate, + selectedDate: _ctx.selectedDate, + showDayView: _ctx.showDayView, + fullMonthName: _ctx.fullMonthName, + allowedToShowView: _ctx.allowedToShowView, + disabledDates: _ctx.disabledDates, + highlighted: _ctx.highlighted, + calendarClass: _ctx.calendarClass, + calendarStyle: _ctx.calendarStyle, + translation: _ctx.translation, + pageTimestamp: _ctx.pageTimestamp, + isRtl: _ctx.isRtl, + mondayFirst: _ctx.mondayFirst, + dayCellContent: _ctx.dayCellContent, + onChangedMonth: _ctx.handleChangedMonthFromDayPicker, + onSelectDate: _ctx.selectDate, + onShowMonthCalendar: _ctx.showMonthCalendar, + onSelectedDisabled: _ctx.selectDisabledDate, + onShowYearCalendar: _ctx.showYearCalendar + }, { + beforeCalendarHeader: withCtx(() => [ + renderSlot(_ctx.$slots, "beforeCalendarHeader") + ]), + _: 1 + }, 8 /* PROPS */, ["pageDate", "selectedDate", "showDayView", "fullMonthName", "allowedToShowView", "disabledDates", "highlighted", "calendarClass", "calendarStyle", "translation", "pageTimestamp", "isRtl", "mondayFirst", "dayCellContent", "onChangedMonth", "onSelectDate", "onShowMonthCalendar", "onSelectedDisabled", "onShowYearCalendar"])) + : createCommentVNode("v-if", true), + createCommentVNode("Month View "), + (_ctx.allowedToShowView('month')) + ? (openBlock(), createBlock(_component_picker_month, { + key: 2, + pageDate: _ctx.pageDate, + selectedDate: _ctx.selectedDate, + showMonthView: _ctx.showMonthView, + allowedToShowView: _ctx.allowedToShowView, + disabledDates: _ctx.disabledDates, + calendarClass: _ctx.calendarClass, + calendarStyle: _ctx.calendarStyle, + translation: _ctx.translation, + isRtl: _ctx.isRtl, + "use-utc": _ctx.useUtc, + onSelectMonth: _ctx.selectMonth, + onShowYearCalendar: _ctx.showYearCalendar, + onChangedYear: _ctx.setPageDate + }, { + beforeCalendarHeader: withCtx(() => [ + renderSlot(_ctx.$slots, "beforeCalendarHeader") + ]), + _: 1 + }, 8 /* PROPS */, ["pageDate", "selectedDate", "showMonthView", "allowedToShowView", "disabledDates", "calendarClass", "calendarStyle", "translation", "isRtl", "use-utc", "onSelectMonth", "onShowYearCalendar", "onChangedYear"])) + : createCommentVNode("v-if", true), + createCommentVNode(" Year View "), + (_ctx.allowedToShowView('year')) + ? (openBlock(), createBlock(_component_picker_year, { + key: 3, + pageDate: _ctx.pageDate, + selectedDate: _ctx.selectedDate, + showYearView: _ctx.showYearView, + allowedToShowView: _ctx.allowedToShowView, + disabledDates: _ctx.disabledDates, + calendarClass: _ctx.calendarClass, + calendarStyle: _ctx.calendarStyle, + translation: _ctx.translation, + isRtl: _ctx.isRtl, + "use-utc": _ctx.useUtc, + onSelectYear: _ctx.selectYear, + onChangedDecade: _ctx.setPageDate, + fullMonthName: _ctx.fullMonthName + }, { + beforeCalendarHeader: withCtx(() => [ + renderSlot(_ctx.$slots, "beforeCalendarHeader") + ]), + _: 1 + }, 8 /* PROPS */, ["pageDate", "selectedDate", "showYearView", "allowedToShowView", "disabledDates", "calendarClass", "calendarStyle", "translation", "isRtl", "use-utc", "onSelectYear", "onChangedDecade", "fullMonthName"])) + : createCommentVNode("v-if", true) + ], 2 /* CLASS */)) +} + +function styleInject(css, ref) { + if ( ref === void 0 ) ref = {}; + var insertAt = ref.insertAt; + + if (!css || typeof document === 'undefined') { return; } + + var head = document.head || document.getElementsByTagName('head')[0]; + var style = document.createElement('style'); + style.type = 'text/css'; + + if (insertAt === 'top') { + if (head.firstChild) { + head.insertBefore(style, head.firstChild); + } else { + head.appendChild(style); + } + } else { + head.appendChild(style); + } + + if (style.styleSheet) { + style.styleSheet.cssText = css; + } else { + style.appendChild(document.createTextNode(css)); + } +} + +var css_248z = ".rtl{direction:rtl}.vuejs3-datepicker{position:relative;text-align:left}.vuejs3-datepicker *{box-sizing:border-box}.vuejs3-datepicker input{border:1px solid}.vuejs3-datepicker__calendar{position:absolute;z-index:100;background:#fff;width:300px;border:1px solid #000}.vuejs3-datepicker__calendar header{display:block;line-height:40px}.vuejs3-datepicker__calendar header span{text-align:center;width:71.42857142857143%;float:left}.vuejs3-datepicker__calendar header .next,.vuejs3-datepicker__calendar header .prev{width:14.285714285714286%;float:left;text-indent:-10000px;position:relative}.vuejs3-datepicker__calendar header .next:after,.vuejs3-datepicker__calendar header .prev:after{content:\"\";position:absolute;left:50%;top:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);border:6px solid transparent}.vuejs3-datepicker__calendar header .prev:after{border-right:10px solid #000;margin-left:-5px}.vuejs3-datepicker__calendar header .prev.disabled:after{border-right:10px solid #000}.vuejs3-datepicker__calendar header .next:after{border-left:10px solid #000;margin-left:5px}.vuejs3-datepicker__calendar header .next.disabled:after{border-left:10px solid #ddd}.vuejs3-datepicker__calendar header .next:not(.disabled),.vuejs3-datepicker__calendar header .prev:not(.disabled),.vuejs3-datepicker__calendar header .up:not(.disabled){cursor:pointer}.vuejs3-datepicker__calendar header .next:not(.disabled):hover,.vuejs3-datepicker__calendar header .prev:not(.disabled):hover,.vuejs3-datepicker__calendar header .up:not(.disabled):hover{background:#eee}.vuejs3-datepicker__calendar .disabled{color:#ddd;cursor:default}.vuejs3-datepicker__calendar .flex-rtl{display:-webkit-flex;display:-ms-flexbox;display:flex;width:inherit;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.vuejs3-datepicker__calendar .cell{display:inline-block;padding:0 5px;width:14.285714285714286%;height:40px;line-height:40px;text-align:center;vertical-align:middle;border:1px solid transparent}.vuejs3-datepicker__calendar .cell:not(.blank):not(.disabled).day,.vuejs3-datepicker__calendar .cell:not(.blank):not(.disabled).month,.vuejs3-datepicker__calendar .cell:not(.blank):not(.disabled).year{cursor:pointer}.vuejs3-datepicker__calendar .cell:not(.blank):not(.disabled).day:hover,.vuejs3-datepicker__calendar .cell:not(.blank):not(.disabled).month:hover,.vuejs3-datepicker__calendar .cell:not(.blank):not(.disabled).year:hover{border:1px solid #4bd}.vuejs3-datepicker__calendar .cell.selected,.vuejs3-datepicker__calendar .cell.selected.highlighted,.vuejs3-datepicker__calendar .cell.selected:hover{background:#4bd}.vuejs3-datepicker__calendar .cell.highlighted{background:#cae5ed}.vuejs3-datepicker__calendar .cell.highlighted.disabled{color:#a3a3a3}.vuejs3-datepicker__calendar .cell.grey{color:#888}.vuejs3-datepicker__calendar .cell.grey:hover{background:inherit}.vuejs3-datepicker__calendar .cell.day-header{font-size:75%;white-space:nowrap;cursor:inherit}.vuejs3-datepicker__calendar .cell.day-header:hover{background:inherit}.vuejs3-datepicker__calendar .month,.vuejs3-datepicker__calendar .year{width:33.333%}.vuejs3-datepicker__calendar-button,.vuejs3-datepicker__clear-button{cursor:pointer;font-style:normal}.vuejs3-datepicker__calendar-button.disabled,.vuejs3-datepicker__clear-button.disabled{color:#999;cursor:default}.dp-error{color:red;font-size:12px}.backdrop{position:fixed;display:none;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.5);z-index:2;cursor:pointer}"; +styleInject(css_248z); + +script$4.render = render$4; +script$4.__file = "src/components/datepicker/Datepicker.vue"; + +export default script$4; diff --git a/dist/datepicker.esm.js b/dist/datepicker.esm.js new file mode 100644 index 0000000..57552a7 --- /dev/null +++ b/dist/datepicker.esm.js @@ -0,0 +1,2690 @@ +import { defineComponent, ref, computed, watch, openBlock, createBlock, createCommentVNode, createVNode, createTextVNode, toDisplayString, renderSlot, withDirectives, withModifiers, Fragment, renderList, vShow, reactive, resolveComponent, withCtx } from 'vue'; + +function _typeof(obj) { + "@babel/helpers - typeof"; + + if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { + _typeof = function (obj) { + return typeof obj; + }; + } else { + _typeof = function (obj) { + return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; + }; + } + + return _typeof(obj); +} + +function _slicedToArray(arr, i) { + return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); +} + +function _arrayWithHoles(arr) { + if (Array.isArray(arr)) return arr; +} + +function _iterableToArrayLimit(arr, i) { + if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; + var _arr = []; + var _n = true; + var _d = false; + var _e = undefined; + + try { + for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { + _arr.push(_s.value); + + if (i && _arr.length === i) break; + } + } catch (err) { + _d = true; + _e = err; + } finally { + try { + if (!_n && _i["return"] != null) _i["return"](); + } finally { + if (_d) throw _e; + } + } + + return _arr; +} + +function _unsupportedIterableToArray(o, minLen) { + if (!o) return; + if (typeof o === "string") return _arrayLikeToArray(o, minLen); + var n = Object.prototype.toString.call(o).slice(8, -1); + if (n === "Object" && o.constructor) n = o.constructor.name; + if (n === "Map" || n === "Set") return Array.from(o); + if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); +} + +function _arrayLikeToArray(arr, len) { + if (len == null || len > arr.length) len = arr.length; + + for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; + + return arr2; +} + +function _nonIterableRest() { + throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); +} + +function _createForOfIteratorHelper(o, allowArrayLike) { + var it; + + if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { + if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { + if (it) o = it; + var i = 0; + + var F = function () {}; + + return { + s: F, + n: function () { + if (i >= o.length) return { + done: true + }; + return { + done: false, + value: o[i++] + }; + }, + e: function (e) { + throw e; + }, + f: F + }; + } + + throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); + } + + var normalCompletion = true, + didErr = false, + err; + return { + s: function () { + it = o[Symbol.iterator](); + }, + n: function () { + var step = it.next(); + normalCompletion = step.done; + return step; + }, + e: function (e) { + didErr = true; + err = e; + }, + f: function () { + try { + if (!normalCompletion && it.return != null) it.return(); + } finally { + if (didErr) throw err; + } + } + }; +} + +// import en from '@/components/datepicker/locale/translations/en'; + +/** + * Returns the full year, using UTC or not + * @param {Date} date + */ +var getFullYear = function getFullYear(date) { + var useUtc = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; + return useUtc ? date.getUTCFullYear() : date.getFullYear(); +}; +/** + * Returns the month, using UTC or not + * @param {Date} date + */ + +var getMonth = function getMonth(date) { + var useUtc = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; + return useUtc ? date.getUTCMonth() : date.getMonth(); +}; +/** + * Returns the date, using UTC or not + * @param {Date} date + */ + +var getDate = function getDate(date) { + var useUtc = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; + return useUtc ? date.getUTCDate() : date.getDate(); +}; +/** + * Returns the day, using UTC or not + * @param {Date} date + */ + +var getDay = function getDay(date) { + var useUtc = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; + return useUtc ? date.getUTCDay() : date.getDay(); +}; +/** + * Sets the full year, using UTC or not + * @param {Date} date + */ + +var setFullYear = function setFullYear(date, value) { + var useUtc = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false; + return useUtc ? date.setUTCFullYear(value) : date.setFullYear(value); +}; +/** + * Sets the month, using UTC or not + * @param {Date} date + */ + +var setMonth = function setMonth(date, value) { + var useUtc = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false; + return useUtc ? date.setUTCMonth(value) : date.setMonth(value); +}; +/** + * Sets the date, using UTC or not + * @param {Date} date + * @param {Number} value + */ + +var setDate = function setDate(date, value) { + var useUtc = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false; + return useUtc ? date.setUTCDate(value) : date.setDate(value); +}; +/** + * Check if date1 is equivalent to date2, without comparing the time + * @see https://stackoverflow.com/a/6202196/4455925 + * @param {Date} date1 + * @param {Date} date2 + */ + +var compareDates = function compareDates(date1, date2) { + var useUtc = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true; + var d1 = new Date(date1.getTime()); + var d2 = new Date(date2.getTime()); + + if (useUtc) { + d1.setUTCHours(0, 0, 0, 0); + d2.setUTCHours(0, 0, 0, 0); + } else { + d1.setHours(0, 0, 0, 0); + d2.setHours(0, 0, 0, 0); + } + + return d1.getTime() === d2.getTime(); +}; +/** + * Validates a date object + * @param {Date} date - an object instantiated with the new Date constructor + * @return {Boolean} + */ + +var isValidDate = function isValidDate(date) { + if (Object.prototype.toString.call(date) !== '[object Date]') { + return false; + } + + return !Number.isNaN(date.getTime()); +}; +/** + * Return abbreviated week day name + * @param {Date} + * @param {Array} + * @return {String} + */ + +var getDayNameAbbr = function getDayNameAbbr(date, days) { + if (_typeof(date) !== 'object') { + throw TypeError('Invalid Type'); + } + + return days[getDay(date)]; +}; +/** + * Return name of the month + * @param {Number|Date} + * @param {Array} + * @return {String} + */ + +var getMonthName = function getMonthName(month, months) { + if (!months) { + throw Error('missing 2nd parameter Months array'); + } + + if (_typeof(month) === 'object') { + return months[getMonth(month)]; + } + + if (typeof month === 'number') { + return months[month]; + } + + throw TypeError('Invalid type'); +}; +/** + * Return an abbreviated version of the month + * @param {Number|Date} + * @return {String} + */ + +var getMonthNameAbbr = function getMonthNameAbbr(month, monthsAbbr) { + if (!monthsAbbr) { + throw Error('missing 2nd paramter Months array'); + } + + if (_typeof(month) === 'object') { + return monthsAbbr[getMonth(month)]; + } + + if (typeof month === 'number') { + return monthsAbbr[month]; + } + + throw TypeError('Invalid type'); +}; +/** + * Alternative get total number of days in month + * @param {Number} year + * @param {Number} m + * @return {Number} + */ + +var daysInMonth = function daysInMonth(year, month) { + if (/8|3|5|10/.test(month)) { + return 30; + } + + if (month === 1) { + if (!(year % 4) && year % 100 || !(year % 400)) { + return 29; + } + + return 28; + } + + return 31; // return /8|3|5|10/.test(month as string) + // ? 30 + // : month === 1 + // ? (!(year % 4) && year % 100) || !(year % 400) + // ? 29 + // : 28 + // : 31; +}; +/** + * Get nth suffix for date + * @param {Number} day + * @return {String} + */ + +var getNthSuffix = function getNthSuffix(day) { + switch (day) { + case 1: + case 21: + case 31: + return 'st'; + + case 2: + case 22: + return 'nd'; + + case 3: + case 23: + return 'rd'; + + default: + return 'th'; + } +}; +/** + * Formats date object + * @param {Date} + * @param {String} + * @param {Object} + * @return {String} + */ + +var formatDate = function formatDate(date, format, translation) { + var year = getFullYear(date); + var month = getMonth(date) + 1; + var day = getDate(date); + var str = format.replace(/dd/, "0".concat(day).slice(-2)).replace(/d/, day).replace(/yyyy/, year).replace(/yy/, String(year).slice(2)).replace(/MMMM/, getMonthName(getMonth(date), translation.months)).replace(/MMM/, getMonthNameAbbr(getMonth(date), translation.monthsAbbr)).replace(/MM/, "0".concat(month).slice(-2)).replace(/M(?!a|ä|e)/, month.toString()).replace(/su/, getNthSuffix(getDate(date))).replace(/D(?!e|é|i)/, getDayNameAbbr(date, translation.days)); + return str; +}; +/** + * method used as a prop validator for input values + * @param {*} val + * @return {Boolean} + */ + +var validateDateInput = function validateDateInput(val) { + return val === null || val instanceof Date || typeof val === 'string' || typeof val === 'number'; +}; + +var script = defineComponent({ + name: 'DateInput', + props: { + selectedDate: { + type: Date + }, + resetTypedDate: { + type: [Date] + }, + format: { + type: [String, Function] + }, + translation: { + type: Object + }, + inline: { + type: Boolean + }, + id: { + type: String + }, + name: { + type: String + }, + openDate: { + type: Date + }, + placeholder: { + type: String + }, + inputClass: { + type: String + }, + clearButton: { + type: Boolean + }, + clearButtonIcon: { + type: String + }, + calendarButton: { + type: Boolean + }, + calendarButtonIcon: { + type: String + }, + calendarButtonIconContent: { + type: String + }, + disabled: { + type: Boolean + }, + required: { + type: Boolean + }, + typeable: { + type: Boolean + }, + bootstrapStyling: { + type: Boolean + }, + useUtc: { + type: Boolean + }, + minimumView: { + type: String, + default: 'day' + }, + maximumView: { + type: String, + default: 'year' + }, + clearError: { + type: Function, + required: true + }, + hideInput: { + type: Boolean, + default: true + } + }, + emits: ['showCalendar', 'typedDate', 'clearDate', 'closeCalendar'], + setup: function setup(props, _ref) { + var emit = _ref.emit; + var typedDate = ref(); + var inputRef = ref(null); // computed + + var computedInputClass = computed(function () { + if (props.bootstrapStyling) { + if (typeof props.inputClass === 'string') { + return [props.inputClass, 'form-control'].join(' '); + } // tbd : need to add here props.inputClass + + + return { + 'form-control': true + }; + } + + return props.inputClass; + }); + var formattedValue = computed(function () { + if (!props.selectedDate) { + return null; + } + + if (typedDate.value) { + return typedDate.value; + } + + var date = typeof props.format === 'function' ? props.format(props.selectedDate) : formatDate(new Date(props.selectedDate), props.format, props.translation); + + if (props.minimumView === props.maximumView) { + var _date$split = date.split(' '), + _date$split2 = _slicedToArray(_date$split, 3), + y = _date$split2[1], + z = _date$split2[2]; + + if (props.maximumView === 'month') { + date = y; + } else if (props.maximumView === 'year') { + date = z; + } + } + + return date; + }); // watchers + + watch(function () { + return props.resetTypedDate; + }, function () { + typedDate.value = ''; + }); + /** + * open Calendar + */ + + function showCalendar() { + emit('showCalendar'); + } + /** + * Attempt to parse a typed date + * @param {Event} event + */ + + + function parseTypedDate(event) { + if ([27, 13 // enter + ].includes(event.keyCode)) { + inputRef.value.blur(); + } + + if (props.typeable) { + var value = inputRef.value.value; + var temptypedDate = Date.parse(value); + + if (!isNaN(temptypedDate)) { + typedDate.value = value; + emit('typedDate', temptypedDate); + } + } + } + /** + * emit a clearDate event + */ + + + function clearDate() { + emit('clearDate'); + } + /** + * nullify the typed date to defer to regular formatting + * called once the input is blurred + */ + + + function inputBlurred() { + if (props.typeable && Number.isNaN(Date.parse(inputRef.value.value))) { + clearDate(); // need to check this if required + + inputRef.value.value = null; + typedDate.value = ''; + } + + emit('closeCalendar', true); + } + /** + * nullify the error + * called once the input is focused + */ + + + function onFocus() { + props.clearError(); + } + + return { + typedDate: typedDate, + computedInputClass: computedInputClass, + formattedValue: formattedValue, + showCalendar: showCalendar, + parseTypedDate: parseTypedDate, + inputBlurred: inputBlurred, + onFocus: onFocus, + inputRef: inputRef + }; + } +}); + +const img = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' height='16' width='16' role='img' aria-hidden='true' data-icon='calendarAlt'%3e%3cpath fill='currentColor' d='M400 64h-48V12c0-6.6-5.4-12-12-12h-8c-6.6 0-12 5.4-12 12v52H128V12c0-6.6-5.4-12-12-12h-8c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM48 96h352c8.8 0 16 7.2 16 16v48H32v-48c0-8.8 7.2-16 16-16zm352 384H48c-8.8 0-16-7.2-16-16V192h384v272c0 8.8-7.2 16-16 16zM148 320h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm96 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm96 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm-96 96h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm-96 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm192 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12z'%3e%3c/path%3e%3c/svg%3e"; + +const _hoisted_1 = { key: 0 }; +const _hoisted_2 = { key: 0 }; +const _hoisted_3 = /*#__PURE__*/createVNode("img", { src: img }, null, -1 /* HOISTED */); +const _hoisted_4 = { key: 0 }; +const _hoisted_5 = /*#__PURE__*/createTextVNode("Default"); + +function render(_ctx, _cache, $props, $setup, $data, $options) { + return (openBlock(), createBlock("div", { + class: { 'input-group': _ctx.bootstrapStyling } + }, [ + createCommentVNode(" Calendar Button "), + (_ctx.calendarButton) + ? (openBlock(), createBlock("span", { + key: 0, + class: ["vuejs3-datepicker__calendar-button", { 'input-group-prepend': _ctx.bootstrapStyling }], + onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.showCalendar(...args))), + style: { 'cursor:not-allowed;': _ctx.disabled } + }, [ + createVNode("span", { + class: { 'input-group-text': _ctx.bootstrapStyling } + }, [ + createVNode("i", { class: _ctx.calendarButtonIcon }, [ + createTextVNode(toDisplayString(_ctx.calendarButtonIconContent) + " ", 1 /* TEXT */), + (!_ctx.calendarButtonIcon) + ? (openBlock(), createBlock("span", _hoisted_1, "…")) + : createCommentVNode("v-if", true) + ], 2 /* CLASS */) + ], 2 /* CLASS */) + ], 6 /* CLASS, STYLE */)) + : createCommentVNode("v-if", true), + createVNode("div", null, [ + (!_ctx.inline) + ? (openBlock(), createBlock("span", _hoisted_2, [ + _hoisted_3 + ])) + : createCommentVNode("v-if", true), + createVNode("input", { + type: _ctx.inline ? 'hidden' : 'text', + class: _ctx.computedInputClass, + name: _ctx.name, + ref: "inputRef", + id: _ctx.id, + value: _ctx.formattedValue, + "open-date": _ctx.openDate, + placeholder: _ctx.placeholder, + "clear-button": _ctx.clearButton, + disabled: _ctx.disabled, + required: _ctx.required, + readonly: !_ctx.typeable, + onClick: _cache[2] || (_cache[2] = (...args) => (_ctx.showCalendar(...args))), + onKeyup: _cache[3] || (_cache[3] = (...args) => (_ctx.parseTypedDate(...args))), + onBlur: _cache[4] || (_cache[4] = (...args) => (_ctx.inputBlurred(...args))), + onFocus: _cache[5] || (_cache[5] = (...args) => (_ctx.onFocus(...args))), + autocomplete: "off" + }, null, 42 /* CLASS, PROPS, HYDRATE_EVENTS */, ["type", "name", "id", "value", "open-date", "placeholder", "clear-button", "disabled", "required", "readonly"]) + ]), + createCommentVNode(" Clear Button "), + (_ctx.clearButton && _ctx.selectedDate) + ? (openBlock(), createBlock("span", { + key: 1, + class: ["vuejs3-datepicker__clear-button", { 'input-group-append': _ctx.bootstrapStyling }], + onClick: _cache[6] || (_cache[6] = $event => (_ctx.clearDate())) + }, [ + createVNode("span", { + class: { 'input-group-text': _ctx.bootstrapStyling } + }, [ + createVNode("i", { class: _ctx.clearButtonIcon }, [ + (!_ctx.clearButtonIcon) + ? (openBlock(), createBlock("span", _hoisted_4, "×")) + : createCommentVNode("v-if", true) + ], 2 /* CLASS */) + ], 2 /* CLASS */) + ], 2 /* CLASS */)) + : createCommentVNode("v-if", true), + renderSlot(_ctx.$slots, "afterDateInput", {}, () => [ + _hoisted_5 + ]) + ], 2 /* CLASS */)) +} + +script.render = render; +script.__file = "src/components/datepicker/DateInput.vue"; + +var script$1 = defineComponent({ + name: 'PickerDay', + props: { + showDayView: { + type: Boolean + }, + selectedDate: { + type: Date, + default: new Date() + }, + pageDate: { + type: Date, + default: new Date() + }, + pageTimestamp: { + type: Number + }, + fullMonthName: { + type: Boolean + }, + allowedToShowView: { + type: Function + }, + dayCellContent: { + type: Function, + default: function _default(day) { + return day.date; + } + }, + disabledDates: { + type: Object + }, + highlighted: { + type: Object + }, + calendarClass: { + type: [String, Object, Array] + }, + calendarStyle: { + type: Object + }, + translation: { + type: Object + }, + isRtl: { + type: Boolean + }, + mondayFirst: { + type: Boolean + }, + useUtc: { + type: Boolean + } + }, + emits: ['show-year-calendar', 'changed-month', 'show-month-calendar', 'selected-disabled', 'select-date'], + setup: function setup(props, _ref) { + var emit = _ref.emit; + + /** ********************************** Methods *********************************** */ + + /** + * Whether a day is highlighted and it is the first date + * in the highlighted range of dates + * @param {string | Date} + */ + function selectDate(date) { + if (date.isDisabled) { + emit('selected-disabled', date); + } + + emit('select-date', date); + } + /** + * Emit an event to show the month picker + */ + + + function showMonthCalendar() { + emit('show-month-calendar'); + } + /** + * Emit an event to show the year picker + */ + + + function showYearCalendar() { + emit('show-year-calendar'); + } + /** + * Change the page month + * @param {Number} incrementBy + */ + + + function changeMonth(incrementBy) { + var date = props.pageDate; + setMonth(date, getMonth(date) + incrementBy); + emit('changed-month', date); + } + /** + * Is the previous month disabled? + * @return {Boolean} + */ + + + function isPreviousMonthDisabled() { + var d = props.disabledDates; + + if (!d || !d.to) { + return false; + } + + var t = props.pageDate; + return getMonth(d.to) >= getMonth(t) && getFullYear(d.to) >= getFullYear(t); + } + /** + * Decrement the page month + */ + + + function previousMonth() { + if (!isPreviousMonthDisabled()) { + changeMonth(-1); + } + } + /** + * Is the next month disabled? + * @return {Boolean} + */ + + + function isNextMonthDisabled() { + var d = props.disabledDates; + + if (!d || !d.from) { + return false; + } + + var t = props.pageDate; + return getMonth(d.from) <= getMonth(t) && getFullYear(d.from) <= getFullYear(t); + } + /** + * Increment the current page month + */ + + + function nextMonth() { + if (!isNextMonthDisabled()) { + changeMonth(+1); + } + } + /** + * Whether a day is selected + * @param {Date} + * @return {Boolean} + */ + + + function isSelectedDate(dObj) { + return props.selectedDate ? compareDates(props.selectedDate, dObj) : false; + } + /** + * Whether a date is disabled + * @return {Boolean} + */ + + + function isDisabledDate(date) { + var disabledDates = false; + var t = props.disabledDates; + if (!t) return disabledDates; + + if (typeof t === 'undefined') { + return false; + } + + if (typeof t.dates !== 'undefined') { + t.dates.forEach(function (d) { + if (compareDates(date, d)) { + disabledDates = true; // return true; + } + }); + } + + if (typeof t.to !== 'undefined' && t.to && date < t.to) { + disabledDates = true; + } + + if (typeof t.from !== 'undefined' && t.from && date > t.from) { + disabledDates = true; + } + + if (typeof t.ranges !== 'undefined') { + t.ranges.forEach(function (range) { + if (typeof range.from !== 'undefined' && range.from && typeof range.to !== 'undefined' && range.to) { + if (date < range.to && date > range.from) { + disabledDates = true; // return true; + } + } + }); + } + + if (typeof t.days !== 'undefined' && t.days.indexOf(getDay(date)) !== -1) { + disabledDates = true; + } + + if (typeof t.daysOfMonth !== 'undefined' && t.daysOfMonth.indexOf(getDate(date)) !== -1) { + disabledDates = true; + } + + if (typeof t.customPredictor === 'function' && t.customPredictor(date)) { + disabledDates = true; + } + + return disabledDates; + } + /** + * Helper + * @param {mixed} prop + * @return {Boolean} + */ + + + function isDefined(prop) { + return typeof prop !== 'undefined' && prop; + } + /** + * Whether a date is highlighted or not + * @return {Boolean} + */ + + + function isHighlightedDate(date) { + var h = props.highlighted; + + if (!(h && h.includeDisabled) && isDisabledDate(date)) { + return false; + } + + var highlighted = false; + + if (typeof h === 'undefined') { + return false; + } + + if (typeof h.dates !== 'undefined') { + h.dates.forEach(function (d) { + if (compareDates(date, d)) { + highlighted = true; // return true; + } + }); + } + + if (isDefined(h.from) && isDefined(h.to)) { + highlighted = date >= h.from && date <= h.to; + } + + if (typeof h.days !== 'undefined' && h.days.indexOf(getDay(date)) !== -1) { + highlighted = true; + } + + if (typeof h.daysOfMonth !== 'undefined' && h.daysOfMonth.indexOf(getDate(date)) !== -1) { + highlighted = true; + } + + if (typeof h.customPredictor === 'function' && h.customPredictor(date)) { + highlighted = true; + } + + return highlighted; + } + /** + * Returns Css Classes for a day element + */ + + + function dayClasses(day) { + return { + selected: day.isSelected, + disabled: day.isDisabled, + highlighted: day.isHighlighted, + today: day.isToday, + weekend: day.isWeekend, + sat: day.isSaturday, + sun: day.isSunday, + 'highlight-start': day.isHighlightStart, + 'highlight-end': day.isHighlightEnd + }; + } + /** + * Whether a day is highlighted and it is the first date + * in the highlighted range of dates + * @param {Date} + * @return {Boolean} + */ + + + function isHighlightStart(date) { + var h = props.highlighted; + if (!h) return false; + return isHighlightedDate(date) && h.from instanceof Date && getFullYear(h.from) === getFullYear(date) && getMonth(h.from) === getMonth(date) && getDate(h.from) === getDate(date); + } + /** + * Whether a day is highlighted and it is the first date + * in the highlighted range of dates + * @param {Date} + * @return {Boolean} + */ + + + function isHighlightEnd(date) { + var h = props.highlighted; + if (!h) return false; + return isHighlightedDate(date) && h.to instanceof Date && getFullYear(h.to) === getFullYear(date) && getMonth(h.to) === getMonth(date) && getDate(h.to) === getDate(date); + } + /** ********************************** Computed *********************************** */ + + /** + * Returns an array of day names + * @return {String[]} + */ + + + var daysOfWeek = computed(function () { + if (props.mondayFirst) { + var tempDays = props.translation && props.translation.days && props.translation.days.slice(); + tempDays.push(tempDays.shift()); + return tempDays; + } + + return props.translation && props.translation.days; + }); + var blankDays = computed(function () { + var d = props.pageDate; + var dObj = props.useUtc ? new Date(Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), 1)) : new Date(d.getFullYear(), d.getMonth(), 1, d.getHours(), d.getMinutes()); + + if (props.mondayFirst) { + return getDay(dObj) > 0 ? getDay(dObj) - 1 : 6; + } + + return getDay(dObj); + }); + /** + * @return {Object[]} + */ + + var days = computed(function () { + var d = props.pageDate; + var tdays = []; // set up a new date object to the beginning of the current 'page' + + var dObj = props.useUtc ? new Date(Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), 1)) : new Date(d.getFullYear(), d.getMonth(), 1, d.getHours(), d.getMinutes()); + var t = daysInMonth(getFullYear(dObj), getMonth(dObj)); + + for (var i = 0; i < t; i += 1) { + tdays.push({ + date: getDate(dObj), + timestamp: dObj.getTime(), + isSelected: isSelectedDate(dObj), + isDisabled: isDisabledDate(dObj), + isHighlighted: isHighlightedDate(dObj), + isHighlightStart: isHighlightStart(dObj), + isHighlightEnd: isHighlightEnd(dObj), + isToday: compareDates(dObj, new Date()), + isWeekend: getDay(dObj) === 0 || getDay(dObj) === 6, + isSaturday: getDay(dObj) === 6, + isSunday: getDay(dObj) === 0 + }); + setDate(dObj, getDate(dObj) + 1); + } + + return tdays; + }); + /** + * Gets the name of the month the current page is on + * @return {String} + */ + + var currMonthName = computed(function () { + var monthName = props.fullMonthName ? props.translation && props.translation.months : props.translation && props.translation.monthsAbbr; + return getMonthNameAbbr(getMonth(props.pageDate), monthName); + }); + /** + * Gets the name of the month the current page is on + * @return {String} + */ + + var monthName = computed(function () { + var tempName = props.translation && props.translation.months; + return getMonthName(getMonth(props.pageDate), tempName); + }); + /** + * Gets the name of the year that current page is on + * @return {Number} + */ + + var currYearName = computed(function () { + var yearSuffix = props.translation && props.translation.yearSuffix; + return "".concat(getFullYear(props.pageDate)).concat(yearSuffix); + }); + /** + * Is this translation using year/month/day format? + * @return {Boolean} + */ + + var isYmd = computed(function () { + return (props.translation && props.translation.ymd && props.translation && props.translation.ymd) === true; + }); + /** + * Is the left hand navigation button disabled? + * @return {Boolean} + */ + + var isLeftNavDisabled = computed(function () { + return props.isRtl ? isNextMonthDisabled() : isPreviousMonthDisabled(); + }); + /** + * Is the right hand navigation button disabled? + * @return {Boolean} + */ + + var isRightNavDisabled = computed(function () { + return props.isRtl ? isPreviousMonthDisabled() : isNextMonthDisabled(); + }); + var getDayName = computed(function () { + return props.selectedDate ? getDayNameAbbr(props.selectedDate, props.translation && props.translation.daysNames) : null; + }); + var getDisplayDate = computed(function () { + return props.selectedDate ? getDate(props.selectedDate) : null; + }); + return { + isDefined: isDefined, + showMonthCalendar: showMonthCalendar, + daysOfWeek: daysOfWeek, + blankDays: blankDays, + isYmd: isYmd, + days: days, + currMonthName: currMonthName, + currYearName: currYearName, + isLeftNavDisabled: isLeftNavDisabled, + isRightNavDisabled: isRightNavDisabled, + selectDate: selectDate, + previousMonth: previousMonth, + nextMonth: nextMonth, + dayClasses: dayClasses, + monthName: monthName, + getDayName: getDayName, + getDisplayDate: getDisplayDate, + showYearCalendar: showYearCalendar + }; + } +}); + +const _hoisted_1$1 = { key: 0 }; + +function render$1(_ctx, _cache, $props, $setup, $data, $options) { + return withDirectives((openBlock(), createBlock("div", { + class: [_ctx.calendarClass, 'vuejs3-datepicker__calendar'], + style: _ctx.calendarStyle, + onMousedown: _cache[5] || (_cache[5] = withModifiers(() => {}, ["prevent"])) + }, [ + renderSlot(_ctx.$slots, "beforeCalendarHeader"), + createVNode("section", null, [ + createVNode("p", { + onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.showYearCalendar(...args))) + }, toDisplayString(_ctx.currYearName), 1 /* TEXT */), + (_ctx.selectedDate) + ? (openBlock(), createBlock("p", _hoisted_1$1, toDisplayString(_ctx.getDayName) + " " + toDisplayString(_ctx.getDisplayDate) + " " + toDisplayString(_ctx.monthName), 1 /* TEXT */)) + : createCommentVNode("v-if", true) + ]), + createVNode("header", null, [ + createVNode("span", { + onClick: _cache[2] || (_cache[2] = $event => (_ctx.isRtl ? _ctx.nextMonth() : _ctx.previousMonth())), + class: ["prev", { disabled: _ctx.isLeftNavDisabled }] + }, "<", 2 /* CLASS */), + createVNode("span", { + class: ["day__month_btn", _ctx.allowedToShowView('month') ? 'up' : ''], + onClick: _cache[3] || (_cache[3] = (...args) => (_ctx.showMonthCalendar(...args))) + }, toDisplayString(_ctx.isYmd ? _ctx.currYearName : _ctx.currMonthName) + " " + toDisplayString(_ctx.isYmd ? _ctx.currMonthName : _ctx.currYearName), 3 /* TEXT, CLASS */), + createVNode("span", { + onClick: _cache[4] || (_cache[4] = $event => (_ctx.isRtl ? _ctx.previousMonth() : _ctx.nextMonth())), + class: ["next", { disabled: _ctx.isRightNavDisabled }] + }, ">", 2 /* CLASS */) + ]), + createVNode("div", { + class: _ctx.isRtl ? 'flex-rtl' : '' + }, [ + (openBlock(true), createBlock(Fragment, null, renderList(_ctx.daysOfWeek, (d) => { + return (openBlock(), createBlock("span", { + class: "cell day-header", + key: d.timestamp + }, toDisplayString(d), 1 /* TEXT */)) + }), 128 /* KEYED_FRAGMENT */)), + (_ctx.blankDays > 0) + ? (openBlock(true), createBlock(Fragment, { key: 0 }, renderList(_ctx.blankDays, (d) => { + return (openBlock(), createBlock("span", { + class: "cell day blank", + key: d.timestamp + })) + }), 128 /* KEYED_FRAGMENT */)) + : createCommentVNode("v-if", true), + (openBlock(true), createBlock(Fragment, null, renderList(_ctx.days, (day) => { + return (openBlock(), createBlock("span", { + class: ["cell day", _ctx.dayClasses(day)], + key: day.timestamp, + innerHTML: _ctx.dayCellContent(day), + onClick: $event => (_ctx.selectDate(day)) + }, null, 10 /* CLASS, PROPS */, ["innerHTML", "onClick"])) + }), 128 /* KEYED_FRAGMENT */)) + ], 2 /* CLASS */) + ], 38 /* CLASS, STYLE, HYDRATE_EVENTS */)), [ + [vShow, _ctx.showDayView] + ]) +} + +script$1.render = render$1; +script$1.__file = "src/components/datepicker/PickerDay.vue"; + +var script$2 = defineComponent({ + name: 'PickerMonth', + props: { + showMonthView: { + type: Boolean + }, + selectedDate: { + type: Date, + default: new Date() + }, + pageDate: { + type: Date, + default: new Date() + }, + pageTimestamp: { + type: Number + }, + disabledDates: { + type: Object + }, + calendarClass: { + type: [String, Object, Array] + }, + calendarStyle: { + type: Object + }, + translation: { + type: Object + }, + isRtl: { + type: Boolean + }, + allowedToShowView: { + type: Function + }, + useUtc: { + type: Boolean + }, + fullMonthName: { + type: Boolean + } + }, + setup: function setup(props, _ref) { + var emit = _ref.emit; + + /** ********************************** Methods *********************************** */ + + /** + * Emits a selectMonth event + * @param {Object} month + */ + function selectMonth(month) { + if (!month.isDisabled) { + emit('select-month', month); + } + } + /** + * Changes the year up or down + * @param {Number} incrementBy + */ + + + function changeYear(incrementBy) { + var date = props.pageDate; + setFullYear(date, getFullYear(date) + incrementBy); + emit('changed-year', date); + } + /** + * Checks if the previous year is disabled or not + * @return {Boolean} + */ + + + function isPreviousYearDisabled() { + var d = props.disabledDates; + + if (!d || !d.to) { + return false; + } + + return getFullYear(d.to) >= getFullYear(props.pageDate); + } + /** + * Decrements the year + */ + + + function previousYear() { + if (!isPreviousYearDisabled()) { + changeYear(-1); + } + } + /** + * Checks if the next year is disabled or not + * @return {Boolean} + */ + + + function isNextYearDisabled() { + var d = props.disabledDates; + + if (!d || !d.from) { + return false; + } + + return getFullYear(d.from) <= getFullYear(props.pageDate); + } + /** + * Increments the year + */ + + + function nextYear() { + if (!isNextYearDisabled()) { + changeYear(1); + } + } + /** + * Emits an event that shows the year calendar + */ + + + function showYearCalendar() { + emit('show-year-calendar'); + } + /** + * Whether the selected date is in this month + * @param {Date} + * @return {Boolean} + */ + + + function isSelectedMonth(date) { + var d = props.selectedDate; + return d && getFullYear(d) === getFullYear(date) && getMonth(d) === getMonth(date); + } + /** + * Whether a month is disabled + * @param {Date} + * @return {Boolean} + */ + + + function isDisabledMonth(date) { + var disabledDates = false; + var d = props.disabledDates; + if (!d) return false; + + if (typeof d === 'undefined') { + return false; + } + + if (typeof d.to !== 'undefined' && d.to) { + if (getMonth(date) < getMonth(d.to) && getFullYear(date) <= getFullYear(d.to) || getFullYear(date) < getFullYear(d.to)) { + disabledDates = true; + } + } + + if (typeof d.from !== 'undefined' && d.from) { + if (getMonth(date) > getMonth(d.from) && getFullYear(date) >= getFullYear(d.from) || getFullYear(date) > getFullYear(d.from)) { + disabledDates = true; + } + } + + if (typeof d.customPredictor === 'function' && d.customPredictor(date)) { + disabledDates = true; + } + + return disabledDates; + } + /** ********************************** Computed *********************************** */ + + + var months = computed(function () { + var d = props.pageDate; + var tmonths = []; // set up a new date object to the beginning of the current 'page' + + var dObj = props.useUtc ? new Date(Date.UTC(d.getUTCFullYear(), 0, d.getUTCDate())) : new Date(d.getFullYear(), 0, d.getDate(), d.getHours(), d.getMinutes()); + + for (var i = 0; i < 12; i += 1) { + tmonths.push({ + month: getMonthName(i, props.translation && props.translation.months), + timestamp: dObj.getTime(), + isSelected: isSelectedMonth(dObj), + isDisabled: isDisabledMonth(dObj) + }); + setMonth(dObj, getMonth(dObj) + 1); + } + + return tmonths; + }); + /** + * Get year name on current page. + * @return {String} + */ + + var pageYearName = computed(function () { + var yearSuffix = props.translation && props.translation.yearSuffix; + return "".concat(getFullYear(props.pageDate)).concat(yearSuffix); + }); + /** + * Is the left hand navigation disabled + * @return {Boolean} + */ + + var isLeftNavDisabled = computed(function () { + return props.isRtl ? isNextYearDisabled() : isPreviousYearDisabled(); + }); + /** + * Is the right hand navigation disabled + * @return {Boolean} + */ + + var isRightNavDisabled = computed(function () { + return props.isRtl ? isPreviousYearDisabled() : isNextYearDisabled(); + }); + /** + * Gets the name of the month the current page is on + * @return {String} + */ + + var monthName = computed(function () { + var tempName = props.translation && props.translation.months; + return getMonthName(getMonth(props.pageDate), tempName); + }); + var getDisplayDate = computed(function () { + return props.selectedDate ? getDate(props.selectedDate) : null; + }); + var getDayName = computed(function () { + return props.selectedDate ? getDayNameAbbr(props.selectedDate, props.translation && props.translation.daysNames) : null; + }); + /** + * Gets the name of the year that current page is on + * @return {Number} + */ + + var currYearName = computed(function () { + var yearSuffix = props.translation && props.translation.yearSuffix; + return "".concat(getFullYear(props.pageDate)).concat(yearSuffix); + }); + /** + * Gets the name of the month the current page is on + * @return {String} + */ + + var currMonthName = computed(function () { + var monthName = props.fullMonthName ? props.translation && props.translation.months : props.translation && props.translation.monthsAbbr; + return getMonthNameAbbr(getMonth(props.pageDate), monthName); + }); + return { + isRightNavDisabled: isRightNavDisabled, + isLeftNavDisabled: isLeftNavDisabled, + pageYearName: pageYearName, + months: months, + selectMonth: selectMonth, + previousYear: previousYear, + nextYear: nextYear, + currYearName: currYearName, + getDisplayDate: getDisplayDate, + monthName: monthName, + showYearCalendar: showYearCalendar, + getDayName: getDayName + }; + } +}); + +const _hoisted_1$2 = { key: 0 }; + +function render$2(_ctx, _cache, $props, $setup, $data, $options) { + return withDirectives((openBlock(), createBlock("div", { + class: [_ctx.calendarClass, 'vuejs3-datepicker__calendar'], + style: _ctx.calendarStyle, + onMousedown: _cache[5] || (_cache[5] = withModifiers(() => {}, ["prevent"])) + }, [ + renderSlot(_ctx.$slots, "beforeCalendarHeader"), + createVNode("section", null, [ + createVNode("p", { + onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.showYearCalendar(...args))) + }, toDisplayString(_ctx.currYearName), 1 /* TEXT */), + (_ctx.selectedDate) + ? (openBlock(), createBlock("p", _hoisted_1$2, toDisplayString(_ctx.getDayName) + " " + toDisplayString(_ctx.getDisplayDate) + " " + toDisplayString(_ctx.monthName), 1 /* TEXT */)) + : createCommentVNode("v-if", true) + ]), + createVNode("header", null, [ + createVNode("span", { + onClick: _cache[2] || (_cache[2] = $event => (_ctx.isRtl ? _ctx.nextYear() : _ctx.previousYear())), + class: ["prev", { disabled: _ctx.isLeftNavDisabled }] + }, "<", 2 /* CLASS */), + createVNode("span", { + class: ["month__year_btn", _ctx.allowedToShowView('year') ? 'up' : ''], + onClick: _cache[3] || (_cache[3] = (...args) => (_ctx.showYearCalendar(...args))) + }, toDisplayString(_ctx.pageYearName), 3 /* TEXT, CLASS */), + createVNode("span", { + onClick: _cache[4] || (_cache[4] = $event => (_ctx.isRtl ? _ctx.previousYear() : _ctx.nextYear())), + class: ["next", { disabled: _ctx.isRightNavDisabled }] + }, ">", 2 /* CLASS */) + ]), + (openBlock(true), createBlock(Fragment, null, renderList(_ctx.months, (month) => { + return (openBlock(), createBlock("span", { + class: ["cell month", { selected: month.isSelected, disabled: month.isDisabled }], + key: month.timestamp, + onClick: withModifiers($event => (_ctx.selectMonth(month)), ["stop"]) + }, toDisplayString(month.month), 11 /* TEXT, CLASS, PROPS */, ["onClick"])) + }), 128 /* KEYED_FRAGMENT */)) + ], 38 /* CLASS, STYLE, HYDRATE_EVENTS */)), [ + [vShow, _ctx.showMonthView] + ]) +} + +script$2.render = render$2; +script$2.__file = "src/components/datepicker/PickerMonth.vue"; + +var script$3 = defineComponent({ + name: 'PickerYear', + props: { + showYearView: { + type: Boolean + }, + selectedDate: { + type: Date, + default: new Date() + }, + pageDate: { + type: Date, + default: new Date() + }, + pageTimestamp: { + type: Number + }, + disabledDates: { + type: Object + }, + highlighted: { + type: Object + }, + calendarClass: { + type: [String, Object, Array] + }, + calendarStyle: { + type: Object + }, + translation: { + type: Object + }, + isRtl: { + type: Boolean + }, + allowedToShowView: { + type: Function + }, + useUtc: { + type: Boolean + }, + fullMonthName: { + type: Boolean + } + }, + setup: function setup(props, _ref) { + var emit = _ref.emit; + + /** ********************************** Methods *********************************** */ + + /** + * Select year + * @param {year} + */ + function selectYear(year) { + if (!year.isDisabled) { + emit('select-year', year); + } + } + /** + * Change year (increment / decrement) + * @param {number} + */ + + + function changeYear(incrementBy) { + var date = props.pageDate; + setFullYear(date, getFullYear(date) + incrementBy); + emit('changed-decade', date); + } + /** + * checks if previous decade is disabled + */ + + + function isPreviousDecadeDisabled() { + var d = props.disabledDates; + + if (!d || !d.to) { + return false; + } + + var disabledYear = getFullYear(d.to); + var lastYearInPreviousPage = Math.floor(getFullYear(props.pageDate) / 10) * 10 - 1; + return disabledYear > lastYearInPreviousPage; + } + /** + * changes year to previous decade + */ + + + function previousDecade() { + if (!isPreviousDecadeDisabled()) { + changeYear(-10); + } + } + /** + * check if next decade is disabled + */ + + + function isNextDecadeDisabled() { + var d = props.disabledDates; + + if (!d || !d.from) { + return false; + } + + var disabledYear = getFullYear(d.from); + var firstYearInNextPage = Math.ceil(getFullYear(props.pageDate) / 10) * 10; + return disabledYear < firstYearInNextPage; + } + /** + * moves year to next decade + */ + + + function nextDecade() { + if (!isNextDecadeDisabled()) { + changeYear(10); + } + } + /** + * Whether the selected date is in this year + * @param {Date} + * @return {Boolean} + */ + + + function isSelectedYear(date) { + return props.selectedDate ? getFullYear(props.selectedDate) === getFullYear(date) : false; + } + /** + * Whether a year is disabled + * @param {Date} + * @return {Boolean} + */ + + + function isDisabledYear(date) { + var disabledDates = false; + + if (typeof props.disabledDates === 'undefined' || !props.disabledDates) { + return false; + } + + if (typeof props.disabledDates.to !== 'undefined' && props.disabledDates.to) { + if (getFullYear(date) < getFullYear(props.disabledDates.to)) { + disabledDates = true; + } + } + + if (typeof props.disabledDates.from !== 'undefined' && props.disabledDates.from) { + if (getFullYear(date) > getFullYear(props.disabledDates.from)) { + disabledDates = true; + } + } + + if (typeof props.disabledDates.customPredictor === 'function' && props.disabledDates.customPredictor(date)) { + disabledDates = true; + } + + return disabledDates; + } + /** ********************************** Computed *********************************** */ + + + var years = computed(function () { + var d = props.pageDate; + var tyears = []; // set up a new date object to the beginning of the current 'page'7 + + var dObj = props.useUtc ? new Date(Date.UTC(Math.floor(d.getUTCFullYear() / 10) * 10, d.getUTCMonth(), d.getUTCDate())) : new Date(Math.floor(d.getFullYear() / 10) * 10, d.getMonth(), d.getDate(), d.getHours(), d.getMinutes()); + + for (var i = 0; i < 10; i += 1) { + tyears.push({ + year: getFullYear(dObj), + timestamp: dObj.getTime(), + isSelected: isSelectedYear(dObj), + isDisabled: isDisabledYear(dObj) + }); + setFullYear(dObj, getFullYear(dObj) + 1); + } + + return tyears; + }); + /** + * @return {String} + */ + + var getPageDecade = computed(function () { + var decadeStart = Math.floor(getFullYear(props.pageDate) / 10) * 10; + var decadeEnd = decadeStart + 9; + var yearSuffix = props.translation && props.translation.yearSuffix; + return "".concat(decadeStart, " - ").concat(decadeEnd).concat(yearSuffix); + }); + /** + * Is the left hand navigation button disabled? + * @return {Boolean} + */ + + var isLeftNavDisabled = computed(function () { + return props.isRtl ? isNextDecadeDisabled() : isPreviousDecadeDisabled(); + }); + /** + * Is the right hand navigation button disabled? + * @return {Boolean} + */ + + var isRightNavDisabled = computed(function () { + return props.isRtl ? isPreviousDecadeDisabled() : isNextDecadeDisabled(); + }); + var getDayName = computed(function () { + return props.selectedDate ? getDayNameAbbr(props.selectedDate, props.translation && props.translation.daysNames) : null; + }); + /** + * Gets the name of the month the current page is on + * @return {String} + */ + + var monthName = computed(function () { + var tempName = props.translation && props.translation.months; + return getMonthName(getMonth(props.pageDate), tempName); + }); + var getDisplayDate = computed(function () { + return props.selectedDate ? getDate(props.selectedDate) : null; + }); + /** + * Gets the name of the year that current page is on + * @return {Number} + */ + + var currYearName = computed(function () { + var yearSuffix = props.translation && props.translation.yearSuffix; + return "".concat(getFullYear(props.pageDate)).concat(yearSuffix); + }); + /** + * Gets the name of the month the current page is on + * @return {String} + */ + + var currMonthName = computed(function () { + var monthName = props.fullMonthName ? props.translation && props.translation.months : props.translation && props.translation.monthsAbbr; + return getMonthNameAbbr(getMonth(props.pageDate), monthName); + }); + return { + isRightNavDisabled: isRightNavDisabled, + isLeftNavDisabled: isLeftNavDisabled, + getPageDecade: getPageDecade, + years: years, + nextDecade: nextDecade, + previousDecade: previousDecade, + selectYear: selectYear, + getDayName: getDayName, + monthName: monthName, + getDisplayDate: getDisplayDate, + currYearName: currYearName, + currMonthName: currMonthName + }; + } +}); + +const _hoisted_1$3 = { key: 0 }; + +function render$3(_ctx, _cache, $props, $setup, $data, $options) { + return withDirectives((openBlock(), createBlock("div", { + class: [_ctx.calendarClass, 'vuejs3-datepicker__calendar'], + style: _ctx.calendarStyle, + onMousedown: _cache[3] || (_cache[3] = withModifiers(() => {}, ["prevent"])) + }, [ + renderSlot(_ctx.$slots, "beforeCalendarHeader"), + createVNode("section", null, [ + createVNode("p", null, toDisplayString(_ctx.currYearName), 1 /* TEXT */), + (_ctx.selectedDate) + ? (openBlock(), createBlock("p", _hoisted_1$3, toDisplayString(_ctx.getDayName) + " " + toDisplayString(_ctx.getDisplayDate) + " " + toDisplayString(_ctx.monthName), 1 /* TEXT */)) + : createCommentVNode("v-if", true) + ]), + createVNode("header", null, [ + createVNode("span", { + onClick: _cache[1] || (_cache[1] = $event => (_ctx.isRtl ? _ctx.nextDecade() : _ctx.previousDecade())), + class: ["prev", { disabled: _ctx.isLeftNavDisabled }] + }, "<", 2 /* CLASS */), + createVNode("span", null, toDisplayString(_ctx.getPageDecade), 1 /* TEXT */), + createVNode("span", { + onClick: _cache[2] || (_cache[2] = $event => (_ctx.isRtl ? _ctx.previousDecade() : _ctx.nextDecade())), + class: ["next", { disabled: _ctx.isRightNavDisabled }] + }, ">", 2 /* CLASS */) + ]), + (openBlock(true), createBlock(Fragment, null, renderList(_ctx.years, (year) => { + return (openBlock(), createBlock("span", { + class: ["cell year", { selected: year.isSelected, disabled: year.isDisabled }], + key: year.timestamp, + onClick: withModifiers($event => (_ctx.selectYear(year)), ["stop"]) + }, toDisplayString(year.year), 11 /* TEXT, CLASS, PROPS */, ["onClick"])) + }), 128 /* KEYED_FRAGMENT */)) + ], 38 /* CLASS, STYLE, HYDRATE_EVENTS */)), [ + [vShow, _ctx.showYearView] + ]) +} + +script$3.render = render$3; +script$3.__file = "src/components/datepicker/PickerYear.vue"; + +var af = function af() { + var langName = 'Afrikaans'; + var monthFullName = ['Januarie', 'Februarie', 'Maart', 'April', 'Mei', 'Junie', 'Julie', 'Augustus', 'September', 'Oktober', 'November', 'Desember']; + var shortName = ['Jan', 'Feb', 'Mrt', 'Apr', 'Mei', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Des']; + var days = ['So.', 'Ma.', 'Di.', 'Wo.', 'Do.', 'Vr.', 'Sa.']; + var rtl = false; + var ymd = false; + var yearSuffix = ''; + return { + months: monthFullName, + monthsAbbr: shortName, + days: days, + yearSuffix: yearSuffix, + ymd: ymd, + rtl: rtl, + langName: langName, + // tbd: need fullName of days + daysNames: days + }; +}; + +var en = function en() { + var langName = 'English'; + var monthFullName = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; + var shortName = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; + var days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; + var daysNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; + var rtl = false; + var ymd = false; + var yearSuffix = ''; + return { + months: monthFullName, + monthsAbbr: shortName, + days: days, + language: langName, + yearSuffix: yearSuffix, + ymd: ymd, + rtl: rtl, + langName: langName, + daysNames: daysNames + }; +}; + +var data = { + af: af(), + en: en() +}; + +/** + * Returns true if data is null or undefined + * @param data + */ +var isNullUndefined = function isNullUndefined(data) { + return data === null || data === undefined; +}; + +var ValidationMessages; + +(function (ValidationMessages) { + ValidationMessages["required"] = "Please enter this value"; +})(ValidationMessages || (ValidationMessages = {})); + +var VALIDATORS; + +(function (VALIDATORS) { + VALIDATORS["REQUIRED"] = "required"; +})(VALIDATORS || (VALIDATORS = {})); + +var KeyName; + +(function (KeyName) { + KeyName["Enter"] = "Enter"; + KeyName["ArrowUp"] = "ArrowUp"; + KeyName["ArrowDown"] = "ArrowDown"; + KeyName["Escape"] = "Escape"; + KeyName["Tab"] = "Tab"; +})(KeyName || (KeyName = {})); + +/** + * Required validation + * @param value + */ + +var required = function required(value) { + if (isNullUndefined(value)) { + return false; + } + + if (_typeof(value) === 'object' && !Object.keys(value).length) { + if (Object.prototype.toString.call(value) === '[object Date]' && value) { + return true; + } + + return false; + } + + if (typeof value === 'string' && value.trim() === '') { + return false; + } + + if (value.constructor === Array && value.length <= 0) { + return false; + } + + return true; +}; + +var validationRules = { + required: required +}; +/** + * + * @param validationName + * @param validationObj + * @param value + */ + +var callValidator = function callValidator(validationName, validationObj, value) { + var isValid = true; + + switch (validationName) { + default: + if (validationRules[validationName]) { + isValid = validationRules[validationName](value); + } + + break; + } + + return isValid; +}; // helper validation functions + +/** + * + * @param value + * @param validationArray + */ + + +var validationHandler = function validationHandler(value, validationArray) { + var validationObject = { + isValid: true, + message: '' + }; + + var _iterator = _createForOfIteratorHelper(validationArray), + _step; + + try { + for (_iterator.s(); !(_step = _iterator.n()).done;) { + var validation = _step.value; + validationObject.isValid = callValidator(validation.name, validation, value); + validationObject.message = ''; + + if (!validationObject.isValid) { + // checking if custom message is passed if not then use standard msgs + if (validation.message) { + validationObject.message = validation.message; + } else { + validationObject.message = ValidationMessages[validation.name]; + } // break if any one validation is failed + + + break; + } + } + } catch (err) { + _iterator.e(err); + } finally { + _iterator.f(); + } + + return validationObject; +}; + +var script$4 = defineComponent({ + name: 'Datepicker', + components: { + DateInput: script, + PickerDay: script$1, + PickerMonth: script$2, + PickerYear: script$3 + }, + props: { + modelValue: { + type: [Date, String] + }, + value: { + type: [Date, String] + }, + format: { + type: [String, Function], + default: 'dd MMM yyyy' + }, + language: { + type: String, + default: 'en' + }, + openDate: { + validator: function validator(val) { + return validateDateInput(val); + }, + type: Date + }, + minimumView: { + type: String, + default: 'day' + }, + maximumView: { + type: String, + default: 'year' + }, + name: { + type: String + }, + id: { + type: String + }, + dayCellContent: { + type: Function + }, + fullMonthName: { + type: Boolean + }, + disabledDates: { + type: Object + }, + highlighted: { + type: Object + }, + placeholder: { + type: String + }, + inline: { + type: Boolean + }, + calendarClass: { + type: [String, Object, Array] + }, + inputClass: { + type: [String, Object, Array] + }, + wrapperClass: { + type: [String, Object, Array] + }, + mondayFirst: { + type: Boolean + }, + clearButton: { + type: Boolean + }, + clearButtonIcon: { + type: String + }, + calendarButton: { + type: Boolean + }, + calendarButtonIcon: { + type: String + }, + calendarButtonIconContent: { + type: String + }, + bootstrapStyling: { + type: Boolean + }, + initialView: { + type: String + }, + disabled: { + type: Boolean + }, + required: { + type: Boolean + }, + typeable: { + type: Boolean + }, + useUtc: { + type: Boolean + }, + + /** + * Validations array of objects of type IValidationRule to valdiate the input + * @values IValidationRule[] + */ + validations: { + type: Array, + default: function _default() { + return []; + } + }, + autoValidate: { + type: Boolean, + default: false + }, + hideInput: { + type: Boolean, + default: true + } + }, + emits: ['input', 'cleared', 'update:modelValue', 'closed', 'changed-month', 'changed-year', 'changed-day', 'selected', 'selected-disabled'], + setup: function setup(props, _ref) { + var emit = _ref.emit; + var initmodelvalue = new Date(props.modelValue); + var pageTimestamp = ref(0); + var selectedDate = ref(null); + + if (props.modelValue && isValidDate(initmodelvalue)) { + pageTimestamp.value = setDate(initmodelvalue, 1); + selectedDate.value = initmodelvalue; + } else { + pageTimestamp.value = setDate(new Date(), 1); + } + + var showDayView = ref(false); + var showMonthView = ref(false); + var showYearView = ref(false); + var calendarHeight = ref(0); + var resetTypedDate = ref(new Date()); + var validation = reactive({ + isValid: true, + message: '' + }); + /** ********************************** Computed *********************************** */ + + var computedInitialView = computed(function () { + if (!props.initialView) { + return props.minimumView; + } + + return props.initialView; + }); + var pageDate = computed(function () { + return new Date(pageTimestamp.value); + }); + var translation = computed(function () { + var temp = data; + return temp[props.language]; + }); + var isInline = computed(function () { + return !!props.inline; + }); + var calendarStyle = computed(function () { + return { + position: isInline.value ? 'static' : undefined + }; + }); + var isOpen = computed(function () { + return showDayView.value || showMonthView.value || showYearView.value; + }); + var isRtl = computed(function () { + return translation.value && translation.value.rtl === true; + }); + /** ********************************** Methods *********************************** */ + + /** + * Sets the date that the calendar should open on + */ + + function setPageDate(date) { + if (!date) { + if (props.openDate) { + date = new Date(props.openDate); + } else { + date = new Date(); + } + } + + pageTimestamp.value = setDate(new Date(date), 1); + } + /** + * Are we allowed to show a specific picker view? + * @param {String} view + * @return {Boolean} + */ + + + function allowedToShowView(view) { + var views = ['day', 'month', 'year']; + var minimumViewIndex = views.indexOf(props.minimumView); + var maximumViewIndex = views.indexOf(props.maximumView); + var viewIndex = views.indexOf(view); + return viewIndex >= minimumViewIndex && viewIndex <= maximumViewIndex; + } + /** + * Close all calendar layers + * @param {Boolean} emitEvent - emit close event + */ + + + function close(emitEvent) { + showDayView.value = false; + showMonthView.value = false; + showYearView.value = false; + + if (!isInline.value) { + if (emitEvent) { + if (props.autoValidate) { + isValid(); + } + + emit('closed'); + } + } + } + /** + * Show the day picker + * @return {Boolean} + */ + + + function showDayCalendar() { + if (!allowedToShowView('day')) { + return false; + } + + close(); + showDayView.value = true; + return true; + } + /** + * Show the month picker + * @return {Boolean} + */ + + + function showMonthCalendar() { + if (!allowedToShowView('month')) { + return false; + } + + close(); + showMonthView.value = true; + return true; + } + /** + * Show the year picker + * @return {Boolean} + */ + + + function showYearCalendar() { + if (!allowedToShowView('year')) { + return false; + } + + close(); + showYearView.value = true; + return true; + } + /** + * Sets the initial picker page view: day, month or year + */ + + + function setInitialView() { + var initialView = computedInitialView.value; + + if (!allowedToShowView(initialView)) { + throw new Error("initialView '".concat(initialView, "' cannot be rendered based on minimum '").concat(props.minimumView, "' and maximum '").concat(props.maximumView, "'")); + } + + switch (initialView) { + case 'year': + showYearCalendar(); + break; + + case 'month': + showMonthCalendar(); + break; + + default: + showDayCalendar(); + break; + } + } + /** + * Effectively a toggle to show/hide the calendar + * @return {mixed} + */ + + + function showCalendar() { + if (props.disabled || isInline.value) { + return false; + } + + if (isOpen.value) { + return close(true); + } + + setInitialView(); + return true; + } + /** + * Set the selected date + * @param {Number} timestamp + */ + + + function setDate1(timestamp) { + var date = new Date(timestamp); + selectedDate.value = date; + setPageDate(date); + emit('selected', date); + + if (props.modelValue) { + emit('update:modelValue', date); + } else { + emit('input', date); + } + } + /** + * Clear the selected date + */ + + + function clearDate() { + selectedDate.value = null; + setPageDate(); + emit('selected', null); + + if (props.modelValue) { + emit('update:modelValue', null); + } else { + emit('input', null); + } + + emit('cleared'); + } + /** + * @param {Object} date + */ + + + function selectDate(date) { + setDate1(date.timestamp); + + if (!isInline.value) { + close(true); + } + + resetTypedDate.value = new Date(); + } + /** + * @param {Object} date + */ + + + function selectDisabledDate(date) { + emit('selected-disabled', date); + } + /** + * @param {Object} month + */ + + + function selectMonth(month) { + var date = new Date(month.timestamp); + + if (allowedToShowView('day')) { + setPageDate(date); + showDayCalendar(); + } else { + selectDate(month); + } + + emit('changed-month', month); + } + /** + * @param {Object} year + */ + + + function selectYear(year) { + var date = new Date(year.timestamp); + + if (allowedToShowView('month')) { + setPageDate(date); + showMonthCalendar(); + } else { + selectDate(year); + } + + emit('changed-year', year); + } + /** + * Set the datepicker value + * @param {Date|String|Number|null} date + */ + + + function setValue(date) { + var tempDate = date; + + if (typeof date === 'string' || typeof date === 'number') { + var parsed = new Date(date); + tempDate = Number.isNaN(parsed.valueOf()) ? null : parsed; + } + + if (!tempDate) { + setPageDate(); + selectedDate.value = null; + return; + } + + selectedDate.value = date; + setPageDate(date); + } + /** + * Handles a month change from the day picker + */ + + + function handleChangedMonthFromDayPicker(date) { + setPageDate(date); + emit('changed-month', date); + } + /** + * Set the date from a typedDate event + */ + + + function setTypedDate(date) { + setDate1(date.getTime()); + } + /** + * Initiate the component + */ + + + function init() { + if (props.value) { + setValue(props.value); + } + + if (isInline.value) { + setInitialView(); + } + } + /** + * Calls the validationHandler to check the validations, + * whether the state of input is valid or not. + * + * @returns boolean whether current state of the input is valid or not + */ + + + function isValid() { + var response = validationHandler(selectedDate.value, props.validations); + validation.isValid = response.isValid; + validation.message = response.message; + return validation.isValid; + } + /** + * Reset Validation Message + */ + + + function clearError() { + validation.message = ''; + validation.isValid = true; + } + /** ********************************** Watchers *********************************** */ + + + watch(function () { + return props.modelValue; + }, function (curr) { + setValue(curr); + }); + watch(function () { + return props.value; + }, function (curr) { + setValue(curr); + }); + watch(function () { + return props.openDate; + }, function () { + setPageDate(); + }); + watch(function () { + return props.initialView; + }, function () { + setInitialView(); + }); + /** + * test + */ + + function onClose() { + debugger; + } + + init(); + return { + pageTimestamp: pageTimestamp, + selectedDate: selectedDate, + showDayView: showDayView, + showMonthView: showMonthView, + showYearView: showYearView, + calendarHeight: calendarHeight, + resetTypedDate: resetTypedDate, + // computed + pageDate: pageDate, + translation: translation, + calendarStyle: calendarStyle, + isOpen: isOpen, + isInline: isInline, + isRtl: isRtl, + // methods + setTypedDate: setTypedDate, + handleChangedMonthFromDayPicker: handleChangedMonthFromDayPicker, + selectYear: selectYear, + selectMonth: selectMonth, + selectDisabledDate: selectDisabledDate, + clearDate: clearDate, + showCalendar: showCalendar, + close: close, + allowedToShowView: allowedToShowView, + showYearCalendar: showYearCalendar, + showMonthCalendar: showMonthCalendar, + setPageDate: setPageDate, + selectDate: selectDate, + validation: validation, + isValid: isValid, + clearError: clearError, + onClose: onClose + }; + } +}); + +const _hoisted_1$4 = { + key: 0, + class: "dp-error" +}; + +function render$4(_ctx, _cache, $props, $setup, $data, $options) { + const _component_date_input = resolveComponent("date-input"); + const _component_picker_day = resolveComponent("picker-day"); + const _component_picker_month = resolveComponent("picker-month"); + const _component_picker_year = resolveComponent("picker-year"); + + return (openBlock(), createBlock("div", { + class: ["vuejs3-datepicker", [_ctx.wrapperClass, _ctx.isRtl ? 'rtl' : '']] + }, [ + createVNode(_component_date_input, { + selectedDate: _ctx.selectedDate, + resetTypedDate: _ctx.resetTypedDate, + format: _ctx.format, + translation: _ctx.translation, + inline: _ctx.inline, + id: _ctx.id, + name: _ctx.name, + openDate: _ctx.openDate, + placeholder: _ctx.placeholder, + inputClass: _ctx.inputClass, + typeable: _ctx.typeable, + clearButton: _ctx.clearButton, + clearButtonIcon: _ctx.clearButtonIcon, + calendarButton: _ctx.calendarButton, + calendarButtonIcon: _ctx.calendarButtonIcon, + calendarButtonIconContent: _ctx.calendarButtonIconContent, + disabled: _ctx.disabled, + required: _ctx.required, + bootstrapStyling: _ctx.bootstrapStyling, + "use-utc": _ctx.useUtc, + onShowCalendar: _ctx.showCalendar, + onCloseCalendar: _ctx.close, + onTypedDate: _ctx.setTypedDate, + onClearDate: _ctx.clearDate, + minimumView: _ctx.minimumView, + maximumView: _ctx.maximumView, + clearError: _ctx.clearError, + hideInput: _ctx.hideInput + }, { + afterDateInput: withCtx(() => [ + renderSlot(_ctx.$slots, "afterDateInput") + ]), + _: 1 + }, 8 /* PROPS */, ["selectedDate", "resetTypedDate", "format", "translation", "inline", "id", "name", "openDate", "placeholder", "inputClass", "typeable", "clearButton", "clearButtonIcon", "calendarButton", "calendarButtonIcon", "calendarButtonIconContent", "disabled", "required", "bootstrapStyling", "use-utc", "onShowCalendar", "onCloseCalendar", "onTypedDate", "onClearDate", "minimumView", "maximumView", "clearError", "hideInput"]), + (!_ctx.validation.isValid) + ? (openBlock(), createBlock("div", _hoisted_1$4, toDisplayString(_ctx.validation.message), 1 /* TEXT */)) + : createCommentVNode("v-if", true), + createCommentVNode("Day View "), + (_ctx.allowedToShowView('day')) + ? (openBlock(), createBlock(_component_picker_day, { + key: 1, + pageDate: _ctx.pageDate, + selectedDate: _ctx.selectedDate, + showDayView: _ctx.showDayView, + fullMonthName: _ctx.fullMonthName, + allowedToShowView: _ctx.allowedToShowView, + disabledDates: _ctx.disabledDates, + highlighted: _ctx.highlighted, + calendarClass: _ctx.calendarClass, + calendarStyle: _ctx.calendarStyle, + translation: _ctx.translation, + pageTimestamp: _ctx.pageTimestamp, + isRtl: _ctx.isRtl, + mondayFirst: _ctx.mondayFirst, + dayCellContent: _ctx.dayCellContent, + onChangedMonth: _ctx.handleChangedMonthFromDayPicker, + onSelectDate: _ctx.selectDate, + onShowMonthCalendar: _ctx.showMonthCalendar, + onSelectedDisabled: _ctx.selectDisabledDate, + onShowYearCalendar: _ctx.showYearCalendar + }, { + beforeCalendarHeader: withCtx(() => [ + renderSlot(_ctx.$slots, "beforeCalendarHeader") + ]), + _: 1 + }, 8 /* PROPS */, ["pageDate", "selectedDate", "showDayView", "fullMonthName", "allowedToShowView", "disabledDates", "highlighted", "calendarClass", "calendarStyle", "translation", "pageTimestamp", "isRtl", "mondayFirst", "dayCellContent", "onChangedMonth", "onSelectDate", "onShowMonthCalendar", "onSelectedDisabled", "onShowYearCalendar"])) + : createCommentVNode("v-if", true), + createCommentVNode("Month View "), + (_ctx.allowedToShowView('month')) + ? (openBlock(), createBlock(_component_picker_month, { + key: 2, + pageDate: _ctx.pageDate, + selectedDate: _ctx.selectedDate, + showMonthView: _ctx.showMonthView, + allowedToShowView: _ctx.allowedToShowView, + disabledDates: _ctx.disabledDates, + calendarClass: _ctx.calendarClass, + calendarStyle: _ctx.calendarStyle, + translation: _ctx.translation, + isRtl: _ctx.isRtl, + "use-utc": _ctx.useUtc, + onSelectMonth: _ctx.selectMonth, + onShowYearCalendar: _ctx.showYearCalendar, + onChangedYear: _ctx.setPageDate + }, { + beforeCalendarHeader: withCtx(() => [ + renderSlot(_ctx.$slots, "beforeCalendarHeader") + ]), + _: 1 + }, 8 /* PROPS */, ["pageDate", "selectedDate", "showMonthView", "allowedToShowView", "disabledDates", "calendarClass", "calendarStyle", "translation", "isRtl", "use-utc", "onSelectMonth", "onShowYearCalendar", "onChangedYear"])) + : createCommentVNode("v-if", true), + createCommentVNode(" Year View "), + (_ctx.allowedToShowView('year')) + ? (openBlock(), createBlock(_component_picker_year, { + key: 3, + pageDate: _ctx.pageDate, + selectedDate: _ctx.selectedDate, + showYearView: _ctx.showYearView, + allowedToShowView: _ctx.allowedToShowView, + disabledDates: _ctx.disabledDates, + calendarClass: _ctx.calendarClass, + calendarStyle: _ctx.calendarStyle, + translation: _ctx.translation, + isRtl: _ctx.isRtl, + "use-utc": _ctx.useUtc, + onSelectYear: _ctx.selectYear, + onChangedDecade: _ctx.setPageDate, + fullMonthName: _ctx.fullMonthName + }, { + beforeCalendarHeader: withCtx(() => [ + renderSlot(_ctx.$slots, "beforeCalendarHeader") + ]), + _: 1 + }, 8 /* PROPS */, ["pageDate", "selectedDate", "showYearView", "allowedToShowView", "disabledDates", "calendarClass", "calendarStyle", "translation", "isRtl", "use-utc", "onSelectYear", "onChangedDecade", "fullMonthName"])) + : createCommentVNode("v-if", true) + ], 2 /* CLASS */)) +} + +function styleInject(css, ref) { + if ( ref === void 0 ) ref = {}; + var insertAt = ref.insertAt; + + if (!css || typeof document === 'undefined') { return; } + + var head = document.head || document.getElementsByTagName('head')[0]; + var style = document.createElement('style'); + style.type = 'text/css'; + + if (insertAt === 'top') { + if (head.firstChild) { + head.insertBefore(style, head.firstChild); + } else { + head.appendChild(style); + } + } else { + head.appendChild(style); + } + + if (style.styleSheet) { + style.styleSheet.cssText = css; + } else { + style.appendChild(document.createTextNode(css)); + } +} + +var css_248z = ".rtl{direction:rtl}.vuejs3-datepicker{position:relative;text-align:left}.vuejs3-datepicker *{box-sizing:border-box}.vuejs3-datepicker input{border:1px solid}.vuejs3-datepicker__calendar{position:absolute;z-index:100;background:#fff;width:300px;border:1px solid #000}.vuejs3-datepicker__calendar header{display:block;line-height:40px}.vuejs3-datepicker__calendar header span{text-align:center;width:71.42857142857143%;float:left}.vuejs3-datepicker__calendar header .next,.vuejs3-datepicker__calendar header .prev{width:14.285714285714286%;float:left;text-indent:-10000px;position:relative}.vuejs3-datepicker__calendar header .next:after,.vuejs3-datepicker__calendar header .prev:after{content:\"\";position:absolute;left:50%;top:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);border:6px solid transparent}.vuejs3-datepicker__calendar header .prev:after{border-right:10px solid #000;margin-left:-5px}.vuejs3-datepicker__calendar header .prev.disabled:after{border-right:10px solid #000}.vuejs3-datepicker__calendar header .next:after{border-left:10px solid #000;margin-left:5px}.vuejs3-datepicker__calendar header .next.disabled:after{border-left:10px solid #ddd}.vuejs3-datepicker__calendar header .next:not(.disabled),.vuejs3-datepicker__calendar header .prev:not(.disabled),.vuejs3-datepicker__calendar header .up:not(.disabled){cursor:pointer}.vuejs3-datepicker__calendar header .next:not(.disabled):hover,.vuejs3-datepicker__calendar header .prev:not(.disabled):hover,.vuejs3-datepicker__calendar header .up:not(.disabled):hover{background:#eee}.vuejs3-datepicker__calendar .disabled{color:#ddd;cursor:default}.vuejs3-datepicker__calendar .flex-rtl{display:-webkit-flex;display:-ms-flexbox;display:flex;width:inherit;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.vuejs3-datepicker__calendar .cell{display:inline-block;padding:0 5px;width:14.285714285714286%;height:40px;line-height:40px;text-align:center;vertical-align:middle;border:1px solid transparent}.vuejs3-datepicker__calendar .cell:not(.blank):not(.disabled).day,.vuejs3-datepicker__calendar .cell:not(.blank):not(.disabled).month,.vuejs3-datepicker__calendar .cell:not(.blank):not(.disabled).year{cursor:pointer}.vuejs3-datepicker__calendar .cell:not(.blank):not(.disabled).day:hover,.vuejs3-datepicker__calendar .cell:not(.blank):not(.disabled).month:hover,.vuejs3-datepicker__calendar .cell:not(.blank):not(.disabled).year:hover{border:1px solid #4bd}.vuejs3-datepicker__calendar .cell.selected,.vuejs3-datepicker__calendar .cell.selected.highlighted,.vuejs3-datepicker__calendar .cell.selected:hover{background:#4bd}.vuejs3-datepicker__calendar .cell.highlighted{background:#cae5ed}.vuejs3-datepicker__calendar .cell.highlighted.disabled{color:#a3a3a3}.vuejs3-datepicker__calendar .cell.grey{color:#888}.vuejs3-datepicker__calendar .cell.grey:hover{background:inherit}.vuejs3-datepicker__calendar .cell.day-header{font-size:75%;white-space:nowrap;cursor:inherit}.vuejs3-datepicker__calendar .cell.day-header:hover{background:inherit}.vuejs3-datepicker__calendar .month,.vuejs3-datepicker__calendar .year{width:33.333%}.vuejs3-datepicker__calendar-button,.vuejs3-datepicker__clear-button{cursor:pointer;font-style:normal}.vuejs3-datepicker__calendar-button.disabled,.vuejs3-datepicker__clear-button.disabled{color:#999;cursor:default}.dp-error{color:red;font-size:12px}.backdrop{position:fixed;display:none;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.5);z-index:2;cursor:pointer}"; +styleInject(css_248z); + +script$4.render = render$4; +script$4.__file = "src/components/datepicker/Datepicker.vue"; + +export default script$4; diff --git a/dist/datepicker.min.js b/dist/datepicker.min.js new file mode 100644 index 0000000..ff95fb8 --- /dev/null +++ b/dist/datepicker.min.js @@ -0,0 +1 @@ +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define(["vue"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).Datepicker=t(e.Vue)}(this,(function(e){"use strict";function t(e){return(t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function a(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var a=[],n=!0,r=!1,o=void 0;try{for(var l,i=e[Symbol.iterator]();!(n=(l=i.next()).done)&&(a.push(l.value),!t||a.length!==t);n=!0);}catch(e){r=!0,o=e}finally{try{n||null==i.return||i.return()}finally{if(r)throw o}}return a}(e,t)||n(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function n(e,t){if(e){if("string"==typeof e)return r(e,t);var a=Object.prototype.toString.call(e).slice(8,-1);return"Object"===a&&e.constructor&&(a=e.constructor.name),"Map"===a||"Set"===a?Array.from(e):"Arguments"===a||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a)?r(e,t):void 0}}function r(e,t){(null==t||t>e.length)&&(t=e.length);for(var a=0,n=new Array(t);a1&&void 0!==arguments[1]&&arguments[1];return t?e.getUTCFullYear():e.getFullYear()},l=function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return t?e.getUTCMonth():e.getMonth()},i=function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return t?e.getUTCDate():e.getDate()},c=function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return t?e.getUTCDay():e.getDay()},d=function(e,t){var a=arguments.length>2&&void 0!==arguments[2]&&arguments[2];return a?e.setUTCFullYear(t):e.setFullYear(t)},s=function(e,t){var a=arguments.length>2&&void 0!==arguments[2]&&arguments[2];return a?e.setUTCMonth(t):e.setMonth(t)},u=function(e,t){var a=arguments.length>2&&void 0!==arguments[2]&&arguments[2];return a?e.setUTCDate(t):e.setDate(t)},p=function(e,t){var a=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],n=new Date(e.getTime()),r=new Date(t.getTime());return a?(n.setUTCHours(0,0,0,0),r.setUTCHours(0,0,0,0)):(n.setHours(0,0,0,0),r.setHours(0,0,0,0)),n.getTime()===r.getTime()},m=function(e,a){if("object"!==t(e))throw TypeError("Invalid Type");return a[c(e)]},f=function(e,a){if(!a)throw Error("missing 2nd parameter Months array");if("object"===t(e))return a[l(e)];if("number"==typeof e)return a[e];throw TypeError("Invalid type")},h=function(e,a){if(!a)throw Error("missing 2nd paramter Months array");if("object"===t(e))return a[l(e)];if("number"==typeof e)return a[e];throw TypeError("Invalid type")},y=e.defineComponent({name:"DateInput",props:{selectedDate:{type:Date},resetTypedDate:{type:[Date]},format:{type:[String,Function]},translation:{type:Object},inline:{type:Boolean},id:{type:String},name:{type:String},openDate:{type:Date},placeholder:{type:String},inputClass:{type:String},clearButton:{type:Boolean},clearButtonIcon:{type:String},calendarButton:{type:Boolean},calendarButtonIcon:{type:String},calendarButtonIconContent:{type:String},disabled:{type:Boolean},required:{type:Boolean},typeable:{type:Boolean},bootstrapStyling:{type:Boolean},useUtc:{type:Boolean},minimumView:{type:String,default:"day"},maximumView:{type:String,default:"year"},clearError:{type:Function,required:!0},hideInput:{type:Boolean,default:!0}},emits:["showCalendar","typedDate","clearDate","closeCalendar"],setup:function(t,n){var r=n.emit,c=e.ref(),d=e.ref(null),s=e.computed((function(){return t.bootstrapStyling?"string"==typeof t.inputClass?[t.inputClass,"form-control"].join(" "):{"form-control":!0}:t.inputClass})),u=e.computed((function(){if(!t.selectedDate)return null;if(c.value)return c.value;var e="function"==typeof t.format?t.format(t.selectedDate):function(e,t,a){var n=o(e),r=l(e)+1,c=i(e);return t.replace(/dd/,"0".concat(c).slice(-2)).replace(/d/,c).replace(/yyyy/,n).replace(/yy/,String(n).slice(2)).replace(/MMMM/,f(l(e),a.months)).replace(/MMM/,h(l(e),a.monthsAbbr)).replace(/MM/,"0".concat(r).slice(-2)).replace(/M(?!a|ä|e)/,r.toString()).replace(/su/,function(e){switch(e){case 1:case 21:case 31:return"st";case 2:case 22:return"nd";case 3:case 23:return"rd";default:return"th"}}(i(e))).replace(/D(?!e|é|i)/,m(e,a.days))}(new Date(t.selectedDate),t.format,t.translation);if(t.minimumView===t.maximumView){var n=a(e.split(" "),3),r=n[1],d=n[2];"month"===t.maximumView?e=r:"year"===t.maximumView&&(e=d)}return e}));return e.watch((function(){return t.resetTypedDate}),(function(){c.value=""})),{typedDate:c,computedInputClass:s,formattedValue:u,showCalendar:function(){r("showCalendar")},parseTypedDate:function(e){if([27,13].includes(e.keyCode)&&d.value.blur(),t.typeable){var a=d.value.value,n=Date.parse(a);isNaN(n)||(c.value=a,r("typedDate",n))}},inputBlurred:function(){t.typeable&&Number.isNaN(Date.parse(d.value.value))&&(r("clearDate"),d.value.value=null,c.value=""),r("closeCalendar",!0)},onFocus:function(){t.clearError()},inputRef:d}}});const v={key:0},g={key:0},D=e.createVNode("img",{src:"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' height='16' width='16' role='img' aria-hidden='true' data-icon='calendarAlt'%3e%3cpath fill='currentColor' d='M400 64h-48V12c0-6.6-5.4-12-12-12h-8c-6.6 0-12 5.4-12 12v52H128V12c0-6.6-5.4-12-12-12h-8c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM48 96h352c8.8 0 16 7.2 16 16v48H32v-48c0-8.8 7.2-16 16-16zm352 384H48c-8.8 0-16-7.2-16-16V192h384v272c0 8.8-7.2 16-16 16zM148 320h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm96 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm96 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm-96 96h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm-96 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm192 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12z'%3e%3c/path%3e%3c/svg%3e"},null,-1),b={key:0},w=e.createTextVNode("Default");y.render=function(t,a,n,r,o,l){return e.openBlock(),e.createBlock("div",{class:{"input-group":t.bootstrapStyling}},[e.createCommentVNode(" Calendar Button "),t.calendarButton?(e.openBlock(),e.createBlock("span",{key:0,class:["vuejs3-datepicker__calendar-button",{"input-group-prepend":t.bootstrapStyling}],onClick:a[1]||(a[1]=(...e)=>t.showCalendar(...e)),style:{"cursor:not-allowed;":t.disabled}},[e.createVNode("span",{class:{"input-group-text":t.bootstrapStyling}},[e.createVNode("i",{class:t.calendarButtonIcon},[e.createTextVNode(e.toDisplayString(t.calendarButtonIconContent)+" ",1),t.calendarButtonIcon?e.createCommentVNode("v-if",!0):(e.openBlock(),e.createBlock("span",v,"…"))],2)],2)],6)):e.createCommentVNode("v-if",!0),e.createVNode("div",null,[t.inline?e.createCommentVNode("v-if",!0):(e.openBlock(),e.createBlock("span",g,[D])),e.createVNode("input",{type:t.inline?"hidden":"text",class:t.computedInputClass,name:t.name,ref:"inputRef",id:t.id,value:t.formattedValue,"open-date":t.openDate,placeholder:t.placeholder,"clear-button":t.clearButton,disabled:t.disabled,required:t.required,readonly:!t.typeable,onClick:a[2]||(a[2]=(...e)=>t.showCalendar(...e)),onKeyup:a[3]||(a[3]=(...e)=>t.parseTypedDate(...e)),onBlur:a[4]||(a[4]=(...e)=>t.inputBlurred(...e)),onFocus:a[5]||(a[5]=(...e)=>t.onFocus(...e)),autocomplete:"off"},null,42,["type","name","id","value","open-date","placeholder","clear-button","disabled","required","readonly"])]),e.createCommentVNode(" Clear Button "),t.clearButton&&t.selectedDate?(e.openBlock(),e.createBlock("span",{key:1,class:["vuejs3-datepicker__clear-button",{"input-group-append":t.bootstrapStyling}],onClick:a[6]||(a[6]=e=>t.clearDate())},[e.createVNode("span",{class:{"input-group-text":t.bootstrapStyling}},[e.createVNode("i",{class:t.clearButtonIcon},[t.clearButtonIcon?e.createCommentVNode("v-if",!0):(e.openBlock(),e.createBlock("span",b,"×"))],2)],2)],2)):e.createCommentVNode("v-if",!0),e.renderSlot(t.$slots,"afterDateInput",{},(()=>[w]))],2)},y.__file="src/components/datepicker/DateInput.vue";var k=e.defineComponent({name:"PickerDay",props:{showDayView:{type:Boolean},selectedDate:{type:Date,default:new Date},pageDate:{type:Date,default:new Date},pageTimestamp:{type:Number},fullMonthName:{type:Boolean},allowedToShowView:{type:Function},dayCellContent:{type:Function,default:function(e){return e.date}},disabledDates:{type:Object},highlighted:{type:Object},calendarClass:{type:[String,Object,Array]},calendarStyle:{type:Object},translation:{type:Object},isRtl:{type:Boolean},mondayFirst:{type:Boolean},useUtc:{type:Boolean}},emits:["show-year-calendar","changed-month","show-month-calendar","selected-disabled","select-date"],setup:function(t,a){var n=a.emit;function r(e){var a=t.pageDate;s(a,l(a)+e),n("changed-month",a)}function d(){var e=t.disabledDates;if(!e||!e.to)return!1;var a=t.pageDate;return l(e.to)>=l(a)&&o(e.to)>=o(a)}function y(){var e=t.disabledDates;if(!e||!e.from)return!1;var a=t.pageDate;return l(e.from)<=l(a)&&o(e.from)<=o(a)}function v(e){return!!t.selectedDate&&p(t.selectedDate,e)}function g(e){var a=!1,n=t.disabledDates;return n?void 0!==n&&(void 0!==n.dates&&n.dates.forEach((function(t){p(e,t)&&(a=!0)})),void 0!==n.to&&n.to&&en.from&&(a=!0),void 0!==n.ranges&&n.ranges.forEach((function(t){void 0!==t.from&&t.from&&void 0!==t.to&&t.to&&et.from&&(a=!0)})),void 0!==n.days&&-1!==n.days.indexOf(c(e))&&(a=!0),void 0!==n.daysOfMonth&&-1!==n.daysOfMonth.indexOf(i(e))&&(a=!0),"function"==typeof n.customPredictor&&n.customPredictor(e)&&(a=!0),a):a}function D(e){return void 0!==e&&e}function b(e){var a=t.highlighted;if((!a||!a.includeDisabled)&&g(e))return!1;var n=!1;return void 0!==a&&(void 0!==a.dates&&a.dates.forEach((function(t){p(e,t)&&(n=!0)})),D(a.from)&&D(a.to)&&(n=e>=a.from&&e<=a.to),void 0!==a.days&&-1!==a.days.indexOf(c(e))&&(n=!0),void 0!==a.daysOfMonth&&-1!==a.daysOfMonth.indexOf(i(e))&&(n=!0),"function"==typeof a.customPredictor&&a.customPredictor(e)&&(n=!0),n)}function w(e){var a=t.highlighted;return!!a&&(b(e)&&a.to instanceof Date&&o(a.to)===o(e)&&l(a.to)===l(e)&&i(a.to)===i(e))}var k=e.computed((function(){if(t.mondayFirst){var e=t.translation&&t.translation.days&&t.translation.days.slice();return e.push(e.shift()),e}return t.translation&&t.translation.days})),C=e.computed((function(){var e=t.pageDate,a=t.useUtc?new Date(Date.UTC(e.getUTCFullYear(),e.getUTCMonth(),1)):new Date(e.getFullYear(),e.getMonth(),1,e.getHours(),e.getMinutes());return t.mondayFirst?c(a)>0?c(a)-1:6:c(a)})),S=e.computed((function(){for(var e,a,n,r,d=t.pageDate,s=[],m=t.useUtc?new Date(Date.UTC(d.getUTCFullYear(),d.getUTCMonth(),1)):new Date(d.getFullYear(),d.getMonth(),1,d.getHours(),d.getMinutes()),f=(e=o(m),a=l(m),/8|3|5|10/.test(a)?30:1===a?(e%4||!(e%100))&&e%400?28:29:31),h=0;h{}),["prevent"]))},[e.renderSlot(t.$slots,"beforeCalendarHeader"),e.createVNode("section",null,[e.createVNode("p",{onClick:a[1]||(a[1]=(...e)=>t.showYearCalendar(...e))},e.toDisplayString(t.currYearName),1),t.selectedDate?(e.openBlock(),e.createBlock("p",C,e.toDisplayString(t.getDayName)+" "+e.toDisplayString(t.getDisplayDate)+" "+e.toDisplayString(t.monthName),1)):e.createCommentVNode("v-if",!0)]),e.createVNode("header",null,[e.createVNode("span",{onClick:a[2]||(a[2]=e=>t.isRtl?t.nextMonth():t.previousMonth()),class:["prev",{disabled:t.isLeftNavDisabled}]},"<",2),e.createVNode("span",{class:["day__month_btn",t.allowedToShowView("month")?"up":""],onClick:a[3]||(a[3]=(...e)=>t.showMonthCalendar(...e))},e.toDisplayString(t.isYmd?t.currYearName:t.currMonthName)+" "+e.toDisplayString(t.isYmd?t.currMonthName:t.currYearName),3),e.createVNode("span",{onClick:a[4]||(a[4]=e=>t.isRtl?t.previousMonth():t.nextMonth()),class:["next",{disabled:t.isRightNavDisabled}]},">",2)]),e.createVNode("div",{class:t.isRtl?"flex-rtl":""},[(e.openBlock(!0),e.createBlock(e.Fragment,null,e.renderList(t.daysOfWeek,(t=>(e.openBlock(),e.createBlock("span",{class:"cell day-header",key:t.timestamp},e.toDisplayString(t),1)))),128)),t.blankDays>0?(e.openBlock(!0),e.createBlock(e.Fragment,{key:0},e.renderList(t.blankDays,(t=>(e.openBlock(),e.createBlock("span",{class:"cell day blank",key:t.timestamp})))),128)):e.createCommentVNode("v-if",!0),(e.openBlock(!0),e.createBlock(e.Fragment,null,e.renderList(t.days,(a=>(e.openBlock(),e.createBlock("span",{class:["cell day",t.dayClasses(a)],key:a.timestamp,innerHTML:t.dayCellContent(a),onClick:e=>t.selectDate(a)},null,10,["innerHTML","onClick"])))),128))],2)],38)),[[e.vShow,t.showDayView]])},k.__file="src/components/datepicker/PickerDay.vue";var S=e.defineComponent({name:"PickerMonth",props:{showMonthView:{type:Boolean},selectedDate:{type:Date,default:new Date},pageDate:{type:Date,default:new Date},pageTimestamp:{type:Number},disabledDates:{type:Object},calendarClass:{type:[String,Object,Array]},calendarStyle:{type:Object},translation:{type:Object},isRtl:{type:Boolean},allowedToShowView:{type:Function},useUtc:{type:Boolean},fullMonthName:{type:Boolean}},setup:function(t,a){var n=a.emit;function r(e){var a=t.pageDate;d(a,o(a)+e),n("changed-year",a)}function c(){var e=t.disabledDates;return!(!e||!e.to)&&o(e.to)>=o(t.pageDate)}function u(){var e=t.disabledDates;return!(!e||!e.from)&&o(e.from)<=o(t.pageDate)}function p(e){var a=t.selectedDate;return a&&o(a)===o(e)&&l(a)===l(e)}function y(e){var a=!1,n=t.disabledDates;return!!n&&(void 0!==n&&(void 0!==n.to&&n.to&&(l(e)l(n.from)&&o(e)>=o(n.from)||o(e)>o(n.from))&&(a=!0),"function"==typeof n.customPredictor&&n.customPredictor(e)&&(a=!0),a))}var v=e.computed((function(){for(var e=t.pageDate,a=[],n=t.useUtc?new Date(Date.UTC(e.getUTCFullYear(),0,e.getUTCDate())):new Date(e.getFullYear(),0,e.getDate(),e.getHours(),e.getMinutes()),r=0;r<12;r+=1)a.push({month:f(r,t.translation&&t.translation.months),timestamp:n.getTime(),isSelected:p(n),isDisabled:y(n)}),s(n,l(n)+1);return a})),g=e.computed((function(){var e=t.translation&&t.translation.yearSuffix;return"".concat(o(t.pageDate)).concat(e)})),D=e.computed((function(){return t.isRtl?u():c()})),b=e.computed((function(){return t.isRtl?c():u()})),w=e.computed((function(){var e=t.translation&&t.translation.months;return f(l(t.pageDate),e)})),k=e.computed((function(){return t.selectedDate?i(t.selectedDate):null})),C=e.computed((function(){return t.selectedDate?m(t.selectedDate,t.translation&&t.translation.daysNames):null})),S=e.computed((function(){var e=t.translation&&t.translation.yearSuffix;return"".concat(o(t.pageDate)).concat(e)}));e.computed((function(){var e=t.fullMonthName?t.translation&&t.translation.months:t.translation&&t.translation.monthsAbbr;return h(l(t.pageDate),e)}));return{isRightNavDisabled:b,isLeftNavDisabled:D,pageYearName:g,months:v,selectMonth:function(e){e.isDisabled||n("select-month",e)},previousYear:function(){c()||r(-1)},nextYear:function(){u()||r(1)},currYearName:S,getDisplayDate:k,monthName:w,showYearCalendar:function(){n("show-year-calendar")},getDayName:C}}});const V={key:0};S.render=function(t,a,n,r,o,l){return e.withDirectives((e.openBlock(),e.createBlock("div",{class:[t.calendarClass,"vuejs3-datepicker__calendar"],style:t.calendarStyle,onMousedown:a[5]||(a[5]=e.withModifiers((()=>{}),["prevent"]))},[e.renderSlot(t.$slots,"beforeCalendarHeader"),e.createVNode("section",null,[e.createVNode("p",{onClick:a[1]||(a[1]=(...e)=>t.showYearCalendar(...e))},e.toDisplayString(t.currYearName),1),t.selectedDate?(e.openBlock(),e.createBlock("p",V,e.toDisplayString(t.getDayName)+" "+e.toDisplayString(t.getDisplayDate)+" "+e.toDisplayString(t.monthName),1)):e.createCommentVNode("v-if",!0)]),e.createVNode("header",null,[e.createVNode("span",{onClick:a[2]||(a[2]=e=>t.isRtl?t.nextYear():t.previousYear()),class:["prev",{disabled:t.isLeftNavDisabled}]},"<",2),e.createVNode("span",{class:["month__year_btn",t.allowedToShowView("year")?"up":""],onClick:a[3]||(a[3]=(...e)=>t.showYearCalendar(...e))},e.toDisplayString(t.pageYearName),3),e.createVNode("span",{onClick:a[4]||(a[4]=e=>t.isRtl?t.previousYear():t.nextYear()),class:["next",{disabled:t.isRightNavDisabled}]},">",2)]),(e.openBlock(!0),e.createBlock(e.Fragment,null,e.renderList(t.months,(a=>(e.openBlock(),e.createBlock("span",{class:["cell month",{selected:a.isSelected,disabled:a.isDisabled}],key:a.timestamp,onClick:e.withModifiers((e=>t.selectMonth(a)),["stop"])},e.toDisplayString(a.month),11,["onClick"])))),128))],38)),[[e.vShow,t.showMonthView]])},S.__file="src/components/datepicker/PickerMonth.vue";var B=e.defineComponent({name:"PickerYear",props:{showYearView:{type:Boolean},selectedDate:{type:Date,default:new Date},pageDate:{type:Date,default:new Date},pageTimestamp:{type:Number},disabledDates:{type:Object},highlighted:{type:Object},calendarClass:{type:[String,Object,Array]},calendarStyle:{type:Object},translation:{type:Object},isRtl:{type:Boolean},allowedToShowView:{type:Function},useUtc:{type:Boolean},fullMonthName:{type:Boolean}},setup:function(t,a){var n=a.emit;function r(e){var a=t.pageDate;d(a,o(a)+e),n("changed-decade",a)}function c(){var e=t.disabledDates;return!(!e||!e.to)&&o(e.to)>10*Math.floor(o(t.pageDate)/10)-1}function s(){var e=t.disabledDates;return!(!e||!e.from)&&o(e.from)<10*Math.ceil(o(t.pageDate)/10)}function u(e){var a=!1;return!(void 0===t.disabledDates||!t.disabledDates)&&(void 0!==t.disabledDates.to&&t.disabledDates.to&&o(e)o(t.disabledDates.from)&&(a=!0),"function"==typeof t.disabledDates.customPredictor&&t.disabledDates.customPredictor(e)&&(a=!0),a)}var p=e.computed((function(){for(var e,a=t.pageDate,n=[],r=t.useUtc?new Date(Date.UTC(10*Math.floor(a.getUTCFullYear()/10),a.getUTCMonth(),a.getUTCDate())):new Date(10*Math.floor(a.getFullYear()/10),a.getMonth(),a.getDate(),a.getHours(),a.getMinutes()),l=0;l<10;l+=1)n.push({year:o(r),timestamp:r.getTime(),isSelected:(e=r,!!t.selectedDate&&o(t.selectedDate)===o(e)),isDisabled:u(r)}),d(r,o(r)+1);return n})),y=e.computed((function(){var e=10*Math.floor(o(t.pageDate)/10),a=e+9,n=t.translation&&t.translation.yearSuffix;return"".concat(e," - ").concat(a).concat(n)})),v=e.computed((function(){return t.isRtl?s():c()}));return{isRightNavDisabled:e.computed((function(){return t.isRtl?c():s()})),isLeftNavDisabled:v,getPageDecade:y,years:p,nextDecade:function(){s()||r(10)},previousDecade:function(){c()||r(-10)},selectYear:function(e){e.isDisabled||n("select-year",e)},getDayName:e.computed((function(){return t.selectedDate?m(t.selectedDate,t.translation&&t.translation.daysNames):null})),monthName:e.computed((function(){var e=t.translation&&t.translation.months;return f(l(t.pageDate),e)})),getDisplayDate:e.computed((function(){return t.selectedDate?i(t.selectedDate):null})),currYearName:e.computed((function(){var e=t.translation&&t.translation.yearSuffix;return"".concat(o(t.pageDate)).concat(e)})),currMonthName:e.computed((function(){var e=t.fullMonthName?t.translation&&t.translation.months:t.translation&&t.translation.monthsAbbr;return h(l(t.pageDate),e)}))}}});const N={key:0};B.render=function(t,a,n,r,o,l){return e.withDirectives((e.openBlock(),e.createBlock("div",{class:[t.calendarClass,"vuejs3-datepicker__calendar"],style:t.calendarStyle,onMousedown:a[3]||(a[3]=e.withModifiers((()=>{}),["prevent"]))},[e.renderSlot(t.$slots,"beforeCalendarHeader"),e.createVNode("section",null,[e.createVNode("p",null,e.toDisplayString(t.currYearName),1),t.selectedDate?(e.openBlock(),e.createBlock("p",N,e.toDisplayString(t.getDayName)+" "+e.toDisplayString(t.getDisplayDate)+" "+e.toDisplayString(t.monthName),1)):e.createCommentVNode("v-if",!0)]),e.createVNode("header",null,[e.createVNode("span",{onClick:a[1]||(a[1]=e=>t.isRtl?t.nextDecade():t.previousDecade()),class:["prev",{disabled:t.isLeftNavDisabled}]},"<",2),e.createVNode("span",null,e.toDisplayString(t.getPageDecade),1),e.createVNode("span",{onClick:a[2]||(a[2]=e=>t.isRtl?t.previousDecade():t.nextDecade()),class:["next",{disabled:t.isRightNavDisabled}]},">",2)]),(e.openBlock(!0),e.createBlock(e.Fragment,null,e.renderList(t.years,(a=>(e.openBlock(),e.createBlock("span",{class:["cell year",{selected:a.isSelected,disabled:a.isDisabled}],key:a.timestamp,onClick:e.withModifiers((e=>t.selectYear(a)),["stop"])},e.toDisplayString(a.year),11,["onClick"])))),128))],38)),[[e.vShow,t.showYearView]])},B.__file="src/components/datepicker/PickerYear.vue";var M,_,x,T,j,Y={af:(_=["So.","Ma.","Di.","Wo.","Do.","Vr.","Sa."],{months:["Januarie","Februarie","Maart","April","Mei","Junie","Julie","Augustus","September","Oktober","November","Desember"],monthsAbbr:["Jan","Feb","Mrt","Apr","Mei","Jun","Jul","Aug","Sep","Okt","Nov","Des"],days:_,yearSuffix:"",ymd:!1,rtl:!1,langName:"Afrikaans",daysNames:_}),en:(M="English",{months:["January","February","March","April","May","June","July","August","September","October","November","December"],monthsAbbr:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],days:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],language:M,yearSuffix:"",ymd:!1,rtl:!1,langName:M,daysNames:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]})};!function(e){e.required="Please enter this value"}(x||(x={})),function(e){e.REQUIRED="required"}(T||(T={})),function(e){e.Enter="Enter",e.ArrowUp="ArrowUp",e.ArrowDown="ArrowDown",e.Escape="Escape",e.Tab="Tab"}(j||(j={}));var O={required:function(e){return!function(e){return null==e}(e)&&("object"!==t(e)||Object.keys(e).length?("string"!=typeof e||""!==e.trim())&&!(e.constructor===Array&&e.length<=0):!("[object Date]"!==Object.prototype.toString.call(e)||!e))}},F=function(e,t,a){var n=!0;return O[e]&&(n=O[e](a)),n},I=function(e,t){var a,r={isValid:!0,message:""},o=function(e,t){var a;if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(a=n(e))||t&&e&&"number"==typeof e.length){a&&(e=a);var r=0,o=function(){};return{s:o,n:function(){return r>=e.length?{done:!0}:{done:!1,value:e[r++]}},e:function(e){throw e},f:o}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var l,i=!0,c=!1;return{s:function(){a=e[Symbol.iterator]()},n:function(){var e=a.next();return i=e.done,e},e:function(e){c=!0,l=e},f:function(){try{i||null==a.return||a.return()}finally{if(c)throw l}}}}(t);try{for(o.s();!(a=o.n()).done;){var l=a.value;if(r.isValid=F(l.name,0,e),r.message="",!r.isValid){l.message?r.message=l.message:r.message=x[l.name];break}}}catch(e){o.e(e)}finally{o.f()}return r},U=e.defineComponent({name:"Datepicker",components:{DateInput:y,PickerDay:k,PickerMonth:S,PickerYear:B},props:{modelValue:{type:[Date,String]},value:{type:[Date,String]},format:{type:[String,Function],default:"dd MMM yyyy"},language:{type:String,default:"en"},openDate:{validator:function(e){return function(e){return null===e||e instanceof Date||"string"==typeof e||"number"==typeof e}(e)},type:Date},minimumView:{type:String,default:"day"},maximumView:{type:String,default:"year"},name:{type:String},id:{type:String},dayCellContent:{type:Function},fullMonthName:{type:Boolean},disabledDates:{type:Object},highlighted:{type:Object},placeholder:{type:String},inline:{type:Boolean},calendarClass:{type:[String,Object,Array]},inputClass:{type:[String,Object,Array]},wrapperClass:{type:[String,Object,Array]},mondayFirst:{type:Boolean},clearButton:{type:Boolean},clearButtonIcon:{type:String},calendarButton:{type:Boolean},calendarButtonIcon:{type:String},calendarButtonIconContent:{type:String},bootstrapStyling:{type:Boolean},initialView:{type:String},disabled:{type:Boolean},required:{type:Boolean},typeable:{type:Boolean},useUtc:{type:Boolean},validations:{type:Array,default:function(){return[]}},autoValidate:{type:Boolean,default:!1},hideInput:{type:Boolean,default:!0}},emits:["input","cleared","update:modelValue","closed","changed-month","changed-year","changed-day","selected","selected-disabled"],setup:function(t,a){var n,r=a.emit,o=new Date(t.modelValue),l=e.ref(0),i=e.ref(null);t.modelValue&&(n=o,"[object Date]"===Object.prototype.toString.call(n)&&!Number.isNaN(n.getTime()))?(l.value=u(o,1),i.value=o):l.value=u(new Date,1);var c=e.ref(!1),d=e.ref(!1),s=e.ref(!1),p=e.ref(0),m=e.ref(new Date),f=e.reactive({isValid:!0,message:""}),h=e.computed((function(){return t.initialView?t.initialView:t.minimumView})),y=e.computed((function(){return new Date(l.value)})),v=e.computed((function(){return Y[t.language]})),g=e.computed((function(){return!!t.inline})),D=e.computed((function(){return{position:g.value?"static":void 0}})),b=e.computed((function(){return c.value||d.value||s.value})),w=e.computed((function(){return v.value&&!0===v.value.rtl}));function k(e){e||(e=t.openDate?new Date(t.openDate):new Date),l.value=u(new Date(e),1)}function C(e){var a=["day","month","year"],n=a.indexOf(t.minimumView),r=a.indexOf(t.maximumView),o=a.indexOf(e);return o>=n&&o<=r}function S(e){c.value=!1,d.value=!1,s.value=!1,g.value||e&&(t.autoValidate&&j(),r("closed"))}function V(){return!!C("day")&&(S(),c.value=!0,!0)}function B(){return!!C("month")&&(S(),d.value=!0,!0)}function N(){return!!C("year")&&(S(),s.value=!0,!0)}function M(){var e=h.value;if(!C(e))throw new Error("initialView '".concat(e,"' cannot be rendered based on minimum '").concat(t.minimumView,"' and maximum '").concat(t.maximumView,"'"));switch(e){case"year":N();break;case"month":B();break;default:V()}}function _(e){var a=new Date(e);i.value=a,k(a),r("selected",a),t.modelValue?r("update:modelValue",a):r("input",a)}function x(e){_(e.timestamp),g.value||S(!0),m.value=new Date}function T(e){var t=e;if("string"==typeof e||"number"==typeof e){var a=new Date(e);t=Number.isNaN(a.valueOf())?null:a}if(!t)return k(),void(i.value=null);i.value=e,k(e)}function j(){var e=I(i.value,t.validations);return f.isValid=e.isValid,f.message=e.message,f.isValid}return e.watch((function(){return t.modelValue}),(function(e){T(e)})),e.watch((function(){return t.value}),(function(e){T(e)})),e.watch((function(){return t.openDate}),(function(){k()})),e.watch((function(){return t.initialView}),(function(){M()})),t.value&&T(t.value),g.value&&M(),{pageTimestamp:l,selectedDate:i,showDayView:c,showMonthView:d,showYearView:s,calendarHeight:p,resetTypedDate:m,pageDate:y,translation:v,calendarStyle:D,isOpen:b,isInline:g,isRtl:w,setTypedDate:function(e){_(e.getTime())},handleChangedMonthFromDayPicker:function(e){k(e),r("changed-month",e)},selectYear:function(e){var t=new Date(e.timestamp);C("month")?(k(t),B()):x(e),r("changed-year",e)},selectMonth:function(e){var t=new Date(e.timestamp);C("day")?(k(t),V()):x(e),r("changed-month",e)},selectDisabledDate:function(e){r("selected-disabled",e)},clearDate:function(){i.value=null,k(),r("selected",null),t.modelValue?r("update:modelValue",null):r("input",null),r("cleared")},showCalendar:function(){return!t.disabled&&!g.value&&(b.value?S(!0):(M(),!0))},close:S,allowedToShowView:C,showYearCalendar:N,showMonthCalendar:B,setPageDate:k,selectDate:x,validation:f,isValid:j,clearError:function(){f.message="",f.isValid=!0},onClose:function(){}}}});const A={key:0,class:"dp-error"};return function(e,t){void 0===t&&(t={});var a=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===a&&n.firstChild?n.insertBefore(r,n.firstChild):n.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}('.rtl{direction:rtl}.vuejs3-datepicker{position:relative;text-align:left}.vuejs3-datepicker *{box-sizing:border-box}.vuejs3-datepicker input{border:1px solid}.vuejs3-datepicker__calendar{position:absolute;z-index:100;background:#fff;width:300px;border:1px solid #000}.vuejs3-datepicker__calendar header{display:block;line-height:40px}.vuejs3-datepicker__calendar header span{text-align:center;width:71.42857142857143%;float:left}.vuejs3-datepicker__calendar header .next,.vuejs3-datepicker__calendar header .prev{width:14.285714285714286%;float:left;text-indent:-10000px;position:relative}.vuejs3-datepicker__calendar header .next:after,.vuejs3-datepicker__calendar header .prev:after{content:"";position:absolute;left:50%;top:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);border:6px solid transparent}.vuejs3-datepicker__calendar header .prev:after{border-right:10px solid #000;margin-left:-5px}.vuejs3-datepicker__calendar header .prev.disabled:after{border-right:10px solid #000}.vuejs3-datepicker__calendar header .next:after{border-left:10px solid #000;margin-left:5px}.vuejs3-datepicker__calendar header .next.disabled:after{border-left:10px solid #ddd}.vuejs3-datepicker__calendar header .next:not(.disabled),.vuejs3-datepicker__calendar header .prev:not(.disabled),.vuejs3-datepicker__calendar header .up:not(.disabled){cursor:pointer}.vuejs3-datepicker__calendar header .next:not(.disabled):hover,.vuejs3-datepicker__calendar header .prev:not(.disabled):hover,.vuejs3-datepicker__calendar header .up:not(.disabled):hover{background:#eee}.vuejs3-datepicker__calendar .disabled{color:#ddd;cursor:default}.vuejs3-datepicker__calendar .flex-rtl{display:-webkit-flex;display:-ms-flexbox;display:flex;width:inherit;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.vuejs3-datepicker__calendar .cell{display:inline-block;padding:0 5px;width:14.285714285714286%;height:40px;line-height:40px;text-align:center;vertical-align:middle;border:1px solid transparent}.vuejs3-datepicker__calendar .cell:not(.blank):not(.disabled).day,.vuejs3-datepicker__calendar .cell:not(.blank):not(.disabled).month,.vuejs3-datepicker__calendar .cell:not(.blank):not(.disabled).year{cursor:pointer}.vuejs3-datepicker__calendar .cell:not(.blank):not(.disabled).day:hover,.vuejs3-datepicker__calendar .cell:not(.blank):not(.disabled).month:hover,.vuejs3-datepicker__calendar .cell:not(.blank):not(.disabled).year:hover{border:1px solid #4bd}.vuejs3-datepicker__calendar .cell.selected,.vuejs3-datepicker__calendar .cell.selected.highlighted,.vuejs3-datepicker__calendar .cell.selected:hover{background:#4bd}.vuejs3-datepicker__calendar .cell.highlighted{background:#cae5ed}.vuejs3-datepicker__calendar .cell.highlighted.disabled{color:#a3a3a3}.vuejs3-datepicker__calendar .cell.grey{color:#888}.vuejs3-datepicker__calendar .cell.grey:hover{background:inherit}.vuejs3-datepicker__calendar .cell.day-header{font-size:75%;white-space:nowrap;cursor:inherit}.vuejs3-datepicker__calendar .cell.day-header:hover{background:inherit}.vuejs3-datepicker__calendar .month,.vuejs3-datepicker__calendar .year{width:33.333%}.vuejs3-datepicker__calendar-button,.vuejs3-datepicker__clear-button{cursor:pointer;font-style:normal}.vuejs3-datepicker__calendar-button.disabled,.vuejs3-datepicker__clear-button.disabled{color:#999;cursor:default}.dp-error{color:red;font-size:12px}.backdrop{position:fixed;display:none;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.5);z-index:2;cursor:pointer}'),U.render=function(t,a,n,r,o,l){const i=e.resolveComponent("date-input"),c=e.resolveComponent("picker-day"),d=e.resolveComponent("picker-month"),s=e.resolveComponent("picker-year");return e.openBlock(),e.createBlock("div",{class:["vuejs3-datepicker",[t.wrapperClass,t.isRtl?"rtl":""]]},[e.createVNode(i,{selectedDate:t.selectedDate,resetTypedDate:t.resetTypedDate,format:t.format,translation:t.translation,inline:t.inline,id:t.id,name:t.name,openDate:t.openDate,placeholder:t.placeholder,inputClass:t.inputClass,typeable:t.typeable,clearButton:t.clearButton,clearButtonIcon:t.clearButtonIcon,calendarButton:t.calendarButton,calendarButtonIcon:t.calendarButtonIcon,calendarButtonIconContent:t.calendarButtonIconContent,disabled:t.disabled,required:t.required,bootstrapStyling:t.bootstrapStyling,"use-utc":t.useUtc,onShowCalendar:t.showCalendar,onCloseCalendar:t.close,onTypedDate:t.setTypedDate,onClearDate:t.clearDate,minimumView:t.minimumView,maximumView:t.maximumView,clearError:t.clearError,hideInput:t.hideInput},{afterDateInput:e.withCtx((()=>[e.renderSlot(t.$slots,"afterDateInput")])),_:1},8,["selectedDate","resetTypedDate","format","translation","inline","id","name","openDate","placeholder","inputClass","typeable","clearButton","clearButtonIcon","calendarButton","calendarButtonIcon","calendarButtonIconContent","disabled","required","bootstrapStyling","use-utc","onShowCalendar","onCloseCalendar","onTypedDate","onClearDate","minimumView","maximumView","clearError","hideInput"]),t.validation.isValid?e.createCommentVNode("v-if",!0):(e.openBlock(),e.createBlock("div",A,e.toDisplayString(t.validation.message),1)),e.createCommentVNode("Day View "),t.allowedToShowView("day")?(e.openBlock(),e.createBlock(c,{key:1,pageDate:t.pageDate,selectedDate:t.selectedDate,showDayView:t.showDayView,fullMonthName:t.fullMonthName,allowedToShowView:t.allowedToShowView,disabledDates:t.disabledDates,highlighted:t.highlighted,calendarClass:t.calendarClass,calendarStyle:t.calendarStyle,translation:t.translation,pageTimestamp:t.pageTimestamp,isRtl:t.isRtl,mondayFirst:t.mondayFirst,dayCellContent:t.dayCellContent,onChangedMonth:t.handleChangedMonthFromDayPicker,onSelectDate:t.selectDate,onShowMonthCalendar:t.showMonthCalendar,onSelectedDisabled:t.selectDisabledDate,onShowYearCalendar:t.showYearCalendar},{beforeCalendarHeader:e.withCtx((()=>[e.renderSlot(t.$slots,"beforeCalendarHeader")])),_:1},8,["pageDate","selectedDate","showDayView","fullMonthName","allowedToShowView","disabledDates","highlighted","calendarClass","calendarStyle","translation","pageTimestamp","isRtl","mondayFirst","dayCellContent","onChangedMonth","onSelectDate","onShowMonthCalendar","onSelectedDisabled","onShowYearCalendar"])):e.createCommentVNode("v-if",!0),e.createCommentVNode("Month View "),t.allowedToShowView("month")?(e.openBlock(),e.createBlock(d,{key:2,pageDate:t.pageDate,selectedDate:t.selectedDate,showMonthView:t.showMonthView,allowedToShowView:t.allowedToShowView,disabledDates:t.disabledDates,calendarClass:t.calendarClass,calendarStyle:t.calendarStyle,translation:t.translation,isRtl:t.isRtl,"use-utc":t.useUtc,onSelectMonth:t.selectMonth,onShowYearCalendar:t.showYearCalendar,onChangedYear:t.setPageDate},{beforeCalendarHeader:e.withCtx((()=>[e.renderSlot(t.$slots,"beforeCalendarHeader")])),_:1},8,["pageDate","selectedDate","showMonthView","allowedToShowView","disabledDates","calendarClass","calendarStyle","translation","isRtl","use-utc","onSelectMonth","onShowYearCalendar","onChangedYear"])):e.createCommentVNode("v-if",!0),e.createCommentVNode(" Year View "),t.allowedToShowView("year")?(e.openBlock(),e.createBlock(s,{key:3,pageDate:t.pageDate,selectedDate:t.selectedDate,showYearView:t.showYearView,allowedToShowView:t.allowedToShowView,disabledDates:t.disabledDates,calendarClass:t.calendarClass,calendarStyle:t.calendarStyle,translation:t.translation,isRtl:t.isRtl,"use-utc":t.useUtc,onSelectYear:t.selectYear,onChangedDecade:t.setPageDate,fullMonthName:t.fullMonthName},{beforeCalendarHeader:e.withCtx((()=>[e.renderSlot(t.$slots,"beforeCalendarHeader")])),_:1},8,["pageDate","selectedDate","showYearView","allowedToShowView","disabledDates","calendarClass","calendarStyle","translation","isRtl","use-utc","onSelectYear","onChangedDecade","fullMonthName"])):e.createCommentVNode("v-if",!0)],2)},U.__file="src/components/datepicker/Datepicker.vue",U})); diff --git a/example/datepicker.js b/example/datepicker.js new file mode 100644 index 0000000..153d90d --- /dev/null +++ b/example/datepicker.js @@ -0,0 +1,11118 @@ + +(function(l, r) { if (l.getElementById('livereloadscript')) return; r = l.createElement('script'); r.async = 1; r.src = '//' + (window.location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1'; r.id = 'livereloadscript'; l.getElementsByTagName('head')[0].appendChild(r) })(window.document); +function _typeof(obj) { + "@babel/helpers - typeof"; + + if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { + _typeof = function (obj) { + return typeof obj; + }; + } else { + _typeof = function (obj) { + return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; + }; + } + + return _typeof(obj); +} + +function _classCallCheck(instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); + } +} + +function _defineProperties(target, props) { + for (var i = 0; i < props.length; i++) { + var descriptor = props[i]; + descriptor.enumerable = descriptor.enumerable || false; + descriptor.configurable = true; + if ("value" in descriptor) descriptor.writable = true; + Object.defineProperty(target, descriptor.key, descriptor); + } +} + +function _createClass(Constructor, protoProps, staticProps) { + if (protoProps) _defineProperties(Constructor.prototype, protoProps); + if (staticProps) _defineProperties(Constructor, staticProps); + return Constructor; +} + +function _defineProperty(obj, key, value) { + if (key in obj) { + Object.defineProperty(obj, key, { + value: value, + enumerable: true, + configurable: true, + writable: true + }); + } else { + obj[key] = value; + } + + return obj; +} + +function _slicedToArray(arr, i) { + return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); +} + +function _toConsumableArray(arr) { + return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); +} + +function _arrayWithoutHoles(arr) { + if (Array.isArray(arr)) return _arrayLikeToArray(arr); +} + +function _arrayWithHoles(arr) { + if (Array.isArray(arr)) return arr; +} + +function _iterableToArray(iter) { + if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); +} + +function _iterableToArrayLimit(arr, i) { + if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; + var _arr = []; + var _n = true; + var _d = false; + var _e = undefined; + + try { + for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { + _arr.push(_s.value); + + if (i && _arr.length === i) break; + } + } catch (err) { + _d = true; + _e = err; + } finally { + try { + if (!_n && _i["return"] != null) _i["return"](); + } finally { + if (_d) throw _e; + } + } + + return _arr; +} + +function _unsupportedIterableToArray(o, minLen) { + if (!o) return; + if (typeof o === "string") return _arrayLikeToArray(o, minLen); + var n = Object.prototype.toString.call(o).slice(8, -1); + if (n === "Object" && o.constructor) n = o.constructor.name; + if (n === "Map" || n === "Set") return Array.from(o); + if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); +} + +function _arrayLikeToArray(arr, len) { + if (len == null || len > arr.length) len = arr.length; + + for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; + + return arr2; +} + +function _nonIterableSpread() { + throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); +} + +function _nonIterableRest() { + throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); +} + +function _createForOfIteratorHelper(o, allowArrayLike) { + var it; + + if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { + if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { + if (it) o = it; + var i = 0; + + var F = function () {}; + + return { + s: F, + n: function () { + if (i >= o.length) return { + done: true + }; + return { + done: false, + value: o[i++] + }; + }, + e: function (e) { + throw e; + }, + f: F + }; + } + + throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); + } + + var normalCompletion = true, + didErr = false, + err; + return { + s: function () { + it = o[Symbol.iterator](); + }, + n: function () { + var step = it.next(); + normalCompletion = step.done; + return step; + }, + e: function (e) { + didErr = true; + err = e; + }, + f: function () { + try { + if (!normalCompletion && it.return != null) it.return(); + } finally { + if (didErr) throw err; + } + } + }; +} + +var _ErrorTypeStrings; + +/** + * Make a map and return a function for checking if a key + * is in that map. + * IMPORTANT: all calls of this function must be prefixed with + * \/\*#\_\_PURE\_\_\*\/ + * So that rollup can tree-shake them if necessary. + */ +function makeMap(str, expectsLowerCase) { + var map = Object.create(null); + var list = str.split(','); + + for (var i = 0; i < list.length; i++) { + map[list[i]] = true; + } + + return expectsLowerCase ? function (val) { + return !!map[val.toLowerCase()]; + } : function (val) { + return !!map[val]; + }; +} + +var GLOBALS_WHITE_LISTED = 'Infinity,undefined,NaN,isFinite,isNaN,parseFloat,parseInt,decodeURI,' + 'decodeURIComponent,encodeURI,encodeURIComponent,Math,Number,Date,Array,' + 'Object,Boolean,String,RegExp,Map,Set,JSON,Intl'; +var isGloballyWhitelisted = /*#__PURE__*/makeMap(GLOBALS_WHITE_LISTED); +/** + * On the client we only need to offer special cases for boolean attributes that + * have different names from their corresponding dom properties: + * - itemscope -> N/A + * - allowfullscreen -> allowFullscreen + * - formnovalidate -> formNoValidate + * - ismap -> isMap + * - nomodule -> noModule + * - novalidate -> noValidate + * - readonly -> readOnly + */ + +var specialBooleanAttrs = "itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly"; +var isSpecialBooleanAttr = /*#__PURE__*/makeMap(specialBooleanAttrs); + +function normalizeStyle(value) { + if (isArray(value)) { + var res = {}; + + for (var i = 0; i < value.length; i++) { + var item = value[i]; + var normalized = normalizeStyle(isString(item) ? parseStringStyle(item) : item); + + if (normalized) { + for (var key in normalized) { + res[key] = normalized[key]; + } + } + } + + return res; + } else if (isObject(value)) { + return value; + } +} + +var listDelimiterRE = /;(?![^(]*\))/g; +var propertyDelimiterRE = /:(.+)/; + +function parseStringStyle(cssText) { + var ret = {}; + cssText.split(listDelimiterRE).forEach(function (item) { + if (item) { + var tmp = item.split(propertyDelimiterRE); + tmp.length > 1 && (ret[tmp[0].trim()] = tmp[1].trim()); + } + }); + return ret; +} + +function normalizeClass(value) { + var res = ''; + + if (isString(value)) { + res = value; + } else if (isArray(value)) { + for (var i = 0; i < value.length; i++) { + res += normalizeClass(value[i]) + ' '; + } + } else if (isObject(value)) { + for (var name in value) { + if (value[name]) { + res += name + ' '; + } + } + } + + return res.trim(); +} // These tag configs are shared between compiler-dom and runtime-dom, so they +// https://developer.mozilla.org/en-US/docs/Web/HTML/Element + + +var HTML_TAGS = 'html,body,base,head,link,meta,style,title,address,article,aside,footer,' + 'header,h1,h2,h3,h4,h5,h6,hgroup,nav,section,div,dd,dl,dt,figcaption,' + 'figure,picture,hr,img,li,main,ol,p,pre,ul,a,b,abbr,bdi,bdo,br,cite,code,' + 'data,dfn,em,i,kbd,mark,q,rp,rt,rtc,ruby,s,samp,small,span,strong,sub,sup,' + 'time,u,var,wbr,area,audio,map,track,video,embed,object,param,source,' + 'canvas,script,noscript,del,ins,caption,col,colgroup,table,thead,tbody,td,' + 'th,tr,button,datalist,fieldset,form,input,label,legend,meter,optgroup,' + 'option,output,progress,select,textarea,details,dialog,menu,' + 'summary,template,blockquote,iframe,tfoot'; // https://developer.mozilla.org/en-US/docs/Web/SVG/Element + +var SVG_TAGS = 'svg,animate,animateMotion,animateTransform,circle,clipPath,color-profile,' + 'defs,desc,discard,ellipse,feBlend,feColorMatrix,feComponentTransfer,' + 'feComposite,feConvolveMatrix,feDiffuseLighting,feDisplacementMap,' + 'feDistanceLight,feDropShadow,feFlood,feFuncA,feFuncB,feFuncG,feFuncR,' + 'feGaussianBlur,feImage,feMerge,feMergeNode,feMorphology,feOffset,' + 'fePointLight,feSpecularLighting,feSpotLight,feTile,feTurbulence,filter,' + 'foreignObject,g,hatch,hatchpath,image,line,linearGradient,marker,mask,' + 'mesh,meshgradient,meshpatch,meshrow,metadata,mpath,path,pattern,' + 'polygon,polyline,radialGradient,rect,set,solidcolor,stop,switch,symbol,' + 'text,textPath,title,tspan,unknown,use,view'; +var isHTMLTag = /*#__PURE__*/makeMap(HTML_TAGS); +var isSVGTag = /*#__PURE__*/makeMap(SVG_TAGS); +/** + * For converting {{ interpolation }} values to displayed strings. + * @private + */ + + +var toDisplayString = function toDisplayString(val) { + return val == null ? '' : isObject(val) ? JSON.stringify(val, replacer, 2) : String(val); +}; + +var replacer = function replacer(_key, val) { + if (isMap(val)) { + return _defineProperty({}, "Map(".concat(val.size, ")"), _toConsumableArray(val.entries()).reduce(function (entries, _ref) { + var _ref2 = _slicedToArray(_ref, 2), + key = _ref2[0], + val = _ref2[1]; + + entries["".concat(key, " =>")] = val; + return entries; + }, {})); + } else if (isSet(val)) { + return _defineProperty({}, "Set(".concat(val.size, ")"), _toConsumableArray(val.values())); + } else if (isObject(val) && !isArray(val) && !isPlainObject(val)) { + return String(val); + } + + return val; +}; + +var EMPTY_OBJ = Object.freeze({}); +var EMPTY_ARR = Object.freeze([]); + +var NOOP = function NOOP() {}; +/** + * Always return false. + */ + + +var NO = function NO() { + return false; +}; + +var onRE = /^on[^a-z]/; + +var isOn = function isOn(key) { + return onRE.test(key); +}; + +var isModelListener = function isModelListener(key) { + return key.startsWith('onUpdate:'); +}; + +var extend = Object.assign; + +var remove = function remove(arr, el) { + var i = arr.indexOf(el); + + if (i > -1) { + arr.splice(i, 1); + } +}; + +var hasOwnProperty = Object.prototype.hasOwnProperty; + +var hasOwn = function hasOwn(val, key) { + return hasOwnProperty.call(val, key); +}; + +var isArray = Array.isArray; + +var isMap = function isMap(val) { + return toTypeString(val) === '[object Map]'; +}; + +var isSet = function isSet(val) { + return toTypeString(val) === '[object Set]'; +}; + +var isFunction = function isFunction(val) { + return typeof val === 'function'; +}; + +var isString = function isString(val) { + return typeof val === 'string'; +}; + +var isSymbol = function isSymbol(val) { + return _typeof(val) === 'symbol'; +}; + +var isObject = function isObject(val) { + return val !== null && _typeof(val) === 'object'; +}; + +var isPromise = function isPromise(val) { + return isObject(val) && isFunction(val.then) && isFunction(val.catch); +}; + +var objectToString = Object.prototype.toString; + +var toTypeString = function toTypeString(value) { + return objectToString.call(value); +}; + +var toRawType = function toRawType(value) { + // extract "RawType" from strings like "[object RawType]" + return toTypeString(value).slice(8, -1); +}; + +var isPlainObject = function isPlainObject(val) { + return toTypeString(val) === '[object Object]'; +}; + +var isIntegerKey = function isIntegerKey(key) { + return isString(key) && key !== 'NaN' && key[0] !== '-' && '' + parseInt(key, 10) === key; +}; + +var isReservedProp = /*#__PURE__*/makeMap( // the leading comma is intentional so empty string "" is also included +',key,ref,' + 'onVnodeBeforeMount,onVnodeMounted,' + 'onVnodeBeforeUpdate,onVnodeUpdated,' + 'onVnodeBeforeUnmount,onVnodeUnmounted'); + +var cacheStringFunction = function cacheStringFunction(fn) { + var cache = Object.create(null); + return function (str) { + var hit = cache[str]; + return hit || (cache[str] = fn(str)); + }; +}; + +var camelizeRE = /-(\w)/g; +/** + * @private + */ + +var camelize = cacheStringFunction(function (str) { + return str.replace(camelizeRE, function (_, c) { + return c ? c.toUpperCase() : ''; + }); +}); +var hyphenateRE = /\B([A-Z])/g; +/** + * @private + */ + +var hyphenate = cacheStringFunction(function (str) { + return str.replace(hyphenateRE, '-$1').toLowerCase(); +}); +/** + * @private + */ + +var capitalize = cacheStringFunction(function (str) { + return str.charAt(0).toUpperCase() + str.slice(1); +}); +/** + * @private + */ + +var toHandlerKey = cacheStringFunction(function (str) { + return str ? "on".concat(capitalize(str)) : ""; +}); // compare whether a value has changed, accounting for NaN. + +var hasChanged = function hasChanged(value, oldValue) { + return value !== oldValue && (value === value || oldValue === oldValue); +}; + +var invokeArrayFns = function invokeArrayFns(fns, arg) { + for (var i = 0; i < fns.length; i++) { + fns[i](arg); + } +}; + +var def = function def(obj, key, value) { + Object.defineProperty(obj, key, { + configurable: true, + enumerable: false, + value: value + }); +}; + +var toNumber = function toNumber(val) { + var n = parseFloat(val); + return isNaN(n) ? val : n; +}; + +var _globalThis; + +var getGlobalThis = function getGlobalThis() { + return _globalThis || (_globalThis = typeof globalThis !== 'undefined' ? globalThis : typeof self !== 'undefined' ? self : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : {}); +}; + +var targetMap = new WeakMap(); +var effectStack = []; +var activeEffect; +var ITERATE_KEY = Symbol('iterate'); +var MAP_KEY_ITERATE_KEY = Symbol('Map key iterate'); + +function isEffect(fn) { + return fn && fn._isEffect === true; +} + +function effect(fn) { + var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : EMPTY_OBJ; + + if (isEffect(fn)) { + fn = fn.raw; + } + + var effect = createReactiveEffect(fn, options); + + if (!options.lazy) { + effect(); + } + + return effect; +} + +function stop(effect) { + if (effect.active) { + cleanup(effect); + + if (effect.options.onStop) { + effect.options.onStop(); + } + + effect.active = false; + } +} + +var uid = 0; + +function createReactiveEffect(fn, options) { + var effect = function reactiveEffect() { + if (!effect.active) { + return options.scheduler ? undefined : fn(); + } + + if (!effectStack.includes(effect)) { + cleanup(effect); + + try { + enableTracking(); + effectStack.push(effect); + activeEffect = effect; + return fn(); + } finally { + effectStack.pop(); + resetTracking(); + activeEffect = effectStack[effectStack.length - 1]; + } + } + }; + + effect.id = uid++; + effect.allowRecurse = !!options.allowRecurse; + effect._isEffect = true; + effect.active = true; + effect.raw = fn; + effect.deps = []; + effect.options = options; + return effect; +} + +function cleanup(effect) { + var deps = effect.deps; + + if (deps.length) { + for (var i = 0; i < deps.length; i++) { + deps[i].delete(effect); + } + + deps.length = 0; + } +} + +var shouldTrack = true; +var trackStack = []; + +function pauseTracking() { + trackStack.push(shouldTrack); + shouldTrack = false; +} + +function enableTracking() { + trackStack.push(shouldTrack); + shouldTrack = true; +} + +function resetTracking() { + var last = trackStack.pop(); + shouldTrack = last === undefined ? true : last; +} + +function track(target, type, key) { + if (!shouldTrack || activeEffect === undefined) { + return; + } + + var depsMap = targetMap.get(target); + + if (!depsMap) { + targetMap.set(target, depsMap = new Map()); + } + + var dep = depsMap.get(key); + + if (!dep) { + depsMap.set(key, dep = new Set()); + } + + if (!dep.has(activeEffect)) { + dep.add(activeEffect); + activeEffect.deps.push(dep); + + if (activeEffect.options.onTrack) { + activeEffect.options.onTrack({ + effect: activeEffect, + target: target, + type: type, + key: key + }); + } + } +} + +function trigger(target, type, key, newValue, oldValue, oldTarget) { + var depsMap = targetMap.get(target); + + if (!depsMap) { + // never been tracked + return; + } + + var effects = new Set(); + + var add = function add(effectsToAdd) { + if (effectsToAdd) { + effectsToAdd.forEach(function (effect) { + if (effect !== activeEffect || effect.allowRecurse) { + effects.add(effect); + } + }); + } + }; + + if (type === "clear" + /* CLEAR */ + ) { + // collection being cleared + // trigger all effects for target + depsMap.forEach(add); + } else if (key === 'length' && isArray(target)) { + depsMap.forEach(function (dep, key) { + if (key === 'length' || key >= newValue) { + add(dep); + } + }); + } else { + // schedule runs for SET | ADD | DELETE + if (key !== void 0) { + add(depsMap.get(key)); + } // also run for iteration key on ADD | DELETE | Map.SET + + + switch (type) { + case "add" + /* ADD */ + : + if (!isArray(target)) { + add(depsMap.get(ITERATE_KEY)); + + if (isMap(target)) { + add(depsMap.get(MAP_KEY_ITERATE_KEY)); + } + } else if (isIntegerKey(key)) { + // new index added to array -> length changes + add(depsMap.get('length')); + } + + break; + + case "delete" + /* DELETE */ + : + if (!isArray(target)) { + add(depsMap.get(ITERATE_KEY)); + + if (isMap(target)) { + add(depsMap.get(MAP_KEY_ITERATE_KEY)); + } + } + + break; + + case "set" + /* SET */ + : + if (isMap(target)) { + add(depsMap.get(ITERATE_KEY)); + } + + break; + } + } + + var run = function run(effect) { + if (effect.options.onTrigger) { + effect.options.onTrigger({ + effect: effect, + target: target, + key: key, + type: type, + newValue: newValue, + oldValue: oldValue, + oldTarget: oldTarget + }); + } + + if (effect.options.scheduler) { + effect.options.scheduler(effect); + } else { + effect(); + } + }; + + effects.forEach(run); +} + +var builtInSymbols = new Set(Object.getOwnPropertyNames(Symbol).map(function (key) { + return Symbol[key]; +}).filter(isSymbol)); +var get = /*#__PURE__*/createGetter(); +var shallowGet = /*#__PURE__*/createGetter(false, true); +var readonlyGet = /*#__PURE__*/createGetter(true); +var shallowReadonlyGet = /*#__PURE__*/createGetter(true, true); +var arrayInstrumentations = {}; +['includes', 'indexOf', 'lastIndexOf'].forEach(function (key) { + var method = Array.prototype[key]; + + arrayInstrumentations[key] = function () { + var arr = toRaw(this); + + for (var i = 0, l = this.length; i < l; i++) { + track(arr, "get" + /* GET */ + , i + ''); + } // we run the method using the original args first (which may be reactive) + + + for (var _len = arguments.length, args = new Array(_len), _key2 = 0; _key2 < _len; _key2++) { + args[_key2] = arguments[_key2]; + } + + var res = method.apply(arr, args); + + if (res === -1 || res === false) { + // if that didn't work, run it again using raw values. + return method.apply(arr, args.map(toRaw)); + } else { + return res; + } + }; +}); +['push', 'pop', 'shift', 'unshift', 'splice'].forEach(function (key) { + var method = Array.prototype[key]; + + arrayInstrumentations[key] = function () { + pauseTracking(); + + for (var _len2 = arguments.length, args = new Array(_len2), _key3 = 0; _key3 < _len2; _key3++) { + args[_key3] = arguments[_key3]; + } + + var res = method.apply(this, args); + resetTracking(); + return res; + }; +}); + +function createGetter() { + var isReadonly = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false; + var shallow = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; + return function get(target, key, receiver) { + if (key === "__v_isReactive" + /* IS_REACTIVE */ + ) { + return !isReadonly; + } else if (key === "__v_isReadonly" + /* IS_READONLY */ + ) { + return isReadonly; + } else if (key === "__v_raw" + /* RAW */ + && receiver === (isReadonly ? readonlyMap : reactiveMap).get(target)) { + return target; + } + + var targetIsArray = isArray(target); + + if (targetIsArray && hasOwn(arrayInstrumentations, key)) { + return Reflect.get(arrayInstrumentations, key, receiver); + } + + var res = Reflect.get(target, key, receiver); + + if (isSymbol(key) ? builtInSymbols.has(key) : key === "__proto__" || key === "__v_isRef") { + return res; + } + + if (!isReadonly) { + track(target, "get" + /* GET */ + , key); + } + + if (shallow) { + return res; + } + + if (isRef(res)) { + // ref unwrapping - does not apply for Array + integer key. + var shouldUnwrap = !targetIsArray || !isIntegerKey(key); + return shouldUnwrap ? res.value : res; + } + + if (isObject(res)) { + // Convert returned value into a proxy as well. we do the isObject check + // here to avoid invalid value warning. Also need to lazy access readonly + // and reactive here to avoid circular dependency. + return isReadonly ? readonly(res) : reactive(res); + } + + return res; + }; +} + +var set = /*#__PURE__*/createSetter(); +var shallowSet = /*#__PURE__*/createSetter(true); + +function createSetter() { + var shallow = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false; + return function set(target, key, value, receiver) { + var oldValue = target[key]; + + if (!shallow) { + value = toRaw(value); + + if (!isArray(target) && isRef(oldValue) && !isRef(value)) { + oldValue.value = value; + return true; + } + } + + var hadKey = isArray(target) && isIntegerKey(key) ? Number(key) < target.length : hasOwn(target, key); + var result = Reflect.set(target, key, value, receiver); // don't trigger if target is something up in the prototype chain of original + + if (target === toRaw(receiver)) { + if (!hadKey) { + trigger(target, "add" + /* ADD */ + , key, value); + } else if (hasChanged(value, oldValue)) { + trigger(target, "set" + /* SET */ + , key, value, oldValue); + } + } + + return result; + }; +} + +function deleteProperty(target, key) { + var hadKey = hasOwn(target, key); + var oldValue = target[key]; + var result = Reflect.deleteProperty(target, key); + + if (result && hadKey) { + trigger(target, "delete" + /* DELETE */ + , key, undefined, oldValue); + } + + return result; +} + +function has(target, key) { + var result = Reflect.has(target, key); + + if (!isSymbol(key) || !builtInSymbols.has(key)) { + track(target, "has" + /* HAS */ + , key); + } + + return result; +} + +function ownKeys(target) { + track(target, "iterate" + /* ITERATE */ + , isArray(target) ? 'length' : ITERATE_KEY); + return Reflect.ownKeys(target); +} + +var mutableHandlers = { + get: get, + set: set, + deleteProperty: deleteProperty, + has: has, + ownKeys: ownKeys +}; +var readonlyHandlers = { + get: readonlyGet, + set: function set(target, key) { + { + console.warn("Set operation on key \"".concat(String(key), "\" failed: target is readonly."), target); + } + return true; + }, + deleteProperty: function deleteProperty(target, key) { + { + console.warn("Delete operation on key \"".concat(String(key), "\" failed: target is readonly."), target); + } + return true; + } +}; +var shallowReactiveHandlers = extend({}, mutableHandlers, { + get: shallowGet, + set: shallowSet +}); // Props handlers are special in the sense that it should not unwrap top-level +// refs (in order to allow refs to be explicitly passed down), but should +// retain the reactivity of the normal readonly object. + +var shallowReadonlyHandlers = extend({}, readonlyHandlers, { + get: shallowReadonlyGet +}); + +var toReactive = function toReactive(value) { + return isObject(value) ? reactive(value) : value; +}; + +var toReadonly = function toReadonly(value) { + return isObject(value) ? readonly(value) : value; +}; + +var toShallow = function toShallow(value) { + return value; +}; + +var getProto = function getProto(v) { + return Reflect.getPrototypeOf(v); +}; + +function get$1(target, key) { + var isReadonly = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false; + var isShallow = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false; + // #1772: readonly(reactive(Map)) should return readonly + reactive version + // of the value + target = target["__v_raw" + /* RAW */ + ]; + var rawTarget = toRaw(target); + var rawKey = toRaw(key); + + if (key !== rawKey) { + !isReadonly && track(rawTarget, "get" + /* GET */ + , key); + } + + !isReadonly && track(rawTarget, "get" + /* GET */ + , rawKey); + + var _getProto = getProto(rawTarget), + has = _getProto.has; + + var wrap = isReadonly ? toReadonly : isShallow ? toShallow : toReactive; + + if (has.call(rawTarget, key)) { + return wrap(target.get(key)); + } else if (has.call(rawTarget, rawKey)) { + return wrap(target.get(rawKey)); + } +} + +function has$1(key) { + var isReadonly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; + var target = this["__v_raw" + /* RAW */ + ]; + var rawTarget = toRaw(target); + var rawKey = toRaw(key); + + if (key !== rawKey) { + !isReadonly && track(rawTarget, "has" + /* HAS */ + , key); + } + + !isReadonly && track(rawTarget, "has" + /* HAS */ + , rawKey); + return key === rawKey ? target.has(key) : target.has(key) || target.has(rawKey); +} + +function size(target) { + var isReadonly = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; + target = target["__v_raw" + /* RAW */ + ]; + !isReadonly && track(toRaw(target), "iterate" + /* ITERATE */ + , ITERATE_KEY); + return Reflect.get(target, 'size', target); +} + +function add(value) { + value = toRaw(value); + var target = toRaw(this); + var proto = getProto(target); + var hadKey = proto.has.call(target, value); + var result = target.add(value); + + if (!hadKey) { + trigger(target, "add" + /* ADD */ + , value, value); + } + + return result; +} + +function set$1(key, value) { + value = toRaw(value); + var target = toRaw(this); + + var _getProto2 = getProto(target), + has = _getProto2.has, + get = _getProto2.get; + + var hadKey = has.call(target, key); + + if (!hadKey) { + key = toRaw(key); + hadKey = has.call(target, key); + } else { + checkIdentityKeys(target, has, key); + } + + var oldValue = get.call(target, key); + var result = target.set(key, value); + + if (!hadKey) { + trigger(target, "add" + /* ADD */ + , key, value); + } else if (hasChanged(value, oldValue)) { + trigger(target, "set" + /* SET */ + , key, value, oldValue); + } + + return result; +} + +function deleteEntry(key) { + var target = toRaw(this); + + var _getProto3 = getProto(target), + has = _getProto3.has, + get = _getProto3.get; + + var hadKey = has.call(target, key); + + if (!hadKey) { + key = toRaw(key); + hadKey = has.call(target, key); + } else { + checkIdentityKeys(target, has, key); + } + + var oldValue = get ? get.call(target, key) : undefined; // forward the operation before queueing reactions + + var result = target.delete(key); + + if (hadKey) { + trigger(target, "delete" + /* DELETE */ + , key, undefined, oldValue); + } + + return result; +} + +function clear() { + var target = toRaw(this); + var hadItems = target.size !== 0; + var oldTarget = isMap(target) ? new Map(target) : new Set(target); // forward the operation before queueing reactions + + var result = target.clear(); + + if (hadItems) { + trigger(target, "clear" + /* CLEAR */ + , undefined, undefined, oldTarget); + } + + return result; +} + +function createForEach(isReadonly, isShallow) { + return function forEach(callback, thisArg) { + var observed = this; + var target = observed["__v_raw" + /* RAW */ + ]; + var rawTarget = toRaw(target); + var wrap = isReadonly ? toReadonly : isShallow ? toShallow : toReactive; + !isReadonly && track(rawTarget, "iterate" + /* ITERATE */ + , ITERATE_KEY); + return target.forEach(function (value, key) { + // important: make sure the callback is + // 1. invoked with the reactive map as `this` and 3rd arg + // 2. the value received should be a corresponding reactive/readonly. + return callback.call(thisArg, wrap(value), wrap(key), observed); + }); + }; +} + +function createIterableMethod(method, isReadonly, isShallow) { + return function () { + var target = this["__v_raw" + /* RAW */ + ]; + var rawTarget = toRaw(target); + var targetIsMap = isMap(rawTarget); + var isPair = method === 'entries' || method === Symbol.iterator && targetIsMap; + var isKeyOnly = method === 'keys' && targetIsMap; + var innerIterator = target[method].apply(target, arguments); + var wrap = isReadonly ? toReadonly : isShallow ? toShallow : toReactive; + !isReadonly && track(rawTarget, "iterate" + /* ITERATE */ + , isKeyOnly ? MAP_KEY_ITERATE_KEY : ITERATE_KEY); // return a wrapped iterator which returns observed versions of the + // values emitted from the real iterator + + return _defineProperty({ + // iterator protocol + next: function next() { + var _innerIterator$next = innerIterator.next(), + value = _innerIterator$next.value, + done = _innerIterator$next.done; + + return done ? { + value: value, + done: done + } : { + value: isPair ? [wrap(value[0]), wrap(value[1])] : wrap(value), + done: done + }; + } + }, Symbol.iterator, function () { + return this; + }); + }; +} + +function createReadonlyMethod(type) { + return function () { + { + var key = (arguments.length <= 0 ? undefined : arguments[0]) ? "on key \"".concat(arguments.length <= 0 ? undefined : arguments[0], "\" ") : ""; + console.warn("".concat(capitalize(type), " operation ").concat(key, "failed: target is readonly."), toRaw(this)); + } + return type === "delete" + /* DELETE */ + ? false : this; + }; +} + +var mutableInstrumentations = { + get: function get(key) { + return get$1(this, key); + }, + + get size() { + return size(this); + }, + + has: has$1, + add: add, + set: set$1, + delete: deleteEntry, + clear: clear, + forEach: createForEach(false, false) +}; +var shallowInstrumentations = { + get: function get(key) { + return get$1(this, key, false, true); + }, + + get size() { + return size(this); + }, + + has: has$1, + add: add, + set: set$1, + delete: deleteEntry, + clear: clear, + forEach: createForEach(false, true) +}; +var readonlyInstrumentations = { + get: function get(key) { + return get$1(this, key, true); + }, + + get size() { + return size(this, true); + }, + + has: function has(key) { + return has$1.call(this, key, true); + }, + add: createReadonlyMethod("add" + /* ADD */ + ), + set: createReadonlyMethod("set" + /* SET */ + ), + delete: createReadonlyMethod("delete" + /* DELETE */ + ), + clear: createReadonlyMethod("clear" + /* CLEAR */ + ), + forEach: createForEach(true, false) +}; +var iteratorMethods = ['keys', 'values', 'entries', Symbol.iterator]; +iteratorMethods.forEach(function (method) { + mutableInstrumentations[method] = createIterableMethod(method, false, false); + readonlyInstrumentations[method] = createIterableMethod(method, true, false); + shallowInstrumentations[method] = createIterableMethod(method, false, true); +}); + +function createInstrumentationGetter(isReadonly, shallow) { + var instrumentations = shallow ? shallowInstrumentations : isReadonly ? readonlyInstrumentations : mutableInstrumentations; + return function (target, key, receiver) { + if (key === "__v_isReactive" + /* IS_REACTIVE */ + ) { + return !isReadonly; + } else if (key === "__v_isReadonly" + /* IS_READONLY */ + ) { + return isReadonly; + } else if (key === "__v_raw" + /* RAW */ + ) { + return target; + } + + return Reflect.get(hasOwn(instrumentations, key) && key in target ? instrumentations : target, key, receiver); + }; +} + +var mutableCollectionHandlers = { + get: createInstrumentationGetter(false, false) +}; +var shallowCollectionHandlers = { + get: createInstrumentationGetter(false, true) +}; +var readonlyCollectionHandlers = { + get: createInstrumentationGetter(true, false) +}; + +function checkIdentityKeys(target, has, key) { + var rawKey = toRaw(key); + + if (rawKey !== key && has.call(target, rawKey)) { + var type = toRawType(target); + console.warn("Reactive ".concat(type, " contains both the raw and reactive ") + "versions of the same object".concat(type === "Map" ? " as keys" : "", ", ") + "which can lead to inconsistencies. " + "Avoid differentiating between the raw and reactive versions " + "of an object and only use the reactive version if possible."); + } +} + +var reactiveMap = new WeakMap(); +var readonlyMap = new WeakMap(); + +function targetTypeMap(rawType) { + switch (rawType) { + case 'Object': + case 'Array': + return 1 + /* COMMON */ + ; + + case 'Map': + case 'Set': + case 'WeakMap': + case 'WeakSet': + return 2 + /* COLLECTION */ + ; + + default: + return 0 + /* INVALID */ + ; + } +} + +function getTargetType(value) { + return value["__v_skip" + /* SKIP */ + ] || !Object.isExtensible(value) ? 0 + /* INVALID */ + : targetTypeMap(toRawType(value)); +} + +function reactive(target) { + // if trying to observe a readonly proxy, return the readonly version. + if (target && target["__v_isReadonly" + /* IS_READONLY */ + ]) { + return target; + } + + return createReactiveObject(target, false, mutableHandlers, mutableCollectionHandlers); +} // Return a reactive-copy of the original object, where only the root level +// properties are reactive, and does NOT unwrap refs nor recursively convert +// returned properties. + + +function shallowReactive(target) { + return createReactiveObject(target, false, shallowReactiveHandlers, shallowCollectionHandlers); +} + +function readonly(target) { + return createReactiveObject(target, true, readonlyHandlers, readonlyCollectionHandlers); +} // Return a reactive-copy of the original object, where only the root level +// properties are readonly, and does NOT unwrap refs nor recursively convert +// returned properties. +// This is used for creating the props proxy object for stateful components. + + +function shallowReadonly(target) { + return createReactiveObject(target, true, shallowReadonlyHandlers, readonlyCollectionHandlers); +} + +function createReactiveObject(target, isReadonly, baseHandlers, collectionHandlers) { + if (!isObject(target)) { + { + console.warn("value cannot be made reactive: ".concat(String(target))); + } + return target; + } // target is already a Proxy, return it. + // exception: calling readonly() on a reactive object + + + if (target["__v_raw" + /* RAW */ + ] && !(isReadonly && target["__v_isReactive" + /* IS_REACTIVE */ + ])) { + return target; + } // target already has corresponding Proxy + + + var proxyMap = isReadonly ? readonlyMap : reactiveMap; + var existingProxy = proxyMap.get(target); + + if (existingProxy) { + return existingProxy; + } // only a whitelist of value types can be observed. + + + var targetType = getTargetType(target); + + if (targetType === 0 + /* INVALID */ + ) { + return target; + } + + var proxy = new Proxy(target, targetType === 2 + /* COLLECTION */ + ? collectionHandlers : baseHandlers); + proxyMap.set(target, proxy); + return proxy; +} + +function isReactive(value) { + if (isReadonly(value)) { + return isReactive(value["__v_raw" + /* RAW */ + ]); + } + + return !!(value && value["__v_isReactive" + /* IS_REACTIVE */ + ]); +} + +function isReadonly(value) { + return !!(value && value["__v_isReadonly" + /* IS_READONLY */ + ]); +} + +function isProxy(value) { + return isReactive(value) || isReadonly(value); +} + +function toRaw(observed) { + return observed && toRaw(observed["__v_raw" + /* RAW */ + ]) || observed; +} + +var convert = function convert(val) { + return isObject(val) ? reactive(val) : val; +}; + +function isRef(r) { + return Boolean(r && r.__v_isRef === true); +} + +function ref(value) { + return createRef(value); +} + +var RefImpl = /*#__PURE__*/function () { + function RefImpl(_rawValue) { + var _shallow = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; + + _classCallCheck(this, RefImpl); + + this._rawValue = _rawValue; + this._shallow = _shallow; + this.__v_isRef = true; + this._value = _shallow ? _rawValue : convert(_rawValue); + } + + _createClass(RefImpl, [{ + key: "value", + get: function get() { + track(toRaw(this), "get" + /* GET */ + , 'value'); + return this._value; + }, + set: function set(newVal) { + if (hasChanged(toRaw(newVal), this._rawValue)) { + this._rawValue = newVal; + this._value = this._shallow ? newVal : convert(newVal); + trigger(toRaw(this), "set" + /* SET */ + , 'value', newVal); + } + } + }]); + + return RefImpl; +}(); + +function createRef(rawValue) { + var shallow = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; + + if (isRef(rawValue)) { + return rawValue; + } + + return new RefImpl(rawValue, shallow); +} + +function unref(ref) { + return isRef(ref) ? ref.value : ref; +} + +var shallowUnwrapHandlers = { + get: function get(target, key, receiver) { + return unref(Reflect.get(target, key, receiver)); + }, + set: function set(target, key, value, receiver) { + var oldValue = target[key]; + + if (isRef(oldValue) && !isRef(value)) { + oldValue.value = value; + return true; + } else { + return Reflect.set(target, key, value, receiver); + } + } +}; + +function proxyRefs(objectWithRefs) { + return isReactive(objectWithRefs) ? objectWithRefs : new Proxy(objectWithRefs, shallowUnwrapHandlers); +} + +var ComputedRefImpl = /*#__PURE__*/function () { + function ComputedRefImpl(getter, _setter, isReadonly) { + var _this2 = this; + + _classCallCheck(this, ComputedRefImpl); + + this._setter = _setter; + this._dirty = true; + this.__v_isRef = true; + this.effect = effect(getter, { + lazy: true, + scheduler: function scheduler() { + if (!_this2._dirty) { + _this2._dirty = true; + trigger(toRaw(_this2), "set" + /* SET */ + , 'value'); + } + } + }); + this["__v_isReadonly" + /* IS_READONLY */ + ] = isReadonly; + } + + _createClass(ComputedRefImpl, [{ + key: "value", + get: function get() { + if (this._dirty) { + this._value = this.effect(); + this._dirty = false; + } + + track(toRaw(this), "get" + /* GET */ + , 'value'); + return this._value; + }, + set: function set(newValue) { + this._setter(newValue); + } + }]); + + return ComputedRefImpl; +}(); + +function computed(getterOrOptions) { + var getter; + var setter; + + if (isFunction(getterOrOptions)) { + getter = getterOrOptions; + + setter = function setter() { + console.warn('Write operation failed: computed value is readonly'); + }; + } else { + getter = getterOrOptions.get; + setter = getterOrOptions.set; + } + + return new ComputedRefImpl(getter, setter, isFunction(getterOrOptions) || !getterOrOptions.set); +} + +var stack = []; + +function pushWarningContext(vnode) { + stack.push(vnode); +} + +function popWarningContext() { + stack.pop(); +} + +function warn(msg) { + // avoid props formatting or warn handler tracking deps that might be mutated + // during patch, leading to infinite recursion. + pauseTracking(); + var instance = stack.length ? stack[stack.length - 1].component : null; + var appWarnHandler = instance && instance.appContext.config.warnHandler; + var trace = getComponentTrace(); + + for (var _len3 = arguments.length, args = new Array(_len3 > 1 ? _len3 - 1 : 0), _key4 = 1; _key4 < _len3; _key4++) { + args[_key4 - 1] = arguments[_key4]; + } + + if (appWarnHandler) { + callWithErrorHandling(appWarnHandler, instance, 11 + /* APP_WARN_HANDLER */ + , [msg + args.join(''), instance && instance.proxy, trace.map(function (_ref6) { + var vnode = _ref6.vnode; + return "at <".concat(formatComponentName(instance, vnode.type), ">"); + }).join('\n'), trace]); + } else { + var _console; + + var warnArgs = ["[Vue warn]: ".concat(msg)].concat(args); + /* istanbul ignore if */ + + if (trace.length && // avoid spamming console during tests + !false) { + warnArgs.push.apply(warnArgs, ["\n"].concat(_toConsumableArray(formatTrace(trace)))); + } + + (_console = console).warn.apply(_console, _toConsumableArray(warnArgs)); + } + + resetTracking(); +} + +function getComponentTrace() { + var currentVNode = stack[stack.length - 1]; + + if (!currentVNode) { + return []; + } // we can't just use the stack because it will be incomplete during updates + // that did not start from the root. Re-construct the parent chain using + // instance parent pointers. + + + var normalizedStack = []; + + while (currentVNode) { + var last = normalizedStack[0]; + + if (last && last.vnode === currentVNode) { + last.recurseCount++; + } else { + normalizedStack.push({ + vnode: currentVNode, + recurseCount: 0 + }); + } + + var parentInstance = currentVNode.component && currentVNode.component.parent; + currentVNode = parentInstance && parentInstance.vnode; + } + + return normalizedStack; +} +/* istanbul ignore next */ + + +function formatTrace(trace) { + var logs = []; + trace.forEach(function (entry, i) { + logs.push.apply(logs, _toConsumableArray(i === 0 ? [] : ["\n"]).concat(_toConsumableArray(formatTraceEntry(entry)))); + }); + return logs; +} + +function formatTraceEntry(_ref7) { + var vnode = _ref7.vnode, + recurseCount = _ref7.recurseCount; + var postfix = recurseCount > 0 ? "... (".concat(recurseCount, " recursive calls)") : ""; + var isRoot = vnode.component ? vnode.component.parent == null : false; + var open = " at <".concat(formatComponentName(vnode.component, vnode.type, isRoot)); + var close = ">" + postfix; + return vnode.props ? [open].concat(_toConsumableArray(formatProps(vnode.props)), [close]) : [open + close]; +} +/* istanbul ignore next */ + + +function formatProps(props) { + var res = []; + var keys = Object.keys(props); + keys.slice(0, 3).forEach(function (key) { + res.push.apply(res, _toConsumableArray(formatProp(key, props[key]))); + }); + + if (keys.length > 3) { + res.push(" ..."); + } + + return res; +} +/* istanbul ignore next */ + + +function formatProp(key, value, raw) { + if (isString(value)) { + value = JSON.stringify(value); + return raw ? value : ["".concat(key, "=").concat(value)]; + } else if (typeof value === 'number' || typeof value === 'boolean' || value == null) { + return raw ? value : ["".concat(key, "=").concat(value)]; + } else if (isRef(value)) { + value = formatProp(key, toRaw(value.value), true); + return raw ? value : ["".concat(key, "=Ref<"), value, ">"]; + } else if (isFunction(value)) { + return ["".concat(key, "=fn").concat(value.name ? "<".concat(value.name, ">") : "")]; + } else { + value = toRaw(value); + return raw ? value : ["".concat(key, "="), value]; + } +} + +var ErrorTypeStrings = (_ErrorTypeStrings = {}, _defineProperty(_ErrorTypeStrings, "bc" +/* BEFORE_CREATE */ +, 'beforeCreate hook'), _defineProperty(_ErrorTypeStrings, "c" +/* CREATED */ +, 'created hook'), _defineProperty(_ErrorTypeStrings, "bm" +/* BEFORE_MOUNT */ +, 'beforeMount hook'), _defineProperty(_ErrorTypeStrings, "m" +/* MOUNTED */ +, 'mounted hook'), _defineProperty(_ErrorTypeStrings, "bu" +/* BEFORE_UPDATE */ +, 'beforeUpdate hook'), _defineProperty(_ErrorTypeStrings, "u" +/* UPDATED */ +, 'updated'), _defineProperty(_ErrorTypeStrings, "bum" +/* BEFORE_UNMOUNT */ +, 'beforeUnmount hook'), _defineProperty(_ErrorTypeStrings, "um" +/* UNMOUNTED */ +, 'unmounted hook'), _defineProperty(_ErrorTypeStrings, "a" +/* ACTIVATED */ +, 'activated hook'), _defineProperty(_ErrorTypeStrings, "da" +/* DEACTIVATED */ +, 'deactivated hook'), _defineProperty(_ErrorTypeStrings, "ec" +/* ERROR_CAPTURED */ +, 'errorCaptured hook'), _defineProperty(_ErrorTypeStrings, "rtc" +/* RENDER_TRACKED */ +, 'renderTracked hook'), _defineProperty(_ErrorTypeStrings, "rtg" +/* RENDER_TRIGGERED */ +, 'renderTriggered hook'), _defineProperty(_ErrorTypeStrings, 0 +/* SETUP_FUNCTION */ +, 'setup function'), _defineProperty(_ErrorTypeStrings, 1 +/* RENDER_FUNCTION */ +, 'render function'), _defineProperty(_ErrorTypeStrings, 2 +/* WATCH_GETTER */ +, 'watcher getter'), _defineProperty(_ErrorTypeStrings, 3 +/* WATCH_CALLBACK */ +, 'watcher callback'), _defineProperty(_ErrorTypeStrings, 4 +/* WATCH_CLEANUP */ +, 'watcher cleanup function'), _defineProperty(_ErrorTypeStrings, 5 +/* NATIVE_EVENT_HANDLER */ +, 'native event handler'), _defineProperty(_ErrorTypeStrings, 6 +/* COMPONENT_EVENT_HANDLER */ +, 'component event handler'), _defineProperty(_ErrorTypeStrings, 7 +/* VNODE_HOOK */ +, 'vnode hook'), _defineProperty(_ErrorTypeStrings, 8 +/* DIRECTIVE_HOOK */ +, 'directive hook'), _defineProperty(_ErrorTypeStrings, 9 +/* TRANSITION_HOOK */ +, 'transition hook'), _defineProperty(_ErrorTypeStrings, 10 +/* APP_ERROR_HANDLER */ +, 'app errorHandler'), _defineProperty(_ErrorTypeStrings, 11 +/* APP_WARN_HANDLER */ +, 'app warnHandler'), _defineProperty(_ErrorTypeStrings, 12 +/* FUNCTION_REF */ +, 'ref function'), _defineProperty(_ErrorTypeStrings, 13 +/* ASYNC_COMPONENT_LOADER */ +, 'async component loader'), _defineProperty(_ErrorTypeStrings, 14 +/* SCHEDULER */ +, 'scheduler flush. This is likely a Vue internals bug. ' + 'Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next'), _ErrorTypeStrings); + +function callWithErrorHandling(fn, instance, type, args) { + var res; + + try { + res = args ? fn.apply(void 0, _toConsumableArray(args)) : fn(); + } catch (err) { + handleError(err, instance, type); + } + + return res; +} + +function callWithAsyncErrorHandling(fn, instance, type, args) { + if (isFunction(fn)) { + var res = callWithErrorHandling(fn, instance, type, args); + + if (res && isPromise(res)) { + res.catch(function (err) { + handleError(err, instance, type); + }); + } + + return res; + } + + var values = []; + + for (var i = 0; i < fn.length; i++) { + values.push(callWithAsyncErrorHandling(fn[i], instance, type, args)); + } + + return values; +} + +function handleError(err, instance, type) { + var throwInDev = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true; + var contextVNode = instance ? instance.vnode : null; + + if (instance) { + var cur = instance.parent; // the exposed instance is the render proxy to keep it consistent with 2.x + + var exposedInstance = instance.proxy; // in production the hook receives only the error code + + var errorInfo = ErrorTypeStrings[type]; + + while (cur) { + var errorCapturedHooks = cur.ec; + + if (errorCapturedHooks) { + for (var i = 0; i < errorCapturedHooks.length; i++) { + if (errorCapturedHooks[i](err, exposedInstance, errorInfo) === false) { + return; + } + } + } + + cur = cur.parent; + } // app-level handling + + + var appErrorHandler = instance.appContext.config.errorHandler; + + if (appErrorHandler) { + callWithErrorHandling(appErrorHandler, null, 10 + /* APP_ERROR_HANDLER */ + , [err, exposedInstance, errorInfo]); + return; + } + } + + logError(err, type, contextVNode, throwInDev); +} + +function logError(err, type, contextVNode) { + var throwInDev = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true; + { + var info = ErrorTypeStrings[type]; + + if (contextVNode) { + pushWarningContext(contextVNode); + } + + warn("Unhandled error".concat(info ? " during execution of ".concat(info) : "")); + + if (contextVNode) { + popWarningContext(); + } // crash in dev by default so it's more noticeable + + + if (throwInDev) { + throw err; + } else { + console.error(err); + } + } +} + +var isFlushing = false; +var isFlushPending = false; +var queue = []; +var flushIndex = 0; +var pendingPreFlushCbs = []; +var activePreFlushCbs = null; +var preFlushIndex = 0; +var pendingPostFlushCbs = []; +var activePostFlushCbs = null; +var postFlushIndex = 0; +var resolvedPromise = Promise.resolve(); +var currentFlushPromise = null; +var currentPreFlushParentJob = null; +var RECURSION_LIMIT = 100; + +function nextTick(fn) { + var p = currentFlushPromise || resolvedPromise; + return fn ? p.then(this ? fn.bind(this) : fn) : p; +} + +function queueJob(job) { + // the dedupe search uses the startIndex argument of Array.includes() + // by default the search index includes the current job that is being run + // so it cannot recursively trigger itself again. + // if the job is a watch() callback, the search will start with a +1 index to + // allow it recursively trigger itself - it is the user's responsibility to + // ensure it doesn't end up in an infinite loop. + if ((!queue.length || !queue.includes(job, isFlushing && job.allowRecurse ? flushIndex + 1 : flushIndex)) && job !== currentPreFlushParentJob) { + queue.push(job); + queueFlush(); + } +} + +function queueFlush() { + if (!isFlushing && !isFlushPending) { + isFlushPending = true; + currentFlushPromise = resolvedPromise.then(flushJobs); + } +} + +function invalidateJob(job) { + var i = queue.indexOf(job); + + if (i > -1) { + queue[i] = null; + } +} + +function queueCb(cb, activeQueue, pendingQueue, index) { + if (!isArray(cb)) { + if (!activeQueue || !activeQueue.includes(cb, cb.allowRecurse ? index + 1 : index)) { + pendingQueue.push(cb); + } + } else { + // if cb is an array, it is a component lifecycle hook which can only be + // triggered by a job, which is already deduped in the main queue, so + // we can skip duplicate check here to improve perf + pendingQueue.push.apply(pendingQueue, _toConsumableArray(cb)); + } + + queueFlush(); +} + +function queuePreFlushCb(cb) { + queueCb(cb, activePreFlushCbs, pendingPreFlushCbs, preFlushIndex); +} + +function queuePostFlushCb(cb) { + queueCb(cb, activePostFlushCbs, pendingPostFlushCbs, postFlushIndex); +} + +function flushPreFlushCbs(seen) { + var parentJob = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null; + + if (pendingPreFlushCbs.length) { + currentPreFlushParentJob = parentJob; + activePreFlushCbs = _toConsumableArray(new Set(pendingPreFlushCbs)); + pendingPreFlushCbs.length = 0; + { + seen = seen || new Map(); + } + + for (preFlushIndex = 0; preFlushIndex < activePreFlushCbs.length; preFlushIndex++) { + { + checkRecursiveUpdates(seen, activePreFlushCbs[preFlushIndex]); + } + activePreFlushCbs[preFlushIndex](); + } + + activePreFlushCbs = null; + preFlushIndex = 0; + currentPreFlushParentJob = null; // recursively flush until it drains + + flushPreFlushCbs(seen, parentJob); + } +} + +function flushPostFlushCbs(seen) { + if (pendingPostFlushCbs.length) { + var deduped = _toConsumableArray(new Set(pendingPostFlushCbs)); + + pendingPostFlushCbs.length = 0; // #1947 already has active queue, nested flushPostFlushCbs call + + if (activePostFlushCbs) { + var _activePostFlushCbs; + + (_activePostFlushCbs = activePostFlushCbs).push.apply(_activePostFlushCbs, _toConsumableArray(deduped)); + + return; + } + + activePostFlushCbs = deduped; + { + seen = seen || new Map(); + } + activePostFlushCbs.sort(function (a, b) { + return getId(a) - getId(b); + }); + + for (postFlushIndex = 0; postFlushIndex < activePostFlushCbs.length; postFlushIndex++) { + { + checkRecursiveUpdates(seen, activePostFlushCbs[postFlushIndex]); + } + activePostFlushCbs[postFlushIndex](); + } + + activePostFlushCbs = null; + postFlushIndex = 0; + } +} + +var getId = function getId(job) { + return job.id == null ? Infinity : job.id; +}; + +function flushJobs(seen) { + isFlushPending = false; + isFlushing = true; + { + seen = seen || new Map(); + } + flushPreFlushCbs(seen); // Sort queue before flush. + // This ensures that: + // 1. Components are updated from parent to child. (because parent is always + // created before the child so its render effect will have smaller + // priority number) + // 2. If a component is unmounted during a parent component's update, + // its update can be skipped. + // Jobs can never be null before flush starts, since they are only invalidated + // during execution of another flushed job. + + queue.sort(function (a, b) { + return getId(a) - getId(b); + }); + + try { + for (flushIndex = 0; flushIndex < queue.length; flushIndex++) { + var job = queue[flushIndex]; + + if (job) { + if (true) { + checkRecursiveUpdates(seen, job); + } + + callWithErrorHandling(job, null, 14 + /* SCHEDULER */ + ); + } + } + } finally { + flushIndex = 0; + queue.length = 0; + flushPostFlushCbs(seen); + isFlushing = false; + currentFlushPromise = null; // some postFlushCb queued jobs! + // keep flushing until it drains. + + if (queue.length || pendingPostFlushCbs.length) { + flushJobs(seen); + } + } +} + +function checkRecursiveUpdates(seen, fn) { + if (!seen.has(fn)) { + seen.set(fn, 1); + } else { + var count = seen.get(fn); + + if (count > RECURSION_LIMIT) { + throw new Error("Maximum recursive updates exceeded. " + "This means you have a reactive effect that is mutating its own " + "dependencies and thus recursively triggering itself. Possible sources " + "include component template, render function, updated hook or " + "watcher source function."); + } else { + seen.set(fn, count + 1); + } + } +} +/* eslint-disable no-restricted-globals */ + + +var isHmrUpdating = false; +var hmrDirtyComponents = new Set(); // Expose the HMR runtime on the global object +// This makes it entirely tree-shakable without polluting the exports and makes +// it easier to be used in toolings like vue-loader +// Note: for a component to be eligible for HMR it also needs the __hmrId option +// to be set so that its instances can be registered / removed. + +{ + var globalObject = typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : typeof window !== 'undefined' ? window : {}; + globalObject.__VUE_HMR_RUNTIME__ = { + createRecord: tryWrap(createRecord), + rerender: tryWrap(rerender), + reload: tryWrap(reload) + }; +} +var map = new Map(); + +function registerHMR(instance) { + var id = instance.type.__hmrId; + var record = map.get(id); + + if (!record) { + createRecord(id); + record = map.get(id); + } + + record.add(instance); +} + +function unregisterHMR(instance) { + map.get(instance.type.__hmrId).delete(instance); +} + +function createRecord(id) { + if (map.has(id)) { + return false; + } + + map.set(id, new Set()); + return true; +} + +function rerender(id, newRender) { + var record = map.get(id); + if (!record) return; // Array.from creates a snapshot which avoids the set being mutated during + // updates + + Array.from(record).forEach(function (instance) { + if (newRender) { + instance.render = newRender; + } + + instance.renderCache = []; // this flag forces child components with slot content to update + + isHmrUpdating = true; + instance.update(); + isHmrUpdating = false; + }); +} + +function reload(id, newComp) { + var record = map.get(id); + if (!record) return; // Array.from creates a snapshot which avoids the set being mutated during + // updates + + Array.from(record).forEach(function (instance) { + var comp = instance.type; + + if (!hmrDirtyComponents.has(comp)) { + // 1. Update existing comp definition to match new one + newComp = isClassComponent(newComp) ? newComp.__vccOpts : newComp; + extend(comp, newComp); + + for (var key in comp) { + if (!(key in newComp)) { + delete comp[key]; + } + } // 2. Mark component dirty. This forces the renderer to replace the component + // on patch. + + + hmrDirtyComponents.add(comp); // 3. Make sure to unmark the component after the reload. + + queuePostFlushCb(function () { + hmrDirtyComponents.delete(comp); + }); + } + + if (instance.parent) { + // 4. Force the parent instance to re-render. This will cause all updated + // components to be unmounted and re-mounted. Queue the update so that we + // don't end up forcing the same parent to re-render multiple times. + queueJob(instance.parent.update); + } else if (instance.appContext.reload) { + // root instance mounted via createApp() has a reload method + instance.appContext.reload(); + } else if (typeof window !== 'undefined') { + // root instance inside tree created via raw render(). Force reload. + window.location.reload(); + } else { + console.warn('[HMR] Root or manually mounted instance modified. Full reload required.'); + } + }); +} + +function tryWrap(fn) { + return function (id, arg) { + try { + return fn(id, arg); + } catch (e) { + console.error(e); + console.warn("[HMR] Something went wrong during Vue component hot-reload. " + "Full reload required."); + } + }; +} + +var devtools; + +function setDevtoolsHook(hook) { + devtools = hook; +} + +function devtoolsInitApp(app, version) { + // TODO queue if devtools is undefined + if (!devtools) return; + devtools.emit("app:init" + /* APP_INIT */ + , app, version, { + Fragment: Fragment, + Text: Text, + Comment: Comment, + Static: Static + }); +} + +function devtoolsUnmountApp(app) { + if (!devtools) return; + devtools.emit("app:unmount" + /* APP_UNMOUNT */ + , app); +} + +var devtoolsComponentAdded = /*#__PURE__*/createDevtoolsComponentHook("component:added" +/* COMPONENT_ADDED */ +); +var devtoolsComponentUpdated = /*#__PURE__*/createDevtoolsComponentHook("component:updated" +/* COMPONENT_UPDATED */ +); +var devtoolsComponentRemoved = /*#__PURE__*/createDevtoolsComponentHook("component:removed" +/* COMPONENT_REMOVED */ +); + +function createDevtoolsComponentHook(hook) { + return function (component) { + if (!devtools) return; + devtools.emit(hook, component.appContext.app, component.uid, component.parent ? component.parent.uid : undefined); + }; +} + +function devtoolsComponentEmit(component, event, params) { + if (!devtools) return; + devtools.emit("component:emit" + /* COMPONENT_EMIT */ + , component.appContext.app, component, event, params); +} + +function emit(instance, event) { + var props = instance.vnode.props || EMPTY_OBJ; + + for (var _len4 = arguments.length, rawArgs = new Array(_len4 > 2 ? _len4 - 2 : 0), _key5 = 2; _key5 < _len4; _key5++) { + rawArgs[_key5 - 2] = arguments[_key5]; + } + + { + var emitsOptions = instance.emitsOptions, + _instance$propsOption = _slicedToArray(instance.propsOptions, 1), + propsOptions = _instance$propsOption[0]; + + if (emitsOptions) { + if (!(event in emitsOptions)) { + if (!propsOptions || !(toHandlerKey(event) in propsOptions)) { + warn("Component emitted event \"".concat(event, "\" but it is neither declared in ") + "the emits option nor as an \"".concat(toHandlerKey(event), "\" prop.")); + } + } else { + var validator = emitsOptions[event]; + + if (isFunction(validator)) { + var isValid = validator.apply(void 0, rawArgs); + + if (!isValid) { + warn("Invalid event arguments: event validation failed for event \"".concat(event, "\".")); + } + } + } + } + } + var args = rawArgs; + var isModelListener = event.startsWith('update:'); // for v-model update:xxx events, apply modifiers on args + + var modelArg = isModelListener && event.slice(7); + + if (modelArg && modelArg in props) { + var modifiersKey = "".concat(modelArg === 'modelValue' ? 'model' : modelArg, "Modifiers"); + + var _ref8 = props[modifiersKey] || EMPTY_OBJ, + number = _ref8.number, + trim = _ref8.trim; + + if (trim) { + args = rawArgs.map(function (a) { + return a.trim(); + }); + } else if (number) { + args = rawArgs.map(toNumber); + } + } + + { + devtoolsComponentEmit(instance, event, args); + } + { + var lowerCaseEvent = event.toLowerCase(); + + if (lowerCaseEvent !== event && props[toHandlerKey(lowerCaseEvent)]) { + warn("Event \"".concat(lowerCaseEvent, "\" is emitted in component ") + "".concat(formatComponentName(instance, instance.type), " but the handler is registered for \"").concat(event, "\". ") + "Note that HTML attributes are case-insensitive and you cannot use " + "v-on to listen to camelCase events when using in-DOM templates. " + "You should probably use \"".concat(hyphenate(event), "\" instead of \"").concat(event, "\".")); + } + } // convert handler name to camelCase. See issue #2249 + + var handlerName = toHandlerKey(camelize(event)); + var handler = props[handlerName]; // for v-model update:xxx events, also trigger kebab-case equivalent + // for props passed via kebab-case + + if (!handler && isModelListener) { + handlerName = toHandlerKey(hyphenate(event)); + handler = props[handlerName]; + } + + if (handler) { + callWithAsyncErrorHandling(handler, instance, 6 + /* COMPONENT_EVENT_HANDLER */ + , args); + } + + var onceHandler = props[handlerName + "Once"]; + + if (onceHandler) { + if (!instance.emitted) { + (instance.emitted = {})[handlerName] = true; + } else if (instance.emitted[handlerName]) { + return; + } + + callWithAsyncErrorHandling(onceHandler, instance, 6 + /* COMPONENT_EVENT_HANDLER */ + , args); + } +} + +function normalizeEmitsOptions(comp, appContext) { + var asMixin = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false; + + if (!appContext.deopt && comp.__emits !== undefined) { + return comp.__emits; + } + + var raw = comp.emits; + var normalized = {}; // apply mixin/extends props + + var hasExtends = false; + + if (!isFunction(comp)) { + var extendEmits = function extendEmits(raw) { + hasExtends = true; + extend(normalized, normalizeEmitsOptions(raw, appContext, true)); + }; + + if (!asMixin && appContext.mixins.length) { + appContext.mixins.forEach(extendEmits); + } + + if (comp.extends) { + extendEmits(comp.extends); + } + + if (comp.mixins) { + comp.mixins.forEach(extendEmits); + } + } + + if (!raw && !hasExtends) { + return comp.__emits = null; + } + + if (isArray(raw)) { + raw.forEach(function (key) { + return normalized[key] = null; + }); + } else { + extend(normalized, raw); + } + + return comp.__emits = normalized; +} // Check if an incoming prop key is a declared emit event listener. +// e.g. With `emits: { click: null }`, props named `onClick` and `onclick` are +// both considered matched listeners. + + +function isEmitListener(options, key) { + if (!options || !isOn(key)) { + return false; + } + + key = key.replace(/Once$/, ''); + return hasOwn(options, key[2].toLowerCase() + key.slice(3)) || hasOwn(options, key.slice(2)); +} // mark the current rendering instance for asset resolution (e.g. +// resolveComponent, resolveDirective) during render + + +var currentRenderingInstance = null; + +function setCurrentRenderingInstance(instance) { + currentRenderingInstance = instance; +} // dev only flag to track whether $attrs was used during render. +// If $attrs was used during render then the warning for failed attrs +// fallthrough can be suppressed. + + +var accessedAttrs = false; + +function markAttrsAccessed() { + accessedAttrs = true; +} + +function renderComponentRoot(instance) { + var Component = instance.type, + vnode = instance.vnode, + proxy = instance.proxy, + withProxy = instance.withProxy, + props = instance.props, + _instance$propsOption2 = _slicedToArray(instance.propsOptions, 1), + propsOptions = _instance$propsOption2[0], + slots = instance.slots, + attrs = instance.attrs, + emit = instance.emit, + render = instance.render, + renderCache = instance.renderCache, + data = instance.data, + setupState = instance.setupState, + ctx = instance.ctx; + + var result; + currentRenderingInstance = instance; + { + accessedAttrs = false; + } + + try { + var fallthroughAttrs; + + if (vnode.shapeFlag & 4 + /* STATEFUL_COMPONENT */ + ) { + // withProxy is a proxy with a different `has` trap only for + // runtime-compiled render functions using `with` block. + var proxyToUse = withProxy || proxy; + result = normalizeVNode(render.call(proxyToUse, proxyToUse, renderCache, props, setupState, data, ctx)); + fallthroughAttrs = attrs; + } else { + // functional + var _render = Component; // in dev, mark attrs accessed if optional props (attrs === props) + + if (true && attrs === props) { + markAttrsAccessed(); + } + + result = normalizeVNode(_render.length > 1 ? _render(props, true ? { + get attrs() { + markAttrsAccessed(); + return attrs; + }, + + slots: slots, + emit: emit + } : { + attrs: attrs, + slots: slots, + emit: emit + }) : _render(props, null + /* we know it doesn't need it */ + )); + fallthroughAttrs = Component.props ? attrs : getFunctionalFallthrough(attrs); + } // attr merging + // in dev mode, comments are preserved, and it's possible for a template + // to have comments along side the root element which makes it a fragment + + + var root = result; + var setRoot = undefined; + + if (true) { + ; + + var _getChildRoot = getChildRoot(result); + + var _getChildRoot2 = _slicedToArray(_getChildRoot, 2); + + root = _getChildRoot2[0]; + setRoot = _getChildRoot2[1]; + } + + if (Component.inheritAttrs !== false && fallthroughAttrs) { + var keys = Object.keys(fallthroughAttrs); + var _root = root, + shapeFlag = _root.shapeFlag; + + if (keys.length) { + if (shapeFlag & 1 + /* ELEMENT */ + || shapeFlag & 6 + /* COMPONENT */ + ) { + if (propsOptions && keys.some(isModelListener)) { + // If a v-model listener (onUpdate:xxx) has a corresponding declared + // prop, it indicates this component expects to handle v-model and + // it should not fallthrough. + // related: #1543, #1643, #1989 + fallthroughAttrs = filterModelListeners(fallthroughAttrs, propsOptions); + } + + root = cloneVNode(root, fallthroughAttrs); + } else if (true && !accessedAttrs && root.type !== Comment) { + var allAttrs = Object.keys(attrs); + var eventAttrs = []; + var extraAttrs = []; + + for (var i = 0, l = allAttrs.length; i < l; i++) { + var key = allAttrs[i]; + + if (isOn(key)) { + // ignore v-model handlers when they fail to fallthrough + if (!isModelListener(key)) { + // remove `on`, lowercase first letter to reflect event casing + // accurately + eventAttrs.push(key[2].toLowerCase() + key.slice(3)); + } + } else { + extraAttrs.push(key); + } + } + + if (extraAttrs.length) { + warn("Extraneous non-props attributes (" + "".concat(extraAttrs.join(', '), ") ") + "were passed to component but could not be automatically inherited " + "because component renders fragment or text root nodes."); + } + + if (eventAttrs.length) { + warn("Extraneous non-emits event listeners (" + "".concat(eventAttrs.join(', '), ") ") + "were passed to component but could not be automatically inherited " + "because component renders fragment or text root nodes. " + "If the listener is intended to be a component custom event listener only, " + "declare it using the \"emits\" option."); + } + } + } + } // inherit directives + + + if (vnode.dirs) { + if (true && !isElementRoot(root)) { + warn("Runtime directive used on component with non-element root node. " + "The directives will not function as intended."); + } + + root.dirs = root.dirs ? root.dirs.concat(vnode.dirs) : vnode.dirs; + } // inherit transition data + + + if (vnode.transition) { + if (true && !isElementRoot(root)) { + warn("Component inside renders non-element root node " + "that cannot be animated."); + } + + root.transition = vnode.transition; + } + + if (true && setRoot) { + setRoot(root); + } else { + result = root; + } + } catch (err) { + handleError(err, instance, 1 + /* RENDER_FUNCTION */ + ); + result = createVNode(Comment); + } + + currentRenderingInstance = null; + return result; +} +/** + * dev only + * In dev mode, template root level comments are rendered, which turns the + * template into a fragment root, but we need to locate the single element + * root for attrs and scope id processing. + */ + + +var getChildRoot = function getChildRoot(vnode) { + if (vnode.type !== Fragment) { + return [vnode, undefined]; + } + + var rawChildren = vnode.children; + var dynamicChildren = vnode.dynamicChildren; + var childRoot = filterSingleRoot(rawChildren); + + if (!childRoot) { + return [vnode, undefined]; + } + + var index = rawChildren.indexOf(childRoot); + var dynamicIndex = dynamicChildren ? dynamicChildren.indexOf(childRoot) : -1; + + var setRoot = function setRoot(updatedRoot) { + rawChildren[index] = updatedRoot; + + if (dynamicChildren) { + if (dynamicIndex > -1) { + dynamicChildren[dynamicIndex] = updatedRoot; + } else if (updatedRoot.patchFlag > 0) { + vnode.dynamicChildren = [].concat(_toConsumableArray(dynamicChildren), [updatedRoot]); + } + } + }; + + return [normalizeVNode(childRoot), setRoot]; +}; +/** + * dev only + */ + + +function filterSingleRoot(children) { + var filtered = children.filter(function (child) { + return !(isVNode(child) && child.type === Comment && child.children !== 'v-if'); + }); + return filtered.length === 1 && isVNode(filtered[0]) ? filtered[0] : null; +} + +var getFunctionalFallthrough = function getFunctionalFallthrough(attrs) { + var res; + + for (var key in attrs) { + if (key === 'class' || key === 'style' || isOn(key)) { + (res || (res = {}))[key] = attrs[key]; + } + } + + return res; +}; + +var filterModelListeners = function filterModelListeners(attrs, props) { + var res = {}; + + for (var key in attrs) { + if (!isModelListener(key) || !(key.slice(9) in props)) { + res[key] = attrs[key]; + } + } + + return res; +}; + +var isElementRoot = function isElementRoot(vnode) { + return vnode.shapeFlag & 6 + /* COMPONENT */ + || vnode.shapeFlag & 1 + /* ELEMENT */ + || vnode.type === Comment // potential v-if branch switch + ; +}; + +function shouldUpdateComponent(prevVNode, nextVNode, optimized) { + var prevProps = prevVNode.props, + prevChildren = prevVNode.children, + component = prevVNode.component; + var nextProps = nextVNode.props, + nextChildren = nextVNode.children, + patchFlag = nextVNode.patchFlag; + var emits = component.emitsOptions; // Parent component's render function was hot-updated. Since this may have + // caused the child component's slots content to have changed, we need to + // force the child to update as well. + + if ((prevChildren || nextChildren) && isHmrUpdating) { + return true; + } // force child update for runtime directive or transition on component vnode. + + + if (nextVNode.dirs || nextVNode.transition) { + return true; + } + + if (optimized && patchFlag > 0) { + if (patchFlag & 1024 + /* DYNAMIC_SLOTS */ + ) { + // slot content that references values that might have changed, + // e.g. in a v-for + return true; + } + + if (patchFlag & 16 + /* FULL_PROPS */ + ) { + if (!prevProps) { + return !!nextProps; + } // presence of this flag indicates props are always non-null + + + return hasPropsChanged(prevProps, nextProps, emits); + } else if (patchFlag & 8 + /* PROPS */ + ) { + var dynamicProps = nextVNode.dynamicProps; + + for (var i = 0; i < dynamicProps.length; i++) { + var key = dynamicProps[i]; + + if (nextProps[key] !== prevProps[key] && !isEmitListener(emits, key)) { + return true; + } + } + } + } else { + // this path is only taken by manually written render functions + // so presence of any children leads to a forced update + if (prevChildren || nextChildren) { + if (!nextChildren || !nextChildren.$stable) { + return true; + } + } + + if (prevProps === nextProps) { + return false; + } + + if (!prevProps) { + return !!nextProps; + } + + if (!nextProps) { + return true; + } + + return hasPropsChanged(prevProps, nextProps, emits); + } + + return false; +} + +function hasPropsChanged(prevProps, nextProps, emitsOptions) { + var nextKeys = Object.keys(nextProps); + + if (nextKeys.length !== Object.keys(prevProps).length) { + return true; + } + + for (var i = 0; i < nextKeys.length; i++) { + var key = nextKeys[i]; + + if (nextProps[key] !== prevProps[key] && !isEmitListener(emitsOptions, key)) { + return true; + } + } + + return false; +} + +function updateHOCHostEl(_ref9, el // HostNode +) { + var vnode = _ref9.vnode, + parent = _ref9.parent; + + while (parent && parent.subTree === vnode) { + (vnode = parent.vnode).el = el; + parent = parent.parent; + } +} + +var isSuspense = function isSuspense(type) { + return type.__isSuspense; +}; // Suspense exposes a component-like API, and is treated like a component + +function normalizeSuspenseChildren(vnode) { + var shapeFlag = vnode.shapeFlag, + children = vnode.children; + var content; + var fallback; + + if (shapeFlag & 32 + /* SLOTS_CHILDREN */ + ) { + content = normalizeSuspenseSlot(children.default); + fallback = normalizeSuspenseSlot(children.fallback); + } else { + content = normalizeSuspenseSlot(children); + fallback = normalizeVNode(null); + } + + return { + content: content, + fallback: fallback + }; +} + +function normalizeSuspenseSlot(s) { + if (isFunction(s)) { + s = s(); + } + + if (isArray(s)) { + var singleChild = filterSingleRoot(s); + + if (!singleChild) { + warn(" slots expect a single root node."); + } + + s = singleChild; + } + + return normalizeVNode(s); +} + +function queueEffectWithSuspense(fn, suspense) { + if (suspense && suspense.pendingBranch) { + if (isArray(fn)) { + var _suspense$effects; + + (_suspense$effects = suspense.effects).push.apply(_suspense$effects, _toConsumableArray(fn)); + } else { + suspense.effects.push(fn); + } + } else { + queuePostFlushCb(fn); + } +} + +var isRenderingCompiledSlot = 0; + +var setCompiledSlotRendering = function setCompiledSlotRendering(n) { + return isRenderingCompiledSlot += n; +}; +/** + * Compiler runtime helper for rendering `` + * @private + */ + + +function renderSlot(slots, name) { + var props = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; + var // this is not a user-facing function, so the fallback is always generated by + // the compiler and guaranteed to be a function returning an array + fallback = arguments.length > 3 ? arguments[3] : undefined; + var slot = slots[name]; + + if (slot && slot.length > 1) { + warn("SSR-optimized slot function detected in a non-SSR-optimized render " + "function. You need to mark this component with $dynamic-slots in the " + "parent template."); + + slot = function slot() { + return []; + }; + } // a compiled slot disables block tracking by default to avoid manual + // invocation interfering with template-based block tracking, but in + // `renderSlot` we can be sure that it's template-based so we can force + // enable it. + + + isRenderingCompiledSlot++; + var rendered = (openBlock(), createBlock(Fragment, { + key: props.key + }, slot ? slot(props) : fallback ? fallback() : [], slots._ === 1 + /* STABLE */ + ? 64 + /* STABLE_FRAGMENT */ + : -2 + /* BAIL */ + )); + isRenderingCompiledSlot--; + return rendered; +} +/** + * Wrap a slot function to memoize current rendering instance + * @private + */ + + +function withCtx(fn) { + var ctx = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : currentRenderingInstance; + if (!ctx) return fn; + + var renderFnWithContext = function renderFnWithContext() { + // If a user calls a compiled slot inside a template expression (#1745), it + // can mess up block tracking, so by default we need to push a null block to + // avoid that. This isn't necessary if rendering a compiled ``. + if (!isRenderingCompiledSlot) { + openBlock(true + /* null block that disables tracking */ + ); + } + + var owner = currentRenderingInstance; + setCurrentRenderingInstance(ctx); + var res = fn.apply(void 0, arguments); + setCurrentRenderingInstance(owner); + + if (!isRenderingCompiledSlot) { + closeBlock(); + } + + return res; + }; + + renderFnWithContext._c = true; + return renderFnWithContext; +} // SFC scoped style ID management. + + +var currentScopeId = null; +var scopeIdStack = []; +/** + * @private + */ + +function pushScopeId(id) { + scopeIdStack.push(currentScopeId = id); +} +/** + * @private + */ + + +function popScopeId() { + scopeIdStack.pop(); + currentScopeId = scopeIdStack[scopeIdStack.length - 1] || null; +} +/** + * @private + */ + + +function withScopeId(id) { + return function (fn) { + return withCtx(function () { + pushScopeId(id); + var res = fn.apply(this, arguments); + popScopeId(); + return res; + }); + }; +} + +function initProps(instance, rawProps, isStateful) { + var isSSR = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false; + var props = {}; + var attrs = {}; + def(attrs, InternalObjectKey, 1); + setFullProps(instance, rawProps, props, attrs); // validation + + { + validateProps(props, instance); + } + + if (isStateful) { + // stateful + instance.props = isSSR ? props : shallowReactive(props); + } else { + if (!instance.type.props) { + // functional w/ optional props, props === attrs + instance.props = attrs; + } else { + // functional w/ declared props + instance.props = props; + } + } + + instance.attrs = attrs; +} + +function updateProps(instance, rawProps, rawPrevProps, optimized) { + var props = instance.props, + attrs = instance.attrs, + patchFlag = instance.vnode.patchFlag; + var rawCurrentProps = toRaw(props); + + var _instance$propsOption3 = _slicedToArray(instance.propsOptions, 1), + options = _instance$propsOption3[0]; + + if ( // always force full diff in dev + // - #1942 if hmr is enabled with sfc component + // - vite#872 non-sfc component used by sfc component + !(instance.type.__hmrId || instance.parent && instance.parent.type.__hmrId) && (optimized || patchFlag > 0) && !(patchFlag & 16 + /* FULL_PROPS */ + )) { + if (patchFlag & 8 + /* PROPS */ + ) { + // Compiler-generated props & no keys change, just set the updated + // the props. + var propsToUpdate = instance.vnode.dynamicProps; + + for (var i = 0; i < propsToUpdate.length; i++) { + var key = propsToUpdate[i]; // PROPS flag guarantees rawProps to be non-null + + var value = rawProps[key]; + + if (options) { + // attr / props separation was done on init and will be consistent + // in this code path, so just check if attrs have it. + if (hasOwn(attrs, key)) { + attrs[key] = value; + } else { + var camelizedKey = camelize(key); + props[camelizedKey] = resolvePropValue(options, rawCurrentProps, camelizedKey, value, instance); + } + } else { + attrs[key] = value; + } + } + } + } else { + // full props update. + setFullProps(instance, rawProps, props, attrs); // in case of dynamic props, check if we need to delete keys from + // the props object + + var kebabKey; + + for (var _key6 in rawCurrentProps) { + if (!rawProps || // for camelCase + !hasOwn(rawProps, _key6) && ( // it's possible the original props was passed in as kebab-case + // and converted to camelCase (#955) + (kebabKey = hyphenate(_key6)) === _key6 || !hasOwn(rawProps, kebabKey))) { + if (options) { + if (rawPrevProps && ( // for camelCase + rawPrevProps[_key6] !== undefined || // for kebab-case + rawPrevProps[kebabKey] !== undefined)) { + props[_key6] = resolvePropValue(options, rawProps || EMPTY_OBJ, _key6, undefined, instance); + } + } else { + delete props[_key6]; + } + } + } // in the case of functional component w/o props declaration, props and + // attrs point to the same object so it should already have been updated. + + + if (attrs !== rawCurrentProps) { + for (var _key7 in attrs) { + if (!rawProps || !hasOwn(rawProps, _key7)) { + delete attrs[_key7]; + } + } + } + } // trigger updates for $attrs in case it's used in component slots + + + trigger(instance, "set" + /* SET */ + , '$attrs'); + + if (rawProps) { + validateProps(props, instance); + } +} + +function setFullProps(instance, rawProps, props, attrs) { + var _instance$propsOption4 = _slicedToArray(instance.propsOptions, 2), + options = _instance$propsOption4[0], + needCastKeys = _instance$propsOption4[1]; + + if (rawProps) { + for (var key in rawProps) { + var value = rawProps[key]; // key, ref are reserved and never passed down + + if (isReservedProp(key)) { + continue; + } // prop option names are camelized during normalization, so to support + // kebab -> camel conversion here we need to camelize the key. + + + var camelKey = void 0; + + if (options && hasOwn(options, camelKey = camelize(key))) { + props[camelKey] = value; + } else if (!isEmitListener(instance.emitsOptions, key)) { + // Any non-declared (either as a prop or an emitted event) props are put + // into a separate `attrs` object for spreading. Make sure to preserve + // original key casing + attrs[key] = value; + } + } + } + + if (needCastKeys) { + var rawCurrentProps = toRaw(props); + + for (var i = 0; i < needCastKeys.length; i++) { + var _key8 = needCastKeys[i]; + props[_key8] = resolvePropValue(options, rawCurrentProps, _key8, rawCurrentProps[_key8], instance); + } + } +} + +function resolvePropValue(options, props, key, value, instance) { + var opt = options[key]; + + if (opt != null) { + var hasDefault = hasOwn(opt, 'default'); // default values + + if (hasDefault && value === undefined) { + var defaultValue = opt.default; + + if (opt.type !== Function && isFunction(defaultValue)) { + setCurrentInstance(instance); + value = defaultValue(props); + setCurrentInstance(null); + } else { + value = defaultValue; + } + } // boolean casting + + + if (opt[0 + /* shouldCast */ + ]) { + if (!hasOwn(props, key) && !hasDefault) { + value = false; + } else if (opt[1 + /* shouldCastTrue */ + ] && (value === '' || value === hyphenate(key))) { + value = true; + } + } + } + + return value; +} + +function normalizePropsOptions(comp, appContext) { + var asMixin = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false; + + if (!appContext.deopt && comp.__props) { + return comp.__props; + } + + var raw = comp.props; + var normalized = {}; + var needCastKeys = []; // apply mixin/extends props + + var hasExtends = false; + + if (!isFunction(comp)) { + var extendProps = function extendProps(raw) { + hasExtends = true; + + var _normalizePropsOption = normalizePropsOptions(raw, appContext, true), + _normalizePropsOption2 = _slicedToArray(_normalizePropsOption, 2), + props = _normalizePropsOption2[0], + keys = _normalizePropsOption2[1]; + + extend(normalized, props); + if (keys) needCastKeys.push.apply(needCastKeys, _toConsumableArray(keys)); + }; + + if (!asMixin && appContext.mixins.length) { + appContext.mixins.forEach(extendProps); + } + + if (comp.extends) { + extendProps(comp.extends); + } + + if (comp.mixins) { + comp.mixins.forEach(extendProps); + } + } + + if (!raw && !hasExtends) { + return comp.__props = EMPTY_ARR; + } + + if (isArray(raw)) { + for (var i = 0; i < raw.length; i++) { + if (!isString(raw[i])) { + warn("props must be strings when using array syntax.", raw[i]); + } + + var normalizedKey = camelize(raw[i]); + + if (validatePropName(normalizedKey)) { + normalized[normalizedKey] = EMPTY_OBJ; + } + } + } else if (raw) { + if (!isObject(raw)) { + warn("invalid props options", raw); + } + + for (var key in raw) { + var _normalizedKey = camelize(key); + + if (validatePropName(_normalizedKey)) { + var opt = raw[key]; + var prop = normalized[_normalizedKey] = isArray(opt) || isFunction(opt) ? { + type: opt + } : opt; + + if (prop) { + var booleanIndex = getTypeIndex(Boolean, prop.type); + var stringIndex = getTypeIndex(String, prop.type); + prop[0 + /* shouldCast */ + ] = booleanIndex > -1; + prop[1 + /* shouldCastTrue */ + ] = stringIndex < 0 || booleanIndex < stringIndex; // if the prop needs boolean casting or default value + + if (booleanIndex > -1 || hasOwn(prop, 'default')) { + needCastKeys.push(_normalizedKey); + } + } + } + } + } + + return comp.__props = [normalized, needCastKeys]; +} + +function validatePropName(key) { + if (key[0] !== '$') { + return true; + } else { + warn("Invalid prop name: \"".concat(key, "\" is a reserved property.")); + } + + return false; +} // use function string name to check type constructors +// so that it works across vms / iframes. + + +function getType(ctor) { + var match = ctor && ctor.toString().match(/^\s*function (\w+)/); + return match ? match[1] : ''; +} + +function isSameType(a, b) { + return getType(a) === getType(b); +} + +function getTypeIndex(type, expectedTypes) { + if (isArray(expectedTypes)) { + for (var i = 0, len = expectedTypes.length; i < len; i++) { + if (isSameType(expectedTypes[i], type)) { + return i; + } + } + } else if (isFunction(expectedTypes)) { + return isSameType(expectedTypes, type) ? 0 : -1; + } + + return -1; +} +/** + * dev only + */ + + +function validateProps(props, instance) { + var rawValues = toRaw(props); + var options = instance.propsOptions[0]; + + for (var key in options) { + var opt = options[key]; + if (opt == null) continue; + validateProp(key, rawValues[key], opt, !hasOwn(rawValues, key)); + } +} +/** + * dev only + */ + + +function validateProp(name, value, prop, isAbsent) { + var type = prop.type, + required = prop.required, + validator = prop.validator; // required! + + if (required && isAbsent) { + warn('Missing required prop: "' + name + '"'); + return; + } // missing but optional + + + if (value == null && !prop.required) { + return; + } // type check + + + if (type != null && type !== true) { + var isValid = false; + var types = isArray(type) ? type : [type]; + var expectedTypes = []; // value is valid as long as one of the specified types match + + for (var i = 0; i < types.length && !isValid; i++) { + var _assertType = assertType(value, types[i]), + valid = _assertType.valid, + expectedType = _assertType.expectedType; + + expectedTypes.push(expectedType || ''); + isValid = valid; + } + + if (!isValid) { + warn(getInvalidTypeMessage(name, value, expectedTypes)); + return; + } + } // custom validator + + + if (validator && !validator(value)) { + warn('Invalid prop: custom validator check failed for prop "' + name + '".'); + } +} + +var isSimpleType = /*#__PURE__*/makeMap('String,Number,Boolean,Function,Symbol'); +/** + * dev only + */ + +function assertType(value, type) { + var valid; + var expectedType = getType(type); + + if (isSimpleType(expectedType)) { + var t = _typeof(value); + + valid = t === expectedType.toLowerCase(); // for primitive wrapper objects + + if (!valid && t === 'object') { + valid = value instanceof type; + } + } else if (expectedType === 'Object') { + valid = isObject(value); + } else if (expectedType === 'Array') { + valid = isArray(value); + } else { + valid = value instanceof type; + } + + return { + valid: valid, + expectedType: expectedType + }; +} +/** + * dev only + */ + + +function getInvalidTypeMessage(name, value, expectedTypes) { + var message = "Invalid prop: type check failed for prop \"".concat(name, "\".") + " Expected ".concat(expectedTypes.map(capitalize).join(', ')); + var expectedType = expectedTypes[0]; + var receivedType = toRawType(value); + var expectedValue = styleValue(value, expectedType); + var receivedValue = styleValue(value, receivedType); // check if we need to specify expected value + + if (expectedTypes.length === 1 && isExplicable(expectedType) && !isBoolean(expectedType, receivedType)) { + message += " with value ".concat(expectedValue); + } + + message += ", got ".concat(receivedType, " "); // check if we need to specify received value + + if (isExplicable(receivedType)) { + message += "with value ".concat(receivedValue, "."); + } + + return message; +} +/** + * dev only + */ + + +function styleValue(value, type) { + if (type === 'String') { + return "\"".concat(value, "\""); + } else if (type === 'Number') { + return "".concat(Number(value)); + } else { + return "".concat(value); + } +} +/** + * dev only + */ + + +function isExplicable(type) { + var explicitTypes = ['string', 'number', 'boolean']; + return explicitTypes.some(function (elem) { + return type.toLowerCase() === elem; + }); +} +/** + * dev only + */ + + +function isBoolean() { + for (var _len5 = arguments.length, args = new Array(_len5), _key9 = 0; _key9 < _len5; _key9++) { + args[_key9] = arguments[_key9]; + } + + return args.some(function (elem) { + return elem.toLowerCase() === 'boolean'; + }); +} + +function injectHook(type, hook) { + var target = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : currentInstance; + var prepend = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false; + + if (target) { + var hooks = target[type] || (target[type] = []); // cache the error handling wrapper for injected hooks so the same hook + // can be properly deduped by the scheduler. "__weh" stands for "with error + // handling". + + var wrappedHook = hook.__weh || (hook.__weh = function () { + if (target.isUnmounted) { + return; + } // disable tracking inside all lifecycle hooks + // since they can potentially be called inside effects. + + + pauseTracking(); // Set currentInstance during hook invocation. + // This assumes the hook does not synchronously trigger other hooks, which + // can only be false when the user does something really funky. + + setCurrentInstance(target); + + for (var _len6 = arguments.length, args = new Array(_len6), _key10 = 0; _key10 < _len6; _key10++) { + args[_key10] = arguments[_key10]; + } + + var res = callWithAsyncErrorHandling(hook, target, type, args); + setCurrentInstance(null); + resetTracking(); + return res; + }); + + if (prepend) { + hooks.unshift(wrappedHook); + } else { + hooks.push(wrappedHook); + } + + return wrappedHook; + } else { + var apiName = toHandlerKey(ErrorTypeStrings[type].replace(/ hook$/, '')); + warn("".concat(apiName, " is called when there is no active component instance to be ") + "associated with. " + "Lifecycle injection APIs can only be used during execution of setup()." + (" If you are using async setup(), make sure to register lifecycle " + "hooks before the first await statement.")); + } +} + +var createHook = function createHook(lifecycle) { + return function (hook) { + var target = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : currentInstance; + return (// post-create lifecycle registrations are noops during SSR + !isInSSRComponentSetup && injectHook(lifecycle, hook, target) + ); + }; +}; + +var onBeforeMount = createHook("bm" +/* BEFORE_MOUNT */ +); +var onMounted = createHook("m" +/* MOUNTED */ +); +var onBeforeUpdate = createHook("bu" +/* BEFORE_UPDATE */ +); +var onUpdated = createHook("u" +/* UPDATED */ +); +var onBeforeUnmount = createHook("bum" +/* BEFORE_UNMOUNT */ +); +var onUnmounted = createHook("um" +/* UNMOUNTED */ +); +var onRenderTriggered = createHook("rtg" +/* RENDER_TRIGGERED */ +); +var onRenderTracked = createHook("rtc" +/* RENDER_TRACKED */ +); + +var onErrorCaptured = function onErrorCaptured(hook) { + var target = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : currentInstance; + injectHook("ec" + /* ERROR_CAPTURED */ + , hook, target); +}; // Simple effect. + + +var INITIAL_WATCHER_VALUE = {}; // implementation + +function watch(source, cb, options) { + if (!isFunction(cb)) { + warn("`watch(fn, options?)` signature has been moved to a separate API. " + "Use `watchEffect(fn, options?)` instead. `watch` now only " + "supports `watch(source, cb, options?) signature."); + } + + return doWatch(source, cb, options); +} + +function doWatch(source, cb) { + var _ref11 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : EMPTY_OBJ, + immediate = _ref11.immediate, + deep = _ref11.deep, + flush = _ref11.flush, + onTrack = _ref11.onTrack, + onTrigger = _ref11.onTrigger; + + var instance = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : currentInstance; + + if (!cb) { + if (immediate !== undefined) { + warn("watch() \"immediate\" option is only respected when using the " + "watch(source, callback, options?) signature."); + } + + if (deep !== undefined) { + warn("watch() \"deep\" option is only respected when using the " + "watch(source, callback, options?) signature."); + } + } + + var warnInvalidSource = function warnInvalidSource(s) { + warn("Invalid watch source: ", s, "A watch source can only be a getter/effect function, a ref, " + "a reactive object, or an array of these types."); + }; + + var getter; + var forceTrigger = false; + + if (isRef(source)) { + getter = function getter() { + return source.value; + }; + + forceTrigger = !!source._shallow; + } else if (isReactive(source)) { + getter = function getter() { + return source; + }; + + deep = true; + } else if (isArray(source)) { + getter = function getter() { + return source.map(function (s) { + if (isRef(s)) { + return s.value; + } else if (isReactive(s)) { + return traverse(s); + } else if (isFunction(s)) { + return callWithErrorHandling(s, instance, 2 + /* WATCH_GETTER */ + ); + } else { + warnInvalidSource(s); + } + }); + }; + } else if (isFunction(source)) { + if (cb) { + // getter with cb + getter = function getter() { + return callWithErrorHandling(source, instance, 2 + /* WATCH_GETTER */ + ); + }; + } else { + // no cb -> simple effect + getter = function getter() { + if (instance && instance.isUnmounted) { + return; + } + + if (cleanup) { + cleanup(); + } + + return callWithErrorHandling(source, instance, 3 + /* WATCH_CALLBACK */ + , [onInvalidate]); + }; + } + } else { + getter = NOOP; + warnInvalidSource(source); + } + + if (cb && deep) { + var baseGetter = getter; + + getter = function getter() { + return traverse(baseGetter()); + }; + } + + var cleanup; + + var onInvalidate = function onInvalidate(fn) { + cleanup = runner.options.onStop = function () { + callWithErrorHandling(fn, instance, 4 + /* WATCH_CLEANUP */ + ); + }; + }; + + var oldValue = isArray(source) ? [] : INITIAL_WATCHER_VALUE; + + var job = function job() { + if (!runner.active) { + return; + } + + if (cb) { + // watch(source, cb) + var newValue = runner(); + + if (deep || forceTrigger || hasChanged(newValue, oldValue)) { + // cleanup before running cb again + if (cleanup) { + cleanup(); + } + + callWithAsyncErrorHandling(cb, instance, 3 + /* WATCH_CALLBACK */ + , [newValue, // pass undefined as the old value when it's changed for the first time + oldValue === INITIAL_WATCHER_VALUE ? undefined : oldValue, onInvalidate]); + oldValue = newValue; + } + } else { + // watchEffect + runner(); + } + }; // important: mark the job as a watcher callback so that scheduler knows + // it is allowed to self-trigger (#1727) + + + job.allowRecurse = !!cb; + var scheduler; + + if (flush === 'sync') { + scheduler = job; + } else if (flush === 'post') { + scheduler = function scheduler() { + return queuePostRenderEffect(job, instance && instance.suspense); + }; + } else { + // default: 'pre' + scheduler = function scheduler() { + if (!instance || instance.isMounted) { + queuePreFlushCb(job); + } else { + // with 'pre' option, the first call must happen before + // the component is mounted so it is called synchronously. + job(); + } + }; + } + + var runner = effect(getter, { + lazy: true, + onTrack: onTrack, + onTrigger: onTrigger, + scheduler: scheduler + }); + recordInstanceBoundEffect(runner); // initial run + + if (cb) { + if (immediate) { + job(); + } else { + oldValue = runner(); + } + } else if (flush === 'post') { + queuePostRenderEffect(runner, instance && instance.suspense); + } else { + runner(); + } + + return function () { + stop(runner); + + if (instance) { + remove(instance.effects, runner); + } + }; +} // this.$watch + + +function instanceWatch(source, cb, options) { + var publicThis = this.proxy; + var getter = isString(source) ? function () { + return publicThis[source]; + } : source.bind(publicThis); + return doWatch(getter, cb.bind(publicThis), options, this); +} + +function traverse(value) { + var seen = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : new Set(); + + if (!isObject(value) || seen.has(value)) { + return value; + } + + seen.add(value); + + if (isRef(value)) { + traverse(value.value, seen); + } else if (isArray(value)) { + for (var i = 0; i < value.length; i++) { + traverse(value[i], seen); + } + } else if (isSet(value) || isMap(value)) { + value.forEach(function (v) { + traverse(v, seen); + }); + } else { + for (var key in value) { + traverse(value[key], seen); + } + } + + return value; +} + +var isKeepAlive = function isKeepAlive(vnode) { + return vnode.type.__isKeepAlive; +}; + +function onActivated(hook, target) { + registerKeepAliveHook(hook, "a" + /* ACTIVATED */ + , target); +} + +function onDeactivated(hook, target) { + registerKeepAliveHook(hook, "da" + /* DEACTIVATED */ + , target); +} + +function registerKeepAliveHook(hook, type) { + var target = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : currentInstance; + + // cache the deactivate branch check wrapper for injected hooks so the same + // hook can be properly deduped by the scheduler. "__wdc" stands for "with + // deactivation check". + var wrappedHook = hook.__wdc || (hook.__wdc = function () { + // only fire the hook if the target instance is NOT in a deactivated branch. + var current = target; + + while (current) { + if (current.isDeactivated) { + return; + } + + current = current.parent; + } + + hook(); + }); + + injectHook(type, wrappedHook, target); // In addition to registering it on the target instance, we walk up the parent + // chain and register it on all ancestor instances that are keep-alive roots. + // This avoids the need to walk the entire component tree when invoking these + // hooks, and more importantly, avoids the need to track child components in + // arrays. + + if (target) { + var current = target.parent; + + while (current && current.parent) { + if (isKeepAlive(current.parent.vnode)) { + injectToKeepAliveRoot(wrappedHook, type, target, current); + } + + current = current.parent; + } + } +} + +function injectToKeepAliveRoot(hook, type, target, keepAliveRoot) { + // injectHook wraps the original for error handling, so make sure to remove + // the wrapped version. + var injected = injectHook(type, hook, keepAliveRoot, true + /* prepend */ + ); + onUnmounted(function () { + remove(keepAliveRoot[type], injected); + }, target); +} + +var isInternalKey = function isInternalKey(key) { + return key[0] === '_' || key === '$stable'; +}; + +var normalizeSlotValue = function normalizeSlotValue(value) { + return isArray(value) ? value.map(normalizeVNode) : [normalizeVNode(value)]; +}; + +var normalizeSlot = function normalizeSlot(key, rawSlot, ctx) { + return withCtx(function (props) { + if (currentInstance) { + warn("Slot \"".concat(key, "\" invoked outside of the render function: ") + "this will not track dependencies used in the slot. " + "Invoke the slot function inside the render function instead."); + } + + return normalizeSlotValue(rawSlot(props)); + }, ctx); +}; + +var normalizeObjectSlots = function normalizeObjectSlots(rawSlots, slots) { + var ctx = rawSlots._ctx; + + for (var key in rawSlots) { + if (isInternalKey(key)) continue; + var value = rawSlots[key]; + + if (isFunction(value)) { + slots[key] = normalizeSlot(key, value, ctx); + } else if (value != null) { + (function () { + { + warn("Non-function value encountered for slot \"".concat(key, "\". ") + "Prefer function slots for better performance."); + } + var normalized = normalizeSlotValue(value); + + slots[key] = function () { + return normalized; + }; + })(); + } + } +}; + +var normalizeVNodeSlots = function normalizeVNodeSlots(instance, children) { + if (!isKeepAlive(instance.vnode)) { + warn("Non-function value encountered for default slot. " + "Prefer function slots for better performance."); + } + + var normalized = normalizeSlotValue(children); + + instance.slots.default = function () { + return normalized; + }; +}; + +var initSlots = function initSlots(instance, children) { + if (instance.vnode.shapeFlag & 32 + /* SLOTS_CHILDREN */ + ) { + var type = children._; + + if (type) { + instance.slots = children; // make compiler marker non-enumerable + + def(children, '_', type); + } else { + normalizeObjectSlots(children, instance.slots = {}); + } + } else { + instance.slots = {}; + + if (children) { + normalizeVNodeSlots(instance, children); + } + } + + def(instance.slots, InternalObjectKey, 1); +}; + +var updateSlots = function updateSlots(instance, children) { + var vnode = instance.vnode, + slots = instance.slots; + var needDeletionCheck = true; + var deletionComparisonTarget = EMPTY_OBJ; + + if (vnode.shapeFlag & 32 + /* SLOTS_CHILDREN */ + ) { + var type = children._; + + if (type) { + // compiled slots. + if (isHmrUpdating) { + // Parent was HMR updated so slot content may have changed. + // force update slots and mark instance for hmr as well + extend(slots, children); + } else if (type === 1 + /* STABLE */ + ) { + // compiled AND stable. + // no need to update, and skip stale slots removal. + needDeletionCheck = false; + } else { + // compiled but dynamic (v-if/v-for on slots) - update slots, but skip + // normalization. + extend(slots, children); + } + } else { + needDeletionCheck = !children.$stable; + normalizeObjectSlots(children, slots); + } + + deletionComparisonTarget = children; + } else if (children) { + // non slot object children (direct value) passed to a component + normalizeVNodeSlots(instance, children); + deletionComparisonTarget = { + default: 1 + }; + } // delete stale slots + + + if (needDeletionCheck) { + for (var key in slots) { + if (!isInternalKey(key) && !(key in deletionComparisonTarget)) { + delete slots[key]; + } + } + } +}; +/** +Runtime helper for applying directives to a vnode. Example usage: + +const comp = resolveComponent('comp') +const foo = resolveDirective('foo') +const bar = resolveDirective('bar') + +return withDirectives(h(comp), [ + [foo, this.x], + [bar, this.y] +]) +*/ + + +var isBuiltInDirective = /*#__PURE__*/makeMap('bind,cloak,else-if,else,for,html,if,model,on,once,pre,show,slot,text'); + +function validateDirectiveName(name) { + if (isBuiltInDirective(name)) { + warn('Do not use built-in directive ids as custom directive id: ' + name); + } +} +/** + * Adds directives to a VNode. + */ + + +function withDirectives(vnode, directives) { + var internalInstance = currentRenderingInstance; + + if (internalInstance === null) { + warn("withDirectives can only be used inside render functions."); + return vnode; + } + + var instance = internalInstance.proxy; + var bindings = vnode.dirs || (vnode.dirs = []); + + for (var i = 0; i < directives.length; i++) { + var _directives$i = _slicedToArray(directives[i], 4), + dir = _directives$i[0], + value = _directives$i[1], + arg = _directives$i[2], + _directives$i$ = _directives$i[3], + modifiers = _directives$i$ === void 0 ? EMPTY_OBJ : _directives$i$; + + if (isFunction(dir)) { + dir = { + mounted: dir, + updated: dir + }; + } + + bindings.push({ + dir: dir, + instance: instance, + value: value, + oldValue: void 0, + arg: arg, + modifiers: modifiers + }); + } + + return vnode; +} + +function invokeDirectiveHook(vnode, prevVNode, instance, name) { + var bindings = vnode.dirs; + var oldBindings = prevVNode && prevVNode.dirs; + + for (var i = 0; i < bindings.length; i++) { + var binding = bindings[i]; + + if (oldBindings) { + binding.oldValue = oldBindings[i].value; + } + + var hook = binding.dir[name]; + + if (hook) { + callWithAsyncErrorHandling(hook, instance, 8 + /* DIRECTIVE_HOOK */ + , [vnode.el, binding, vnode, prevVNode]); + } + } +} + +function createAppContext() { + return { + app: null, + config: { + isNativeTag: NO, + performance: false, + globalProperties: {}, + optionMergeStrategies: {}, + isCustomElement: NO, + errorHandler: undefined, + warnHandler: undefined + }, + mixins: [], + components: {}, + directives: {}, + provides: Object.create(null) + }; +} + +var uid$1 = 0; + +function createAppAPI(render, hydrate) { + return function createApp(rootComponent) { + var rootProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null; + + if (rootProps != null && !isObject(rootProps)) { + warn("root props passed to app.mount() must be an object."); + rootProps = null; + } + + var context = createAppContext(); + var installedPlugins = new Set(); + var isMounted = false; + var app = context.app = { + _uid: uid$1++, + _component: rootComponent, + _props: rootProps, + _container: null, + _context: context, + version: version, + + get config() { + return context.config; + }, + + set config(v) { + { + warn("app.config cannot be replaced. Modify individual options instead."); + } + }, + + use: function use(plugin) { + for (var _len7 = arguments.length, options = new Array(_len7 > 1 ? _len7 - 1 : 0), _key11 = 1; _key11 < _len7; _key11++) { + options[_key11 - 1] = arguments[_key11]; + } + + if (installedPlugins.has(plugin)) { + warn("Plugin has already been applied to target app."); + } else if (plugin && isFunction(plugin.install)) { + installedPlugins.add(plugin); + plugin.install.apply(plugin, [app].concat(options)); + } else if (isFunction(plugin)) { + installedPlugins.add(plugin); + plugin.apply(void 0, [app].concat(options)); + } else { + warn("A plugin must either be a function or an object with an \"install\" " + "function."); + } + + return app; + }, + mixin: function mixin(_mixin) { + { + if (!context.mixins.includes(_mixin)) { + context.mixins.push(_mixin); // global mixin with props/emits de-optimizes props/emits + // normalization caching. + + if (_mixin.props || _mixin.emits) { + context.deopt = true; + } + } else { + warn('Mixin has already been applied to target app' + (_mixin.name ? ": ".concat(_mixin.name) : '')); + } + } + return app; + }, + component: function component(name, _component) { + { + validateComponentName(name, context.config); + } + + if (!_component) { + return context.components[name]; + } + + if (context.components[name]) { + warn("Component \"".concat(name, "\" has already been registered in target app.")); + } + + context.components[name] = _component; + return app; + }, + directive: function directive(name, _directive) { + { + validateDirectiveName(name); + } + + if (!_directive) { + return context.directives[name]; + } + + if (context.directives[name]) { + warn("Directive \"".concat(name, "\" has already been registered in target app.")); + } + + context.directives[name] = _directive; + return app; + }, + mount: function mount(rootContainer, isHydrate) { + if (!isMounted) { + var vnode = createVNode(rootComponent, rootProps); // store app context on the root VNode. + // this will be set on the root instance on initial mount. + + vnode.appContext = context; // HMR root reload + + { + context.reload = function () { + render(cloneVNode(vnode), rootContainer); + }; + } + + if (isHydrate && hydrate) { + hydrate(vnode, rootContainer); + } else { + render(vnode, rootContainer); + } + + isMounted = true; + app._container = rootContainer; + rootContainer.__vue_app__ = app; + { + devtoolsInitApp(app, version); + } + return vnode.component.proxy; + } else { + warn("App has already been mounted.\n" + "If you want to remount the same app, move your app creation logic " + "into a factory function and create fresh app instances for each " + "mount - e.g. `const createMyApp = () => createApp(App)`"); + } + }, + unmount: function unmount() { + if (isMounted) { + render(null, app._container); + { + devtoolsUnmountApp(app); + } + } else { + warn("Cannot unmount an app that is not mounted."); + } + }, + provide: function provide(key, value) { + if (key in context.provides) { + warn("App already provides property with key \"".concat(String(key), "\". ") + "It will be overwritten with the new value."); + } // TypeScript doesn't allow symbols as index type + // https://github.com/Microsoft/TypeScript/issues/24587 + + + context.provides[key] = value; + return app; + } + }; + return app; + }; +} + +var supported; +var perf; + +function startMeasure(instance, type) { + if (instance.appContext.config.performance && isSupported()) { + perf.mark("vue-".concat(type, "-").concat(instance.uid)); + } +} + +function endMeasure(instance, type) { + if (instance.appContext.config.performance && isSupported()) { + var startTag = "vue-".concat(type, "-").concat(instance.uid); + var endTag = startTag + ":end"; + perf.mark(endTag); + perf.measure("<".concat(formatComponentName(instance, instance.type), "> ").concat(type), startTag, endTag); + perf.clearMarks(startTag); + perf.clearMarks(endTag); + } +} + +function isSupported() { + if (supported !== undefined) { + return supported; + } + /* eslint-disable no-restricted-globals */ + + + if (typeof window !== 'undefined' && window.performance) { + supported = true; + perf = window.performance; + } else { + supported = false; + } + /* eslint-enable no-restricted-globals */ + + + return supported; +} + +function createDevEffectOptions(instance) { + return { + scheduler: queueJob, + allowRecurse: true, + onTrack: instance.rtc ? function (e) { + return invokeArrayFns(instance.rtc, e); + } : void 0, + onTrigger: instance.rtg ? function (e) { + return invokeArrayFns(instance.rtg, e); + } : void 0 + }; +} + +var queuePostRenderEffect = queueEffectWithSuspense; + +var setRef = function setRef(rawRef, oldRawRef, parentComponent, parentSuspense, vnode) { + if (isArray(rawRef)) { + rawRef.forEach(function (r, i) { + return setRef(r, oldRawRef && (isArray(oldRawRef) ? oldRawRef[i] : oldRawRef), parentComponent, parentSuspense, vnode); + }); + return; + } + + var value; + + if (!vnode) { + value = null; + } else { + if (vnode.shapeFlag & 4 + /* STATEFUL_COMPONENT */ + ) { + value = vnode.component.proxy; + } else { + value = vnode.el; + } + } + + var owner = rawRef.i, + ref = rawRef.r; + + if (!owner) { + warn("Missing ref owner context. ref cannot be used on hoisted vnodes. " + "A vnode with ref must be created inside the render function."); + return; + } + + var oldRef = oldRawRef && oldRawRef.r; + var refs = owner.refs === EMPTY_OBJ ? owner.refs = {} : owner.refs; + var setupState = owner.setupState; // unset old ref + + if (oldRef != null && oldRef !== ref) { + if (isString(oldRef)) { + refs[oldRef] = null; + + if (hasOwn(setupState, oldRef)) { + setupState[oldRef] = null; + } + } else if (isRef(oldRef)) { + oldRef.value = null; + } + } + + if (isString(ref)) { + var doSet = function doSet() { + refs[ref] = value; + + if (hasOwn(setupState, ref)) { + setupState[ref] = value; + } + }; // #1789: for non-null values, set them after render + // null values means this is unmount and it should not overwrite another + // ref with the same key + + + if (value) { + doSet.id = -1; + queuePostRenderEffect(doSet, parentSuspense); + } else { + doSet(); + } + } else if (isRef(ref)) { + var _doSet = function _doSet() { + ref.value = value; + }; + + if (value) { + _doSet.id = -1; + queuePostRenderEffect(_doSet, parentSuspense); + } else { + _doSet(); + } + } else if (isFunction(ref)) { + callWithErrorHandling(ref, parentComponent, 12 + /* FUNCTION_REF */ + , [value, refs]); + } else { + warn('Invalid template ref type:', value, "(".concat(_typeof(value), ")")); + } +}; +/** + * The createRenderer function accepts two generic arguments: + * HostNode and HostElement, corresponding to Node and Element types in the + * host environment. For example, for runtime-dom, HostNode would be the DOM + * `Node` interface and HostElement would be the DOM `Element` interface. + * + * Custom renderers can pass in the platform specific types like this: + * + * ``` js + * const { render, createApp } = createRenderer({ + * patchProp, + * ...nodeOps + * }) + * ``` + */ + + +function createRenderer(options) { + return baseCreateRenderer(options); +} // Separate API for creating hydration-enabled renderer. + + +function baseCreateRenderer(options, createHydrationFns) { + var hostInsert = options.insert, + hostRemove = options.remove, + hostPatchProp = options.patchProp, + hostForcePatchProp = options.forcePatchProp, + hostCreateElement = options.createElement, + hostCreateText = options.createText, + hostCreateComment = options.createComment, + hostSetText = options.setText, + hostSetElementText = options.setElementText, + hostParentNode = options.parentNode, + hostNextSibling = options.nextSibling, + _options$setScopeId = options.setScopeId, + hostSetScopeId = _options$setScopeId === void 0 ? NOOP : _options$setScopeId, + hostCloneNode = options.cloneNode, + hostInsertStaticContent = options.insertStaticContent; // Note: functions inside this closure should use `const xxx = () => {}` + // style in order to prevent being inlined by minifiers. + + var patch = function patch(n1, n2, container) { + var anchor = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null; + var parentComponent = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null; + var parentSuspense = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : null; + var isSVG = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false; + var optimized = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : false; + + // patching & not same type, unmount old tree + if (n1 && !isSameVNodeType(n1, n2)) { + anchor = getNextHostNode(n1); + unmount(n1, parentComponent, parentSuspense, true); + n1 = null; + } + + if (n2.patchFlag === -2 + /* BAIL */ + ) { + optimized = false; + n2.dynamicChildren = null; + } + + var type = n2.type, + ref = n2.ref, + shapeFlag = n2.shapeFlag; + + switch (type) { + case Text: + processText(n1, n2, container, anchor); + break; + + case Comment: + processCommentNode(n1, n2, container, anchor); + break; + + case Static: + if (n1 == null) { + mountStaticNode(n2, container, anchor, isSVG); + } else { + patchStaticNode(n1, n2, container, isSVG); + } + + break; + + case Fragment: + processFragment(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized); + break; + + default: + if (shapeFlag & 1 + /* ELEMENT */ + ) { + processElement(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized); + } else if (shapeFlag & 6 + /* COMPONENT */ + ) { + processComponent(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized); + } else if (shapeFlag & 64 + /* TELEPORT */ + ) { + type.process(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized, internals); + } else if (shapeFlag & 128 + /* SUSPENSE */ + ) { + type.process(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized, internals); + } else { + warn('Invalid VNode type:', type, "(".concat(_typeof(type), ")")); + } + + } // set ref + + + if (ref != null && parentComponent) { + setRef(ref, n1 && n1.ref, parentComponent, parentSuspense, n2); + } + }; + + var processText = function processText(n1, n2, container, anchor) { + if (n1 == null) { + hostInsert(n2.el = hostCreateText(n2.children), container, anchor); + } else { + var el = n2.el = n1.el; + + if (n2.children !== n1.children) { + hostSetText(el, n2.children); + } + } + }; + + var processCommentNode = function processCommentNode(n1, n2, container, anchor) { + if (n1 == null) { + hostInsert(n2.el = hostCreateComment(n2.children || ''), container, anchor); + } else { + // there's no support for dynamic comments + n2.el = n1.el; + } + }; + + var mountStaticNode = function mountStaticNode(n2, container, anchor, isSVG) { + var _hostInsertStaticCont = hostInsertStaticContent(n2.children, container, anchor, isSVG); + + var _hostInsertStaticCont2 = _slicedToArray(_hostInsertStaticCont, 2); + + n2.el = _hostInsertStaticCont2[0]; + n2.anchor = _hostInsertStaticCont2[1]; + }; + /** + * Dev / HMR only + */ + + + var patchStaticNode = function patchStaticNode(n1, n2, container, isSVG) { + // static nodes are only patched during dev for HMR + if (n2.children !== n1.children) { + var anchor = hostNextSibling(n1.anchor); // remove existing + + removeStaticNode(n1); + + var _hostInsertStaticCont3 = hostInsertStaticContent(n2.children, container, anchor, isSVG); + + var _hostInsertStaticCont4 = _slicedToArray(_hostInsertStaticCont3, 2); + + n2.el = _hostInsertStaticCont4[0]; + n2.anchor = _hostInsertStaticCont4[1]; + } else { + n2.el = n1.el; + n2.anchor = n1.anchor; + } + }; + /** + * Dev / HMR only + */ + + + var moveStaticNode = function moveStaticNode(vnode, container, anchor) { + var cur = vnode.el; + var end = vnode.anchor; + + while (cur && cur !== end) { + var next = hostNextSibling(cur); + hostInsert(cur, container, anchor); + cur = next; + } + + hostInsert(end, container, anchor); + }; + /** + * Dev / HMR only + */ + + + var removeStaticNode = function removeStaticNode(vnode) { + var cur = vnode.el; + + while (cur && cur !== vnode.anchor) { + var next = hostNextSibling(cur); + hostRemove(cur); + cur = next; + } + + hostRemove(vnode.anchor); + }; + + var processElement = function processElement(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) { + isSVG = isSVG || n2.type === 'svg'; + + if (n1 == null) { + mountElement(n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized); + } else { + patchElement(n1, n2, parentComponent, parentSuspense, isSVG, optimized); + } + }; + + var mountElement = function mountElement(vnode, container, anchor, parentComponent, parentSuspense, isSVG, optimized) { + var el; + var vnodeHook; + var type = vnode.type, + props = vnode.props, + shapeFlag = vnode.shapeFlag, + transition = vnode.transition, + scopeId = vnode.scopeId, + patchFlag = vnode.patchFlag, + dirs = vnode.dirs; + { + el = vnode.el = hostCreateElement(vnode.type, isSVG, props && props.is); // mount children first, since some props may rely on child content + // being already rendered, e.g. `