├── .prettierignore ├── .prettierrc ├── .browserslistrc ├── .commitlintrc ├── .postcssrc.cjs ├── .remarkrc ├── .lintstagedrc.cjs ├── .simple-git-hooks.cjs ├── .renovaterc ├── packages ├── vue-qrious │ ├── typings.d.ts │ ├── tsconfig.json │ ├── qrious.d.ts │ ├── package.json │ ├── index.ts │ ├── README.md │ ├── index.md │ └── CHANGELOG.md ├── vue-resizor │ ├── src │ │ ├── index.ts │ │ ├── types.ts │ │ ├── bem.ts │ │ ├── styles.less │ │ ├── helpers.ts │ │ └── Resizor.tsx │ ├── tsconfig.json │ ├── CHANGELOG.md │ ├── package.json │ ├── README.md │ └── index.md └── vue-qrcode │ ├── tsconfig.json │ ├── package.json │ ├── index.ts │ ├── index.md │ ├── README.md │ └── CHANGELOG.md ├── .codesanbox └── ci.json ├── .stylelintrc ├── .eslintignore ├── .gitignore ├── .stylelintignore ├── .babelrc ├── vercel.json ├── .editorconfig ├── .vitepress ├── components │ ├── index.ts │ ├── VueResizorDemo.vue │ ├── VueQriousDemo.vue │ └── VueQrcodeDemo.vue ├── config.ts └── theme │ └── index.ts ├── CHANGELOG.md ├── .changeset ├── config.json └── README.md ├── tsconfig.base.json ├── tsconfig.json ├── .eslintrc ├── .github └── workflows │ ├── pkg-size.yml │ ├── ci.yml │ ├── codeql.yml │ └── release.yml ├── LICENSE ├── package.json ├── index.md └── README.md /.prettierignore: -------------------------------------------------------------------------------- 1 | .browserslistrc 2 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | "@1stg/prettier-config/vue.js" 2 | -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | extends @1stg/browserslist-config/modern 2 | -------------------------------------------------------------------------------- /.commitlintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "@1stg" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /.postcssrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = require('@1stg/postcss-config')() 2 | -------------------------------------------------------------------------------- /.remarkrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "@1stg/preset" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /.lintstagedrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = require('@1stg/lint-staged/vue-tsc') 2 | -------------------------------------------------------------------------------- /.simple-git-hooks.cjs: -------------------------------------------------------------------------------- 1 | module.exports = require('@1stg/simple-git-hooks') 2 | -------------------------------------------------------------------------------- /.renovaterc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "github>1stG/configs" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /packages/vue-qrious/typings.d.ts: -------------------------------------------------------------------------------- 1 | declare module 'qrious' { 2 | export = QRious 3 | } 4 | -------------------------------------------------------------------------------- /.codesanbox/ci.json: -------------------------------------------------------------------------------- 1 | { 2 | "node": "18", 3 | "packages": [ 4 | "packages/*" 5 | ], 6 | "sandboxes": [] 7 | } 8 | -------------------------------------------------------------------------------- /.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@1stg/stylelint-config", 3 | "rules": { 4 | "color-function-notation": null 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | !/.*.js 2 | # !/.vitepress # Disable temporarily 3 | .*cache 4 | coverage 5 | dist 6 | lib 7 | packages/*/CHANGELOG.md 8 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.log 2 | *.tsbuildinfo 3 | .*cache 4 | .temp 5 | .type-coverage 6 | .vitepress/cache 7 | dist 8 | coverage 9 | lib 10 | node_modules 11 | -------------------------------------------------------------------------------- /.stylelintignore: -------------------------------------------------------------------------------- 1 | dist 2 | lib 3 | packages/*/lib/* 4 | LICENSE 5 | *.json 6 | *.lock 7 | *.log 8 | *.ts 9 | *.tsbuildinfo 10 | *.tsx 11 | *.yaml 12 | *.yml 13 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@1stg", 5 | { 6 | "typescript": true, 7 | "vue": true 8 | } 9 | ] 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /vercel.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": 2, 3 | "alias": [ 4 | "rx-vue.vercel.app", 5 | "vue-rx.vercel.app" 6 | ], 7 | "github": { 8 | "silent": true 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /packages/vue-resizor/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './bem.js' 2 | export * from './helpers.js' 3 | export { default, default as Resizor } from './Resizor.jsx' 4 | export * from './types.js' 5 | -------------------------------------------------------------------------------- /packages/vue-qrcode/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base", 3 | "compilerOptions": { 4 | "composite": true, 5 | "outDir": "lib" 6 | }, 7 | "include": ["./index.ts"] 8 | } 9 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root=true 2 | 3 | [*] 4 | indent_style=space 5 | indent_size=2 6 | tab_width=2 7 | end_of_line=lf 8 | charset=utf-8 9 | trim_trailing_whitespace=true 10 | insert_final_newline=true 11 | -------------------------------------------------------------------------------- /.vitepress/components/index.ts: -------------------------------------------------------------------------------- 1 | export { default as VueQrcodeDemo } from './VueQrcodeDemo.vue' 2 | export { default as VueQriousDemo } from './VueQriousDemo.vue' 3 | export { default as VueResizorDemo } from './VueResizorDemo.vue' 4 | -------------------------------------------------------------------------------- /packages/vue-qrious/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base", 3 | "compilerOptions": { 4 | "composite": true, 5 | "outDir": "lib" 6 | }, 7 | "include": ["./index.ts", "./qrious.d.ts", "./typings.d.ts"] 8 | } 9 | -------------------------------------------------------------------------------- /packages/vue-resizor/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base", 3 | "compilerOptions": { 4 | "composite": true, 5 | "rootDir": "src", 6 | "outDir": "lib" 7 | }, 8 | "include": ["src/*.ts", "src/*.tsx"] 9 | } 10 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Logs 2 | 3 | All notable changes to this project will be documented in the following files. 4 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. 5 | 6 | - [vue-qrcode](./packages/vue-qrcode/CHANGELOG.md) 7 | - [vue-qrious](./packages/vue-qrious/CHANGELOG.md) 8 | -------------------------------------------------------------------------------- /.vitepress/config.ts: -------------------------------------------------------------------------------- 1 | import vueJsx from '@vitejs/plugin-vue-jsx' 2 | import { defineConfig } from 'vitepress' 3 | 4 | const description = process.env.npm_package_description 5 | 6 | export default defineConfig({ 7 | title: [process.env.npm_package_name, description].join(' - '), 8 | description, 9 | vite: { 10 | plugins: [ 11 | vueJsx(), 12 | ], 13 | }, 14 | }) 15 | -------------------------------------------------------------------------------- /.changeset/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://unpkg.com/@changesets/config/schema.json", 3 | "changelog": [ 4 | "@changesets/changelog-github", 5 | { 6 | "repo": "rx-ts/vue" 7 | } 8 | ], 9 | "commit": false, 10 | "linked": [], 11 | "access": "restricted", 12 | "baseBranch": "master", 13 | "updateInternalDependencies": "minor", 14 | "ignore": [] 15 | } 16 | -------------------------------------------------------------------------------- /.vitepress/theme/index.ts: -------------------------------------------------------------------------------- 1 | import DefaultTheme from 'vitepress/theme' 2 | import { Theme } from 'vitepress' 3 | 4 | import * as components from '../components/index.js' 5 | 6 | const config: Theme = { 7 | ...DefaultTheme, 8 | enhanceApp({ app }) { 9 | Object.entries(components).forEach(([name, component]) => { 10 | app.component(name, component) 11 | }) 12 | }, 13 | } 14 | 15 | export default config 16 | -------------------------------------------------------------------------------- /tsconfig.base.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@1stg/tsconfig/node16", 3 | "compilerOptions": { 4 | "baseUrl": ".", 5 | "jsxImportSource": "vue", 6 | "paths": { 7 | "vue-qrcode": ["./packages/vue-qrcode/src"], 8 | "vue-qrious": ["./packages/vue-qrious/src"], 9 | "vue-resizor": ["./packages/vue-resizor/src"] 10 | }, 11 | "typeRoots": ["./node_modules/@types", "./node_modules/@d-ts"] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.base", 3 | "references": [ 4 | { 5 | "path": "./packages/vue-qrcode" 6 | }, 7 | { 8 | "path": "./packages/vue-qrious" 9 | }, 10 | { 11 | "path": "./packages/vue-resizor" 12 | } 13 | ], 14 | "include": [ 15 | ".vitepress/**/*.ts", 16 | ".vitepress/**/*.vue", 17 | "**/*.ts", 18 | "**/*.tsx" 19 | ], 20 | "exclude": ["**/test/**"] 21 | } 22 | -------------------------------------------------------------------------------- /packages/vue-resizor/src/types.ts: -------------------------------------------------------------------------------- 1 | import type { VNode } from 'vue' 2 | 3 | export type Percent = `${number}%` 4 | export type Pixel = `${number}px` 5 | 6 | export interface Indicator { 7 | top: Percent 8 | left: Percent 9 | horizontal: boolean 10 | } 11 | 12 | export interface ResizorSlots { 13 | default?(): Array> 14 | } 15 | 16 | export interface ClientRect { 17 | width: number 18 | height: number 19 | top: number 20 | left: number 21 | } 22 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "extends": "@1stg", 4 | "overrides": [ 5 | { 6 | "files": [ 7 | "*.{ts,tsx,vue}" 8 | ], 9 | "rules": { 10 | "vue/multi-word-component-names": "off", 11 | "vue/require-default-prop": "off" 12 | } 13 | }, 14 | { 15 | "files": [ 16 | "*.{ts,tsx}" 17 | ], 18 | "rules": { 19 | "@typescript-eslint/consistent-type-imports": "error" 20 | } 21 | } 22 | ] 23 | } 24 | -------------------------------------------------------------------------------- /.changeset/README.md: -------------------------------------------------------------------------------- 1 | # Changesets 2 | 3 | Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works 4 | with multi-package repos, or single-package repos to help you version and publish your code. You can 5 | find the full documentation for it [in our repository](https://github.com/changesets/changesets) 6 | 7 | We have a quick list of common questions to get you started engaging with this project in 8 | [our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md) 9 | -------------------------------------------------------------------------------- /packages/vue-qrious/qrious.d.ts: -------------------------------------------------------------------------------- 1 | declare namespace QRious { 2 | interface QRiousOptions { 3 | value: string 4 | background?: string 5 | backgroundAlpha?: number 6 | foreground?: string 7 | foregroundAlpha?: number 8 | level?: 'H' | 'L' | 'M' | 'Q' 9 | mime?: string 10 | padding?: number 11 | size?: number 12 | } 13 | } 14 | 15 | declare class QRious { 16 | constructor(options?: QRious.QRiousOptions) 17 | toDataURL(mime?: string): string 18 | set(options?: QRious.QRiousOptions): void 19 | } 20 | 21 | export = QRious 22 | 23 | export as namespace QRious 24 | -------------------------------------------------------------------------------- /.github/workflows/pkg-size.yml: -------------------------------------------------------------------------------- 1 | name: Package Size Report 2 | 3 | on: 4 | pull_request: 5 | branches: 6 | - master 7 | 8 | jobs: 9 | pkg-size-report: 10 | name: Package Size Report 11 | runs-on: ubuntu-latest 12 | 13 | steps: 14 | - name: Checkout 15 | uses: actions/checkout@v4 16 | 17 | - name: Setup Node.js LTS 18 | uses: actions/setup-node@v4 19 | with: 20 | node-version: lts/* 21 | 22 | - name: Package Size Report 23 | uses: pkg-size/action@v1 24 | env: 25 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 26 | -------------------------------------------------------------------------------- /packages/vue-resizor/src/bem.ts: -------------------------------------------------------------------------------- 1 | export class Bem { 2 | readonly #block: string 3 | readonly #element?: string 4 | readonly #modifier?: string 5 | 6 | constructor(block: string, element?: string, modifier?: string) { 7 | this.#block = block 8 | this.#element = element 9 | this.#modifier = modifier 10 | } 11 | 12 | element(element: string) { 13 | return new Bem(this.#block, element) 14 | } 15 | 16 | modifier(modifier: string) { 17 | return new Bem(this.#block, this.#element, modifier) 18 | } 19 | 20 | toString() { 21 | // eslint-disable-next-line sonarjs/no-nested-template-literals 22 | return `${this.#block}${this.#element ? `__${this.#element}` : ''}${this.#modifier ? `--${this.#modifier}` : ''}` 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /.vitepress/components/VueResizorDemo.vue: -------------------------------------------------------------------------------- 1 | 9 | 19 | 35 | -------------------------------------------------------------------------------- /packages/vue-resizor/src/styles.less: -------------------------------------------------------------------------------- 1 | @indicator-border-color: #a1bfd5; 2 | 3 | .vue-resizor--indicator { 4 | position: absolute; 5 | z-index: 1; 6 | border: 0 dashed transparent; 7 | transform: translate3d(0, -50%, 0); 8 | 9 | &.vue-resizor__dragging { 10 | visibility: hidden; 11 | } 12 | 13 | &:hover { 14 | cursor: row-resize; 15 | border-color: rgba(@indicator-border-color, 0.4) !important; 16 | } 17 | 18 | &.vue-resizor__horizontal { 19 | transform: translate3d(-50%, 0, 0); 20 | 21 | &:hover { 22 | cursor: col-resize; 23 | } 24 | } 25 | } 26 | 27 | .vue-resizor--container:hover > .vue-resizor--indicator { 28 | border-color: rgba(@indicator-border-color, 0.1); 29 | } 30 | 31 | .dark:root .vue-resizor--container:hover > .vue-resizor--indicator { 32 | border-color: rgba(@indicator-border-color, 0.2); 33 | } 34 | -------------------------------------------------------------------------------- /packages/vue-resizor/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | ## 0.1.0 4 | 5 | ### Minor Changes 6 | 7 | - [#174](https://github.com/rx-ts/vue/pull/174) [`53ebd70`](https://github.com/rx-ts/vue/commit/53ebd70cd91e9158be6c7f9ce93f5200faf94f3c) Thanks [@JounQin](https://github.com/JounQin)! - feat: add new `vue-resizor` package, it just works 8 | 9 | ### Patch Changes 10 | 11 | - [#176](https://github.com/rx-ts/vue/pull/176) [`0f83439`](https://github.com/rx-ts/vue/commit/0f8343946363bf59bdc10277f28e442d4478fca2) Thanks [@JounQin](https://github.com/JounQin)! - feat: add esm entries so that no jsx transformation required 12 | 13 | - [#177](https://github.com/rx-ts/vue/pull/177) [`fc8c090`](https://github.com/rx-ts/vue/commit/fc8c09089ac527f44482615fa6764f7af2fe6c7c) Thanks [@JounQin](https://github.com/JounQin)! - fix: require `parent` prop when `hackingContainer` unavailable 14 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | 3 | on: 4 | - push 5 | - pull_request 6 | 7 | jobs: 8 | ci: 9 | name: Lint and Test with Node.js ${{ matrix.node }} 10 | strategy: 11 | matrix: 12 | node: 13 | - 18 14 | - 20 15 | runs-on: ubuntu-latest 16 | steps: 17 | - name: Checkout Repo 18 | uses: actions/checkout@v4 19 | 20 | - name: Setup Node.js ${{ matrix.node }} 21 | uses: actions/setup-node@v4 22 | with: 23 | node-version: ${{ matrix.node }} 24 | cache: yarn 25 | 26 | - name: Install Dependencies 27 | run: yarn --frozen-lockfile 28 | 29 | - name: Build and Lint 30 | run: yarn run-s build lint 31 | env: 32 | EFF_NO_LINK_RULES: true 33 | PARSER_NO_WATCH: true 34 | 35 | - name: Codecov 36 | uses: codecov/codecov-action@v3 37 | -------------------------------------------------------------------------------- /.github/workflows/codeql.yml: -------------------------------------------------------------------------------- 1 | name: CodeQL 2 | 3 | on: 4 | push: 5 | branches: 6 | - master 7 | pull_request: 8 | branches: 9 | - master 10 | schedule: 11 | - cron: '16 10 * * 6' 12 | 13 | jobs: 14 | analyze: 15 | name: Analyze 16 | runs-on: ubuntu-latest 17 | permissions: 18 | actions: read 19 | contents: read 20 | security-events: write 21 | 22 | strategy: 23 | fail-fast: false 24 | matrix: 25 | language: 26 | - javascript 27 | 28 | steps: 29 | - name: Checkout 30 | uses: actions/checkout@v4 31 | 32 | - name: Initialize CodeQL 33 | uses: github/codeql-action/init@v3 34 | with: 35 | languages: ${{ matrix.language }} 36 | queries: +security-and-quality 37 | 38 | - name: Autobuild 39 | uses: github/codeql-action/autobuild@v3 40 | 41 | - name: Perform CodeQL Analysis 42 | uses: github/codeql-action/analyze@v3 43 | with: 44 | category: '/language:${{ matrix.language }}' 45 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017-present JounQin 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 | -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: Release 2 | 3 | on: 4 | push: 5 | branches: 6 | - master 7 | 8 | jobs: 9 | release: 10 | name: Release 11 | runs-on: ubuntu-latest 12 | steps: 13 | - name: Checkout Repo 14 | uses: actions/checkout@v4 15 | with: 16 | # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits 17 | fetch-depth: 0 18 | 19 | - name: Setup Node.js LTS 20 | uses: actions/setup-node@v4 21 | with: 22 | node-version: lts/* 23 | cache: yarn 24 | 25 | - name: Install Dependencies 26 | run: yarn --frozen-lockfile 27 | 28 | - name: Create Release Pull Request or Publish to npm 29 | id: changesets 30 | uses: changesets/action@v1 31 | with: 32 | # This expects you to have a script called release which does a build for your packages and calls changeset publish 33 | publish: yarn release 34 | commit: 'chore: release package(s)' 35 | title: 'chore: release package(s)' 36 | env: 37 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 38 | NPM_TOKEN: ${{ secrets.NPM_TOKEN }} 39 | -------------------------------------------------------------------------------- /packages/vue-qrcode/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-qrcode", 3 | "version": "2.2.2", 4 | "type": "module", 5 | "description": "🤳 A Vue component for QR code generation with `qrcode`", 6 | "repository": "git@github.com:rx-ts/vue.git", 7 | "homepage": "https://github.com/rx-ts/vue/blob/master/packages/vue-qrcode", 8 | "author": "JounQin (https://www.1stG.me) ", 9 | "funding": "https://opencollective.com/rxts", 10 | "license": "MIT", 11 | "main": "./lib/index.cjs", 12 | "module": "./lib/index.js", 13 | "exports": { 14 | ".": { 15 | "types": "./lib/index.d.ts", 16 | "import": "./lib/index.esm.mjs", 17 | "require": "./lib/index.cjs", 18 | "default": "./lib/index.js" 19 | }, 20 | "./package.json": "./package.json" 21 | }, 22 | "types": "./lib/index.d.ts", 23 | "files": [ 24 | "lib", 25 | "!**/*.tsbuildinfo" 26 | ], 27 | "keywords": [ 28 | "vue-qrcode", 29 | "qrcode", 30 | "vue" 31 | ], 32 | "peerDependencies": { 33 | "qrcode": "^1.0.0", 34 | "vue": "^2.7.0 || ^3.0.0" 35 | }, 36 | "dependencies": { 37 | "tslib": "^2.6.2" 38 | }, 39 | "publishConfig": { 40 | "access": "public" 41 | }, 42 | "sideEffects": false 43 | } 44 | -------------------------------------------------------------------------------- /packages/vue-qrious/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-qrious", 3 | "version": "3.1.1", 4 | "type": "module", 5 | "description": "🤳 A Vue component for QR code generation with qrious", 6 | "repository": "git@github.com:rx-ts/vue.git", 7 | "homepage": "https://github.com/rx-ts/vue/blob/master/packages/vue-qrious", 8 | "author": "JounQin (https://www.1stG.me) ", 9 | "funding": "https://opencollective.com/rxts", 10 | "license": "MIT", 11 | "main": "./lib/index.cjs", 12 | "module": "./lib/index.js", 13 | "exports": { 14 | ".": { 15 | "types": "./lib/index.d.ts", 16 | "import": "./lib/index.esm.mjs", 17 | "require": "./lib/index.cjs", 18 | "default": "./lib/index.js" 19 | }, 20 | "./package.json": "./package.json" 21 | }, 22 | "types": "./lib/index.d.ts", 23 | "files": [ 24 | "lib", 25 | "qrious.d.ts", 26 | "typings.d.ts", 27 | "!**/*.tsbuildinfo" 28 | ], 29 | "keywords": [ 30 | "vue-qrcode", 31 | "vue-qrious", 32 | "qrcode", 33 | "qrious", 34 | "vue" 35 | ], 36 | "peerDependencies": { 37 | "qrious": "^4.0.0", 38 | "vue": "^2.7.0 || ^3.0.0" 39 | }, 40 | "dependencies": { 41 | "tslib": "^2.6.2" 42 | }, 43 | "publishConfig": { 44 | "access": "public" 45 | }, 46 | "sideEffects": false 47 | } 48 | -------------------------------------------------------------------------------- /packages/vue-qrious/index.ts: -------------------------------------------------------------------------------- 1 | import QRious from 'qrious' 2 | import { type PropType, defineComponent, h, ref, watch } from 'vue' 3 | 4 | export const LEVELS = ['L', 'M', 'Q', 'H'] as const 5 | 6 | export type Level = (typeof LEVELS)[number] 7 | 8 | export default defineComponent({ 9 | props: { 10 | value: { 11 | type: String, 12 | required: true, 13 | }, 14 | background: String, 15 | backgroundAlpha: Number, 16 | foreground: String, 17 | foregroundAlpha: Number, 18 | level: { 19 | type: String as PropType, 20 | validator: (level: Level) => LEVELS.includes(level), 21 | }, 22 | mime: String, 23 | padding: Number, 24 | size: Number, 25 | }, 26 | setup(props, { attrs, emit }) { 27 | const qrious = new QRious(props) 28 | 29 | const toDataURL = () => { 30 | try { 31 | const dataUrl = qrious.toDataURL(props.mime) 32 | emit('change', dataUrl) 33 | return dataUrl 34 | } catch (err) { 35 | emit('error', err) 36 | } 37 | } 38 | 39 | const dataUrlRef = ref(toDataURL()) 40 | 41 | watch(props, () => { 42 | qrious.set(props) 43 | dataUrlRef.value = toDataURL() 44 | }) 45 | 46 | return () => 47 | h('img', { 48 | ...attrs, 49 | src: dataUrlRef.value, 50 | }) 51 | }, 52 | }) 53 | -------------------------------------------------------------------------------- /packages/vue-resizor/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-resizor", 3 | "version": "0.1.0", 4 | "type": "module", 5 | "description": "🖱 A Vue component for resizing with dragging", 6 | "repository": "git@github.com:rx-ts/vue.git", 7 | "homepage": "https://github.com/rx-ts/vue/blob/master/packages/vue-resizor", 8 | "author": "JounQin (https://www.1stG.me) ", 9 | "funding": "https://opencollective.com/rxts", 10 | "license": "MIT", 11 | "main": "./lib/index.cjs", 12 | "module": "./lib/index.js", 13 | "exports": { 14 | ".": { 15 | "types": "./lib/index.d.ts", 16 | "import": "./lib/index.esm.mjs", 17 | "require": "./lib/index.cjs", 18 | "default": "./lib/index.js" 19 | }, 20 | "./styles.*": "./lib/styles.*", 21 | "./package.json": "./package.json" 22 | }, 23 | "types": "./lib/index.d.ts", 24 | "files": [ 25 | "lib", 26 | "!**/*.tsbuildinfo" 27 | ], 28 | "keywords": [ 29 | "vue-drag-resizable", 30 | "vue-drag-resize", 31 | "vue-drag-resizer", 32 | "vue-draggable", 33 | "vue-resizable", 34 | "vue-resize", 35 | "vue-resizer", 36 | "vue" 37 | ], 38 | "peerDependencies": { 39 | "vue": "^2.7.0 || ^3.0.0" 40 | }, 41 | "dependencies": { 42 | "tslib": "^2.6.2" 43 | }, 44 | "publishConfig": { 45 | "access": "public" 46 | }, 47 | "sideEffects": false 48 | } 49 | -------------------------------------------------------------------------------- /packages/vue-resizor/src/helpers.ts: -------------------------------------------------------------------------------- 1 | import type { ClientRect, Percent, Pixel } from './types.js' 2 | 3 | export const percent = (value: number | string) => { 4 | value = String(value) 5 | return (value.endsWith('%') ? value : `${value}%`) as Percent 6 | } 7 | 8 | export const percentToRatio = (value: Percent) => +value.slice(0, -1) / 100 9 | 10 | export const ratioToPercent = (value: number): Percent => percent(value * 100) 11 | 12 | export const pixel = (value: number | string) => { 13 | value = String(value) 14 | return (value.endsWith('px') ? value : `${value}px`) as Pixel 15 | } 16 | 17 | const parsePixel = (value: string) => +value.replace(/\s*px\s*$/i, '') 18 | 19 | export const getClientRect = (element: Element): ClientRect => { 20 | const { width, height, top, left } = getComputedStyle(element) 21 | return { 22 | width: parsePixel(width), 23 | height: parsePixel(height), 24 | top: parsePixel(top), 25 | left: parsePixel(left), 26 | } 27 | } 28 | 29 | export const setElementWidth = ( 30 | element: HTMLElement, 31 | width: number, 32 | sum = 0, 33 | ) => { 34 | const containerWidth = getClientRect(element.parentElement!).width 35 | const previousRatio = sum / containerWidth 36 | const currentRatio = width / containerWidth 37 | const percentWidth = ratioToPercent( 38 | previousRatio + currentRatio > 1 ? 1 - previousRatio : currentRatio, 39 | ) 40 | Object.assign(element.style, { 41 | width: percentWidth, 42 | flexBasis: percentWidth, 43 | maxWidth: percentWidth, 44 | }) 45 | return sum + width 46 | } 47 | 48 | export const setElementHeight = ( 49 | element: HTMLElement, 50 | height: number, 51 | sum = 0, 52 | ) => { 53 | const containerHeight = getClientRect(element.parentElement!).height 54 | const previousRatio = sum / containerHeight 55 | const currentRatio = height / containerHeight 56 | element.style.height = ratioToPercent( 57 | previousRatio + currentRatio > 1 ? 1 - previousRatio : currentRatio, 58 | ) 59 | return sum + height 60 | } 61 | 62 | export const preventDefault = (event: Event) => { 63 | event.preventDefault() 64 | } 65 | 66 | export const mean = (arr: number[]) => 67 | arr.reduce((acc, num) => acc + num, 0) / arr.length 68 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@rxts/vue", 3 | "version": "0.0.0", 4 | "type": "module", 5 | "description": "Make Vue greater with RxTS.", 6 | "repository": "git@github.com:rx-ts/vue.git", 7 | "author": "JounQin (https://www.1stG.me) ", 8 | "license": "MIT", 9 | "private": true, 10 | "workspaces": [ 11 | "packages/*" 12 | ], 13 | "packageManager": "yarn@1.22.21", 14 | "scripts": { 15 | "build": "run-p build:*", 16 | "build:r": "r -e named -f cjs,esm, --vue-jsx", 17 | "build:styles": "lessc --source-map packages/vue-resizor/src/styles.less packages/vue-resizor/lib/styles.css", 18 | "build:ts": "tsc -b", 19 | "clean": "rimraf dist packages/*/{lib,*.tsbuildinfo}", 20 | "docs:build": "vitepress build .", 21 | "docs:dev": "vitepress dev . --open", 22 | "docs:serve": "vitepress serve . --port 8000", 23 | "lint": "run-p lint:*", 24 | "lint:es": "eslint . --cache -f friendly", 25 | "lint:style": "stylelint . --cache", 26 | "lint:tsc": "vue-tsc --incremental false --noEmit", 27 | "prepare": "simple-git-hooks && yarn-deduplicate --strategy fewer || exit 0", 28 | "prerelease": "yarn build", 29 | "release": "changeset publish", 30 | "typecov": "type-coverage" 31 | }, 32 | "devDependencies": { 33 | "@1stg/app-config": "^10.0.1", 34 | "@changesets/changelog-github": "^0.5.0", 35 | "@changesets/cli": "^2.27.1", 36 | "@d-ts/vue": "^1.0.0", 37 | "@pkgr/rollup": "^6.0.0", 38 | "@types/lodash-es": "^4.17.12", 39 | "@types/node": "^18.19.8", 40 | "@types/qrcode": "^1.5.5", 41 | "@types/web": "^0.0.135", 42 | "@vitejs/plugin-vue-jsx": "^3.1.0", 43 | "less": "^4.2.0", 44 | "lodash-es": "^4.17.21", 45 | "postcss": "^8.4.33", 46 | "qrcode": "^1.5.3", 47 | "qrious": "^4.0.2", 48 | "rimraf": "^5.0.5", 49 | "rxjs": "^7.8.1", 50 | "sass": "^1.70.0", 51 | "type-coverage": "^2.27.1", 52 | "typescript": "^5.3.3", 53 | "vitepress": "^1.0.0-rc.40", 54 | "vue": "^3.4.15", 55 | "vue-tsc": "^1.8.27", 56 | "yarn-deduplicate": "^6.0.2" 57 | }, 58 | "resolutions": { 59 | "prettier": "^3.2.4" 60 | }, 61 | "typeCoverage": { 62 | "atLeast": 100, 63 | "cache": true, 64 | "detail": true, 65 | "ignoreAsAssertion": true, 66 | "ignoreFiles": [ 67 | "**/*.d.ts" 68 | ], 69 | "ignoreNested": true, 70 | "ignoreNonNullAssertion": true, 71 | "showRelativePath": true, 72 | "strict": true, 73 | "update": true 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /packages/vue-qrcode/index.ts: -------------------------------------------------------------------------------- 1 | import type { 2 | QRCodeErrorCorrectionLevel, 3 | QRCodeMaskPattern, 4 | QRCodeSegment, 5 | QRCodeToDataURLOptions, 6 | QRCodeToDataURLOptionsJpegWebp, 7 | QRCodeToSJISFunc, 8 | } from 'qrcode' 9 | import QRCode from 'qrcode' 10 | import { type PropType, defineComponent, h, ref, watch } from 'vue' 11 | 12 | export const LEVELS = [ 13 | 'low', 14 | 'medium', 15 | 'quartile', 16 | 'high', 17 | 'L', 18 | 'M', 19 | 'Q', 20 | 'H', 21 | ] as const 22 | 23 | // eslint-disable-next-line @typescript-eslint/no-magic-numbers 24 | export const MASK_PATTERNS = [0, 1, 2, 3, 4, 5, 6, 7] as const 25 | 26 | export const MODES = ['alphanumeric', 'numeric', 'kanji', 'byte'] as const 27 | 28 | export type { QRCodeSegment } from 'qrcode' 29 | 30 | export type QRCodeValue = QRCodeSegment[] | string 31 | 32 | export const TYPES = ['image/png', 'image/jpeg', 'image/webp'] as const 33 | 34 | export type QRCodeProps = Omit & 35 | QRCodeToDataURLOptionsJpegWebp['rendererOpts'] & { 36 | value: QRCodeValue 37 | } 38 | 39 | const MAX_QR_VERSION = 40 40 | 41 | export default defineComponent({ 42 | props: { 43 | version: { 44 | type: Number, 45 | validator: (version: number) => 46 | version === Number.parseInt(String(version), 10) && 47 | version >= 1 && 48 | version <= MAX_QR_VERSION, 49 | }, 50 | errorCorrectionLevel: { 51 | type: String as PropType, 52 | validator: (level: QRCodeErrorCorrectionLevel) => LEVELS.includes(level), 53 | }, 54 | maskPattern: { 55 | type: Number as PropType, 56 | validator: (maskPattern: QRCodeMaskPattern) => 57 | MASK_PATTERNS.includes(maskPattern), 58 | }, 59 | toSJISFunc: Function as PropType, 60 | margin: Number, 61 | scale: Number, 62 | width: Number, 63 | color: { 64 | type: Object, 65 | validator: (color: QRCodeProps['color']) => 66 | (['dark', 'light'] as const).every(c => 67 | ['string', 'undefined'].includes(typeof color![c]), 68 | ), 69 | required: true, 70 | }, 71 | type: { 72 | type: String as PropType, 73 | validator: (type: QRCodeProps['type']) => TYPES.includes(type!), 74 | required: true, 75 | }, 76 | quality: { 77 | type: Number, 78 | validator: (quality: number) => 79 | quality === Number.parseFloat(String(quality)) && 80 | quality >= 0 && 81 | quality <= 1, 82 | required: false, 83 | }, 84 | value: { 85 | type: [String, Array] as PropType, 86 | required: true, 87 | validator(value: QRCodeValue) { 88 | if (typeof value === 'string') { 89 | return true 90 | } 91 | return value.every( 92 | it => 93 | typeof it.data === 'string' && 94 | 'mode' in it && 95 | it.mode && 96 | MODES.includes(it.mode), 97 | ) 98 | }, 99 | }, 100 | }, 101 | setup(props, { attrs, emit }) { 102 | const dataUrlRef = ref() 103 | 104 | const toDataURL = () => { 105 | const { quality, value, ...rest } = props 106 | QRCode.toDataURL( 107 | value, 108 | Object.assign(rest, quality == null || { renderOptions: { quality } }), 109 | ) 110 | .then(dataUrl => { 111 | dataUrlRef.value = dataUrl 112 | emit('change', dataUrl) 113 | }) 114 | .catch((err: unknown) => emit('error', err)) 115 | } 116 | 117 | watch(props, toDataURL, { immediate: true }) 118 | 119 | return () => 120 | h('img', { 121 | ...attrs, 122 | src: dataUrlRef.value, 123 | }) 124 | }, 125 | }) 126 | -------------------------------------------------------------------------------- /packages/vue-resizor/README.md: -------------------------------------------------------------------------------- 1 | # VueResizor 2 | 3 | > 🖱 A Vue component for resizing with dragging 4 | 5 | ## TOC 6 | 7 | - [Demo](#demo) 8 | - [Usage](#usage) 9 | - [Available Props](#available-props) 10 | - [Available Events](#available-events) 11 | - [Sponsors](#sponsors) 12 | - [Backers](#backers) 13 | - [Changelog](#changelog) 14 | - [License](#license) 15 | 16 | ## Demo 17 | 18 | 19 | 20 | ## Usage 21 | 22 | ```vue 23 | 31 | 39 | ``` 40 | 41 | ## Available Props 42 | 43 | | prop | type (range) | default value | 44 | | ------------ | --------------------------------- | ------------- | 45 | | `indicators` | `Indicator[]` | N/A | 46 | | `size` | `number` (indicator width/height) | `2` | 47 | 48 | ## Available Events 49 | 50 | | event | type | 51 | | ------------------- | ------------- | 52 | | 'update:indicators' | `Indicator[]` | 53 | 54 | ## Sponsors 55 | 56 | | 1stG | RxTS | UnTS | 57 | | ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | 58 | | [![1stG Open Collective backers and sponsors](https://opencollective.com/1stG/organizations.svg)](https://opencollective.com/1stG) | [![RxTS Open Collective backers and sponsors](https://opencollective.com/rxts/organizations.svg)](https://opencollective.com/rxts) | [![UnTS Open Collective backers and sponsors](https://opencollective.com/unts/organizations.svg)](https://opencollective.com/unts) | 59 | 60 | ## Backers 61 | 62 | [![Backers](https://raw.githubusercontent.com/1stG/static/master/sponsors.svg)](https://github.com/sponsors/JounQin) 63 | 64 | | 1stG | RxTS | UnTS | 65 | | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | 66 | | [![1stG Open Collective backers and sponsors](https://opencollective.com/1stG/individuals.svg)](https://opencollective.com/1stG) | [![RxTS Open Collective backers and sponsors](https://opencollective.com/rxts/individuals.svg)](https://opencollective.com/rxts) | [![UnTS Open Collective backers and sponsors](https://opencollective.com/unts/individuals.svg)](https://opencollective.com/unts) | 67 | 68 | ## Changelog 69 | 70 | Detailed changes for each release are documented in [CHANGELOG.md](./CHANGELOG.md). 71 | 72 | ## License 73 | 74 | [MIT][] © [JounQin][]@[1stG.me][] 75 | 76 | [1stg.me]: https://www.1stg.me 77 | [jounqin]: https://GitHub.com/JounQin 78 | [mit]: http://opensource.org/licenses/MIT 79 | -------------------------------------------------------------------------------- /packages/vue-resizor/index.md: -------------------------------------------------------------------------------- 1 | # VueResizor 2 | 3 | > 🖱 A Vue component for resizing with dragging 4 | 5 | ## TOC 6 | 7 | - [Demo](#demo) 8 | - [Usage](#usage) 9 | - [Available Props](#available-props) 10 | - [Available Events](#available-events) 11 | - [Sponsors](#sponsors) 12 | - [Backers](#backers) 13 | - [Changelog](#changelog) 14 | - [License](#license) 15 | 16 | ## Demo 17 | 18 | 19 | 20 | ## Usage 21 | 22 | ```vue 23 | 31 | 39 | ``` 40 | 41 | ## Available Props 42 | 43 | | prop | type (range) | default value | 44 | | ------------ | --------------------------------- | ------------- | 45 | | `indicators` | `Indicator[]` | N/A | 46 | | `size` | `number` (indicator width/height) | `2` | 47 | 48 | ## Available Events 49 | 50 | | event | type | 51 | | ------------------- | ------------- | 52 | | 'update:indicators' | `Indicator[]` | 53 | 54 | ## Sponsors 55 | 56 | | 1stG | RxTS | UnTS | 57 | | ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | 58 | | [![1stG Open Collective backers and sponsors](https://opencollective.com/1stG/organizations.svg)](https://opencollective.com/1stG) | [![RxTS Open Collective backers and sponsors](https://opencollective.com/rxts/organizations.svg)](https://opencollective.com/rxts) | [![UnTS Open Collective backers and sponsors](https://opencollective.com/unts/organizations.svg)](https://opencollective.com/unts) | 59 | 60 | ## Backers 61 | 62 | [![Backers](https://raw.githubusercontent.com/1stG/static/master/sponsors.svg)](https://github.com/sponsors/JounQin) 63 | 64 | | 1stG | RxTS | UnTS | 65 | | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | 66 | | [![1stG Open Collective backers and sponsors](https://opencollective.com/1stG/individuals.svg)](https://opencollective.com/1stG) | [![RxTS Open Collective backers and sponsors](https://opencollective.com/rxts/individuals.svg)](https://opencollective.com/rxts) | [![UnTS Open Collective backers and sponsors](https://opencollective.com/unts/individuals.svg)](https://opencollective.com/unts) | 67 | 68 | ## Changelog 69 | 70 | Detailed changes for each release are documented in [CHANGELOG.md](./CHANGELOG.md). 71 | 72 | ## License 73 | 74 | [MIT][] © [JounQin][]@[1stG.me][] 75 | 76 | [1stg.me]: https://www.1stg.me 77 | [jounqin]: https://GitHub.com/JounQin 78 | [mit]: http://opensource.org/licenses/MIT 79 | -------------------------------------------------------------------------------- /.vitepress/components/VueQriousDemo.vue: -------------------------------------------------------------------------------- 1 | 94 | 146 | 188 | -------------------------------------------------------------------------------- /packages/vue-qrious/README.md: -------------------------------------------------------------------------------- 1 | # VueQrious 2 | 3 | > 🤳 A Vue component for QR code generation with [qrious](https://github.com/neocotic/qrious) 4 | 5 | ## TOC 6 | 7 | - [Demo](#demo) 8 | - [Usage](#usage) 9 | - [Available Props](#available-props) 10 | - [Available Events](#available-events) 11 | - [Sponsors](#sponsors) 12 | - [Backers](#backers) 13 | - [Changelog](#changelog) 14 | - [License](#license) 15 | 16 | ## Demo 17 | 18 | 19 | 20 | ## Usage 21 | 22 | ```vue 23 | 29 | 48 | ``` 49 | 50 | ## Available Props 51 | 52 | | prop | type (range) | default value | 53 | | ----------------- | ------------------------------------ | ------------- | 54 | | `background` | `string` (CSS color) | `"#ffffff"` | 55 | | `backgroundAlpha` | `number` (0.1-1.0) | `1.0` | 56 | | `foreground` | `string` (CSS color) | `"#000000"` | 57 | | `foregroundAlpha` | `number` (0.1-1.0) | `1.0` | 58 | | `level` | `string` ("L", "M", "Q", "H") | `"L"` | 59 | | `mime` | `string` ("image/png", "image/jpeg") | `"image/png"` | 60 | | `padding` | `number` | `null` | 61 | | `size` | `number` | `100` | 62 | | `value` | `string` | N/A | 63 | 64 | ## Available Events 65 | 66 | | event | type | 67 | | ------ | ----------------- | 68 | | change | `dataUrl: string` | 69 | 70 | ## Sponsors 71 | 72 | | 1stG | RxTS | UnTS | 73 | | ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | 74 | | [![1stG Open Collective backers and sponsors](https://opencollective.com/1stG/organizations.svg)](https://opencollective.com/1stG) | [![RxTS Open Collective backers and sponsors](https://opencollective.com/rxts/organizations.svg)](https://opencollective.com/rxts) | [![UnTS Open Collective backers and sponsors](https://opencollective.com/unts/organizations.svg)](https://opencollective.com/unts) | 75 | 76 | ## Backers 77 | 78 | [![Backers](https://raw.githubusercontent.com/1stG/static/master/sponsors.svg)](https://github.com/sponsors/JounQin) 79 | 80 | | 1stG | RxTS | UnTS | 81 | | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | 82 | | [![1stG Open Collective backers and sponsors](https://opencollective.com/1stG/individuals.svg)](https://opencollective.com/1stG) | [![RxTS Open Collective backers and sponsors](https://opencollective.com/rxts/individuals.svg)](https://opencollective.com/rxts) | [![UnTS Open Collective backers and sponsors](https://opencollective.com/unts/individuals.svg)](https://opencollective.com/unts) | 83 | 84 | ## Changelog 85 | 86 | Detailed changes for each release are documented in [CHANGELOG.md](./CHANGELOG.md). 87 | 88 | ## License 89 | 90 | [MIT][] © [JounQin][]@[1stG.me][] 91 | 92 | [1stg.me]: https://www.1stg.me 93 | [jounqin]: https://GitHub.com/JounQin 94 | [mit]: http://opensource.org/licenses/MIT 95 | -------------------------------------------------------------------------------- /packages/vue-qrious/index.md: -------------------------------------------------------------------------------- 1 | # VueQrious 2 | 3 | > 🤳 A Vue component for QR code generation with [qrious](https://github.com/neocotic/qrious) 4 | 5 | ## TOC 6 | 7 | - [Demo](#demo) 8 | - [Usage](#usage) 9 | - [Available Props](#available-props) 10 | - [Available Events](#available-events) 11 | - [Sponsors](#sponsors) 12 | - [Backers](#backers) 13 | - [Changelog](#changelog) 14 | - [License](#license) 15 | 16 | ## Demo 17 | 18 | 19 | 20 | ## Usage 21 | 22 | ```vue 23 | 29 | 48 | ``` 49 | 50 | ## Available Props 51 | 52 | | prop | type (range) | default value | 53 | | ----------------- | ------------------------------------ | ------------- | 54 | | `background` | `string` (CSS color) | `"#ffffff"` | 55 | | `backgroundAlpha` | `number` (0.1-1.0) | `1.0` | 56 | | `foreground` | `string` (CSS color) | `"#000000"` | 57 | | `foregroundAlpha` | `number` (0.1-1.0) | `1.0` | 58 | | `level` | `string` ("L", "M", "Q", "H") | `"L"` | 59 | | `mime` | `string` ("image/png", "image/jpeg") | `"image/png"` | 60 | | `padding` | `number` | `null` | 61 | | `size` | `number` | `100` | 62 | | `value` | `string` | N/A | 63 | 64 | ## Available Events 65 | 66 | | event | type | 67 | | ------ | ----------------- | 68 | | change | `dataUrl: string` | 69 | 70 | ## Sponsors 71 | 72 | | 1stG | RxTS | UnTS | 73 | | ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | 74 | | [![1stG Open Collective backers and sponsors](https://opencollective.com/1stG/organizations.svg)](https://opencollective.com/1stG) | [![RxTS Open Collective backers and sponsors](https://opencollective.com/rxts/organizations.svg)](https://opencollective.com/rxts) | [![UnTS Open Collective backers and sponsors](https://opencollective.com/unts/organizations.svg)](https://opencollective.com/unts) | 75 | 76 | ## Backers 77 | 78 | [![Backers](https://raw.githubusercontent.com/1stG/static/master/sponsors.svg)](https://github.com/sponsors/JounQin) 79 | 80 | | 1stG | RxTS | UnTS | 81 | | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | 82 | | [![1stG Open Collective backers and sponsors](https://opencollective.com/1stG/individuals.svg)](https://opencollective.com/1stG) | [![RxTS Open Collective backers and sponsors](https://opencollective.com/rxts/individuals.svg)](https://opencollective.com/rxts) | [![UnTS Open Collective backers and sponsors](https://opencollective.com/unts/individuals.svg)](https://opencollective.com/unts) | 83 | 84 | ## Changelog 85 | 86 | Detailed changes for each release are documented in [CHANGELOG.md](./CHANGELOG.md). 87 | 88 | ## License 89 | 90 | [MIT][] © [JounQin][]@[1stG.me][] 91 | 92 | [1stg.me]: https://www.1stg.me 93 | [jounqin]: https://GitHub.com/JounQin 94 | [mit]: http://opensource.org/licenses/MIT 95 | -------------------------------------------------------------------------------- /packages/vue-qrious/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | ## 3.1.1 4 | 5 | ### Patch Changes 6 | 7 | - [#174](https://github.com/rx-ts/vue/pull/174) [`53ebd70`](https://github.com/rx-ts/vue/commit/53ebd70cd91e9158be6c7f9ce93f5200faf94f3c) Thanks [@JounQin](https://github.com/JounQin)! - chore: add `package.json` into `exports` 8 | 9 | - [#176](https://github.com/rx-ts/vue/pull/176) [`0f83439`](https://github.com/rx-ts/vue/commit/0f8343946363bf59bdc10277f28e442d4478fca2) Thanks [@JounQin](https://github.com/JounQin)! - feat: add esm entries so that no jsx transformation required 10 | 11 | ## 3.1.0 12 | 13 | ### Minor Changes 14 | 15 | - [#146](https://github.com/rx-ts/vue/pull/146) [`71ccf87`](https://github.com/rx-ts/vue/commit/71ccf876d1e838c9d3cd2ee1ccbef94bbde73fc1) Thanks [@JounQin](https://github.com/JounQin)! - feat: support dataURL `change` event 16 | 17 | ## 3.0.1 18 | 19 | ### Patch Changes 20 | 21 | - [`0fdda1f`](https://github.com/rx-ts/vue/commit/0fdda1f91fea0393753c044134a19fbed13e5843) Thanks [@JounQin](https://github.com/JounQin)! - chore: remove unstandard donate field in package.json 22 | 23 | ## 3.0.0 24 | 25 | ### Major Changes 26 | 27 | - [`dbe5c27`](https://github.com/rx-ts/vue/commit/dbe5c2774639fabe1a67650c83f97f8d2ff8ff15) Thanks [@JounQin](https://github.com/JounQin)! - feat!: require vue 2.7.0+ 28 | 29 | close #140 30 | 31 | ## 2.0.1 32 | 33 | ### Patch Changes 34 | 35 | - [#131](https://github.com/rx-ts/vue/pull/131) [`7fff181`](https://github.com/rx-ts/vue/commit/7fff181ac816fed5aa9ced8e5cfb2ff20c50a105) Thanks [@JounQin](https://github.com/JounQin)! - fix: add main and module fields for compatibility 36 | 37 | ## 2.0.0 38 | 39 | ### Major Changes 40 | 41 | - [`c03e0c5`](https://github.com/rx-ts/vue/commit/c03e0c565d126159f6194f168c3f6af6ce2cd512) Thanks [@JounQin](https://github.com/JounQin)! - feat: use vue-demi for both vue 2 and 3 42 | 43 | All notable changes to this project will be documented in this file. 44 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. 45 | 46 | # 1.6.0 (2021-04-30) 47 | 48 | ### Features 49 | 50 | - bump all (dev)Dependencies, add error event for vue-qrcode ([67a3cc7](https://github.com/rx-ts/vue/commit/67a3cc75cd160beb971646eb33f9e05f30ee09f0)) 51 | 52 | ## 1.5.6 (2021-04-30) 53 | 54 | ### Bug Fixes 55 | 56 | - mark tslib as dependency ([7f53641](https://github.com/rx-ts/vue/commit/7f53641e2c9c57432b3cc59a4a47aacaecf9267b)) 57 | 58 | ## 1.5.5 (2020-11-16) 59 | 60 | **Note:** Version bump only for package vue-qrious 61 | 62 | ## 1.5.4 (2020-11-16) 63 | 64 | ### Bug Fixes 65 | 66 | - bump all deps, reference types correctly - fix [#102](https://github.com/rx-ts/vue/issues/102) ([1db0d36](https://github.com/rx-ts/vue/commit/1db0d36300263db25358f80c25e3598093c7e445)) 67 | 68 | ## 1.5.3 (2020-01-30) 69 | 70 | **Note:** Version bump only for package vue-qrious 71 | 72 | ## 1.5.2 (2020-01-30) 73 | 74 | **Note:** Version bump only for package vue-qrious 75 | 76 | ## 1.5.1 (2020-01-29) 77 | 78 | ### Bug Fixes 79 | 80 | - incorrect pkg contents ([f0ea685](https://github.com/rx-ts/vue/commit/f0ea685c51d95e9ce24c91e2e4cd1d955b7c46aa)) 81 | 82 | # [1.5.0](https://github.com/rx-ts/vue/compare/vue-qrious@1.4.3...vue-qrious@1.5.0) (2020-01-29) 83 | 84 | ### Features 85 | 86 | - **vue-translator:** migrate to lerna monorepo ([1e3ce18](https://github.com/rx-ts/vue/commit/1e3ce180af238aa612b28f2b7944f5eeb9664c40)) 87 | 88 | ## [1.4.3](https://github.com/rx-ts/vue/compare/vue-qrious@1.4.2...vue-qrious@1.4.3) (2020-01-17) 89 | 90 | ### Bug Fixes 91 | 92 | - dataUrl initialize value should be empty string ([846220d](https://github.com/rx-ts/vue/commit/846220ddf5bc47416e144e02ff559f35edc17789)) 93 | 94 | ## [1.4.2](https://github.com/rx-ts/vue/compare/vue-qrious@1.4.1...vue-qrious@1.4.2) (2019-09-23) 95 | 96 | ### Bug Fixes 97 | 98 | - **deps:** bump dependencies, correct package homepages ([41b6894](https://github.com/rx-ts/vue/commit/41b6894)) 99 | 100 | ## [1.4.1](https://github.com/rx-ts/vue/compare/vue-qrious@1.4.0...vue-qrious@1.4.1) (2019-09-10) 101 | 102 | ### Bug Fixes 103 | 104 | - **deps:** bump dependencies, pass $attrs as domProps ([7041167](https://github.com/rx-ts/vue/commit/7041167)) 105 | 106 | # [1.4.0](https://github.com/rx-ts/vue/compare/vue-qrious@1.3.2...vue-qrious@1.4.0) (2019-09-07) 107 | 108 | ### Bug Fixes 109 | 110 | - **qrcode:** example code, add keywords field in packages.json ([bc5fa40](https://github.com/rx-ts/vue/commit/bc5fa40)) 111 | 112 | ### Features 113 | 114 | - add @rxts/qrcode package, improve documentation ([0cdcaa7](https://github.com/rx-ts/vue/commit/0cdcaa7)) 115 | - **qrcode:** rename vue-qrcode package name, thanks to [@xiaokaike](https://github.com/xiaokaike) ([02408b3](https://github.com/rx-ts/vue/commit/02408b3)) 116 | 117 | ## [1.3.1](https://github.com/rx-ts/vue/compare/vue-qrious@1.3.0...vue-qrious@1.3.1) (2019-09-03) 118 | 119 | ### Bug Fixes 120 | 121 | - vue should be peer dependency of vue-qrious ([4e05f1e](https://github.com/rx-ts/vue/commit/4e05f1e)) 122 | 123 | # 1.3.0 (2019-09-03) 124 | 125 | ### Features 126 | 127 | - refactor to typescript based codes, more output formats ([4ac0dc4](https://github.com/rx-ts/vue/commit/4ac0dc4)) 128 | -------------------------------------------------------------------------------- /packages/vue-qrcode/index.md: -------------------------------------------------------------------------------- 1 | # VueQrcode 2 | 3 | > 🤳 A Vue component for QR code generation with [qrcode](https://github.com/soldair/node-qrcode) 4 | 5 | ## TOC 6 | 7 | - [Demo](#demo) 8 | - [Usage](#usage) 9 | - [Available Props](#available-props) 10 | - [Available Events](#available-events) 11 | - [Sponsors](#sponsors) 12 | - [Backers](#backers) 13 | - [Changelog](#changelog) 14 | - [License](#license) 15 | 16 | ## Demo 17 | 18 | 19 | 20 | ## Usage 21 | 22 | ```vue 23 | 26 | 35 | ``` 36 | 37 | ## Available Props 38 | 39 | | prop | type (range) | default value | 40 | | ---------------------- | ------------------------------------------------------------------ | ------------------------------------------- | 41 | | `version` | `number` (1-40) | N/A | 42 | | `errorCorrectionLevel` | `String` ('low', 'medium', 'quartile', 'high', 'L', 'M', 'Q', 'H') | `'M'` | 43 | | `maskPattern` | `number` (0-7) | N/A | 44 | | `toSJISFunc` | `Function` | N/A | 45 | | `margin` | `number` | `4` | 46 | | `scale` | `number` | `4` | 47 | | `width` | `number` | N/A | 48 | | `color` | `{ dark: string; light:string }` | `{ dark: '#000000ff', light: '#ffffffff' }` | 49 | | `type` | `string` ('image/png', 'image/jpeg', 'image/webp') | `'image/png'` | 50 | | `quality` | `number`(0-1) | `0.92` | 51 | | `value` | `string \|Array<{ data: string; mode?: string }>` | N/A | 52 | 53 | ## Available Events 54 | 55 | | event | type | 56 | | ------ | ----------------- | 57 | | change | `dataUrl: string` | 58 | 59 | ## Sponsors 60 | 61 | | 1stG | RxTS | UnTS | 62 | | ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | 63 | | [![1stG Open Collective backers and sponsors](https://opencollective.com/1stG/organizations.svg)](https://opencollective.com/1stG) | [![RxTS Open Collective backers and sponsors](https://opencollective.com/rxts/organizations.svg)](https://opencollective.com/rxts) | [![UnTS Open Collective backers and sponsors](https://opencollective.com/unts/organizations.svg)](https://opencollective.com/unts) | 64 | 65 | ## Backers 66 | 67 | [![Backers](https://raw.githubusercontent.com/1stG/static/master/sponsors.svg)](https://github.com/sponsors/JounQin) 68 | 69 | | 1stG | RxTS | UnTS | 70 | | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | 71 | | [![1stG Open Collective backers and sponsors](https://opencollective.com/1stG/individuals.svg)](https://opencollective.com/1stG) | [![RxTS Open Collective backers and sponsors](https://opencollective.com/rxts/individuals.svg)](https://opencollective.com/rxts) | [![UnTS Open Collective backers and sponsors](https://opencollective.com/unts/individuals.svg)](https://opencollective.com/unts) | 72 | 73 | ## Changelog 74 | 75 | Detailed changes for each release are documented in [CHANGELOG.md](./CHANGELOG.md). 76 | 77 | ## License 78 | 79 | [MIT][] © [JounQin][]@[1stG.me][] 80 | 81 | [1stg.me]: https://www.1stg.me 82 | [jounqin]: https://GitHub.com/JounQin 83 | [mit]: http://opensource.org/licenses/MIT 84 | -------------------------------------------------------------------------------- /packages/vue-qrcode/README.md: -------------------------------------------------------------------------------- 1 | # VueQrcode 2 | 3 | > 🤳 A Vue component for QR code generation with [qrcode](https://github.com/soldair/node-qrcode) 4 | 5 | ## TOC 6 | 7 | - [Demo](#demo) 8 | - [Usage](#usage) 9 | - [Available Props](#available-props) 10 | - [Available Events](#available-events) 11 | - [Sponsors](#sponsors) 12 | - [Backers](#backers) 13 | - [Changelog](#changelog) 14 | - [License](#license) 15 | 16 | ## Demo 17 | 18 | 19 | 20 | ## Usage 21 | 22 | ```vue 23 | 29 | 48 | ``` 49 | 50 | ## Available Props 51 | 52 | | prop | type (range) | default value | 53 | | ---------------------- | ------------------------------------------------------------------ | ------------------------------------------- | 54 | | `version` | `number` (1-40) | N/A | 55 | | `errorCorrectionLevel` | `String` ('low', 'medium', 'quartile', 'high', 'L', 'M', 'Q', 'H') | `'M'` | 56 | | `maskPattern` | `number` (0-7) | N/A | 57 | | `toSJISFunc` | `Function` | N/A | 58 | | `margin` | `number` | `4` | 59 | | `scale` | `number` | `4` | 60 | | `width` | `number` | N/A | 61 | | `color` | `{ dark: string; light:string }` | `{ dark: '#000000ff', light: '#ffffffff' }` | 62 | | `type` | `string` ('image/png', 'image/jpeg', 'image/webp') | `'image/png'` | 63 | | `quality` | `number`(0-1) | `0.92` | 64 | | `value` | `string \|Array<{ data: string; mode?: string }>` | N/A | 65 | 66 | ## Available Events 67 | 68 | | event | type | 69 | | ------ | ----------------- | 70 | | change | `dataUrl: string` | 71 | 72 | ## Sponsors 73 | 74 | | 1stG | RxTS | UnTS | 75 | | ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | 76 | | [![1stG Open Collective backers and sponsors](https://opencollective.com/1stG/organizations.svg)](https://opencollective.com/1stG) | [![RxTS Open Collective backers and sponsors](https://opencollective.com/rxts/organizations.svg)](https://opencollective.com/rxts) | [![UnTS Open Collective backers and sponsors](https://opencollective.com/unts/organizations.svg)](https://opencollective.com/unts) | 77 | 78 | ## Backers 79 | 80 | [![Backers](https://raw.githubusercontent.com/1stG/static/master/sponsors.svg)](https://github.com/sponsors/JounQin) 81 | 82 | | 1stG | RxTS | UnTS | 83 | | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | 84 | | [![1stG Open Collective backers and sponsors](https://opencollective.com/1stG/individuals.svg)](https://opencollective.com/1stG) | [![RxTS Open Collective backers and sponsors](https://opencollective.com/rxts/individuals.svg)](https://opencollective.com/rxts) | [![UnTS Open Collective backers and sponsors](https://opencollective.com/unts/individuals.svg)](https://opencollective.com/unts) | 85 | 86 | ## Changelog 87 | 88 | Detailed changes for each release are documented in [CHANGELOG.md](./CHANGELOG.md). 89 | 90 | ## License 91 | 92 | [MIT][] © [JounQin][]@[1stG.me][] 93 | 94 | [1stg.me]: https://www.1stg.me 95 | [jounqin]: https://GitHub.com/JounQin 96 | [mit]: http://opensource.org/licenses/MIT 97 | -------------------------------------------------------------------------------- /packages/vue-qrcode/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | ## 2.2.2 4 | 5 | ### Patch Changes 6 | 7 | - [#179](https://github.com/rx-ts/vue/pull/179) [`842f1e2`](https://github.com/rx-ts/vue/commit/842f1e2bf965ab62e6d54055cc891e9a33324fce) Thanks [@JounQin](https://github.com/JounQin)! - fix: export `QRCodeSegment` as type 8 | 9 | ## 2.2.1 10 | 11 | ### Patch Changes 12 | 13 | - [#174](https://github.com/rx-ts/vue/pull/174) [`53ebd70`](https://github.com/rx-ts/vue/commit/53ebd70cd91e9158be6c7f9ce93f5200faf94f3c) Thanks [@JounQin](https://github.com/JounQin)! - chore: add `package.json` into `exports` 14 | 15 | - [#176](https://github.com/rx-ts/vue/pull/176) [`0f83439`](https://github.com/rx-ts/vue/commit/0f8343946363bf59bdc10277f28e442d4478fca2) Thanks [@JounQin](https://github.com/JounQin)! - feat: add esm entries so that no jsx transformation required 16 | 17 | ## 2.2.0 18 | 19 | ### Minor Changes 20 | 21 | - [#146](https://github.com/rx-ts/vue/pull/146) [`71ccf87`](https://github.com/rx-ts/vue/commit/71ccf876d1e838c9d3cd2ee1ccbef94bbde73fc1) Thanks [@JounQin](https://github.com/JounQin)! - feat: support dataURL `change` event 22 | 23 | ## 2.1.0 24 | 25 | ### Minor Changes 26 | 27 | - [`0fdda1f`](https://github.com/rx-ts/vue/commit/0fdda1f91fea0393753c044134a19fbed13e5843) Thanks [@JounQin](https://github.com/JounQin)! - feat: upgrade qrcode to v1.5.0+ 28 | 29 | ### Patch Changes 30 | 31 | - [`0fdda1f`](https://github.com/rx-ts/vue/commit/0fdda1f91fea0393753c044134a19fbed13e5843) Thanks [@JounQin](https://github.com/JounQin)! - chore: remove unstandard donate field in package.json 32 | 33 | ## 2.0.0 34 | 35 | ### Major Changes 36 | 37 | - [`dbe5c27`](https://github.com/rx-ts/vue/commit/dbe5c2774639fabe1a67650c83f97f8d2ff8ff15) Thanks [@JounQin](https://github.com/JounQin)! - feat!: require vue 2.7.0+ 38 | 39 | close #140 40 | 41 | ## 1.0.1 42 | 43 | ### Patch Changes 44 | 45 | - [#131](https://github.com/rx-ts/vue/pull/131) [`7fff181`](https://github.com/rx-ts/vue/commit/7fff181ac816fed5aa9ced8e5cfb2ff20c50a105) Thanks [@JounQin](https://github.com/JounQin)! - fix: add main and module fields for compatibility 46 | 47 | ## 1.0.0 48 | 49 | ### Major Changes 50 | 51 | - [`c03e0c5`](https://github.com/rx-ts/vue/commit/c03e0c565d126159f6194f168c3f6af6ce2cd512) Thanks [@JounQin](https://github.com/JounQin)! - feat: use vue-demi for both vue 2 and 3 52 | 53 | All notable changes to this project will be documented in this file. 54 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. 55 | 56 | # 0.4.0 (2021-04-30) 57 | 58 | ### Features 59 | 60 | - bump all (dev)Dependencies, add error event for vue-qrcode ([67a3cc7](https://github.com/rx-ts/vue/commit/67a3cc75cd160beb971646eb33f9e05f30ee09f0)) 61 | 62 | ## 0.3.6 (2021-04-30) 63 | 64 | ### Bug Fixes 65 | 66 | - mark tslib as dependency ([7f53641](https://github.com/rx-ts/vue/commit/7f53641e2c9c57432b3cc59a4a47aacaecf9267b)) 67 | 68 | ## 0.3.5 (2020-11-16) 69 | 70 | **Note:** Version bump only for package vue-qrcode 71 | 72 | ## 0.3.4 (2020-11-16) 73 | 74 | ### Bug Fixes 75 | 76 | - bump all deps, reference types correctly - fix [#102](https://github.com/rx-ts/vue/issues/102) ([1db0d36](https://github.com/rx-ts/vue/commit/1db0d36300263db25358f80c25e3598093c7e445)) 77 | 78 | ## 0.3.3 (2020-01-30) 79 | 80 | **Note:** Version bump only for package vue-qrcode 81 | 82 | ## 0.3.2 (2020-01-30) 83 | 84 | **Note:** Version bump only for package vue-qrcode 85 | 86 | ## 0.3.1 (2020-01-29) 87 | 88 | ### Bug Fixes 89 | 90 | - incorrect pkg contents ([f0ea685](https://github.com/rx-ts/vue/commit/f0ea685c51d95e9ce24c91e2e4cd1d955b7c46aa)) 91 | 92 | # [0.3.0](https://github.com/rx-ts/vue/compare/vue-qrcode@0.2.3...vue-qrcode@0.3.0) (2020-01-29) 93 | 94 | ### Features 95 | 96 | - **vue-translator:** migrate to lerna monorepo ([1e3ce18](https://github.com/rx-ts/vue/commit/1e3ce180af238aa612b28f2b7944f5eeb9664c40)) 97 | 98 | ## [0.2.3](https://github.com/rx-ts/vue/compare/vue-qrcode@0.2.2...vue-qrcode@0.2.3) (2020-01-17) 99 | 100 | ### Bug Fixes 101 | 102 | - dataUrl initialize value should be empty string ([846220d](https://github.com/rx-ts/vue/commit/846220ddf5bc47416e144e02ff559f35edc17789)) 103 | 104 | ## [0.2.2](https://github.com/rx-ts/vue/compare/vue-qrcode@0.2.1...vue-qrcode@0.2.2) (2019-09-23) 105 | 106 | ### Bug Fixes 107 | 108 | - **deps:** bump dependencies, correct package homepages ([41b6894](https://github.com/rx-ts/vue/commit/41b6894)) 109 | 110 | ## [0.2.1](https://github.com/rx-ts/vue/compare/vue-qrcode@0.2.0...vue-qrcode@0.2.1) (2019-09-10) 111 | 112 | ### Bug Fixes 113 | 114 | - **deps:** bump dependencies, pass $attrs as domProps ([7041167](https://github.com/rx-ts/vue/commit/7041167)) 115 | 116 | # 0.2.0 (2019-09-05) 117 | 118 | ### Bug Fixes 119 | 120 | - **qrcode:** example code, add keywords field in packages.json ([bc5fa40](https://github.com/rx-ts/vue/commit/bc5fa40)) 121 | 122 | ### Features 123 | 124 | - add @rxts/qrcode package, improve documentation ([0cdcaa7](https://github.com/rx-ts/vue/commit/0cdcaa7)) 125 | - **qrcode:** rename vue-qrcode package name, thanks to [@xiaokaike](https://github.com/xiaokaike) ([02408b3](https://github.com/rx-ts/vue/commit/02408b3)) 126 | 127 | ## [0.1.2](https://github.com/rx-ts/vue/compare/@rxts/vue-qrcode@0.1.1...@rxts/vue-qrcode@0.1.2) (2019-09-04) 128 | 129 | **Note:** Version bump only for package @rxts/vue-qrcode 130 | 131 | ## [0.1.1](https://github.com/rx-ts/vue/compare/@rxts/vue-qrcode@0.1.0...@rxts/vue-qrcode@0.1.1) (2019-09-04) 132 | 133 | ### Bug Fixes 134 | 135 | - **qrcode:** example code, add keywords field in packages.json ([bc5fa40](https://github.com/rx-ts/vue/commit/bc5fa40)) 136 | 137 | # 0.1.0 (2019-09-04) 138 | 139 | ### Features 140 | 141 | - add @rxts/vue-qrcode package, improve documentation ([0cdcaa7](https://github.com/rx-ts/vue/commit/0cdcaa7)) 142 | -------------------------------------------------------------------------------- /index.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |

