[
  {
    "path": ".github/workflows/docs-autobuild.yml",
    "content": "name: Documentation release\n\non:\n  push:\n    branches: [master]\n    paths:\n      - 'docs/**'\n      - 'package.json'\n  workflow_dispatch:\n\njobs:\n  build_documentation:\n    runs-on: ubuntu-latest\n\n    steps:\n      - uses: actions/checkout@v3\n      - uses: actions/setup-node@v3\n        with:\n          node-version: 18\n\n      - name: Build documentation\n        run: |\n          npm ci\n          npm run build:docs\n\n      - name: Initialize repo with docs\n        run: git init ./docs/.vitepress/dist\n\n      - name: Commit updated docs\n        run: |\n          git config user.name \"${{ github.actor }}\"\n          git config user.email \"${{ github.actor }}@users.noreply.github.com\"\n          git add -A\n          git commit -m \"Updated docs from ${{ github.sha }}\"\n          git push --verbose -f \"https://${{ github.actor }}:${{ secrets.GITHUB_TOKEN }}@github.com/${{ github.repository }}.git\" master:gh-pages\n        working-directory: ./docs/.vitepress/dist\n"
  },
  {
    "path": ".github/workflows/formatting-check.yml",
    "content": "name: Verify the code\non:\n  pull_request:\n\njobs:\n  verify-formatting:\n    name: Check formatting\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v3\n      - uses: actions/setup-node@v3\n        with:\n          mode-version: 18\n          cache: npm\n      - run: npm ci\n      - run: npx prettier --check .\n"
  },
  {
    "path": ".github/workflows/npm-publish.yml",
    "content": "# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created\n# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages\n\nname: Node.js Package\n\non:\n  release:\n    types: [created]\n  workflow_dispatch:\n\njobs:\n  publish-npm:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v3\n      - uses: actions/setup-node@v3\n        with:\n          node-version: 18\n          registry-url: https://registry.npmjs.org/\n      - run: npm ci\n      - run: rm -rf dist/\n      - run: npm run build:component\n      - run: npm publish\n        env:\n          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}\n"
  },
  {
    "path": ".gitignore",
    "content": "node_modules\n.DS_Store\n.idea\ndist\n*.local\n**/.vitepress/cache\n"
  },
  {
    "path": ".prettierignore",
    "content": "**/dist\n**/.vitepress/cache"
  },
  {
    "path": ".prettierrc",
    "content": "{\n  \"semi\": false,\n  \"singleQuote\": true,\n  \"vueIndentScriptAndStyle\": false,\n  \"tabWidth\": 2\n}\n"
  },
  {
    "path": "LICENSE",
    "content": "MIT License\n\nCopyright (c) 2020 Ilia Borovitinov\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "# Vue 3 Datepicker\n\nDocumentation: https://icehaunter.github.io/vue3-datepicker/\n\nThis is a basic (at least for now) reimplementation of https://github.com/icehaunter/vuejs-datepicker in Vue 3 and with greatly cleaned up code.\n\nAll date manipulation and formatting are done via the amazing [`date-fns`](https://date-fns.org/) library, so it's a direct dependency of this picker.\n\n## Installation\n\nPackage is available on NPM: https://www.npmjs.com/package/vue3-datepicker\n\n```sh\nnpm i vue3-datepicker\n```\n\nThe component is packaged mainly for use with bundlers, if you require a browser build - post an issue.\n\n## Usage\n\nFor more examples see https://icehaunter.github.io/vue3-datepicker/examples.html\n\n```vue\n<template>\n  <datepicker\n    v-model=\"selected\"\n    :locale=\"locale\"\n    :upperLimit=\"to\"\n    :lowerLimit=\"from\"\n    :clearable=\"true\"\n  />\n</template>\n```\n\n## Props and attributes\n\nAttribute fallthrough is enabled, so any attribute you apply to the component will be passed down to the input.\n\nAll props which accept formatting strings for dates use [`date-fns` formatting function](https://date-fns.org/docs/format) under the hood, so see that function's documentation for patterns.\n\nMain interaction to date selection is done via `v-model` with `Date` as expected type of the value passed.\n\nFull props documentation is available at https://icehaunter.github.io/vue3-datepicker/config.html#props\n\n| ID                       | Type                                                     | Default              | Description                                                                                                                                |\n| ------------------------ | -------------------------------------------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| `upperLimit`             | `Date`                                                   |                      | Upper limit for available dates for picking                                                                                                |\n| `lowerLimit`             | `Date`                                                   |                      | Lower limit for available dates for picking                                                                                                |\n| `startingViewDate`       | `Date`                                                   | `() => new Date()`   | Date on which to focus when empty datepicker is opened. Default is \"right now\"                                                             |\n| `disabledDates`          | `{ dates: Date[] }`                                      |                      | Dates not available for picking                                                                                                            |\n| `disabledTime`           | `{ dates: Date[] }`                                      |                      | Dates not available for time picking                                                                                                       |\n| `startingView`           | `'time' \\| 'day' \\| 'month' \\| 'year'`                   | `'day'`              | View on which the date picker should open. Can be either `year`, `month`, or `day`                                                         |\n| `minimumView`            | `'time' \\| 'day' \\| 'month' \\| 'year'`                   | `'day'`              | If set, lower-level views won't show                                                                                                       |\n| `dayPickerHeadingFormat` | `String`                                                 | `LLLL yyyy`          | `date-fns`-type formatting for a day view heading                                                                                          |\n| `dayFormat`              | `String`                                                 | `dd`                 | `date-fns`-type formatting for each day on the day view                                                                                    |\n| `weekdayFormat`          | `String`                                                 | `EE`                 | `date-fns`-type formatting for a line of weekdays on day view                                                                              |\n| `inputFormat`            | `String`                                                 | `yyyy-MM-dd`         | `date-fns`-type format in which the string in the input should be both parsed and displayed                                                |\n| `locale`                 | [`Locale`](https://date-fns.org/v2.16.1/docs/I18n#usage) | `date-fns/locale/en` | [`date-fns` locale object](https://date-fns.org/v2.16.1/docs/I18n#usage). Used in string formatting (see default `dayPickerHeadingFormat`) |\n| `disabled`               | `Boolean`                                                | `false`              | Disables datepicker and prevents it's opening                                                                                              |\n| `typeable`               | `Boolean`                                                | `false`              | Allows user to input date manually                                                                                                         |\n| `weekStartsOn`           | `Number`                                                 | 1                    | Day on which the week should start. Number from 0 to 6, where 0 is Sunday and 6 is Saturday. Week starts with a Monday (1) by default      |\n| `clearable`              | `Boolean`                                                | `false`              | Allows clearing the selected date and setting the value to `null`                                                                          |\n| `allowOutsideInterval`   | `Boolean`                                                | `false`              | Allows user to click dates outside of current interval                                                                                     |\n\n### Events\n\n- `opened`: Emitted every time the popup opens, including on field focus\n- `closed`: Emitted every time the popup closes, including on field blur\n- `decadePageChanged`: Emitted when a page is changed on the year picker view, displaying a different decade. Has a date that is included in the shown decade as an argument.\n- `yearPageChanged`: Emitted when a page is changed on the month picker view, displaying a different year. Has a date that is included in the shown year as an argument.\n- `monthPageChanged`: Emitted when a page is changed on the day picker view, displaying a different month. Has a date that is included in the shown month as an argument.\n\n## Compatibility\n\nPackage is transpiled and should be usable for everyone with ES6 and above, but the styling of the datepicker itself uses CSS Grid and CSS variables.\n\n## Example\n\n```vue\n<template>\n  <datepicker v-model=\"picked\" />\n</template>\n\n<script>\nimport Datepicker from '../src/datepicker/Datepicker.vue'\ncomponents: {\n  Datepicker\n},\ndata(): {\n  return {\n    picked: new Date();\n  }\n}\n</script>\n```\n"
  },
  {
    "path": "docs/.vitepress/config.js",
    "content": "module.exports = {\n  title: 'Vue 3 Datepicker',\n  description: 'Datepicker component suitable for Vue 3',\n  base: '/vue3-datepicker/',\n  themeConfig: {\n    nav: [\n      { text: 'Getting Started', link: '/' },\n      { text: 'Configuration', link: '/config' },\n      { text: 'Examples', link: '/examples' },\n    ],\n    editLink: {\n      pattern:\n        'https://github.com/icehaunter/vue3-datepicker/edit/master/docs/:path',\n      text: 'Edit this page on Github',\n    },\n    socialLinks: [\n      { icon: 'github', link: 'https://github.com/icehaunter/vue3-datepicker' },\n    ],\n  },\n}\n"
  },
  {
    "path": "docs/.vitepress/theme/custom.css",
    "content": ".vp-doc input[type='text'] {\n  border: 1px solid lightgray;\n  padding: 4px 8px;\n}\n"
  },
  {
    "path": "docs/.vitepress/theme/index.js",
    "content": "import DefaultTheme from 'vitepress/theme'\nimport './custom.css'\n\nexport default DefaultTheme\n"
  },
  {
    "path": "docs/config.md",
    "content": "# Configuration\n\n## Props\n\n### `v-model`\n\n- Type: `Date`\n- Required: yes\n\nThe actual date that will be selected. The component behaves as close to Vue 3 documentation on custom component inputs as possible, using `modelValue` prop and `update:modelValue` event pair. Use those if you want to have more control over your model binding.\n\n### `upperLimit`\n\n- Type: `Date`\n- Required: no\n\nUpper limit (not inclusive) for available dates for picking. All dates above that limit will not be selectable.\n\n### `lowerLimit`\n\n- Type: `Date`\n- Required: no\n\nLower limit (not inclusive) for available dates for picking. All dates below that limit will not be selectable.\n\n## `startingViewDate`\n\n- Type: `Date`\n- Default: `new Date()` (right now)\n\nWhen opening the empty datepicker, this date will be \"focused\": the month of this date will be shown on the day picker view, the year of this date will be shown in the month picker view, and the decade of this date will be shown in the year picker view.\n\n### `disabledDates`\n\n- Type: `{ dates: Date[], predicate: (target: Date) => boolean }`\n- Required: no\n\nAll dates listed in the `dates` array will not be selectable. Can also take in a function via the `predicate` key, which\ntests each date in the current view of the calendar, returning `true` if date should be disabled.\n\n### `disabledTime`\n\n- Type: `{ dates: Date[], predicate: (target: Date) => boolean }`\n- Required: no\n\nAll dates listed in the `dates` array will not be selectable in the timepicker view. Can also take in a function via the `predicate` key, which\ntests each date in the timepicker view, returning `true` if date should be disabled.\n\n### `startingView`\n\n- Type: `'time' | 'day' | 'month' | 'year'`\n- Default: `'day'`\n\nView on which the date picker should open. Can be either `year`, `month`, `day` or `time`. If `startingView` is `time` and `minimumView` is `time` then only view of the calendar `time` will be available.\n\n### `dayPickerHeadingFormat`\n\n- Type: `String` (date-fns [format string](https://date-fns.org/docs/format))\n- Default: `LLLL yyyy`\n\n`date-fns`-type formatting for a day view heading. By default prints full month as text and selected year (e.g. January 2021).\n\n### `weekdayFormat`\n\n- Type: `String` (date-fns [format string](https://date-fns.org/docs/format))\n- Default: `EE`\n\n`date-fns`-type formatting for a line of weekdays on day view. By default uses three-letter representation (e.g. Fri).\n\n### `dayFormat`\n\n- Type: `String` (date-fns [format string](https://date-fns.org/docs/format))\n- Default: `dd`\n\n`date-fns`-type formatting for the day picker view.\n\n### `inputFormat`\n\n- Type: `String` (date-fns [format string](https://date-fns.org/docs/format))\n- Default: `yyyy-MM-dd`\n\n`date-fns`-type format in which the string in the input should be both parsed and displayed. By default uses ISO format (e.g. 2021-01-01).\n\n### `locale`\n\n- Type: `Locale` [`date-fns` locale object](https://date-fns.org/v2.16.1/docs/I18n#usage)\n- Default: `date-fns/locale/en`\n\nUsed in all date string formatting (e.g. see default `dayPickerHeadingFormat`)\n\n### `weekStartsOn`\n\n- Type: `0 | 1 | 2 | 3 | 4 | 5 | 6`\n- Default: `1`\n\nDay on which the week should start. Number from 0 to 6, where 0 is Sunday and 6 is Saturday. Week starts with a Monday (1) by default.\n\n### `clearable`\n\n- Type: `Boolean`\n- Default: `false`\n\nAllows clearing the selected date and setting the value to `null`\n\n### `disabled`\n\n- Type: `Boolean`\n- Default: `false`\n\nDisables datepicker and prevents it's opening\n\n### `typeable`\n\n- Type: `Boolean`\n- Default: `false`\n\nAllows user to input date manually\n\n### `allowOutsideInterval`\n\n- Type: `Boolean`\n- Default: `false`\n\nAllows user to click dates outside of current interval.\n\n## Styling\n\nThe input itself can be styled via passing classes to it. [Attribute fallthrough](https://v3.vuejs.org/guide/component-attrs.html#disabling-attribute-inheritance) is enabled. Keep in mind that input itself is not a top-level element, as it is contained within the top-level `div`.\n\n:::warning\nHeavy restyling via variables has not been tested, as I am mostly using this component as-is. If you find any issues while adjusting the colors (e.g. some colors don't change or a setting is missing) please [file an issue on GitHub](https://github.com/icehaunter/vue3-datepicker/issues).\n:::\n\n### Variables\n\nStyle can be altered significantly without editing CSS files of the components. This is done via CSS variables. Following variables are available:\n\n| Variable name                      | Default value  | Type   |\n| ---------------------------------- | -------------- | ------ |\n| `--vdp-bg-color`                   | `#fff`         | color  |\n| `--vdp-text-color`                 | `#000`         | color  |\n| `--vdp-box-shadow`                 | See source     | shadow |\n| `--vdp-border-radius`              | `3px`          | size   |\n| `--vdp-heading-size`               | `2.5em`        | size   |\n| `--vdp-heading-weight`             | `bold`         | weight |\n| `--vdp-heading-hover-color`        | `#eeeeee`      | color  |\n| `--vdp-arrow-color`                | `currentColor` | color  |\n| `--vdp-elem-color`                 | `currentColor` | color  |\n| `--vdp-disabled-color`             | `#d5d9e0`      | color  |\n| `--vdp-hover-color`                | `#fff`         | color  |\n| `--vdp-hover-bg-color`             | `#0baf74`      | color  |\n| `--vdp-selected-color`             | `#fff`         | color  |\n| `--vdp-selected-bg-color`          | `#0baf74`      | color  |\n| `--vdp-current-date-outline-color` | `#888888`      | color  |\n| `--vdp-current-date-font-weight`   | `bold`         | weight |\n| `--vdp-elem-font-size`             | `0.8em`        | size   |\n| `--vdp-elem-border-radius`         | `3px`          | size   |\n| `--vdp-divider-color`              | `#d5d9e0`      | color  |\n\n### Styling example and playground\n\n:::tip\nNote that variables affect only the datepicker popup. If you want to change styles for the input, just pass it in the `:style` prop or use classes.\n:::\n\n<script setup>\nimport Datepicker from '../src/datepicker/Datepicker.vue'\nimport { ref, reactive, computed } from 'vue'\nconst picked = ref(new Date())\n\nconst variables = reactive({\n  '--vdp-bg-color': { value: '#ffffff', type: 'color' },\n  '--vdp-text-color': { value: '#000000', type: 'color' },\n  '--vdp-box-shadow': { value: '0 4px 10px 0 rgba(128, 144, 160, 0.1), 0 0 1px 0 rgba(128, 144, 160, 0.81)', type: 'shadow' },\n  '--vdp-border-radius': { value: '3px', type: 'size' },\n  '--vdp-heading-size': { value: '2.5em', type: 'size' },\n  '--vdp-heading-weight': { value: 'bold', type: 'weight' },\n  '--vdp-heading-hover-color': { value: '#eeeeee', type: 'color' },\n  '--vdp-arrow-color': { value: 'currentColor', type: 'color' },\n  '--vdp-elem-color': { value: 'currentColor', type: 'color' },\n  '--vdp-disabled-color': { value: '#d5d9e0', type: 'color' },\n  '--vdp-hover-color': { value: '#ffffff', type: 'color' },\n  '--vdp-hover-bg-color': { value: '#0baf74', type: 'color' },\n  '--vdp-selected-color': { value: '#ffffff', type: 'color' },\n  '--vdp-selected-bg-color': { value: '#0baf74', type: 'color' },\n  '--vdp-current-date-outline-color': { value: '#888888', type: 'color'},\n  '--vdp-current-date-font-weight': { value: 'bold', type: 'weight'},\n  '--vdp-elem-font-size': { value: '0.8em', type: 'size' },\n  '--vdp-elem-border-radius': { value: '3px', type: 'size' },\n  '--vdp-divider-color': { value: '#d5d9e0', type: 'color' },\n})\n\nconst styleObj = computed(() =>\n  Object.entries(variables)\n    .map(([k, { value }]) => [k, value])\n    .reduce((acc, [k, v]) => {\n      acc[k] = v\n      return acc\n    }, {})\n)\n</script>\n\n<br />\n<Datepicker :style=\"{...styleObj, padding: '4px'}\" v-model=\"picked\" />\n\n<table>\n<tr v-for=\"(value, variable) in variables\" :key=\"variable\">\n<td>\n<code>{{ variable }}</code>\n</td>\n<td v-if=\"value.type === 'color'\">\n  <label><code>currentColor</code> <input type=\"checkbox\" v-model=\"value.value\" true-value=\"currentColor\" false-value=\"#000000\"></label>\n  &nbsp;\n\n  <input v-if=\"value.value !== 'currentColor'\" type=\"color\" v-model=\"value.value\" />\n</td>\n<td v-else>\n  <input type=\"text\" v-model=\"value.value\">\n</td>\n</tr>\n</table>\n\n<details>\n  <summary>Copy serialized object with these settings</summary>\n  \n  <div class=\"language-json\">\n    <pre><code>{{ styleObj }}</code></pre>\n  </div>\n</details>\n"
  },
  {
    "path": "docs/examples.md",
    "content": "<script setup>\nimport Datepicker from '../src/datepicker/Datepicker.vue'\nimport { ref } from 'vue'\nimport { add } from 'date-fns'\n\n// Ex 1\nconst picked = ref(new Date())\n\nconst typeable = ref(null)\n\n// Ex 2\nconst example2 = ref(new Date())\nconst example2_from = ref(add(new Date(), { days: -7 }))\nconst example2_to = ref(add(new Date(), { days: 7 }))\n\n// Disabled dates example\nconst pickedDate = ref(new Date())\nconst disabledDate = ref(add(new Date(), { days: 1 }))\n\n// Ex 3\nconst example3 = ref(new Date())\nconst startingView = ref('day')\n\n// Ex 4\nconst example4 = ref(new Date())\nconst minimumView = ref('day')\n\n</script>\n\n# Examples\n\n## Styling\n\nFor styling examples, see [Configuration section](/config#styling-example-and-playground).\n\n## Basic usage\n\n<Datepicker v-model=\"picked\" />\n\n<details>\n  <summary>Code for this example</summary>\n  \n  ```vue\n  <script setup>\n  import Datepicker from '../src/datepicker/Datepicker.vue'\n  import { ref } from 'vue'\n  const picked = ref(new Date())\n\n  </script>\n\n  <template>\n    <Datepicker v-model=\"picked\" />\n  </template>\n  ```\n</details>\n\n## Typeable input\n\n<Datepicker v-model=\"typeable\" typeable  inputFormat=\"yyyy-MM-d\" />\n\n<details>\n  <summary>Code for this example</summary>\n  \n  ```vue\n  <script setup>\n  import Datepicker from '../src/datepicker/Datepicker.vue'\n  import { ref } from 'vue'\n  const picked = ref(new Date())\n\n  </script>\n\n  <template>\n    <Datepicker v-model=\"typeable\" typeable />\n  </template>\n  ```\n</details>\n\n## Upper and lower limits\n\n:::tip\nIf limit is within the current \"view\" (e.g. a month), then view changing will be prohibited.\n:::\n\nSettings:\n\n- Lower limit: <datepicker v-model=\"example2_from\" />\n- Upper limit: <datepicker v-model=\"example2_to\" />\n\nResult:\n\n<Datepicker v-model=\"example2\" :upper-limit=\"example2_to\" :lower-limit=\"example2_from\" />\n\n<details>\n  <summary>Code for this example</summary>\n  \n  ```vue\n  <script setup>\n  import Datepicker from '../src/datepicker/Datepicker.vue'\n  import { ref } from 'vue'\n  const example2 = ref(new Date())\n  const example2_from = ref(new Date())\n  const example2_to = ref(new Date())\n\n  </script>\n\n  <template>\n    <Datepicker\n      v-model=\"example2\"\n      :upper-limit=\"example2_to\"\n      :lower-limit=\"example2_from\"\n    />\n  </template>\n  ```\n</details>\n\n## Disabled dates\n\nSettings:\n\n- Disabled date: <Datepicker v-model=\"disabledDate\" />\n\nResult:\n\n<Datepicker v-model=\"pickedDate\" :disabledDates=\"{ dates: [disabledDate] }\" />\n\n<details>\n  <summary>Code for this example</summary>\n  \n  ```vue\n  <script setup>\n  import Datepicker from '../src/datepicker/Datepicker.vue'\n  import { ref } from 'vue'\n  import { add } from 'date-fns'\n  const pickedDate = ref(new Date())\n  const disabledDate = ref(add(new Date(), { days: 1 }))\n  </script>\n\n  <template>\n    <Datepicker\n      v-model=\"pickedDate\"\n      :disabledDates=\"{ dates: [disabledDate] }\"\n    />\n  </template>\n  ```\n</details>\n\n## Starting view\n\nSettings:\n\n- <label>Starting view: <code>time</code> <input type=\"radio\" v-model=\"startingView\" value=\"time\"></label>\n- <label>Starting view: <code>day</code> <input type=\"radio\" v-model=\"startingView\" value=\"day\"></label>\n- <label>Starting view: <code>month</code> <input type=\"radio\" v-model=\"startingView\" value=\"month\"></label>\n- <label>Starting view: <code>year</code> <input type=\"radio\" v-model=\"startingView\" value=\"year\"></label>\n\nResult:\n<Datepicker v-model=\"example3\" :starting-view=\"startingView\" :minimum-view=\"startingView === 'time' ? 'time' : 'day'\" :inputFormat=\"startingView === 'time' ? 'yyyy-MM-dd HH:mm' : 'yyyy-MM-dd'\" />\n\n## Mininimal view\n\nSettings:\n\n- <label>Minimum view: <code>time</code> <input type=\"radio\" v-model=\"minimumView\" value=\"time\"></label>\n- <label>Minimum view: <code>day</code> <input type=\"radio\" v-model=\"minimumView\" value=\"day\"></label>\n- <label>Minimum view: <code>month</code> <input type=\"radio\" v-model=\"minimumView\" value=\"month\"></label>\n- <label>Minimum view: <code>year</code> <input type=\"radio\" v-model=\"minimumView\" value=\"year\"></label>\n\nResult:\n<Datepicker v-model=\"example4\" :minimum-view=\"minimumView\" :inputFormat=\"minimumView === 'time' ? 'yyyy-MM-dd HH:mm' : 'yyyy-MM-dd'\" />\n\n## Clearable\n\n<Datepicker v-model=\"pickedDate\" :clearable=\"true\" />\n\n<details>\n  <summary>Code for this example</summary>\n\n```vue\n<script setup>\nimport Datepicker from '../src/datepicker/Datepicker.vue'\nimport { ref } from 'vue'\nconst pickedDate = ref(new Date())\n</script>\n\n<template>\n  <Datepicker v-model=\"pickedDate\" :clearable=\"true\" />\n</template>\n```\n\n</details>\n\n:::tip\nWe can customize clearable view with `slot` for example:\n:::\n\n<Datepicker v-model=\"pickedDate\" :clearable=\"true\" placeholder=\"placeholder\">\n  <template v-slot:clear=\"{ onClear }\">\n    <button @click=\"onClear\" style=\"color: red\">x</button>\n  </template>\n</Datepicker>\n\n<details>\n  <summary>Code for this example</summary>\n\n```vue\n<script setup>\nimport Datepicker from '../src/datepicker/Datepicker.vue'\nimport { ref } from 'vue'\nconst pickedDate = ref(new Date())\n</script>\n\n<template>\n  <Datepicker v-model=\"pickedDate\" :clearable=\"true\" placeholder=\"placeholder\">\n    <template v-slot:clear=\"{ onClear }\">\n      <button @click=\"onClear\" style=\"color: red\">x</button>\n    </template>\n  </Datepicker>\n</template>\n```\n\n</details>\n"
  },
  {
    "path": "docs/index.md",
    "content": "<script setup>\nimport Datepicker from '../src/datepicker/Datepicker.vue'\nimport { ref } from 'vue'\nconst picked = ref(new Date())\n\n</script>\n\n# Introduction\n\nThis is a reimplementation of [vuejs-datepicker](https://github.com/icehaunter/vuejs-datepicker) in Vue 3 and with greatly cleaned up code.\n\nAll date manipulation and formatting are done via the amazing [`date-fns`](https://date-fns.org/) library, so it's a direct dependency of this picker.\n\n## Example\n\nDatepicker comes with styling, but input itself does not. Attributes fall through to the `input` element, so you can use classes and styles as you would on any input.\n\n<Datepicker v-model=\"picked\" />\n\n## Installation\n\nPackage is available on NPM: [![npm](https://img.shields.io/npm/v/vue3-datepicker)](https://www.npmjs.com/package/vue3-datepicker)\n\n```sh\nnpm i vue3-datepicker\n```\n\nThen import it in your code and use as a usual component:\n\n```vue\n<script setup>\nimport Datepicker from 'vue3-datepicker'\nimport { ref } from 'vue'\nconst picked = ref(new Date())\n</script>\n\n<template>\n  <Datepicker v-model=\"picked\" />\n</template>\n```\n\n## Compatibility\n\nPackage is transpiled and should be usable for everyone with ES6 and above, but the styling of the datepicker itself uses CSS Grid and CSS variables.\n\nPackage uses typescript and ships with TS declarations for its components.\n\n## Props and attributes\n\nAttribute fallthrough is enabled, so any attribute you apply to the component will be passed down to the input.\n\nAll props which accept formatting strings for dates use [`date-fns` formatting function](https://date-fns.org/docs/format) under the hood, so see that function's documentation for patterns.\n\nMain interaction to date selection is done via `v-model` with `Date` as expected type of the value passed.\n\nMore in-depth documentation of the props, as well as examples, can be found in [Configuration](/config)\n\n| ID                       | Type                                                     | Default              | Description                                                                                                                                |\n| ------------------------ | -------------------------------------------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| `upperLimit`             | `Date`                                                   |                      | Upper limit for available dates for picking                                                                                                |\n| `lowerLimit`             | `Date`                                                   |                      | Lower limit for available dates for picking                                                                                                |\n| `startingViewDate`       | `Date`                                                   | `() => new Date()`   | Date on which to focus when empty datepicker is opened. Default is \"right now\"                                                             |\n| `disabledDates`          | `{ dates: Date[] }`                                      |                      | Dates not available for picking                                                                                                            |\n| `disabledTime`           | `{ dates: Date[] }`                                      |                      | Dates not available for time picking                                                                                                       |\n| `startingView`           | `'time' \\| `'day' \\| 'month' \\| 'year'`                  | `'day'`              | View on which the date picker should open. Can be either `year`, `month`, or `day`                                                         |\n| `minimumView`            | `'time' \\| `'day' \\| 'month' \\| 'year'`                  | `'day'`              | If set, lower-level views won't show                                                                                                       |\n| `dayPickerHeadingFormat` | `String`                                                 | `LLLL yyyy`          | `date-fns`-type formatting for a day view heading                                                                                          |\n| `dayFormat`              | `String`                                                 | `dd`                 | `date-fns`-type formatting for each day on the day view                                                                                    |\n| `weekdayFormat`          | `String`                                                 | `EE`                 | `date-fns`-type formatting for a line of weekdays on day view                                                                              |\n| `inputFormat`            | `String`                                                 | `yyyy-MM-dd`         | `date-fns`-type format in which the string in the input should be both parsed and displayed                                                |\n| `locale`                 | [`Locale`](https://date-fns.org/v2.16.1/docs/I18n#usage) | `date-fns/locale/en` | [`date-fns` locale object](https://date-fns.org/v2.16.1/docs/I18n#usage). Used in string formatting (see default `dayPickerHeadingFormat`) |\n| `disabled`               | `Boolean`                                                | `false`              | Disables datepicker and prevents it's opening                                                                                              |\n| `typeable`               | `Boolean`                                                | `false`              | Allows user to input date manually                                                                                                         |\n| `weekStartsOn`           | `Number`                                                 | 1                    | Day on which the week should start. Number from 0 to 6, where 0 is Sunday and 6 is Saturday. Week starts with a Monday (1) by default      |\n| `clearable`              | `Boolean`                                                | `false`              | Allows clearing the selected date and setting the value to `null`                                                                          |\n| `allowOutsideInterval`   | `Boolean`                                                | `false`              | Allows user to click dates outside of current interval                                                                                     |\n\n### Events\n\n- `opened`: Emitted every time the popup opens, including on field focus\n- `closed`: Emitted every time the popup closes, including on field blur\n- `decadePageChanged`: Emitted when a page is changed on the year picker view, displaying a different decade. Has a date that is included in the shown decade as an argument.\n- `yearPageChanged`: Emitted when a page is changed on the month picker view, displaying a different year. Has a date that is included in the shown year as an argument.\n- `monthPageChanged`: Emitted when a page is changed on the day picker view, displaying a different month. Has a date that is included in the shown month as an argument.\n\n## Styling\n\nStyling is done via CSS variables, which control colors used in the popup. All variables, as well as styling example and playground can be found in [Configuration section](/config.html#styling-example-and-playground)\n"
  },
  {
    "path": "index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <link rel=\"icon\" href=\"/favicon.ico\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>Vite App</title>\n  </head>\n  <body>\n    <div id=\"app\"></div>\n    <script type=\"module\" src=\"/src/main.js\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"author\": {\n    \"email\": \"icehaunter@gmail.com\",\n    \"name\": \"Ilya Borovitinov\"\n  },\n  \"license\": \"MIT\",\n  \"engines\": {\n    \"node\": \">=10.16.0\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/icehaunter/vue3-datepicker.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/icehaunter/vue3-datepicker/issues\"\n  },\n  \"private\": false,\n  \"name\": \"vue3-datepicker\",\n  \"version\": \"0.4.0\",\n  \"publishConfig\": {\n    \"access\": \"public\"\n  },\n  \"description\": \"A simple Vue 3 datepicker component. Supports disabling of dates, translations. Dependent on date-fns.\",\n  \"keywords\": [\n    \"vue\",\n    \"vue 3\",\n    \"component\",\n    \"datepicker\",\n    \"date-picker\",\n    \"calendar\",\n    \"date-fns\"\n  ],\n  \"main\": \"dist/vue3-datepicker.umd.js\",\n  \"module\": \"dist/vue3-datepicker.mjs\",\n  \"types\": \"./dist/types/Datepicker.vue.d.ts\",\n  \"files\": [\n    \"src/datepicker\",\n    \"dist\"\n  ],\n  \"scripts\": {\n    \"dev\": \"vite\",\n    \"dev:docs\": \"vitepress dev docs\",\n    \"build:component\": \"vite build\",\n    \"build:docs\": \"vitepress build docs\",\n    \"preview:docs\": \"vitepress preview docs\",\n    \"format\": \"prettier -w .\"\n  },\n  \"devDependencies\": {\n    \"@babel/types\": \"^7.22.4\",\n    \"@types/node\": \"^20.2.5\",\n    \"@vitejs/plugin-vue\": \"^4.2.3\",\n    \"@vue/compiler-sfc\": \"^3.3.4\",\n    \"prettier\": \"^2.8.8\",\n    \"typescript\": \"^4.8.4\",\n    \"vite\": \"^4.3.9\",\n    \"vite-plugin-css-injected-by-js\": \"^3.1.1\",\n    \"vite-plugin-dts\": \"^2.3.0\",\n    \"vitepress\": \"^1.0.0-beta.1\",\n    \"vue\": \"^3.3.4\"\n  },\n  \"peerDependencies\": {\n    \"vue\": \"^3.0.0\"\n  },\n  \"dependencies\": {\n    \"date-fns\": \"^2.22.1\"\n  }\n}\n"
  },
  {
    "path": "src/App.vue",
    "content": "<template>\n  <img alt=\"Vue logo\" src=\"./assets/logo.png\" />\n  <div>\n    <datepicker\n      @opened=\"log('opened')\"\n      @closed=\"log('closed')\"\n      @pageChanged=\"\n        (view, date) =>\n          log(`Page changed on view ${view} to include date ${date}`)\n      \"\n      class=\"picker\"\n      v-model=\"selected\"\n      :locale=\"locale\"\n      :upperLimit=\"to\"\n      :lowerLimit=\"from\"\n      :clearable=\"true\"\n      dayFormat=\"d\"\n      :disabledDates=\"{ predicate: isToday }\"\n    >\n      <template v-slot:clear=\"{ onClear }\">\n        <button @click=\"onClear\">x</button>\n      </template>\n    </datepicker>\n  </div>\n  <div>\n    <datepicker\n      @opened=\"log('opened')\"\n      @closed=\"log('closed')\"\n      class=\"picker\"\n      v-model=\"time\"\n      :locale=\"locale\"\n      starting-view=\"time\"\n      minimum-view=\"time\"\n      inputFormat=\"HH:mm\"\n      placeholder=\"selectTime\"\n      :disabledTime=\"{ predicate: isMorning }\"\n    />\n  </div>\n  <div>\n    <datepicker\n      @opened=\"log('opened')\"\n      @closed=\"log('closed')\"\n      class=\"picker\"\n      v-model=\"full\"\n      :locale=\"locale\"\n      minimum-view=\"time\"\n      inputFormat=\"HH:mm dd.MM.yyyy\"\n      placeholder=\"date & time\"\n      :disabledTime=\"{ dates: disabledTime }\"\n    />\n  </div>\n  <div>\n    <datepicker\n      @opened=\"log('opened')\"\n      @closed=\"log('closed')\"\n      class=\"picker\"\n      v-model=\"selected\"\n      :locale=\"locale\"\n      :upperLimit=\"to\"\n      :lowerLimit=\"from\"\n      :clearable=\"true\"\n      :disabledDates=\"{ predicate: isToday }\"\n      :allow-outside-interval=\"true\"\n      placeholder=\"allow outside interval\"\n    />\n  </div>\n  <div>\n    <datepicker\n      class=\"picker\"\n      weekday-format=\"iiiiii\"\n      month-list-format=\"LLLL\"\n      v-model=\"from\"\n      :locale=\"locale\"\n      placeholder=\"from\"\n    />\n  </div>\n  <div>\n    <datepicker\n      @opened=\"log('opened')\"\n      @closed=\"log('closed')\"\n      class=\"picker\"\n      v-model=\"to\"\n      placeholder=\"to\"\n    />\n  </div>\n  <div>\n    <datepicker\n      @opened=\"log('opened')\"\n      @closed=\"log('closed')\"\n      class=\"picker\"\n      v-model=\"to\"\n      :locale=\"locale\"\n      disabled\n      placeholder=\"disabled\"\n    />\n  </div>\n  <div>\n    <datepicker\n      @opened=\"log('opened')\"\n      @closed=\"log('closed')\"\n      class=\"picker\"\n      v-model=\"yearSelected\"\n      :locale=\"locale\"\n      minimum-view=\"year\"\n      placeholder=\"selectYear\"\n    />\n  </div>\n  <div>\n    <datepicker\n      @opened=\"log('opened')\"\n      @closed=\"log('closed')\"\n      class=\"picker\"\n      v-model=\"monthSelected\"\n      :locale=\"locale\"\n      minimum-view=\"month\"\n      starting-view=\"month\"\n      placeholder=\"selectMonth\"\n      :starting-view-date=\"new Date(0)\"\n      input-format=\"yyyy-MM\"\n    />\n  </div>\n</template>\n\n<script>\nimport Datepicker from './datepicker/Datepicker.vue'\nimport { defineComponent } from 'vue'\nimport { enUS } from 'date-fns/locale'\nimport { isSameDay, set } from 'date-fns'\n\nexport default defineComponent({\n  name: 'App',\n  components: {\n    Datepicker,\n  },\n  data() {\n    return {\n      time: null,\n      full: null,\n      selected: null,\n      from: null,\n      to: null,\n      yearSelected: null,\n      monthSelected: null,\n      disabledTime: [\n        set(new Date(), { hours: 11, minutes: 12 }),\n        set(new Date(), { hours: 12, minutes: 30 }),\n      ],\n    }\n  },\n  computed: {\n    locale: () => enUS,\n  },\n  watch: {\n    selected: (value) => console.log(value),\n  },\n  methods: {\n    isToday(date) {\n      return isSameDay(date, new Date())\n    },\n    isMorning(date) {\n      const newDate = set(new Date(date.getTime()), { hours: 11, minutes: 0 })\n      return date < newDate\n    },\n    log(data) {\n      console.log(data)\n    },\n  },\n})\n</script>\n\n<style>\n.picker {\n  color: #3c4a5a;\n}\n</style>\n"
  },
  {
    "path": "src/datepicker/Datepicker.vue",
    "content": "<template>\n  <div\n    class=\"v3dp__datepicker\"\n    :style=\"variables($attrs.style as Record<string, string> | undefined)\"\n  >\n    <div class=\"v3dp__input_wrapper\">\n      <input\n        type=\"text\"\n        ref=\"inputRef\"\n        :readonly=\"!typeable\"\n        v-model=\"input\"\n        v-bind=\"$attrs\"\n        :placeholder=\"placeholder\"\n        :disabled=\"disabled\"\n        :tabindex=\"disabled ? -1 : 0\"\n        @keyup=\"keyUp\"\n        @blur=\"blur\"\n        @focus=\"focus\"\n        @click=\"click\"\n      />\n      <div class=\"v3dp__clearable\" v-show=\"clearable && modelValue\">\n        <slot name=\"clear\" :onClear=\"clearModelValue\">\n          <i @click=\"clearModelValue()\">x</i>\n        </slot>\n      </div>\n    </div>\n    <year-picker\n      v-show=\"viewShown === 'year'\"\n      :pageDate=\"pageDate\"\n      @update:pageDate=\"(v) => updatePageDate('year', v)\"\n      :selected=\"modelValue\"\n      :lowerLimit=\"lowerLimit\"\n      :upperLimit=\"upperLimit\"\n      @select=\"selectYear\"\n    />\n    <month-picker\n      v-show=\"viewShown === 'month'\"\n      :pageDate=\"pageDate\"\n      @update:pageDate=\"(v) => updatePageDate('month', v)\"\n      :selected=\"modelValue\"\n      @select=\"selectMonth\"\n      :lowerLimit=\"lowerLimit\"\n      :upperLimit=\"upperLimit\"\n      :format=\"monthListFormat\"\n      :locale=\"locale\"\n      @back=\"viewShown = 'year'\"\n    />\n    <day-picker\n      v-show=\"viewShown === 'day'\"\n      :pageDate=\"pageDate\"\n      @update:pageDate=\"(v) => updatePageDate('day', v)\"\n      :selected=\"modelValue\"\n      :weekStartsOn=\"weekStartsOn\"\n      :lowerLimit=\"lowerLimit\"\n      :upperLimit=\"upperLimit\"\n      :headingFormat=\"dayPickerHeadingFormat\"\n      :disabledDates=\"disabledDates\"\n      :locale=\"locale\"\n      :weekdayFormat=\"weekdayFormat\"\n      :allow-outside-interval=\"allowOutsideInterval\"\n      :format=\"dayFormat\"\n      @select=\"selectDay\"\n      @back=\"viewShown = 'month'\"\n    />\n    <time-picker\n      v-show=\"viewShown === 'time'\"\n      :pageDate=\"pageDate\"\n      :visible=\"viewShown === 'time'\"\n      :selected=\"modelValue\"\n      :disabledTime=\"disabledTime\"\n      @select=\"selectTime\"\n      @back=\"goBackFromTimepicker\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, ref, computed, watchEffect, PropType } from 'vue'\nimport { parse, isValid, format, max, min } from 'date-fns'\nimport YearPicker from './YearPicker.vue'\nimport MonthPicker from './MonthPicker.vue'\nimport DayPicker from './DayPicker.vue'\nimport TimePicker from './Timepicker.vue'\n\nconst TIME_RESOLUTIONS = ['time', 'day', 'month', 'year']\n\nconst boundedDate = (\n  lower: Date | undefined,\n  upper: Date | undefined,\n  target: Date | undefined = undefined\n) => {\n  let date = target || new Date()\n\n  if (lower) date = max([lower, date])\n  if (upper) date = min([upper, date])\n\n  return date\n}\n\nexport default defineComponent({\n  components: {\n    YearPicker,\n    MonthPicker,\n    DayPicker,\n    TimePicker,\n  },\n  inheritAttrs: false,\n  props: {\n    placeholder: {\n      type: String,\n      default: '',\n    },\n    /**\n     * `v-model` for selected date\n     */\n    modelValue: {\n      type: Date as PropType<Date>,\n      required: false,\n    },\n    /**\n     * Dates not available for picking\n     */\n    disabledDates: {\n      type: Object as PropType<{\n        dates?: Date[]\n        predicate?: (currentDate: Date) => boolean\n      }>,\n      required: false,\n    },\n    allowOutsideInterval: {\n      type: Boolean,\n      required: false,\n      default: false,\n    },\n    /**\n     * Time not available for picking\n     */\n    disabledTime: {\n      type: Object as PropType<{\n        dates?: Date[]\n        predicate?: (currentDate: Date) => boolean\n      }>,\n      required: false,\n    },\n    /**\n     * Upper limit for available dates for picking\n     */\n    upperLimit: {\n      type: Date as PropType<Date>,\n      required: false,\n    },\n    /**\n     * Lower limit for available dates for picking\n     */\n    lowerLimit: {\n      type: Date as PropType<Date>,\n      required: false,\n    },\n    /**\n     * View on which the date picker should open. Can be either `year`, `month`, `day` or `time`\n     */\n    startingView: {\n      type: String as PropType<'year' | 'month' | 'day' | 'time'>,\n      required: false,\n      default: 'day',\n      validate: (v: unknown) =>\n        typeof v === 'string' && TIME_RESOLUTIONS.includes(v),\n    },\n    /**\n     * Date which should be the \"center\" of the initial view.\n     * When an empty datepicker opens, it focuses on the month/year\n     * that contains this date\n     */\n    startingViewDate: {\n      type: Date as PropType<Date>,\n      required: false,\n      default: () => new Date(),\n    },\n    /**\n     * `date-fns`-type formatting for a month view heading\n     */\n    dayPickerHeadingFormat: {\n      type: String,\n      required: false,\n      default: 'LLLL yyyy',\n    },\n    /**\n     * `date-fns`-type formatting for the month picker view\n     */\n    monthListFormat: {\n      type: String,\n      required: false,\n      default: 'LLL',\n    },\n    /**\n     * `date-fns`-type formatting for a line of weekdays on day view\n     */\n    weekdayFormat: {\n      type: String,\n      required: false,\n      default: 'EE',\n    },\n    /**\n     * `date-fns`-type formatting for the day picker view\n     */\n    dayFormat: {\n      type: String,\n      required: false,\n      default: 'dd',\n    },\n    /**\n     * `date-fns`-type format in which the string in the input should be both\n     * parsed and displayed\n     */\n    inputFormat: {\n      type: String,\n      required: false,\n      default: 'yyyy-MM-dd',\n    },\n    /**\n     * [`date-fns` locale object](https://date-fns.org/v2.16.1/docs/I18n#usage).\n     * Used in string formatting (see default `dayPickerHeadingFormat`)\n     */\n    locale: {\n      type: Object as PropType<Locale>,\n      required: false,\n    },\n    /**\n     * Day on which the week should start.\n     *\n     * Number from 0 to 6, where 0 is Sunday and 6 is Saturday.\n     * Week starts with a Monday (1) by default\n     */\n    weekStartsOn: {\n      type: Number as PropType<0 | 1 | 2 | 3 | 4 | 5 | 6>,\n      required: false,\n      default: 1,\n      validator: (value: any) => [0, 1, 2, 3, 4, 5, 6].includes(value),\n    },\n    /**\n     * Disables datepicker and prevents it's opening\n     */\n    disabled: {\n      type: Boolean,\n      required: false,\n      default: false,\n    },\n    /**\n     * Clears selected date\n     */\n    clearable: {\n      type: Boolean,\n      required: false,\n      default: false,\n    },\n    /*\n     * Allows user to input date manually\n     */\n    typeable: {\n      type: Boolean,\n      required: false,\n      default: false,\n    },\n    /**\n     * If set, lower-level views won't show\n     */\n    minimumView: {\n      type: String as PropType<'year' | 'month' | 'day' | 'time'>,\n      required: false,\n      default: 'day',\n      validate: (v: unknown) =>\n        typeof v === 'string' && TIME_RESOLUTIONS.includes(v),\n    },\n  },\n  emits: {\n    'update:modelValue': (value: Date | null | undefined) =>\n      value === null || value === undefined || isValid(value),\n    decadePageChanged: (pageDate: Date) => true,\n    yearPageChanged: (pageDate: Date) => true,\n    monthPageChanged: (pageDate: Date) => true,\n    opened: () => true,\n    closed: () => true,\n  },\n  setup(props, { emit, attrs }) {\n    const viewShown = ref('none' as 'year' | 'month' | 'day' | 'time' | 'none')\n    const pageDate = ref<Date>(props.startingViewDate)\n    const inputRef = ref(null as HTMLInputElement | null)\n    const isFocused = ref(false)\n\n    const input = ref('')\n    watchEffect(() => {\n      const parsed = parse(input.value, props.inputFormat, new Date(), {\n        locale: props.locale,\n      })\n      if (isValid(parsed)) {\n        pageDate.value = parsed\n      }\n    })\n\n    watchEffect(\n      () =>\n        (input.value =\n          props.modelValue && isValid(props.modelValue)\n            ? format(props.modelValue, props.inputFormat, {\n                locale: props.locale,\n              })\n            : '')\n    )\n\n    const renderView = (view: typeof viewShown.value = 'none') => {\n      if (!props.disabled) {\n        if (view !== 'none' && viewShown.value === 'none')\n          pageDate.value =\n            props.modelValue ||\n            boundedDate(props.lowerLimit, props.upperLimit, pageDate.value)\n        viewShown.value = view\n\n        if (view !== 'none') {\n          emit('opened')\n        } else {\n          emit('closed')\n        }\n      }\n    }\n\n    watchEffect(() => {\n      if (props.disabled) viewShown.value = 'none'\n    })\n\n    const updatePageDate = (\n      view: 'year' | 'month' | 'day',\n      newPageDate: Date\n    ) => {\n      // We need to emit \"page changed\" event and set the page date\n      pageDate.value = newPageDate\n\n      if (view === 'year') emit('decadePageChanged', newPageDate)\n      else if (view === 'month') emit('yearPageChanged', newPageDate)\n      else if (view === 'day') emit('monthPageChanged', newPageDate)\n    }\n\n    const selectYear = (date: Date) => {\n      pageDate.value = date\n\n      if (props.minimumView === 'year') {\n        renderView('none')\n        emit('update:modelValue', date)\n      } else {\n        viewShown.value = 'month'\n      }\n    }\n    const selectMonth = (date: Date) => {\n      pageDate.value = date\n\n      if (props.minimumView === 'month') {\n        renderView('none')\n        emit('update:modelValue', date)\n      } else {\n        viewShown.value = 'day'\n      }\n    }\n    const selectDay = (date: Date) => {\n      pageDate.value = date\n\n      if (props.minimumView === 'day') {\n        renderView('none')\n        emit('update:modelValue', date)\n      } else {\n        viewShown.value = 'time'\n      }\n    }\n\n    const selectTime = (date: Date) => {\n      renderView('none')\n      emit('update:modelValue', date)\n    }\n\n    const clearModelValue = () => {\n      if (props.clearable) {\n        renderView('none')\n        emit('update:modelValue', null)\n        pageDate.value = props.startingViewDate\n      }\n    }\n\n    const click = () => (isFocused.value = true)\n\n    const focus = () => renderView(initialView.value)\n\n    const blur = () => {\n      isFocused.value = false\n      renderView()\n    }\n\n    const keyUp = (event: KeyboardEvent) => {\n      const code = event.keyCode ? event.keyCode : event.which\n      // close calendar if escape or enter are pressed\n      const closeButton = [\n        27, // escape\n        13, // enter\n      ].includes(code)\n\n      if (closeButton) {\n        inputRef.value!.blur()\n      }\n      if (props.typeable) {\n        const parsedDate = parse(\n          inputRef.value!.value,\n          props.inputFormat,\n          new Date(),\n          { locale: props.locale }\n        )\n\n        // If the date is formatted back same way as it was inputted, then we're not disturbing user input\n        if (\n          isValid(parsedDate) &&\n          input.value ===\n            format(parsedDate, props.inputFormat, { locale: props.locale })\n        ) {\n          input.value = inputRef.value!.value\n          emit('update:modelValue', parsedDate)\n        }\n      }\n    }\n\n    const initialView = computed(() => {\n      const startingViewOrder = TIME_RESOLUTIONS.indexOf(props.startingView)\n      const minimumViewOrder = TIME_RESOLUTIONS.indexOf(props.minimumView)\n\n      return startingViewOrder < minimumViewOrder\n        ? props.minimumView\n        : props.startingView\n    })\n\n    const variables = (object: Record<string, string> | undefined) =>\n      Object.fromEntries(\n        Object.entries(object ?? {}).filter(([key, _]) => key.startsWith('--'))\n      )\n\n    const goBackFromTimepicker = () =>\n      props.startingView === 'time' && props.minimumView === 'time'\n        ? null\n        : (viewShown.value = 'day')\n\n    return {\n      blur,\n      focus,\n      click,\n      input,\n      inputRef,\n      pageDate,\n      renderView,\n      updatePageDate,\n      selectYear,\n      selectMonth,\n      selectDay,\n      selectTime,\n      keyUp,\n      viewShown,\n      goBackFromTimepicker,\n      clearModelValue,\n      initialView,\n      log: (e: any) => console.log(e),\n      variables,\n    }\n  },\n})\n</script>\n\n<style>\n.v3dp__datepicker {\n  --popout-bg-color: var(--vdp-bg-color, #fff);\n  --box-shadow: var(\n    --vdp-box-shadow,\n    0 4px 10px 0 rgba(128, 144, 160, 0.1),\n    0 0 1px 0 rgba(128, 144, 160, 0.81)\n  );\n  --text-color: var(--vdp-text-color, #000000);\n  --border-radius: var(--vdp-border-radius, 3px);\n  --heading-size: var(--vdp-heading-size, 2.5em); /* 40px for 16px font */\n  --heading-weight: var(--vdp-heading-weight, bold);\n  --heading-hover-color: var(--vdp-heading-hover-color, #eeeeee);\n  --arrow-color: var(--vdp-arrow-color, currentColor);\n\n  --elem-color: var(--vdp-elem-color, currentColor);\n  --elem-disabled-color: var(--vdp-disabled-color, #d5d9e0);\n  --elem-hover-color: var(--vdp-hover-color, #fff);\n  --elem-hover-bg-color: var(--vdp-hover-bg-color, #0baf74);\n  --elem-selected-color: var(--vdp-selected-color, #fff);\n  --elem-selected-bg-color: var(--vdp-selected-bg-color, #0baf74);\n\n  --elem-current-outline-color: var(--vdp-current-date-outline-color, #888);\n  --elem-current-font-weight: var(--vdp-current-date-font-weight, bold);\n\n  --elem-font-size: var(--vdp-elem-font-size, 0.8em);\n  --elem-border-radius: var(--vdp-elem-border-radius, 3px);\n\n  --divider-color: var(--vdp-divider-color, var(--elem-disabled-color));\n\n  position: relative;\n}\n\n.v3dp__clearable {\n  display: inline;\n  position: relative;\n  left: -15px;\n  cursor: pointer;\n}\n</style>\n"
  },
  {
    "path": "src/datepicker/DayPicker.vue",
    "content": "<template>\n  <picker-popup\n    headingClickable\n    :leftDisabled=\"leftDisabled\"\n    :rightDisabled=\"rightDisabled\"\n    :items=\"days\"\n    viewMode=\"day\"\n    @left=\"previousPage\"\n    @right=\"nextPage\"\n    @heading=\"$emit('back')\"\n    @elementClick=\"$emit('select', $event)\"\n  >\n    <template #heading>{{ heading }}</template>\n    <template #subheading>\n      <span\n        v-for=\"(day, index) in weekDays\"\n        :key=\"day\"\n        :class=\"`v3dp__subheading__weekday__${index}`\"\n      >\n        {{ day }}\n      </span>\n    </template>\n  </picker-popup>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref, watchEffect, PropType } from 'vue'\nimport {\n  startOfMonth,\n  endOfMonth,\n  eachDayOfInterval,\n  subMonths,\n  addMonths,\n  startOfWeek,\n  endOfWeek,\n  isSameDay,\n  setDay,\n  isWithinInterval,\n  isBefore,\n  isAfter,\n  isSameMonth,\n  endOfDay,\n  startOfDay,\n  isValid,\n  format as formatDate,\n} from 'date-fns'\nimport PickerPopup, { Item } from './PickerPopup.vue'\n\nexport default defineComponent({\n  components: {\n    PickerPopup,\n  },\n  emits: {\n    'update:pageDate': (date: Date) => isValid(date),\n    select: (date: Date) => isValid(date),\n    back: () => true,\n  },\n  props: {\n    selected: {\n      type: Date as PropType<Date>,\n      required: false,\n    },\n    pageDate: {\n      type: Date as PropType<Date>,\n      required: true,\n    },\n    format: {\n      type: String,\n      required: false,\n      default: 'dd',\n    },\n    headingFormat: {\n      type: String,\n      required: false,\n      default: 'LLLL yyyy',\n    },\n    weekdayFormat: {\n      type: String,\n      required: false,\n      default: 'EE',\n    },\n    locale: {\n      type: Object as PropType<Locale>,\n      required: false,\n    },\n    weekStartsOn: {\n      type: Number as PropType<1 | 2 | 3 | 4 | 5 | 6 | 0>,\n      required: false,\n      default: 1,\n      validator: (i: unknown): boolean =>\n        typeof i === 'number' && Number.isInteger(i) && i >= 0 && i <= 6,\n    },\n    lowerLimit: {\n      type: Date as PropType<Date>,\n      required: false,\n    },\n    upperLimit: {\n      type: Date as PropType<Date>,\n      required: false,\n    },\n    disabledDates: {\n      type: Object as PropType<{\n        dates?: Date[]\n        predicate?: (target: Date) => boolean\n      }>,\n      required: false,\n    },\n    allowOutsideInterval: {\n      type: Boolean,\n      required: false,\n      default: false,\n    },\n  },\n  setup(props, { emit }) {\n    const format = computed(\n      () => (format: string) => (value: Date | number) =>\n        formatDate(value, format, {\n          locale: props.locale,\n          weekStartsOn: props.weekStartsOn,\n        })\n    )\n\n    const monthStart = computed(() => startOfMonth(props.pageDate))\n    const monthEnd = computed(() => endOfMonth(props.pageDate))\n    const currentMonth = computed(() => ({\n      start: monthStart.value,\n      end: monthEnd.value,\n    }))\n\n    const displayedInterval = computed(() => ({\n      start: startOfWeek(monthStart.value, {\n        weekStartsOn: props.weekStartsOn,\n      }),\n      end: endOfWeek(monthEnd.value, {\n        weekStartsOn: props.weekStartsOn,\n      }),\n    }))\n\n    const weekDays = computed(() => {\n      const initial = props.weekStartsOn\n      const dayFormat = format.value(props.weekdayFormat)\n      return Array.from(Array(7))\n        .map((_, i) => (initial + i) % 7)\n        .map((v) =>\n          setDay(new Date(), v, {\n            weekStartsOn: props.weekStartsOn,\n          })\n        )\n        .map(dayFormat)\n    })\n\n    const isEnabled = (\n      target: Date,\n      lower?: Date,\n      upper?: Date,\n      disabledDates?: { dates?: Date[]; predicate?: (target: Date) => boolean }\n    ): boolean => {\n      if (disabledDates?.dates?.some((date) => isSameDay(target, date)))\n        return false\n      if (disabledDates?.predicate?.(target)) return false\n      if (!lower && !upper) return true\n      if (lower && isBefore(target, startOfDay(lower))) return false\n      if (upper && isAfter(target, endOfDay(upper))) return false\n      return true\n    }\n\n    const days = computed(() => {\n      const today = new Date()\n      const dayFormat = format.value(props.format)\n      return eachDayOfInterval(displayedInterval.value).map(\n        (value): Item => ({\n          value,\n          display: dayFormat(value),\n          selected: !!props.selected && isSameDay(props.selected, value),\n          current: isSameDay(today, value),\n          disabled:\n            (!props.allowOutsideInterval &&\n              !isWithinInterval(value, currentMonth.value)) ||\n            !isEnabled(\n              value,\n              props.lowerLimit,\n              props.upperLimit,\n              props.disabledDates\n            ),\n          key: format.value('yyyy-MM-dd')(value),\n        })\n      )\n    })\n\n    const heading = computed(() =>\n      format.value(props.headingFormat)(props.pageDate)\n    )\n    const leftDisabled = computed(\n      () =>\n        props.lowerLimit &&\n        (isSameMonth(props.lowerLimit, props.pageDate) ||\n          isBefore(props.pageDate, props.lowerLimit))\n    )\n    const rightDisabled = computed(\n      () =>\n        props.upperLimit &&\n        (isSameMonth(props.upperLimit, props.pageDate) ||\n          isAfter(props.pageDate, props.upperLimit))\n    )\n\n    const previousPage = () =>\n      emit('update:pageDate', subMonths(props.pageDate, 1))\n    const nextPage = () => emit('update:pageDate', addMonths(props.pageDate, 1))\n\n    return {\n      weekDays,\n      days,\n      heading,\n      leftDisabled,\n      rightDisabled,\n      previousPage,\n      nextPage,\n    }\n  },\n})\n</script>\n\n<style></style>\n"
  },
  {
    "path": "src/datepicker/MonthPicker.vue",
    "content": "<template>\n  <picker-popup\n    headingClickable\n    :columnCount=\"3\"\n    :items=\"months\"\n    :leftDisabled=\"leftDisabled\"\n    :rightDisabled=\"rightDisabled\"\n    viewMode=\"month\"\n    @left=\"previousPage\"\n    @right=\"nextPage\"\n    @heading=\"$emit('back')\"\n    @elementClick=\"$emit('select', $event)\"\n  >\n    <template #heading>{{ heading }}</template>\n  </picker-popup>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref, watchEffect, PropType } from 'vue'\nimport {\n  startOfYear,\n  endOfYear,\n  eachMonthOfInterval,\n  getMonth,\n  getYear,\n  subYears,\n  addYears,\n  format,\n  isSameMonth,\n  isBefore,\n  isAfter,\n  isSameYear,\n  startOfMonth,\n  endOfMonth,\n  isValid,\n  format as formatDate,\n} from 'date-fns'\nimport PickerPopup, { Item } from './PickerPopup.vue'\n\nexport default defineComponent({\n  components: {\n    PickerPopup,\n  },\n  emits: {\n    'update:pageDate': (date: Date) => isValid(date),\n    select: (date: Date) => isValid(date),\n    back: () => true,\n  },\n  props: {\n    /**\n     * Currently selected date, needed for highlighting\n     */\n    selected: {\n      type: Date as PropType<Date>,\n      required: false,\n    },\n    pageDate: {\n      type: Date as PropType<Date>,\n      required: true,\n    },\n    format: {\n      type: String,\n      required: false,\n      default: 'LLL',\n    },\n    locale: {\n      type: Object as PropType<Locale>,\n      required: false,\n    },\n    lowerLimit: {\n      type: Date as PropType<Date>,\n      required: false,\n    },\n    upperLimit: {\n      type: Date as PropType<Date>,\n      required: false,\n    },\n  },\n  setup(props, { emit }) {\n    const from = computed(() => startOfYear(props.pageDate))\n    const to = computed(() => endOfYear(props.pageDate))\n\n    const format = computed(\n      () => (value: Date | number) =>\n        formatDate(value, props.format, {\n          locale: props.locale,\n        })\n    )\n\n    const isEnabled = (\n      target: Date,\n      lower: Date | undefined,\n      upper: Date | undefined\n    ): boolean => {\n      if (!lower && !upper) return true\n      if (lower && isBefore(target, startOfMonth(lower))) return false\n      if (upper && isAfter(target, endOfMonth(upper))) return false\n      return true\n    }\n\n    const months = computed(() =>\n      eachMonthOfInterval({\n        start: from.value,\n        end: to.value,\n      }).map(\n        (value): Item => ({\n          value,\n          display: format.value(value),\n          key: format.value(value),\n          selected: !!props.selected && isSameMonth(props.selected, value),\n          disabled: !isEnabled(value, props.lowerLimit, props.upperLimit),\n        })\n      )\n    )\n\n    const heading = computed(() => getYear(from.value))\n\n    const leftDisabled = computed(\n      () =>\n        props.lowerLimit &&\n        (isSameYear(props.lowerLimit, props.pageDate) ||\n          isBefore(props.pageDate, props.lowerLimit))\n    )\n    const rightDisabled = computed(\n      () =>\n        props.upperLimit &&\n        (isSameYear(props.upperLimit, props.pageDate) ||\n          isAfter(props.pageDate, props.upperLimit))\n    )\n\n    const previousPage = () =>\n      emit('update:pageDate', subYears(props.pageDate, 1))\n    const nextPage = () => emit('update:pageDate', addYears(props.pageDate, 1))\n\n    return {\n      months,\n      heading,\n      leftDisabled,\n      rightDisabled,\n      previousPage,\n      nextPage,\n    }\n  },\n})\n</script>\n"
  },
  {
    "path": "src/datepicker/PickerPopup.vue",
    "content": "<template>\n  <div\n    class=\"v3dp__popout\"\n    :class=\"`v3dp__popout-${viewMode}`\"\n    :style=\"{ ['--popout-column-definition' as any]: `repeat(${columnCount}, 1fr)` }\"\n    @mousedown.prevent\n  >\n    <div class=\"v3dp__heading\">\n      <button\n        class=\"v3dp__heading__button v3dp__heading__button__left\"\n        :disabled=\"leftDisabled\"\n        @click.stop.prevent=\"$emit('left')\"\n      >\n        <slot name=\"arrow-left\">\n          <svg\n            class=\"v3dp__heading__icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 6 8\"\n          >\n            <g fill=\"none\" fill-rule=\"evenodd\">\n              <path stroke=\"none\" d=\"M-9 16V-8h24v24z\" />\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M5 0L1 4l4 4\"\n              />\n            </g>\n          </svg>\n        </slot>\n      </button>\n      <component\n        :is=\"headingClickable ? 'button' : 'span'\"\n        class=\"v3dp__heading__center\"\n        @click.stop.prevent=\"$emit('heading')\"\n      >\n        <slot name=\"heading\" />\n      </component>\n      <button\n        class=\"v3dp__heading__button v3dp__heading__button__right\"\n        :disabled=\"rightDisabled\"\n        @click.stop.prevent=\"$emit('right')\"\n      >\n        <slot name=\"arrow-right\">\n          <svg\n            class=\"v3dp__heading__icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 6 8\"\n          >\n            <g fill=\"none\" fill-rule=\"evenodd\">\n              <path stroke=\"none\" d=\"M15-8v24H-9V-8z\" />\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                d=\"M1 8l4-4-4-4\"\n              />\n            </g>\n          </svg>\n        </slot>\n      </button>\n    </div>\n    <div class=\"v3dp__body\">\n      <template v-if=\"'subheading' in $slots\">\n        <div class=\"v3dp__subheading\">\n          <slot name=\"subheading\" />\n        </div>\n        <hr class=\"v3dp__divider\" />\n      </template>\n      <div class=\"v3dp__elements\">\n        <slot name=\"body\">\n          <button\n            v-for=\"item in items\"\n            :key=\"item.key\"\n            :disabled=\"item.disabled\"\n            :class=\"[\n              {\n                selected: item.selected,\n                current: item.current,\n              },\n              `v3dp__element__button__${viewMode}`,\n            ]\"\n            @click.stop.prevent=\"$emit('elementClick', item.value)\"\n          >\n            <span>{{ item.display }}</span>\n          </button>\n        </slot>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { isValid } from 'date-fns'\nimport { defineComponent, PropType, computed } from 'vue'\n\nexport interface Item {\n  key: string\n  value: Date\n  display: number | string\n  disabled: boolean\n  selected: boolean\n  current?: boolean\n}\n\nexport type ViewMode = 'year' | 'month' | 'day' | 'time' | 'custom'\nconst VIEW_MODES = ['year', 'month', 'day', 'time', 'custom']\n\nexport default defineComponent({\n  emits: {\n    elementClick: (value: Date) => isValid(value),\n    left: () => true,\n    right: () => true,\n    heading: () => true,\n  },\n  props: {\n    headingClickable: {\n      type: Boolean,\n      default: false,\n    },\n    leftDisabled: {\n      type: Boolean,\n      default: false,\n    },\n    rightDisabled: {\n      type: Boolean,\n      default: false,\n    },\n    columnCount: {\n      type: Number,\n      default: 7,\n    },\n    items: {\n      type: Array as PropType<Item[]>,\n      default: (): Item[] => [],\n    },\n    viewMode: {\n      type: String as PropType<ViewMode>,\n      required: true,\n      validate: (x: unknown) => typeof x === 'string' && VIEW_MODES.includes(x),\n    },\n  },\n})\n</script>\n\n<style scoped>\n.v3dp__popout {\n  z-index: 10;\n  position: absolute;\n  /* bottom: 0; */\n  text-align: center;\n  width: 17.5em;\n  background-color: var(--popout-bg-color);\n  box-shadow: var(--box-shadow);\n  border-radius: var(--border-radius);\n  padding: 8px 0 1em;\n  color: var(--text-color);\n}\n\n.v3dp__popout * {\n  color: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n}\n\n.v3dp__popout :deep(button) {\n  background: none;\n  border: none;\n  outline: none;\n}\n\n.v3dp__popout :deep(button:not(:disabled)) {\n  cursor: pointer;\n}\n\n.v3dp__heading {\n  width: 100%;\n  display: flex;\n  height: var(--heading-size);\n  line-height: var(--heading-size);\n  font-weight: var(--heading-weight);\n}\n\n.v3dp__heading__button {\n  background: none;\n  border: none;\n  padding: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: var(--heading-size);\n}\n\nbutton.v3dp__heading__center:hover,\n.v3dp__heading__button:not(:disabled):hover {\n  background-color: var(--heading-hover-color);\n}\n\n.v3dp__heading__center {\n  flex: 1;\n}\n\n.v3dp__heading__icon {\n  height: 12px;\n  stroke: var(--arrow-color);\n}\n\n.v3dp__heading__button:disabled .v3dp__heading__icon {\n  stroke: var(--elem-disabled-color);\n}\n\n.v3dp__subheading,\n.v3dp__elements {\n  display: grid;\n  grid-template-columns: var(--popout-column-definition);\n  font-size: var(--elem-font-size);\n}\n\n.v3dp__subheading {\n  margin-top: 1em;\n}\n\n.v3dp__divider {\n  border: 1px solid var(--divider-color);\n  border-radius: 3px;\n}\n\n.v3dp__elements :deep(button:disabled) {\n  color: var(--elem-disabled-color);\n}\n\n.v3dp__elements :deep(button) {\n  padding: 0.3em 0.6em;\n}\n\n.v3dp__elements :deep(button span) {\n  display: block;\n  line-height: 1.9em;\n  height: 1.8em;\n  border-radius: var(--elem-border-radius);\n}\n\n.v3dp__elements :deep(button:not(:disabled):hover span) {\n  background-color: var(--elem-hover-bg-color);\n  color: var(--elem-hover-color);\n}\n\n.v3dp__elements :deep(button.selected span) {\n  background-color: var(--elem-selected-bg-color);\n  color: var(--elem-selected-color);\n}\n\n.v3dp__elements :deep(button.current span) {\n  font-weight: var(--elem-current-font-weight);\n  outline: 1px solid var(--elem-current-outline-color);\n}\n</style>\n"
  },
  {
    "path": "src/datepicker/Timepicker.vue",
    "content": "<template>\n  <picker-popup\n    headingClickable\n    :columnCount=\"2\"\n    :leftDisabled=\"true\"\n    :rightDisabled=\"true\"\n    viewMode=\"time\"\n    @heading=\"$emit('back')\"\n  >\n    <template #heading\n      >{{ padStartZero(hours) }}:{{ padStartZero(minutes) }}</template\n    >\n    <template #body>\n      <div ref=\"hoursListRef\" class=\"v3dp__column\">\n        <button\n          v-for=\"item in hoursList\"\n          :key=\"item.value\"\n          :ref=\"item.ref\"\n          :class=\"[{ selected: item.selected }, 'v3dp__element_button__hour']\"\n          :disabled=\"!isEnabled(item.date)\"\n          @click.stop.prevent=\"hours = item.value\"\n        >\n          <span>{{ padStartZero(item.value) }}</span>\n        </button>\n      </div>\n      <div ref=\"minutesListRef\" class=\"v3dp__column\">\n        <button\n          v-for=\"item in minutesList\"\n          :key=\"item.value\"\n          :ref=\"item.ref\"\n          :class=\"[{ selected: item.selected }, 'v3dp__element_button__minute']\"\n          :disabled=\"!isEnabled(item.date)\"\n          @click.stop.prevent=\"selectMinutes(item)\"\n        >\n          <span>{{ padStartZero(item.value) }}</span>\n        </button>\n      </div>\n    </template>\n  </picker-popup>\n</template>\n\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  computed,\n  ref,\n  watch,\n  nextTick,\n  ComputedRef,\n  Ref,\n  PropType,\n} from 'vue'\nimport { isSameHour, isSameMinute, isValid, set } from 'date-fns'\nimport PickerPopup from './PickerPopup.vue'\n\ninterface Item {\n  value: number\n  date: Date\n  selected: boolean | undefined\n  ref: Ref<null | HTMLElement>\n}\n\nfunction scrollParentToChild(parent: HTMLElement, child: HTMLElement) {\n  const parentRect = parent.getBoundingClientRect()\n  const parentViewableArea = {\n    height: parent.clientHeight,\n    width: parent.clientWidth,\n  }\n\n  const childRect = child.getBoundingClientRect()\n  const isViewable =\n    childRect.top >= parentRect.top &&\n    childRect.bottom <= parentRect.top + parentViewableArea.height\n\n  if (!isViewable) {\n    const scrollTop = childRect.top - parentRect.top\n    const scrollBot = childRect.bottom - parentRect.bottom\n    if (Math.abs(scrollTop) < Math.abs(scrollBot)) {\n      parent.scrollTop += scrollTop\n    } else {\n      parent.scrollTop += scrollBot\n    }\n  }\n}\n\nexport default defineComponent({\n  components: {\n    PickerPopup,\n  },\n  emits: {\n    select: (date: Date) => isValid(date),\n    back: () => true,\n  },\n  props: {\n    selected: {\n      type: Date as PropType<Date>,\n      required: false,\n    },\n    pageDate: {\n      type: Date as PropType<Date>,\n      required: true,\n    },\n    visible: {\n      type: Boolean,\n      required: true,\n    },\n    disabledTime: {\n      type: Object as PropType<{\n        dates?: Date[]\n        predicate?: (target: Date) => boolean\n      }>,\n      required: false,\n    },\n  },\n  setup(props, { emit }) {\n    const hoursListRef = ref(null as HTMLElement | null)\n    const minutesListRef = ref(null as HTMLElement | null)\n\n    const currentDate = computed(() => props.pageDate ?? props.selected)\n\n    const hours = ref(currentDate.value.getHours())\n    const minutes = ref(currentDate.value.getMinutes())\n\n    watch(\n      () => props.selected,\n      (value: Date | undefined) => {\n        let newHours = 0\n        let newMinutes = 0\n\n        if (value) {\n          newHours = value.getHours()\n          newMinutes = value.getMinutes()\n        }\n\n        hours.value = newHours\n        minutes.value = newMinutes\n      }\n    )\n\n    const hoursList: ComputedRef<Item[]> = computed(() =>\n      [...Array(24).keys()].map(\n        (value): Item => ({\n          value,\n          date: set(new Date(currentDate.value.getTime()), {\n            hours: value,\n            minutes: minutes.value,\n            seconds: 0,\n          }),\n          selected: hours.value === value,\n          ref: ref(null),\n        })\n      )\n    )\n    const minutesList: ComputedRef<Item[]> = computed(() =>\n      [...Array(60).keys()].map((value) => ({\n        value,\n        date: set(new Date(currentDate.value.getTime()), {\n          hours: hours.value,\n          minutes: value,\n          seconds: 0,\n        }),\n        selected: minutes.value === value,\n        ref: ref(null),\n      }))\n    )\n\n    const selectMinutes = (item: Item) => {\n      minutes.value = item.value\n\n      emit('select', item.date)\n    }\n\n    const scroll = () => {\n      const currentHour = hoursList.value.find(\n        (item) => item.ref.value?.classList?.contains('selected') ?? false\n      )\n      const currentMinute = minutesList.value.find(\n        (item) => item.ref.value?.classList?.contains('selected') ?? false\n      )\n\n      if (currentHour && currentMinute) {\n        scrollParentToChild(hoursListRef.value!, currentHour.ref.value!)\n        scrollParentToChild(minutesListRef.value!, currentMinute.ref.value!)\n      }\n    }\n\n    watch(\n      () => props.visible,\n      (visible) => {\n        if (visible) {\n          nextTick(scroll)\n        }\n      }\n    )\n\n    const isEnabled = (target: Date): boolean => {\n      if (\n        props.disabledTime?.dates?.some(\n          (date) => isSameHour(target, date) && isSameMinute(target, date)\n        )\n      ) {\n        return false\n      }\n      if (props.disabledTime?.predicate?.(target)) return false\n      return true\n    }\n\n    const padStartZero = (item: number): string => `0${item}`.substr(-2)\n\n    return {\n      hoursListRef,\n      minutesListRef,\n      hours,\n      minutes,\n      hoursList,\n      minutesList,\n      padStartZero,\n      selectMinutes,\n      isEnabled,\n      scroll,\n    }\n  },\n})\n</script>\n\n<style scoped>\n.v3dp__column {\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  height: 190px;\n}\n</style>\n"
  },
  {
    "path": "src/datepicker/YearPicker.vue",
    "content": "<template>\n  <picker-popup\n    :columnCount=\"3\"\n    :leftDisabled=\"leftDisabled\"\n    :rightDisabled=\"rightDisabled\"\n    :items=\"years\"\n    viewMode=\"year\"\n    @left=\"previousPage\"\n    @right=\"nextPage\"\n    @elementClick=\"$emit('select', $event)\"\n  >\n    <template #heading>{{ heading }}</template>\n  </picker-popup>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref, watchEffect, PropType } from 'vue'\nimport {\n  startOfDecade,\n  endOfDecade,\n  eachYearOfInterval,\n  getYear,\n  subYears,\n  addYears,\n  isAfter,\n  isBefore,\n  getDecade,\n  isValid,\n} from 'date-fns'\nimport PickerPopup, { Item } from './PickerPopup.vue'\n\nexport default defineComponent({\n  components: {\n    PickerPopup,\n  },\n  emits: {\n    'update:pageDate': (date: Date) => isValid(date),\n    select: (date: Date) => isValid(date),\n  },\n  props: {\n    selected: {\n      type: Date as PropType<Date>,\n      required: false,\n    },\n    pageDate: {\n      type: Date as PropType<Date>,\n      required: true,\n    },\n    lowerLimit: {\n      type: Date as PropType<Date>,\n      required: false,\n    },\n    upperLimit: {\n      type: Date as PropType<Date>,\n      required: false,\n    },\n  },\n  setup(props, { emit }) {\n    const from = computed(() => startOfDecade(props.pageDate))\n    const to = computed(() => endOfDecade(props.pageDate))\n\n    const isEnabled = (\n      target: Date,\n      lower: Date | undefined,\n      upper: Date | undefined\n    ): boolean => {\n      if (!lower && !upper) return true\n      if (lower && getYear(target) < getYear(lower)) return false\n      if (upper && getYear(target) > getYear(upper)) return false\n      return true\n    }\n\n    const years = computed(() =>\n      eachYearOfInterval({\n        start: from.value,\n        end: to.value,\n      }).map(\n        (value): Item => ({\n          value,\n          key: String(getYear(value)),\n          display: getYear(value),\n          selected:\n            !!props.selected && getYear(value) === getYear(props.selected),\n          disabled: !isEnabled(value, props.lowerLimit, props.upperLimit),\n        })\n      )\n    )\n\n    const heading = computed(() => {\n      const start = getYear(from.value)\n      const end = getYear(to.value)\n\n      return `${start} - ${end}`\n    })\n\n    const leftDisabled = computed(\n      () =>\n        props.lowerLimit &&\n        (getDecade(props.lowerLimit) === getDecade(props.pageDate) ||\n          isBefore(props.pageDate, props.lowerLimit))\n    )\n    const rightDisabled = computed(\n      () =>\n        props.upperLimit &&\n        (getDecade(props.upperLimit) === getDecade(props.pageDate) ||\n          isAfter(props.pageDate, props.upperLimit))\n    )\n\n    const previousPage = () =>\n      emit('update:pageDate', subYears(props.pageDate, 10))\n    const nextPage = () => emit('update:pageDate', addYears(props.pageDate, 10))\n\n    return {\n      years,\n      heading,\n      leftDisabled,\n      rightDisabled,\n      previousPage,\n      nextPage,\n    }\n  },\n})\n</script>\n"
  },
  {
    "path": "src/index.css",
    "content": "#app {\n  font-family: Avenir, Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  /* text-align: center; */\n  color: #2c3e50;\n  margin-top: 60px;\n}\n"
  },
  {
    "path": "src/main.js",
    "content": "import { createApp } from 'vue'\nimport App from './App.vue'\nimport './index.css'\n\nwindow.app = createApp(App).mount('#app')\n"
  },
  {
    "path": "src/vue-shim.d.ts",
    "content": "declare module '*.vue' {\n  import { defineComponent } from 'vue'\n  const Component: ReturnType<typeof defineComponent>\n  export default Component\n}\n"
  },
  {
    "path": "tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"target\": \"ES2019\",\n    \"module\": \"esnext\",\n    \"lib\": [\"ESNext\", \"DOM\"],\n    // this enables stricter inference for data properties on `this`\n    \"strict\": true,\n    \"jsx\": \"preserve\",\n    \"moduleResolution\": \"node\",\n    \"declaration\": true\n  },\n  \"exclude\": [\"node_modules\", \"dist\"]\n}\n"
  },
  {
    "path": "vite.config.ts",
    "content": "import { resolve } from 'path'\nimport { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\nimport cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'\nimport dts from 'vite-plugin-dts'\n\nexport default defineConfig({\n  build: {\n    cssCodeSplit: true,\n    lib: {\n      // Could also be a dictionary or array of multiple entry points\n      entry: resolve(__dirname, 'src/datepicker/Datepicker.vue'),\n      name: 'Datepicker',\n      formats: ['es', 'umd'],\n      // the proper extensions will be added\n      fileName: 'vue3-datepicker',\n    },\n    rollupOptions: {\n      // make sure to externalize deps that shouldn't be bundled\n      // into your library\n      external: ['vue', 'date-fns', 'date-fns/fp', 'date-fns/locale'],\n      output: {\n        // Provide global variables to use in the UMD build\n        // for externalized deps\n        globals: {\n          vue: 'Vue',\n          'date-fns': 'date-fns',\n        },\n        assetFileNames: (assetInfo) => {\n          if (assetInfo.name === 'style.css') return 'vue3-datepicker.css'\n          return assetInfo.name!\n        },\n      },\n    },\n  },\n  plugins: [\n    vue(),\n    cssInjectedByJsPlugin(),\n    dts({\n      entryRoot: 'src/datepicker',\n      outputDir: 'dist/types',\n    }),\n  ],\n  optimizeDeps: {\n    include: ['date-fns/locale', 'date-fns/fp'],\n  },\n})\n"
  }
]