diff --git a/.babelrc b/.babelrc deleted file mode 100644 index 04552170a..000000000 --- a/.babelrc +++ /dev/null @@ -1,4 +0,0 @@ -{ - "presets": ["@vue/cli-plugin-babel/preset"], - "plugins": ["@babel/plugin-transform-arrow-functions"] -} diff --git a/.eslintignore b/.eslintignore index 5f22c9227..9c03f05b6 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,2 +1,12 @@ -lib/ -tests/* \ No newline at end of file +dist/ +tests/* +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 +testumdbuild \ No newline at end of file diff --git a/.eslintrc b/.eslintrc deleted file mode 100644 index a2403d03a..000000000 --- a/.eslintrc +++ /dev/null @@ -1,50 +0,0 @@ -{ - "root": true, - "extends": ["plugin:vue/essential", "@vue/airbnb"], - "parser": "vue-eslint-parser", - "parserOptions": { - "parser": "babel-eslint", - "sourceType": "module", - "ecmaVersion": 2018 - }, - "rules": { - "import/extensions": [ - "error", - "always", - { - "js": "never", - "vue": "never" - } - ], - "no-param-reassign": "off", - "no-underscore-dangle": "off", - "max-len": "off", - "no-plusplus": "off", - "linebreak-style": "off", - "import/no-duplicates": "off", - "import/no-webpack-loader-syntax": "off", - "import/first": "off", - "import/prefer-default-export": "off", - "no-return-assign": "off", - "arrow-parens": "off", - "curly": "off", - "no-mixed-operators": "off", - "indent": "off", - "no-confusing-arrow": "off", - "eol-last": "off", - "object-curly-newline": "off", - "prefer-destructuring": "off", - "function-paren-newline": "off", - "no-restricted-globals": "off", - "vue/html-self-closing": "error", - "implicit-arrow-linebreak": "off", - "operator-linebreak": "off", - "class-methods-use-this": "off", - "no-unused-vars": [ - "error", - { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" } - ], - "default-case": "off", - "comma-dangle": "off" - } -} diff --git a/.eslintrc.cjs b/.eslintrc.cjs new file mode 100644 index 000000000..48e520baa --- /dev/null +++ b/.eslintrc.cjs @@ -0,0 +1,33 @@ +module.exports = { + root: true, + env: { + browser: true, + es6: true, + node: true, + }, + extends: [ + 'eslint:recommended', + 'plugin:vue/vue3-essential', + '@vue/typescript/recommended', + '@vue/prettier', + '@vue/prettier/@typescript-eslint', + ], + parserOptions: { + parser: '@typescript-eslint/parser', + ecmaVersion: 2021, + }, + rules: { + '@typescript-eslint/ban-types': 'off', + '@typescript-eslint/explicit-module-boundary-types': 'off', + '@typescript-eslint/no-explicit-any': 'off', + '@typescript-eslint/no-non-null-assertion': 'off', + '@typescript-eslint/ban-ts-comment': 'off', + '@typescript-eslint/ban-ts-ignore': 'off', + '@typescript-eslint/no-unused-vars': 'off', + '@typescript-eslint/no-use-before-define': 'off', + 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', + 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', + 'vue/no-mutating-props': 'off', + 'vue/multi-word-component-names': 'off', + }, +}; diff --git a/.gitignore b/.gitignore index a4f2d341a..bfba3972a 100644 --- a/.gitignore +++ b/.gitignore @@ -1,8 +1,9 @@ .DS_Store node_modules /dist -/lib -docs/.vuepress/dist +docs/.vitepress/dist +docs/.vitepress/cache +docs/.vitepress/.temp # local env files .env.local @@ -12,11 +13,19 @@ docs/.vuepress/dist npm-debug.log* yarn-debug.log* yarn-error.log* +pnpm-debug.log* # Editor directories and files .idea .vscode +.notes* *.suo *.ntvs* *.njsproj *.sln +*.sw? + +# Optional eslint cache +.eslintcache +# Local Netlify folder +.netlify diff --git a/.lintstagedrc b/.lintstagedrc new file mode 100644 index 000000000..4df15fd78 --- /dev/null +++ b/.lintstagedrc @@ -0,0 +1,5 @@ +{ + "**/*.+(ts|js|vue)": [ + "eslint --cache --fix" + ] +} diff --git a/.nvmrc b/.nvmrc index f29b55f37..e8b25b544 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -v10.13.0 \ No newline at end of file +v18.14.2 \ No newline at end of file diff --git a/.postcssrc.js b/.postcssrc.js deleted file mode 100644 index 48c2867ab..000000000 --- a/.postcssrc.js +++ /dev/null @@ -1,14 +0,0 @@ -const postcssPresetEnv = require('postcss-preset-env'); -// const purgecss = require('@fullhuman/postcss-purgecss'); - -module.exports = { - plugins: [ - postcssPresetEnv({ - stage: 2, - features: { - 'nesting-rules': true, - }, - }), - require('autoprefixer'), - ], -}; diff --git a/.prettierrc b/.prettierrc index 4ad492165..a9f373403 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,7 +1,11 @@ { - "useTabs": false, + "arrowParens": "avoid", + "endOfLine": "auto", + "importOrder": ["^components/(.*)$", "^[./]"], + "importOrderSortSpecifiers": true, + "printWidth": 80, + "semi": true, "singleQuote": true, "trailingComma": "all", - "arrowParens": "avoid", - "printWidth": 80 + "useTabs": false } diff --git a/CHANGELOG.md b/CHANGELOG.md old mode 100644 new mode 100755 index a617eb054..6a3ac0e16 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1 +1,117 @@ -Visit the [docs site](https://vcalendar.io/changelog/v1.0.html) for all changelog info. +## 3.0.0-alpha.7 + +### Bug Fixes + +* Fix defaults when using plugin +* Fix `iso` mask +* Fix broken navigation state when using `max-date` +* Fix double arrows appearing in time picker when using Tailwind reset styles + +### Improvements + +* Add `valid-hours` prop for time picker + +## 3.0.0-alpha.8 + +### Bug Fixes + +* Fix `valid-hours` and `minute-increment` props for input slot usage +* Fix bug where date picker would reset `null` dates + +### Improvements + +* Allow separate `valid-hours` and `minute-increment` for range dates + +## 3.0.0 + +### Calendar + +* Add `view` prop to display weekly calendars +* Add `initial-page` and `initial-page-position` props +* Deprecate `from-page`, `from-date`, `to-page`, `to-date` props in lieu of `initial-page` +* Add `moveBy` method to move by number of pages +* Emit native `event` as 2nd argument for day and week events (`dayclick`, `daymouseenter`, `daymouseleave`, `dayfocusin`, `dayfocusout`, `daykeydown`, `weeknumberclick`) +* Rename `SetupCalendar` export to `setupCalendar` + +### Date Picker + +* Add `rules` prop for limiting `hours`, `minutes`, `seconds` and `milliseconds` +* Deprecate `valid-hours` and `minute-increment` props in lieu of `rules` +* Deprecate `modelConfig` prop in lieu of `number` and `string` model modifiers +* Soft deprecate `is-range` prop in lieu of `range` model modifier +* Add `time-accuracy` prop to allow selecting seconds and milliseconds components in time picker +* Major redesign of `TimePicker` to fit more time component selections +* Deprecate `update-layout` slot prop as it is no longer needed + +## 3.0.1 + +### Calendar + +* Add missing `type=button` attribute to navigation buttons + +## 3.0.2 + +### Bug Fixes + +* Include `attributes` within day event objects +* Fix date normalization bug when clearing input fields +* Fix `day-content` slot + +## 3.0.3 + +## Bug Fixes + +* Fix `header-title`, `header-prev-button`, `header-next-button`, `nav-prev-button` and `nav-next-button` slots + +## Improvements + +* Improve header elements/styling + +## 3.1.0 + +### Project + +* Add prettier plugin to sort imports +* Clean up unused helper methods, refactor out createGuid +* Use symbols in lieu of GUIDs +* Fixes type declaration +* Bump `.nvm` version to 18.14.2 + +### Calendar + +* Group calendar components in Calendar directory +* Group calendar grid components in CalendarGrid directory +* CalendarPane => CalendarPage +* Adds `header-title-wrapper` slot +* Fixes `disabledDates` prop usage + +### DatePicker + +* Refactors from render function to templates to play nice with vue-test-utils +* Refactors mounting method in tests +* Fixes bug not passing minDate and maxDate to Calendar +* Fixes `footer` slot for `dateTime` mode +* Adds slot tests +* Removes `await` for datepicker mount in tests + +## 3.1.1 + +## Calendar + +* Fixes bug when auto-assigning attribute keys + +### DatePicker + +* Add tests for time picker +* Add class for time select components +* Fix bug where value not cleared when toggling `range` mode + +## 3.1.2 + +## Bug Fixes + +* Fixes date normalization when using different locales + +## Improvements + +* Updates `date-fns-tz` to 2.0 \ No newline at end of file diff --git a/README.md b/README.md index e5a45f5d5..97403365c 100644 --- a/README.md +++ b/README.md @@ -1,55 +1,142 @@ -

- - - -
- An elegant calendar and datepicker plugin for Vuejs. -

+# VCalendar Plugin for Vue 3 -

- Total Downloads - Latest Release - Next Release - License -