12 | 13 | [![GitHub Actions](https://github.com/rx-ts/eslint/workflows/CI/badge.svg)](https://github.com/rx-ts/eslint/actions/workflows/ci.yml) 14 | [![type-coverage](https://img.shields.io/badge/dynamic/json.svg?label=type-coverage&prefix=%E2%89%A5&suffix=%&query=$.typeCoverage.atLeast&uri=https%3A%2F%2Fraw.githubusercontent.com%2Frx-ts%2Fvue%2Fmaster%2Fpackage.json)](https://github.com/plantain-00/type-coverage) 15 | [![GitHub release](https://img.shields.io/github/release/rx-ts/vue)](https://github.com/rx-ts/vue/releases) 16 | 17 | [![Conventional Commits](https://img.shields.io/badge/conventional%20commits-1.0.0-yellow.svg)](https://conventionalcommits.org) 18 | [![Renovate enabled](https://img.shields.io/badge/renovate-enabled-brightgreen.svg)](https://renovatebot.com/) 19 | [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) 20 | [![Code Style: Prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier) 21 | [![changesets](https://img.shields.io/badge/maintained%20with-changesets-176de3.svg)](https://github.com/atlassian/changesets) 22 | 23 | > Make [Vue][] greater with [RxTS][]. 24 | 25 | ## TOC 26 | 27 | - [Homepage](#homepage) 28 | - [Packages](#packages) 29 | - [Install](#install) 30 | - [Sponsors](#sponsors) 31 | - [Backers](#backers) 32 | - [Changelog](#changelog) 33 | - [License](#license) 34 | 35 | ## Homepage 36 | 37 | vue-rx 38 | 39 | ## Packages 40 | 41 | This repository is a monorepo managed by [Changesets][] what means we actually publish several packages to npm from same codebase, including: 42 | 43 | | Package | Description | Version | 44 | | --------------------------------------- | --------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | 45 | | [`vue-qrcode`](/packages/vue-qrcode/) | 🤳 A Vue component for QR code generation with [qrcode][] | [![npm](https://img.shields.io/npm/v/vue-qrcode.svg)](https://www.npmjs.com/package/vue-qrcode) [![View changelog](https://img.shields.io/badge/changelog-explore-brightgreen)](https://changelogs.xyz/vue-qrcode) | 46 | | [`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) [![View changelog](https://img.shields.io/badge/changelog-explore-brightgreen)](https://changelogs.xyz/vue-qrious) | 47 | | [`vue-resizor`](/packages/vue-resizor/) | 🖱 A Vue component for resizing with dragging | [![npm](https://img.shields.io/npm/v/vue-resizor.svg)](https://www.npmjs.com/package/vue-resizor) [![View changelog](https://img.shields.io/badge/changelog-explore-brightgreen)](https://changelogs.xyz/vue-resizor) | 48 | 49 | ## Install 50 | 51 | ```shell 52 | # yarn 53 | yarn add vue-{qrcode,qrious,resizor} 54 | 55 | # npm 56 | npm i vue-{qrcode,qrious,resizor} 57 | ``` 58 | 59 | ## Sponsors 60 | 61 | | 1stG | RxTS | UnTS | 62 | | ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | 63 | | [![1stG Open Collective backers and sponsors](https://opencollective.com/1stG/organizations.svg)](https://opencollective.com/1stG) | [![RxTS Open Collective backers and sponsors](https://opencollective.com/rxts/organizations.svg)](https://opencollective.com/rxts) | [![UnTS Open Collective backers and sponsors](https://opencollective.com/unts/organizations.svg)](https://opencollective.com/unts) | 64 | 65 | ## Backers 66 | 67 | [![Backers](https://raw.githubusercontent.com/1stG/static/master/sponsors.svg)](https://github.com/sponsors/JounQin) 68 | 69 | | 1stG | RxTS | UnTS | 70 | | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | 71 | | [![1stG Open Collective backers and sponsors](https://opencollective.com/1stG/individuals.svg)](https://opencollective.com/1stG) | [![RxTS Open Collective backers and sponsors](https://opencollective.com/rxts/individuals.svg)](https://opencollective.com/rxts) | [![UnTS Open Collective backers and sponsors](https://opencollective.com/unts/individuals.svg)](https://opencollective.com/unts) | 72 | 73 | ## Changelog 74 | 75 | Detailed changes for each release are documented in [CHANGELOG.md](./CHANGELOG.md). 76 | 77 | ## License 78 | 79 | [MIT][] © [JounQin][]@[1stG.me][] 80 | 81 | [1stg.me]: https://www.1stg.me 82 | [changesets]: https://GitHub.com/atlassian/changesets 83 | [rxts]: https://rxjs.dev 84 | [vue]: https://vuejs.org 85 | [jounqin]: https://GitHub.com/JounQin 86 | [mit]: http://opensource.org/licenses/MIT 87 | [qrcode]: https://github.com/soldair/node-qrcode 88 | [qrious]: https://github.com/neocotic/qrious 89 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |

12 | 13 | [![GitHub Actions](https://github.com/rx-ts/eslint/workflows/CI/badge.svg)](https://github.com/rx-ts/eslint/actions/workflows/ci.yml) 14 | [![type-coverage](https://img.shields.io/badge/dynamic/json.svg?label=type-coverage&prefix=%E2%89%A5&suffix=%&query=$.typeCoverage.atLeast&uri=https%3A%2F%2Fraw.githubusercontent.com%2Frx-ts%2Fvue%2Fmaster%2Fpackage.json)](https://github.com/plantain-00/type-coverage) 15 | [![GitHub release](https://img.shields.io/github/release/rx-ts/vue)](https://github.com/rx-ts/vue/releases) 16 | 17 | [![Conventional Commits](https://img.shields.io/badge/conventional%20commits-1.0.0-yellow.svg)](https://conventionalcommits.org) 18 | [![Renovate enabled](https://img.shields.io/badge/renovate-enabled-brightgreen.svg)](https://renovatebot.com/) 19 | [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) 20 | [![Code Style: Prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier) 21 | [![changesets](https://img.shields.io/badge/maintained%20with-changesets-176de3.svg)](https://github.com/atlassian/changesets) 22 | 23 | > Make [Vue][] greater with [RxTS][]. 24 | 25 | ## TOC 26 | 27 | - [Homepage](#homepage) 28 | - [Packages](#packages) 29 | - [Install](#install) 30 | - [Sponsors](#sponsors) 31 | - [Backers](#backers) 32 | - [Changelog](#changelog) 33 | - [License](#license) 34 | 35 | ## Homepage 36 | 37 | vue-rx 38 | 39 | ## Packages 40 | 41 | This repository is a monorepo managed by [Changesets][] what means we actually publish several packages to npm from same codebase, including: 42 | 43 | | Package | Description | Version | 44 | | --------------------------------------- | --------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | 45 | | [`vue-qrcode`](/packages/vue-qrcode/) | 🤳 A Vue component for QR code generation with [qrcode][] | [![npm](https://img.shields.io/npm/v/vue-qrcode.svg)](https://www.npmjs.com/package/vue-qrcode) [![View changelog](https://img.shields.io/badge/changelog-explore-brightgreen)](https://changelogs.xyz/vue-qrcode) | 46 | | [`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) [![View changelog](https://img.shields.io/badge/changelog-explore-brightgreen)](https://changelogs.xyz/vue-qrious) | 47 | | [`vue-resizor`](/packages/vue-resizor/) | 🖱 A Vue component for resizing with dragging | [![npm](https://img.shields.io/npm/v/vue-resizor.svg)](https://www.npmjs.com/package/vue-resizor) [![View changelog](https://img.shields.io/badge/changelog-explore-brightgreen)](https://changelogs.xyz/vue-resizor) | 48 | 49 | ## Install 50 | 51 | ```shell 52 | # yarn 53 | yarn add vue-{qrcode,qrious,resizor} 54 | 55 | # npm 56 | npm i vue-{qrcode,qrious,resizor} 57 | ``` 58 | 59 | ## Sponsors 60 | 61 | | 1stG | RxTS | UnTS | 62 | | ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | 63 | | [![1stG Open Collective backers and sponsors](https://opencollective.com/1stG/organizations.svg)](https://opencollective.com/1stG) | [![RxTS Open Collective backers and sponsors](https://opencollective.com/rxts/organizations.svg)](https://opencollective.com/rxts) | [![UnTS Open Collective backers and sponsors](https://opencollective.com/unts/organizations.svg)](https://opencollective.com/unts) | 64 | 65 | ## Backers 66 | 67 | [![Backers](https://raw.githubusercontent.com/1stG/static/master/sponsors.svg)](https://github.com/sponsors/JounQin) 68 | 69 | | 1stG | RxTS | UnTS | 70 | | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | 71 | | [![1stG Open Collective backers and sponsors](https://opencollective.com/1stG/individuals.svg)](https://opencollective.com/1stG) | [![RxTS Open Collective backers and sponsors](https://opencollective.com/rxts/individuals.svg)](https://opencollective.com/rxts) | [![UnTS Open Collective backers and sponsors](https://opencollective.com/unts/individuals.svg)](https://opencollective.com/unts) | 72 | 73 | ## Changelog 74 | 75 | Detailed changes for each release are documented in [CHANGELOG.md](./CHANGELOG.md). 76 | 77 | ## License 78 | 79 | [MIT][] © [JounQin][]@[1stG.me][] 80 | 81 | [1stg.me]: https://www.1stg.me 82 | [changesets]: https://GitHub.com/atlassian/changesets 83 | [rxts]: https://rxjs.dev 84 | [vue]: https://vuejs.org 85 | [jounqin]: https://GitHub.com/JounQin 86 | [mit]: http://opensource.org/licenses/MIT 87 | [qrcode]: https://github.com/soldair/node-qrcode 88 | [qrious]: https://github.com/neocotic/qrious 89 | -------------------------------------------------------------------------------- /.vitepress/components/VueQrcodeDemo.vue: -------------------------------------------------------------------------------- 1 | 171 | 251 | 293 | -------------------------------------------------------------------------------- /packages/vue-resizor/src/Resizor.tsx: -------------------------------------------------------------------------------- 1 | import type { ComponentPublicInstance, PropType } from 'vue' 2 | import { 3 | defineComponent, 4 | getCurrentInstance, 5 | nextTick, 6 | onMounted, 7 | onUnmounted, 8 | ref, 9 | } from 'vue' 10 | 11 | import { Bem } from './bem.js' 12 | import { 13 | getClientRect, 14 | mean, 15 | percentToRatio, 16 | pixel, 17 | preventDefault, 18 | ratioToPercent, 19 | setElementHeight, 20 | setElementWidth, 21 | } from './helpers.js' 22 | import type { ClientRect, Indicator, ResizorSlots } from './types.js' 23 | 24 | const bem = new Bem('vue-resizor') 25 | 26 | const containerClassName = bem.element('container').toString() 27 | const draggingClassName = bem.modifier('dragging').toString() 28 | const indicatorClassName = bem.modifier('indicator').toString() 29 | const horizontalClassName = bem.modifier('horizontal').toString() 30 | 31 | export default defineComponent({ 32 | props: { 33 | parent: Object as PropType, 34 | indicators: Array, 35 | size: { 36 | type: Number, 37 | default: 2, 38 | }, 39 | }, 40 | setup(props, context) { 41 | const slots = context.slots as Required 42 | const children = slots.default() 43 | 44 | const innerIndicators = ref(props.indicators ?? []) 45 | 46 | const updateIndicators = (indicators: Indicator[], updateProps = false) => { 47 | if (props.indicators || updateProps) { 48 | context.emit('update:indicators', indicators) 49 | } 50 | innerIndicators.value = indicators 51 | } 52 | 53 | let container: HTMLElement 54 | let elements: HTMLElement[] 55 | 56 | // eslint-disable-next-line sonarjs/cognitive-complexity 57 | onMounted(async () => { 58 | if (children.length <= 1) { 59 | return 60 | } 61 | 62 | const hackingContainer = 63 | children[0].el?.parentElement ?? 64 | // prettier-ignore 65 | // @ts-expect-error 66 | // type-coverage:ignore-next-line -- we can't control 67 | ((getCurrentInstance()?.parent.ctx as ComponentPublicInstance | undefined)?.$el as 68 | | HTMLElement 69 | | undefined) 70 | 71 | if (hackingContainer) { 72 | container = hackingContainer 73 | } else { 74 | await nextTick() 75 | if (!props.parent) { 76 | throw new Error( 77 | 'No `parent` provided nor hacking container can be auto injected, please provide `parent` correctly', 78 | ) 79 | } 80 | container = props.parent 81 | } 82 | 83 | // eslint-disable-next-line unicorn/prefer-spread 84 | elements = (Array.from(container.children) as HTMLElement[]).filter( 85 | el => !el.classList.contains(indicatorClassName), 86 | ) 87 | 88 | container.classList.add(containerClassName) 89 | 90 | if (getComputedStyle(container).position === 'static') { 91 | container.style.position = 'relative' 92 | } 93 | 94 | const containerRect = container.getBoundingClientRect() 95 | const { width: containerWidth, height: containerHeight } = 96 | getClientRect(container) 97 | 98 | const indicators: Indicator[] = [] 99 | 100 | let widthSum: number | undefined 101 | let heightSum: number | undefined 102 | 103 | for (const [index, curr] of Object.entries(children)) { 104 | const currEl = curr.el ?? (elements.at(+index) as HTMLElement) 105 | const currentRect = currEl.getBoundingClientRect() 106 | 107 | const nextIndex = +index + 1 108 | 109 | const nextVNode = children.at(nextIndex) 110 | 111 | if (!nextVNode) { 112 | break 113 | } 114 | 115 | const nextEl = nextVNode.el ?? (elements.at(+index + 1) as HTMLElement) 116 | const nextRect = nextEl.getBoundingClientRect() 117 | 118 | const horizontal = currentRect.top === nextRect.top 119 | const top = 120 | (horizontal 121 | ? currentRect.top 122 | : mean([currentRect.bottom, nextRect.top])) - containerRect.top 123 | const left = 124 | (horizontal 125 | ? mean([currentRect.right, nextRect.left]) 126 | : currentRect.left) - containerRect.left 127 | 128 | const indicator = props.indicators?.[+index] 129 | 130 | if (indicator) { 131 | const offset = horizontal 132 | ? containerWidth * percentToRatio(indicator.left) - left 133 | : containerHeight * percentToRatio(indicator.top) - top 134 | const currentRect = getClientRect(currEl) 135 | const nextRect = getClientRect(nextEl) 136 | if (horizontal) { 137 | widthSum = setElementWidth( 138 | nextEl, 139 | nextRect.width - offset, 140 | setElementWidth(currEl, currentRect.width + offset, widthSum), 141 | ) 142 | } else { 143 | heightSum = setElementHeight( 144 | nextEl, 145 | nextRect.height - offset, 146 | setElementHeight(currEl, currentRect.height + offset, heightSum), 147 | ) 148 | } 149 | } else { 150 | indicators.push({ 151 | top: ratioToPercent(top / containerHeight), 152 | left: ratioToPercent(left / containerWidth), 153 | horizontal, 154 | }) 155 | } 156 | } 157 | 158 | updateIndicators(indicators) 159 | }) 160 | 161 | onUnmounted(() => { 162 | if (children.length <= 1) { 163 | return 164 | } 165 | 166 | container.classList.remove(containerClassName) 167 | }) 168 | 169 | let prevRect: ClientRect 170 | let currRect: ClientRect 171 | let indicatorRect: ClientRect 172 | 173 | // eslint-disable-next-line sonarjs/cognitive-complexity 174 | return () => { 175 | const indicators = props.indicators || innerIndicators.value 176 | 177 | return children.flatMap((node, index) => { 178 | const indicator = index && indicators.at(index - 1) 179 | 180 | if (!indicator) { 181 | return node 182 | } 183 | 184 | const { top, left, horizontal } = indicator 185 | 186 | const prevEl = 187 | children.at(index - 1)!.el ?? (elements.at(index - 1) as HTMLElement) 188 | const currEl = node.el ?? (elements.at(index) as HTMLElement) 189 | 190 | return [ 191 |
{ 204 | document.addEventListener('dragover', preventDefault) 205 | prevRect = getClientRect(prevEl) 206 | currRect = getClientRect(currEl) 207 | indicatorRect = getClientRect(event.currentTarget as HTMLElement) 208 | }} 209 | onDrag={event => { 210 | const offset = horizontal ? event.offsetX : event.offsetY 211 | 212 | const indicatorElement = event.currentTarget as HTMLElement 213 | indicatorElement.classList.add(draggingClassName) 214 | 215 | const { width, height } = getClientRect( 216 | indicatorElement.parentElement!, 217 | ) 218 | 219 | if (horizontal) { 220 | const prevWidth = prevRect.width + offset 221 | const currWidth = currRect.width - offset 222 | if ( 223 | prevWidth > 0 && 224 | prevWidth < width && 225 | currWidth > 0 && 226 | currWidth < width 227 | ) { 228 | setElementWidth(prevEl, prevWidth) 229 | setElementWidth(currEl, currWidth) 230 | } 231 | } else { 232 | const prevHeight = prevRect.height + offset 233 | const currHeight = currRect.height - offset 234 | if ( 235 | prevHeight > 0 && 236 | prevHeight < height && 237 | currHeight > 0 && 238 | currHeight < height 239 | ) { 240 | setElementHeight(prevEl, prevHeight) 241 | setElementHeight(currEl, currHeight) 242 | } 243 | } 244 | }} 245 | onDragend={event => { 246 | document.removeEventListener('dragover', preventDefault) 247 | const offset = horizontal ? event.offsetX : event.offsetY 248 | const indicatorElement = event.currentTarget as HTMLElement 249 | indicatorElement.classList.remove(draggingClassName) 250 | const { width, height } = getClientRect( 251 | indicatorElement.parentElement!, 252 | ) 253 | const ratio = horizontal 254 | ? (indicatorRect.left + offset) / width 255 | : (indicatorRect.top + offset) / height 256 | if (ratio > 0 && ratio < 1) { 257 | updateIndicators( 258 | indicators.toSpliced(index - 1, 1, { 259 | ...indicator, 260 | [horizontal ? 'left' : 'top']: ratioToPercent(ratio), 261 | }), 262 | true, 263 | ) 264 | } else if (horizontal) { 265 | setElementWidth(prevEl, prevRect.width) 266 | setElementWidth(currEl, currRect.width) 267 | } else { 268 | setElementHeight(prevEl, prevRect.height) 269 | setElementHeight(currEl, currRect.height) 270 | } 271 | }} 272 | />, 273 | node, 274 | ] 275 | }) 276 | } 277 | }, 278 | }) 279 | --------------------------------------------------------------------------------