fix(ui/pagination, cli/site): fix size and total cannot be centered v…

…ertically in the pagination, ad

affects: @varlet/cli, @varlet/ui

packages/varlet-cli/README.en-US.md

@@ -148,6 +148,7 @@ module.exports = {
     },
     header: {
       i18n: null,
+      github: 'https://github.com/haoziqaq/varlet',
     },
   },
 }

packages/varlet-cli/README.md

@@ -143,6 +143,7 @@ module.exports = {
     },
     header: {
       i18n: null,
+      github: 'https://github.com/haoziqaq/varlet',
     },
   },
 }

packages/varlet-cli/generators/sfc/varlet.config.js

@@ -67,6 +67,7 @@ module.exports = {
     },
     header: {
       i18n: null,
+      github: 'https://github.com/haoziqaq/varlet',
     },
   },
 }

packages/varlet-cli/generators/tsx/varlet.config.js

@@ -67,6 +67,7 @@ module.exports = {
     },
     header: {
       i18n: null,
+      github: 'https://github.com/haoziqaq/varlet',
     },
   },
 }

packages/varlet-cli/site/mobile/App.vue

@@ -6,8 +6,9 @@
         :title="bigCamelizeComponentName"
         title-position="center"
       >
-        <template #left v-if="showBackIcon">
+        <template #left>
           <var-site-button
+            v-if="showBackIcon"
             text
             round
             @click="back"
@@ -16,6 +17,17 @@
           >
             <var-site-icon name="chevron-left" :size="28" style="margin-top: 1px;" />
           </var-site-button>
+          <var-site-button
+            v-if="!showBackIcon && github"
+            style="margin-left: 6px; "
+            text
+            round
+            @click="toGithub"
+            color="transparent"
+            text-color="#fff"
+          >
+            <var-site-icon name="github" :size="28" style="margin-top: 1px;" />
+          </var-site-button>
         </template>
         <template #right>
           <var-site-menu
