fix(ui/app-bar): support ssr

varletjs · Jan 19, 2022 · 3700eef · 3700eef
1 parent 6dcb358
commit 3700eef
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 20 deletions.
diff --git a/packages/varlet-cli/site/components/app-bar/AppBar.vue b/packages/varlet-cli/site/components/app-bar/AppBar.vue
@@ -11,7 +11,7 @@
       <slot name="left" />
       <div
         class="var-site-app-bar__title"
-        :style="{ paddingLeft: $slots.left ? 0 : undefined }"
+        :style="{ paddingLeft }"
         v-if="titlePosition === 'left'"
       >
         <slot>{{ title }}</slot>
@@ -25,7 +25,7 @@
     <div class="var-site-app-bar__right">
       <div
         class="var-site-app-bar__title"
-        :style="{ paddingRight: $slots.right ? 0 : undefined }"
+        :style="{ paddingRight }"
         v-if="titlePosition === 'right'"
       >
         <slot>{{ title }}</slot>
@@ -36,12 +36,29 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import {defineComponent, onMounted, onUpdated, ref, Ref} from 'vue'
 import { props } from './props'
 
 export default defineComponent({
   name: 'VarSiteAppBar',
   props,
+  setup(props, { slots }) {
+    const paddingLeft: Ref<number | undefined> = ref()
+    const paddingRight: Ref<number | undefined> = ref()
+
+    const computePadding = () => {
+      paddingLeft.value = slots.left ? 0 : undefined
+      paddingRight.value = slots.right ? 0 : undefined
+    }
+
+    onMounted(computePadding)
+    onUpdated(computePadding)
+
+    return {
+      paddingLeft,
+      paddingRight
+    }
+  }
 })
 </script>
 

diff --git a/packages/varlet-ui/src/app-bar/AppBar.vue b/packages/varlet-ui/src/app-bar/AppBar.vue
@@ -9,11 +9,7 @@
   >
     <div class="var-app-bar__left">
       <slot name="left" />
-      <div
-        class="var-app-bar__title"
-        :style="{ paddingLeft: $slots.left ? 0 : undefined }"
-        v-if="titlePosition === 'left'"
-      >
+      <div class="var-app-bar__title" :style="{ paddingLeft }" v-if="titlePosition === 'left'">
         <slot>{{ title }}</slot>
       </div>
     </div>
@@ -23,11 +19,7 @@
     </div>
 
     <div class="var-app-bar__right">
-      <div
-        class="var-app-bar__title"
-        :style="{ paddingRight: $slots.right ? 0 : undefined }"
-        v-if="titlePosition === 'right'"
-      >
+      <div class="var-app-bar__title" :style="{ paddingRight }" v-if="titlePosition === 'right'">
         <slot>{{ title }}</slot>
       </div>
       <slot name="right" />
@@ -36,12 +28,29 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, ref, Ref, onMounted, onUpdated } from 'vue'
 import { props } from './props'
 
 export default defineComponent({
   name: 'VarAppBar',
   props,
+  setup(props, { slots }) {
+    const paddingLeft: Ref<number | undefined> = ref()
+    const paddingRight: Ref<number | undefined> = ref()
+
+    const computePadding = () => {
+      paddingLeft.value = slots.left ? 0 : undefined
+      paddingRight.value = slots.right ? 0 : undefined
+    }
+
+    onMounted(computePadding)
+    onUpdated(computePadding)
+
+    return {
+      paddingLeft,
+      paddingRight,
+    }
+  },
 })
 </script>
 

diff --git a/packages/varlet-ui/src/app-bar/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/app-bar/__tests__/__snapshots__/index.spec.js.snap
@@ -72,11 +72,8 @@ exports[`test app bar example 1`] = `
         <!--v-if-->
         <div class=\\"var-button__content\\"><i class=\\"var-icon var-icon--set var-icon-menu\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
       </button>
-      <transition-stub>
-        <div class=\\"var-menu__menu var-elevation--3\\" style=\\"top: calc(0px + 42px); left: calc(0px + -20px); z-index: 2000; display: none;\\">
-          <div class=\\"menu-list\\" style=\\"background: rgb(255, 255, 255);\\"></div>
-        </div>
-      </transition-stub>
+      <!--teleport start-->
+      <!--teleport end-->
     </div>
   </div>
 </div>

diff --git a/packages/varlet-ui/src/app-bar/__tests__/index.spec.js b/packages/varlet-ui/src/app-bar/__tests__/index.spec.js
@@ -3,9 +3,11 @@ import AppBar from '..'
 import VarAppBar from '../AppBar'
 import { mount } from '@vue/test-utils'
 import { createApp } from 'vue'
+import { delay } from '../../utils/jest'
 
-test('test app bar example', () => {
+test('test app bar example', async () => {
   const wrapper = mount(example)
+  await delay(100)
 
   expect(wrapper.html()).toMatchSnapshot()
 })