{"_id":"@angelioputra/midnight","_rev":"25-fbe6b276375215a854dd14d0a6730c9e","time":{"0.0.0":"2020-02-12T09:50:40.013Z","0.0.1":"2020-02-12T09:50:40.013Z","0.1.0":"2020-02-12T09:50:40.013Z","0.2.0":"2020-02-12T09:50:40.013Z","0.2.1":"2020-02-12T09:50:40.013Z","0.3.0":"2020-02-12T09:50:40.013Z","0.3.1":"2020-02-12T09:50:40.013Z","0.3.10":"2020-02-12T09:50:40.013Z","0.3.11":"2020-02-12T09:50:40.013Z","0.3.13":"2020-02-12T09:50:40.013Z","0.3.14":"2020-02-12T09:50:40.013Z","0.3.15":"2020-02-12T09:50:40.013Z","0.3.16":"2020-02-12T09:50:40.013Z","0.3.2":"2020-02-12T09:50:40.013Z","0.3.3":"2020-02-12T09:50:40.013Z","0.3.4":"2020-02-12T09:50:40.013Z","0.3.5":"2020-02-12T09:50:40.013Z","0.3.6":"2020-02-12T09:50:40.013Z","0.3.7":"2020-02-12T09:50:40.013Z","0.3.8":"2020-02-12T09:50:40.013Z","0.3.9":"2020-02-12T09:50:40.013Z","created":"2020-02-12T09:54:15.540Z","0.4.0":"2020-02-12T09:54:15.764Z","modified":"2022-04-04T14:05:45.576Z","0.5.0":"2020-02-25T16:09:53.925Z"},"name":"@angelioputra/midnight","dist-tags":{"latest":"0.5.0"},"versions":{"0.4.0":{"name":"@angelioputra/midnight","version":"0.4.0","description":"Vue Design System is an open-source tool for building Design Systems with Vue.js","author":{"name":"Angelio","email":"angelio@member.id"},"main":"dist/system/system.js","homepage":"https://vueds.com","private":false,"license":"MIT","scripts":{"dev":"webpack-dev-server --inline --config ./build/webpack.dev.conf.js","start":"npm-run-all --parallel styleguide theo:onchange theo dev","unit":"jest --config ./test/unit/jest.conf.js --coverage","build":"npm-run-all theo node:build","build:app":"npm run build","build:system":"npm-run-all theo node:build:system","build:docs":"npm-run-all theo styleguide:build","lint":"eslint '**/*.{js,vue}' --cache","node:build":"node ./build/build.js","node:build:system":"node ./build/build-system.js","styleguide":"vue-styleguidist server --open --config ./config/docs.config.js","styleguide:build":"vue-styleguidist build --config ./config/docs.config.js","theo":"theo ./src/tokens/tokens.yml --transform web --format map.scss,scss,raw.json,json --dest ./src/assets/tokens","theo:onchange":"onchange \"./src/tokens/*.yml\" -- npm run theo","test":"npm-run-all theo unit"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"repository":{"type":"git","url":"git+https://github.com/angelioputra/midnight.git"},"keywords":["vue design system","design system","vue.js","vue","design","system"],"babel":{"presets":["@babel/preset-env"],"plugins":["@babel/plugin-syntax-dynamic-import","@babel/plugin-proposal-class-properties","@babel/plugin-proposal-object-rest-spread","@babel/plugin-transform-runtime"],"env":{"test":{"presets":["@babel/preset-env"],"plugins":["@babel/plugin-syntax-dynamic-import","@babel/plugin-proposal-class-properties","@babel/plugin-proposal-object-rest-spread"]}}},"eslintConfig":{"extends":["eslint:recommended","plugin:vue/essential"],"env":{"browser":true,"node":true},"rules":{"indent":["error",2],"vue/no-unused-vars":"error","quotes":["error","double"],"no-extra-semi":"off","semi":["error","never"],"semi-style":["error","last"],"no-console":"off"},"parserOptions":{"sourceType":"module","ecmaVersion":8,"ecmaFeatures":{"jsx":true}}},"dependencies":{"lodash":"^4.17.11","mini-css-extract-plugin":"^0.4.5","postcss-import":"^12.0.1","postcss-loader":"^3.0.0","postcss-safe-parser":"^4.0.1","postcss-url":"^8.0.0","tinycolor2":"^1.4.1","vue":"^2.5.17","vue-lodash":"^2.0.0","vue-meta":"^1.5.6","vue-router":"^3.0.2","vuex":"^3.0.1","webfontloader":"^1.6.28"},"devDependencies":{"@babel/cli":"^7.1.5","@babel/core":"^7.1.6","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-object-rest-spread":"^7.0.0","@babel/plugin-syntax-dynamic-import":"^7.0.0","@babel/plugin-transform-runtime":"^7.1.0","@babel/preset-env":"^7.1.6","@babel/register":"^7.0.0","@vue/test-utils":"^1.0.0-beta.26","autoprefixer":"^9.4.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","babel-loader":"^8.0.4","chalk":"^2.4.1","codemirror":"^5.42.0","compression-webpack-plugin":"^2.0.0","copy-webpack-plugin":"^4.6.0","css-loader":"^1.0.1","eslint":"^5.9.0","eslint-plugin-compat":"^2.6.3","eslint-plugin-es5":"^1.3.1","eslint-plugin-import":"^2.14.0","eslint-plugin-vue":"^4.7.1","file-loader":"^2.0.0","friendly-errors-webpack-plugin":"^1.7.0","html-loader":"^0.5.5","html-webpack-plugin":"^3.2.0","http-proxy-middleware":"^0.19.1","husky":"^1.2.0","jest":"^23.6.0","jest-serializer-vue":"^2.0.2","node-notifier":"^5.3.0","node-sass":"^4.10.0","npm-run-all":"^4.1.5","onchange":"^5.1.3","optimize-css-assets-webpack-plugin":"^5.0.1","ora":"^3.0.0","portfinder":"^1.0.20","prettier":"^1.15.3","pretty-quick":"^1.8.0","rimraf":"^2.6.0","sass-loader":"^7.1.0","sass-resources-loader":"^2.0.0","semver":"^5.6.0","shelljs":"^0.8.3","style-loader":"^0.23.1","terser-webpack-plugin":"^1.1.0","theo":"^8.0.1","url-loader":"^1.1.2","vue-jest":"^3.0.1","vue-loader":"^15.4.2","vue-style-loader":"^4.1.2","vue-styleguidist":"^2.0.2","vue-template-compiler":"^2.5.17","webpack":"^4.26.1","webpack-bundle-analyzer":"^3.0.3","webpack-cli":"^3.1.2","webpack-dev-server":"^3.1.10","webpack-merge":"^4.1.4","webpack-merge-and-include-globally":"^2.1.7"},"engines":{"node":">= 8.6.0","npm":">= 3.0.0"},"browserslist":["> 1%","last 2 versions","not Explorer > 0","IE 11","not ExplorerMobile > 0","not BlackBerry > 0","not OperaMini all","not OperaMobile > 0"],"gitHead":"72b11d4e0f3b9c1d04606cf7b6e7feefd21a1ba2","bugs":{"url":"https://github.com/angelioputra/midnight/issues"},"_id":"@angelioputra/midnight@0.4.0","_nodeVersion":"10.15.1","_npmVersion":"6.13.3","dist":{"integrity":"sha512-t3BMrMk4xYsM5TE3rTEcy3oL76RlwtdVf2VIyxcHNTfyJ8KrfDlJMkE9eYfi4Oi1GewlOXfVOWW9p2KcUOSuaA==","shasum":"a7a8220f3de62214d1a6c5f52a599bbfff2f58d4","tarball":"https://registry.npmjs.org/@angelioputra/midnight/-/midnight-0.4.0.tgz","fileCount":14,"unpackedSize":65387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQ8tICRA9TVsSAnZWagAAz0MP/AolXLSvhhU3wO/KtCxg\neC4/58fOq7E4/gFRh4Pg8j9ONL9RZ33mRBCIwRaQuelWHKbqapM1kny6J+BA\nRkT2YbJ7FdNKQD9TZ8TD+Z1I7ZLFvOALBWBiVk+MwqeMg1vUA3Ce4HMdgekB\nJ+AjYOJzbA9kob/HaCxWthFJfCGr4euMCBD73q9qnAKTQjLcD5Us73bn+gX8\n5yTKzR/gX/SUlrAU1ILqXXqaarOno7NWSoziRFcQwlxtVObYA7uE6crezA3m\nCgUq+39FUYcqO5bKBnQqnPiuOgTwiqif1KGC11CvaM+zjfFwcmzqTurbRMjs\nzCWhaWnPnMskQ2XT/AZ7bQgIVQtzTM9PE85120lhzaAFFjNqaID+Lb+uU3nS\n5aAOx1RfHPsUGc1B7I45MCK7QTW5KjlwkXiAfMSYi/CLFfcIXXBGNzQdMiHb\neRNQdXbdkzlST8jSI6zs04lS3saAGcweh08zE+Si9vrM94eCamCAQQ+oK1ma\nYnUdEGEnu4idjyBhU7j4ndezJe18Vbm+fI+tx0/QnP0ePupvPZGGd/JMRZ+O\nHYmarMHy19h24fGFx/Y6UmMyyyMj2FJuRyUl7o867oefe76NM8w1v31PMCee\nnup/TZN8m5lm4EUUzKGZ6LO3T3nG/fWjz5mLDb4fpRf5Or1H99n4PvsLWAM6\nfcCE\r\n=ZkgX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF3iEuV2lhyatkSYd+vjJ6cmuI4OvOuxojNelKoBtB+7AiBg6geKMh8/H2d4Vv6qj8ddHf+QTWoKoegr01cHlQJstA=="}]},"maintainers":[{"name":"angelioputra","email":"putralio.angelos@gmail.com"}],"_npmUser":{"name":"angelioputra","email":"putralio.angelos@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/midnight_0.4.0_1581501255590_0.744857323557301"},"_hasShrinkwrap":false},"0.5.0":{"name":"@angelioputra/midnight","version":"0.5.0","description":"Vue Design System is an open-source tool for building Design Systems with Vue.js","author":{"name":"Angelio","email":"angelio@member.id"},"homepage":"https://vueds.com","private":false,"license":"MIT","scripts":{"build":"vue-cli-service build --report --target lib --name my-lib ./src/index.js","lint":"vue-cli-service lint","docs:build":"vuepress build docs","docs:dev":"vuepress dev docs","storybook:serve":"start-storybook -p 6006 -c storybook","storybook:build":"build-storybook -c storybook"},"main":"dist/my-lib.umd.min.js","dependencies":{"lodash":"^4.17.15","vue":"^2.6.11"},"devDependencies":{"@babel/core":"^7.7.7","@vue/babel-preset-app":"^4.1.1","@vue/cli-plugin-babel":"^4.1.1","@vue/cli-plugin-eslint":"^4.1.1","@vue/cli-service":"^4.1.1","babel-eslint":"^10.0.3","eslint":"^6.8.0","eslint-plugin-vue":"^6.0.1","moment":"^2.24.0","node-sass":"^4.13.0","sass-loader":"^8.0.0","vue-template-compiler":"^2.6.11","vuepress":"^1.2.0","@storybook/addon-actions":"^5.3.9","@storybook/addon-knobs":"^5.3.9","@storybook/addon-links":"^5.3.9","@storybook/addon-storysource":"^5.3.9","@storybook/addons":"^5.3.9","@storybook/vue":"^5.3.9","babel-loader":"^8.0.6","babel-preset-vue":"^2.0.2"},"peerDependencies":{"moment":"^2.24.0"},"gitHead":"487a3ced391476ccd6eacf0c9c13155031bef7fa","_id":"@angelioputra/midnight@0.5.0","_nodeVersion":"10.15.1","_npmVersion":"6.13.3","dist":{"integrity":"sha512-C3qhhNJE46cZMPBjP886w8fJ/vYVYEV0VrP5C2yM9Y8oS5ul2Se79bJrTrNEVBje25aOmi23B9FN3aujX5WE/Q==","shasum":"bc17daf1e44b22655f11dafe0bc015806d4cf429","tarball":"https://registry.npmjs.org/@angelioputra/midnight/-/midnight-0.5.0.tgz","fileCount":48,"unpackedSize":246596,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVUbSCRA9TVsSAnZWagAA9hEQAJbz4iRPNjXJOiCbNPiD\ns8vgeE3IsoKSrGhMhbmE6v39NbG9o6QQNRVXGMKhlSBXrhb8eBtDlqQ5Xv9C\nYm7BUCXxqmMrqydq4iilVbY6+bWaKBi1bT4RV/9aV6X5YQRWT1l4ZKx0yQ5f\nHS6ckpSMv1vOlo8lGdpFcMP23e1cF9+e/ZsC5HY0X7RW15WxhNOYmknoQ6Z6\n7w1iuDKkjwGgASB7/Secp/uuFiNV0pIr+McESF5V/CjJzRG03UF3+eImC99f\nWQEh/DFPHxSLA9/rI14npvAwoRmxyEdwVTgSgbEdJLIA1aUkPHMe+88nUSWV\nxoWVOboKePD1gZNBbK5SnAXXwlJTvnOsAJw/WBkC7Jbu9D/0MnHGZs4d+aVo\nU3aIL/sAlrILUUOSbddOGFmqMQFn89t3jWJgW/L/wiT5mZMLBVGW8jAnKrOU\n7hFhaHy5OrrJkx8Csv+jOhria+4fyLtgka3cw/jAy2IfC6J8Q9Ay1ldWXXUf\n6R7xMwqFi+QtJaHkaFBZNJ9bq3I8ybVQJTdkL6jfPK6gC15dsMaeKjNNrU+c\nIgf/mgtZai0zchVAJeqBgZlZnp7cDbAWMXxkDKHLKvyg4r1TgAvBLI2No8m/\nyF03vdSBwIixVIzWMI3wYHrWfFLVxgGq6MGeVm/QfZ2uJdp8AVfiYSe7oCHv\nolly\r\n=Mi8s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCtBwkZk4GEs9sMmB0WAHndJS/Azl+HGlC1x5JG2r9j5wIhAPGmXX0K8cnd8+qzBv3oqaY/2zLIiAu7upw/DeHnRCRN"}]},"maintainers":[{"name":"angelioputra","email":"putralio.angelos@gmail.com"}],"_npmUser":{"name":"angelioputra","email":"putralio.angelos@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/midnight_0.5.0_1582646993757_0.373446767553792"},"_hasShrinkwrap":false}},"maintainers":[{"name":"angelioputra","email":"putralio.angelos@gmail.com"}],"description":"Vue Design System is an open-source tool for building Design Systems with Vue.js","homepage":"https://vueds.com","author":{"name":"Angelio","email":"angelio@member.id"},"license":"MIT","readme":"[![Netlify Status](https://api.netlify.com/api/v1/badges/b1b84831-789e-4629-a9e3-55a36e136653/deploy-status)](https://app.netlify.com/sites/sharp-babbage-154f0a/deploys)\n\n# Vue Component Library Starter\n\n> Create your own component library with [Vue CLI 3](https://cli.vuejs.org/) and [VuePress](https://vuepress.vuejs.org/).\n\nSooner or later, you will find that creating a component library is much better than having all components inside your app project. A component library force you remove app specific logic from your components, makes it possible to reuse them in other apps. \n\nOnce the components are in a libraray, documentation becomes critical. This starter project includes a documentation app powered by VuePress. It not only documents the usage of the component, but also provides a testing bed during the development of components. See the generated documentation app [here](https://sharp-babbage-154f0a.netlify.com/).\n\n> Dev dependency \"@vue/babel-preset-app\": \"^4.1.1\" is introduced as Vue CLI v4 is using core-js v3.x while vuepress 1.2.0 is still using core-js v2.x.\n\n## Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# start the doc app with hot reload, great for testing components\nnpm run docs:dev\n\n# build the library, available under dist\nnpm run build\n\n# build the doc app, available under docs/.vuepress/dist\nnpm run docs:build\n```\n\n## How it works\n\n### Components\n\nThe library is a [Vue plugin](https://vuejs.org/v2/guide/plugins.html). Its `install` function in [install.js](src/install.js) imports all components from `components` folder, registers them to Vue and automatically call itself.\n\n### Mixins, Utils and Constants\n\nBesides the `install` function, [index.js](src/index.js) may also exports mixins, utils and constants. The client may use them as below:\n\n```js\n<script>\nimport { MyMixin, MyConstants, MyUtil } from 'my-lib'\n\nexport default {\n  mixins: [MyMixin],\n  data () {\n    return {\n      magicNum: MyConstants.MAGIC_NUM\n    }\n  },\n  methods: {\n    add (a, b) {\n      return MyUtil.add(a, b)\n    }\n  }\n}\n</script>\n```\n\n### Third-party libraries\n\nThird-party libraries you library depends on bloats the size of your library, if not handled well.\n\n#### Externalize\n\nOne strategy is to make it external. As an example, the popular library [moment](https://momentjs.com/) is used by ComponentA. Since it is very likely the client of your library may also use this library, we configure CLI not to include it to the bundle by adding the following in `vue.config.js`.\n\n```js\nmodule.exports = {\n  //...\n  chainWebpack: config => {\n    config.externals({\n      moment: 'moment'\n    })\n  }\n}\n```\n\nIn your client app, you don't need to explicitly add dependency to `moment` in `package.json` as it is a dependency of `my-lib`. However, if you want to reduce the size of the bundle size of client app, add the following in the `vue.config.js` of client app ([details](https://github.com/jmblog/how-to-optimize-momentjs-with-webpack)), assuming it is also built with Vue CLI .\n\n```js\nconst webpack = require('webpack')\nmodule.exports = {\n  //...\n  plugins: [\n    // Ignore all locale files of moment.js\n    new webpack.IgnorePlugin(/^\\.\\/locale$/, /moment$/),\n  ],\n}\n```\n\n#### Cherry picking\n\nAnother strategy is to embed cherry-picked functions with tree shaking. As an example, the `fill` function of popular library [lodash](https://lodash.com) is used by ComponentA.\n\nTo get the tree shaking working, import the `fill` function like the following. Note that `import { fill } from 'lodash'` or `import _ from 'lodash'` will not work and will embed the whole `lodash` library.\n\n```js\nimport fill from 'lodash/fill'\n```\n\nIf your client app also use `lodash` and you don't want `lodash` to be in both the client app and the component libraries, even after cherry-picking, you may consider cherry picking in component library and re-export them as utils for client to consume, so that the client does not need to depend on `lodash`, therefore avoiding duplication.\n\n## Use your component library\n\nYou may publish your component library to NPM repository. If you prefer to use/test your component library locally in a client app, you may use `npm link` or [install-local](https://github.com/nicojs/node-install-local).\n\nIf your app is not using a bundler, the following is the example of how to use the library in vanilla HTML page.\n\n```html\n<!DOCTYPE html>\n<html>\n  <head><title>Demo app</title></head>\n  <body>\n    <div id=\"app\">\n      <p>Component A: <component-a/></p>\n      <p>Component B: <component-b @click=\"onClick\"/></p>\n    </div>\n  </body>\n\n  <script src=\"https://unpkg.com/vue\"></script>\n  <script src=\"dist/my-lib.umd.js\"></script>\n  <script>\n      console.log(window['my-lib'])\n      var app = new Vue({\n        el: '#app',\n        methods: {\n          onClick (message) {\n            alert(message)\n          }\n        }\n      })\n    </script>\n</html>\n```","readmeFilename":"README.md"}