feat: increase compatibility with the new component ElSpliter (#158)

* feat: increase compatibility with the new component ElSpliter

* chore: update playground

Author: tolking

package.json

@@ -52,7 +52,7 @@
     "@nuxt/schema": "^3.13.2",
     "@nuxtjs/eslint-config-typescript": "^12.1.0",
     "@types/node": "^22.8.6",
-    "element-plus": "^2.8.7",
+    "element-plus": "^2.10.1",
     "eslint": "^8.57.1",
     "nuxi": "^3.15.0",
     "nuxt": "^3.13.2",

playground/components/form-card.vue

@@ -5,6 +5,7 @@ interface RestaurantItem {
 }
 
 const value = ref('Nuxt module playground!')
+const tagValue = ref([])
 const autocompleteValue = ref()
 const cascaderValue = ref()
 const dateValue = ref()
@@ -114,6 +115,9 @@ const createFilter = (queryString: string) => {
       <el-form-item label="input">
         <el-input v-model="value" clearable />
       </el-form-item>
+      <el-form-item label="input-tag">
+        <el-input-tag v-model="tagValue" clearable />
+      </el-form-item>
       <el-form-item label="autocomplete">
         <el-autocomplete
           v-model="autocompleteValue"

playground/components/other-card.vue

@@ -54,6 +54,21 @@ const load = () => {
           {{ i }}
         </li>
       </ul>
+
+      <div class="splitter">
+        <el-splitter>
+          <el-splitter-panel size="30%">
+            <div class="splitter-panel">
+              1
+            </div>
+          </el-splitter-panel>
+          <el-splitter-panel :min="200">
+            <div class="splitter-panel">
+              2
+            </div>
+          </el-splitter-panel>
+        </el-splitter>
+      </div>
     </el-watermark>
   </el-card>
 </template>
@@ -110,4 +125,13 @@ const load = () => {
 .infinite-list .infinite-list-item + .list-item {
   margin-top: 10px;
 }
+
+.splitter {
+  margin: 10px;
+  height: 250px;
+  border: 1px solid var(--el-border-color-light);
+}
+.splitter .splitter-panel {
+  padding: 10px;
+}
 </style>

pnpm-lock.yaml

@@ -66,6 +66,7 @@ const allSubComponents: Record<string, string[]> = {
   ElRadio: ['ElRadioGroup', 'ElRadioButton'],
   ElSkeleton: ['ElSkeletonItem'],
   ElSelect: ['ElOption', 'ElOptionGroup'],
+  ElSplitter: ['ElSplitterPanel'],
   ElSteps: ['ElStep'],
   ElTable: ['ElTableColumn'],
   ElTableV2: ['ElAutoResizer'],