little-dizzy 2.4.0 → 2.5.0

package/src/components/custom/Lztext.vue

@@ -1,32 +1,41 @@
 <template>
   <div class="Lztext-wrapper">
     <div class="loader-wrapper">
-      <span class="loader-letter">G</span>
-      <span class="loader-letter">e</span>
-      <span class="loader-letter">n</span>
-      <span class="loader-letter">e</span>
-      <span class="loader-letter">r</span>
-      <span class="loader-letter">a</span>
-      <span class="loader-letter">t</span>
-      <span class="loader-letter">i</span>
-      <span class="loader-letter">n</span>
-      <span class="loader-letter">g</span>
+      <span v-for="(char, index) in characters" :key="index" class="loader-letter"
+        :style="{ animationDelay: `${0.1 + index * 0.105}s` }">{{ char === ' ' ? '\u00A0' : char }}</span>
       <div class="loader"></div>
     </div>
   </div>
 </template>
 
 <script setup>
+import { computed } from 'vue'
+
 /**
  * 渐变文字动画
  * 
- * 由 LittleDizzy Demo 自动生成
+ * 通过 text 属性传入文字内容
  * @component Lztext
+ * @example <LdLztext text="Hello World" />
  */
 defineOptions({
   name: 'Lztext'
 })
 
+const props = defineProps({
+  /**
+   * 显示的文字内容
+   */
+  text: {
+    type: String,
+    default: 'Generating'
+  }
+})
+
+// 将文字拆分为字符数组
+const characters = computed(() => {
+  return props.text.split('')
+})
 </script>
 
 <style scoped>