+A calendar and date picker plugin for [Vue.js](https://vuejs.org). ------- +[Vue.js](https://vuejs.org) 3.2+, [Popper.js](https://popper.js.org/docs/v2/) 2.0+ are required. -```bash -npm i --save v-calendar +## Install Plugin + +### NPM + +```shell +npm install v-calendar@next @popperjs/core +``` + +### Yarn + +```shell +yarn add v-calendar@next @popperjs/core +``` + +## Use Plugin + +:warning: **As of `v3.0.0-alpha.7`, all installation methods require manual import of component styles. This is due to Vite build restrictions in libary mode.** + +```js +import 'v-calendar/style.css'; +``` + +### Method 1: Use Globally + +```js +import VCalendar from 'v-calendar'; +import 'v-calendar/style.css'; + +// Use plugin with optional defaults +app.use(VCalendar, {}) +``` + +```html + + +``` + +### Method 2: Use Components Globally + +```js +// main.js +import { setupCalendar, Calendar, DatePicker } from 'v-calendar'; +import 'v-calendar/style.css'; + +// Use plugin defaults (optional) +app.use(setupCalendar, {}) + +// Use the components +app.component('VCalendar', Calendar) +app.component('VDatePicker', DatePicker) +``` + +```html + + +``` + +### Method 3: Use Components As Needed + +```js +// main.js +import { setupCalendar } from 'v-calendar'; + +// Use calendar defaults (optional) +app.use(setupCalendar, {}) +``` + +```vue + + + + ``` -## Documentation +## Source setup -For full documentation, visit [vcalendar.io](https://vcalendar.io/). +Please follow below mentioned steps to clone and build this project: -### Attributes +### Clone the repo -| Highlights | Dots | -| :---: | :---: | -| | | +```sh +git clone https://github.com/nathanreyes/v-calendar -| Bars | Popovers | -| :---: | :---: | -| | | +# Move to directory +cd v-calendar +``` -### Multi-Paned Calendars +### Install dependencies - +```sh +yarn +``` -### Theme Colors & Dark-Mode +### Build library -| | | -| :---: | :---: | -| | | -| | | +```sh +# Types, ES, ESM, CommonJS, IIFE +yarn build +``` -### Date Pickers +### Lint and fix files -| **Single Date** | **Multiple Date** | **Date Range** | -| :---: | :---: | :---: | -| | | | +```sh +yarn lint +``` -### Custom Calendars w/ Scoped Slots +### Test library - +```sh +# Types, ES, ESM, CommonJS, IIFE +yarn test +``` \ No newline at end of file diff --git a/build/build.ts b/build/build.ts new file mode 100644 index 000000000..6622073ca --- /dev/null +++ b/build/build.ts @@ -0,0 +1,24 @@ +import { execSync } from 'child_process'; +import fs from 'fs'; +import { type BuildFormat } from './configs/vite.common'; + +const formats: BuildFormat[] = ['es', 'mjs', 'cjs', 'iife']; + +async function executeBuild() { + // Build types + execSync('vue-tsc --declaration --emitDeclarationOnly --outDir dist/types', { + stdio: 'inherit', + }); + + // Build lib with formats + for (const format of formats) { + execSync(`vite build --config ./build/configs/vite.${format}.ts`, { + stdio: 'inherit', + }); + } + + // Copy css to root + fs.copyFileSync('dist/es/style.css', 'dist/style.css'); +} + +executeBuild(); diff --git a/build/configs/vite.cjs.ts b/build/configs/vite.cjs.ts new file mode 100644 index 000000000..9d65eadca --- /dev/null +++ b/build/configs/vite.cjs.ts @@ -0,0 +1,6 @@ +import { defineConfig } from 'vite'; +import { createViteConfig } from './vite.common'; + +export default defineConfig({ + ...createViteConfig('cjs'), +}); diff --git a/build/configs/vite.common.ts b/build/configs/vite.common.ts new file mode 100644 index 000000000..517212c81 --- /dev/null +++ b/build/configs/vite.common.ts @@ -0,0 +1,104 @@ +import vue from '@vitejs/plugin-vue'; +import { lstatSync, readdirSync } from 'fs'; +import path from 'path'; +import type { RollupOptions } from 'rollup'; +import { visualizer } from 'rollup-plugin-visualizer'; +import { type InlineConfig } from 'vite'; + +export type BuildFormat = 'es' | 'mjs' | 'cjs' | 'iife'; + +export const resolve = { + alias: { + '@': path.resolve(process.cwd(), 'src'), + '~/': path.resolve(process.cwd(), 'src'), + }, +}; + +export const readDirRecursive = (path: string): string[] => { + return readdirSync(path).reduce((acc, entry) => { + const p = `${path}/${entry}`; + if (lstatSync(p).isDirectory()) { + return [...acc, ...readDirRecursive(p)]; + } + return [...acc, p]; + }, []); +}; + +const rollupOptions: RollupOptions = { + external: ['vue', '@popperjs/core'], + output: { + // Provide global variables to use in the UMD build + // for externalized deps + globals: { + vue: 'Vue', + '@popperjs/core': 'PopperCore', + }, + }, +}; + +const rollupMjsBuildOptions: RollupOptions = { + input: path.resolve(process.cwd(), 'src/index.ts'), + output: { + sourcemap: true, + dir: 'dist/mjs', + format: 'esm', + entryFileNames: '[name].mjs', + chunkFileNames: '[name].mjs', + assetFileNames: '[name].[ext]', + }, +}; + +export function createViteConfig(format: BuildFormat): InlineConfig { + const isEs = format === 'es'; + const isEsm = ['es', 'mjs'].includes(format); + const isNode = format === 'mjs'; + const useTerser = format === 'iife'; + + const config: InlineConfig = { + resolve, + build: { + outDir: `dist/${format}`, + cssCodeSplit: !isEsm, + sourcemap: true, + lib: { + entry: path.resolve(process.cwd(), 'src/index.ts'), + fileName: () => 'index.js', + formats: [isNode ? 'es' : format], + // Only for iife/umd + name: 'VCalendar', + }, + rollupOptions: isNode + ? { ...rollupOptions, ...rollupMjsBuildOptions } + : rollupOptions, + // default esbuild, not available for esm format in lib mode + minify: useTerser ? 'terser' : false, + terserOptions: useTerser + ? { + // https://stackoverflow.com/questions/57720816/rails-webpacker-terser-keep-fnames + // disable mangling class names (for vue class component) + keep_classnames: true, + // disable mangling functions names + keep_fnames: true, + } + : undefined, + }, + plugins: [ + vue({ + isProduction: true, + exclude: [/\.md$/, /\.spec\.ts$/, /\.spec\.disabled$/], + }), + ], + }; + + // Add visualizer for es build + if (isEs) { + config.plugins!.push( + visualizer({ + filename: 'dist/stats.html', + title: 'V-Calendar Visualizer', + }), + ); + } + + return config; +} diff --git a/build/configs/vite.es.ts b/build/configs/vite.es.ts new file mode 100644 index 000000000..5a1b01859 --- /dev/null +++ b/build/configs/vite.es.ts @@ -0,0 +1,6 @@ +import { defineConfig } from 'vite'; +import { createViteConfig } from './vite.common'; + +export default defineConfig({ + ...createViteConfig('es'), +}); diff --git a/build/configs/vite.iife.ts b/build/configs/vite.iife.ts new file mode 100644 index 000000000..0479ad1a7 --- /dev/null +++ b/build/configs/vite.iife.ts @@ -0,0 +1,6 @@ +import { defineConfig } from 'vite'; +import { createViteConfig } from './vite.common'; + +export default defineConfig({ + ...createViteConfig('iife'), +}); diff --git a/build/configs/vite.mjs.ts b/build/configs/vite.mjs.ts new file mode 100644 index 000000000..666eff9af --- /dev/null +++ b/build/configs/vite.mjs.ts @@ -0,0 +1,6 @@ +import { defineConfig } from 'vite'; +import { createViteConfig } from './vite.common'; + +export default defineConfig({ + ...createViteConfig('mjs'), +}); diff --git a/docs/.vitepress/components/Example.vue b/docs/.vitepress/components/Example.vue new file mode 100644 index 000000000..8c4860e6d --- /dev/null +++ b/docs/.vitepress/components/Example.vue @@ -0,0 +1,18 @@ + + diff --git a/docs/.vitepress/components/base/BaseAlert.vue b/docs/.vitepress/components/base/BaseAlert.vue new file mode 100644 index 000000000..013d570d8 --- /dev/null +++ b/docs/.vitepress/components/base/BaseAlert.vue @@ -0,0 +1,85 @@ + + + diff --git a/docs/.vitepress/components/base/BaseButton.vue b/docs/.vitepress/components/base/BaseButton.vue new file mode 100644 index 000000000..545822e6b --- /dev/null +++ b/docs/.vitepress/components/base/BaseButton.vue @@ -0,0 +1,24 @@ + + + diff --git a/docs/.vitepress/components/base/BaseField.vue b/docs/.vitepress/components/base/BaseField.vue new file mode 100644 index 000000000..332f8686c --- /dev/null +++ b/docs/.vitepress/components/base/BaseField.vue @@ -0,0 +1,17 @@ + + + diff --git a/docs/.vitepress/components/base/BaseInput.vue b/docs/.vitepress/components/base/BaseInput.vue new file mode 100644 index 000000000..e5ac6489c --- /dev/null +++ b/docs/.vitepress/components/base/BaseInput.vue @@ -0,0 +1,5 @@ + diff --git a/docs/.vitepress/components/base/BaseLinkButton.vue b/docs/.vitepress/components/base/BaseLinkButton.vue new file mode 100644 index 000000000..ebcf3c8c8 --- /dev/null +++ b/docs/.vitepress/components/base/BaseLinkButton.vue @@ -0,0 +1,36 @@ + + + diff --git a/docs/.vitepress/components/base/BasePicker.vue b/docs/.vitepress/components/base/BasePicker.vue new file mode 100644 index 000000000..86fdc409e --- /dev/null +++ b/docs/.vitepress/components/base/BasePicker.vue @@ -0,0 +1,52 @@ + + + diff --git a/docs/.vitepress/components/base/BaseRangeInput.vue b/docs/.vitepress/components/base/BaseRangeInput.vue new file mode 100644 index 000000000..843a9479f --- /dev/null +++ b/docs/.vitepress/components/base/BaseRangeInput.vue @@ -0,0 +1,17 @@ + + + diff --git a/docs/.vitepress/components/base/BaseSelect.vue b/docs/.vitepress/components/base/BaseSelect.vue new file mode 100644 index 000000000..f13fbed92 --- /dev/null +++ b/docs/.vitepress/components/base/BaseSelect.vue @@ -0,0 +1,37 @@ + + + diff --git a/docs/.vitepress/components/base/BaseSwitch.vue b/docs/.vitepress/components/base/BaseSwitch.vue new file mode 100644 index 000000000..efebffc15 --- /dev/null +++ b/docs/.vitepress/components/base/BaseSwitch.vue @@ -0,0 +1,44 @@ + + + diff --git a/docs/.vitepress/components/base/BaseTab.vue b/docs/.vitepress/components/base/BaseTab.vue new file mode 100644 index 000000000..c81a33d20 --- /dev/null +++ b/docs/.vitepress/components/base/BaseTab.vue @@ -0,0 +1,18 @@ + + diff --git a/docs/.vitepress/components/base/BaseTabList.vue b/docs/.vitepress/components/base/BaseTabList.vue new file mode 100644 index 000000000..254bed7c9 --- /dev/null +++ b/docs/.vitepress/components/base/BaseTabList.vue @@ -0,0 +1,26 @@ + + + diff --git a/docs/.vitepress/components/base/BaseTabPanel.vue b/docs/.vitepress/components/base/BaseTabPanel.vue new file mode 100644 index 000000000..6f58996a8 --- /dev/null +++ b/docs/.vitepress/components/base/BaseTabPanel.vue @@ -0,0 +1,12 @@ + + diff --git a/docs/.vitepress/components/base/BaseTabPanels.vue b/docs/.vitepress/components/base/BaseTabPanels.vue new file mode 100644 index 000000000..0a5fe59f1 --- /dev/null +++ b/docs/.vitepress/components/base/BaseTabPanels.vue @@ -0,0 +1,26 @@ + + + diff --git a/docs/.vitepress/components/base/BaseTabs.vue b/docs/.vitepress/components/base/BaseTabs.vue new file mode 100644 index 000000000..77888adb2 --- /dev/null +++ b/docs/.vitepress/components/base/BaseTabs.vue @@ -0,0 +1,37 @@ + + + + + diff --git a/docs/.vitepress/components/calendar/AttributesBars.vue b/docs/.vitepress/components/calendar/AttributesBars.vue new file mode 100644 index 000000000..4606cf880 --- /dev/null +++ b/docs/.vitepress/components/calendar/AttributesBars.vue @@ -0,0 +1,36 @@ + + + diff --git a/docs/.vitepress/components/calendar/AttributesContent.vue b/docs/.vitepress/components/calendar/AttributesContent.vue new file mode 100644 index 000000000..f1d651ffd --- /dev/null +++ b/docs/.vitepress/components/calendar/AttributesContent.vue @@ -0,0 +1,37 @@ + + + diff --git a/docs/.vuepress/components/guide/attributes/dot.vue b/docs/.vitepress/components/calendar/AttributesDot.vue similarity index 72% rename from docs/.vuepress/components/guide/attributes/dot.vue rename to docs/.vitepress/components/calendar/AttributesDot.vue index 123901c83..1bb57de5b 100644 --- a/docs/.vuepress/components/guide/attributes/dot.vue +++ b/docs/.vitepress/components/calendar/AttributesDot.vue @@ -1,7 +1,5 @@ \ No newline at end of file + diff --git a/docs/.vitepress/components/calendar/AttributesDots.vue b/docs/.vitepress/components/calendar/AttributesDots.vue new file mode 100644 index 000000000..b231ca1ae --- /dev/null +++ b/docs/.vitepress/components/calendar/AttributesDots.vue @@ -0,0 +1,41 @@ + + + diff --git a/docs/.vitepress/components/calendar/AttributesHighlight.vue b/docs/.vitepress/components/calendar/AttributesHighlight.vue new file mode 100644 index 000000000..adf82a72d --- /dev/null +++ b/docs/.vitepress/components/calendar/AttributesHighlight.vue @@ -0,0 +1,15 @@ + + + diff --git a/docs/.vuepress/components/guide/attributes/highlight-color.vue b/docs/.vitepress/components/calendar/AttributesHighlightColor.vue similarity index 72% rename from docs/.vuepress/components/guide/attributes/highlight-color.vue rename to docs/.vitepress/components/calendar/AttributesHighlightColor.vue index 6d6d1e3cd..f6c382a57 100644 --- a/docs/.vuepress/components/guide/attributes/highlight-color.vue +++ b/docs/.vitepress/components/calendar/AttributesHighlightColor.vue @@ -1,7 +1,5 @@ \ No newline at end of file + diff --git a/docs/.vitepress/components/calendar/AttributesHighlightCustom.vue b/docs/.vitepress/components/calendar/AttributesHighlightCustom.vue new file mode 100644 index 000000000..88555a627 --- /dev/null +++ b/docs/.vitepress/components/calendar/AttributesHighlightCustom.vue @@ -0,0 +1,36 @@ + + + diff --git a/docs/.vitepress/components/calendar/AttributesHighlightRange.vue b/docs/.vitepress/components/calendar/AttributesHighlightRange.vue new file mode 100644 index 000000000..9d0943a93 --- /dev/null +++ b/docs/.vitepress/components/calendar/AttributesHighlightRange.vue @@ -0,0 +1,21 @@ + + + diff --git a/docs/.vitepress/components/calendar/AttributesIntro.vue b/docs/.vitepress/components/calendar/AttributesIntro.vue new file mode 100644 index 000000000..0ec68b991 --- /dev/null +++ b/docs/.vitepress/components/calendar/AttributesIntro.vue @@ -0,0 +1,94 @@ + + + diff --git a/docs/.vitepress/components/calendar/AttributesPopoverLabels.vue b/docs/.vitepress/components/calendar/AttributesPopoverLabels.vue new file mode 100644 index 000000000..4b3aa0583 --- /dev/null +++ b/docs/.vitepress/components/calendar/AttributesPopoverLabels.vue @@ -0,0 +1,45 @@ + + + diff --git a/docs/.vitepress/components/calendar/AttributesPopoverSlot.vue b/docs/.vitepress/components/calendar/AttributesPopoverSlot.vue new file mode 100644 index 000000000..07ece70af --- /dev/null +++ b/docs/.vitepress/components/calendar/AttributesPopoverSlot.vue @@ -0,0 +1,62 @@ + + + diff --git a/docs/.vitepress/components/calendar/CalendarReminders.vue b/docs/.vitepress/components/calendar/CalendarReminders.vue new file mode 100644 index 000000000..3d3e39e2a --- /dev/null +++ b/docs/.vitepress/components/calendar/CalendarReminders.vue @@ -0,0 +1,100 @@ + + diff --git a/docs/.vitepress/components/calendar/DatesDisabledBoundless.vue b/docs/.vitepress/components/calendar/DatesDisabledBoundless.vue new file mode 100644 index 000000000..bb543eadc --- /dev/null +++ b/docs/.vitepress/components/calendar/DatesDisabledBoundless.vue @@ -0,0 +1,9 @@ + + + diff --git a/docs/.vitepress/components/calendar/DatesRangeMultiple.vue b/docs/.vitepress/components/calendar/DatesRangeMultiple.vue new file mode 100644 index 000000000..c20356f23 --- /dev/null +++ b/docs/.vitepress/components/calendar/DatesRangeMultiple.vue @@ -0,0 +1,25 @@ + + + diff --git a/docs/.vitepress/components/calendar/DatesRangeSpan.vue b/docs/.vitepress/components/calendar/DatesRangeSpan.vue new file mode 100644 index 000000000..341d3fae1 --- /dev/null +++ b/docs/.vitepress/components/calendar/DatesRangeSpan.vue @@ -0,0 +1,14 @@ + + + diff --git a/docs/.vitepress/components/calendar/DatesRepeat.vue b/docs/.vitepress/components/calendar/DatesRepeat.vue new file mode 100644 index 000000000..d1dcaf419 --- /dev/null +++ b/docs/.vitepress/components/calendar/DatesRepeat.vue @@ -0,0 +1,88 @@ + + + diff --git a/docs/.vitepress/components/calendar/DatesSimpleMultiple.vue b/docs/.vitepress/components/calendar/DatesSimpleMultiple.vue new file mode 100644 index 000000000..06c13953a --- /dev/null +++ b/docs/.vitepress/components/calendar/DatesSimpleMultiple.vue @@ -0,0 +1,20 @@ + + + diff --git a/docs/.vitepress/components/calendar/DatesSimpleSingle.vue b/docs/.vitepress/components/calendar/DatesSimpleSingle.vue new file mode 100644 index 000000000..f74c65761 --- /dev/null +++ b/docs/.vitepress/components/calendar/DatesSimpleSingle.vue @@ -0,0 +1,14 @@ + + + diff --git a/docs/.vitepress/components/calendar/LayoutsFooterCalendar.vue b/docs/.vitepress/components/calendar/LayoutsFooterCalendar.vue new file mode 100644 index 000000000..dd9b44a8c --- /dev/null +++ b/docs/.vitepress/components/calendar/LayoutsFooterCalendar.vue @@ -0,0 +1,24 @@ + + + diff --git a/docs/.vitepress/components/calendar/LayoutsFooterDatePicker.vue b/docs/.vitepress/components/calendar/LayoutsFooterDatePicker.vue new file mode 100644 index 000000000..f63645594 --- /dev/null +++ b/docs/.vitepress/components/calendar/LayoutsFooterDatePicker.vue @@ -0,0 +1,22 @@ + + + diff --git a/docs/.vitepress/components/calendar/LayoutsResponsive.vue b/docs/.vitepress/components/calendar/LayoutsResponsive.vue new file mode 100644 index 000000000..5bda6e7ec --- /dev/null +++ b/docs/.vitepress/components/calendar/LayoutsResponsive.vue @@ -0,0 +1,14 @@ + + diff --git a/docs/.vitepress/components/calendar/LayoutsResponsiveExpanded.vue b/docs/.vitepress/components/calendar/LayoutsResponsiveExpanded.vue new file mode 100644 index 000000000..9b2520a5a --- /dev/null +++ b/docs/.vitepress/components/calendar/LayoutsResponsiveExpanded.vue @@ -0,0 +1,15 @@ + + diff --git a/docs/.vitepress/components/calendar/NavigationMove.vue b/docs/.vitepress/components/calendar/NavigationMove.vue new file mode 100644 index 000000000..98b01a080 --- /dev/null +++ b/docs/.vitepress/components/calendar/NavigationMove.vue @@ -0,0 +1,225 @@ + + + diff --git a/docs/.vitepress/components/calendar/NavigationMoveMonths.vue b/docs/.vitepress/components/calendar/NavigationMoveMonths.vue new file mode 100644 index 000000000..79ca79e66 --- /dev/null +++ b/docs/.vitepress/components/calendar/NavigationMoveMonths.vue @@ -0,0 +1,15 @@ + + diff --git a/docs/.vitepress/components/calendar/ThemeColors.vue b/docs/.vitepress/components/calendar/ThemeColors.vue new file mode 100644 index 000000000..75b6cf247 --- /dev/null +++ b/docs/.vitepress/components/calendar/ThemeColors.vue @@ -0,0 +1,139 @@ + + + diff --git a/docs/.vitepress/components/calendar/ThemeCustomColors.vue b/docs/.vitepress/components/calendar/ThemeCustomColors.vue new file mode 100644 index 000000000..f41fae868 --- /dev/null +++ b/docs/.vitepress/components/calendar/ThemeCustomColors.vue @@ -0,0 +1,32 @@ + + + + + diff --git a/docs/.vitepress/components/calendar/ThemeDarkModeManual.vue b/docs/.vitepress/components/calendar/ThemeDarkModeManual.vue new file mode 100644 index 000000000..9a03c034e --- /dev/null +++ b/docs/.vitepress/components/calendar/ThemeDarkModeManual.vue @@ -0,0 +1,15 @@ + + diff --git a/docs/.vitepress/components/calendar/ThemeDarkModeSys.vue b/docs/.vitepress/components/calendar/ThemeDarkModeSys.vue new file mode 100644 index 000000000..539fc8de3 --- /dev/null +++ b/docs/.vitepress/components/calendar/ThemeDarkModeSys.vue @@ -0,0 +1,5 @@ + diff --git a/docs/.vitepress/components/calendar/ThemeStyles.vue b/docs/.vitepress/components/calendar/ThemeStyles.vue new file mode 100644 index 000000000..08dd5fe77 --- /dev/null +++ b/docs/.vitepress/components/calendar/ThemeStyles.vue @@ -0,0 +1,17 @@ + + + + + diff --git a/docs/.vitepress/components/calendar/ThemeTransparent.vue b/docs/.vitepress/components/calendar/ThemeTransparent.vue new file mode 100644 index 000000000..8579b3b6a --- /dev/null +++ b/docs/.vitepress/components/calendar/ThemeTransparent.vue @@ -0,0 +1,10 @@ + diff --git a/docs/.vitepress/components/datepicker/DateDisabled.vue b/docs/.vitepress/components/datepicker/DateDisabled.vue new file mode 100644 index 000000000..0f0e4bd9f --- /dev/null +++ b/docs/.vitepress/components/datepicker/DateDisabled.vue @@ -0,0 +1,15 @@ + + + diff --git a/docs/.vitepress/components/datepicker/DateDisplay.vue b/docs/.vitepress/components/datepicker/DateDisplay.vue new file mode 100644 index 000000000..b45d178a6 --- /dev/null +++ b/docs/.vitepress/components/datepicker/DateDisplay.vue @@ -0,0 +1,82 @@ + + + diff --git a/docs/.vitepress/components/datepicker/DateInputDebounce.vue b/docs/.vitepress/components/datepicker/DateInputDebounce.vue new file mode 100644 index 000000000..a6653d1b6 --- /dev/null +++ b/docs/.vitepress/components/datepicker/DateInputDebounce.vue @@ -0,0 +1,12 @@ + + + diff --git a/docs/.vitepress/components/datepicker/DateInputDisableUpdate.vue b/docs/.vitepress/components/datepicker/DateInputDisableUpdate.vue new file mode 100644 index 000000000..39877fe15 --- /dev/null +++ b/docs/.vitepress/components/datepicker/DateInputDisableUpdate.vue @@ -0,0 +1,12 @@ + + + diff --git a/docs/.vitepress/components/datepicker/DateInputIntro.vue b/docs/.vitepress/components/datepicker/DateInputIntro.vue new file mode 100644 index 000000000..66abb52ac --- /dev/null +++ b/docs/.vitepress/components/datepicker/DateInputIntro.vue @@ -0,0 +1,12 @@ + + + diff --git a/docs/.vitepress/components/datepicker/DateInputLocale.vue b/docs/.vitepress/components/datepicker/DateInputLocale.vue new file mode 100644 index 000000000..628a799aa --- /dev/null +++ b/docs/.vitepress/components/datepicker/DateInputLocale.vue @@ -0,0 +1,17 @@ + + + diff --git a/docs/.vitepress/components/datepicker/DateInputMask.vue b/docs/.vitepress/components/datepicker/DateInputMask.vue new file mode 100644 index 000000000..e3f5b9673 --- /dev/null +++ b/docs/.vitepress/components/datepicker/DateInputMask.vue @@ -0,0 +1,15 @@ + + + diff --git a/docs/.vitepress/components/datepicker/DatePopoverCustom.vue b/docs/.vitepress/components/datepicker/DatePopoverCustom.vue new file mode 100644 index 000000000..ef56d6d93 --- /dev/null +++ b/docs/.vitepress/components/datepicker/DatePopoverCustom.vue @@ -0,0 +1,17 @@ + + + diff --git a/docs/.vitepress/components/datepicker/DatePopoverDefault.vue b/docs/.vitepress/components/datepicker/DatePopoverDefault.vue new file mode 100644 index 000000000..649fa507d --- /dev/null +++ b/docs/.vitepress/components/datepicker/DatePopoverDefault.vue @@ -0,0 +1,14 @@ + + + diff --git a/docs/.vitepress/components/datepicker/DatePopoverManual.vue b/docs/.vitepress/components/datepicker/DatePopoverManual.vue new file mode 100644 index 000000000..abab58ebf --- /dev/null +++ b/docs/.vitepress/components/datepicker/DatePopoverManual.vue @@ -0,0 +1,25 @@ + + diff --git a/docs/.vitepress/components/datepicker/DateRange.vue b/docs/.vitepress/components/datepicker/DateRange.vue new file mode 100644 index 000000000..df6c670b5 --- /dev/null +++ b/docs/.vitepress/components/datepicker/DateRange.vue @@ -0,0 +1,15 @@ + + + diff --git a/docs/.vitepress/components/datepicker/DateRangeDisabled.vue b/docs/.vitepress/components/datepicker/DateRangeDisabled.vue new file mode 100644 index 000000000..7ced9c4a2 --- /dev/null +++ b/docs/.vitepress/components/datepicker/DateRangeDisabled.vue @@ -0,0 +1,15 @@ + + + diff --git a/docs/.vitepress/components/datepicker/DateRangeInput.vue b/docs/.vitepress/components/datepicker/DateRangeInput.vue new file mode 100644 index 000000000..39a85b68c --- /dev/null +++ b/docs/.vitepress/components/datepicker/DateRangeInput.vue @@ -0,0 +1,16 @@ + + + diff --git a/docs/.vitepress/components/datepicker/DateRangePopover.vue b/docs/.vitepress/components/datepicker/DateRangePopover.vue new file mode 100644 index 000000000..3ac028d2c --- /dev/null +++ b/docs/.vitepress/components/datepicker/DateRangePopover.vue @@ -0,0 +1,32 @@ + + + diff --git a/docs/.vitepress/components/datepicker/DateRulesArray.vue b/docs/.vitepress/components/datepicker/DateRulesArray.vue new file mode 100644 index 000000000..7fe867e19 --- /dev/null +++ b/docs/.vitepress/components/datepicker/DateRulesArray.vue @@ -0,0 +1,12 @@ + + + diff --git a/docs/.vitepress/components/datepicker/DateRulesAuto.vue b/docs/.vitepress/components/datepicker/DateRulesAuto.vue new file mode 100644 index 000000000..8cc30ccc7 --- /dev/null +++ b/docs/.vitepress/components/datepicker/DateRulesAuto.vue @@ -0,0 +1,21 @@ + + + diff --git a/docs/.vitepress/components/datepicker/DateRulesDate.vue b/docs/.vitepress/components/datepicker/DateRulesDate.vue new file mode 100644 index 000000000..7c6e6480d --- /dev/null +++ b/docs/.vitepress/components/datepicker/DateRulesDate.vue @@ -0,0 +1,16 @@ + + + diff --git a/docs/.vitepress/components/datepicker/DateRulesFunction.vue b/docs/.vitepress/components/datepicker/DateRulesFunction.vue new file mode 100644 index 000000000..9ad3e58e4 --- /dev/null +++ b/docs/.vitepress/components/datepicker/DateRulesFunction.vue @@ -0,0 +1,17 @@ + + + diff --git a/docs/.vitepress/components/datepicker/DateRulesIntroDate.vue b/docs/.vitepress/components/datepicker/DateRulesIntroDate.vue new file mode 100644 index 000000000..71839aaa5 --- /dev/null +++ b/docs/.vitepress/components/datepicker/DateRulesIntroDate.vue @@ -0,0 +1,19 @@ + + + diff --git a/docs/.vitepress/components/datepicker/DateRulesIntroDateRange.vue b/docs/.vitepress/components/datepicker/DateRulesIntroDateRange.vue new file mode 100644 index 000000000..8a1493841 --- /dev/null +++ b/docs/.vitepress/components/datepicker/DateRulesIntroDateRange.vue @@ -0,0 +1,27 @@ + + + diff --git a/docs/.vitepress/components/datepicker/DateRulesIntroDefault.vue b/docs/.vitepress/components/datepicker/DateRulesIntroDefault.vue new file mode 100644 index 000000000..63eb8686c --- /dev/null +++ b/docs/.vitepress/components/datepicker/DateRulesIntroDefault.vue @@ -0,0 +1,14 @@ + + + diff --git a/docs/.vitepress/components/datepicker/DateRulesNumber.vue b/docs/.vitepress/components/datepicker/DateRulesNumber.vue new file mode 100644 index 000000000..c8b87bf7a --- /dev/null +++ b/docs/.vitepress/components/datepicker/DateRulesNumber.vue @@ -0,0 +1,18 @@ + + + diff --git a/docs/.vitepress/components/datepicker/DateRulesObject.vue b/docs/.vitepress/components/datepicker/DateRulesObject.vue new file mode 100644 index 000000000..26f0e0622 --- /dev/null +++ b/docs/.vitepress/components/datepicker/DateRulesObject.vue @@ -0,0 +1,12 @@ + + + diff --git a/docs/.vitepress/components/datepicker/DateRulesRange.vue b/docs/.vitepress/components/datepicker/DateRulesRange.vue new file mode 100644 index 000000000..ac288fde3 --- /dev/null +++ b/docs/.vitepress/components/datepicker/DateRulesRange.vue @@ -0,0 +1,9 @@ + + + diff --git a/docs/.vitepress/components/datepicker/DateSelectAttribute.vue b/docs/.vitepress/components/datepicker/DateSelectAttribute.vue new file mode 100644 index 000000000..9d606e406 --- /dev/null +++ b/docs/.vitepress/components/datepicker/DateSelectAttribute.vue @@ -0,0 +1,10 @@ + + + diff --git a/docs/.vitepress/components/datepicker/DateSimpleSlot.vue b/docs/.vitepress/components/datepicker/DateSimpleSlot.vue new file mode 100644 index 000000000..2bb218a86 --- /dev/null +++ b/docs/.vitepress/components/datepicker/DateSimpleSlot.vue @@ -0,0 +1,20 @@ + + + diff --git a/docs/.vitepress/components/datepicker/DateTimeAccuracy.vue b/docs/.vitepress/components/datepicker/DateTimeAccuracy.vue new file mode 100644 index 000000000..4a707cab5 --- /dev/null +++ b/docs/.vitepress/components/datepicker/DateTimeAccuracy.vue @@ -0,0 +1,14 @@ + + + diff --git a/docs/.vitepress/components/datepicker/DateWithValue.vue b/docs/.vitepress/components/datepicker/DateWithValue.vue new file mode 100644 index 000000000..872253cd0 --- /dev/null +++ b/docs/.vitepress/components/datepicker/DateWithValue.vue @@ -0,0 +1,15 @@ + + + diff --git a/docs/.vitepress/components/datepicker/ModelModifierNumber.vue b/docs/.vitepress/components/datepicker/ModelModifierNumber.vue new file mode 100644 index 000000000..e882b4dca --- /dev/null +++ b/docs/.vitepress/components/datepicker/ModelModifierNumber.vue @@ -0,0 +1,8 @@ + + + diff --git a/docs/.vitepress/components/datepicker/ModelModifierRange.vue b/docs/.vitepress/components/datepicker/ModelModifierRange.vue new file mode 100644 index 000000000..227ef9448 --- /dev/null +++ b/docs/.vitepress/components/datepicker/ModelModifierRange.vue @@ -0,0 +1,8 @@ + + + diff --git a/docs/.vitepress/components/datepicker/ModelModifierString.vue b/docs/.vitepress/components/datepicker/ModelModifierString.vue new file mode 100644 index 000000000..b632b2b07 --- /dev/null +++ b/docs/.vitepress/components/datepicker/ModelModifierString.vue @@ -0,0 +1,8 @@ + + + diff --git a/docs/.vitepress/components/datepicker/ModelModifierStringMask.vue b/docs/.vitepress/components/datepicker/ModelModifierStringMask.vue new file mode 100644 index 000000000..ddc40bb3a --- /dev/null +++ b/docs/.vitepress/components/datepicker/ModelModifierStringMask.vue @@ -0,0 +1,15 @@ + + + diff --git a/docs/.vitepress/components/datepicker/ModelModifiersRangeNumber.vue b/docs/.vitepress/components/datepicker/ModelModifiersRangeNumber.vue new file mode 100644 index 000000000..200b38f6d --- /dev/null +++ b/docs/.vitepress/components/datepicker/ModelModifiersRangeNumber.vue @@ -0,0 +1,8 @@ + + + diff --git a/docs/.vitepress/components/examples/DateRangeRules.vue b/docs/.vitepress/components/examples/DateRangeRules.vue new file mode 100644 index 000000000..47d517528 --- /dev/null +++ b/docs/.vitepress/components/examples/DateRangeRules.vue @@ -0,0 +1,17 @@ + + + diff --git a/docs/.vitepress/components/examples/DateRules.vue b/docs/.vitepress/components/examples/DateRules.vue new file mode 100644 index 000000000..74b04613a --- /dev/null +++ b/docs/.vitepress/components/examples/DateRules.vue @@ -0,0 +1,15 @@ + + + diff --git a/docs/.vitepress/components/examples/DateTodayButton.vue b/docs/.vitepress/components/examples/DateTodayButton.vue new file mode 100644 index 000000000..08b5e5aaa --- /dev/null +++ b/docs/.vitepress/components/examples/DateTodayButton.vue @@ -0,0 +1,23 @@ + + + diff --git a/docs/.vitepress/components/examples/ExampleDateForm.vue b/docs/.vitepress/components/examples/ExampleDateForm.vue new file mode 100644 index 000000000..edb75b623 --- /dev/null +++ b/docs/.vitepress/components/examples/ExampleDateForm.vue @@ -0,0 +1,58 @@ + + + diff --git a/docs/.vitepress/components/examples/ExampleGrid.vue b/docs/.vitepress/components/examples/ExampleGrid.vue new file mode 100644 index 000000000..3070dc794 --- /dev/null +++ b/docs/.vitepress/components/examples/ExampleGrid.vue @@ -0,0 +1,141 @@ + + + diff --git a/docs/.vitepress/components/github/Github1171.vue b/docs/.vitepress/components/github/Github1171.vue new file mode 100644 index 000000000..977c5fa98 --- /dev/null +++ b/docs/.vitepress/components/github/Github1171.vue @@ -0,0 +1,40 @@ + + + diff --git a/docs/.vitepress/components/github/Github1270.vue b/docs/.vitepress/components/github/Github1270.vue new file mode 100644 index 000000000..c0ca4b94d --- /dev/null +++ b/docs/.vitepress/components/github/Github1270.vue @@ -0,0 +1,23 @@ + + diff --git a/docs/.vitepress/components/github/Github1276.vue b/docs/.vitepress/components/github/Github1276.vue new file mode 100644 index 000000000..e757dd71f --- /dev/null +++ b/docs/.vitepress/components/github/Github1276.vue @@ -0,0 +1,13 @@ + diff --git a/docs/.vitepress/components/github/Github1277.vue b/docs/.vitepress/components/github/Github1277.vue new file mode 100644 index 000000000..23f9e4aaf --- /dev/null +++ b/docs/.vitepress/components/github/Github1277.vue @@ -0,0 +1,30 @@ + + + diff --git a/docs/.vitepress/components/github/Github1387.vue b/docs/.vitepress/components/github/Github1387.vue new file mode 100644 index 000000000..8f3ee3be5 --- /dev/null +++ b/docs/.vitepress/components/github/Github1387.vue @@ -0,0 +1,17 @@ + + + diff --git a/docs/.vitepress/components/home/HeroCalendarBars.vue b/docs/.vitepress/components/home/HeroCalendarBars.vue new file mode 100644 index 000000000..4606cf880 --- /dev/null +++ b/docs/.vitepress/components/home/HeroCalendarBars.vue @@ -0,0 +1,36 @@ + + + diff --git a/docs/.vitepress/components/home/HeroCalendarDots.vue b/docs/.vitepress/components/home/HeroCalendarDots.vue new file mode 100644 index 000000000..b231ca1ae --- /dev/null +++ b/docs/.vitepress/components/home/HeroCalendarDots.vue @@ -0,0 +1,41 @@ + + + diff --git a/docs/.vitepress/components/home/HeroCalendarHighlights.vue b/docs/.vitepress/components/home/HeroCalendarHighlights.vue new file mode 100644 index 000000000..a942f5ed3 --- /dev/null +++ b/docs/.vitepress/components/home/HeroCalendarHighlights.vue @@ -0,0 +1,21 @@ + + + diff --git a/docs/.vitepress/components/home/HomeDatePicker.vue b/docs/.vitepress/components/home/HomeDatePicker.vue new file mode 100644 index 000000000..f90551956 --- /dev/null +++ b/docs/.vitepress/components/home/HomeDatePicker.vue @@ -0,0 +1,58 @@ + + + diff --git a/docs/.vitepress/components/home/HomeFeatures.vue b/docs/.vitepress/components/home/HomeFeatures.vue new file mode 100644 index 000000000..4cbcf2511 --- /dev/null +++ b/docs/.vitepress/components/home/HomeFeatures.vue @@ -0,0 +1,80 @@ + + + diff --git a/docs/.vitepress/components/home/HomeHeaderButton.vue b/docs/.vitepress/components/home/HomeHeaderButton.vue new file mode 100644 index 000000000..7fa91bec5 --- /dev/null +++ b/docs/.vitepress/components/home/HomeHeaderButton.vue @@ -0,0 +1,26 @@ + + + diff --git a/docs/.vitepress/components/home/HomeHero.vue b/docs/.vitepress/components/home/HomeHero.vue new file mode 100644 index 000000000..42fef99e4 --- /dev/null +++ b/docs/.vitepress/components/home/HomeHero.vue @@ -0,0 +1,39 @@ + diff --git a/docs/.vitepress/components/home/HomeReminders.vue b/docs/.vitepress/components/home/HomeReminders.vue new file mode 100644 index 000000000..874716597 --- /dev/null +++ b/docs/.vitepress/components/home/HomeReminders.vue @@ -0,0 +1,46 @@ + diff --git a/docs/.vitepress/components/home/HomeTab.vue b/docs/.vitepress/components/home/HomeTab.vue new file mode 100644 index 000000000..7f5d20946 --- /dev/null +++ b/docs/.vitepress/components/home/HomeTab.vue @@ -0,0 +1,29 @@ + + + diff --git a/docs/.vitepress/components/home/HomeTabPanel.vue b/docs/.vitepress/components/home/HomeTabPanel.vue new file mode 100644 index 000000000..f2e1becec --- /dev/null +++ b/docs/.vitepress/components/home/HomeTabPanel.vue @@ -0,0 +1,10 @@ + + + diff --git a/docs/.vitepress/components/i18n/TimezonesAttributes.vue b/docs/.vitepress/components/i18n/TimezonesAttributes.vue new file mode 100644 index 000000000..e79cae104 --- /dev/null +++ b/docs/.vitepress/components/i18n/TimezonesAttributes.vue @@ -0,0 +1,42 @@ + + + diff --git a/docs/.vitepress/components/i18n/TimezonesPickerTime.vue b/docs/.vitepress/components/i18n/TimezonesPickerTime.vue new file mode 100644 index 000000000..e02ae7c61 --- /dev/null +++ b/docs/.vitepress/components/i18n/TimezonesPickerTime.vue @@ -0,0 +1,19 @@ + + + diff --git a/docs/.vitepress/components/i18n/TimezonesRules.vue b/docs/.vitepress/components/i18n/TimezonesRules.vue new file mode 100644 index 000000000..8e763ce80 --- /dev/null +++ b/docs/.vitepress/components/i18n/TimezonesRules.vue @@ -0,0 +1,17 @@ + + + diff --git a/docs/.vitepress/components/icons/IconAlertTriangle.vue b/docs/.vitepress/components/icons/IconAlertTriangle.vue new file mode 100644 index 000000000..14d385501 --- /dev/null +++ b/docs/.vitepress/components/icons/IconAlertTriangle.vue @@ -0,0 +1,20 @@ + diff --git a/docs/.vitepress/components/icons/IconArrowRight.vue b/docs/.vitepress/components/icons/IconArrowRight.vue new file mode 100644 index 000000000..68be923e1 --- /dev/null +++ b/docs/.vitepress/components/icons/IconArrowRight.vue @@ -0,0 +1,15 @@ + diff --git a/docs/.vitepress/components/icons/IconBell.vue b/docs/.vitepress/components/icons/IconBell.vue new file mode 100644 index 000000000..15d5652bc --- /dev/null +++ b/docs/.vitepress/components/icons/IconBell.vue @@ -0,0 +1,16 @@ + diff --git a/docs/.vitepress/components/icons/IconCake.vue b/docs/.vitepress/components/icons/IconCake.vue new file mode 100644 index 000000000..c5828a6a8 --- /dev/null +++ b/docs/.vitepress/components/icons/IconCake.vue @@ -0,0 +1,12 @@ + diff --git a/docs/.vitepress/components/icons/IconCalendar.vue b/docs/.vitepress/components/icons/IconCalendar.vue new file mode 100644 index 000000000..f1a07352c --- /dev/null +++ b/docs/.vitepress/components/icons/IconCalendar.vue @@ -0,0 +1,19 @@ + diff --git a/docs/.vitepress/components/icons/IconCheckCircle.vue b/docs/.vitepress/components/icons/IconCheckCircle.vue new file mode 100644 index 000000000..364f53a23 --- /dev/null +++ b/docs/.vitepress/components/icons/IconCheckCircle.vue @@ -0,0 +1,17 @@ + diff --git a/docs/.vitepress/components/icons/IconExternalLink.vue b/docs/.vitepress/components/icons/IconExternalLink.vue new file mode 100644 index 000000000..bb0025a40 --- /dev/null +++ b/docs/.vitepress/components/icons/IconExternalLink.vue @@ -0,0 +1,15 @@ + diff --git a/docs/.vitepress/components/icons/IconHeart.vue b/docs/.vitepress/components/icons/IconHeart.vue new file mode 100644 index 000000000..85a009e7b --- /dev/null +++ b/docs/.vitepress/components/icons/IconHeart.vue @@ -0,0 +1,12 @@ + diff --git a/docs/.vitepress/components/icons/IconInfo.vue b/docs/.vitepress/components/icons/IconInfo.vue new file mode 100644 index 000000000..60239326d --- /dev/null +++ b/docs/.vitepress/components/icons/IconInfo.vue @@ -0,0 +1,18 @@ + diff --git a/docs/.vitepress/components/icons/IconVideoCamera.vue b/docs/.vitepress/components/icons/IconVideoCamera.vue new file mode 100644 index 000000000..6c7a8e581 --- /dev/null +++ b/docs/.vitepress/components/icons/IconVideoCamera.vue @@ -0,0 +1,12 @@ + diff --git a/docs/.vitepress/components/icons/IconXOctagon.vue b/docs/.vitepress/components/icons/IconXOctagon.vue new file mode 100644 index 000000000..1a8b47f82 --- /dev/null +++ b/docs/.vitepress/components/icons/IconXOctagon.vue @@ -0,0 +1,20 @@ + diff --git a/docs/.vitepress/components/pickers/DateModePicker.vue b/docs/.vitepress/components/pickers/DateModePicker.vue new file mode 100644 index 000000000..f5d11500a --- /dev/null +++ b/docs/.vitepress/components/pickers/DateModePicker.vue @@ -0,0 +1,22 @@ + + + diff --git a/docs/.vitepress/components/pickers/FullTimezonePicker.vue b/docs/.vitepress/components/pickers/FullTimezonePicker.vue new file mode 100644 index 000000000..82dcdf309 --- /dev/null +++ b/docs/.vitepress/components/pickers/FullTimezonePicker.vue @@ -0,0 +1,67 @@ + + + diff --git a/docs/.vitepress/components/pickers/TimeAccuracyPicker.vue b/docs/.vitepress/components/pickers/TimeAccuracyPicker.vue new file mode 100644 index 000000000..f54f6432f --- /dev/null +++ b/docs/.vitepress/components/pickers/TimeAccuracyPicker.vue @@ -0,0 +1,26 @@ + + + diff --git a/docs/.vitepress/components/pickers/TimezonePicker.vue b/docs/.vitepress/components/pickers/TimezonePicker.vue new file mode 100644 index 000000000..7ac184986 --- /dev/null +++ b/docs/.vitepress/components/pickers/TimezonePicker.vue @@ -0,0 +1,18 @@ + + + diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts new file mode 100644 index 000000000..715814ec1 --- /dev/null +++ b/docs/.vitepress/config.ts @@ -0,0 +1,209 @@ +import { version } from '../../package.json'; +import { fileURLToPath, URL } from 'node:url'; +import path from 'path'; +import { defineConfig } from 'vitepress'; + +function nav() { + return [ + { + text: version, + items: [ + { + text: 'Changelog', + link: 'https://github.com/nathanreyes/v-calendar/blob/v3/CHANGELOG.md', + }, + { text: '2.0', link: 'https://v2--vcalendar.netlify.app/' }, + ], + }, + ]; +} + +function sidebar() { + return { + '/examples/': [ + { + text: 'Calendar', + items: [], + }, + { + text: 'Date Picker', + items: [ + { + text: 'Time Rules', + link: '/examples/date-picker-time-rules', + }, + { + text: 'Popovers', + link: '/examples/date-picker-popovers', + }, + { + text: 'Footer Content', + link: '/examples/date-picker-footer', + }, + ], + }, + { + text: 'Event Calendar', + items: [ + { + text: 'Event Calendar', + link: '/examples/event-calendar', + }, + ], + }, + ], + '/': [ + // Getting Started + { + text: 'Getting Started', + items: [ + { text: 'Installation', link: '/getting-started/installation' }, + { + text: 'Upgrade Guide', + link: '/getting-started/upgrade-guide', + }, + ], + }, + // Calendar + { + text: 'Calendar', + items: [ + { + text: 'Theme', + link: '/calendar/theme', + }, + { + text: 'Layouts', + link: '/calendar/layouts', + }, + { + text: 'Navigation', + link: '/calendar/navigation', + }, + { + text: 'Attributes', + link: '/calendar/attributes', + }, + { + text: 'Dates', + link: '/calendar/dates', + }, + { + text: 'API', + link: '/calendar/api', + }, + ], + }, + // Date Picker + { + text: 'Date Picker', + items: [ + { + text: 'Basics', + link: '/datepicker/basics', + }, + { + text: 'Time Picker', + link: '/datepicker/time-picker', + }, + { + text: 'Time Rules', + link: '/datepicker/time-rules', + }, + { + text: 'Slot Content', + link: '/datepicker/slot-content', + }, + { + text: 'Custom Attributes', + link: '/datepicker/custom-attributes', + }, + { + text: 'API', + link: '/datepicker/api', + }, + ], + }, + { + text: 'i18n', + items: [ + { + text: 'Locales', + link: '/i18n/locales', + }, + { + text: 'Masks', + link: '/i18n/masks', + }, + { + text: 'Timezones', + link: '/i18n/timezones', + }, + ], + }, + ], + }; +} + +export default defineConfig({ + title: 'VCalendar', + description: 'An elegant calendar and datepicker plugin for Vuejs.', + head: [ + ['link', { rel: 'icon', href: '/favicon.png' }], + [ + 'link', + { + href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap', + rel: 'stylesheet', + }, + ], + [ + 'link', + { + href: 'https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700&display=swap', + rel: 'stylesheet', + }, + ], + ], + themeConfig: { + nav: nav(), + socialLinks: [ + { icon: 'github', link: 'https://github.com/nathanreyes/v-calendar' }, + ], + outline: [2, 3], + sidebar: sidebar(), + algolia: { + appId: 'UBR2AQC4NS', + apiKey: 'd346a02045eeeb56460d8dfca5b23f35', + indexName: 'v3-vcalendar', + }, + carbonAds: { + code: 'CE7IK53U', + placement: 'vcalendario', + }, + footer: { + message: 'Released under the MIT License.', + copyright: 'Copyright © 2017-present Nathan Reyes', + }, + }, + vite: { + server: { + port: 3000, + }, + resolve: { + alias: [ + { find: '@', replacement: path.resolve(__dirname, './') }, + { + find: 'v-calendar', + replacement: path.resolve(__dirname, '../../src'), + }, + { + find: /^.*\/VPDoc\.vue$/, + replacement: fileURLToPath( + new URL('./theme/components/NRDoc.vue', import.meta.url), + ), + }, + ], + }, + }, +}); diff --git a/docs/.vitepress/theme/components/NRDoc.vue b/docs/.vitepress/theme/components/NRDoc.vue new file mode 100644 index 000000000..333553db0 --- /dev/null +++ b/docs/.vitepress/theme/components/NRDoc.vue @@ -0,0 +1,168 @@ + + + + + diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts new file mode 100644 index 000000000..e58260429 --- /dev/null +++ b/docs/.vitepress/theme/index.ts @@ -0,0 +1,30 @@ +import DefaultTheme from 'vitepress/theme'; +import { ComponentOptions } from 'vue'; +import VCalendar from 'v-calendar'; +import './styles/index.css'; + +// Autoregister components +const modules = import.meta.glob('../components/**/*.vue', { + eager: true, + import: 'default', +}); +const components: any[] = []; +for (const path in modules) { + const pathParts = path.split('/'); + const defName = pathParts[pathParts.length - 1].split('.')[0]; + const component = modules[path] as ComponentOptions; + component.name ||= defName; + components.push(component); +} + +export default { + extends: DefaultTheme, + enhanceApp({ app }) { + app.use(VCalendar, { + isDark: {}, + }); + components.forEach(component => { + app.component(component.name, component); + }); + }, +}; diff --git a/docs/.vitepress/theme/styles/index.css b/docs/.vitepress/theme/styles/index.css new file mode 100644 index 000000000..c0dd03539 --- /dev/null +++ b/docs/.vitepress/theme/styles/index.css @@ -0,0 +1,140 @@ +@import './nr-doc.css'; + +@tailwind base; +@tailwind components; +@tailwind utilities; + +:root { + --vp-c-bg: theme(colors.white); + --vp-c-bg-soft: theme(colors.gray.100); + --vp-c-bg-mute: theme(colors.gray.200); + --vp-c-bg-alt: theme(colors.gray.50); + + --vp-c-divider: theme(colors.gray.300); + --vp-c-divider-light: theme(colors.gray.200); + + --vp-c-divider-inverse: var(--vp-c-divider-dark-1); + --vp-c-divider-inverse-light: var(--vp-c-divider-dark-2); + + --vp-c-gutter: theme(colors.gray.200); + + --vp-c-text-light-1: theme(colors.gray.800); + --vp-c-text-light-2: theme(colors.gray.600); + --vp-c-text-light-3: theme(colors.gray.500); + --vp-c-text-light-4: theme(colors.gray.400); + + --vp-c-text-1: var(--vp-c-text-light-1); + --vp-c-text-2: var(--vp-c-text-light-2); + --vp-c-text-3: var(--vp-c-text-light-3); + --vp-c-text-4: var(--vp-c-text-light-4); + + --vp-c-text-inverse-1: var(--vp-c-text-dark-1); + --vp-c-text-inverse-2: var(--vp-c-text-dark-2); + --vp-c-text-inverse-3: var(--vp-c-text-dark-3); + --vp-c-text-inverse-4: var(--vp-c-text-dark-4); + + --vp-c-text-code: var(--vp-c-indigo-soft); + + --vp-c-brand: theme(colors.accent.600); + --vp-c-brand-light: theme(colors.accent.300); + --vp-c-brand-lighter: theme(colors.accent.100); + --vp-c-brand-dark: theme(colors.accent.700); + --vp-c-brand-darker: theme(colors.accent.900); + + --vp-code-font-size: theme(fontSize.sm); + + --vp-code-tab-bg: theme(colors.gray.900); + --vp-code-lang-color: theme(colors.gray.400); + --vp-code-block-bg: theme(colors.gray.900); + + --vp-code-tab-divider: theme(colors.gray.700); + --vp-code-tab-text-color: theme(colors.gray.400); + --vp-code-tab-hover-text-color: theme(colors.gray.100); + --vp-code-tab-active-text-color: theme(colors.gray.200); + --vp-code-tab-active-bar-color: theme(colors.accent.300); + + --vp-c-switch-bg: theme(colors.gray.300); + --vp-c-switch-border: theme(colors.gray.400); + --vp-c-switch-grabber-bg: theme(colors.white); + + font-family: @apply font-sans; + .title { + @apply font-display; + } +} + +.dark { + --vp-c-black: theme(colors.gray.900); + --vp-c-bg: theme(colors.gray.800); + --vp-c-bg-soft: theme(colors.gray.900); + --vp-c-bg-mute: theme(colors.gray.700); + --vp-c-bg-alt: theme(colors.gray.900); + + --vp-c-divider: theme(colors.gray.500); + --vp-c-divider-light: theme(colors.gray.600); + + --vp-c-divider-inverse: var(--vp-c-divider-light-1); + --vp-c-divider-inverse-light: var(--vp-c-divider-light-2); + + --vp-c-gutter: theme(colors.gray.700); + + --vp-c-text-dark-1: theme(colors.gray.100); + --vp-c-text-dark-2: theme(colors.gray.300); + --vp-c-text-dark-3: theme(colors.gray.400); + --vp-c-text-dark-4: theme(colors.gray.500); + + --vp-c-text-1: var(--vp-c-text-dark-1); + --vp-c-text-2: var(--vp-c-text-dark-2); + --vp-c-text-3: var(--vp-c-text-dark-3); + --vp-c-text-4: var(--vp-c-text-dark-4); + + --vp-c-text-inverse-1: var(--vp-c-text-light-1); + --vp-c-text-inverse-2: var(--vp-c-text-light-2); + --vp-c-text-inverse-3: var(--vp-c-text-light-3); + --vp-c-text-inverse-4: var(--vp-c-text-light-4); + + --vp-c-text-code: var(--vp-c-indigo-lighter); + + --vp-c-brand: theme(colors.accent.400); + --vp-c-brand-light: theme(colors.accent.300); + --vp-c-brand-lighter: theme(colors.accent.100); + --vp-c-brand-dark: theme(colors.accent.700); + --vp-c-brand-darker: theme(colors.accent.900); + + --vp-code-lang-color: theme(colors.gray.400); + --vp-code-block-bg: theme(colors.gray.900); + + --vp-code-tab-bg: theme(colors.gray.900); + --vp-code-tab-divider: theme(colors.gray.700); + --vp-code-tab-text-color: theme(colors.gray.400); + --vp-code-tab-hover-text-color: theme(colors.gray.100); + --vp-code-tab-active-text-color: theme(colors.gray.200); + --vp-code-tab-active-bar-color: theme(colors.accent.300); + + --vp-c-switch-bg: theme(colors.black); + --vp-c-switch-border: theme(colors.gray.600); + --vp-c-switch-grabber-bg: theme(colors.gray.500); + --vp-c-bg-elv: theme(colors.gray.900); +} + +@media (min-width: 960px) { + .VPNavBar.fill { + border-bottom-color: var(--vp-c-divider) !important; + } + .VPNavBar.has-sidebar .curtain::before { + display: none !important; + } +} + +.VPSwitch { + background-color: var(--vp-c-switch-bg) !important; + border: 1px solid var(--vp-c-switch-border) !important; + .check { + background-color: var(--vp-c-switch-grabber-bg) !important; + } +} + +input, +button { + border-style: solid; +} diff --git a/docs/.vitepress/theme/styles/nr-doc.css b/docs/.vitepress/theme/styles/nr-doc.css new file mode 100644 index 000000000..bff3eba80 --- /dev/null +++ b/docs/.vitepress/theme/styles/nr-doc.css @@ -0,0 +1,322 @@ +.nr-doc { + @apply prose prose-a:text-accent-500 hover:prose-a:text-accent-700 + dark:prose-invert dark:prose-a:text-accent-300 dark:hover:prose-a:text-accent-400; +} + +.nr-doc h1, +.nr-doc h2, +.nr-doc h3, +.nr-doc h4, +.nr-doc h5, +.nr-doc h6 { + position: relative; + outline: none; +} + +.nr-doc .header-anchor { + position: absolute; + top: 0; + left: 0; + margin-left: -0.87em; + font-weight: 500; + user-select: none; + opacity: 0; + text-decoration: none; + transition: + color 0.25s, + opacity 0.25s; +} + +.nr-doc .header-anchor:before { + content: var(--vp-header-anchor-symbol); +} + +.nr-doc h1:hover .header-anchor, +.nr-doc h1 .header-anchor:focus, +.nr-doc h2:hover .header-anchor, +.nr-doc h2 .header-anchor:focus, +.nr-doc h3:hover .header-anchor, +.nr-doc h3 .header-anchor:focus, +.nr-doc h4:hover .header-anchor, +.nr-doc h4 .header-anchor:focus, +.nr-doc h5:hover .header-anchor, +.nr-doc h5 .header-anchor:focus, +.nr-doc h6:hover .header-anchor, +.nr-doc h6 .header-anchor:focus { + opacity: 1; +} + +.nr-doc .header-anchor { + float: left; + margin-left: -0.87em; + padding-right: 0.23em; + font-weight: 500; + user-select: none; + opacity: 0; + transition: + color 0.25s, + opacity 0.25s; +} + +/* .nr-doc h2 .header-anchor { + top: 24px; +} */ + +.nr-doc h1 > code, +.nr-doc h2 > code, +.nr-doc h3 > code { + font-size: 0.9em; +} + +.nr-doc a > code { + color: var(--vp-c-brand); + transition: color 0.25s; +} + +.nr-doc a:hover > code { + color: var(--vp-c-brand-dark); +} + +.nr-doc div[class*='language-'] { + position: relative; + margin: 16px -24px; + background-color: var(--vp-code-block-bg); + overflow-x: auto; + transition: background-color 0.5s; +} + +@media (min-width: 640px) { + .nr-doc div[class*='language-'] { + border-radius: 8px; + margin: 16px 0; + } +} + +@media (max-width: 639px) { + .nr-doc li div[class*='language-'] { + border-radius: 8px 0 0 8px; + } +} + +.nr-doc div[class*='language-'] + div[class*='language-'], +.nr-doc div[class$='-api'] + div[class*='language-'], +.nr-doc div[class*='language-'] + div[class$='-api'] > div[class*='language-'] { + margin-top: -8px; +} + +.nr-doc [class*='language-'] pre, +.nr-doc [class*='language-'] code { + /*rtl:ignore*/ + direction: ltr; + /*rtl:ignore*/ + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +.nr-doc [class*='language-'] pre { + position: relative; + z-index: 1; + margin: 0; + padding: 20px 0; + background: transparent; + overflow-x: auto; +} + +.nr-doc [class*='language-'] code { + display: block; + padding: 0 24px; + width: fit-content; + min-width: 100%; + line-height: var(--vp-code-line-height); + font-size: var(--vp-code-font-size); + color: var(--vp-code-block-color); + transition: color 0.5s; +} + +.nr-doc [class*='language-'] code .highlighted { + background-color: var(--vp-code-line-highlight-color); + transition: background-color 0.5s; + margin: 0 -24px; + padding: 0 24px; + width: calc(100% + 2 * 24px); + display: inline-block; +} + +.nr-doc [class*='language-'] code .highlighted.error { + background-color: var(--vp-code-line-error-color); +} + +.nr-doc [class*='language-'] code .highlighted.warning { + background-color: var(--vp-code-line-warning-color); +} + +.nr-doc [class*='language-'] code .diff { + transition: background-color 0.5s; + margin: 0 -24px; + padding: 0 24px; + width: calc(100% + 2 * 24px); + display: inline-block; +} + +.nr-doc [class*='language-'] code .diff::before { + position: absolute; + left: 10px; +} + +.nr-doc [class*='language-'] .has-focused-lines .line:not(.has-focus) { + filter: blur(0.095rem); + opacity: 0.4; + transition: + filter 0.35s, + opacity 0.35s; +} + +.nr-doc [class*='language-'] .has-focused-lines .line:not(.has-focus) { + opacity: 0.7; + transition: + filter 0.35s, + opacity 0.35s; +} + +.nr-doc [class*='language-']:hover .has-focused-lines .line:not(.has-focus) { + filter: blur(0); + opacity: 1; +} + +.nr-doc [class*='language-'] code .diff.remove { + background-color: var(--vp-code-line-diff-remove-color); + opacity: 0.7; +} + +.nr-doc [class*='language-'] code .diff.remove::before { + content: '-'; + color: var(--vp-code-line-diff-remove-symbol-color); +} + +.nr-doc [class*='language-'] code .diff.add { + background-color: var(--vp-code-line-diff-add-color); +} + +.nr-doc [class*='language-'] code .diff.add::before { + content: '+'; + color: var(--vp-code-line-diff-add-symbol-color); +} + +.nr-doc div[class*='language-'].line-numbers-mode { + /*rtl:ignore*/ + padding-left: 32px; +} + +.nr-doc .line-numbers-wrapper { + position: absolute; + top: 0; + bottom: 0; + /*rtl:ignore*/ + left: 0; + z-index: 3; + /*rtl:ignore*/ + border-right: 1px solid var(--vp-code-block-divider-color); + padding-top: 20px; + width: 32px; + text-align: center; + font-family: var(--vp-font-family-mono); + line-height: var(--vp-code-line-height); + font-size: var(--vp-code-font-size); + color: var(--vp-code-line-number-color); + transition: + border-color 0.5s, + color 0.5s; +} + +.nr-doc [class*='language-'] > button.copy { + /*rtl:ignore*/ + direction: ltr; + position: absolute; + top: 12px; + /*rtl:ignore*/ + right: 12px; + z-index: 3; + border: 1px solid var(--vp-code-copy-code-border-color); + border-radius: 4px; + width: 40px; + height: 40px; + background-color: var(--vp-code-copy-code-bg); + opacity: 0; + cursor: pointer; + background-image: var(--vp-icon-copy); + background-position: 50%; + background-size: 20px; + background-repeat: no-repeat; + transition: + border-color 0.25s, + background-color 0.25s, + opacity 0.25s; +} + +.nr-doc [class*='language-']:hover > button.copy, +.nr-doc [class*='language-'] > button.copy:focus { + opacity: 1; +} + +.nr-doc [class*='language-'] > button.copy:hover, +.nr-doc [class*='language-'] > button.copy.copied { + border-color: var(--vp-code-copy-code-hover-border-color); + background-color: var(--vp-code-copy-code-hover-bg); +} + +.nr-doc [class*='language-'] > button.copy.copied, +.nr-doc [class*='language-'] > button.copy:hover.copied { + /*rtl:ignore*/ + border-radius: 0 4px 4px 0; + background-color: var(--vp-code-copy-code-hover-bg); + background-image: var(--vp-icon-copied); +} + +.nr-doc [class*='language-'] > button.copy.copied::before, +.nr-doc [class*='language-'] > button.copy:hover.copied::before { + position: relative; + top: -1px; + /*rtl:ignore*/ + transform: translateX(calc(-100% - 1px)); + display: flex; + justify-content: center; + align-items: center; + border: 1px solid var(--vp-code-copy-code-hover-border-color); + /*rtl:ignore*/ + border-right: 0; + border-radius: 4px 0 0 4px; + padding: 0 10px; + width: fit-content; + height: 40px; + text-align: center; + font-size: 12px; + font-weight: 500; + color: var(--vp-code-copy-code-active-text); + background-color: var(--vp-code-copy-code-hover-bg); + white-space: nowrap; + content: var(--vp-code-copy-copied-text-content); +} + +.nr-doc [class*='language-'] > span.lang { + position: absolute; + top: 2px; + /*rtl:ignore*/ + right: 8px; + z-index: 2; + font-size: 12px; + font-weight: 500; + color: var(--vp-code-lang-color); + transition: + color 0.4s, + opacity 0.4s; +} diff --git a/docs/.vuepress/components/examples/button-dropdown.vue b/docs/.vuepress/components/examples/button-dropdown.vue deleted file mode 100644 index ab9546ae4..000000000 --- a/docs/.vuepress/components/examples/button-dropdown.vue +++ /dev/null @@ -1,39 +0,0 @@ - - - diff --git a/docs/.vuepress/components/examples/date-range.vue b/docs/.vuepress/components/examples/date-range.vue deleted file mode 100644 index 5190e4c67..000000000 --- a/docs/.vuepress/components/examples/date-range.vue +++ /dev/null @@ -1,95 +0,0 @@ - - - diff --git a/docs/.vuepress/components/examples/multiple-dates-legacy.vue b/docs/.vuepress/components/examples/multiple-dates-legacy.vue deleted file mode 100644 index cde1a56c5..000000000 --- a/docs/.vuepress/components/examples/multiple-dates-legacy.vue +++ /dev/null @@ -1,42 +0,0 @@ - - - diff --git a/docs/.vuepress/components/examples/multiple-dates.vue b/docs/.vuepress/components/examples/multiple-dates.vue deleted file mode 100644 index 413a7bc36..000000000 --- a/docs/.vuepress/components/examples/multiple-dates.vue +++ /dev/null @@ -1,70 +0,0 @@ - - - diff --git a/docs/.vuepress/components/github/088.vue b/docs/.vuepress/components/github/088.vue deleted file mode 100644 index bb7e9eaef..000000000 --- a/docs/.vuepress/components/github/088.vue +++ /dev/null @@ -1,28 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/.vuepress/components/github/140.vue b/docs/.vuepress/components/github/140.vue deleted file mode 100644 index a493c3bac..000000000 --- a/docs/.vuepress/components/github/140.vue +++ /dev/null @@ -1,24 +0,0 @@ - - - - diff --git a/docs/.vuepress/components/github/179.vue b/docs/.vuepress/components/github/179.vue deleted file mode 100644 index 11a42e376..000000000 --- a/docs/.vuepress/components/github/179.vue +++ /dev/null @@ -1,39 +0,0 @@ - - - diff --git a/docs/.vuepress/components/github/254.vue b/docs/.vuepress/components/github/254.vue deleted file mode 100644 index 1872dacd7..000000000 --- a/docs/.vuepress/components/github/254.vue +++ /dev/null @@ -1,19 +0,0 @@ - - - diff --git a/docs/.vuepress/components/github/255.vue b/docs/.vuepress/components/github/255.vue deleted file mode 100644 index f820f1734..000000000 --- a/docs/.vuepress/components/github/255.vue +++ /dev/null @@ -1,33 +0,0 @@ - - - diff --git a/docs/.vuepress/components/github/272.vue b/docs/.vuepress/components/github/272.vue deleted file mode 100644 index 6aa10dbd1..000000000 --- a/docs/.vuepress/components/github/272.vue +++ /dev/null @@ -1,23 +0,0 @@ - - - diff --git a/docs/.vuepress/components/github/280/280.vue b/docs/.vuepress/components/github/280/280.vue deleted file mode 100644 index b2babc269..000000000 --- a/docs/.vuepress/components/github/280/280.vue +++ /dev/null @@ -1,86 +0,0 @@ - - - - - diff --git a/docs/.vuepress/components/github/280/availabilites.json b/docs/.vuepress/components/github/280/availabilites.json deleted file mode 100644 index 93009ad4c..000000000 --- a/docs/.vuepress/components/github/280/availabilites.json +++ /dev/null @@ -1,978 +0,0 @@ -[ - { - "Date": "2019-04-01T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-04-02T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-04-03T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-04-04T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-04-05T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-04-06T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-04-07T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-04-08T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-04-09T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-04-10T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-04-11T00:00:00", - "ColorCode": "green" - }, - { - "Date": "2019-04-12T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-04-13T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-04-14T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-04-15T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-04-16T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-04-17T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-04-18T00:00:00", - "ColorCode": "green" - }, - { - "Date": "2019-04-19T00:00:00", - "ColorCode": "green" - }, - { - "Date": "2019-04-20T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-04-21T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-04-22T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-04-23T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-04-24T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-04-25T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-04-26T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-04-27T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-04-28T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-04-29T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-04-30T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-05-01T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-05-02T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-05-03T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-05-04T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-05-05T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-05-06T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-05-07T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-05-08T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-05-09T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-05-10T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-05-11T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-05-12T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-05-13T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-05-14T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-05-15T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-05-16T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-05-17T00:00:00", - "ColorCode": "green" - }, - { - "Date": "2019-05-18T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-05-19T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-05-20T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-05-21T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-05-22T00:00:00", - "ColorCode": "green" - }, - { - "Date": "2019-05-23T00:00:00", - "ColorCode": "green" - }, - { - "Date": "2019-05-24T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-05-25T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-05-26T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-05-27T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-05-28T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-05-29T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-05-30T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-05-31T00:00:00", - "ColorCode": "green" - }, - { - "Date": "2019-06-01T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-06-02T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-06-03T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-06-04T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-06-05T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-06-06T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-06-07T00:00:00", - "ColorCode": "green" - }, - { - "Date": "2019-06-08T00:00:00", - "ColorCode": "green" - }, - { - "Date": "2019-06-09T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-06-10T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-06-11T00:00:00", - "ColorCode": "green" - }, - { - "Date": "2019-06-12T00:00:00", - "ColorCode": "green" - }, - { - "Date": "2019-06-13T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-06-14T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-06-15T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-06-16T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-06-17T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-06-18T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-06-19T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-06-20T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-06-21T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-06-22T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-06-23T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-06-24T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-06-25T00:00:00", - "ColorCode": "green" - }, - { - "Date": "2019-06-26T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-06-27T00:00:00", - "ColorCode": "green" - }, - { - "Date": "2019-06-28T00:00:00", - "ColorCode": "green" - }, - { - "Date": "2019-06-29T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-06-30T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-07-01T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-07-02T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-07-03T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-07-04T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-07-05T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-07-06T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-07-07T00:00:00", - "ColorCode": "green" - }, - { - "Date": "2019-07-08T00:00:00", - "ColorCode": "green" - }, - { - "Date": "2019-07-09T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-07-10T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-07-11T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-07-12T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-07-13T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-07-14T00:00:00", - "ColorCode": "green" - }, - { - "Date": "2019-07-15T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-07-16T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-07-17T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-07-18T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-07-19T00:00:00", - "ColorCode": "green" - }, - { - "Date": "2019-07-20T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-07-21T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-07-22T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-07-23T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-07-24T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-07-25T00:00:00", - "ColorCode": "green" - }, - { - "Date": "2019-07-26T00:00:00", - "ColorCode": "green" - }, - { - "Date": "2019-07-27T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-07-28T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-07-29T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-07-30T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-07-31T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-08-01T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-08-02T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-08-03T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-08-04T00:00:00", - "ColorCode": "green" - }, - { - "Date": "2019-08-05T00:00:00", - "ColorCode": "green" - }, - { - "Date": "2019-08-06T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-08-07T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-08-08T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-08-09T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-08-10T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-08-11T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-08-12T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-08-13T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-08-14T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-08-15T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-08-16T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-08-17T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-08-18T00:00:00", - "ColorCode": "green" - }, - { - "Date": "2019-08-19T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-08-20T00:00:00", - "ColorCode": "green" - }, - { - "Date": "2019-08-21T00:00:00", - "ColorCode": "green" - }, - { - "Date": "2019-08-22T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-08-23T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-08-24T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-08-25T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-08-26T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-08-27T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-08-28T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-08-29T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-08-30T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-08-31T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-09-01T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-09-02T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-09-03T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-09-04T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-09-05T00:00:00", - "ColorCode": "green" - }, - { - "Date": "2019-09-06T00:00:00", - "ColorCode": "green" - }, - { - "Date": "2019-09-07T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-09-08T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-09-09T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-09-10T00:00:00", - "ColorCode": "green" - }, - { - "Date": "2019-09-11T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-09-12T00:00:00", - "ColorCode": "green" - }, - { - "Date": "2019-09-13T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-09-14T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-09-15T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-09-16T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-09-17T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-09-18T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-09-19T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-09-20T00:00:00", - "ColorCode": "green" - }, - { - "Date": "2019-09-21T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-09-22T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-09-23T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-09-24T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-09-25T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-09-26T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-09-27T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-09-28T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-09-29T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-09-30T00:00:00", - "ColorCode": "green" - }, - { - "Date": "2019-10-01T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-10-02T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-10-03T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-10-04T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-10-05T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-10-06T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-10-07T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-10-08T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-10-09T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-10-10T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-10-11T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-10-12T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-10-13T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-10-14T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-10-15T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-10-16T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-10-17T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-10-18T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-10-19T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-10-20T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-10-21T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-10-22T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-10-23T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-10-24T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-10-25T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-10-26T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-10-27T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-10-28T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-10-29T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-10-30T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-10-31T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-11-01T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-11-02T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-11-03T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-11-04T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-11-05T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-11-06T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-11-07T00:00:00", - "ColorCode": "green" - }, - { - "Date": "2019-11-08T00:00:00", - "ColorCode": "green" - }, - { - "Date": "2019-11-09T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-11-10T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-11-11T00:00:00", - "ColorCode": "green" - }, - { - "Date": "2019-11-12T00:00:00", - "ColorCode": "green" - }, - { - "Date": "2019-11-13T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-11-14T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-11-15T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-11-16T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-11-17T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-11-18T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-11-19T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-11-20T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-11-21T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-11-22T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-11-23T00:00:00", - "ColorCode": "red" - }, - { - "Date": "2019-11-24T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-11-25T00:00:00", - "ColorCode": "green" - }, - { - "Date": "2019-11-26T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-11-27T00:00:00", - "ColorCode": "green" - }, - { - "Date": "2019-11-28T00:00:00", - "ColorCode": "green" - }, - { - "Date": "2019-11-29T00:00:00", - "ColorCode": "blue" - }, - { - "Date": "2019-11-30T00:00:00", - "ColorCode": "red" - } -] \ No newline at end of file diff --git a/docs/.vuepress/components/github/280/events.json b/docs/.vuepress/components/github/280/events.json deleted file mode 100644 index 59b83d06f..000000000 --- a/docs/.vuepress/components/github/280/events.json +++ /dev/null @@ -1,8 +0,0 @@ -[ - { - "id": 1, - "title": "Example Event 1", - "startDate": "2019-04-22T00:00:00", - "endDate": "2019-04-30T00:00:00" - } -] \ No newline at end of file diff --git a/docs/.vuepress/components/github/290.vue b/docs/.vuepress/components/github/290.vue deleted file mode 100644 index 00de730ee..000000000 --- a/docs/.vuepress/components/github/290.vue +++ /dev/null @@ -1,36 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/.vuepress/components/github/302.vue b/docs/.vuepress/components/github/302.vue deleted file mode 100644 index 7c9087e13..000000000 --- a/docs/.vuepress/components/github/302.vue +++ /dev/null @@ -1,23 +0,0 @@ - - - diff --git a/docs/.vuepress/components/github/304.vue b/docs/.vuepress/components/github/304.vue deleted file mode 100644 index be152c3d3..000000000 --- a/docs/.vuepress/components/github/304.vue +++ /dev/null @@ -1,14 +0,0 @@ - - - diff --git a/docs/.vuepress/components/github/308.vue b/docs/.vuepress/components/github/308.vue deleted file mode 100644 index 4905d1442..000000000 --- a/docs/.vuepress/components/github/308.vue +++ /dev/null @@ -1,30 +0,0 @@ - - - diff --git a/docs/.vuepress/components/github/311.vue b/docs/.vuepress/components/github/311.vue deleted file mode 100644 index 7a801ef4f..000000000 --- a/docs/.vuepress/components/github/311.vue +++ /dev/null @@ -1,33 +0,0 @@ - - - diff --git a/docs/.vuepress/components/github/312.vue b/docs/.vuepress/components/github/312.vue deleted file mode 100644 index 94f9f86e4..000000000 --- a/docs/.vuepress/components/github/312.vue +++ /dev/null @@ -1,59 +0,0 @@ - - - - - - diff --git a/docs/.vuepress/components/github/318.vue b/docs/.vuepress/components/github/318.vue deleted file mode 100644 index f8b6f31e6..000000000 --- a/docs/.vuepress/components/github/318.vue +++ /dev/null @@ -1,21 +0,0 @@ - - - diff --git a/docs/.vuepress/components/github/323.vue b/docs/.vuepress/components/github/323.vue deleted file mode 100644 index 421d560d1..000000000 --- a/docs/.vuepress/components/github/323.vue +++ /dev/null @@ -1,29 +0,0 @@ - - - diff --git a/docs/.vuepress/components/github/324.vue b/docs/.vuepress/components/github/324.vue deleted file mode 100644 index 15d602ae8..000000000 --- a/docs/.vuepress/components/github/324.vue +++ /dev/null @@ -1,31 +0,0 @@ - - - diff --git a/docs/.vuepress/components/github/326.vue b/docs/.vuepress/components/github/326.vue deleted file mode 100644 index a1d2759ad..000000000 --- a/docs/.vuepress/components/github/326.vue +++ /dev/null @@ -1,27 +0,0 @@ - - - diff --git a/docs/.vuepress/components/github/330.vue b/docs/.vuepress/components/github/330.vue deleted file mode 100644 index b7011dc03..000000000 --- a/docs/.vuepress/components/github/330.vue +++ /dev/null @@ -1,17 +0,0 @@ - - - diff --git a/docs/.vuepress/components/github/344.vue b/docs/.vuepress/components/github/344.vue deleted file mode 100644 index 435a9f20b..000000000 --- a/docs/.vuepress/components/github/344.vue +++ /dev/null @@ -1,15 +0,0 @@ - - - diff --git a/docs/.vuepress/components/github/346.vue b/docs/.vuepress/components/github/346.vue deleted file mode 100644 index 409a42d16..000000000 --- a/docs/.vuepress/components/github/346.vue +++ /dev/null @@ -1,14 +0,0 @@ - - - diff --git a/docs/.vuepress/components/github/370.vue b/docs/.vuepress/components/github/370.vue deleted file mode 100644 index cb3988b8a..000000000 --- a/docs/.vuepress/components/github/370.vue +++ /dev/null @@ -1,32 +0,0 @@ - - - diff --git a/docs/.vuepress/components/github/379.vue b/docs/.vuepress/components/github/379.vue deleted file mode 100644 index 128087b5d..000000000 --- a/docs/.vuepress/components/github/379.vue +++ /dev/null @@ -1,29 +0,0 @@ - - - diff --git a/docs/.vuepress/components/github/400.vue b/docs/.vuepress/components/github/400.vue deleted file mode 100644 index bd10aec52..000000000 --- a/docs/.vuepress/components/github/400.vue +++ /dev/null @@ -1,36 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/.vuepress/components/github/419.vue b/docs/.vuepress/components/github/419.vue deleted file mode 100644 index 7be85ed07..000000000 --- a/docs/.vuepress/components/github/419.vue +++ /dev/null @@ -1,18 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/.vuepress/components/github/427.vue b/docs/.vuepress/components/github/427.vue deleted file mode 100644 index fc95e6849..000000000 --- a/docs/.vuepress/components/github/427.vue +++ /dev/null @@ -1,38 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/.vuepress/components/github/431.vue b/docs/.vuepress/components/github/431.vue deleted file mode 100644 index 38165c811..000000000 --- a/docs/.vuepress/components/github/431.vue +++ /dev/null @@ -1,25 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/.vuepress/components/github/435.vue b/docs/.vuepress/components/github/435.vue deleted file mode 100644 index ad02cf089..000000000 --- a/docs/.vuepress/components/github/435.vue +++ /dev/null @@ -1,95 +0,0 @@ - - - diff --git a/docs/.vuepress/components/github/438.vue b/docs/.vuepress/components/github/438.vue deleted file mode 100644 index 4aabb5f38..000000000 --- a/docs/.vuepress/components/github/438.vue +++ /dev/null @@ -1,27 +0,0 @@ - - - diff --git a/docs/.vuepress/components/github/444.vue b/docs/.vuepress/components/github/444.vue deleted file mode 100644 index 68d9ffdac..000000000 --- a/docs/.vuepress/components/github/444.vue +++ /dev/null @@ -1,16 +0,0 @@ - - - diff --git a/docs/.vuepress/components/github/450.vue b/docs/.vuepress/components/github/450.vue deleted file mode 100644 index edc711262..000000000 --- a/docs/.vuepress/components/github/450.vue +++ /dev/null @@ -1,16 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/.vuepress/components/github/469.vue b/docs/.vuepress/components/github/469.vue deleted file mode 100644 index 819b6685a..000000000 --- a/docs/.vuepress/components/github/469.vue +++ /dev/null @@ -1,32 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/.vuepress/components/github/488.vue b/docs/.vuepress/components/github/488.vue deleted file mode 100644 index 78bf2af25..000000000 --- a/docs/.vuepress/components/github/488.vue +++ /dev/null @@ -1,16 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/.vuepress/components/github/499.vue b/docs/.vuepress/components/github/499.vue deleted file mode 100644 index 039113999..000000000 --- a/docs/.vuepress/components/github/499.vue +++ /dev/null @@ -1,35 +0,0 @@ - - - diff --git a/docs/.vuepress/components/github/524.vue b/docs/.vuepress/components/github/524.vue deleted file mode 100644 index 5bd6c11aa..000000000 --- a/docs/.vuepress/components/github/524.vue +++ /dev/null @@ -1,19 +0,0 @@ - - - diff --git a/docs/.vuepress/components/github/543.vue b/docs/.vuepress/components/github/543.vue deleted file mode 100644 index fc39cee68..000000000 --- a/docs/.vuepress/components/github/543.vue +++ /dev/null @@ -1,19 +0,0 @@ - - - diff --git a/docs/.vuepress/components/github/565.vue b/docs/.vuepress/components/github/565.vue deleted file mode 100644 index bd155e62d..000000000 --- a/docs/.vuepress/components/github/565.vue +++ /dev/null @@ -1,19 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/.vuepress/components/github/632.vue b/docs/.vuepress/components/github/632.vue deleted file mode 100644 index 509b5408c..000000000 --- a/docs/.vuepress/components/github/632.vue +++ /dev/null @@ -1,28 +0,0 @@ - - diff --git a/docs/.vuepress/components/github/676.vue b/docs/.vuepress/components/github/676.vue deleted file mode 100644 index f4573de32..000000000 --- a/docs/.vuepress/components/github/676.vue +++ /dev/null @@ -1,56 +0,0 @@ - - - diff --git a/docs/.vuepress/components/github/682.vue b/docs/.vuepress/components/github/682.vue deleted file mode 100644 index 35d22a3de..000000000 --- a/docs/.vuepress/components/github/682.vue +++ /dev/null @@ -1,28 +0,0 @@ - - - diff --git a/docs/.vuepress/components/github/688.vue b/docs/.vuepress/components/github/688.vue deleted file mode 100644 index 6b70a694b..000000000 --- a/docs/.vuepress/components/github/688.vue +++ /dev/null @@ -1,21 +0,0 @@ - - - diff --git a/docs/.vuepress/components/github/692.vue b/docs/.vuepress/components/github/692.vue deleted file mode 100644 index b647778d3..000000000 --- a/docs/.vuepress/components/github/692.vue +++ /dev/null @@ -1,38 +0,0 @@ - - - diff --git a/docs/.vuepress/components/github/693.vue b/docs/.vuepress/components/github/693.vue deleted file mode 100644 index 2afbc5fe5..000000000 --- a/docs/.vuepress/components/github/693.vue +++ /dev/null @@ -1,23 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/.vuepress/components/github/695.vue b/docs/.vuepress/components/github/695.vue deleted file mode 100644 index 9053795e7..000000000 --- a/docs/.vuepress/components/github/695.vue +++ /dev/null @@ -1,31 +0,0 @@ - - - - - \ No newline at end of file diff --git a/docs/.vuepress/components/github/703.vue b/docs/.vuepress/components/github/703.vue deleted file mode 100644 index 3a86b37c6..000000000 --- a/docs/.vuepress/components/github/703.vue +++ /dev/null @@ -1,27 +0,0 @@ - - - diff --git a/docs/.vuepress/components/github/709.vue b/docs/.vuepress/components/github/709.vue deleted file mode 100644 index 338ed5380..000000000 --- a/docs/.vuepress/components/github/709.vue +++ /dev/null @@ -1,39 +0,0 @@ - - - diff --git a/docs/.vuepress/components/github/712.vue b/docs/.vuepress/components/github/712.vue deleted file mode 100644 index b4a296df2..000000000 --- a/docs/.vuepress/components/github/712.vue +++ /dev/null @@ -1,21 +0,0 @@ - - - diff --git a/docs/.vuepress/components/github/999.vue b/docs/.vuepress/components/github/999.vue deleted file mode 100644 index 934cfb081..000000000 --- a/docs/.vuepress/components/github/999.vue +++ /dev/null @@ -1,188 +0,0 @@ - - - diff --git a/docs/.vuepress/components/github/_PickerTemplate.vue b/docs/.vuepress/components/github/_PickerTemplate.vue deleted file mode 100644 index 05826f8b8..000000000 --- a/docs/.vuepress/components/github/_PickerTemplate.vue +++ /dev/null @@ -1,16 +0,0 @@ - - - diff --git a/docs/.vuepress/components/github/index.vue b/docs/.vuepress/components/github/index.vue deleted file mode 100644 index 3112a77e0..000000000 --- a/docs/.vuepress/components/github/index.vue +++ /dev/null @@ -1,99 +0,0 @@ - - - diff --git a/docs/.vuepress/components/guide/attributes/as-functions.vue b/docs/.vuepress/components/guide/attributes/as-functions.vue deleted file mode 100644 index 03c150d87..000000000 --- a/docs/.vuepress/components/guide/attributes/as-functions.vue +++ /dev/null @@ -1,25 +0,0 @@ - - - diff --git a/docs/.vuepress/components/guide/attributes/bars.vue b/docs/.vuepress/components/guide/attributes/bars.vue deleted file mode 100644 index a50d9c27a..000000000 --- a/docs/.vuepress/components/guide/attributes/bars.vue +++ /dev/null @@ -1,44 +0,0 @@ - - - diff --git a/docs/.vuepress/components/guide/attributes/dot-style.vue b/docs/.vuepress/components/guide/attributes/dot-style.vue deleted file mode 100644 index a66061493..000000000 --- a/docs/.vuepress/components/guide/attributes/dot-style.vue +++ /dev/null @@ -1,17 +0,0 @@ - - - diff --git a/docs/.vuepress/components/guide/attributes/dots.vue b/docs/.vuepress/components/guide/attributes/dots.vue deleted file mode 100644 index da618a92b..000000000 --- a/docs/.vuepress/components/guide/attributes/dots.vue +++ /dev/null @@ -1,44 +0,0 @@ - - - diff --git a/docs/.vuepress/components/guide/attributes/highlight-custom.vue b/docs/.vuepress/components/guide/attributes/highlight-custom.vue deleted file mode 100644 index 55bb49032..000000000 --- a/docs/.vuepress/components/guide/attributes/highlight-custom.vue +++ /dev/null @@ -1,42 +0,0 @@ - - - diff --git a/docs/.vuepress/components/guide/attributes/highlight-range.vue b/docs/.vuepress/components/guide/attributes/highlight-range.vue deleted file mode 100644 index 2d62c564a..000000000 --- a/docs/.vuepress/components/guide/attributes/highlight-range.vue +++ /dev/null @@ -1,24 +0,0 @@ - - - diff --git a/docs/.vuepress/components/guide/attributes/highlight.vue b/docs/.vuepress/components/guide/attributes/highlight.vue deleted file mode 100644 index ce8c5923c..000000000 --- a/docs/.vuepress/components/guide/attributes/highlight.vue +++ /dev/null @@ -1,21 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/.vuepress/components/guide/attributes/highlights.vue b/docs/.vuepress/components/guide/attributes/highlights.vue deleted file mode 100644 index 5763ff077..000000000 --- a/docs/.vuepress/components/guide/attributes/highlights.vue +++ /dev/null @@ -1,83 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/.vuepress/components/guide/attributes/intro.vue b/docs/.vuepress/components/guide/attributes/intro.vue deleted file mode 100644 index c650910ec..000000000 --- a/docs/.vuepress/components/guide/attributes/intro.vue +++ /dev/null @@ -1,108 +0,0 @@ - - - diff --git a/docs/.vuepress/components/guide/attributes/multiple-dates.vue b/docs/.vuepress/components/guide/attributes/multiple-dates.vue deleted file mode 100644 index 962d9bcae..000000000 --- a/docs/.vuepress/components/guide/attributes/multiple-dates.vue +++ /dev/null @@ -1,29 +0,0 @@ - - - diff --git a/docs/.vuepress/components/guide/attributes/popover-labels.vue b/docs/.vuepress/components/guide/attributes/popover-labels.vue deleted file mode 100644 index bd27bf868..000000000 --- a/docs/.vuepress/components/guide/attributes/popover-labels.vue +++ /dev/null @@ -1,49 +0,0 @@ - - - diff --git a/docs/.vuepress/components/guide/attributes/popover-slot.vue b/docs/.vuepress/components/guide/attributes/popover-slot.vue deleted file mode 100644 index ea8db6caa..000000000 --- a/docs/.vuepress/components/guide/attributes/popover-slot.vue +++ /dev/null @@ -1,88 +0,0 @@ - - - diff --git a/docs/.vuepress/components/guide/customize/classes.vue b/docs/.vuepress/components/guide/customize/classes.vue deleted file mode 100644 index 817079986..000000000 --- a/docs/.vuepress/components/guide/customize/classes.vue +++ /dev/null @@ -1,89 +0,0 @@ - - - - - \ No newline at end of file diff --git a/docs/.vuepress/components/guide/customize/header-title-pos.vue b/docs/.vuepress/components/guide/customize/header-title-pos.vue deleted file mode 100644 index 97ee44051..000000000 --- a/docs/.vuepress/components/guide/customize/header-title-pos.vue +++ /dev/null @@ -1,40 +0,0 @@ - - - diff --git a/docs/.vuepress/components/guide/customize/header-title.vue b/docs/.vuepress/components/guide/customize/header-title.vue deleted file mode 100644 index f5986b2b6..000000000 --- a/docs/.vuepress/components/guide/customize/header-title.vue +++ /dev/null @@ -1,9 +0,0 @@ - diff --git a/docs/.vuepress/components/guide/customize/test.vue b/docs/.vuepress/components/guide/customize/test.vue deleted file mode 100644 index b7cb07a42..000000000 --- a/docs/.vuepress/components/guide/customize/test.vue +++ /dev/null @@ -1,29 +0,0 @@ - - - - - diff --git a/docs/.vuepress/components/guide/datepicker/24hr.vue b/docs/.vuepress/components/guide/datepicker/24hr.vue deleted file mode 100644 index e30776e93..000000000 --- a/docs/.vuepress/components/guide/datepicker/24hr.vue +++ /dev/null @@ -1,23 +0,0 @@ - - - diff --git a/docs/.vuepress/components/guide/datepicker/disable-attribute.vue b/docs/.vuepress/components/guide/datepicker/disable-attribute.vue deleted file mode 100644 index a0c427bfa..000000000 --- a/docs/.vuepress/components/guide/datepicker/disable-attribute.vue +++ /dev/null @@ -1,31 +0,0 @@ - - - diff --git a/docs/.vuepress/components/guide/datepicker/disable-dates.vue b/docs/.vuepress/components/guide/datepicker/disable-dates.vue deleted file mode 100644 index 5be290e99..000000000 --- a/docs/.vuepress/components/guide/datepicker/disable-dates.vue +++ /dev/null @@ -1,21 +0,0 @@ - - - diff --git a/docs/.vuepress/components/guide/datepicker/disable-update.vue b/docs/.vuepress/components/guide/datepicker/disable-update.vue deleted file mode 100644 index be7961b01..000000000 --- a/docs/.vuepress/components/guide/datepicker/disable-update.vue +++ /dev/null @@ -1,23 +0,0 @@ - - - diff --git a/docs/.vuepress/components/guide/datepicker/input-debounce.vue b/docs/.vuepress/components/guide/datepicker/input-debounce.vue deleted file mode 100644 index 84d661063..000000000 --- a/docs/.vuepress/components/guide/datepicker/input-debounce.vue +++ /dev/null @@ -1,23 +0,0 @@ - - - diff --git a/docs/.vuepress/components/guide/datepicker/input-format-parse.vue b/docs/.vuepress/components/guide/datepicker/input-format-parse.vue deleted file mode 100644 index f34cdb6f5..000000000 --- a/docs/.vuepress/components/guide/datepicker/input-format-parse.vue +++ /dev/null @@ -1,23 +0,0 @@ - - - diff --git a/docs/.vuepress/components/guide/datepicker/input-mask.vue b/docs/.vuepress/components/guide/datepicker/input-mask.vue deleted file mode 100644 index 631e8fc10..000000000 --- a/docs/.vuepress/components/guide/datepicker/input-mask.vue +++ /dev/null @@ -1,26 +0,0 @@ - - - diff --git a/docs/.vuepress/components/guide/datepicker/input-with-time.vue b/docs/.vuepress/components/guide/datepicker/input-with-time.vue deleted file mode 100644 index 485b79a09..000000000 --- a/docs/.vuepress/components/guide/datepicker/input-with-time.vue +++ /dev/null @@ -1,26 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/.vuepress/components/guide/datepicker/intro-inline.vue b/docs/.vuepress/components/guide/datepicker/intro-inline.vue deleted file mode 100644 index 34b01b0dc..000000000 --- a/docs/.vuepress/components/guide/datepicker/intro-inline.vue +++ /dev/null @@ -1,15 +0,0 @@ - - - diff --git a/docs/.vuepress/components/guide/datepicker/intro-popover.vue b/docs/.vuepress/components/guide/datepicker/intro-popover.vue deleted file mode 100644 index 47ee123d9..000000000 --- a/docs/.vuepress/components/guide/datepicker/intro-popover.vue +++ /dev/null @@ -1,23 +0,0 @@ - - - diff --git a/docs/.vuepress/components/guide/datepicker/min-max.vue b/docs/.vuepress/components/guide/datepicker/min-max.vue deleted file mode 100644 index 972001078..000000000 --- a/docs/.vuepress/components/guide/datepicker/min-max.vue +++ /dev/null @@ -1,19 +0,0 @@ - - - diff --git a/docs/.vuepress/components/guide/datepicker/minute-increment.vue b/docs/.vuepress/components/guide/datepicker/minute-increment.vue deleted file mode 100644 index 285f91ccb..000000000 --- a/docs/.vuepress/components/guide/datepicker/minute-increment.vue +++ /dev/null @@ -1,15 +0,0 @@ - - - diff --git a/docs/.vuepress/components/guide/datepicker/model-number.vue b/docs/.vuepress/components/guide/datepicker/model-number.vue deleted file mode 100644 index a360591a3..000000000 --- a/docs/.vuepress/components/guide/datepicker/model-number.vue +++ /dev/null @@ -1,36 +0,0 @@ - - - diff --git a/docs/.vuepress/components/guide/datepicker/model-string.vue b/docs/.vuepress/components/guide/datepicker/model-string.vue deleted file mode 100644 index d6f80a5cb..000000000 --- a/docs/.vuepress/components/guide/datepicker/model-string.vue +++ /dev/null @@ -1,37 +0,0 @@ - - - diff --git a/docs/.vuepress/components/guide/datepicker/range-input.vue b/docs/.vuepress/components/guide/datepicker/range-input.vue deleted file mode 100644 index 56604c936..000000000 --- a/docs/.vuepress/components/guide/datepicker/range-input.vue +++ /dev/null @@ -1,46 +0,0 @@ - - - diff --git a/docs/.vuepress/components/guide/datepicker/range-popover.vue b/docs/.vuepress/components/guide/datepicker/range-popover.vue deleted file mode 100644 index 44d145992..000000000 --- a/docs/.vuepress/components/guide/datepicker/range-popover.vue +++ /dev/null @@ -1,43 +0,0 @@ - - - diff --git a/docs/.vuepress/components/guide/datepicker/range.vue b/docs/.vuepress/components/guide/datepicker/range.vue deleted file mode 100644 index 09bce6b3b..000000000 --- a/docs/.vuepress/components/guide/datepicker/range.vue +++ /dev/null @@ -1,18 +0,0 @@ - - - diff --git a/docs/.vuepress/components/guide/datepicker/select-attribute.vue b/docs/.vuepress/components/guide/datepicker/select-attribute.vue deleted file mode 100644 index 8efbb62a2..000000000 --- a/docs/.vuepress/components/guide/datepicker/select-attribute.vue +++ /dev/null @@ -1,18 +0,0 @@ - - - diff --git a/docs/.vuepress/components/guide/datepicker/simple-date.vue b/docs/.vuepress/components/guide/datepicker/simple-date.vue deleted file mode 100644 index 34b01b0dc..000000000 --- a/docs/.vuepress/components/guide/datepicker/simple-date.vue +++ /dev/null @@ -1,15 +0,0 @@ - - - diff --git a/docs/.vuepress/components/guide/datepicker/simple-range.vue b/docs/.vuepress/components/guide/datepicker/simple-range.vue deleted file mode 100644 index 54b364069..000000000 --- a/docs/.vuepress/components/guide/datepicker/simple-range.vue +++ /dev/null @@ -1,18 +0,0 @@ - - - diff --git a/docs/.vuepress/components/guide/datepicker/single-popover.vue b/docs/.vuepress/components/guide/datepicker/single-popover.vue deleted file mode 100644 index ef08e5b64..000000000 --- a/docs/.vuepress/components/guide/datepicker/single-popover.vue +++ /dev/null @@ -1,20 +0,0 @@ - - - diff --git a/docs/.vuepress/components/guide/datepicker/single.vue b/docs/.vuepress/components/guide/datepicker/single.vue deleted file mode 100644 index 5c7ec5c00..000000000 --- a/docs/.vuepress/components/guide/datepicker/single.vue +++ /dev/null @@ -1,30 +0,0 @@ - - - - diff --git a/docs/.vuepress/components/guide/datepicker/time-adjust-range.vue b/docs/.vuepress/components/guide/datepicker/time-adjust-range.vue deleted file mode 100644 index 80b0ef3f8..000000000 --- a/docs/.vuepress/components/guide/datepicker/time-adjust-range.vue +++ /dev/null @@ -1,42 +0,0 @@ - - - diff --git a/docs/.vuepress/components/guide/datepicker/time-adjust.vue b/docs/.vuepress/components/guide/datepicker/time-adjust.vue deleted file mode 100644 index a4453169c..000000000 --- a/docs/.vuepress/components/guide/datepicker/time-adjust.vue +++ /dev/null @@ -1,38 +0,0 @@ - - - diff --git a/docs/.vuepress/components/guide/datepicker/with-value.vue b/docs/.vuepress/components/guide/datepicker/with-value.vue deleted file mode 100644 index ad7aa284b..000000000 --- a/docs/.vuepress/components/guide/datepicker/with-value.vue +++ /dev/null @@ -1,69 +0,0 @@ - - - diff --git a/docs/.vuepress/components/guide/layouts/expanded.vue b/docs/.vuepress/components/guide/layouts/expanded.vue deleted file mode 100644 index 284b1fdf5..000000000 --- a/docs/.vuepress/components/guide/layouts/expanded.vue +++ /dev/null @@ -1,5 +0,0 @@ - \ No newline at end of file diff --git a/docs/.vuepress/components/guide/layouts/responsive-expanded.vue b/docs/.vuepress/components/guide/layouts/responsive-expanded.vue deleted file mode 100644 index 36444777f..000000000 --- a/docs/.vuepress/components/guide/layouts/responsive-expanded.vue +++ /dev/null @@ -1,26 +0,0 @@ - - - diff --git a/docs/.vuepress/components/guide/layouts/responsive.vue b/docs/.vuepress/components/guide/layouts/responsive.vue deleted file mode 100644 index 8141c8b0b..000000000 --- a/docs/.vuepress/components/guide/layouts/responsive.vue +++ /dev/null @@ -1,5 +0,0 @@ - diff --git a/docs/.vuepress/components/guide/layouts/rows.vue b/docs/.vuepress/components/guide/layouts/rows.vue deleted file mode 100644 index 05bb9adab..000000000 --- a/docs/.vuepress/components/guide/layouts/rows.vue +++ /dev/null @@ -1,5 +0,0 @@ - diff --git a/docs/.vuepress/components/guide/layouts/title-position.vue b/docs/.vuepress/components/guide/layouts/title-position.vue deleted file mode 100644 index 745ba6b60..000000000 --- a/docs/.vuepress/components/guide/layouts/title-position.vue +++ /dev/null @@ -1,13 +0,0 @@ - - - diff --git a/docs/.vuepress/components/guide/layouts/trim-weeks.vue b/docs/.vuepress/components/guide/layouts/trim-weeks.vue deleted file mode 100644 index ae507a7f9..000000000 --- a/docs/.vuepress/components/guide/layouts/trim-weeks.vue +++ /dev/null @@ -1,5 +0,0 @@ - diff --git a/docs/.vuepress/components/guide/navigation/move.vue b/docs/.vuepress/components/guide/navigation/move.vue deleted file mode 100644 index 719b992d6..000000000 --- a/docs/.vuepress/components/guide/navigation/move.vue +++ /dev/null @@ -1,261 +0,0 @@ - - - diff --git a/docs/.vuepress/components/guide/readme/cal-basic.vue b/docs/.vuepress/components/guide/readme/cal-basic.vue deleted file mode 100644 index a669dac76..000000000 --- a/docs/.vuepress/components/guide/readme/cal-basic.vue +++ /dev/null @@ -1,5 +0,0 @@ - diff --git a/docs/.vuepress/components/guide/readme/cal-configure.vue b/docs/.vuepress/components/guide/readme/cal-configure.vue deleted file mode 100644 index 71fdecfa0..000000000 --- a/docs/.vuepress/components/guide/readme/cal-configure.vue +++ /dev/null @@ -1,122 +0,0 @@ - - - diff --git a/docs/.vuepress/components/guide/readme/cal-content-style.vue b/docs/.vuepress/components/guide/readme/cal-content-style.vue deleted file mode 100644 index 047a05fee..000000000 --- a/docs/.vuepress/components/guide/readme/cal-content-style.vue +++ /dev/null @@ -1,28 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/.vuepress/components/guide/readme/cal-date-patterns-1.vue b/docs/.vuepress/components/guide/readme/cal-date-patterns-1.vue deleted file mode 100644 index ea71a9004..000000000 --- a/docs/.vuepress/components/guide/readme/cal-date-patterns-1.vue +++ /dev/null @@ -1,25 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/.vuepress/components/guide/readme/cal-date-patterns.vue b/docs/.vuepress/components/guide/readme/cal-date-patterns.vue deleted file mode 100644 index 195916df3..000000000 --- a/docs/.vuepress/components/guide/readme/cal-date-patterns.vue +++ /dev/null @@ -1,25 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/.vuepress/components/guide/readme/cal-date-range-no-start-end.vue b/docs/.vuepress/components/guide/readme/cal-date-range-no-start-end.vue deleted file mode 100644 index b7281f464..000000000 --- a/docs/.vuepress/components/guide/readme/cal-date-range-no-start-end.vue +++ /dev/null @@ -1,21 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/.vuepress/components/guide/readme/cal-date-range-no-start.vue b/docs/.vuepress/components/guide/readme/cal-date-range-no-start.vue deleted file mode 100644 index 2f5d3f738..000000000 --- a/docs/.vuepress/components/guide/readme/cal-date-range-no-start.vue +++ /dev/null @@ -1,21 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/.vuepress/components/guide/readme/cal-date-ranges.vue b/docs/.vuepress/components/guide/readme/cal-date-ranges.vue deleted file mode 100644 index fb7e850ea..000000000 --- a/docs/.vuepress/components/guide/readme/cal-date-ranges.vue +++ /dev/null @@ -1,25 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/.vuepress/components/guide/readme/cal-footer.vue b/docs/.vuepress/components/guide/readme/cal-footer.vue deleted file mode 100644 index cba0d5e59..000000000 --- a/docs/.vuepress/components/guide/readme/cal-footer.vue +++ /dev/null @@ -1,26 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/.vuepress/components/guide/readme/dp-available-dates.vue b/docs/.vuepress/components/guide/readme/dp-available-dates.vue deleted file mode 100644 index 61213f99c..000000000 --- a/docs/.vuepress/components/guide/readme/dp-available-dates.vue +++ /dev/null @@ -1,18 +0,0 @@ - - - diff --git a/docs/.vuepress/components/guide/readme/dp-custom-slot.vue b/docs/.vuepress/components/guide/readme/dp-custom-slot.vue deleted file mode 100644 index 3a24b0405..000000000 --- a/docs/.vuepress/components/guide/readme/dp-custom-slot.vue +++ /dev/null @@ -1,57 +0,0 @@ - - - diff --git a/docs/.vuepress/components/guide/readme/dp-disabled-dates.vue b/docs/.vuepress/components/guide/readme/dp-disabled-dates.vue deleted file mode 100644 index c2b3fca1d..000000000 --- a/docs/.vuepress/components/guide/readme/dp-disabled-dates.vue +++ /dev/null @@ -1,19 +0,0 @@ - - - diff --git a/docs/.vuepress/components/guide/readme/dp-inline.vue b/docs/.vuepress/components/guide/readme/dp-inline.vue deleted file mode 100644 index 34b01b0dc..000000000 --- a/docs/.vuepress/components/guide/readme/dp-inline.vue +++ /dev/null @@ -1,15 +0,0 @@ - - - diff --git a/docs/.vuepress/components/guide/readme/dp-input.vue b/docs/.vuepress/components/guide/readme/dp-input.vue deleted file mode 100644 index 5ff0bebbe..000000000 --- a/docs/.vuepress/components/guide/readme/dp-input.vue +++ /dev/null @@ -1,25 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/.vuepress/components/guide/readme/dp-min-max-dates.vue b/docs/.vuepress/components/guide/readme/dp-min-max-dates.vue deleted file mode 100644 index 66519e815..000000000 --- a/docs/.vuepress/components/guide/readme/dp-min-max-dates.vue +++ /dev/null @@ -1,26 +0,0 @@ - - - diff --git a/docs/.vuepress/components/guide/timezones/picker-date.vue b/docs/.vuepress/components/guide/timezones/picker-date.vue deleted file mode 100644 index d6969746e..000000000 --- a/docs/.vuepress/components/guide/timezones/picker-date.vue +++ /dev/null @@ -1,87 +0,0 @@ - - - diff --git a/docs/.vuepress/components/guide/timezones/picker-time.vue b/docs/.vuepress/components/guide/timezones/picker-time.vue deleted file mode 100644 index b9566f0e7..000000000 --- a/docs/.vuepress/components/guide/timezones/picker-time.vue +++ /dev/null @@ -1,84 +0,0 @@ - - - diff --git a/docs/.vuepress/components/guide/timezones/range.vue b/docs/.vuepress/components/guide/timezones/range.vue deleted file mode 100644 index 1d28090e3..000000000 --- a/docs/.vuepress/components/guide/timezones/range.vue +++ /dev/null @@ -1,97 +0,0 @@ - - - diff --git a/docs/.vuepress/components/homepage/banner.vue b/docs/.vuepress/components/homepage/banner.vue deleted file mode 100644 index c4dcacc5f..000000000 --- a/docs/.vuepress/components/homepage/banner.vue +++ /dev/null @@ -1,18 +0,0 @@ - diff --git a/docs/.vuepress/components/homepage/custom-calendar.vue b/docs/.vuepress/components/homepage/custom-calendar.vue deleted file mode 100644 index f1ae1ab22..000000000 --- a/docs/.vuepress/components/homepage/custom-calendar.vue +++ /dev/null @@ -1,177 +0,0 @@ - - - - - diff --git a/docs/.vuepress/components/homepage/dark-mode.vue b/docs/.vuepress/components/homepage/dark-mode.vue deleted file mode 100644 index aa8cf8649..000000000 --- a/docs/.vuepress/components/homepage/dark-mode.vue +++ /dev/null @@ -1,66 +0,0 @@ - - - diff --git a/docs/.vuepress/components/homepage/datepicker.vue b/docs/.vuepress/components/homepage/datepicker.vue deleted file mode 100644 index 110aae676..000000000 --- a/docs/.vuepress/components/homepage/datepicker.vue +++ /dev/null @@ -1,43 +0,0 @@ - - - diff --git a/docs/.vuepress/components/homepage/multi-calendar.vue b/docs/.vuepress/components/homepage/multi-calendar.vue deleted file mode 100644 index e1b38cfdf..000000000 --- a/docs/.vuepress/components/homepage/multi-calendar.vue +++ /dev/null @@ -1,12 +0,0 @@ - - \ No newline at end of file diff --git a/docs/.vuepress/components/homepage/simple-calendar.vue b/docs/.vuepress/components/homepage/simple-calendar.vue deleted file mode 100644 index ea0d4bdaf..000000000 --- a/docs/.vuepress/components/homepage/simple-calendar.vue +++ /dev/null @@ -1,411 +0,0 @@ - - - diff --git a/docs/.vuepress/components/showcase/class-highlight.vue b/docs/.vuepress/components/showcase/class-highlight.vue deleted file mode 100644 index ef838cf60..000000000 --- a/docs/.vuepress/components/showcase/class-highlight.vue +++ /dev/null @@ -1,38 +0,0 @@ - - - - - diff --git a/docs/.vuepress/components/showcase/dark-woods.vue b/docs/.vuepress/components/showcase/dark-woods.vue deleted file mode 100644 index d5dda66f0..000000000 --- a/docs/.vuepress/components/showcase/dark-woods.vue +++ /dev/null @@ -1,45 +0,0 @@ - - - - diff --git a/docs/.vuepress/components/sponsors/list.json b/docs/.vuepress/components/sponsors/list.json deleted file mode 100644 index 0c94d5d34..000000000 --- a/docs/.vuepress/components/sponsors/list.json +++ /dev/null @@ -1,6 +0,0 @@ -[{ - "twitterHandle": "@jackmcdade", - "githubUsername": "jackmcdade", - "githubUserId": "44739", - "since": "Nov 2019" -}] \ No newline at end of file diff --git a/docs/.vuepress/components/sponsors/page.vue b/docs/.vuepress/components/sponsors/page.vue deleted file mode 100644 index 6671292b3..000000000 --- a/docs/.vuepress/components/sponsors/page.vue +++ /dev/null @@ -1,70 +0,0 @@ - - - diff --git a/docs/.vuepress/components/tests/disabled.vue b/docs/.vuepress/components/tests/disabled.vue deleted file mode 100644 index 282364d75..000000000 --- a/docs/.vuepress/components/tests/disabled.vue +++ /dev/null @@ -1,16 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/.vuepress/components/tests/inline-range.vue b/docs/.vuepress/components/tests/inline-range.vue deleted file mode 100644 index ee4309f04..000000000 --- a/docs/.vuepress/components/tests/inline-range.vue +++ /dev/null @@ -1,42 +0,0 @@ - - - diff --git a/docs/.vuepress/components/tests/min-date.vue b/docs/.vuepress/components/tests/min-date.vue deleted file mode 100644 index be089ab5a..000000000 --- a/docs/.vuepress/components/tests/min-date.vue +++ /dev/null @@ -1,14 +0,0 @@ - - - diff --git a/docs/.vuepress/components/tests/range.vue b/docs/.vuepress/components/tests/range.vue deleted file mode 100644 index e2518b365..000000000 --- a/docs/.vuepress/components/tests/range.vue +++ /dev/null @@ -1,46 +0,0 @@ - - - diff --git a/docs/.vuepress/components/tests/single.vue b/docs/.vuepress/components/tests/single.vue deleted file mode 100644 index 24824a7d3..000000000 --- a/docs/.vuepress/components/tests/single.vue +++ /dev/null @@ -1,134 +0,0 @@ - - - diff --git a/docs/.vuepress/components/tests/theme.vue b/docs/.vuepress/components/tests/theme.vue deleted file mode 100644 index 518ab89c3..000000000 --- a/docs/.vuepress/components/tests/theme.vue +++ /dev/null @@ -1,16 +0,0 @@ - - - - diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js deleted file mode 100644 index ef5835b61..000000000 --- a/docs/.vuepress/config.js +++ /dev/null @@ -1,176 +0,0 @@ -const path = require('path'); -const postcssPresetEnv = require('postcss-preset-env'); -const tailwindcss = require('tailwindcss'); - -module.exports = { - title: 'V-Calendar', - description: 'An elegant calendar and datepicker plugin for Vuejs.', - plugins: [ - // Google analytics - ['@vuepress/google-analytics', { ga: 'UA-113780759-1' }], - ], - head: [['link', { rel: 'icon', href: 'favicon.png' }]], - themeConfig: { - nav: [ - { - text: 'Guide', - link: '/', - }, - { - text: 'API', - link: '/api/', - items: [ - { text: 'v1.0', link: '/api/v1.0/' }, - { text: 'v2.0', link: '/api/v2.0/' }, - ], - }, - { - text: 'Changelog', - link: '/changelog/v2.0', - }, - { - text: 'Sponsor', - link: 'https://github.com/sponsors/nathanreyes', - }, - ], - sidebar: { - '/api/v1.0/': [ - { - title: 'API', - collapsable: false, - children: [ - '', - 'defaults', - 'calendar', - 'page-object', - 'day-object', - 'attribute', - 'datepicker', - 'date-patterns', - ], - }, - ], - '/api/v2.0/': [ - { - title: 'API', - collapsable: false, - children: [ - '', - 'defaults', - 'calendar', - 'page-object', - 'day-object', - 'attribute', - 'datepicker', - 'date-patterns', - ], - }, - ], - '/changelog/': [ - { - title: 'Changelog', - collapsable: false, - children: [ - 'v2.0', - 'v1.0', - 'v0.9', - 'v0.8', - 'v0.7', - 'v0.6', - 'v0.5', - 'v0.4', - 'v0.3', - 'v0.2', - 'v0.1', - ], - }, - ], - '/tests/': [ - { - title: 'Tests', - children: [''], - }, - ], - '/showcase/': [ - { - title: 'Showcase', - collapsable: false, - children: ['', 'github'], - }, - ], - '/': [ - { - title: '', - collapsable: false, - children: ['', 'sponsors'], - }, - { - title: 'Getting Started', - collapsable: false, - children: ['installation', 'custom-defaults'], - }, - { - title: 'Core Concepts', - collapsable: false, - children: [ - 'colors-dark-mode', - 'layouts', - 'navigation', - 'dates', - 'attributes', - 'datepicker', - 'timezones', - 'i18n', - ], - }, - { - title: 'Examples', - collapsable: false, - children: ['/examples/datepickers'], - }, - ], - }, - // Assumes GitHub. Can also be a full GitLab url. - repo: 'nathanreyes/v-calendar', - // if your docs are not at the root of the repo - docsDir: 'docs', - // optional, defaults to master - docsBranch: 'master', - // defaults to true, set to false to disable - editLinks: true, - // custom text for edit link. Defaults to "Edit this page" - editLinkText: 'Help me improve this page!', - }, - postcss: { - plugins: [ - require('autoprefixer'), - postcssPresetEnv({ - stage: 3, - features: { 'nesting-rules': true, 'custom-properties': true }, - }), - ], - }, - configureWebpack: { - module: { - rules: [ - { - test: /tailwind\.css$/, - use: [ - { - loader: 'postcss-loader', - options: { - indent: 'postcss', - plugins: [tailwindcss('docs/.vuepress/tailwind.config.js')], - }, - }, - ], - }, - ], - }, - resolve: { - alias: { - '@': path.resolve('src'), - }, - }, - }, -}; diff --git a/docs/.vuepress/enhanceApp.js b/docs/.vuepress/enhanceApp.js deleted file mode 100644 index 40b50b13d..000000000 --- a/docs/.vuepress/enhanceApp.js +++ /dev/null @@ -1,27 +0,0 @@ -import VCalendar from '../../src/lib'; -import './styles/tailwind.css'; -import pageComponents from '@internal/page-components'; - -export default ({ Vue }) => { - for (const [name, component] of Object.entries(pageComponents)) { - Vue.component(name, component); - } - Vue.use(VCalendar, { - locales: { - 'pt-PT': { - firstDayOfWeek: 1, - masks: { - L: 'YYYY-MM-DD', // Default for formatting/parsing dates - }, - }, - // Added for GitHub Issue #330 - hu: { - firstDayOfWeek: 2, - masks: { - L: 'YYYY.MM.DD', - title: 'YYYY MMMM', // <- this doesn't work - }, - }, - }, - }); -}; diff --git a/docs/.vuepress/images/dark-woods.jpg b/docs/.vuepress/images/dark-woods.jpg deleted file mode 100644 index 71c32a757..000000000 Binary files a/docs/.vuepress/images/dark-woods.jpg and /dev/null differ diff --git a/docs/.vuepress/public/profile.jpg b/docs/.vuepress/public/profile.jpg deleted file mode 100755 index 04afa02c5..000000000 Binary files a/docs/.vuepress/public/profile.jpg and /dev/null differ diff --git a/docs/.vuepress/styles/index.styl b/docs/.vuepress/styles/index.styl deleted file mode 100644 index 45bf82d37..000000000 --- a/docs/.vuepress/styles/index.styl +++ /dev/null @@ -1,6 +0,0 @@ -.page - padding-top: 3.6rem - -.theme-container.quick-start - h1 - font-size: 4rem \ No newline at end of file diff --git a/docs/.vuepress/styles/palette.styl b/docs/.vuepress/styles/palette.styl deleted file mode 100644 index 9e5eb5a93..000000000 --- a/docs/.vuepress/styles/palette.styl +++ /dev/null @@ -1 +0,0 @@ -$accentColor = #667EEA \ No newline at end of file diff --git a/docs/.vuepress/styles/tailwind.css b/docs/.vuepress/styles/tailwind.css deleted file mode 100644 index 892744b85..000000000 --- a/docs/.vuepress/styles/tailwind.css +++ /dev/null @@ -1,110 +0,0 @@ -@tailwind base; - -@tailwind components; - -.distributed { - @apply my-8 flex justify-around items-start; -} - -.example, -.example-home { - @apply -mx-4 my-4 p-8 flex flex-col items-center justify-center bg-gray-100 border-t border-b; - &.is-dark { - @apply bg-gray-800; - } -} - -input[type='text'] { - @apply w-full shadow appearance-none border rounded py-2 px-3 text-gray-700; -} - -.homepage .home { - max-width: initial; - padding: 3.6rem 0 2rem 0; -} - -.site-name { - @apply text-indigo-700 !important; -} - -.site-name:hover { - @apply text-indigo-500 !important; -} - -.homepage .hero { - @apply px-4; -} -.homepage .hero img { - max-height: 190px !important; -} - -.homepage .content { - & div[class*='language-'] { - @apply max-w-md mx-auto; - } -} - -.homepage .hero .action-button { - @apply px-6 py-2 !important; -} - -.section { - @apply my-10; -} - -h1, -.h1 { - @apply text-3xl text-gray-800 p-0 mt-0 mb-4 !important; -} - -h2, -.h2 { - @apply text-2xl text-gray-800 border-none mb-4; -} - -h3, -.h3 { - @apply text-lg text-gray-700 font-medium tracking-wide mb-3; -} - -h4, -.h4 { - @apply text-gray-700 font-semibold tracking-wide p-0 mt-3 mb-2; -} - -h1, -h2, -h3, -h4 { - padding-top: 64px; - margin-top: -64px; -} - -a { - @apply text-indigo-700 no-underline; - &:hover { - @apply text-indigo-600; - } -} - -ul { - @apply list-disc; -} - -/* ul li { - @apply space-y-4; -} */ - -ol { - @apply list-decimal; -} - -p { - @apply my-2 leading-relaxed; -} - -* { - border-radius: 0; -} - -@tailwind utilities; diff --git a/docs/.vuepress/tailwind.config.js b/docs/.vuepress/tailwind.config.js deleted file mode 100644 index 34601af14..000000000 --- a/docs/.vuepress/tailwind.config.js +++ /dev/null @@ -1,9 +0,0 @@ -module.exports = { - theme: { - extend: { - width: { - 72: '18rem', - }, - }, - }, -}; diff --git a/docs/.vuepress/theme/LICENSE b/docs/.vuepress/theme/LICENSE deleted file mode 100644 index 15f1f7e7a..000000000 --- a/docs/.vuepress/theme/LICENSE +++ /dev/null @@ -1,21 +0,0 @@ -The MIT License (MIT) - -Copyright (c) 2018-present, Yuxi (Evan) You - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in -all copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN -THE SOFTWARE. diff --git a/docs/.vuepress/theme/components/AlgoliaSearchBox.vue b/docs/.vuepress/theme/components/AlgoliaSearchBox.vue deleted file mode 100644 index 92818a125..000000000 --- a/docs/.vuepress/theme/components/AlgoliaSearchBox.vue +++ /dev/null @@ -1,167 +0,0 @@ - - - - - diff --git a/docs/.vuepress/theme/components/CarbonAds.vue b/docs/.vuepress/theme/components/CarbonAds.vue deleted file mode 100644 index 2abe638b0..000000000 --- a/docs/.vuepress/theme/components/CarbonAds.vue +++ /dev/null @@ -1,74 +0,0 @@ - - - diff --git a/docs/.vuepress/theme/components/DropdownLink.vue b/docs/.vuepress/theme/components/DropdownLink.vue deleted file mode 100644 index 94f555183..000000000 --- a/docs/.vuepress/theme/components/DropdownLink.vue +++ /dev/null @@ -1,260 +0,0 @@ - - - - - diff --git a/docs/.vuepress/theme/components/DropdownTransition.vue b/docs/.vuepress/theme/components/DropdownTransition.vue deleted file mode 100644 index 8c711a155..000000000 --- a/docs/.vuepress/theme/components/DropdownTransition.vue +++ /dev/null @@ -1,33 +0,0 @@ - - - - - diff --git a/docs/.vuepress/theme/components/Home.vue b/docs/.vuepress/theme/components/Home.vue deleted file mode 100644 index 19c9888cc..000000000 --- a/docs/.vuepress/theme/components/Home.vue +++ /dev/null @@ -1,198 +0,0 @@ - - - - - diff --git a/docs/.vuepress/theme/components/NavLink.vue b/docs/.vuepress/theme/components/NavLink.vue deleted file mode 100644 index b79b2d014..000000000 --- a/docs/.vuepress/theme/components/NavLink.vue +++ /dev/null @@ -1,57 +0,0 @@ - - - diff --git a/docs/.vuepress/theme/components/NavLinks.vue b/docs/.vuepress/theme/components/NavLinks.vue deleted file mode 100644 index ae281df8f..000000000 --- a/docs/.vuepress/theme/components/NavLinks.vue +++ /dev/null @@ -1,111 +0,0 @@ - - - diff --git a/docs/.vuepress/theme/components/Navbar.vue b/docs/.vuepress/theme/components/Navbar.vue deleted file mode 100644 index bc32112c5..000000000 --- a/docs/.vuepress/theme/components/Navbar.vue +++ /dev/null @@ -1,98 +0,0 @@ - - - diff --git a/docs/.vuepress/theme/components/Page.vue b/docs/.vuepress/theme/components/Page.vue deleted file mode 100644 index cf28ecb09..000000000 --- a/docs/.vuepress/theme/components/Page.vue +++ /dev/null @@ -1,21 +0,0 @@ - - - - - diff --git a/docs/.vuepress/theme/components/PageEdit.vue b/docs/.vuepress/theme/components/PageEdit.vue deleted file mode 100644 index 27db7f68f..000000000 --- a/docs/.vuepress/theme/components/PageEdit.vue +++ /dev/null @@ -1,130 +0,0 @@ - - - diff --git a/docs/.vuepress/theme/components/PageNav.vue b/docs/.vuepress/theme/components/PageNav.vue deleted file mode 100644 index 7496cb566..000000000 --- a/docs/.vuepress/theme/components/PageNav.vue +++ /dev/null @@ -1,104 +0,0 @@ - - diff --git a/docs/.vuepress/theme/components/Sidebar.vue b/docs/.vuepress/theme/components/Sidebar.vue deleted file mode 100644 index 83d66c3bf..000000000 --- a/docs/.vuepress/theme/components/Sidebar.vue +++ /dev/null @@ -1,29 +0,0 @@ - - - diff --git a/docs/.vuepress/theme/components/SidebarButton.vue b/docs/.vuepress/theme/components/SidebarButton.vue deleted file mode 100644 index aa451a68a..000000000 --- a/docs/.vuepress/theme/components/SidebarButton.vue +++ /dev/null @@ -1,42 +0,0 @@ - - - diff --git a/docs/.vuepress/theme/components/SidebarGroup.vue b/docs/.vuepress/theme/components/SidebarGroup.vue deleted file mode 100644 index 0d546eade..000000000 --- a/docs/.vuepress/theme/components/SidebarGroup.vue +++ /dev/null @@ -1,140 +0,0 @@ - - - - - diff --git a/docs/.vuepress/theme/components/SidebarLink.vue b/docs/.vuepress/theme/components/SidebarLink.vue deleted file mode 100644 index 3628d4dd0..000000000 --- a/docs/.vuepress/theme/components/SidebarLink.vue +++ /dev/null @@ -1,122 +0,0 @@ - - - diff --git a/docs/.vuepress/theme/components/SidebarLinks.vue b/docs/.vuepress/theme/components/SidebarLinks.vue deleted file mode 100644 index 82bcf49f2..000000000 --- a/docs/.vuepress/theme/components/SidebarLinks.vue +++ /dev/null @@ -1,81 +0,0 @@ - - - diff --git a/docs/.vuepress/theme/global-components/Badge.vue b/docs/.vuepress/theme/global-components/Badge.vue deleted file mode 100644 index 8255293b5..000000000 --- a/docs/.vuepress/theme/global-components/Badge.vue +++ /dev/null @@ -1,44 +0,0 @@ - - - diff --git a/docs/.vuepress/theme/index.js b/docs/.vuepress/theme/index.js deleted file mode 100644 index 3e71be184..000000000 --- a/docs/.vuepress/theme/index.js +++ /dev/null @@ -1,54 +0,0 @@ -const path = require('path') - -// Theme API. -module.exports = (options, ctx) => { - const { themeConfig, siteConfig } = ctx - - // resolve algolia - const isAlgoliaSearch = ( - themeConfig.algolia - || Object - .keys(siteConfig.locales && themeConfig.locales || {}) - .some(base => themeConfig.locales[base].algolia) - ) - - const enableSmoothScroll = themeConfig.smoothScroll === true - - return { - alias () { - return { - '@AlgoliaSearchBox': isAlgoliaSearch - ? path.resolve(__dirname, 'components/AlgoliaSearchBox.vue') - : path.resolve(__dirname, 'noopModule.js') - } - }, - - plugins: [ - ['@vuepress/active-header-links', options.activeHeaderLinks], - '@vuepress/search', - '@vuepress/plugin-nprogress', - ['container', { - type: 'tip', - defaultTitle: { - '/': 'TIP', - '/zh/': '提示' - } - }], - ['container', { - type: 'warning', - defaultTitle: { - '/': 'WARNING', - '/zh/': '注意' - } - }], - ['container', { - type: 'danger', - defaultTitle: { - '/': 'WARNING', - '/zh/': '警告' - } - }], - ['smooth-scroll', enableSmoothScroll] - ] - } -} diff --git a/docs/.vuepress/theme/layouts/404.vue b/docs/.vuepress/theme/layouts/404.vue deleted file mode 100644 index 7a29ee69a..000000000 --- a/docs/.vuepress/theme/layouts/404.vue +++ /dev/null @@ -1,24 +0,0 @@ - - - diff --git a/docs/.vuepress/theme/layouts/Layout.vue b/docs/.vuepress/theme/layouts/Layout.vue deleted file mode 100644 index c1fb7a5d5..000000000 --- a/docs/.vuepress/theme/layouts/Layout.vue +++ /dev/null @@ -1,155 +0,0 @@ - - - - - diff --git a/docs/.vuepress/theme/noopModule.js b/docs/.vuepress/theme/noopModule.js deleted file mode 100644 index b1c6ea436..000000000 --- a/docs/.vuepress/theme/noopModule.js +++ /dev/null @@ -1 +0,0 @@ -export default {} diff --git a/docs/.vuepress/theme/styles/arrow.styl b/docs/.vuepress/theme/styles/arrow.styl deleted file mode 100644 index 20bffc0dc..000000000 --- a/docs/.vuepress/theme/styles/arrow.styl +++ /dev/null @@ -1,22 +0,0 @@ -@require './config' - -.arrow - display inline-block - width 0 - height 0 - &.up - border-left 4px solid transparent - border-right 4px solid transparent - border-bottom 6px solid $arrowBgColor - &.down - border-left 4px solid transparent - border-right 4px solid transparent - border-top 6px solid $arrowBgColor - &.right - border-top 4px solid transparent - border-bottom 4px solid transparent - border-left 6px solid $arrowBgColor - &.left - border-top 4px solid transparent - border-bottom 4px solid transparent - border-right 6px solid $arrowBgColor diff --git a/docs/.vuepress/theme/styles/code.styl b/docs/.vuepress/theme/styles/code.styl deleted file mode 100644 index e9618c631..000000000 --- a/docs/.vuepress/theme/styles/code.styl +++ /dev/null @@ -1,137 +0,0 @@ -.{$contentClass} - code - color $accentColor - padding 0.25rem 0.5rem - margin 0 - font-size 0.85em - background-color $codeInlineBgColor - border-radius 3px - .token - &.deleted - color #EC5975 - &.inserted - color $accentColor - -.{$contentClass} - pre, pre[class*="language-"] - line-height 1.4 - padding 1.25rem 1.5rem - margin 0.85rem 0 - background-color $codeBgColor - border-radius 6px - overflow auto - code - color #fff - padding 0 - background-color transparent - border-radius 0 - -div[class*="language-"] - position relative - background-color $codeBgColor - border-radius 6px - .highlight-lines - user-select none - padding-top 1.3rem - position absolute - top 0 - left 0 - width 100% - line-height 1.4 - .highlighted - background-color rgba(0, 0, 0, 66%) - pre, pre[class*="language-"] - background transparent - position relative - z-index 1 - &::before - position absolute - z-index 3 - top 0.8em - right 1em - font-size 0.75rem - color rgba(255, 255, 255, 0.4) - &:not(.line-numbers-mode) - .line-numbers-wrapper - display none - &.line-numbers-mode - .highlight-lines .highlighted - position relative - &:before - content ' ' - position absolute - z-index 3 - left 0 - top 0 - display block - width $lineNumbersWrapperWidth - height 100% - background-color rgba(0, 0, 0, 66%) - pre - padding-left $lineNumbersWrapperWidth + 1 rem - vertical-align middle - .line-numbers-wrapper - position absolute - top 0 - width $lineNumbersWrapperWidth - text-align center - color rgba(255, 255, 255, 0.3) - padding 1.25rem 0 - line-height 1.4 - br - user-select none - .line-number - position relative - z-index 4 - user-select none - font-size 0.85em - &::after - content '' - position absolute - z-index 2 - top 0 - left 0 - width $lineNumbersWrapperWidth - height 100% - border-radius 6px 0 0 6px - border-right 1px solid rgba(0, 0, 0, 66%) - background-color $codeBgColor - - -for lang in $codeLang - div{'[class~="language-' + lang + '"]'} - &:before - content ('' + lang) - -div[class~="language-javascript"] - &:before - content "js" - -div[class~="language-typescript"] - &:before - content "ts" - -div[class~="language-markup"] - &:before - content "html" - -div[class~="language-markdown"] - &:before - content "md" - -div[class~="language-json"]:before - content "json" - -div[class~="language-ruby"]:before - content "rb" - -div[class~="language-python"]:before - content "py" - -div[class~="language-bash"]:before - content "sh" - -div[class~="language-php"]:before - content "php" - -@import '~prismjs/themes/prism-tomorrow.css' diff --git a/docs/.vuepress/theme/styles/custom-blocks.styl b/docs/.vuepress/theme/styles/custom-blocks.styl deleted file mode 100644 index 4248680a4..000000000 --- a/docs/.vuepress/theme/styles/custom-blocks.styl +++ /dev/null @@ -1,30 +0,0 @@ -.custom-block - .custom-block-title - font-weight 600 - margin: 0 - &.tip, &.warning, &.danger - padding 1rem 1.5rem - border-left-width .5rem - border-left-style solid - margin 1rem 0 - &.tip - background-color #f3f5f7 - border-color #42b983 - &.warning - background-color rgba(255,229,100,.3) - border-color darken(#ffe564, 35%) - color darken(#ffe564, 70%) - .custom-block-title - color darken(#ffe564, 50%) - a - color $textColor - &.danger - background-color #ffe6e6 - border-color darken(red, 20%) - color darken(red, 70%) - .custom-block-title - color darken(red, 40%) - a - color $textColor - - diff --git a/docs/.vuepress/theme/styles/index.styl b/docs/.vuepress/theme/styles/index.styl deleted file mode 100644 index f0aceecee..000000000 --- a/docs/.vuepress/theme/styles/index.styl +++ /dev/null @@ -1,85 +0,0 @@ -@require './code' -@require './custom-blocks' -@require './arrow' -@require './wrapper' -@require './toc' -@require './palette.styl' - -.{$contentClass}:not(.custom) - @extend $wrapper - - a:hover - text-decoration underline - - p.demo - padding 1rem 1.5rem - border 1px solid #ddd - border-radius 4px - - img - max-width 100% - -.{$contentClass}.custom - padding 0 - margin 0 - - img - max-width 100% - -p a code - font-weight 400 - color $accentColor - -kbd - background #eee - border solid 0.15rem #ddd - border-bottom solid 0.25rem #ddd - border-radius 0.15rem - padding 0 0.15em - -blockquote - font-size 1rem - color #999; - border-left .2rem solid #dfe2e5 - margin 1rem 0 - padding .25rem 0 .25rem 1rem - - & > p - margin 0 - -ul, ol - padding-left 1.2em - -strong - font-weight 600 - -a.header-anchor - font-size 0.85em - float left - margin-left -0.87em - padding-right 0.23em - margin-top 0.125em - opacity 0 - - &:hover - text-decoration none - -hr - border 0 - border-top 1px solid $borderColor - -table - border-collapse collapse - margin 1rem 0 - display: block - overflow-x: auto - -tr - border-top 1px solid #dfe2e5 - - &:nth-child(2n) - background-color #f6f8fa - -th, td - border 1px solid #dfe2e5 - padding .6em 1em diff --git a/docs/.vuepress/theme/styles/palette.styl b/docs/.vuepress/theme/styles/palette.styl deleted file mode 100644 index 34c955129..000000000 --- a/docs/.vuepress/theme/styles/palette.styl +++ /dev/null @@ -1,11 +0,0 @@ -$contentClass = content__default - -// colors -$textColor = #2c3e50 -$borderColor = #eaecef -$codeBgColor = #2D3748 -$codeInlineBgColor = #EDF2F7 -$arrowBgColor = #ccc -$badgeTipColor = #42b983 -$badgeWarningColor = darken(#ffe564, 35%) -$badgeErrorColor = #DA5961 \ No newline at end of file diff --git a/docs/.vuepress/theme/styles/toc.styl b/docs/.vuepress/theme/styles/toc.styl deleted file mode 100644 index d3e71069b..000000000 --- a/docs/.vuepress/theme/styles/toc.styl +++ /dev/null @@ -1,3 +0,0 @@ -.table-of-contents - .badge - vertical-align middle diff --git a/docs/.vuepress/theme/styles/wrapper.styl b/docs/.vuepress/theme/styles/wrapper.styl deleted file mode 100644 index 94f979ca2..000000000 --- a/docs/.vuepress/theme/styles/wrapper.styl +++ /dev/null @@ -1,10 +0,0 @@ -$wrapper - max-width $contentWidth - margin 0 auto - // padding 2rem 2.5rem - padding 2rem 1rem - @media (max-width: $MQNarrow) - padding 1rem 0rem - @media (max-width: $MQMobileNarrow) - padding 1rem 0rem - diff --git a/docs/.vuepress/theme/util/index.js b/docs/.vuepress/theme/util/index.js deleted file mode 100644 index fbf641635..000000000 --- a/docs/.vuepress/theme/util/index.js +++ /dev/null @@ -1,245 +0,0 @@ -export const hashRE = /#.*$/ -export const extRE = /\.(md|html)$/ -export const endingSlashRE = /\/$/ -export const outboundRE = /^[a-z]+:/i - -export function normalize (path) { - return decodeURI(path) - .replace(hashRE, '') - .replace(extRE, '') -} - -export function getHash (path) { - const match = path.match(hashRE) - if (match) { - return match[0] - } -} - -export function isExternal (path) { - return outboundRE.test(path) -} - -export function isMailto (path) { - return /^mailto:/.test(path) -} - -export function isTel (path) { - return /^tel:/.test(path) -} - -export function ensureExt (path) { - if (isExternal(path)) { - return path - } - const hashMatch = path.match(hashRE) - const hash = hashMatch ? hashMatch[0] : '' - const normalized = normalize(path) - - if (endingSlashRE.test(normalized)) { - return path - } - return normalized + '.html' + hash -} - -export function isActive (route, path) { - const routeHash = route.hash - const linkHash = getHash(path) - if (linkHash && routeHash !== linkHash) { - return false - } - const routePath = normalize(route.path) - const pagePath = normalize(path) - return routePath === pagePath -} - -export function resolvePage (pages, rawPath, base) { - if (isExternal(rawPath)) { - return { - type: 'external', - path: rawPath - } - } - if (base) { - rawPath = resolvePath(rawPath, base) - } - const path = normalize(rawPath) - for (let i = 0; i < pages.length; i++) { - if (normalize(pages[i].regularPath) === path) { - return Object.assign({}, pages[i], { - type: 'page', - path: ensureExt(pages[i].path) - }) - } - } - console.error(`[vuepress] No matching page found for sidebar item "${rawPath}"`) - return {} -} - -function resolvePath (relative, base, append) { - const firstChar = relative.charAt(0) - if (firstChar === '/') { - return relative - } - - if (firstChar === '?' || firstChar === '#') { - return base + relative - } - - const stack = base.split('/') - - // remove trailing segment if: - // - not appending - // - appending to trailing slash (last segment is empty) - if (!append || !stack[stack.length - 1]) { - stack.pop() - } - - // resolve relative path - const segments = relative.replace(/^\//, '').split('/') - for (let i = 0; i < segments.length; i++) { - const segment = segments[i] - if (segment === '..') { - stack.pop() - } else if (segment !== '.') { - stack.push(segment) - } - } - - // ensure leading slash - if (stack[0] !== '') { - stack.unshift('') - } - - return stack.join('/') -} - -/** - * @param { Page } page - * @param { string } regularPath - * @param { SiteData } site - * @param { string } localePath - * @returns { SidebarGroup } - */ -export function resolveSidebarItems (page, regularPath, site, localePath) { - const { pages, themeConfig } = site - - const localeConfig = localePath && themeConfig.locales - ? themeConfig.locales[localePath] || themeConfig - : themeConfig - - const pageSidebarConfig = page.frontmatter.sidebar || localeConfig.sidebar || themeConfig.sidebar - if (pageSidebarConfig === 'auto') { - return resolveHeaders(page) - } - - const sidebarConfig = localeConfig.sidebar || themeConfig.sidebar - if (!sidebarConfig) { - return [] - } else { - const { base, config } = resolveMatchingConfig(regularPath, sidebarConfig) - return config - ? config.map(item => resolveItem(item, pages, base)) - : [] - } -} - -/** - * @param { Page } page - * @returns { SidebarGroup } - */ -function resolveHeaders (page) { - const headers = groupHeaders(page.headers || []) - return [{ - type: 'group', - collapsable: false, - title: page.title, - path: null, - children: headers.map(h => ({ - type: 'auto', - title: h.title, - basePath: page.path, - path: page.path + '#' + h.slug, - children: h.children || [] - })) - }] -} - -export function groupHeaders (headers) { - // group h3s under h2 - headers = headers.map(h => Object.assign({}, h)) - let lastH2 - headers.forEach(h => { - if (h.level === 2) { - lastH2 = h - } else if (lastH2) { - (lastH2.children || (lastH2.children = [])).push(h) - } - }) - return headers.filter(h => h.level === 2) -} - -export function resolveNavLinkItem (linkItem) { - return Object.assign(linkItem, { - type: linkItem.items && linkItem.items.length ? 'links' : 'link' - }) -} - -/** - * @param { Route } route - * @param { Array | Array | [link: string]: SidebarConfig } config - * @returns { base: string, config: SidebarConfig } - */ -export function resolveMatchingConfig (regularPath, config) { - if (Array.isArray(config)) { - return { - base: '/', - config: config - } - } - for (const base in config) { - if (ensureEndingSlash(regularPath).indexOf(encodeURI(base)) === 0) { - return { - base, - config: config[base] - } - } - } - return {} -} - -function ensureEndingSlash (path) { - return /(\.html|\/)$/.test(path) - ? path - : path + '/' -} - -function resolveItem (item, pages, base, groupDepth = 1) { - if (typeof item === 'string') { - return resolvePage(pages, item, base) - } else if (Array.isArray(item)) { - return Object.assign(resolvePage(pages, item[0], base), { - title: item[1] - }) - } else { - if (groupDepth > 3) { - console.error( - '[vuepress] detected a too deep nested sidebar group.' - ) - } - const children = item.children || [] - if (children.length === 0 && item.path) { - return Object.assign(resolvePage(pages, item.path, base), { - title: item.title - }) - } - return { - type: 'group', - path: item.path, - title: item.title, - sidebarDepth: item.sidebarDepth, - children: children.map(child => resolveItem(child, pages, base, groupDepth + 1)), - collapsable: item.collapsable !== false - } - } -} diff --git a/docs/README.md b/docs/README.md deleted file mode 100644 index 6976416b8..000000000 --- a/docs/README.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: 'Introduction' -heroImage: /hero.png -actionText: Get Started → -actionLink: /guide/ -footer: MIT Licensed | Copyright © 2017-Present Nathan Reyes -pageClass: 'homepage' ---- - -
- -Banner image - -# V-Calendar - -### An elegant calendar and datepicker plugin for Vuejs. - -```bash -npm i v-calendar -``` - - - - - - - - - -#### Popovers w/ Custom Slots - - - - - -[View example in GitHub](https://github.com/nathanreyes/v-calendar/blob/master/docs/.vuepress/components/homepage/custom-calendar.vue) - -
diff --git a/docs/api/v1.0/README.md b/docs/api/v1.0/README.md deleted file mode 100644 index 04d2f337f..000000000 --- a/docs/api/v1.0/README.md +++ /dev/null @@ -1,31 +0,0 @@ -# Overview - -:::warning -This page is currently being updated. -::: - -[Defaults](./defaults.md) - -[Calendar](./calendar.md) - * [Props](./calendar.md#props) - * [Events](./calendar.md#events) - * [Methods](./calendar.md#methods) - * [Scoped Slots](./calendar.md#scoped-slots) - -[Page Object](./page-object.md) - -[Day Object](./day-object.md) - -[Attribute](./attribute.md) - * [Highlight](./attribute.mds#highlight) - * [Dot](./attribute.md#dot) - * [Bar](./attribute.md#bar) - * [Popover](./attribute.md#popover) - * [Content](./attribute.md#content) - -[Date Picker](./datepicker.md) - * [Props](./datepicker.md#props) - * [Events](./datepicker.md#events) - * [Slots](./datepicker.md#slots) - -[Date Patterns](./date-patterns.html) \ No newline at end of file diff --git a/docs/api/v1.0/attribute.md b/docs/api/v1.0/attribute.md deleted file mode 100644 index 995b07c8a..000000000 --- a/docs/api/v1.0/attribute.md +++ /dev/null @@ -1,268 +0,0 @@ ---- -title: Attribute -sidebarDepth: 2 ---- - -## Properties - -### `key` - -**Type:** String - -**Description:** Keys uniquely identify an attribute and may determine how animations are applied. - -**Default:** `index` - -### `dates` - -**Type:** Date, Object, Array[Date, Object] - -**Description:** Date or date range objects (patterns supported) to include for the attribute. - -**Default:** `undefined` - -### `excludeDates` - -**Type:** Date, Object, Array[Date, Object] - -**Description:** Date or date range objects (patterns supported) to exclude. All other dates are included. - -**Default:** `undefined` - -### `customData` - -**Type:** Any - -**Description:** Assign any custom data to this property for easy access within event handlers. - -**Default:** `undefined` - -### `order` - -**Type:** Number - -**Description:** Order that the attribute should be displayed. Higher numbers take precedence in appearance. - -**Default:** `0` - - - -### `highlight` - -**Type:** Boolean, String, Object - -**Description:** Configuration of higlight. If boolean, displays the highlight using the current color. If string, displays the highlight using the specified color. If object, uses the properties below. - -**Default:** `undefined` - -### `highlight.color` - -**Type:** String - -**Description:** Color. - -**Default:** `undefined` - -### `highlight.fillMode` - -**Type:** String - -**Description:** Color fill option (`solid`, `light`, `none`) - -**Default:** `solid` - -### `highlight.class` - -**Type:** String - -**Description:** Class to apply to the highlight background element. | - -**Default:** `''` - -### `highlight.style` - -**Type:** Object - -**Description:** Style to apply to the highlight background element. | - -**Default:** `undefined` - -### `highlight.contentClass` - -**Type:** String - -**Description:** Class to apply to the highlight content element. - -**Default:** `''` - -### `highlight.style` - -**Type:** Object - -**Description:** Style to apply to the highlight content element. | - -**Default:** `undefined` - -### `highlight.contentStyle` - -**Type:** Object - -**Description:** Style to apply to the highlight content element. | - -**Default:** `undefined` - -### `dot` - -**Type:** Boolean, String, Object - -**Description:** Configuration of dot. If boolean, displays the dot using the current color. If string, displays the dot using the specified color. If object, uses the properties below. - -**Default:** `undefined` - -### `dot.color` - -**Type:** String - -**Description:** Color. - -**Default:** `undefined` - -### `dot.class` - -**Type:** String - -**Description:** Class to apply to the dot element. - -**Default:** `undefined` - -### `dot.style` - -**Type:** Object - -**Description:** Style to apply to the dot element. - -**Default:** `undefined` - -### `bar` - -**Type:** Boolean, String, Object - -**Description:** Configuration of bar. If boolean, displays the bar using the current color. If string, displays the bar using the specified color. If object, uses the properties below. - -**Default:** `undefined` - -### `bar.color` - -**Type:** String - -**Description:** Color. - -**Default:** `undefined` - -### `bar.class` - -**Type:** String - -**Description:** Class to apply to the bar element. - -**Default:** `undefined` - -### `bar.style` - -**Type:** Object - -**Description:** Style to apply to the bar element. - -**Default:** `undefined` - -### `popover` - -**Type:** Object - -### `popover.label` - -**Type:** String - -**Description:** Text string to display in the popover content row. - -**Default:** `undefined` - -### `popover.labelClass` - -**Type:** String - -**Description:** Class to apply to the label. - -**Default:** `undefined` - -### `popover.labelStyle` - -**Type:** Object - -**Description:** Style to apply to the label. - -**Default:** `undefined` - -### `popover.hideIndicator` - -**Type:** Boolean - -**Description:** Hides the indicator symbol on the left side of the popover content row. - -**Default:** `false` - -### `popover.isInteractive` - -**Type:** Boolean - -**Description:** Determines if the user can interract with the popover content. Logically 'OR'ed with other popovers on the same day. - -**Default:** `false` - -### `popover.modifiers` - -**Type:** Array - -**Description:** Modifiers used to modify the behavior of [`popper.js`](https://popper.js.org/docs/v2/modifiers/). - -### `popover.placement` - -**Type:** String - -**Description:** Default or suggested placement of the popover. This may change as the browser window dimensions change. Valid placements include `auto`, `top`, `right`, `bottom`, `left`. Each placement can have suffixed variations `-start` or `-end`. - -**Default:** `bottom-start` - -### `popover.positionFixed` - -**Type:** Boolean - -**Description:** Uses a `fixed` position when displaying the popover. Use this open when the calendar is placed within a container that has `overflow: hidden` style applied. Reference popper.js for more details. - -**Default:** `false` - -### `popover.visibility` - -**Type:** String - -**Description:** Visibility of the popover when this label or slot is displayed (`hover-focus`, `hover`, `focus`, `click`, `visible`, `hidden`). - -**Default:** `hover` - - \ No newline at end of file diff --git a/docs/api/v1.0/calendar.md b/docs/api/v1.0/calendar.md deleted file mode 100644 index 8eccecee6..000000000 --- a/docs/api/v1.0/calendar.md +++ /dev/null @@ -1,505 +0,0 @@ ---- -title: 'Calendar' -sidebarDepth: 2 ---- - -## Props - -### `rows` - -**Type:** Number - -**Description:** Number of calendar rows to display. - -**Default:** `1` - -### `columns` - -**Type:** Number - -**Description:** Number of calendar columns to display. - -**Default:** `1` - -### `step` - -**Type:** Number - -**Description:** Number of months to step when navigating forwards and backwards. - -**Default:** `0` *Resolves to **n** if not provided, where `n = rows * columns`.* - -### `title-position` - -**Type:** String - -**Description:** Position of the header title (`"left"`, `"center"`, `"right"`). - -**Default:** `"center"` - -### `is-expanded` - -**Type:** Boolean - -**Description:** Expands calendar to fill the full width of its container. - -**Default:** `false` - -### `nav-visibility` - -**Type:** String - -**Description:** Visibility state for calendar navigation panel (`"focus"`, `"hover"`, `"visible"`, `"hidden"`) - -**Default:** `undefined` [Resolved by defaults if not specified](./defaults.md#nav-visibility) - -### `transition` - -**Type:** String - -**Description:** Transition type for calendar panes when navigating to a new page (`"slide-h"`: Horizontal slide, `"slide-v"`: Vertical slide, `"fade"`, `"none"`). - -**Default:** `undefined` [Resolved by defaults if not specified](./defaults.md#transition) - -### `from-page` - -**Type:** Object - -**Description:** The page (month, year) for the first calendar pane located at row 0 and column 0. Use the `.sync` modifier for two-way binding. - -**Default:** `undefined` *Resolves to current month if not provided.* - -:::tip -Use the `.sync` modifier for two-way binding. -::: - -### `from-date` - -**Type:** Date - -**Description:** Date used to compute `from-page`. - -**Default:** `undefined` - -:::warning -The `.sync` modifier does not work with this prop, unlike `from-page`. -::: - -### `to-page` - -**Type:** Object - -**Description:** The page (month, year) for the last calendar pane located at row *n* and column *n*, where *n* is the max dimension. - -**Default:** `undefined` *Resolves to **n** month if not provided, where `n = rows * columns`.* - -::: tip -*Resolves to **n** month if not provided, where `n = rows * columns`. -::: - -:::tip -Use the `.sync` modifier for two-way binding. -::: - -:::warning -To avoid erratic navigation behavior, do not try to assign both `from-page` and `to-page` at the same time (just pick one). -::: - -### `to-date` - -**Type:** Date - -**Description:** Date used to compute `to-page`. - -**Default:** `undefined` - -:::warning -The `.sync` modifier does not work with this prop, unlike `to-page`. -::: - -### `min-page` - -**Type:** Object - -**Description:** Earliest page (month, year) that the user can navigate to. - -**Default:** `undefined` - -### `min-date` - -**Type:** Date - -**Description:** Date used to compute `min-page`. - -**Default:** `undefined` - -### `max-page` - -**Type:** Object - -**Description:** Latest page (month, year) that the user can navigate to. - -**Default:** `undefined` - -### `max-date` - -**Type:** Date - -**Description:** Date used to compute `max-page`. - -**Default:** `undefined` - -### `attributes` - -**Type:** Array[Object] - -**Description:** List of attributes to display in the calendar. - -**Default:** `[]` - -### `disabled-dates` - -**Type:** Date that can be one of a Javascript date object, a date range object with `start`, `end`, `span` or [pattern tokens](./date-patterns.md) - -**Description:** Dates that are disabled from user selection or navigation. - -**Default:** `null` - -### `available-dates` - -**Type:** Date that can be one of a Javascript date object, a date range object with `start`, `end`, `span` or [pattern tokens](./date-patterns.md) - -**Description:** Dates or date range objects that are available for selection or navigation. All other dates are disabled. - -**Default Value:** `undefined` - -### `masks` - -**Type:** Object - -**Description:** Masks to use when formatting and parsing dates for various calendar sections. - -**Default:** `undefined` [Resolved by defaults if not specified](./defaults.md#masks) - -### `color` - -**Type:** String - -**Description:** Color used for accents and attribute defaults. - -**Default:** `"blue"` - -### `is-dark` - -**Type:** Boolean - -**Description:** Dark mode setting. - -**Default:** `false` - -### `first-day-of-week` - -**Type:** Number - -**Description:** Day number for the first day of the week (1: Sun - 7: Sat). Ignore setting this prop if you want to allow the locale to determine this setting. - -**Default:** `undefined` [Resolved by locale if not specified](#locale) - -### `locale` - -**Type:** String, Object - -**Description:** The locale identifier or locale configuration to use for displaying the calendar. - -**Default:** `undefined` [Resolved by defaults or detected locale if not completely specified](./defaults.md#locale) - -### `disable-page-swipe` - -**Type:** Boolean - -**Description:** Disables swipe detection for navigating forwards and backwards. - -**Default:** `undefined` - - - - -## Events - -### `update:from-page` - -**Description:** Calendar left/single pane moved to a different page. - -**Params:** [`page`](./page-object.md) - -### `update:to-page` - -**Description:** Calendar right pane moved to a different page. - -**Params:** [`page`](./page-object.md) - -### `dayclick` - -**Description:** Forwarded from the `mouseclick` event for the day content element. - -**Params:** [`day`](./day-object.md) - -### `daymouseenter` - -**Description:** Forwarded from the `mouseenter` event for the day content element. - -**Params:** [`day`](./day-object.md) - -### `daymouseleave` - -**Description:** Forwarded from the `mouseleave` event for the day content element. - -**Params:** [`day`](./day-object.md) - -### `dayfocusin` - -**Description:** Forwarded from the `focusin` event for the day content element. - -**Params:** [`day`](./day-object.md) - -### `dayfocusout` - -**Description:** Forwarded from the `focusout` event for the day content element. - -**Params:** [`day`](./day-object.md) - -### `transition-start` - -**Description:** Transition to new page has started. - -### `transition-end` - -**Description:** Transition to new page has ended. - -## Methods - -To call methods on a component, assign a ref and call the method any time on or after the `mounted` lifecycle hook. - -```html - -``` - -```js -// Get the calendar ref -const calendar = this.$refs.calendar - -// Move forwards 5 months (wait for transition) -await calendar.move(5) - -// Move backwards 5 months (wait for transition) -await calendar.move(-5) -``` - -#### Move to month - -Moves to a given month by calling `move(month)` with an object with `month` and `year` keys. - -```js -// Get the calendar ref -const calendar = this.$refs.calendar - -// Moves to January, 1983 -await calendar.move({ month: 1, year: 1983 }) -``` - -#### Move to a date - -Moves to a specified date. - -Calling `move(date)` with a **Date** object will move to that date. - -Calling `move(date)` with a **String** will move to the converted date. - -```js -// Get the calendar ref -const calendar = this.$refs.calendar - -// Moves to today's date -await calendar.move(new Date()) - -// Moves to my birthday -await calendar.move(`1983-01-21`) -``` - -::: warning -Calling `move(date)` will move to the month associated with that date. It will not focus on the date after the transition has occurred. To focus on the date, call `focusDate(date)` instead. -::: - -### `focusDate(String|Date)` - -#### Description - -Asynchronously navigates to the month for a given date and focuses on that day after transition is complete. - -```js -async focusDate(date, opts) => Promise -``` - -#### Parameters - -| Parameter | Type | Description | -| --- | --- | --- | -| **date** | *Date* | Target date | -| **opts** | *Object* | Set of navigation options | -| **opts.position** | *Number* | Target month position for multi-row or multi-column configurations. Negative numbers will offset from last position. | -| **opts.transition** | *String* | Transition type (`slide-h`, `slide-v`, `fade`, `none`). Note that this will override the calendar `transition` prop. | - -#### Returns - -A **Promise** that *resolves* when the transition is complete or *rejects* if target month(s) are disabled. - - -### `showPageRange(Date|Object)` - -**Description:** Navigates to the calendar page(s) that best displays a given date range. - -```js - ... - const date = new Date(2020, 0, 1); // January, 2020 - const page = { month: 2, year: 2020 }; // February, 2020 - // Pass a date - calendar.showPageRange(date); - // Pass a page ({ month, year }) - calendar.showPageRange(page); - // From a date or page - calendar.showPageRange({ from: date }); - // To a date or page - calendar.showPageRange({ to: page }); - // From a date or page to a date or page - calendar.showPageRange({ from: date, to: page }) -``` - - - -## Scoped Slots - -### `header` - -**Description:** Calendar header. Use slots below for specific header sections. - -**Props:** [`page` props](./page-object.md) - -### `header-title` - -**Description:** Calendar header title. This slot is animated if `title-transition` is assigned. - -**Props:** [`page` props](./page-object.md) - -### `day-content` - -**Description:** Calendar day content cell. - -**Props:** - -| Props | Type | Description | -| --- | --- | --- | -| `day` | [Day Object](./day-object.md) | Day object. | -| `dayEvents` | Object | Events that should get mapped to your custom content DOM element. | -| `attributes` | Array | List of ordered attributes for the day. | -| `attributesMap` | Object | Object map of the attributes using their designated key. | - -### `day-popover` - -**Description:** Custom popover content for attributes. - -**Props:** - -| Props | Type | Description | -| --- | --- | --- | -| `day` | [Day Object](./day-object.md) | Day object. | -| `attributes` | Array | List of ordered attributes with an assigned popover for the day. | -| `masks` | Object | Resolved locale masks | -| `format` | Function | Call to format a custom date and mask | -| `dayTitle` | String | Pre-formatted string using the `dayPopover` mask | -| `updateLayout` | Function | Call to forcefully update the popover layout (such as when content changes are made) | -| `hide` | Function | Call to forcefully hide the popover | - -### `header-left-button` - -**Description:** Calendar header button on the left side for moving to the previous page(s). - -### `header-right-button` - -**Description:** Calendar header button on the right side for moving to the next page(s). - -### `nav-left-button` - -**Description:** Calendar navigation header button on the left side for moving to the previous page(s). - -### `nav-right-button` - -**Description:** Calendar navigation header button on the right side for moving to the next page(s). - - diff --git a/docs/api/v1.0/date-patterns.md b/docs/api/v1.0/date-patterns.md deleted file mode 100644 index c2a9d36b0..000000000 --- a/docs/api/v1.0/date-patterns.md +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: Date Patterns -sidebarDepth: 2 -pageClass: docs-page ---- - -## Date Patterns - -### `days` - -**Type:** Number, Array - -**Description:** Day number from the start or end of the month. - -**Range:** 1 to 31, -1 to -31 - -### `weekdays` - -**Type:** Number, Array - -**Description:** Day of the week. - -**Range:** 1: Sun to 7: Sat - -### `ordinalWeekdays` - -**Type:** Object (key: Number / value: Number, Array) - -**Description:** Weekday ordinal position from the start or end of the month. - -**Range:** - * key: 1 to 6, -1 to -6 - * value: 1: Sun to 7: Sat - -### `weeks` - -**Type:** Number, Array - -**Description:** Week number from the start or end of the month. - -**Range:** 1 to 6, -1 to -6 - -### `months` - -**Type:** Number, Array - -**Description:** Months of the year. - -**Range:** 1 to 12 - -### `years` - -**Type:** Number, Array - -**Description:** Year numbers. - -**Range:** 4-digit integer - -### `dailyInterval` - -**Type:** Number - -**Description:** Interval number of days from the start date (or today when no start date provided). - -**Range:** n > 0 - -### `weeklyInterval` - -**Type:** Number - -**Description:** Interval number of weeks from the start date (or today). - -**Range:** n > 0 - -### `monthlyInterval` - -**Type:** Number - -**Description:** Interval number of months from the start date (or today). - -**Range:** n > 0 - -### `yearlyInterval` - -**Type:** Number - -**Description:** Interval number of years from the start date (or today). - -**Range:** n > 0 diff --git a/docs/api/v1.0/datepicker.md b/docs/api/v1.0/datepicker.md deleted file mode 100644 index 5c448a955..000000000 --- a/docs/api/v1.0/datepicker.md +++ /dev/null @@ -1,215 +0,0 @@ ---- -title: 'Date Picker' -sidebarDepth: 2 ---- - -::: tip -`v-date-picker` supports all props, events and slots that are supported by `v-calendar` in addition to those listed below. -::: - - -## Props - -### `is-inline` - -**Type:** Boolean - -**Description:** Displays the calendar picker only (not as a popover). - -**Default:** `false` - -:::danger -**`is-inline` deprecated in [`v2.0`](../v2.0)** -::: - -### `mode` - -**Type:** String - -**Description:** Selection mode: `"single"`, `"multiple"`, `"range"` - -**Default:** `"single"` - -:::warning -**`mode` modified in [`v2.0`](../v2.0)** -::: - -### `value` - -**Type:** Date, Array[Date], Object - -**Description:** Selected date, dates or date range. - -**Default:** `null` - -:::warning -**`value` modified in [`v2.0`](../v2.0)** -::: - -### `is-required` - -**Type:** Boolean - -**Description:** Prevents the **user** from clearing the selected value. - -**Default:** `false` - -::: tip -Setting `value = null` still allowed through code. -::: - -### `input-props` - -**Type:** Object - -**Description:** Props to apply to the input DOM element. - -**Default:** [Reference code]() - -:::danger -**`input-props` deprecated in [`v2.0`](../v2.0)** -::: - -### `update-on-input` - -**Type:** Boolean - -**Description:** Update the picker value after every `input` event. Otherwise, value is just updated on `change` event. - -**Default:** `true` - -### `input-debounce` - -**Type:** Number - -**Description:** If `update-on-input` is enabled, the duration in milliseconds at which the `input` event is debounced before updating the date value. - -**Default:** `1000` - -### `drag-attribute` - -**Type:** Object - -**Description:** Attribute to use for the dragged selection in "range" mode. The `dates` property is ignored. - -**Default:** [Reference code]() - -### `select-attribute` - -**Type:** Object - -**Description:** Attribute to use for the value selection in all modes. The `dates` property is ignored. - -**Default:** [Reference code]() - -### `popover` - -**Type:** Object - -**Description:** Properties of the popover to apply for the calendar component. - -**Default:** [Reference code](./defaults.md) - -### `popover.keepVisibleOnInput` - -**Type:** Boolean - -**Description:** Keep the popover visible after a date is selected (only applies for `mode: 'date'`), until the `visibility` determines that it should hide again. - -### `popover.modifiers` - -**Type:** Array - -**Description:** Modifiers used to modify the behavior of [`popper.js`](https://popper.js.org/docs/v2/modifiers/). - -**Default:** `undefined` - -### `popover.placement` - -**Type:** String - -**Description:** Default or suggested placement of the popover. This may change as the browser window dimensions change. [Valid placements](https://popper.js.org/popper-documentation.html#Popper.placements) include `auto`, `top`, `right`, `bottom`, `left`. Each placement can have suffixed variations `-start` or `-end`. - -**Default:** `bottom-start` - -### `popover.positionFixed` - -**Type:** Boolean - -**Description:** Uses a `fixed` position when displaying the popover. Use this open when the calendar is placed within a container that has `overflow: hidden` style applied. Reference popper.js for more details. - -**Default:** `false` - -### `popover.visibility` - -**Type:** String - -**Description:** Visibility mode for the input/slot popover (`hover-focus`, `hover`, `focus`, `visible`, `hidden`) - -**Default:** `hover-focus` - - - -## Events - -### `input` - -**Description:** New date was selected. - -**Params:** `value: Date, Array[Date], Object` - -### `drag` - -**Description:** Dragged selection was updated. Only valid when `mode === "range"` - -**Params:** `range: Object` - -### `popoverWillShow` - -**Description:** Called just before picker popover transitions into view - -**Params:** `Object`: Popover content root HTML element. - -### `popoverDidShow` - -**Description:** Called just after picker popover has transitioned into view - -**Params:** `Object`: Popover content root HTML element. - -### `popoverWillHide` - -**Description:** Called just before picker popover transitions out of view - -**Params:** `Object`: Popover content root HTML element. - -### `popoverDidHide` - -**Description:** Called just after picker popover has transitioned out of view - -**Params:** `Object`: Popover content root HTML element. - - - -## Scoped Slots - -### *`default`* - -**Description:** Default slot to use as the popover anchor for v-date-picker. [[1]](#dp-slots-note-1) Not applicable to inline date pickers. - -**Props:** - -Reference the section on using [custom slots](../datepicker.md#use-custom-slot) for available props. diff --git a/docs/api/v1.0/day-object.md b/docs/api/v1.0/day-object.md deleted file mode 100644 index ef82a760a..000000000 --- a/docs/api/v1.0/day-object.md +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: 'Day Object' -sidebarDepth: 2 -pageClass: docs-page ---- - -## Properties - -### `day` - -**Type:** Number - -**Description:** Day number (1 - 31). - -### `dayFromEnd` - -**Type:** Number - -**Description:** Day number from the end of the month (1 - 31). - -### `weekday` - -**Type:** Number - -**Description:** Day weekday number (1:Sun - 7:Sat). - -### `weekdayOrdinal` - -**Type:** Number - -**Description:** Weekday ordinal position from the start of the month (1 - 6). - -### `weekdayOrdinalFromEnd` - -**Type:** Number - -**Description:** Weekday ordinal position from the end of the month (1 - 6). - -### `week` - -**Type:** Number - -**Description:** Week number form the start of the month (1 - 6). - -### `weekFromEnd` - -**Type:** Number - -**Description:** Week number from the end of the month (1 - 6). - -### `month` - -**Type:** Number - -**Description:** Month number (1 - 12). - -### `year` - -**Type:** Number - -**Description:** Year number. - -### `date` - -**Type:** Date - -**Description:** Date for this day. - -### `dateTime` - -**Type:** Number - -**Description:** Result of calling `date.getTime()` for this day. - -### `inMonth` - -**Type:** Boolean - -**Description:** Day lies in the currently active month. - -### `inPrevMonth` - -**Type:** Boolean - -**Description:** Day lies in the month before the currently active month. - -### `inNextMonth` - -**Type:** Boolean - -**Description:** Day lies in the month after the currently active month. - -### `attributes` - -**Type:** Array - -**Description:** List of attributes for the day involved with the event. - -### `attributesMap` - -**Type:** Object - -**Description:** Object map of the attributes using their designated key. - -### `event` - -**Type:** Object - -**Description:** Original event that triggered the event. - - diff --git a/docs/api/v1.0/defaults.md b/docs/api/v1.0/defaults.md deleted file mode 100644 index 999357fa5..000000000 --- a/docs/api/v1.0/defaults.md +++ /dev/null @@ -1,194 +0,0 @@ ---- -title: 'Defaults' -sidebarDepth: 2 -pageClass: docs-page ---- - -## Properties - -### `componentPrefix` - -**Type:** String - -**Description:** Custom prefix to use for plugin components. Replace if `v-calendar` and `v-date-picker` interfere with other component libraries. - -**Default:** `"v"` - -### `titlePosition` - -**Type:** String - -**Description:** Position of the title in the header (`"left"`, `"center"`, `"right"`) - -**Default:** `"center"` - -### `navVisibility` - -**Type:** String - -**Description:** Visibility state for calendar navigation panel (`"focus"`, `"hover"`, `"visible"`, `"hidden"`) - -**Default:** `"focus"` - -### `transition` - -**Type:** String - -**Description:** Transition type for calendar panes when navigating to a new page (`"slide-h"`: Horizontal slide, `"slide-v"`: Vertical slide, `"fade"`, `"none"`). - -**Default:** `"slide-h"` when `row === 1 && column === 1`, `"fade"` otherwise. - -### `masks` - -**Type:** Object - -**Description:** Masks to use when display and parsing dates for various calendar sections. - -**Default:** -```js -{ - title: 'MMMM YYYY', - weekdays: 'W', - navMonths: 'MMM', - input: ['L', 'YYYY-MM-DD', 'YYYY/MM/DD'], - dayPopover: 'WWW, MMM D, YYYY', - data: ['L', 'YYYY-MM-DD', 'YYYY/MM/DD'], -} -``` - - -### `screens` - -**Type:** Object - -**Description:** Screen size breakpoints to use to obtain responsive layouts by calling the `$screens` function. - -**Default:** -```js -{ - "sm": "640px", - "md": "768px", - "lg": "1024px", - "xl": "1280px" -} -``` - -### `locale` - -**Type:** String, Object - -**Description:** Locale identification string in [*language-region*](https://lingohub.com/documentation/developers/supported-locales/language-designators-with-regions/) format, or set of locale configuration properties if object is provided. - -**Default:** `undefined` - -### `locales` - -**Type:** Object - -**Description:** Use this object if your locales are missing or you wish to override specific settings for existing locales. The key should match the locale identifier ('en-US') and the value may optionally include any of the following property settings: - -| Setting | Description | -| --- | --- | -| `firstDayOfWeek` | The day the specified the first day of the week. This is a number from 1 to 7 (Sunday to Saturday, respectfully). | -| `masks` | Set of masks to use for common sections of the calendar including the title, weekday labels, month labels in the navigation pane and more. | - -**Default:** - -### `datePicker` - -**Type:** Object - -**Description:** Defaults applied for date picker *only*. - -**Default:** *Reference below for default values* - -### `datePicker.updateOnInput` - -**Type:** Boolean - -**Description:** Update the picker value after every `input` event. Otherwise, value is just updated on `change` event. - -**Default Value:** `true` - -### `datePicker.inputDebounce` - -**Type:** Number - -**Description:** If `update-on-input` is enabled, the duration in milliseconds at which the `input` event is debounced before updating the date value. - -**Default Value:** `1000` - - -### `datePicker.popover` - -**Type:** Object - -**Description:** Properties of the popover to apply for the calendar component. Not applicable for inline pickers. - -**Default Value:** *Reference below for default values.* - -### `datePicker.popover.visibility` - -**Type:** String - -**Description:** Visibility state of the popover (`"hover-focus"`, `"hover"`, `"focus"`, `"click"`, `"visible"`, `"hidden"`) - -**Default:** `"hover-focus"` - -### `datePicker.popover.keepVisibleOnInput` - -**Type:** Boolean - -**Description:** Keep the popover visible after a valid input has been selected - -**Default:** `false` - -### `datePicker.popover.placement` - -**Type:** String - -**Description:** Default or suggested placement of the popover. This may change as the browser window dimensions change. - -**Default:** `"bottom"` - -### `touch` - -**Type:** Object - -**Description:** Defaults applied for touch swipes - -**Default:** *Reference below for default values* - -### `touch.maxSwipeTime` - -**Type:** Number - -**Description:** Maximum time in milliseconds allowed for a swipe gesture to complete - -**Default:** `300` - -### `touch.minHorizontalSwipeDistance` - -**Type:** Number - -**Description:** Minimum distance in pixels allowed for a horizontal swipe gesture - -**Default:** `60` - -### `touch.maxVerticalSwipeDistance` - -**Type:** Number - -**Description:** Maximum distance in pixels allowed for a horizontal swipe gesture - -**Default:** `80` - - diff --git a/docs/api/v1.0/page-object.md b/docs/api/v1.0/page-object.md deleted file mode 100644 index a082174f9..000000000 --- a/docs/api/v1.0/page-object.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: 'Page Object' -sidebarDepth: 2 -pageClass: docs-page ---- - -## `position` - -**Type:** Number - -**Description:** Position of the the pane that contains this page (`0`: single-paned, `1`: double-paned, left side, `2`: double-paned, right side). - -## `month` - -**Type:** Number - -**Description:** Page month number. - -## `year` - -**Type:** Number - -**Description:** Page year number. - -## `monthLabel` - -**Type:** String - -**Description:** Page month label as specified by the `monthLabels` prop or locale settings. - -## `shortMonthLabel` - -**Type:** String - -**Description:** Shortened month label as specified by the `shortMonthLabels` prop or locale settings. - -## `yearLabel` - -**Type:** String - -**Description:** Page year label in YYYY format. - -## `shortYearLabel` - -**Type:** String - -**Description:** Page year label in YY format. - -## `monthComps` - -**Type:** Object - -**Description:** Components of the current page month. - -## `prevMonthComps` - -**Type:** Object - -**Description:** Components of the previous page month. - -## `nextMonthComps` - -**Type:** Object - -**Description:** Components of the next page page. - -## `canMove(Object) => Boolean` - -**Type:** Function - -**Description:** Function that determines if calendar can move to a desired page (due to `min-page` or `max-page` setting). - -## `move(Object)` - -**Type:** Function - -**Description:** Function that moves to the specified page. - -## `moveThisMonth()` - -**Type:** Function - -**Description:** Function that moves to the page for today's month. - -## `movePrevMonth()` - -**Type:** Function - -**Description:** Function that moves to the page for the previous month. - -## `moveNextMonth()` - -**Type:** Function - -**Description:** Function that moves to the page for the next month. - - diff --git a/docs/api/v1.0/theme-styles.md b/docs/api/v1.0/theme-styles.md deleted file mode 100644 index e244f447e..000000000 --- a/docs/api/v1.0/theme-styles.md +++ /dev/null @@ -1,237 +0,0 @@ ---- -title: 'Theme Styles' -sidebarDepth: 2 -pageClass: docs-page ---- - -## `wrapper` - -**Target Area:** -Wrapper for both single and double-paned calendars. - -**Default:** -```js -{ - backgroundColor: '#fafafa', - border: '1px solid #dadada' -} -``` - - -## `verticalDivider` - -**Target Area:** -Vertical divider that appears between calendar panes. - -**Default:** -```js -{ - borderLeft: '1px solid #dadada' -} -``` - - -## `horizontalDivider` - -**Target Area:** -Horizontal divider that appears between calendar panes. - -**Default:** -```js -{ - borderTop: '1px solid #dadada' -} -``` - - -## `header` - -**Target Area:** -Header section that encapsulates arrows and title. [[1]](#themes-note-1) - -**Default:** -`null` - - -## `headerTitle` - -**Target Area:** -Header title. [[1]](#themes-note-1) - -**Default:** -`null` - - -## `headerArrows` -**Target Area:** -Header arrows that can be styled just like a font. [[1]](#themes-note-1) - -**Default:** -`null` - - -## `headerHorizontalDivider` - -**Target Area:** -Horizontal divider that appears just below header section. - -**Default:** -`null` - - -## `weekdays` - -**Target Area:** -Weekday section that encapsulates all the weekday labels. [[1]](#themes-note-1) - -**Default:** -`null` - - -## `weekdaysHorizontalDivider` - -**Target Area:** -Horizontal divider that appears just below weekdays section. - -**Default:** -`null` - - -## `weeks` - -**Target Area:** -Weeks section that encapsulate all the days of the month. [[1]](#themes-note-1) - -**Default:** -`null` - - -## `dayCell` - -**Target Area:** -Day cell that contains day content and any associated attributes. - -**Default:** -`null` - - -## `dayContent` - -**Target Area:** -Content area within the day cell that contains the day of the month number. [[2]](#themes-note-2) - -**Default:** -`null` - - -## `dayPopoverContent` - -**Target Area:** -Popover container for attribute popover labels and slot content. - -**Default:** -```javascript -{ - color: '#333333', - fontSize: '.8rem', - whiteSpace: 'nowrap' -} -``` - - -## `dots` - -**Target Area:** -Container for dot indicators. - -**Default:** -`null` - - -## `bars` - -**Target Area:** -Container for bar indicators. - -**Default:** -`null` - - -## `navHeader` - -**Target Area:** -Navigation pane header. - -**Default:** -`null` - -## `navHeaderArrows` - -**Target Area:** -Navigation header arrows. - -**Default:** -`null` - -## `navHeaderTitle` - -**Target Area:** -Navigation header title. - -**Default:** -`null` - - -## `navMonthCell` - -**Target Area:** -Navigation month cells. [[3]](#themes-note-3) - -**Default:** -`null` - - -## `navYearCell` - -**Target Area:** -Navigation year cells. [[3]](#themes-note-3) - -**Default:** -`null` - - - - -::: tip [1] -As of v0.9.0, you can use functions to define the `header`, `headerTitle`, `headerArrows`, `weekdays` and `weeks` styles. Functions should accept a [`page`](./page-object.md) object and return a configured style. -::: - -::: tip [2] -As of v0.8.0, the `dayContentHover` style has been deprecated and you can optionally use a function to define the `dayContent` style. This function should accept an object parameter with the following properties (`isHovered`, `isFocused`, [`day`](./day-object.md)). This function should return the configured style. -::: - -::: tip [3] -As of v0.9.0, you can use functions to define the `navMonthCell` and `navYearCell` styles. Functions should accept a [`nav-month-item`](#nav-month-item-properties) object and [`nav-year-item`](#nav-year-item-properties) object, respectively. - -#### `nav-month-item` Properties -| Name | Type | Description | -| ---- | ---- | ----------- | -| `month` | Number | Month number of the cell. | -| `label` | String | Formatted month label per the [`masks`](#calendar-props) prop. | -| `is-active` | Boolean | Month is selected, or active. | -| `is-disabled` | Boolean | Month is disabled (ie. not selectable). | - -#### `nav-year-item` Properties -| Name | Type | Description | -| ---- | ---- | ----------- | -| `year` | Number | Year number of the cell. | -| `is-active` | Boolean | Year is selected, or active. | -| `is-disabled` | Boolean | Year is disabled (ie. not selectable). | -::: \ No newline at end of file diff --git a/docs/api/v2.0/README.md b/docs/api/v2.0/README.md deleted file mode 100644 index 04d2f337f..000000000 --- a/docs/api/v2.0/README.md +++ /dev/null @@ -1,31 +0,0 @@ -# Overview - -:::warning -This page is currently being updated. -::: - -[Defaults](./defaults.md) - -[Calendar](./calendar.md) - * [Props](./calendar.md#props) - * [Events](./calendar.md#events) - * [Methods](./calendar.md#methods) - * [Scoped Slots](./calendar.md#scoped-slots) - -[Page Object](./page-object.md) - -[Day Object](./day-object.md) - -[Attribute](./attribute.md) - * [Highlight](./attribute.mds#highlight) - * [Dot](./attribute.md#dot) - * [Bar](./attribute.md#bar) - * [Popover](./attribute.md#popover) - * [Content](./attribute.md#content) - -[Date Picker](./datepicker.md) - * [Props](./datepicker.md#props) - * [Events](./datepicker.md#events) - * [Slots](./datepicker.md#slots) - -[Date Patterns](./date-patterns.html) \ No newline at end of file diff --git a/docs/api/v2.0/attribute.md b/docs/api/v2.0/attribute.md deleted file mode 100644 index 178edbc5f..000000000 --- a/docs/api/v2.0/attribute.md +++ /dev/null @@ -1,304 +0,0 @@ ---- -title: Attribute -sidebarDepth: 2 ---- - -## Properties - -### `key` - -**Type:** String - -**Description:** Keys uniquely identify an attribute and may determine how animations are applied. - -**Default:** `index` - -### `dates` - -**Type:** Date, Object, Array[Date, Object] - -**Description:** Date or date range objects (patterns supported) to include for the attribute. - -**Default:** `undefined` - -### `excludeDates` - -**Type:** Date, Object, Array[Date, Object] - -**Description:** Date or date range objects (patterns supported) to exclude. All other dates are included. - -**Default:** `undefined` - -### `customData` - -**Type:** Any - -**Description:** Assign any custom data to this property for easy access within event handlers. - -**Default:** `undefined` - -### `order` - -**Type:** Number - -**Description:** Order that the attribute should be displayed. Higher numbers take precedence in appearance. - -**Default:** `0` - - - -### `highlight` - -**Type:** Boolean, String, Object - -**Description:** Configuration of higlight. If boolean, displays the highlight using the current color. If string, displays the highlight using the specified color. If object, uses the properties below. - -**Default:** `undefined` - -### `highlight.color` - -**Type:** String - -**Description:** Color. - -**Default:** `undefined` - -### `highlight.fillMode` - -**Type:** String - -**Description:** Color fill option (`solid`, `light`, `outline`) - -:::warning -The `none` option for `fillMode` is still available but will be deprecated in the next major release in favor of the more descriptive `outline` option. -::: - -**Default:** `solid` - -### `highlight.class` - -**Type:** String - -**Description:** Class to apply to the highlight background element. | - -**Default:** `''` - -### `highlight.style` - -**Type:** Object - -**Description:** Style to apply to the highlight background element. | - -**Default:** `undefined` - -### `highlight.contentClass` - -**Type:** String - -**Description:** Class to apply to the highlight content element. - -**Default:** `''` - -### `highlight.style` - -**Type:** Object - -**Description:** Style to apply to the highlight content element. | - -**Default:** `undefined` - -### `highlight.contentStyle` - -**Type:** Object - -**Description:** Style to apply to the highlight content element. | - -**Default:** `undefined` - -### `dot` - -**Type:** Boolean, String, Object - -**Description:** Configuration of dot. If boolean, displays the dot using the current color. If string, displays the dot using the specified color. If object, uses the properties below. - -**Default:** `undefined` - -### `dot.color` - -**Type:** String - -**Description:** Color. - -**Default:** `undefined` - -### `dot.class` - -**Type:** String - -**Description:** Class to apply to the dot element. - -**Default:** `undefined` - -### `dot.style` - -**Type:** Object - -**Description:** Style to apply to the dot element. - -**Default:** `undefined` - -### `bar` - -**Type:** Boolean, String, Object - -**Description:** Configuration of bar. If boolean, displays the bar using the current color. If string, displays the bar using the specified color. If object, uses the properties below. - -**Default:** `undefined` - -### `bar.color` - -**Type:** String - -**Description:** Color. - -**Default:** `undefined` - -### `bar.class` - -**Type:** String - -**Description:** Class to apply to the bar element. - -**Default:** `undefined` - -### `bar.style` - -**Type:** Object - -**Description:** Style to apply to the bar element. - -**Default:** `undefined` - -### `popover` - -**Type:** Object - -### `popover.label` - -**Type:** String - -**Description:** Text string to display in the popover content row. - -**Default:** `undefined` - -### `popover.labelClass` - -**Type:** String - -**Description:** Class to apply to the label. - -**Default:** `undefined` - -### `popover.labelStyle` - -**Type:** Object - -**Description:** Style to apply to the label. - -**Default:** `undefined` - -### `popover.hideDelay` - -*Introduced in `v2.1.0`* - -**Type:** Number - -**Description:** Number of milliseconds to delay the popover when hiding. After this delay, the popover transition will start if `popover.transition` is not `none` or ``. - -**Default:** 110 - -### `popover.hideIndicator` - -**Type:** Boolean - -**Description:** Hides the indicator symbol on the left side of the popover content row. - -**Default:** `false` - -### `popover.isInteractive` - -**Type:** Boolean - -**Description:** Determines if the user can interract with the popover content. Logically 'OR'ed with other popovers on the same day. - -**Default:** `false` - -### `popover.modifiers` - -**Type:** Array - -**Description:** Modifiers used to modify the behavior of [`popper.js`](https://popper.js.org/docs/v2/modifiers/). - -**Default:** `undefined` - -### `popover.placement` - -**Type:** String - -**Description:** Default or suggested placement of the popover. This may change as the browser window dimensions change. Valid placements include `auto`, `top`, `right`, `bottom`, `left`. Each placement can have suffixed variations `-start` or `-end`. - -**Default:** `bottom-start` - -### `popover.positionFixed` - -**Type:** Boolean - -**Description:** Uses a `fixed` position when displaying the popover. Use this open when the calendar is placed within a container that has `overflow: hidden` style applied. Reference popper.js for more details. - -**Default:** `false` - -### `popover.showDelay` - -*Introduced in `v2.1.0`* - -**Type:** Number - -**Description:** Number of milliseconds to delay the popover when showing. After this delay, the popover transition will start if `popover.transition` is not `none` or ``. - -**Default:** 0 - -### `popover.transition` - -*Introduced in `v2.1.0`* - -**Type:** String - -**Description:** Transition to use when displaying the popover (`slide-fade`, `fade`, `none` or ``). - -**Default:** `slide-fade` - -### `popover.visibility` - -**Type:** String - -**Description:** Visibility of the popover when this label or slot is displayed (`hover-focus`, `hover`, `focus`, `click`, `visible`, `hidden`). - -**Default:** `"hover"` - - \ No newline at end of file diff --git a/docs/api/v2.0/calendar.md b/docs/api/v2.0/calendar.md deleted file mode 100644 index 10d2e5576..000000000 --- a/docs/api/v2.0/calendar.md +++ /dev/null @@ -1,513 +0,0 @@ ---- -title: 'Calendar' -sidebarDepth: 2 ---- - -## Props - -### `rows` - -**Type:** Number - -**Description:** Number of calendar rows to display. - -**Default:** `1` - -### `columns` - -**Type:** Number - -**Description:** Number of calendar columns to display. - -**Default:** `1` - -### `step` - -**Type:** Number - -**Description:** Number of months to step when navigating forwards and backwards. - -**Default:** `0` *Resolves to **n** if not provided, where `n = rows * columns`.* - -### `title-position` - -**Type:** String - -**Description:** Position of the header title (`"left"`, `"center"`, `"right"`). - -**Default:** `"center"` - -### `is-expanded` - -**Type:** Boolean - -**Description:** Expands calendar to fill the full width of its container. - -**Default:** `false` - -### `nav-visibility` - -**Type:** String - -**Description:** Visibility state for calendar navigation panel (`"focus"`, `"hover"`, `"visible"`, `"hidden"`) - -**Default:** `undefined` [Resolved by defaults if not specified](./defaults.md#nav-visibility) - -### `transition` - -**Type:** String - -**Description:** Transition type for calendar panes when navigating to a new page (`"slide-h"`: Horizontal slide, `"slide-v"`: Vertical slide, `"fade"`, `"none"`). - -**Default:** `undefined` [Resolved by defaults if not specified](./defaults.md#transition) - -### `from-page` - -**Type:** Object - -**Description:** The page (month, year) for the first calendar pane located at row 0 and column 0. Use the `.sync` modifier for two-way binding. - -**Default:** `undefined` *Resolves to current month if not provided.* - -:::tip -Use the `.sync` modifier for two-way binding. -::: - -### `from-date` - -**Type:** Date - -**Description:** Date used to compute `from-page`. - -**Default:** `undefined` - -:::warning -The `.sync` modifier does not work with this prop, unlike `from-page`. -::: - -### `to-page` - -**Type:** Object - -**Description:** The page (month, year) for the last calendar pane located at row *n* and column *n*, where *n* is the max dimension. - -**Default:** `undefined` *Resolves to **n** month if not provided, where `n = rows * columns`.* - -::: tip -*Resolves to **n** month if not provided, where `n = rows * columns`. -::: - -:::tip -Use the `.sync` modifier for two-way binding. -::: - -:::warning -To avoid erratic navigation behavior, do not try to assign both `from-page` and `to-page` at the same time (just pick one). -::: - -### `to-date` - -**Type:** Date - -**Description:** Date used to compute `to-page`. - -**Default:** `undefined` - -:::warning -The `.sync` modifier does not work with this prop, unlike `to-page`. -::: - -### `min-page` - -**Type:** Object - -**Description:** Earliest page (month, year) that the user can navigate to. - -**Default:** `undefined` - -### `min-date` - -**Type:** Date - -**Description:** Date used to compute `min-page`. - -**Default:** `undefined` - -### `max-page` - -**Type:** Object - -**Description:** Latest page (month, year) that the user can navigate to. - -**Default:** `undefined` - -### `max-date` - -**Type:** Date - -**Description:** Date used to compute `max-page`. - -**Default:** `undefined` - -### `attributes` - -**Type:** Array[Object] - -**Description:** List of attributes to display in the calendar. - -**Default:** `[]` - -### `disabled-dates` - -**Type:** Date that can be one of a Javascript date object, a date range object with `start`, `end`, `span` or [pattern tokens](./date-patterns.md) - -**Description:** Dates that are disabled from user selection or navigation. - -**Default:** `null` - -### `available-dates` - -**Type:** Date that can be one of a Javascript date object, a date range object with `start`, `end`, `span` or [pattern tokens](./date-patterns.md) - -**Description:** Dates or date range objects that are available for selection or navigation. All other dates are disabled. - -**Default Value:** `undefined` - -### `masks` - -**Type:** Object - -**Description:** Masks to use when formatting and parsing dates for various calendar sections. - -**Default:** `undefined` [Resolved by defaults if not specified](./defaults.md#masks) - -### `color` - -**Type:** String - -**Description:** Color used for accents and attribute defaults. - -**Default:** `"blue"` - -### `is-dark` - -**Type:** Boolean - -**Description:** Dark mode setting. - -**Default:** `false` - -### `first-day-of-week` - -**Type:** Number - -**Description:** Day number for the first day of the week (1: Sun - 7: Sat). Ignore setting this prop if you want to allow the locale to determine this setting. - -**Default:** `undefined` [Resolved by locale if not specified](#locale) - -### `locale` - -**Type:** String, Object - -**Description:** The locale identifier or locale configuration to use for displaying the calendar. - -**Default:** `undefined` [Resolved by defaults or detected locale if not completely specified](./defaults.md#locale) - -### `timezone` :tada: - -**Type:** String - -**Description:** The timezone identifier to use for displaying the calendar. Use [this list](https://stackoverflow.com/questions/38399465/how-to-get-list-of-all-timezones-in-javascript) as a tentative guide of available timezones. Use `UTC` for Coordinated Universal Time. - -**Default:** `undefined` [Resolved by defaults or detected timezone if not completely specified](./defaults.md#locale) - -### `disable-page-swipe` - -**Type:** Boolean - -**Description:** Disables swipe detection for navigating forwards and backwards. - -**Default:** `undefined` - - - - -## Events - -### `update:from-page` - -**Description:** Calendar left/single pane moved to a different page. - -**Params:** [`page`](./page-object.md) - -### `update:to-page` - -**Description:** Calendar right pane moved to a different page. - -**Params:** [`page`](./page-object.md) - -### `dayclick` - -**Description:** Forwarded from the `mouseclick` event for the day content element. - -**Params:** [`day`](./day-object.md) - -### `daymouseenter` - -**Description:** Forwarded from the `mouseenter` event for the day content element. - -**Params:** [`day`](./day-object.md) - -### `daymouseleave` - -**Description:** Forwarded from the `mouseleave` event for the day content element. - -**Params:** [`day`](./day-object.md) - -### `dayfocusin` - -**Description:** Forwarded from the `focusin` event for the day content element. - -**Params:** [`day`](./day-object.md) - -### `dayfocusout` - -**Description:** Forwarded from the `focusout` event for the day content element. - -**Params:** [`day`](./day-object.md) - -### `transition-start` - -**Description:** Transition to new page has started. - -### `transition-end` - -**Description:** Transition to new page has ended. - -## Methods - -To call methods on a component, assign a ref and call the method any time on or after the `mounted` lifecycle hook. - -```html - -``` - -```js -... -mounted() { - // Get reference to the calendar component - const calendar = this.$refs.calendar; - // Call method of the component - calendar.showPageRange(new Date()); -} -... -``` - -### `move(Number|String|Date|Object)` - -#### Description - -Asynchronously navigates by a given number of months, to a given month or to a given date. - -```js -async move(arg, opts) => Promise -``` - -#### Parameters - -| Parameter | Type | Description | -| --- | --- | --- | -| **arg** | **Number*, *Date*, *String* or Page *Object* | Target month criteria | -| **opts** | *Object* | Set of navigation options | -| **opts.position** | *Number* | Target month position for multi-row or multi-column configurations. Negative numbers will offset from last position. | -| **opts.transition** | *String* | Transition type (`slide-h`, `slide-v`, `fade`, `none`). Note that this will override the calendar `transition` prop. | -| **opts.force** | *Boolean* | Force navigation even if the target months(s) are disabled | - -#### Returns - -A **Promise** that *resolves* when the transition to the new set of month(s) is complete or *rejects* if target month(s) are disabled. - -#### Move by number of months - -Moves a given number of months forwards or backwards. - -Calling `move(num)` with a **positive** number will move **forwards** by a given number of months. - -Calling `move(num)` with a **negative** number will move **backwards** by a given number of months. - -```html - -``` - -```js -// Get the calendar ref -const calendar = this.$refs.calendar - -// Move forwards 5 months (wait for transition) -await calendar.move(5) - -// Move backwards 5 months (wait for transition) -await calendar.move(-5) -``` - -#### Move to month - -Moves to a given month by calling `move(month)` with an object with `month` and `year` keys. - -```js -// Get the calendar ref -const calendar = this.$refs.calendar - -// Moves to January, 1983 -await calendar.move({ month: 1, year: 1983 }) -``` - -#### Move to a date - -Moves to a specified date. - -Calling `move(date)` with a **Date** object will move to that date. - -Calling `move(date)` with a **String** will move to the converted date. - -```js -// Get the calendar ref -const calendar = this.$refs.calendar - -// Moves to today's date -await calendar.move(new Date()) - -// Moves to my birthday -await calendar.move(`1983-01-21`) -``` - -::: warning -Calling `move(date)` will move to the month associated with that date. It will not focus on the date after the transition has occurred. To focus on the date, call `focusDate(date)` instead. -::: - -### `focusDate(String|Date)` - -#### Description - -Asynchronously navigates to the month for a given date and focuses on that day after transition is complete. - -```js -async focusDate(date, opts) => Promise -``` - -#### Parameters - -| Parameter | Type | Description | -| --- | --- | --- | -| **date** | *Date* | Target date | -| **opts** | *Object* | Set of navigation options | -| **opts.position** | *Number* | Target month position for multi-row or multi-column configurations. Negative numbers will offset from last position. | -| **opts.transition** | *String* | Transition type (`slide-h`, `slide-v`, `fade`, `none`). Note that this will override the calendar `transition` prop. | - -#### Returns - -A **Promise** that *resolves* when the transition is complete or *rejects* if target month(s) are disabled. - - -### `showPageRange(Date|Object)` - -**Description:** Navigates to the calendar page(s) that best displays a given date range. - -```js - ... - const date = new Date(2020, 0, 1); // January, 2020 - const page = { month: 2, year: 2020 }; // February, 2020 - // Pass a date - calendar.showPageRange(date); - // Pass a page ({ month, year }) - calendar.showPageRange(page); - // From a date or page - calendar.showPageRange({ from: date }); - // To a date or page - calendar.showPageRange({ to: page }); - // From a date or page to a date or page - calendar.showPageRange({ from: date, to: page }) -``` - - - -## Scoped Slots - -### `header` - -**Description:** Calendar header. Use slots below for specific header sections. - -**Props:** [`page` props](./page-object.md) - -### `header-title` - -**Description:** Calendar header title. This slot is animated if `title-transition` is assigned. - -**Props:** [`page` props](./page-object.md) - -### `day-content` - -**Description:** Calendar day content cell. - -**Props:** - -| Props | Type | Description | -| --- | --- | --- | -| `day` | [Day Object](./day-object.md) | Day object. | -| `dayEvents` | Object | Events that should get mapped to your custom content DOM element. | -| `attributes` | Array | List of ordered attributes for the day. | -| `attributesMap` | Object | Object map of the attributes using their designated key. | - -### `day-popover` - -**Description:** Custom popover content for attributes. - -**Props:** - -| Props | Type | Description | -| --- | --- | --- | -| `day` | [Day Object](./day-object.md) | Day object. | -| `attributes` | Array | List of ordered attributes with an assigned popover for the day. | -| `masks` | Object | Resolved locale masks | -| `format` | Function | Call to format a custom date and mask | -| `dayTitle` | String | Pre-formatted string using the `dayPopover` mask | -| `updateLayout` | Function | Call to forcefully update the popover layout (such as when content changes are made) | -| `hide` | Function | Call to forcefully hide the popover | - -### `header-left-button` - -**Description:** Calendar header button on the left side for moving to the previous page(s). - -### `header-right-button` - -**Description:** Calendar header button on the right side for moving to the next page(s). - -### `nav-left-button` - -**Description:** Calendar navigation header button on the left side for moving to the previous page(s). - -### `nav-right-button` - -**Description:** Calendar navigation header button on the right side for moving to the next page(s). - - diff --git a/docs/api/v2.0/date-patterns.md b/docs/api/v2.0/date-patterns.md deleted file mode 100644 index c2a9d36b0..000000000 --- a/docs/api/v2.0/date-patterns.md +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: Date Patterns -sidebarDepth: 2 -pageClass: docs-page ---- - -## Date Patterns - -### `days` - -**Type:** Number, Array - -**Description:** Day number from the start or end of the month. - -**Range:** 1 to 31, -1 to -31 - -### `weekdays` - -**Type:** Number, Array - -**Description:** Day of the week. - -**Range:** 1: Sun to 7: Sat - -### `ordinalWeekdays` - -**Type:** Object (key: Number / value: Number, Array) - -**Description:** Weekday ordinal position from the start or end of the month. - -**Range:** - * key: 1 to 6, -1 to -6 - * value: 1: Sun to 7: Sat - -### `weeks` - -**Type:** Number, Array - -**Description:** Week number from the start or end of the month. - -**Range:** 1 to 6, -1 to -6 - -### `months` - -**Type:** Number, Array - -**Description:** Months of the year. - -**Range:** 1 to 12 - -### `years` - -**Type:** Number, Array - -**Description:** Year numbers. - -**Range:** 4-digit integer - -### `dailyInterval` - -**Type:** Number - -**Description:** Interval number of days from the start date (or today when no start date provided). - -**Range:** n > 0 - -### `weeklyInterval` - -**Type:** Number - -**Description:** Interval number of weeks from the start date (or today). - -**Range:** n > 0 - -### `monthlyInterval` - -**Type:** Number - -**Description:** Interval number of months from the start date (or today). - -**Range:** n > 0 - -### `yearlyInterval` - -**Type:** Number - -**Description:** Interval number of years from the start date (or today). - -**Range:** n > 0 diff --git a/docs/api/v2.0/datepicker.md b/docs/api/v2.0/datepicker.md deleted file mode 100644 index 948f6c19c..000000000 --- a/docs/api/v2.0/datepicker.md +++ /dev/null @@ -1,278 +0,0 @@ ---- -title: 'Date Picker' -sidebarDepth: 2 ---- - -::: tip -`v-date-picker` supports all props, events and slots that are supported by `v-calendar` in addition to those listed below. -::: - - -## Props - -### `mode` - -**Type:** String - -**Description:** Selection mode: `"date"`, `"dateTime"`, `"time"` - -**Default:** `"single"` - -### `value` - -**Type:** Date, Object - -**Description:** Selected date or date range. - -**Default:** `null` - -### `is-range` - -**Type:** Boolean - -**Description:** Date value is a date range object. - -**Default:** `false` - -### `is24hr` - -**Type:** Boolean - -**Description:** Use 24-hr time picker and input format. - -**Default:** `false` - -### `minute-increment` - -**Type:** Number - -**Description:** Increment amount for the minute `select` options. - -**Default:** 1 - -### `is-required` - -**Type:** Boolean - -**Description:** Prevents the **user** from clearing the selected value. - -**Default:** `false` - -::: tip -Setting `value = null` still allowed through code. -::: - -### `update-on-input` - -**Type:** Boolean - -**Description:** Update the picker value after every `input` event. Otherwise, value is just updated on `change` event. - -**Default:** `true` - -### `input-debounce` - -**Type:** Number - -**Description:** If `update-on-input` is enabled, the duration in milliseconds at which the `input` event is debounced before updating the date value. - -**Default:** `1000` - -### `drag-attribute` - -**Type:** Object - -**Description:** Attribute to use for the dragged selection in "range" mode. The `dates` property is ignored. - -**Default:** [Reference code]() - -### `select-attribute` - -**Type:** Object - -**Description:** Attribute to use for the value selection in all modes. The `dates` property is ignored. - -**Default:** [Reference code]() - -### `popover` - -**Type:** Object - -**Description:** Properties of the popover to apply for the calendar component. - -**Default:** [Reference code](./defaults.md) - -### `popover.hideDelay` - -*Introduced in `v2.1.0`* - -**Type:** Number - -**Description:** Amount of milliseconds to delay the popover when hiding. After this delay, the popover transition will start if `popover.transition` is not `none` or ``. - -**Default:** 0 - -### `popover.keepVisibleOnInput` - -**Type:** Boolean - -**Description:** Keep the popover visible after a date is selected (only applies for `mode: 'date'`), until the `visibility` determines that it should hide again. - -### `popover.modifiers` - -**Type:** Array - -**Description:** Modifiers used to modify the behavior of [`popper.js`](https://popper.js.org/docs/v2/modifiers/). - -**Default:** `undefined` - -### `popover.placement` - -**Type:** String - -**Description:** Default or suggested placement of the popover. This may change as the browser window dimensions change. [Valid placements](https://popper.js.org/popper-documentation.html#Popper.placements) include `auto`, `top`, `right`, `bottom`, `left`. Each placement can have suffixed variations `-start` or `-end`. - -**Default:** `bottom-start` - -### `popover.positionFixed` - -**Type:** Boolean - -**Description:** Uses a `fixed` position when displaying the popover. Use this open when the calendar is placed within a container that has `overflow: hidden` style applied. Reference popper.js for more details. - -**Default:** `false` - -### `popover.showDelay` - -*Introduced in `v2.1.0`* - -**Type:** Number - -**Description:** Amount of milliseconds to delay the popover when showing. After this delay, the popover transition will start if `popover.transition` is not `none` or ``. - -**Default:** 0 - -### `popover.transition` - -**Type:** String - -**Description:** Transition to use when displaying the popover (`slide-fade`, `fade`, `none` or ``). - -**Default:** `slide-fade` - -### `popover.visibility` - -**Type:** String - -**Description:** Visibility mode for the input/slot popover (`hover-focus`, `hover`, `focus`, `visible`, `hidden`) - -**Default:** `hover-focus` - -## Methods - -To call methods on a component, assign a ref and call the method any time on or after the `mounted` lifecycle hook. - -```html - -``` - -```js -... -mounted() { - // Get reference to the date picker component - const datepicker = this.$refs.datepicker; - // Call method of the component - datepicker.move(new Date()); -} -... -``` - -### `move(Number|String|Date|Object)` - -#### Description - -Asynchronously navigates by a given number of months, to a given month or to a given date. - -This calls the [`Calendar.move`](./calendar.md#move-number-string-date-object) method under the hood. - -```js -async move(arg, opts) => Promise -``` - -### `focusDate(String|Date)` - -#### Description - -Asynchronously navigates to the month for a given date and focuses on that day after transition is complete. - -This calls the [`Calendar.focusDate`](./calendar.md#focusdate-string-date) method under the hood. - -```js -async focusDate(date, opts) => Promise -``` - - - -## Events - -### `input` - -**Description:** New date was selected. - -**Params:** `value: Date, Array[Date], Object` - -### `drag` - -**Description:** Dragged selection was updated. Only valid when `mode === "range"` - -**Params:** `range: Object` - -### `popoverWillShow` - -**Description:** Called just before picker popover transitions into view - -**Params:** `Object`: Popover content root HTML element. - -### `popoverDidShow` - -**Description:** Called just after picker popover has transitioned into view - -**Params:** `Object`: Popover content root HTML element. - -### `popoverWillHide` - -**Description:** Called just before picker popover transitions out of view - -**Params:** `Object`: Popover content root HTML element. - -### `popoverDidHide` - -**Description:** Called just after picker popover has transitioned out of view - -**Params:** `Object`: Popover content root HTML element. - - - -## Scoped Slots - -### *`default`* - -**Description:** Default slot to use as the popover anchor for v-date-picker. [[1]](#dp-slots-note-1) Not applicable to inline date pickers. - -**Props:** - -Reference the section on using [custom slots](../datepicker.md#use-custom-slot) for available props. diff --git a/docs/api/v2.0/day-object.md b/docs/api/v2.0/day-object.md deleted file mode 100644 index ef82a760a..000000000 --- a/docs/api/v2.0/day-object.md +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: 'Day Object' -sidebarDepth: 2 -pageClass: docs-page ---- - -## Properties - -### `day` - -**Type:** Number - -**Description:** Day number (1 - 31). - -### `dayFromEnd` - -**Type:** Number - -**Description:** Day number from the end of the month (1 - 31). - -### `weekday` - -**Type:** Number - -**Description:** Day weekday number (1:Sun - 7:Sat). - -### `weekdayOrdinal` - -**Type:** Number - -**Description:** Weekday ordinal position from the start of the month (1 - 6). - -### `weekdayOrdinalFromEnd` - -**Type:** Number - -**Description:** Weekday ordinal position from the end of the month (1 - 6). - -### `week` - -**Type:** Number - -**Description:** Week number form the start of the month (1 - 6). - -### `weekFromEnd` - -**Type:** Number - -**Description:** Week number from the end of the month (1 - 6). - -### `month` - -**Type:** Number - -**Description:** Month number (1 - 12). - -### `year` - -**Type:** Number - -**Description:** Year number. - -### `date` - -**Type:** Date - -**Description:** Date for this day. - -### `dateTime` - -**Type:** Number - -**Description:** Result of calling `date.getTime()` for this day. - -### `inMonth` - -**Type:** Boolean - -**Description:** Day lies in the currently active month. - -### `inPrevMonth` - -**Type:** Boolean - -**Description:** Day lies in the month before the currently active month. - -### `inNextMonth` - -**Type:** Boolean - -**Description:** Day lies in the month after the currently active month. - -### `attributes` - -**Type:** Array - -**Description:** List of attributes for the day involved with the event. - -### `attributesMap` - -**Type:** Object - -**Description:** Object map of the attributes using their designated key. - -### `event` - -**Type:** Object - -**Description:** Original event that triggered the event. - - diff --git a/docs/api/v2.0/defaults.md b/docs/api/v2.0/defaults.md deleted file mode 100644 index 999357fa5..000000000 --- a/docs/api/v2.0/defaults.md +++ /dev/null @@ -1,194 +0,0 @@ ---- -title: 'Defaults' -sidebarDepth: 2 -pageClass: docs-page ---- - -## Properties - -### `componentPrefix` - -**Type:** String - -**Description:** Custom prefix to use for plugin components. Replace if `v-calendar` and `v-date-picker` interfere with other component libraries. - -**Default:** `"v"` - -### `titlePosition` - -**Type:** String - -**Description:** Position of the title in the header (`"left"`, `"center"`, `"right"`) - -**Default:** `"center"` - -### `navVisibility` - -**Type:** String - -**Description:** Visibility state for calendar navigation panel (`"focus"`, `"hover"`, `"visible"`, `"hidden"`) - -**Default:** `"focus"` - -### `transition` - -**Type:** String - -**Description:** Transition type for calendar panes when navigating to a new page (`"slide-h"`: Horizontal slide, `"slide-v"`: Vertical slide, `"fade"`, `"none"`). - -**Default:** `"slide-h"` when `row === 1 && column === 1`, `"fade"` otherwise. - -### `masks` - -**Type:** Object - -**Description:** Masks to use when display and parsing dates for various calendar sections. - -**Default:** -```js -{ - title: 'MMMM YYYY', - weekdays: 'W', - navMonths: 'MMM', - input: ['L', 'YYYY-MM-DD', 'YYYY/MM/DD'], - dayPopover: 'WWW, MMM D, YYYY', - data: ['L', 'YYYY-MM-DD', 'YYYY/MM/DD'], -} -``` - - -### `screens` - -**Type:** Object - -**Description:** Screen size breakpoints to use to obtain responsive layouts by calling the `$screens` function. - -**Default:** -```js -{ - "sm": "640px", - "md": "768px", - "lg": "1024px", - "xl": "1280px" -} -``` - -### `locale` - -**Type:** String, Object - -**Description:** Locale identification string in [*language-region*](https://lingohub.com/documentation/developers/supported-locales/language-designators-with-regions/) format, or set of locale configuration properties if object is provided. - -**Default:** `undefined` - -### `locales` - -**Type:** Object - -**Description:** Use this object if your locales are missing or you wish to override specific settings for existing locales. The key should match the locale identifier ('en-US') and the value may optionally include any of the following property settings: - -| Setting | Description | -| --- | --- | -| `firstDayOfWeek` | The day the specified the first day of the week. This is a number from 1 to 7 (Sunday to Saturday, respectfully). | -| `masks` | Set of masks to use for common sections of the calendar including the title, weekday labels, month labels in the navigation pane and more. | - -**Default:** - -### `datePicker` - -**Type:** Object - -**Description:** Defaults applied for date picker *only*. - -**Default:** *Reference below for default values* - -### `datePicker.updateOnInput` - -**Type:** Boolean - -**Description:** Update the picker value after every `input` event. Otherwise, value is just updated on `change` event. - -**Default Value:** `true` - -### `datePicker.inputDebounce` - -**Type:** Number - -**Description:** If `update-on-input` is enabled, the duration in milliseconds at which the `input` event is debounced before updating the date value. - -**Default Value:** `1000` - - -### `datePicker.popover` - -**Type:** Object - -**Description:** Properties of the popover to apply for the calendar component. Not applicable for inline pickers. - -**Default Value:** *Reference below for default values.* - -### `datePicker.popover.visibility` - -**Type:** String - -**Description:** Visibility state of the popover (`"hover-focus"`, `"hover"`, `"focus"`, `"click"`, `"visible"`, `"hidden"`) - -**Default:** `"hover-focus"` - -### `datePicker.popover.keepVisibleOnInput` - -**Type:** Boolean - -**Description:** Keep the popover visible after a valid input has been selected - -**Default:** `false` - -### `datePicker.popover.placement` - -**Type:** String - -**Description:** Default or suggested placement of the popover. This may change as the browser window dimensions change. - -**Default:** `"bottom"` - -### `touch` - -**Type:** Object - -**Description:** Defaults applied for touch swipes - -**Default:** *Reference below for default values* - -### `touch.maxSwipeTime` - -**Type:** Number - -**Description:** Maximum time in milliseconds allowed for a swipe gesture to complete - -**Default:** `300` - -### `touch.minHorizontalSwipeDistance` - -**Type:** Number - -**Description:** Minimum distance in pixels allowed for a horizontal swipe gesture - -**Default:** `60` - -### `touch.maxVerticalSwipeDistance` - -**Type:** Number - -**Description:** Maximum distance in pixels allowed for a horizontal swipe gesture - -**Default:** `80` - - diff --git a/docs/api/v2.0/page-object.md b/docs/api/v2.0/page-object.md deleted file mode 100644 index a082174f9..000000000 --- a/docs/api/v2.0/page-object.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: 'Page Object' -sidebarDepth: 2 -pageClass: docs-page ---- - -## `position` - -**Type:** Number - -**Description:** Position of the the pane that contains this page (`0`: single-paned, `1`: double-paned, left side, `2`: double-paned, right side). - -## `month` - -**Type:** Number - -**Description:** Page month number. - -## `year` - -**Type:** Number - -**Description:** Page year number. - -## `monthLabel` - -**Type:** String - -**Description:** Page month label as specified by the `monthLabels` prop or locale settings. - -## `shortMonthLabel` - -**Type:** String - -**Description:** Shortened month label as specified by the `shortMonthLabels` prop or locale settings. - -## `yearLabel` - -**Type:** String - -**Description:** Page year label in YYYY format. - -## `shortYearLabel` - -**Type:** String - -**Description:** Page year label in YY format. - -## `monthComps` - -**Type:** Object - -**Description:** Components of the current page month. - -## `prevMonthComps` - -**Type:** Object - -**Description:** Components of the previous page month. - -## `nextMonthComps` - -**Type:** Object - -**Description:** Components of the next page page. - -## `canMove(Object) => Boolean` - -**Type:** Function - -**Description:** Function that determines if calendar can move to a desired page (due to `min-page` or `max-page` setting). - -## `move(Object)` - -**Type:** Function - -**Description:** Function that moves to the specified page. - -## `moveThisMonth()` - -**Type:** Function - -**Description:** Function that moves to the page for today's month. - -## `movePrevMonth()` - -**Type:** Function - -**Description:** Function that moves to the page for the previous month. - -## `moveNextMonth()` - -**Type:** Function - -**Description:** Function that moves to the page for the next month. - - diff --git a/docs/api/v2.0/theme-styles.md b/docs/api/v2.0/theme-styles.md deleted file mode 100644 index e244f447e..000000000 --- a/docs/api/v2.0/theme-styles.md +++ /dev/null @@ -1,237 +0,0 @@ ---- -title: 'Theme Styles' -sidebarDepth: 2 -pageClass: docs-page ---- - -## `wrapper` - -**Target Area:** -Wrapper for both single and double-paned calendars. - -**Default:** -```js -{ - backgroundColor: '#fafafa', - border: '1px solid #dadada' -} -``` - - -## `verticalDivider` - -**Target Area:** -Vertical divider that appears between calendar panes. - -**Default:** -```js -{ - borderLeft: '1px solid #dadada' -} -``` - - -## `horizontalDivider` - -**Target Area:** -Horizontal divider that appears between calendar panes. - -**Default:** -```js -{ - borderTop: '1px solid #dadada' -} -``` - - -## `header` - -**Target Area:** -Header section that encapsulates arrows and title. [[1]](#themes-note-1) - -**Default:** -`null` - - -## `headerTitle` - -**Target Area:** -Header title. [[1]](#themes-note-1) - -**Default:** -`null` - - -## `headerArrows` -**Target Area:** -Header arrows that can be styled just like a font. [[1]](#themes-note-1) - -**Default:** -`null` - - -## `headerHorizontalDivider` - -**Target Area:** -Horizontal divider that appears just below header section. - -**Default:** -`null` - - -## `weekdays` - -**Target Area:** -Weekday section that encapsulates all the weekday labels. [[1]](#themes-note-1) - -**Default:** -`null` - - -## `weekdaysHorizontalDivider` - -**Target Area:** -Horizontal divider that appears just below weekdays section. - -**Default:** -`null` - - -## `weeks` - -**Target Area:** -Weeks section that encapsulate all the days of the month. [[1]](#themes-note-1) - -**Default:** -`null` - - -## `dayCell` - -**Target Area:** -Day cell that contains day content and any associated attributes. - -**Default:** -`null` - - -## `dayContent` - -**Target Area:** -Content area within the day cell that contains the day of the month number. [[2]](#themes-note-2) - -**Default:** -`null` - - -## `dayPopoverContent` - -**Target Area:** -Popover container for attribute popover labels and slot content. - -**Default:** -```javascript -{ - color: '#333333', - fontSize: '.8rem', - whiteSpace: 'nowrap' -} -``` - - -## `dots` - -**Target Area:** -Container for dot indicators. - -**Default:** -`null` - - -## `bars` - -**Target Area:** -Container for bar indicators. - -**Default:** -`null` - - -## `navHeader` - -**Target Area:** -Navigation pane header. - -**Default:** -`null` - -## `navHeaderArrows` - -**Target Area:** -Navigation header arrows. - -**Default:** -`null` - -## `navHeaderTitle` - -**Target Area:** -Navigation header title. - -**Default:** -`null` - - -## `navMonthCell` - -**Target Area:** -Navigation month cells. [[3]](#themes-note-3) - -**Default:** -`null` - - -## `navYearCell` - -**Target Area:** -Navigation year cells. [[3]](#themes-note-3) - -**Default:** -`null` - - - - -::: tip [1] -As of v0.9.0, you can use functions to define the `header`, `headerTitle`, `headerArrows`, `weekdays` and `weeks` styles. Functions should accept a [`page`](./page-object.md) object and return a configured style. -::: - -::: tip [2] -As of v0.8.0, the `dayContentHover` style has been deprecated and you can optionally use a function to define the `dayContent` style. This function should accept an object parameter with the following properties (`isHovered`, `isFocused`, [`day`](./day-object.md)). This function should return the configured style. -::: - -::: tip [3] -As of v0.9.0, you can use functions to define the `navMonthCell` and `navYearCell` styles. Functions should accept a [`nav-month-item`](#nav-month-item-properties) object and [`nav-year-item`](#nav-year-item-properties) object, respectively. - -#### `nav-month-item` Properties -| Name | Type | Description | -| ---- | ---- | ----------- | -| `month` | Number | Month number of the cell. | -| `label` | String | Formatted month label per the [`masks`](#calendar-props) prop. | -| `is-active` | Boolean | Month is selected, or active. | -| `is-disabled` | Boolean | Month is disabled (ie. not selectable). | - -#### `nav-year-item` Properties -| Name | Type | Description | -| ---- | ---- | ----------- | -| `year` | Number | Year number of the cell. | -| `is-active` | Boolean | Year is selected, or active. | -| `is-disabled` | Boolean | Year is disabled (ie. not selectable). | -::: \ No newline at end of file diff --git a/docs/attributes.md b/docs/attributes.md deleted file mode 100644 index f14c328ea..000000000 --- a/docs/attributes.md +++ /dev/null @@ -1,674 +0,0 @@ ---- -title: 'Attributes' -sidebarDepth: 2 ---- - -# Attributes - -Attributes are what bring `v-calendar` to life. They are simply visual decorators that can be applied to specific calendar dates. - - - -Attributes are defined as an array of objects (each object is a separate attribute). - -A single attribute may be displayed for single dates, date ranges and even complex date patterns. Some examples of complex patterns include: -* Every other Friday -* 15th of every month -* Last Friday of every other month. - -Here is the basic structure of attributes: - -```html - -``` - -```js -... -data() { - return { - // Attributes are supplied as an array - attributes: [ - // This is a single attribute - { - // An optional key can be used for retrieving this attribute later, - // and will most likely be derived from your data object - key: Any, - // Attribute type definitions - highlight: true, // Boolean, String, Object - dot: true, // Boolean, String, Object - bar: true, // Boolean, String, Object - content: 'red', // Boolean, String, Object - popover: { ... }, // Only objects allowed - // Your custom data object for later access, if needed - customData: { ... }, - // We also need some dates to know where to display the attribute - // We use a single date here, but it could also be an array of dates, - // a date range or a complex date pattern. - dates: new Date(), - // You can optionally provide dates to exclude - excludeDates: null, - // Think of `order` like `z-index` - order: 0 - } - ]; - } -} -``` - -### Using `customData` - -The `customData` property is used to link your own custom data object to the attribute. This is useful when handling events or providing custom slot content. For example, if a user clicks on a calendar day that is displaying the attribute, you might want to have some data associated with that attribute. - -### Using `order` - -By default, attributes are ordered to display the most information possible. For example, when attributes with highlighted regions overlap, single date regions appear above date range regions, and date ranges with a later start date appear above those with an earlier start date. - -

- -

- -If you would like to force an attribute to display above (or before) all others and override these rules, assign an order value greater than 0. - -## Quick Guide - -Let's start by displaying a simple **highlight** on today's date. - - - -```html - -``` - -```js -export default { - data() { - return { - attrs: [ - { - key: 'today', - highlight: true, - dates: new Date(), - }, - ], - }; - }, -}; -``` - -For the simple example above, we used the following properties to build the attribute: - -| Property | Description | -| --- | --- | -| **`key`** | Uniquely identifies the attribute. This will come in handy later. | -| **`highlight`** | Config for the highlighted region displayed on each date. | -| **`dates`** | Dates used to display the attribute. | - -:::tip -When simply assigning `true` to the highlight config (or any other attribute except popovers), the currently active [`color`](/api/calendar#color) is used to display it. In this example, the `color` prop is not specified, so the default `color` (`"blue"`) and `fillMode` (`"solid"`) are used. -::: - -Here is how the default dot config would appear. - - - -```js -export default { - data() { - return { - attrs: [ - { - key: 'today', - dot: true, - dates: new Date(), - }, - ], - }; - }, -}; -``` - -## Colors - -There are 8 pre-defined color sets available (`gray`, `red`, `orange`, `yellow`, `green`, `teal`, `blue`, `indigo`, `purple`, `pink`). - -As mentioned above, if a color is not specifically assigned to an attribute, the `color` prop passed to the component is used. If this color is not provided, the default `blue` color is used. - -All attributes, except popovers, may be assigned directly to a color. - - - -```js -export default { - data() { - return { - attrs: [ - { - key: 'today', - highlight: 'red', - dates: new Date(), - }, - ], - }; - }, -}; -``` - -Additionally, when an object is used to configure an attribute, the `color` property may be assigned as part of that configuration. - -Click to learn more about the custom properties for [highlights](#highlights), [dots](#dots), [bars](#bars) and [popovers](#popovers). - -## Highlights - -As mentioned before, highlights may be assigned a boolean, string or object value. - -```js -// Uses the active color (default blue) -highlight: true - -// Uses the red color -highlight: 'red' - -// Configuration object -highlight: { - color: 'orange', - fillMode: 'light', -} -``` - -These are all the configuration options you may use for further highlight customization: - -| Property | Type | Description | -| --- | --- | --- | -| `color` | String | Color. | -| `fillMode` | String | Color fill option: `solid` (default), `light`, `outline`. | -| `class` | String | Class to apply to the highlight background element. | -| `style` | Object | Style to apply to the highlight background element. | -| `contentClass` | String | Class to apply to the highlight content element. | -| `contentStyle` | Object | Style to apply to the highlight content element. | - -:::warning -The `none` option for `fillMode` is still available but will be deprecated in the next major release in favor of the more descriptive `outline` option. -::: - -Here is an example using each of the three fill mode types (`solid`, `light` and `outline`, respectively). - - - -```html - -``` - -```js -data() { - const date = new Date(); - const year = date.getFullYear(); - const month = date.getMonth(); - return { - attrs: [ - { - key: 'today', - highlight: { - color: 'purple', - fillMode: 'solid', - contentClass: 'italic', - }, - dates: new Date(year, month, 12), - }, - { - highlight: { - color: 'purple', - fillMode: 'light', - }, - dates: new Date(year, month, 13), - }, - { - highlight: { - color: 'purple', - fillMode: 'outline', - }, - dates: new Date(year, month, 14), - }, - ], - }; -}, -``` - -You may also target the `start`, `base` and `end` sections of the highlight with different configurations. - - - -```html - -``` - -```js -export default { - data() { - return { - attrs: [ - { - highlight: { - start: { fillMode: 'outline' }, - base: { fillMode: 'light' }, - end: { fillMode: 'outline' }, - }, - dates: { start: new Date(2019, 0, 14), end: new Date(2019, 0, 18) }, - }, - ], - }; - }, -}; -``` - -## Dots - -Dots may be assigned a boolean, string or object value. - -```js -// Uses the active color (default blue) -dot: true - -// Uses the red color -dot: 'red' - -// Configuration object -dot: { - style: { - backgroundColor: 'brown', - } -} -``` - -These are the additional configuration options you may use for further dot customization: - -| Property | Type | Description | -| --- | --- | --- | -| `color` | String | Color. | -| `class` | String | Class to apply to the dot element. | -| `style` | Object | Style to apply to the dot element. | - - - -```html - -``` - -```js -export default { - data() { - return { - attributes: [ - { - dot: true, - dates: [ - new Date(2018, 0, 1), // Jan 1st - new Date(2018, 0, 10), // Jan 10th - new Date(2018, 0, 22), // Jan 22nd - ], - }, - { - dot: 'red', - dates: [ - new Date(2018, 0, 4), // Jan 4th - new Date(2018, 0, 10), // Jan 10th - new Date(2018, 0, 15), // Jan 15th - ], - }, - { - dot: { - style: { - background-color: 'brown', - }, - }, - dates: [ - new Date(2018, 0, 12), // Jan 12th - new Date(2018, 0, 26), // Jan 26th - new Date(2018, 0, 15), // Jan 15th - ], - }, - ], - }; - }, -}; -``` - -## Bars - -Bars may be assigned a boolean, string or object value. When more than one bar is dislayed per calendar day, they are equally spaced amongst each other. As a result, it might be a good idea to limit displaying up to 2 to 3 bars per day cell, as legibility can suffer. - -```js -// Uses the active color (default blue) -bar: true - -// Uses the red color -bar: 'red' - -// Configuration object -bar: { - style: { - backgroundColor: 'brown', - } -} -``` - -These are the additional configuration options you may use for further bar customization: - -| Property | Type | Description | -| --- | --- | --- | -| `color` | String | Color. | -| `class` | String | Class to apply to the bar element. | -| `style` | Object | Style to apply to the bar element. | - - - -```html - -``` - -```js -export default { - data() { - return { - attributes: [ - { - bar: true, - dates: [ - new Date(2018, 0, 1), // Jan 1st - new Date(2018, 0, 10), // Jan 10th - new Date(2018, 0, 22), // Jan 22nd - ], - }, - { - bar: 'red', - dates: [ - new Date(2018, 0, 4), // Jan 4th - new Date(2018, 0, 10), // Jan 10th - new Date(2018, 0, 15), // Jan 15th - ], - }, - { - bar: { - style: { - backgroundColor: 'brown', - }, - }, - dates: [ - new Date(2018, 0, 12), // Jan 12th - new Date(2018, 0, 26), // Jan 26th - new Date(2018, 0, 15), // Jan 15th - ], - }, - ], - }; - }, -}; -``` - -## Popovers - -There are 2 basic approaches to displaying popovers within attributes. - -### 1. Labels - -Labels are the basic tooltip-style popover. They are configured as simple strings. By default, these popovers display when the user hovers over the day content and additionaly are not interactive to the user. - - - -```html - -``` - -```js -export default { - data() { - const todos = [ - { - description: 'Take Noah to basketball practice.', - isComplete: false, - dates: { weekdays: 6 }, // Every Friday - color: 'red', - }, - ]; - return { - incId: todos.length, - todos, - }; - }, - computed: { - attributes() { - return [ - // Attributes for todos - ...this.todos.map(todo => ({ - dates: todo.dates, - dot: { - color: todo.color, - class: todo.isComplete ? 'opacity-75' : '', - }, - popover: { - label: todo.description, - }, - customData: todo, - })), - ]; - }, - }, -}; -``` - -For this example, we simply assigned a string to the `popover.label` property. This signals to `v-calendar` that it needs to display the label in a popover whenever the user hovers over the day content (or taps on mobile). - -If we want to force the user to click on the day content in order to display the popover, we can set the popover's `visibility` property to `"focus"` or `"click"`. - - - -```js - ... - popover: { - label: todo.description, - visibility: 'focus' - } - ... -``` - - - -```js - ... - popover: { - label: todo.description, - visibility: 'click' - } - ... -``` - -Also, you'll notice there is a small indicator next to the popover content row for the attribute. This is a simple indicator provided in order to help the user match up the popover content rows to the indicators in the calendar day cell. The indicator will try to coordinate the colors and shapes as closely as possible. - -In the previous example, because a red dot was used, the indicator displays the same. - -

- -

- -Here is how a bar or highlight would appear, respectively. - -

- - -

- -If you would like to hide the indicator, just set the `hideIndicator` property to `true`; - - - -```js - ... - popover: { - label: todo.description, - visibility: 'hover', - hideIndicator: true, - } - ... -``` - -### 2. Scoped Slot - -For a more customized approach you can insert your own `"day-popover"` custom scoped slot within `v-calendar`. - -::: tip -If you are not familiar with the convention of using scoped slots in Vue.js, you can reference the [Vue docs](https://vuejs.org/v2/guide/components.html#Scoped-Slots) or [this post by alligator.io](https://alligator.io/vuejs/scoped-component-slots/). -::: - - - -```html - - - -``` - -```js -// ...Continued from previous example -export default { - ... - computed: { - attributes() { - return [ - // Attributes for todos - ...this.todos.map(todo => ({ - dates: todo.dates, - dot: { - color: todo.color, - class: todo.isComplete ? 'opacity-75' : '', - }, - // We need to at least pass a truthy value for the popover to appear - // Pass an object to customize popover settings like visibility, placement, etc. - popover: true, - customData: todo, - })), - ]; - }, - }, -} -``` - -Notice that displaying static content here probably isn't going to help you much. - -Now that you are providing your own popover, you need to display the attributes on your own. Fortunately, the following `slot-scope` props should provide you with everything you need to help you display content for your custom data. - -| Property | Type | Description | -| -------- | ---- | ----------- | -| `day` | Object | The [day object](/api/day-object.md) associated with the popover. | -| `attributes` | Array | All the attributes assigned for the associated day. Only attributes with 'truthy' values assigned to their `popover` key are passed in. | -| `format` | Function | Function for formatting dates. Accepts `date: Date` and `mask: String` arguments, respectively. | -| `masks` | Object | Set of format masks for the calendar. | -| `updateLayout` | Function | Call this function to force the popover to recalculate its layout. For example, making changes to elements within popover could cause it to grow or shrink. Calling this function will keep it positioned correctly. | -| `hide` | Function | Call this function to forcefully hide the popover. | - -Let's walk through the process of customizing the previous example. First, let's add a header to display the date for the popover. - - - -```html - - - -``` - -For the header, we use the `format` function to format the date for the current `day`, using the default `dayPopover` mask. Note: you could also just use your own custom mask. - -Because this technique for displaying the header is common, you can extract the pre-formatted `dayTitle` property. - -```html - - - -``` - -Now, we just need to display the attributes for the day as well. We can do so by extracting the `attributes` array from the slot-scope expression. We'll use a simple list to display the attribute data. - - - -```html - -
-
- {{ dayTitle }} -
-
    -
  • - {{ customData.description }} -
  • -
-
-
-``` - -Finally, if you wish to display indicators with your custom content, you can use the `v-popover-row` component included with the plugin. Just pass in the attribute for each row. - - - -```html - - - - -``` - -```js -// Import popover row component from plugin -import PopoverRow from 'v-calendar/lib/components/popover-row.umd.min' - -export default { - components: { - PopoverRow, - }, - ... -} -``` - -### Additional Options - -Reference [API](api/v2.0/attribute.html#popover) for a complete list of popover options. diff --git a/docs/calendar/api.md b/docs/calendar/api.md new file mode 100644 index 000000000..bdb2e149c --- /dev/null +++ b/docs/calendar/api.md @@ -0,0 +1,351 @@ +--- +title: 'API' +--- + +# API + +## Props + +| Name | Type | Default | +| --- | --- | --- | +| **view** | "weekly" \| "monthly"| "monthly" | +| **attributes** | [AttributeConfig](#attributeconfig)[] | *undefined* | +| **rows** | number | 1 | +| **columns** | number | 1 | +| **step** | number | *undefined* | +| **color** | string | "blue" | +| **is-dark** | boolean \| "system" \| [DarkModeClassConfig](#darkmodeclassconfig) | false | +| **expanded** | boolean | false | +| **borderless** | boolean | false | +| **transparent** | boolean | false | +| **first-day-of-week** | 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 | 1 | +| **nav-visibility** | "click" \| "hover" \| "hover-focus" \| "focus" | "click" | +| **title-position** | "center" \| "left" \| "right" | "center" | +| **transition** | "none" \| "fade" \| "slide-v" \| "slide-h" | "slide-h" | +| **masks** | Record | [Default masks](#defaults) | +| **locale** | string | *undefined* | +| **timezone** | string | *undefined* | +| **initial-page** | [PageAddress](#pageaddress) | *undefined* | +| **initial-page-position** | number | 1 | +| **min-page** | [PageAddress](#pageaddress) | *undefined* | +| **max-page** | [PageAddress](#pageaddress) | *undefined* | +| **min-date** | Date | *undefined* | +| **max-date** | Date | *undefined* | +| **disabled-dates** | [DateRangeSource](#daterangesource)[] | *undefined* | +| **show-weeknumbers** | boolean \| "left" \| "left-outside" \| "right" \| "right-outside| *undefined* | +| **show-iso-weeknumbers** | boolean \| "left" \| "left-outside" \| "right" \| "right-outside| *undefined* | +| **trim-weeks** | boolean | false | +| **disable-page-swipe** | boolean | false | + +## Events + +| Name | Parameter Type(s) | +| --- | --- | +| **dayclick** | [CalendarDay](#calendarday), [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) | +| **daymouseenter** | [CalendarDay](#calendarday), [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) | +| **daymouseleave** | [CalendarDay](#calendarday), [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) | +| **dayfocusin** | [CalendarDay](#calendarday), [FocusEvent](https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent) | +| **dayfocusout** | [CalendarDay](#calendarday), [FocusEvent](https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent) | +| **daykeydown** | [CalendarDay](#calendarday), [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) | +| **weeknumberclick** | [CalendarWeek](#calendarweek), [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) | +| **transition-start** | | +| **transition-end** | | +| **did-move** | [Page](#page)[] | +| **update:view** | "daily" \| "weekly" \| "monthly" | +| **update:pages** | [Page](#page)[] | + +## Slots + +| Name | Props | +| --- | --- | +| **header-title** | title: string | +| **header-title-wrapper** | | +| **header-prev-button** | move: () => Promise\, disabled: boolean | +| **header-next-button** | move: () => Promise\, disabled: boolean | +| **nav-prev-button** | move: () => Promise\, disabled: boolean | +| **nav-next-button** | move: () => Promise\, disabled: boolean | +| **day-content** | day: [CalendarDay](#calendarday), attributes: Attribute[], locale: Locale | +| **day-popover** | day: [CalendarDay](#calendarday), dayTitle: string, attributes: Attribute[] | +| **footer** | | + +## Methods + +| Name | Type | +| --- | --- | +| **canMove** | (target: [\](#movetarget), opts?: Partial[\](#moveoptions)) => boolean | +| **canMoveBy** | (pages: number, opts?: Partial[\](#moveoptions)) => boolean | +| **move** | (target: [MoveTarget](#movetarget), opts?: Partial[\](#moveoptions)) => Promise\ | +| **moveBy** | (pages: number, opts?: Partial[\](#moveoptions)) => Promise\ | +| **movePrev** | () => Promise\ | +| **moveNext** | () => Promise\ | +| **focusDate** | (date: Date, opts?: Partial[\](#moveoptions)) => Promise\ | + +## Types + +### AttributeConfig + +```ts +interface AttributeConfig { + key: string | number; + content: string | Partial>>; + highlight: boolean | string | Partial>>; + dot: boolean | string | Partial>>; + bar: boolean | string | Partial>>; + popover: PopoverConfig; + dates: DateRangeSource[]; + customData: any; + order: number; +} + +interface Profile { + start: T; + base: T; + end: T; + startEnd?: T; +} + +interface Content { + key: string | number; + color: string; + class: string | any[]; + style: Record; +} + +interface Highlight { + key: string | number; + color: string; + class: string | any[]; + style: Record; + contentClass: string | any[]; + contentStyle: Record; + fillMode: 'solid' | 'light' | 'outline'; +} + +interface Dot { + key: string | number; + color: string; + class: string | any[]; + style: Record; +} + +interface Bar { + key: string | number; + color: string; + class: string | any[]; + style: Record; +} + +type PopoverConfig = Partial<{ + label: string; + customData: any; + visibility: 'click' | 'hover' | 'hover-focus' | 'focus'; + placement: Placement; + hideIndicator: boolean; + isInteractive: boolean; +}>; +``` + +### CalendarDay + +```ts +interface CalendarDay { + id: string; + dayIndex: number; + day: number; + dayFromEnd: number; + weekday: number; + weekdayOrdinal: number; + weekdayOrdinalFromEnd: number; + week: number; + weekFromEnd: number; + weeknumber: number; + month: number; + year: number; + date: Date; + position: number; + label: string; + ariaLabel: string; + weekdayPosition: number; + weekdayPositionFromEnd: number; + weekPosition: number; + isoWeeknumber: number; + startDate: Date; + noonDate: Date; + endDate: Date; + isToday: boolean; + isFirstDay: boolean; + isLastDay: boolean; + isDisabled: boolean; + isFocusable: boolean; + inMonth: boolean; + inPrevMonth: boolean; + inNextMonth: boolean; + onTop: boolean; + onBottom: boolean; + onLeft: boolean; + onRight: boolean; + classes: Array; + locale: Locale; +} +``` + +### CalendarWeek + +```ts +interface CalendarWeek { + id: string; + week: number; + weekPosition: number; + weeknumber: number; + isoWeeknumber: number; + weeknumberDisplay?: number; + days: CalendarDay[]; + title: string; +} +``` + +### CalendarWeekday + +```ts +interface CalendarWeekday { + weekday: number; + label: string; +} +``` + +### DarkModeClassConfig + +```ts +interface DarkModeClassConfig { + selector: string; + darkClass: string; +} +``` + +### DateRangeSource + +```ts +type DateRangeSource = DateRangeDate | [DateRangeDate, DateRangeDate] | Partial; + +type DateRangeDate = Date | null; + +interface DateRangeConfig { + start: DateRangeDate; + end: DateRangeDate; + span: number; + repeat: Partial; +} +``` + +### DateSource + +```ts +type DateSource = Date | string | number; +``` + +### MoveOptions + +```ts +interface MoveOptions { + position: number; + view: CalendarView; + transition: MoveTransition; + force: boolean; +} + +type MoveTransition = 'none' | 'fade' | 'slide-v' | 'slide-h'; + +``` + +### MoveTarget + +```ts +type MoveTarget = DateSource | PageAddress; +``` + +### PageAddress + +```ts +interface PageAddress { + day?: number; + week?: number; + month: number; + year: number; +} +``` + +### Page + +```ts +interface Page { + id: string; + day?: number; + week?: number; + month: number; + year: number; + view: PageView; + trimWeeks: boolean; + position: number; + row: number; + rowFromEnd: number; + column: number; + columnFromEnd: number; + showWeeknumbers: boolean; + showIsoWeeknumbers: boolean; + weeknumberPosition: string; + monthTitle: string; + weekTitle?: string; + dayTitle?: string; + title: string; + titlePosition: TitlePosition; + shortMonthLabel: string; + monthLabel: string; + shortYearLabel: string; + yearLabel: string; + monthComps: MonthParts; + prevMonthComps: MonthParts; + nextMonthComps: MonthParts; + days: CalendarDay[]; + weeks: CalendarWeek[]; + weekdays: CalendarWeekday[]; + viewDays: CalendarDay[]; + viewWeeks: CalendarWeek[]; +} +``` + +## Defaults + +```js +{ + componentPrefix: 'V', + color: 'blue', + isDark: false, + navVisibility: 'click', + titlePosition: 'center', + transition: 'slide-h', + datePicker: { + updateOnInput: true, + inputDebounce: 1000, + popover: { + visibility: 'hover-focus', + placement: 'bottom-start', + isInteractive: true, + }, + }, + masks: { + title: 'MMMM YYYY', + weekdays: 'W', + navMonths: 'MMM', + hours: 'h A', + input: ['L', 'YYYY-MM-DD', 'YYYY/MM/DD'], + inputDateTime: ['L h:mm A', 'YYYY-MM-DD h:mm A', 'YYYY/MM/DD h:mm A'], + inputDateTime24hr: ['L HH:mm', 'YYYY-MM-DD HH:mm', 'YYYY/MM/DD HH:mm'], + inputTime: ['h:mm A'], + inputTime24hr: ['HH:mm'], + dayPopover: 'WWW, MMM D, YYYY', + data: ['L', 'YYYY-MM-DD', 'YYYY/MM/DD'], + model: 'iso', + iso: 'YYYY-MM-DDTHH:mm:ss.SSSZ', + } +} +``` \ No newline at end of file diff --git a/docs/calendar/attributes.md b/docs/calendar/attributes.md new file mode 100644 index 000000000..28c2febf3 --- /dev/null +++ b/docs/calendar/attributes.md @@ -0,0 +1,697 @@ +--- +title: 'Attributes' +--- + +# Attributes + +Attributes are visual decorators that can be applied to specific calendar dates. + + + + + +Attributes are defined as an array of objects (each object is a separate attribute). + +A single attribute may be displayed for single dates, date ranges and even complex date patterns. Some examples of complex patterns include: +* Every other Friday +* 15th of every month +* Last Friday of every other month. + +Here is the basic structure of attributes: + +```html + +``` + +```js +... +data() { + return { + // Attributes are supplied as an array + attributes: [ + // This is a single attribute + { + // An optional key can be used for retrieving this attribute later, + // and will most likely be derived from your data object + key: Any, + // Attribute type definitions + content: 'red', // Boolean, String, Object + highlight: true, // Boolean, String, Object + dot: true, // Boolean, String, Object + bar: true, // Boolean, String, Object + popover: { ... }, // Only objects allowed + // Your custom data object for later access, if needed + customData: { ... }, + // We also need some dates to know where to display the attribute + // We use a single date here, but it could also be an array of dates, + // a date range or a complex date pattern. + dates: new Date(), + // Think of `order` like `z-index` + order: 0 + } + ]; + } +} +``` + +### Using `customData` + +The `customData` property is used to link your own custom data object to the attribute. This is useful when handling events or providing custom slot content. For example, if a user clicks on a calendar day that is displaying the attribute, you might want to have some data associated with that attribute. + +### Using `order` + +By default, attributes are ordered to display the most information possible. For example, when attributes with highlighted regions overlap, single date regions appear above date range regions, and date ranges with a later start date appear above those with an earlier start date. + +If you would like to force an attribute to display above (or before) all others and override these rules, assign an order value greater than 0. + +## Quick Guide + +Let's start by displaying a simple **highlight** on today's date. + + + + + +```vue + + + +``` + +For the simple example above, we used the following properties to build the attribute: + +| Property | Description | +| --- | --- | +| **`key`** | Uniquely identifies the attribute. This will come in handy later. | +| **`highlight`** | Config for the highlighted region displayed on each date. | +| **`dates`** | Dates used to display the attribute. | + + + + When simply assigning `true` to the highlight config (or any other attribute except popovers), the currently active color is used to display it. In this example, the `color` prop is not specified, so the default `color` (`"blue"`) and `fillMode` (`"solid"`) are used. + + +Here is how the default dot config would appear. + + + + + +```vue + +``` + +## Colors + +Attributes inherit the default color from the `Calendar.color` prop (which is blue by default). + +However, all attributes except popovers may be assigned directly to a color. + + + + + +```vue + +``` + +Additionally, when an object is used to configure an attribute, the `color` property may be assigned as part of that configuration. + +Click to learn more about the custom properties for [content](#content), [highlights](#highlights), [dots](#dots), [bars](#bars) and [popovers](#popovers). + +## Highlights + +Highlights may be assigned a boolean, string or object value. + +```js +// Uses the active color (default blue) +highlight: true + +// Uses the red color +highlight: 'red' + +// Configuration object +highlight: { + color: 'orange', + fillMode: 'light', +} +``` + +When using an object value, these are the properties you may use for further highlight customization: + +| Property | Type | Description | +| --- | --- | --- | +| `color` | String | Color. | +| `fillMode` | String | Color fill option: `solid` (default), `light`, `outline`. | +| `class` | String | Class to apply to the highlight background element. | +| `style` | Object | Style to apply to the highlight background element. | +| `contentClass` | String | Class to apply to the highlight content element. | +| `contentStyle` | Object | Style to apply to the highlight content element. | + +Here is an example using each of the three fill mode types (`solid`, `light` and `outline`, respectively). + + + + + +```vue + + + +``` + +## Content + +The day content (number label) may be configured with a boolean, string or object value. + +```js +// Uses the active color (default blue) +content: true + +// Uses the red color +content: 'red' + +// Configuration object +content: { + style: { + color: 'brown', + } +} +``` + +When using an object value, these are the properties you may use for further content customization: + +| Property | Type | Description | +| --- | --- | --- | +| `color` | String | Color. | +| `class` | String | Class to apply to the content element. | +| `style` | Object | Style to apply to the content element. | + + + + + +```vue + + + +``` + +## Dots + +Dots may be assigned a boolean, string or object value. + +```js +// Uses the active color (default blue) +dot: true + +// Uses the red color +dot: 'red' + +// Configuration object +dot: { + style: { + backgroundColor: 'brown', + } +} +``` + +When using an object value, these are the properties you may use for further dot customization: + +| Property | Type | Description | +| --- | --- | --- | +| `color` | String | Color. | +| `class` | String | Class to apply to the dot element. | +| `style` | Object | Style to apply to the dot element. | + + + + + +```vue + + + +``` + +## Bars + +Bars may be assigned a boolean, string or object value. When more than one bar is dislayed per calendar day, they are equally spaced amongst each other. Thus, it might be a good idea to limit displaying up to 2 to 3 bars per day cell, as legibility can suffer. + +```js +// Uses the active color (default blue) +bar: true + +// Uses the red color +bar: 'red' + +// Configuration object +bar: { + style: { + backgroundColor: 'brown', + } +} +``` + +These are the additional configuration options you may use for further bar customization: + +| Property | Type | Description | +| --- | --- | --- | +| `color` | String | Color. | +| `class` | String | Class to apply to the bar element. | +| `style` | Object | Style to apply to the bar element. | + + + + + +```vue + + + +``` + +## Target Options + +Each attribute type allows for targeting `start`, `base` and `end` sections with separate configurations. + +For example, we could style the `fillMode` for the highlight end caps separately from the base section. + + + + + +```vue + + + +``` + +## Popovers + +There are 2 basic approaches to displaying popovers within attributes. + +### 1. Labels + +Labels are the basic tooltip-style popover, configured as simple strings. By default, these popovers display when the user hovers over the day content and are not interactive to the user. + + + +```vue + + + +``` + +For this example, we simply assigned a string to the `popover.label` property. Now, the label displays in a popover whenever the user hovers over the day content (or taps on mobile). + +If we want to force the user to click on the day content in order to display the popover, we can set the popover's `visibility` property to `"focus"` or `"click"`. + + + +```js + ... + popover: { + label: todo.description, + visibility: 'focus' + } + ... +``` + + + +```js + ... + popover: { + label: todo.description, + visibility: 'click' + } + ... +``` + +Also, you'll notice there is a small indicator next to the popover content row for the attribute. This is a simple indicator provided in order to help the user match up the popover content rows to the indicators in the calendar day cell. + +If you would like to hide the indicator, just set the `hideIndicator` property to `true`; + + + +```js + ... + popover: { + label: todo.description, + visibility: 'hover', + hideIndicator: true, + } + ... +``` + +### 2. Scoped Slot + +For a more customized approach you can insert your own `"day-popover"` custom scoped slot within `VCalendar`. + + + + If you are not familiar with the convention of using scoped slots in Vue.js, you can reference the [Vue docs](https://vuejs.org/guide/components/slots.html#scoped-slots). + + + + + + + +```vue{3-7,31-33} + + + +``` + +We can also pass multiple dates in an array to highlight multiple dates in the calendar. + + + + + +```vue{11-16} + + + +``` + +## Date ranges + +Date ranges are also valid date expressions. They simply denote a range of dates from a start date to an end date. +### Range array + +A range can be configured with an array of start/end dates. + + + + + +```vue + + + +``` + +### Range object + +A range can also be configured as an object with the following definition. + +```ts +type DateRangeConfig = Partial<{ + start: Date | null; + end: Date | null; + span: number; + repeat: Partial; +}> +``` + +#### Range span + +Note from the definition above that the date range can be denoted with `start` and `end` dates or a `start` date and a `span` number of days added to compute the `end` date. + + + + + +```vue{11} + + + +``` + +#### Boundless dates + +Also note that `start` and `end` dates can span forever backwards and forwards, respectively, by assigning `null` or `undefined` values. + +Boundless dates probably make more sense when defining disabled date expressions. + + + + + +```vue{8} + + + +``` + + + +Note how `disabled-dates` do not also disable navigation. Use the `min-date` or `max-date` props to disable dates and navigation. + + + +## Repeating dates + +Use the `repeat` property of a date range object to create a repeating date or date range. + + + + + +```vue + + + +``` + +### Definitions + +The `repeat` object follows the `DateRepeatConfig` interface below, which consists of key-value pairs of rules. + +```ts +export interface DateRepeatConfig { + every: RepeatIntervalShort | [number, RepeatInterval]; + until: Date; + weekdays: SingleOrArray; + days: SingleOrArray; + weeks: SingleOrArray; + months: SingleOrArray; + years: SingleOrArray; + ordinalWeekdays: SingleOrArray; + on: SingleOrArray>; +} + +type SingleOrArray = T | T[]; +type RepeatIntervalShort = 'day' | 'week' | 'month' | 'year'; +type RepeatInterval = 'days' | 'weeks' | 'months' | 'years'; +type DayOfWeek = 1 | 2 | 3 | 4 | 5 | 6 | 7; +type DayInMonth = -31, -30 ... -1 | 1 | 2 ... | 31; +type WeekInMonth = -6 | -5 | -4 | -3 | -2 | -1 | 1 | 2 | 3 | 4 | 5 | 6; +type MonthInYear = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12; +``` + +### Interval rules + +Interval rules are defined using the `every` key. + +```ts +{ + repeat: { + every: 'month', + days: 15 + } +} +``` + +Since the `repeat` above repeats over a single interval (1 month), the frequency (`day`, `week`, `month`, `year`) can be expressed as a simple string. + +If repeating over 2 or more intervals, then an array is required to express the interval and frequency. + +```ts +{ + repeat: { + every: [2, 'months'], + days: 15, + } +} +``` + +Also, it is important to note that `week`, `month` and `year` interval rules must be paired with at least one component rule (`days` in the example above) or ordinal component rule. + + + + + +```vue + + + +``` + +### Component rules + +Component rules are used to more specifically target repeating date ranges. They include the following keys of the `DateRepeatConfig` interface. + +```ts +export interface DateRepeatConfig { + // ... + weekdays: SingleOrArray; + days: SingleOrArray; + weeks: SingleOrArray; + months: SingleOrArray; + years: SingleOrArray; + // ... +} + +type SingleOrArray = T | T[]; +type DayOfWeek = 1 | 2 | 3 | 4 | 5 | 6 | 7; +type DayInMonth = -31, -30 ... -1 | 1 | 2 ... | 31; +type WeekInMonth = -6 | -5 | -4 | -3 | -2 | -1 | 1 | 2 | 3 | 4 | 5 | 6; +type MonthInYear = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12; +``` + +Component rule values can be expressed as a single number or an array of numbers. Also, note that the `days` and `weeks` rules may be expressed as negative numbers to offset from the end of the repeat interval. + +In the example below, since repeating on multiple days of the month (15, 25), the `days` property must be an array. + + + + + +```js +// ... +const attributes = ref([ + { + highlight: true, + dates: [ + { + start: new Date(2022, 10, 15), + repeat: { + every: [2, 'months'], + days: [15, 25], + }, + }, + ], + }, +]); +``` + +### Ordinal component rules + +Ordinal component rules target ordinal weekdays of the month. Such examples include + +* First Sunday of the month +* Fifth Tuesday of the month +* Last Monday of the month +* Second to last Saturday of the month + +```ts +export interface DateRepeatConfig { + // ... + ordinalWeekdays: SingleOrArray; +} + +type SingleOrArray = T | T[]; +``` + +The rule values are expressed as an array with the position first (-6 to -1, 1 to 6), followed by the weekdays to match (1 to 7). + +```ts +{ + repeat: { + every: 'month', + ordinalWeekdays: [-1, 2], // Last Monday of the month + } +} +``` + +Multiple weekdays can be appended to the end of the array. + +```ts +{ + repeat: { + every: 'month', + ordinalWeekdays: [-1, 2, 6], // Last Monday or Friday of the month + } +} +``` + +Multiple rules can be set by wrapping them in a separate array. + +```ts +{ + repeat: { + every: 'month', + ordinalWeekdays: [ + [1, 1], // First Sunday of the month + [-1, 2], // Last Monday or Friday of the month + ] + } +} +``` + +In the example below, we can apply this rule to a repeating date range. + + + + + +```js +// ... +const attributes = ref([ + { + highlight: true, + dates: [ + { + start: new Date(2022, 10, 7), + end: new Date(2022, 10, 9), + repeat: { + every: 'month', + ordinalWeekdays: [ + [1, 2], // First Monday of the month + [-1, 2], // Last Monday of the month + ], + }, + }, + ], + }, +]); +``` + +### Nested group rules + +Repeat objects can be nested for more complex matching logic. Until now, rules have been conditionally *and*-ed with each other by defining them in a single object. + +Using the `on` property, we can use an array to group multiple rule objects that are conditionally *or*-ed instead of *and*ed. + +```ts +export interface DateRepeatConfig { + // ... + on: SingleOrArray | DateRepeatFn>; +} + +type SingleOrArray = T | T[]; +``` + +For example, if we want to repeat every month on the 15th day or the last Monday, we might try to do something like this. + + + + + +```js +// ... +const attributes = ref([ + { + highlight: true, + dates: [ + { + start: new Date(2022, 10, 15), + repeat: { + every: 'month', + days: 15, + ordinalWeekdays: [-1, 2], // Last Monday of the month + }, + }, + ], + }, +]); +``` + +As you can see, the date never repeats because the 15th is never the last Monday of the month. Instead, we can use the `on` property to combine the rules. + + + + + +```js +// ... +const attributes = ref([ + { + highlight: true, + dates: [ + { + start: new Date(2022, 10, 15), + repeat: { + every: 'month', + on: [{ days: 15 }, { ordinalWeekdays: [-1, 2] }], + }, + }, + ], + }, +]); +``` + +### Function rules + +A custom function can be used instead of a configuration object to manually select which dates to repeat on. This function should return a `boolean` that indicates if the date or date range should start on the passed in `dayParts`. + +```ts +type DateRepeatFn = (dayParts: DayParts) => boolean; + +export interface DayParts { + dayIndex: number; + day: number; + dayFromEnd: number; + weekday: number; + weekdayOrdinal: number; + weekdayOrdinalFromEnd: number; + week: number; + weekFromEnd: number; + weeknumber: number; + month: number; + year: number; + date: Date; +} +``` + +For example, we can reimplement the previous example with a custom function. + + + + + +```js +// ... +const attributes = ref([ + { + highlight: true, + dates: [ + { + start: new Date(2022, 10, 15), + repeat: { + every: 'month', + on: ({ weekdayOrdinalFromEnd, weekday, day }) => + (weekdayOrdinalFromEnd === 1 && weekday === 2) || day === 15, + }, + }, + ], + }, +]); +``` \ No newline at end of file diff --git a/docs/calendar/layouts.md b/docs/calendar/layouts.md new file mode 100644 index 000000000..5c6ea8279 --- /dev/null +++ b/docs/calendar/layouts.md @@ -0,0 +1,239 @@ +--- +title: 'Layouts' +--- + +# Layouts + +## Full Width + +To expand the component to the full width of its container, set the `expanded` prop. + + + + + +```html + +``` + +## Title Positioning + +To make the title header left or right aligned, use the `title-position` prop. + +### Left Aligned + + + + + +```html + +``` + +### Right Aligned + + + + + +```html + +``` + +## Weekly View + +Set the `view` prop to display the calendar in 'weekly' view. + + + + + +```html + +``` + +## Weeknumbers + +### Left + +Show week numbers by setting the `show-weeknumbers` prop. + + + + + +```html + +``` + +By default, this will display the numbers on the left side within the calendar pane. + +The `show-weeknumbers` can also be assigned to left and outside positions. + +### Left Outside + + + + + +```html + +``` + +### Right + + + + + +```html + +``` + +### Right Outside + + + + + +```html + +``` + +### ISO Weeknumbers + +To show ISO week numbers, use the `show-iso-weeknumbers` prop with the same convention as `show-weeknumbers`. If both are assigned, the `show-weeknumbers` prop takes precendence. + +Since ISO weeks start on Monday, it makes sense to also set Monday as the first day of the week when setting `show-iso-weeknumbers`. + + + + + +```html + +``` + + + +For the ISO week date standard (ISO-8601), weeks start on Monday and end on Sunday. If the `firstDayOfWeek` setting is different (U.S. default), this could result in 2 weeks displaying the same week number for certain months. + + +## Trim Weeks + +By default, calendar panes always displays the maximum number of weeks in a month, even if the max week does not contain any days in the current month displayed. + +This is to ensure user interface consistency and prevents the calendar height from always changing as the user navigates months. + +However, these empty weeks can be 'trimmed' by setting the `trim-weeks` prop. + + + + + +```html + +``` + +## Footer + +A `footer` slot may be used to insert content below the primary calendar content. + + + + + +```vue + + + +``` + +The slot may also be applied to date pickers. + + + + + +## Multiple Rows & Columns + +Use the `rows` and `columns` props to create multi-row and multi-column static layouts. + + + + + +```html + +``` + +## Responsive Layouts + +Previous to 3.0, `v-calendar` provided a `$screens` function out-of-the-box to help create computed properties based on the current screen size. To minimize package size and complexity, this built-in functionality has been removed. + +To reproduce this behavior, you can bind to computed `rows` or `columns` using your own logic, or install a 3rd-party plugin like [`vue-screen-utils`](https://github.com/nathanreyes/vue-screen-utils) that can create dynamic computed properties based on media queries or `ResizeObserver`. + +For this example, we can use the `mapCurrent` function exported by [`vue-screen-utils`](https://github.com/nathanreyes/vue-screen-utils) to display 2 `columns` for large screens. + + + + + +```vue + + +``` + +Next, for mobile layouts, we can expand the pane width to fill its container. + + + + + +```vue + + +``` + +Read more about [`vue-screen-utils`](https://github.com/nathanreyes/vue-screen-utils) for more options. \ No newline at end of file diff --git a/docs/calendar/navigation.md b/docs/calendar/navigation.md new file mode 100644 index 000000000..747a0489a --- /dev/null +++ b/docs/calendar/navigation.md @@ -0,0 +1,184 @@ +--- +title: 'Navigation' +sidebarDepth: 2 +--- + +# Navigation + +## User Interface + +### Header + +There are 2 primary methods for navigating the calendar within the header. + +1. Navigation arrows to move forwards and backwards by a given [`step`](#month-steps) amount. +2. Navigation popover to more easily skip to a specific month/year. + + + + + +```html + +``` + +### Month Steps + +By default, the calendar will navigate to the month following the last current displayed month when navigating forwards. Conversely, it will navigate to the month preceding the first month when navigating backwards. + +This default step amount is equal to the number of rows multiplied by the number of columns in a given layout (2 rows x 1 column = 2). + + + + + +However, the `step` prop can be used to configure a custom month interval. + +For example, instead of moving forward by 2 months in the previous example, we can instead force it move by 1 month. + + + + + +```html + +``` + +### Min & Max Dates + +If `min-date` or `max-date` props are assigned, this will disable navigation for the user beyond the dates provided. + +#### Min Date + + + + + +```html + +``` + +#### Max Date + + + + + +```html + +``` + +## Key Commands + + + A calendar day must be in focus in order for key commands to be recognized. + + +Both `VCalendar` and `VDatePicker` now support the following key commands for navigation: + +| Command | Action | +| --- | --- | +| **Left** | Move to the previous day | +| **Right** | Move to the next day | +| **Up** | Move to the previous week | +| **Down** | Move to the next week | +| **Home** | Move to the start of the current week | +| **End** | Move to the end of the current week | +| **PgUp** | Move to the same day of the previous month | +| **PgDown** | Move to the same day of the next month | +| ***Alt*** + **PgUp** | Move to the same month and day of the previous year | +| ***Alt*** + **PgDown** | Move to the same month and day of the next year | + +## *Move* Methods + +The base calendar component provides the `move` and `moveBy` methods that provide more flexible options not provided by the user interface or keyboard navigation. These methods are asynchronous which can be `await`ed when a transition is specified. + +```ts +type Move = async (target: MoveTarget, opts: MoveOptions) => Promise; +type MoveBy = async (pages: number, opts: MoveOptions) => Promise; + +type MoveTarget = Date | string | number | PageAddress; + +interface PageAddress { + day?: number; + week?: number; + month: number; + year: number; +} + +interface MoveOptions { + // Target position for multi-row or multi-column layouts. + // Negative numbers will offset from last position. + position: number; + // How the calendar animates to the new target + transition: 'none' | 'fade' | 'slide-v' | 'slide-h'; + // Force navigation even if the target is disabled + force: boolean; +} +``` + +### Move by number of pages + +Moves a given number of months forwards or backwards. + +Calling `moveBy(num)` with a **positive** number will move **forwards** by a given number of months. + +Calling `moveBy(num)` with a **negative** number will move **backwards** by a given number of months. + + + + + +```vue + + + +``` + +### Move to month + +Moves to a given month by calling `move(page)` with a page object with `month` and `year` keys. + +```js +// ... +// Moves to January, 1983 +await calendar.value.move({ month: 1, year: 1983 }) +``` + +### Move to a date + +Moves to a specified date. + +Calling `move(date)` with a **Date** object will move to that date. + +Calling `move(date)` with a **String** will move to the converted date. + +```js +// ... +// Moves to today's date +await calendar.value.move(new Date()) +// Moves to my birthday +await calendar.value.move(`1983-01-21`) +``` + + + + Calling `move(date)` will move to the month associated with that date. It will not focus on the date after the transition has occurred. To focus on the date, call `focusDate(date)` instead. + + + + + \ No newline at end of file diff --git a/docs/calendar/theme.md b/docs/calendar/theme.md new file mode 100644 index 000000000..c9799da3c --- /dev/null +++ b/docs/calendar/theme.md @@ -0,0 +1,276 @@ +# Theme + +VCalendar supports some basic helper props to avoid having to manually [override styles](#custom-styles). + +## Borderless + +Set the `borderless` prop to simple reset the border width and radius. + + + + + +```vue + +``` + +## Transparent + +Set the `transparent` prop to reset the background color. This prop should be used if embedding the calendar within another container. Most often, this prop should be set in combination with the `borderless` prop. + + + + + +```vue + +``` + +## Colors + +VCalendar ships with support for 10 colors: **gray**, **red**, **orange**, **yellow**, **green**, **teal**, **blue**, **indigo**, **purple**, **pink**. + +You can apply a theme color with the `color` prop. + + + + + +```vue + + +``` + +Colors may be added or customized using [CSS variables](#css-variables) + +## Dark Mode + +VCalendar supports a variety of dark mode strategies to ensure compatibility with your application. They are all configured by the `is-dark` prop. + +### Manual Strategy + +First, you can pass a boolean value for `isDark` to set the dark mode manually. + + + +By default, `is-dark` is `false`, so if left unassigned, the calendar will always display in light mode. + + + + +```vue + + +``` + +### System Preference Strategy + +When assigning `is-dark: "system"`, it will use the `Window.matchMedia()` API to apply the user's system preference. This setting is continually watched to detect future changes made by the user. + +For example, to view the effect on the Mac, you can navigate to **System Preferences › General** and switch the **Appearance** setting between `Light`, `Dark` and `Auto`. + + + +```vue + +``` + +### Class Strategy + +Finally, dark mode can be activated if a class is present on an element. + +For example, most calendars on this site sync with this site's dark mode by watching for the `dark` class on the `:root` element. + +To use the class strategy, pass an object with the element `selector` and `darkClass` to check against. Any class updates made on the element are watched with a `MutationObserver` to detect future changes made by the user. + + + + + +```html +