├── .babelrc ├── .circleci └── config.yml ├── .eslintignore ├── .eslintrc ├── .gitignore ├── .npmignore ├── .prettierignore ├── .prettierrc ├── LICENSE ├── README.md ├── package.json ├── src ├── app.vue ├── components │ └── DatetimePicker.vue ├── index.html ├── index.js ├── main.js ├── plugins │ └── vuetify.js └── stylus │ ├── DatetimePicker.styl │ └── main.styl └── webpack ├── webpack.base.config.js ├── webpack.build.config.js ├── webpack.dev.config.js └── webpack.docs.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [["@babel/preset-env"]] 3 | } 4 | -------------------------------------------------------------------------------- /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | defaults: &defaults 3 | working_directory: ~/workspace 4 | docker: 5 | - image: circleci/node:10.16.3 6 | 7 | jobs: 8 | build: 9 | <<: *defaults 10 | steps: 11 | - run: echo "$PUBLIC_REGISTRY:_authToken=$PUBLIC_REGISTRY_TOKEN" >> ~/.npmrc 12 | - checkout 13 | - run: yarn install 14 | - run: yarn deploy 15 | docs-deploy: 16 | <<: *defaults 17 | steps: 18 | - add_ssh_keys: 19 | fingerprints: 20 | - '17:16:87:45:9e:a8:89:a1:c2:ed:62:72:7b:dc:fa:ed' 21 | - checkout 22 | - run: yarn install 23 | - run: yarn docs 24 | - run: yarn global add gh-pages 25 | - run: git config user.email "circleci@circleci.com" 26 | - run: git config user.name "circleci" 27 | - run: npx gh-pages --dist docs 28 | workflows: 29 | version: 2 30 | 31 | btd: 32 | jobs: 33 | - build: 34 | context: NPM 35 | - docs-deploy 36 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | dist 2 | doc 3 | node_modules 4 | webpack -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es6": true, 5 | "node": true 6 | }, 7 | "extends": ["plugin:vue/essential", "standard"], 8 | "globals": { 9 | "Atomics": "readonly", 10 | "SharedArrayBuffer": "readonly" 11 | }, 12 | "parserOptions": { 13 | "ecmaVersion": 2018, 14 | "sourceType": "module" 15 | }, 16 | "plugins": ["vue"], 17 | "rules": { 18 | "quotes": ["error", "single"], 19 | "indent": ["error", 2], 20 | "space-before-function-paren": 0 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | docs/ 2 | dist/ 3 | .idea/ 4 | package-lock.json 5 | yarn.lock 6 | 7 | # Logs 8 | logs 9 | *.log 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Runtime data 15 | pids 16 | *.pid 17 | *.seed 18 | *.pid.lock 19 | 20 | # Directory for instrumented libs generated by jscoverage/JSCover 21 | lib-cov 22 | 23 | # Coverage directory used by tools like istanbul 24 | coverage 25 | 26 | # nyc test coverage 27 | .nyc_output 28 | 29 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 30 | .grunt 31 | 32 | # Bower dependency directory (https://bower.io/) 33 | bower_components 34 | 35 | # node-waf configuration 36 | .lock-wscript 37 | 38 | # Compiled binary addons (http://nodejs.org/api/addons.html) 39 | build/Release 40 | 41 | # Dependency directories 42 | node_modules/ 43 | jspm_packages/ 44 | 45 | # Typescript v1 declaration files 46 | typings/ 47 | 48 | # Optional npm cache directory 49 | .npm 50 | 51 | # Optional eslint cache 52 | .eslintcache 53 | 54 | # Optional REPL history 55 | .node_repl_history 56 | 57 | # Output of 'npm pack' 58 | *.tgz 59 | 60 | # Yarn Integrity file 61 | .yarn-integrity 62 | 63 | # dotenv environment variables file 64 | .env 65 | 66 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | /.circleci 2 | /.idea 3 | /docs 4 | /node_modules 5 | /webpack 6 | .editorconfig 7 | .eslintignore 8 | .eslintrc 9 | .npmignore 10 | *.tgz 11 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | .idea/ 2 | dist/ 3 | docs/ 4 | node_modules/ 5 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 120, 3 | "tabWidth": 2, 4 | "semi": false, 5 | "singleQuote": true 6 | } 7 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Darren Fang 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vuetify-datetime-picker 2 | 3 | [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/darrenfang/vuetify-datetime-picker/blob/master/LICENSE) 4 | [![npm version](https://img.shields.io/npm/v/vuetify-datetime-picker.svg?style=flat)](https://www.npmjs.com/package/vuetify-datetime-picker) 5 | [![CircleCI](https://img.shields.io/circleci/project/github/darrenfang/vuetify-datetime-picker.svg)](https://circleci.com/gh/darrenfang/vuetify-datetime-picker) 6 | 7 | DatetimePicker component for Vuetify.js. 8 | 9 | [Online Demo](http://darrenfang.github.io/vuetify-datetime-picker/ 'Online Demo') 10 | 11 | [Demo Source Code](https://github.com/darrenfang/vuetify-datetime-picker/blob/master/src/app.vue 'Demo Source Code') 12 | 13 | ## Installation 14 | 15 | ```shell 16 | npm install --save vuetify-datetime-picker 17 | 18 | or 19 | 20 | yarn add vuetify-datetime-picker 21 | ``` 22 | 23 | ```js 24 | import Vue from 'vue' 25 | import DatetimePicker from 'vuetify-datetime-picker' 26 | // (Optional) import 'vuetify-datetime-picker/src/stylus/main.styl' 27 | 28 | Vue.use(DatetimePicker) 29 | ``` 30 | 31 | If use the `main.styl`, you should configure the `stylus-loader` in `webpack.config.js`, or just ignore this style sheet. 32 | 33 | ## Usage 34 | 35 | Once installed, it can be used in a template as simply as: 36 | 37 | ```html 38 | 39 | ``` 40 | 41 | ## Properties 42 | 43 | | Name | Type | Default Value | Description | 44 | | ---------------- | ----------- | ------------- | ----------------------------------------------------------------------------------------------------------- | 45 | | datetime (model) | Date/String | | Time picker model. | 46 | | disabled | Boolean | false | Input is disabled. | 47 | | loading | Boolean | false | Input is loading. | 48 | | label | string | | Sets input label. | 49 | | dialogWidth | Number | 340 | The width of the dialog. | 50 | | dateFormat | string | yyyy-MM-dd | Defines the format of a date. | 51 | | timeFormat | string | HH:mm | Defines the format of a time. | 52 | | clearText | string | CLEAR | Sets the text of the clear button. | 53 | | okText | string | OK | Sets the text of the ok button. | 54 | | textFieldProps | Object | | Text fields properties. See [Vuetify Docs](https://vuetifyjs.com/en/components/text-fields 'Vuetify Docs') | 55 | | datePickerProps | Object | | Date pickers properties.See [Vuetify Docs](https://vuetifyjs.com/en/components/date-pickers 'Vuetify Docs') | 56 | | timePickerProps | Object | | Time pickers properties.See [Vuetify Docs](https://vuetifyjs.com/en/components/time-pickers 'Vuetify Docs') | 57 | 58 | ## Events 59 | 60 | | Name | Arguments | Description | 61 | | ----- | ------------------- | ----------------------- | 62 | | input | value (Date/String) | The updated bound model | 63 | 64 | ## Slots 65 | 66 | | Name | Description | 67 | | -------- | ------------------------------------------------------------------------------------------- | 68 | | dateIcon | Slot to put custom icon in the date tab. | 69 | | timeIcon | Slot to put custom icon in the time tab. | 70 | | actions | Slot to put custom buttons in the dialog. | 71 | | progress | Slot for custom progress linear (displayed when loading prop is not equal to Boolean False) | 72 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vuetify-datetime-picker", 3 | "version": "2.1.1", 4 | "description": "DatetimePicker component for Vuetify.js.", 5 | "main": "src/index.js", 6 | "scripts": { 7 | "dev": "webpack-dev-server --config webpack/webpack.dev.config.js", 8 | "build": "webpack --config webpack/webpack.build.config.js --progress --profile --colors", 9 | "deploy": "npm run build && npm publish --registry https://registry.npmjs.org/", 10 | "docs": "webpack --config webpack/webpack.docs.config.js --progress --profile --colors" 11 | }, 12 | "author": "Darren Fang ", 13 | "license": "MIT", 14 | "repository": { 15 | "type": "git", 16 | "url": "git+https://github.com/darrenfang/vuetify-datetime-picker" 17 | }, 18 | "devDependencies": { 19 | "@babel/core": "^7.5.5", 20 | "@babel/preset-env": "^7.5.5", 21 | "@fortawesome/fontawesome-free": "^5.10.1", 22 | "babel-loader": "^8.0.6", 23 | "clean-webpack-plugin": "^3.0.0", 24 | "css-loader": "^3.2.0", 25 | "deepmerge": "^4.0.0", 26 | "eslint": "^6.1.0", 27 | "eslint-config-standard": "^13.0.1", 28 | "eslint-loader": "^2.2.1", 29 | "eslint-plugin-import": "^2.18.2", 30 | "eslint-plugin-node": "^9.1.0", 31 | "eslint-plugin-promise": "^4.2.1", 32 | "eslint-plugin-standard": "^4.0.0", 33 | "eslint-plugin-vue": "^5.2.3", 34 | "fibers": "^4.0.1", 35 | "file-loader": "^4.2.0", 36 | "html-webpack-plugin": "^3.2.0", 37 | "less-loader": "^5.0.0", 38 | "prettier": "1.18.2", 39 | "sass": "^1.22.10", 40 | "sass-loader": "^7.2.0", 41 | "stylus": "^0.54.5", 42 | "stylus-loader": "^3.0.2", 43 | "url-loader": "^2.1.0", 44 | "vue-loader": "^15.7.1", 45 | "vue-style-loader": "^4.1.2", 46 | "vue-template-compiler": "^2.6.10", 47 | "vuetify-loader": "^1.3.0", 48 | "webpack": "^4.39.2", 49 | "webpack-cli": "^3.3.6", 50 | "webpack-dev-server": "^3.8.0", 51 | "webpack-merge": "^4.2.1" 52 | }, 53 | "dependencies": { 54 | "date-fns": "^2.1.0", 55 | "vue": "^2.6.10", 56 | "vuetify": "^2.1.3" 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /src/app.vue: -------------------------------------------------------------------------------- 1 | 153 | 154 | 178 | -------------------------------------------------------------------------------- /src/components/DatetimePicker.vue: -------------------------------------------------------------------------------- 1 | 58 | 59 | 202 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 25 | 26 | 27 | 28 | 29 | <%= htmlWebpackPlugin.options.title %> 30 | 31 | 32 | 36 | 37 | 38 |
39 | 40 | 41 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | * MIT License 3 | * 4 | * Copyright (c) 2018 Darren Fang 5 | * 6 | * Permission is hereby granted, free of charge, to any person obtaining a copy 7 | * of this software and associated documentation files (the "Software"), to deal 8 | * in the Software without restriction, including without limitation the rights 9 | * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | * copies of the Software, and to permit persons to whom the Software is 11 | * furnished to do so, subject to the following conditions: 12 | * 13 | * The above copyright notice and this permission notice shall be included in all 14 | * copies or substantial portions of the Software. 15 | * 16 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 22 | * SOFTWARE. 23 | * 24 | */ 25 | 26 | import DatetimePicker from './components/DatetimePicker' 27 | 28 | const install = Vue => { 29 | Vue.component('v-datetime-picker', DatetimePicker) 30 | } 31 | 32 | export default install 33 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import 'vuetify/src/styles/main.sass' 2 | import './stylus/main.styl' 3 | import Vue from 'vue' 4 | import vuetify from './plugins/vuetify' // path to vuetify export 5 | import App from './app' 6 | 7 | new Vue({ 8 | vuetify, 9 | render: h => h(App) 10 | }).$mount('#app') 11 | -------------------------------------------------------------------------------- /src/plugins/vuetify.js: -------------------------------------------------------------------------------- 1 | /* 2 | * MIT License 3 | * 4 | * Copyright (c) 2018 Darren Fang 5 | * 6 | * Permission is hereby granted, free of charge, to any person obtaining a copy 7 | * of this software and associated documentation files (the "Software"), to deal 8 | * in the Software without restriction, including without limitation the rights 9 | * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | * copies of the Software, and to permit persons to whom the Software is 11 | * furnished to do so, subject to the following conditions: 12 | * 13 | * The above copyright notice and this permission notice shall be included in all 14 | * copies or substantial portions of the Software. 15 | * 16 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 22 | * SOFTWARE. 23 | * 24 | */ 25 | 26 | import Vue from 'vue' 27 | import Vuetify from 'vuetify/lib' 28 | import DatetimePicker from '../index' 29 | 30 | Vue.use(Vuetify) 31 | Vue.use(DatetimePicker) 32 | 33 | export default new Vuetify({ 34 | theme: { 35 | dark: true 36 | } 37 | }) 38 | -------------------------------------------------------------------------------- /src/stylus/DatetimePicker.styl: -------------------------------------------------------------------------------- 1 | .v-time-picker-custom 2 | .v-picker__title 3 | height 84px 4 | padding-top 10px 5 | -------------------------------------------------------------------------------- /src/stylus/main.styl: -------------------------------------------------------------------------------- 1 | @import "DatetimePicker.styl" 2 | -------------------------------------------------------------------------------- /webpack/webpack.base.config.js: -------------------------------------------------------------------------------- 1 | const { join } = require('path') 2 | const { CleanWebpackPlugin } = require('clean-webpack-plugin') 3 | const VueLoaderPlugin = require('vue-loader/lib/plugin') 4 | 5 | const resolve = dir => join(__dirname, '..', dir) 6 | 7 | module.exports = { 8 | output: { 9 | filename: 'bundle.js', 10 | path: resolve('dist'), 11 | publicPath: '/' 12 | }, 13 | module: { 14 | rules: [ 15 | { 16 | test: /\.(css)$/, 17 | loader: 'vue-style-loader!css-loader' 18 | }, 19 | { 20 | test: /\.(styl)$/, 21 | loader: 'vue-style-loader!css-loader!stylus-loader' 22 | }, 23 | { 24 | test: /\.(less)$/, 25 | loader: 'vue-style-loader!css-loader!less-loader' 26 | }, 27 | { 28 | test: /\.s(c|a)ss$/, 29 | use: [ 30 | 'vue-style-loader', 31 | 'css-loader', 32 | { 33 | loader: 'sass-loader', 34 | options: { 35 | implementation: require('sass'), 36 | fiber: require('fibers'), 37 | indentedSyntax: true // optional 38 | } 39 | } 40 | ] 41 | }, 42 | { 43 | enforce: 'pre', 44 | test: /\.js$/, 45 | exclude: /node_modules/, 46 | loader: 'eslint-loader' 47 | }, 48 | { 49 | test: /\.js$/, 50 | exclude: /node_modules/, 51 | use: { 52 | loader: 'babel-loader' 53 | } 54 | }, 55 | { 56 | enforce: 'pre', 57 | test: /\.vue$/, 58 | loader: 'eslint-loader', 59 | exclude: /node_modules/ 60 | }, 61 | { 62 | test: /\.vue$/, 63 | loader: 'vue-loader' 64 | }, 65 | { 66 | test: /\.(eot|svg|ttf|woff|woff2)$/, 67 | loader: 'file-loader', 68 | query: { 69 | name: 'font/[hash:8].[ext]' 70 | } 71 | }, 72 | { 73 | test: /\.(png|jpg|gif|svg)$/, 74 | loader: 'url-loader', 75 | query: { 76 | limit: 10000, 77 | name: 'img/[hash:8].[ext]' 78 | } 79 | } 80 | ] 81 | }, 82 | plugins: [new CleanWebpackPlugin(), new VueLoaderPlugin()], 83 | resolve: { 84 | extensions: ['.js', '.vue', '.json', '.css', '.less', '.styl'], 85 | modules: [resolve('src'), 'node_modules'], 86 | alias: { 87 | '~src': resolve('src'), 88 | '~components': resolve('src/components'), 89 | '~pages': resolve('src/pages'), 90 | '~assets': resolve('src/assets'), 91 | '~store': resolve('src/store'), 92 | '~static': resolve('src/static') 93 | } 94 | } 95 | } 96 | -------------------------------------------------------------------------------- /webpack/webpack.build.config.js: -------------------------------------------------------------------------------- 1 | const { join } = require('path') 2 | const merge = require('webpack-merge') 3 | const basicConfig = require('./webpack.base.config') 4 | 5 | const resolve = dir => join(__dirname, '..', dir) 6 | 7 | module.exports = merge(basicConfig, { 8 | mode: 'production', 9 | devtool: 'source-map', 10 | entry: { 11 | app: './src/index.js' 12 | }, 13 | output: { 14 | path: resolve('dist'), 15 | filename: 'index.js', 16 | library: 'VuetifyDatetimePicker', 17 | libraryTarget: 'umd', 18 | umdNamedDefine: true, 19 | globalObject: `(typeof self !== 'undefined' ? self : this)`, 20 | libraryExport: 'default' 21 | }, 22 | externals: { 23 | 'date-fns': 'date-fns' 24 | } 25 | }) 26 | -------------------------------------------------------------------------------- /webpack/webpack.dev.config.js: -------------------------------------------------------------------------------- 1 | const { join } = require('path') 2 | const webpack = require('webpack') 3 | const merge = require('webpack-merge') 4 | const basicConfig = require('./webpack.base.config') 5 | const HtmlWebpackPlugin = require('html-webpack-plugin') 6 | const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin') 7 | 8 | const resolve = dir => join(__dirname, '..', dir) 9 | 10 | module.exports = merge(basicConfig, { 11 | mode: 'development', 12 | entry: { 13 | app: './src/main.js' 14 | }, 15 | devtool: 'inline-source-map', 16 | devServer: { 17 | contentBase: resolve('dist'), 18 | compress: false, 19 | hot: true, 20 | inline: true 21 | }, 22 | plugins: [ 23 | new webpack.HotModuleReplacementPlugin(), 24 | new VuetifyLoaderPlugin(), 25 | new HtmlWebpackPlugin({ 26 | filename: 'index.html', 27 | template: 'src/index.html', 28 | inject: true, 29 | title: 'vuetify-datetime-picker Demo' 30 | }) 31 | ] 32 | }) 33 | -------------------------------------------------------------------------------- /webpack/webpack.docs.config.js: -------------------------------------------------------------------------------- 1 | /* 2 | * MIT License 3 | * 4 | * Copyright (c) 2018 Darren Fang 5 | * 6 | * Permission is hereby granted, free of charge, to any person obtaining a copy 7 | * of this software and associated documentation files (the "Software"), to deal 8 | * in the Software without restriction, including without limitation the rights 9 | * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | * copies of the Software, and to permit persons to whom the Software is 11 | * furnished to do so, subject to the following conditions: 12 | * 13 | * The above copyright notice and this permission notice shall be included in all 14 | * copies or substantial portions of the Software. 15 | * 16 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 22 | * SOFTWARE. 23 | * 24 | */ 25 | 26 | const { join } = require('path') 27 | const merge = require('webpack-merge') 28 | const basicConfig = require('./webpack.base.config') 29 | const HtmlWebpackPlugin = require('html-webpack-plugin') 30 | const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin') 31 | 32 | const resolve = dir => join(__dirname, '..', dir) 33 | 34 | module.exports = merge(basicConfig, { 35 | mode: 'production', 36 | devtool: 'source-map', 37 | entry: { 38 | app: './src/main.js' 39 | }, 40 | output: { 41 | path: resolve('docs'), 42 | publicPath: './', 43 | filename: 'index.js', 44 | library: 'VuetifyDatetimePicker', 45 | libraryTarget: 'umd', 46 | umdNamedDefine: true, 47 | globalObject: `(typeof self !== 'undefined' ? self : this)`, 48 | libraryExport: 'default' 49 | }, 50 | plugins: [ 51 | new VuetifyLoaderPlugin(), 52 | new HtmlWebpackPlugin({ 53 | filename: 'index.html', 54 | template: 'src/index.html', 55 | inject: true, 56 | title: 'vuetify-datetime-picker Demo' 57 | }) 58 | ] 59 | }) 60 | --------------------------------------------------------------------------------