feat: add @rxts/qrcode package, improve documentation

Author: JounQin

README.md

@@ -40,18 +40,19 @@
 
 This repository is a monorepo managed by [Lerna][] what means we actually publish several packages to npm from same codebase, including:
 
-| Package                              | Description                                           | Version                                                                                         | Peer Dependencies                                                                                                                                            | Dependencies                                                                                                                             |
-| ------------------------------------ | ----------------------------------------------------- | ----------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------- |
-| [`vue-qrious`](/packages/vue-qrious) | 🤳 A Vue component for QR code generation with qrious | [![npm](https://img.shields.io/npm/v/vue-qrious.svg)](https://www.npmjs.com/package/vue-qrious) | [![David Peer](https://img.shields.io/david/peer/rx-ts/vue.svg?path=packages/vue-qrious)](https://david-dm.org/rx-ts/vue?path=packages/vue-qrious&type=peer) | [![David](https://img.shields.io/david/rx-ts/vue.svg?path=packages/vue-qrious)](https://david-dm.org/rx-ts/vue?path=packages/vue-qrious) |
+| Package                              | Description                                               | Version                                                                                                     | Peer Dependencies                                                                                                                                            | Dependencies                                                                                                                             |
+| ------------------------------------ | --------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| [`vue-qrcode`](/packages/vue-qrcode) | 🤳 A Vue component for QR code generation with [qrcode][] | [![npm](https://img.shields.io/npm/v/@rxts/vue-qrcode.svg)](https://www.npmjs.com/package/@rxts/vue-qrcode) | [![David Peer](https://img.shields.io/david/peer/rx-ts/vue.svg?path=packages/vue-qrcode)](https://david-dm.org/rx-ts/vue?path=packages/vue-qrcode&type=peer) | [![David](https://img.shields.io/david/rx-ts/vue.svg?path=packages/vue-qrcode)](https://david-dm.org/rx-ts/vue?path=packages/vue-qrcode) |
+| [`vue-qrious`](/packages/vue-qrious) | 🤳 A Vue component for QR code generation with [qrious][] | [![npm](https://img.shields.io/npm/v/vue-qrious.svg)](https://www.npmjs.com/package/vue-qrious)             | [![David Peer](https://img.shields.io/david/peer/rx-ts/vue.svg?path=packages/vue-qrious)](https://david-dm.org/rx-ts/vue?path=packages/vue-qrious&type=peer) | [![David](https://img.shields.io/david/rx-ts/vue.svg?path=packages/vue-qrious)](https://david-dm.org/rx-ts/vue?path=packages/vue-qrious) |
 
 ## Install
 
 ```sh
 # yarn
-yarn add vue-qrious
+yarn add @rxts/vue-qrcode vue-qrious
 
 # npm
-npm i vue-qrious
+npm i @rxts/vue-qrcode vue-qrious
 ```
 
 ## Changelog
@@ -68,3 +69,5 @@ Detailed changes for each release are documented in [CHANGELOG.md](./CHANGELOG.m
 [jounqin]: https://GitHub.com/JounQin
 [lerna]: https://github.com/lerna/lerna
 [mit]: http://opensource.org/licenses/MIT
+[qrcode]: https://github.com/soldair/node-qrcode
+[qrious]: https://github.com/neocotic/qrious

demo/shim.d.ts

@@ -11,5 +11,15 @@
       "src": "package.json",
       "use": "@now/static-build"
     }
+  ],
+  "routes": [
+    {
+      "src": "/vue-qrious/*",
+      "dest": "vue-qrious/docs/index.html"
+    },
+    {
+      "src": "/*",
+      "dest": "vue-qrcode/docs/index.html"
+    }
   ]
 }

now.json

@@ -10,14 +10,14 @@
     "packages/*"
   ],
   "scripts": {
-    "dev": "parcel demo/index.html",
+    "dev": "parcel packages/*/docs/index.html",
     "lint:es": "EFF_NO_LINK_RULES=true eslint . --ext js,md,mdx,ts,tsx -f friendly",
     "lint:style": "stylelint **/*.scss",
     "lint": "run-p lint:*",
     "build:es": "tsc -b --force",
     "build:bundle": "rollup -c node_modules/@1stg/rollup-config/module.js",
     "build:bundle:min": "cross-env NODE_ENV=production yarn build:bundle",
-    "build:demo": "parcel build demo/index.html --out-dir dist",
+    "build:docs": "parcel build packages/*/docs/index.html",
     "build": "rimraf dist packages/*/lib && run-p build:**",
     "serve": "serve dist",
     "type-coverage": "type-coverage --cache --ignore-catch --detail --ignore-files *.d.ts --strict"
@@ -35,9 +35,11 @@
     "@babel/core": "^7.5.5",
     "@commitlint/cli": "^8.1.0",
     "@commitlint/config-conventional": "^8.1.0",
+    "@rxts/vue-qrcode": "link:packages/vue-qrcode/src",
     "@types/classnames": "^2.2.9",
     "@types/lodash": "^4.14.138",
     "@types/node": "^12.7.4",
+    "@types/qrcode": "^1.3.4",
     "autoprefixer": "^9.6.1",
     "classnames": "^2.2.6",
     "core-js": "^3.2.1",
@@ -54,6 +56,7 @@
     "parcel": "^1.12.3",
     "postcss": "^7.0.17",
     "prettier": "^1.18.2",
+    "qrcode": "^1.4.1",
     "qrious": "^4.0.2",
     "remark-preset-lint-consistent": "^2.0.3",
     "remark-preset-lint-markdown-style-guide": "^2.1.3",
@@ -64,6 +67,7 @@
     "rollup-plugin-terser": "^5.1.1",
     "rollup-plugin-typescript": "^1.0.1",
     "rxjs": "^6.5.3",
+    "sanitize.css": "^11.0.0",
     "sass": "^1.23.0-module.beta.1",
     "serve": "^11.1.0",
     "stylelint": "^10.1.0",
@@ -74,6 +78,9 @@
     "vue": "^2.6.10",
     "vue-qrious": "link:packages/vue-qrious/src"
   },
+  "alias": {
+    "vue": "./node_modules/vue/dist/vue.esm.js"
+  },
   "babel": {
     "presets": [
       "@1stg"
@@ -91,7 +98,7 @@
     "lib",
     "packages/*/CHANGELOG.md"
   ],
-  "prettier": "@1stg/prettier-config",
+  "prettier": "@1stg/prettier-config/vue",
   "renovate": {
     "extends": "@1stg"
   },

package.json

@@ -0,0 +1,36 @@
+# VueQRCode
+
+> 🤳 A Vue component for QR code generation with [qrcode](https://github.com/soldair/node-qrcode)
+
+## Usage
+
+```vue
+<template>
+  <qrious value="https://www.1stg.me" />
+</template>
+<script>
+import Qrcode from 'vue-qrcode'
+
+export default {
+  components: {
+    Qrcode,
+  },
+}
+</script>
+```
+
+## Available Props
+
+| prop                   | type                                                               | default value                               |
+| ---------------------- | ------------------------------------------------------------------ | ------------------------------------------- |
+| `version`              | `number` (1-40)                                                    | N/A                                         |
+| `errorCorrectionLevel` | `String` ('low', 'medium', 'quartile', 'high', 'L', 'M', 'Q', 'H') | `'M'`                                       |
+| `maskPattern`          | `number` (0-7)                                                     | N/A                                         |
+| `toSJISFunc`           | `Function`                                                         | N/A                                         |
+| `margin`               | `number`                                                           | `4`                                         |
+| `scale`                | `number`                                                           | `4`                                         |
+| `width`                | `number`                                                           | N/A                                         |
+| `color`                | `{ dark: string; light:string }`                                   | `{ dark: '#000000ff', light: '#ffffffff' }` |
+| `type`                 | `string` ('image/png', 'image/jpeg', 'image/webp',)                | `'image/png'`                               |
+| `quality`              | `number`(0-1)                                                      | `0.92`                                      |
+| `value`                | `string | Array<{ data: string; mode?: string }>`                  | N/A                                         |

packages/vue-qrcode/README.md

@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
+    />
+    <title>VueQrcode</title>
+    <link rel="stylesheet" href="./style.scss" />
+  </head>
+  <body>
+    <div id="app" v-cloak>
+      <h1>VueQrcode</h1>
+      <ul class="lists">
+        <li>
+          <label>version</label>
+          <select v-model="version">
+            <option v-for="v of 40" :value="v">{{ v }}</option>
+          </select>
+        </li>
+        <li>
+          <label>errorCorrectionLevel</label>
+          <select v-model="errorCorrectionLevel">
+            <option v-for="level of LEVELS" :value="level">{{ level }}</option>
+          </select>
+        </li>
+        <li>
+          <label>maskPattern</label>
+          <select v-model="maskPattern">
+            <option v-for="pattern of MASK_PATTERNS" :value="pattern">
+              {{ pattern }}
+            </option>
+          </select>
+        </li>
+        <li>
+          <label>margin</label>
+          <input type="number" v-model.number="margin" />
+        </li>
+        <li></li>
+        <li>
+          <label>scale</label>
+          <input type="number" v-model.number="scale" />
+        </li>
+        <li>
+          <label>width</label>
+          <input type="number" v-model.number="width" />
+        </li>
+        <li>
+          <label>color.dark</label>
+          <input type="color" v-model="color.dark" />
+        </li>
+        <li>
+          <label>color.light</label>
+          <input type="color" v-model="color.light" />
+        </li>
+        <li>
+          <label>type</label>
+          <select v-model="type">
+            <option v-for="t of TYPES" :value="t">{{ t }}</option>
+          </select>
+        </li>
+        <li>
+          <label>quality</label>
+          <input type="number" step="0.01" v-model.number="quality" />
+        </li>
+        <li>
+          <label>
+            manualMode
+            <input type="checkbox" v-model="manualMode" />
+          </label>
+        </li>
+        <li>
+          <label>
+            value
+            <button v-if="manualMode" @click="addValue" is="button">+</button>
+          </label>
+          <ul v-if="manualMode">
+            <li v-for="(v, index) of value">
+              <label v-if="value.length">
+                maskPattern
+                <button @click="removeValue(index)" is="button">-</button>
+              </label>
+              <div>
+                <label>mode</label>
+                <select v-model="v.mode">
+                  <option v-for="mode of MODES" :value="mode">
+                    {{ mode }}
+                  </option>
+                </select>
+              </div>
+              <div>
+                <label>data</label>
+                <textarea rows="6" cols="80" v-model="v.data"></textarea>
+              </div>
+            </li>
+          </ul>
+          <textarea v-else rows="6" cols="80" v-model="value"></textarea>
+        </li>
+      </ul>
+      <qrcode v-bind="$data" />
+    </div>
+    <script src="./index.ts"></script>
+  </body>
+</html>

packages/vue-qrcode/docs/index.html

@@ -0,0 +1,63 @@
+import Qrcode, {
+  LEVELS,
+  MASK_PATTERNS,
+  MODES,
+  QRCodeSegment,
+  QRCodeValue,
+  TYPES,
+} from '@rxts/vue-qrcode'
+import Vue from 'vue'
+
+const DEFAULT_TEXT = 'http://www.1stg.me'
+
+// eslint-disable-next-line no-new
+new Vue({
+  // tslint:disable-line: no-unused-expression
+  el: '#app',
+  data() {
+    return {
+      LEVELS,
+      MASK_PATTERNS,
+      MODES,
+      TYPES,
+      version: undefined,
+      errorCorrectionLevel: 'M',
+      maskPattern: undefined,
+      margin: 4,
+      scale: 4,
+      width: undefined,
+      color: {
+        dark: '#000000',
+        light: '#ffffff',
+      },
+      type: 'image/png',
+      quality: 0.92,
+      value: DEFAULT_TEXT as QRCodeValue,
+      manualMode: false,
+    }
+  },
+  watch: {
+    manualMode() {
+      this.value = this.manualMode
+        ? [
+            {
+              data: DEFAULT_TEXT,
+            },
+          ]
+        : DEFAULT_TEXT
+    },
+  },
+  methods: {
+    addValue() {
+      ;(this.value as QRCodeSegment[]).push({
+        data: DEFAULT_TEXT,
+      })
+    },
+    removeValue(index: number) {
+      ;(this.value as QRCodeSegment[]).splice(index, 1)
+    },
+  },
+  components: {
+    Qrcode,
+  },
+})

packages/vue-qrcode/docs/index.ts

@@ -0,0 +1,42 @@
+@import 'sanitize.css';
+@import 'sanitize.css/forms.css';
+
+[v-cloak] {
+  display: none;
+}
+
+#app {
+  margin: 0 auto;
+  text-align: center;
+}
+
+.lists {
+  padding: 0;
+  text-align: left;
+  list-style: none;
+  width: 300px;
+  margin: 0 auto 30px;
+
+  li {
+    margin-bottom: 8px;
+  }
+
+  label {
+    display: block;
+    margin-bottom: 5px;
+
+    &:after {
+      content: ':';
+    }
+  }
+
+  input {
+    &[type='color'] {
+      padding: 0;
+    }
+  }
+
+  textarea {
+    width: 100%;
+  }
+}

packages/vue-qrcode/docs/style.scss

@@ -0,0 +1,25 @@
+{
+  "name": "@rxts/vue-qrcode",
+  "version": "0.0.0",
+  "description": "🤳 A Vue component for QR code generation with `qrcode`",
+  "repository": "git@github.com:rx-ts/vue.git",
+  "author": "JounQin <admin@1stg.me>",
+  "license": "MIT",
+  "main": "lib/cjs.js",
+  "module": "lib/index.js",
+  "browser": "lib/umd.js",
+  "unpkg": "lib/umd.min.js",
+  "es2015": "lib/es2015.js",
+  "esm5": "lib/index.js",
+  "fesm5": "lib/esm.js",
+  "types": "lib/index.d.ts",
+  "files": [
+    "lib",
+    "src"
+  ],
+  "peerDependencies": {
+    "qrcode": "^1.0.0",
+    "vue": "^2.0.0"
+  },
+  "sideEffects": false
+}