feat: add new vue-resizor package (#174)

Author: JounQin

.changeset/clean-carpets-whisper.md

@@ -0,0 +1,6 @@
+---
+"vue-qrcode": patch
+"vue-qrious": patch
+---
+
+chore: add `package.json` into `exports`

.changeset/shy-ravens-rest.md

@@ -0,0 +1,5 @@
+---
+"vue-resizor": minor
+---
+
+feat: add new `vue-resizor` package, it just works

.editorconfig

@@ -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

.eslintrc

@@ -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"

.stylelintignore

@@ -1,10 +1,12 @@
 dist
 lib
+packages/*/lib/*
 LICENSE
 *.json
 *.lock
 *.log
 *.ts
 *.tsbuildinfo
+*.tsx
 *.yaml
 *.yml

.stylelintrc

@@ -1,3 +1,6 @@
 {
-  "extends": "@1stg/stylelint-config"
+  "extends": "@1stg/stylelint-config",
+  "rules": {
+    "color-function-notation": null
+  }
 }

.vitepress/components/VueQrcodeDemo.vue

@@ -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>
@@ -135,7 +135,7 @@
             <div>
               <label>data</label>
               <textarea
-                v-model="v.data"
+                v-model="v.data as string"
                 rows="6"
                 cols="80"
               ></textarea>
@@ -144,7 +144,7 @@
         </ul>
         <textarea
           v-else
-          v-model="value"
+          v-model="value as string"
           rows="6"
           cols="80"
         ></textarea>
@@ -155,7 +155,7 @@
       :href="dataUrl"
     >
       <vue-qrcode
-        v-bind="qrcodeProps"
+        v-bind="qrcodeProps as any"
         @change="onChange"
         @error="onError"
       />
@@ -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'
@@ -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: {
@@ -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)

.vitepress/components/VueQriousDemo.vue

@@ -77,7 +77,7 @@
         :href="dataUrl"
       >
         <vue-qrious
-          v-bind="qriousProps"
+          v-bind="qriousProps as any"
           @change="onChange"
           @error="onError"
         />
@@ -125,7 +125,7 @@ export default defineComponent({
       padding: 0,
       size: 100,
       value: 'http://www.1stg.me',
-      dataUrl: null,
+      dataUrl: undefined as string | undefined,
     }
   },
   computed: {

.vitepress/components/VueResizorDemo.vue

@@ -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>

.vitepress/components/index.ts

@@ -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'