fix(tabs): scroll shadow is not updated when it's resized, closes #1224

CHANGELOG.en-US.md

@@ -6,6 +6,7 @@
 
 - Fix `n-data-table` ellipsis not show when last column not set ellipsis, closes [#934](https://github.com/TuSimple/naive-ui/issues/934).
 - Fix `n-grid-item` won't work with responsive config.
+- Fix `n-tabs`'s scroll shadow is not updated when it's resized, closes [#1224](https://github.com/TuSimple/naive-ui/issues/1224).
 
 ### Feats
 

CHANGELOG.zh-CN.md

@@ -4,8 +4,9 @@
 
 ### Fixes
 
-- Fix `n-data-table` 当最后一列未设置 `ellipsis` 时省略失效，关闭 [#934](https://github.com/TuSimple/naive-ui/issues/934)
-- Fix `n-grid-item` 响应式不生效
+- 修复 `n-data-table` 当最后一列未设置 `ellipsis` 时省略失效，关闭 [#934](https://github.com/TuSimple/naive-ui/issues/934)
+- 修复 `n-grid-item` 响应式不生效
+- 修复 `n-tabs` 在尺寸改变后没有更新滚动阴影状态，关闭 [#1224](https://github.com/TuSimple/naive-ui/issues/1224)
 
 ### Feats
 

src/tabs/demos/zhCN/index.demo-entry.md

@@ -15,6 +15,7 @@ display-directive
 addable
 line-debug
 style-inherit-debug
+shadow-debug
 ```
 
 ## API

src/tabs/demos/zhCN/shadow-debug.demo.md

@@ -0,0 +1,40 @@
+# Shadow Debug
+
+`#1224`
+
+```html
+<div :class="getClass">
+  <n-button @click="() => (getClass = 'half')">half</n-button>
+  <n-button @click="() => (getClass = 'full')">full</n-button>
+  <n-tabs v-model:value="value" type="card" tab-style="min-width: 100px;">
+    <n-tab-pane v-for="panel in panels" :name="panel" :key="panel">
+      {{ panel }}
+    </n-tab-pane>
+    <template #prefix>Prefix</template>
+    <template #suffix>Suffix</template>
+  </n-tabs>
+</div>
+```
+
+```js
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
+    const valueRef = ref(1)
+    const panelsRef = ref([1, 2, 3])
+
+    return {
+      value: valueRef,
+      panels: panelsRef,
+      getClass: ref('half')
+    }
+  }
+})
+```
+
+```css
+.half {
+  width: 50%;
+}
+```

src/tabs/src/Tabs.tsx

@@ -213,9 +213,11 @@ export default defineComponent({
         updateCurrentBarStyle()
         // here we don't need to force layout after update bar style
         // since deriveScrollShadow will force layout
-        deriveScrollShadow(xScrollInstRef.value?.$el)
         barEl.classList.remove(disableTransitionClassName)
       }
+      if (type !== 'segment') {
+        deriveScrollShadow(xScrollInstRef.value?.$el)
+      }
     }, 64)
 
     const addTabFixedRef = ref(false)