style: change the code order of the component, change all the data me…

…thods to arrow functions, and common class name of the example component
varletjs · Feb 20, 2022 · 97d6bf1 · 97d6bf1
1 parent 576a6d9
commit 97d6bf1
Show file tree

Hide file tree

Showing 45 changed files with 263 additions and 239 deletions.
diff --git a/packages/varlet-vue2-ui/src/app-bar/docs/en-US.md b/packages/varlet-vue2-ui/src/app-bar/docs/en-US.md
@@ -118,7 +118,7 @@ export default {
   </template>
 
   <template #right>
-    <var-menu :offset-y="38" :offset-x="-20" v-model:show="offsetY">
+    <var-menu :offset-y="38" :offset-x="-20" show.sync="offsetY">
       <var-button 
         round 
         text
@@ -157,9 +157,7 @@ export default {
       { label: '选项二', value: 'menu2' }
     ],
   }),
-
   methods: {
-
     goBack() {
       Snackbar({
         content: '返回',
@@ -174,11 +172,9 @@ export default {
 .var-menu {
   background: transparent;
 }
-
 .menu-list {
   background: #fff;
 }
-
 .menu-list .menu-cell {
   display: block;
   padding: 10px;

diff --git a/packages/varlet-vue2-ui/src/app-bar/docs/zh-CN.md b/packages/varlet-vue2-ui/src/app-bar/docs/zh-CN.md
@@ -118,7 +118,7 @@ export default {
   </template>
 
   <template #right>
-    <var-menu :offset-y="42" :offset-x="-20" v-model:show="offsetY">
+    <var-menu :offset-y="42" :offset-x="-20" show.sync="offsetY">
       <var-button
         round
         text
@@ -157,9 +157,7 @@ export default {
       { label: '选项二', value: 'menu2' }
     ],
   }),
-
   methods: {
-
     goBack() {
       Snackbar({
         content: '返回',
@@ -174,11 +172,9 @@ export default {
 .var-menu {
   background: transparent;
 }
-
 .menu-list {
   background: #fff;
 }
-
 .menu-list .menu-cell {
   display: block;
   padding: 10px;

diff --git a/packages/varlet-vue2-ui/src/back-top/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-vue2-ui/src/back-top/__tests__/__snapshots__/index.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`test backTop example 1`] = `
-"<div>
+"<div class=\\"var-backTop-example\\">
   <div class=\\"var-cell\\">
     <!---->
     <div class=\\"var-cell__content\\">

diff --git a/packages/varlet-vue2-ui/src/back-top/example/index.vue b/packages/varlet-vue2-ui/src/back-top/example/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="var-backTop-example">
     <var-cell v-for="list in lists" :key="list">Scroll to bottom {{ list }}</var-cell>
     <var-back-top :duration="300" />
   </div>
@@ -11,8 +11,6 @@ import VarCell from '../../cell'
 import dark from '../../themes/dark'
 import { watchDarkMode } from '@varlet-vue2/cli/site/utils'
 
-const lists = [...Array(100).keys()]
-
 export default {
   name: 'BackTopExample',
 
@@ -21,11 +19,9 @@ export default {
     VarCell,
   },
 
-  data() {
-    return {
-      lists,
-    }
-  },
+  data: () => ({
+    lists: [...Array(100).keys()],
+  }),
 
   created() {
     watchDarkMode(this, dark)

diff --git a/packages/varlet-vue2-ui/src/badge/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-vue2-ui/src/badge/__tests__/__snapshots__/index.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`test badge example 1`] = `
-"<div class=\\"var-badge-outer\\">
+"<div class=\\"var-badge-example\\">
   <div class=\\"app-type\\">主题色徽标</div>
   <div class=\\"var-badge var--box\\">
     <transition-stub name=\\"var-badge-fade\\"><span class=\\"var-badge__content var-badge--default\\"><span>0</span></span></transition-stub>

diff --git a/packages/varlet-vue2-ui/src/badge/example/index.vue b/packages/varlet-vue2-ui/src/badge/example/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="var-badge-outer">
+  <div class="var-badge-example">
     <app-type>{{ pack.themeColorBadge }}</app-type>
     <var-badge />
     <var-badge type="primary" />
@@ -73,14 +73,12 @@ export default {
     AppType,
   },
 
-  data() {
-    return {
-      value: 88,
-      value1: 188,
-      maxValue: 99,
-      hidden: false,
-    }
-  },
+  data: () => ({
+    value: 88,
+    value1: 188,
+    maxValue: 99,
+    hidden: false,
+  }),
 
   computed: {
     pack() {
@@ -101,9 +99,11 @@ export default {
 }
 </script>
 
-<style scoped>
-.var-badge {
-  margin-right: 20px;
-  margin-bottom: 8px;
+<style lang="less" scoped>
+.var-badge-example {
+  .var-badge {
+    margin-right: 20px;
+    margin-bottom: 8px;
+  }
 }
 </style>
diff --git a/packages/varlet-vue2-ui/src/button/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-vue2-ui/src/button/__tests__/__snapshots__/index.spec.js.snap
@@ -22,7 +22,7 @@ exports[`test button disabled 1`] = `
 `;
 
 exports[`test button example 1`] = `
-"<div class=\\"example\\">
+"<div class=\\"var-button-example\\">
   <div class=\\"app-type\\">主题色按钮</div> <button class=\\"var-button var--box var-button--normal var--inline-flex var-button--default var-elevation--2\\">
     <!---->
     <div class=\\"var-button__content\\">默认按钮</div>

diff --git a/packages/varlet-vue2-ui/src/button/example/index.vue b/packages/varlet-vue2-ui/src/button/example/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="example">
+  <div class="var-button-example">
     <app-type>{{ pack.themeColorButton }}</app-type>
     <var-button>{{ pack.defaultButton }}</var-button>
     <var-button type="primary">{{ pack.primaryButton }}</var-button>
@@ -124,8 +124,10 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.var-button {
-  margin-bottom: 10px;
-  margin-right: 10px;
+.var-button-example {
+  .var-button {
+    margin-bottom: 10px;
+    margin-right: 10px;
+  }
 }
 </style>
diff --git a/packages/varlet-vue2-ui/src/card/Card.vue b/packages/varlet-vue2-ui/src/card/Card.vue
@@ -45,16 +45,14 @@ export default defineComponent({
 
   props,
 
-  data() {
-    return {
-      toSizeUnit,
-    }
-  },
+  data: () => ({
+    toSizeUnit,
+  }),
 
   methods: {
     handleClick(e) {
-      const { disabled } = this
-      const { onClick } = this.getListeners()
+      const { disabled, getListeners } = this
+      const { onClick } = getListeners()
 
       if (!onClick || disabled) {
         return

diff --git a/packages/varlet-vue2-ui/src/card/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-vue2-ui/src/card/__tests__/__snapshots__/index.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`test card example 1`] = `
-"<div class=\\"var-card-outer\\">
+"<div class=\\"var-card-example\\">
   <div class=\\"app-type\\">基本使用</div>
   <div class=\\"var-card var-elevation--2\\">
     <!---->

diff --git a/packages/varlet-vue2-ui/src/card/example/index.vue b/packages/varlet-vue2-ui/src/card/example/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="var-card-outer">
+  <div class="var-card-example">
     <app-type>{{ pack.basicUsage }}</app-type>
     <var-card :title="pack.title" :description="pack.description" />
     <app-type>{{ pack.showSubtitle }}</app-type>
@@ -69,9 +69,3 @@ export default {
   },
 }
 </script>
-
-<style scoped>
-.example {
-  background: antiquewhite;
-}
-</style>
diff --git a/packages/varlet-vue2-ui/src/cell/__test__/__snapshots__/index.spec.js.snap b/packages/varlet-vue2-ui/src/cell/__test__/__snapshots__/index.spec.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`test cell example 1`] = `
-"<div class=\\"var-cell-outer\\">
+"<div class=\\"var-cell-example\\">
   <div>
     <div class=\\"app-type\\">基本使用</div>
     <div class=\\"var-cell\\">

diff --git a/packages/varlet-vue2-ui/src/cell/example/index.vue b/packages/varlet-vue2-ui/src/cell/example/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="var-cell-outer">
+  <div class="var-cell-example">
     <div>
       <app-type>{{ pack.basicUsage }}</app-type>
       <var-cell> {{ pack.content }} </var-cell>

diff --git a/packages/varlet-vue2-ui/src/chip/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-vue2-ui/src/chip/__tests__/__snapshots__/index.spec.js.snap
@@ -6,7 +6,7 @@ exports[`test chip color & textColor 1`] = `
 `;
 
 exports[`test chip example 1`] = `
-"<div class=\\"example\\">
+"<div class=\\"var-chip-example\\">
   <div class=\\"app-type\\">纸片类型</div>
   <transition-stub name=\\"var-fade\\"><span class=\\"var-chip var--box var-chip--normal var--inline-flex var-chip--default var-chip--round\\"> <span class=\\"var-chip--text-normal\\">默认纸片</span>
     <!----></span></transition-stub>

diff --git a/packages/varlet-vue2-ui/src/chip/example/index.vue b/packages/varlet-vue2-ui/src/chip/example/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="example">
+  <div class="var-chip-example">
     <app-type>{{ pack.chipType }}</app-type>
     <var-chip>{{ pack.defaultChip }}</var-chip>
     <var-chip type="primary">{{ pack.primaryChip }}</var-chip>
@@ -72,32 +72,36 @@ import { watchLang, watchDarkMode } from '@varlet-vue2/cli/site/utils'
 
 export default {
   name: 'ChipExample',
+
   components: {
     VarChip,
     VarIcon,
     AppType,
   },
-  data() {
-    return {
-      show: true,
-      show1: true,
-    }
-  },
+
+  data: () => ({
+    show: true,
+    show1: true,
+  }),
+
   computed: {
     pack() {
       return pack.value
     },
   },
+
   created() {
     watchLang(this, use)
     watchDarkMode(this, dark)
   },
 }
 </script>
 
-<style scoped>
-.var-chip {
-  margin-right: 8px;
-  margin-bottom: 8px;
+<style lang="less" scoped>
+.var-chip-example {
+  .var-chip {
+    margin-right: 8px;
+    margin-bottom: 8px;
+  }
 }
 </style>
diff --git a/packages/varlet-vue2-ui/src/countdown/Countdown.vue b/packages/varlet-vue2-ui/src/countdown/Countdown.vue
@@ -23,21 +23,28 @@ export default defineComponent({
 
   props,
 
-  data() {
-    return {
-      endTime: 0,
-      isStart: false,
-      showTime: '',
-      handle: 0,
-      pauseTime: 0,
-      timeData: {
-        days: 0,
-        hours: 0,
-        minutes: 0,
-        seconds: 0,
-        milliseconds: 0,
+  data: () => ({
+    endTime: 0,
+    isStart: false,
+    showTime: '',
+    handle: 0,
+    pauseTime: 0,
+    timeData: {
+      days: 0,
+      hours: 0,
+      minutes: 0,
+      seconds: 0,
+      milliseconds: 0,
+    },
+  }),
+
+  watch: {
+    time: {
+      handler() {
+        this.reset()
       },
-    }
+      immediate: true,
+    },
   },
 
   methods: {
@@ -102,15 +109,6 @@ export default defineComponent({
       this.countdown()
     },
   },
-
-  watch: {
-    time: {
-      handler() {
-        this.reset()
-      },
-      immediate: true,
-    },
-  },
 })
 </script>