@ebiz/designer-components 0.0.63 → 0.1.1

package/src/views/TdesignSwiper.vue

@@ -1,158 +1,158 @@
-<template>
-  <div class="swiper-demo">
-    <h1>TDesign 轮播框组件示例</h1>
-    
-    <div class="demo-section">
-      <h2>1. 基础轮播</h2>
-      <ebiz-swiper>
-        <ebiz-swiper-item v-for="(item, index) in swiperItems" :key="index">
-          <div class="demo-item" :style="{ backgroundColor: item.color }">
-            {{ item.label }}
-          </div>
-        </ebiz-swiper-item>
-      </ebiz-swiper>
-    </div>
-    
-    <div class="demo-section">
-      <h2>2. 垂直布局</h2>
-      <ebiz-swiper direction="vertical" :height="200">
-        <ebiz-swiper-item v-for="(item, index) in swiperItems" :key="index">
-          <div class="demo-item" :style="{ backgroundColor: item.color }">
-            {{ item.label }}
-          </div>
-        </ebiz-swiper-item>
-      </ebiz-swiper>
-    </div>
-    
-    <div class="demo-section">
-      <h2>3. 自定义导航器位置</h2>
-      <ebiz-swiper :navigation="{ placement: 'outside' }">
-        <ebiz-swiper-item v-for="(item, index) in swiperItems" :key="index">
-          <div class="demo-item" :style="{ backgroundColor: item.color }">
-            {{ item.label }}
-          </div>
-        </ebiz-swiper-item>
-      </ebiz-swiper>
-    </div>
-    
-    <div class="demo-section">
-      <h2>4. 分式导航器</h2>
-      <ebiz-swiper :navigation="{ type: 'fraction' }">
-        <ebiz-swiper-item v-for="(item, index) in swiperItems" :key="index">
-          <div class="demo-item" :style="{ backgroundColor: item.color }">
-            {{ item.label }}
-          </div>
-        </ebiz-swiper-item>
-      </ebiz-swiper>
-    </div>
-    
-    <div class="demo-section">
-      <h2>5. 渐隐模式</h2>
-      <ebiz-swiper animation="fade">
-        <ebiz-swiper-item v-for="(item, index) in swiperItems" :key="index">
-          <div class="demo-item" :style="{ backgroundColor: item.color }">
-            {{ item.label }}
-          </div>
-        </ebiz-swiper-item>
-      </ebiz-swiper>
-    </div>
-    
-    <div class="demo-section">
-      <h2>6. 手动控制</h2>
-      <div class="control-panel">
-        <t-button @click="currentIndex = (currentIndex - 1 + swiperItems.length) % swiperItems.length">上一张</t-button>
-        <t-button @click="currentIndex = (currentIndex + 1) % swiperItems.length">下一张</t-button>
-      </div>
-      <ebiz-swiper v-model:current="currentIndex" :autoplay="false">
-        <ebiz-swiper-item v-for="(item, index) in swiperItems" :key="index">
-          <div class="demo-item" :style="{ backgroundColor: item.color }">
-            {{ item.label }}
-          </div>
-        </ebiz-swiper-item>
-      </ebiz-swiper>
-    </div>
-    
-    <div class="demo-section">
-      <h2>7. 自定义导航器大小</h2>
-      <ebiz-swiper :navigation="{ size: 'large' }">
-        <ebiz-swiper-item v-for="(item, index) in swiperItems" :key="index">
-          <div class="demo-item" :style="{ backgroundColor: item.color }">
-            {{ item.label }}
-          </div>
-        </ebiz-swiper-item>
-      </ebiz-swiper>
-    </div>
-  </div>
-</template>
-
-<script>
-import { ref } from 'vue';
-import { EbizSwiper, EbizSwiperItem } from '../index.js';
-import { Button as TButton } from 'tdesign-vue-next';
-
-export default {
-  name: 'TdesignSwiperDemo',
-  components: {
-    EbizSwiper,
-    EbizSwiperItem,
-    TButton
-  },
-  setup() {
-    const currentIndex = ref(0);
-    
-    const swiperItems = [
-      { label: '1', color: '#0052D9' },
-      { label: '2', color: '#0594FA' },
-      { label: '3', color: '#05A573' },
-      { label: '4', color: '#D54941' },
-      { label: '5', color: '#ED7B2F' },
-      { label: '6', color: '#9B38D3' }
-    ];
-    
-    return {
-      currentIndex,
-      swiperItems
-    };
-  }
-};
-</script>
-
-<style scoped>
-.swiper-demo {
-  padding: 20px;
-}
-
-.demo-section {
-  margin-bottom: 40px;
-  border: 1px solid #eaeaea;
-  border-radius: 8px;
-  padding: 20px;
-}
-
-h1 {
-  margin-bottom: 30px;
-  color: #333;
-}
-
-h2 {
-  margin-bottom: 15px;
-  color: #666;
-  font-size: 18px;
-}
-
-.demo-item {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 200px;
-  color: white;
-  font-size: 32px;
-  font-weight: bold;
-}
-
-.control-panel {
-  display: flex;
-  gap: 10px;
-  margin-bottom: 10px;
-}
+<template>
+  <div class="swiper-demo">
+    <h1>TDesign 轮播框组件示例</h1>
+    
+    <div class="demo-section">
+      <h2>1. 基础轮播</h2>
+      <ebiz-swiper>
+        <ebiz-swiper-item v-for="(item, index) in swiperItems" :key="index">
+          <div class="demo-item" :style="{ backgroundColor: item.color }">
+            {{ item.label }}
+          </div>
+        </ebiz-swiper-item>
+      </ebiz-swiper>
+    </div>
+    
+    <div class="demo-section">
+      <h2>2. 垂直布局</h2>
+      <ebiz-swiper direction="vertical" :height="200">
+        <ebiz-swiper-item v-for="(item, index) in swiperItems" :key="index">
+          <div class="demo-item" :style="{ backgroundColor: item.color }">
+            {{ item.label }}
+          </div>
+        </ebiz-swiper-item>
+      </ebiz-swiper>
+    </div>
+    
+    <div class="demo-section">
+      <h2>3. 自定义导航器位置</h2>
+      <ebiz-swiper :navigation="{ placement: 'outside' }">
+        <ebiz-swiper-item v-for="(item, index) in swiperItems" :key="index">
+          <div class="demo-item" :style="{ backgroundColor: item.color }">
+            {{ item.label }}
+          </div>
+        </ebiz-swiper-item>
+      </ebiz-swiper>
+    </div>
+    
+    <div class="demo-section">
+      <h2>4. 分式导航器</h2>
+      <ebiz-swiper :navigation="{ type: 'fraction' }">
+        <ebiz-swiper-item v-for="(item, index) in swiperItems" :key="index">
+          <div class="demo-item" :style="{ backgroundColor: item.color }">
+            {{ item.label }}
+          </div>
+        </ebiz-swiper-item>
+      </ebiz-swiper>
+    </div>
+    
+    <div class="demo-section">
+      <h2>5. 渐隐模式</h2>
+      <ebiz-swiper animation="fade">
+        <ebiz-swiper-item v-for="(item, index) in swiperItems" :key="index">
+          <div class="demo-item" :style="{ backgroundColor: item.color }">
+            {{ item.label }}
+          </div>
+        </ebiz-swiper-item>
+      </ebiz-swiper>
+    </div>
+    
+    <div class="demo-section">
+      <h2>6. 手动控制</h2>
+      <div class="control-panel">
+        <t-button @click="currentIndex = (currentIndex - 1 + swiperItems.length) % swiperItems.length">上一张</t-button>
+        <t-button @click="currentIndex = (currentIndex + 1) % swiperItems.length">下一张</t-button>
+      </div>
+      <ebiz-swiper v-model:current="currentIndex" :autoplay="false">
+        <ebiz-swiper-item v-for="(item, index) in swiperItems" :key="index">
+          <div class="demo-item" :style="{ backgroundColor: item.color }">
+            {{ item.label }}
+          </div>
+        </ebiz-swiper-item>
+      </ebiz-swiper>
+    </div>
+    
+    <div class="demo-section">
+      <h2>7. 自定义导航器大小</h2>
+      <ebiz-swiper :navigation="{ size: 'large' }">
+        <ebiz-swiper-item v-for="(item, index) in swiperItems" :key="index">
+          <div class="demo-item" :style="{ backgroundColor: item.color }">
+            {{ item.label }}
+          </div>
+        </ebiz-swiper-item>
+      </ebiz-swiper>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+import { EbizSwiper, EbizSwiperItem } from '../index.js';
+import { Button as TButton } from 'tdesign-vue-next';
+
+export default {
+  name: 'TdesignSwiperDemo',
+  components: {
+    EbizSwiper,
+    EbizSwiperItem,
+    TButton
+  },
+  setup() {
+    const currentIndex = ref(0);
+    
+    const swiperItems = [
+      { label: '1', color: '#0052D9' },
+      { label: '2', color: '#0594FA' },
+      { label: '3', color: '#05A573' },
+      { label: '4', color: '#D54941' },
+      { label: '5', color: '#ED7B2F' },
+      { label: '6', color: '#9B38D3' }
+    ];
+    
+    return {
+      currentIndex,
+      swiperItems
+    };
+  }
+};
+</script>
+
+<style scoped>
+.swiper-demo {
+  padding: 20px;
+}
+
+.demo-section {
+  margin-bottom: 40px;
+  border: 1px solid #eaeaea;
+  border-radius: 8px;
+  padding: 20px;
+}
+
+h1 {
+  margin-bottom: 30px;
+  color: #333;
+}
+
+h2 {
+  margin-bottom: 15px;
+  color: #666;
+  font-size: 18px;
+}
+
+.demo-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 200px;
+  color: white;
+  font-size: 32px;
+  font-weight: bold;
+}
+
+.control-panel {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 10px;
+}
 </style> 