@@ -57,13 +66,11 @@ defineOptions({
   z-index: 1;
 
   background-color: transparent;
-  mask: repeating-linear-gradient(
-    90deg,
-    transparent 0,
-    transparent 6px,
-    black 7px,
-    black 8px
-  );
+  mask: repeating-linear-gradient(90deg,
+      transparent 0,
+      transparent 6px,
+      black 7px,
+      black 8px);
 }
 
 .loader::after {
@@ -79,12 +86,10 @@ defineOptions({
     radial-gradient(circle at 55% 55%, #0ff 0%, transparent 45%),
     radial-gradient(circle at 45% 55%, #0f0 0%, transparent 45%),
     radial-gradient(circle at 55% 45%, #00f 0%, transparent 45%);
-  mask: radial-gradient(
-    circle at 50% 50%,
-    transparent 0%,
-    transparent 10%,
-    black 25%
-  );
+  mask: radial-gradient(circle at 50% 50%,
+      transparent 0%,
+      transparent 10%,
+      black 25%);
   animation:
     transform-animation 2s infinite alternate,
     opacity-animation 4s infinite;
@@ -95,19 +100,23 @@ defineOptions({
   0% {
     transform: translate(-55%);
   }
+
   100% {
     transform: translate(55%);
   }
 }
 
 @keyframes opacity-animation {
+
   0%,
   100% {
     opacity: 0;
   }
+
   15% {
     opacity: 1;
   }
+
   65% {
     opacity: 0;
   }
@@ -120,49 +129,21 @@ defineOptions({
   z-index: 2;
 }
 
-.loader-letter:nth-child(1) {
-  animation-delay: 0.1s;
-}
-.loader-letter:nth-child(2) {
-  animation-delay: 0.205s;
-}
-.loader-letter:nth-child(3) {
-  animation-delay: 0.31s;
-}
-.loader-letter:nth-child(4) {
-  animation-delay: 0.415s;
-}
-.loader-letter:nth-child(5) {
-  animation-delay: 0.521s;
-}
-.loader-letter:nth-child(6) {
-  animation-delay: 0.626s;
-}
-.loader-letter:nth-child(7) {
-  animation-delay: 0.731s;
-}
-.loader-letter:nth-child(8) {
-  animation-delay: 0.837s;
-}
-.loader-letter:nth-child(9) {
-  animation-delay: 0.942s;
-}
-.loader-letter:nth-child(10) {
-  animation-delay: 1.047s;
-}
-
 @keyframes loader-letter-anim {
   0% {
     opacity: 0;
   }
+
   5% {
     opacity: 1;
     text-shadow: 0 0 4px #fff;
     transform: scale(1.1) translateY(-2px);
   }
+
   20% {
     opacity: 0.2;
   }
+
   100% {
     opacity: 0;
   }

package/src/index.js

@@ -24,6 +24,9 @@ import Button from './components/Button.vue'
 import Card from './components/Card.vue'
 import Modal from './components/Modal.vue'
 import Message from './components/Message.vue'
+import Carousel from './components/Carousel.vue'
+import Loading from './components/Loading.vue'
+import Table from './components/Table.vue'
 import { message } from './components/message.js'
 
 // 导入自定义组件（由 Demo 上传生成）
@@ -38,6 +41,9 @@ const components = {
   Card,
   Modal,
   Message,
+  Carousel,
+  Loading,
+  Table,
   ...customComponents
 }
 
@@ -61,7 +67,7 @@ export const registerSnippets = snippetsModule.registerSnippets
 export const getSnippet = snippetsModule.getSnippet
 
 // 导出内置组件（按需引入）
-export { Button, Card, Modal, Message, message }
+export { Button, Card, Modal, Message, Carousel, Loading, Table, message }
 
 // 重新导出自定义组件
 export * from './components/custom/index.js'

package/src/snippets/presets/backtop.js

@@ -0,0 +1,25 @@
+/**
+ * Backtop 回到顶部组件示例代码
+ */
+export default {
+  name: 'Backtop',
+  type: 'vue',
+  label: 'Backtop 回到顶部',
+  code: `<template>
+  <!-- 基础用法 -->
+  <Backtop />
+
+  <!-- 指定滚动容器 -->
+  <Backtop target=".my-container" :visibility-height="100" />
+
+  <!-- 自定义内容 -->
+  <Backtop>
+    <span style="font-size: 12px;">UP</span>
+  </Backtop>
+</template>
+
+<script setup>
+import { Backtop } from 'little-dizzy'
+</script>`
+}
+

package/src/snippets/presets/carousel.js

@@ -0,0 +1,22 @@
+/**
+ * Carousel 轮播图组件示例代码
+ */
+export default {
+  name: 'Carousel',
+  type: 'vue',
+  label: 'Carousel 轮播图',
+  code: `<template>
+  <Carousel :items="items" height="300px" />
+</template>
+
+<script setup>
+import { Carousel } from 'little-dizzy'
+
+const items = [
+  { image: 'https://picsum.photos/800/300?random=1', title: '图片 1' },
+  { image: 'https://picsum.photos/800/300?random=2', title: '图片 2' },
+  { image: 'https://picsum.photos/800/300?random=3', title: '图片 3' }
+]
+</script>`
+}
+

package/src/snippets/presets/index.js

@@ -8,17 +8,25 @@ import buttonSnippet from './button.js'
 import cardSnippet from './card.js'
 import modalSnippet from './modal.js'
 import messageSnippet from './message.js'
+import carouselSnippet from './carousel.js'
+import loadingSnippet from './loading.js'
+import tableSnippet from './table.js'
+import backtopSnippet from './backtop.js'
 
 // 所有预设代码片段
 export const presetSnippets = [
   buttonSnippet,
   cardSnippet,
   modalSnippet,
-  messageSnippet
+  messageSnippet,
+  carouselSnippet,
+  loadingSnippet,
+  tableSnippet,
+  backtopSnippet
 ]
 
 // 单独导出
-export { buttonSnippet, cardSnippet, modalSnippet, messageSnippet }
+export { buttonSnippet, cardSnippet, modalSnippet, messageSnippet, carouselSnippet, loadingSnippet, tableSnippet, backtopSnippet }
 
 export default presetSnippets
 

package/src/snippets/presets/loading.js

@@ -0,0 +1,20 @@
+/**
+ * Loading 加载组件示例代码
+ */
+export default {
+  name: 'Loading',
+  type: 'vue',
+  label: 'Loading 加载',
+  code: `<template>
+  <Loading type="spinner" />
+  <Loading type="dots" />
+  <Loading type="ring" />
+  <Loading type="pulse" />
+  <Loading type="bars" />
+</template>
+
+<script setup>
+import { Loading } from 'little-dizzy'
+</script>`
+}
+

package/src/snippets/presets/table.js

@@ -0,0 +1,28 @@
+/**
+ * Table 表格组件示例代码
+ */
+export default {
+  name: 'Table',
+  type: 'vue',
+  label: 'Table 表格',
+  code: `<template>
+  <Table :columns="columns" :data="data" bordered striped />
+</template>
+
+<script setup>
+import { Table } from 'little-dizzy'
+
+const columns = [
+  { key: 'name', title: '姓名', width: '120px' },
+  { key: 'age', title: '年龄', width: '80px' },
+  { key: 'address', title: '地址' }
+]
+
+const data = [
+  { name: '张三', age: 28, address: '北京市朝阳区' },
+  { name: '李四', age: 32, address: '上海市浦东新区' },
+  { name: '王五', age: 25, address: '广州市天河区' }
+]
+</script>`
+}
+