@@ -78,6 +90,7 @@ export default defineComponent({
     const languages: Ref<Record<string, string>> = ref(get(config, 'mobile.header.i18n'))
     const nonEmptyLanguages: ComputedRef<Record<string, string>> = computed(() => removeEmpty(languages.value))
     const redirect = get(config, 'mobile.redirect', '')
+    const github: Ref<string> = ref(get(config, 'mobile.header.github'))
 
     const changeLanguage = (lang) => {
       language.value = lang
@@ -89,6 +102,14 @@ export default defineComponent({
       window.location.href = `./mobile.html#${redirect}?language=${language.value}&replace=${redirect.slice(1)}`
     }
 
+    const toGithub = () => {
+      if (window.parent !== window) {
+        window.parent.open(github.value)
+      } else {
+        window.location.href = github.value
+      }
+    }
+
     watchLang((newValue) => {
       language.value = newValue
     })
@@ -106,10 +127,12 @@ export default defineComponent({
     return {
       bigCamelizeComponentName,
       showBackIcon,
+      github,
       showMenu,
       languages,
       language,
       nonEmptyLanguages,
+      toGithub,
       back,
       changeLanguage,
     }

packages/varlet-cli/varlet.default.config.js

@@ -42,6 +42,7 @@ module.exports = {
         'zh-CN': '中文',
         'en-US': 'English',
       },
+      github: 'https://github.com/haoziqaq/varlet',
     },
   },
   themes: {

packages/varlet-ui/docs/cli.en-US.md

@@ -148,6 +148,7 @@ module.exports = {
     },
     header: {
       i18n: null,
+      github: 'https://github.com/haoziqaq/varlet',
     },
   },
 }

packages/varlet-ui/docs/cli.zh-CN.md

@@ -143,6 +143,7 @@ module.exports = {
     },
     header: {
       i18n: null,
+      github: 'https://github.com/haoziqaq/varlet',
     },
   },
 }

packages/varlet-ui/src/pagination/Pagination.vue

@@ -22,7 +22,7 @@
         @blur="setPage('simple', simpleValue, $event)"
         @keydown.enter="setPage('simple', simpleValue, $event)"
       />
-      / {{ pageCount }}
+      <span>/ {{ pageCount }}</span>
     </li>
     <li
       v-else

packages/varlet-ui/src/pagination/__tests__/__snapshots__/index.spec.js.snap

@@ -20,7 +20,7 @@ exports[`Size related props 1`] = `
       <transition-stub>
         <!--v-if-->
       </transition-stub>
-    </div> / 6
+    </div><span>/ 6</span>
   </li>
   <li class=\\"var-pagination__item var-pagination__next var-pagination__item-hover\\"><i class=\\"var-icon var-icon--set var-icon-chevron-right\\" style=\\"transition: all 0ms;\\"></i></li>
   <li class=\\"var-pagination__size\\">
@@ -55,7 +55,7 @@ exports[`Size related props 2`] = `
       <transition-stub>
         <!--v-if-->
       </transition-stub>
-    </div> / 6
+    </div><span>/ 6</span>
   </li>
   <li class=\\"var-pagination__item var-pagination__next var-pagination__item-hover\\"><i class=\\"var-icon var-icon--set var-icon-chevron-right\\" style=\\"transition: all 0ms;\\"></i></li>
   <!--v-if-->
@@ -140,7 +140,7 @@ exports[`simple mode disabled prop 1`] = `
       <transition-stub>
         <!--v-if-->
       </transition-stub>
-    </div> / 0
+    </div><span>/ 0</span>
   </li>
   <li class=\\"var-pagination__item var-pagination__next var-pagination__item-disabled var-pagination__item-hover\\"><i class=\\"var-icon var-icon--set var-icon-chevron-right\\" style=\\"transition: all 0ms;\\"></i></li>
   <li class=\\"var-pagination__size var-pagination__item-disabled\\">
@@ -175,7 +175,7 @@ exports[`simple mode mount 1`] = `
       <transition-stub>
         <!--v-if-->
       </transition-stub>
-    </div> / 13
+    </div><span>/ 13</span>
   </li>
   <li class=\\"var-pagination__item var-pagination__next var-pagination__item-hover\\"><i class=\\"var-icon var-icon--set var-icon-chevron-right\\" style=\\"transition: all 0ms;\\"></i></li>
   <li class=\\"var-pagination__size\\">
@@ -212,7 +212,7 @@ exports[`test pagination example 1`] = `
         <transition-stub>
           <!--v-if-->
         </transition-stub>
-      </div> / 12
+      </div><span>/ 12</span>
     </li>
     <li class=\\"var-pagination__item var-pagination__next var-pagination__item-hover\\"><i class=\\"var-icon var-icon--set var-icon-chevron-right\\" style=\\"transition: all 0ms;\\"></i></li>
     <li class=\\"var-pagination__size\\">
@@ -247,7 +247,7 @@ exports[`test pagination example 1`] = `
         <transition-stub>
           <!--v-if-->
         </transition-stub>
-      </div> / 12
+      </div><span>/ 12</span>
     </li>
     <li class=\\"var-pagination__item var-pagination__next var-pagination__item-hover\\"><i class=\\"var-icon var-icon--set var-icon-chevron-right\\" style=\\"transition: all 0ms;\\"></i></li>
     <!--v-if-->
@@ -276,7 +276,7 @@ exports[`test pagination example 1`] = `
         <transition-stub>
           <!--v-if-->
         </transition-stub>
-      </div> / 12
+      </div><span>/ 12</span>
     </li>
     <li class=\\"var-pagination__item var-pagination__next var-pagination__item-hover\\"><i class=\\"var-icon var-icon--set var-icon-chevron-right\\" style=\\"transition: all 0ms;\\"></i></li>
     <li class=\\"var-pagination__size\\">
@@ -311,7 +311,7 @@ exports[`test pagination example 1`] = `
         <transition-stub>
           <!--v-if-->
         </transition-stub>
-      </div> / 12
+      </div><span>/ 12</span>
     </li>
     <li class=\\"var-pagination__item var-pagination__next var-pagination__item-disabled var-pagination__item-hover\\"><i class=\\"var-icon var-icon--set var-icon-chevron-right\\" style=\\"transition: all 0ms;\\"></i></li>
     <li class=\\"var-pagination__size var-pagination__item-disabled\\">

packages/varlet-ui/src/pagination/docs/en-US.md

@@ -165,16 +165,17 @@ Here are the CSS variables used by the component, Styles can be customized using
 | `--pagination-active-color` | `#fff` |  
 | `--pagination-active-bg-color` | `var(--color-primary)` |  
 | `--pagination-hover-bg-color` | `rgb(245, 245, 245)` |  
-| `--pagination-total-margin` | `0 6px 0 0` |  
+| `--pagination-total-margin` | `0 12px` |  
+| `--pagination-total-line-height` | `24px` |  
 | `--pagination-item-width` | `32px` |  
 | `--pagination-item-height` | `32px` |  
-| `--pagination-item-margin` | `0 4px` |  
+| `--pagination-item-margin` | `0 6px` |  
 | `--pagination-item-border-radius` | `4px` |  
-| `--pagination-size-padding` | `0 6px` |  
 | `--pagination-list-bg-color` | `#fff` |  
 | `--pagination-list-active-bg-color` | `#dbe4fd` |  
 | `--pagination-list-active-color` | `var(--color-primary)` |  
-| `--pagination-input-width` | `36px` |  
-| `--pagination-input-margin` | `0 6px` |  
+| `--pagination-input-width` | `32px` |
+| `--pagination-simple-padding` | `0 0 2px 0` |
 | `--pagination-disabled-color` | `var(--color-text-disabled)` |
-| `--pagination-bg-disabled-color` | `var(--color-disabled)` |
+| `--pagination-bg-disabled-color` | `var(--color-disabled)` |
+| `--pagination-size-line-height` | `24px` | 

packages/varlet-ui/src/pagination/docs/zh-CN.md

@@ -166,7 +166,8 @@ import Disabled from '../example/Disabled.vue'
 | `--pagination-active-color` | `#fff` |  
 | `--pagination-active-bg-color` | `var(--color-primary)` |  
 | `--pagination-hover-bg-color` | `rgb(245, 245, 245)` |  
-| `--pagination-total-margin` | `0 14px` |  
+| `--pagination-total-margin` | `0 12px` |  
+| `--pagination-total-line-height` | `24px` |  
 | `--pagination-item-width` | `32px` |  
 | `--pagination-item-height` | `32px` |  
 | `--pagination-item-margin` | `0 6px` |  
@@ -177,4 +178,5 @@ import Disabled from '../example/Disabled.vue'
 | `--pagination-input-width` | `32px` |
 | `--pagination-simple-padding` | `0 0 2px 0` |
 | `--pagination-disabled-color` | `var(--color-text-disabled)` |
-| `--pagination-bg-disabled-color` | `var(--color-disabled)` |
+| `--pagination-bg-disabled-color` | `var(--color-disabled)` |
+| `--pagination-size-line-height` | `24px` |  

packages/varlet-ui/src/pagination/pagination.less

@@ -14,13 +14,16 @@
 @pagination-simple-padding: 0 0 2px 0;
 @pagination-disabled-color: var(--color-text-disabled);
 @pagination-bg-disabled-color: var(--color-disabled);
+@pagination-size-line-height: 24px;
+@pagination-total-line-height: 24px;
 
 :root {
   --pagination-font-size: @pagination-font-size;
   --pagination-active-color: @pagination-active-color;
   --pagination-active-bg-color: @pagination-active-bg-color;
   --pagination-hover-bg-color: @pagination-hover-bg-color;
   --pagination-total-margin: @pagination-total-margin;
+  --pagination-total-line-height: @pagination-total-line-height;
   --pagination-item-width: @pagination-item-width;
   --pagination-item-height: @pagination-item-height;
   --pagination-item-margin: @pagination-item-margin;
@@ -32,6 +35,7 @@
   --pagination-simple-padding: @pagination-simple-padding;
   --pagination-disabled-color: @pagination-disabled-color;
   --pagination-bg-disabled-color: @pagination-bg-disabled-color;
+  --pagination-size-line-height: @pagination-size-line-height;
 }
 
 // Mixins
@@ -100,13 +104,16 @@
   }
 
   &__total {
-    margin: var(--pagination-total-margin);
     .pagination-flex-nowrap();
+
+    line-height: var(--pagination-total-line-height);
+    margin: var(--pagination-total-margin);
   }
 
   &__size {
     .pagination-flex-nowrap();
 
+    line-height: var(--pagination-size-line-height);
     margin: var(--pagination-item-margin);
 
     &-open {

packages/varlet-ui/src/table/__tests__/__snapshots__/index.spec.js.snap

@@ -114,7 +114,7 @@ exports[`test table example 1`] = `
             <transition-stub>
               <!--v-if-->
             </transition-stub>
-          </div> / 10
+          </div><span>/ 10</span>
         </li>
         <li class=\\"var-pagination__item var-pagination__next var-pagination__item-hover\\"><i class=\\"var-icon var-icon--set var-icon-chevron-right\\" style=\\"transition: all 0ms;\\"></i></li>
         <li class=\\"var-pagination__size\\">