Skip to content

Commit

Permalink
feat: add new vue-resizor package (#174)
Browse files Browse the repository at this point in the history
  • Loading branch information
JounQin authored Jan 24, 2024
1 parent 74264a5 commit 53ebd70
Show file tree
Hide file tree
Showing 32 changed files with 994 additions and 249 deletions.
6 changes: 6 additions & 0 deletions .changeset/clean-carpets-whisper.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"vue-qrcode": patch
"vue-qrious": patch
---

chore: add `package.json` into `exports`
5 changes: 5 additions & 0 deletions .changeset/shy-ravens-rest.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"vue-resizor": minor
---

feat: add new `vue-resizor` package, it just works
16 changes: 8 additions & 8 deletions .editorconfig
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
root = true
root=true

[*]
indent_style = space
indent_size = 2
tab_width = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
indent_style=space
indent_size=2
tab_width=2
end_of_line=lf
charset=utf-8
trim_trailing_whitespace=true
insert_final_newline=true
6 changes: 3 additions & 3 deletions .eslintrc
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,16 @@
"overrides": [
{
"files": [
"*.ts",
"*.vue"
"*.{ts,tsx,vue}"
],
"rules": {
"vue/multi-word-component-names": "off",
"vue/require-default-prop": "off"
}
},
{
"files": [
"*.ts"
"*.{ts,tsx}"
],
"rules": {
"@typescript-eslint/consistent-type-imports": "error"
Expand Down
2 changes: 2 additions & 0 deletions .stylelintignore
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
dist
lib
packages/*/lib/*
LICENSE
*.json
*.lock
*.log
*.ts
*.tsbuildinfo
*.tsx
*.yaml
*.yml
5 changes: 4 additions & 1 deletion .stylelintrc
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
{
"extends": "@1stg/stylelint-config"
"extends": "@1stg/stylelint-config",
"rules": {
"color-function-notation": null
}
}
26 changes: 9 additions & 17 deletions .vitepress/components/VueQrcodeDemo.vue
Original file line number Diff line number Diff line change
Expand Up @@ -114,8 +114,8 @@
</label>
<ul v-if="manualMode">
<li
v-for="(v, index) of value"
:key="v"
v-for="(v, index) of value as QRCodeSegment[]"
:key="v.data as string"
>
<label v-if="value.length > 0">
<button @click="removeValue(index)">-</button>
Expand All @@ -135,7 +135,7 @@
<div>
<label>data</label>
<textarea
v-model="v.data"
v-model="v.data as string"
rows="6"
cols="80"
></textarea>
Expand All @@ -144,7 +144,7 @@
</ul>
<textarea
v-else
v-model="value"
v-model="value as string"
rows="6"
cols="80"
></textarea>
Expand All @@ -155,7 +155,7 @@
:href="dataUrl"
>
<vue-qrcode
v-bind="qrcodeProps"
v-bind="qrcodeProps as any"
@change="onChange"
@error="onError"
/>
Expand All @@ -176,9 +176,9 @@ import VueQrcode, {
LEVELS,
MASK_PATTERNS,
MODES,
QRCodeSegment,
QRCodeValue,
TYPES,
type QRCodeSegment,
} from 'vue-qrcode'
const DEFAULT_TEXT = 'http://www.1stg.me'
Expand Down Expand Up @@ -219,7 +219,7 @@ export default defineComponent({
quality: 0.92,
value: DEFAULT_TEXT as QRCodeValue,
manualMode: false,
dataUrl: null,
dataUrl: undefined as string | undefined,
}
},
computed: {
Expand All @@ -229,20 +229,12 @@ export default defineComponent({
},
watch: {
manualMode() {
this.value = this.manualMode
? [
{
data: DEFAULT_TEXT,
},
]
: DEFAULT_TEXT
this.value = this.manualMode ? [{ data: DEFAULT_TEXT }] : DEFAULT_TEXT
},
},
methods: {
addValue() {
;(this.value as QRCodeSegment[]).push({
data: DEFAULT_TEXT,
})
;(this.value as QRCodeSegment[]).push({ data: DEFAULT_TEXT })
},
removeValue(index: number) {
;(this.value as QRCodeSegment[]).splice(index, 1)
Expand Down
4 changes: 2 additions & 2 deletions .vitepress/components/VueQriousDemo.vue
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@
:href="dataUrl"
>
<vue-qrious
v-bind="qriousProps"
v-bind="qriousProps as any"
@change="onChange"
@error="onError"
/>
Expand Down Expand Up @@ -125,7 +125,7 @@ export default defineComponent({
padding: 0,
size: 100,
value: 'http://www.1stg.me',
dataUrl: null,
dataUrl: undefined as string | undefined,
}
},
computed: {
Expand Down
32 changes: 32 additions & 0 deletions .vitepress/components/VueResizorDemo.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<template>
<div class="parent">
<vue-resizor v-model:indicators="indicators">
<div class="child">Child 1</div>
<div class="child">Child 2</div>
</vue-resizor>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import VueResizor, { Indicator } from 'vue-resizor'
import 'vue-resizor/styles.css'
const indicators = ref<Indicator[]>()
</script>
<style lang="less" scoped>
.parent {
height: 200px;
background-color: pink;
}
.child {
height: 20%;
~ .child {
height: 80%;
background-color: lightgreen;
min-height: 0;
}
}
</style>
1 change: 1 addition & 0 deletions .vitepress/components/index.ts
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
export { default as VueQrcodeDemo } from './VueQrcodeDemo.vue'
export { default as VueQriousDemo } from './VueQriousDemo.vue'
export { default as VueResizorDemo } from './VueResizorDemo.vue'
7 changes: 7 additions & 0 deletions .vitepress/config.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,15 @@
import vueJsx from '@vitejs/plugin-vue-jsx'
import { defineConfig } from 'vitepress'

const description = process.env.npm_package_description

export default defineConfig({
title: [process.env.npm_package_name, description].join(' - '),
description,
vite: {
plugins: [
// @ts-expect-error
vueJsx(),
],
},
})
2 changes: 1 addition & 1 deletion .vitepress/theme/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import * as components from '../components'

const config: Theme = {
...DefaultTheme,
enhanceApp({ app, router }) {
enhanceApp({ app }) {
Object.entries(components).forEach(([name, component]) => {
app.component(name, component)
})
Expand Down
9 changes: 5 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,10 +40,11 @@

This repository is a monorepo managed by [Changesets][] what means we actually publish several packages to npm from same codebase, including:

| Package | Description | Version |
| ------------------------------------- | --------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| [`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) |
| [`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) |
| Package | Description | Version |
| --------------------------------------- | --------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [`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) |
| [`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) |
| [`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) |

## Install

Expand Down
9 changes: 5 additions & 4 deletions index.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,10 +40,11 @@

This repository is a monorepo managed by [Changesets][] what means we actually publish several packages to npm from same codebase, including:

| Package | Description | Version |
| ------------------------------------- | --------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| [`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) |
| [`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) |
| Package | Description | Version |
| --------------------------------------- | --------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [`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) |
| [`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) |
| [`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) |

## Install

Expand Down
11 changes: 8 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,12 @@
"packageManager": "[email protected]",
"scripts": {
"build": "run-p build:*",
"build:r": "r -e named -f cjs",
"build:r": "r -e named -f cjs --vue-jsx",
"build:styles": "lessc --source-map packages/vue-resizor/src/styles.less packages/vue-resizor/lib/styles.css",
"build:ts": "tsc -b",
"clean": "rimraf dist packages/*/{lib,*.tsbuildinfo}",
"docs:build": "vitepress build .",
"docs:dev": "vitepress dev .",
"docs:dev": "vitepress dev . --open",
"docs:serve": "vitepress serve . --port 8000",
"lint": "run-p lint:*",
"lint:es": "eslint . --cache -f friendly",
Expand All @@ -29,13 +30,15 @@
},
"devDependencies": {
"@1stg/app-config": "^10.0.1",
"@1stg/lib-config": "^13.0.0",
"@changesets/changelog-github": "^0.5.0",
"@changesets/cli": "^2.27.1",
"@d-ts/vue": "^1.0.0",
"@pkgr/rollup": "^6.0.0",
"@types/lodash-es": "^4.17.12",
"@types/node": "^18.19.8",
"@types/qrcode": "^1.5.5",
"@vitejs/plugin-vue-jsx": "^3.1.0",
"less": "^4.2.0",
"lodash-es": "^4.17.21",
"postcss": "^8.4.33",
"qrcode": "^1.5.3",
Expand All @@ -45,6 +48,7 @@
"sass": "^1.70.0",
"type-coverage": "^2.27.1",
"typescript": "^5.3.3",
"vite": "^5.0.12",
"vitepress": "^0.22.4",
"vue": "^3.4.15",
"vue-tsc": "^1.8.27",
Expand All @@ -61,6 +65,7 @@
"ignoreFiles": [
"**/*.d.ts"
],
"ignoreNested": true,
"ignoreNonNullAssertion": true,
"showRelativePath": true,
"strict": true,
Expand Down
6 changes: 3 additions & 3 deletions packages/vue-qrcode/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export const TYPES = ['image/png', 'image/jpeg', 'image/webp'] as const

export type QRCodeProps = Omit<QRCodeToDataURLOptions, 'renderOptions'> &
QRCodeToDataURLOptionsJpegWebp['rendererOpts'] & {
value: QRCodeSegment[] | string
value: QRCodeValue
}

const MAX_QR_VERSION = 40
Expand Down Expand Up @@ -82,9 +82,9 @@ export default defineComponent({
required: false,
},
value: {
type: [String, Array] as PropType<QRCodeSegment[] | string>,
type: [String, Array] as PropType<QRCodeValue>,
required: true,
validator(value: QRCodeSegment[] | string) {
validator(value: QRCodeValue) {
if (typeof value === 'string') {
return true
}
Expand Down
9 changes: 6 additions & 3 deletions packages/vue-qrcode/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,12 @@
"main": "./lib/index.cjs",
"module": "./lib/index.js",
"exports": {
"types": "./lib/index.d.ts",
"import": "./lib/index.js",
"require": "./lib/index.cjs"
".": {
"types": "./lib/index.d.ts",
"require": "./lib/index.cjs",
"default": "./lib/index.js"
},
"./package.json": "./package.json"
},
"types": "./lib/index.d.ts",
"files": [
Expand Down
9 changes: 6 additions & 3 deletions packages/vue-qrious/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,12 @@
"main": "./lib/index.cjs",
"module": "./lib/index.js",
"exports": {
"types": "./lib/index.d.ts",
"import": "./lib/index.js",
"require": "./lib/index.cjs"
".": {
"types": "./lib/index.d.ts",
"require": "./lib/index.cjs",
"default": "./lib/index.js"
},
"./package.json": "./package.json"
},
"types": "./lib/index.d.ts",
"files": [
Expand Down
1 change: 1 addition & 0 deletions packages/vue-resizor/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
# Change Log
Loading

1 comment on commit 53ebd70

@vercel
Copy link

@vercel vercel bot commented on 53ebd70 Jan 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

vue – ./

rx-vue.vercel.app
vue-git-master-jounqin.vercel.app
vue-jounqin.vercel.app
vue-rx.vercel.app

Please sign in to comment.