fix: updata border/typography and test

hug-sun · Nov 13, 2020 · 268456d · 268456d
1 parent c3c3b4f
commit 268456d
Show file tree

Hide file tree

Showing 3 changed files with 115 additions and 97 deletions.
diff --git a/examples/docs/zh-CN/border.md b/examples/docs/zh-CN/border.md
@@ -1,56 +1,64 @@
 <script>
   import bus from '../../bus';
   import { ACTION_USER_CONFIG_UPDATE } from '../../components/theme/constant.js';
-  const varMap = {
-    '$--box-shadow-light': 'boxShadowLight',
-    '$--box-shadow-base': 'boxShadowBase',
-    '$--border-radius-base': 'borderRadiusBase',
-    '$--border-radius-small': 'borderRadiusSmall'
-  };
-  const original = {
+  import { reactive, toRefs, ref, getCurrentInstance, onMounted, watch } from 'vue'
+  export default {
+    setup(){
+    const varMap = reactive({
+      '$--box-shadow-light': 'boxShadowLight',
+      '$--box-shadow-base': 'boxShadowBase',
+      '$--border-radius-base': 'borderRadiusBase',
+      '$--border-radius-small': 'borderRadiusSmall'
+    });
+  const original = reactive({
     boxShadowLight: '0 2px 12px 0 rgba(0, 0, 0, 0.1)',
     boxShadowBase: '0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)',
     borderRadiusBase: '4px',
     borderRadiusSmall: '2px'
+  })
+  const global = reactive({})
+  const boxShadowLight = ref('')
+  const boxShadowBase = ref('')
+  const borderRadiusBase = ref('')
+  const borderRadiusSmall =ref('')
+  const self = getCurrentInstance().ctx;
+
+  const setGlobal=()=>{
+    if(window.userThemeConfig){
+      self.global = window.userThemeConfig.global;
+    }
   }
-  export default {
-    created() {
-      bus.$on(ACTION_USER_CONFIG_UPDATE, this.setGlobal);
-    },
-    mounted() {
-      this.setGlobal();
-    },
-    methods: {
-      setGlobal() {
-        if (window.userThemeConfig) {
-          this.global = window.userThemeConfig.global;
-        }
-      }
-    },
-    data() {
-      return {
-        global: {},
-        boxShadowLight: '',
-        boxShadowBase: '',
-        borderRadiusBase: '',
-        borderRadiusSmall: ''
-      }
+  bus.$on(ACTION_USER_CONFIG_UPDATE, self.setGlobal);
+
+  onMounted(()=>{
+    self.setGlobal()
+  })
+
+  watch(global, value =>{
+      Object.keys(varMap).forEach((c)=>{
+          if (value[c]) {
+            self[varMap[c]] = value[c]
+          }else{
+            self[varMap[c]] = original[varMap[c]]
+          }  
+      });
     },
-    watch: {
-      global: {
-        immediate: true,
-        handler(value) {
-          Object.keys(varMap).forEach((c) => {
-            if (value[c]) {
-              this[varMap[c]] = value[c]
-            } else {
-              this[varMap[c]] = original[varMap[c]]
-            }
-          });
-        }
-      }
+    {
+      immediate: true
     }
+  )
+  return {
+    ...toRefs(global),
+    boxShadowLight,
+    boxShadowBase,
+    borderRadiusBase,
+    borderRadiusSmall,
+    setGlobal,
+    ...toRefs(varMap),
+    ...toRefs(original)
   }
+ }  
+}
 </script>
 
 ## Border 边框

diff --git a/examples/docs/zh-CN/typography.md b/examples/docs/zh-CN/typography.md
@@ -1,66 +1,76 @@
 <script>
   import bus from '../../bus';
   import { ACTION_USER_CONFIG_UPDATE } from '../../components/theme/constant.js';
-  const varMap = [
-    '$--font-size-extra-large',
-    '$--font-size-large',
-    '$--font-size-medium',
-    '$--font-size-base',
-    '$--font-size-small',
-    '$--font-size-extra-small'
-  ];
-  const original = {
-    'font_size_extra_large': '20px',
-    'font_size_large': '18px',
-    'font_size_medium': '16px',
-    'font_size_base': '14px',
-    'font_size_small': '13px',
-    'font_size_extra_small': '12px'
-  }
+  import { reactive, toRefs, ref, getCurrentInstance, onMounted, watch } from 'vue'
   export default {
-    created() {
-      bus.$on(ACTION_USER_CONFIG_UPDATE, this.setGlobal);
-    },
-    mounted() {
-      this.setGlobal();
-    },
-    methods: {
-      tintColor(color, tint) {
-        return tintColor(color, tint);
-      },
-      setGlobal() {
+    setup(){
+      const original=reactive({
+         'font_size_extra_large': '20px',
+         'font_size_large': '18px',
+         'font_size_medium': '16px',
+         'font_size_base': '14px',
+         'font_size_small': '13px',
+         'font_size_extra_small': '12px'
+      })
+      const varMap=[
+         '$--font-size-extra-large',
+         '$--font-size-large',
+         '$--font-size-medium',
+         '$--font-size-base',
+         '$--font-size-small',
+        '$--font-size-extra-small'
+      ]
+      const global=reactive({})
+      const font_size_extra_large=ref
+      ('')
+      const font_size_large=ref('')
+      const font_size_medium=ref('')
+      const font_size_base=ref('')
+      const font_size_small=ref('')
+      const font_size_extra_small=ref('')
+
+      const tintColor=(color, tint)=>{
+        return tintColor(color, tint)
+      }
+
+      const setGlobal=()=>{
         if (window.userThemeConfig) {
-          this.global = window.userThemeConfig.global;
+          self.global = window.userThemeConfig.global;
         }
       }
-    },
-    data() {
-      return {
-        global: {},
-        'font_size_extra_large': '',
-        'font_size_large': '',
-        'font_size_medium': '',
-        'font_size_base': '',
-        'font_size_small': '',
-        'font_size_extra_small': ''
-      }
-    },
-    watch: {
-      global: {
-        immediate: true,
-        handler(value) {
+      bus.$on(ACTION_USER_CONFIG_UPDATE, self.setGlobal);
+
+      onMounted(()=>{
+        setGlobal()
+      })
+
+      watch(global, value =>{
           varMap.forEach((v) => {
             const key = v.replace('$--', '').replace(/-/g, '_')
             if (value[v]) {
-              this[key] = value[v]
+              self[key] = value[v]
             } else {
-              this[key] = original[key]
+              self[key] = original[key]
             }
           });
-        }
+      },{
+        immediate: true,
       }
-    },
+      )
+  return{
+    ...toRefs(global),
+    font_size_extra_large,
+    font_size_large,
+    font_size_medium,
+    font_size_base,
+    font_size_small,
+    font_size_extra_small,
+    tintColor,
+    setGlobal,
+    varMap,
+    ...toRefs(original)
   }
+}}
 </script>
 
 ## Typography 字体
@@ -92,42 +102,42 @@
     >
       <td>辅助文字</td>
       <td class="color-dark-light">{{font_size_extra_small}} Extra Small</td>
-      <td>用 Element 快速搭建页面</td>
+      <td>用 Element3 快速搭建页面</td>
     </tr>
     <tr
     :style="{ fontSize: font_size_small }"
     >
       <td>正文（小）</td>
       <td class="color-dark-light">{{font_size_small}} Small</td>
-      <td>用 Element 快速搭建页面</td>
+      <td>用 Element3 快速搭建页面</td>
     </tr>
     <tr
     :style="{ fontSize: font_size_base }"
     >
       <td>正文</td>
       <td class="color-dark-light">{{font_size_base}} Base</td>
-      <td>用 Element 快速搭建页面</td>
+      <td>用 Element3 快速搭建页面</td>
     </tr>
     <tr
     :style="{ fontSize: font_size_medium }"
     >
       <td>小标题</td>
       <td class="color-dark-light">{{font_size_medium}} Medium</td>
-      <td>用 Element 快速搭建页面</td>
+      <td>用 Element3 快速搭建页面</td>
     </tr>
     <tr
     :style="{ fontSize: font_size_large }"
     >
       <td>标题</td>
       <td class="color-dark-light">{{font_size_large}} large</td>
-      <td>用 Element 快速搭建页面</td>
+      <td>用 Element3 快速搭建页面</td>
     </tr>
     <tr
     :style="{ fontSize: font_size_extra_large }"
     >
       <td>主标题</td>
       <td class="color-dark-light">{{font_size_extra_large}} Extra large</td>
-      <td>用 Element 快速搭建页面</td>
+      <td>用 Element3 快速搭建页面</td>
     </tr>
   </tbody>
 </table>

diff --git a/examples/versions.json b/examples/versions.json
@@ -1 +1 @@
-{"1.4.13":"1.4","2.0.11":"2.0","2.1.0":"2.1","2.2.2":"2.2","2.3.9":"2.3","2.4.11":"2.4","2.5.4":"2.5","2.6.3":"2.6","2.7.2":"2.7","2.8.2":"2.8","2.9.2":"2.9","2.10.1":"2.10","2.11.1":"2.11","2.12.0":"2.12","0.0.22":"2.13"}
+{"1.4.13":"1.4","2.0.11":"2.0","2.1.0":"2.1","2.2.2":"2.2","2.3.9":"2.3","2.4.11":"2.4","2.5.4":"2.5","2.6.3":"2.6","2.7.2":"2.7","2.8.2":"2.8","2.9.2":"2.9","2.10.1":"2.10","2.11.1":"2.11","2.12.0":"2.12","0.0.24":"2.13"}
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		{"1.4.13":"1.4","2.0.11":"2.0","2.1.0":"2.1","2.2.2":"2.2","2.3.9":"2.3","2.4.11":"2.4","2.5.4":"2.5","2.6.3":"2.6","2.7.2":"2.7","2.8.2":"2.8","2.9.2":"2.9","2.10.1":"2.10","2.11.1":"2.11","2.12.0":"2.12","0.0.22":"2.13"}
		{"1.4.13":"1.4","2.0.11":"2.0","2.1.0":"2.1","2.2.2":"2.2","2.3.9":"2.3","2.4.11":"2.4","2.5.4":"2.5","2.6.3":"2.6","2.7.2":"2.7","2.8.2":"2.8","2.9.2":"2.9","2.10.1":"2.10","2.11.1":"2.11","2.12.0":"2.12","0.0.24":"2.13"}