chore: releases v1.0.10 (#117)

Author: tolking

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@element-plus/nuxt",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "Element Plus module for Nuxt",
   "license": "MIT",
   "type": "module",

playground/components/data-card.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 const calendar = ref(new Date(2024, 1, 1))
+const value = ref(Date.now() + 1000 * 60 * 60 * 7)
 const open = ref(false)
 const ref1 = ref()
 const ref2 = ref()
@@ -83,6 +84,8 @@ const activities = [
       </el-tour>
 
       <el-statistic title="Daily active users" :value="268500" />
+
+      <el-countdown title="Start to grab" :value="value" />
     </el-space>
 
     <el-progress :percentage="50" />

playground/components/other-card.vue

@@ -1,3 +1,10 @@
+<script setup lang="ts">
+const count = ref(0)
+const load = () => {
+  count.value += 2
+}
+</script>
+
 <template>
   <el-card class="mb-5">
     <el-watermark
@@ -41,6 +48,12 @@
           </p>
         </div>
       </el-scrollbar>
+
+      <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
+        <li v-for="i in count" :key="i" class="infinite-list-item">
+          {{ i }}
+        </li>
+      </ul>
     </el-watermark>
   </el-card>
 </template>
@@ -78,4 +91,23 @@
   background: var(--el-color-danger-light-9);
   color: var(--el-color-danger);
 }
+
+.infinite-list {
+  height: 300px;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+.infinite-list .infinite-list-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 50px;
+  background: var(--el-color-primary-light-9);
+  margin: 10px;
+  color: var(--el-color-primary);
+}
+.infinite-list .infinite-list-item + .list-item {
+  margin-top: 10px;
+}
 </style>