package/src/views/TextareaDemo.vue

@@ -1,94 +1,94 @@
-<template>
-  <div class="textarea-demo">
-    <h1>Textarea 多行文本框</h1>
-    
-    <section>
-      <h2>基础多行文本框</h2>
-      <p>用于多行文本的输入。</p>
-      <div class="demo-item">
-        <ebiz-textarea placeholder="请输入多行文本"></ebiz-textarea>
-      </div>
-    </section>
-    
-    <section>
-      <h2>限制最大字符数</h2>
-      <p>限制输入的最大字符数并展示字符数。</p>
-      <div class="demo-item">
-        <ebiz-textarea placeholder="请输入" :max-length="20" :max-character="true"></ebiz-textarea>
-      </div>
-    </section>
-    
-    <section>
-      <h2>自动调整高度</h2>
-      <p>根据内容自动调整输入框的高度。</p>
-      <div class="demo-item">
-        <ebiz-textarea placeholder="请输入" :autosize="true"></ebiz-textarea>
-      </div>
-    </section>
-    
-    <section>
-      <h2>不同状态的多行文本框</h2>
-      <p>支持只读、禁用和不同的状态样式。</p>
-      <div class="demo-item">
-        <p>默认状态：</p>
-        <ebiz-textarea placeholder="默认状态" tips="这是默认提示文本"></ebiz-textarea>
-      </div>
-      <div class="demo-item">
-        <p>成功状态：</p>
-        <ebiz-textarea placeholder="成功状态" status="success" tips="校验通过文本提示"></ebiz-textarea>
-      </div>
-      <div class="demo-item">
-        <p>警告状态：</p>
-        <ebiz-textarea placeholder="警告状态" status="warning" tips="校验存在警告文本提示"></ebiz-textarea>
-      </div>
-      <div class="demo-item">
-        <p>错误状态：</p>
-        <ebiz-textarea placeholder="错误状态" status="error" tips="校验不通过文本提示"></ebiz-textarea>
-      </div>
-      <div class="demo-item">
-        <p>只读状态：</p>
-        <ebiz-textarea placeholder="只读状态" :readonly="true" value="这是只读文本"></ebiz-textarea>
-      </div>
-      <div class="demo-item">
-        <p>禁用状态：</p>
-        <ebiz-textarea placeholder="禁用状态" :disabled="true"></ebiz-textarea>
-      </div>
-    </section>
-  </div>
-</template>
-
-<script setup>
-import { EbizTextarea } from '../index.js';
-</script>
-
-<style scoped>
-.textarea-demo {
-  max-width: 800px;
-  margin: 0 auto;
-  padding: 20px;
-}
-
-h1 {
-  font-size: 28px;
-  margin-bottom: 24px;
-}
-
-h2 {
-  font-size: 20px;
-  margin-top: 32px;
-  margin-bottom: 16px;
-}
-
-section {
-  margin-bottom: 40px;
-}
-
-.demo-item {
-  margin-bottom: 16px;
-  max-width: 400px;
-}
-
-p {
-  margin-bottom: 8px;
-}
+<template>
+  <div class="textarea-demo">
+    <h1>Textarea 多行文本框</h1>
+    
+    <section>
+      <h2>基础多行文本框</h2>
+      <p>用于多行文本的输入。</p>
+      <div class="demo-item">
+        <ebiz-textarea placeholder="请输入多行文本"></ebiz-textarea>
+      </div>
+    </section>
+    
+    <section>
+      <h2>限制最大字符数</h2>
+      <p>限制输入的最大字符数并展示字符数。</p>
+      <div class="demo-item">
+        <ebiz-textarea placeholder="请输入" :max-length="20" :max-character="true"></ebiz-textarea>
+      </div>
+    </section>
+    
+    <section>
+      <h2>自动调整高度</h2>
+      <p>根据内容自动调整输入框的高度。</p>
+      <div class="demo-item">
+        <ebiz-textarea placeholder="请输入" :autosize="true"></ebiz-textarea>
+      </div>
+    </section>
+    
+    <section>
+      <h2>不同状态的多行文本框</h2>
+      <p>支持只读、禁用和不同的状态样式。</p>
+      <div class="demo-item">
+        <p>默认状态：</p>
+        <ebiz-textarea placeholder="默认状态" tips="这是默认提示文本"></ebiz-textarea>
+      </div>
+      <div class="demo-item">
+        <p>成功状态：</p>
+        <ebiz-textarea placeholder="成功状态" status="success" tips="校验通过文本提示"></ebiz-textarea>
+      </div>
+      <div class="demo-item">
+        <p>警告状态：</p>
+        <ebiz-textarea placeholder="警告状态" status="warning" tips="校验存在警告文本提示"></ebiz-textarea>
+      </div>
+      <div class="demo-item">
+        <p>错误状态：</p>
+        <ebiz-textarea placeholder="错误状态" status="error" tips="校验不通过文本提示"></ebiz-textarea>
+      </div>
+      <div class="demo-item">
+        <p>只读状态：</p>
+        <ebiz-textarea placeholder="只读状态" :readonly="true" value="这是只读文本"></ebiz-textarea>
+      </div>
+      <div class="demo-item">
+        <p>禁用状态：</p>
+        <ebiz-textarea placeholder="禁用状态" :disabled="true"></ebiz-textarea>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup>
+import { EbizTextarea } from '../index.js';
+</script>
+
+<style scoped>
+.textarea-demo {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+h1 {
+  font-size: 28px;
+  margin-bottom: 24px;
+}
+
+h2 {
+  font-size: 20px;
+  margin-top: 32px;
+  margin-bottom: 16px;
+}
+
+section {
+  margin-bottom: 40px;
+}
+
+.demo-item {
+  margin-bottom: 16px;
+  max-width: 400px;
+}
+
+p {
+  margin-bottom: 8px;
+}
 </style>