@ebiz/designer-components 0.1.11 → 0.1.13

package/src/views/CheckboxDemo.vue

@@ -1,105 +1,105 @@
-<template>
-  <div class="checkbox-demo">
-    <h2>多选框组件示例</h2>
-
-    <h3>基础多选框</h3>
-    <div class="demo-section">
-      <EbizCheckbox>未选中项</EbizCheckbox>
-      <EbizCheckbox v-model="checkbox1">选中项</EbizCheckbox>
-      <EbizCheckbox :disabled="true">未选禁用项</EbizCheckbox>
-      <EbizCheckbox v-model="checkboxDisabled" :disabled="true">选中禁用项</EbizCheckbox>
-    </div>
-
-    <h3>半选状态</h3>
-    <div class="demo-section">
-      <EbizCheckbox :indeterminate="true">半选状态</EbizCheckbox>
-    </div>
-
-    <h3>多选框组</h3>
-    <div class="demo-section">
-      <p>选中值：{{ groupValue }}</p>
-      <EbizCheckboxGroup v-model="groupValue" :options="options" @change="onGroupChange" />
-    </div>
-
-    <h3>全选功能</h3>
-    <div class="demo-section">
-      <p>选中值：{{ allCheckValue }}</p>
-      <EbizCheckboxGroup v-model="allCheckValue">
-        <EbizCheckbox :check-all="true" @change="onCheckAllChange">全选</EbizCheckbox>
-        <EbizCheckbox value="1">选项一</EbizCheckbox>
-        <EbizCheckbox value="2">选项二</EbizCheckbox>
-        <EbizCheckbox value="3">选项三</EbizCheckbox>
-      </EbizCheckboxGroup>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "CheckboxDemo"
-}
-</script>
-
-<script setup>
-import { ref } from 'vue';
-import { EbizCheckbox, EbizCheckboxGroup } from '../index.js';
-
-// 单个多选框状态
-const checkbox1 = ref(true);
-const checkboxDisabled = ref(true);
-
-// 多选框组的值
-const groupValue = ref(['option1']);
-
-// 多选框组的配置选项
-const options = [
-  { label: '选项一', value: 'option1' },
-  { label: '选项二', value: 'option2' },
-  { label: '选项三', value: 'option3', disabled: true }
-];
-
-// 多选框组的值变化事件
-const onGroupChange = (value, context) => {
-  console.log('选中值变化:', value);
-  console.log('上下文信息:', context);
-};
-
-// 全选功能的值
-const allCheckValue = ref(['1']);
-
-// 全选状态变化事件
-const onCheckAllChange = (checked) => {
-  if (checked) {
-    allCheckValue.value = ['1', '2', '3'];
-  } else {
-    allCheckValue.value = [];
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.checkbox-demo {
-  padding: 20px;
-
-  h2 {
-    margin-bottom: 20px;
-    font-size: 24px;
-  }
-
-  h3 {
-    margin: 20px 0 10px;
-    font-size: 18px;
-  }
-
-  .demo-section {
-    padding: 16px;
-    margin-bottom: 16px;
-    border: 1px solid #eee;
-    border-radius: 4px;
-
-    .t-checkbox {
-      margin-right: 16px;
-    }
-  }
-}
+<template>
+  <div class="checkbox-demo">
+    <h2>多选框组件示例</h2>
+
+    <h3>基础多选框</h3>
+    <div class="demo-section">
+      <EbizCheckbox>未选中项</EbizCheckbox>
+      <EbizCheckbox v-model="checkbox1">选中项</EbizCheckbox>
+      <EbizCheckbox :disabled="true">未选禁用项</EbizCheckbox>
+      <EbizCheckbox v-model="checkboxDisabled" :disabled="true">选中禁用项</EbizCheckbox>
+    </div>
+
+    <h3>半选状态</h3>
+    <div class="demo-section">
+      <EbizCheckbox :indeterminate="true">半选状态</EbizCheckbox>
+    </div>
+
+    <h3>多选框组</h3>
+    <div class="demo-section">
+      <p>选中值：{{ groupValue }}</p>
+      <EbizCheckboxGroup v-model="groupValue" :options="options" @change="onGroupChange" />
+    </div>
+
+    <h3>全选功能</h3>
+    <div class="demo-section">
+      <p>选中值：{{ allCheckValue }}</p>
+      <EbizCheckboxGroup v-model="allCheckValue">
+        <EbizCheckbox :check-all="true" @change="onCheckAllChange">全选</EbizCheckbox>
+        <EbizCheckbox value="1">选项一</EbizCheckbox>
+        <EbizCheckbox value="2">选项二</EbizCheckbox>
+        <EbizCheckbox value="3">选项三</EbizCheckbox>
+      </EbizCheckboxGroup>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CheckboxDemo"
+}
+</script>
+
+<script setup>
+import { ref } from 'vue';
+import { EbizCheckbox, EbizCheckboxGroup } from '../index.js';
+
+// 单个多选框状态
+const checkbox1 = ref(true);
+const checkboxDisabled = ref(true);
+
+// 多选框组的值
+const groupValue = ref(['option1']);
+
+// 多选框组的配置选项
+const options = [
+  { label: '选项一', value: 'option1' },
+  { label: '选项二', value: 'option2' },
+  { label: '选项三', value: 'option3', disabled: true }
+];
+
+// 多选框组的值变化事件
+const onGroupChange = (value, context) => {
+  console.log('选中值变化:', value);
+  console.log('上下文信息:', context);
+};
+
+// 全选功能的值
+const allCheckValue = ref(['1']);
+
+// 全选状态变化事件
+const onCheckAllChange = (checked) => {
+  if (checked) {
+    allCheckValue.value = ['1', '2', '3'];
+  } else {
+    allCheckValue.value = [];
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.checkbox-demo {
+  padding: 20px;
+
+  h2 {
+    margin-bottom: 20px;
+    font-size: 24px;
+  }
+
+  h3 {
+    margin: 20px 0 10px;
+    font-size: 18px;
+  }
+
+  .demo-section {
+    padding: 16px;
+    margin-bottom: 16px;
+    border: 1px solid #eee;
+    border-radius: 4px;
+
+    .t-checkbox {
+      margin-right: 16px;
+    }
+  }
+}
 </style> 

package/src/views/DataContainer.vue

@@ -1,20 +1,20 @@
-<template>
-  <div>
-    <ebiz-route-breadcrumb />
-    <ebiz-data-container />
-  </div>
-</template>
-
-<script>
-import { EbizDataContainer } from '@/index.js'
-
-export default {
-  name: 'DataContainerDemo',
-  components: {
-    EbizDataContainer
-  }
-}
-</script>
-
-<style scoped>
+<template>
+  <div>
+    <ebiz-route-breadcrumb />
+    <ebiz-data-container />
+  </div>
+</template>
+
+<script>
+import { EbizDataContainer } from '@/index.js'
+
+export default {
+  name: 'DataContainerDemo',
+  components: {
+    EbizDataContainer
+  }
+}
+</script>
+
+<style scoped>
 </style> 

package/src/views/DialogDemo.vue

@@ -1,126 +1,126 @@
-<template>
-  <div class="dialog-demo">
-    <h1>TDesign Dialog 组件示例</h1>
-
-    <h2>基础对话框</h2>
-    <div class="demo-section">
-      <EbizButton theme="primary" @click="showBasicDialog = true">打开基础对话框</EbizButton>
-      <EbizDialog v-model:visible="showBasicDialog" header="基础对话框" :body="'这是一个基础对话框，用于展示简单的信息或进行简单的操作。'"
-        :confirm-btn="{ content: '确认', theme: 'primary' }" cancel-btn="取消" />
-    </div>
-
-    <h2>不同模式的对话框</h2>
-    <div class="demo-section">
-      <EbizButton @click="showModalDialog = true" style="margin-right: 16px;">模态对话框</EbizButton>
-      <EbizButton @click="showModelessDialog = true" style="margin-right: 16px;">非模态对话框</EbizButton>
-      <EbizButton @click="showFullscreenDialog = true">全屏对话框</EbizButton>
-
-      <!-- 模态对话框 -->
-      <EbizDialog v-model:visible="showModalDialog" header="模态对话框" mode="modal" :body="'模态对话框会阻止用户与页面的其他部分交互，直到对话框关闭。'"
-        :confirm-btn="{ content: '确认', theme: 'primary' }" cancel-btn="取消" />
-
-      <!-- 非模态对话框 -->
-      <EbizDialog v-model:visible="showModelessDialog" header="非模态对话框" mode="modeless"
-        :body="'非模态对话框不会阻止用户与页面的其他部分交互，可以同时进行其他操作。'" :confirm-btn="{ content: '确认', theme: 'primary' }"
-        cancel-btn="取消" />
-
-      <!-- 全屏对话框 -->
-      <EbizDialog v-model:visible="showFullscreenDialog" header="全屏对话框" mode="full-screen"
-        :body="'全屏对话框会占据整个屏幕，通常用于需要用户完全专注于某项任务的场景。'" :confirm-btn="{ content: '确认', theme: 'primary' }"
-        cancel-btn="取消" />
-    </div>
-
-    <h2>自定义内容的对话框</h2>
-    <div class="demo-section">
-      <EbizButton @click="showCustomDialog = true">打开自定义内容对话框</EbizButton>
-      <EbizDialog v-model:visible="showCustomDialog" header="自定义内容" :width="500">
-        <template #body>
-          <div style="padding: 20px;">
-            <h3>这是自定义的内容区域</h3>
-            <p>可以在这里放置任何你想要展示的内容，包括表单、图表、列表等。</p>
-            <div style="margin-top: 20px;">
-              <EbizTdesignInput v-model="customInput" placeholder="请输入内容" />
-            </div>
-          </div>
-        </template>
-        <template #footer>
-          <div style="display: flex; justify-content: flex-end;">
-            <EbizButton @click="showCustomDialog = false" style="margin-right: 8px;">取消</EbizButton>
-            <EbizButton theme="primary" @click="handleCustomConfirm">确认</EbizButton>
-          </div>
-        </template>
-      </EbizDialog>
-    </div>
-
-    <h2>可拖拽的对话框</h2>
-    <div class="demo-section">
-      <EbizButton @click="showDraggableDialog = true">打开可拖拽对话框</EbizButton>
-      <EbizDialog v-model:visible="showDraggableDialog" header="可拖拽对话框" :draggable="true" :body="'这个对话框可以通过拖拽标题栏进行移动。'"
-        :confirm-btn="{ content: '确认', theme: 'primary' }" cancel-btn="取消" />
-    </div>
-
-    <h2>不同位置的对话框</h2>
-    <div class="demo-section">
-      <EbizButton @click="showTopDialog = true" style="margin-right: 16px;">顶部对话框</EbizButton>
-      <EbizButton @click="showCenterDialog = true">居中对话框</EbizButton>
-
-      <!-- 顶部对话框 -->
-      <EbizDialog v-model:visible="showTopDialog" header="顶部对话框" placement="top" :body="'这个对话框位于顶部。'"
-        :confirm-btn="{ content: '确认', theme: 'primary' }" cancel-btn="取消" />
-
-      <!-- 居中对话框 -->
-      <EbizDialog v-model:visible="showCenterDialog" header="居中对话框" placement="center" :body="'这个对话框位于页面中央。'"
-        :confirm-btn="{ content: '确认', theme: 'primary' }" cancel-btn="取消" />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { EbizDialog, EbizButton, EbizTdesignInput } from '../index.js';
-
-// 基础对话框
-const showBasicDialog = ref(false);
-
-// 不同模式的对话框
-const showModalDialog = ref(false);
-const showModelessDialog = ref(false);
-const showFullscreenDialog = ref(false);
-
-// 自定义内容的对话框
-const showCustomDialog = ref(false);
-const customInput = ref('');
-
-// 可拖拽的对话框
-const showDraggableDialog = ref(false);
-
-// 不同位置的对话框
-const showTopDialog = ref(false);
-const showCenterDialog = ref(false);
-
-// 自定义确认处理函数
-const handleCustomConfirm = () => {
-  // 在实际应用中，这里可以添加表单验证或数据处理逻辑
-  console.log('自定义确认按钮点击，输入内容：', customInput.value);
-  showCustomDialog.value = false;
-};
-</script>
-
-<style lang="less" scoped>
-.dialog-demo {
-  padding: 20px;
-  
-  h1 {
-    margin-bottom: 20px;
-  }
-  
-  h2 {
-    margin-top: 30px;
-    margin-bottom: 16px;
-  }
-  
-  .demo-section {
-    margin-bottom: 24px;
-  }
-}
+<template>
+  <div class="dialog-demo">
+    <h1>TDesign Dialog 组件示例</h1>
+
+    <h2>基础对话框</h2>
+    <div class="demo-section">
+      <EbizButton theme="primary" @click="showBasicDialog = true">打开基础对话框</EbizButton>
+      <EbizDialog v-model:visible="showBasicDialog" header="基础对话框" :body="'这是一个基础对话框，用于展示简单的信息或进行简单的操作。'"
+        :confirm-btn="{ content: '确认', theme: 'primary' }" cancel-btn="取消" />
+    </div>
+
+    <h2>不同模式的对话框</h2>
+    <div class="demo-section">
+      <EbizButton @click="showModalDialog = true" style="margin-right: 16px;">模态对话框</EbizButton>
+      <EbizButton @click="showModelessDialog = true" style="margin-right: 16px;">非模态对话框</EbizButton>
+      <EbizButton @click="showFullscreenDialog = true">全屏对话框</EbizButton>
+
+      <!-- 模态对话框 -->
+      <EbizDialog v-model:visible="showModalDialog" header="模态对话框" mode="modal" :body="'模态对话框会阻止用户与页面的其他部分交互，直到对话框关闭。'"
+        :confirm-btn="{ content: '确认', theme: 'primary' }" cancel-btn="取消" />
+
+      <!-- 非模态对话框 -->
+      <EbizDialog v-model:visible="showModelessDialog" header="非模态对话框" mode="modeless"
+        :body="'非模态对话框不会阻止用户与页面的其他部分交互，可以同时进行其他操作。'" :confirm-btn="{ content: '确认', theme: 'primary' }"
+        cancel-btn="取消" />
+
+      <!-- 全屏对话框 -->
+      <EbizDialog v-model:visible="showFullscreenDialog" header="全屏对话框" mode="full-screen"
+        :body="'全屏对话框会占据整个屏幕，通常用于需要用户完全专注于某项任务的场景。'" :confirm-btn="{ content: '确认', theme: 'primary' }"
+        cancel-btn="取消" />
+    </div>
+
+    <h2>自定义内容的对话框</h2>
+    <div class="demo-section">
+      <EbizButton @click="showCustomDialog = true">打开自定义内容对话框</EbizButton>
+      <EbizDialog v-model:visible="showCustomDialog" header="自定义内容" :width="500">
+        <template #body>
+          <div style="padding: 20px;">
+            <h3>这是自定义的内容区域</h3>
+            <p>可以在这里放置任何你想要展示的内容，包括表单、图表、列表等。</p>
+            <div style="margin-top: 20px;">
+              <EbizTdesignInput v-model="customInput" placeholder="请输入内容" />
+            </div>
+          </div>
+        </template>
+        <template #footer>
+          <div style="display: flex; justify-content: flex-end;">
+            <EbizButton @click="showCustomDialog = false" style="margin-right: 8px;">取消</EbizButton>
+            <EbizButton theme="primary" @click="handleCustomConfirm">确认</EbizButton>
+          </div>
+        </template>
+      </EbizDialog>
+    </div>
+
+    <h2>可拖拽的对话框</h2>
+    <div class="demo-section">
+      <EbizButton @click="showDraggableDialog = true">打开可拖拽对话框</EbizButton>
+      <EbizDialog v-model:visible="showDraggableDialog" header="可拖拽对话框" :draggable="true" :body="'这个对话框可以通过拖拽标题栏进行移动。'"
+        :confirm-btn="{ content: '确认', theme: 'primary' }" cancel-btn="取消" />
+    </div>
+
+    <h2>不同位置的对话框</h2>
+    <div class="demo-section">
+      <EbizButton @click="showTopDialog = true" style="margin-right: 16px;">顶部对话框</EbizButton>
+      <EbizButton @click="showCenterDialog = true">居中对话框</EbizButton>
+
+      <!-- 顶部对话框 -->
+      <EbizDialog v-model:visible="showTopDialog" header="顶部对话框" placement="top" :body="'这个对话框位于顶部。'"
+        :confirm-btn="{ content: '确认', theme: 'primary' }" cancel-btn="取消" />
+
+      <!-- 居中对话框 -->
+      <EbizDialog v-model:visible="showCenterDialog" header="居中对话框" placement="center" :body="'这个对话框位于页面中央。'"
+        :confirm-btn="{ content: '确认', theme: 'primary' }" cancel-btn="取消" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { EbizDialog, EbizButton, EbizTdesignInput } from '../index.js';
+
+// 基础对话框
+const showBasicDialog = ref(false);
+
+// 不同模式的对话框
+const showModalDialog = ref(false);
+const showModelessDialog = ref(false);
+const showFullscreenDialog = ref(false);
+
+// 自定义内容的对话框
+const showCustomDialog = ref(false);
+const customInput = ref('');
+
+// 可拖拽的对话框
+const showDraggableDialog = ref(false);
+
+// 不同位置的对话框
+const showTopDialog = ref(false);
+const showCenterDialog = ref(false);
+
+// 自定义确认处理函数
+const handleCustomConfirm = () => {
+  // 在实际应用中，这里可以添加表单验证或数据处理逻辑
+  console.log('自定义确认按钮点击，输入内容：', customInput.value);
+  showCustomDialog.value = false;
+};
+</script>
+
+<style lang="less" scoped>
+.dialog-demo {
+  padding: 20px;
+  
+  h1 {
+    margin-bottom: 20px;
+  }
+  
+  h2 {
+    margin-top: 30px;
+    margin-bottom: 16px;
+  }
+  
+  .demo-section {
+    margin-bottom: 24px;
+  }
+}
 </style>