@ebiz/designer-components 0.0.18 → 0.0.19-beta.10

package/src/views/TdesignCalendar.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="calendar-demo">
+    <h1>TDesign 日历组件示例</h1>
+    
+    <div class="demo-section">
+      <h2>1. 基础日历</h2>
+      <tdesign-calendar />
+    </div>
+    
+    <div class="demo-section">
+      <h2>2. 卡片模式</h2>
+      <tdesign-calendar theme="card" />
+    </div>
+    
+    <div class="demo-section">
+      <h2>3. 年份模式</h2>
+      <tdesign-calendar mode="year" />
+    </div>
+    
+    <div class="demo-section">
+      <h2>4. 自定义内容</h2>
+      <tdesign-calendar :cell-data="getCellData" />
+    </div>
+    
+    <div class="demo-section">
+      <h2>5. 多选模式</h2>
+      <tdesign-calendar multiple :value="['2023-05-01', '2023-05-15']" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { TdesignCalendar } from '../index.js'
+
+export default {
+  name: 'TdesignCalendarDemo',
+  components: {
+    TdesignCalendar
+  },
+  data() {
+    return {
+      // 演示数据
+      events: [
+        { date: new Date(2023, 4, 1), content: '劳动节', type: 'holiday' },
+        { date: new Date(2023, 4, 5), content: '项目启动', type: 'work' },
+        { date: new Date(2023, 4, 15), content: '阶段评审', type: 'work' },
+        { date: new Date(2023, 4, 20), content: '团队建设', type: 'team' },
+      ]
+    }
+  },
+  methods: {
+    // 自定义单元格数据方法
+    getCellData(date) {
+      const formattedDate = new Date(date.year, date.month, date.day)
+      const event = this.events.find(e => 
+        e.date.getFullYear() === formattedDate.getFullYear() &&
+        e.date.getMonth() === formattedDate.getMonth() &&
+        e.date.getDate() === formattedDate.getDate()
+      )
+      
+      if (event) {
+        return {
+          content: event.content,
+          type: event.type
+        }
+      }
+      return {}
+    }
+  }
+}
+</script>
+
+<style scoped>
+.calendar-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;
+}
+</style> 

package/src/views/TdesignCard.vue

