refactor: remove reactivityTransform

jcc · Dec 1, 2023 · 605ee93 · 605ee93
1 parent faf6d48
commit 605ee93
Show file tree

Hide file tree

Showing 23 changed files with 1,288 additions and 1,316 deletions.
diff --git a/examples/components/BaseUsage/Basic.vue b/examples/components/BaseUsage/Basic.vue
@@ -5,16 +5,16 @@
       <div class="example-box">
         <div class="box-left d-flex align-items-baseline">
           <div class="col-md-7">
-            <v-distpicker @selected="onSelect" @province="selectProvince" @city="selectCity" @area="selectArea"></v-distpicker>
+            <v-distpicker @selected="onSelect" @province="selectProvince" @city="selectCity"
+              @area="selectArea"></v-distpicker>
           </div>
           <div class="content-show col-md-5">
             <pre><code>{{ select }}</code></pre>
           </div>
         </div>
         <div v-if="showCode" class="box-right col-md-12">
           <pre
-            class="language-javascript code-toolbar"
-          ><code class=" language-javascript"><span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
+            class="language-javascript code-toolbar"><code class=" language-javascript"><span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
   <span class="token operator">&lt;</span>v<span class="token operator">-</span>distpicker<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>v<span class="token operator">-</span>distpicker<span class="token operator">&gt;</span>
 <span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
 
@@ -35,22 +35,22 @@
 </template>
 
 <script setup>
-import { reactive } from 'vue'
+import { ref, reactive } from 'vue'
 
-let showCode = $ref(false)
+let showCode = ref(false)
 let select = reactive({ province: '', city: '', area: '' })
