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

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> 

package/src/views/TdesignDatePicker.vue

@@ -0,0 +1,188 @@
+<template>
+  <div class="tdesign-datepicker-demo">
+    <h2>TDesign 日期选择器示例</h2>
+
+    <div class="section">
+      <h3>基础日期选择器</h3>
+      <div class="demo-row">
+        <ebiz-tdesign-date-picker v-model="baseDate" placeholder="请选择日期" />
+        <div class="result">选择的日期: {{ baseDate || '未选择' }}</div>
+      </div>
+    </div>
+
+    <div class="section">
+      <h3>不同选择器模式</h3>
+      <div class="demo-row">
+        <ebiz-tdesign-date-picker v-model="modeDate1" mode="date" placeholder="日期选择" />
+        <ebiz-tdesign-date-picker v-model="modeDate2" mode="month" placeholder="月份选择" />
+        <ebiz-tdesign-date-picker v-model="modeDate3" mode="year" placeholder="年份选择" />
+        <ebiz-tdesign-date-picker v-model="modeDate4" mode="week" placeholder="周选择" />
+        <ebiz-tdesign-date-picker v-model="modeDate5" mode="quarter" placeholder="季度选择" />
+      </div>
+    </div>
+
+    <div class="section">
+      <h3>不同尺寸</h3>
+      <div class="demo-row">
+        <ebiz-tdesign-date-picker v-model="sizeDate1" size="small" placeholder="小尺寸" />
+        <ebiz-tdesign-date-picker v-model="sizeDate2" size="medium" placeholder="中等尺寸" />
+        <ebiz-tdesign-date-picker v-model="sizeDate3" size="large" placeholder="大尺寸" />
+      </div>
+    </div>
+
+    <div class="section">
+      <h3>日期格式</h3>
+      <div class="demo-row">
+        <ebiz-tdesign-date-picker v-model="formatDate1" format="YYYY/MM/DD" placeholder="YYYY/MM/DD" />
+        <ebiz-tdesign-date-picker v-model="formatDate2" format="YYYY年MM月DD日" placeholder="YYYY年MM月DD日" />
+        <ebiz-tdesign-date-picker v-model="formatDate3" format="MM/DD/YYYY" placeholder="MM/DD/YYYY" />
+      </div>
+    </div>
+
+    <div class="section">
+      <h3>带时间选择</h3>
+      <div class="demo-row">
+        <ebiz-tdesign-date-picker 
+          v-model="timeDate" 
+          enableTimePicker 
+          format="YYYY-MM-DD HH:mm:ss" 
+          placeholder="选择日期和时间" 
+        />
+        <div class="result">选择的日期和时间: {{ timeDate || '未选择' }}</div>
+      </div>
+    </div>
+
+    <div class="section">
+      <h3>快捷选项</h3>
+      <div class="demo-row">
+        <ebiz-tdesign-date-picker 
+          v-model="presetDate" 
+          placeholder="带预设的日期选择"
+          :presets="presetOptions"
+        />
+        <div class="result">选择的日期: {{ presetDate || '未选择' }}</div>
+      </div>
+    </div>
+
+    <div class="section">
+      <h3>不同状态</h3>
+      <div class="demo-row">
+        <ebiz-tdesign-date-picker v-model="statusDate1" status="default" placeholder="默认状态" />
+        <ebiz-tdesign-date-picker v-model="statusDate2" status="success" placeholder="成功状态" />
+        <ebiz-tdesign-date-picker v-model="statusDate3" status="warning" placeholder="警告状态" />
+        <ebiz-tdesign-date-picker v-model="statusDate4" status="error" placeholder="错误状态" />
+      </div>
+    </div>
+
+    <div class="section">
+      <h3>允许直接输入</h3>
+      <div class="demo-row">
+        <ebiz-tdesign-date-picker 
+          v-model="inputDate" 
+          allowInput 
+          placeholder="可直接输入日期" 
+        />
+        <div class="result">输入的日期: {{ inputDate || '未输入' }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { EbizTdesignDatePicker } from '../index.js';
+
+export default {
+  name: 'TdesignDatePickerDemo',
+  components: {
+    EbizTdesignDatePicker
+  },
+  data() {
+    return {
+      baseDate: '',
+      modeDate1: '',
+      modeDate2: '',
+      modeDate3: '',
+      modeDate4: '',
+      modeDate5: '',
+      sizeDate1: '',
+      sizeDate2: '',
+      sizeDate3: '',
+      formatDate1: '',
+      formatDate2: '',
+      formatDate3: '',
+      timeDate: '',
+      presetDate: '',
+      statusDate1: '',
+      statusDate2: '',
+      statusDate3: '',
+      statusDate4: '',
+      inputDate: '',
+      presetOptions: {
+        '最近一周': () => {
+          const end = new Date();
+          const start = new Date();
+          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+          return start;
+        },
+        '最近一个月': () => {
+          const end = new Date();
+          const start = new Date();
+          start.setMonth(start.getMonth() - 1);
+          return start;
+        },
+        '最近三个月': () => {
+          const end = new Date();
+          const start = new Date();
+          start.setMonth(start.getMonth() - 3);
+          return start;
+        },
+        '今天': () => new Date(),
+        '昨天': () => {
+          const date = new Date();
+          date.setTime(date.getTime() - 3600 * 1000 * 24);
+          return date;
+        }
+      }
+    };
+  }
+};
+</script>
+
+<style scoped>
+.tdesign-datepicker-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;
+}
+
+.demo-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  margin-bottom: 16px;
+  align-items: center;
+}
+
+.result {
+  margin-left: 10px;
+  color: #666;
+}
+</style>