site: optimize scroll behavior of table & code

build/loaders/md-renderer.js

@@ -44,7 +44,11 @@ function createRenderer (wrapCodeWithCard = true) {
       const highlighted = hljs.highlight(code, { language }).value
       const content = `<n-code><pre v-pre>${highlighted}</pre></n-code>`
       return wrapCodeWithCard
-        ? `<n-card size="small" class="md-card">${content}</n-card>`
+        ? `<n-card size="small" class="md-card" content-style="padding: 0;">
+            <n-scrollbar x-scrollable content-style="padding: 12px; 16px;">
+              ${content}
+            </n-scrollbar>
+          </n-card>`
         : content
     },
     heading: (text, level) => {

demo/pages/docs/jsx/enUS/index.md

@@ -21,7 +21,7 @@ export default defineComponent({
 })
 ```
 
-## Props look like `@update:*`
+## Props look like @update:\*
 
 In naive-ui, all props look like `on-update:*` has a corresponding `onUpdate*` prop (since in JSX `onUpdate:*` is not a valid prop name).
 

demo/pages/docs/jsx/zhCN/index.md

@@ -21,7 +21,7 @@ export default defineComponent({
 })
 ```
 
-## 形如 `@update:*` 的 prop
+## 形如 @update:\* 的 prop
 
 naive-ui 中，所有形如 `on-update:*` 的 prop 都有一个对应的 `onUpdate*` 属性可供使用（由于 JSX 自身的规定，`onUpdate:*` 不是一个合法的 prop）。
 

demo/store/menu-options.js

@@ -35,7 +35,7 @@ function createItems (lang, theme, prefix, items) {
     const item = {
       ...rawItem,
       key: rawItem.en,
-      label: rawItem[langKey],
+      label: rawItem[langKey] || rawItem.en,
       extra: rawItem.enSuffix && isZh ? rawItem.en : undefined,
       path: rawItem.path
         ? `/${lang}/${theme}` + prefix + rawItem.path

demo/styles/demo.css

@@ -9,6 +9,18 @@ body {
   body {
     overflow: visible;
   }
+  .md-table-wrapper {
+    overflow: auto;
+    margin: 0 -16px;
+    display: flex;
+    flex-wrap: nowrap;
+  }
+  .md-table-wrapper::before,
+  .md-table-wrapper::after {
+    content: '';
+    width: 16px;
+    flex-shrink: 0;
+  }
 }
 
 .demo-card .demo-card__view:not(:first-child) {
@@ -33,7 +45,6 @@ body {
 }
 
 .md-table-wrapper {
-  overflow: auto;
   margin-bottom: 16px;
 }
 
@@ -48,5 +59,4 @@ body {
 
 .md-card {
   margin-bottom: 16px;
-  overflow: auto;
 }

demo/utils/ComponentDemo.vue

@@ -6,6 +6,7 @@
     :segmented="{
       footer: true
     }"
+    footer-style="padding: 0;"
   >
     <template #header>
       <span
@@ -52,7 +53,7 @@ name="title"
     <slot name="content" />
     <slot name="demo" />
     <template v-if="showCode" #footer>
-      <n-scrollbar x-scrollable>
+      <n-scrollbar x-scrollable content-style="padding: 20px 24px;">
         <slot name="code" />
       </n-scrollbar>
     </template>

demo/utils/ComponentDemos.tsx

@@ -12,7 +12,7 @@ export default defineComponent({
   setup (props) {
     const breakpointRef = useBreakpoint()
     const mergedColsRef = useMemo(() => {
-      return breakpointRef.value === 'xs' ? 1 : props.span
+      return ['xs', 's', 'm'].includes(breakpointRef.value) ? 1 : props.span
     })
     return {
       mergedCols: mergedColsRef