-function onSelect(data) {
+function onSelect (data) {
   console.log(data)
 }
-function selectProvince(value) {
+function selectProvince (value) {
   select.province = value
   console.log(value)
 }
-function selectCity(value) {
+function selectCity (value) {
   select.city = value
   console.log(value)
 }
-function selectArea(value) {
+function selectArea (value) {
   select.area = value
   console.log(value)
 }

diff --git a/examples/components/BaseUsage/ChangeValue.vue b/examples/components/BaseUsage/ChangeValue.vue
@@ -5,7 +5,8 @@
       <div class="example-box">
         <div class="box-left d-flex align-items-baseline">
           <div class="col-md-7">
-            <v-distpicker :province="select.province" :city="select.city" :area="select.area" @selected="onSelect" @change="onChange" @province="selectProvince" @city="selectCity" @area="selectArea"></v-distpicker>
+            <v-distpicker :province="select.province" :city="select.city" :area="select.area" @selected="onSelect"
+              @change="onChange" @province="selectProvince" @city="selectCity" @area="selectArea"></v-distpicker>
             <button class="btn btn-primary btn-sm example-btn" @click="changeSetCode">setByCode</button>
             <button class="btn btn-primary btn-sm example-btn" @click="changeSetName">setByName</button>
           </div>
@@ -15,8 +16,7 @@
         </div>
         <div v-if="showCode" class="box-right col-md-12">
           <pre
-            class="language-javascript code-toolbar"
-          ><code class=" language-javascript"><span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
+            class="language-javascript code-toolbar"><code class=" language-javascript"><span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
   <span class="token operator">&lt;</span>v<span class="token operator">-</span>distpicker<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>v<span class="token operator">-</span>distpicker<span class="token operator">&gt;</span>
 <span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
 
@@ -37,36 +37,36 @@
 </template>
 
 <script setup>
-import { reactive } from 'vue'
-let showCode = $ref(false)
+import { reactive, ref } from 'vue'
+let showCode = ref(false)
 let select = reactive({ province: '', city: '', area: '' })
-function onSelect(data) {
+function onSelect (data) {
   console.log(data)
 }
-function selectProvince({code,value}) {
+function selectProvince ({ code, value }) {
   select.province = value
-  console.log({code, value})
+  console.log({ code, value })
 }
-function selectCity({code,value}) {
+function selectCity ({ code, value }) {
   select.city = value
-  console.log({code, value})
+  console.log({ code, value })
 }
-function selectArea({ code, value }) {
+function selectArea ({ code, value }) {
   select.area = value
-  console.log({code, value})
+  console.log({ code, value })
 }
-function changeSetCode() {
-   select.province = 810000
-   select.city = '810100'
-   select.area = 810104
+function changeSetCode () {
+  select.province = 810000
+  select.city = '810100'
+  select.area = 810104
 }
-function onChange({ province, city, area }) {
-    select.province = province.value
-    select.city = city.value
-    select.area = area.value
-    console.log('change',{ province, city, area })
-  }
-function changeSetName() { 
+function onChange ({ province, city, area }) {
+  select.province = province.value
+  select.city = city.value
+  select.area = area.value
+  console.log('change', { province, city, area })
+}
+function changeSetName () {
   select.province = '台湾省'
   select.city = '台北市'
   select.area = 710101

diff --git a/examples/components/BaseUsage/DataSource.vue b/examples/components/BaseUsage/DataSource.vue
@@ -5,7 +5,9 @@
       <div class="example-box">
         <div class="box-left d-flex align-items-baseline">
           <div class="col-md-7">
-            <v-distpicker :province="select.province" :city="select.city" :area="select.area" :area-source="areaSource" :city-source="citySource" :province-source="provinceSource" @change="onChange" @selected="onSelect" @province="selectProvince" @city="selectCity" @area="selectArea"></v-distpicker>
+            <v-distpicker :province="select.province" :city="select.city" :area="select.area" :area-source="areaSource"
+              :city-source="citySource" :province-source="provinceSource" @change="onChange" @selected="onSelect"
+              @province="selectProvince" @city="selectCity" @area="selectArea"></v-distpicker>
             <button class="btn btn-primary btn-sm example-btn" @click="changeSetCode">setByCode</button>
             <button class="btn btn-primary btn-sm example-btn" @click="changeSetName">setByName</button>
           </div>
@@ -14,12 +16,10 @@
           </div>
         </div>
         <div v-if="showCode" class="box-right col-md-12">
-          <pre
-            class="language-javascript code-toolbar"
-          ><code class=" language-javascript">{{ code }}
+          <pre class="language-javascript code-toolbar"><code class=" language-javascript">{{ code }}
           </code></pre>
         </div>
-         
+
         <div class="box-footer" @click="change">
           {{ showCode ? 'Hide Code' : 'Show Code' }}
         </div>
@@ -29,12 +29,12 @@
 </template>
 
 <script setup>
-import { reactive } from 'vue'
-import areaSource from '../data/area_data'
-import citySource from '../data/city_data'
-import provinceSource from '../data/province_data'
+import { reactive, ref } from 'vue'
+import DEFAULT_DATA from '../data/districts'
+
+let { area_list: areaSource, city_list: citySource, province_list: provinceSource } = DEFAULT_DATA
+let showCode = ref(false)
 
-let showCode = $ref(false)
 let select = reactive({ province: '', city: '', area: '' })
 let code = `<template>
 <v-distpicker :province="select.province" :city="select.city" 
@@ -70,40 +70,40 @@ function onSelect(data) {
   console.log(data)
 }
 <script>`
- 
-function onChange({ province, city, area }) {
-    select.province = province.value
-    select.city = city.value
-    select.area = area.value
-    console.log('change',{ province, city, area })
+
+function onChange ({ province, city, area }) {
+  select.province = province.value
+  select.city = city.value
+  select.area = area.value
+  console.log('change', { province, city, area })
 }
-function change() { 
+function change () {
   console.log(+new Date(), showCode.value)
-  
-  showCode = !showCode
+
+  showCode.value = !showCode.value
 }
- 
-function onSelect(data) {
+
+function onSelect (data) {
   console.log(data)
 }
-function selectProvince({ code,value}) {
+function selectProvince ({ code, value }) {
   select.province = value
-  console.log({ code,value})
+  console.log({ code, value })
 }
-function selectCity({ code,value}) {
+function selectCity ({ code, value }) {
   select.city = value
-  console.log({ code,value})
+  console.log({ code, value })
 }
-function selectArea({ code,value}) {
+function selectArea ({ code, value }) {
   select.area = value
-  console.log({ code,value})
+  console.log({ code, value })
 }
-function changeSetCode() {
-   select.province = 810000
-   select.city = '810100'
-   select.area = 810104
+function changeSetCode () {
+  select.province = 810000
+  select.city = '810100'
+  select.area = 810104
 }
-function changeSetName() { 
+function changeSetName () {
   select.province = '台湾省'
   select.city = '台北市'
   select.area = 710101

diff --git a/examples/components/BaseUsage/DefaultValue.vue b/examples/components/BaseUsage/DefaultValue.vue
@@ -5,23 +5,16 @@
       <div class="example-box">
         <div class="box-left d-flex align-items-baseline">
           <div class="col-md-7">
-            <v-distpicker
-              :province="select.province"
-              :city="select.city"
-              :area="select.area"
-              @province="selectProvince"
-              @city="selectCity"
-              @area="selectArea"
-            ></v-distpicker>
+            <v-distpicker :province="select.province" :city="select.city" :area="select.area" @province="selectProvince"
+              @city="selectCity" @area="selectArea"></v-distpicker>
           </div>
           <div class="content-show col-md-5">
             <pre><code>{{ select }}</code></pre>
           </div>
         </div>
         <div v-if="showCode" class="box-right col-md-12">
           <pre
-            class="language-javascript code-toolbar"
-          ><code class=" language-javascript"><span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
+            class="language-javascript code-toolbar"><code class=" language-javascript"><span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
   <span class="token operator">&lt;</span>v<span class="token operator">-</span>distpicker <span class="token punctuation">:</span>province<span class="token operator">=</span><span class="token string">"select.province"</span> <span class="token punctuation">:</span>city<span class="token operator">=</span><span class="token string">"select.city"</span> <span class="token punctuation">:</span>area<span class="token operator">=</span><span class="token string">"select.area"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>v<span class="token operator">-</span>distpicker<span class="token operator">&gt;</span>
 <span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
 
@@ -47,17 +40,18 @@
 </template>
 
 <script setup>
-let showCode = $ref(false)
-let select = $ref({ province: 440000, city: '广州市', area: '海珠区' })
-function selectProvince(value) {
+import { ref, reactive } from 'vue'
+let showCode = ref(false)
+let select = reactive({ province: 440000, city: '广州市', area: '海珠区' })
+function selectProvince (value) {
   select.province = value.value
   console.log(value)
 }
-function selectCity(value) {
+function selectCity (value) {
   select.city = value.value
   console.log(value)
 }
-function selectArea(value) {
+function selectArea (value) {
   select.area = value.value
   console.log(value)
 }

diff --git a/examples/components/BaseUsage/Disabled.vue b/examples/components/BaseUsage/Disabled.vue
@@ -5,16 +5,8 @@
       <div class="example-box">
         <div class="box-left d-flex align-items-baseline">
           <div class="col-md-7">
-            <v-distpicker
-              :province="select.province"
-              :city="select.city"
-              :area="select.area"
-              :province-disabled="true"
-              :city-disabled="true"
-              @province="selectProvince"
-              @city="selectCity"
-              @area="selectArea"
-            ></v-distpicker>
+            <v-distpicker :province="select.province" :city="select.city" :area="select.area" :province-disabled="true"
+              :city-disabled="true" @province="selectProvince" @city="selectCity" @area="selectArea"></v-distpicker>
           </div>
           <div class="content-show col-md-5">
             <pre><code>{{ select }}</code></pre>
@@ -26,18 +18,19 @@
 </template>
 
 <script setup>
-let showCode = $ref(false)
-let select = $ref({ province: 440000, city: '广州市', area: '海珠区' })
+import { ref, reactive } from 'vue'
+let showCode = ref(false)
+let select = reactive({ province: 440000, city: '广州市', area: '海珠区' })
 
-function selectProvince(value) {
+function selectProvince (value) {
   select.province = value.value
   console.log(value)
 }
-function selectCity(value) {
+function selectCity (value) {
   select.city = value.value
   console.log(value)
 }
-function selectArea(value) {
+function selectArea (value) {
   select.area = value.value
   console.log(value)
 }

diff --git a/examples/components/BaseUsage/HideArea.vue b/examples/components/BaseUsage/HideArea.vue
@@ -13,8 +13,7 @@
         </div>
         <div v-if="showCode" class="box-right col-md-12">
           <pre
-            class="language-javascript code-toolbar"
-          ><code class=" language-javascript"><span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
+            class="language-javascript code-toolbar"><code class=" language-javascript"><span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
   <span class="token operator">&lt;</span>v<span class="token operator">-</span>distpicker hide<span class="token operator">-</span>area<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>v<span class="token operator">-</span>distpicker<span class="token operator">&gt;</span>
 <span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
 
@@ -35,14 +34,15 @@
 </template>
 
 <script setup>
-let showCode = $ref(false)
-let select = $ref({ province: '', city: '' })
+import { ref, reactive } from 'vue'
+let showCode = ref(false)
+let select = reactive({ province: '', city: '' })
 
-function selectProvince(value) {
+function selectProvince (value) {
   select.province = value
   console.log(value)
 }
-function selectCity(value) {
+function selectCity (value) {
   select.city = value
   console.log(value)
 }

diff --git a/examples/components/BaseUsage/OnlyProvince.vue b/examples/components/BaseUsage/OnlyProvince.vue
@@ -13,8 +13,7 @@
         </div>
         <div v-if="showCode" class="box-right col-md-12">
           <pre
-            class="language-javascript code-toolbar"
-          ><code class=" language-javascript"><span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
+            class="language-javascript code-toolbar"><code class=" language-javascript"><span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
   <span class="token operator">&lt;</span>v<span class="token operator">-</span>distpicker only<span class="token operator">-</span>province<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>v<span class="token operator">-</span>distpicker<span class="token operator">&gt;</span>
 <span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
 
@@ -35,10 +34,11 @@
 </template>
 
 <script setup>
-let showCode = $ref(false)
-let select = $ref({ province: '' })
+import { ref, reactive } from 'vue'
+let showCode = ref(false)
+let select = reactive({ province: '' })
 
-function selectProvince(value) {
+function selectProvince (value) {
   select.province = value
   console.log(value)
 }