init

.browserslistrc

@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead

.editorconfig

@@ -0,0 +1,8 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+trim_trailing_whitespace = true
+insert_final_newline = true
+max_line_length = 100
+format_on_save = true

.env.development

@@ -0,0 +1,3 @@
+NODE_ENV=development
+
+

.env.production

@@ -0,0 +1 @@
+NODE_ENV=production

.env.testing

@@ -0,0 +1 @@
+NODE_ENV=production

.eslintignore

@@ -0,0 +1,11 @@
+build/
+node_modules/
+src/shims-tsx.d.ts
+src/shims-vue.d.ts
+*.config.js
+src/main.ts
+test/
+dist/*.hot-update.json
+dist/index.html
+dist/webpack-stats.json
+tests/

.eslintrc.js

@@ -0,0 +1,113 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: [
+    'plugin:@typescript-eslint/recommended-requiring-type-checking',
+    'plugin:vue/vue3-essential',
+    '@vue/airbnb',
+    '@vue/typescript/recommended',
+    '@vue/prettier',
+    '@vue/prettier/@typescript-eslint',
+  ],
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module',
+    project: './tsconfig.json',
+    createDefaultProgram: true,
+  },
+  plugins: ['@typescript-eslint'],
+  rules: {
+    'no-unused-vars': 'off',
+    'no-useless-constructor': 'off',
+    indent: 'off',
+    'no-tabs': 'error',
+    'max-len': [2, 140, 4, { ignoreUrls: true }],
+    'no-template-curly-in-string': 'error',
+    'prefer-arrow-callback': 'error',
+    'no-param-reassign': 'off',
+    'class-methods-use-this': 'off',
+    'import/prefer-default-export': 'off',
+    'comma-dangle': 'off',
+    'no-restricted-syntax': 'off',
+    'no-unused-expressions': ['warn', { allowShortCircuit: true, allowTernary: true }],
+    '@typescript-eslint/no-unused-vars': 'error',
+    '@typescript-eslint/no-useless-constructor': 'error',
+    '@typescript-eslint/default-param-last': 'error',
+    '@typescript-eslint/explicit-function-return-type': 'error',
+    '@typescript-eslint/no-empty-interface': 'warn',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-implied-eval': 'error',
+    '@typescript-eslint/no-inferrable-types': 'error',
+    '@typescript-eslint/no-unnecessary-boolean-literal-compare': 'error',
+    '@typescript-eslint/interface-name-prefix': 'off',
+    '@typescript-eslint/indent': ['error', 2],
+    '@typescript-eslint/naming-convention': [
+      'warn',
+      {
+        selector: 'parameter',
+        format: ['camelCase'],
+        leadingUnderscore: 'allow',
+      },
+
+      {
+        selector: 'memberLike',
+        modifiers: ['private'],
+        format: ['camelCase'],
+        leadingUnderscore: 'allow',
+      },
+
+      {
+        selector: 'typeLike',
+        format: ['PascalCase'],
+      },
+      {
+        selector: 'class',
+        format: ['PascalCase'],
+      },
+      {
+        selector: 'interface',
+        format: ['PascalCase'],
+        prefix: ['I'],
+      },
+      {
+        selector: 'enum',
+        format: ['PascalCase'],
+      },
+    ],
+    'require-jsdoc': [
+      'error',
+      {
+        require: {
+          FunctionDeclaration: true,
+          MethodDefinition: false,
+          ClassDeclaration: false,
+          ArrowFunctionExpression: false,
+          FunctionExpression: false,
+        },
+      },
+    ],
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+  },
+  settings: {
+    'import/extensions': ['.js', '.ts'],
+    'import/parsers': {
+      '@typescript-eslint/parser': ['.ts', '.tsx'],
+    },
+    'import/resolver': {
+      node: {
+        extensions: ['.js', '.jsx', '.ts', '.tsx', 'd.ts'],
+      },
+    },
+  },
+  overrides: [
+    {
+      files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
+      env: {
+        jest: true,
+      },
+    },
+  ],
+};

.gitignore

@@ -0,0 +1,29 @@
+.DS_Store
+node_modules
+
+# local env files
+.env.local
+.env.*.local
+.vscode
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+dist/assets
+dist/webpack-stats.json
+dist/index.html
+dist/favicon.ico
+dist/js/
+dist/img/
+dist/app-*.js
+dist/*.hot-update.js
+dist/*.hot-update.json
+.eslintcache

.prettierrc.json

@@ -0,0 +1,12 @@
+{
+  "printWidth": 120,
+  "tabWidth": 2,
+  "tabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "quoteProps": "as-needed",
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "arrowParens": "always"
+}

README.md

@@ -0,0 +1,181 @@
+# Vue 3 Datepicker
+
+A datepicker Vue component. Compatible with Vue 3 Only
+
+- [Install](#install)
+- [Usage](#usage)
+- [Date Formatting](#date-formatting)
+- [Props](#available-props)
+- [Events](#events)
+- [Disabled dates](#disabled-dates)
+- [Highlighted dates](#highlighted-dates)
+
+To view demo examples locally clone the repo and run `npm install && npm run serve`
+
+## Install
+
+``` bash
+npm install vuejs3-datepicker --save
+
+yarn add vuejs3-datepicker
+```
+
+``` javascript
+import Datepicker from 'vuejs3-datepicker';
+
+export default {
+  // ...
+  components: {
+    Datepicker
+  }
+  // ...
+}
+```
+
+## Usage
+
+``` html
+<datepicker></datepicker>
+```
+
+*value* prop if passed should be a Date object
+
+``` html
+<script>
+var state = {
+  date: new Date(2016, 9,  16)
+}
+</script>
+<datepicker :value="state.date"></datepicker>
+```
+support name attribute for normal html form submission
+``` html
+<datepicker :value="state.date" name="uniquename"></datepicker>
+```
+Using `v-model`
+``` html
+<datepicker v-model="state.date" name="uniquename"></datepicker>
+```
+Emits events
+``` html
+<datepicker @selected="doSomethingInParentComponentFunction" @opened="datepickerOpenedFunction" @closed="datepickerClosedFunction">
+```
+Inline always open version
+``` html
+<datepicker :inline="true"></datepicker>
+```
+Programtic Acess of value of datepicker
+```html
+<datepicker ref="inputRef" :autoValidate="true" @selected="handleSelectDate" :disabled-dates="disabledDates" :highlighted="highlightDates" :value="emptyDate" @closed="handleCalendarClose" :validations="validations" ></datepicker>
+```
+```javascript
+const isValid = (inputRef.value as any).isValid();
+const { selectedDate } = (inputRef.value  as any).value; 
+```
+
+## Available props
+
+| Prop                          | Type            | Default     | Description                              |
+|-------------------------------|-----------------|-------------|------------------------------------------|
+| modelValue                    | Date\|String    |             | Date value of the datepicker             |
+| value                         | Date\|String    |             | Date value of the datepicker             |
+| format                        | String\|Function| dd MMM yyyy | Date formatting string or function       |
+| full-month-name               | Boolean         | false       | To show the full month name              |
+| disabled-dates                | Object          |             | See below for configuration              |
+| placeholder                   | String          |             | Input placeholder text                   |
+| inline                        | Boolean         |             | To show the datepicker always open       |
+| calendar-class                | String\|Object  |             | CSS class applied to the calendar el     |
+| input-class                   | String\|Object  |             | CSS class applied to the input el        |
+| wrapper-class                 | String\|Object  |             | CSS class applied to the outer div       |
+| monday-first                  | Boolean         | false       | To start the week on Monday              |
+| clear-button                  | Boolean         | false       | Show an icon for clearing the date       |
+| clear-button-icon             | String          |             | Use icon for button (ex: fa fa-times)    |
+| calendar-button               | Boolean         | false       | Show an icon that that can be clicked    |
+| calendar-button-icon          | String          |             | Use icon for button (ex: fa fa-calendar) |
+| calendar-button-icon-content  | String          |             | Use for material-icons (ex: event)       |
+| day-cell-content              | Function        |             | Use to render custom content in day cell |
+| initial-view                  | String          | minimumView | If set, open on that view                |
+| disabled                      | Boolean         | false       | If true, disable Datepicker on screen    |
+| required                      | Boolean         | false       | Sets html required attribute on input    |
+| typeable                      | Boolean         | false       | If true, allow the user to type the date |
+| use-utc                       | Boolean         | false       | use UTC for time calculations            |
+| open-date                     | Date\|String    |             | If set, open on that date                |
+| minimum-view                  | String          | 'day'       | If set, lower-level views won't show     |
+| maximum-view                  | String          | 'year'      | If set, higher-level views won't show    |
+| autovalidate                  | Boolean         | false       | Basic Date Validtion on Blur             |
+| validations                   | Array           |             | Accepts an Array of Objects [{'name':'required', message: 'custom Message'}]|
+
+
+## Events
+
+These events are emitted on actions in the datepicker
+
+| Event             | Output     | Description                          |
+|-------------------|------------|--------------------------------------|
+| opened            |            | The picker is opened                 |
+| closed            |            | The picker is closed                 |
+| selected          | Date\|null | A date has been selected             |
+| input             | Date\|null | Input value has been modified        |
+| cleared           |            | Selected date has been cleared       |
+| changed-month     | Object     | Month page has been changed          |
+| changed-year      | Object     | Year page has been changed           |
+| changed-decade    | Object     | Decade page has been changed         |
+
+
+#### Function formatter
+
+Delegates date formatting to provided function.
+Function will be called with date and it has to return formated date as a string.
+This allow us to use moment, date-fns, globalize or any other library to format date.
+
+``` html
+<script>
+  methods: {
+    customFormatter(date) {
+      return format(new Date(), 'YYYY-mm-dd');
+    }
+  }
+</script>
+<datepicker :format="customFormatter"></datepicker>
+```
+
+## Disabled Dates
+Dates can be disabled in a number of ways.
+
+``` html
+<script>
+var state = {
+  disabledDates: {
+    to: new Date(2016, 0, 5), // Disable all dates up to specific date
+    from: new Date(2016, 0, 26), // Disable all dates after specific date
+    
+    dates: [ // Disable an array of dates
+      new Date(2016, 9, 16),
+      new Date(2016, 9, 17),
+      new Date(2016, 9, 18)
+    ]
+  }
+}
+</script>
+<datepicker :disabled-dates="state.disabledDates"></datepicker>
+```
+
+## Highlighted Dates
+``` html
+<script>
+var state = {
+  highlighted: {
+    to: new Date(2016, 0, 5), // Highlight all dates up to specific date
+    from: new Date(2016, 0, 26), // Highlight all dates after specific date
+    dates: [ // Highlight an array of dates
+      new Date(2016, 9, 16),
+      new Date(2016, 9, 17),
+      new Date(2016, 9, 18)
+    ]
+    },
+    includeDisabled: true // Highlight disabled dates
+  }
+}
+</script>
+<datepicker :highlighted="state.highlighted"></datepicker>
+```

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['@babel/preset-typescript', '@babel/preset-env'],
+};