@@ -0,0 +1,297 @@
+<template>
+  <div class="tdesign-card-demo">
+    <h2>TDesign 卡片示例</h2>
+    
+    <div class="section">
+      <h3>标准卡片</h3>
+      <div class="card-row">
+        <ebiz-tdesign-card 
+          title="标准卡片" 
+          subtitle="副标题"
+          description="卡片描述信息"
+        >
+          卡片内容区域，可以是文字、图片等形式信息内容。
+        </ebiz-tdesign-card>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>无边框卡片</h3>
+      <div class="card-row">
+        <ebiz-tdesign-card 
+          title="无边框卡片" 
+          :bordered="false"
+        >
+          无边框的卡片样式，适合在有背景的容器中使用。
+        </ebiz-tdesign-card>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>带阴影卡片</h3>
+      <div class="card-row">
+        <ebiz-tdesign-card 
+          title="阴影卡片" 
+          :shadow="true"
+        >
+          带阴影的卡片，用于强调内容。
+        </ebiz-tdesign-card>
+        
+        <ebiz-tdesign-card 
+          title="悬浮阴影卡片" 
+          :hoverShadow="true"
+        >
+          悬浮时显示阴影，鼠标放上来查看效果。
+        </ebiz-tdesign-card>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>卡片尺寸</h3>
+      <div class="card-row">
+        <ebiz-tdesign-card 
+          title="中型卡片" 
+          size="medium"
+        >
+          中型卡片内容
+        </ebiz-tdesign-card>
+        
+        <ebiz-tdesign-card 
+          title="小型卡片" 
+          size="small"
+        >
+          小型卡片内容
+        </ebiz-tdesign-card>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>带头部分割线的卡片</h3>
+      <div class="card-row">
+        <ebiz-tdesign-card 
+          title="头部分割线" 
+          :headerBordered="true"
+        >
+          头部带分割线的卡片，使内容区域和头部有明显分隔。
+        </ebiz-tdesign-card>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>带封面的卡片</h3>
+      <div class="card-row">
+        <ebiz-tdesign-card 
+          title="封面卡片" 
+          cover="https://tdesign.gtimg.com/site/source/card-demo.jpg"
+        >
+          带有封面图的卡片。
+        </ebiz-tdesign-card>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>操作区域卡片</h3>
+      <div class="card-row">
+        <ebiz-tdesign-card 
+          title="操作区域"
+        >
+          <template #actions>
+            <div style="display: flex; justify-content: space-between; width: 100%;">
+              <span>操作一</span>
+              <span>操作二</span>
+              <span>操作三</span>
+            </div>
+          </template>
+          带有操作区域的卡片，可以添加各种操作按钮。
+        </ebiz-tdesign-card>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>带底部的卡片</h3>
+      <div class="card-row">
+        <ebiz-tdesign-card 
+          title="带底部的卡片"
+        >
+          <template #footer>
+            <div style="text-align: right;">
+              <button style="padding: 5px 10px; margin-right: 8px;">取消</button>
+              <button style="padding: 5px 10px; background: #0052d9; color: white; border: none;">确定</button>
+            </div>
+          </template>
+          带有底部区域的卡片，常用于放置按钮等操作元素。
+        </ebiz-tdesign-card>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>自定义头部的卡片</h3>
+      <div class="card-row">
+        <ebiz-tdesign-card>
+          <template #header>
+            <div style="display: flex; justify-content: space-between; align-items: center; padding: 10px 0;">
+              <div>
+                <h4 style="margin: 0;">自定义头部</h4>
+                <small style="color: #999;">2023-05-20</small>
+              </div>
+              <span style="cursor: pointer;">···</span>
+            </div>
+          </template>
+          通过自定义头部插槽，实现更复杂的头部布局。
+        </ebiz-tdesign-card>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>加载状态卡片</h3>
+      <div class="card-row">
+        <ebiz-tdesign-card 
+          title="加载中" 
+          :loading="true"
+        >
+          内容加载中...
+        </ebiz-tdesign-card>
+        
+        <ebiz-tdesign-card 
+          title="自定义加载" 
+          :loading="true"
+          :loadingProps="{ text: '正在加载数据...', size: 'medium' }"
+        >
+          内容加载中...
+        </ebiz-tdesign-card>
+        
+        <ebiz-tdesign-card 
+          title="自定义加载插槽" 
+          :loading="true"
+        >
+          <template #loading>
+            <div style="display: flex; justify-content: center; align-items: center; padding: 20px;">
+              <span>TDesign努力加载中...</span>
+            </div>
+          </template>
+          内容加载中...
+        </ebiz-tdesign-card>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>不同风格卡片</h3>
+      <div class="card-row">
+        <ebiz-tdesign-card 
+          title="普通风格" 
+          subtitle="副标题"
+          theme="normal"
+        >
+          普通风格卡片内容
+        </ebiz-tdesign-card>
+        
+        <ebiz-tdesign-card 
+          title="海报风格1" 
+          subtitle="副标题"
+          theme="poster1"
+          cover="https://tdesign.gtimg.com/site/source/card-demo.jpg"
+        >
+          <template #actions>
+            <div style="display: flex; justify-content: space-between; width: 100%;">
+              <span>操作区域在顶部</span>
+            </div>
+          </template>
+          海报风格1卡片内容，操作区域在顶部。
+        </ebiz-tdesign-card>
+        
+        <ebiz-tdesign-card 
+          title="海报风格2" 
+          subtitle="副标题"
+          theme="poster2"
+          status="进行中"
+          cover="https://tdesign.gtimg.com/site/source/card-demo.jpg"
+        >
+          <template #actions>
+            <div style="display: flex; justify-content: space-between; width: 100%;">
+              <span>操作区域在底部</span>
+            </div>
+          </template>
+          海报风格2卡片内容，操作区域在底部。
+        </ebiz-tdesign-card>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>带头像的卡片</h3>
+      <div class="card-row">
+        <ebiz-tdesign-card 
+          title="头像卡片" 
+          theme="poster2"
+          avatar="https://tdesign.gtimg.com/site/avatar.jpg"
+        >
+          仅在海报风格的卡片中头像才有效。
+        </ebiz-tdesign-card>
+      </div>
+    </div>
+    
+    <div class="section">
+      <h3>事件处理</h3>
+      <div class="card-row">
+        <ebiz-tdesign-card 
+          title="点击事件" 
+          @click="handleCardClick"
+        >
+          点击此卡片触发点击事件。
+        </ebiz-tdesign-card>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { EbizTdesignCard } from '../index.js'
+
+export default {
+  name: 'TdesignCardDemo',
+  components: {
+    EbizTdesignCard
+  },
+  methods: {
+    handleCardClick(_e) {
+      alert('卡片被点击了！')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tdesign-card-demo {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.section {
+  margin-bottom: 30px;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 20px;
+}
+
+h2 {
+  margin-bottom: 20px;
+  font-size: 24px;
+  color: #0052d9;
+}
+
+h3 {
+  margin-bottom: 12px;
+  font-size: 18px;
+  color: #333;
+}
+
+.card-row {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+}
+
+.card-row > * {
+  width: 300px;
+}
+</style> 

package/src/views/TdesignCollapse.vue

@@ -0,0 +1,294 @@
+<template>
+  <div class="demo-container">
+    <h1>TDesign 折叠面板组件示例</h1>
+
+    <div class="section">
+      <h2>基础折叠面板</h2>
+      <TdesignCollapse v-model="activeValues1">
+        <TdesignCollapsePanel value="1" header="这是一个折叠标题">
+          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+        </TdesignCollapsePanel>
+        <TdesignCollapsePanel value="2" header="设置默认展开项">
+          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+        </TdesignCollapsePanel>
+        <TdesignCollapsePanel value="3" header="自定义折叠面板内容">
+          <div class="custom-content">
+            <p>这是自定义内容区域，可以包含任何元素。</p>
+            <div class="custom-buttons">
+              <t-button theme="primary" size="small">按钮 1</t-button>
+              <t-button theme="default" size="small">按钮 2</t-button>
+            </div>
+          </div>
+        </TdesignCollapsePanel>
+      </TdesignCollapse>
+      <div class="value-display">当前展开项: {{ JSON.stringify(activeValues1) }}</div>
+    </div>
+
+    <div class="section">
+      <h2>手风琴模式</h2>
+      <TdesignCollapse v-model="activeValues2" expand-mutex>
+        <TdesignCollapsePanel value="1" header="这是一个折叠标题">
+          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+        </TdesignCollapsePanel>
+        <TdesignCollapsePanel value="2" header="这是一个折叠标题">
+          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+        </TdesignCollapsePanel>
+        <TdesignCollapsePanel value="3" header="这是一个折叠标题">
+          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+        </TdesignCollapsePanel>
+      </TdesignCollapse>
+      <div class="value-display">当前展开项: {{ JSON.stringify(activeValues2) }}</div>
+    </div>
+
+    <div class="section">
+      <h2>自定义图标位置</h2>
+      <TdesignCollapse v-model="activeValues3" expand-icon-placement="right">
+        <TdesignCollapsePanel value="1" header="左侧标题，右侧图标">
+          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+        </TdesignCollapsePanel>
+        <TdesignCollapsePanel value="2" header="左侧标题，右侧图标">
+          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+        </TdesignCollapsePanel>
+      </TdesignCollapse>
+    </div>
+
+    <div class="section">
+      <h2>无边框模式</h2>
+      <TdesignCollapse v-model="activeValues4" borderless>
+        <TdesignCollapsePanel value="1" header="无边框模式标题">
+          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+        </TdesignCollapsePanel>
+        <TdesignCollapsePanel value="2" header="无边框模式标题">
+          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+        </TdesignCollapsePanel>
+      </TdesignCollapse>
+    </div>
+
+    <div class="section">
+      <h2>默认展开全部</h2>
+      <TdesignCollapse v-model="activeValues8" default-expand-all>
+        <TdesignCollapsePanel value="1" header="默认展开面板1">
+          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+        </TdesignCollapsePanel>
+        <TdesignCollapsePanel value="2" header="默认展开面板2">
+          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+        </TdesignCollapsePanel>
+        <TdesignCollapsePanel value="3" header="默认展开面板3">
+          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+        </TdesignCollapsePanel>
+      </TdesignCollapse>
+    </div>
+
+    <div class="section">
+      <h2>嵌套折叠面板</h2>
+      <TdesignCollapse v-model="activeValues5">
+        <TdesignCollapsePanel value="1" header="父级折叠面板">
+          <TdesignCollapse v-model="nestedValues">
+            <TdesignCollapsePanel value="1-1" header="嵌套面板1">
+              这是嵌套面板1的内容
+            </TdesignCollapsePanel>
+            <TdesignCollapsePanel value="1-2" header="嵌套面板2">
+              这是嵌套面板2的内容
+            </TdesignCollapsePanel>
+          </TdesignCollapse>
+        </TdesignCollapsePanel>
+      </TdesignCollapse>
+    </div>
+
+    <div class="section">
+      <h2>禁用状态</h2>
+      <TdesignCollapse v-model="activeValues6">
+        <TdesignCollapsePanel value="1" header="可展开面板">
+          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+        </TdesignCollapsePanel>
+        <TdesignCollapsePanel value="2" header="禁用的面板" disabled>
+          这部分内容不会被展开，因为面板已禁用。
+        </TdesignCollapsePanel>
+      </TdesignCollapse>
+    </div>
+
+    <div class="section">
+      <h2>销毁折叠内容</h2>
+      <TdesignCollapse v-model="activeValues9">
+        <TdesignCollapsePanel value="1" header="不销毁内容的面板">
+          <div class="custom-content">
+            <p>关闭后不会销毁内容，状态会保留</p>
+            <t-input v-model="inputValue1" placeholder="输入内容会被保留" />
+          </div>
+        </TdesignCollapsePanel>
+        <TdesignCollapsePanel value="2" header="销毁内容的面板" destroy-on-collapse>
+          <div class="custom-content">
+            <p>关闭后会销毁内容，状态不会保留</p>
+            <t-input v-model="inputValue2" placeholder="输入内容会被销毁" />
+          </div>
+        </TdesignCollapsePanel>
+      </TdesignCollapse>
+    </div>
+
+    <div class="section">
+      <h2>自定义右侧内容</h2>
+      <TdesignCollapse v-model="activeValues7">
+        <TdesignCollapsePanel value="1" header="带有右侧内容的面板">
+          <template #rightContent>
+            <div class="right-content">
+              <t-tag theme="primary">标签</t-tag>
+              <t-button theme="default" size="small" variant="text">操作</t-button>
+            </div>
+          </template>
+          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+        </TdesignCollapsePanel>
+      </TdesignCollapse>
+    </div>
+
+    <div class="section">
+      <h2>受控用法示例</h2>
+      <div class="control-buttons">
+        <t-button @click="handleExpandAll">展开全部</t-button>
+        <t-button @click="handleCollapseAll">收起全部</t-button>
+        <t-button @click="handleToggleFirst">切换第一个</t-button>
+      </div>
+      <TdesignCollapse v-model="controlledValues" @change="handleControlledChange">
+        <TdesignCollapsePanel value="1" header="受控面板1">
+          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+        </TdesignCollapsePanel>
+        <TdesignCollapsePanel value="2" header="受控面板2">
+          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+        </TdesignCollapsePanel>
+        <TdesignCollapsePanel value="3" header="受控面板3">
+          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+        </TdesignCollapsePanel>
+      </TdesignCollapse>
+      <div class="value-display">当前展开项: {{ JSON.stringify(controlledValues) }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue';
+import { Button as TButton, Tag as TTag, Input as TInput } from 'tdesign-vue-next';
+import { TdesignCollapse, TdesignCollapsePanel } from '../index.js';
+
+export default defineComponent({
+  name: 'TdesignCollapseDemo',
+  components: {
+    TdesignCollapse,
+    TdesignCollapsePanel,
+    TButton,
+    TTag,
+    TInput
+  },
+  setup() {
+    const activeValues1 = ref(['1']);
+    const activeValues2 = ref([]);
+    const activeValues3 = ref(['1']);
+    const activeValues4 = ref(['1']);
+    const activeValues5 = ref(['1']);
+    const activeValues6 = ref(['1']);
+    const activeValues7 = ref(['1']);
+    const activeValues8 = ref([]);
+    const activeValues9 = ref(['1']);
+    const nestedValues = ref(['1-1']);
+    
+    // 用于销毁折叠面板的输入框内容示例
+    const inputValue1 = ref('');
+    const inputValue2 = ref('');
+    
+    // 受控示例
+    const controlledValues = ref(['1']);
+    
+    const handleExpandAll = () => {
+      controlledValues.value = ['1', '2', '3'];
+    };
+    
+    const handleCollapseAll = () => {
+      controlledValues.value = [];
+    };
+    
+    const handleToggleFirst = () => {
+      if (controlledValues.value.includes('1')) {
+        controlledValues.value = controlledValues.value.filter(item => item !== '1');
+      } else {
+        controlledValues.value = [...controlledValues.value, '1'];
+      }
+    };
+    
+    const handleControlledChange = (val) => {
+      console.log('面板变化事件触发', val);
+    };
+
+    return {
+      activeValues1,
+      activeValues2,
+      activeValues3,
+      activeValues4,
+      activeValues5,
+      activeValues6,
+      activeValues7,
+      activeValues8,
+      activeValues9,
+      nestedValues,
+      inputValue1,
+      inputValue2,
+      controlledValues,
+      handleExpandAll,
+      handleCollapseAll,
+      handleToggleFirst,
+      handleControlledChange
+    };
+  }
+});
+</script>
+
+<style scoped>
+.demo-container {
+  padding: 20px;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+h1 {
+  font-size: 24px;
+  color: #0052d9;
+  margin-bottom: 20px;
+}
+
+.section {
+  margin-bottom: 40px;
+}
+
+h2 {
+  font-size: 18px;
+  margin-bottom: 16px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #eee;
+}
+
+.value-display {
+  margin-top: 12px;
+  font-size: 14px;
+  color: #666;
+  font-family: monospace;
+}
+
+.custom-content {
+  padding: 8px 0;
+}
+
+.custom-buttons {
+  margin-top: 12px;
+  display: flex;
+  gap: 8px;
+}
+
+.right-content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.control-buttons {
+  margin-bottom: 16px;
+  display: flex;
+  gap: 8px;
+}
+</style>