docs: optimize default slot template style

src/auto-complete/demos/enUS/custom-input.demo.md

@@ -3,8 +3,11 @@
 You can replace auto-complete's input element.
 
 ```html
-<n-auto-complete :options="options" v-model:value="value">
-  <template #="{ handleInput, handleBlur, handleFocus, value }">
+<n-auto-complete
+  :options="options"
+  v-model:value="value"
+  #="{ handleInput, handleBlur, handleFocus, value }"
+>
   <n-input
     type="textarea"
     @input="handleInput"
@@ -13,7 +16,6 @@ You can replace auto-complete's input element.
     :value="value"
     placeholder="Email"
   />
-  </template>
 </n-auto-complete>
 ```
 

src/auto-complete/demos/zhCN/custom-input.demo.md

@@ -3,8 +3,11 @@
 你可以替换 AutoComplete 的输入元素。
 
 ```html
-<n-auto-complete :options="options" v-model:value="value">
-  <template #="{ handleInput, handleBlur, handleFocus, value }">
+<n-auto-complete
+  :options="options"
+  v-model:value="value"
+  #="{ handleInput, handleBlur, handleFocus, value }"
+>
   <n-input
     type="textarea"
     @input="handleInput"
@@ -13,7 +16,6 @@
     :value="value"
     placeholder="邮箱"
   />
-  </template>
 </n-auto-complete>
 ```
 

src/calendar/demos/enUS/basic.demo.md

@@ -3,10 +3,8 @@
 A basic calender.
 
 ```html
-<n-calendar @update:value="handleUpdateValue">
-  <template #="{ year, month, date }">
+<n-calendar @update:value="handleUpdateValue" #="{ year, month, date }">
   {{ year }}-{{ month }}-{{ date }}
-  </template>
 </n-calendar>
 ```
 

src/calendar/demos/zhCN/basic.demo.md

@@ -3,10 +3,8 @@
 一个普通的日历。
 
 ```html
-<n-calendar @update:value="handleUpdateValue">
-  <template #="{ year, month, date }">
+<n-calendar @update:value="handleUpdateValue" #="{ year, month, date }">
   {{ year }}-{{ month }}-{{ date }}
-  </template>
 </n-calendar>
 ```
 

src/dynamic-input/demos/enUS/custom.demo.md

@@ -1,14 +1,14 @@
 # Custom Input Content
 
 ```html
-<n-dynamic-input v-model:value="customValue" :on-create="onCreate">
-  <template #="{ value }">
+<n-dynamic-input
+  v-model:value="customValue"
+  :on-create="onCreate"
+  #="{ value }"
+>
   <div style="width: 100%;">
     <div style="display: flex; align-items: center;">
-        <n-checkbox
-          v-model:checked="value.isCheck"
-          style="margin-right: 12px;"
-        />
+      <n-checkbox v-model:checked="value.isCheck" style="margin-right: 12px;" />
       <n-input-number
         v-model:value="value.num"
         style="margin-right: 12px; width: 160px;"
@@ -16,7 +16,6 @@
       <n-input v-model:value="value.string" type="input" />
     </div>
   </div>
-  </template>
 </n-dynamic-input>
 <pre>
 {{  JSON.stringify(customValue, 0, 2) }}

src/dynamic-input/demos/enUS/form.demo.md

@@ -8,8 +8,8 @@
     item-style="margin-bottom: 0;"
     v-model:value="model.dynamicInputValue"
     :on-create="onCreate"
+    #="{ index, value }"
   >
-    <template #="{ index, value }">
     <div style="display: flex;">
       <!--
           Usually, the path change will cause the form-item verification content
@@ -47,7 +47,6 @@
         />
       </n-form-item>
     </div>
-    </template>
   </n-dynamic-input>
 </n-form>
 <pre>

src/dynamic-input/demos/zhCN/custom.demo.md

@@ -1,14 +1,14 @@
 # 自定义内容
 
 ```html
-<n-dynamic-input v-model:value="customValue" :on-create="onCreate">
-  <template #="{ value }">
+<n-dynamic-input
+  v-model:value="customValue"
+  :on-create="onCreate"
+  #="{ value }"
+>
   <div style="width: 100%;">
     <div style="display: flex; align-items: center;">
-        <n-checkbox
-          v-model:checked="value.isCheck"
-          style="margin-right: 12px;"
-        />
+      <n-checkbox v-model:checked="value.isCheck" style="margin-right: 12px;" />
       <n-input-number
         v-model:value="value.num"
         style="margin-right: 12px; width: 160px;"
@@ -16,7 +16,6 @@
       <n-input v-model:value="value.string" type="input" />
     </div>
   </div>
-  </template>
 </n-dynamic-input>
 <pre>
 {{  JSON.stringify(customValue, 0, 2) }}

src/dynamic-input/demos/zhCN/form.demo.md

@@ -8,8 +8,8 @@
     item-style="margin-bottom: 0;"
     v-model:value="model.dynamicInputValue"
     :on-create="onCreate"
+    #="{ index, value }"
   >
-    <template #="{ index, value }">
     <div style="display: flex;">
       <!--
           通常，path 的变化会导致 form-item 验证内容或规则的改变，所以 naive-ui 会清理掉
@@ -45,7 +45,6 @@
         />
       </n-form-item>
     </div>
-    </template>
   </n-dynamic-input>
 </n-form>
 <pre>

src/element/demos/zhCN/color-debug.demo.md

@@ -5,14 +5,14 @@
 确保你理解这些颜色的含义，请看[使用样式方案的注意事项](../doc/n-theme#style-scheme)。
 
 ```html
-<n-element tag="div" class="myel" style="overflow: auto;" #="{ styleScheme }">
+<n-element tag="div" class="myel" style="overflow: auto;" #="{ themeVars }">
   <pre
     :style="{
-      color: styleScheme.secondaryTextColor,
-      transition: `color .3s ${styleScheme.easeInOutCubicBezier}`
+      color: themeVars.secondaryTextColor,
+      transition: `color .3s ${themeVars.easeInOutCubicBezier}`
     }"
   >
-{{ JSON.stringify(styleScheme, 0, 2) }}</pre
+{{ JSON.stringify(themeVars, 0, 2) }}</pre
   >
 </n-element>
 ```

src/grid/demos/enUS/collapse.demo.md

@@ -31,10 +31,8 @@ Collapsing works in responsive layout.
   >
     {{ i }}
   </n-gi>
-  <n-gi suffix class="suffix" v-if="showSuffix">
-    <template #="{ overflow }">
+  <n-gi suffix class="suffix" v-if="showSuffix" #="{ overflow }">
     {{ overflow ? 'Node Overflows Exists' : 'No Node Overflows' }}
-    </template>
   </n-gi>
 </n-grid>
 ```

src/grid/demos/zhCN/collapse.demo.md

@@ -31,10 +31,8 @@
   >
     {{ i }}
   </n-gi>
-  <n-gi suffix class="suffix" v-if="showSuffix">
-    <template #="{ overflow }">
+  <n-gi suffix class="suffix" v-if="showSuffix" #="{ overflow }">
     {{ overflow ? '存在溢出' : '不存在溢出' }}
-    </template>
   </n-gi>
 </n-grid>
 ```