feat: playground optimize

Author: wiidede

playground/src/ranges/04RangeDataList.vue

@@ -25,7 +25,7 @@ function handleAddData(value: number) {
       <span class="tag">addable</span>
       <span class="tag">limit:5</span>
       <span class="tag">thumb-type:rect</span>
-      <span class="tag">render-bottom-on-active</span>
+      <span class="tag">render-top-on-active</span>
     </div>
     <div class="flex items-baseline">
       <span class="label">modelValue</span>
@@ -38,10 +38,10 @@ function handleAddData(value: number) {
       :add-data="handleAddData"
       size="large"
       thumb-type="rect"
-      render-bottom-on-active
+      render-top-on-active
       :limit="5"
-      :render-top="(data) => h('div', data.data)"
-      :render-bottom="(data) => h('div', data.value)"
+      :render-top="(data) => h('div', data.value)"
+      :render-bottom="(data) => h('div', data.data)"
     />
   </div>
 </template>

playground/src/ranges/05Vertical.vue

@@ -8,10 +8,10 @@ const model = ref<RangeData<string>[]>([
   { data: 'unremovable', value: 6, unremovable: true },
 ])
 function handleAddData(value: number) {
-  model.value.push({
+  return {
     data: `random${Math.floor(Math.random() * 10)}`,
     value,
-  })
+  }
 }
 </script>
 
@@ -28,11 +28,11 @@ function handleAddData(value: number) {
       v-model="model"
       class="h-60 pl-80 pr8"
       :max="10"
-
-      addable vertical
+      addable
+      vertical
       thumb-size="large"
       :render-bottom="(data) => h('div', data.value)"
-      @add="handleAddData"
+      :add-data="handleAddData"
     >
       <template #top="{ data }">
         <div class="value px-2">