@ebiz/designer-components 0.1.1 → 0.1.4

package/src/views/TdesignDatePicker.vue

@@ -1,188 +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;
-}
+<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> 

package/src/views/TdesignDescriptions.vue

@@ -1,102 +1,102 @@
-<template>
-  <div class="container">
-    <h2>描述列表组件演示</h2>
-    
-    <div class="demo-section">
-      <h3>基础用法</h3>
-      <EbizDescriptions title="配送信息" :column="2">
-        <EbizDescriptionsItem label="姓名">TDesign</EbizDescriptionsItem>
-        <EbizDescriptionsItem label="电话号码">139****0609</EbizDescriptionsItem>
-        <EbizDescriptionsItem label="地区">腾讯总部</EbizDescriptionsItem>
-        <EbizDescriptionsItem label="地址">深圳市南山区深南大道10000号</EbizDescriptionsItem>
-      </EbizDescriptions>
-    </div>
-
-    <div class="demo-section">
-      <h3>带边框</h3>
-      <EbizDescriptions title="配送信息" :column="2" border>
-        <EbizDescriptionsItem label="姓名">TDesign</EbizDescriptionsItem>
-        <EbizDescriptionsItem label="电话号码">139****0609</EbizDescriptionsItem>
-        <EbizDescriptionsItem label="地区">腾讯总部</EbizDescriptionsItem>
-        <EbizDescriptionsItem label="地址">深圳市南山区深南大道10000号</EbizDescriptionsItem>
-      </EbizDescriptions>
-    </div>
-
-    <div class="demo-section">
-      <h3>带冒号</h3>
-      <EbizDescriptions title="配送信息" :column="2" colon>
-        <EbizDescriptionsItem label="姓名">TDesign</EbizDescriptionsItem>
-        <EbizDescriptionsItem label="电话号码">139****0609</EbizDescriptionsItem>
-        <EbizDescriptionsItem label="地区">腾讯总部</EbizDescriptionsItem>
-        <EbizDescriptionsItem label="地址">深圳市南山区深南大道10000号</EbizDescriptionsItem>
-      </EbizDescriptions>
-    </div>
-
-    <div class="demo-section">
-      <h3>垂直布局</h3>
-      <EbizDescriptions title="配送信息" :column="2" layout="vertical" border>
-        <EbizDescriptionsItem label="姓名">TDesign</EbizDescriptionsItem>
-        <EbizDescriptionsItem label="电话号码">139****0609</EbizDescriptionsItem>
-        <EbizDescriptionsItem label="地区">腾讯总部</EbizDescriptionsItem>
-        <EbizDescriptionsItem label="地址">深圳市南山区深南大道10000号</EbizDescriptionsItem>
-      </EbizDescriptions>
-    </div>
-
-    <div class="demo-section">
-      <h3>自定义列数</h3>
-      <EbizDescriptions title="配送信息" :column="3" border>
-        <EbizDescriptionsItem label="姓名">TDesign</EbizDescriptionsItem>
-        <EbizDescriptionsItem label="电话号码">139****0609</EbizDescriptionsItem>
-        <EbizDescriptionsItem label="地区">腾讯总部</EbizDescriptionsItem>
-        <EbizDescriptionsItem label="地址" :span="2">深圳市南山区深南大道10000号</EbizDescriptionsItem>
-      </EbizDescriptions>
-    </div>
-
-    <div class="demo-section">
-      <h3>自定义样式</h3>
-      <EbizDescriptions title="配送信息" :column="2" border table-border-color="#E7E7E7">
-        <EbizDescriptionsItem label="姓名" label-class-name="custom-label">TDesign</EbizDescriptionsItem>
-        <EbizDescriptionsItem label="电话号码">139****0609</EbizDescriptionsItem>
-        <EbizDescriptionsItem label="地区">腾讯总部</EbizDescriptionsItem>
-        <EbizDescriptionsItem label="地址" content-class-name="custom-content">
-          <span style="color: #0052d9">深圳市南山区深南大道10000号</span>
-        </EbizDescriptionsItem>
-      </EbizDescriptions>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { EbizDescriptions, EbizDescriptionsItem } from '../index.js';
-</script>
-
-<style scoped>
-.container {
-  padding: 24px;
-  max-width: 1000px;
-  margin: 0 auto;
-}
-
-.demo-section {
-  margin-bottom: 32px;
-}
-
-h2 {
-  font-size: 24px;
-  margin-bottom: 24px;
-}
-
-h3 {
-  font-size: 18px;
-  margin-bottom: 16px;
-}
-
-.custom-label {
-  font-weight: bold;
-  color: #0052d9;
-}
-
-.custom-content {
-  font-style: italic;
-}
+<template>
+  <div class="container">
+    <h2>描述列表组件演示</h2>
+    
+    <div class="demo-section">
+      <h3>基础用法</h3>
+      <EbizDescriptions title="配送信息" :column="2">
+        <EbizDescriptionsItem label="姓名">TDesign</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="电话号码">139****0609</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="地区">腾讯总部</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="地址">深圳市南山区深南大道10000号</EbizDescriptionsItem>
+      </EbizDescriptions>
+    </div>
+
+    <div class="demo-section">
+      <h3>带边框</h3>
+      <EbizDescriptions title="配送信息" :column="2" border>
+        <EbizDescriptionsItem label="姓名">TDesign</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="电话号码">139****0609</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="地区">腾讯总部</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="地址">深圳市南山区深南大道10000号</EbizDescriptionsItem>
+      </EbizDescriptions>
+    </div>
+
+    <div class="demo-section">
+      <h3>带冒号</h3>
+      <EbizDescriptions title="配送信息" :column="2" colon>
+        <EbizDescriptionsItem label="姓名">TDesign</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="电话号码">139****0609</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="地区">腾讯总部</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="地址">深圳市南山区深南大道10000号</EbizDescriptionsItem>
+      </EbizDescriptions>
+    </div>
+
+    <div class="demo-section">
+      <h3>垂直布局</h3>
+      <EbizDescriptions title="配送信息" :column="2" layout="vertical" border>
+        <EbizDescriptionsItem label="姓名">TDesign</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="电话号码">139****0609</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="地区">腾讯总部</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="地址">深圳市南山区深南大道10000号</EbizDescriptionsItem>
+      </EbizDescriptions>
+    </div>
+
+    <div class="demo-section">
+      <h3>自定义列数</h3>
+      <EbizDescriptions title="配送信息" :column="3" border>
+        <EbizDescriptionsItem label="姓名">TDesign</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="电话号码">139****0609</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="地区">腾讯总部</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="地址" :span="2">深圳市南山区深南大道10000号</EbizDescriptionsItem>
+      </EbizDescriptions>
+    </div>
+
+    <div class="demo-section">
+      <h3>自定义样式</h3>
+      <EbizDescriptions title="配送信息" :column="2" border table-border-color="#E7E7E7">
+        <EbizDescriptionsItem label="姓名" label-class-name="custom-label">TDesign</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="电话号码">139****0609</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="地区">腾讯总部</EbizDescriptionsItem>
+        <EbizDescriptionsItem label="地址" content-class-name="custom-content">
+          <span style="color: #0052d9">深圳市南山区深南大道10000号</span>
+        </EbizDescriptionsItem>
+      </EbizDescriptions>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { EbizDescriptions, EbizDescriptionsItem } from '../index.js';
+</script>
+
+<style scoped>
+.container {
+  padding: 24px;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.demo-section {
+  margin-bottom: 32px;
+}
+
+h2 {
+  font-size: 24px;
+  margin-bottom: 24px;
+}
+
+h3 {
+  font-size: 18px;
+  margin-bottom: 16px;
+}
+
+.custom-label {
+  font-weight: bold;
+  color: #0052d9;
+}
+
+.custom-content {
+  font-style: italic;
+}
 </style>